/* Scoop POS — shared stylesheet
   Flat, single-accent, corporate. No gradients, blur, or decorative shadows. */

:root{
  color-scheme:dark;
  --ink:#E8EEF4;
  --muted:#93A1B1;
  --line:#233044;
  --surface:#141E2B;
  --brand:#14B8A6;
  --brand-dark:#0D9488;
  --glass:rgba(255,255,255,.04);
  --glass-line:rgba(255,255,255,.10);
  --app-bg:#0B121B;
  --app-card:#141E2B;
  --app-line:#233044;
  --app-text:#E8EEF4;
  --app-muted:#93A1B1;
  --app-teal:#14B8A6;
  --radius:12px;
  --maxw:1120px;
  --nav-h:60px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ margin:0; background:var(--app-bg); color:var(--ink); font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.01em; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(700px 520px at 100% 28%,rgba(59,130,246,.10),transparent 60%),radial-gradient(640px 520px at 0% 72%,rgba(20,184,166,.10),transparent 60%); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#06201C; padding:10px 16px; font-size:14px; }
.skip-link:focus{ left:0; }

/* ---------- Nav ---------- */
.nav{ position:fixed; top:12px; left:0; right:0; z-index:100; padding:0 12px; pointer-events:none; }
.nav__inner{ position:relative; pointer-events:auto; display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); padding:0 14px 0 18px; max-width:var(--maxw); background:rgba(15,26,39,.72); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.08) inset; color:var(--app-text); }
.nav .brand{ color:#fff; }
.brand{ white-space:nowrap; display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:0.04em; }
.brand__mark{ width:28px; height:28px; border-radius:8px; background:var(--brand); color:#06201C; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand__mark svg{ width:15px; height:15px; }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{ font-size:14px; color:var(--app-muted); transition:color .15s; }
.nav__links a:hover{ color:#fff; }
.nav__links a.is-active{ color:#fff; font-weight:600; }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__toggle{ display:none; background:none; border:0; padding:6px; color:#fff; }
.nav__toggle svg{ width:22px; height:22px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:600; white-space:nowrap; transition:background .15s, border-color .15s; }
.btn--primary{ background:var(--brand); color:#06201C; }
.btn--primary:hover{ background:#2DD4BF; }
.btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:var(--ink); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); }
.btn--light{ background:var(--brand); color:#06201C; }
.btn--light:hover{ background:#2DD4BF; }
.btn--sm{ padding:8px 14px; }
.nav .btn--primary{ background:var(--app-teal); color:#06201C; }
.nav .btn--primary:hover{ background:#2DD4BF; }
.btn--block{ width:100%; }

/* ---------- Sections ---------- */
section{ padding:72px 0; }
.alt{ background:rgba(255,255,255,.025); border-block:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:28px; line-height:1.25; }
.section-head p{ color:var(--muted); margin-top:10px; }
.eyebrow{ display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--brand); }
.teaser-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.teaser-head .section-head{ margin-bottom:0; }
.teaser-link{ font-size:14px; font-weight:600; color:var(--brand); }
.teaser-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Heroes ---------- */
.hero,.page-hero{ background:var(--surface); border-bottom:1px solid var(--line); }
.hero{ position:relative; overflow:hidden; padding:calc(72px + var(--nav-h) + 12px) 0 110px; background:none; border-bottom:0; color:var(--app-text); }
.hero__bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 480px at 85% 0%,rgba(20,184,166,.14),transparent 60%),linear-gradient(160deg,#0F1A27 0%,var(--app-bg) 60%); -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); }
.hero__bg i{ position:absolute; display:block; border-radius:50%; }
.hero__bg .orb{ filter:blur(70px); opacity:.34; }
.hero__bg .o1{ width:420px; height:420px; left:-90px; top:40px; background:var(--app-teal); }
.hero__bg .o2{ width:380px; height:380px; right:-60px; top:-70px; background:#3B82F6; opacity:.26; }
.hero__bg .o3{ width:320px; height:320px; right:22%; bottom:-140px; background:#0D9488; opacity:.3; }
.hero__bg .bub{ background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); animation:bubble 9s ease-in-out infinite; }
.hero__bg .b1{ width:200px; height:200px; left:6%; top:16%; }
.hero__bg .b2{ width:110px; height:110px; left:40%; top:10%; animation-delay:-3s; }
.hero__bg .b3{ width:260px; height:260px; right:4%; top:30%; animation-delay:-5s; }
.hero__bg .b4{ width:90px; height:90px; left:30%; bottom:8%; animation-delay:-2s; }
.hero__bg .b5{ width:150px; height:150px; right:30%; bottom:14%; animation-delay:-6s; }
@keyframes bubble{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
.hero__grid{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.hero h1{ color:#fff; font-size:clamp(32px,4.2vw,44px); line-height:1.15; letter-spacing:-0.02em; max-width:18ch; margin-bottom:16px; }
.hero__sub{ font-size:18px; color:var(--app-muted); max-width:46ch; margin-bottom:28px; }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.hero__note{ font-size:14px; color:var(--app-muted); }
.hero .btn--primary{ background:var(--app-teal); color:#06201C; }
.hero .btn--primary:hover{ background:#2DD4BF; }
.hero .btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:var(--app-text); }
.hero .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); }
.hero__img{ position:relative; z-index:1; width:100%; max-width:620px; margin-inline:auto; animation:float 7s ease-in-out infinite; filter:drop-shadow(0 28px 50px rgba(0,0,0,.5)); }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.stat b{ display:block; font-size:18px; font-weight:600; }
.stat span{ font-size:14px; color:var(--muted); }

.page-hero{ position:relative; overflow:hidden; padding:calc(48px + var(--nav-h) + 12px) 0 44px; background:radial-gradient(620px 320px at 92% 0%,rgba(20,184,166,.20),transparent 62%),radial-gradient(520px 300px at 68% 110%,rgba(59,130,246,.16),transparent 62%),linear-gradient(160deg,#0F1A27 0%,var(--app-bg) 60%); }
.page-hero::before,.page-hero::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); animation:bubble 9s ease-in-out infinite; }
.page-hero::before{ width:210px; height:210px; right:7%; top:70px; }
.page-hero::after{ width:110px; height:110px; right:26%; bottom:-26px; animation-delay:-4s; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero__crumb{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.page-hero__crumb a{ color:var(--brand); font-weight:600; }
.page-hero__crumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.page-hero h1{ font-size:clamp(28px,3.6vw,38px); line-height:1.2; letter-spacing:-0.02em; max-width:24ch; }
.page-hero p:not(.page-hero__crumb){ color:var(--muted); font-size:18px; max-width:52ch; margin-top:12px; }

/* ---------- Split rows (product, how it works, download) ---------- */
.split,.step{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split + .split,.step + .step{ margin-top:72px; }
.split--rev .split__media,.step--rev .step__media{ order:2; }
.split__media,.step__media{ aspect-ratio:4/3; border:1px solid var(--glass-line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:0 18px 44px rgba(0,0,0,.35); }
.split__media img,.step__media img{ width:100%; height:100%; object-fit:cover; }
.split__copy h3,.step__copy h3{ font-size:24px; line-height:1.3; margin-bottom:12px; }
.split__copy p,.step__copy p{ color:var(--muted); max-width:54ch; }
.split__copy p{ margin-bottom:20px; }
.step__num{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-bottom:14px; border:1px solid var(--brand); background:rgba(20,184,166,.12); border-radius:50%; color:var(--brand); font-size:14px; font-weight:600; }

.split__list{ display:flex; flex-direction:column; gap:10px; }
.split__list li,.price li{ position:relative; padding-left:24px; font-size:15px; }
.split__list li::before,.price li::before{ content:""; position:absolute; left:0; top:.4em; width:14px; height:14px; background:var(--brand); -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat; }

/* ---------- Feature columns ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.feat{ padding:24px; background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.feat h3{ font-size:18px; margin-bottom:8px; }
.feat p{ color:var(--muted); font-size:15px; }

/* ---------- Reviews ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.review{ display:flex; flex-direction:column; gap:14px; padding:24px; background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.review__stars{ font-size:14px; letter-spacing:2px; color:var(--brand); }
.review__stars span{ opacity:.25; }
.review__quote{ flex:1; }
.review__name{ font-size:14px; font-weight:600; }
.review__role{ font-size:14px; color:var(--muted); }

/* ---------- Product tour ---------- */
.tour__tabs{ display:flex; gap:24px; margin-bottom:24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tour__tab{ background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:10px 0; font-size:14px; font-weight:600; color:var(--muted); transition:color .15s; }
.tour__tab:hover{ color:var(--ink); }
.tour__tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brand); }
.device{ border:1px solid var(--glass-line); border-radius:16px; overflow:hidden; background:var(--app-card); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.device__bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.device__dots{ display:flex; gap:6px; flex-shrink:0; }
.device__dots i{ display:block; width:8px; height:8px; border-radius:50%; background:var(--line); }
.device__url{ flex:1; display:flex; align-items:center; gap:7px; max-width:340px; margin-inline:auto; padding:5px 12px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--radius); font-size:12px; color:var(--muted); }
.device__url svg{ width:12px; height:12px; flex-shrink:0; }
.device__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device__live{ display:flex; align-items:center; gap:6px; flex-shrink:0; font-size:12px; font-weight:600; color:var(--brand); }
.device__live i{ display:block; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.tour-panel{ display:none; }
.tour-panel.is-active{ display:block; animation:fadein .2s ease; }
.tour-panel img{ width:100%; height:auto; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }

/* ---------- Downloads ---------- */
.plat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--glass-line); border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.3); }
.plat{ background:var(--app-card); padding:24px 20px; }
.plat__icon{ width:28px; height:28px; margin-bottom:14px; color:var(--ink); }
.plat__icon svg{ width:100%; height:100%; }
.plat h3{ font-size:16px; }
.plat > span{ display:block; margin:2px 0 16px; font-size:14px; color:var(--muted); }
.plat button,.plat a.dl-btn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:9px 12px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:10px; font-size:14px; font-weight:600; color:var(--brand); transition:background .15s, border-color .15s; }
.plat button svg,.plat a.dl-btn svg{ width:13px; height:13px; }
.plat a.dl-btn:hover{ background:var(--surface); border-color:var(--brand); }
.plat button:disabled{ background:var(--surface); color:var(--muted); cursor:not-allowed; }
.plat__status{ min-height:20px; margin-top:8px; font-size:13px; color:var(--brand); }
.help{ margin-top:20px; font-size:15px; color:var(--muted); }
.help a{ color:var(--brand); font-weight:600; }
.help a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.price{ display:flex; flex-direction:column; padding:28px 24px; background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.price--brand{ border-color:var(--brand); background:linear-gradient(160deg,rgba(20,184,166,.14),rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px var(--brand), 0 18px 50px rgba(20,184,166,.12); }
.price__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.price h3{ font-size:18px; }
.price__tag{ font-size:13px; font-weight:600; color:var(--brand); }
.price__amt{ margin:16px 0 4px; font-size:40px; font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.price__amt span{ font-size:15px; font-weight:400; letter-spacing:0; color:var(--muted); }
.price__desc{ margin-bottom:20px; font-size:15px; color:var(--muted); }
.price ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; flex:1; }
.price-note{ max-width:820px; margin-top:32px; padding:4px 0 4px 16px; border-left:3px solid var(--brand); font-size:15px; color:var(--muted); }
.price-note b{ color:var(--ink); }

/* ---------- Closing band ---------- */
.cta-section{ padding:0 0 72px; }
.alt + .cta-section{ padding-top:72px; }
.cta-banner{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:40px; background:linear-gradient(135deg,rgba(20,184,166,.30),rgba(59,130,246,.14)),var(--app-card); border:1px solid rgba(255,255,255,.14); border-radius:20px; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.cta-banner::before{ content:""; position:absolute; width:190px; height:190px; right:-40px; top:-70px; border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); pointer-events:none; }
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ font-size:24px; line-height:1.3; max-width:26ch; }
.cta-banner p{ margin-top:8px; font-size:15px; color:rgba(255,255,255,.82); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; }
.faq-cat{ margin-top:40px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; color:var(--brand); }
.faq-cat:first-child{ margin-top:0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.plus{ position:relative; width:16px; height:16px; flex-shrink:0; }
.plus::before,.plus::after{ content:""; position:absolute; background:var(--muted); transition:transform .2s; }
.plus::before{ left:0; top:7px; width:100%; height:2px; }
.plus::after{ left:7px; top:0; width:2px; height:100%; }
.faq-item[open] .plus::after{ transform:rotate(90deg); }
.faq-item p{ max-width:64ch; padding-bottom:20px; font-size:15px; color:var(--muted); }

/* ---------- Footer ---------- */
footer{ padding:56px 0 28px; border-top:1px solid var(--line); background:rgba(0,0,0,.2); }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; margin-bottom:40px; }
.foot-brand p{ max-width:34ch; margin-top:12px; font-size:14px; color:var(--muted); }
.foot-col h4{ margin-bottom:12px; font-size:14px; }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ font-size:14px; color:var(--muted); transition:color .15s; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  section{ padding:56px 0; }
  .cta-section{ padding-bottom:56px; }
  .hero__grid,.split,.step{ grid-template-columns:1fr; gap:32px; }
  .split--rev .split__media,.step--rev .step__media{ order:0; }
  .feat-grid,.review-grid,.price-grid{ grid-template-columns:1fr; }
  .plat-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:90; flex-direction:column; align-items:stretch; gap:0;
    padding:6px 20px; background:#101B28; border:1px solid var(--app-line); border-radius:16px; box-shadow:0 14px 36px rgba(0,0,0,.4);
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s .2s;
  }
  .nav__links.is-open{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--app-line); font-size:16px; }
  .nav__links a:last-child{ border-bottom:0; }
  .hero__bg .b1{ width:130px; height:130px; }
  .hero__bg .b3{ width:170px; height:170px; }
  .hero__bg .b2,.hero__bg .b5{ display:none; }
  .stat-row{ grid-template-columns:1fr; gap:16px; }
  .cta-banner{ padding:28px 24px; }
  .device__url{ display:none; }
}
@media (max-width:480px){
  .nav__actions .btn{ display:none; }
}

/* ---------- Installation guide (YouTube players) ---------- */
.step__media--video{ aspect-ratio:16/9; background:#000; }
.yt{ width:100%; height:100%; background:#0B121B center/cover no-repeat; }
.yt iframe{ display:block; width:100%; height:100%; border:0; }
.step__copy .split__list{ margin-top:16px; }

/* ---------- Dark / light mode showcase (home) ---------- */
.section-head--center{ margin-inline:auto; text-align:center; margin-bottom:28px; }
.mode-toggle{ display:flex; width:max-content; margin:0 auto 28px; padding:4px; gap:4px; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.mode-toggle button{ display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border:0; border-radius:999px; background:none; font-size:14px; font-weight:600; color:var(--muted); transition:background .15s, color .15s; }
.mode-toggle button svg{ width:16px; height:16px; }
.mode-toggle button:hover{ color:var(--ink); }
.mode-toggle button[aria-pressed="true"]{ background:var(--brand); color:#06201C; }
.device--lg{ max-width:1040px; margin-inline:auto; }
.device--lg .device__screen{ aspect-ratio:16/10; background:var(--surface); }
.mode-panel{ display:none; height:100%; }
.mode-panel.is-active{ display:block; animation:fadein .2s ease; }
.mode-panel img{ width:100%; height:100%; object-fit:cover; object-position:top; }

/* ---------- How-it-works flow (product page) ---------- */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:none; }
.flow__item{ padding:24px 20px; background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.flow__item h3{ font-size:17px; line-height:1.3; margin-bottom:8px; }
.flow__item p{ font-size:14px; color:var(--muted); }
@media (max-width:1000px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .flow{ grid-template-columns:1fr; } }

/* ---------- Hero visual: glow, floating app chips, pill, gradient headline ---------- */
.pill{ display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; padding:6px 14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:999px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:13px; font-weight:600; color:var(--app-muted); }
.pill i{ width:7px; height:7px; border-radius:50%; background:var(--app-teal); box-shadow:0 0 0 4px rgba(20,184,166,.2); }
.hero h1 .grad{ color:#fff; }
.hero h1 .smart{ color:var(--app-teal); }
.hero__visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero__glow{ position:absolute; width:86%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(20,184,166,.45),rgba(59,130,246,.18) 55%,transparent 72%); filter:blur(34px); }
.chip{ position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:rgba(15,26,39,.55); border:1px solid rgba(255,255,255,.10); border-radius:999px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:bubble 8s ease-in-out infinite; }
.chip > span:last-child{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.chip b{ font-size:12px; font-weight:600; color:#fff; }
.chip small{ font-size:11px; color:var(--app-muted); }
.chip__ic{ display:grid; place-items:center; width:18px; height:18px; flex-shrink:0; border-radius:50%; background:rgba(20,184,166,.18); color:var(--app-teal); }
.chip__ic svg{ width:11px; height:11px; }
.chip--a{ left:-3%; top:12%; }
.chip--b{ right:-2%; bottom:14%; animation-delay:-3s; }
.chip--b .chip__ic{ background:rgba(251,191,36,.16); color:#FBBF24; }
.chip--c{ right:6%; top:-2%; animation-delay:-5s; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@media (max-width:900px){ .hero{ padding-bottom:90px; } .hero__img{ animation:none; } .chip--a{ left:0; } .chip--b{ right:0; } }
@media (max-width:720px){ .chip{ display:none; } }

/* ---------- Hero cloud illustration (desktop only; phones keep the app image) ---------- */
.hero__cloud{ display:none; }
.hero__cloud svg{ width:100%; height:auto; overflow:visible; }
.hero__cloud text{ font-family:var(--font); font-size:13px; font-weight:600; fill:var(--app-text); }
.hero__cloud text.cap{ font-weight:500; fill:var(--app-muted); }
.cloud-float{ animation:bubble 8s ease-in-out infinite; }
.cloud-flow{ stroke-dasharray:5 10; animation:cloudflow 1.4s linear infinite; }
@keyframes cloudflow{ to{ stroke-dashoffset:-15; } }
@media (min-width:901px){
  .hero__img{ display:none; }
  .hero__cloud{ display:block; position:relative; z-index:1; width:100%; max-width:540px; margin-inline:auto; }
  .chip{ display:none; } /* no floating cards around the cloud on desktop */
  .hero__bg .b5{ display:none; }
}

/* ---------- Hero download dropdown ---------- */
.dd{ position:relative; z-index:5; }
.dd__chev{ transition:transform .15s; }
.dd__btn[aria-expanded="true"] .dd__chev{ transform:rotate(180deg); }
.dd__list{ position:absolute; top:calc(100% + 8px); left:0; min-width:100%; width:max-content; margin:0; padding:6px; list-style:none; background:var(--app-card); border:1px solid var(--glass-line); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.45); }
.dd__list[hidden]{ display:none; }
.dd__list a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:var(--app-text); }
.dd__list a:hover,.dd__list a:focus-visible{ background:rgba(255,255,255,.08); }
.dd__list svg{ width:20px; height:20px; flex:none; color:var(--app-teal); }
.dd__list b{ display:block; font-size:14px; font-weight:600; }
.dd__list small{ display:block; font-size:12px; color:var(--app-muted); }

/* ---------- Theme toggle ---------- */
.theme-toggle{ display:grid; place-items:center; width:36px; height:36px; padding:0; background:var(--glass); border:1px solid var(--glass-line); border-radius:50%; color:var(--app-text); transition:background .15s; }
.theme-toggle:hover{ background:rgba(255,255,255,.12); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .i-moon{ display:none; }

/* ---------- Light theme (opt-in via [data-theme="light"]; dark stays the default) ---------- */
[data-theme="light"]{
  color-scheme:light;
  --ink:#0F1A27; --muted:#5B6B7C; --line:#DCE3EA; --surface:#EEF3F7;
  --brand:#0F766E; --brand-dark:#115E59;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(15,26,39,.10);
  --app-bg:#F6F9FB; --app-card:#FFFFFF; --app-line:#DCE3EA;
  --app-text:#0F1A27; --app-muted:#5B6B7C; --app-teal:#0F766E;
}
[data-theme="light"] .theme-toggle:hover{ background:rgba(15,26,39,.06); }
[data-theme="light"] .theme-toggle .i-sun{ display:none; }
[data-theme="light"] .theme-toggle .i-moon{ display:block; }
/* nav */
[data-theme="light"] .nav__inner{ background:rgba(255,255,255,.82); border-color:rgba(15,26,39,.10); box-shadow:0 10px 30px rgba(15,26,39,.10); }
[data-theme="light"] .nav .brand,[data-theme="light"] .nav__toggle,[data-theme="light"] .nav__links a:hover,[data-theme="light"] .nav__links a.is-active{ color:var(--ink); }
/* buttons: white label on the deeper teal */
[data-theme="light"] .btn--primary,[data-theme="light"] .nav .btn--primary,[data-theme="light"] .hero .btn--primary,[data-theme="light"] .btn--light,
[data-theme="light"] .brand__mark,[data-theme="light"] .skip-link,[data-theme="light"] .mode-toggle button[aria-pressed="true"]{ color:#fff; }
[data-theme="light"] .btn--primary:hover,[data-theme="light"] .nav .btn--primary:hover,[data-theme="light"] .hero .btn--primary:hover,[data-theme="light"] .btn--light:hover{ background:var(--brand-dark); }
[data-theme="light"] .btn--ghost,[data-theme="light"] .hero .btn--ghost{ background:rgba(15,26,39,.04); border-color:rgba(15,26,39,.18); color:var(--ink); }
[data-theme="light"] .btn--ghost:hover,[data-theme="light"] .hero .btn--ghost:hover{ background:rgba(15,26,39,.08); border-color:rgba(15,26,39,.30); }
/* heroes */
[data-theme="light"] .hero__bg{ background:radial-gradient(900px 480px at 85% 0%,rgba(20,184,166,.16),transparent 60%),linear-gradient(160deg,#E4F3F0 0%,var(--app-bg) 60%); }
[data-theme="light"] .hero__bg .orb{ opacity:.16; }
[data-theme="light"] .hero__bg .bub,[data-theme="light"] .page-hero::before,[data-theme="light"] .page-hero::after{ background:linear-gradient(145deg,rgba(20,184,166,.16),rgba(59,130,246,.05)); border-color:rgba(15,26,39,.08); box-shadow:0 14px 40px rgba(15,26,39,.08); }
[data-theme="light"] .hero h1{ color:var(--ink); }
[data-theme="light"] .hero h1 .grad{ background:none; color:#000; }
[data-theme="light"] .hero h1 .smart{ color:#0F766E; }
[data-theme="light"] .pill{ background:rgba(15,26,39,.04); border-color:rgba(15,26,39,.12); }
[data-theme="light"] .hero__img{ filter:drop-shadow(0 24px 40px rgba(15,26,39,.18)); }
[data-theme="light"] .page-hero{ background:radial-gradient(620px 320px at 92% 0%,rgba(20,184,166,.18),transparent 62%),radial-gradient(520px 300px at 68% 110%,rgba(59,130,246,.12),transparent 62%),linear-gradient(160deg,#E4F3F0 0%,var(--app-bg) 60%); }
/* cloud illustration */
[data-theme="light"] .hero__glow{ opacity:.5; }
[data-theme="light"] .cloud-flow,[data-theme="light"] .hero__cloud [stroke="url(#cs)"]{ stroke:#0F766E; }
[data-theme="light"] .hero__cloud stop[stop-color="#fff"]{ stop-color:#0F1A27; }
[data-theme="light"] .hero__cloud [stroke="rgba(255,255,255,.10)"]{ stroke:rgba(15,26,39,.14); }
[data-theme="light"] .hero__cloud [stroke="rgba(255,255,255,.16)"]{ stroke:rgba(15,26,39,.18); }
[data-theme="light"] .hero__cloud [stroke="rgba(255,255,255,.22)"]{ stroke:rgba(15,26,39,.28); }
[data-theme="light"] .hero__cloud [fill="rgba(255,255,255,.06)"]{ fill:rgba(15,26,39,.04); }
[data-theme="light"] .hero__cloud [fill="rgba(255,255,255,.18)"],[data-theme="light"] .hero__cloud [fill="rgba(255,255,255,.22)"],[data-theme="light"] .hero__cloud [fill="#fff"]{ fill:#0F1A27; }
/* status chips (tablet widths) */
[data-theme="light"] .chip{ background:rgba(255,255,255,.88); border-color:var(--line); }
[data-theme="light"] .chip b{ color:var(--ink); }
/* hero download dropdown */
[data-theme="light"] .dd__list{ box-shadow:0 18px 44px rgba(15,26,39,.16); }
[data-theme="light"] .dd__list a:hover,[data-theme="light"] .dd__list a:focus-visible{ background:rgba(15,26,39,.06); }
/* surfaces */
[data-theme="light"] .alt{ background:rgba(15,26,39,.03); }
[data-theme="light"] footer{ background:rgba(15,26,39,.04); }
[data-theme="light"] .device__url,[data-theme="light"] .plat button,[data-theme="light"] .plat a.dl-btn{ background:rgba(15,26,39,.03); }
[data-theme="light"] .split__media,[data-theme="light"] .step__media,[data-theme="light"] .plat-grid{ box-shadow:0 14px 36px rgba(15,26,39,.10); }
[data-theme="light"] .device{ box-shadow:0 20px 50px rgba(15,26,39,.14); }
[data-theme="light"] .price--brand{ background:linear-gradient(160deg,rgba(20,184,166,.12),#fff); box-shadow:inset 0 0 0 1px var(--brand), 0 18px 50px rgba(20,184,166,.12); }
[data-theme="light"] .cta-banner{ background:linear-gradient(135deg,#0F766E,#115E59); border-color:transparent; box-shadow:0 18px 50px rgba(15,118,110,.25); }
[data-theme="light"] .cta-banner .btn--light{ background:#fff; color:#0F766E; }
[data-theme="light"] .cta-banner .btn--light:hover{ background:#F0FDFA; }
@media (max-width:720px){ [data-theme="light"] .nav__links{ background:#fff; box-shadow:0 14px 36px rgba(15,26,39,.14); } }

@media (min-width:901px) and (max-width:1100px){ .price-grid{ grid-template-columns:1fr 1fr; } }