/* kvoka.ru — лендинг. Направление «Роттнест», технологичная редакция.
   Система по мотивам brochure-системы Shopify: одна гарнитура Inter с
   дробными весами, шкала dsp/t1–t5/body/eyebrow, темы через data-color-mode,
   пилюли, листы с радиусом 40, карточки 4:3 без теней. Цвета — свои: песок,
   вода, эвкалипт. Анимация hero — в hero.css / hero.js. */

:root {
  --sand-0:#FFFFFF; --sand-50:#F6F2EA; --sand-100:#EFE7D8; --sand-200:#E2D8C4; --sand-300:#C9BDA6;
  --sand-400:#A79B86; --sand-500:#857A68; --sand-600:#665D4F; --sand-700:#4B4439; --sand-800:#332E27;
  --sand-900:#1F1C17; --sand-950:#14120F;
  --water-200:#A9D3E4; --water-400:#5C9DBB; --water-500:#2C6E8A; --water-700:#1E4F66; --water-900:#10303F;
  --euca-200:#BFD6C3; --euca-400:#8FB596; --euca-500:#6B8F71; --euca-700:#4A6A51;
  --clay-300:#E3B08F; --clay-500:#C97A4A; --clay-700:#9A5630;
  --ink:#1B2730;

  --bg:var(--sand-50); --surface:var(--sand-0); --surface-2:var(--sand-100); --fg:var(--ink);
  --muted:var(--sand-600); --line:var(--sand-200);
  --accent:var(--water-500); --accent-ink:var(--water-700); --eyebrow:var(--euca-700);
  --cta-bg:var(--ink); --cta-fg:var(--sand-0); --cta-hover:var(--sand-800);

  --font:'Inter', Helvetica, Arial, sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --dsp:clamp(2.75rem, 6vw, 4.375rem); --t1:clamp(2.125rem, 4.2vw, 3.375rem); --t2:clamp(1.75rem, 3vw, 2.5rem);
  --t4:1.625rem; --t5:1.375rem; --body:1.125rem; --body-sm:.875rem;
  --r-pill:9999px; --r-card:1rem; --r-sec:clamp(1.5rem, 4vw, 2.5rem); --margin:clamp(16px, 4vw, 50px);
  --w:1200px;
}
[data-color-mode="dark"] {
  --bg:var(--sand-950); --surface:var(--sand-900); --surface-2:var(--sand-800); --fg:var(--sand-50);
  --muted:var(--sand-400); --line:var(--sand-800);
  --accent:var(--water-400); --accent-ink:var(--water-200); --eyebrow:var(--euca-400);
  --cta-bg:var(--sand-0); --cta-fg:var(--ink); --cta-hover:var(--sand-200);
}
[data-color-mode="water"] {
  --bg:var(--water-900); --surface:#163E50; --surface-2:#1E4F66; --fg:#EEF5F8; --muted:#9FBFCD; --line:#2A5A70;
  --accent:var(--water-200); --accent-ink:var(--water-200); --eyebrow:var(--water-200);
  --cta-bg:var(--sand-0); --cta-fg:var(--ink); --cta-hover:var(--sand-200);
}

