/* ============================================================
   Doktor Mahmudov — Premium Swiss system
   Width 1640 · frame 20 · H1 70 · H2 40 · H3 16
   ============================================================ */
:root{
  /* palette — drawn from the emerald metal logo */
  --paper:#f3f1ea;
  --white:#faf9f5;
  --ink:#0a0b09;
  --ink2:#151713;
  --emerald:#0c3a26;
  --em-deep:#063524;
  --em-mid:#11543a;
  --em-bright:#1f8a5b;
  --em-pale:#e7ede8;
  --gold:#9a7f3f;
  --gold2:#c4a96a;
  --tx:#0a0b09;
  --tx2:#4b4a44;
  --tx3:#8d8b83;
  --line:#0a0b09;
  --hair:rgba(10,11,9,.13);

  /* dark hero scene */
  --dk-bg:#06100b;
  --dk-bg2:#0a1812;
  --on-dk:#f1efe7;
  --on-dk2:rgba(241,239,231,.6);
  --on-dk3:rgba(241,239,231,.32);
  --on-dk-hair:rgba(241,239,231,.14);

  --maxw:1640px;
  --frame:20px;
  --gut:clamp(28px,4.6vw,76px);

  --h1:clamp(48px,5.6vw,82px);
  --h2:clamp(30px,3vw,40px);
  --h3:16px;

  --fs:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fd:"Cormorant Garamond",Georgia,serif;
  /* portal labels — client font with a tuned monospace fallback */
  --fmono:"TT Interphases Pro Mono","Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --portal-label:13px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ───── NIGHT MODE (day is the default :root above) ───── */
html[data-theme="night"]{
  --paper:#06100b;
  --white:#0a1812;
  --ink:#f1efe7;
  --ink2:#e8e6de;
  --em-pale:#0e2a1e;
  --em-mid:#2bbd80;
  --tx:#f1efe7;
  --tx2:rgba(241,239,231,.62);
  --tx3:rgba(241,239,231,.40);
  --line:#f1efe7;
  --hair:rgba(241,239,231,.14);
}
/* Accent bands paint on var(--ink), which itself flips light↔dark with the theme.
   In night mode the band turns light, so the on-dk* text vars (otherwise always
   light) must flip to dark too — else white type lands on a now-light band. */
html[data-theme="night"] .stats,
html[data-theme="night"] .cta,
html[data-theme="night"] .comm-accent,
html[data-theme="night"] .social,
html[data-theme="night"] .yt,
html[data-theme="night"] .cell-hadith{
  --on-dk:#0a0b09;
  --on-dk2:rgba(10,11,9,.66);
  --on-dk3:rgba(10,11,9,.48);
  --on-dk-hair:rgba(10,11,9,.14);
  --gold2:#876b2f;
}
html[data-theme="night"] .st{border-color:rgba(10,11,9,.12)}
/* Hover backgrounds with FIXED colors that ignore the theme: in night mode they
   must stay on the same light/dark side as their (flipped) text, or type vanishes.
   .course base is dark (--white) → keep hover dark. .comm-accent base is light
   (--ink) → keep hover light so the dark override text stays readable. */
html[data-theme="night"] .course:hover{background:#11241b}
html[data-theme="night"] .comm-accent:hover{background:#e7e3d5}
html[data-theme="night"] body{background:radial-gradient(120% 90% at 50% 0%,#0a1812,#06100b 60%)}
html{transition:background .5s var(--ease)}
body{transition:background .5s var(--ease),color .5s var(--ease)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--tx);
  font-family:var(--fs);
  font-size:var(--h3);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:var(--em-bright);color:#fff}

/* —— frame & container —— */
.frame{max-width:var(--maxw);margin:0 auto;padding:0 var(--frame)}
.shell{
  max-width:var(--maxw);margin:0 auto;
  border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  background:var(--white);
}
@media(max-width:880px){.shell{border:none}}

/* —— type —— */
.h1{font-size:var(--h1);font-weight:800;line-height:.95;letter-spacing:-.035em}
.h1 em{font-family:var(--fd);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--em-mid)}
.h2{font-size:var(--h2);font-weight:700;line-height:1.02;letter-spacing:-.025em}
.h2 em{font-family:var(--fd);font-style:italic;font-weight:500;color:var(--em-mid)}
.label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3)}
.serif{font-family:var(--fd)}

/* —— scroll progress —— */
#sp{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--em-mid),var(--gold2));pointer-events:none}

/* ───────────────── NAV ───────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:120;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--hair);transition:padding .3s var(--ease)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--frame);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
#nav.sm .nav-in{padding-top:10px;padding-bottom:10px}
.n-logo{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;background:none;border:none}
.n-mark{width:30px;height:30px;position:relative;flex-shrink:0;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.6px}
.n-mark i{position:relative;display:block;
  background:linear-gradient(135deg,var(--em-bright),var(--em-mid) 55%,var(--em-deep));
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);transition:transform .4s var(--ease),filter .4s var(--ease)}
.n-mark i:nth-child(1){border-radius:100% 0 0 0}
.n-mark i:nth-child(2){border-radius:0 100% 0 0}
.n-mark i:nth-child(3){border-radius:0 0 0 100%}
.n-mark i:nth-child(4){border-radius:0 0 100% 0}
.n-logo:hover .n-mark{filter:drop-shadow(0 0 4px rgba(31,138,91,.55))}
.n-logo:hover .n-mark i:nth-child(1){transform:translate(-1.5px,-1.5px)}
.n-logo:hover .n-mark i:nth-child(2){transform:translate(1.5px,-1.5px)}
.n-logo:hover .n-mark i:nth-child(3){transform:translate(-1.5px,1.5px)}
.n-logo:hover .n-mark i:nth-child(4){transform:translate(1.5px,1.5px)}
.n-brand{font-family:var(--fs);font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tx);white-space:nowrap}
.n-brand b{color:var(--em-mid);font-weight:700}
.n-links{display:flex;gap:30px;list-style:none}
.n-links a{font-size:13px;font-weight:500;color:var(--tx2);text-decoration:none;cursor:pointer;letter-spacing:.01em;transition:color .2s;position:relative;padding-bottom:2px}
.n-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--em-mid);transition:width .25s var(--ease)}
.n-links a:hover,.n-links a.on{color:var(--ink)}
.n-links a.on::after{width:100%}
.n-right{display:flex;align-items:center;gap:18px}
.n-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:none;border:1px solid var(--hair);border-radius:50%;cursor:pointer;color:var(--tx2);
  transition:color .2s,border-color .2s,background .2s,transform .4s var(--ease);flex-shrink:0}
@media(max-width:768px){.n-theme{width:44px;height:44px}}
.n-theme:hover{color:var(--tx);border-color:var(--tx3);transform:rotate(18deg)}
.n-theme svg{width:17px;height:17px;display:block}
.n-theme .ic-sun{display:none}
.n-theme .ic-moon{display:block}
html[data-theme="night"] .n-theme .ic-sun{display:block}
html[data-theme="night"] .n-theme .ic-moon{display:none}
.lang{display:flex;align-items:center;border:1px solid var(--hair);border-radius:2px;overflow:hidden}
.lang button{background:none;border:none;padding:7px 11px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tx3);cursor:pointer;transition:all .2s}
@media(max-width:768px){.lang button{padding:13px 14px;min-height:44px}}
.lang button.on{background:var(--ink);color:var(--paper)}
.n-btn{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:none;padding:12px 22px;cursor:pointer;transition:background .25s var(--ease)}
.n-btn:hover{background:var(--em-mid)}
.n-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.n-burger span{display:block;width:22px;height:1.5px;background:var(--tx)}
@media(max-width:980px){.n-links{display:none}}
@media(max-width:560px){.n-btn{display:none}.n-burger{display:flex}}

/* mobile menu */
#mob{position:fixed;inset:0;z-index:115;background:var(--paper);transform:translateX(100%);
  visibility:hidden;
  transition:transform .45s var(--ease),visibility .45s var(--ease);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
#mob.open{transform:translateX(0);visibility:visible}
#mob a{font-family:var(--fd);font-size:clamp(30px,8vw,48px);font-style:italic;font-weight:500;color:var(--tx2);
  text-decoration:none;padding:14px 0;width:78%;text-align:center;border-bottom:1px solid var(--hair);cursor:pointer}
#mob a:hover{color:var(--em-mid)}

/* ───────────────── PAGES ───────────────── */
.pg{display:none}
.pg.on{display:block;animation:pgIn .55s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
main{padding-top:63px}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.vs{opacity:1;transform:translateY(0)}

/* ───────────────── HERO (theme-aware) ───────────────── */
.hero{position:relative;overflow:hidden;background:var(--white);color:var(--ink);
  border-bottom:1px solid var(--hair);transition:background .6s var(--ease),color .6s var(--ease)}
.hero[data-th="dark"]{background:radial-gradient(120% 90% at 50% 6%,var(--dk-bg2),var(--dk-bg) 60%);color:var(--on-dk)}

/* —— hero background: video + ambient + veil —— */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero>.hero-in{position:relative;z-index:2}
.hero>.gates{position:relative;z-index:2}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.04);filter:saturate(1.22) contrast(1.08) brightness(1.02);
  transition:opacity 1.4s var(--ease)}
