/* ============ Иконки в арках ============ */
.ic { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; }
.ic svg { width: 100%; height: 100%; }
.ic-arch { position: relative; width: 48px; height: 56px; border-radius: 24px; background: var(--red-soft); color: var(--red); }
.ic-arch svg { width: 26px; height: 26px; margin-top: 4px; }
.ic-arch::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(184, 145, 60, .45); border-radius: 20px; pointer-events: none; }
.ic-lg { width: 60px; height: 70px; border-radius: 28px; }
.ic-lg svg { width: 32px; height: 32px; }
.ic-lg::after { border-radius: 26px; }
.ic-sm { width: 22px; height: 22px; color: var(--red); }
.ic-tg { background: #e5f4fc; color: #1b8fc6; }
.ic-hero { width: 46%; height: auto; aspect-ratio: 1; color: var(--gold-l); position: relative; z-index: 1; }
.ic-hero svg { stroke-width: 1.1; }

.intent-grid li { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; }
.intent-grid li::before { display: none; }
#waterIntents li { display: flex; align-items: center; gap: 12px; padding-left: 0; }
#waterIntents li::before { display: none; }
.trust .pillar h3::before { display: none; }
.pillar > .ic-arch, .channel > .ic-arch { margin-bottom: 18px; }
.svc-top { align-items: center; }
.svc-top .svc-num { font-size: 26px; }
.svc > .svc-cat, .set > .svc-cat { align-self: start; margin: -4px 0 10px; }
.svc-title { color: inherit; }
.svc-title:hover { color: var(--red); }
.more-link { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--red); margin: 0 0 18px; }
.more-link:hover { text-decoration: underline; }
.set .svc-top { justify-content: space-between; margin-bottom: 6px; }
.set-red .ic-arch { background: rgba(255,255,255,.14); color: var(--gold-l); }
.tile-ic { display: grid; place-items: center; width: 46px; height: 54px; border-radius: 23px; background: rgba(255,255,255,.12); color: var(--gold-l); margin-bottom: auto; position: relative; z-index: 1; }
.tile-ic svg { width: 24px; height: 24px; }
.tile-soft .tile-ic { background: #fff; color: var(--red); }
.water-main .hero-cta { gap: 10px; }

/* ============ Фонари, чётки, каллиграфия ============ */
.lanterns { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: flex-start; padding: 0 22px; pointer-events: none; z-index: 1; }
.lan { display: block; width: 30px; color: var(--gold-l, #e2c77e); transform-origin: 50% 0; filter: drop-shadow(0 0 10px rgba(255, 217, 138, .45)); }
.lan.l2 { width: 40px; }
.lan.l3 { width: 26px; }
.lan svg { display: block; width: 100%; fill: currentColor; }
.lan .glass { fill: rgba(226, 199, 126, .2); stroke: currentColor; stroke-width: 1.2; }
.lan .flame { fill: #ffe3a3; }
.theme-green .tile-red::after { top: 24%; }

.tasbih { display: block; width: 130px; margin: 0 auto 22px; color: var(--gold-l, #e2c77e); }
.tasbih svg { display: block; width: 100%; overflow: visible; }
.tasbih circle { fill: rgba(226, 199, 126, .35); transform-box: fill-box; transform-origin: center; }
.tasbih path { stroke: currentColor; }
.tasbih b { display: block; font-family: var(--arabic); font-weight: 400; font-size: 22px; margin-top: 4px; }

.tile-main .bismillah { display: inline-block; }

/* ============ Анимации (только если в системе не выбрано «уменьшение движения») ============ */
@keyframes fb-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes fb-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 60% { opacity: .95; } 80% { opacity: .8; } }
@keyframes fb-write { from { clip-path: inset(-20% 0 -20% 100%); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes fb-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes fb-drift { to { background-position: 0 -192px; } }
@keyframes fb-bead { 0%, 4% { transform: scale(1.5); fill: #ffe3a3; } 10%, 100% { transform: scale(1); fill: rgba(226, 199, 126, .35); } }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes fb-float { 50% { transform: translateY(-8px); } }

.motion .lan { animation: fb-sway 3.6s ease-in-out infinite alternate; }
.motion .lan.l2 { animation-duration: 4.4s; animation-delay: -1.2s; }
.motion .lan.l3 { animation-duration: 3.1s; animation-delay: -2s; }
.motion .lan .flame { animation: fb-flicker 1.8s ease-in-out infinite; }
.motion .tile-main .bismillah { animation: fb-write 2.4s .3s cubic-bezier(.6, 0, .2, 1) both; }
.motion .tile-red .tile-big, .motion .svc-price {
  background: linear-gradient(100deg, var(--gold-l) 42%, #fff6d8 50%, var(--gold-l) 58%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: fb-shine 6s linear infinite;
}
.motion .svc-price { background-image: linear-gradient(100deg, var(--red) 42%, var(--gold) 50%, var(--red) 58%); }
.motion .theme-green .tile-red::before, .motion .tile-red::before { animation: fb-drift 40s linear infinite; }
.motion .ayah-box, .motion .cta .wrap::before { animation: fb-drift 60s linear infinite; }
.motion .tile-red::after { animation: fb-rise 1.6s .4s both; }
.motion .tasbih .beads { transform-origin: 60px 60px; animation: fb-spin 90s linear infinite; }
.motion .tasbih circle { animation: fb-bead 6.6s linear infinite; animation-delay: calc(var(--i) * .2s); }
.motion .big-arch .ic-hero { animation: fb-float 6s ease-in-out infinite; }


/* ============ Страница услуги ============ */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--bg-3); }
.crumbs a { color: var(--red); font-weight: 500; }
.svc-hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: center; padding: 26px 0 40px; }
.svc-hero h1 { font-size: clamp(34px, 4.6vw, 58px); margin: 6px 0 16px; }
.svc-hero .svc-cat { display: inline-block; margin: 0 0 14px; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 14px; background: var(--red-soft); color: var(--red); }
.svc-hero .lead { max-width: 640px; margin: 0 0 20px; }
.svc-price { font-size: 30px; font-weight: 800; color: var(--red); margin: 0 0 22px; letter-spacing: -.02em; }
.big-arch { position: relative; aspect-ratio: 3 / 4; border-radius: 28px; background: linear-gradient(160deg, #0f7a51, var(--dark)); display: grid; place-items: center; align-content: center; gap: 14px; overflow: hidden; color: var(--gold-l); }
.big-arch::before { content: ''; position: absolute; inset: 12px; border: 1.5px solid rgba(226, 199, 126, .45); border-radius: 28px; z-index: 1; }
.big-arch::after { content: ''; position: absolute; inset: 0; background: var(--arches-light) 0 0 / 56px 56px; opacity: .1; }
.big-arch b { position: relative; z-index: 1; color: #fff; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; text-align: center; padding: 0 20px; letter-spacing: -.02em; }
.box-green { padding: 40px; border-radius: 28px; background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.box-green::before { content: ''; position: absolute; inset: 0; background: var(--arches-light) 0 0 / 64px 64px; opacity: .07; }
.box-green > * { position: relative; }
.box-green .h-section { color: #fff; margin-bottom: 22px; }
.read-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.read-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); font-weight: 600; }
.read-list .n { flex: none; width: 34px; height: 40px; border-radius: 17px; display: grid; place-items: center; background: var(--gold-l); color: var(--dark); font-weight: 800; }
.why { display: flex; gap: 26px; align-items: flex-start; padding: 36px; border-radius: 28px; background: var(--red-soft); }
.why .lead { margin: 12px 0 0; }
.process { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.process li { position: relative; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.process li::after { counter-increment: p; content: counter(p); position: absolute; top: 20px; right: 28px; font-size: 44px; font-weight: 800; color: var(--bg-3); line-height: 1; }
.process h3 { font-size: 19px; font-weight: 700; margin: 18px 0 6px; }
.process p { margin: 0; color: var(--muted); font-size: 15px; }
.theme-green .ayah-box .ar { font-family: var(--arabic); font-size: clamp(30px, 4vw, 46px); color: var(--gold-l); margin: 0 0 10px; direction: rtl; }
.nf { text-align: center; padding: 50px 0 90px; }
.nf-arch { width: 200px; margin: 0 auto 30px; }
.nf .lead { margin: 16px auto 28px; }
.nf .hero-cta { justify-content: center; }
.modal-arch { display: block; width: 40px; height: 48px; margin-bottom: 10px; border-radius: 20px; background: var(--red-soft); border: 1.5px solid rgba(184, 145, 60, .5); }
@media (max-width: 900px) {
  .svc-hero { grid-template-columns: 1fr; }
  .svc-hero-art { max-width: 240px; }
  .process { grid-template-columns: 1fr 1fr; }
  .read-list { grid-template-columns: 1fr; }
  .why { flex-direction: column; padding: 26px; }
  .box-green { padding: 28px 22px; }
}
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* ============ Версия для слабовидящих ============ */
.a11y-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; }
.a11y-btn svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { border-color: var(--red); }
@media (max-width: 1320px) { .a11y-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .a11y-btn { padding: 9px 11px; } }
@media (max-width: 900px) { .a11y-btn { order: 2; margin-left: auto; } .burger { order: 3; } }
.a11y-panel { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.a11y-grid { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; }
.a11y-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.a11y-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-opts button { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: #000; font-weight: 700; font-size: 15px; }
.a11y-opts button[aria-pressed="true"] { border-color: var(--red); background: var(--red-soft); }
.a11y-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* крупный шрифт */
html.a11y-font-1 body { zoom: 1.25; }
html.a11y-font-2 body { zoom: 1.5; }

/* межбуквенный интервал (арабский текст не трогаем — буквы в нём соединяются) */
html.a11y-sp-1 body :not([lang="ar"]):not([lang="ar"] *) { letter-spacing: .08em !important; word-spacing: .16em !important; }
html.a11y-sp-2 body :not([lang="ar"]):not([lang="ar"] *) { letter-spacing: .16em !important; word-spacing: .3em !important; }
html.a11y-sp-1 body, html.a11y-sp-2 body { line-height: 1.75; }

/* без изображений и без анимации */
html.a11y-noimg img, html.a11y-noimg video, html.a11y-noimg .tile-art, html.a11y-noimg .lanterns, html.a11y-noimg .tasbih svg,
html.a11y-noimg .big-arch .ic-hero, html.a11y-noimg .partner-card { display: none !important; }
html.a11y-noimg .tile-red::after, html.a11y-noimg .cta .wrap::after, html.a11y-noimg .auth-side::after { display: none !important; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation: none !important; transition: none !important; }
html.a11y-nomotion .will-anim { clip-path: none !important; opacity: 1 !important; transform: none !important; }
html.a11y-nomotion .tile-red .tile-big { color: var(--gold-l); -webkit-background-clip: border-box; background: none; }

/* цветовые схемы */
html.a11y-bw { --fg: #000; --bgc: #fff; }
html.a11y-wb { --fg: #fff; --bgc: #000; }
html.a11y-blue { --fg: #063462; --bgc: #9dd1ff; }
html.a11y-bw, html.a11y-wb, html.a11y-blue { background: var(--bgc); }
html.a11y-bw body, html.a11y-wb body, html.a11y-blue body,
html.a11y-bw body *, html.a11y-wb body *, html.a11y-blue body * {
  background-color: var(--bgc) !important; color: var(--fg) !important; border-color: var(--fg) !important;
  background-image: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important;
  -webkit-text-fill-color: var(--fg) !important;
}
html.a11y-bw .btn, html.a11y-wb .btn, html.a11y-blue .btn,
html.a11y-bw .svc, html.a11y-wb .svc, html.a11y-blue .svc,
html.a11y-bw .tile, html.a11y-wb .tile, html.a11y-blue .tile,
html.a11y-bw .set, html.a11y-wb .set, html.a11y-blue .set,
html.a11y-bw .channel, html.a11y-wb .channel, html.a11y-blue .channel,
html.a11y-bw .pillar, html.a11y-wb .pillar, html.a11y-blue .pillar,
html.a11y-bw .faq-item, html.a11y-wb .faq-item, html.a11y-blue .faq-item,
html.a11y-bw .intent-grid li, html.a11y-wb .intent-grid li, html.a11y-blue .intent-grid li,
html.a11y-bw .water-main, html.a11y-wb .water-main, html.a11y-blue .water-main,
html.a11y-bw .water-side, html.a11y-wb .water-side, html.a11y-blue .water-side,
html.a11y-bw .ayah-box, html.a11y-wb .ayah-box, html.a11y-blue .ayah-box,
html.a11y-bw .partner, html.a11y-wb .partner, html.a11y-blue .partner,
html.a11y-bw .cta .wrap, html.a11y-wb .cta .wrap, html.a11y-blue .cta .wrap,
html.a11y-bw .field input, html.a11y-wb .field input, html.a11y-blue .field input,
html.a11y-bw .field select, html.a11y-wb .field select, html.a11y-blue .field select,
html.a11y-bw .field textarea, html.a11y-wb .field textarea, html.a11y-blue .field textarea { border: 2px solid var(--fg) !important; }
html.a11y-bw ul.dots li::before, html.a11y-wb ul.dots li::before, html.a11y-blue ul.dots li::before,
html.a11y-bw .set li::before, html.a11y-wb .set li::before, html.a11y-blue .set li::before { background-color: var(--fg) !important; }
html.a11y-bw a, html.a11y-wb a, html.a11y-blue a { text-decoration: underline; }
html.a11y-bw .btn, html.a11y-wb .btn, html.a11y-blue .btn, html.a11y-bw .a11y-btn, html.a11y-wb .a11y-btn, html.a11y-blue .a11y-btn { text-decoration: none; }
html.a11y-bw :focus-visible, html.a11y-wb :focus-visible, html.a11y-blue :focus-visible { outline: 3px solid var(--fg) !important; outline-offset: 3px; }
/* декоративные узоры и круги в контрастных схемах убираем */
html.a11y-bw body::before, html.a11y-wb body::before, html.a11y-blue body::before,
html.a11y-bw .tile-red::before, html.a11y-bw .tile-red::after, html.a11y-wb .tile-red::before, html.a11y-wb .tile-red::after, html.a11y-blue .tile-red::before, html.a11y-blue .tile-red::after,
html.a11y-bw .tile-main::before, html.a11y-wb .tile-main::before, html.a11y-blue .tile-main::before,
html.a11y-bw .tile-dark::after, html.a11y-wb .tile-dark::after, html.a11y-blue .tile-dark::after,
html.a11y-bw .ayah-box::before, html.a11y-bw .ayah-box::after, html.a11y-wb .ayah-box::before, html.a11y-wb .ayah-box::after, html.a11y-blue .ayah-box::before, html.a11y-blue .ayah-box::after,
html.a11y-bw .water-main::before, html.a11y-bw .water-main::after, html.a11y-wb .water-main::before, html.a11y-wb .water-main::after, html.a11y-blue .water-main::before, html.a11y-blue .water-main::after,
html.a11y-bw .partner::before, html.a11y-wb .partner::before, html.a11y-blue .partner::before,
html.a11y-bw .cta .wrap::before, html.a11y-bw .cta .wrap::after, html.a11y-wb .cta .wrap::before, html.a11y-wb .cta .wrap::after, html.a11y-blue .cta .wrap::before, html.a11y-blue .cta .wrap::after,
html.a11y-bw .footer::before, html.a11y-wb .footer::before, html.a11y-blue .footer::before,
html.a11y-bw .big-arch::after, html.a11y-wb .big-arch::after, html.a11y-blue .big-arch::after,
html.a11y-bw .box-green::before, html.a11y-wb .box-green::before, html.a11y-blue .box-green::before,
html.a11y-bw .tile-art, html.a11y-wb .tile-art, html.a11y-blue .tile-art,
html.a11y-bw .ic-arch::after, html.a11y-wb .ic-arch::after, html.a11y-blue .ic-arch::after { display: none !important; }
/* образцы цветов в самой панели сохраняют свои цвета */
html .a11y-panel .sw-normal { background: #0b3b2a !important; color: #e2c77e !important; -webkit-text-fill-color: #e2c77e !important; }
html .a11y-panel .sw-bw { background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
html .a11y-panel .sw-wb { background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html .a11y-panel .sw-blue { background: #9dd1ff !important; color: #063462 !important; -webkit-text-fill-color: #063462 !important; }

/* ============ правки после проверки ============ */
.header .a11y-panel .wrap { height: auto; }
html.a11y-bw .a11y-opts button[aria-pressed="true"], html.a11y-wb .a11y-opts button[aria-pressed="true"], html.a11y-blue .a11y-opts button[aria-pressed="true"] { outline: 4px solid var(--fg) !important; outline-offset: 3px; }
html.a11y-bw .brand::before, html.a11y-wb .brand::before, html.a11y-blue .brand::before { background: var(--fg) !important; color: var(--bgc) !important; }
.ic-arch svg { width: 30px; height: 30px; }
.ic-lg svg { width: 36px; height: 36px; }
.tile-ic svg { width: 28px; height: 28px; }
.lanterns { padding: 0 26px; }
.lan { width: 38px; }
.lan.l2 { width: 50px; }
.lan.l3 { width: 32px; }

/* ============ Бисмилля: кнопка и свечение во время звучания ============ */
.bism-play { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px 12px; padding: 6px 12px 6px 10px; border-radius: 14px; border: 1.5px solid rgba(184, 145, 60, .45); background: #fff; color: var(--gold, #b8913c); font-size: 13px; font-weight: 600; vertical-align: middle; position: relative; z-index: 1; }
.bism-play svg { width: 18px; height: 18px; }
.bism-play:hover { border-color: var(--gold, #b8913c); }
.tile-main .bismillah { transition: text-shadow .6s, color .6s; }
.tile-main .bismillah.reciting { text-shadow: 0 0 18px rgba(226, 199, 126, .9), 0 0 2px rgba(184, 145, 60, .6); }
.motion .tile-main .bismillah.reciting { animation: fb-write 2.4s cubic-bezier(.6, 0, .2, 1) both; }

/* ============ Первый экран на всю ширину ============ */
.hero-full {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: 64px 0 0; margin-bottom: 8px;
  background:
    radial-gradient(55% 70% at 78% 30%, rgba(226, 199, 126, .22), transparent 70%),
    radial-gradient(40% 50% at 8% 95%, rgba(46, 160, 110, .35), transparent 70%),
    linear-gradient(160deg, #0f7a51 0%, #0c5a3c 45%, #0b3b2a 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--arches-light) 0 0 / 88px 88px; opacity: .09; }
.motion .hero-bg { animation: fb-drift 60s linear infinite; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

.hero-full .bismillah { display: inline-block; margin: 0 0 18px; font-family: var(--arabic); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.5; color: var(--gold-l); direction: rtl; text-shadow: 0 0 24px rgba(226, 199, 126, .35); }
.motion .hero-full .bismillah { animation: fb-write 2.4s .3s cubic-bezier(.6, 0, .2, 1) both; }
.hero-full .bismillah.reciting { text-shadow: 0 0 22px rgba(255, 227, 163, .95), 0 0 4px rgba(255, 227, 163, .8); }
.hero-full .bism-play { background: rgba(255, 255, 255, .1); border-color: rgba(226, 199, 126, .5); color: var(--gold-l); margin: 0 0 18px 14px; }
.hero-full .bism-play:hover { background: rgba(255, 255, 255, .18); }
.hero-full h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; color: #fff; margin: 0; max-width: 720px; }
.hero-full h1 .gold { color: var(--gold-l); display: block; }
.hero-full .lead { color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.4vw, 20px); margin: 22px 0 32px; max-width: 600px; }
.hero-full .lead b { color: #fff; }
.hero-full .hero-cta { gap: 12px; }
.btn-gold-cta { background: linear-gradient(135deg, #f3dc9c, var(--gold-l) 55%, #c9a24a); color: #0b3b2a; box-shadow: 0 14px 34px -14px rgba(226, 199, 126, .8); }
.btn-gold-cta:hover { filter: brightness(1.05); }
.hero-full .btn-glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.hero-full .btn-glass:hover { background: rgba(255, 255, 255, .2); }

/* арка с мечетью и фонарями */
.hero-visual { display: flex; justify-content: center; }
.hero-arch {
  position: relative; width: min(420px, 100%); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 28px; border: 1.5px solid rgba(226, 199, 126, .55);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 0 10px rgba(11, 59, 42, .35), inset 0 0 0 11px rgba(226, 199, 126, .28), 0 40px 90px -40px rgba(0, 0, 0, .55);
}
.hero-arch::before { content: ''; position: absolute; inset: 0; background: var(--arches-light) 0 0 / 56px 56px; opacity: .12; }
.hero-arch .lanterns { top: 6%; padding: 0 20%; justify-content: space-between; }
.hero-arch .lan { width: 40px; }
.hero-arch .lan.l2 { width: 54px; }
.hero-arch .lan.l3 { width: 34px; }
.hero-glow { position: absolute; left: 50%; top: 52%; width: 90%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 227, 163, .38), rgba(226, 199, 126, .1) 45%, transparent 70%); }
.motion .hero-glow { animation: fb-breathe 6s ease-in-out infinite; }
@keyframes fb-breathe { 50% { opacity: .65; scale: 1.06; } }
.hero-mosque { position: absolute; left: 8%; right: 8%; bottom: 0; height: 52%; background: var(--mosque) center bottom / contain no-repeat; opacity: .3; }
.motion .hero-mosque { animation: fb-rise 1.6s .3s both; }
.hero-calli { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--arabic); font-size: clamp(34px, 3.6vw, 50px); color: var(--gold-l); direction: rtl; text-shadow: 0 0 26px rgba(226, 199, 126, .5); }

/* плашки с цифрами */
.hero-stats { list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; z-index: 2; }
.stat { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 26px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.35; }
.stat a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(226, 199, 126, .6); text-underline-offset: 3px; }
.stat-num { font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--gold-l); white-space: nowrap; }
.motion .stat-num { background: linear-gradient(100deg, var(--gold-l) 42%, #fff6d8 50%, var(--gold-l) 58%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fb-shine 6s linear infinite; }
.stat-ic { flex: none; width: 48px; height: 56px; border-radius: 24px; display: grid; place-items: center; background: rgba(226, 199, 126, .16); color: var(--gold-l); }
.stat-ic svg { width: 28px; height: 28px; }

/* нижний край — ряд арок */
.hero-edge { height: 34px; margin-top: 44px; background: radial-gradient(circle at 24px 34px, var(--bg) 23px, transparent 24px) 0 0 / 48px 34px repeat-x; }

@media (max-width: 960px) {
  .hero-full { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { order: -1; }
  .hero-arch { width: min(280px, 80%); }
  .hero-stats { grid-template-columns: 1fr; margin-top: 32px; }
}

/* версия для слабовидящих: всё содержимое первого экрана в выбранной схеме */
html.a11y-bw .hero-bg, html.a11y-wb .hero-bg, html.a11y-blue .hero-bg,
html.a11y-bw .hero-edge, html.a11y-wb .hero-edge, html.a11y-blue .hero-edge,
html.a11y-bw .hero-arch::before, html.a11y-wb .hero-arch::before, html.a11y-blue .hero-arch::before,
html.a11y-bw .hero-glow, html.a11y-wb .hero-glow, html.a11y-blue .hero-glow,
html.a11y-bw .hero-mosque, html.a11y-wb .hero-mosque, html.a11y-blue .hero-mosque { display: none !important; }
html.a11y-bw .stat, html.a11y-wb .stat, html.a11y-blue .stat, html.a11y-bw .hero-arch, html.a11y-wb .hero-arch, html.a11y-blue .hero-arch { border: 2px solid var(--fg) !important; }
html.a11y-noimg .hero-visual { display: none !important; }
html.a11y-nomotion .stat-num { color: var(--gold-l); -webkit-background-clip: border-box; background: none; }

/* первый экран на телефоне: ничего не вылезает за край */
.hero-grid > * { min-width: 0; }
@media (max-width: 960px) {
  .hero-full .btn { white-space: normal; text-align: center; width: 100%; }
  .hero-full h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero-full .bismillah { font-size: 28px; }
  .hero-arch { width: min(240px, 70%); }
}