/* ============================================================
   Kairo — marketing site shared system
   Brand tokens lifted verbatim from the app (kairo/theme.ts DARK)
   ============================================================ */
:root{
  --bg:#0F1612; --bgDeep:#0A0F0C; --bgRaise:#1A2520; --card:#1F2A24; --cardHi:#243029;
  --cardLine:rgba(242,237,219,0.07); --cardLineHi:rgba(242,237,219,0.14);
  --text:#F2EDDB; --text2:#C8C3B0; --muted:#807D6E; --dim:#54534B;
  --forest:#5DA372; --forestDeep:#2E4A35; --forestSoft:rgba(93,163,114,0.18); --forestGlow:rgba(93,163,114,0.32);
  --cream:#E5D4A8; --creamSoft:rgba(229,212,168,0.16); --trackFill:rgba(242,237,219,0.08);
  --chicken:#B85A35; --yogurt:#D6C19A; --bowl:#8E7549; --salmon:#C57052; --oats:#A88560; --greens:#7E9456; --sweet:#D08442;
  --sans:'Onest', system-ui, -apple-system, sans-serif;
  --serif:'Newsreader', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bgDeep); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1, "ss01" 1;
  line-height:1.5; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--forestGlow); color:#fff; }

/* ── Typographic helpers ─────────────────────────────────── */
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--forest); }
.eyebrow.cream{ color:var(--cream); }
.eyebrow.muted{ color:var(--muted); }
.serif{ font-family:var(--serif); font-weight:400; }
.forest{ color:var(--forest); }
.creamtx{ color:var(--cream); }
.t2{ color:var(--text2); }
.mut{ color:var(--muted); }

h1,h2,h3{ letter-spacing:-0.035em; line-height:1.04; font-weight:600; text-wrap:balance; }
p{ text-wrap:pretty; }

/* ── Layout ──────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.wrap-narrow{ max-width:880px; }
section{ position:relative; }
.section-pad{ padding:120px 0; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(10,15,12,0.78); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--cardLine); padding:15px 40px;
}
.brand{ display:flex; align-items:center; gap:9px; font-size:21px; font-weight:600; letter-spacing:-0.05em; color:var(--text); }
.brand .mark{ width:23px; height:23px; }
.brand .mark svg, .brand .mark img{ width:100%; height:100%; }
.brand .dot{ color:var(--forest); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--text2); letter-spacing:-0.01em; transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--forest); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-burger i{ width:22px; height:2px; background:var(--text); border-radius:2px; }

/* ── Buttons & store badges ──────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans); font-weight:600; letter-spacing:-0.01em; cursor:pointer; border:none; transition:transform .2s var(--ease), background .2s, border-color .2s; }
.btn:active{ transform:translateY(1px); }
.btn-fill{ background:var(--forest); color:var(--bg); padding:15px 26px; border-radius:99px; font-size:15px; }
.btn-fill:hover{ background:#6cb582; }
.btn-fill svg{ width:17px; height:17px; }
.btn-ghost{ background:transparent; color:var(--text); padding:14px 25px; border-radius:99px; border:1px solid var(--cardLineHi); font-size:15px; }
.btn-ghost:hover{ border-color:var(--text2); background:rgba(242,237,219,0.04); }

.store-row{ display:flex; gap:12px; flex-wrap:wrap; }
.store-badge{
  display:inline-flex; align-items:center; gap:11px; padding:10px 18px 10px 16px; border-radius:14px;
  background:var(--bgRaise); border:1px solid var(--cardLineHi); transition:border-color .2s, background .2s;
}
.store-badge:hover{ border-color:var(--text2); background:var(--card); }
.store-badge svg{ width:24px; height:24px; flex-shrink:0; }
.store-badge .sb-tx{ display:flex; flex-direction:column; line-height:1.15; }
.store-badge .sb-tx small{ font-size:9.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.store-badge .sb-tx b{ font-size:15px; font-weight:600; letter-spacing:-0.02em; color:var(--text); }
.nav .store-badge{ padding:8px 15px 8px 13px; }
.nav .store-badge svg{ width:19px; height:19px; }
.nav .store-badge .sb-tx small{ font-size:8px; }
.nav .store-badge .sb-tx b{ font-size:12.5px; }

/* ── Food image placeholder (striped gradient + mono label) ─ */
.food{ position:relative; overflow:hidden; border-radius:18px; background:var(--bgRaise); }
.food .grad{ position:absolute; inset:0; }
.food .stripes{ position:absolute; inset:0; opacity:0.10; background-image:repeating-linear-gradient(135deg,#000 0 2px,transparent 2px 9px); }
.food .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,15,12,0.55), transparent 55%); }
.food .label{
  position:absolute; left:12px; bottom:11px; font-family:var(--mono); font-size:10px; letter-spacing:0.02em;
  color:rgba(248,244,230,0.62); padding:3px 8px; border-radius:6px; background:rgba(10,15,12,0.42); backdrop-filter:blur(3px);
}