.hero-vid.ready{opacity:1}
.hero-ambient{position:absolute;inset:-25%;
  background:
    radial-gradient(38% 48% at 28% 30%,rgba(31,138,91,.30),transparent 62%),
    radial-gradient(44% 54% at 74% 66%,rgba(12,58,38,.55),transparent 64%),
    radial-gradient(30% 40% at 60% 18%,rgba(196,169,106,.14),transparent 60%);
  filter:blur(26px);animation:heroDrift 22s var(--ease) infinite alternate}
.hero[data-th="light"] .hero-ambient{opacity:.22}
@keyframes heroDrift{
  0%{transform:translate(-3%,-2%) scale(1.06) rotate(-1deg)}
  100%{transform:translate(3%,2%) scale(1.14) rotate(1.5deg)}}
.hero-veil{position:absolute;inset:0;
  background:radial-gradient(130% 96% at 50% 2%,rgba(6,16,11,.04),rgba(6,16,11,.58) 72%,rgba(6,16,11,.78))}
.hero[data-th="light"] .hero-veil{
  background:radial-gradient(125% 92% at 50% 8%,rgba(250,249,245,.5),rgba(250,249,245,.9) 72%)}
@media(prefers-reduced-motion:reduce){.hero-ambient{animation:none}}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--frame)}
.hero-top{padding:88px 0 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-h1{margin-top:0}
.h-eye{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:16px;color:var(--tx3);margin-bottom:34px}
.hero[data-th="dark"] .h-eye{color:var(--on-dk3)}
.h-eye::before,.h-eye::after{content:'';width:40px;height:1px;background:currentColor;opacity:.5}
.hero-h1{font-size:clamp(40px,5.4vw,76px);font-weight:800;line-height:.92;letter-spacing:-.045em;margin-bottom:18px;max-width:13ch}
.hero-h1 em{font-family:var(--fd);font-style:italic;font-weight:500;color:var(--gold2);letter-spacing:-.01em}
.hero[data-th="light"] .hero-h1 em{color:var(--em-mid)}
.h-sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tx2)}
.hero[data-th="dark"] .h-sub{color:var(--on-dk2)}

/* —— GATES —— */
.gates{position:relative;padding-bottom:clamp(36px,4.5vw,64px)}
.gates .hero-in{display:flex;flex-direction:column;align-items:center}
.gate{position:relative;background:none;border:none;cursor:pointer;color:inherit;padding:0}
.gate-seg{transition:transform .55s var(--ease),filter .55s var(--ease);will-change:transform;
  filter:drop-shadow(0 0 1.5px rgba(46,196,134,.55)) drop-shadow(0 22px 44px rgba(0,0,0,.5))}
.hero[data-th="light"] .gate-seg{filter:drop-shadow(0 0 1.5px rgba(31,138,91,.5)) drop-shadow(0 16px 36px rgba(12,58,38,.26))}
.gate:hover .gate-seg{filter:drop-shadow(0 0 5px rgba(46,196,134,.9)) drop-shadow(0 0 18px rgba(31,138,91,.45)) drop-shadow(0 26px 50px rgba(0,0,0,.55))}
.hero[data-th="light"] .gate:hover .gate-seg{filter:drop-shadow(0 0 4px rgba(31,138,91,.7)) drop-shadow(0 0 14px rgba(31,138,91,.3)) drop-shadow(0 20px 42px rgba(12,58,38,.3))}

/* ===== variation A — assembled brand logo (exact geometry from reference) ===== */
.gates[data-comp="cross"] .gates-grid{
  position:relative;width:min(460px,84vw);aspect-ratio:732/682;margin:0 auto}
.gates[data-comp="cross"] .gate{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);display:block}
.gates[data-comp="cross"] .gate-fig{position:absolute;inset:0;display:block}
.gates[data-comp="cross"] .gate-seg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.gates[data-comp="cross"] .gate-cap{display:none}
/* door opens outward from the centre on hover */
.gates[data-comp="cross"] .gate:nth-child(1):hover .gate-seg{transform:translate(-6%,-6%) scale(1.05)}
.gates[data-comp="cross"] .gate:nth-child(2):hover .gate-seg{transform:translate(6%,-6%) scale(1.05)}
.gates[data-comp="cross"] .gate:nth-child(3):hover .gate-seg{transform:translate(-6%,6%) scale(1.05)}
.gates[data-comp="cross"] .gate:nth-child(4):hover .gate-seg{transform:translate(6%,6%) scale(1.05)}

/* ===== UX layer: breathing glow · segment nav · invite · door intro ===== */
/* breathing accent glow — shaped to the PNG alpha via the wrapper */
.gates[data-comp="cross"] .gate-fig{animation:gateBreathe 2.5s ease-in-out infinite;will-change:filter,transform}
.gates[data-comp="cross"] .gate:nth-child(2) .gate-fig{animation-delay:.6s}
.gates[data-comp="cross"] .gate:nth-child(3) .gate-fig{animation-delay:1.2s}
.gates[data-comp="cross"] .gate:nth-child(4) .gate-fig{animation-delay:1.8s}
@keyframes gateBreathe{
  0%,100%{filter:drop-shadow(0 0 2px rgba(74,222,128,.22))}
  50%{filter:drop-shadow(0 0 9px rgba(74,222,128,.42)) drop-shadow(0 0 20px rgba(31,138,91,.3))}}

/* in-segment navigation block: number · title · description */
.gates[data-comp="cross"] .gate-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:5px;width:max-content;max-width:78%;
  pointer-events:none;text-align:center;
  opacity:0;animation:labelIn .6s var(--ease) forwards}
