:root {
  --blue: #627EEA;
  --blue-dark: #4A63C8;
  --blue-light: #8BA0F0;
  --blue-glow: rgba(98,126,234,0.35);
  --yellow: #F5A623;
  --yellow-light: #FFD580;
  --yellow-dark: #D4891A;
  --yellow-glow: rgba(245,166,35,0.3);
  --bg: #060B18;
  --bg2: #0C1225;
  --bg3: #111A30;
  --white: #FFFFFF;
  --gray: #94A3B8;
  --gray-dark: #64748B;
  --border: rgba(98,126,234,0.12);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family:'Space Grotesk',sans-serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ========== STARFIELD CANVAS ========== */
#starfield {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ========== MOUSE TRAIL ========== */
#mouseCanvas {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:2; pointer-events:none;
}

/* ========== NEBULA ========== */
.nebula {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:hidden;
}
.nebula-blob {
  position:absolute; border-radius:50%;
  filter:blur(120px); opacity:0.07;
}
.nebula-blob:nth-child(1) {
  width:700px; height:700px;
  background:radial-gradient(circle,var(--blue),transparent 70%);
  top:-15%; right:-10%;
  animation:neb 30s ease-in-out infinite alternate;
}
.nebula-blob:nth-child(2) {
  width:500px; height:500px;
  background:radial-gradient(circle,var(--yellow),transparent 70%);
  bottom:5%; left:-10%;
  animation:neb 25s ease-in-out infinite alternate-reverse;
}
.nebula-blob:nth-child(3) {
  width:400px; height:400px;
  background:radial-gradient(circle,#7C3AED,transparent 70%);
  top:50%; left:40%;
  animation:neb 35s ease-in-out infinite alternate;
  opacity:0.04;
}
@keyframes neb {
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(40px,-30px) scale(1.1);}
  100%{transform:translate(-20px,20px) scale(0.95);}
}

/* ========== SHOOTING STARS ========== */
.shoot{position:fixed;width:150px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);pointer-events:none;z-index:0;opacity:0;}
.shoot:nth-child(1){top:12%;animation:sh 7s 2s linear infinite;}
.shoot:nth-child(2){top:45%;animation:sh 9s 5s linear infinite;}
.shoot:nth-child(3){top:75%;animation:sh 8s 8s linear infinite;}
@keyframes sh{0%{left:-150px;transform:rotate(-30deg);opacity:0;}3%{opacity:1;}12%{opacity:1;}15%{left:110vw;transform:rotate(-30deg);opacity:0;}100%{opacity:0;}}

/* ========== NAV ========== */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 3rem; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(6,11,24,0.7);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-brand {
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.25rem;
}
.nav-brand img { width:36px; height:36px; border-radius:50%; }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--gray); transition:color .3s; }
.nav-links a:hover { color:var(--yellow); }
.nav-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border-radius:50px; font-weight:600; font-size:.875rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:var(--white); border:none; cursor:pointer;
  transition:transform .3s,box-shadow .3s;
}
.nav-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px var(--blue-glow); }
.nav-btn i[data-lucide]{width:16px;height:16px;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.3s;}

/* ========== HERO ========== */
.hero {
  position:relative; z-index:1;
  min-height:auto;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:90px 2rem 40px;
  overflow:hidden;
}
/* Space video background */
.hero-video-bg {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  overflow:hidden; pointer-events:none; z-index:-2;
}
.hero-video-bg video {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0.45;
}
.hero-video-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, var(--bg) 80%),
             linear-gradient(to bottom, rgba(6,11,24,0.15) 0%, transparent 30%, transparent 65%, var(--bg) 100%);
  pointer-events:none;
}
/* Hero meteors */
.meteor {
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:0;
}
.meteor::before {
  content:'';
  position:absolute;
  height:1.5px;
  border-radius:50%;
  box-shadow:0 0 6px 1px rgba(139,160,240,0.3);
}

/* met-a: moves toward bottom-right at ~29° → tail rotates 29° */
.meteor:nth-child(2){top:6%;left:10%;}
.meteor:nth-child(2)::before{width:90px;background:linear-gradient(90deg,transparent,rgba(139,160,240,.4),rgba(255,255,255,.8));transform:rotate(29deg);}
.meteor:nth-child(2){animation:met-a 3s .5s linear infinite;}