/* ── Cards & chips ───────────────────────────────────────── */
.card{ background:var(--bgRaise); border:1px solid var(--cardLine); border-radius:20px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; font-size:11px; font-weight:600; letter-spacing:0.01em; }
.chip.forest{ color:var(--forest); background:var(--forestSoft); }
.chip.cream{ color:var(--cream); background:var(--creamSoft); }
.chip.line{ color:var(--text2); border:1px solid var(--cardLineHi); }
.chip.line i{ width:5px; height:5px; border-radius:99px; }

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── Ticker ──────────────────────────────────────────────── */
.ticker{ position:relative; overflow:hidden; border-top:1px solid var(--cardLine); border-bottom:1px solid var(--cardLine); padding:22px 0; background:var(--bg); }
.ticker::before,.ticker::after{ content:''; position:absolute; top:0; bottom:0; width:160px; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(to right,var(--bg),transparent); }
.ticker::after{ right:0; background:linear-gradient(to left,var(--bg),transparent); }
.ticker-track{ display:flex; gap:0; width:max-content; animation:scroll-x 60s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ display:flex; align-items:center; gap:22px; padding:0 22px; font-size:22px; font-weight:500; letter-spacing:-0.03em; color:var(--text2); white-space:nowrap; }
.ticker-item .dot{ width:6px; height:6px; border-radius:99px; background:var(--forest); flex-shrink:0; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ── Phone frame (for app screens) ───────────────────────── */
.phone{
  width:354px; background:var(--bg); border-radius:46px; flex-shrink:0;
  border:1px solid rgba(242,237,219,0.10);
  box-shadow:0 54px 100px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(242,237,219,0.06);
  padding:9px 9px 0; overflow:hidden;
}
.phone .screen{ background:var(--bg); border-radius:38px; overflow:hidden; }
.statusbar{ display:flex; justify-content:space-between; align-items:center; padding:14px 26px 6px; }
.sb-time{ font-size:13px; font-weight:600; color:var(--text); }
.sb-right{ display:flex; align-items:center; gap:6px; }
.sb-right .bars{ display:flex; align-items:flex-end; gap:2px; height:10px; }
.sb-right .bars i{ width:3px; background:var(--text); border-radius:1px; }
.sb-right .batt{ width:22px; height:11px; border:1px solid rgba(242,237,219,0.5); border-radius:3px; position:relative; padding:1.5px; }
.sb-right .batt::after{ content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:rgba(242,237,219,0.5); border-radius:0 1px 1px 0; }
.sb-right .batt i{ display:block; height:100%; width:72%; background:var(--text); border-radius:1px; }
.home-ind{ display:flex; justify-content:center; padding:9px 0 10px; }
.home-ind i{ width:120px; height:5px; border-radius:99px; background:rgba(242,237,219,0.22); }
.app-wordmark{ font-size:16px; font-weight:600; letter-spacing:-0.04em; }
.app-wordmark span{ color:var(--forest); }

/* ── Footer ──────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--cardLine); padding:80px 0 48px; background:var(--bg); }
.footer-top{ display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; }
.footer-brand{ max-width:340px; }
.footer-brand .brand{ font-size:25px; margin-bottom:16px; }
.footer-brand p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:22px; }
.footer-cols{ display:flex; gap:72px; flex-wrap:wrap; }
.footer-col h4{ font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color:var(--text2); margin-bottom:12px; transition:color .2s; }
.footer-col a:hover{ color:var(--text); }
.footer-bot{ margin-top:64px; padding-top:28px; border-top:1px solid var(--cardLine); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); }
.footer-bot .legal{ display:flex; gap:24px; }
.footer-bot a:hover{ color:var(--text2); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  .wrap{ padding:0 22px; }
  .nav{ padding:16px 22px; } .nav.solid{ padding:13px 22px; }
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .section-pad{ padding:80px 0; }
  .footer-top{ gap:40px; }
  .footer-cols{ gap:40px; }
}