/* ============================================================
   PAYTOOL DESIGN TOKENS — extracted from Figma "Paytool | Для Claude"
   (Buttons, Cards, Controls, Inputs, Other elements)
   Mariupol is Paytool's brand typeface; not distributable via public
   CDN here, so this falls back to a similar geometric grotesque.
   Swap --font-brand for the real @font-face when wiring into the repo.
   ============================================================ */
:root{
  --font-brand: "Mariupol", "Circular Std", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  --font-ui: "Mariupol", -apple-system, "SF Pro Text", "Segoe UI", sans-serif;

  --bg: #111318;                          /* main colors/deep night */
  --white: #FCFCFC;                       /* main colors/white */
  --ink: var(--white);
  --ink-72: rgba(252,252,252,0.72);
  --ink-60: rgba(252,252,252,0.60);
  --ink-45: rgba(252,252,252,0.45);
  --ink-24: rgba(252,252,252,0.24);
  --ink-12: rgba(252,252,252,0.12);

  --grey-18: rgba(57,61,68,0.18);         /* tonal/payne's grey 18% */
  --grey-28: rgba(57,61,68,0.28);
  --grey-44: rgba(57,61,68,0.44);
  --grey-56: rgba(57,61,68,0.56);
  --grey-solid: #393D44;                  /* main colors/payne's grey */

  --accent: #00CD9B;                      /* main colors/accent */
  --accent-bright: #00FFC1;
  --accent-8: rgba(0,205,155,0.08);
  --accent-18: rgba(0,205,155,0.18);
  --accent-24: rgba(0,205,155,0.24);
  --accent-ink: #111318;                  /* text on accent fills */

  --warn: #F5BB2B;                        /* attention/attention 100% */
  --warn-8: rgba(245,187,43,0.08);
  --warn-18: rgba(245,187,43,0.18);

  --error: rgba(255,59,52,0.75);          /* error/error 75% */

  --r-pill: 100px;
  --r-l: 24px;                            /* large containers / modals */
  --r-m: 16px;                            /* mid cards (brief adapts 10 -> 16 for page-level cards) */
  --r-s: 10px;                            /* category cards, inputs */
  --r-xs: 6px;

  --grad-accent: linear-gradient(-53deg, #00CD9B 1.9%, #00FFC1 122%);
  --grad-accent-hover: linear-gradient(-22deg, #00CD9B 1.3%, #00FFC1 35.4%);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-padding-top: calc(16px + var(--safe-t)); -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;
  padding-top:var(--safe-t);
  padding-bottom:calc(76px + var(--safe-b));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img,svg{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-brand); margin:0; font-weight:500; letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:inherit;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; position:relative;}
@media (min-width:900px){ .wrap{padding-left:32px; padding-right:32px;} }

section{padding:56px 0; position:relative;}
@media (min-width:900px){ section{padding:88px 0;} }

/* ============ SITE HEADER — logo lockup, top-left ============ */
.site-header{
  padding:16px 20px 0;
  display:flex; align-items:center;
}
@media (min-width:900px){ .site-header{ padding:20px 32px 0; } }
.logo-lockup{ display:inline-flex; align-items:center; }
.logo-lockup .logo-full{ height:22px; width:auto; }

/* decorative blurred orbs — CSS stand-in for the design system's
   "category card" ellipse decoration (no exportable brand assets here) */
.orb{ position:absolute; border-radius:50%; filter:blur(48px); pointer-events:none; z-index:0; }
.orb-accent{ background:radial-gradient(circle, rgba(0,205,155,0.55), rgba(0,205,155,0) 70%); }
.orb-warm{ background:radial-gradient(circle, rgba(0,255,193,0.35), rgba(0,255,193,0) 70%); }

/* ============ BUTTONS (Buttons node) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--font-ui); font-weight:500; font-size:16px;
  height:48px; padding:0 24px; line-height:1.1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
  position:relative; z-index:1;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background-image: var(--grad-accent);
  color:var(--accent-ink);
  box-shadow: 0 8px 24px -10px rgba(0,205,155,0.45);
}
.btn-primary:hover{ background-image: var(--grad-accent-hover); }
.btn-secondary{
  backdrop-filter: blur(6px);
  background:var(--grey-18);
  color:var(--white);
  border:1px solid var(--grey-18);
}
.btn-secondary:hover{ background:var(--grey-44); }
.btn-block{ width:100%; }
.btn-sm{ height:36px; padding:0 16px; font-size:14px; }

/* ============ SECTION HEADERS ============ */
.sec-head{ margin-bottom:28px; max-width:44ch; position:relative; z-index:1; }
.sec-head h2{ font-size:clamp(24px,5.5vw,32px); font-weight:500; letter-spacing:-0.02em; }
.sec-head p{ margin-top:10px; color:var(--ink-60); font-size:15.5px; }

/* ============ HERO ============ */
.hero{ padding-top:40px; padding-bottom:36px; }
.hero .orb-accent{ width:340px; height:340px; top:-140px; right:10px; opacity:.5; }
#demo .orb-accent{ width:300px; height:300px; top:-120px; right:10px; opacity:.35; }
.advantages .orb-accent{ width:300px; height:300px; bottom:-120px; left:10px; opacity:.3; }
.plans .orb-accent{ width:280px; height:280px; top:-110px; right:10px; opacity:.3; }
#buy .orb-accent{ width:320px; height:320px; bottom:-140px; right:10px; opacity:.32; }
#faq .orb-accent{ width:280px; height:280px; top:-110px; left:10px; opacity:.28; }
.hero-content{ position:relative; z-index:1; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ink-60); margin-bottom:18px;
}
.hero-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.hero h1{
  font-size:clamp(32px, 8vw, 48px);
  line-height:1.05;
  max-width:11ch;
}
.hero-sub{ margin-top:16px; font-size:17px; color:var(--ink-60); max-width:34ch; }
.price-row{ margin-top:28px; display:flex; align-items:baseline; gap:8px; }
.price-num{ font-family:var(--font-brand); font-size:40px; font-weight:500; }
.price-period{ color:var(--ink-45); font-size:15px; }
.hero-actions{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.hero-note{ margin-top:14px; font-size:13.5px; color:var(--ink-45); }

.hero-visual{
  margin-top:32px;
  backdrop-filter: blur(32px);
  background:var(--grey-18);
  border:1px solid var(--grey-18);
  border-radius:var(--r-m);
  padding:18px;
}
.hv-line{ display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.hv-line:last-child{margin-bottom:0;}
.hv-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  background-image:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-ink); font-size:11px; font-weight:600;
}
.hv-avatar.user{ background-image:none; background:var(--grey-44); color:var(--ink-72); }
.hv-bubble{ font-size:14.5px; color:var(--ink-72); padding-top:3px; }
.hv-typing{ display:inline-flex; gap:4px; padding-top:6px; }
.hv-typing span{ width:6px;height:6px;border-radius:50%; background:var(--accent); opacity:.35; animation: blink 1.1s infinite ease-in-out; }
.hv-typing span:nth-child(2){animation-delay:.15s;}
.hv-typing span:nth-child(3){animation-delay:.3s;}
@keyframes blink{ 0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);} }
.hv-answer{ opacity:0; animation: fadein .4s ease forwards; }
@keyframes fadein{ to{opacity:1;} }

