/* ═════════════════════════════════════════════════════════════════
   НАВИгатор · v3 «Обсерватория»
   принцип: приборы всегда тёмные. страница — холст (ночь / кость),
   в который врезаны тёмные пластины с жидким шёлком: hero, зеркало,
   демо-экраны, девять школ, старт. типографика — исходная конфигурация:
   Inter Tight (дисплей) · Golos (текст) · Cormorant italic (акцент) · JetBrains Mono (прибор).
   золото дозируется. границы — волосяные.
   ═════════════════════════════════════════════════════════════════ */

:root{
  --bg:#05090C; --bg-2:#070F14; --surface:#081218; --surface-2:#0B1922;
  --text:#EDF4F3; --body:#AEC3C5; --muted:#7E9499; --faint:#4C6268;
  --aqua:#7FE8DF; --aqua-hi:#9DF3EC; --aqua-dim:#3FA8A6; --aqua-deep:#1E5D5F;
  --gold:#D9AB55; --gold-hi:#EDCB85; --gold-deep:#8A6624;
  --line:rgba(148,197,199,.13); --line-2:rgba(148,197,199,.28);
  --gold-line:rgba(217,171,85,.34); --gold-line-dim:rgba(217,171,85,.16);
  --shadow:0 40px 90px -50px rgba(0,0,0,.9);
  --star-a:190,228,230; --star-g:217,169,76;
  --plate-bg:#03080B;
  --maxw:1200px;
  --disp:'Inter Tight',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --easing:cubic-bezier(.19,.85,.28,1);
}
[data-theme="light"]{
  --bg:#F2EFE7; --bg-2:#ECE8DC; --surface:#FAF7F0; --surface-2:#FFFDF8;
  --text:#14262A; --body:#3C5257; --muted:#5C7378; --faint:#8FA3A2;
  --aqua:#0B6E68; --aqua-hi:#0B6E68; --aqua-dim:#25837D; --aqua-deep:#0B6E68;
  --gold:#96690D; --gold-hi:#B08217; --gold-deep:#96690D;
  --line:rgba(20,50,54,.15); --line-2:rgba(20,50,54,.3);
  --gold-line:rgba(150,105,13,.4); --gold-line-dim:rgba(150,105,13,.18);
  --shadow:0 36px 80px -48px rgba(31,48,48,.45);
  --star-a:32,84,88; --star-g:150,105,13;
}
/* тёмная пластина (хиро): всегда ночь — вне зависимости от темы страницы */
.plate-dark{
  --text:#EDF4F3; --body:#AEC3C5; --muted:#7E9499; --faint:#4C6268;
  --aqua:#7FE8DF; --aqua-hi:#9DF3EC; --aqua-dim:#3FA8A6; --aqua-deep:#1E5D5F;
  --gold:#D9AB55; --gold-hi:#EDCB85; --gold-deep:#8A6624;
  --line:rgba(148,197,199,.14); --line-2:rgba(148,197,199,.3);
  --gold-line:rgba(217,171,85,.34); --gold-line-dim:rgba(217,171,85,.16);
  --surface:#081218; --surface-2:#0B1922; --bg:#03080B; --bg-2:#060F14;
  --plate-bg:#03080B;
  color:var(--body);
}
[data-theme="light"]{--plate-bg:#F7F4EC}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  transition:background .5s ease,color .5s ease;
}
::selection{background:rgba(127,232,223,.28);color:var(--text)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:6px}

b,strong{color:var(--text);font-weight:600}
.ni{color:var(--aqua)}.np{color:var(--text)}.npp{color:var(--gold)}

/* ── атмосфера ── */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 800px at 80% -10%, rgba(52,150,152,.13), transparent 60%),
    radial-gradient(900px 700px at -8% 42%, rgba(46,84,158,.09), transparent 58%),
    radial-gradient(800px 640px at 105% 90%, rgba(217,169,76,.06), transparent 55%)}
[data-theme="light"] .atmo{
  background:
    radial-gradient(1100px 800px at 80% -10%, rgba(11,110,104,.06), transparent 60%),
    radial-gradient(900px 700px at -8% 42%, rgba(150,105,13,.05), transparent 58%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="light"] .grain{opacity:.05}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}
[data-theme="light"] #stars{opacity:.3}
#meteors{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
[data-theme="light"] #meteors{opacity:.5}
/* живой градиент: низкое разрешение + сильное размытие = дрейфующие поля цвета */
/* яркость управляется скроллом из main.js: у хиро — полная, глубже — вдвое тише */
#flow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  filter:blur(46px) saturate(1.1);opacity:.6;transform:scale(1.18)}
[data-theme="light"] #flow{filter:blur(52px) saturate(1.02)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}
section{position:relative;padding:clamp(90px,11vh,150px) 0;scroll-margin-top:84px}

/* ═══════════════ ТИПОГРАФИКА (исходная конфигурация) ═══════════════ */
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.035em;line-height:1.03;font-weight:900;color:var(--text)}
h1{font-size:clamp(58px,8.6vw,142px);line-height:.96}
h2{font-size:clamp(36px,5vw,68px);letter-spacing:-.03em;max-width:1020px}
h2 .dim{color:var(--faint)}
.serif,.serif-acc,.serif-dim{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.serif-acc{color:var(--gold)}
.serif-dim{color:var(--faint)}
.mono{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;font-weight:500}
.gold-grad{background:linear-gradient(100deg,var(--gold-hi) 8%,var(--gold) 46%,var(--gold-deep) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:680px;margin:32px 0 0}
.ghost{position:absolute;top:44px;right:0;transform:translate3d(0,var(--py,0px),0);will-change:transform;
  font-family:var(--disp);font-weight:900;letter-spacing:-.05em;
  font-size:clamp(120px,20vw,300px);line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--line);
  pointer-events:none;user-select:none;z-index:0}

/* приборная шапка раздела: индекс · метка · линейка */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.sec-head .idx{color:var(--gold);border:1px solid var(--gold-line-dim);border-radius:3px;padding:6px 10px;line-height:1}
.sec-head .lab{color:var(--aqua-dim)}
.sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),var(--line) 60%,transparent)}

