/* =========================================================================
    Flints — landing (pre-login) page
   Tokens are inherited from style.css (:root / [data-theme="dark"]).
   Everything here is scoped under .landing to avoid touching app/auth CSS.
   ========================================================================= */

.landing{ background: var(--bg); color: var(--ink); overflow-x:hidden; }
.landing .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

@media (max-width:640px){
  .landing .wrap{ padding:0 20px; }
}

/* ---- motion base -------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .landing *{ animation:none !important; }
}

/* ---- nav ------------------------------------------------------------ */
.landing-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.landing-nav .wrap{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo{ display:flex; align-items:center; gap:9px; font-family:var(--font-serif); font-weight:600; font-size:18px; }
.nav-logo .icon{ color:var(--accent); width:21px; height:21px; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-soft); font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
@media (max-width:720px){ .nav-links{ display:none; } }

/* ---- google button (shared shape, two sizes) ------------------------ */
.btn-google{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); color:var(--ink);
  font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow); white-space:nowrap;
}
.btn-google:hover{ transform:translateY(-1px); border-color:var(--accent); }
.btn-google svg{ width:18px; height:18px; flex-shrink:0; }
.btn-google.sm{ padding:8px 14px; font-size:13px; }
.btn-google.sm svg{ width:15px; height:15px; }
.btn-google.on-dark{ background:#25231D; border-color:#3A362F; color:#FAF8F3; }
.btn-google.on-dark:hover{ border-color:var(--accent); }

/* ---- hero ------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:calc(100svh - 64px); padding:64px 0;
}
@media (max-width:640px){ .hero{ min-height:calc(100svh - 64px); padding:48px 0; } }

.hero-copy{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:680px; margin:0 auto; }
.hero-copy h1{
  font-family:var(--font-serif); font-weight:600; letter-spacing:-0.015em;
  font-size:clamp(32px, 5vw, 56px); line-height:1.08; margin:0 0 22px;
  animation:hero-rise .8s ease both; animation-delay:.05s;
}
.hero-copy h1 em{ font-style:italic; color:var(--accent); }
.hero-copy .lede{
  font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:480px; margin:0 auto 32px;
  animation:hero-rise .8s ease both; animation-delay:.18s;
}
.hero-copy .lede code{ background:var(--accent-soft); color:var(--danger); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:14px; }
.hero-cta{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  animation:hero-rise .8s ease both; animation-delay:.3s;
}
.hero-cta .hint{ font-size:13px; color:var(--muted); }
.hero-scroll{
  display:inline-flex; align-items:center; gap:6px; margin-top:28px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; background:none; border:none; padding:0;
  animation:hero-rise .8s ease both; animation-delay:.42s;
}
.hero-scroll .icon{ width:14px; height:14px; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ---- hero visual: ambient constellation tucked into the top-right corner ---- */
.hero-visual{
  position:absolute; top:-16%; right:-14%; width:min(720px, 80vw); height:min(720px, 80vw);
  z-index:0; pointer-events:none; opacity:.38;
  -webkit-mask-image:radial-gradient(circle at 62% 38%, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle at 62% 38%, #000 0%, transparent 70%);
}
@media (max-width:640px){
  .hero-visual{ width:130vw; height:130vw; top:-22%; right:-38%; opacity:.26; }
}
.hero-visual svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hero-visual .edge{
  stroke:var(--border); stroke-width:1.2; fill:none;
  stroke-dasharray:6; stroke-dashoffset:6; animation:draw 1.4s ease forwards;
}
.hero-visual .node{ fill:var(--accent); opacity:0; animation:pop .5s ease forwards, pulse 3.2s ease-in-out infinite; transform-origin:center; }
.hero-visual .node.big{ fill:var(--accent); }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ to{ opacity:1; } }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }

/* ---- section shell ---------------------------------------------------- */
.landing section{
  min-height:100svh; display:flex; align-items:center;
  padding:64px 0; border-top:1px solid var(--border-soft); scroll-margin-top:80px;
}
.landing section .wrap{ width:100%; }
.section-head{ max-width:580px; margin:0 0 44px; }
@media (max-width:640px){ .landing section{ padding:48px 0; } }
.section-head .kicker{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.section-head h2{ font-family:var(--font-serif); font-size:clamp(26px,3vw,34px); font-weight:600; letter-spacing:-.01em; margin:0 0 12px; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin:0; }

/* ---- features ----------------------------------------------------------- */
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.feature-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 24px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border); }
.feature-card .icon-wrap{
  width:40px; height:40px; border-radius:var(--radius-md); background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.feature-card .icon-wrap .icon{ width:19px; height:19px; }
.feature-card h3{ font-size:16px; font-weight:600; margin:0 0 8px; }
.feature-card p{ font-size:13.8px; line-height:1.65; color:var(--ink-soft); margin:0; }

/* ---- how it works --------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step .step-num{ font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--accent); margin:0 0 14px; }
.step h3{ font-size:17px; font-weight:600; margin:0 0 8px; }
.step p{ font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0; }
.step p code{ background:var(--accent-soft); color:var(--danger); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:13px; }

/* ---- final cta -------------------------------------------------------- */
.cta-panel{
  background:var(--ink); color:#FAF8F3; border-radius:24px;
  padding:64px 48px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;
}
[data-theme="dark"] .cta-panel{ background:#0E0D0B; }
.cta-panel h2{ font-family:var(--font-serif); font-size:clamp(26px,3.4vw,38px); font-weight:600; letter-spacing:-.01em; margin:0; max-width:560px; }
.cta-panel p{ color:#C9C3B7; font-size:15px; margin:0; }

/* ---- footer ------------------------------------------------------------ */
.landing-footer{ border-top:1px solid var(--border-soft); padding:32px 0 40px; }
.landing-footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.landing-footer .foot-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-serif); font-weight:600; font-size:14.5px; color:var(--ink-soft); }
.landing-footer .foot-brand .icon{ width:15px; height:15px; color:var(--accent); }
.landing-footer .foot-note{ font-size:12.5px; color:var(--muted); }