/* =========================================================
   Энергосвязь · AI-001 — Fiery Ocean brand system
   Deep Ocean #003049 · Fiery Red #C1121F · Dark Blood Red #780000
   Cream #FDF0D5 · Steel Blue #669BBC
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ocean:#003049;
  --red:#C1121F;
  --blood:#780000;
  --cream:#FDF0D5;
  --steel:#669BBC;

  --font-head:'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t-mid:260ms; --t-slow:520ms;
}

/* Dark (primary) */
[data-theme="dark"]{
  --bg:#00263A;
  --bg-2:#003049;
  --surface:#013F5C;
  --surface-2:#00354F;
  --text:#FDF0D5;
  --text-2:#C9D9E2;
  --text-3:#9FBACB;
  --border:rgba(253,240,213,.16);
  --border-strong:rgba(253,240,213,.30);
  --accent:var(--red);
  --accent-hover:#E0202E;
  --on-accent:#FFF7E8;
  --accent-text:#8CBBD6;   /* readable accent for text on dark */
  --ring:#8CBBD6;
  --shadow:0 20px 60px rgba(0,12,20,.55);
  --shadow-sm:0 6px 20px rgba(0,12,20,.40);
  --glow-1:rgba(193,18,31,.30);
  --glow-2:rgba(102,155,188,.24);
  --grid-line:rgba(253,240,213,.05);
}

/* Light */
[data-theme="light"]{
  --bg:#FDF0D5;
  --bg-2:#FFF8E9;
  --surface:#FFFFFF;
  --surface-2:#FBF1DC;
  --text:#00263A;
  --text-2:#20455B;
  --text-3:#4C6B7E;
  --border:rgba(0,48,73,.16);
  --border-strong:rgba(0,48,73,.32);
  --accent:var(--red);
  --accent-hover:#9E0E19;
  --on-accent:#FFF7E8;
  --accent-text:#A50F1A;   /* readable accent for text on cream */
  --ring:#003049;
  --shadow:0 22px 60px rgba(0,48,73,.14);
  --shadow-sm:0 6px 20px rgba(0,48,73,.10);
  --glow-1:rgba(193,18,31,.18);
  --glow-2:rgba(102,155,188,.30);
  --grid-line:rgba(0,48,73,.055);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; line-height:1.16; margin:0; letter-spacing:-.03em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
em{font-style:normal; color:var(--accent-text)}

:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:6px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent);
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip-link:focus{left:0}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.wrap-narrow{max-width:840px}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--border); box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; gap:var(--space-3); min-height:76px}

.brand{display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:0}
.brand-mark{width:44px; height:44px; object-fit:contain}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-family:var(--font-head); font-weight:700; font-size:18.5px; letter-spacing:-.02em; color:var(--accent-text)}
.brand-name-alt{color:var(--text)}
.brand-tag{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:600}

.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  padding:9px 13px; white-space:nowrap; border-radius:var(--r-pill); font-size:14.5px; font-weight:600;
  color:var(--text-2); transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  cursor:pointer;
}
.nav a:hover{color:var(--text); background:var(--surface-2)}
.nav a.is-active{color:var(--accent-text); background:var(--surface-2)}

.header-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0}
.nav + .header-actions{margin-left:0}

.theme-toggle{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill);
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.theme-toggle:hover{border-color:var(--border-strong); transform:translateY(-1px)}
.theme-toggle:active{transform:scale(.96)}
.theme-toggle svg{fill:none; stroke:var(--text); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* Оптическое выравнивание: серп луны занимает меньше своего квадрата, чем солнце с лучами */
.ic-moon{width:24px; height:24px}
.ic-sun{width:22px; height:22px}
[data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none}
[data-theme="light"] .ic-sun{display:none} [data-theme="light"] .ic-moon{display:block}

.burger{
  display:none; width:44px; height:44px; padding:0; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-pill);
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.burger:hover{border-color:var(--border-strong)}
.burger:active{transform:scale(.96)}
.burger span{
  display:block; width:21px; height:2px; margin:0; flex-shrink:0;
  background:var(--text); border-radius:2px;
  transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 28px; border-radius:var(--r-pill);
  font-weight:700; font-size:16px; letter-spacing:.005em; cursor:pointer;
  border:1.5px solid transparent; text-align:center;
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-sm{min-height:44px; padding:0 22px; font-size:14.5px}
.btn{white-space:nowrap}
.btn-block{display:flex; width:100%; white-space:normal; line-height:1.3; padding:14px 20px; min-height:52px}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px var(--glow-1)}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 16px 34px var(--glow-1)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-outline{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--accent); color:var(--accent-text); transform:translateY(-2px)}
.btn-outline:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:var(--surface-2); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.98)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0 0}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(90px); will-change:transform}
.blob-1{width:min(62vw,640px); aspect-ratio:1; background:var(--glow-1); top:-16%; right:-10%}
.blob-2{width:min(52vw,540px); aspect-ratio:1; background:var(--glow-2); bottom:-24%; left:-12%}
.grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:var(--space-6); align-items:center; padding-bottom:var(--space-6)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); background:var(--surface-2); border:1px solid var(--border);
  padding:8px 16px; border-radius:var(--r-pill); margin-bottom:var(--space-3);
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--glow-1)}