*, *::before, *::after { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { margin:0; background:var(--sand-950); color:var(--fg); font-family:var(--font); font-size:var(--body); line-height:1.575rem; font-weight:400; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
a { color:inherit }
img { max-width:100%; display:block }
.wrap { max-width:var(--w); margin:0 auto; padding:0 var(--margin) }
.sec { background:var(--bg); color:var(--fg); padding:clamp(64px, 9vw, 128px) 0; position:relative }
.sec--sheet { border-radius:var(--r-sec) var(--r-sec) 0 0; margin-top:calc(-1 * var(--r-sec)) }
.sec--sheet-bottom { border-radius:0 0 var(--r-sec) var(--r-sec) }
.sec--tight { padding-top:clamp(40px, 6vw, 72px) }

/* ─── текст ─── */
.eyebrow { font-size:.875rem; font-weight:550; letter-spacing:0; text-transform:uppercase; color:var(--eyebrow); margin:0 0 16px }
.dsp { font-size:var(--dsp); line-height:1.06; letter-spacing:-.025em; word-spacing:-.05em; font-weight:330; margin:0 0 22px; text-wrap:balance }
.t1 { font-size:var(--t1); line-height:1.08; letter-spacing:-.02em; font-weight:330; margin:0 0 18px; text-wrap:balance }
.t2 { font-size:var(--t2); line-height:1.12; letter-spacing:-.01em; font-weight:330; margin:0 0 14px; text-wrap:balance }
.t4 { font-size:var(--t4); line-height:1.15; font-weight:360; margin:0 0 8px }
.t5 { font-size:var(--t5); line-height:1.2; font-weight:360; letter-spacing:-.005em; margin:0 0 8px }
.lead { font-size:var(--body); color:var(--muted); max-width:48ch; margin:0 0 28px }
.sm { font-size:var(--body-sm); line-height:1.35; color:var(--muted) }
.mono { font-family:var(--mono); font-size:.8125rem; letter-spacing:0 }
.muted { color:var(--muted) }

/* ─── кнопки, пилюли ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-pill); padding:12px 22px; font-size:1rem; font-weight:550; letter-spacing:-.006em; text-decoration:none; border:2px solid transparent; cursor:pointer; font-family:inherit; line-height:1.2; transition:background .15s, color .15s, border-color .15s, transform .15s; white-space:nowrap }
.btn:active { transform:scale(.98) }
.btn--primary { background:var(--cta-bg); color:var(--cta-fg) } .btn--primary:hover { background:var(--cta-hover) }
.btn--secondary { background:transparent; color:var(--fg); border-color:var(--line) } .btn--secondary:hover { border-color:var(--fg) }
.btn--accent { background:var(--accent); color:#fff } .btn--accent:hover { background:var(--accent-ink) }
.btn--sm { padding:8px 16px; font-size:.875rem }
.btn--lg { padding:15px 28px; font-size:1.0625rem }
.pill { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px; font-size:.875rem; color:var(--fg) }
.dot { width:8px; height:8px; border-radius:50%; background:var(--euca-500); flex:none }
.dot--pulse { animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.5; transform:scale(.8) } }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center }

/* ─── сетки, карточки ─── */
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.5vw, 28px) }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.5vw, 28px) }
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px) }
.card { background:var(--surface-2); border-radius:var(--r-card); padding:24px; min-width:0 }
.card--white { background:var(--surface); border:1px solid var(--line) }
.media { background:var(--surface-2); border-radius:var(--r-card); aspect-ratio:4/3; position:relative; overflow:hidden; display:grid; place-items:center }
.feature h3 { margin-top:18px } .feature p { margin:0 }

/* ─── шапка ─── */
.top { position:sticky; top:0; z-index:20; background:rgba(20,18,15,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--sand-50); border-bottom:1px solid rgba(255,255,255,.06) }
.nav { display:flex; align-items:center; gap:28px; height:64px; font-size:.9375rem; font-weight:500 }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1.25rem; letter-spacing:-.03em; text-decoration:none }
.brand svg { display:block }
.nav__links { display:flex; gap:22px; color:var(--sand-300) } .nav__links a { text-decoration:none } .nav__links a:hover { color:var(--sand-50) }
.nav__spacer { flex:1 }
.nav__login { color:var(--sand-300); text-decoration:none } .nav__login:hover { color:var(--sand-50) }
.top .btn--primary { --cta-bg:var(--sand-0); --cta-fg:var(--ink); --cta-hover:var(--sand-200) }

/* ─── hero ─── */
.hero { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(28px, 4vw, 56px); align-items:center }
.hero .dsp { max-width:14ch }
.logos { display:flex; gap:clamp(24px, 4vw, 56px); justify-content:center; flex-wrap:wrap; padding-top:clamp(40px, 6vw, 72px); color:var(--sand-300); font-weight:600; font-size:1.125rem; letter-spacing:-.02em }
.logos span { display:inline-flex; align-items:center; gap:8px; opacity:.85 }