/* ============ ACTIVATION GUIDE (phone mockup) ============ */
.guide .orb-accent{ width:300px; height:300px; bottom:-120px; left:10px; opacity:.35; }
.phone{
  position:relative; z-index:1;
  background:#08090C;
  border-radius:34px;
  padding:10px;
  max-width:400px;
  margin:0 auto;
  border:1px solid var(--grey-28);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
}
.phone-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:90px; height:22px; background:#08090C; border-radius:0 0 16px 16px; z-index:3;
}
.phone-screen{
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:min(72vh, 560px);
  min-height:440px;
  border:1px solid var(--grey-18);
}
.phone-topbar{
  padding:16px 16px 12px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--grey-18);
  flex:none;
}
.phone-topbar .av{ width:30px;height:30px;border-radius:50%; background-image:var(--grad-accent); flex:none; }
.phone-topbar .av.av-logo{
  width:36px; height:22px; border-radius:6px;
  background-image:none; background:var(--grey-44);
  display:flex; align-items:center; justify-content:center; padding:4px;
}
.phone-topbar .av.av-logo .logo-icon{ width:100%; height:auto; }
.phone-topbar .tt{ font-size:14px; font-weight:500; }
.phone-topbar .ts{ font-size:12px; color:var(--ink-45); }
.chat-scroll{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:16px; display:flex; flex-direction:column; gap:12px;
  -webkit-overflow-scrolling:touch;
}
.msg{ display:flex; max-width:86%; }
.msg.bot{ align-self:flex-start; justify-content:flex-start; }
.msg.user{ align-self:flex-end; margin-left:auto; justify-content:flex-end; }
.msg .bubble{ padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.45; }
.msg.bot .bubble{ background:var(--grey-28); color:var(--ink); border-bottom-left-radius:4px; }
.msg.user .bubble{ background-image:var(--grad-accent); color:var(--accent-ink); border-bottom-right-radius:4px; }
.typing-row{ align-self:flex-start; }
.typing-bubble{
  background:var(--grey-28); border-radius:16px; border-bottom-left-radius:4px;
  padding:12px 16px; display:inline-flex; align-items:center; gap:4px;
}
.typing-bubble .typing-label{ margin-left:8px; font-style:normal; font-size:13px; color:var(--ink-60); }
.typing-bubble span{ width:6px;height:6px;border-radius:50%; background:var(--ink-45); opacity:.6; animation:blink 1.1s infinite ease-in-out; }
.typing-bubble span:nth-child(2){animation-delay:.15s;}
.typing-bubble span:nth-child(3){animation-delay:.3s;}
.chat-options{
  flex:none; padding:10px 16px 14px;
  border-top:1px solid var(--grey-18);
  display:flex; flex-direction:column; gap:8px;
}
.opt-btn{
  text-align:left;
  border:1.5px solid var(--accent); background:var(--accent-8);
  backdrop-filter: blur(6px);
  border-radius:var(--r-s); padding:11px 14px; font-size:14.5px; color:var(--ink);
  cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.opt-btn:hover{ background:var(--accent-18); }
.opt-btn:active{ transform:scale(0.98); }
.restart-row{ display:flex; justify-content:center; margin-top:18px; position:relative; z-index:1; }
.restart-btn{
  background:none; border:none; color:var(--ink-45); font-size:13.5px;
  cursor:pointer; border-bottom:1px solid var(--ink-24); padding-bottom:1px;
}
.progress-dots{ display:flex; gap:6px; justify-content:center; margin-top:16px; position:relative; z-index:1; }
.progress-dots span{ width:6px; height:6px; border-radius:50%; background:var(--grey-solid); transition:background .2s ease, width .2s ease; }
.progress-dots span.active{ background:var(--accent); width:16px; border-radius:3px; }

/* ============ DEMO — Tab (Fill round) + Chip components, docked inside the phone ============ */
.demo-scenario-bar{
  display:flex; gap:6px; padding:10px 12px;
  border-bottom:1px solid var(--grey-18); flex:none;
}
.demo-tab{
  border:1px solid var(--grey-18); background:var(--grey-18); backdrop-filter:blur(6px);
  border-radius:var(--r-pill); font-size:16px; color:var(--ink-45);
  cursor:pointer; transition:all .15s ease;
  height:36px; padding:0 16px;
}
.demo-scenario-bar .demo-tab{
  /* 4 tabs: size by label length (flex:auto) so the long "Изображения"
     gets more room than "Код" and nothing wraps or clips on 320–375px */
  flex:1 1 auto; text-align:center; white-space:nowrap; line-height:1.15;
  height:auto; min-height:36px; padding:6px 8px; font-size:13px;
}
@media (max-width:360px){
  .demo-scenario-bar{ gap:4px; padding-left:8px; padding-right:8px; }
  .demo-scenario-bar .demo-tab{ padding:6px 6px; font-size:12px; }
}
.demo-tab.active{ background:var(--grey-solid); border-color:var(--grey-solid); color:var(--ink); }
.demo-chip{
  border:1px solid var(--grey-18); background:var(--grey-18); backdrop-filter:blur(6px);
  border-radius:var(--r-s); padding:0 14px; height:36px; font-size:14px; color:var(--ink-72); cursor:pointer;
}
.demo-chip.active{ border:2px solid var(--accent); color:var(--ink); font-weight:500; }

/* demo phone reuses .phone/.phone-screen/.phone-topbar/.chat-scroll/.msg/.bubble
   from the activation guide — same visual language */
.demo-variant-bar[hidden]{ display:none; }
.demo-variant-bar{
  flex:none; padding:10px 12px 14px;
  border-top:1px solid var(--grey-18);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.demo-note{ text-align:center; margin-top:14px; font-size:13px; color:var(--ink-45); position:relative; z-index:1; }

.bubble-image{ padding:0; overflow:hidden; width:min(240px, 100%); }
.bubble-image img{ display:block; width:100%; height:auto; aspect-ratio:6/5; object-fit:cover; }
/* vertical pictures (portraits) — narrower bubble, native 2:3-ish frame, no cropping of the face */
.bubble-image.is-portrait{ width:170px; max-width:100%; }
.bubble-image.is-portrait img{ aspect-ratio:auto; }
/* user message with an attached photo */
.bubble-attach{ padding:4px; width:170px; max-width:100%; }
.bubble-attach img{ display:block; width:100%; height:auto; border-radius:12px; }
.bubble-attach .attach-text{ padding:8px 8px 6px; }
.bubble-image .ph{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent-18), rgba(0,255,193,0.06));
  font-family:var(--font-brand); font-size:14px; color:var(--ink-72); text-align:center; padding:16px;
}
.bubble-image .cap{
  padding:8px 12px; font-size:12px; color:var(--ink-45);
  background:var(--grey-28); border-top:1px solid var(--grey-18);
}
.bubble-code{
  font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:13px;
  background:#0A0B0E; color:#D8D7D2; white-space:pre-wrap; max-width:100%;
}
.bubble-code .err{ background:rgba(255,59,52,0.22); text-decoration: underline wavy var(--error); border-radius:3px; }

