/* ============================================================
   StrelFlow landing
   Dials: DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 3

   THEME LOCK ....... light only. The brief mandates «Светлая тема»,
                      so no section and no component inverts the page
                      theme. Dark panels (calculator, CTA) are
                      components inside light sections, not theme flips.
   COLOR LOCK ....... exactly one accent: --lime. No second accent
                      anywhere on the page.
   SHAPE LOCK ....... every corner comes from the token scale below.
                      No literal radius values anywhere in this file.
   ICONS ............ Tabler Icons v3.31.0 only, stroke-width 1.5,
                      one family, inlined as a sprite.
   TYPE ............. Geist, self-hosted woff2.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Geist"; src:url("assets/fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist"; src:url("assets/fonts/Geist-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist"; src:url("assets/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist"; src:url("assets/fonts/Geist-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* palette from the brief */
  --lime:      #B8E62B;
  --lime-deep: #A3D016;
  --ink:       #16161A;
  --bg:        #F7FCE0;
  --warm:      #F4F2EC;
  --white:     #FFFFFF;

  /* text tones, all AA against --bg / --white / --warm */
  --muted:     #55564E;   /* 7.4:1 on white  */
  --muted-2:   #6E6F66;   /* 5.1:1 on white  */
  --placeholder:#74756C;  /* 4.6:1 on white  */
  --on-dark:   #F7FCE0;
  --on-dark-2: rgba(247,252,224,.72);

  --line:      rgba(22,22,26,.10);
  --line-2:    rgba(22,22,26,.16);
  --line-inv:  rgba(247,252,224,.16);

  /* SHAPE LOCK: the complete radius scale. Nothing outside this list. */
  --r-pill:   999px;  /* interactive: buttons, chips, radios, tabs, avatars */
  --r-panel:  32px;   /* large panels: plan, calculator, CTA, chat, tabs box */
  --r-card:   24px;   /* cards: bento cells, rail items, FAQ rows, callout   */
  --r-sm:     12px;   /* inputs, icon tiles, inline highlights, small notes  */
  --r-bubble: 18px;   /* chat message bubbles only                           */
  --r-tail:   6px;    /* the single squared-off corner of a bubble           */
  --r-hair:   2px;    /* 1-2px caps: burger lines, focus outline             */

  --shadow-1: 0 1px 2px rgba(22,22,26,.04), 0 10px 30px -22px rgba(22,22,26,.30);
  --shadow-2: 0 2px 6px rgba(22,22,26,.04), 0 40px 80px -50px rgba(22,22,26,.45);

  --pad: 24px;
  --maxw: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* a class-level display must never beat the hidden attribute */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.028em; line-height:1.1; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; height:auto; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
::selection{ background:var(--lime); color:var(--ink); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:14px 22px; background:var(--ink); color:var(--on-dark);
  border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-hair); }

/* ---------- icons: one family, one stroke width ---------- */
.ico{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.ico--tile{
  width:24px; height:24px;
  padding:11px; box-sizing:content-box;
  border-radius:var(--r-sm);
  background:rgba(22,22,26,.05);
  margin-bottom:20px;
}
.ico--line{ width:24px; height:24px; color:var(--ink); margin-top:2px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

.section{ padding:clamp(80px,10vw,150px) 0; }
.section--warm{ background:var(--warm); }
.section--last{ padding-bottom:clamp(80px,10vw,150px); }

.head{ max-width:740px; margin-bottom:clamp(44px,5.5vw,72px); }
.head__text{ margin-top:22px; color:var(--muted); font-size:clamp(16px,1.4vw,19px); max-width:62ch; }

.eyebrow{
  display:block;
  font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:16px;
}

.h2{ font-size:clamp(29px,3.6vw,48px); letter-spacing:-.034em; max-width:19ch; }
.h2--inv{ color:var(--on-dark); max-width:17ch; }
.lead{ font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--muted); max-width:48ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 28px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:16px; font-weight:500; letter-spacing:-.012em;
  white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             transform .12s var(--ease), color .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:11px 20px; font-size:15px; }
.btn--wide{ width:100%; }

/* lime #B8E62B + ink #16161A = 13.9:1 */
.btn--primary{ background:var(--lime); color:var(--ink); }
.btn--primary:hover{ background:var(--lime-deep); }

/* ink text on light bg, 1px border = always visible */
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(22,22,26,.05); border-color:rgba(22,22,26,.32); }
.calc .btn--ghost{ color:var(--on-dark); border-color:var(--line-inv); }