.gates[data-comp="cross"] .gate:nth-child(1) .gate-label{animation-delay:1s}
.gates[data-comp="cross"] .gate:nth-child(2) .gate-label{animation-delay:1.18s}
.gates[data-comp="cross"] .gate:nth-child(3) .gate-label{animation-delay:1.36s}
.gates[data-comp="cross"] .gate:nth-child(4) .gate-label{animation-delay:1.54s}
@keyframes labelIn{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}
.gl-num{font-size:11px;font-weight:700;letter-spacing:.22em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#f6e7be,#e6c878 45%,#bd9442 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#d9b66a}
.gl-tx{font-family:var(--fd);font-size:clamp(18px,1.9vw,25px);font-weight:600;line-height:1.02;
  letter-spacing:-.01em;color:#f3f7f3;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.gl-desc{font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.25;
  color:rgba(220,235,224,.74);text-shadow:0 1px 8px rgba(0,0,0,.5);max-width:18ch}
.gates[data-comp="row"] .gate-label{display:none}

/* hover: emerald glow + lift on the focused segment, dim the others */
.gates[data-comp="cross"] .gate{transition:transform .4s var(--ease),filter .4s var(--ease),opacity .4s var(--ease)}
.gates[data-comp="cross"] .gates-grid:hover .gate{opacity:.4;filter:saturate(.7) brightness(.82)}
.gates[data-comp="cross"] .gates-grid:hover .gate:hover{opacity:1;filter:none;transform:translateY(-5px) scale(1.015);z-index:4}
.gates[data-comp="cross"] .gate:hover .gate-fig{
  animation:none;
  filter:drop-shadow(0 0 14px rgba(74,222,128,.6)) drop-shadow(0 0 34px rgba(45,196,134,.4)) drop-shadow(0 14px 28px rgba(0,0,0,.45))}
.gates[data-comp="cross"] .gate:hover .gl-tx{color:#fff}
.gates[data-comp="cross"] .gate:hover .gl-desc{color:rgba(190,245,214,.92)}

/* ===== variation PORTAL — exact reference re-draw (default home) ===== */
/* the four metal petals as a clickable pinwheel: dot + mono label + click cue */
.hero[data-comp="portal"]{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero[data-comp="portal"] .hero-top{padding:clamp(66px,8.5vh,88px) 0 2px}
.hero[data-comp="portal"] .h-eye{margin-bottom:14px}
.hero[data-comp="portal"] .hero-h1{font-size:clamp(33px,4.4vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.025em;margin-bottom:10px;max-width:16ch}
.hero[data-comp="portal"] .hero-h1 .h1-a{display:block}
.hero[data-comp="portal"] .h-sub{display:none}
/* near-black scene so the emerald petals read like the reference; video stays faintly alive */
.hero[data-comp="portal"][data-th="dark"]{background:radial-gradient(120% 90% at 50% 40%,#081410,#02060400 0),#020403}
.hero[data-comp="portal"][data-th="dark"] .hero-veil{
  background:radial-gradient(125% 105% at 50% 46%,rgba(2,8,5,.30),rgba(2,8,5,.62) 60%,rgba(0,0,0,.82))}
/* night portal: petals were near-black — lift brightness/saturation so they glow like day */
.hero[data-comp="portal"][data-th="dark"] .gate-seg{
  filter:brightness(1.24) saturate(1.2) drop-shadow(0 0 2px rgba(46,196,134,.6)) drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.hero[data-comp="portal"][data-th="dark"] .gate:hover .gate-seg{
  filter:brightness(1.3) saturate(1.25) drop-shadow(0 0 6px rgba(74,222,128,.9)) drop-shadow(0 0 20px rgba(31,138,91,.5)) drop-shadow(0 26px 50px rgba(0,0,0,.55))}
.hero[data-comp="portal"][data-th="light"] .hero-veil{
  background:radial-gradient(125% 100% at 50% 44%,rgba(248,247,242,.20),rgba(248,247,242,.64) 66%,rgba(248,247,242,.82))}
.hero[data-comp="portal"] .hero-ambient{opacity:.5}

.gates[data-comp="portal"]{padding-bottom:clamp(16px,3vw,40px)}
/* the logo mark — four metal quarters in the brand's asymmetric division */
.gates[data-comp="portal"] .gates-grid{
  position:relative;width:min(460px,84vw);aspect-ratio:732/682;margin:0 auto;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55))}
.gates[data-comp="portal"] .gate{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);display:block;padding:0;border:0;background:none;
  transform-origin:center center;
  transition:transform .42s var(--ease),filter .42s var(--ease),opacity .42s var(--ease);
  opacity:0;animation:petalIn .8s var(--ease) forwards;will-change:transform,opacity}
.gates[data-comp="portal"] .gate[data-pos="tl"]{--ox:-1;--oy:-1;--nx:18px;--ny:18px}
.gates[data-comp="portal"] .gate[data-pos="tr"]{--ox:1;--oy:-1;--nx:-18px;--ny:18px}
.gates[data-comp="portal"] .gate[data-pos="bl"]{--ox:-1;--oy:1;--nx:18px;--ny:-18px}
.gates[data-comp="portal"] .gate[data-pos="br"]{--ox:1;--oy:1;--nx:-18px;--ny:-18px}
.gates[data-comp="portal"] .gate[data-pos="tl"]{animation-delay:.15s}
.gates[data-comp="portal"] .gate[data-pos="tr"]{animation-delay:.28s}
.gates[data-comp="portal"] .gate[data-pos="bl"]{animation-delay:.41s}
.gates[data-comp="portal"] .gate[data-pos="br"]{animation-delay:.54s}
/* assemble inward: each quarter glides from outside to its seat at the centre */
@keyframes petalIn{
  from{opacity:0;transform:translate(calc(var(--ox)*26px),calc(var(--oy)*26px)) scale(.92)}
  to{opacity:1;transform:translate(var(--nx,0),var(--ny,0)) scale(1)}}
.gates[data-comp="portal"] .gate-fig{position:absolute;inset:0;display:block;
  animation:gateBreathe 3s ease-in-out infinite;will-change:filter}
.gates[data-comp="portal"] .gate[data-pos="tr"] .gate-fig{animation-delay:.7s}
.gates[data-comp="portal"] .gate[data-pos="bl"] .gate-fig{animation-delay:1.4s}
.gates[data-comp="portal"] .gate[data-pos="br"] .gate-fig{animation-delay:2.1s}
.gates[data-comp="portal"] .gate-seg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.gates[data-comp="portal"] .gate.mir .gate-seg{transform:scaleX(-1)}
.gates[data-comp="portal"] .gate-cap,
.gates[data-comp="portal"] .gate-label{display:none}

/* hover: the chosen quarter lifts away from the disk + glows, the rest recede */
.gates[data-comp="portal"] .gates-grid:hover .gate{opacity:.45;filter:saturate(.7) brightness(.78)}
.gates[data-comp="portal"] .gates-grid:hover .gate:hover{opacity:1;filter:none;z-index:6;
  transform:translate(calc(var(--nx,0px) + var(--ox)*9px),calc(var(--ny,0px) + var(--oy)*9px)) scale(1.04)}
.gates[data-comp="portal"] .gate:hover .gate-fig{animation:none;
  filter:drop-shadow(0 0 16px rgba(74,222,128,.65)) drop-shadow(0 0 40px rgba(45,196,134,.4)) drop-shadow(0 14px 28px rgba(0,0,0,.5))}

/* dot + mono label + click arrow, anchored on each petal */
.portal-label{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center;
  opacity:0;animation:plIn .55s var(--ease) forwards}
.gates[data-comp="portal"] .gate:nth-child(1) .portal-label{animation-delay:.95s}
.gates[data-comp="portal"] .gate:nth-child(2) .portal-label{animation-delay:1.1s}
.gates[data-comp="portal"] .gate:nth-child(3) .portal-label{animation-delay:1.25s}
.gates[data-comp="portal"] .gate:nth-child(4) .portal-label{animation-delay:1.4s}
@keyframes plIn{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
.pl-dot{position:relative;width:11px;height:11px;border-radius:50%;background:var(--dot);
  box-shadow:0 0 9px var(--dot);animation:dotPulse 2.1s ease-in-out infinite}
.pl-dot::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--dot);transform:translate(-50%,-50%);animation:dotRing 2.1s ease-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);box-shadow:0 0 7px var(--dot)}50%{transform:scale(1.28);box-shadow:0 0 15px var(--dot)}}
@keyframes dotRing{0%{transform:translate(-50%,-50%) scale(.7);opacity:.85}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
.pl-tx{font-family:var(--fmono);font-size:var(--portal-label);font-weight:500;letter-spacing:.06em;
  text-transform:lowercase;line-height:1;color:#f1fff8;text-shadow:0 1px 7px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.pl-go{display:inline-flex;color:var(--dot);opacity:.92;transform:rotate(var(--arot,90deg));
  animation:plArrow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 4px var(--dot))}
@keyframes plArrow{0%,100%{opacity:.55;transform:rotate(var(--arot,90deg)) scale(.85)}50%{opacity:1;transform:rotate(var(--arot,90deg)) scale(1.18)}}
.gates[data-comp="portal"] .gate[data-pos="tl"] .pl-go{--arot:45deg}
.gates[data-comp="portal"] .gate[data-pos="tr"] .pl-go{--arot:135deg}
.gates[data-comp="portal"] .gate[data-pos="bl"] .pl-go{--arot:-45deg}
.gates[data-comp="portal"] .gate[data-pos="br"] .pl-go{--arot:-135deg}
.gates[data-comp="portal"] .gate:hover .pl-tx{color:#fff}
.gates[data-comp="portal"] .gate:hover .pl-go{opacity:1}
@media(prefers-reduced-motion:reduce){
  .pl-dot,.pl-dot::after,.pl-go,.gates[data-comp="portal"] .gate-fig{animation:none}
  .gates[data-comp="portal"] .gate,.portal-label{opacity:1;animation:none}}

.hero[data-comp="portal"] .gate-invite{margin-bottom:18px;font-size:12px}
.hero[data-comp="portal"] .gate-invite .gi-tx{
  color:var(--em-bright);font-weight:700;letter-spacing:.32em;
  text-shadow:0 0 14px rgba(74,222,128,.55);
  animation:invitePulse 1.8s ease-in-out infinite}
@keyframes invitePulse{0%,100%{opacity:.7;text-shadow:0 0 8px rgba(74,222,128,.35)}50%{opacity:1;text-shadow:0 0 20px rgba(74,222,128,.8),0 0 36px rgba(74,222,128,.4)}}
.hero[data-comp="portal"] .gate-phil{margin-top:18px;font-size:clamp(15px,1.5vw,19px)}

/* invitation above the arch */
.gate-invite{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:22px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--tx3)}
.hero[data-th="dark"] .gate-invite{color:var(--on-dk3)}
.gate-invite .gi-arrow{display:inline-flex;color:var(--em-bright);animation:inviteBounce 2s ease-in-out infinite}
@keyframes inviteBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* philosophy line below the circle */
.gate-phil{margin:26px auto 0;text-align:center;max-width:30ch;
  font-family:var(--fd);font-style:italic;font-size:clamp(17px,1.7vw,22px);line-height:1.4;
  letter-spacing:.005em;color:rgba(226,239,229,.82)}
.hero[data-th="dark"] .gate-phil{color:rgba(226,239,229,.82)}

/* door intro — segments part once, then settle (1.5s after load) */
.gates[data-comp="cross"] .gate:nth-child(1) .gate-fig,
.gates[data-comp="cross"] .gate:nth-child(3) .gate-fig{animation:gateBreathe 2.5s ease-in-out infinite,doorL .8s var(--ease) 1.5s 1}
.gates[data-comp="cross"] .gate:nth-child(2) .gate-fig{animation:gateBreathe 2.5s ease-in-out .6s infinite,doorR .8s var(--ease) 1.5s 1}
.gates[data-comp="cross"] .gate:nth-child(4) .gate-fig{animation:gateBreathe 2.5s ease-in-out 1.8s infinite,doorR .8s var(--ease) 1.5s 1}
@keyframes doorL{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes doorR{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

@media(prefers-reduced-motion:reduce){
  .gates[data-comp="cross"] .gate-fig{animation:none!important;filter:drop-shadow(0 0 4px rgba(74,222,128,.4))}
  .gates[data-comp="cross"] .gate-label{animation:none;opacity:1}
  .gate-invite .gi-arrow{animation:none}}

/* mobile: bigger tap targets, labels always legible, no dimming */
@media(max-width:768px){
  .gates[data-comp="cross"] .gates-grid{width:min(460px,90vw)}
  .gates[data-comp="cross"] .gate{min-height:48px}
  .gates[data-comp="cross"] .gates-grid:hover .gate{opacity:1;filter:none}
  .gl-tx{font-size:clamp(16px,4.6vw,21px)}
  .gl-desc{font-size:10px}
  .gl-num{font-size:10px}
  .gate-invite{font-size:10.5px;letter-spacing:.26em}}

/* central read-out under the cross */
.cross-read{margin-top:30px;min-height:74px;display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;transition:opacity .3s}
.cr-ar{font-family:var(--fd);font-style:italic;font-size:22px;line-height:1;color:var(--gold2);direction:rtl}
.cr-name{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1}
.cr-go{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--em-bright);
  display:inline-flex;align-items:center;gap:8px}
.cr-hint{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3)}
.cr-hint.shimmer{font-size:12px;font-weight:700;letter-spacing:.26em;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#f4e3b0 50%,var(--gold2) 62%,var(--gold) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldSweep 4.2s linear infinite}
@keyframes goldSweep{0%{background-position:140% 0}100%{background-position:-40% 0}}
@media(prefers-reduced-motion:reduce){.cr-hint.shimmer{animation:none;background-position:50% 0}}
.cr-kicker{font-size:13px;color:var(--tx2);letter-spacing:.01em}
.hero[data-th="dark"] .cr-hint{color:var(--on-dk3)}
.hero[data-th="dark"] .cr-kicker{color:var(--on-dk2)}
.gates[data-comp="row"] .cross-read{display:none}

/* ===== variation B — Swiss row of four portals ===== */
.gates[data-comp="row"] .gates-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,34px);align-items:start;
  max-width:1120px;margin:0 auto}