/* ============ ADVANTAGES — glass cards ============ */
.adv-grid{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
  position:relative; z-index:1;
}
.adv-grid::-webkit-scrollbar{ display:none; }
.adv-card{ flex:0 0 78%; scroll-snap-align:start; }
@media (min-width:480px){ .adv-card{ flex-basis:62%; } }
@media (min-width:640px){
  .adv-grid{ display:grid; grid-template-columns:1fr 1fr; overflow:visible; scroll-snap-type:none; padding-bottom:0; }
  .adv-card{ flex-basis:auto; }
}
@media (min-width:980px){ .adv-grid{ grid-template-columns:repeat(3,1fr); } }
.adv-card{
  background:var(--grey-18); backdrop-filter:blur(32px);
  border:1px solid var(--grey-18); border-radius:var(--r-m);
  padding:20px;
}
.adv-card h3{ font-size:17px; font-weight:500; margin-bottom:8px; font-family:var(--font-ui); }
.adv-card p{ font-size:14.5px; color:var(--ink-60); }

/* comparison table — ONE shared grid for all cells (not a grid per row),
   so column tracks are computed together and can't drift row to row */
.compare{
  margin-top:28px; border:1px solid var(--grey-18); border-radius:var(--r-m);
  overflow:hidden; background:var(--grey-18); position:relative; z-index:1;
  display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr;
}
.compare > div{
  padding:13px 10px; font-size:13.5px; min-width:0;
  display:flex; align-items:center;
}
.compare > div:nth-child(3n+2), .compare > div:nth-child(3n+3){
  justify-content:center; text-align:center;
}
.compare > div:nth-child(n+4){ border-top:1px solid var(--grey-18); }
.compare .head{ background:var(--grey-28); font-weight:500; color:var(--ink-45); font-size:12.5px; }
.compare .feat{ color:var(--ink-72); }
.compare .yes{ color:var(--accent); font-weight:500; }
.compare .lim{ color:var(--ink-45); }
.compare .plus-col{ background:var(--accent-8); }

