:root{
  --bg:#020605;
  --panel:rgba(7,18,16,.72);
  --line:rgba(20,255,174,.22);
  --text:#ecfff8;
  --muted:rgba(236,255,248,.72);
  --green:#14ffae;
  --cyan:#00d4ff;
  --shadow:0 0 20px rgba(20,255,174,.28), 0 0 50px rgba(0,212,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Orbitron',system-ui,sans-serif;
  color:var(--text);
  background:radial-gradient(circle at top, rgba(0,212,255,.06), transparent 34%), var(--bg);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.bg-grid,.bg-orb{position:fixed;inset:0;pointer-events:none}
.bg-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);background-size:80px 80px;opacity:.08;mask-image:radial-gradient(circle at center, black 30%, transparent 80%)}
.bg-orb{filter:blur(70px);opacity:.35;animation:float 10s ease-in-out infinite}
.orb-1{background:radial-gradient(circle, rgba(20,255,174,.28), transparent 55%);top:-10%;left:-10%}
.orb-2{background:radial-gradient(circle, rgba(0,212,255,.2), transparent 60%);bottom:-12%;right:-10%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(18px) scale(1.04)}}
.topbar,.footer,.hero,.swap-preview,.info-section,.swap-shell{position:relative;z-index:1}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 6vw;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:44px;height:44px;display:grid;place-items:center;filter:drop-shadow(0 0 12px rgba(20,255,174,.45))}
.brand-icon svg{width:44px;height:44px}
.brand-text{font-size:1.7rem;font-weight:800}
.brand-text span{color:var(--green);text-shadow:0 0 14px rgba(20,255,174,.7)}
.navlinks{display:flex;gap:28px;color:var(--muted)}
.navlinks a:hover{color:var(--green);text-shadow:0 0 10px rgba(20,255,174,.7)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px}
.hero{padding:10vh 6vw 8vh;text-align:center}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--green);font-size:.72rem;opacity:.9}
.title{font-size:clamp(3rem,7vw,6rem);margin:.4em 0 .15em;line-height:.95}
.title.small{font-size:clamp(2.4rem,5vw,4rem)}
.glow{text-shadow:0 0 12px rgba(20,255,174,.9),0 0 30px rgba(20,255,174,.45),0 0 60px rgba(0,212,255,.18)}
.subtitle{max-width:760px;margin:0 auto;color:var(--muted);font-size:1rem;line-height:1.8}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;border:1px solid var(--line);transition:.25s ease;font-weight:700}
.btn.primary{background:linear-gradient(135deg, var(--green), var(--cyan));color:#04110e;box-shadow:var(--shadow)}
.btn.ghost{background:rgba(255,255,255,.03)}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.ticker-wrap{overflow:hidden;margin:54px auto 0;max-width:1000px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);box-shadow:var(--shadow)}
.ticker{display:flex;gap:42px;white-space:nowrap;padding:14px 20px;animation:marquee 18s linear infinite;color:#d8fff4}
.ticker span{opacity:.95}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.swap-preview,.swap-page{padding:0 6vw 8vh}
.panel,.card,.info-card,.swap-card.big{background:var(--panel);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.panel{padding:22px}
.panel-head,.swap-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.status{display:flex;align-items:center;gap:8px;color:#b6fff1}
.status i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.stats-grid,.info-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.card,.info-card{padding:24px;text-align:left}
.card h3,.info-card h2{margin-top:0;color:#f3fffb}
.card p,.info-card p,.swap-meta{color:var(--muted);line-height:1.7}
.swap-card{padding:20px;border-radius:20px;background:rgba(0,0,0,.16)}
.swap-row,.input-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.swap-row strong{font-size:1.2rem}
.swap-row small,.field span{display:block;color:var(--muted);margin-bottom:6px}
.token-badge{min-width:56px;padding:12px 14px;border-radius:16px;background:rgba(20,255,174,.14);border:1px solid rgba(20,255,174,.25);text-align:center}
.token-badge.usdt{background:rgba(0,212,255,.12)}
.swap-arrow{display:grid;place-items:center;font-size:1.6rem;color:var(--green);margin:12px 0;text-shadow:0 0 12px var(--green)}
.full{width:100%}
.info-section{padding:0 6vw 10vh}
.footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:26px 6vw 36px;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
.footer-links{display:flex;gap:18px}
.field{display:block;margin-bottom:18px}
.input-row{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
input,select{background:transparent;border:0;color:var(--text);font:inherit;outline:none}
input{width:100%}
select{min-width:76px}
.swap-page{min-height:calc(100vh - 100px);display:grid;place-items:center}
.swap-shell{width:min(920px,100%)}
.swap-card.big{padding:22px}
.swap-meta{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 18px}
.reveal{animation:rise .9s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (max-width: 900px){
  .nav-toggle{display:block}
  .navlinks{display:none}
  body.menu-open .navlinks{display:flex;position:absolute;top:82px;right:6vw;flex-direction:column;padding:16px 18px;background:rgba(5,15,13,.95);border:1px solid var(--line);border-radius:18px}
  .stats-grid,.info-section{grid-template-columns:1fr}
  .topbar,.footer{flex-direction:column;align-items:flex-start}
  .panel-head,.swap-head{flex-direction:column;align-items:flex-start}
  .ticker{animation-duration:14s}
}