@media(max-width:820px){.gates[data-comp="row"] .gates-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:480px){.gates[data-comp="row"] .gates-grid{grid-template-columns:1fr 1fr;gap:22px}}
.gates[data-comp="row"] .gate{display:flex;flex-direction:column;align-items:center;text-align:center}
.gates[data-comp="row"] .gate-fig{width:100%;display:flex;align-items:center;justify-content:center;height:168px}
.gates[data-comp="row"] .gate-seg{max-width:84%;max-height:100%;width:auto;height:auto}
.gates[data-comp="row"] .gate:hover .gate-seg{transform:translateY(-12px) scale(1.05)}
.gates[data-comp="row"] .gate-cap{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.gate-num{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gold2)}
.gate-ar{font-family:var(--fd);font-style:italic;font-size:20px;line-height:1;color:var(--gold2);direction:rtl}
.gate-name{font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1}
.gate-kicker{font-size:12px;color:var(--tx3);max-width:16ch;line-height:1.35}
.hero[data-th="dark"] .gate-kicker{color:var(--on-dk3)}
.gate-go{margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;color:var(--em-bright);transition:gap .3s var(--ease)}
.gate:hover .gate-go{gap:15px}

/* —— portal transition overlay —— */
#portal{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 50% 50%,var(--dk-bg2),var(--dk-bg));
  display:flex;align-items:center;justify-content:center}