/* ============================================================
   HEADER
   ============================================================ */
#top-sentinel{ position:absolute; top:0; height:1px; width:100%; }

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,252,224,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--line); }
.header__inner{ display:flex; align-items:center; gap:28px; height:72px; }

.logo{ display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-.03em; }
.logo__mark{
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background:var(--lime); color:var(--ink);
}
.footer .logo__mark{ width:28px; height:28px; }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:9px 13px; border-radius:var(--r-pill);
  font-size:15px; color:var(--muted);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover{ color:var(--ink); background:rgba(22,22,26,.05); }

.header__actions{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none; width:42px; height:42px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  place-items:center;
}
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink); border-radius:var(--r-hair); transition:transform .25s var(--ease), opacity .18s; }
.burger span+span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   1. HERO :: type-led, owns the whole first screen
   ============================================================ */
.hero{
  position:relative;
  display:grid; align-content:center;
  min-height:calc(100dvh - 72px);   /* dvh, never vh: no jump on mobile */
  padding:clamp(48px,6vw,96px) 0;
}
.hero::before{
  content:""; position:absolute; inset:-240px auto auto -6%;
  width:76%; height:620px; pointer-events:none;
  background:radial-gradient(48% 55% at 38% 50%, rgba(184,230,43,.34), transparent 72%);
}
.hero__copy{ position:relative; }
.h1{ font-size:clamp(38px,5.6vw,72px); line-height:1.03; letter-spacing:-.042em; max-width:21ch; }
.hero__copy .lead{ margin-top:28px; font-size:clamp(18px,1.7vw,22px); }
.hero__buttons{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.hero__note{ margin-top:24px; font-size:14.5px; color:var(--muted-2); max-width:46ch; }

/* ============================================================
   2. ДЕМО :: compact, scrollable transcript.
   ============================================================ */
.head--center{ margin-inline:auto; text-align:center; }
.head--center .h2{ max-width:22ch; margin-inline:auto; }
.head--center .head__text{ margin-inline:auto; }

.chat{
  max-width:660px; margin:0 auto;
  padding:22px 18px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  box-shadow:var(--shadow-2);
}
.chat__body{
  display:flex; flex-direction:column; gap:9px;
  max-height:390px; overflow-y:auto;
  padding:4px 8px 4px 4px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(22,22,26,.28) transparent;
}
.chat__body::-webkit-scrollbar{ width:7px; }
.chat__body::-webkit-scrollbar-thumb{ background:rgba(22,22,26,.24); border-radius:var(--r-pill); }
.chat__body::-webkit-scrollbar-track{ background:transparent; }

.msg{
  max-width:84%;
  padding:12px 15px;
  border-radius:var(--r-bubble);
  font-size:14.5px; line-height:1.5;
}
.msg--in{ align-self:flex-start; background:var(--warm); border-bottom-left-radius:var(--r-tail); }
.msg--out{ align-self:flex-end; background:var(--ink); color:var(--on-dark); border-bottom-right-radius:var(--r-tail); }

.chat__event{
  display:flex; align-items:center; gap:10px;
  margin-top:4px; padding:12px 14px;
  border-radius:var(--r-sm);
  background:rgba(184,230,43,.26);
  border:1px solid rgba(163,208,22,.55);
  font-size:13px; font-weight:500;
}
.chat__caption{ margin-top:16px; text-align:center; font-size:12.5px; color:var(--muted-2); }

/* MOTION: the transcript plays itself message by message, then replays.
   Storytelling: it shows the AI working a hostile client to a booking.
   JS drives it so the loop pauses whenever the section is off screen. */
.chat.is-playing .msg,
.chat.is-playing .chat__event{ opacity:0; transform:translateY(9px); }
.chat.is-playing .is-shown{
  opacity:1; transform:none;
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}

/* ============================================================
   3. ДЛЯ КОГО :: seamless marquee. This is the page's single marquee;
   the transcript above is playback, not a marquee.
   ============================================================ */
.rail-outer{
  overflow:hidden;
  margin-bottom:clamp(28px,3vw,44px);
  padding-block:4px 20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rail{
  display:flex; gap:16px; width:max-content;
  animation:railScroll 46s linear infinite;
}
.rail:hover{ animation-play-state:paused; }
.rail__set{ display:flex; gap:16px; }
@keyframes railScroll{ to{ transform:translateX(calc(-50% - 8px)); } }

.rail__item{
  width:290px; flex:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:26px;
}
.rail__item h3{ font-size:19px; }
.rail__item p{ margin-top:10px; font-size:15px; color:var(--muted); }

.callout{
  display:block;
  padding:28px 32px;
  border-radius:var(--r-card);
  background:var(--ink); color:var(--on-dark);
  font-size:clamp(17px,1.6vw,21px); line-height:1.5;
}
.callout b{ color:var(--lime); font-weight:600; }

/* ============================================================
   3. ПРОБЛЕМА :: asymmetric text grid + photo
   ============================================================ */
.problems{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,64px); align-items:stretch; }
.problems__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.problem{
  display:flex; gap:16px;
  padding:26px 0;
  border-top:1px solid var(--line-2);
}
.problem h3{ font-size:19px; }
.problem p{ margin-top:8px; font-size:15px; color:var(--muted); }

.shot{ margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--white); border:1px solid var(--line); }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot--tall{ min-height:100%; }

