/* ============================================================
   styles2.css — sections 02–10 components + hero refinements
   ============================================================ */

/* ---------- HERO: bigger terminal, tighter text ---------- */
.hero-grid{ grid-template-columns:1fr 1.16fr; gap:clamp(28px,3.4vw,60px); }
.hero-l{ gap:clamp(16px,1.8vh,24px); }
.hero-title{ font-size:clamp(36px,4.4vw,74px); line-height:1.04; }
.lead{ line-height:1.36; }
.term-hero .term-body{
  font-size:clamp(14px,1.05vw,18px); line-height:1.85;
  padding:clamp(20px,2vw,34px); min-height:clamp(220px,26vh,330px);
}
.term-hero .term-bar{ padding:14px 18px; }
.term-hero .term-bar .dot{ width:12px; height:12px; }

/* ---------- dark-band helpers ---------- */
.band-ink{ --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08); }
.band-ink .sec-title{ color:#F2FAFE; }
.band-ink .sec-title .hl{ color:var(--acc-fill); }
.lead-ink{ color:#9FB2C4; }
.gn-ink{ -webkit-text-stroke:1.5px rgba(255,255,255,.12); }
.band-ink .ours-tag{ color:var(--acc-fill); }

/* ============================================================
   02 · TIMELINE
   ============================================================ */
.tl{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1vw,18px); position:relative; }
.tl::before{
  content:""; position:absolute; left:0; right:0; top:46px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 8%,rgba(255,255,255,.14) 92%,transparent);
}
.tl-col{ display:flex; flex-direction:column; align-items:flex-start; gap:0; position:relative; }
.tl-year{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:.08em; color:#7E90A4; height:30px; }
.tl-node{ width:14px; height:14px; border-radius:50%; border:2px solid var(--acc-fill); background:var(--ink); margin:6px 0 22px; position:relative; z-index:1; }
.tl-now .tl-node{ background:var(--acc-fill); box-shadow:0 0 0 5px rgba(185,140,255,.18); }
.tl-card{
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:clamp(14px,1.1vw,20px); display:flex; flex-direction:column; gap:11px;
  flex:1; transition:.4s var(--ease);
}
.tl-col:hover .tl-card{ border-color:var(--acc-fill); background:rgba(255,255,255,.06); transform:translateY(-3px); }
.tl-now .tl-card{ border-color:rgba(185,140,255,.5); background:rgba(185,140,255,.08); }
.tl-model{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.05vw,18px); color:#F2FAFE; line-height:1.2; }
.tl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tl-list li{ font-size:clamp(12px,.82vw,14px); color:#A9BACB; line-height:1.32; padding-left:14px; position:relative; }
.tl-list li::before{ content:"▸"; position:absolute; left:0; color:var(--acc-fill); font-size:.85em; }
.tl-ctx{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.12); }
.tl-ctx span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#6B7C90; }
.tl-ctx b{ font-family:var(--f-mono); font-size:clamp(12px,.85vw,14px); color:var(--acc-fill); font-weight:700; }
.tl-ctx b i{ color:#7E90A4; font-style:normal; font-weight:500; font-size:.85em; }
.caps{ display:flex; flex-wrap:wrap; gap:4px; }
.cap{ font-family:var(--f-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; padding:3px 6px; border-radius:3px; background:rgba(255,255,255,.05); color:#5C6B7D; border:1px solid transparent; transition:.3s var(--ease); }
.cap.on{ background:var(--acc-soft); color:var(--acc); border-color:transparent; font-weight:600; }

/* ============================================================
   03 · PRODUCTS
   ============================================================ */
.prod-grid{ margin-bottom:clamp(14px,1.4vw,22px); }
.prod-top{ display:flex; flex-direction:column; gap:5px; }
.prod-name{ font-family:var(--f-disp); font-weight:600; font-size:clamp(17px,1.2vw,21px); color:var(--ink); }
.prod-engine{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:600; color:var(--acc); letter-spacing:.06em; }
.card-ours{ background:var(--ink); color:#EAF6FA; border-color:var(--ink); flex-direction:row; align-items:center; gap:clamp(20px,3vw,48px); flex-wrap:wrap; }
.card-ours:hover{ border-color:var(--acc); transform:translateY(-4px); }
.ours-tag{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-fill); }
.ours-body{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:8px; }
.ours-body h3{ font-size:var(--t-h3); color:#F2FAFE; }
.ours-body p{ margin:0; color:#A9BACB; font-size:var(--t-body); line-height:1.45; }
.card-ours .chips{ margin:0; }
.card-ours .chip.on{ background:rgba(60,230,255,.12); border-color:rgba(60,230,255,.4); color:var(--acc-fill); }

/* ============================================================
   04 · BLOCKS
   ============================================================ */
.blocks-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,84px); align-items:center; }
.blocks-l{ display:flex; flex-direction:column; gap:20px; }
.big-stat{ margin-top:8px; }
.big-stat .num{ color:var(--ink); }
.stack{ display:flex; flex-direction:column; gap:10px; }
.blk{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,28px);
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--acc-fill);
  border-radius:5px; padding:clamp(16px,1.5vw,24px) clamp(18px,1.8vw,28px);
  box-shadow:0 10px 30px -26px rgba(12,16,24,.6); transition:.4s var(--ease);
}
.blk:hover{ transform:translateX(6px); border-left-color:var(--acc); box-shadow:0 16px 36px -26px rgba(12,16,24,.7); }
.blk-k{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.1vw,19px); color:var(--ink); min-width:clamp(90px,9vw,140px); }
.blk-v{ font-family:var(--f-mono); font-size:clamp(12px,.9vw,15px); color:var(--ink-2); line-height:1.4; }
.blk-top{ background:var(--acc-soft); border-left-color:var(--acc); }

/* ---- 04 · Tetris assembly ---- */
.tetris{ display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,2.4vw,44px); align-items:center; }
.tetris-board{
  --cell:clamp(40px,3.3vw,56px);
  position:relative; width:calc(var(--cell)*4); height:calc(var(--cell)*5);
  flex:0 0 auto; border-radius:10px;
  transition:box-shadow .5s var(--ease);
}
.tetris-board.done{ box-shadow:0 0 0 2px var(--acc), 0 0 48px -6px color-mix(in srgb,var(--acc) 60%,transparent); }
.tetris-target{
  position:absolute; inset:0; border-radius:10px;
  border:1.5px dashed color-mix(in srgb,var(--acc) 34%,transparent);
  background:
    linear-gradient(color-mix(in srgb,var(--acc) 9%,transparent) 1px,transparent 1px) 0 0/100% var(--cell),
    linear-gradient(90deg,color-mix(in srgb,var(--acc) 9%,transparent) 1px,transparent 1px) 0 0/var(--cell) 100%;
}
.tet-piece{ position:absolute; left:0; top:0; will-change:transform,opacity; }
.tet-cell{ position:absolute; width:var(--cell); height:var(--cell); }
.tet-cell::before{
  content:""; position:absolute; inset:3px; border-radius:5px; background:var(--c);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 8px rgba(20,10,50,.22), 0 2px 6px -2px rgba(20,10,50,.4);
}
.tetris-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(9px,1.1vh,16px); }
.tetris-legend li{ display:flex; align-items:flex-start; gap:13px; opacity:.42; transition:opacity .4s var(--ease); }
.tetris-legend li.on{ opacity:1; }
.lg-sw{
  flex:0 0 auto; width:15px; height:15px; border-radius:4px; background:var(--c); margin-top:4px;
  transform:scale(.8); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.tetris-legend li.on .lg-sw{ transform:scale(1); box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.lg-txt b{ display:block; font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.05vw,19px); color:var(--ink); line-height:1.1; }
.lg-txt i{ font-style:normal; font-family:var(--f-mono); font-size:clamp(11px,.82vw,14px); color:var(--ink-2); line-height:1.36; }
@media (max-width:900px){ .tetris{ grid-template-columns:auto 1fr; } }

/* ============================================================
   05 · LLM CAPABILITIES
   ============================================================ */
.cap-card{ gap:11px; }
.cap-card .ex{ margin-top:6px; padding:11px 13px; background:var(--paper); border-radius:5px; font-family:var(--f-mono); font-size:clamp(11px,.82vw,13px); color:var(--ink-2); line-height:1.4; }
.ex-k{ display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:4px; font-weight:600; }
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.4vw,22px); margin-top:clamp(22px,2.4vw,36px); }
.mode{ display:flex; flex-direction:column; gap:6px; padding:clamp(16px,1.5vw,24px); border:1px dashed var(--line); border-radius:6px; background:var(--card); }
.mode-k{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }
.mode-v{ font-size:var(--t-body); color:var(--ink-2); line-height:1.4; }