/* met-b: moves toward bottom-right at ~53° */
.meteor:nth-child(3){top:18%;left:65%;}
.meteor:nth-child(3)::before{width:60px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.3),rgba(255,255,255,.7));transform:rotate(53deg);}
.meteor:nth-child(3){animation:met-b 4s 2s linear infinite;}

/* met-c: moves toward bottom-right at ~18° */
.meteor:nth-child(4){top:40%;left:25%;}
.meteor:nth-child(4)::before{width:100px;background:linear-gradient(90deg,transparent,rgba(139,160,240,.5),rgba(255,255,255,.9));transform:rotate(18deg);}
.meteor:nth-child(4){animation:met-c 3.5s 3.5s linear infinite;}

/* met-d: moves toward bottom-right at ~68° */
.meteor:nth-child(5){top:10%;left:82%;}
.meteor:nth-child(5)::before{width:50px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.3),rgba(255,255,255,.6));transform:rotate(68deg);}
.meteor:nth-child(5){animation:met-d 2.8s 5s linear infinite;}

/* met-e: moves toward bottom-right at ~13° */
.meteor:nth-child(6){top:55%;left:5%;}
.meteor:nth-child(6)::before{width:110px;background:linear-gradient(90deg,transparent,rgba(139,160,240,.4),rgba(255,255,255,.8));transform:rotate(13deg);}
.meteor:nth-child(6){animation:met-e 4.2s 1s linear infinite;}

/* met-f: moves toward bottom-right at ~45° */
.meteor:nth-child(7){top:3%;left:42%;}
.meteor:nth-child(7)::before{width:70px;background:linear-gradient(90deg,transparent,rgba(139,160,240,.3),rgba(255,255,255,.7));transform:rotate(45deg);}
.meteor:nth-child(7){animation:met-f 5s 7s linear infinite;}

@keyframes met-a {
  0%{transform:translate(0,0);opacity:0;}5%{opacity:1;}30%{opacity:1;}40%{transform:translate(250px,140px);opacity:0;}100%{opacity:0;}
}
@keyframes met-b {
  0%{transform:translate(0,0);opacity:0;}4%{opacity:1;}25%{opacity:1;}35%{transform:translate(150px,200px);opacity:0;}100%{opacity:0;}
}
@keyframes met-c {
  0%{transform:translate(0,0);opacity:0;}5%{opacity:1;}28%{opacity:1;}38%{transform:translate(300px,100px);opacity:0;}100%{opacity:0;}
}
@keyframes met-d {
  0%{transform:translate(0,0);opacity:0;}6%{opacity:1;}32%{opacity:1;}42%{transform:translate(100px,250px);opacity:0;}100%{opacity:0;}
}
@keyframes met-e {
  0%{transform:translate(0,0);opacity:0;}4%{opacity:1;}22%{opacity:1;}32%{transform:translate(350px,80px);opacity:0;}100%{opacity:0;}
}
@keyframes met-f {
  0%{transform:translate(0,0);opacity:0;}3%{opacity:1;}20%{opacity:1;}30%{transform:translate(180px,180px);opacity:0;}100%{opacity:0;}
}

