/* ===========================================================
   CASE — marketing site
   Design language sampled from the product's own dark UI:
   near-black surfaces, spring-green accent, amber status pills.
   =========================================================== */

:root{
  --bg:            #0A0E15;
  --bg-soft:       #0D1220;
  --surface:       #121826;
  --surface-2:     #161D2C;
  --surface-hair:  rgba(255,255,255,.07);
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  --text:          #F2F4F8;
  --text-dim:      #AAB4C4;
  --text-faint:    #6E7889;

  --green:         #27E070;
  --green-strong:  #1FC964;
  --green-soft:    rgba(39,224,112,.14);
  --green-line:    rgba(39,224,112,.35);

  --amber:         #F0A93B;
  --amber-soft:    rgba(240,169,59,.14);

  --red:           #EE6A5F;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow-card: 0 20px 60px -25px rgba(0,0,0,.7);
  --shadow-pop:  0 30px 80px -30px rgba(0,0,0,.85);

  --container: 1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }

::selection{ background:var(--green); color:#06210F; }

/* ---------- i18n: show only the active language ---------- */
html[data-lang="ru"] [data-lang="en"]{ display:none !important; }
html[data-lang="en"] [data-lang="ru"]{ display:none !important; }

/* subtle scrollbar for horizontal galleries */
.hscroll::-webkit-scrollbar{ height:6px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; }

/* ---------- layout helpers ---------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
section{ position:relative; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green);
  background:var(--green-soft);
  border:1px solid var(--green-line);
  padding:6px 14px 6px 12px;
  border-radius:999px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
}
.section-head{
  max-width:640px;
  margin:0 0 48px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  letter-spacing:-.02em;
  margin-top:16px;
  line-height:1.15;
}
.section-head p{
  margin-top:14px;
  font-size:17px;
  color:var(--text-dim);
}

.tag-accent{ color:var(--green); }

/* background glow */
.glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(600px 400px at 15% 0%, rgba(39,224,112,.10), transparent 60%),
    radial-gradient(500px 380px at 85% 10%, rgba(240,169,59,.06), transparent 60%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:15px;
  padding:13px 22px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--green);
  color:#062412;
  box-shadow:0 12px 30px -10px rgba(39,224,112,.55);
}
.btn-primary:hover{ background:var(--green-strong); }
.btn-ghost{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--border-strong);
}
.btn-ghost:hover{ border-color:var(--green-line); color:var(--green); }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn svg{ width:18px; height:18px; flex:none; }

.apple-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:9px 18px 9px 14px;
  transition:transform .15s ease, border-color .15s ease;
}
.apple-badge:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.apple-badge svg{ width:26px; height:26px; flex:none; }
.apple-badge .lines{ display:flex; flex-direction:column; line-height:1.05; }
.apple-badge .lines small{ font-size:11px; color:#c9c9c9; font-weight:400; }
.apple-badge .lines strong{ font-size:18px; font-weight:600; letter-spacing:-.01em; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,21,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.01em; }
.brand .mark{ width:34px; height:34px; border-radius:9px; flex:none; }
.brand .mark svg{ width:100%; height:100%; display:block; }

.nav-desktop{ display:flex; align-items:center; gap:2px; }
.nav-desktop a{
  padding:10px 14px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-dim);
  border-radius:999px;
  transition:color .15s ease, background .15s ease;
}
.nav-desktop a:hover{ color:var(--text); background:var(--surface-hair); }

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

