/* css/variables.css */
/* ==========================================================================
   Токены Apprica — источник: макет «Apprica Website» (Downloads/Apprica Website).
   Шрифты локальные (fonts/): внешний fonts.googleapis.com не грузим — лишний
   запрос в критическом пути и передача IP посетителя за рубеж (152-ФЗ).
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/playfair-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --ink: #111633; --ink-deep: #0A0E24; --ink-up: #1D2452;
  --silver: #F5F5F7; --paper: #FFFFFF; --graphite: #5A6078; --mist: #A3A9C2;
  --brand: #FF6A1A; --brand-ink: #D1500A;
  --tl-1: #FF9257; --tl-2: #FFBE96; --tl-3: #FFE0CC;
  --td-1: #E65B1C; --td-2: #B8461F; --td-3: #7E3220;
  --ok: #2F9E6B; --bad: #D64545;
  --line-d: rgba(255,255,255,.10); --line-l: rgba(17,22,51,.10);
  --f-display: "Playfair Display", "Iowan Old Style", Charter, Georgia, serif;
  --f-body: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.1,1);
  /* Вертикальный отступ полос: секции должны помещаться в экран, без пустых полей */
  --band-y: clamp(48px, 5.5vw, 88px);
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}

/* css/base.css */
/* База: сброс, сетка .wrap, полосы .band, типографика, кнопки, окно приложения. */
/* Layout: Apple-style long scroll with alternating ink and silver bands; one pinned scene (seven stages) carries the story, everything else is a full-width band with a single media slot. Fixed look by design: the brand lives on ink and silver, not on the viewer's theme. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink-deep); color: #fff; font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
@media (min-width: 760px) { :root { --gut-l: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); } }
.band { position: relative; }
.band.light { background: var(--paper); color: var(--ink); }
.band.silver { background: var(--silver); color: var(--ink); }
.band.ink { background: var(--ink); color: #fff; }
.band.deep { background: var(--ink-deep); color: #fff; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--brand); }
.light .eyebrow, .silver .eyebrow { color: var(--brand-ink); }
.h-xl { font-family: var(--f-display); font-weight: 600; font-size: clamp(42px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -.02em; }
.h-l { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.05; letter-spacing: -.015em; }
.h-xl em, .h-l em { font-style: italic; font-weight: 500; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; font-weight: 500; max-width: 40ch; color: var(--mist); }
.light .lede, .silver .lede { color: var(--graphite); }
.lede b { color: #fff; font-weight: 600; }
.light .lede b, .silver .lede b { color: var(--ink); }

/* Слот медиа: место под реальный скриншот или видео. */
.slot { position: relative; }

/* css/header.css */
/* ---------- Nav ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(10,14,36,.82); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(10,14,36,.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line-d); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 52px; }
.nav .logo { display: flex; color: #fff; }
.nav .logo svg { height: 19px; aspect-ratio: 7219 / 1980; }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0 0 0 auto; padding: 0; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); }
.nav ul a { text-decoration: none; transition: color .2s; }
.nav ul a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-lg { font-size: 17px; padding: 14px 26px; }
.btn-brand { background: var(--brand); color: #fff; box-shadow: 0 8px 30px -8px rgba(255,106,26,.6); }
.btn-brand:hover { background: #FF7A30; }
.btn-white { background: #fff; color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--tl-1); }
.light .link-arrow, .silver .link-arrow { color: var(--brand-ink); }
.link-arrow:hover span { transform: translateX(3px); }
.link-arrow span { transition: transform .2s var(--ease); }
@media (max-width: 860px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }


/* css/hero.css */
/* ---------- Hero: крупный заголовок + маршрут точки-автопилота ----------
   Комета пролетает дугой над первой строкой и вдоль второй: курсив за ней
   заливается (контур → цвет), точка в конце — посадочное место кометы.
   Геометрию маршрута строит js/landing.js по реальным строкам заголовка.
   Классы на .hero: .js — анимация будет, .fly — полёт, .done — финал. */
.hero { position: relative; overflow: hidden; background: radial-gradient(60% 70% at 85% 0%, rgba(29,36,82,.65) 0%, transparent 65%), radial-gradient(40% 50% at 10% 100%, rgba(29,36,82,.45) 0%, transparent 70%), var(--ink-deep); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: calc(100% / 6) 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); }
/* Hero — ~85% экрана: снизу выглядывает следующий блок, страница «продолжается» */
.hwrap { position: relative; z-index: 1; min-height: min(86svh, 920px); display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 7vh, 72px); padding-block: clamp(88px, 12vh, 120px) clamp(40px, 6vh, 64px); }


.hhead { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(46px, min(9.6vw, 15.5svh), 150px); line-height: .94; letter-spacing: -.035em; display: grid; }
.hhead .l1 { justify-self: start; }
.hhead .l2 { justify-self: end; white-space: nowrap; position: relative; }
.hhead em { position: relative; display: inline-block; font-style: italic; font-weight: 500; letter-spacing: -.03em; color: var(--tl-2); padding-right: .04em; }
.hhead .hdot { color: var(--brand); font-style: normal; }

/* Контур → заливка за кометой (только когда JS ведёт анимацию) */
.hero.js .hhead em { color: transparent; -webkit-text-stroke: 1px rgba(255,190,150,.38); }
.hero.js .hhead em::after { content: attr(data-text); position: absolute; inset: 0; padding-right: inherit; color: var(--tl-2); -webkit-text-stroke: 0; clip-path: inset(-20% calc(100% - var(--fill, 0%)) -20% 0); text-shadow: 0 0 40px rgba(255,106,26,.25); }
.hero.done .hhead em::after { clip-path: none; }
.hero.js .hhead .hdot { opacity: 0; transition: opacity .3s; }
.hero.done .hhead .hdot { opacity: 1; }

.hbottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.hbottom .lede { max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); margin: 0; }
.hbottom .ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }


