/* ================================================================
   Ziellos - Landing styles. Tokens pulled 1:1 from the mobile app
   (apps/mobile/lib/core/theme/app_colors.dart).
   ================================================================ */

@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.woff2') format('woff2');  font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.woff2') format('woff2');     font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-ExtraBold.woff2') format('woff2');font-weight:800; font-display:swap; }

:root {
  --primary:#5CC6A0; --primary-light:#7EDCBA; --primary-dark:#3BA882;
  --primary-surface:#E8F8F2; --primary-muted:#A8E4CC;
  --accent-peach:#F9B5A0; --accent-lavender:#B8A9E8; --accent-sky:#8EC5FC;
  --accent-lemon:#F7E07A; --accent-rose:#F2A0B5;
  --bg:#FAFBFC; --surface:#FFFFFF; --surface-variant:#F3F5F7;
  --border:#E8ECF0; --border-light:#F0F2F5;
  --text-primary:#1A1D24; --text-secondary:#6E7787; --text-tertiary:#9DA5B4;
  --grad: linear-gradient(135deg, #A8E6CF 0%, #7EC8A8 100%);
  --radius-sm:12px; --radius:18px; --radius-lg:24px; --radius-xl:32px;
  --shadow-sm:0 2px 8px rgba(26,29,36,.05);
  --shadow:0 12px 32px rgba(26,29,36,.08);
  --shadow-lg:0 24px 60px rgba(26,29,36,.12);
  --maxw:1120px;
  /* themeable surfaces */
  --nav-bg:rgba(250,251,252,.78);
  --screen-bg:#FFFFFF;
  --badge-bg:#1A1D24;
  --badge-border:transparent;
  --btn-glow:0 8px 20px rgba(92,198,160,.35);
  --phone-frame:#0F1115;
  --phone-ring:transparent;
  /* Waitlist band: light mint panel in light mode, dark in dark mode */
  --wl-bg:linear-gradient(135deg,#EAFBF4 0%,#D7F1E6 100%);
  --wl-text:#13302A; --wl-sub:#4C6B61; --wl-note:#6E8B80;
  --wl-input-bg:#FFFFFF; --wl-input-border:#CBE9DE; --wl-input-text:#1A1D24;
  --wl-link:#2E8C6A; --wl-glow:0;
}

/* ── Dark mode tokens - auto (system) + explicit toggle override.
   IMPORTANT: keep these two blocks identical. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-dark:#7EDCBA; --primary-surface:rgba(92,198,160,.16);
    --bg:#0F1115; --surface:#1A1D24; --surface-variant:#22262E;
    --border:#2A2F38; --border-light:#22262E;
    --text-primary:#F0F2F5; --text-secondary:#8A92A1; --text-tertiary:#5A6170;
    --shadow-sm:0 2px 8px rgba(0,0,0,.30); --shadow:0 12px 32px rgba(0,0,0,.38); --shadow-lg:0 24px 60px rgba(0,0,0,.50);
    --nav-bg:rgba(15,17,21,.72); --screen-bg:#0F1115;
    --badge-border:rgba(255,255,255,.14); --btn-glow:0 10px 24px rgba(0,0,0,.45);
    --phone-frame:#1A1D24; --phone-ring:rgba(255,255,255,.13);
    --wl-bg:linear-gradient(135deg,#0F1115 0%,#1A2A24 100%); --wl-text:#FFFFFF; --wl-sub:rgba(255,255,255,.72); --wl-note:rgba(255,255,255,.55);
    --wl-input-bg:rgba(255,255,255,.08); --wl-input-border:rgba(255,255,255,.18); --wl-input-text:#FFFFFF;
    --wl-link:rgba(255,255,255,.9); --wl-glow:1;
  }
}
:root[data-theme="dark"] {
  --primary-dark:#7EDCBA; --primary-surface:rgba(92,198,160,.16);
  --bg:#0F1115; --surface:#1A1D24; --surface-variant:#22262E;
  --border:#2A2F38; --border-light:#22262E;
  --text-primary:#F0F2F5; --text-secondary:#8A92A1; --text-tertiary:#5A6170;
  --shadow-sm:0 2px 8px rgba(0,0,0,.30); --shadow:0 12px 32px rgba(0,0,0,.38); --shadow-lg:0 24px 60px rgba(0,0,0,.50);
  --nav-bg:rgba(15,17,21,.72); --screen-bg:#0F1115;
  --badge-border:rgba(255,255,255,.14); --btn-glow:0 10px 24px rgba(0,0,0,.45);
  --phone-frame:#1A1D24; --phone-ring:rgba(255,255,255,.13);
  --wl-bg:linear-gradient(135deg,#0F1115 0%,#1A2A24 100%); --wl-text:#FFFFFF; --wl-sub:rgba(255,255,255,.72); --wl-note:rgba(255,255,255,.55);
  --wl-input-bg:rgba(255,255,255,.08); --wl-input-border:rgba(255,255,255,.18); --wl-input-text:#FFFFFF;
  --wl-link:rgba(255,255,255,.9); --wl-glow:1;
}

* { box-sizing:border-box; }
/* clip any horizontal overflow (e.g. the 3D-tilted phone) - no scroll bar/sliver, keeps sticky working */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body { overflow-x:clip; }
body {
  margin:0; background:var(--bg); color:var(--text-primary);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
h1,h2,h3 { margin:0; letter-spacing:-0.03em; line-height:1.1; font-weight:800; }
p { margin:0; }

/* ── Language toggle visibility ──────────────────────────────── */
[hidden] { display:none !important; }

/* ── Layout helpers ──────────────────────────────────────────── */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:88px 0; }
.eyebrow {
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--primary-dark);
  background:var(--primary-surface); padding:6px 14px; border-radius:999px;
}
.muted { color:var(--text-secondary); }

/* ── Header ──────────────────────────────────────────────────── */
header.nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--border-light);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
/* Wordmark logo - "ziellos." in Inter ExtraBold with mint accent dot. */
.brand {
  display:inline-flex; align-items:baseline; font-weight:800; font-size:24px;
  letter-spacing:-1.4px; line-height:1; color:var(--text-primary);
}
.brand .wm-dot { color:var(--primary); }
footer .brand { font-size:26px; }
.nav-actions { display:flex; align-items:center; gap:14px; }
.lang-toggle {
  display:flex; align-items:center; gap:2px; background:var(--surface-variant);
  border-radius:999px; padding:3px; border:1px solid var(--border);
}
.lang-toggle button {
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--text-secondary);
  padding:5px 11px; border-radius:999px; transition:.15s;
}
.lang-toggle button[aria-pressed="true"] { background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ── Theme toggle ────────────────────────────────────────────── */
.theme-toggle {
  display:inline-grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:999px; border:1px solid var(--border); background:var(--surface-variant);
  color:var(--text-secondary); cursor:pointer; transition:.15s;
}
.theme-toggle:hover { color:var(--text-primary); }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle .ic-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display:none; }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
  padding:13px 22px; border-radius:14px; border:1px solid transparent; transition:.18s;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--btn-glow); }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-ghost { background:var(--surface); color:var(--text-primary); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--primary-muted); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; padding:72px 0 40px; }
