:root{
  --ink:        #0A0D14;
  --ink-deep:   #05070B;
  --panel:      #10192B;
  --panel-line: rgba(255,255,255,.08);
  --paper:      #F3F0EA;
  --muted:      #8D96AC;
  --accent:     #FF7A29;
  --accent-soft:#FFB25E;
  --accent-dim: rgba(255,122,41,.14);

  --swatch-amber:  #F4C244;
  --swatch-pink:   #F2739A;
  --swatch-green:  #7ED17A;
  --swatch-blue:   #57B8E8;
  --swatch-purple: #B48CF0;

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --max: 980px;
}

/* The lamp switch (hero icon / "L" key / Active-Off labels) swaps these to a
   cool, off-state palette, same idea as the app's own dark icon variant. */
html[data-lamp="off"]{
  --accent:     #6E96D9;
  --accent-soft:#9FBBE8;
  --accent-dim: rgba(110,150,217,.16);
}
html[data-lamp="off"] .hero-icon-img.light{ opacity:0; }
html[data-lamp="off"] .hero-icon-img.dark{ opacity:1; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-brand{
  display:flex; align-items:center; gap:.6em;
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--paper);
}
.nav-brand img{ width:28px; height:28px; border-radius:7px; }
.nav-links{
  display:flex; align-items:center; gap:1.6em;
  font-size:.88rem;
  color:var(--muted);
}
.nav-links a{ text-decoration:none; transition:color .2s ease; }
.nav-links a:hover{ color:var(--paper); }
.nav-links .divider{ width:1px; height:16px; background:var(--panel-line); }

/* ---------- hero ---------- */
.hero{
  padding:clamp(56px, 10vw, 108px) 0 clamp(40px, 8vw, 72px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; left:50%; top:-10%;
  width:60vw; height:60vw; max-width:640px; max-height:640px;
  transform:translateX(-50%);
  background:radial-gradient(circle, var(--accent-dim) 0%, transparent 68%);
  pointer-events:none;
  transition:background .5s ease;
}
.hero-icon{
  position:relative;
  width:clamp(96px, 16vw, 132px); height:clamp(96px, 16vw, 132px);
  margin:0 auto 28px;
  padding:0; border:none; background:none; cursor:pointer;
  border-radius:26%;
  box-shadow:0 0 70px -8px rgba(110,150,217,.55), 0 20px 40px -12px rgba(0,0,0,.6);
  transition:box-shadow .5s ease, transform .2s ease;
}
html:not([data-lamp="off"]) .hero-icon{
  box-shadow:0 0 70px -8px rgba(255,122,41,.55), 0 20px 40px -12px rgba(0,0,0,.6);
}
.hero-icon:hover{ transform:scale(1.03); }
.hero-icon:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:6px; }
.hero-icon-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:26%;
  transition:opacity .5s ease;
}
.hero-icon-img.dark{ opacity:0; }
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 5.2vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  max-width:15ch;
  margin-inline:auto;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--accent-soft), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:background .5s ease;
}
.hero p.lede{
  font-size:clamp(1rem, 2vw, 1.15rem);
  color:var(--muted);
  max-width:52ch;
  margin:0 auto 1.8em;
}
.backronym{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-soft);
  margin:0 0 2em;
  transition:color .5s ease;
}
.hero-meta{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.store-btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.8em 1.5em;
  border-radius:100px;
  background:var(--accent);
  color:#14100B;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  box-shadow:0 8px 28px -8px var(--accent);
  transition:background .5s ease, box-shadow .5s ease, transform .2s ease;
}
.store-btn svg{ width:18px; height:18px; flex:none; }
.store-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -8px var(--accent); }
.store-btn:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:4px; }
.platform-note{
  font-size:.85rem;
  color:var(--muted);
}

/* ---------- section shell ---------- */
section{ padding:clamp(48px, 8vw, 88px) 0; }
.section-head{ text-align:center; max-width:56ch; margin:0 auto clamp(32px,6vw,52px); }
.section-head .eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .8em;
  transition:color .5s ease;
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
.section-head p{ color:var(--muted); margin:0; font-size:.98rem; }

