/* Parolado — coming-soon landing. Palette from docs/04_DESIGN_SYSTEM.md. */
:root {
  --bg:#F1F2ED; --bg-2:#E6E7E2; --ink:#34363A; --ink-soft:#555954; --muted:#7F7F7D;
  --faint:#D5D6D1; --accent:#708C6A; --accent-deep:#5C7556; --accent-soft:#BEC2BD; --glow:112,140,106;
  --measure:58ch;
  --step:clamp(2.5rem,1.55rem + 3.9vw,4.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#2F3135; --bg-2:#34363A; --ink:#ECEDE7; --ink-soft:#BCBFB8; --muted:#8F918B;
    --faint:#43454A; --accent:#8FA988; --accent-deep:#A6BE9F; --accent-soft:#61705C; --glow:143,169,136; }
}
:root[data-theme="light"] { --bg:#F1F2ED; --bg-2:#E6E7E2; --ink:#34363A; --ink-soft:#555954; --muted:#7F7F7D;
  --faint:#D5D6D1; --accent:#708C6A; --accent-deep:#5C7556; --accent-soft:#BEC2BD; --glow:112,140,106; }
:root[data-theme="dark"] { --bg:#2F3135; --bg-2:#34363A; --ink:#ECEDE7; --ink-soft:#BCBFB8; --muted:#8F918B;
  --faint:#43454A; --accent:#8FA988; --accent-deep:#A6BE9F; --accent-soft:#61705C; --glow:143,169,136; }

* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease);
}
.atmos {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40rem 40rem at 10% -10%, rgba(var(--glow),.17), transparent 60%),
    radial-gradient(34rem 34rem at 96% 4%, rgba(var(--glow),.07), transparent 66%);
  transition:background .5s var(--ease);
}
.shell {
  position:relative; z-index:1; max-width:66rem; margin:0 auto;
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,5vw,3.6rem) 3rem;
  display:flex; flex-direction:column; min-height:100vh;
}

.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark { display:inline-flex; align-items:baseline; gap:.34rem; font-size:1.18rem; font-weight:650; letter-spacing:-.015em; color:var(--ink); text-decoration:none; }
.wordmark .dot { width:.46rem; height:.46rem; border-radius:50%; background:var(--accent); align-self:center; box-shadow:0 0 0 0 rgba(var(--glow),.5); animation:pulse 3.4s var(--ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(var(--glow),.45);} 70%{box-shadow:0 0 0 .5rem rgba(var(--glow),0);} 100%{box-shadow:0 0 0 0 rgba(var(--glow),0);} }

.controls { display:flex; align-items:center; gap:.55rem; }
.seg { display:inline-flex; align-items:center; border:1px solid var(--faint); border-radius:999px; padding:2px; background:color-mix(in srgb,var(--bg-2) 60%,transparent); backdrop-filter:blur(6px); }
.seg button { appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--muted); padding:.28rem .62rem; border-radius:999px; line-height:1; transition:color .25s, background .25s; }
.seg button[aria-pressed="true"] { background:var(--accent); color:color-mix(in srgb,var(--bg) 90%,#000); }
.icbtn { appearance:none; cursor:pointer; font:inherit; width:2.15rem; height:2.15rem; border-radius:999px; border:1px solid var(--faint); background:color-mix(in srgb,var(--bg-2) 60%,transparent); color:var(--ink-soft); display:grid; place-items:center; transition:color .25s, border-color .25s; backdrop-filter:blur(6px); }
.icbtn:hover { color:var(--accent); border-color:var(--accent-soft); }
.icbtn svg { width:1.05rem; height:1.05rem; display:block; }
.icbtn .moon { display:none; }
:root[data-theme="dark"] .icbtn .sun { display:none; }
:root[data-theme="dark"] .icbtn .moon { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icbtn .sun{display:none;} :root:not([data-theme="light"]) .icbtn .moon{display:block;} }

main { flex:1; display:flex; flex-direction:column; }
.hero { padding:clamp(3rem,11vh,7rem) 0 clamp(2.4rem,7vh,4.6rem); max-width:44rem; }
.eyebrow { margin:0 0 1.15rem; font-size:.78rem; font-weight:650; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before { content:""; width:1.7rem; height:1px; background:var(--accent-soft); }
h1 { margin:0 0 1.3rem; font-size:var(--step); line-height:1.04; font-weight:680; letter-spacing:-.03em; text-wrap:balance; color:var(--ink); }
h1 .soft { color:var(--accent); }
.promise { margin:0 0 1.9rem; max-width:var(--measure); font-size:clamp(1.05rem,.95rem + .55vw,1.3rem); line-height:1.55; color:var(--ink-soft); }
.stay { margin:0; font-size:.95rem; color:var(--muted); display:inline-flex; align-items:center; gap:.6rem; }
.stay::before { content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); flex:none; }

.points {
  margin-top:auto;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.7rem,3vw,2.6rem) clamp(2rem,4vw,3.4rem);
  border-top:1px solid var(--faint);
  padding-top:clamp(2.2rem,5vh,3.2rem);
}
.point h2 { margin:0 0 .5rem; font-size:1.08rem; font-weight:640; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:baseline; gap:.55rem; }
.point h2::before { content:""; width:.48rem; height:.48rem; flex:none; background:var(--accent); border-radius:2px; transform:rotate(45deg) translateY(-1px); }
.point p { margin:0; font-size:.97rem; line-height:1.58; color:var(--ink-soft); max-width:32ch; }

footer { margin-top:clamp(2.6rem,6vh,4rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); }
footer .mark { font-weight:640; color:var(--ink-soft); letter-spacing:-.01em; }

a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

[data-reveal] { opacity:0; transform:translateY(14px); }
.in [data-reveal] { opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.in [data-reveal="1"] { transition-delay:.05s; }
.in [data-reveal="2"] { transition-delay:.13s; }
.in [data-reveal="3"] { transition-delay:.21s; }
.in [data-reveal="4"] { transition-delay:.29s; }
.in .points [data-reveal] { transition-delay:.38s; }

@media (max-width:860px) { .points { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .points { grid-template-columns:1fr; gap:1.6rem; } .point p { max-width:none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  body, .atmos { transition:none; }
}