/* манифест: крупный текст, слова зажигаются по скроллу */
.manifesto{font-family:var(--disp);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(23px,2.9vw,40px);line-height:1.38;color:var(--text);
  max-width:1060px;margin-top:56px}
.manifesto b{font-weight:700;color:var(--gold-hi)}
[data-theme="light"] .manifesto b{color:var(--gold)}

/* ═══════════════ КНОПКИ ═══════════════ */
.btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--aqua-hi),#54C9C1 60%,#3FB3AB);color:#032023;
  border:none;text-decoration:none;font-family:var(--disp);font-weight:800;letter-spacing:-.01em;
  font-size:15px;padding:17px 32px;border-radius:99px;display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;transition:transform .35s var(--easing),box-shadow .35s;
  box-shadow:0 14px 44px -16px rgba(111,227,220,.5),inset 0 1px 0 rgba(255,255,255,.4)}
[data-theme="light"] .cta{background:linear-gradient(135deg,#128078,#0B6E68);color:#F4FBF9;
  box-shadow:0 14px 40px -16px rgba(11,110,104,.55)}
.cta::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-22deg);transition:left .6s var(--easing)}
.cta:hover{transform:translateY(-2px);box-shadow:0 22px 60px -18px rgba(111,227,220,.7),inset 0 1px 0 rgba(255,255,255,.4)}
[data-theme="light"] .cta:hover{box-shadow:0 22px 54px -18px rgba(11,110,104,.7)}
.cta:hover::after{left:130%}
.cta .arr{transition:transform .35s var(--easing)}
.cta:hover .arr{transform:translateX(4px)}
.cta-big{padding:20px 40px;font-size:16.5px}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .4s,border-color .4s,backdrop-filter .4s}
/* вверху страницы шапка лежит на тёмной пластине хиро — текст всегда светлый */
.nav:not(.scrolled){--text:#EDF4F3;--body:#AEC3C5;--muted:#8FA6AB;--faint:#5C7278;
  --line:rgba(148,197,199,.13);--line-2:rgba(148,197,199,.3);
  --aqua:#7FE8DF;--gold:#D9AB55;--gold-line:rgba(217,171,85,.34)}
.nav:not(.scrolled) .cta{background:linear-gradient(135deg,#9DF3EC,#54C9C1 60%,#3FB3AB);color:#032023}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
.nav-progress{position:absolute;bottom:-1px;left:0;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--aqua),var(--gold))}
.nav-in{max-width:none;margin:0 auto;padding:0 34px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--text)}
.brand-mark{width:38px;height:38px;flex:none;border-radius:50%;position:relative;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(255,200,80,.35))}
.brand-mark::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed var(--gold-line);
  animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-t{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;font-size:17.5px}
.brand-t em{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:32px}
.nav-links a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  transition:color .25s;position:relative;padding:6px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--aqua);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--easing)}
.nav-links a:hover,.nav-links a.active{color:var(--aqua)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-cta{padding:11px 22px;font-size:13.5px}
.theme-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:color .3s,border-color .3s,transform .5s var(--easing)}
.theme-btn:hover{color:var(--gold);border-color:var(--gold-line);transform:rotate(30deg)}
.theme-btn svg{width:17px;height:17px;grid-area:1/1;transition:opacity .35s,transform .5s var(--easing)}
.theme-btn .ic-sun{opacity:0;transform:scale(.5) rotate(-90deg)}
[data-theme="light"] .theme-btn .ic-sun{opacity:1;transform:none}
[data-theme="light"] .theme-btn .ic-moon{opacity:0;transform:scale(.5) rotate(90deg)}

/* ═══════════════ МАРШРУТ + КОМПАС ═══════════════ */
#route{position:absolute;top:0;left:0;width:100%;z-index:3;pointer-events:none;overflow:visible}
#route .rg-a{stop-color:var(--aqua);stop-opacity:.4}
#route .rg-b{stop-color:var(--aqua);stop-opacity:.3}
#route .rg-c{stop-color:var(--gold);stop-opacity:.45}
#route .rt-base{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 9;stroke-linecap:round}
#route .rt-draw{fill:none;stroke:url(#routeGrad);stroke-width:1.2;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(111,227,220,.22))}
#route .wp{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5;transition:stroke .6s,fill .6s}
#route .wp.passed{fill:var(--gold);stroke:var(--gold-line)}
#route .wp-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  fill:var(--faint);opacity:0;transition:opacity .6s}
#route .wp-label.passed{opacity:.85;fill:var(--gold)}
#route .rt-marker{fill:var(--aqua);filter:drop-shadow(0 0 8px rgba(111,227,220,.8))}
#route .rt-marker-ring{fill:none;stroke:var(--aqua);stroke-opacity:.5;stroke-width:1}
@media(max-width:1240px){#route .wp-label{display:none}}
@media(max-width:1024px){#route{display:none}}

.compass{position:fixed;left:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:12px;
  padding:8px 20px 8px 8px;border-radius:99px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--easing),transform .6s var(--easing),background .5s;pointer-events:none}
.compass.on{opacity:1;transform:none;pointer-events:auto}
.compass-dial{width:46px;height:46px;border-radius:50%;position:relative;flex:none;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2)}
.compass-dial::before{content:'';position:absolute;inset:5px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--line-2) 0deg .8deg, transparent .8deg 30deg)}
.compass-dial .needle{position:absolute;left:50%;top:50%;width:2px;height:30px;margin:-15px 0 0 -1px;will-change:transform}
.compass-dial .needle::before{content:'';position:absolute;top:0;left:0;width:2px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.compass-dial .needle::after{content:'';position:absolute;bottom:0;left:0;width:2px;height:15px;border-radius:2px;
  background:var(--line-2)}
.compass-dial .hub{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 10px 2px rgba(111,227,220,.5)}
.compass-meta{display:flex;flex-direction:column;gap:4px}
.compass-meta .sec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.compass-meta .brg{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--faint)}
.compass-meta .brg b{color:var(--gold);font-weight:500}
@media(max-width:900px){.compass{display:none}}