/* ============================================================
   4. РЕШЕНИЕ :: bento, exactly 6 cells for 5 features + 1 photo
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cell{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:30px;
}
.cell h3{ font-size:20px; }
.cell p{ margin-top:10px; font-size:15.5px; color:var(--muted); }

.cell--lime{ background:var(--lime); border-color:var(--lime-deep); }
.cell--lime p{ color:rgba(22,22,26,.72); }
.cell--lime .ico--tile{ background:rgba(22,22,26,.12); }

.cell--photo{ padding:0; overflow:hidden; }
.cell--photo img{ width:100%; height:100%; object-fit:cover; }

.bento-a{ grid-column:span 2; }
.bento-b{ grid-column:span 2; }
.bento-c{ grid-column:span 2; grid-row:span 2; }
.bento-d{ grid-column:span 4; }
.bento-e{ grid-column:span 3; }
.bento-f{ grid-column:span 3; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chips li{ padding:7px 13px; border-radius:var(--r-pill); background:var(--warm); font-size:13px; color:var(--muted); }
.chips--line li{ background:transparent; border:1px solid var(--line-2); color:var(--ink); font-size:13.5px; }

/* ============================================================
   6. КАК РАБОТАЕТ :: horizontal 4-step timeline
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px); }
.steps li{ position:relative; padding-top:32px; }
.steps li::before{
  content:""; position:absolute; left:0; right:calc(-1 * clamp(20px,2.4vw,36px)); top:23px;
  height:2px; background:var(--line-2);
}
/* the previous step's rail already reaches step 04, so 04 needs no trailing line */
.steps li:last-child::before{ display:none; }
.steps__num{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:46px; height:46px; margin:-32px 0 20px;
  border-radius:var(--r-pill);
  background:var(--lime); color:var(--ink);
  font-size:14px; font-weight:600;
  box-shadow:0 0 0 6px var(--warm);
}
.steps h3{ font-size:19.5px; }
.steps p{ margin-top:10px; font-size:15px; color:var(--muted); }

/* ============================================================
   7. SaaS :: stat band
   ============================================================ */
.band{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  overflow:hidden;
}
.band__item{ padding:clamp(26px,3vw,40px); border-left:1px solid var(--line); }
.band__item:first-child{ border-left:0; }
.band__item b{ display:block; font-size:clamp(38px,4.2vw,54px); font-weight:600; letter-spacing:-.045em; line-height:1; }
.band__item h3{ margin-top:18px; font-size:17px; }
.band__item p{ margin-top:8px; font-size:14.5px; color:var(--muted); }

/* ============================================================
   8. СТОИМОСТЬ :: pricing split
   ============================================================ */
.pricing{ display:grid; grid-template-columns:1.06fr .94fr; gap:18px; align-items:start; }

