/* Relog brand tokens — mirrored from lib/config/saboot_tokens.dart so the site
   and the app cannot drift apart. Update both together. */
:root{
  --bg:#F3F1FC; --card:#fff; --ink:#241C46; --ink2:#6F67A0; --line:#E7E3FB;
  --indigo:#4B3EDC; --indigo-dark:#3225B0; --peri:#8E86F5;
  --sun:#FFC53D; --leaf:#2FBF8F; --clay:#E0714C; --alarm:#E03A2F;
  --radius:18px; --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6; font-size:17px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:var(--indigo)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.2rem); font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2rem); font-weight:800}
.muted{color:var(--ink2)}
header{padding:20px 0; border-bottom:1px solid var(--line); background:var(--card)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; text-decoration:none; color:var(--ink)}
.mark{width:34px;height:34px;border-radius:10px;background:var(--indigo);display:grid;place-items:center;color:#fff;font-weight:800}
.nav a.link{color:var(--ink2); text-decoration:none; margin-left:18px; font-weight:700; font-size:.95rem}
.nav a.link:hover{color:var(--indigo)}
.btn{display:inline-block;background:var(--indigo);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:12px;font-weight:800;border:none;cursor:pointer}
.btn:hover{background:var(--indigo-dark)}
.btn.ghost{background:transparent;color:var(--indigo);border:2px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.grid{display:grid;gap:18px}
@media(min-width:760px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c2{grid-template-columns:repeat(2,1fr)}}
footer{border-top:1px solid var(--line);margin-top:64px;padding:32px 0;background:var(--card)}
footer a{color:var(--ink2);text-decoration:none;margin-right:18px;font-weight:700;font-size:.92rem}
footer a:hover{color:var(--indigo)}
.prose{max-width:760px;margin:0 auto;padding:44px 0}
.prose h2{margin-top:1.6em}
.prose li{margin:.35em 0}
.pill{display:inline-block;background:#EDEBFB;color:var(--indigo);border-radius:999px;
  padding:6px 14px;font-weight:800;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}

/* ── Motion ──────────────────────────────────────────────────────────────
   Every animation below is decorative. All of it is disabled under
   prefers-reduced-motion, and no content depends on it to be readable. */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ringpulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes fillbar{from{width:0}}

.matka{width:190px;height:190px;animation:bob 4.6s ease-in-out infinite;will-change:transform}
.matka .mk-eyes{animation:blink 5.2s infinite;transform-origin:center}
.halo{position:absolute;inset:0;margin:auto;width:150px;height:150px;border-radius:50%;
  border:2px solid var(--peri);animation:ringpulse 3.4s ease-out infinite}
.hero-art{position:relative;display:grid;place-items:center;min-height:230px}

.shot{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;
  box-shadow:0 20px 44px rgba(36,28,70,.10)}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:#FAF9FE;margin-bottom:9px}
.row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:#E8F1FF}
.row.done{opacity:.55}
.row.done .t{text-decoration:line-through}
.t{font-weight:800;font-size:.92rem}
.s{font-size:.78rem;color:var(--ink2)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--leaf);animation:fillbar 1.4s ease-out both}
.bar.warn i{background:var(--sun)}

.step{position:relative;padding-left:54px}
.step .n{position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:12px;background:var(--indigo);
  color:#fff;display:grid;place-items:center;font-weight:800}
.quote{border-left:4px solid var(--peri);padding:6px 0 6px 18px;font-size:1.15rem;font-weight:700}
.stat{font-size:2.3rem;font-weight:800;color:var(--indigo);line-height:1}

@media (prefers-reduced-motion: reduce){
  .matka,.matka .mk-eyes,.halo,.bar i{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}