/* ===== COLOURS (change here only) ===== */
:root{
  --paper:#F2F6F3;
  --card:#FFFFFF;
  --ink:#1A1A1A;
  --ink-2:#4A5650;
  --line:#D5E0DA;
  --emerald:#1FBA6B;
  --emerald-deep:#0F7A4C;
  --btc:#F7931A;          /* Bitcoin orange */
  --night:#1A1A1A;
  --radius:18px;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:17px/1.75 var(--body)}
h1,h2,h3{font-family:var(--display);line-height:1.2}
p{max-width:68ch}

/* ===== TOP (centered) ===== */
.hero{padding:48px 20px 44px;text-align:center;background:linear-gradient(180deg,#E3F3EA,var(--paper))}
.coins{display:flex;justify-content:center;gap:16px;margin-bottom:22px}
.coin{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;font:800 1.9rem var(--display);color:#fff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 12px 24px -10px rgba(26,26,26,.45);animation:float 3.4s ease-in-out infinite}
.coin.btc{background:var(--btc)}
.coin.alt{background:var(--emerald);font-size:1.15rem;letter-spacing:.04em;animation-delay:-1.7s}
.tag{display:inline-block;font:700 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-deep);background:#fff;padding:5px 14px;border-radius:999px;margin-bottom:14px}
h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
h1 span{color:var(--emerald-deep)}
.lead{margin:0 auto;color:var(--ink-2);font-size:1.12rem}

/* ===== CONTENT ===== */
.page{max-width:820px;width:92%;margin:0 auto;padding:10px 0 60px;display:grid;gap:22px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px}
.btc-box{border-top:6px solid var(--btc)}
.alt-box{border-top:6px solid var(--emerald)}
h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,3.4vw,1.8rem);font-weight:800;margin-bottom:14px}
.dot{width:16px;height:16px;border-radius:50%;flex:none}
.dot.btc{background:var(--btc)}
.dot.alt{background:var(--emerald)}
h3{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.box p{color:var(--ink-2);margin-bottom:14px}
.box ul{margin:0;padding-left:22px;color:var(--ink-2)}
.box li{margin-bottom:.55em}
.box li b{color:var(--ink)}
.btc-box li::marker{color:var(--btc)}

/* altcoin types */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.mini{background:var(--paper);border-radius:14px;padding:16px 18px;border-left:5px solid var(--emerald)}
.mini p{margin:0;font-size:.93rem}

/* comparison table */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--night);color:#fff;font-size:.85rem}
th:nth-child(2){background:var(--btc);color:#1A1A1A}
th:nth-child(3){background:var(--emerald);color:#0A2A1A}
td:first-child{font-weight:700}
td{color:var(--ink-2)}
tr:last-child td{border-bottom:0}

/* risk note */
.warn{background:#FFF4D6;border:1px solid #F3D88B;border-left:8px solid #F5B301;border-radius:var(--radius);padding:18px 24px}
.warn b{display:block;color:#6A4B00;margin-bottom:2px}
.warn p{margin:0;color:#6A4B00}

/* tips */
.tips{list-style:none;counter-reset:t;display:grid;gap:10px;padding:0!important}
.tips li{counter-increment:t;display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:12px;padding:12px 16px;margin:0!important}
.tips li::before{content:counter(t);display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--emerald);color:#fff;font-weight:800}

/* faq */
details{background:var(--paper);border-radius:12px;padding:13px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700}
details p{margin:10px 0 0!important}

/* footer */
footer{background:var(--night);color:#B9C7BF;text-align:center;padding:26px 20px 38px;font-size:.9rem}

/* ===== MOTION + MOBILE ===== */
@keyframes float{50%{transform:translateY(-10px)}}
@media(max-width:600px){
  body{font-size:16px}
  .box{padding:22px 20px}
  .coin{width:66px;height:66px;font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}