.plan{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-panel);
  padding:clamp(28px,3.2vw,44px);
}
.plan__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.plan__kicker{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.plan__name{ margin-top:8px; font-size:clamp(25px,2.5vw,32px); }
.plan__rate{ padding:8px 15px; border-radius:var(--r-pill); background:var(--lime); font-size:14px; font-weight:500; }
.plan__price{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:26px 0; padding:24px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.plan__price b{ font-size:clamp(40px,4.4vw,56px); font-weight:600; letter-spacing:-.045em; line-height:1; }
.plan__price span{ font-size:15px; color:var(--muted-2); }
.plan__sub{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }

/* 6 items in a 2-col grid instead of a long divided list */
.incl{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:30px; }
.incl li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.45; }
.incl .ico{ width:18px; height:18px; margin-top:3px; color:var(--lime-deep); stroke-width:2.2; }
.plan .chips{ margin-top:0; margin-bottom:30px; }

.calc{
  position:sticky; top:104px;
  background:var(--ink); color:var(--on-dark);
  border-radius:var(--r-panel);
  padding:clamp(28px,3.2vw,40px);
}
.calc__title{ font-size:23px; }
.calc__value{ display:flex; align-items:baseline; gap:10px; margin:28px 0 18px; }
.calc__value output{ font-size:clamp(42px,4.8vw,58px); font-weight:600; letter-spacing:-.045em; line-height:1; color:var(--lime); font-variant-numeric:tabular-nums; }
.calc__value span{ font-size:15px; color:var(--on-dark-2); }

.range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:var(--r-pill);
  background:var(--line-inv); outline:none; margin:0;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--lime); border:4px solid var(--ink);
  box-shadow:0 0 0 1px var(--lime); cursor:grab;
}
.range::-webkit-slider-thumb:active{ cursor:grabbing; }
.range::-moz-range-thumb{
  width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--lime); border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--lime); cursor:grab;
}
.range::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:var(--line-inv); }
.range:focus-visible{ outline:2px solid var(--lime); outline-offset:6px; }

.calc__scale{ display:flex; justify-content:space-between; margin-top:12px; font-size:12px; color:var(--on-dark-2); }
.calc__presets{ display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; }
.calc__presets button{
  flex:1; min-width:66px; padding:9px 10px;
  border-radius:var(--r-pill); border:1px solid var(--line-inv);
  color:var(--on-dark); font-size:13.5px; font-weight:500;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.calc__presets button:hover{ border-color:rgba(247,252,224,.45); }
.calc__presets button[aria-pressed="true"]{ background:var(--lime); border-color:var(--lime); color:var(--ink); }

.calc__total{ margin-top:26px; padding:20px 22px; border-radius:var(--r-card); background:rgba(247,252,224,.07); }
.calc__total > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; font-size:14.5px; color:var(--on-dark-2); }
.calc__total dd{ color:var(--on-dark); font-weight:500; font-variant-numeric:tabular-nums; }
.calc__sum{ margin-top:8px; padding-top:16px !important; border-top:1px solid var(--line-inv); }
.calc__sum dd{ font-size:26px; font-weight:600; letter-spacing:-.035em; color:var(--lime) !important; }
.calc__hint{ margin:16px 0 22px; font-size:13.5px; color:var(--on-dark-2); }

/* ============================================================
   9. МОДУЛИ :: tabs
   ============================================================ */