#portal.run{animation:portalIn .9s var(--ease) forwards}
#portal img{width:260px;height:auto;filter:drop-shadow(0 0 60px rgba(31,138,91,.5))}
@keyframes portalIn{
  0%{opacity:0;pointer-events:all}
  30%{opacity:1}
  100%{opacity:1;pointer-events:all}
}
#portal .p-seg{animation:segZoom .9s var(--ease) forwards}
@keyframes segZoom{0%{transform:scale(.3) rotate(0)}100%{transform:scale(2.4) rotate(45deg);opacity:0}}

/* ───────────────── STATS ───────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:var(--on-dk);
  border-bottom:1px solid var(--hair)}
.st{padding:46px var(--gut);border-right:1px solid rgba(241,239,231,.14);text-align:left}
.st:last-child{border-right:none}
.st-n{font-size:clamp(38px,4.4vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1;display:block;margin-bottom:10px}
.st-n.sm{font-family:var(--fd);font-style:italic;font-weight:500;font-size:clamp(30px,3.4vw,46px)}
.st .label{color:var(--gold2)}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr}.st{padding:30px 24px}
  .st:nth-child(2){border-right:none}.st:nth-child(-n+2){border-bottom:1px solid rgba(241,239,231,.14)}}

/* ───────────────── SECTION SCAFFOLD ───────────────── */
.sec{padding:clamp(48px,6vw,90px) var(--gut)}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:20px;margin-bottom:0;border-bottom:1px solid var(--line)}
@media(max-width:560px){.sec-hd{flex-direction:column;gap:8px}}

/* spec strip */
.spec{display:flex;flex-direction:column;gap:30px;padding:48px var(--gut);
  border-bottom:1px solid var(--hair);background:var(--white)}
.spec-top{display:flex;align-items:center;gap:26px}
.spec-av{width:74px;height:74px;border-radius:50%;background:var(--em-pale);
  border:1px solid rgba(12,58,38,.18);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:17px}
.spec-mark{width:100%;height:100%;display:block}
.spec-mark path{fill:var(--em-mid);transition:fill .3s var(--ease)}
.spec:hover .spec-mark path{fill:var(--em-bright)}
.spec-name{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.spec-bio{font-size:14px;color:var(--tx2);line-height:1.65;max-width:640px}
.spec-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--hair);
  color:var(--tx2);padding:4px 11px}
/* education timeline */
.edu{border-top:1px solid var(--hair);padding-top:28px}
.edu-label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:20px}
.edu-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:680px){.edu-list{grid-template-columns:1fr}}
.edu-row{background:var(--white);display:flex;gap:18px;padding:22px 24px;align-items:flex-start;transition:background .25s}
.edu-row:hover{background:var(--em-pale)}
.edu-y{font-size:13px;font-weight:700;color:var(--em-mid);font-variant-numeric:tabular-nums;min-width:42px;padding-top:2px}
.edu-h{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:4px}
.edu-d{font-size:13px;color:var(--tx3);line-height:1.5}
@media(max-width:560px){.spec-top{flex-direction:column;align-items:flex-start;gap:18px}}

/* grids of cells */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.cells{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cells{grid-template-columns:1fr}}
.cell{background:var(--white);padding:38px var(--gut);transition:background .25s}
.cell:hover{background:var(--em-pale)}
.cell-n{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.cell-t{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;line-height:1.1}
.cell-d{font-size:14px;color:var(--tx2);line-height:1.7}
.cell-hadith{grid-column:span 2;background:var(--ink);color:var(--on-dk);
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.cell-hadith:hover{background:var(--ink)}
.cell-hadith .cell-n{color:var(--gold2);margin-bottom:0}
.cell-hadith .ch-ar{position:absolute;top:24px;right:var(--gut);font-size:26px;
  color:rgba(80,175,130,.32);font-family:var(--fd);pointer-events:none}
.cell-hadith .ch-t{font-family:var(--fd);font-style:italic;font-weight:500;
  font-size:clamp(22px,2vw,27px);line-height:1.18;letter-spacing:-.01em;max-width:92%}
.cell-hadith .ch-d{font-size:15px;color:var(--on-dk2);line-height:1.72;max-width:96%}
.cell-hadith .ch-src{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dk3);margin-top:2px}
@media(max-width:520px){.cell-hadith{grid-column:span 1}}

/* courses (education page) */
.courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:920px){.courses-grid{grid-template-columns:1fr}}
.course{background:var(--white);padding:40px var(--gut);display:flex;flex-direction:column;transition:background .25s}
.course:hover{background:#fcfbf7}
.course-hd{display:flex;align-items:flex-start;gap:16px;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--hair)}
.course-num{font-size:12px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--em-mid);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.course-name{font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.08;margin-bottom:6px}
.course-format{font-size:12px;letter-spacing:.04em;color:var(--gold);font-weight:600}
.course-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:28px;flex:1}
.course-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.55;color:var(--tx2)}
.course-list li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;
  background:var(--em-pale);border:1.5px solid var(--em-mid);border-radius:50%}
.course-btn{align-self:flex-start;margin-top:auto;text-decoration:none}

/* flat icon row (inner pages) */
.ico{width:46px;height:46px;margin-bottom:18px}
.ico svg{width:100%;height:100%;stroke:var(--em-mid);stroke-width:1.4;fill:none}

/* page hero */
.ph{display:grid;grid-template-columns:1.15fr .85fr;border-bottom:1px solid var(--line);min-height:420px}
@media(max-width:760px){.ph{grid-template-columns:1fr}}
.ph-l{padding:clamp(40px,5vw,72px) var(--gut);display:flex;flex-direction:column;justify-content:flex-end;
  border-right:1px solid var(--line)}
@media(max-width:760px){.ph-l{border-right:none;border-bottom:1px solid var(--line)}}
.ph-l .h1{margin:18px 0 22px}
.ph-d{font-size:15px;color:var(--tx2);line-height:1.8;max-width:50ch;margin-bottom:30px}
.ph-r{position:relative;background:radial-gradient(120% 100% at 70% 20%,var(--dk-bg2),var(--dk-bg));
  display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:280px}
.ph-r .gate-seg{width:62%;filter:drop-shadow(0 20px 50px rgba(0,0,0,.5))}
.ph-logo-wrap{padding:clamp(22px,3.4vw,46px)}
.ph-logo{width:min(60%,260px);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 22px 50px rgba(0,0,0,.55))}
.ph-photo{padding:0}
.ph-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-photo .ph-bg-n{z-index:3;pointer-events:none;color:rgba(241,239,231,.22);text-shadow:0 2px 18px rgba(0,0,0,.5)}
.ph-photo .ph-tag{z-index:3}
.ph-bg-n{position:absolute;top:24px;right:28px;font-family:var(--fd);font-style:italic;
  font-size:120px;font-weight:500;color:rgba(241,239,231,.1);line-height:1;user-select:none}