/* ============ PURCHASE CARD ============ */
.purchase-card{
  background-image: var(--grad-accent);
  color:var(--accent-ink);
  border-radius:var(--r-l);
  padding:30px 24px;
  position:relative; z-index:1; overflow:hidden;
}
.purchase-card .tag{ font-size:14px; opacity:.7; margin-bottom:6px; }
.purchase-card h3{ font-size:26px; font-weight:500; margin-bottom:10px; max-width:22ch; }
.purchase-card .desc{ font-size:14.5px; opacity:.8; max-width:38ch; margin-bottom:22px; }
.purchase-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:22px; }
.purchase-price .n{ font-family:var(--font-brand); font-size:36px; font-weight:500; }
.purchase-price .p{ opacity:.65; font-size:14px; }
.purchase-card .btn-primary{ background:#111318; background-image:none; color:var(--white); box-shadow:none; }
.purchase-card .btn-primary:hover{ background:#1c1f26; }
.purchase-foot{ margin-top:14px; font-size:12.5px; opacity:.65; }

/* ============ OTHER PLANS ============ */
.plans-strip{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
  position:relative; z-index:1;
}
.plans-strip::-webkit-scrollbar{ display:none; }
.plan-mini{ flex:0 0 72%; scroll-snap-align:start; }
@media (min-width:480px){ .plan-mini{ flex-basis:56%; } }
@media (min-width:640px){
  .plans-strip{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; scroll-snap-type:none; padding-bottom:0; }
  .plan-mini{ flex-basis:auto; }
}
.plan-mini{ border:1px solid var(--grey-18); border-radius:var(--r-m); padding:16px; background:var(--grey-18); backdrop-filter:blur(32px); }
.plan-mini .pn{ font-weight:500; font-size:14.5px; margin-bottom:4px; }
.plan-mini .pp{ color:var(--ink-45); font-size:13px; margin-bottom:8px; }
.plan-mini .pd{ font-size:13px; color:var(--ink-60); }
.plans-link{ display:inline-block; margin-top:18px; font-size:14px; color:var(--accent); border-bottom:1px solid var(--accent-24); position:relative; z-index:1; }

/* ============ FAQ — Accordion component ============ */
.faq-item{ border-top:1px solid var(--grey-56); position:relative; z-index:1; }
.faq-item:last-child{ border-bottom:1px solid var(--grey-56); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:18px 4px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:17px; font-weight:500; color:var(--ink); font-family:var(--font-ui);
}
.faq-q .plus{ flex:none; width:18px; height:18px; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--ink-45); border-radius:2px; }
.faq-q .plus::before{ width:14px; height:1.6px; top:8.2px; left:2px; }
.faq-q .plus::after{ width:1.6px; height:14px; top:2px; left:8.2px; transition:transform .2s ease; }
.faq-item.open .plus::after{ transform:rotate(90deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 4px 18px; font-size:15px; color:var(--ink-72); }

/* ============ FINAL CTA ============ */
.final-cta{
  text-align:center; background:var(--grey-18); backdrop-filter:blur(32px);
  border:1px solid var(--grey-18);
  border-radius:var(--r-l); padding:48px 24px;
  position:relative; overflow:hidden; z-index:1;
}
.final-cta .orb-accent{ width:280px; height:280px; top:-100px; left:50%; transform:translateX(-50%); opacity:.4; }
.final-cta h2{ font-size:clamp(24px,6vw,32px); font-weight:500; color:var(--ink); max-width:16ch; margin:0 auto 12px; position:relative; z-index:1; }
.final-cta .p{ font-family:var(--font-brand); font-size:22px; margin-bottom:22px; color:var(--ink-72); position:relative; z-index:1; }
.final-cta .btn-primary{ position:relative; z-index:1; }

/* Orbs are fixed-px circles, so on a wide desktop viewport they read as a
   tiny corner dot instead of an ambient glow — scale them up on desktop.
   Horizontal offsets stay non-negative (orb fully inside the viewport
   width) at every breakpoint — only vertical bleed is allowed, since that's
   safe (uniform background) and never causes horizontal overflow/scroll. */
@media (min-width:900px){
  .hero .orb-accent{ width:560px; height:560px; top:-220px; right:20px; }
  .guide .orb-accent{ width:520px; height:520px; bottom:-200px; left:20px; }
  #demo .orb-accent{ width:520px; height:520px; top:-200px; right:20px; }
  .advantages .orb-accent{ width:520px; height:520px; bottom:-200px; left:20px; }
  .plans .orb-accent{ width:480px; height:480px; top:-190px; right:20px; }
  #buy .orb-accent{ width:560px; height:560px; bottom:-220px; right:20px; }
  #faq .orb-accent{ width:480px; height:480px; top:-190px; left:20px; }
  .final-cta .orb-accent{ width:440px; height:440px; top:-160px; }
}

/* ============ STICKY BAR — always fixed, no show/hide ============ */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  width:100%; max-width:100vw; box-sizing:border-box; overflow:hidden;
  background:rgba(17,19,24,0.85);
  backdrop-filter: blur(24px);
  border-top:1px solid var(--grey-18);
  padding:10px 12px calc(10px + var(--safe-b));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  /* forces its own compositing layer so iOS Safari doesn't
     flicker/detach it while the address bar shows/hides on scroll */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
.sticky-bar .sb-price{ min-width:0; flex:1 1 auto; overflow:hidden; }
.sticky-bar .sb-price-main{
  display:block; font-size:14px; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-bar .sb-price-note{
  display:block; font-weight:400; color:var(--ink-45); font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-bar .btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:400px){
  .sticky-bar{ padding-left:10px; padding-right:10px; }
  .sticky-bar .sb-price-note{ display:none; }
  .sticky-bar .sb-price-main{ font-size:13px; }
  .sticky-bar .btn-sm{ padding:0 12px; font-size:13px; }
}
@media (max-width:340px){
  .sticky-bar{ justify-content:center; }
  .sticky-bar .sb-price{ display:none; }
}

footer.site-foot{ padding:40px 0 calc(40px + var(--safe-b)); position:relative; z-index:1; }
.foot-legal{ font-size:12px; color:var(--ink-45); line-height:1.6; max-width:64ch; }
.foot-legal + .foot-legal{ margin-top:8px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.overflow-x-guard{ max-width:100vw; overflow-x:hidden; }

/* ============ DESKTOP BUTTONS — content-width instead of full-width ============
   Mobile (<900px) is untouched: .btn-block stays 100% wide, hero buttons stay stacked. */
@media (min-width:900px){
  .btn-block{ width:auto; padding:0 32px; }
  .hero-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
}

/* ============ DEMO — "Игры": game answer bubble ============ */
.msg.msg-wide{ max-width:92%; }
.bubble-game{ padding:4px; width:250px; max-width:100%; }
.game-preview{
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer;
  background:#0c1730; height:389px; /* real height is set by JS from the width */
}
.game-preview iframe{
  position:absolute; top:0; left:0; border:0; display:block;
  transform-origin:0 0; pointer-events:none; /* preview only — tap opens full screen */
}
.game-play{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background-image:var(--grad-accent); color:var(--accent-ink);
  font-weight:600; font-size:14px; white-space:nowrap;
  padding:9px 18px; border-radius:var(--r-pill);
  box-shadow:0 6px 18px -6px rgba(0,205,155,.55);
}
.game-preview:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.game-cap{ padding:8px 8px 4px; font-size:13.5px; }

/* ============ GAME OVERLAY — full-screen player ============ */
.game-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column;
  background:#0c1730; overscroll-behavior:contain;
}
.game-overlay[hidden]{ display:none; }
.go-bar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(8px + var(--safe-t)) 12px 8px 16px;
  background:var(--bg); border-bottom:1px solid var(--grey-18);
}
.go-title{ font-size:14px; font-weight:500; color:var(--ink-72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.go-close{
  flex:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--grey-28); background:var(--grey-28); color:var(--ink);
  font-size:16px; cursor:pointer;
}
.go-close:hover{ background:var(--grey-44); }
.go-frame{ flex:1; min-height:0; }
.go-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ============ HERO SHOWCASE «AI-студия 2026» — desktop only (>=1024px) ============
   Below 1024px the block is display:none (its lazy images never load) and the
   hero layout is exactly as before. */
.hero-showcase{ display:none; }

@media (min-width:1024px){
  .hero{ padding-top:56px; padding-bottom:64px; }
  .hero-content{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:56px; align-items:center;
  }
  /* the small mini-chat under the buttons is replaced by the showcase on desktop */
  .hero-visual{ display:none; }
  /* 11ch keeps the title tidy on phones; next to the showcase it made a 4-line column */
  .hero h1{ max-width:none; }
  .hero-showcase{ display:block; position:relative; }
}

.sc-glow{
  position:absolute; inset:12% 10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 62% 38%, rgba(0,205,155,.38), transparent 70%),
    radial-gradient(50% 50% at 30% 72%, rgba(0,255,193,.16), transparent 70%);
  filter:blur(44px);
}
.sc-window{
  position:relative; z-index:1; overflow:hidden; border-radius:24px;
  background:rgba(24,26,33,.72); border:1px solid rgba(252,252,252,.08);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
.sc-bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--grey-18); }
.sc-dots{ display:inline-flex; gap:6px; }
.sc-dots i{ width:10px; height:10px; border-radius:50%; background:var(--grey-solid); }
.sc-bar-title{ font-size:13.5px; font-weight:500; color:var(--ink-72); }
.sc-status{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-45); padding:5px 11px; border-radius:var(--r-pill); background:var(--grey-28);
  transition:color .3s ease;
}
.sc-status i{ width:7px; height:7px; border-radius:50%; background:var(--warn); animation:sc-pulse 1.1s ease-in-out infinite; }
.sc-status.is-done{ color:var(--accent); }
.sc-status.is-done i{ background:var(--accent); animation:none; }

