/* ============================================================
   BasisYield — "Sunrise" design system
   Warm, light, confident DeFi. Bricolage Grotesque + Hanken Grotesk + IBM Plex Mono.
   Shared by Home / Dashboard / Strategy.
   ============================================================ */

:root{
  --bg:#FFFCF6; --surface:#FFFFFF; --ink:#1A1613; --muted:#6B6056; --faint:#9C9082;
  --line:#EEE4D4; --line2:#E4D7C2;
  --accent:#E2552E; --amber:#F2993C; --green:#1F8B63; --red:#C0442A;
  --peach:#FCE6D0; --peach2:#FBD8B8;
  --soft:rgba(226,85,46,.10); --greensoft:rgba(31,139,99,.12); --redsoft:rgba(192,68,42,.10); --ambersoft:rgba(242,153,60,.14);
  --grad:linear-gradient(135deg,#F2993C,#E2552E);
  --grad-block:linear-gradient(160deg,#FCEAD8,#FBDCC0);
  --shadow-lg:0 30px 70px -30px rgba(120,60,20,.42);
  --shadow-md:0 18px 44px -22px rgba(120,60,20,.34);
  --shadow-sm:0 2px 10px -4px rgba(120,60,20,.18);
}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}
a{color:inherit;text-decoration:none;}
.disp{font-family:'Bricolage Grotesque',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
.accent{color:var(--accent);} .green{color:var(--green);} .red{color:var(--red);} .muted{color:var(--muted);}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 32px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;
  font-size:15px;cursor:pointer;border:2px solid transparent;font-family:'Hanken Grotesk',sans-serif;
  transition:transform .12s ease, filter .15s ease, background .15s;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;}
.btn-white{background:#fff;color:var(--accent);}
.btn-clear{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5);}
.btn-sm{padding:9px 16px;font-size:14px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,252,246,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;gap:30px;padding:16px 0;}
.brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.03em;
  display:flex;align-items:center;gap:10px;}
.mark{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:19px;font-family:'Bricolage Grotesque',sans-serif;flex:none;}
.nav-links{display:flex;gap:26px;font-size:15px;color:var(--muted);font-weight:600;}
.nav-links a{padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-color:var(--accent);}
.nav-spacer{flex:1;}
@media (max-width:820px){ .nav-links{display:none;} }

/* ---------- pills / badges / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}
.pill .dot.amber{background:var(--amber);} .pill .dot.red{background:var(--red);}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--soft);padding:6px 13px;border-radius:999px;}
.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:800;padding:5px 11px;border-radius:999px;}
.chip.up{background:var(--greensoft);color:var(--green);}
.chip.down{background:var(--redsoft);color:var(--red);}
.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:999px;color:#fff;}
.badge.green{background:var(--green);} .badge.amber{background:var(--amber);} .badge.red{background:var(--red);}

/* ---------- type scale ---------- */
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:64px;line-height:.98;letter-spacing:-.035em;text-wrap:balance;}
.h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:44px;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;}
.h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.02em;}
.lead{font-size:19px;color:var(--muted);line-height:1.55;font-weight:500;}
.u-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@media (max-width:720px){ .h1{font-size:44px;} .h2{font-size:34px;} }

/* ---------- sections / blocks ---------- */
.section{padding:84px 0 0;}
.block{border-radius:30px;}
.block-peach{background:var(--grad-block);}
.block-ink{background:var(--ink);color:#fff;}
.block-grad{background:var(--grad);color:#fff;}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;}
.card-bold{background:var(--surface);border:1.5px solid var(--ink);border-radius:20px;padding:24px;}
.card-soft{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px;}

/* ---------- footer ---------- */
.footer{padding:40px 0 48px;border-top:1px solid var(--line);margin-top:88px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  color:var(--faint);font-size:13.5px;font-weight:500;}
.footer .brand{font-size:17px;}
.footer-links{display:flex;gap:22px;font-weight:600;color:var(--muted);}
.footer-links a:hover{color:var(--ink);}

/* ---------- generic flow diagram (3-step) ---------- */
.flow{display:flex;align-items:stretch;gap:7px;}
.flow .fb{flex:1;background:rgba(255,255,255,.7);border:1.5px solid var(--ink);border-radius:11px;padding:10px 8px;text-align:center;}
.flow .fb .t{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:800;}
.flow .fb .s{font-size:9.5px;color:var(--muted);font-weight:600;display:block;margin-top:2px;line-height:1.25;}
.flow .fb.win{background:var(--ink);color:#fff;}
.flow .fb.win .s{color:rgba(255,255,255,.65);}
.flow .fop{display:grid;place-items:center;font-weight:800;color:var(--ink);width:14px;flex:none;}

/* ---------- spark / sr-card shared ---------- */
.livepill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 12px;}
.livepill .d{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}
.livepill .d.amber{background:var(--amber);}

/* reveal-on-scroll — base state is ALWAYS visible; .in only plays an entrance
   animation. Content can never be stuck hidden if the observer never fires. */
@keyframes fc-rise{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
.js .reveal.in{ animation:fc-rise .6s ease both; }
@media (prefers-reduced-motion:reduce){ .js .reveal.in{ animation:none; } }