/* ═══════════════ ПЛАСТИНЫ ═══════════════ */
.plate{position:relative;overflow:hidden;border-radius:clamp(18px,2.4vw,30px);
  background:var(--plate-bg);border:1px solid var(--line);
  box-shadow:0 60px 140px -70px rgba(0,0,0,.85)}
[data-theme="light"] .plate{box-shadow:0 44px 110px -60px rgba(23,42,45,.38)}
.plate-dark{border-color:rgba(148,197,199,.1)}
.plate .liquid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.plate-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,rgba(2,7,9,.84) 0%,rgba(2,7,9,.5) 42%,rgba(2,7,9,.1) 72%,rgba(2,7,9,.34) 100%)}

/* ═══════════════ HERO ═══════════════ */
#hero{padding:0;min-height:100svh;display:flex}
/* на 0% скролла хиро — весь экран; рамка и скругление появляются при прокрутке (GSAP) */
.hero-plate{flex:1;margin:0;border-radius:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero-inner{position:relative;z-index:2;padding:clamp(96px,12vh,150px) clamp(24px,4vw,64px) clamp(56px,7vh,84px)}
.hero-top{max-width:1000px}
h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
h1 .l>span{display:inline-block}
.hero-sub{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--body);
  font-size:clamp(16px,2vw,26px);line-height:1.3;margin-top:14px;
  display:flex;align-items:center;gap:18px}
.hero-sub::after{content:'';height:1px;flex:1;max-width:240px;background:linear-gradient(90deg,var(--line-2),transparent)}

.initiate{display:grid;grid-template-columns:1.05fr .95fr 1.2fr;gap:14px;margin-top:clamp(30px,4.5vh,52px);max-width:1560px}
.hero-card{position:relative;padding:clamp(20px,2.4vh,30px) clamp(20px,2vw,30px);
  border:1px solid rgba(148,197,199,.16);border-radius:16px;
  background:rgba(4,12,16,.52);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:12px;justify-content:center;
  transition:border-color .4s,background .4s,transform .4s var(--easing)}
.hero-card:hover{border-color:rgba(127,232,223,.34);background:rgba(6,17,22,.68);transform:translateY(-3px)}
.hero-card::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--aqua),transparent)}
.hero-card:nth-child(2)::before{background:linear-gradient(180deg,var(--gold),transparent)}
.hero-card:nth-child(3)::before{background:linear-gradient(180deg,var(--aqua-dim),transparent)}
.thesis-box{font-family:var(--disp);font-size:clamp(19px,1.75vw,26px);font-weight:800;color:var(--text);
  line-height:1.25;letter-spacing:-.02em}
.key{font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:var(--text)}
.key b{color:var(--gold);font-weight:600}
.lead-p{font-size:clamp(14px,1.15vw,16px);color:var(--body);line-height:1.6}
.h-lead{font-size:clamp(15px,1.3vw,18px);color:var(--text);line-height:1.5;font-weight:500}
.h-rest{font-size:clamp(13.5px,1.05vw,15px);color:var(--body);line-height:1.6}

.hero-figure{position:absolute;top:46%;right:clamp(4px,2.5vw,48px);transform:translateY(-50%);
  width:min(31vw,470px);aspect-ratio:470/640;z-index:1;pointer-events:none}
.hero-figure #figure{width:100%;height:100%;display:block}
.figure-cap{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  color:var(--faint);font-size:9px;letter-spacing:.26em;white-space:nowrap;
  display:flex;align-items:center;gap:10px}
.figure-cap::before,.figure-cap::after{content:'';width:26px;height:1px;background:var(--line-2)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;color:var(--faint);z-index:3}
.scroll-hint span{font-size:9px;letter-spacing:.3em}
.scroll-hint .line{width:1px;height:40px;background:linear-gradient(180deg,var(--aqua-dim),transparent);overflow:hidden;position:relative}
.scroll-hint .line::after{content:'';position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--aqua);
  animation:drop 2s var(--easing) infinite}
@keyframes drop{to{top:120%}}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;
  position:relative;z-index:2;background:color-mix(in srgb,var(--bg-2) 55%,transparent);margin-top:clamp(28px,4vh,48px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq{display:inline-flex;align-items:center;gap:64px;flex:none}
.mq span{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mq span b{color:var(--aqua-dim);font-weight:500}
.mq i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.55;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══════════════ WHY ═══════════════ */
#why .statement{font-size:clamp(38px,5.4vw,76px);max-width:1080px}


/* ═══════════════ TERRITORY ═══════════════ */
.terr{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:start}
.terr .txt h2{margin-bottom:28px}
.terr .txt p{color:var(--muted);margin-bottom:20px;font-size:16.5px;max-width:560px}
.terr .txt .conclusion{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.mirror-col{display:flex;flex-direction:column;padding-top:clamp(8px,1.5vw,30px)}
.mirror-intro{border-left:2px solid var(--gold);padding:3px 0 3px 18px;font-size:clamp(14px,1.4vw,16px);
  line-height:1.55;color:var(--text);margin-bottom:clamp(20px,2.5vh,30px)}
.mirror{position:sticky;top:104px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--plate-bg);overflow:hidden;box-shadow:var(--shadow)}
.mirror .mh{font-size:10px;color:var(--muted);
  padding:18px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.mirror .mh .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px 2px rgba(111,227,220,.4)}
.trans{padding:19px 28px;border-bottom:1px solid var(--line);transition:background .3s,padding-left .3s var(--easing)}
.trans:hover{background:rgba(127,232,223,.04);padding-left:34px}
.trans:last-child{border:none}
.trans .from{font-family:var(--serif);font-style:italic;font-size:19px;
  background:linear-gradient(135deg,var(--aqua-hi),var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.trans .to{color:var(--text);font-size:14.5px;display:flex;align-items:baseline;gap:11px;margin-top:6px}
.trans .to::before{content:'→';color:var(--gold);font-family:var(--mono);font-size:12px}

/* ═══════════════ BENEFITS · гроссбух ═══════════════ */
#benefits h2{margin-top:0}
.benefits{margin-top:60px;border-top:1px solid var(--line-2)}
.ben{display:grid;grid-template-columns:120px minmax(240px,.8fr) 1.4fr;gap:20px 44px;align-items:baseline;
  padding:34px 10px;border-bottom:1px solid var(--line);position:relative;
  transition:background .4s,padding-left .5s var(--easing)}
.ben::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);transition:width .7s var(--easing)}
.ben:hover{background:color-mix(in srgb,var(--surface) 60%,transparent);padding-left:24px}
.ben:hover::after{width:38%}
.ben .n{font-family:var(--disp);font-weight:900;font-size:42px;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);transition:color .4s}
.ben:hover .n{color:var(--gold);-webkit-text-stroke-color:transparent}
.ben h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.025em}
.ben p{color:var(--muted);font-size:15.5px;max-width:640px}
.ben.gold{border-bottom-color:var(--gold-line-dim)}
.ben.gold .n{-webkit-text-stroke-color:var(--gold-line)}
.ben.gold h3{color:var(--gold-hi)}
[data-theme="light"] .ben.gold h3{color:var(--gold)}