/* Водяной знак: логотип крупно справа, за краем блока, растворяется книзу */
.hmark { position: absolute; z-index: 0; right: -6vw; top: 50%; width: min(64vw, 920px); height: auto; aspect-ratio: 1; transform: translateY(-40%); color: #fff; fill: currentColor; opacity: .06; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 95%); mask-image: linear-gradient(180deg, #000 35%, transparent 95%); transition: translate .9s var(--ease); }
@media (max-width: 760px) { .hmark { width: 120vw; right: -40vw; top: 30%; } }

/* Маршрут */
.htrail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: transform .8s var(--ease); }
.htrail path { fill: none; stroke-linecap: round; }
.htrail .t-base { stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.htrail .t-seg1 { stroke: #7E3220; stroke-width: 2; opacity: .55; }
.htrail .t-seg2 { stroke: #E65B1C; stroke-width: 2.4; opacity: .8; }
.htrail .t-seg3 { stroke: #FFBE96; stroke-width: 2.6; }
.htrail .t-halo { fill: url(#tHalo); }
.htrail .t-comet, .htrail .t-seg, .htrail .t-halo { opacity: 0; transition: opacity .6s var(--ease); }
.hero.fly .htrail .t-comet, .hero.fly .htrail .t-seg, .hero.fly .htrail .t-halo { opacity: 1; }
.hero.done .htrail .t-seg { opacity: 0; }
.hero.done .htrail .t-halo { opacity: .7; }
/* Тихая жизнь после посадки: по маршруту изредка пробегает искра */
.htrail .t-spark { stroke: #FF9257; stroke-width: 2; stroke-dasharray: 60 100000; opacity: 0; }

@media (max-width: 900px) {
  .hbottom { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hwrap { min-height: 0; padding-top: 96px; }
  .hhead { font-size: clamp(40px, 12.4vw, 76px); }
  .hhead .l2 { justify-self: start; }
}

@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Device: an app window that lies back in 3D and stands up as the page scrolls (--t from 0 to 1). */
.stage3d { --t: .3; width: 100%; max-width: 1180px; margin: clamp(40px, 6vw, 72px) auto 0; perspective: 2200px; position: relative; }
.stage3d::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,106,26,.22), transparent 70%); filter: blur(40px); opacity: calc(.2 + var(--t) * .6); pointer-events: none; }
.device { transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--t)) * 22deg)) scale(calc(.88 + var(--t) * .12)) translateY(calc((1 - var(--t)) * 30px)); will-change: transform; }
.win { border-radius: 14px; overflow: hidden; background: #ECEDF2; box-shadow: 0 0 0 1px rgba(17,22,51,.10), 0 50px 100px -40px rgba(17,22,51,.45); }
.win-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #E3E5EC; border-bottom: 1px solid #D5D8E1; position: relative; }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.win-bar i:nth-child(2) { background: #FEBC2E; }
.win-bar i:nth-child(3) { background: #28C840; }
.win-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--f-body); color: #4A5068; pointer-events: none; }
.screen { container-type: inline-size; aspect-ratio: 16 / 10; position: relative; color: var(--ink); font-family: var(--f-body); background: #F7F8FA; overflow: hidden; }


/* css/footer.css */
/* ---------- Footer ---------- */
.foot { background: #070A1C; color: var(--mist); border-top: 1px solid var(--line-d); }
.foot .wrap { padding-block: clamp(56px, 7vw, 88px) 40px; display: grid; gap: 36px; }
.f-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.f-brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.f-wm { height: 26px; aspect-ratio: 7219 / 1980; color: #fff; }
.f-brand p { font-size: 14.5px; line-height: 1.55; max-width: 40ch; }
.f-soc { display: flex; gap: 10px; }
.f-soc a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.07); transition: background .2s; }
.f-soc a:hover { background: rgba(255,255,255,.14); }
.f-soc svg { width: 20px; height: 20px; }
.f-col { display: grid; gap: 12px; align-content: start; font-size: 14.5px; }
.f-col b { color: #fff; font-size: 15px; margin-bottom: 4px; }
.f-col a { text-decoration: none; transition: color .2s; }
.f-col a:hover { color: #fff; }
.f-col .sel { color: #fff; font-weight: 600; user-select: all; font-variant-numeric: tabular-nums; }
.f-addr { font-size: 13.5px; line-height: 1.5; }
.f-legal { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 28px; border-top: 1px solid var(--line-d); font-size: 13px; }
.f-bottom { display: grid; gap: 10px; font-size: 12px; line-height: 1.6; color: #6E7598; }
@media (max-width: 900px) { .f-top { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .f-top { grid-template-columns: 1fr; } }


/* Юр-ссылки и контакты — ссылки (в макете были текстом-заглушкой). */
.f-legal a { text-decoration: none; transition: color .2s; }
.f-legal a:hover { color: #fff; }
.f-col a.sel:hover { color: var(--tl-2); }

/* css/sections/01-workspace.css */
/* ---------- Workspace: a quiet statement, then the app window ---------- */
.workspace .wrap { padding-block: clamp(40px, 4vw, 64px); }
.workspace .intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.workspace .intro .h-l { font-size: clamp(32px, 3.6vw, 52px); }
.workspace .intro p { font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -.005em; max-width: 40ch; }
.workspace .w { color: #B9BDCC; transition: color .4s; }
.workspace .w.lit { color: var(--ink); }
.workspace .w.hot.lit { color: var(--brand-ink); font-style: italic; }
/* Окно ограничено высотой экрана: блок целиком помещается при прокрутке */
.workspace .stage3d { margin-top: clamp(24px, 3vw, 40px); max-width: min(1120px, calc((100svh - 330px) * 1.6)); }
.workspace .tdots { margin-top: 16px; }
@media (max-width: 760px) { .workspace .intro { grid-template-columns: 1fr; } }


/* ---------- Tour of real screens ---------- */
.screen.tour { aspect-ratio: 1440 / 868; background: #F7F8FA; }
.tf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.035); transform-origin: 30% 20%; transition: opacity 1.1s cubic-bezier(.25,.1,.25,1), transform 7s linear; }
.tf.on { opacity: 1; transform: scale(1); }
.tcap { position: absolute; left: 2.2%; bottom: 3.2%; z-index: 3; font: 600 clamp(11px, 1.15vw, 15px)/1 var(--f-body); color: #fff; background: rgba(17,22,51,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .8em 1.1em; border-radius: 99px; transition: opacity .35s, transform .35s; }
.tcap.fade { opacity: 0; transform: translateY(6px); }
.tdots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.tdots button { border: 0; background: none; padding: 8px 3px; }
.tdots i { display: block; width: 8px; height: 8px; border-radius: 99px; background: #C9CCD8; transition: width .5s var(--ease), background .3s; position: relative; overflow: hidden; }
.tdots .on i { width: 40px; background: #DDE0E8; }
.tdots .on i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: tprog var(--td, 4s) linear forwards; }
@keyframes tprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* css/sections/02-process.css */
/* ---------- Process: pinned scene, seven stages ---------- */
.process { }
.process .pin { padding-block: var(--band-y); }
.process .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.process h2 { margin: 8px 0 28px; }
.steps { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 2px; }
.steps::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 18px; width: 2px; background: #ECEEF3; border-radius: 2px; }
.fillr { position: absolute; left: 9px; top: 18px; width: 2px; height: var(--fy, 0px); border-radius: 2px; background: linear-gradient(var(--tl-3), var(--brand)); transition: height .95s cubic-bezier(.7,0,.2,1); }
.step:hover { color: var(--graphite); }
.step.on:hover { color: var(--ink); }
.pctl { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 22px; font: 500 13px var(--f-mono); color: var(--graphite); }
.pctl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--silver); display: grid; place-items: center; transition: background .2s, transform .2s; }
.pctl button:hover { background: #E6E8EF; }
.pctl button:active { transform: scale(.94); }
.pctl button:disabled { opacity: .35; cursor: default; }
.pctl svg { width: 18px; height: 18px; }
.rider { position: absolute; left: 1px; top: 0; width: 18px; height: 72px; transform: translateY(var(--ry, 0px)); transition: transform .95s cubic-bezier(.7,0,.2,1); will-change: transform; }
.rider svg { width: 100%; height: 100%; overflow: visible; }
.rider .tr { transform-box: view-box; transform-origin: 50% 100%; transition: transform .95s cubic-bezier(.7,0,.2,1); }
.rider.go .tr { animation: stretch .95s cubic-bezier(.7,0,.2,1); }
@keyframes stretch { 45% { transform: scaleY(1.9); } }
.rider svg { width: 100%; height: 100%; overflow: visible; }
.step { padding: 10px 0; color: #B3B7C7; transition: color .6s var(--ease); cursor: pointer; }
.step b { display: block; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -.01em; }
.step small { display: block; font: 400 12px/1.4 var(--f-mono); margin-top: 3px; color: var(--graphite); opacity: .45; transition: opacity .6s var(--ease); }
.step.on { color: var(--ink); }
.step.on small { opacity: 1; }
.step-cap { display: none; }
.pscreens { position: relative; }
.pscreens .win { background: #fff; }
.pscreen { position: absolute; inset: 0; opacity: 0; transform: translateY(3%) scale(.985); filter: blur(10px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform 1s cubic-bezier(.2,.7,.1,1), filter .8s cubic-bezier(.25,.1,.25,1); }
.pscreen.past { transform: translateY(-3%) scale(.985); }
.pscreen.on { opacity: 1; transform: none; filter: none; }
.pscreen.first { position: relative; }
.pnum-unused { position: absolute; right: -6px; bottom: -36px; font-family: var(--f-display); font-style: italic; font-size: 15px; color: var(--graphite); }

/* Generic page-like contents for process screens */
.pg { position: absolute; inset: 0; padding: 4.93cqw 6.38cqw; font-size: 1.81cqw; display: grid; align-content: start; gap: 1.5cqw; background: #fff; }
.pg .crumb { font: 500 1.45cqw var(--f-mono); color: #8A90A8; }
.pg h4 { font-size: 3.77cqw; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.pg .row { display: flex; gap: 1.45cqw; flex-wrap: wrap; }
.pg .chip { font-size: 1.45cqw; font-weight: 700; padding: 0.58cqw 1.45cqw; border-radius: 99px; background: #EEF0F6; color: #3A405C; }
.pg .chip.o { background: #FFE9DC; color: var(--brand-ink); }
.pg .chip.g { background: #DFF3EA; color: #1E7A50; }
.pg .hd { font-weight: 800; font-size: 2.03cqw; margin-top: 1.16cqw; }
.pg .txt { display: grid; gap: 1.16cqw; }
.pg .txt i { display: block; height: 1.23cqw; border-radius: 99px; background: #ECEEF3; }
.pg ol, .pg ul { margin: 0; padding-left: 3.19cqw; display: grid; gap: 0.87cqw; }
.pg .quote { border-left: 0.51cqw solid var(--brand); padding: 0.87cqw 2.03cqw; background: #FFF6F0; border-radius: 0 0.87cqw 0.87cqw 0; }
.pg .muted { color: #8A90A8; font-style: italic; }
.pg table { border-collapse: collapse; width: 100%; font-size: 1.59cqw; }
.pg td, .pg th { text-align: left; padding: 1.45cqw 1.16cqw; border-bottom: 1px solid #ECEEF3; }
.pg th { font-size: 1.38cqw; color: #8A90A8; text-transform: uppercase; letter-spacing: .05em; }
.pg .mono { font-family: var(--f-mono); font-size: 1.52cqw; }
.pg.code { background: #0E1230; color: #D6D9E8; font-family: var(--f-mono); font-size: 1.74cqw; gap: 0.43cqw; padding: 4.35cqw 4.93cqw; }
.pg.code .ln { white-space: pre; }
.pg.code .add { background: rgba(47,158,107,.18); color: #9BE3C1; margin: 0 -4.93cqw; padding: 0 4.93cqw; }
.pg.code .del { background: rgba(214,69,69,.16); color: #F4A5A5; margin: 0 -4.93cqw; padding: 0 4.93cqw; }
.pg.code .k { color: var(--tl-1); }
.pg.code .c { color: #6E7598; }
.pg .wire { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.90cqw; margin-top: 0.87cqw; }
.pg .wire > div { border: 1px dashed #C9CCD8; border-radius: 1.45cqw; padding: 2.32cqw; display: grid; gap: 1.45cqw; align-content: start; }
.pg .field { height: 4.35cqw; border-radius: 1.01cqw; background: #F2F3F7; border: 1px solid #E3E5EC; }
.pg .fbtn { height: 4.35cqw; border-radius: 99px; background: var(--ink); width: 50%; }
.pg .comment { border: 1px solid #E3E5EC; border-radius: 1.45cqw; padding: 2.32cqw 2.61cqw; display: grid; gap: 1.16cqw; line-height: 1.5; }
.pg .comment .who { display: flex; align-items: center; gap: 1.16cqw; font-weight: 700; }
.pg .comment .who i { width: 3.48cqw; height: 3.48cqw; border-radius: 50%; background: var(--ink); }
.pg .comment .who small { font-weight: 500; color: #8A90A8; font-size: 1.45cqw; }
.pg .shot { aspect-ratio: 16 / 7; border-radius: 1.45cqw; background: repeating-linear-gradient(135deg, #F4F5F8 0 1.45cqw, #ECEEF3 1.45cqw 2.90cqw); display: grid; place-items: center; color: #8A90A8; font: 500 1.45cqw var(--f-mono); }


/* css/sections/03-confirm.css */
/* ---------- Write-before: the document panel ---------- */
.confirm .wrap { padding-block: var(--band-y); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.confirm .lede { margin-top: 22px; }
.facts { margin-top: 36px; display: grid; gap: 18px; }
.facts div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-weight: 500; color: var(--graphite); }
.facts div b { color: var(--ink); font-weight: 700; }
.facts svg { width: 22px; height: 22px; margin-top: 1px; }
.panel-demo { container-type: inline-size; position: relative; aspect-ratio: 5 / 4; max-width: 100%; border-radius: 22px; background: linear-gradient(160deg, #fff, #ECEEF4); box-shadow: 0 0 0 1px var(--line-l), 0 40px 80px -40px rgba(17,22,51,.35); overflow: hidden; }
.panel-demo .bgchat { position: absolute; inset: 0; padding: 6cqw; display: grid; gap: 3cqw; align-content: start; font-size: 2.6cqw; color: var(--graphite); }
.panel-demo .bgchat i { display: block; height: 2cqw; border-radius: 99px; background: #DFE2EA; }
.sheet { position: absolute; top: 5cqw; right: 5cqw; bottom: 5cqw; width: 62%; background: #fff; border-radius: 3cqw; box-shadow: 0 3cqw 8cqw -2cqw rgba(17,22,51,.28), 0 0 0 1px var(--line-l); padding: 5cqw 5cqw 4.4cqw; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.6cqw; font-size: 2.4cqw; transform: translateX(118%); transition: transform 1s var(--ease); }
.sheet .dest { font: 500 2cqw var(--f-mono); color: var(--brand-ink); background: #FFF2EA; padding: 1cqw 1.8cqw; border-radius: 1.2cqw; justify-self: start; }
.sheet h4 { font-size: 3.3cqw; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.sheet .lines { display: grid; gap: 1.6cqw; align-content: start; }
.sheet .lines i { display: block; height: 1.5cqw; border-radius: 99px; background: #ECEEF3; }
.sheet .lines .hd { font-weight: 800; font-size: 2.3cqw; margin-top: 1cqw; }
.sheet .act { display: flex; align-items: center; gap: 2.4cqw; }
.sheet .b { padding: 2cqw 3.6cqw; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 700; transition: background .3s, transform .2s; }
.sheet .b .done { display: none; }
.sheet .no { color: var(--graphite); font-weight: 600; }
.sheet .lk { color: var(--brand-ink); font-weight: 700; display: none; }
.panel-demo { background: linear-gradient(160deg, #F7F8FB, #E9ECF2); aspect-ratio: 1 / 1; }
.pd-choice { position: absolute; left: 6cqw; top: 16cqw; width: 40cqw; height: auto; border-radius: 2.2cqw; box-shadow: 0 2cqw 5cqw -2cqw rgba(17,22,51,.25); opacity: .9; transition: opacity .6s, transform .8s var(--ease); }
.pd-doc { position: absolute; right: 7cqw; top: 4.5cqw; width: 42cqw; aspect-ratio: 690 / 1490; transform: translateX(150%); transition: transform 1s var(--ease); }
.pd-doc .ds { position: absolute; left: 0; top: 0; width: 100%; height: auto; border-radius: 1.6cqw; box-shadow: 0 3cqw 7cqw -2cqw rgba(17,22,51,.32); opacity: 0; transition: opacity .35s; }
.pd-doc .ds-ask { opacity: 1; }
.panel-demo .cursor { width: 4.4cqw; height: 4.4cqw; transform: translate(40cqw, 104cqw); }
.panel-demo.st1 .pd-doc { transform: none; }
.panel-demo.st1 .pd-choice { opacity: .55; transform: scale(.97); }
.panel-demo.st2 .cursor { transform: translate(62cqw, 80cqw); }
.panel-demo.st3 .ds-ask { opacity: 0; }
.panel-demo.st3 .ds-saving { opacity: 1; }
.panel-demo.st4 .ds-saving { opacity: 0; }
.panel-demo.st4 .ds-done { opacity: 1; }
.panel-demo.st1 .sheet { transform: none; }
.panel-demo.st2 .cursor { transform: translate(52cqw, 78cqw); }
.panel-demo.st3 .b { transform: scale(.95); }
.panel-demo.st4 .b { background: var(--ok); transform: none; }
.panel-demo.st4 .b .go, .panel-demo.st4 .no { display: none; }
.panel-demo.st4 .b .done { display: inline; }
.panel-demo.st4 .lk { display: inline; animation: rise .5s var(--ease) both; }


/* css/sections/04-bento.css */
/* ---------- Bento: fits one screen on desktop ---------- */
.bento { min-height: calc(100vh - 52px); display: grid; align-items: center; }
.bento .wrap { padding-block: 56px; width: 100%; }
.bento .head { display: flex; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 28px; flex-wrap: wrap; }
.bento .head h2 { font-size: clamp(30px, 3.4vw, 48px); }
.bento .head p { color: var(--graphite); font-weight: 500; max-width: 36ch; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 31vh, 300px); gap: 14px; }
.tile { background: var(--silver); border-radius: 22px; padding: 22px 22px 0; display: grid; grid-template-rows: auto 1fr; gap: 14px; overflow: hidden; min-width: 0; }
.tile h3 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.tile h3 span { color: var(--graphite); font-weight: 600; }
.tile .vis { position: relative; min-height: 0; }
.t-board { grid-column: span 2; }
/* Board */
.board { position: absolute; inset: 0 0 -10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.col { background: #fff; border-radius: 14px 14px 0 0; padding: 12px; display: grid; gap: 8px; align-content: start; }
.col h6 { margin: 0 0 2px; font-size: 11px; font-weight: 700; color: var(--graphite); display: flex; justify-content: space-between; }
.card { background: var(--silver); border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 600; display: grid; gap: 4px; }
.card small { font: 500 10px var(--f-mono); color: var(--graphite); }
.card.mover { position: absolute; z-index: 2; width: calc((100% - 20px) / 3 - 24px); left: 12px; top: 38px; background: #fff; box-shadow: 0 14px 30px -10px rgba(17,22,51,.35), 0 0 0 2px var(--brand); animation: move 7s var(--ease) infinite; }
@keyframes move { 0%, 12% { transform: none; } 34%, 52% { transform: translateX(calc(100% + 34px)) rotate(-1.5deg); } 74%, 100% { transform: translateX(calc(200% + 68px)); } }
/* Git */
.gitsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gitsvg .path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 6s var(--ease) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 600; } 45%, 100% { stroke-dashoffset: 0; } }
.gitsvg .lbl { font: 500 13px var(--f-mono); fill: var(--graphite); }
/* Wiki */
.wiki { position: absolute; inset: 0 0 -20px; background: #fff; border-radius: 14px 14px 0 0; padding: 16px; display: grid; gap: 8px; align-content: start; font-size: 12.5px; line-height: 1.5; }
.wiki h6 { margin: 0; font-size: 14px; font-weight: 800; }
.wiki mark { background: linear-gradient(transparent 0, rgba(255,106,26,.28) 0); background-size: 0 100%; background-repeat: no-repeat; color: inherit; animation: hl 5s var(--ease) infinite; }
@keyframes hl { 0%, 15% { background-size: 0 100%; } 40%, 100% { background-size: 100% 100%; } }
.bubble { justify-self: end; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 12px; font-weight: 600; max-width: 85%; animation: bub 5s var(--ease) infinite; }
@keyframes bub { 0%, 40% { transform: translateY(10px) scale(.9); opacity: 0; } 55%, 100% { transform: none; opacity: 1; } }
/* DB */
.db { position: absolute; inset: 0 0 -20px; background: #0E1230; border-radius: 14px 14px 0 0; padding: 14px; color: #D6D9E8; font: 400 11px/1.6 var(--f-mono); display: grid; gap: 8px; align-content: start; }
.db .k { color: var(--tl-1); }
.db table { border-collapse: collapse; width: 100%; font-size: 11px; }
.db td, .db th { text-align: left; padding: 4px 5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.db th { color: #8A90B8; font-weight: 500; }
.db tbody tr { animation: row 6s infinite both; }
.db tbody tr:nth-child(2) { animation-delay: .15s; }
.db tbody tr:nth-child(3) { animation-delay: .3s; }
@keyframes row { 0%, 18% { opacity: 0; transform: translateY(6px); } 30%, 100% { opacity: 1; transform: none; } }
.db .lock { color: #8A90B8; }
/* Background conversations */
.convs { position: absolute; inset: 0 0 16px; display: grid; gap: 8px; align-content: center; }
.conv { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border-radius: 12px; font-weight: 600; font-size: 13px; }
.conv .pill { font-size: 11px; padding: 3px 9px; }
/* GitLab */
.gl { position: absolute; inset: 0 0 16px; display: grid; grid-template-rows: auto auto auto; align-content: center; justify-items: stretch; gap: 6px; }
.gl .box { background: #fff; border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.gl .box svg { width: 18px; height: 18px; flex: none; }
.gl .box small { margin-left: auto; font: 500 10px var(--f-mono); color: var(--graphite); }
.gl .flow { height: 30px; width: 12px; position: relative; justify-self: center; }
.gl .flow i { position: absolute; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: flow 1.8s linear infinite; }
.gl .flow i:nth-child(2) { animation-delay: .6s; }
.gl .flow i:nth-child(3) { animation-delay: 1.2s; }
@keyframes flow { from { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { top: 24px; opacity: 0; } }
.gl .ro { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 500 10px var(--f-mono); color: var(--brand-ink); }
/* Terminal */
.term { position: absolute; inset: 0 0 -20px; background: #0E1230; border-radius: 14px 14px 0 0; padding: 14px 16px; color: #D6D9E8; font: 400 11px/1.75 var(--f-mono); overflow: hidden; }
.term .p { color: var(--tl-1); }
.term .d { color: #6E7598; }
.term .g { color: #9BE3C1; }
.term .tl { display: block; white-space: pre; overflow: hidden; width: 0; animation: type 8s steps(36) infinite; }
.term .tl:nth-child(2) { animation-delay: .6s; }
.term .tl:nth-child(3) { animation-delay: 1.2s; }
.term .tl:nth-child(4) { animation-delay: 1.8s; }
.term .tl:nth-child(5) { animation-delay: 2.4s; }
@keyframes type { 0% { width: 0; } 12%, 100% { width: 36ch; } }


/* css/sections/05-agents.css */
/* ---------- Agents: app-icon row ---------- */
.agents2 { overflow: hidden; }
.agents2 .wrap { padding-block: var(--band-y); display: grid; justify-items: center; text-align: center; }
.agents2 .lede { margin-top: 20px; text-align: center; max-width: 44ch; }
.ag-row { position: relative; margin-top: 28px; display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.ag-spot { position: absolute; top: 0; left: 0; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,106,26,.32), rgba(255,106,26,.08) 55%, transparent); filter: blur(10px); transform: translate(calc(var(--sx, 0px) - 180px), calc(var(--sy, 0px) - 180px)); transition: transform .8s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.ag { position: relative; border: 0; background: none; display: grid; justify-items: center; gap: 14px; padding: 0; color: var(--mist); }
.ag .ic { width: clamp(76px, 9vw, 116px); aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0%, #EEF0F5 100%); box-shadow: inset 0 -1px 0 rgba(17,22,51,.08), 0 24px 40px -18px rgba(0,0,0,.8); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, opacity .4s; opacity: .55; }
.ag .ic img { width: 46%; height: 46%; object-fit: contain; }
.ag b { font-size: 15px; font-weight: 700; transition: color .3s; }
.ag:hover .ic { opacity: .85; }
.ag[aria-selected="true"] .ic { opacity: 1; transform: translateY(-10px) scale(1.08); box-shadow: 0 0 0 3px rgba(255,106,26,.95), 0 30px 60px -20px rgba(255,106,26,.55); }
.ag[aria-selected="true"] b { color: #fff; }
.ag-detail { margin-top: clamp(28px, 3vw, 44px); min-height: 6.5em; display: grid; justify-items: center; gap: 14px; transition: opacity .3s, transform .3s; }
.ag-detail.fade { opacity: 0; transform: translateY(8px); }
.ag-detail p { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; line-height: 1.4; max-width: 38ch; color: #fff; }
.ag-detail span { font: 500 12px var(--f-mono); color: var(--mist); padding: 6px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-d); }
.agents2 .grp { margin-top: clamp(48px, 6vw, 72px); font: 500 12px var(--f-mono); letter-spacing: .14em; color: var(--mist); display: flex; align-items: center; gap: 14px; width: 100%; max-width: 980px; }
.agents2 .grp::before, .agents2 .grp::after { content: ""; flex: 1; height: 1px; background: var(--line-d); }
.sys-grid { margin-top: 28px; width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sys { display: grid; justify-items: center; gap: 10px; padding: 24px 12px 22px; border-radius: 22px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line-d); transition: background .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.sys:hover { background: rgba(255,255,255,.07); transform: translateY(-4px); }
.sys .ic { width: 64px; height: 64px; border-radius: 26%; display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF 0%, #EEF0F5 100%); box-shadow: inset 0 -1px 0 rgba(17,22,51,.08), 0 14px 24px -14px rgba(0,0,0,.8); }
.sys .ic img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
.sys b { font-size: 15px; font-weight: 700; color: #fff; }
.sys small { font-size: 12.5px; color: var(--mist); line-height: 1.35; }
@media (max-width: 900px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* css/sections/06-secure.css */
/* ---------- Security: orchestration inside the perimeter ---------- */
.secure2 { overflow: hidden; background: radial-gradient(70% 60% at 50% 55%, #161D4A 0%, var(--ink-deep) 70%); }
.secure2 .wrap { padding-block: clamp(96px, 12vw, 160px); display: grid; justify-items: center; }
.secure2 .head { text-align: center; display: grid; justify-items: center; gap: 16px; }
.secure2 .lede { text-align: center; max-width: 46ch; }
.orch-wrap { width: 100%; margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; scrollbar-width: none; }
.orch-wrap::-webkit-scrollbar { display: none; }
.orch { display: block; width: 100%; min-width: 820px; height: auto; }
.orch text { font-family: var(--f-body); }
.orch .zone-base { fill: url(#zoneFill); stroke: rgba(255,255,255,.12); stroke-width: 1.2; }
.orch .zone-run { fill: none; stroke: url(#runGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 160 840; stroke-dashoffset: -120; filter: url(#glowS); }
@keyframes run { to { stroke-dashoffset: -1000; } }
.orch .zl { font: 500 12px var(--f-mono); letter-spacing: .14em; fill: rgba(255,255,255,.55); }
.orch .wire { fill: none; stroke: url(#wireGrad); stroke-width: 1.4; }
.orch .wire.hot { stroke: rgba(255,146,87,.55); }
.orch .nd .bg { fill: url(#glass); stroke: url(#glassEdge); stroke-width: 1; transition: stroke .4s; }
.orch .nd .hi { fill: none; stroke: #FF6A1A; stroke-width: 1.5; opacity: 0; transition: opacity .4s; filter: url(#glowS); }
.orch .nd.on .hi { opacity: 1; }
.orch .nd .tile { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.10); }
.orch .nd use { color: #fff; }
.orch .nd .t { font-size: 17px; font-weight: 700; fill: #fff; }
.orch .nd .s { font: 400 12px var(--f-mono); fill: #9AA0BE; }
.orch .nd.flash .hi { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.orch .gate .bg { fill: #0D1130; stroke: #FF6A1A; stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.orch .gate .lbl { font-size: 14px; font-weight: 700; fill: #FFBE96; transition: fill .3s; }
.orch .gate use { color: #FF9257; transition: color .3s; }
.orch .gate .ring { fill: none; stroke: #FF6A1A; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.orch .gate.wait .ring { animation: gring 1.1s ease-out infinite; }
@keyframes gring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.orch .gate.ok .bg { fill: #10392B; stroke: #3FCB8B; }
.orch .gate.ok .lbl { fill: #9BEBC6; }
.orch .gate.ok use { color: #9BEBC6; }
.orch .app-ring { fill: none; stroke: rgba(255,106,26,.5); stroke-width: 1.2; }
.orch .ext-h { font: 500 12px var(--f-mono); letter-spacing: .14em; fill: rgba(255,255,255,.55); }
.rules2 { width: 100%; margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rule2 { padding: 22px 22px 24px; border-radius: 20px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line-d); display: grid; gap: 8px; align-content: start; cursor: default; transition: background .4s, box-shadow .4s; position: relative; overflow: hidden; }
.rule2::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); transform: scaleX(0); transform-origin: left; }
.rule2.on { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,146,87,.35); }
.rule2.on::after { transform: scaleX(1); transition: transform .5s var(--ease); }
@keyframes bar { to { transform: scaleX(1); } }
.rule2 svg { width: 22px; height: 22px; color: var(--tl-1); }
.rule2 b { font-size: 16px; font-weight: 700; }
.rule2 span { font-size: 14px; color: var(--mist); line-height: 1.45; }
@media (max-width: 960px) { .rules2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rules2 { grid-template-columns: 1fr; } }
/* ---------- Security: static scheme ---------- */
.secure3 .wrap { padding-block: var(--band-y); display: grid; justify-items: center; }
.secure3 .head { text-align: center; display: grid; justify-items: center; gap: 16px; }
.secure3 .lede { text-align: center; max-width: 46ch; }
.scheme { width: 100%; max-width: 1100px; margin-top: clamp(40px, 5vw, 64px); }
.scheme svg { display: block; width: 100%; height: auto; }
.scheme .st { font: 700 16px var(--f-body); fill: #111633; }
.scheme .ss { font: 500 13.5px var(--f-body); fill: #5A6078; }
.scheme .sl { font: 600 14px var(--f-body); fill: #5A6078; }
.scheme .sg { font: 700 15px var(--f-body); fill: #D1500A; }
.scheme .nd, .scheme .ext, .scheme .comet { transition: opacity .35s var(--ease); }
.scheme .perim { fill: none; stroke: #DCDFE7; stroke-width: 1.2; stroke-dasharray: 3 7; }
.scheme .ring { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; transition: opacity .35s; }

/* Узлы-карточки: фрагмент интерфейса со своим состоянием (приём «AI Agent
   Pipeline»). Сдержанно: белая карточка, тонкая рамка, моно-подписи. */
.scheme .cbg { fill: #fff; stroke: rgba(17,22,51,.08); stroke-width: 1; }
.scheme .ci { color: #111633; }
.scheme .ct { font: 700 14.5px var(--f-body); fill: #111633; }
.scheme .cs { font: 500 11px var(--f-mono); fill: #7A8099; letter-spacing: .01em; }
.scheme .cm { font: 500 11.5px var(--f-mono); fill: #3A4060; }
.scheme .cms { fill: var(--ok); }
.scheme .cmask { font: 700 13px var(--f-mono); fill: #B5B9C9; letter-spacing: .08em; }
.scheme .cl { color: #A3A9C2; }
.scheme .cdiv { stroke: rgba(17,22,51,.07); stroke-width: 1; }
.scheme .cok { fill: var(--ok); }
.scheme .typing rect { fill: #E6E8EF; }
.scheme .typing .caret { fill: var(--brand); }
.scheme .spark rect { fill: #DDE0E8; }
.scheme .spark .now { fill: var(--ok); }
.scheme .git .gl { fill: none; stroke: #C9CDD9; stroke-width: 1.5; }
.scheme .git circle { fill: #fff; stroke: #8E94AD; stroke-width: 1.5; }
.scheme .git .head { fill: var(--brand); stroke: var(--brand); }

.scheme.live .typing .tl { transform-box: fill-box; transform-origin: left; animation: typeln 3.6s steps(12, end) infinite; }
.scheme.live .typing .caret { animation: caret 3.6s steps(12, end) infinite, blink 1s steps(1) infinite; }
@keyframes typeln { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes caret { 0% { transform: translateX(-80px); } 70%, 100% { transform: translateX(0); } }
@keyframes blink { 50% { opacity: 0; } }
.scheme.live .cok { animation: okp 2.4s ease-in-out infinite; }
@keyframes okp { 50% { opacity: .35; } }
.scheme.live .spark .now { transform-box: fill-box; transform-origin: bottom; animation: lat 2.4s ease-in-out infinite; }
@keyframes lat { 50% { transform: scaleY(.55); } }
.scheme.live .git .head { transform-box: fill-box; transform-origin: center; animation: headp 2.4s ease-in-out infinite; }
@keyframes headp { 50% { transform: scale(1.25); } }

/* Импульсы по проводам (приём «animated beam»): штрих длиной 16 из 100
   пробегает путь целиком, остальное время скрыт за его концами. */
.scheme .beam { stroke: var(--brand); stroke-width: 2.6; stroke-dasharray: 16 300; stroke-dashoffset: 16; opacity: 0; }
@keyframes beam { 0% { stroke-dashoffset: 16; } 70%, 100% { stroke-dashoffset: -100; } }
@keyframes beam1 { 0% { stroke-dashoffset: 16; opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.scheme.live .beam { opacity: 1; }
.scheme.live .beam.in { animation: beam 3.2s cubic-bezier(.45,.05,.35,1) infinite; }
.scheme.live .beam.in:nth-child(2) { animation-delay: .8s; }
.scheme.live .beam.in:nth-child(3) { animation-delay: 1.6s; }
.scheme.live .beam.in:nth-child(4) { animation-delay: 2.4s; }
.scheme.live.ask .beam.ask { animation: beam1 .9s var(--ease) forwards; }
.scheme.live.ok .beam.ask { opacity: 0; }
.scheme.live.out .beam.out { animation: beam1 1.1s var(--ease) forwards; }
.scheme.live.out .beam.out:nth-child(7) { animation-delay: .08s; }
.scheme.live.out .beam.out:nth-child(8) { animation-delay: .16s; }

/* Ворота «Записать?» → «Записано» */
.scheme .gate .bg { fill: #fff; stroke: rgba(209,80,10,.0); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.scheme .gate use { color: #D1500A; }
.scheme .gate .g-ok { opacity: 0; }
.scheme .gate .g-ask, .scheme .gate .g-ok { transition: opacity .3s; }
.scheme .gate .g-ok .sg { fill: var(--ok); }
.scheme .gate .g-ok use { color: var(--ok); }
.scheme .gate .pulse { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes gpulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.5); } }
.scheme.ask .gate .bg { stroke: rgba(255,106,26,.55); }
.scheme.live.ask:not(.ok) .gate .pulse { animation: gpulse 1.1s ease-out .7s infinite; }
.scheme.ok .gate .bg { fill: #EAF6EF; stroke: rgba(47,158,107,.45); }
.scheme.ok .gate .g-ask { opacity: 0; }
.scheme.ok .gate .g-ok { opacity: 1; }
.scheme.ok .comet { opacity: 0; }
.scheme.out .ext .ring { opacity: .5; transition-delay: .7s; }

/* Наведение на правило — подсвечивается его узел, остальное притухает */
.scheme.focus .nd:not(.is-on):not(.hub), .scheme.focus .ext:not(.is-on), .scheme.focus .comet { opacity: .3; }
.scheme.focus .is-on .ring { opacity: 1; transition-delay: 0s; }
.scheme.focus .gate.is-on .bg { stroke: var(--brand); }
.rules3 { width: 100%; max-width: 1100px; margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rules3 > div { display: grid; gap: 8px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-l); position: relative; cursor: default; }
.rules3 > div::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--brand), rgba(255,106,26,0)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.rules3 > div.is-on::before { transform: scaleX(1); }
.rules3 svg { width: 24px; height: 24px; color: var(--brand-ink); margin-bottom: 4px; }
.rules3 b { font-size: 17px; font-weight: 700; }
.rules3 span { color: var(--graphite); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .rules3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rules3 { grid-template-columns: 1fr; } }


/* css/sections/07-gallery.css */
/* ---------- Gallery ---------- */
.gallery .wrap { padding-block: var(--band-y) 24px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.gnav { display: flex; gap: 10px; }
.gnav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); display: grid; place-items: center; transition: background .2s; }
.gnav button:hover { background: rgba(255,255,255,.18); }
.gnav svg path { stroke: #fff; }
.gnav svg { width: 18px; height: 18px; }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px max(var(--gut-l), calc((100vw - 1200px) / 2 + 32px)) clamp(80px, 10vw, 140px); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.gcard { flex: none; width: min(78vw, 760px); scroll-snap-align: center; display: grid; gap: 18px; }
.gshot { aspect-ratio: 16 / 10; max-width: 100%; border-radius: 22px; overflow: hidden; position: relative; background: var(--silver); container-type: inline-size; }
.gshot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.gshot.fit { background: linear-gradient(160deg, #1C2350, #12173A); }
.gshot.fit > img { object-fit: contain; object-position: center; padding: 6% 0; filter: drop-shadow(0 20px 30px rgba(17,22,51,.18)); }
.gshot { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.8); }
.gshot .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(100% 100% at 100% 0%, #FFF2EA 0%, transparent 50%), linear-gradient(160deg, #F7F7F9, #ECEEF3); }
.gshot .ph svg { position: absolute; right: -6cqw; bottom: -10cqw; width: 46cqw; color: rgba(17,22,51,.05); }
.gshot .ph div { display: grid; gap: 1.4cqw; justify-items: center; }
.gshot .ph b { font: 500 1.6cqw var(--f-mono); letter-spacing: .08em; color: var(--brand-ink); }
.gshot .ph span { font-family: var(--f-display); font-size: 4.2cqw; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; max-width: 22ch; }
.gshot .ph small { font: 400 1.5cqw var(--f-mono); color: var(--graphite); }
.gcard p { font-size: 17px; color: var(--mist); font-weight: 500; max-width: 52ch; }
.gcard p b { color: #fff; }


/* css/sections/08-buy.css */
/* ---------- Buy panel ---------- */
.buy .wrap { padding-block: var(--band-y); display: grid; justify-items: center; gap: 18px; text-align: center; }
.buy .appicon { width: clamp(96px, 10vw, 128px); aspect-ratio: 1; filter: drop-shadow(0 24px 34px rgba(17,22,51,.3)) drop-shadow(0 0 40px rgba(255,106,26,.18)); }
.buy .lede { text-align: center; }
.bframe { position: relative; width: 100%; max-width: 1080px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(0px, 3vw, 40px); }
/* Сетка-подложка под панелью цены (приём «single pricing card»): тонкие
   линии гаснут к краям, по углам рамки — метки-крестики. */
.bframe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line-l) 1px, transparent 1px), linear-gradient(90deg, var(--line-l) 1px, transparent 1px); background-size: 40px 40px; background-position: center; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); }
.bframe .cx { position: absolute; width: 15px; height: 15px; pointer-events: none; }
.bframe .cx::before, .bframe .cx::after { content: ""; position: absolute; background: #9DA2B6; }
.bframe .cx::before { left: 7px; top: 0; width: 1px; height: 15px; }
.bframe .cx::after { top: 7px; left: 0; height: 1px; width: 15px; }
.bframe .cx:nth-of-type(1) { left: -7px; top: -7px; }
.bframe .cx:nth-of-type(2) { right: -7px; top: -7px; }
.bframe .cx:nth-of-type(3) { left: -7px; bottom: -7px; }
.bframe .cx:nth-of-type(4) { right: -7px; bottom: -7px; }
.bpanel { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-l), 0 50px 100px -50px rgba(17,22,51,.45); text-align: left; }
.bp-l { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 22px; }
.bp-more { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line-l); display: grid; gap: 20px; }
.bp-more .k2 { display: block; font: 500 11.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); margin-bottom: 10px; }
.stg { display: flex; flex-wrap: wrap; gap: 6px; }
.stg span { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 99px; background: var(--silver); color: #2C3252; }
.agl { display: flex; gap: 10px; flex-wrap: wrap; }
.agl span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--line-l), 0 6px 14px -8px rgba(17,22,51,.25); }
.agl img { width: 22px; height: 22px; object-fit: contain; }
.plt { display: flex; gap: 8px; font-size: 13px; font-weight: 700; color: var(--graphite); }
.plt span + span::before { content: "·"; margin-right: 8px; color: #B3B7C7; }
.bp-l .plan { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
.bp-l .plan svg { width: 22px; height: 22px; }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price b { font-family: var(--f-display); font-weight: 600; font-size: clamp(48px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price span { color: var(--graphite); font-weight: 600; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incl li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-weight: 500; color: #2C3252; }
.incl svg { width: 20px; height: 20px; color: var(--brand-ink); margin-top: 2px; }
.bp-r { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 48px); background: linear-gradient(170deg, #1C2350, var(--ink)); color: #fff; display: grid; gap: 22px; align-content: start; }
/* Тёплое свечение у кнопки — акцент, не фон: бренд остаётся точкой. */
.bp-r::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -140px; width: 520px; height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,106,26,.28), rgba(255,106,26,0)); pointer-events: none; }
.bp-r::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,190,150,.45), transparent); }
.bp-r label { font-weight: 700; font-size: 15px; }
.seat-row { display: flex; align-items: center; gap: 12px; }
.seat-row button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 22px; font-weight: 500; display: grid; place-items: center; transition: background .2s; }
.seat-row button:hover { background: rgba(255,255,255,.18); }
.seat-row output { flex: 1; text-align: center; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
#seats { --fill: 9%; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--brand) var(--fill), rgba(255,255,255,.14) var(--fill)); outline-offset: 6px; }
#seats::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); cursor: grab; }
#seats::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; cursor: grab; }
.sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.sum span { color: var(--mist); font-weight: 600; }
.sum b { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bp-r form { display: grid; gap: 10px; }
.bp-r input[type="text"], .bp-r input[type="email"] { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font: 500 15px var(--f-body); }
.bp-r input::placeholder { color: #8A90B0; }
.bp-r input[type="text"], .bp-r input[type="email"] { transition: border-color .2s, background .2s, box-shadow .2s; }
.bp-r input[type="text"]:hover, .bp-r input[type="email"]:hover { border-color: rgba(255,255,255,.24); }
.bp-r input[type="text"]:focus, .bp-r input[type="email"]:focus { outline: none; border-color: var(--tl-1); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(255,106,26,.18); }
.bp-r .btn { justify-content: center; margin-top: 6px; }
.bp-r .fine { font-size: 12.5px; color: var(--mist); }
.bp-r .kick { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tl-1); }
.hours { display: flex; align-items: center; gap: 16px; }
.hours b { font-family: var(--f-display); font-size: clamp(64px, 7vw, 96px); font-weight: 600; line-height: .9; letter-spacing: -.03em; }
.hours span { color: var(--mist); font-weight: 600; line-height: 1.35; }
.disc { display: flex; flex-wrap: wrap; gap: 8px; }
.disc span { font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.team { display: flex; align-items: center; gap: 14px; padding: 14px 0 4px; border-top: 1px solid var(--line-d); color: var(--mist); font-size: 14px; line-height: 1.4; }
.team b { color: #fff; font-size: 15px; }
.team .av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,106,26,.15); }
.team .av svg { width: 22px; height: 22px; color: var(--tl-1); }
.bp-r .done { font-size: 14px; color: #9BEBC6; font-weight: 600; }
@media (max-width: 820px) { .bpanel { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bframe .cx { display: none; } .bframe::before { inset: -16px; } }

/* css/sections/09-lead-form.css */
/* Форма заявки на пилот (секция «Пилот», тёмная колонка .bp-r):
   согласия 152-ФЗ, honeypot, результат отправки. Логика — js/lead-form.js. */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.itb-lead-form { text-align: left; }
.itb-lead-form__field { display: block; }
.itb-lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.itb-lead-form__consents { display: grid; gap: 10px; margin-top: 4px; }
.bp-r .itb-consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-weight: 500; font-size: 12.5px; line-height: 1.5; color: var(--mist); cursor: pointer; }
.itb-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.itb-consent a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px; }
.itb-consent a:hover { text-decoration-color: currentColor; }
.itb-consent__req { color: var(--tl-1); }

.itb-lead-form__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* На тёмной колонке полупрозрачный оранжевый выглядел грязно-коричневым:
   выключенная кнопка — нейтральная «стеклянная», цвет приходит с согласием. */
.bp-r .itb-lead-form__submit { transition: background .3s, color .3s, box-shadow .3s; }
.bp-r .itb-lead-form__submit:disabled { opacity: 1; background: rgba(255,255,255,.07); color: #8A90B0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.itb-lead-form__submit.is-loading { opacity: .7; cursor: progress; }
.itb-lead-form__result { font-size: 14px; font-weight: 600; color: #9BEBC6; }
.itb-lead-form__result.is-error { color: #FFB4A0; }

/* css/sections/10-cookie-banner.css */
/* Баннер согласия на cookie (template-parts/cookie-banner.php, js/cookie-banner.js). */
.itb-cookie { position: fixed; z-index: 80; left: var(--gut-l); right: var(--gut-r); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.itb-cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.itb-cookie__inner { max-width: 760px; display: flex; align-items: center; gap: 18px; padding: 14px 16px 14px 20px; border-radius: 20px; background: rgba(17,22,51,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); color: var(--mist); }
.itb-cookie__text { font-size: 13px; line-height: 1.5; }
.itb-cookie__text a { color: #fff; }
.itb-cookie__accept { flex: none; }
@media (max-width: 620px) { .itb-cookie__inner { flex-direction: column; align-items: stretch; } }

/* css/sections/11-legal.css */
/* Юридические страницы (templates/template-legal.php) и обычные страницы.
   Тексты длинные — светлая полоса, узкая колонка, Manrope. */
.itb-legal, .itb-page { background: var(--paper); color: var(--ink); }
.itb-legal .wrap, .itb-page .wrap { padding-block: clamp(64px, 8vw, 112px); }
.itb-legal__article, .itb-page__article { max-width: 820px; margin-inline: auto; }
.itb-legal__title, .itb-page__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 40px; }
.itb-legal__content { color: #2C3252; font-size: 16px; line-height: 1.7; }
.itb-legal__content h2 { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--ink); margin: 48px 0 16px; }
.itb-legal__content h3 { font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.itb-legal__content > h2:first-child { margin-top: 0; }
.itb-legal__content p, .itb-legal__content ul, .itb-legal__content ol { margin: 0 0 16px; }
.itb-legal__content ul, .itb-legal__content ol { padding-left: 22px; }
.itb-legal__content li + li { margin-top: 6px; }
.itb-legal__content a { color: var(--brand-ink); }
.itb-legal__content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px; }
.itb-legal__content th, .itb-legal__content td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-l); }
.itb-legal__content th { font-weight: 700; color: var(--ink); background: var(--silver); }

/* Блок реквизитов в начале документов (dl.legal-req из seed/legal/*.html). */
.legal-req { margin: 0 0 32px; padding: 20px 24px; border-radius: 18px; background: var(--silver); display: grid; gap: 8px; }
.legal-req__row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 16px; }
.legal-req__row dt { font: 500 12px/1.6 var(--f-mono); color: var(--graphite); text-transform: uppercase; letter-spacing: .04em; }
.legal-req__row dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .legal-req__row { grid-template-columns: 1fr; gap: 2px; } }

/* css/sections/12-404.css */
/* 404 и поиск: тёмная полоса в цвет hero, крупный код и выход на главную. */
.itb-404 { background: var(--ink-deep); color: #fff; }
.itb-404 .wrap { padding-block: clamp(96px, 12vw, 168px); display: grid; gap: 22px; justify-items: start; max-width: 860px; }
.itb-404__code { font: 500 13px var(--f-mono); letter-spacing: .12em; color: var(--tl-1); }
.itb-404__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.02em; }
.itb-404__title em { font-style: italic; font-weight: 500; color: var(--tl-2); }
.itb-404__actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.itb-404__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; }
.itb-404__list a { color: rgba(255,255,255,.78); text-decoration: none; }
.itb-404__list a:hover { color: #fff; }

/* css/responsive.css */
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .confirm .wrap, .agents .wrap { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .bento { min-height: 0; }
}
@media (max-width: 900px) {
  .process .wrap { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .process h2 { margin: 6px 0 0; font-size: 30px; }
  .steps { display: flex; padding: 0; gap: 6px; }
  .steps::before, .rider, .fillr { display: none; }
  .step { flex: 1; padding: 0; height: 4px; border-radius: 99px; background: #E6E8EF; font-size: 0; transition: background .4s; }
  .step.on { background: var(--brand); }
  .step b, .step small { display: none; }
  .step-cap { display: grid; gap: 4px; min-height: 64px; }
  .step-cap b { font-size: 20px; font-weight: 800; }
  .step-cap small { font: 400 12px/1.4 var(--f-mono); color: var(--graphite); }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .t-board { grid-column: span 1; }
  .plats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}