:root {
  --bg: #030806;
  --bg-soft: #07110c;
  --panel: rgba(13, 27, 19, .62);
  --green: #9cff00;
  --green-bright: #c8ff4d;
  --yellow: #ecff6d;
  --text: #f6faef;
  --muted: #9daaa0;
  --line: rgba(178, 255, 89, .14);
  --line-strong: rgba(178, 255, 89, .3);
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 8%, rgba(76, 170, 0, .14), transparent 29rem),
    radial-gradient(circle at 10% 45%, rgba(100, 255, 18, .05), transparent 33rem),
    var(--bg);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 132px 0; }
.section-line { border-top: 1px solid var(--line); }
.noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.star-field {
  position: fixed; inset: 0; pointer-events: none; opacity: .45;
  background-image:
    radial-gradient(circle at 8% 12%, #d9ff82 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 26%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 9%, #b8ff50 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 81% 31%, #b8ff50 0 1px, transparent 1.5px),
    radial-gradient(circle at 94% 11%, #fff 0 1px, transparent 1.5px);
  background-size: 470px 420px;
}
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 10;
  border-bottom: 1px solid transparent; transition: .3s ease;
}
.site-header.scrolled {
  background: rgba(3, 8, 6, .8); backdrop-filter: blur(18px);
  border-color: var(--line);
}
.nav { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 800 20px/1 var(--display); letter-spacing: -.6px; }
.brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 24px rgba(156,255,0,.25); }
.nav-links { display: flex; align-items: center; gap: 29px; color: #cad3cb; font-size: 14px; }
.nav-links a { transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.button {
  min-height: 54px; padding: 0 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  background: var(--green); color: #071006; font-weight: 700; font-size: 14px; border: 1px solid var(--green);
  box-shadow: 0 0 38px rgba(156, 255, 0, .14); transition: transform .25s, box-shadow .25s, background .25s;
}
.button:hover { transform: translateY(-2px); background: var(--green-bright); box-shadow: 0 0 50px rgba(156,255,0,.25); }
.button-small { min-height: 42px; padding: 0 17px; gap: 13px; }
.button-ghost { color: var(--text); background: rgba(255,255,255,.025); border-color: var(--line-strong); box-shadow: none; }
.button-ghost:hover { background: rgba(156,255,0,.08); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 12px 8px; }
.menu-toggle span { display:block; height: 1px; margin: 7px 0; background: var(--text); transition: .25s; }
.hero { min-height: 890px; padding: 164px 0 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 50px; }
.eyebrow, .kicker { color: var(--green); text-transform: uppercase; letter-spacing: 2.4px; font-size: 11px; font-weight: 700; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 50px; padding: 8px 13px; background: rgba(156,255,0,.035); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 15px var(--green); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -2.6px; }
h1 { margin: 27px 0 25px; font-size: clamp(54px, 6.2vw, 90px); line-height: .98; font-weight: 700; }
h1 span, h2 em { color: var(--green); font-style: normal; font-weight: 500; }
.hero-lead { max-width: 590px; margin: 0; color: #b8c1ba; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.quick-links { display: flex; gap: 22px; margin-top: 39px; flex-wrap: wrap; }
.quick-links a { color: #89958c; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: color .2s; }
.quick-links a:hover { color: var(--green); }
.quick-links span { margin-left: 5px; }
.hero-visual { position: relative; min-height: 600px; display: grid; place-items: center; }
.hero-visual img { position: relative; z-index: 2; width: min(100%, 540px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 110px rgba(121, 255, 0, .2); }
.moon-halo { position: absolute; width: 88%; aspect-ratio: 1; border-radius: 50%; background: rgba(170,255,48,.14); filter: blur(60px); animation: breathe 6s ease-in-out infinite; }
.visual-badge { position: absolute; z-index: 3; right: -10px; bottom: 58px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(5,13,8,.76); backdrop-filter: blur(14px); }
.visual-badge span { color: var(--green); font: 700 12px var(--display); }
.visual-badge p { margin: 0; font-size: 11px; color: #b8c1ba; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; }
.hero-orbit { position: absolute; border: 1px solid rgba(156,255,0,.14); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 1000px; height: 350px; right: -280px; top: 230px; transform: rotate(-23deg); }
.orbit-two { width: 880px; height: 270px; right: -220px; top: 300px; transform: rotate(-23deg); border-style: dashed; animation: orbit 28s linear infinite; }
.hero-marquee { width: 100%; overflow: hidden; margin-top: 72px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #8d998f; font: 600 11px var(--display); letter-spacing: 3px; white-space: nowrap; }
.hero-marquee div { width: max-content; animation: marquee 28s linear infinite; }
.hero-marquee span { color: var(--green); margin: 0 26px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; margin-bottom: 70px; }
.section-heading.compact { align-items: start; }
h2 { margin-top: 18px; font-size: clamp(43px, 5.2vw, 70px); line-height: 1.06; font-weight: 600; }
.section-intro p, .section-note { color: #aab4ac; font-size: 17px; margin: 0; }
.section-intro p + p { margin-top: 17px; }
.section-note { max-width: 420px; justify-self: end; margin-top: 38px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.feature-card { position: relative; min-height: 300px; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(16,35,24,.68), rgba(6,14,9,.7)); transition: transform .3s, border-color .3s; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.feature-card > span { position: absolute; top: 27px; right: 27px; color: #67736a; font-size: 11px; }
.feature-icon { width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--green); font-size: 22px; margin-bottom: 76px; }
.feature-card h3 { font-size: 24px; letter-spacing: -.8px; }
.feature-card p { color: #909c93; margin: 13px 0 0; max-width: 280px; font-size: 14px; }
.ecosystem { background: linear-gradient(180deg, rgba(12,27,18,.35), transparent); border-block: 1px solid var(--line); }
.ecosystem-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.eco-card { display: grid; grid-template-columns: 70px 1fr; gap: 26px; padding: 38px 38px 38px 0; border-bottom: 1px solid var(--line); }
.eco-card:nth-child(odd) { border-right: 1px solid var(--line); }
.eco-card:nth-child(even) { padding-left: 38px; }
.eco-number { color: var(--green); font: 600 12px var(--display); }
.eco-card h3 { font-size: 22px; letter-spacing: -.7px; }
.eco-card p { color: #929e95; margin: 9px 0 0; max-width: 380px; font-size: 14px; }
.token-section { overflow: hidden; }
.token-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.token-art { position: relative; min-height: 590px; display: grid; place-items: center; }
.token-art img { width: 430px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; position: relative; z-index: 2; box-shadow: 0 0 80px rgba(156,255,0,.17); }
.token-ring { position: absolute; width: 560px; height: 560px; border: 1px solid var(--line-strong); border-radius: 50%; }
.token-ring::after { content:""; position:absolute; width: 10px; height:10px; background:var(--green); border-radius:50%; top:70px; right:68px; box-shadow:0 0 18px var(--green); }
.token-ticker { position:absolute; z-index:3; right: 20px; bottom: 80px; background: var(--green); color:#071006; font:800 15px var(--display); padding:11px 18px; border-radius:5px; transform:rotate(-4deg); }
.token-copy > p { color:#aab4ac; max-width: 560px; font-size:17px; }
.token-details { margin: 38px 0 28px; }
.token-details div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.token-details dt { color:#77827a; font-size:13px; }
.token-details dd { margin:0; font:600 14px var(--display); }
.contract-box { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid var(--line-strong); background:rgba(156,255,0,.04); border-radius:10px; }
.contract-box > div { min-width:0; }
.contract-box span { display:block; color:#7f8b82; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; }
.contract-box code { display:block; color:var(--text); font-family:var(--body); font-size:13px; margin-top:4px; overflow-wrap:anywhere; word-break:break-all; }
.copy-button { flex:0 0 auto; display:flex; align-items:center; gap:8px; border:0; border-radius:7px; padding:12px 14px; background:var(--green); color:#071006; font-weight:700; cursor:pointer; }
.copy-button .copy-icon { color:#071006; font-size:16px; }
.token-actions { display:flex; align-items:center; gap:27px; margin-top:27px; flex-wrap:wrap; }
.text-link { color:var(--green); font-size:13px; }
.roadmap { border-top:1px solid var(--line); background: radial-gradient(circle at 80% 60%, rgba(156,255,0,.07), transparent 30rem); }
.roadmap-list { border-top:1px solid var(--line); }
.phase { display:grid; grid-template-columns: .8fr 1.2fr; padding:34px 0; border-bottom:1px solid var(--line); }
.phase-top { display:grid; grid-template-columns:100px 1fr 30px; align-items:center; gap:20px; }
.phase-top span { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:1.4px; }
.phase-top b { font:600 28px var(--display); text-transform:uppercase; letter-spacing:-.5px; }
.phase-top i { color:var(--green); font-style:normal; }
.phase ul { display:grid; grid-template-columns:1fr 1fr; gap:7px 30px; margin:0; padding:5px 0 0 50px; list-style:none; color:#89958c; font-size:14px; }
.phase li::before { content:"—"; color:#4e5b51; margin-right:9px; }
.community { position:relative; overflow:hidden; text-align:center; min-height:780px; display:grid; place-items:center; }
.community::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(3,8,6,.28), rgba(3,8,6,.86)), url("assets/hero-banner.png") center/cover no-repeat; opacity:.28; }
.community-moon { position:absolute; width:700px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(176,255,54,.11), rgba(51,130,0,.04) 50%, transparent 70%); filter:blur(5px); }
.community-inner { position:relative; z-index:2; }
.community-inner > p { max-width:620px; margin:24px auto 44px; color:#aab4ac; font-size:17px; }
.community-links { display:grid; grid-template-columns:repeat(3,1fr); max-width:900px; margin:auto; gap:12px; }
.community-links a { display:grid; grid-template-columns:42px 1fr 20px; gap:12px; align-items:center; text-align:left; padding:18px; border:1px solid var(--line-strong); background:rgba(4,11,7,.68); backdrop-filter:blur(12px); border-radius:10px; transition:.25s; }
.community-links a:hover { transform:translateY(-3px); background:rgba(156,255,0,.08); }
.community-links a > span { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--green); }
.community-links small { display:block; color:#748077; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.community-links b { font-size:14px; }
.community-links i { color:var(--green); font-style:normal; }
.final-cta { padding:120px 0; text-align:center; border-top:1px solid var(--line); }
.final-cta-inner img { width:90px; height:90px; border-radius:50%; margin:0 auto 25px; box-shadow:0 0 45px rgba(156,255,0,.2); }
.final-cta h2 { margin-bottom:34px; }
footer { border-top:1px solid var(--line); background:#020504; }
.footer-top { padding:52px 0 30px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.footer-top > p { text-align:center; color:#707b73; font-size:12px; }
.footer-socials { justify-self:end; display:flex; gap:8px; }
.footer-socials a { width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; border-radius:50%; color:#a9b4ac; font-size:12px; transition:.2s; }
.footer-socials a:hover { color:var(--green); border-color:var(--line-strong); }
.footer-nav { padding:20px 0; display:flex; justify-content:center; gap:28px; border-top:1px solid rgba(255,255,255,.04); color:#7b877e; font-size:12px; flex-wrap:wrap; }
.disclaimer { padding:26px 0 40px; display:flex; justify-content:space-between; gap:40px; color:#505b53; font-size:10px; border-top:1px solid rgba(255,255,255,.04); }
.disclaimer p { max-width:750px; margin:0; }
.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%, 30px); z-index:30; padding:11px 17px; border:1px solid var(--line-strong); border-radius:8px; background:#102017; color:var(--green); font-size:12px; opacity:0; pointer-events:none; transition:.3s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes breathe { 50% { transform:scale(1.07); opacity:.72; } }
@keyframes orbit { to { transform:rotate(337deg); } }
@keyframes marquee { to { transform:translateX(-50%); } }

@media (max-width: 980px) {
  .nav-links { gap:16px; }
  .nav-cta { display:none; }
  .hero { min-height:auto; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { padding-top:25px; text-align:center; }
  .hero-lead { margin-inline:auto; }
  .hero-actions, .quick-links { justify-content:center; }
  .hero-visual { min-height:530px; }
  .hero-visual img { width:480px; }
  .section-heading { gap:50px; }
  .token-grid { grid-template-columns:1fr; gap:50px; }
  .token-art { min-height:530px; }
}

@media (max-width: 720px) {
  .shell { width:min(100% - 32px, 1180px); }
  .section { padding:88px 0; }
  .nav { height:68px; }
  .nav-links {
    position:fixed; inset:68px 0 auto; height:calc(100vh - 68px); display:flex; flex-direction:column; align-items:flex-start;
    gap:0; padding:24px 24px 40px; background:rgba(3,8,6,.97); backdrop-filter:blur(20px); transform:translateX(100%); transition:.3s;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links a { width:100%; padding:16px 0; border-bottom:1px solid var(--line); font:600 22px var(--display); }
  .menu-toggle { display:block; margin-left:auto; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .hero { padding-top:118px; }
  .hero-grid { gap:30px; }
  h1 { font-size:clamp(42px, 12vw, 54px); overflow-wrap:anywhere; }
  .hero h1 br { display:none; }
  .hero h1 span { display:block; }
  .hero-lead { font-size:16px; }
  .hero-actions .button { width:100%; }
  .quick-links { display:grid; grid-template-columns:1fr 1fr; gap:13px 18px; width:100%; }
  .quick-links a:nth-child(odd) { text-align:right; }
  .quick-links a:nth-child(even) { text-align:left; }
  .hero-visual { min-height:auto; padding:20px 0; }
  .hero-visual img { width:min(100%, 420px); }
  .visual-badge { display:none; }
  .hero-marquee { margin-top:42px; }
  .section-heading { grid-template-columns:1fr; gap:28px; margin-bottom:46px; }
  .section-note { justify-self:start; margin-top:0; }
  h2 { font-size:clamp(40px, 12vw, 56px); }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:260px; }
  .feature-icon { margin-bottom:52px; }
  .ecosystem-grid { grid-template-columns:1fr; }
  .eco-card, .eco-card:nth-child(even) { padding:28px 0; border-right:0; }
  .token-art { min-height:auto; padding:30px 0; }
  .token-art img { width:min(84vw, 390px); }
  .token-ring { width:min(92vw, 430px); height:min(92vw, 430px); }
  .token-ticker { right:4px; bottom:35px; }
  .contract-box { align-items:stretch; flex-direction:column; }
  .copy-button { justify-content:center; }
  .token-actions .button { width:100%; }
  .phase { grid-template-columns:1fr; gap:22px; }
  .phase-top { grid-template-columns:80px 1fr 20px; }
  .phase-top b { font-size:23px; }
  .phase ul { padding:0; grid-template-columns:1fr; }
  .community { min-height:auto; }
  .community-links { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; justify-items:center; gap:17px; text-align:center; }
  .footer-socials { justify-self:center; }
  .footer-nav { gap:14px 20px; }
  .disclaimer { flex-direction:column; gap:18px; text-align:center; align-items:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}