.ph-tag{position:absolute;bottom:18px;left:20px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dk2);background:rgba(255,255,255,.06);padding:5px 11px;backdrop-filter:blur(6px)}

/* breadcrumb */
.bc{display:flex;align-items:center;gap:10px;padding:14px var(--gut);
  border-bottom:1px solid var(--hair);font-size:11px;letter-spacing:.06em;color:var(--tx3)}
.bc button{background:none;border:none;color:var(--tx2);cursor:pointer;font-size:11px;letter-spacing:.06em}
.bc .cur{color:var(--em-mid);font-weight:600}

/* quote */
.qb{margin:clamp(40px,5vw,72px) var(--gut);padding:clamp(28px,3vw,46px);
  border-left:2px solid var(--em-mid);background:var(--em-pale)}
.q-ar{font-family:var(--fd);font-style:italic;font-size:26px;color:var(--em-mid);opacity:.5;
  margin-bottom:12px;direction:rtl;text-align:right}
.q-main{font-family:var(--fd);font-style:italic;font-size:var(--h2);font-weight:500;line-height:1.18;margin-bottom:14px}
.q-src{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}

/* community band — Telegram channel + bot */
.comm{border-top:1px solid var(--line)}
.comm-hd{padding:clamp(40px,5vw,64px) var(--gut) 24px;display:flex;align-items:baseline;gap:20px}
.comm-hd .label{flex-shrink:0}
@media(max-width:560px){.comm-hd{flex-direction:column;gap:6px}}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border-top:1px solid var(--line)}
@media(max-width:680px){.comm-grid{grid-template-columns:1fr}}
.comm-c{background:var(--white);padding:clamp(30px,3.4vw,46px) var(--gut);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:background .25s var(--ease)}
.comm-c:hover{background:var(--em-pale)}
.comm-accent{background:var(--ink);color:var(--on-dk)}
.comm-accent:hover{background:var(--em-deep)}
.comm-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.comm-accent .comm-tag{color:var(--gold2)}
.comm-handle{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1}
.comm-d{font-size:14px;line-height:1.6;color:var(--tx2);max-width:42ch}
.comm-accent .comm-d{color:var(--on-dk2)}
.comm-btn{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;color:var(--em-mid);transition:gap .3s var(--ease)}
.comm-accent .comm-btn{color:var(--gold2)}
.comm-c:hover .comm-btn{gap:16px}

/* cta band */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(40px,5vw,70px) var(--gut);background:var(--ink);color:var(--on-dk);
  border-top:1px solid var(--hair)}
.cta-h{font-size:var(--h2);font-weight:700;letter-spacing:-.025em;margin-bottom:6px}
.cta-s{font-size:14px;color:var(--on-dk2)}
@media(max-width:640px){.cta{flex-direction:column;align-items:flex-start}}

/* buttons */
.btn{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:none;
  padding:14px 28px;cursor:pointer;transition:all .25s var(--ease);display:inline-flex;align-items:center;gap:9px}
.btn-em{background:var(--em-mid);color:#fff}
.btn-em:hover{background:var(--emerald)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--em-mid)}
.btn-out{background:transparent;border:1px solid currentColor;color:var(--tx)}
.btn-out:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-gold{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn-gold:hover{background:var(--gold);color:#fff}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* contact */
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:680px){.chan{grid-template-columns:1fr 1fr}}
.chan-c{background:var(--white);padding:38px var(--gut);transition:background .25s;cursor:pointer;
  text-decoration:none;color:inherit;display:block}
.chan-c:hover{background:var(--em-pale)}
.chan-n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.chan-d{font-size:18px;font-weight:600;letter-spacing:-.01em}

/* contact map */
.contact-map{border-bottom:1px solid var(--line)}
.contact-map a{display:block;line-height:0}
.contact-map iframe{width:100%;height:clamp(280px,38vw,460px);border:0;filter:grayscale(.2) contrast(1.02)}

/* footer */
.ft{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.3fr;gap:40px;
  padding:clamp(44px,5vw,68px) var(--gut) 30px;border-top:1px solid var(--line);background:var(--white)}
@media(max-width:880px){.ft{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.ft{grid-template-columns:1fr}}
.ft-brand{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.ft-sub{font-size:14px;color:var(--tx2);line-height:1.6}
.ft-addr{display:block;font-size:14px;color:var(--tx2);text-decoration:none;margin-top:14px;line-height:1.5;transition:color .2s}
.ft-addr:hover{color:var(--em-mid)}
.ft-phone{display:inline-block;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--tx);text-decoration:none;margin-top:10px;transition:color .2s}
.ft-phone:hover{color:var(--em-mid)}
.ft-ct{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);display:block;margin-bottom:15px}
.ft-links{list-style:none}
.ft-links li{margin-bottom:11px}
.ft-links a,.ft-links button{font-size:14px;color:var(--tx2);text-decoration:none;cursor:pointer;
  background:none;border:none;transition:color .2s;text-align:left;padding:0;letter-spacing:0}
.ft-links a:hover,.ft-links button:hover{color:var(--em-mid)}
.ft-mapframe{display:block;position:relative;border:1px solid var(--hair);overflow:hidden;line-height:0;transition:border-color .2s}
.ft-mapframe:hover{border-color:var(--em-mid)}
.ft-mapframe iframe{width:100%;height:170px;border:0;filter:grayscale(.25) contrast(1.02);pointer-events:none}
.ft-mapcta{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(6,16,11,.78);
  display:flex;align-items:center;gap:7px;line-height:1.2}
.ft-copy{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 100px 18px var(--gut);border-top:1px solid var(--hair);font-size:11px;letter-spacing:.08em;color:var(--tx3);background:var(--white)}
@media(max-width:520px){.ft-copy{flex-direction:column;gap:6px;text-align:center;padding:18px var(--gut) 20px}}

/* footer credit — discreet «made by» → Telegram, left-aligned (clears floating contact FAB) */
.ft-credwrap{display:flex;justify-content:flex-start;align-items:center;
  padding:2px var(--gut) 24px;background:var(--white)}
.ft-cred{font-family:"TT Interphases Pro Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-weight:400;font-size:11px;letter-spacing:.02em;color:var(--tx3);
  text-decoration:none;opacity:.7;transition:opacity .35s var(--ease),color .35s var(--ease)}
.ft-cred:hover,.ft-cred:focus-visible{opacity:1;color:var(--tx2);outline:none}
@media(max-width:520px){.ft-credwrap{justify-content:center}}
/* modal */
#modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,16,11,.55);backdrop-filter:blur(10px)}
#modal.on{display:flex}
.modal-box{background:var(--white);width:100%;max-width:460px;padding:clamp(28px,4vw,46px);
  border:1px solid var(--line);animation:pgIn .4s var(--ease) both}
.modal-hd{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.modal-h{font-size:26px;font-weight:700;letter-spacing:-.02em}
.modal-x{background:none;border:none;font-size:20px;color:var(--tx3);cursor:pointer;line-height:1}
.modal-x:hover{color:var(--tx)}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin-bottom:7px}
.fld input,.fld select{width:100%;border:1px solid var(--hair);background:var(--paper);
  padding:12px 14px;font-family:inherit;font-size:16px;color:var(--tx);outline:none;transition:border-color .2s}
.fld input:focus,.fld select:focus{border-color:var(--em-mid)}
.m-note{font-size:11px;color:var(--tx3);margin:8px 0 0;line-height:1.5}
.m-intro{font-size:13px;color:var(--tx2);line-height:1.55;margin:-8px 0 20px}
.send-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.send-half{justify-content:center;padding:14px 12px}
@media(max-width:380px){.send-row{grid-template-columns:1fr}}
.m-or{text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin:18px 0 12px;position:relative}
.m-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.m-chip{font-size:12px;font-weight:600;color:var(--tx);text-decoration:none;border:1px solid var(--hair);
  padding:9px 14px;transition:all .2s var(--ease)}
.m-chip:hover{border-color:var(--em-mid);color:var(--em-mid)}
.thanks{text-align:center;padding:8px 0 4px}
.thanks-ic{width:54px;height:54px;border-radius:50%;background:var(--em-pale);color:var(--em-mid);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 18px;
  border:1px solid rgba(12,58,38,.2)}
.thanks-t{font-size:15px;color:var(--tx);line-height:1.6;margin-bottom:10px}
.thanks-s{font-size:12px;color:var(--tx3);margin-bottom:22px}
.m-consent{font-size:11px;color:var(--tx3);margin:12px 0 0;line-height:1.5}
.m-priv-link{background:none;border:none;padding:0;font:inherit;font-size:11px;color:var(--em-mid);
  text-decoration:underline;cursor:pointer}

/* ───────── REVIEWS ───────── */
.rev{padding:clamp(48px,6vw,84px) var(--gut)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--gut)}
@media(max-width:860px){.rev-grid{grid-template-columns:1fr}}
.rev-c{background:var(--white);padding:38px var(--gut);display:flex;flex-direction:column;gap:16px;margin:0}
.rev-stars{color:var(--gold2);letter-spacing:.18em;font-size:14px}
.rev-t{font-family:var(--fd);font-style:italic;font-size:20px;line-height:1.45;color:var(--tx);font-weight:500}
.rev-a{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-top:auto}