/* ETH logo watermark */
.hero::after {
  content:'';
  position:absolute;
  bottom:-60px; left:50%;
  transform:translateX(-50%);
  width:500px; height:500px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 784 784'%3E%3Cpath d='M392 0L392 289.5 646.5 399.5 392 289.5V0zM392 0L137.5 399.5 392 289.5V0zM392 536.5L646.5 440 392 577V536.5zM392 577L137.5 440 392 536.5V577zM392 508L646.5 399.5 392 289.5V508zM392 289.5L137.5 399.5 392 508V289.5z' fill='%23627EEA' fill-opacity='0.06'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none;
  z-index:-1;
  opacity:0.5;
  animation:eth-breathe 8s ease-in-out infinite;
}
@keyframes eth-breathe {
  0%,100%{opacity:0.4;transform:translateX(-50%) scale(1);}
  50%{opacity:0.6;transform:translateX(-50%) scale(1.05);}
}
.hero-inner { max-width:820px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:50px;
  background:rgba(98,126,234,0.12);
  border:1px solid rgba(98,126,234,0.25);
  color:var(--blue-light); font-size:.75rem; font-weight:500;
  margin-bottom:1rem;
}
.hero-badge i[data-lucide]{width:13px;height:13px;}
.hero-img {
  width:130px; height:130px; border-radius:50%;
  object-fit:cover; margin:0 auto 1.2rem;
  border:3px solid var(--blue);
  box-shadow:0 0 40px var(--blue-glow),0 0 80px rgba(98,126,234,0.1);
  animation:hfloat 6s ease-in-out infinite;
}
@keyframes hfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero h1 {
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800; line-height:1.1;
  margin-bottom:1rem;
}
.hero h1 .y{color:var(--yellow);}
.hero h1 .b{color:var(--blue-light);}
.hero-desc {
  font-size:.95rem; color:var(--gray); line-height:1.7;
  max-width:560px; margin:0 auto 1.5rem;
}
.hero-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.2rem; }
.btn-big {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:50px; font-weight:600; font-size:.9rem;
  transition:all .3s; cursor:pointer; border:none;
}
.btn-yellow { background:linear-gradient(135deg,var(--yellow),var(--yellow-dark)); color:var(--bg); }
.btn-yellow:hover { transform:translateY(-3px); box-shadow:0 8px 32px var(--yellow-glow); }
.btn-blue { background:transparent; border:2px solid var(--blue); color:var(--blue-light); }
.btn-blue:hover { background:rgba(98,126,234,0.08); transform:translateY(-3px); box-shadow:0 8px 32px var(--blue-glow); }
.btn-big i[data-lucide]{width:18px;height:18px;}
.ca-row {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:10px 18px;
  font-family:'Space Grotesk',monospace; font-size:.78rem;
  color:var(--gray); cursor:pointer; transition:border-color .3s;
}
.ca-row:hover{border-color:var(--yellow);}
.ca-row .tag{color:var(--yellow);font-weight:700;white-space:nowrap;}
.ca-row .addr{word-break:break-all;}
.ca-row i[data-lucide]{width:15px;height:15px;flex-shrink:0;}
.hero-sub{font-size:.8rem;color:var(--gray-dark);margin-top:1rem;}
.hero-sub strong{color:var(--gray);}