.hero::before {
  content:""; position:absolute; inset:-30% -10% auto -10%; height:680px; z-index:0;
  background:
    radial-gradient(540px 420px at 18% 12%, rgba(168,230,207,.55), transparent 60%),
    radial-gradient(520px 420px at 88% 8%, rgba(184,169,232,.40), transparent 60%),
    radial-gradient(480px 380px at 70% 60%, rgba(142,197,252,.32), transparent 62%);
  filter:blur(8px);
}
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(38px,6vw,64px); }
.hero h1 .grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { font-size:clamp(17px,2.2vw,20px); color:var(--text-secondary); margin-top:20px; max-width:30ch; }
/* CTAs + store badges share one equal 2-col grid: same width AND height. */
.hero-cta, .badges { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:440px; }
.hero-cta { margin-top:30px; }
.badges { margin-top:12px; }
.hero-cta .btn, .store-badge { width:100%; min-width:0; height:56px; box-sizing:border-box; }
.hero-cta .btn { padding:0 14px; white-space:nowrap; }
.trust { display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--text-tertiary); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-surface); }

/* ── Store badges ────────────────────────────────────────────── */
.store-badge {
  display:flex; align-items:center; justify-content:center; gap:11px; padding:0 16px; border-radius:14px;
  background:var(--badge-bg); color:#fff; position:relative; border:1px solid var(--badge-border);
}
.store-badge .sb-sub { font-size:10.5px; line-height:1; opacity:.7; text-transform:uppercase; letter-spacing:.06em; }
.store-badge .sb-main { font-size:17px; font-weight:700; line-height:1.15; }
.store-badge .soon {
  position:absolute; top:-9px; right:-9px; font-size:10px; font-weight:800;
  background:var(--accent-lemon); color:#5b4d00; padding:3px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}
.store-badge svg { width:24px; height:24px; }

/* ── Phone mockup (real app screenshot) ──────────────────────── */
/* Flat (no 3D transform): keeps the screenshot pixel-sharp and avoids the
   phantom horizontal/vertical overflow that a tilted/perspective phone creates. */
.phone-wrap { display:flex; justify-content:center; }
.phone {
  position:relative; width:248px; border-radius:40px; background:var(--phone-frame);
  padding:7px; box-shadow:var(--shadow-lg), 0 0 0 1px var(--phone-ring);
  transition:transform .25s ease;
}
.phone:hover { transform:translateY(-4px); }
/* Dynamic Island / top notch - sits in the status strip, not over content */
.phone::after {
  content:""; position:absolute; z-index:4; top:18px; left:50%; transform:translateX(-50%);
  width:74px; height:18px; background:var(--phone-frame); border-radius:999px;
}
.screen {
  position:relative; width:100%; border-radius:33px; background:var(--screen-bg); overflow:hidden;
  padding:26px 0 50px;  /* status strip on top, home-bar strip at bottom */
}
/* Fade the bottom of the screenshot into the screen colour so the floating nav
   sits over clean space in BOTH themes (not over content in light mode). */
.screen::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:104px; z-index:2; pointer-events:none;
  background:linear-gradient(to top, var(--screen-bg) 42%, transparent);
}
/* Both light + dark screenshots are forced to the SAME iPhone aspect ratio
   (the light capture's 466:843) so the device is identically shaped in both
   themes. cover + top alignment keeps content undistorted (the slightly wider
   dark shot is trimmed a hair at the sides, within its margins). */