/* ───────── FAQ ───────── */
.faq{padding:clamp(48px,6vw,84px) var(--gut);background:var(--white)}
.faq-list{border-top:1px solid var(--line);margin-top:var(--gut)}
.faq-i{border-bottom:1px solid var(--hair)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  list-style:none;padding:26px 0;font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.01em;
  color:var(--tx);transition:color .2s}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--em-mid)}
.faq-mk{position:relative;width:16px;height:16px;flex-shrink:0}
.faq-mk::before,.faq-mk::after{content:'';position:absolute;background:var(--em-mid);transition:transform .3s var(--ease)}
.faq-mk::before{top:7px;left:0;width:16px;height:2px}
.faq-mk::after{left:7px;top:0;width:2px;height:16px}
.faq-i[open] .faq-mk::after{transform:scaleY(0)}
.faq-a{font-size:15px;line-height:1.75;color:var(--tx2);max-width:74ch;padding:0 0 26px}

/* ───────── INTERIOR GALLERY · «Наш центр» ───────── */
.cen{padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--line)}
.cen-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 var(--gut) 22px;margin-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--line)}
.cen-hd-l{max-width:64ch}
.cen-hd .h2{margin:14px 0 12px}
.cen-lead{font-size:15px;line-height:1.6;color:var(--tx2);max-width:56ch}
.cen-nav{display:flex;gap:10px;flex-shrink:0}
.cen-arr{width:50px;height:50px;border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.cen-arr:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:560px){.cen-nav{display:none}}
.cen-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--gut);scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cen-track::-webkit-scrollbar{display:none}
.cen-track.grab{cursor:grabbing;scroll-snap-type:none}
.cen-slide{position:relative;flex:0 0 auto;height:clamp(340px,50vh,556px);
  scroll-snap-align:start;overflow:hidden;background:var(--em-pale)}
.cen-land{width:clamp(300px,60vw,720px)}
.cen-port{width:clamp(220px,31vw,366px)}
.cen-slide img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.cen-slide:hover img{transform:scale(1.045)}
.cen-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:13px;
  padding:46px 22px 18px;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(6,16,11,.86),rgba(6,16,11,.28) 55%,rgba(6,16,11,0))}
.cen-num{font-family:var(--fd);font-style:italic;font-size:21px;color:var(--gold2);
  font-variant-numeric:tabular-nums;flex-shrink:0;line-height:1}
.cen-txt{text-wrap:balance}
.cen-rail{height:2px;background:var(--hair);margin:clamp(22px,2.6vw,32px) var(--gut) 0;overflow:hidden}
.cen-rail-fill{display:block;height:100%;width:100%;background:var(--em-mid);transform-origin:left center;
  transform:scaleX(.12);transition:transform .14s linear}
@media(max-width:560px){.cen-land{width:86vw}.cen-port{width:62vw}.cen-slide{height:clamp(300px,64vw,430px)}}

/* ───────── SOCIAL FOLLOW ───────── */
.social{padding:clamp(48px,6vw,84px) var(--gut);background:var(--ink);color:var(--on-dk)}
.social-hd{max-width:60ch}
.social-hd .h2{margin:14px 0 14px}
.social-hd .label{color:var(--gold2)}
.social-lead{font-size:15px;color:var(--on-dk2);line-height:1.65}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media(max-width:760px){.social-grid{grid-template-columns:1fr}}
.social-c{display:flex;align-items:center;gap:18px;padding:24px 26px;border:1px solid var(--on-dk-hair);
  text-decoration:none;color:var(--on-dk);transition:all .3s var(--ease);background:rgba(255,255,255,.02)}
.social-c:hover{border-color:transparent;transform:translateY(-3px)}
.social-yt:hover{background:rgba(255,0,0,.14)}
.social-ig:hover{background:linear-gradient(120deg,rgba(225,48,108,.2),rgba(253,180,69,.16))}
.social-tg:hover{background:rgba(34,158,217,.16)}
.social-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--on-dk)}
.social-ic svg{width:100%;height:100%}
.social-yt .social-ic{color:#ff3d3d}.social-ig .social-ic{color:#f49ac1}.social-tg .social-ic{color:#5ec5f0}
.social-meta{display:flex;flex-direction:column;gap:2px;flex:1}
.social-n{font-size:15px;font-weight:700;letter-spacing:-.01em}
.social-h{font-size:13px;color:var(--gold2)}
.social-d{font-size:12px;color:var(--on-dk3)}
.social-go{color:var(--on-dk3);transition:transform .3s var(--ease)}
.social-c:hover .social-go{transform:translateX(5px);color:var(--on-dk)}

/* ───────── PRIVACY / LEGAL ───────── */
.legal{padding:clamp(40px,5vw,72px) var(--gut) clamp(48px,6vw,84px);max-width:1100px}
.legal-hd{border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:40px}
.legal-hd .h1{margin:16px 0 14px}
.legal-upd{font-size:12px;letter-spacing:.06em;color:var(--tx3)}
.legal-body{display:flex;flex-direction:column;gap:30px}
.legal-h{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.legal-p{font-size:15px;line-height:1.8;color:var(--tx2);max-width:80ch}

/* ───────── COOKIE BANNER ───────── */
.fab{transition:transform .3s var(--ease)}
body:has(.cookie.show) .fab{transform:translateY(-72px)}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(10,11,9,.96);backdrop-filter:blur(14px);color:var(--on-dk);
  transform:translateY(110%);transition:transform .5s var(--ease);border-top:1px solid var(--on-dk-hair)}
.cookie.show{transform:translateY(0)}
.cookie-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--frame) calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:24px;justify-content:space-between}
.cookie-tx{font-size:13px;line-height:1.55;color:var(--on-dk2);max-width:80ch}
.cookie-more{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--gold2);
  text-decoration:underline;cursor:pointer}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-decline{background:none;border:1px solid var(--on-dk-hair);color:var(--on-dk2);
  font-size:12px;font-weight:600;letter-spacing:.04em;padding:11px 18px;cursor:pointer;transition:all .2s}
