*{box-sizing:border-box}
:root{
  --navy:#061426;
  --navy2:#0a2443;
  --blue:#0d4f88;
  --cyan:#22d3ee;
  --gold:#f2c14e;
  --cream:#fff8e7;
  --muted:#9db2c9;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 80% 12%,rgba(34,211,238,.11),transparent 28rem),
    linear-gradient(180deg,#040b14 0%,#061426 45%,#08182b 100%);
  color:white;
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
a{color:inherit;text-decoration:none}
.nav{
  max-width:1200px;margin:auto;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.08em}
.brand img{width:42px;height:42px;border-radius:50%}
.nav nav{display:flex;gap:24px;color:#c7d8e8;font-weight:700;font-size:14px}
.nav nav a:hover{color:var(--gold)}
main{max-width:1200px;margin:auto;padding:0 24px}
.hero{
  min-height:720px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;padding:48px 0 72px;
}
.eyebrow{color:var(--gold);font-size:13px;font-weight:900;letter-spacing:.16em}
h1{font-size:clamp(54px,7vw,96px);line-height:.95;margin:18px 0 22px;letter-spacing:-.055em}
h1 span{color:var(--gold)}
.hero-copy p{max-width:640px;font-size:20px;line-height:1.6;color:#c2d0de}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 18px}
.btn{
  border:0;border-radius:14px;padding:15px 22px;font-size:15px;font-weight:900;
  cursor:pointer;transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-2px)}
.primary{background:var(--gold);color:#07111f;box-shadow:0 10px 30px rgba(242,193,78,.22)}
.secondary{background:#10233a;color:white;border:1px solid rgba(255,255,255,.12)}
.ca-box{
  background:rgba(12,30,50,.7);border:1px solid rgba(255,255,255,.09);
  padding:15px 16px;border-radius:14px;max-width:680px;overflow:hidden;
}
.ca-box span{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}
.ca-box code{font-size:13px;word-break:break-all;color:#eaf4ff}
.hero-art{display:flex;justify-content:center}
.coin-ring{
  width:min(100%,520px);aspect-ratio:1;border-radius:50%;
  padding:14px;background:linear-gradient(135deg,#ffe58a,#b57b16);
  box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 70px rgba(34,211,238,.13);
}
.coin-ring img{width:100%;height:100%;display:block;border-radius:50%}
.section{padding:95px 0}
.section-head span{color:var(--gold);font-weight:900;letter-spacing:.15em;font-size:12px}
.section-head h2,.section h2{font-size:clamp(38px,5vw,64px);margin:10px 0 28px;letter-spacing:-.04em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card,.token-box,.social-card{
  background:linear-gradient(180deg,rgba(14,36,61,.9),rgba(8,23,40,.9));
  border:1px solid rgba(255,255,255,.09);border-radius:22px;
}
.card{padding:26px}
.card .icon{font-size:34px}
.card h3{font-size:24px;margin:18px 0 8px}
.card p,.token-section p{color:#aebfd0;line-height:1.7}
.token-section{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.token-box{padding:24px}
.token-box div{
  display:flex;justify-content:space-between;gap:20px;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.08)
}
.token-box div:last-child{border-bottom:0}
.token-box span{color:var(--muted)}
.token-box strong{color:var(--gold)}
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.social-card{padding:24px;display:flex;flex-direction:column;gap:8px;transition:.2s transform,.2s border-color}
.social-card:hover{transform:translateY(-4px);border-color:rgba(242,193,78,.55)}
.social-card>span{font-size:30px;color:var(--gold)}
.social-card strong{font-size:20px}
.social-card small{color:var(--muted)}
footer{
  text-align:center;padding:55px 20px 70px;border-top:1px solid rgba(255,255,255,.07);
  color:#9fb0c1
}
footer img{width:60px;height:60px;border-radius:50%}
footer p{font-weight:900;color:white}
@media(max-width:800px){
  .nav nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:36px}
  .hero-copy{text-align:center}
  .hero-copy p,.ca-box{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .hero-art{order:-1}
  .coin-ring{max-width:340px}
  .cards,.link-grid,.token-section{grid-template-columns:1fr}
  .section{padding:65px 0}
}