.screen-shot { width:100%; aspect-ratio:466 / 843; height:auto; object-fit:cover; object-position:top center; display:block; }
.screen-nav {
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  width:86%; height:auto; border-radius:18px;
  filter:drop-shadow(0 10px 24px rgba(15,17,21,.20));
}
/* Light/dark screenshot swap - follows theme (toggle or system). */
.screen-shot.dark, .screen-nav.dark { display:none; }
:root[data-theme="dark"] .screen-shot.light, :root[data-theme="dark"] .screen-nav.light { display:none; }
:root[data-theme="dark"] .screen-shot.dark { display:block; }
:root[data-theme="dark"] .screen-nav.dark { display:block; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .screen-shot.light,
  :root:not([data-theme="light"]) .screen-nav.light { display:none; }
  :root:not([data-theme="light"]) .screen-shot.dark { display:block; }
  :root:not([data-theme="light"]) .screen-nav.dark { display:block; }
}

/* ── Feature grid ────────────────────────────────────────────── */
.center { text-align:center; }
.center .lead { max-width:54ch; margin:16px auto 0; color:var(--text-secondary); font-size:18px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.card {
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm); transition:.2s;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.icon-box { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px; }
.icon-box svg { width:26px; height:26px; }
.card h3 { font-size:19px; }
.card p { color:var(--text-secondary); margin-top:8px; font-size:15px; }
/* Translucent accent tints + matching stroke colour - read well on light AND dark cards. */
.ib-mint  { background:rgba(92,198,160,.16);  color:#2E9C77; }
.ib-peach { background:rgba(249,181,160,.20); color:#E08763; }
.ib-lav   { background:rgba(184,169,232,.20); color:#7E6BD0; }
.ib-sky   { background:rgba(142,197,252,.20); color:#4E97E3; }
.ib-lemon { background:rgba(247,224,122,.24); color:#C69A1E; }
.ib-rose  { background:rgba(242,160,181,.20); color:#D86A8F; }
:root[data-theme="dark"] .ib-mint  { color:#5CC6A0; }
:root[data-theme="dark"] .ib-peach { color:#F9B5A0; }
:root[data-theme="dark"] .ib-lav   { color:#B8A9E8; }
:root[data-theme="dark"] .ib-sky   { color:#8EC5FC; }
:root[data-theme="dark"] .ib-lemon { color:#F7E07A; }
:root[data-theme="dark"] .ib-rose  { color:#F2A0B5; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .ib-mint  { color:#5CC6A0; }
  :root:not([data-theme="light"]) .ib-peach { color:#F9B5A0; }
  :root:not([data-theme="light"]) .ib-lav   { color:#B8A9E8; }
  :root:not([data-theme="light"]) .ib-sky   { color:#8EC5FC; }
  :root:not([data-theme="light"]) .ib-lemon { color:#F7E07A; }
  :root:not([data-theme="light"]) .ib-rose  { color:#F2A0B5; }
}
.premium-tag { display:inline-block; font-size:11px; font-weight:800; color:#5b4d00; background:var(--accent-lemon); padding:3px 9px; border-radius:999px; margin-left:8px; vertical-align:middle; }

/* ── How it works ────────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.step { text-align:center; padding:8px; }
.step .num {
  width:46px; height:46px; margin:0 auto 16px; border-radius:14px; background:var(--grad);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:19px; box-shadow:var(--shadow-sm);
}
.step h3 { font-size:17px; } .step p { color:var(--text-secondary); margin-top:6px; font-size:15px; }

/* ── Waitlist ────────────────────────────────────────────────── */
.waitlist {
  position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:56px 32px;
  background:var(--wl-bg); color:var(--wl-text); text-align:center;
}
.waitlist::before { content:""; position:absolute; inset:auto -10% -60% -10%; height:340px; opacity:var(--wl-glow);
  background:radial-gradient(420px 280px at 30% 50%, rgba(92,198,160,.5), transparent 60%),
            radial-gradient(380px 260px at 78% 40%, rgba(142,197,252,.35), transparent 60%);
  /* soft top fade so the glow never shows a hard cut-off edge (esp. on tall mobile layouts) */
  -webkit-mask-image:linear-gradient(to top, #000 25%, transparent 80%);
          mask-image:linear-gradient(to top, #000 25%, transparent 80%); }
.waitlist > * { position:relative; z-index:1; }
.waitlist h2 { font-size:clamp(26px,4vw,38px); }
.waitlist p { color:var(--wl-sub); margin:14px auto 0; max-width:46ch; }
.wl-form { display:flex; gap:10px; max-width:460px; margin:28px auto 0; }
.wl-form input[type=email] {
  flex:1; font-family:inherit; font-size:15px; padding:14px 18px; border-radius:14px;
  border:1px solid var(--wl-input-border); background:var(--wl-input-bg); color:var(--wl-input-text);
}
.wl-form input::placeholder { color:var(--wl-note); }
.wl-form input:focus { outline:2px solid var(--primary); border-color:transparent; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.wl-msg { margin-top:16px; font-size:14px; font-weight:600; min-height:20px; }
.wl-msg.ok { color:var(--primary-dark); }
.wl-msg.err { color:#E8645A; }
.wl-note { font-size:12.5px; color:var(--wl-note); margin-top:10px; }
.wl-note a { color:var(--wl-link); text-decoration:underline; }

/* ── Footer ──────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border-light); padding:48px 0 56px; margin-top:24px; }
.foot-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a { font-size:14px; color:var(--text-secondary); font-weight:600; }
.foot-links a:hover { color:var(--primary-dark); }
.foot-copy { font-size:13px; color:var(--text-tertiary); margin-top:18px; }

/* ── Legal pages ─────────────────────────────────────────────── */
.legal { max-width:760px; margin:0 auto; padding:56px 24px 80px; }
.legal h1 { font-size:34px; margin-bottom:8px; }
.legal .updated { color:var(--text-tertiary); font-size:14px; margin-bottom:36px; }
.legal h2 { font-size:21px; margin:38px 0 10px; }
.legal h3 { font-size:16px; margin:22px 0 6px; font-weight:700; }
.legal p, .legal li { color:var(--text-secondary); font-size:15.5px; }
.legal ul { padding-left:22px; margin:8px 0; }
.legal li { margin:5px 0; }
.legal a { color:var(--primary-dark); font-weight:600; }
.legal .back { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--primary-dark); margin-bottom:28px; }
.legal .disclaimer { background:var(--primary-surface); border:1px solid var(--primary-muted); border-radius:var(--radius); padding:16px 18px; font-size:14px; color:var(--primary-dark); margin:24px 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:880px) {
  .hero { padding:14px 0 28px; }
  .hero-grid { grid-template-columns:1fr; gap:26px; }
  .hero .lead { max-width:none; }
  .hero-col-visual { order:-1; }
  .grid, .steps { grid-template-columns:1fr; }
  .section { padding:64px 0; }
}
@media (max-width:600px) {
  .hero-cta, .badges { gap:10px; max-width:none; }
  /* allow the longer CTA label to wrap to 2 lines on tiny screens - height stays fixed */
  .hero-cta .btn { white-space:normal; line-height:1.15; padding:0 10px; }
}
@media (max-width:560px) {
  .wl-form { flex-direction:column; }
  .nav-actions .btn-ghost { display:none; }
  /* size to viewport so the whole device fits on screen with little empty space */
  .phone { width:min(76vw, 300px); }
  #hero-copy { scroll-margin-top:76px; }
}