/* ---------- demo ---------- */
.demo-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:clamp(24px,4vw,40px);
  font-size:clamp(1rem, 1.8vw, 1.15rem);
  line-height:1.9;
  color:#D8DDEA;
}
.demo-card .hl{
  padding:.05em .15em;
  border-radius:.3em;
  font-weight:600;
}
.hl-fill{ background:var(--swatch-amber); color:#221B02; }
.hl-underline{ border-radius:0; border-bottom:3px solid var(--swatch-blue); color:var(--paper); }
.hl-outline{ box-shadow:0 0 0 2px var(--swatch-pink); color:var(--paper); }
.demo-legend{
  display:flex; flex-wrap:wrap; gap:1.6em;
  justify-content:center;
  margin-top:24px;
  font-size:.82rem;
  color:var(--muted);
}
.demo-legend span{ display:inline-flex; align-items:center; gap:.5em; }
.demo-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.demo-legend .i-fill{ background:var(--swatch-amber); }
.demo-legend .i-underline{ background:var(--swatch-blue); }
.demo-legend .i-outline{ background:var(--swatch-pink); }

/* ---------- feature grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:18px;
  padding:26px 24px;
}
.card .icon{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--accent-dim);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  transition:background .5s ease, color .5s ease;
}
.card .icon svg{ width:20px; height:20px; }
.card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 .5em;
}
.card p, .card ul{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
}
.card ul{ padding-left:1.1em; }
.card li{ margin:.3em 0; }
.card code{
  font-family:var(--font-mono);
  font-size:.85em;
  background:rgba(255,255,255,.06);
  padding:.15em .4em;
  border-radius:5px;
  color:var(--accent-soft);
  transition:color .5s ease;
}
.swatches{ display:flex; gap:6px; margin-top:14px; }
.swatches i{ width:16px; height:16px; border-radius:5px; display:block; }

/* ---------- use cases ---------- */
.usecase-card .persona{
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.usecase-card .persona .icon{
  flex:none;
  width:34px; height:34px;
  border-radius:10px;
  background:var(--accent-dim);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  transition:background .5s ease, color .5s ease;
}
.usecase-card .persona .icon svg{ width:18px; height:18px; }
.usecase-card .persona span:last-child{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.usecase-card p{
  color:#D8DDEA;
  font-size:.95rem;
  line-height:1.6;
}
.usecase-card .quote-mark{
  color:var(--accent-soft);
  font-family:var(--font-display);
  font-size:1.3em;
  line-height:0;
  margin-right:.05em;
  transition:color .5s ease;
}

/* ---------- privacy ---------- */
.privacy-card{
  background:linear-gradient(160deg, var(--panel), var(--ink-deep));
  border:1px solid var(--panel-line);
  border-radius:22px;
  padding:clamp(28px,5vw,48px);
}
.privacy-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.privacy-list li{
  display:flex; gap:12px;
  font-size:.94rem;
  color:#DDE1EC;
}
.privacy-list svg{
  flex:none; width:20px; height:20px;
  color:var(--accent);
  margin-top:2px;
  transition:color .5s ease;
}

/* ---------- on/off strip ---------- */
.onoff{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,6vw,56px);
  flex-wrap:wrap;
}
.onoff-item{
  width:clamp(120px, 22vw, 170px);
  text-align:center;
}
.onoff-item img{
  display:block;
  width:76px; height:76px; border-radius:20%;
  margin:0 auto 10px;
}
.onoff-label{
  display:block;
  width:100%;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  background:none; border:none; padding:0;
  cursor:pointer;
  transition:color .2s ease;
}
.onoff-label:hover{ color:var(--paper); }
.onoff-arrow{ color:var(--panel-line); font-size:1.4rem; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--panel-line);
  padding:32px 0;
}
footer .wrap{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  font-size:.82rem;
  color:var(--muted);
}
footer .foot-links{ display:flex; gap:1.4em; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--paper); }

/* ---------- simple content pages (privacy/support) ---------- */
.content{
  padding:clamp(48px,8vw,72px) 0 clamp(64px,10vw,96px);
}
.content .wrap{ max-width:720px; }
.content h1{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4vw, 2.3rem);
  margin:0 0 .3em;
}
.content .updated{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 2.2em;
}
.content h2{
  font-family:var(--font-display);
  font-size:1.2rem;
  margin:2em 0 .5em;
}
.content h3{
  font-family:var(--font-display);
  font-size:1rem;
  margin:1.6em 0 .3em;
}
.content p, .content li{
  color:#D8DDEA;
  font-size:.98rem;
}
.content ul{ padding-left:1.3em; }
.content a.inline{ color:var(--accent-soft); text-decoration:underline; }
.mail-card{
  margin-top:24px;
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:14px;
  padding:16px 22px;
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--accent-soft);
  text-decoration:none;
  transition:color .5s ease;
}

@media (max-width:640px){
  .nav-links{ gap:1em; font-size:.82rem; }
}

@media (max-width:520px){
  .nav-links .divider,
  .nav-links .hub-link{ display:none; }
}