html,body {
  margin:0;
  height:100%;
  background:var(--bg) url('./assets/ethpb-bg-coins.png') no-repeat center center fixed;
  background-size: cover;
  color:#fff;
  font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
}


.card {
  text-align: center;
}



.ico-card {
  width: 100px;
  height: 100px;
  color: var(--sky); 
  flex-shrink: 0;
}

/* Falling BTC coins */

.falling {
  position: fixed;
  inset: 0; 
  z-index: 1; 
  pointer-events: none;
  overflow: hidden;
}

.coin {
  position: absolute;
  top: -10vh;
  will-change: transform;
}


.hero, .section, .cta, .footer {
  position: relative;
  z-index: 10;
}
@keyframes fall {
  0%   { top: -10vh; }
  100% { top: 110vh; }      
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.kv {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .kv {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kv {
    grid-template-columns: 1fr;
  }
}
:root{
  --bg:#0b0f14;
  --sky:#38bdf8;
  --gold:#FFD700;
  --card:#0b1218;
  --border: rgba(255,255,255,.1);
  --muted: rgba(255,255,255,.8);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg) url('./assets/ethpb-bg-coins.png') no-repeat center center fixed;background-size:cover;color:#fff;font-family:Inter,system-ui,Arial,Helvetica,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.gold{color:var(--gold)}
.h2{font-size:36px;margin:0 0 24px}
.h3{font-size:28px;margin:0 0 6px}
.center{text-align:center}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:left}
.hero::before{content:"";position:abethute;inset:0;background:rgba(0,0,0,.55);z-index:-1}
.hero-inner{transform:perspective(1000px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)); transition:transform .15s ease}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:420px 1fr}}
.hero-logo{text-align:center}
.logo{width:320px;max-width:90%;filter:drop-shadow(0 0 25px rgba(56,189,248,.5))}
h1{font-size:48px;line-height:1.1;margin:0}
@media(min-width:900px){h1{font-size:64px}}
.h-blue{color:var(--sky)}
p.lead{margin:16px 0 0;font-size:20px;color:var(--muted);max-width:640px}

.btns{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{padding:12px 20px;border-radius:16px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:all .25s ease;text-decoration:none;color:#fff;display:inline-flex;gap:8px;align-items:center}
.btn:hover{box-shadow:0 0 25px rgba(56,189,248,.6)}
.btn-primary{background:var(--sky);color:#000}
.btn-muted{background:rgba(255,255,255,.08)}
.btn-muted:hover{background:rgba(255,255,255,.18)}
.ico-wrap{display:inline-flex;align-items:center;justify-content:center}
.ico{width:18px;height:18px}
.ico-wrap.tg{color:var(--sky)}
.ico-wrap.x{color:#fff}

.hold-text{margin-top:24px;width:520px;max-width:100%;filter:drop-shadow(0 8px 28px rgba(0,0,0,.55))}

/* Sections */
.section{padding:80px 0}
.cards{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 20px 40px rgba(0,0,0,.2);transition:box-shadow .2s}
.card:hover{box-shadow:0 0 25px rgba(56,189,248,.5)}

.section.alt{background:rgba(255,255,255,.05)}

@media(min-width:900px){.kv{grid-template-columns:repeat(4,1fr)}}
.kv .item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.kv .item:hover{box-shadow:0 0 25px rgba(56,189,248,.5)}
.kv .label{font-size:12px;color:#9fb3c8}
.kv .value{font-size:20px;font-weight:700;margin-top:6px}

.tokenomics-box{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center;margin-bottom:32px}
.pie-col{flex:0 0 auto}
.pie{width:200px!important;height:200px!important}
.pie-info{flex:1;min-width:280px}
.pie-info .item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px}
.pie-info .item:hover{box-shadow:0 0 25px rgba(56,189,248,.5)}

.contract{text-align:center}
.code{margin-top:12px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--gold);word-break:break-all}

.cta{background:linear-gradient(#00000066,#000000b3);padding:80px 0;border-top:1px solid var(--border)}
.cta-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:900px){.cta-grid{grid-template-columns:1fr auto}}
.sub{color:var(--muted)}

.footer{padding:40px 0;border-top:1px solid var(--border);color:#9fb3c8;font-size:14px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.nav a{color:inherit;text-decoration:none}
.nav a:hover{color:#fff}
.link-ico{display:inline-flex;gap:6px;align-items:center}

/* Lightning overlays */
.lightning-flash{position:fixed;inset:0;background:rgba(56,189,248,.35);mix-blend-mode:screen;opacity:0;pointer-events:none;animation:flash 6s infinite}
.lightning-flash.d2{animation-delay:2s}
@keyframes flash{0%,90%,100%{opacity:0}92%{opacity:1}95%{opacity:.4}97%{opacity:.8}}