/* ─── возможности: карточки с микро-сценами ─── */
.scene { position:absolute; inset:0; padding:clamp(14px, 3%, 24px); display:grid; align-content:center; justify-items:center; gap:10px }
.chat { display:grid; gap:8px; width:min(100%, 340px) }
.msg { border-radius:16px; padding:10px 14px; font-size:.9375rem; line-height:1.35; max-width:88%; background:var(--surface); border:1px solid var(--line); opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s }
.msg--u { background:var(--ink); color:#fff; border-color:var(--ink); margin-left:auto }
.msg.is-in { opacity:1; transform:none }
.msg--typing::after { content:'· · ·'; letter-spacing:2px; color:var(--muted) }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; width:min(100%, 360px); box-shadow:0 10px 30px rgba(27,39,48,.08) }
.panel__h { display:flex; justify-content:space-between; align-items:center; font-size:.8125rem; color:var(--muted); margin-bottom:10px }
.kpi-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px }
.kpi small { display:block; color:var(--muted); font-size:.6875rem; margin-bottom:2px } .kpi b { font-weight:500; font-size:1.25rem; letter-spacing:-.02em } .kpi u { text-decoration:none; color:var(--euca-700); font-size:.6875rem; margin-left:6px }
.bars { display:flex; gap:4px; align-items:flex-end; height:48px } .bars i { flex:1; background:var(--accent); border-radius:3px 3px 0 0; transform-origin:bottom; transform:scaleY(.08); transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.is-in .bars i { transform:none }
.route { width:min(100%, 340px); aspect-ratio:16/9; position:relative }
.route svg { width:100%; height:100%; display:block }
.route .path { stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.6s ease .2s }
.is-in .route .path { stroke-dashoffset:0 }
.route .pin { fill:var(--surface); stroke:var(--ink); stroke-width:2 }
.tag { position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:.75rem; display:inline-flex; gap:6px; align-items:center; box-shadow:0 6px 18px rgba(27,39,48,.1); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s }
.is-in .tag { opacity:1; transform:none }
.tag--ok::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--euca-500) }
.stock { width:min(100%, 340px); display:grid; gap:8px }
.stock__row { display:flex; justify-content:space-between; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:.9375rem }
.stock__n { font-family:var(--mono); font-weight:500; padding:2px 10px; border-radius:var(--r-pill); background:var(--euca-200); color:var(--euca-700) }
.stock__n--low { background:#F4DDD0; color:var(--clay-700) }
.coupon { width:min(100%, 320px); background:var(--surface); border:1px dashed var(--accent); border-radius:14px; padding:16px 18px; display:grid; gap:6px; position:relative }
.coupon b { font-family:var(--mono); font-size:1.25rem; letter-spacing:.08em; color:var(--accent-ink) }
.coupon__applied { position:absolute; right:14px; top:14px; font-size:.75rem; color:var(--euca-700); display:inline-flex; gap:6px; align-items:center; opacity:0; transition:opacity .4s .9s } .coupon__applied::before { content:'✓' }
.is-in .coupon__applied { opacity:1 }
.mailcard { width:min(100%, 340px); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; transform:translateY(18px); opacity:0; transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s }
.is-in .mailcard { transform:none; opacity:1 }
.mailcard small { display:block; color:var(--muted); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px }
.photos { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:min(100%, 340px) }
.photos i { aspect-ratio:3/4; border-radius:10px; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)); opacity:0; transform:scale(.92); transition:opacity .4s, transform .4s }
.photos i:nth-child(2) { background:linear-gradient(160deg, var(--clay-300), var(--clay-500)) }
.photos i:nth-child(3) { background:linear-gradient(160deg, var(--water-200), var(--water-400)) }
.photos i:nth-child(4) { background:linear-gradient(160deg, var(--euca-200), var(--euca-400)) }
.photos i:nth-child(5) { background:linear-gradient(160deg, var(--sand-200), var(--sand-400)) }
.photos i:nth-child(6) { background:linear-gradient(160deg, var(--water-400), var(--water-700)) }
.is-in .photos i { opacity:1; transform:none }
.is-in .photos i:nth-child(2) { transition-delay:.1s } .is-in .photos i:nth-child(3) { transition-delay:.2s } .is-in .photos i:nth-child(4) { transition-delay:.3s } .is-in .photos i:nth-child(5) { transition-delay:.4s } .is-in .photos i:nth-child(6) { transition-delay:.5s }