.sc-stage{ position:relative; aspect-ratio:16/10.5; margin:14px; border-radius:16px; overflow:hidden; background:#0a0b0e; }
.sc-scene{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
.sc-scene.is-active{ opacity:1; visibility:visible; transition:opacity .5s ease; }
/* reset a scene to "not generated" without playing the animation backwards */
.sc-instant *{ transition:none !important; }
/* no point animating the scan line of scenes nobody sees */
.sc-scene:not(.is-active) .sc-scan{ animation:none; }

/* image / game: "diffusion" reveal — blurry & desaturated, then sharp */
.sc-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(22px) saturate(.5) brightness(.8); transform:scale(1.12);
  transition:filter 1.3s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.is-revealed .sc-img{ filter:none; transform:scale(1); }
.sc-scan{
  position:absolute; left:0; right:0; top:-45%; height:45%; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,255,193,0) 0%, rgba(0,255,193,.16) 80%, rgba(0,255,193,.65) 99%, rgba(0,255,193,0) 100%);
  animation:sc-scan 1.5s linear infinite; transition:opacity .4s ease;
}
.is-revealed .sc-scan{ opacity:0; }
.sc-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85); opacity:0; visibility:hidden;
  border:0; cursor:pointer; font-family:inherit;
  background-image:var(--grad-accent); color:var(--accent-ink); font-weight:600; font-size:15px;
  padding:12px 24px; border-radius:var(--r-pill); box-shadow:0 10px 30px -8px rgba(0,205,155,.6);
  transition:opacity .5s ease .7s, transform .5s ease .7s, visibility 0s linear .7s;
}
.is-revealed .sc-play{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.is-revealed .sc-play:hover{ transform:translate(-50%,-50%) scale(1.05); transition-delay:0s; }
.sc-play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* photo edit: full-frame before/after wipe (left -> right) */
.sc-edit-frame{ position:absolute; inset:0; overflow:hidden; }
.sc-before, .sc-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sc-after{ clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.6,0,.2,1); }
.is-revealed .sc-after{ clip-path:inset(0 0 0 0); }
.sc-divider{
  position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--accent-bright);
  box-shadow:0 0 16px var(--accent); transition:left 1.5s cubic-bezier(.6,0,.2,1), opacity .3s ease 1.5s;
}
.is-revealed .sc-divider{ left:100%; opacity:0; }
.sc-tag{
  position:absolute; top:10px; font-size:11px; padding:3px 9px; border-radius:var(--r-pill);
  background:rgba(17,19,24,.72); color:var(--ink-72); transition:opacity .4s ease;
}
.sc-tag-l{ left:10px; }
.sc-tag-r{ right:10px; opacity:0; }
.is-revealed .sc-tag-l{ opacity:0; }
.is-revealed .sc-tag-r{ opacity:1; transition-delay:1.2s; }

