/* ============================================================
   СОВРЕМЕННЫЙ ИИ — design system (light / high-contrast)
   Tech-editorial: blueprint grid, mono labels, neon accent chips
   ============================================================ */

:root{
  /* — surfaces — */
  --paper:      #EEF1F5;   /* cool light canvas */
  --paper-2:    #E7EBF1;   /* slightly deeper band */
  --card:       #FFFFFF;   /* panels */
  --ink:        #0C1018;   /* near-black blue ink */
  --ink-2:      #3A4252;   /* secondary text */
  --muted:      #6B7588;   /* mono labels / captions */
  --faint:      #9AA1B3;   /* faintest */
  --line:       #D7DDE6;   /* hairlines */
  --line-2:     #E6EAF0;   /* lighter hairlines */
  --grid:       rgba(12,16,24,.045);

  /* — categorical accents (ink versions for text/lines on white) — */
  --cyan:   #0892AE;  --cyan-fill:   #3CE6FF;  --cyan-soft:   #E0FAFF;
  --blue:   #2E63E8;  --blue-fill:   #5AA6FF;  --blue-soft:   #E6EEFF;
  --amber:  #C5820A;  --amber-fill:  #FFC24B;  --amber-soft:  #FFF3DA;
  --green:  #0E9D63;  --green-fill:  #52E6A4;  --green-soft:  #DEFBEE;
  --purple: #6A3DEB;  --purple-fill: #B98CFF;  --purple-soft: #EFE7FF;

  /* per-section accent (overridden on each <section>) */
  --acc:      var(--cyan);
  --acc-fill: var(--cyan-fill);
  --acc-soft: var(--cyan-soft);

  /* — type — */
  --f-disp: "Unbounded", system-ui, sans-serif;
  --f-sans: "Golos Text", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* fluid scale (desktop / projector first) */
  --t-hero:   clamp(48px, 6.4vw, 112px);
  --t-h1:     clamp(38px, 4.4vw, 76px);
  --t-h2:     clamp(28px, 3.0vw, 50px);
  --t-h3:     clamp(20px, 1.5vw, 28px);
  --t-lead:   clamp(18px, 1.45vw, 26px);
  --t-body:   clamp(15px, 1.05vw, 19px);
  --t-mono:   clamp(11px, 0.85vw, 14px);
  --t-stat:   clamp(44px, 6vw, 104px);

  --maxw: 1320px;
  --pad-x: clamp(20px, 5vw, 96px);
  --sec-pad: clamp(80px, 11vh, 168px);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-snap-type:y proximity; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior:none;
}

/* — blueprint grid layer (parallax) — */
.bg-grid{
  position:fixed; inset:-10% 0 -10% 0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  will-change:transform;
}
.bg-vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, transparent 60%, rgba(12,16,24,.05));
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page{ position:relative; z-index:1; }
section.sec{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(72px,9vh,104px) 0 clamp(56px,7vh,84px);
  scroll-snap-align:start;
}
/* fit-to-viewport: every slide scales to fit the screen height at any browser zoom */
html.fit section.sec{ height:100vh; min-height:100vh; overflow:hidden; }
.sec-fit{ position:relative; z-index:1; width:100%; transform-origin:center center; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); position:relative; z-index:1; }
.band{ background:var(--paper-2); }
.band-ink{ background:var(--ink); color:#EAF6FA; }
.band-ink .kicker{ color:var(--acc-fill); }

/* section header block */
.sec-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(26px,3.2vh,48px); max-width:1100px; }
.kicker{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acc);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{
  content:""; width:9px; height:9px; background:var(--acc-fill);
  border:1px solid var(--acc); transform:rotate(45deg);
}
.kicker.dot::before{ border-radius:50%; transform:none; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; }
.sec-title{ font-size:var(--t-h1); }
.sec-title .hl{ color:var(--acc); }
.lead{ font-size:var(--t-lead); color:var(--ink-2); max-width:60ch; line-height:1.42; text-wrap:pretty; }

/* giant ghost section number (parallax) */
.ghost-num{
  position:absolute; top:clamp(20px,4vh,60px); right:var(--pad-x);
  font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,18vw,300px);
  line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--line);
  z-index:0; pointer-events:none; user-select:none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(78px,9vh,116px); padding-bottom:clamp(40px,5vh,72px); }