.mods{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,3.5vw,56px); align-items:stretch; }
.mods__tabs{ display:flex; flex-direction:column; gap:2px; }
.mods__tabs button{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border-radius:var(--r-pill);
  font-size:16.5px; font-weight:500; text-align:left;
  color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.mods__tabs button:hover{ background:rgba(22,22,26,.05); color:var(--ink); }
.mods__tabs button[aria-selected="true"]{ background:var(--ink); color:var(--on-dark); }

.mods__panels{
  background:var(--warm);
  border-radius:var(--r-panel);
  padding:clamp(30px,3.4vw,48px);
  display:flex; flex-direction:column; justify-content:center;
}
.mods__panels h3{ font-size:clamp(23px,2.4vw,30px); }
.mods__panels p{ margin-top:16px; font-size:17px; color:var(--muted); max-width:44ch; }
.mods__panels > div:not([hidden]){ animation:panelIn .35s var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ============================================================
   10. СРАВНЕНИЕ :: table
   ============================================================ */
.tablebox{ overflow-x:auto; background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel); }
.compare{ width:100%; min-width:660px; border-collapse:collapse; font-size:15.5px; }
.compare th,.compare td{ padding:19px 24px; text-align:left; }
.compare thead th{ font-size:13.5px; font-weight:600; color:var(--muted-2); border-bottom:1px solid var(--line-2); white-space:nowrap; }
.compare thead th.hi{ font-size:16.5px; color:var(--ink); letter-spacing:-.02em; }
.compare thead th:not(:first-child),.compare td{ text-align:center; }
.compare tbody th{ font-weight:400; }
.compare tbody tr+tr th,.compare tbody tr+tr td{ border-top:1px solid var(--line); }
.compare td{ width:148px; }
.compare .hi{ background:rgba(184,230,43,.14); }

.mk{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:var(--r-pill); }
.mk .ico{ width:16px; height:16px; stroke-width:2.2; }
.mk--y{ background:var(--lime); color:var(--ink); }
.mk--p{ background:var(--warm); color:var(--muted); }
.mk--n{ background:transparent; color:var(--muted-2); }

/* ============================================================
   11. ДОВЕРИЕ :: statement panel + list
   ============================================================ */
.trust{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start; }
.trust__panel{
  position:sticky; top:104px;
  background:var(--lime);
  border-radius:var(--r-panel);
  padding:clamp(30px,3.4vw,44px);
}
.trust__panel .h2{ font-size:clamp(25px,2.5vw,33px); max-width:none; }
.trust__panel p{ margin-top:18px; font-size:16.5px; color:rgba(22,22,26,.72); }
.trust__list{ display:grid; gap:0; }
.trust__item{ display:flex; gap:18px; padding:28px 0; border-top:1px solid var(--line-2); }
.trust__item:first-child{ border-top:0; padding-top:0; }
.trust__item h3{ font-size:19.5px; }
.trust__item p{ margin-top:9px; font-size:15.5px; color:var(--muted); }

/* ============================================================
   12. FAQ :: accordion
   ============================================================ */
.faq{ display:grid; gap:10px; }
.faq__i{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}
.faq__i[open]{ border-color:var(--line-2); }
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 26px; cursor:pointer; list-style:none;
  font-size:clamp(16px,1.3vw,18.5px); font-weight:500; letter-spacing:-.02em;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__sign{
  width:26px; height:26px; padding:5px; box-sizing:content-box;
  border-radius:var(--r-pill); background:var(--warm);
  transition:transform .3s var(--ease), background .2s var(--ease);
}
.faq__i[open] .faq__sign{ transform:rotate(180deg); background:var(--lime); }
.faq__i > p{ padding:0 26px 24px; color:var(--muted); font-size:16px; max-width:62ch; }

/* ============================================================
   13. CTA :: dark panel + form
   ============================================================ */
.cta{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr .88fr;
  gap:clamp(32px,4vw,64px); align-items:center;
  background:var(--ink);
  border-radius:var(--r-panel);
  padding:clamp(34px,4.4vw,68px);
}
.cta::before{
  content:""; position:absolute; right:-150px; top:-170px;
  width:520px; height:520px; border-radius:var(--r-pill);
  background:radial-gradient(circle, rgba(184,230,43,.24), transparent 66%);
  pointer-events:none;
}
.cta__copy{ position:relative; }
.cta__copy > p{ margin-top:22px; color:var(--on-dark-2); font-size:17px; max-width:42ch; }
.incl--inv{ grid-template-columns:1fr; gap:11px; margin:28px 0 0; }
.incl--inv li{ color:var(--on-dark-2); font-size:15px; }

.form{ position:relative; background:var(--bg); border-radius:var(--r-card); padding:clamp(24px,2.6vw,34px); }
.field{ margin-bottom:16px; }
.field label,.field legend{ display:block; margin-bottom:8px; font-size:13.5px; font-weight:500; color:var(--muted); }
.field input[type="text"],.field input[type="tel"]{
  width:100%; padding:14px 17px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--white); color:var(--ink); font-size:15.5px; font-family:inherit;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder{ color:var(--placeholder); }
.field input:focus{ outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(184,230,43,.32); }
.field input[aria-invalid="true"]{ border-color:#B3321F; }
.err{ margin-top:7px; font-size:13px; color:#96291A; }

.radios{ display:flex; flex-wrap:wrap; gap:8px; }
.radios input{ position:absolute; opacity:0; width:0; height:0; }
.radios span{
  display:inline-block; padding:10px 16px;
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--white); font-size:14px; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.radios input:checked + span{ background:var(--lime); border-color:var(--lime-deep); font-weight:500; }
.radios input:focus-visible + span{ box-shadow:0 0 0 4px rgba(184,230,43,.4); }

#submitBtn{ margin-top:10px; position:relative; }
.btn__spin{ display:none; width:16px; height:16px; border:2px solid rgba(22,22,26,.25); border-top-color:var(--ink); border-radius:var(--r-pill); animation:spin .7s linear infinite; }
#submitBtn.is-busy{ pointer-events:none; opacity:.75; }
#submitBtn.is-busy .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.form__note{ margin-top:14px; font-size:12.5px; color:var(--muted-2); text-align:center; line-height:1.45; }
.form__ok{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:14px; padding:12px 16px;
  border-radius:var(--r-sm); background:rgba(184,230,43,.4);
  font-size:14px; font-weight:500;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--warm); padding:clamp(52px,5.5vw,80px) 0 30px; }
.footer__inner{ display:grid; grid-template-columns:1.05fr 1.35fr; gap:clamp(32px,4vw,64px); }
.footer__brand p{ margin-top:18px; font-size:15px; color:var(--muted); max-width:38ch; }
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__nav h3{ margin-bottom:14px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.footer__nav a{ display:block; padding:5px 0; font-size:15px; color:var(--muted); transition:color .18s var(--ease); }
.footer__nav a:hover{ color:var(--ink); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(40px,4vw,64px); padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted-2);
}

/* ============================================================
   REVEAL (hierarchy: sections arrive as you reach them)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .steps{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .steps li:nth-child(2)::before{ right:0; }

  .problems{ grid-template-columns:1fr; }
  .shot--tall{ aspect-ratio:16/9; }

  .bento{ grid-template-columns:repeat(4,1fr); }
  .bento-a,.bento-b,.bento-e,.bento-f{ grid-column:span 2; }
  .bento-d{ grid-column:span 4; }
  .bento-c{ grid-column:span 4; grid-row:auto; aspect-ratio:16/9; }

  .pricing,.mods,.trust,.cta{ grid-template-columns:1fr; }
  .calc,.trust__panel{ position:static; }
  .band{ grid-template-columns:1fr 1fr; }
  .band__item:nth-child(odd){ border-left:0; }
  .band__item:nth-child(n+3){ border-top:1px solid var(--line); }

  .mods__tabs{ flex-direction:row; flex-wrap:wrap; }
  .mods__tabs button{ padding:12px 18px; font-size:15px; }
}

@media (max-width:900px){
  .nav{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:2px; margin:0;
    padding:14px var(--pad) 22px;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 14px; font-size:17px; color:var(--ink); }
  .burger{ display:grid; }
}

@media (max-width:720px){
  :root{ --pad:18px; }
  body{ font-size:16px; }

  .problems__list{ grid-template-columns:1fr; gap:0; }
  .bento{ grid-template-columns:1fr; }
  .bento-a,.bento-b,.bento-c,.bento-d,.bento-e,.bento-f{ grid-column:span 1; }
  .band{ grid-template-columns:1fr; }
  .band__item{ border-left:0; }
  .band__item+.band__item{ border-top:1px solid var(--line); }
  .incl{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__nav{ grid-template-columns:1fr 1fr; }

  .cell,.rail__item{ padding:24px; }
  .callout{ padding:24px; }

  .hero__buttons{ flex-direction:column; align-items:stretch; }
  .hero__buttons .btn{ width:100%; }

  .chat{ padding:18px 14px 14px; }
  .chat__body{ max-height:340px; padding-right:6px; }

  .steps{ grid-template-columns:1fr; row-gap:28px; }
  .steps li::before{ display:none; }
  .steps__num{ margin-top:0; box-shadow:none; }
  .steps li{ padding-top:0; }

  .header .btn--sm{ display:none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }

  /* both loops collapse to their finished state */
  .chat.is-playing .msg,
  .chat.is-playing .chat__event{ opacity:1; transform:none; }
  .rail{ animation:none; }
  .rail-outer{ overflow-x:auto; }
}