/* Release & Dream — shared styles for PRO and Reset pages
   Fonts: Marcellus (display, echoes the logo's classic capitals) + Outfit (body) */
@font-face{font-family:"Marcellus";font-weight:400;font-display:swap;src:url(fonts/marcellus-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:300;font-display:swap;src:url(fonts/outfit-300.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:400;font-display:swap;src:url(fonts/outfit-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:500;font-display:swap;src:url(fonts/outfit-500.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-display:swap;src:url(fonts/outfit-600.woff2) format("woff2")}


:root{
  /* PRO: plum night, champagne glow (from the PRO logo) */
  --bg:#12091f;
  --bg-2:#1d1030;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --line:rgba(240,205,180,.18);
  --accent:#f0cdb4;          /* champagne */
  --accent-2:#e7a98a;        /* peach glow */
  --accent-3:#a45ad0;        /* orchid */
  --glow:rgba(231,169,138,.35);
  --text:#f6ece6;
  --muted:#b9a8bf;
  --on-accent:#1a0d26;
  --ok:#9fd8b8;

  --display:"Marcellus", "Cinzel", Georgia, serif;
  --sans:"Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm:12px; --r-md:18px; --r-lg:28px;
}
body.reset{
  /* RESET: midnight blue, ice and silver (from the Reset logo) */
  --bg:#050b22;
  --bg-2:#0b1a45;
  --line:rgba(190,212,255,.2);
  --accent:#e6eeff;
  --accent-2:#8fb4ff;
  --accent-3:#2f63e8;
  --glow:rgba(143,180,255,.35);
  --text:#eef3ff;
  --muted:#a9b6d6;
  --on-accent:#06102e;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(900px 600px at 80% -10%, color-mix(in srgb, var(--accent-3) 28%, transparent), transparent 70%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;font-synthesis:none;
  padding-bottom:env(safe-area-inset-bottom,0);
}
a{color:var(--accent)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;letter-spacing:.01em}
p{margin:0}
.muted{color:var(--muted)}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0)) 20px 10px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 18px var(--glow)}
.brand span{font-family:var(--display);font-size:18px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;
}
.pill b{color:var(--accent);font-weight:600}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--on-accent);font:600 16px var(--sans);text-decoration:none;
  box-shadow:0 8px 30px var(--glow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 36px var(--glow)}
.btn:active{transform:none}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;color:var(--accent);font:500 15px var(--sans);cursor:pointer;padding:10px;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;
}

/* Chips (tap-to-choose blocks) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;padding:0 16px;border-radius:14px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);font:400 15px var(--sans);
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--on-accent);border-color:transparent;font-weight:500;
}

/* Hero with the logo artwork as background */
.hero-banner{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:280px;display:flex;align-items:flex-end;
  background:var(--bg-2) center 35%/cover no-repeat;
  border:1px solid var(--line);
}
.hero-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--bg) 70%, transparent) 50%, color-mix(in srgb, var(--bg) 96%, transparent) 72%);
}
.hero-banner > *{position:relative;z-index:1}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  padding:12px 18px;border-radius:999px;font-size:15px;z-index:100;
  box-shadow:0 10px 40px rgba(0,0,0,.4);transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

footer.site{padding:40px 20px 36px;text-align:center;color:var(--muted);font-size:13px}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:10px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== v3: app shell (tab bar, pop-ups, coins) ===== */
body.has-tabs{padding-bottom:calc(84px + env(safe-area-inset-bottom,0))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabbar a{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;
  color:var(--muted);text-decoration:none;font-size:12px;border-radius:14px}
.tabbar a svg{width:24px;height:24px}
.tabbar a[aria-current="page"]{color:var(--accent);background:rgba(255,255,255,.05)}
.coin{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-weight:600;text-decoration:none}
.coin i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;color:#5a3412;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#f5c45a 45%,#c98a1b 100%);box-shadow:0 0 12px rgba(245,196,90,.55),inset 0 -2px 3px rgba(0,0,0,.25)}
.pop-bg{position:fixed;inset:0;z-index:80;background:rgba(5,3,12,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.pop-bg.open{opacity:1;pointer-events:auto}
.pop{position:fixed;z-index:81;left:50%;bottom:0;width:min(560px,100%);max-height:88vh;overflow:auto;transform:translate(-50%,105%);visibility:hidden;
  background:linear-gradient(180deg,#24123a,#150a24);border:1px solid rgba(240,205,180,.25);border-radius:28px 28px 0 0;
  padding:24px 22px calc(24px + env(safe-area-inset-bottom,0));transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.pop.open{transform:translate(-50%,0);visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
@media(min-width:720px){.pop{bottom:auto;top:50%;border-radius:28px;transform:translate(-50%,-44%);opacity:0;transition:transform .3s,opacity .3s,visibility 0s .3s}.pop.open{transform:translate(-50%,-50%);opacity:1;transition:transform .3s,opacity .3s}}
.pop-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:20px;cursor:pointer}
.pop h2{font-size:26px;margin:4px 40px 8px 0}
.pop .k{color:var(--accent-2);font-size:13px;font-weight:500;margin:0}
.pop p{color:var(--muted)}
.remind{position:relative;z-index:35;display:flex;align-items:center;gap:12px;margin:10px auto 0;max-width:720px;width:calc(100% - 40px);padding:12px 12px 12px 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(164,90,208,.3),rgba(231,169,138,.2));border:1px solid rgba(240,205,180,.35);font-size:15px;color:var(--text)}
.remind-ic{font-size:20px;color:var(--accent)}
.remind b{color:var(--accent)}
.remind button{margin-left:auto;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:18px;cursor:pointer}

/* the R&D coin: every token pill and price uses the same coin image */
.coin i{background:url(/assets/coin.webp) center/contain no-repeat !important;font-size:0 !important;color:transparent !important;box-shadow:none !important;border:0 !important;width:26px;height:26px}
.tk{display:inline-block;width:1.15em;height:1.15em;margin-right:.3em;vertical-align:-.2em;background:url(/assets/coin.webp) center/contain no-repeat}

body.has-tabs .toast{bottom:calc(96px + env(safe-area-inset-bottom,0))}