/* slide 00 spans wider than the rest to fill the screen */
.hero .wrap{ max-width:1680px; padding-left:clamp(20px,4vw,64px); padding-right:clamp(20px,4vw,64px); }
.hero-grid{ display:grid; grid-template-columns:1.55fr .8fr; gap:clamp(28px,3vw,60px); align-items:center; }
.hero-l{ display:flex; flex-direction:column; gap:clamp(20px,2.4vh,32px); }
.hero-title{ font-size:clamp(36px,3.6vw,64px); font-weight:700; text-wrap:balance; line-height:1.04; }
.hero-title .hl{ color:var(--acc); position:relative; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.hchip{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:500;
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); background:var(--card); display:inline-flex; align-items:center; gap:.6em;
  transition:.3s var(--ease);
}
.hchip::before{ content:"▸"; color:var(--acc); }
.hchip:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-2px); }
.hero-r .term{ width:100%; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(26px,3.4vh,52px); padding-top:clamp(20px,2.6vh,36px);
  border-top:1px solid var(--line);
}
.num.small{ font-size:clamp(34px,4.4vw,72px); }
.num.small .u{ display:block; font-size:.52em; margin:0; }

.scroll-hint{ display:flex; align-items:center; gap:12px; margin-top:clamp(20px,3vh,38px); color:var(--muted); }
.scroll-hint .mono{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; }
.scroll-hint .arrow{ font-size:18px; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .scroll-hint .arrow{ animation:none; } }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){ .hero-stats{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   CARDS
   ============================================================ */
.grid{ display:grid; gap:clamp(14px,1.4vw,22px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(22px,2vw,34px);
  position:relative; display:flex; flex-direction:column; gap:14px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card .idx{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700;
  color:var(--acc); letter-spacing:.1em;
}
.card h3{ font-size:var(--t-h3); }
.card p{ margin:0; color:var(--ink-2); font-size:var(--t-body); line-height:1.45; }
.card .top-rule{ position:absolute; top:-1px; left:-1px; width:46px; height:3px; background:var(--acc-fill); }
.card:hover{ transform:translateY(-4px); border-color:var(--acc); box-shadow:0 18px 40px -28px rgba(12,16,24,.5); }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.chip{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:500;
  padding:5px 11px; border:1px solid var(--line); border-radius:100px;
  color:var(--muted); background:var(--paper); white-space:nowrap;
  transition:.3s var(--ease);
}
.chip.on{ background:var(--acc-soft); border-color:var(--acc); color:var(--acc); }
.card:hover .chip{ border-color:var(--line-2); }

/* ============================================================
   STAT / COUNTERS
   ============================================================ */
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat .num{
  font-family:var(--f-disp); font-weight:700; font-size:var(--t-stat);
  line-height:.9; letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.stat .num .u{ font-size:.34em; color:var(--acc); margin-left:.12em; letter-spacing:0; }
.stat .lbl{ font-family:var(--f-mono); font-size:var(--t-mono); color:var(--muted); letter-spacing:.04em; line-height:1.4; }

/* ============================================================
   TERMINAL
   ============================================================ */
.term{
  background:var(--ink); border-radius:8px; border:1px solid #1B2230;
  font-family:var(--f-mono); color:#CFE9EF; overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(12,16,24,.7);
}
.term-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid #1B2230; background:#0A0D14; }
.term-bar .dot{ width:11px; height:11px; border-radius:50%; background:#2A3344; }
.term-bar .dot:nth-child(1){ background:#FF5F57; }
.term-bar .dot:nth-child(2){ background:#FFBD2E; }
.term-bar .dot:nth-child(3){ background:#28C840; }
.term-bar .ttl{ margin-left:8px; font-size:var(--t-mono); color:#5B6678; letter-spacing:.05em; }
.term-body{ padding:clamp(18px,1.8vw,30px); font-size:clamp(13px,1vw,16px); line-height:1.85; }
.term-body .pr{ color:var(--blue-fill); }
.term-body .cm{ color:#5B6678; }
.term-body .ok{ color:#8FB4FF; }
.term-body .wr{ color:var(--purple-fill); }
.caret{ display:inline-block; width:.6em; height:1.05em; background:var(--blue-fill); transform:translateY(.14em); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   REVEAL / PARALLAX
   ============================================================ */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; }
.js [data-reveal].in{ opacity:1; transform:none; }
.js [data-reveal].rest{ will-change:auto; }
.js [data-reveal][data-from="left"]{ transform:translateX(-34px); }
.js [data-reveal][data-from="right"]{ transform:translateX(34px); }
.js [data-reveal][data-from="scale"]{ transform:scale(.94); }
.js [data-reveal].in[data-from]{ transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   PROGRESS NAV (side rail) + top bar
   ============================================================ */
.scroll-bar{ position:fixed; top:0; left:0; height:3px; background:var(--acc-fill); width:0; z-index:60; transition:width .1s linear; }
/* — SNAKE RAIL — */
.rail{
  position:fixed; right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%);
  z-index:55;
}
.rail-track{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:13px;
}
.dot-slot{
  position:relative; width:9px; height:9px;
  flex-shrink:0; cursor:pointer;
}
.food-dot{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--faint); background:transparent;
  box-sizing:border-box;
  transition:opacity .3s var(--ease),transform .35s var(--ease),border-color .3s var(--ease);
}
.dot-slot:hover .food-dot{ border-color:var(--ink); }
.dot-slot.eaten .food-dot{ opacity:0; transform:scale(.3); }
.dot-slot.next-food .food-dot{
  border-color:var(--acc);
  animation:food-pulse 1.4s ease-in-out infinite;
}
@keyframes food-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.6; }
}
.dot-tip{
  position:absolute; right:20px; top:50%;
  transform:translateY(-50%) translateX(6px);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; white-space:nowrap;
  background:var(--ink); color:#EAF6FA; padding:5px 10px; border-radius:4px;
  opacity:0; pointer-events:none; transition:.25s var(--ease);
}
.dot-slot:hover .dot-tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* snake overlay */
.snake-wrap{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:9px; pointer-events:none; z-index:2;
}
.snake-body-bar{
  position:absolute; top:0; left:0;
  width:9px; height:0;
  background:var(--acc,#2E63E8);
  border-radius:4.5px 4.5px 0 0;
  transition:height .42s var(--ease),background .5s var(--ease);
}
.snake-head{
  position:absolute; left:50%; transform:translateX(-50%);
  width:13px; height:13px;
  background:var(--acc,#2E63E8); border-radius:50%;
  transition:top .42s var(--ease),background .5s var(--ease);
}
.snake-eye{
  position:absolute;
  width:3px; height:3px;
  background:rgba(255,255,255,.92); border-radius:50%;
  top:3px;
}
.snake-eye.l{ left:2px; }
.snake-eye.r{ right:2px; }
.snake-tongue{
  position:absolute; top:calc(100% - 1px); left:50%;
  transform:translateX(-50%);
  overflow:visible;
}
@media(prefers-reduced-motion:reduce){
  .dot-slot.next-food .food-dot{ animation:none; border-color:var(--acc); }
  .dot-slot.eaten .food-dot{ transition:none; }
  .snake-body-bar,.snake-head{ transition:none!important; }
}
@media (max-width:860px){ .rail{ display:none; } }

/* skip / brand header */
.topbrand{
  position:fixed; top:16px; left:var(--pad-x); z-index:58;
  display:flex; align-items:center; gap:11px;
  background:rgba(12,16,24,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:8px 15px 8px 12px; border-radius:100px; border:1px solid rgba(255,255,255,.1);
}
.topbrand img{ height:26px; width:auto; display:block; filter:brightness(0) invert(1); opacity:.92; }
.topbrand .wm{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:#C3D2E0; text-transform:uppercase; }

/* ============================================================
   UTIL
   ============================================================ */
.mono{ font-family:var(--f-mono); }
.up{ text-transform:uppercase; letter-spacing:.14em; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.nowrap{ white-space:nowrap; }
.acc-text{ color:var(--acc); }

@media (max-width:900px){
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .ghost-num{ display:none; }
}