/* ═══════════════ PILLARS · тёмная пластина с гравированной сеткой ═══════════════ */
#pillars{padding:clamp(40px,6vh,80px) 0}
.pillars-plate{margin:0 clamp(8px,1.2vw,16px);padding:clamp(72px,9vh,120px) 0}
.pillars-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}
.pillars-plate h2{color:var(--text)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pillar{padding:30px;display:flex;flex-direction:column;background:var(--plate-bg);
  transition:background .45s;position:relative}
.pillar:hover{background:color-mix(in srgb,var(--aqua) 4%,var(--plate-bg))}
.pillar .pnum{font-size:10.5px;color:var(--gold);margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:baseline}
.pillar .pnum .rn{font-size:20px;color:transparent;-webkit-text-stroke:1px var(--gold-line);letter-spacing:.05em;font-family:var(--disp);font-weight:900}
.pillar h3{font-size:20.5px;margin-bottom:7px;letter-spacing:-.02em;font-weight:700}
.pillar .pauth{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--faint);margin-bottom:16px}
.pillar p{color:var(--muted);font-size:14.5px;margin-bottom:18px;flex:1}
.pillar .pmetric{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  background:rgba(111,227,220,.05);border:1px solid rgba(111,227,220,.16);border-radius:99px;
  font-size:10.5px;color:var(--aqua);letter-spacing:.08em}
.pillar.deep{background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 8%,var(--plate-bg)),var(--plate-bg) 55%)}
.pillar.deep:hover{background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 11%,var(--plate-bg)),color-mix(in srgb,var(--aqua) 4%,var(--plate-bg)) 55%)}
.pillar.deep p{max-width:880px}
.prow{background:var(--plate-bg);padding:20px 30px 16px;font-size:10.5px;color:var(--gold);
  letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center}
@media(min-width:1021px){
  .pillars .pillar:nth-child(4){grid-area:2/1}
  .pillars .pillar:nth-child(5){grid-area:3/1}
  .pillars .pillar:nth-child(6){grid-area:4/1}
  .pillars .pillar:nth-child(7){grid-area:2/2}
  .pillars .pillar:nth-child(8){grid-area:3/2}
  .pillars .pillar:nth-child(9){grid-area:4/2}
  .pillars .pillar:nth-child(10){grid-area:2/3}
  .pillars .pillar:nth-child(11){grid-area:3/3}
  .pillars .pillar:nth-child(12){grid-area:4/3}
  /* конспектные гриды (6/3/3 карточек БЕЗ строки заголовков .prow): жёсткая
     раскладка выше писалась под старую структуру и ставила карточки 4–6
     каждую в свой ряд первой колонки — «буквой Г». Обычный поток грида. */
  .pillars.nine-grid .pillar{grid-area:auto}
}
.pillars-note{margin-top:44px;text-align:center;color:var(--muted);font-size:15.5px}
.pillars-note b{color:var(--gold);font-weight:600}

/* ═══════════════ TIERS ═══════════════ */
.tier-head .lede{max-width:720px}
.stepband{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:start;padding:88px 0;border-bottom:1px solid var(--line)}
.stepband.first{border-top:1px solid var(--line);margin-top:64px}
.stepband.rev .step-vis{order:-1}
.step-txt .lvl{font-size:11px;color:var(--aqua-dim);display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.step-txt h3{font-size:clamp(30px,3.4vw,44px);margin:20px 0 24px;letter-spacing:-.03em}
.step-txt p{color:var(--muted);font-size:16px;margin-bottom:18px}
.honest{border-left:2px solid var(--gold);padding:5px 0 5px 24px;color:var(--text);font-size:17px;margin-top:6px}
.honest b{color:var(--gold);font-weight:600}
.stepmeta{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.stepmeta span{font-size:10.5px;letter-spacing:.08em;color:var(--aqua);
  border:1px solid rgba(111,227,220,.2);background:rgba(111,227,220,.05);border-radius:99px;padding:7px 15px}
[data-theme="light"] .stepmeta span{border-color:rgba(11,110,104,.3);background:rgba(11,110,104,.06)}
.med{margin-top:22px;border:1px solid var(--gold-line-dim);border-radius:14px;
  background:color-mix(in srgb,var(--gold) 5%,transparent);
  padding:15px 19px;font-size:13.5px;color:var(--body)}
.med b{color:var(--gold);font-weight:600}

/* демо-панели · приборные экраны (всегда тёмные) */
.demo-panel{position:sticky;top:104px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--plate-bg);overflow:hidden;padding:0 28px;box-shadow:var(--shadow)}
.demo-h{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;margin:0 -28px 10px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.demo-h .t{font-size:10px;color:var(--muted)}
.demo-h .st{font-size:10px;color:var(--aqua);display:flex;align-items:center;gap:8px;text-transform:none}
.demo-h .st::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 8px 2px rgba(111,227,220,.5);animation:blink 2s ease infinite}
@keyframes blink{50%{opacity:.35}}
.field{padding:17px 0;border-bottom:1px solid var(--line)}
.field .q{font-size:14.5px;color:var(--text);margin-bottom:10px;display:flex;gap:12px;align-items:baseline}
.field .q .qd{font-size:9px;color:var(--gold);flex:none;border:1px solid var(--gold-line-dim);border-radius:4px;padding:3px 7px}
.ph{border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--bg) 60%,transparent);padding:12px 15px;
  color:var(--faint);font-family:var(--serif);font-style:italic;font-size:15.5px}