.hero h1{
  font-size:clamp(36px,4.6vw,61px); line-height:1.08; letter-spacing:-.035em;
  margin-bottom:var(--space-3); text-wrap:balance;
}
.hero h1 em{display:block; font-style:normal; line-height:1.08}
.lead{font-size:clamp(17px,1.6vw,20px); color:var(--text-2); max-width:56ch; margin-bottom:var(--space-4)}

.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:var(--space-5)}

.hero-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); margin:0; padding-top:var(--space-3); border-top:1px solid var(--border)}
.hero-stats dt{font-family:var(--font-head); font-size:27px; font-weight:700; letter-spacing:-.032em; color:var(--accent-text); line-height:1.14}
.hero-stats .pct{font-size:.86em}
.section-head h2 em{display:block}
.hero-stats dd{margin:3px 0 0; font-size:13.5px; color:var(--text-3)}

/* Robot stage */
.hero-visual{display:grid; place-items:center}
.robot-stage{position:relative; width:min(100%,460px); aspect-ratio:1/.98; display:grid; place-items:center}
.halo{
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--glow-2), transparent 66%);
  filter:blur(6px);
}
.halo::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px dashed var(--border-strong); animation:spin 34s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.robot{position:relative; width:82%; height:auto; filter:drop-shadow(0 26px 42px rgba(0,12,20,.35)); animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Minimal status labels around the robot */
.chip{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid var(--border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text-2); font-size:13px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  opacity:0;
  animation:chipIn .8s var(--ease) forwards, chipFloat 7s ease-in-out infinite;
}
.chip .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  animation:dotPulse 2.6s ease-in-out infinite;
}
@keyframes chipIn{from{opacity:0; translate:0 12px}to{opacity:1; translate:0 0}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 var(--glow-1)}50%{box-shadow:0 0 0 6px transparent}}

.chip-1{top:6%;  left:-6%;  animation-delay:.30s, 1.2s; animation-duration:.8s, 7s}
.chip-2{top:45%; right:-9%; animation-delay:.60s, 1.9s; animation-duration:.8s, 8.4s}
.chip-3{bottom:5%; left:-2%; animation-delay:.90s, 2.6s; animation-duration:.8s, 9.2s}

/* Hover / focus: чип «оживает» — приподнимается, замирает, по нему проходит блик */
.chip{
  cursor:default; overflow:hidden; outline:none;
  transition:border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.chip .dot{transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease)}

.chip::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%,
             color-mix(in srgb, var(--text) 12%, transparent) 50%, transparent 62%);
  translate:-130% 0; opacity:0;
}
.chip:hover::after,.chip:focus-visible::after{
  animation:chipSheen .95s var(--ease) forwards;
}
@keyframes chipSheen{
  from{translate:-130% 0; opacity:.9}
  to{translate:130% 0; opacity:0}
}

.chip:hover,.chip:focus-visible{
  animation-play-state:paused;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
  color:var(--text);
  box-shadow:0 10px 26px -12px rgba(0,12,20,.5),
             0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.chip:hover .dot,.chip:focus-visible .dot{
  transform:scale(1.35);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (hover:none){
  .chip::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .chip{opacity:1; animation:none}
  .chip .dot{animation:none}
  .chip:hover::after,.chip:focus-visible::after{animation:none; opacity:0}
}

/* Marquee */
.marquee{position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2); padding:14px 0}
.marquee-track{display:flex; align-items:center; gap:28px; width:max-content; animation:scroll 38s linear infinite}
.marquee-track span{font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--text-3); white-space:nowrap}
.marquee-track i{color:var(--accent); font-style:normal; font-size:9px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,8vw,var(--space-8)) 0}
.section-alt{background:var(--bg-2); border-block:1px solid var(--border)}

