:root{
  --bg:#05060a;
  --ink:#e6f1ff;
  --muted:#9fb3c8;
  --panel:#0b0f19;
  --border:#1b2437;
  --accent1:#ff3a3a;
  --accent2:#ff7a00;
  --accent3:#b300ff;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:15.5px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:var(--bg); overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--ink)}

.glass{background:rgba(15,22,35,.45); backdrop-filter:saturate(1.2) blur(12px); border:1px solid rgba(255,255,255,.06)}

.site-header{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:12px 20px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:900; letter-spacing:.2px}
.brand img{width:30px; height:30px; border-radius:10px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-weight:600; opacity:.9}
.nav a:hover{opacity:1}
.nav .btn{margin-left:8px}
.nav-toggle{display:none; background:none; border:0; color:var(--ink)}

.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:999px; color:#0b0f19; text-decoration:none; font-weight:800; letter-spacing:.2px; background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); background-size:200% 200%; animation:shift 7s ease-in-out infinite; box-shadow:0 10px 30px rgba(179,0,255,.25)}
.btn .pulse{position:absolute; inset:-2px; border-radius:inherit; border:2px solid transparent; background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:ring 3s linear infinite}
.btn.outline{background:transparent; color:var(--ink); border:1.5px solid #273148}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid #273148; box-shadow:none}
.btn:hover{transform:translateY(-1px)}

.hero{position:relative; padding:84px 20px 40px}
.hero-inner{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:38px; align-items:center}
.title-xxl{font-size:54px; line-height:1.05; margin:0 0 10px; letter-spacing:0.2px; text-shadow:0 10px 40px rgba(179,0,255,.15)}
.lead{font-size:18px; color:var(--muted); margin:0 0 20px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 18px}

.pillars{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px}
.pillars li{display:flex; gap:12px; align-items:flex-start; color:var(--muted)}
.pillars .ic{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:white; flex:0 0 28px}

.hero-art{border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.06); box-shadow:0 30px 90px rgba(179,0,255,.18)}

.section{position:relative; padding:72px 20px}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section-title{max-width:1120px; margin:0 auto 18px; font-size:30px; letter-spacing:.2px}
.neon{background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 28px rgba(255,122,0,.15)}

.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.grad{background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent}

.about-split{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.6fr .4fr; gap:18px; align-items:center}
.about-chipset{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.chip{padding:8px 12px; background:rgba(12,16,27,.55); border:1px solid rgba(255,255,255,.06); border-radius:999px; font-weight:700; font-size:13px}

.mission-grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mcard{background:rgba(12,16,27,.55); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:18px}

.grid.cards{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1000px}
.card{position:relative; background:rgba(12,16,27,.55); border-radius:20px; padding:18px; border:1px solid rgba(255,255,255,.06); box-shadow:0 20px 60px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease}
.card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(255,58,58,.65), rgba(255,122,0,.4), rgba(179,0,255,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none}
.card:hover{box-shadow:0 30px 80px rgba(179,0,255,.25)}
.card-ico{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:white; margin-bottom:8px}

.tiers{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; perspective:1000px}
.tier{position:relative; background:rgba(12,16,27,.55); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:18px}
.tier .badge{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:white; font-weight:800; background:linear-gradient(135deg,var(--accent1),var(--accent2),var(--accent3)); box-shadow:0 10px 30px rgba(179,0,255,.25)}

.bullets{max-width:1000px; margin:0 auto; padding-left:0; list-style:none}
.bullets li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.bullets svg{flex:0 0 18px; color:#34d399}

.tokenomics{max-width:920px; margin:0 auto}
.tok-row{display:grid; grid-template-columns:1fr 2fr; gap:12px; align-items:center; margin:10px 0}
.tok-row .bar{position:relative; height:16px; background:#0c1322; border-radius:999px; border:1px solid #1b2642; overflow:hidden; box-shadow:inset 0 0 20px rgba(179,0,255,.15)}
.tok-row .bar i{position:absolute; inset:0; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); background-size:200% 200%; animation:shift 9s ease-in-out infinite}
.tok-row .bar em{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; color:#a7b0c3}

.timeline{max-width:920px; margin:0 auto; list-style:none; padding-left:12px; border-left:3px solid #182235}
.timeline li{position:relative; padding-left:12px; margin:14px 0}
.timeline li::before{content:""; position:absolute; left:-9px; top:6px; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow:0 0 18px rgba(255,122,0,.4)}

.more{max-width:920px; margin:0 auto; padding-left:20px; padding-right:20px}
details{border-radius:16px; border:1px solid rgba(255,255,255,.08); padding:14px 16px; margin:12px 0}
summary{cursor:pointer; font-weight:700}

.bridge-wrap{max-width:1100px; margin:18px auto 0}
.bridge-mock{position:relative; border-radius:22px; padding:18px; border:1px solid rgba(255,255,255,.08)}
.bridge-mock::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(255,58,58,.6), rgba(255,122,0,.35), rgba(179,0,255,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; pointer-events:none}
.bridge-top{display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(10,14,23,.6)}
.chain{display:inline-flex; align-items:center; gap:8px; font-weight:800}
.chain .dot{width:12px; height:12px; border-radius:50%}
.dot.eth{background:linear-gradient(135deg,var(--accent1),var(--accent3))}
.dot.sol{background:linear-gradient(135deg,#00ffa3,#dc1fff)}
.swap{display:inline-flex; align-items:center; justify-content:center; opacity:.9}
.bridge-mid{margin-top:16px}
label{display:block; font-weight:800; margin:8px 0 6px}
.input-row{display:flex; align-items:center; gap:8px}
.input-row input{flex:1; background:#0c1322; border:1px solid #1b2642; color:var(--ink); padding:12px 14px; border-radius:12px; outline:none}
.input-row .token{padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); font-weight:800}
.meta{display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); margin:10px 0 12px}
.bridge-quote, .bridge-status{border-radius:16px; border:1px solid rgba(255,255,255,.08); padding:14px 16px; margin-top:14px}
.quote-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.quote{display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(12,16,27,.55); border:1px solid rgba(255,255,255,.06)}
.quote .maker{font-weight:800}
.quote .eta, .quote .fee, .quote .recv{font-variant-numeric:tabular-nums}
.status-steps{list-style:decimal-leading-zero; padding-left:18px; margin:0; color:var(--muted)}
.status-steps b{color:var(--ink)}

.site-footer{padding:38px 20px; border-top:1px solid rgba(255,255,255,.06); margin-top:30px}
.footer-grid{max-width:1200px; margin:0 auto 16px; display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:18px}
.footer-brand{display:flex; flex-direction:column; gap:8px}
.footer-brand img{width:36px; height:36px; border-radius:10px}
.footer-col h5{margin:0 0 10px 0}
.footer-col a{display:block; opacity:.85; text-decoration:none; margin:6px 0}
.footer-col a:hover{opacity:1}
.foot-bottom{max-width:1200px; margin:12px auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted)}
.foot-links a{color:var(--muted); text-decoration:none; margin-left:12px}

.orb{position:absolute; width:360px; height:360px; border-radius:50%; filter:blur(40px); opacity:.35; pointer-events:none}
.orb-a{top:-80px; left:-80px; background:radial-gradient(circle at 30% 30%, var(--accent1), transparent 60%)}
.orb-b{bottom:-120px; right:-120px; background:radial-gradient(circle at 70% 70%, var(--accent3), transparent 60%)}

#bg-grid, #bg-particles{position:fixed; inset:0; z-index:-2}
#bg-grid{opacity:.25}
#bg-particles{opacity:.65}

.tilt{transform-style:preserve-3d; will-change:transform}

@keyframes shift{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
@keyframes ring{0%{opacity:.4} 50%{opacity:.9} 100%{opacity:.4}}

@media (max-width: 1160px){
  .grid.cards{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
  .mission-grid{grid-template-columns:1fr}
  .about-split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:26px}
}
@media (max-width: 780px){
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; position:absolute; top:60px; right:12px; background:rgba(15,22,35,.95); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:8px}
  .nav-toggle{display:inline-flex}
  .footer-grid{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
}