/* code: lines appear one by one, the fixed line lights up */
.sc-code{
  position:absolute; inset:0; padding:18px; overflow:hidden; background:#0a0b0e; color:#d8d7d2;
  font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:clamp(11px, 1.02vw, 13px); line-height:1.8;
}
.sc-code .ln{
  white-space:pre; position:relative; border-radius:6px; padding-left:4px;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease, background-color .4s ease, box-shadow .4s ease;
  transition-delay:calc(var(--i) * 90ms), calc(var(--i) * 90ms), 1s, 1s;
}
.sc-code .ln b{ display:inline-block; width:24px; color:var(--ink-24); font-weight:400; }
.is-revealed .sc-code .ln{ opacity:1; transform:none; }
.is-revealed .sc-code .ln.fix{ background-color:rgba(0,205,155,.14); box-shadow:inset 3px 0 0 var(--accent); }
.sc-code .ln em{
  font-style:normal; font-family:var(--font-ui); font-size:11px; color:var(--accent);
  margin-left:12px; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-18);
  opacity:0; transition:opacity .4s ease 1.1s;
}
.is-revealed .sc-code .ln em{ opacity:1; }
.sc-code .k{ color:#8ef5d6; } .sc-code .f{ color:#f5d38e; } .sc-code .n{ color:#f59e8e; }
.sc-code-note{
  margin-top:12px; max-width:46ch; font-family:var(--font-ui); font-size:12.5px; line-height:1.5; color:var(--ink-60);
  opacity:0; transition:opacity .4s ease 1.3s;
}
.is-revealed .sc-code-note{ opacity:1; }

/* data: file -> chart -> insights */
.sc-data{
  position:absolute; inset:0; padding:18px 20px 22px;
  display:grid; grid-template-columns:1fr 1.15fr; grid-template-rows:auto 1fr; gap:14px 20px;
  background:radial-gradient(80% 70% at 20% 100%, rgba(0,205,155,.12), transparent 70%), #0d0f13;
}
.sc-file{
  grid-column:1 / -1; justify-self:start; display:flex; align-items:center; gap:12px;
  padding:9px 14px 9px 10px; border-radius:12px; background:var(--grey-28); border:1px solid var(--grey-18);
}
.sc-file-ic{
  width:32px; height:38px; border-radius:6px; display:grid; place-items:center;
  background:linear-gradient(160deg,#ff7070,#c83a3a); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.04em;
}
.sc-file strong{ display:block; font-size:13px; font-weight:500; }
.sc-file small{ display:block; font-size:11.5px; color:var(--ink-45); }
.sc-chart{
  position:relative; display:flex; align-items:flex-end; gap:14px; min-height:0;
  padding:6px 4px 22px; border-bottom:1px solid var(--grey-28);
}
.sc-chart .bar{ flex:1; height:100%; position:relative; display:flex; align-items:flex-end; }
.sc-chart .bar i{
  display:block; width:100%; height:0; border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg, rgba(0,255,193,.45), rgba(0,205,155,.14));
  transition:height .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 140ms);
}
.sc-chart .bar.hi i{ background-image:var(--grad-accent); }
.is-revealed .sc-chart .bar i{ height:var(--h); }
.sc-chart .bar span{ position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:11px; color:var(--ink-45); }
.sc-insights{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:0; }
.sc-insights li{
  font-size:12.5px; line-height:1.35; color:var(--ink-72);
  padding:8px 11px; border-radius:12px; background:var(--grey-18); border:1px solid var(--grey-18);
  opacity:0; transform:translateX(10px);
  transition:opacity .4s ease, transform .4s ease; transition-delay:calc(.5s + var(--i) * 160ms);
}
.sc-insights li b{ color:var(--accent); font-weight:600; }
.is-revealed .sc-insights li{ opacity:1; transform:none; }