/* ============================================================
   FLOW (RAG + agent loop)
   ============================================================ */
.flow{ display:flex; align-items:stretch; gap:clamp(6px,.6vw,12px); }
.flow-step{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:clamp(16px,1.4vw,24px); display:flex; flex-direction:column; gap:8px;
  transition:.4s var(--ease);
}
.band-ink .flow-step{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.flow-step:hover{ transform:translateY(-4px); border-color:var(--acc-fill); }
.fs-tag{ font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }
.band-ink .fs-tag{ color:var(--acc-fill); }
.flow-step h3{ font-size:clamp(16px,1.15vw,21px); color:var(--ink); }
.band-ink .flow-step h3{ color:#F2FAFE; }
.flow-step p{ margin:0; font-size:clamp(12px,.85vw,14px); color:var(--ink-2); line-height:1.36; }
.band-ink .flow-step p{ color:#A9BACB; }
.fs-out{ border-color:var(--acc); background:var(--acc-soft); }
.band-ink .fs-out{ border-color:var(--acc-fill); background:rgba(90,166,255,.1); }
.fs-mark{ box-shadow:inset 0 0 0 1px var(--acc-fill); }
.flow-arrow{ display:flex; align-items:center; color:var(--acc-fill); font-size:clamp(16px,1.4vw,22px); font-weight:700; }

.loop-wrap{ position:relative; padding-top:46px; }
.loop-arc{
  position:absolute; top:0; left:18%; right:18%; height:34px;
  border:2px dashed var(--acc); border-bottom:none; border-radius:18px 18px 0 0;
  display:flex; align-items:center; justify-content:center;
}
.loop-arc span{
  font-family:var(--f-mono); font-size:clamp(11px,.85vw,14px); color:var(--acc);
  background:var(--paper); padding:0 12px; transform:translateY(-1px);
}

.rag-benefits{ margin-top:clamp(22px,2.4vw,36px); }
.mini{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:clamp(16px,1.4vw,22px); display:flex; flex-direction:column; gap:6px; }
.sec:not(.band-ink) .mini{ background:var(--card); border-color:var(--line); }
.mini b{ font-size:clamp(15px,1.05vw,18px); color:var(--ink); }
.band-ink .mini b{ color:#F2FAFE; }
.mini span{ font-size:var(--t-body); color:var(--ink-2); line-height:1.4; }
.band-ink .mini span{ color:#A9BACB; }

.ours-note{ margin-top:clamp(24px,2.6vw,40px); display:flex; flex-direction:column; gap:10px; padding:clamp(20px,1.8vw,30px); border-radius:8px; background:rgba(90,166,255,.08); border:1px solid rgba(90,166,255,.25); }
.sec:not(.band-ink) .ours-note{ background:var(--acc-soft); border-color:color-mix(in srgb, var(--acc) 30%, transparent); }
.ours-note p{ margin:0; font-size:var(--t-lead); line-height:1.4; color:#E6F2FA; max-width:80ch; }
.sec:not(.band-ink) .ours-note p{ color:var(--ink); }
.ours-flat{ background:transparent; border:none; border-left:4px solid var(--acc-fill); border-radius:0; padding:6px 0 6px 22px; }
.ours-flat p b{ color:var(--acc); }

/* ============================================================
   08 · ASSIST
   ============================================================ */
/* серо-фиолетовая гамма · вытянутые овальные пузырьки · нумерация шагов */
.assist{
  --gv:#5B5479;        /* gray-violet ink (текст/обводки) */
  --gv-deep:#453F60;   /* глубокий — бейджи и итог */
  --gv-soft:#EEECF4;   /* светлая заливка овала */
  --gv-mid:#E4E1ED;    /* заливка «действий» */
  --gv-line:#D6D2E2;   /* волосяные линии */
  background:var(--card); border:1px solid var(--gv-line); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px -50px rgba(60,52,96,.5);
}
.assist-cmd{ background:var(--ink); color:var(--acc-fill); font-family:var(--f-mono); font-size:clamp(15px,1.2vw,21px); padding:clamp(18px,1.8vw,28px) clamp(20px,2vw,34px); }
.assist-cmd .pr{ color:#6A6383; margin-right:.5em; }
.assist-rows{ display:flex; flex-direction:column; }
.arow{ display:flex; gap:clamp(16px,1.8vw,30px); padding:clamp(18px,1.7vw,28px) clamp(20px,2vw,34px); border-bottom:1px solid var(--gv-line); align-items:flex-start; }
.arow-head{ display:flex; align-items:center; gap:12px; min-width:clamp(118px,12vw,158px); padding-top:6px; flex-shrink:0; }
.arow-n{ width:32px; height:32px; border-radius:50%; background:var(--gv-deep); color:#fff; font-family:var(--f-mono); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.arow-k{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gv); }
.arow-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:11px; }

/* вытянутый овальный пузырёк */
.bub{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:clamp(11px,.85vw,14px); line-height:1;
  padding:12px 22px; border-radius:999px; white-space:nowrap;
  background:var(--gv-soft); border:1px solid var(--gv-line); color:var(--gv);
  transition:.3s var(--ease);
}
.bub:hover{ transform:translateY(-2px); background:var(--gv); color:#fff; border-color:var(--gv); }

/* нумерованный шаг — пошаговая периодичность */
.bub-step{ padding-left:8px; }
.sn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--gv-deep); color:#fff; font-style:normal; font-weight:700; font-size:12px;
}
.bub-step:hover .sn{ background:#fff; color:var(--gv); }

.sep{ color:color-mix(in srgb,var(--gv) 45%,var(--faint)); font-size:13px; }
.bub-tool{ background:var(--gv-mid); border-color:var(--gv-line); color:var(--gv-deep); }
.bub-tool:hover{ background:var(--gv-deep); color:#fff; border-color:var(--gv-deep); }
.bub-check{ background:transparent; border:1px dashed color-mix(in srgb,var(--gv) 50%,transparent); color:var(--gv); }
.bub-check:hover{ background:var(--gv-soft); color:var(--gv); border-style:solid; transform:translateY(-2px); }
.assist-fix{ font-family:var(--f-mono); font-size:clamp(11px,.85vw,14px); color:var(--gv); background:var(--gv-soft); padding:clamp(12px,1.2vw,18px) clamp(20px,2vw,34px); border-bottom:1px solid var(--gv-line); }
.assist-done{ font-family:var(--f-mono); font-size:clamp(13px,1vw,17px); color:#fff; background:var(--gv-deep); padding:clamp(16px,1.5vw,24px) clamp(20px,2vw,34px); font-weight:600; }

/* ============================================================
   09 · AUTONOMOUS
   ============================================================ */
.auto-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(34px,5vw,84px); align-items:start; }
.auto-hero{ display:flex; flex-direction:column; gap:18px; position:sticky; top:80px; }
.auto-badge{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:clamp(11px,.85vw,14px); font-weight:600; color:var(--blue); background:var(--blue-soft); border:1px solid color-mix(in srgb,var(--blue) 30%,transparent); border-radius:100px; padding:9px 16px; align-self:flex-start; }
.led{ width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 60%,transparent); animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 50%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion:reduce){ .led{ animation:none; } }
.auto-list{ display:flex; flex-direction:column; gap:12px; }
.auto-item{ display:flex; gap:clamp(14px,1.4vw,24px); align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:clamp(18px,1.6vw,26px); transition:.4s var(--ease); }
.auto-item:hover{ transform:translateX(6px); border-color:var(--acc); }
.ai-n{ font-family:var(--f-disp); font-weight:700; font-size:clamp(24px,2.2vw,40px); color:var(--acc-fill); line-height:1; }
.auto-item b{ display:block; font-size:clamp(16px,1.15vw,21px); color:var(--ink); margin-bottom:5px; }
.auto-item span{ font-size:var(--t-body); color:var(--ink-2); line-height:1.4; }

/* ============================================================
   10 · AI-FIRST + footer
   ============================================================ */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,26px); margin-bottom:clamp(22px,2.4vw,38px); }
.vs-col{ padding:clamp(22px,2vw,34px); border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:12px; }
.vs-now{ background:rgba(90,166,255,.1); border-color:rgba(90,166,255,.42); }
.vs-tag{ font-family:var(--f-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7E90A4; }
.vs-now .vs-tag{ color:var(--acc-fill); }
.vs-col h3{ font-size:var(--t-h3); color:#F2FAFE; }
.vs-col p{ margin:0; color:#A9BACB; font-size:var(--t-body); line-height:1.45; }
.vs-test{ margin-top:auto; font-family:var(--f-mono); font-size:clamp(12px,.88vw,15px); color:#7E90A4; padding-top:12px; border-top:1px dashed rgba(255,255,255,.14); }
.vs-test b{ color:#A9BACB; }
.vs-test.on{ color:var(--acc-fill); }
.vs-test.on b{ color:var(--acc-fill); }
.aifirst-stages{ margin-bottom:clamp(24px,2.6vw,40px); }
.mini-ink{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.mini-ink b{ color:#F2FAFE; }
.mini-ink span{ color:#A9BACB; }
.finale{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2vw,34px); border-radius:8px; background:rgba(185,140,255,.12); border:1px solid rgba(185,140,255,.32); }
.finale p{ margin:0; font-size:var(--t-lead); line-height:1.4; color:#F2FAFE; max-width:80ch; }

.slide-foot{ margin-top:clamp(22px,3vh,40px); padding-top:clamp(18px,2vh,28px); border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sf-brand{ display:flex; align-items:center; gap:13px; }
.sf-brand img{ height:38px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.sf-org{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.1vw,19px); color:#F2FAFE; }
.sf-sub{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:#7E90A4; margin-top:3px; }
.sf-meta{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-fill); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .tl{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .tl::before{ display:none; }
  .flow{ flex-wrap:wrap; }
  .flow-arrow{ transform:rotate(90deg); width:100%; justify-content:center; height:20px; }
  .flow-step{ flex:1 1 100%; }
  .loop-arc{ display:none; }
}
@media (max-width:900px){
  .blocks-grid, .auto-grid{ grid-template-columns:1fr; }
  .auto-hero{ position:static; }
  .modes, .vs{ grid-template-columns:1fr; }
  .card-ours{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:620px){
  .tl{ grid-template-columns:1fr; }
  .arow{ flex-direction:column; gap:10px; }
}