.ph .caret{display:inline-block;width:1px;height:14px;background:var(--aqua);vertical-align:-2px;margin-left:2px;
  animation:blink 1.1s steps(1) infinite}
.field.empty .ph{border-style:dashed;border-color:var(--gold-line);color:var(--gold-hi);opacity:.9}
.field.empty .note{font-size:10px;color:var(--faint);margin-top:8px;letter-spacing:.08em}
.demo-f{margin:8px -28px 0;padding:16px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--muted);letter-spacing:.03em;text-transform:none}
.demo-f .ok{color:var(--aqua)}

.quads{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:14px 0 22px}
.quad{padding:16px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--bg) 50%,transparent)}
.quad .qi{font-size:9px;letter-spacing:.15em;color:var(--muted);margin-bottom:8px}
.quad .qn{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--text);margin-bottom:13px;letter-spacing:-.01em}
.quad .qbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:9px}
.quad .qfill{height:100%;width:0;background:linear-gradient(90deg,var(--aqua-dim),var(--aqua));border-radius:2px;
  transition:width 1.4s var(--easing)}
.quad .qval{font-size:11px;color:var(--aqua);display:flex;justify-content:space-between;text-transform:none}
.quad .qval .delta{color:var(--gold)}
.timeline{padding:20px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.tp{text-align:center;flex:1}
.tp .day{font-size:9px;color:var(--faint);letter-spacing:.15em;margin-bottom:7px}
.tp .dot{width:12px;height:12px;border-radius:50%;background:var(--aqua-deep);margin:0 auto 7px;border:2px solid var(--plate-bg)}
.tp.done .dot{background:var(--aqua)}
.tp.now .dot{background:var(--gold);box-shadow:0 0 14px rgba(217,169,76,.65)}
.tp .label{font-size:9px;color:var(--faint);letter-spacing:.06em}
.demo-note{margin:0 -28px;padding:16px 28px 18px;border-top:1px solid var(--line);text-align:center;
  font-size:11.5px;color:var(--muted);letter-spacing:.04em;line-height:1.7;text-transform:none}
.demo-note b{color:var(--aqua);font-weight:500}

/* ═══════════════ ПРЕМИУМ · грамота ═══════════════ */
.prem{position:relative;overflow:hidden;border:1px solid var(--gold-line);border-radius:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,var(--surface)),var(--surface) 45%);
  padding:68px 60px;margin-top:72px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--shadow)}
.prem::before{content:'';position:absolute;inset:9px;border:1px solid var(--gold-line-dim);border-radius:16px;pointer-events:none}
.prem::after{content:'';position:absolute;top:-140px;right:-140px;width:420px;height:420px;border-radius:50%;
  border:1px dashed var(--gold-line-dim);animation:spin 80s linear infinite;pointer-events:none}
.prem>*{position:relative;z-index:1}
.prem-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:42px;
  padding-bottom:30px;border-bottom:1px solid var(--gold-line-dim)}
.prem-top .lvl{font-size:11px;color:var(--gold)}
.prem-top .sub{font-size:10px;color:var(--faint)}
.prem h3{font-family:var(--disp);font-weight:900;font-size:clamp(32px,4.2vw,54px);letter-spacing:-.03em;line-height:1.06;margin-bottom:26px;color:var(--text)}
.prem h3 .gold{background:linear-gradient(100deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.prem .plede{color:var(--muted);font-size:17.5px;max-width:700px;margin-bottom:42px}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;border-top:1px solid var(--gold-line-dim)}
.dims .dim{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:21px 0;border-bottom:1px solid var(--gold-line-dim);align-items:baseline}
.dims .dim .dn{font-size:10.5px;color:var(--gold)}
.dims .dim h4{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em;margin-bottom:5px;color:var(--text)}
.dims .dim p{color:var(--muted);font-size:14.5px;line-height:1.58}
.dims .dim .dim-follow{margin-top:10px}
.dim-wide{grid-column:1/-1}
.dims .dim .mono-tag{margin-top:14px;font-size:10px;color:var(--gold)}
.dims .dim .disclaim{margin-top:10px;font-size:12.5px;color:var(--faint)}
.prem .cycle{margin-top:36px;color:var(--text);font-size:17px;border-left:2px solid var(--gold);padding:5px 0 5px 24px;max-width:660px}
.prem .cycle i{color:var(--muted);font-family:var(--serif);font-size:18px}
.prac{margin-top:46px;padding-top:40px;border-top:1px dashed var(--gold-line)}
.prac .tag{font-size:10px;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:99px;padding:6px 14px;display:inline-block;margin-bottom:20px;
  background:rgba(217,169,76,.06)}
.prac h4{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.025em;margin-bottom:14px;color:var(--text)}
.prac h4 .gold{color:var(--gold)}
.prac p{color:var(--muted);font-size:15.5px;max-width:780px}
.prem .close-line{margin-top:38px;color:var(--faint);font-family:var(--serif);font-style:italic;font-size:17px}

/* ═══════════════ VOICES · карусель: большой центр, малые края ═══════════════ */
#voices{overflow:clip}
.car{margin-top:56px;position:relative}
.car-view{overflow:hidden;padding:18px 0 10px;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.car-view.grabbing{cursor:grabbing}
.car-track{display:flex;align-items:stretch;will-change:transform}
.voice{flex:none;padding:34px;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  transition:border-color .4s,background .4s;will-change:transform,opacity}
.voice:hover{border-color:var(--line-2);background:var(--surface-2)}
.car-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}
.car-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:color .3s,border-color .3s,transform .3s var(--easing)}
.car-btn:hover{color:var(--gold);border-color:var(--gold-line);transform:translateY(-2px)}
.car-btn svg{width:18px;height:18px}
.voice q{font-style:normal;quotes:none;font-size:16px;color:var(--body);line-height:1.66;margin-bottom:24px;flex:1}
.voice q::before{content:'';display:block;width:26px;height:2px;background:var(--gold);margin-bottom:18px;opacity:.75}
.voice .who{display:flex;align-items:center;gap:15px;padding-top:18px;border-top:1px solid var(--line)}
.voice .av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:16px;color:#03211F;
  background:linear-gradient(135deg,var(--aqua-hi),var(--aqua-dim));box-shadow:0 6px 18px -6px rgba(111,227,220,.4)}
[data-theme="light"] .voice .av{color:#F4FBF9}
.voice .av.g{background:linear-gradient(135deg,var(--gold-hi),#B98A34);color:#241703}
[data-theme="light"] .voice .av.g{color:#FFF9EC}
.voice .nm{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--text)}
.voice .rl{font-size:10px;color:var(--faint);margin-top:4px;letter-spacing:.06em}

/* ═══════════════ NOT FIT ═══════════════ */
.notfit{border:1px solid var(--line-2);border-radius:24px;background:var(--surface);
  padding:56px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.notfit-h h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:16px}
.notfit-h p{color:var(--muted);font-size:16.5px;max-width:660px}
.notfit-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}
.nfit{padding:26px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 45%,transparent);
  transition:border-color .35s,background .35s}
.nfit:hover{border-color:var(--gold-line);background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.nfit .nlabel{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:10px}
.nfit .nlabel::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--gold-line-dim),transparent)}
.nfit h4{font-family:var(--disp);font-weight:700;font-size:17.5px;margin-bottom:9px;color:var(--text);letter-spacing:-.015em}
.nfit p{color:var(--muted);font-size:14.5px;line-height:1.58}
.nfit p i{color:var(--text);font-family:var(--serif);font-size:16px}
.nfit .nfit-follow{margin-top:12px}
.nfit-wide{grid-column:1/-1}
.notfit-close{margin-top:34px;padding-top:30px;border-top:1px solid var(--line);text-align:center;color:var(--muted);
  font-family:var(--serif);font-style:italic;font-size:17.5px}
.notfit-close b{color:var(--aqua);font-weight:600;font-style:normal;font-family:var(--sans);font-size:15.5px}

/* ═══════════════ TRUST ═══════════════ */
.privacy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.pcard{padding:30px 28px;border-radius:18px;border:1px solid var(--line);background:var(--surface);
  transition:transform .45s var(--easing),border-color .45s,background .45s,box-shadow .45s}
.pcard:hover{transform:translateY(-5px);border-color:var(--gold-line);background:var(--surface-2);box-shadow:var(--shadow)}
.pcard .h{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.pcard .h svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.6}
.pcard h4{font-family:var(--disp);font-weight:700;font-size:17.5px;letter-spacing:-.02em;color:var(--text)}
.pcard p{font-size:14px;color:var(--muted)}
.trust-line{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 36px;
  border-top:1px solid var(--line);padding-top:30px}
.tl-item{font-size:14.5px;color:var(--muted);display:flex;gap:11px}
.tl-item span{color:var(--gold)}
.trust-final{margin-top:38px;color:var(--text);font-size:19px;text-align:center;max-width:680px;margin-left:auto;margin-right:auto;font-weight:600}
.trust-legal{margin-top:14px;text-align:center;font-size:13px;color:var(--faint);max-width:640px;margin-left:auto;margin-right:auto}

/* ═══════════════ FAQ ═══════════════ */
#faq .faq{margin-top:52px;border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{padding:30px 6px;cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:26px;
  font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,20.5px);color:var(--text);letter-spacing:-.018em;line-height:1.35;transition:color .25s}
.qa summary:hover{color:var(--aqua)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:none;width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;color:var(--gold);transition:transform .4s var(--easing),background .3s,border-color .3s}
.qa[open] summary{color:var(--aqua)}
.qa[open] summary .pm{transform:rotate(45deg);border-color:var(--gold-line);background:rgba(217,169,76,.08)}
.qa .qbody{padding:0 56px 30px 6px;color:var(--muted);font-size:15.5px;line-height:1.68;max-width:920px}
.qa .qbody p{margin-bottom:12px}
.qa .qbody p:last-child{margin-bottom:0}
.qa[open] .qbody{animation:fadeup .55s var(--easing)}
@keyframes fadeup{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ═══════════════ START · шёлк проступает из глубины, без швов ═══════════════ */
#start{padding:clamp(40px,6vh,80px) 0;overflow:clip}
.start-plate{margin:0;border:none;border-radius:0;background:transparent;box-shadow:none;
  min-height:min(88svh,900px);
  display:grid;place-items:center;text-align:center;padding:clamp(70px,10vh,120px) 24px}
.start-plate .liquid{inset:-4% -5%;width:110%;height:108%;opacity:.88;
  -webkit-mask-image:radial-gradient(ellipse 64% 46% at 50% 56%,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.62) 18%,
    #000 34%,
    rgba(0,0,0,.72) 52%,
    rgba(0,0,0,.28) 70%,
    transparent 88%);
  mask-image:radial-gradient(ellipse 64% 46% at 50% 56%,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.62) 18%,
    #000 34%,
    rgba(0,0,0,.72) 52%,
    rgba(0,0,0,.28) 70%,
    transparent 88%)}
/* приборные токены пластины не нужны — секция живёт в теме страницы */
.start-plate{--plate-bg:var(--bg)}
.start-in{position:relative;z-index:2}
.start-in h2{font-size:clamp(44px,7vw,92px);margin-bottom:20px;color:var(--text)}
.start-in h2 .serif-you{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:500}
.start-in .sub{color:var(--body);font-size:17px;max-width:520px;margin:0 auto 44px}
.start-in .btns{justify-content:center}
.start-in .fine{margin-top:28px;color:var(--faint);font-size:11px;letter-spacing:.1em}

/* ═══════════════ РАСКРЫВАШКИ ═══════════════ */
.fold{height:0;overflow:hidden}
.fold.open{height:auto}
.fold-in{padding-top:6px}
.fold-btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:transparent;border:1px solid var(--gold-line);border-radius:99px;
  color:var(--gold);padding:11px 22px;letter-spacing:.16em;
  transition:background .3s,border-color .3s,transform .3s var(--easing)}
.fold-btn:hover{background:color-mix(in srgb,var(--gold) 8%,transparent);transform:translateY(-2px)}
.fold-btn .fb-ic{font-family:var(--mono);font-size:14px;line-height:1;
  transition:transform .45s var(--easing);display:inline-block}
.fold-btn[aria-expanded="true"] .fb-ic{transform:rotate(45deg)}
.prem .fold-btn{margin-bottom:6px}
.prem .fold-in{padding-top:34px}
.pillars-plate .fold-btn{margin-top:30px}
.pillars-plate .fold-in .pillars{margin-top:38px}

/* ═══════════════ FINALE / FOOTER ═══════════════ */
#finale{padding:clamp(110px,15vh,190px) 0;text-align:center}
#finale .finale-emblem{display:block;margin:0 auto 38px;width:clamp(120px,15vw,190px);height:auto;
  filter:drop-shadow(0 0 34px rgba(255,200,80,.4)) drop-shadow(0 0 90px rgba(217,169,76,.2));opacity:.97;
  animation:emblemFloat 7s ease-in-out infinite}
@keyframes emblemFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.02)}}
#finale .qline{width:70px;height:2px;margin:0 auto 52px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
#finale blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,4.4vw,52px);
  line-height:1.34;color:var(--text);letter-spacing:-.015em;quotes:none;max-width:900px;margin:0 auto}
#finale .gold{color:var(--gold)}
footer{border-top:1px solid var(--line);padding:64px 0 40px;position:relative;overflow:clip}
.foot-mark{font-family:var(--disp);font-weight:900;letter-spacing:-.045em;text-align:center;line-height:.85;
  font-size:clamp(70px,13.5vw,200px);color:transparent;-webkit-text-stroke:1px var(--line);
  user-select:none;pointer-events:none;margin-bottom:48px}
.foot-mark em{font-style:normal;-webkit-text-stroke:1px var(--gold-line-dim)}
.fin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;color:var(--faint);font-size:13px}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1280px){
  .initiate{grid-template-columns:1fr 1fr;max-width:900px}
  .initiate .hero-card:last-child{grid-column:1/-1}
  .hero-figure{width:min(28vw,340px)}
}
@media(max-width:1020px){
  .pillars{grid-template-columns:1fr 1fr}
  .prow{display:none}
  .privacy{grid-template-columns:1fr}
  .ben{grid-template-columns:80px 1fr;gap:10px 24px}
  .ben p{grid-column:2}
}
@media(max-width:900px){
  section{padding:80px 0}
  .wrap{padding:0 22px}
  .nav-links{display:none}
  .nav-in{height:64px;padding:0 20px}
  html{scroll-padding-top:80px}
  #hero{min-height:0}
  .hero-plate{min-height:0}
  .hero-inner{padding:120px 22px 60px}
  .hero-figure{position:absolute;inset:60px 0 0;width:auto;transform:none;opacity:.22;z-index:0}
  .hero-figure #figure{width:100%;height:100%}
  .figure-cap{display:none}
  .initiate{grid-template-columns:1fr;max-width:none}
  .initiate .hero-card:last-child{grid-column:auto}
  .manifesto{font-size:clamp(20px,5.6vw,26px)}
  .terr,.stepband,.pillars,.notfit-list,.trust-line{grid-template-columns:1fr}
  .terr{gap:40px}
  .mirror-col{padding-top:0}
  .stepband{padding:56px 0;gap:40px}
  .stepband.rev .step-vis{order:0}
  .mirror,.demo-panel{position:static}
  .prem{padding:40px 26px}
  .prem::before{inset:7px}
  .dims{grid-template-columns:1fr}
  .notfit{padding:30px 22px}
  .qa summary{padding:24px 2px}
  .qa .qbody{padding:0 30px 26px 2px}
  .ghost{display:none}
  .scroll-hint{display:none}
  .foot-mark{font-size:15vw;white-space:nowrap;margin-bottom:36px}
  footer{padding:52px 0 34px}
  .fin{justify-content:center;text-align:center;font-size:12.5px;gap:10px}
}
@media(max-width:520px){
  .quads{grid-template-columns:1fr}
  .nav-cta{display:none}
  .voice{padding:26px}
}

/* ═══ мобильная компактность: плотнее ритм, меньше воздуха ═══ */
@media(max-width:900px){
  section{padding:54px 0}
  .sec-head{margin-bottom:26px}
  .lede{margin-top:18px}
  .hero-inner{padding:96px 18px 46px}
  .initiate{margin-top:22px;gap:10px}
  .hero-card{padding:18px 18px;gap:9px}
  .hero-sub{margin-top:10px}
  .marquee{padding:15px 0;margin-top:18px}
  .manifesto{margin-top:28px;line-height:1.42}
  #why .statement{font-size:clamp(32px,8.4vw,44px)}
  .terr{gap:26px}
  .terr .txt h2{margin-bottom:18px}
  .benefits{margin-top:28px}
  .ben{padding:20px 2px}
  .ben h3{margin-bottom:2px}
  .pillars-plate{padding:48px 0}
  .pillars-in{padding:0 20px}
  .pillars-plate .fold-btn{margin-top:20px}
  .pillars-plate .fold-in .pillars{margin-top:24px}
  .pillar{padding:22px 20px}
  .pillars-note{margin-top:26px}
  .tier-head h2{margin-bottom:0}
  .stepband{padding:38px 0;gap:26px}
  .stepband.first{margin-top:34px}
  .step-txt h3{margin:14px 0 16px}
  .step-txt p{margin-bottom:13px}
  .stepmeta{margin:18px 0}
  .prem{padding:32px 20px;margin-top:44px}
  .prem-top{margin-bottom:26px;padding-bottom:20px}
  .prem h3{margin-bottom:18px}
  .prem .plede{margin-bottom:26px}
  .prem .fold-in{padding-top:22px}
  .prac{margin-top:28px;padding-top:26px}
  .prem .close-line{margin-top:24px}
  .car{margin-top:28px}
  .car-nav{margin-top:16px}
  .voice q{margin-bottom:18px}
  .notfit{padding:26px 18px}
  .notfit-list{margin-top:24px;gap:10px}
  .nfit{padding:20px 18px}
  .notfit-close{margin-top:22px;padding-top:20px}
  .privacy{margin-top:26px;gap:10px}
  .pcard{padding:22px 20px}
  .trust-line{margin-top:22px;padding-top:20px;gap:9px 20px}
  .trust-final{margin-top:26px;font-size:17px}
  #faq .faq{margin-top:26px}
  .qa summary{padding:19px 2px}
  .qa .qbody{padding:0 22px 20px 2px}
  #start{padding:44px 0}
  .start-plate{min-height:72svh;padding:88px 20px}
  .start-in .sub{margin-bottom:30px}
  #finale{padding:70px 0 84px}
  #finale .finale-emblem{width:104px;margin-bottom:22px}
  #finale .qline{margin-bottom:28px}
  footer{padding:40px 0 28px}
  .foot-mark{margin-bottom:22px}
}