/* prompt bar — fixed height so typing never shifts the layout */
.sc-prompt{
  display:flex; align-items:center; gap:10px; height:60px;
  margin:0 14px 14px; padding:0 10px 0 16px; border-radius:16px;
  background:var(--grey-28); border:1px solid var(--grey-18);
}
.sc-attach{ flex:none; width:32px; height:32px; border-radius:8px; object-fit:cover; border:1px solid var(--grey-44); }
.sc-attach[hidden]{ display:none; }
.sc-prompt-text{
  flex:1; min-width:0; font-size:13.5px; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-caret{
  display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-2px;
  background:var(--accent); animation:sc-blink 1s steps(1) infinite;
}
.hero-showcase:not(.is-typing) .sc-caret{ opacity:0; animation:none; }
.sc-send{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--grey-44); color:var(--ink-45); font-weight:700; transition:background .3s ease, color .3s ease;
}
.hero-showcase:not(.is-typing) .sc-send{ background-image:var(--grad-accent); color:var(--accent-ink); }

/* floating glass cards around the window */
.sc-float{
  position:absolute; z-index:2; max-width:230px; padding:12px 16px; border-radius:16px; pointer-events:none;
  background:rgba(32,35,43,.8); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65);
  opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease; /* JS swaps text after 300ms */
  animation:sc-bob 6s ease-in-out infinite;
}
.sc-float.is-in{ opacity:1; transform:none; }
.sc-float strong{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.sc-float small{ display:block; margin-top:2px; font-size:12px; color:var(--ink-45); }
.sc-float-a strong::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:8px; vertical-align:1px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);
}
/* card A position per scene (data-pos), chosen so it never covers the result */
.sc-float-a,
.sc-float-a[data-pos="tl"]{ top:72px; left:-30px; right:auto; }  /* bleeds into the grid gap, never off-page */
.sc-float-a[data-pos="tr"]{ top:72px; right:-14px; left:auto; }
.sc-float-a[data-pos="ml"]{ top:44%; left:-30px; right:auto; }
.sc-float-b,
.sc-float-b[data-pos="br"]{ right:-14px; left:auto; bottom:152px; animation-delay:-3s; } /* sits above the prompt bar */
.sc-float-b[data-pos="bl"]{ left:-30px; right:auto; }
.sc-float-b[data-pos="tr"]{ top:58px; bottom:auto; right:-14px; left:auto; } /* below the window title bar */
/* on narrower desktops (window smaller than full size) card B would cover the
   last insight in the «Аналитика» scene — the result matters more, hide it there */
@media (max-width:1239px){
  .hero-showcase[data-scene="data"] .sc-float-b{ visibility:hidden; }
} /* stays inside the 32px page padding */

/* scene switcher with story-style progress */
.sc-tabs{ position:relative; z-index:1; display:flex; gap:8px; margin-top:16px; }
.sc-tab{
  flex:1 1 auto; position:relative; overflow:hidden; height:38px; padding:0 10px;
  border-radius:var(--r-pill); border:1px solid var(--grey-18); background:var(--grey-18);
  color:var(--ink-45); font-size:13px; white-space:nowrap; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.sc-tab:hover{ color:var(--ink-72); }
.sc-tab.is-active{ color:var(--ink); border-color:var(--grey-44); }
.sc-tab-label{ position:relative; z-index:1; }
.sc-tab-fill{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
  transform-origin:left center; transform:scaleX(0);
}
.sc-note{ position:relative; z-index:1; margin-top:12px; text-align:center; font-size:12px; color:var(--ink-45); }

@keyframes sc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes sc-blink{ 50%{ opacity:0; } }
@keyframes sc-scan{ to{ top:100%; } }
@keyframes sc-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }