/* ============================================================================
   Uttr — web. The onboarding, continued onto the web.
   Same palette, type, iconography and calm as the app. Mobile-first.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#0e1017; --bg-deep:#090b11; --bg-warm:#12141d;
  --surface:#141820; --surface-hi:#1a1f28; --surface-top:#1f2430;
  --border:rgba(255,255,255,.07); --border-hi:rgba(255,255,255,.13);
  --rule:rgba(255,255,255,.055);
  /* ink */
  --t1:#e8e4dc; --t2:#8891a0; --t3:#575e6b;
  /* accents (exact app values) */
  --amber:#e6a23e; --amber-dim:#d4a020;
  --amber-bg:rgba(230,162,62,.10); --amber-bd:rgba(230,162,62,.32);
  --teal:#1db8ad; --teal-bg:rgba(29,184,173,.10); --teal-bd:rgba(29,184,173,.30);
  --rose:#cc6a5a; --ink:#1a1407;
  /* type */
  --font:"Instrument Sans","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono","SF Mono",ui-monospace,monospace;
  /* layout */
  --maxw:1120px; --gutter:22px; --radius:18px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); color:var(--t1); background:var(--bg);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* warm radial glow, very subtle, behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 680px at 50% -8%, rgba(230,162,62,.07), transparent 60%),
    radial-gradient(900px 700px at 88% 12%, rgba(29,184,173,.045), transparent 55%);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(230,162,62,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

/* ---- shared layout ---------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--amber);
  text-transform:uppercase; }
.muted{ color:var(--t2); }
section{ position:relative; }

h1,h2,h3{ letter-spacing:-.03em; line-height:1.08; font-weight:600; text-wrap:balance; }
h1{ font-size:clamp(2.1rem,7.4vw,3.6rem); }
h2{ font-size:clamp(1.7rem,5vw,2.5rem); }
h3{ font-size:1.15rem; letter-spacing:-.02em; }
p{ text-wrap:pretty; }
.lead{ font-size:clamp(1rem,3.4vw,1.18rem); color:var(--t2); line-height:1.55; }

/* ---- nav -------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:50; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between;
  height:64px; }
.nav.scrolled .nav-inner{ }
.nav::after{ content:""; position:absolute; inset:0; z-index:-1; backdrop-filter:blur(12px);
  background:rgba(14,16,23,0); border-bottom:1px solid transparent; transition:background .3s,border-color .3s; }
.nav.scrolled::after{ background:rgba(11,13,19,.72); border-bottom-color:var(--rule); }
.wordmark{ font-size:1.4rem; font-weight:600; letter-spacing:-.04em; color:var(--t1); }
.wordmark b{ color:var(--amber); font-weight:600; }
.nav-cta{ white-space:nowrap; font-size:.92rem; font-weight:500; color:var(--t2); display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:11px; border:1px solid var(--border); transition:color .2s,border-color .2s,background .2s; }
.nav-cta:hover{ color:var(--t1); border-color:var(--border-hi); background:rgba(255,255,255,.03); }

/* ---- buttons ---------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font); font-weight:600; cursor:pointer; border:none;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .25s, background .2s, border-color .2s, color .2s; }
.btn:active{ transform:translateY(1px) scale(.995); }

/* primary = light store button (matches app's Google button) */
.store{ background:var(--t1); color:#15171c; padding:13px 20px; border-radius:15px;
  box-shadow:0 12px 34px rgba(0,0,0,.4); }
.store:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.store .tri{ width:22px; height:24px; flex-shrink:0; }
.store .lbl{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.store .lbl small{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:#5c5952; text-transform:uppercase; }
.store .lbl strong{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }

/* secondary = ghost */
.ghost{ background:transparent; color:var(--t1); padding:13px 18px; border-radius:15px;
  border:1px solid var(--border-hi); }
.ghost:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.ghost .play{ width:16px; height:16px; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cta-note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--t3);
  display:flex; align-items:center; gap:7px; }
.dot-live{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }

/* ---- hero ------------------------------------------------------------------- */
.hero{ padding-top:clamp(28px,7vw,64px); padding-bottom:clamp(48px,9vw,96px); }
.hero-grid{ display:grid; gap:clamp(34px,7vw,56px); align-items:center; }
.hero h1{ margin-bottom:20px; }
.hero .lead{ max-width:33ch; margin-bottom:30px; }
.hero-hook{ display:block; color:var(--t1); margin-bottom:8px; }
.hero-copy .cta-row{ margin-bottom:16px; }
.hero-art{ display:flex; justify-content:center; position:relative; }

/* ---- device / phone mockups ------------------------------------------------- */
.device{ position:relative; width:min(300px,80vw); flex-shrink:0;
  border-radius:40px; background:linear-gradient(180deg,#191d27,#0f131b);
  padding:9px; box-shadow:0 2px 0 rgba(255,255,255,.04) inset, 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
}
.device.glow::after{ content:""; position:absolute; inset:-14% -8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(230,162,62,.16), transparent 72%); filter:blur(6px); }
.screen{ position:relative; border-radius:32px; overflow:hidden; background:var(--bg);
  aspect-ratio:300/620; display:flex; flex-direction:column; }
.screen .grain{ position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* status bar */
.sbar{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px 4px;
  font-family:var(--mono); font-size:11px; color:var(--t1); flex-shrink:0; }
.sbar .icons{ display:flex; align-items:center; gap:5px; color:var(--t2); }
.sbar .batt{ width:18px; height:10px; border:1.4px solid currentColor; border-radius:2.5px; position:relative; }
.sbar .batt::after{ content:""; position:absolute; inset:1.5px; right:4px; background:var(--t1); border-radius:1px; }

/* hint chevrons */
.hint{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.hint .bar{ width:30px; height:3.5px; border-radius:2px; background:var(--t3); opacity:.4; }
.hint .lbl{ font-size:12px; }
.hint.up .lbl{ color:var(--teal); }
.hint.down .lbl{ color:var(--t2); }

/* mic halo */
.halo{ position:relative; display:grid; place-items:center; }
.halo .ring{ position:absolute; border-radius:50%; border:1px solid var(--amber-bd); }
.halo .r1{ inset:-11%; animation:ring 3s ease-in-out infinite; }
.halo .r2{ inset:-24%; animation:ring 4.2s ease-in-out .5s infinite; }
.halo .disc{ border-radius:50%; background:var(--amber-bg); border:1.5px solid var(--amber-bd);
  display:grid; place-items:center; box-shadow:0 0 46px rgba(230,162,62,.15); }

/* home screen body */
.scr-home{ flex:1; display:flex; flex-direction:column; padding:8px 0 12px; }
.scr-home .center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.tap-label{ text-align:center; }
.tap-label .big{ font-size:15px; font-weight:500; color:var(--t1); }
.tap-label .sub{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; color:var(--t3); margin-top:5px; }

/* waveform */
.wave{ display:flex; align-items:center; justify-content:center; gap:3.5px; height:40px; }
.wave i{ width:3px; border-radius:2px; background:var(--amber); height:100%; transform-origin:center;
  animation:wave .5s ease-in-out infinite alternate; }

/* thought rows */
.feed{ flex:1; padding:0 15px; overflow:hidden; }
.feed-head{ display:flex; align-items:center; gap:8px; padding:10px 2px 8px; }
.feed-head .title{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.glabel{ font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--t3); padding:12px 2px 7px; }
.trow{ display:flex; gap:11px; padding:11px 2px; border-bottom:1px solid var(--rule); }
.trow:last-child{ border-bottom:none; }
.trow .dot{ width:6px; height:6px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.trow .txt{ flex:1; font-size:13.5px; color:var(--t1); line-height:1.45; letter-spacing:-.01em; }
.trow .meta{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:3px; padding-top:1px; }
.trow .type{ font-family:var(--mono); font-size:9.5px; }
.trow .dom{ font-family:var(--mono); font-size:8.5px; color:var(--t3); }
.c-task{ color:var(--teal); } .bg-task{ background:var(--teal); }
.c-idea{ color:var(--amber); } .bg-idea{ background:var(--amber); }
.c-worry{ color:var(--rose); } .bg-worry{ background:var(--rose); }
.c-note{ color:var(--t2); } .bg-note{ background:var(--t2); }

/* ask screen */
.ask{ flex:1; display:flex; flex-direction:column; padding:10px 15px 14px; gap:9px; }
.q{ align-self:flex-end; max-width:82%; background:var(--surface-top); border:1px solid var(--border);
  padding:9px 13px; border-radius:14px 14px 4px 14px; font-size:12.5px; color:var(--t1); }
.a{ align-self:flex-start; max-width:88%; }
.a .bubble{ background:var(--surface); border:1px solid var(--border); padding:11px 13px;
  border-radius:14px 14px 14px 4px; font-size:12.5px; color:var(--t2); line-height:1.5; }
.a .cites{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.cite{ font-family:var(--mono); font-size:8.5px; letter-spacing:.04em; color:var(--t3);
  border:1px solid var(--border); border-radius:6px; padding:3px 7px; display:inline-flex; gap:5px; align-items:center; }

/* ---- story flow (one story, not feature cards) ------------------------------ */
.story{ padding:clamp(40px,8vw,72px) 0; border-top:1px solid var(--rule); }
.flow{ display:grid; gap:28px; margin-top:38px; }
.flow-node{ display:flex; gap:15px; align-items:flex-start; }
.flow-ic{ width:48px; height:48px; border-radius:14px; flex-shrink:0; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--amber); }
.flow-node h3{ margin-bottom:4px; }
.flow-node p{ font-size:.95rem; color:var(--t2); line-height:1.5; }

/* ---- demo (say it messy) ---------------------------------------------------- */
.demo{ padding:clamp(48px,9vw,96px) 0; }
.demo-head{ max-width:44ch; margin-bottom:38px; }
.demo-head h2{ margin:14px 0 12px; }
.demo-card{ background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:clamp(18px,4vw,26px); box-shadow:0 30px 70px rgba(0,0,0,.35); }
.said{ border-radius:16px; border:1px solid var(--amber-bd); background:rgba(230,162,62,.05); padding:16px 17px; }
.said .tag{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--amber); margin-bottom:9px; }
.said .body{ font-size:clamp(1rem,3.2vw,1.15rem); color:var(--t1); line-height:1.6; font-style:italic; }
.demo-arrow{ display:flex; justify-content:center; padding:14px 0; }
.demo-arrow svg{ width:18px; height:22px; color:var(--amber); }
.organized{ border-radius:16px; border:1px solid var(--border-hi); background:var(--surface-hi); padding:6px 16px; }
.organized .tag{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--teal); padding:12px 0 4px; }

/* ---- showcase --------------------------------------------------------------- */
.showcase{ padding:clamp(40px,8vw,80px) 0; border-top:1px solid var(--rule); }
.showcase-head{ max-width:40ch; margin-bottom:40px; }
.shots{ display:grid; gap:34px; }
.shot{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.shot .cap h3{ margin-bottom:6px; }
.shot .cap p{ font-size:.92rem; color:var(--t2); max-width:34ch; margin:0 auto; }
.shot .device{ width:min(272px,74vw); }

/* ---- privacy / ai ----------------------------------------------------------- */
.band{ padding:clamp(44px,8vw,84px) 0; border-top:1px solid var(--rule); }
.band-grid{ display:grid; gap:clamp(28px,6vw,52px); align-items:center; }
.privacy .shield{ width:64px; height:64px; border-radius:18px; background:var(--surface);
  border:1px solid var(--border); display:grid; place-items:center; margin-bottom:22px; }
.privacy h2{ margin-bottom:14px; }
.plist{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.plist li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--t2); line-height:1.5; }
.plist svg{ flex-shrink:0; margin-top:3px; }
.plist b{ color:var(--t1); font-weight:600; }

.ai-inner{ text-align:center; max-width:36ch; margin:0 auto; }
.ai-inner .spark{ margin:0 auto 20px; }
.ai-inner h2{ margin-bottom:14px; }

/* ---- download --------------------------------------------------------------- */
.download{ padding:clamp(56px,10vw,110px) 0; text-align:center; }
.download-card{ max-width:640px; margin:0 auto; background:
   radial-gradient(600px 320px at 50% -30%, rgba(230,162,62,.12), transparent 65%), var(--surface);
  border:1px solid var(--border-hi); border-radius:28px; padding:clamp(34px,6vw,58px) var(--gutter);
  box-shadow:0 40px 100px rgba(0,0,0,.4); }
.download h2{ margin-bottom:14px; }
.download .lead{ max-width:36ch; margin:0 auto 30px; }
.download .cta-row{ justify-content:center; }

/* ---- footer ----------------------------------------------------------------- */
.footer{ border-top:1px solid var(--rule); padding:44px 0 40px; }
.footer-inner{ display:flex; flex-direction:column; gap:26px; }
.footer .wordmark{ font-size:1.2rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:20px 26px; }
.footer-links a{ font-size:.9rem; color:var(--t2); transition:color .2s; }
.footer-links a:hover{ color:var(--t1); }
.footer-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--t3); line-height:1.7; }

/* ---- reveal on scroll (progressive enhancement: hidden only when JS present) - */
.reveal{ transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s; } .reveal.d2{ transition-delay:.12s; }
.reveal.d3{ transition-delay:.18s; } .reveal.d4{ transition-delay:.24s; }

/* hero art: gentle float loop (decorative; base position is the visible end-state) */
.hero-art .device{ animation:float 7s ease-in-out 1.4s infinite; }

/* Hero entrance — pure CSS, decoupled from JS/IO. Base state is fully visible
   (opacity:1), so it's the LCP paint and can never be stuck blank. The entrance
   only translates (never hides), and only when motion is welcome + JS is present. */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-copy > *{ animation:heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
  html.js .hero-copy > *:nth-child(1){ animation-delay:.02s; }
  html.js .hero-copy > *:nth-child(2){ animation-delay:.09s; }
  html.js .hero-copy > *:nth-child(3){ animation-delay:.16s; }
  html.js .hero-copy > *:nth-child(4){ animation-delay:.23s; }
  html.js .hero-copy > *:nth-child(5){ animation-delay:.30s; }
  html.js .hero-art{ animation:heroRise .85s cubic-bezier(.22,.61,.36,1) .18s both; }
}

/* ---- keyframes -------------------------------------------------------------- */
@keyframes ring{ 0%,100%{ opacity:.2; transform:scale(1); } 50%{ opacity:.42; transform:scale(1.12); } }
@keyframes wave{ from{ transform:scaleY(.28); } to{ transform:scaleY(1); } }
@keyframes heroRise{ from{ transform:translateY(18px); } to{ transform:none; } }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ---- responsive: desktop breathes ------------------------------------------- */
@media (min-width:720px){
  .flow{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .flow-node{ flex-direction:column; }
  .plist{ gap:18px; }
}
@media (min-width:900px){
  :root{ --gutter:40px; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
  .hero{ padding-top:56px; }
  .band-grid.privacy-grid{ grid-template-columns:1fr 1fr; }
  .demo-flow{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
  .demo-flow .demo-arrow{ padding:0; }
  .demo-flow .demo-arrow svg{ transform:rotate(-90deg); }
  .shots{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .shot .device{ width:100%; max-width:280px; }
  .footer-inner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .footer-links{ order:2; }
}
@media (min-width:1180px){
  .flow{ gap:30px; }
}

/* ---- legal pages ------------------------------------------------------------ */
.legal{ max-width:760px; margin:0 auto; padding:clamp(40px,7vw,80px) var(--gutter) 90px; }
.legal .back{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:.9rem; color:var(--t2); margin-bottom:30px; }
.legal .back:hover{ color:var(--t1); }
.legal h1{ font-size:clamp(1.9rem,6vw,2.6rem); margin-bottom:10px; }
.legal .updated{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--t3); margin-bottom:40px; }
.legal h2{ font-size:1.25rem; letter-spacing:-.02em; margin:38px 0 12px; }
.legal p, .legal li{ color:var(--t2); font-size:1rem; line-height:1.68; }
.legal p{ margin-bottom:14px; }
.legal ul{ padding-left:20px; margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
.legal a{ color:var(--amber); }
.legal a:hover{ text-decoration:underline; }
.legal .lead-note{ padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--border);
  color:var(--t1); font-size:.96rem; line-height:1.6; margin-bottom:30px; }

/* ---- contact page ----------------------------------------------------------- */
.contact{ max-width:600px; margin:0 auto; padding:clamp(48px,9vw,110px) var(--gutter) 90px; text-align:center; }
.contact h1{ font-size:clamp(2rem,6vw,2.8rem); margin-bottom:14px; }
.contact-sub{ font-size:clamp(1rem,3.4vw,1.15rem); color:var(--t2); line-height:1.55; max-width:36ch; margin:0 auto 42px; }
.contact-card{ background:radial-gradient(600px 320px at 50% -30%, rgba(230,162,62,.12), transparent 65%), var(--surface);
  border:1px solid var(--border-hi); border-radius:24px; padding:clamp(32px,5vw,48px) var(--gutter);
  box-shadow:0 40px 100px rgba(0,0,0,.4); }
.contact-card .label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--t3); text-transform:uppercase; margin-bottom:12px; }
.contact-email{ font-size:clamp(1.3rem,4.6vw,1.7rem); font-weight:600; color:var(--t1); letter-spacing:-.02em; }
.contact-email:hover{ color:var(--amber); }
.contact-reply{ font-size:.95rem; color:var(--t2); margin-top:24px; }
.home-link{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; margin-top:40px; font-size:.95rem; color:var(--t2); }
.home-link:hover{ color:var(--t1); }

/* ---- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .js .reveal, .reveal{ opacity:1; transform:none; }
}