/* ═══ пре-скрытие (класс js ставится инлайн-скриптом в head; GSAP оживляет) ═══ */
html.js .hero-sub,html.js .initiate .hero-card,html.js .hero-figure{opacity:0}
html.js #heroTitle .l>span{transform:translateY(112%)}
html.no-m .hero-sub,html.no-m .initiate .hero-card,html.no-m .hero-figure{opacity:1!important}
html.no-m #heroTitle .l>span{transform:none!important}
html.no-m .pillar .pfold,html.no-m .fold{height:auto}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .car-track{flex-wrap:wrap}
  .voice{width:100%!important}
}

/* ── Девять школ и ОСС: конспект в развороте ─────────────────────────── */
.nine-sec{display:flex;align-items:baseline;gap:14px;margin:44px 0 6px}
.nine-sec:first-child{margin-top:32px}
.nine-sec h3{font-family:var(--disp);font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;color:var(--text);margin:0}
.nine-n{font-size:12.5px;letter-spacing:.13em;font-weight:500}
.nine-n.aqua{color:var(--aqua)}
.nine-n.gold{color:var(--gold)}
.nine-sub{font-size:14px;color:var(--muted);margin:0 0 10px;line-height:1.45;max-width:70ch}
/* карточная «таблица» школ (родной .pillars-грид) под заголовком секции —
   без гигантского отступа, рассчитанного на грид сразу после кнопки */
.pillars-plate .fold-in .pillars.nine-grid{margin-top:14px}
/* GSAP-анимация карточек (.pillar y:30 + скролл-триггер) писалась под старую
   сетку; внутри свёрнутого разворота триггеры не пересчитываются, часть плиток
   остаётся со сдвигом — сетка встаёт «буквой Г». Плиткам разворота анимация не
   нужна (fold анимируется сам); !important перебивает inline-стили GSAP. */
.nine-grid .pillar{opacity:1!important;transform:none!important}
/* подписи групп над плитками убраны; одинокий номер в своей строке оставлял
   пустоту по высоте — вынимаем его из потока в правый верхний угол карточки
   (.pillar уже position:relative), заголовок поднимается к верху */
.nine-grid .pnum{position:absolute;top:24px;right:26px;margin:0}
.nine-grid .pillar h3{padding-right:34px}
/* авторы методик: --faint на тёмном фоне почти не читался — поднимаем
   контраст и кегль, курсивный сериф оставляем как фирменную деталь */
.nine-grid .pauth{color:var(--body);font-size:16.5px}
.nine-box{margin-top:36px;padding:24px 26px;border:1px solid var(--gold-line);
  border-radius:16px;background:color-mix(in srgb,var(--gold) 3%,transparent)}
.nine-box p{font-size:14.5px;color:var(--body);line-height:1.6;margin:0;max-width:96ch}
.nine-box p+p{margin-top:12px}
.nine-box b{color:var(--text);font-weight:700}

/* ── Платоновы тела в демо режимов (рост каркаса) ────────────────────── */
/* у .demo-panel нет нижнего поля (padding:0 28px) — подписи фигур
   упирались в край панели */
.plato-panel{padding-bottom:26px}
.plato-lede{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.plato-lede b{color:var(--text);font-weight:600}
/* фигуры выровнены по верху, стрелка — по центру самой фигуры (не подписей):
   отступ снизу компенсирует три строки подписи под svg */
.plato-figs{display:flex;align-items:flex-start;gap:12px}
.plato-fig{flex:1;min-width:0}
.plato-fig svg{width:100%;display:block}
.plato-arrow{flex:none;font-size:16px;color:var(--faint);align-self:center;padding-bottom:56px}
/* легенда и «замер» под фигурами — из макета */
.plato-lgnd{font-size:10.5px;letter-spacing:.09em;color:var(--faint);margin-top:14px}
.plato-meas{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.06em;color:var(--faint)}
.plato-meas b{font-size:15px;color:var(--aqua);font-weight:500}
.plato-fnum{font-size:10.5px;letter-spacing:.14em;color:var(--gold);margin-top:10px}
.plato-fcap{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--text);margin-top:3px}
.plato-fsub{font-size:12px;color:var(--faint);line-height:1.4;margin-top:3px}
/* цвета конспекта → переменные темы: атрибутный селектор сильнее
   presentation-атрибута SVG, поэтому фигуры перекрашиваются и в светлой теме */
.plato-figs [stroke="#8FE4D0"]{stroke:var(--aqua)}
.plato-figs [stroke="#A9EFDD"]{stroke:var(--aqua-hi)}
.plato-figs [stroke="#6E7370"]{stroke:var(--faint)}
.plato-figs [stroke="#9AA09C"]{stroke:var(--muted)}
.plato-figs [fill="#EDEFEC"]{fill:var(--text)}

@media(max-width:900px){
  .plato-figs{gap:8px}
  .plato-arrow{font-size:13px}
}