.section-head{max-width:760px; margin-bottom:var(--space-6)}
.kicker{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:14px;
}
.section-head h2{font-size:clamp(26px,3.2vw,41px); letter-spacing:-.033em; margin-bottom:16px; text-wrap:balance}
.section-sub{font-size:17.5px; color:var(--text-2); max-width:62ch}

/* Pull quote */
.pull{
  font-family:var(--font-head); font-size:clamp(18px,2vw,24px); font-weight:600; font-style:normal;
  letter-spacing:-.028em; line-height:1.4; color:var(--text); max-width:52ch; margin-top:var(--space-5);
  padding-left:var(--space-3); border-left:3px solid var(--accent);
}
.pull-inline{margin-top:var(--space-4); font-size:clamp(17px,1.75vw,21px)}

/* ---------- Ticks (shared list) ---------- */
.ticks{display:grid; gap:12px}
.ticks li{position:relative; padding-left:32px; font-size:16px; color:var(--text-2)}
.ticks li::before{
  content:''; position:absolute; left:0; top:.4em; width:19px; height:19px; border-radius:50%;
  background:var(--accent); opacity:.14;
}
.ticks li::after{
  content:''; position:absolute; left:5.5px; top:.68em; width:8px; height:4.5px;
  border-left:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text);
  transform:rotate(-45deg);
}

/* ---------- VS comparison ---------- */
.vs{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.vs-col{padding:var(--space-4)}
.vs-old{background:var(--surface-2)}
.vs-new{position:relative}
.vs-new::before{content:''; position:absolute; inset:0; background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%); pointer-events:none}
.vs-label{
  position:relative; font-size:12.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--space-3);
}
.vs-new .vs-label{color:var(--accent-text)}
.vs-list{position:relative; display:grid; gap:14px}
.vs-list li{position:relative; padding-left:30px; font-size:16.5px; color:var(--text-2)}
.vs-old .vs-list li{color:var(--text-3)}
.vs-old .vs-list li::before,.vs-old .vs-list li::after{
  content:''; position:absolute; left:5px; top:.72em; width:13px; height:2px; background:var(--text-3); opacity:.7;
}
.vs-old .vs-list li::before{transform:rotate(45deg)}
.vs-old .vs-list li::after{transform:rotate(-45deg)}
.vs-new .vs-list li{color:var(--text); font-weight:500}
.vs-new .vs-list li::before{
  content:''; position:absolute; left:0; top:.36em; width:19px; height:19px; border-radius:50%;
  background:var(--accent); opacity:.16;
}
.vs-new .vs-list li::after{
  content:''; position:absolute; left:5.5px; top:.64em; width:8px; height:4.5px;
  border-left:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text); transform:rotate(-45deg);
}
.vs-divider{position:relative; width:1px; background:var(--border)}
.vs-divider span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-head); font-size:14.5px; font-weight:700; font-style:normal; letter-spacing:-.01em;
  box-shadow:0 8px 22px var(--glow-1);
}

/* ---------- Steps ---------- */
.steps{margin-top:var(--space-6)}
.steps-title{
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--space-3);
}
.steps-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-3)}
.step{position:relative; padding-top:var(--space-3); border-top:2px solid var(--border)}
.step:first-child{border-top-color:var(--accent)}
.step-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--accent-text);
  font-size:15px; font-weight:800; margin-bottom:14px;
}
.step h3{font-size:18px; margin-bottom:8px}
.step p{font-size:15px; color:var(--text-2)}

/* ---------- Roles ---------- */
.role-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:var(--space-3)}
.role{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--space-3);
  transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.role:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow)}
.role-icon{width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); margin-bottom:16px}
.role-icon svg{width:25px; height:25px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.role h3{font-size:18.5px; margin-bottom:9px; min-height:2.32em}
.role p{font-size:15px; color:var(--text-2)}

/* Honest / anti-corruption block */
.honest{
  display:flex; gap:var(--space-3); align-items:flex-start; margin-top:var(--space-4);
  background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface));
  border:1px solid var(--border-strong); border-left:4px solid var(--accent);
  border-radius:var(--r-lg); padding:var(--space-4);
}
.honest-icon{flex-shrink:0; width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--accent)}
.honest-icon svg{width:26px; height:26px; fill:none; stroke:var(--on-accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.honest h3{font-size:21px; margin-bottom:9px}
.honest p{font-size:16.5px; color:var(--text-2)}
.honest strong{color:var(--text)}

/* ---------- Tasks ---------- */
.task-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
@media (max-width:1100px){.task-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.task-grid{grid-template-columns:1fr}}
.task{
  background:var(--surface); padding:var(--space-3);
  transition:background-color var(--t-fast) var(--ease);
}
.task:hover{background:var(--surface-2)}
.task-n{display:block; font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--accent-text); letter-spacing:.06em; margin-bottom:12px}
.task h3{font-size:17.5px; margin-bottom:7px}
.task p{font-size:14.5px; color:var(--text-2)}

/* ---------- Pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3)}
.pillar{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--space-4);
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.pillar-wide{grid-column:1 / -1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.pillar-icon{width:54px; height:54px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); margin-bottom:var(--space-3)}
.pillar-icon svg{width:27px; height:27px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pillar h3{font-size:22px; margin-bottom:11px}
.pillar p{font-size:16px; color:var(--text-2)}
.pillar-extra{margin-top:14px}
.pillar-extra strong{color:var(--text)}
.pillar-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-3)}
.pillar-tags li{
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--border); padding:5px 12px; border-radius:var(--r-pill);
}

/* Human in the loop */
.hil{
  display:flex; gap:var(--space-3); align-items:flex-start; margin-top:var(--space-3);
  background:var(--surface); border:1px solid var(--border-strong); border-left:4px solid var(--accent);
  border-radius:var(--r-lg); padding:var(--space-4);
}
.hil-icon{flex-shrink:0; width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--accent)}
.hil-icon svg{width:26px; height:26px; fill:none; stroke:var(--on-accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hil h3{font-size:21px; margin-bottom:9px}
.hil p{font-size:16.5px; color:var(--text-2)}
.hil strong{color:var(--text)}

/* ---------- Single point of entry ---------- */
.single-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-6); align-items:center}
.single-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; align-content:start}
.single-list li{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:14px 16px 14px 40px; font-size:15px; font-weight:600; color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.single-list li::before{
  content:''; position:absolute; left:15px; top:50%; width:9px; height:9px; margin-top:-4.5px;
  border-radius:2px; background:var(--accent); transform:rotate(45deg);
}
.single-list li:hover{border-color:var(--accent); color:var(--text); transform:translateX(4px)}

/* ---------- Mentor ---------- */
.mentor{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.mentor-side{background:var(--surface-2); padding:var(--space-5) var(--space-4); border-right:1px solid var(--border); display:flex; flex-direction:column}

.mentor-name{font-family:var(--font-head); font-size:clamp(27px,2.85vw,37px); font-weight:700; line-height:1.1; letter-spacing:-.035em; margin-bottom:8px}
.mentor-role{font-size:15px; font-weight:700; color:var(--accent-text); margin-bottom:var(--space-3)}
.mentor-facts{display:grid; gap:9px; padding-top:var(--space-3); border-top:1px solid var(--border)}
.mentor-facts li{position:relative; padding-left:20px; font-size:15px; color:var(--text-2)}
.mentor-facts li::before{content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--accent); transform:rotate(45deg)}
.mentor-body{padding:var(--space-5) var(--space-4); display:grid; gap:var(--space-3); align-content:center}
.mentor-body blockquote{margin:0; padding-left:var(--space-3); border-left:3px solid var(--accent)}
.mentor-body blockquote p{
  font-family:var(--font-head); font-size:clamp(17px,1.8vw,22px); font-weight:600; font-style:normal;
  letter-spacing:-.028em; line-height:1.42; color:var(--text);
}
.mentor-body > p{font-size:16px; color:var(--text-2)}

/* ---------- Package ---------- */
.pack{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-3); align-items:start}
.pack-main,.pack-side{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--space-4)}
.pack-side{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, var(--shadow-sm); position:sticky; top:96px}
.pack-label,.pack-side-label{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--space-3)}
.pack-note{margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border); font-size:14.5px; color:var(--text-3)}
.pack-price{font-family:var(--font-head); font-size:clamp(32px,3.6vw,45px); font-weight:700; letter-spacing:-.035em; line-height:1.08; color:var(--accent-text)}
.pack-price-sub{font-size:14.5px; color:var(--text-3); margin-bottom:var(--space-3)}
.pack-month{display:grid; gap:10px; padding:var(--space-3) 0; margin-bottom:var(--space-3); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.pack-month p{font-size:14.5px; color:var(--text-2)}
.pack-month span{display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-text); margin-bottom:2px}
.pack-side-note{margin-top:14px; font-size:13.5px; color:var(--text-3); text-align:center}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px}
.faq details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq details:hover{border-color:var(--border-strong)}
.faq details[open]{border-color:var(--accent); box-shadow:var(--shadow-sm)}
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  padding:20px 60px 20px 22px; font-size:17.5px; font-weight:700; color:var(--text);
  min-height:60px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--t-mid) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary .chev{display:none}
.faq-body{padding:0 22px 22px; font-size:16px; color:var(--text-2); max-width:70ch}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; padding:clamp(64px,8vw,110px) 0; background:var(--bg-2); border-top:1px solid var(--border)}
.cta-bg{position:absolute; inset:0; pointer-events:none}
.blob-3{width:min(80vw,760px); aspect-ratio:1; background:var(--glow-1); top:-30%; left:50%; transform:translateX(-50%)}
.cta-inner{position:relative; max-width:620px; text-align:center; display:grid; justify-items:center}
.cta-robot{width:120px; height:auto; margin-bottom:var(--space-3); animation:float 6s ease-in-out infinite}
.cta h2{font-size:clamp(26px,3.5vw,41px); letter-spacing:-.033em; margin-bottom:14px}
.cta > .wrap > p{font-size:17.5px; color:var(--text-2); margin-bottom:var(--space-4); max-width:52ch}

.cta-form{width:100%; max-width:460px; display:grid; gap:18px; text-align:left}
.field{display:grid; gap:7px}
.field label{font-size:14px; font-weight:700; color:var(--text-2)}
.field input{
  width:100%; min-height:52px; padding:0 18px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:16px; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder{color:var(--text-3); opacity:.75}
.field input:hover{border-color:var(--border-strong)}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--glow-1)}
.field input[aria-invalid="true"]{border-color:var(--accent)}
.hint{font-size:13px; color:var(--text-3)}
.err{font-size:13.5px; font-weight:600; color:var(--accent-text); min-height:0}
.err:empty{display:none}
.form-ok{
  font-size:15px; font-weight:700; color:var(--text);
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--r-sm); padding:14px 18px; text-align:center;
}
.cta-alt{margin-top:var(--space-3); font-size:15px; color:var(--text-3)}
.cta-alt a{color:var(--accent-text); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.cta-alt a:hover{color:var(--text)}

/* ---------- Proof ---------- */
.proof{
  background:var(--ocean); color:var(--cream);
  padding:clamp(56px,7vw,var(--space-7)) 0;
  border-top:1px solid var(--border);
}
.proof-inner{max-width:900px; text-align:center; margin-inline:auto}
.proof-kicker{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#8CBBD6; margin-bottom:14px;
}
.proof h2{font-size:clamp(25px,3.2vw,39px); letter-spacing:-.033em; margin-bottom:16px; color:var(--cream)}
.proof h2 em{display:inline; font-style:normal; color:#8CBBD6}
.proof-lead{font-size:17.5px; color:#C9D9E2; max-width:62ch; margin:0 auto var(--space-5)}
.proof-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.proof-metric{
  background:rgba(253,240,213,.06); border:1px solid rgba(253,240,213,.20);
  border-radius:var(--r-lg); padding:var(--space-3);
}
.proof-value{font-family:var(--font-head); font-size:clamp(25px,3vw,37px); font-weight:700; letter-spacing:-.035em; line-height:1.1; color:var(--cream)}
.proof-cap{margin-top:8px; font-size:14px; color:#9FBACB}
.proof-note{
  font-size:16px; color:#C9D9E2; max-width:66ch; margin:0 auto;
  padding-top:var(--space-3); border-top:1px solid rgba(253,240,213,.18);
}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg); border-top:1px solid var(--border); padding:var(--space-5) 0 var(--space-3)}
.footer-inner{display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:space-between; padding-bottom:var(--space-4); border-bottom:1px solid var(--border)}
.footer-brand{display:flex; gap:13px; align-items:center}
.footer-brand img{width:40px; height:auto}
.footer-name{font-family:var(--font-body); font-size:18px; font-weight:800; letter-spacing:-.005em}
.footer-tag{font-size:13px; color:var(--text-3)}

.footer-nav{display:flex; flex-wrap:wrap; gap:6px}
.footer-nav a{font-size:14.5px; font-weight:600; color:var(--text-2); padding:8px 12px; border-radius:var(--r-pill); transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease)}
.footer-nav a:hover{color:var(--text); background:var(--surface-2)}
.footer-note{font-size:14px; color:var(--text-3)}
.footer-note a{color:var(--accent-text); font-weight:600}
.footer-note a:hover{text-decoration:underline}
.footer-bottom{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:var(--space-3)}
.footer-bottom p{font-size:13px; color:var(--text-3)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 620ms var(--ease), transform 620ms var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .nav a{padding:9px 10px; font-size:14px}
}
@media (max-width:1080px){
  .nav{display:none; }
  .nav.open{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    padding:16px 24px 24px; box-shadow:var(--shadow);
  }
  .nav.open a{padding:14px 16px; font-size:16px; border-radius:var(--r-sm)}
  .burger{display:flex}
  /* nav скрыт, но соседний селектор всё равно срабатывает — возвращаем прижатие к правому краю */
  .nav + .header-actions,.header-actions{margin-left:auto}
  .hero-inner{grid-template-columns:1fr; gap:var(--space-5)}
  .hero-visual{order:-1}
  .robot-stage{width:min(100%,380px)}
  .pillars{grid-template-columns:1fr}
  .single-inner{grid-template-columns:1fr; gap:var(--space-4)}
  .mentor{grid-template-columns:1fr}
  .mentor-side{border-right:0; border-bottom:1px solid var(--border); padding:var(--space-4)}
  .mentor-body{padding:var(--space-4)}
  .pack{grid-template-columns:1fr}
  .pack-side{position:static}
}
@media (max-width:720px){
  body{font-size:16px}
  .hide-sm{display:none}
  .hero{padding-top:var(--space-4)}
  .hero h1{font-size:clamp(31px,8vw,41px)}
  .hero-cta .btn{width:100%; white-space:normal; line-height:1.3; padding:14px 20px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3)}
  .hero-stats dt{font-size:24px}
  .role h3{min-height:0}
  .chip{font-size:12px; padding:7px 12px}
  .chip-1{top:3%; left:-1%} .chip-2{top:43%; right:-2%} .chip-3{bottom:7%; left:0}
  .robot-stage{aspect-ratio:1/.86}
  .vs{grid-template-columns:1fr}
  .vs-col{padding:var(--space-3)}
  .vs-divider{width:auto; height:1px}
  .vs-divider span{width:44px; height:44px; font-size:13px}
  .pillar,.hil,.honest,.pack-main,.pack-side{padding:var(--space-3)}
  .hil,.honest{flex-direction:column; gap:var(--space-2)}
  .pull{font-size:17.5px; margin-top:var(--space-4)}
  .steps-row{gap:var(--space-2)}
  .proof-metrics{grid-template-columns:1fr; gap:12px}
  .proof-metric{display:flex; align-items:baseline; gap:12px; text-align:left; padding:16px}
  .proof-value{font-size:26px; white-space:nowrap; flex-shrink:0}
  .proof-cap{margin-top:0}
  .faq summary{font-size:16px; padding:18px 52px 18px 18px}
  .faq-body{padding:0 18px 18px; font-size:15px}
  .footer-inner{flex-direction:column; align-items:flex-start}

  /* Шапка: кнопки справа, подпись сохраняем */
  .header-inner{gap:10px; min-height:66px}
  .brand{gap:9px}
  .brand-mark{width:36px; height:36px}
  .brand-name{font-size:16.5px}
  .brand-tag{font-size:9px; letter-spacing:.01em; white-space:nowrap}
  .theme-toggle,.burger{width:40px; height:40px}
  .header-actions{gap:7px}
  .ic-moon{width:22px; height:22px}
  .ic-sun{width:20px; height:20px}
  .burger{gap:6px}
  .burger span{width:19px}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:339px){
  .brand-tag{display:none}
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}
@media print{
  .site-header,.marquee,.theme-toggle,.burger{display:none}
  body{background:#fff; color:#000}
}