/* ─── шаги ─── */
.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.5vw, 28px); counter-reset:s }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; display:grid; gap:12px; align-content:start }
.step::before { counter-increment:s; content:counter(s, decimal-leading-zero); font-family:var(--mono); color:var(--muted); font-size:.8125rem }
.step h3 { margin:0 } .step p { margin:0 }
.mini { background:var(--surface-2); border-radius:12px; padding:14px; margin-top:6px; min-height:96px; display:grid; gap:8px; align-content:center }
.mini .msg { max-width:100%; opacity:1; transform:none; font-size:.875rem }
.previews { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px }
.previews i { height:70px; border-radius:8px; background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden }
.previews i::before { content:''; position:absolute; inset:10px 10px auto 10px; height:22px; border-radius:4px; background:var(--sand-200) }
.previews i::after { content:''; position:absolute; inset:auto 10px 10px 10px; height:18px; border-radius:4px; background:var(--water-200) }
.previews i:nth-child(2)::before { inset:10px 10px 10px 10px; height:auto; background:linear-gradient(135deg, var(--clay-300), var(--sand-200)) } .previews i:nth-child(2)::after { display:none }
.previews i:nth-child(3)::before { width:40%; height:40px; background:var(--euca-200) } .previews i:nth-child(3)::after { left:55%; height:40px; top:10px; background:var(--sand-200) }
.status { display:inline-flex; gap:8px; align-items:center; font-family:var(--mono); font-size:.8125rem; color:var(--muted) }

/* ─── агент в деле ─── */
.action { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.4fr); gap:clamp(24px, 4vw, 56px); align-items:center }
.theses { display:grid; gap:4px }
.thesis { text-align:left; background:none; border:0; border-left:2px solid var(--line); color:var(--muted); font:inherit; padding:12px 18px; cursor:pointer; transition:color .2s, border-color .2s }
.thesis b { display:block; font-size:var(--t5); font-weight:360; letter-spacing:-.005em; color:inherit }
.thesis span { display:block; font-size:var(--body-sm); margin-top:6px; max-height:0; overflow:hidden; transition:max-height .35s }
.thesis.is-on { color:var(--fg); border-color:var(--accent) } .thesis.is-on span { max-height:80px }
.shot { background:var(--surface); border-radius:var(--r-card); border:1px solid var(--line); overflow:hidden; aspect-ratio:16/10; position:relative }
.shot__pane { position:absolute; inset:0; opacity:0; transition:opacity .4s; display:grid; grid-template-columns:180px 1fr; font-size:.8125rem }
.shot__pane.is-on { opacity:1 }
.shot aside { border-right:1px solid var(--line); padding:16px; background:var(--surface-2) }
.shot nav { display:grid; gap:2px; margin-top:14px } .shot nav span { padding:7px 10px; border-radius:8px; color:var(--muted); display:flex; justify-content:space-between } .shot nav .on { background:var(--surface); color:var(--fg); font-weight:550 } .shot nav i { font-style:normal; font-family:var(--mono); font-size:.75rem; color:var(--accent-ink) }
.shot main { padding:18px; display:grid; gap:12px; align-content:start }
.kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px } .kpis .kpi { background:var(--surface-2); border-radius:10px; padding:12px } .kpis .kpi b { font-size:1.125rem; white-space:nowrap }
.seg { display:inline-flex; background:var(--surface-2); border-radius:var(--r-pill); padding:3px } .seg em { font-style:normal; font-size:.75rem; padding:4px 10px; border-radius:var(--r-pill); color:var(--muted) } .seg .on { background:var(--surface); color:var(--fg); font-weight:550 }
.toast { background:var(--fg); color:var(--bg); border-radius:10px; padding:8px 12px; font-size:.8125rem; justify-self:start }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:.8125rem } .kv dt { color:var(--muted) } .kv dd { margin:0 }
.timeline { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.8125rem } .timeline li { display:flex; gap:10px } .timeline li::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--euca-500); margin-top:6px; flex:none }