.cookie-decline:hover{border-color:var(--on-dk2);color:var(--on-dk)}
.cookie-accept{background:var(--em-bright);border:none;color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:11px 22px;cursor:pointer;transition:background .2s}
.cookie-accept:hover{background:var(--em-mid)}
@media(max-width:680px){.cookie-in{flex-direction:column;align-items:flex-start;gap:14px}
  .cookie-btns{width:100%}.cookie-decline,.cookie-accept{flex:1;text-align:center}}

/* ───────── FLOATING CONTACT ───────── */
.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:190;display:flex;flex-direction:column;gap:12px}
.fab-b{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 10px 26px -6px rgba(0,0,0,.5);transition:transform .25s var(--ease);
  animation:fabIn .5s var(--ease) both}
.fab-b svg{width:27px;height:27px}
.fab-b:hover{transform:scale(1.09)}
.fab-wa{background:#25d366}
.fab-tg{background:#2aabee}
.fab-tg{animation-delay:.08s}
@keyframes fabIn{from{opacity:0;transform:scale(.4) translateY(12px)}to{opacity:1;transform:scale(1)}}
@media(max-width:560px){.fab{right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}.fab-b{width:50px;height:50px}.fab-b svg{width:24px;height:24px}}
.ft-copy-r{display:flex;align-items:center;gap:18px}
.ft-priv{background:none;border:none;padding:0;font:inherit;font-size:11px;letter-spacing:.08em;
  color:var(--tx2);cursor:pointer;transition:color .2s}
.ft-priv:hover{color:var(--em-mid)}
@media(max-width:520px){.ft-copy-r{flex-direction:column;gap:6px}}

/* CTA gold accent — free consultation */
.cta-free{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;
  letter-spacing:.04em;color:var(--gold2)}

/* ───────── YOUTUBE AUTO-FEED ───────── */
.yt{padding:clamp(48px,6vw,84px) var(--gut);background:var(--ink);color:var(--on-dk);border-top:1px solid var(--hair)}
.yt-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding-bottom:26px;margin-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--on-dk-hair)}
.yt-hd-l{max-width:62ch}
.yt-label{display:inline-flex;align-items:center;gap:9px;color:var(--gold2)}
.yt-label svg{width:20px;height:20px;color:#ff3d3d}
.yt-hd .h2{margin:14px 0 14px;color:var(--on-dk)}
.yt-hd .h2 em{color:var(--gold2)}
.yt-lead{font-size:15px;color:var(--on-dk2);line-height:1.65;max-width:54ch}
.yt-all{flex-shrink:0;white-space:nowrap}
@media(max-width:680px){.yt-hd{flex-direction:column;align-items:flex-start;gap:20px}}
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:860px){.yt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.yt-grid{grid-template-columns:1fr}}
.yt-c{display:flex;flex-direction:column;gap:14px;background:none;border:none;padding:0;cursor:pointer;
  color:inherit;text-align:left;font-family:inherit}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a1812;
  border:1px solid var(--on-dk-hair)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .4s}
.yt-c:hover .yt-thumb img{transform:scale(1.06)}
.yt-play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:rgba(255,61,61,.92);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.6);transition:transform .3s var(--ease),background .3s}
.yt-play svg{width:24px;height:24px;margin-left:2px}
.yt-c:hover .yt-play{transform:scale(1.1);background:#ff1f1f}
.yt-meta{display:flex;flex-direction:column;gap:6px}
.yt-t{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--on-dk);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-d{font-size:12px;letter-spacing:.04em;color:var(--on-dk3)}
/* skeleton */
.yt-sk{pointer-events:none}
.yt-sk .yt-thumb,.yt-sk .yt-t,.yt-sk .yt-d{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%;animation:ytShimmer 1.4s linear infinite;border-radius:2px}
.yt-sk .yt-t{height:14px;width:90%}.yt-sk .yt-d{height:11px;width:40%}
@keyframes ytShimmer{0%{background-position:140% 0}100%{background-position:-40% 0}}
@media(prefers-reduced-motion:reduce){.yt-sk .yt-thumb,.yt-sk .yt-t,.yt-sk .yt-d{animation:none}}
/* playlist embed fallback */
.yt-grid.yt-fallback{display:block}
.yt-embed{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--on-dk-hair)}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* video lightbox */
.yt-lb{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);background:rgba(6,16,11,.86);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.yt-lb.on{opacity:1;visibility:visible}
.yt-lb-in{position:relative;width:min(1100px,100%)}
.yt-lb-frame{position:relative;aspect-ratio:16/9;width:100%;background:#000;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.yt-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-lb-x{position:absolute;top:-44px;right:0;width:36px;height:36px;border:1px solid var(--on-dk-hair);
  background:rgba(255,255,255,.06);color:var(--on-dk);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.yt-lb-x:hover{background:rgba(255,255,255,.14)}
@media(max-width:560px){.yt-lb-x{top:auto;bottom:-46px;right:50%;transform:translateX(50%)}}

/* ───────── INSTAGRAM ───────── */
.ig{padding:clamp(48px,6vw,84px) var(--gut);background:var(--white);border-top:1px solid var(--line)}
.ig-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding-bottom:26px;margin-bottom:clamp(26px,3vw,36px);border-bottom:1px solid var(--line)}
.ig-hd-l{max-width:62ch}
.ig-label{display:inline-flex;align-items:center;gap:9px}
.ig-label svg{width:20px;height:20px;color:#c13584}
.ig-hd .h2{margin:14px 0 14px}
.ig-lead{font-size:15px;color:var(--tx2);line-height:1.65;max-width:54ch}
.ig-follow{flex-shrink:0;white-space:nowrap}
@media(max-width:680px){.ig-hd{flex-direction:column;align-items:flex-start;gap:20px}}
.ig-mount.ig-widget{min-height:120px}
.ig-mount.ig-widget iframe{width:100%!important;border:0}
/* clean follow panel (default, no widget) */
.ig-panel{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;text-decoration:none;color:#fff;overflow:hidden;
  padding:clamp(40px,6vw,72px) var(--gut);border:1px solid var(--line);
  background:linear-gradient(118deg,#405de6 0%,#5851db 18%,#833ab4 38%,#c13584 58%,#e1306c 74%,#fd1d1d 88%,#f77737 100%)}
.ig-glow{position:absolute;inset:-40%;background:radial-gradient(40% 50% at 30% 20%,rgba(255,255,255,.28),transparent 60%);
  filter:blur(8px);pointer-events:none}
.ig-panel-ic{position:relative;width:46px;height:46px;color:#fff}
.ig-panel-ic svg{width:100%;height:100%}
.ig-panel-handle{position:relative;font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1}
.ig-panel-cap{position:relative;font-size:15px;color:rgba(255,255,255,.9);max-width:40ch;line-height:1.5}
.ig-panel-go{position:relative;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  transition:background .25s var(--ease),gap .25s var(--ease)}
.ig-panel:hover .ig-panel-go{background:rgba(255,255,255,.28);gap:15px}