.lang-switch{
  display:flex;
  align-items:center;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.lang-switch button{
  border:0; background:transparent; color:var(--text-faint);
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang-switch button.active{ background:var(--green); color:#062412; }

.burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:12px;
  cursor:pointer;
  flex:none;
}
.burger svg{ width:20px; height:20px; }

.mobile-nav{
  display:none;
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
.mobile-nav.open{ display:block; }
.mobile-nav .wrap{ padding:12px 24px 20px; display:flex; flex-direction:column; gap:2px; }
.mobile-nav a{
  padding:13px 6px;
  font-size:15.5px;
  font-weight:500;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.mobile-nav a:last-of-type{ border-bottom:0; }
.mobile-nav .btn{ margin-top:14px; width:100%; }
.mobile-nav .lang-switch{ align-self:flex-start; margin-bottom:8px; }

/* ---------- hero ---------- */
.hero{
  padding:76px 0 40px;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero h1{
  font-size:clamp(34px,4.6vw,54px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.08;
  margin-top:20px;
}
.hero .lede{
  margin-top:20px;
  font-size:18px;
  color:var(--text-dim);
  max-width:520px;
}
.hero-ctas{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.hero-meta{
  margin-top:28px;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}
.hero-meta div{ font-size:13px; color:var(--text-faint); }
.hero-meta strong{ display:block; font-size:20px; color:var(--text); font-weight:700; }

.hero-visual{ display:flex; justify-content:center; }
.hero-stage{ position:relative; width:fit-content; max-width:100%; }
.hero-stage .float-card{
  position:absolute;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  padding:12px 14px;
  box-shadow:var(--shadow-pop);
  font-size:12.5px;
  z-index:3;
  white-space:nowrap;
}
.hero-stage .float-card.ai{
  top:8%; left:-18px;
  display:flex; align-items:center; gap:8px;
  color:var(--green);
  font-weight:700;
}
.hero-stage .float-card.ai svg{ width:16px; height:16px; }
.hero-stage .float-card.dtc{
  bottom:12%; right:-18px;
  color:var(--text-dim);
}
.hero-stage .float-card.dtc code{
  display:block; color:var(--amber); font-family:var(--font-mono); font-size:14px; font-weight:600; margin-top:2px;
}

/* ---------- phone mockup ---------- */
.phone{
  position:relative;
  width:272px;
  border-radius:46px;
  background:linear-gradient(160deg,#20242c,#101318);
  padding:12px;
  box-shadow:var(--shadow-pop), inset 0 0 0 1px rgba(255,255,255,.06);
  flex:none;
}
.phone::before{
  content:"";
  position:absolute;
  top:22px; left:50%; transform:translateX(-50%);
  width:84px; height:22px;
  background:#0A0C10;
  border-radius:14px;
  z-index:2;
}
.phone .screen{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  background:var(--bg);
  aspect-ratio:290/627;
}
.phone .screen img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
}
.phone.size-sm{ width:220px; }
.phone.size-lg{ width:300px; }

/* ---------- logo / trust strip ---------- */
.trust-strip{ padding:8px 0 64px; }
.trust-strip .wrap{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
  text-align:center;
}
.trust-strip p{ font-size:13px; color:var(--text-faint); letter-spacing:.02em; }
.trust-pills{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.trust-pill{
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--border);
  padding:7px 13px; border-radius:999px;
}

/* ---------- pain points ---------- */
.pains{ padding:20px 0 88px; }
.pain-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.pain-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  transition:border-color .2s ease, transform .2s ease;
}
.pain-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.pain-card .before{
  font-size:13px; color:var(--text-faint);
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px dashed var(--border-strong);
}
.pain-card .before b{ color:var(--red); font-weight:600; }
.pain-card .icon{
  width:38px; height:38px; border-radius:10px;
  background:var(--green-soft); border:1px solid var(--green-line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.pain-card .icon svg{ width:20px; height:20px; color:var(--green); }
.pain-card h3{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.pain-card p.desc{ margin-top:8px; font-size:14.5px; color:var(--text-dim); }

/* ---------- feature showcase (alternating rows) ---------- */
.features{ padding:20px 0 96px; }
.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--border);
}
.feature-row:first-of-type{ border-top:0; }
.feature-row.reverse .f-visual{ order:2; }
.feature-row.reverse .f-copy{ order:1; }
.f-copy .chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-faint);
}
.f-copy h3{
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700; letter-spacing:-.02em;
  margin-top:14px;
  line-height:1.2;
}
.f-copy p.body{ margin-top:14px; color:var(--text-dim); font-size:16px; max-width:460px; }
.f-list{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.f-list li{ display:flex; gap:11px; font-size:15px; color:var(--text); }
.f-list li svg{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--green); }
.f-visual{ display:flex; justify-content:center; }

/* card stack behind phone for feature rows */
.f-visual .stagepane{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding:36px 0;
}
.f-visual .stagepane::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(340px 260px at 50% 50%, rgba(39,224,112,.09), transparent 70%);
  z-index:0;
}

/* ---------- AI section ---------- */
.ai-section{
  padding:96px 0;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(39,224,112,.10), transparent 60%),
    var(--bg-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ai-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.ai-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:26px 24px 0;
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.ai-card:hover{ border-color:var(--green-line); transform:translateY(-3px); }
.ai-card .badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:var(--green-soft); border:1px solid var(--green-line);
  color:var(--green); font-size:12px; font-weight:700;
  padding:5px 11px; border-radius:999px;
  margin-bottom:16px;
}
.ai-card .badge svg{ width:13px; height:13px; }
.ai-card h3{ font-size:20px; font-weight:700; letter-spacing:-.01em; }
.ai-card p{ margin-top:10px; font-size:14.5px; color:var(--text-dim); flex:none; }
.ai-card .shot{
  margin-top:22px;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-bottom:0;
  background:var(--bg);
  align-self:center;
  width:86%;
  box-shadow:0 -18px 40px -20px rgba(0,0,0,.6) inset;
}
.ai-card .shot img{ width:100%; display:block; }

/* ---------- how it works ---------- */
.steps{ padding:20px 0 96px; }
.step-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative;
}
.step-track::before{
  content:"";
  position:absolute; top:27px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent);
  z-index:0;
}
.step-card{ position:relative; z-index:1; }
.step-num{
  width:54px; height:54px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:19px; color:var(--green);
  margin-bottom:18px;
}
.step-card h4{ font-size:16.5px; font-weight:700; }
.step-card p{ margin-top:8px; font-size:14.5px; color:var(--text-dim); }

/* ---------- FAQ ---------- */
.faq{ padding:20px 0 96px; }
.faq-list{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px;
  background:transparent; border:0;
  color:var(--text);
  font-size:15.5px; font-weight:600; text-align:left;
  cursor:pointer;
}
.faq-q svg{ width:18px; height:18px; flex:none; color:var(--text-faint); transition:transform .2s ease; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); color:var(--green); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.faq-item.open .faq-a{ max-height:400px; }
.faq-a-inner{ padding:0 22px 20px; font-size:14.5px; color:var(--text-dim); }

/* ---------- final CTA ---------- */
.cta-band{
  padding:80px 0;
  text-align:center;
}
.cta-box{
  max-width:760px; margin:0 auto;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  padding:56px 40px;
  position:relative;
  overflow:hidden;
}
.cta-box::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(420px 240px at 50% 0%, rgba(39,224,112,.16), transparent 70%);
}
.cta-box > *{ position:relative; z-index:1; }
.cta-box h2{ font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; }
.cta-box p{ margin-top:12px; color:var(--text-dim); font-size:16px; }
.cta-box .hero-ctas{ justify-content:center; margin-top:28px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:56px 0 28px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
}
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:14px; color:var(--text-faint); max-width:280px; }
.footer-col h5{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; color:var(--text-dim); transition:color .15s ease; }
.footer-col a:hover{ color:var(--green); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--border);
}
.footer-bottom p{ font-size:13px; color:var(--text-faint); }
.footer-legal-note{ font-size:12.5px; color:var(--text-faint); max-width:640px; line-height:1.6; }