/* ─── шаблоны ─── */
.fam { display:grid; gap:10px; text-decoration:none; color:inherit }
.fam__shot { aspect-ratio:4/3; border-radius:var(--r-card); overflow:hidden; background:var(--surface-2); border:1px solid var(--line) }
.fam__shot img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s } .fam:hover .fam__shot img { transform:scale(1.03) }
.fam__meta { display:flex; justify-content:space-between; gap:10px; font-size:.75rem; color:var(--muted); font-family:var(--mono) }
.fam h3 { margin:4px 0 0 } .fam p { margin:0; font-size:var(--body-sm); color:var(--muted) }
.variants { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:28px }
.variants div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:.875rem } .variants b { display:block; font-weight:550; margin-bottom:4px }

/* ─── цитата, цены, CTA, подвал ─── */
.quote { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:clamp(24px, 4vw, 56px); align-items:center }
.quote blockquote { margin:0 } .quote cite { display:block; font-style:normal; margin-top:18px; color:var(--muted); font-size:var(--body-sm) }
.portrait { aspect-ratio:4/5; border-radius:var(--r-card); background:linear-gradient(160deg, #1E4F66, #10303F); display:grid; place-items:end start; padding:18px; color:var(--muted); font-size:.8125rem }
.price { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:28px; display:grid; gap:14px; align-content:start }
.price--hl { border-color:var(--accent); box-shadow:0 0 0 4px rgba(44,110,138,.12) }
.price .amount { font-size:2.25rem; font-weight:330; letter-spacing:-.02em; line-height:1 } .price .amount small { font-size:1rem; color:var(--muted); letter-spacing:0 }
.price ul { margin:0; padding-left:18px; color:var(--muted); font-size:var(--body-sm); line-height:1.6 }
.cta { text-align:center } .cta .t1 { margin-left:auto; margin-right:auto; max-width:22ch }
.waitlist { display:flex; gap:8px; max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 6px 6px 18px }
.waitlist input { flex:1; min-width:0; border:0; background:transparent; color:var(--fg); font:inherit; font-size:1rem; outline:none } .waitlist input::placeholder { color:var(--muted) }
.cta .note { margin-top:14px }
.footer { background:var(--sand-950); color:var(--sand-300); padding:48px 0 32px; font-size:var(--body-sm) }
.footer .wrap { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center }
.footer nav { display:flex; gap:20px; flex-wrap:wrap } .footer a { text-decoration:none } .footer a:hover { color:var(--sand-50) }
.footer .copy { grid-column:1 / -1; color:var(--sand-500); border-top:1px solid var(--sand-800); padding-top:18px }

/* ─── reveal ─── */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.js .reveal.is-in { opacity:1; transform:none }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1; transform:none; transition:none } .msg, .tag, .mailcard, .photos i, .bars i, .coupon__applied { transition:none; opacity:1; transform:none } .route .path { stroke-dashoffset:0; transition:none } }

/* ─── адаптив ─── */
@media (max-width: 960px) {
  .hero, .action, .quote { grid-template-columns:1fr }
  .grid3, .steps { grid-template-columns:1fr 1fr } .grid4, .variants { grid-template-columns:1fr 1fr }
  .nav__links { display:none }
  .shot { aspect-ratio:auto; min-height:360px } .shot__pane { grid-template-columns:1fr } .shot aside { display:none }
}
@media (max-width: 640px) {
  .grid2, .grid3, .steps, .grid4, .variants, .kpis { grid-template-columns:1fr }
  .kpis { grid-template-columns:1fr 1fr }
  .footer .wrap { grid-template-columns:1fr }
  .waitlist { flex-direction:column; border-radius:20px; padding:10px } .waitlist input { padding:8px 6px }
  .nav__login { display:none }
}