/* ========== TICKER ========== */
.ticker-wrap {
  position:relative; z-index:1; overflow:hidden;
  background:linear-gradient(90deg,var(--blue),var(--yellow),var(--blue));
  padding:14px 0;
}
.ticker{display:flex;animation:tick 18s linear infinite;white-space:nowrap;}
.ticker span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--bg);padding:0 2rem;display:inline-flex;align-items:center;gap:8px;}
.ticker i[data-lucide]{width:16px;height:16px;color:var(--bg);}
@keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ========== CONTENT BLOCKS ========== */
.block { position:relative; z-index:1; padding:120px 2rem; }
.block-inner { max-width:1000px; margin:0 auto; }
.block-alt { background:var(--bg2); }
.block-label {
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--yellow); margin-bottom:1rem;
}
.block-title { font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.15; margin-bottom:1.5rem; }
.block-text { font-size:1.05rem; color:var(--gray); line-height:1.85; max-width:680px; }
.block-text + .block-text { margin-top:1.2rem; }
.block-link {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:2rem; font-weight:600; font-size:.95rem;
  color:var(--yellow); transition:gap .3s;
}
.block-link:hover { gap:12px; }
.block-link i[data-lucide]{width:18px;height:18px;}
.block-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.block-grid.reverse .block-media { order:-1; }
.block-media {
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--border); background:var(--bg3);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.block-media img { width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 0 40px var(--blue-glow)); }
.block-media::after {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,transparent 40%,var(--bg2) 100%);
  pointer-events:none;
}
.quote-box { border-left:3px solid var(--yellow); padding:1.2rem 1.5rem; margin:2rem 0; background:rgba(245,166,35,0.04); border-radius:0 12px 12px 0; }
.quote-box p { font-style:italic; color:var(--yellow-light); font-size:1rem; line-height:1.7; }
.quote-box .q-author { font-style:normal; font-size:.8rem; color:var(--gray-dark); margin-top:.5rem; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.stat-box { text-align:center; }
.stat-val {
  font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700;
  background:linear-gradient(135deg,var(--yellow),var(--blue-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-lbl { font-size:.8rem; color:var(--gray-dark); margin-top:4px; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.card { background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:2rem; text-align:center; transition:transform .3s,border-color .3s; }
.card:hover { transform:translateY(-4px); border-color:var(--yellow); }
.card-icon { display:flex; justify-content:center; margin-bottom:1rem; }
.card-icon i[data-lucide]{ width:36px; height:36px; color:var(--yellow); }
.card h4 { font-size:1rem; margin-bottom:.4rem; }
.card p { font-size:.85rem; color:var(--gray); line-height:1.6; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.step { background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:2rem 1.5rem; text-align:center; transition:transform .3s,border-color .3s; }
.step:hover { transform:translateY(-4px); border-color:var(--blue); }
.step-num {
  font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:.8rem;
}
.step h4 { font-size:.95rem; margin-bottom:.4rem; }
.step p { font-size:.82rem; color:var(--gray); line-height:1.6; }
.comm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.comm-card {
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg3); border:1px solid var(--border); border-radius:16px; padding:2rem;
  transition:transform .3s,box-shadow .3s;
}
.comm-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(98,126,234,0.12); }
.comm-card .cc-icon { margin-bottom:.8rem; }
.comm-card .cc-icon i[data-lucide]{ width:32px; height:32px; color:var(--blue-light); }
.comm-card .cc-icon svg{ width:32px; height:32px; color:var(--blue-light); }
.comm-card h4 { font-size:.95rem; margin-bottom:.2rem; }
.comm-card p { font-size:.8rem; color:var(--gray); }
.musk-box {
  max-width:700px; margin:3rem auto 0;
  background:linear-gradient(135deg,rgba(98,126,234,0.08),rgba(245,166,35,0.06));
  border:1px solid var(--border); border-radius:20px; padding:3rem; text-align:center;
}
.musk-box .mb-icon { margin-bottom:1rem; }
.musk-box .mb-icon i[data-lucide]{ width:40px; height:40px; color:var(--yellow); }
.musk-box h3 { font-size:1.4rem; margin-bottom:1rem; }
.musk-box p { color:var(--gray); line-height:1.8; max-width:550px; margin:0 auto 1rem; font-size:.95rem; }
.musk-reply {
  display:inline-block; background:rgba(245,166,35,0.08); border:1px solid var(--yellow);
  border-radius:12px; padding:10px 24px; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.15rem; color:var(--yellow);
}
footer { position:relative; z-index:1; border-top:1px solid var(--border); padding:3rem 2rem; text-align:center; }
.ft-brand { display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:1rem; }
.ft-brand img{width:32px;height:32px;border-radius:50%;}
.ft-links { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.ft-links a { font-size:.85rem; color:var(--gray); transition:color .3s; }
.ft-links a:hover { color:var(--yellow); }
.ft-disc { font-size:.72rem; color:var(--gray-dark); max-width:600px; margin:0 auto; line-height:1.6; }

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .block-grid{grid-template-columns:1fr;gap:2rem;}
  .block-grid.reverse .block-media{order:0;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .comm-grid{grid-template-columns:repeat(2,1fr);}
  .hero-video-bg{opacity:.5;}
}
@media(max-width:768px){
  nav{padding:0 1.5rem;}
  .nav-links{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:rgba(6,11,24,0.95);backdrop-filter:blur(20px);
    flex-direction:column;padding:1.5rem;gap:1rem;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{display:flex;}
  .hamburger{display:block;}
  .hero{padding:85px 1.5rem 40px;}
  .hero-img{width:110px;height:110px;}
  .block{padding:80px 1.5rem;}
  .steps{grid-template-columns:1fr;}
  .comm-grid{grid-template-columns:1fr;}
  .hero-video-bg{display:none;}
}