/* ---------- legal pages ---------- */
.legal-hero{ padding:64px 0 24px; }
.legal-hero h1{ font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.02em; }
.legal-hero .updated{ margin-top:12px; font-size:14px; color:var(--text-faint); }
.legal-body{ padding:16px 0 96px; }
.legal-body .wrap{ max-width:820px; }
.legal-nav{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:18px 0 8px;
  border-bottom:1px solid var(--border);
  margin-bottom:36px;
}
.legal-nav a{
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px;
}
.legal-content h2{
  font-size:20px; font-weight:700; letter-spacing:-.01em;
  margin-top:40px; margin-bottom:14px; scroll-margin-top:90px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ font-size:15px; color:var(--text-dim); line-height:1.7; }
.legal-content p{ margin-bottom:14px; }
.legal-content ul{ margin:0 0 14px; padding-left:0; display:flex; flex-direction:column; gap:8px; }
.legal-content li{ display:flex; gap:10px; }
.legal-content li::before{ content:"—"; color:var(--text-faint); flex:none; }
.legal-content strong{ color:var(--text); }
.legal-content a.inline-link{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.legal-content table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; }
.legal-content th, .legal-content td{ text-align:left; padding:10px 12px; border:1px solid var(--border); color:var(--text-dim); }
.legal-content th{ color:var(--text); background:var(--surface); font-weight:600; }
.legal-callout{
  background:var(--surface); border:1px solid var(--border-strong);
  border-left:3px solid var(--green);
  border-radius:var(--radius-sm);
  padding:16px 18px; margin:20px 0;
  font-size:14.5px; color:var(--text-dim);
}

/* ---------- responsive ---------- */
/* ---------- overflow safety net ----------
   Grid/flex items default to min-width:auto, which refuses to shrink
   below their content's min-content size — with fr/flexible tracks this
   silently blows the container (and page) wider than the viewport. */
.hero .wrap > *,
.feature-row > *,
.pain-grid > *,
.ai-cards > *,
.step-track > *,
.footer-top > *,
.hero-ctas > *,
.hero-meta > *,
.trust-strip .wrap > *,
.eyebrow,
.eyebrow > *,
.header-actions > *,
.mobile-nav .wrap > *,
.footer-bottom > *{
  min-width:0;
}

@media (max-width: 980px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
  .header-actions .lang-switch{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; margin-bottom:8px; }
  .hero-stage .float-card.ai,
  .hero-stage .float-card.dtc{ display:none; }
  .hero .lede{ max-width:none; }
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .ai-cards{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .feature-row{ grid-template-columns:1fr; gap:32px; padding:40px 0; }
  .feature-row.reverse .f-visual{ order:1; }
  .feature-row.reverse .f-copy{ order:2; }
  .step-track{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .step-track::before{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width: 620px){
  .wrap{ padding:0 18px; }
  .hero{ padding:52px 0 28px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn, .hero-ctas .apple-badge{ width:100%; }
  .hero-meta{ gap:20px; }
  .pain-grid{ grid-template-columns:1fr; }
  .phone{ width:236px; }
  .step-track{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .cta-box{ padding:40px 24px; }
  .legal-nav{ overflow-x:auto; flex-wrap:nowrap; }
}