/* Web3 Coin Vault — landing styles
   Local-only wallet backup. No external fonts, no external resources. */

:root{
  --bg:#050506; --ink:#0b0b0d; --panel:#0f0f12; --panel2:#141418;
  --line:#1c1c22; --line2:#2b2b33;
  --fg:#f5f5f7; --mut:#a3a3ad; --mut2:#6a6a75;
  --acc:#12e29a; --acc-d:#0bbf82; --acc-glow:rgba(18,226,154,.13);
  --warn:#ffbe3d;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
  background-image:
    radial-gradient(70% 42% at 72% -6%, rgba(18,226,154,.09), transparent 65%),
    url("../img/grid-pattern.svg");
  background-repeat:no-repeat, repeat;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.acc{color:var(--acc)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;transition:background .3s,border-color .3s}
.nav.scrolled{background:rgba(5,5,6,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .inner{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em;font-size:17px}
.brand .glyph{width:32px;height:32px;border:1px solid var(--line2);border-radius:9px;display:grid;place-items:center;background:linear-gradient(180deg,#15151a,#0b0b0e)}
.brand .glyph svg{width:17px;height:17px}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;color:var(--mut)}
.nav-links a{transition:color .16s}
.nav-links a:hover{color:var(--fg)}
.nav-cta{background:var(--acc);color:#05130d;font-weight:700;padding:10px 17px;border-radius:9px;transition:background .16s,transform .12s}
.nav-cta:hover{background:var(--acc-d)}
.nav-cta:active{transform:translateY(1px)}
.nav-burger{display:none;background:none;border:1px solid var(--line2);border-radius:8px;width:40px;height:40px;color:var(--fg);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;background:#0a0d0b}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc);animation:blink 2.4s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:760;margin:22px 0 20px}
.hero h1 .o{color:var(--mut2)}
.hero .sub{font-size:18px;color:var(--mut);max-width:520px;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 24px;border-radius:11px;transition:transform .12s,background .16s,border-color .16s,box-shadow .2s}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--acc);color:#05130d;box-shadow:0 10px 34px -8px var(--acc)}
.btn.primary:hover{background:var(--acc-d);box-shadow:0 14px 40px -8px var(--acc)}
.btn.ghost{border:1px solid var(--line2);color:var(--fg)}
.btn.ghost:hover{border-color:var(--acc)}
.btn:active{transform:translateY(1px)}
.reassure{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--mut2);display:flex;gap:20px;flex-wrap:wrap}
.reassure span{display:flex;align-items:center;gap:8px}
.reassure svg{width:15px;height:15px;color:var(--acc)}

.hero-art{position:relative}
.hero-art img{width:100%;max-width:520px;margin-left:auto;will-change:transform}
.hero-art::after{content:"";position:absolute;inset:auto 0 -30px 0;height:60px;background:radial-gradient(50% 100% at 50% 0,rgba(18,226,154,.12),transparent 70%)}

/* ---------- stats ribbon ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px}
.stats .inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 20px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{font-size:28px;font-weight:750;letter-spacing:-.02em}
.stat .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-top:4px}

/* ---------- sections ---------- */
section{padding:64px 0}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
h2{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.025em;margin:0 0 16px;font-weight:730;line-height:1.08}
.lead{color:var(--mut);font-size:16.5px;max-width:640px;margin:0}
.sec-head{max-width:680px;margin-bottom:38px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--ink));border:1px solid var(--line);border-radius:16px;padding:26px;transition:border-color .22s,transform .22s}
.card:hover{border-color:var(--line2);transform:translateY(-4px)}
.card .ic{width:42px;height:42px;border-radius:11px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--acc);margin-bottom:18px;background:#0a0d0b}
.card .ic svg{width:20px;height:20px}
.card h3{font-size:16.5px;margin:0 0 9px;letter-spacing:-.01em}
.card p{color:var(--mut);font-size:14.5px;margin:0}

/* how it works */
.how{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.how-art{display:grid;place-items:center}
.how-art img{width:82%;max-width:340px}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:14px}
.step{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--ink);display:flex;gap:18px;align-items:flex-start;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--line2);transform:translateX(4px)}
.step .no{counter-increment:s;font-family:var(--mono);font-size:13px;color:var(--acc);border:1px solid var(--line2);border-radius:8px;width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;background:#0a0d0b}
.step .no::before{content:"0" counter(s)}
.step h3{font-size:16px;margin:2px 0 6px}
.step p{color:var(--mut);font-size:14.5px;margin:0}

/* compare table */
.compare{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.compare .r{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-top:1px solid var(--line)}
.compare .r:first-child{border-top:none;background:#0c0c0f}
.compare .c{padding:16px 20px;font-size:14.5px;border-left:1px solid var(--line);display:flex;align-items:center;gap:9px}
.compare .c:first-child{border-left:none;color:var(--mut)}
.compare .head .c{color:var(--fg);font-weight:700;font-size:13.5px}
.compare .head .c.us{color:var(--acc)}
.compare .yes{color:var(--acc)}
.compare .no{color:var(--mut2)}
.compare svg{width:15px;height:15px;flex:0 0 15px}

/* warning band */
.warn-band{border:1px solid #3a2c12;background:linear-gradient(180deg,#15100a,#0f0b06);border-radius:16px;padding:26px 28px;display:flex;gap:16px;align-items:flex-start}
.warn-band svg{width:24px;flex:0 0 24px;color:var(--warn);margin-top:2px}
.warn-band h3{margin:0 0 7px;font-size:16px;color:#f0c877}
.warn-band p{margin:0;color:#d8b877;font-size:14.5px}
.warn-band b{color:#ffe1a3}

/* ---------- issues grid ---------- */
.issues-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.issue-card{background:linear-gradient(180deg,var(--panel),var(--ink));border:1px solid var(--line);border-radius:16px;padding:28px 24px;display:flex;gap:18px;align-items:flex-start;transition:border-color .22s,transform .22s;cursor:pointer}
.issue-card:hover{border-color:var(--acc);transform:translateY(-3px)}
.issue-card .ic{width:52px;height:52px;border-radius:13px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--acc);flex:0 0 52px;background:#0a0d0b}
.issue-card .ic svg{width:24px;height:24px}
.issue-card h3{font-size:16px;margin:0 0 7px;letter-spacing:-.01em}
.issue-card p{color:var(--mut);font-size:14px;margin:0;line-height:1.5}

/* final cta */
.final{text-align:center;padding:86px 28px}
.final .seal{width:118px;margin:0 auto 22px}
.final h2{max-width:16ch;margin:0 auto 16px}
.final p{color:var(--mut);margin:0 auto 30px;max-width:520px}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--mut2);font-size:13px}
footer .inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--mut)}
footer a:hover{color:var(--fg)}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}
[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-art{order:-1}
  .hero-art img{margin:0 auto;max-width:360px}
  .how{grid-template-columns:1fr;gap:28px}
  .how-art{order:-1}
  .cards{grid-template-columns:1fr}
  .stats .inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none;padding-left:0}
}
@media (max-width:640px){
  .nav-links{position:fixed;inset:64px 14px auto 14px;flex-direction:column;align-items:stretch;gap:6px;background:#0c0c0f;border:1px solid var(--line2);border-radius:14px;padding:14px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 12px;border-radius:9px}
  .nav-links a:hover{background:#141418}
  .nav-burger{display:grid;place-items:center}
  .compare{font-size:13px}
  .compare .c{padding:13px 12px}
  .issues-grid{grid-template-columns:1fr}
}