*{box-sizing:border-box}
:root{--bg:#000;--fg:#fff;--primary:#14F195;--border:#424242}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;min-height:100vh;display:flex;flex-direction:column}
/* Preserve consistent typography for Chinese without font jumping */
html[lang="zh"] body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","WenQuanYi Micro Hei",Arial,Helvetica,sans-serif}
html[lang="zh"] .brand{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","WenQuanYi Micro Hei",Arial,Helvetica,sans-serif}
main{flex:1 0 auto}
#webgl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1}
.gradient-overlay{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 480px at 12% 18%,rgba(255,255,255,.04),transparent 60%),radial-gradient(900px 480px at 78% 12%,rgba(255,255,255,.03),transparent 62%),radial-gradient(900px 520px at 50% 88%,rgba(255,255,255,.02),transparent 66%);animation:bgshift 15s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate}
/* Page-specific overlays (same bg, different aesthetic variants) */
.overlay-swap{background:radial-gradient(1200px 620px at 14% 24%,rgba(255,255,255,.05),transparent 62%),radial-gradient(700px 360px at 86% 16%,rgba(255,255,255,.04),transparent 60%),radial-gradient(1000px 520px at 46% 88%,rgba(255,255,255,.03),transparent 64%)}
.overlay-markets{background:radial-gradient(1100px 540px at 12% 18%,rgba(255,255,255,.05),transparent 58%),radial-gradient(900px 420px at 78% 12%,rgba(255,255,255,.04),transparent 62%),radial-gradient(1000px 520px at 56% 88%,rgba(255,255,255,.03),transparent 66%)}
/* VeilSwap overlay: stronger radial flow from center with subtle streaks */
.overlay-veilswap{background:
  radial-gradient(1400px 700px at 50% 48%, rgba(255,255,255,.06), transparent 62%),
  radial-gradient(1000px 500px at 50% 52%, rgba(255,255,255,.05), transparent 62%),
  conic-gradient(from 0.25turn at 50% 50%, rgba(255,255,255,.04), transparent 20%, rgba(255,255,255,.04) 40%, transparent 60%, rgba(255,255,255,.03) 80%, transparent 100%));
  animation:bgshift 18s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate
}
.overlay-veilswap::after{content:"";position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.18;background:
  repeating-linear-gradient(-12deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,.03) 2px 4px, transparent 4px 18px);
  filter:blur(.3px) saturate(120%);
  animation:streak 6s linear infinite;
  -webkit-mask-image: radial-gradient(900px 520px at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 90%);
          mask-image: radial-gradient(900px 520px at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 90%)
}
.overlay-veilswap::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;filter:blur(1px);background:
  conic-gradient(from 0turn at 50% 50%, rgba(255,255,255,.05), transparent 25%, rgba(255,255,255,.04) 50%, transparent 75%, rgba(255,255,255,.05));
  animation:spinflow 28s linear infinite
}
@keyframes streak{0%{transform:translateX(-6%)}100%{transform:translateX(6%)}}
@keyframes spinflow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes bgshift{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-2%,1%,0)}40%{transform:translate3d(2%,-1%,0)}60%{transform:translate3d(-1%,2%,0)}80%{transform:translate3d(1%,-2%,0)}100%{transform:translate3d(0,0,0)}}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block}
#webgl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1}
.particle-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
.header{position:fixed;top:0;left:0;right:0;z-index:2;height:96px;display:flex;align-items:center;justify-content:space-between}
.header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px;max-width:calc(100% - 560px);overflow:hidden}
.header a{color:rgba(255,255,255,.7);text-decoration:none;font-family:monospace;text-transform:uppercase;transition:.2s}
.header a:hover{color:#fff}
.header .header-actions{flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-family:'Sentient',Arial,sans-serif;color:#fff}
.brand img{height:26px;width:auto;display:block}
.launch{color:var(--primary)}
.cn-logo-img{width:28px;height:28px;display:block;border-radius:8px;background:#0b0b0b;border:1px solid #222;object-fit:contain;image-rendering:auto}
/* Header buttons use the same aesthetic as global .btn with compact height */
.header .btn, .header a.btn, .header button.btn{height:44px;padding:0 18px;border-radius:0}
/* Header action group spacing and alignment */
.header .header-actions{gap:16px}
/* Black aesthetic language button variant matching site style */
.btn-lang{border:1px solid #2a2a2a !important; background:linear-gradient(180deg, rgba(18,18,18,.96), rgba(10,10,10,.92)) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25) !important}
.btn-lang:hover{filter:brightness(1.02)}
.btn-lang:active{transform:translateY(1px) scale(.995)}
/* Gold variant for Get the app with a slightly different shade than global btn */
.btn-app{border:1px solid #f2c200 !important; background:linear-gradient(180deg,#ffd84a,#f2c200) !important; color:#000 !important; box-shadow:inset 0 0 40px 0 rgba(255,216,74,.65), 0 8px 24px rgba(0,0,0,.25) !important}
.btn-app:hover{filter:brightness(1.02)}
.btn-app:active{transform:translateY(1px) scale(.995)}
.header.scrolled{backdrop-filter:saturate(180%) blur(8px);background:rgba(0,0,0,.45);border-bottom:1px solid #111}
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:96px;text-align:center}
.pill{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid var(--border);background:#26262680;color:#aaa;font-family:monospace;margin:0 auto 24px;border-radius:6px}
.hero h1{font-size:64px;line-height:1.05;margin:0;position:relative;background:linear-gradient(120deg,#ffffff 0%,#ffffff 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 2px 14px rgba(20,241,149,.18);letter-spacing:.01em;animation:headlineGlow 14s ease-in-out infinite alternate}
.hero h1 i{font-weight:300}
.hero p{max-width:520px;margin:16px auto 0;color:#bbb;font-family:monospace}
.cta{margin-top:48px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;border:1px solid var(--primary);padding:0 24px;height:64px;color:#000;background:var(--primary);text-decoration:none;font-family:monospace;text-transform:uppercase;box-shadow:inset 0 0 54px 0 rgba(20,241,149,.35);white-space:nowrap;line-height:1;cursor:pointer;position:relative;overflow:hidden;transition:transform .06s ease, filter .12s ease, box-shadow .12s ease}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px) scale(0.99); filter:brightness(0.98); box-shadow:inset 0 0 38px 0 rgba(20,241,149,.35)}
.btn.shine{position:relative;overflow:hidden;box-shadow:inset 0 0 54px 0 rgba(255,255,255,.55),0 8px 24px rgba(0,0,0,.25)}
.btn.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.25) 40%,transparent 70%);background-size:200% 100%;transform:translateX(-50%);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Landing sections */
  .section{position:relative;z-index:1;padding:96px 0}
.section .container{max-width:1100px;text-align:center}
.eyebrow{font-family:monospace;letter-spacing:.12em;color:#aaa;text-transform:uppercase;font-size:12px}
.h2{font-size:40px;line-height:1.1;margin:8px 0 12px 0}
.muted{color:#bbb}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border:1px solid var(--border);background:#0a0a0a80;border-radius:12px;padding:20px}
.notify-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(10,10,10,.70),rgba(10,10,10,.50));box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02)}
.notify-card::before{content:"";position:absolute;inset:-1px;border-radius:12px;padding:1px;background:linear-gradient(180deg, rgba(20,241,149,.22), rgba(255,255,255,.10));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.notify-form{flex:1 1 360px;min-width:280px;gap:10px}
.notify-form input{flex:1 1 auto;min-width:200px;background:#0d0d0d;border:1px solid #2a2a2a;color:#fff;padding:0 12px;border-radius:8px;height:56px;outline:none;transition:border .2s, box-shadow .2s}
.notify-form input:focus{border-color:#404040;box-shadow:0 0 0 3px rgba(20,241,149,.18)}
.notify-form input[aria-invalid="true"]{border-color:#a33;box-shadow:0 0 0 3px rgba(255,0,0,.12)}
.notify-meta{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.notify-success{margin-top:12px}
.notify-error{color:#ff9898;font-family:monospace;font-size:12px;margin-top:8px}
.btn[disabled],button.btn:disabled{opacity:.6;pointer-events:none;filter:saturate(70%) brightness(.95)}
.metric{display:flex;flex-direction:column;gap:6px}
.metric .label{font-family:monospace;color:#aaa;font-size:12px}
.metric .value{font-size:28px}
.feature{display:flex;gap:16px}
.feature .icon{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#000;background:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px auto 0}
.secondary{border:1px solid #444;color:#fff;background:transparent;box-shadow:inset 0 0 54px 0 rgba(153,69,255,.35)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
input{height:40px;line-height:40px}
button,.btn{cursor:pointer}
.footer{position:relative;z-index:1;margin-top:0;border-top:1px solid #111;color:#9a9a9a;padding:28px 0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.35));backdrop-filter:saturate(140%) blur(4px);font-family:monospace;font-size:12px}
.page-home .footer{margin-top:160px}
.footer a{color:#bdbdbd;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.marquee{position:relative;z-index:1;border-top:1px solid #111;border-bottom:1px solid #111;background:#050505}
.marquee .track{display:flex;gap:48px;white-space:nowrap;will-change:transform;animation:marquee 22s linear infinite}
.marquee .item{font-family:monospace;color:#bbb;letter-spacing:.1em;text-transform:uppercase;padding:18px 0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@keyframes headlineGlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* Default: hide mobile-only UI on desktop */
.mobile-toggle{display:none}
.mobile-drawer{display:none}

/* Mobile-first fixes */
@media (max-width: 640px){
  /* Hide heavy backgrounds/overlays */
  #webgl, #particles, #dotText { display:none !important }
  .gradient-overlay { opacity:.6; animation:none; z-index:-1 }
  /* Header: stack and reduce height */
  .header{height:72px; padding-top:8px; display:flex; align-items:center; gap:10px; backdrop-filter:saturate(180%) blur(8px); background:rgba(0,0,0,.55); border-bottom:1px solid #111}
  .header nav{display:none}
  /* Keep header actions visible on mobile */
  .header .header-actions{display:flex}
  .brand img{height:24px !important; width:24px !important; border-radius:6px !important; margin-right:8px !important}
  .brand{font-size:20px}
  /* Keep launch button visible on mobile */
  .launch{display:inline-flex}
  /* Mobile menu toggle */
  .mobile-toggle{display:inline-flex !important;align-items:center;justify-content:center;margin-left:auto;width:38px;height:38px;border:1px solid #2a2a2a;border-radius:8px;background:#111;color:#fff}
  .mobile-toggle svg{width:18px;height:18px}
  /* Drawer */
  .mobile-drawer{position:fixed;inset:0;z-index:30;display:none;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}
  .mobile-drawer.open{display:block}
  .mobile-drawer .panel{position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);background:#0b0b0c;border-left:1px solid #151515;box-shadow:-20px 0 80px rgba(0,0,0,.5);display:flex;flex-direction:column;padding:16px}
  .mobile-drawer .panel a{display:block;color:#ddd;text-decoration:none;padding:12px 8px;border-bottom:1px solid #151515;font-family:monospace;text-transform:uppercase}
  .mobile-drawer .panel a:hover{color:#fff}
  .mobile-drawer .panel .btn{margin-top:8px;height:48px}
  .no-scroll{overflow:hidden;touch-action:none}
  /* Hero spacing and typography */
  .hero{min-height:90svh; padding-top:104px; padding-bottom:72px; position:relative}
  .hero::before{content:""; position:absolute; inset:0; z-index:0; opacity:0.18; background:
    url('./veildex.png') center/cover no-repeat,
    radial-gradient(60% 40% at 50% 20%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(50% 30% at 80% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(50% 40% at 20% 90%, rgba(255,255,255,.06), transparent 64%);
    filter: saturate(110%)}
  .hero h1{font-size:34px; line-height:1.1; animation:none}
  .pill{height:26px; font-size:11px; margin-bottom:16px}
  .cta .btn{height:52px; padding:0 18px}
  .cta-row{gap:8px}
  /* Container padding */
  .container{padding:0 16px}
  /* Section spacing across inner pages */
  .section{padding:72px 0 48px}
  .page-swap .section, .page-markets .section{padding-top:88px !important; padding-bottom:32px !important}
  main[style*="padding-top"]{padding-top:88px !important}
  /* Typography scale */
  .h2{font-size:28px; line-height:1.15}
  .metric .value{font-size:22px}
  /* Grids collapse */
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr !important}
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* Cards padding tighter */
  .card{padding:14px}
  /* Buttons and inputs */
  .btn, a.btn, button.btn{height:52px}
  .notify-form input{height:48px}
  .cn-input,.cn-select{height:38px}
  /* Charts */
  .chart-box{height:220px !important}
  /* Footer spacing */
  .page-home .footer{margin-top:80px}
  /* Prevent side-scrolling (overflow) and force width-fit */
  html, body { overflow-x:hidden }
  .container, .section, main, header, footer { max-width:100%; }
  /* Avoid absolute-centered nav causing overflow on narrow widths */
  .header nav{position:static; transform:none}
  /* Swap page: allow horizontal scroll and strong zoom-out */
  body.page-swap, .page-swap { overflow-x:auto !important }
  /* Heavily zoom out the swap layout on phones */
  .page-swap main.scale-zoom{ min-width:1280px; transform:scale(0.58); transform-origin:0 0 }
  /* Unstick the floating order summary bar on mobile */
  .page-swap .card[style*="position:sticky"]{ position:static !important; bottom:auto !important; backdrop-filter:none !important; background:#0a0a0a !important }
  #order-summary{ grid-template-columns:1fr !important }
}

/* Unique hero entry: subtle scale, blur, and letter tracking with delay */
.hero-enter{opacity:0;transform:translateY(18px) scale(.98);filter:blur(6px);transition:transform 1s cubic-bezier(.2,.85,.15,1), opacity .9s, filter .9s;transition-delay:.70s}
.hero-headline{letter-spacing:.02em}
.hero-headline.hero-enter{transition-duration:1.2s;transition-delay:.90s}
.hero-enter.in{opacity:1;transform:none;filter:none}

/* Header staged entry with staggered delays */
.header-enter{opacity:0;transform:translateY(-14px);filter:blur(6px);transition:transform .9s cubic-bezier(.2,.85,.15,1), opacity .8s, filter .8s;transition-delay:.75s}
.header-enter.in{opacity:1;transform:none;filter:none}
.delay-2{transition-delay:.95s}
.delay-3{transition-delay:1.15s}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#bbb;font-family:monospace;font-size:12px}
.scroll-cue svg{width:18px;height:18px;animation:bounce 1.4s infinite ease-in-out}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(24px);transition:transform .9s cubic-bezier(.2,.65,.2,1),opacity .9s}
.reveal.inview{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-24px);transition:transform .9s cubic-bezier(.2,.65,.2,1),opacity .9s}
.reveal-left.inview{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(24px);transition:transform .9s cubic-bezier(.2,.65,.2,1),opacity .9s}
.reveal-right.inview{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px)}
.stagger.inview>*{opacity:1;transform:none;transition:transform .8s, opacity .8s}
.stagger.inview>*:nth-child(1){transition-delay:.05s}
.stagger.inview>*:nth-child(2){transition-delay:.15s}
.stagger.inview>*:nth-child(3){transition-delay:.25s}
.stagger.inview>*:nth-child(4){transition-delay:.35s}
/* Extend stagger delays for richer builds */
.stagger.inview>*:nth-child(5){transition-delay:.45s}
.stagger.inview>*:nth-child(6){transition-delay:.55s}
.stagger.inview>*:nth-child(7){transition-delay:.65s}
.stagger.inview>*:nth-child(8){transition-delay:.75s}
.stagger.inview>*:nth-child(9){transition-delay:.85s}
.stagger.inview>*:nth-child(10){transition-delay:.95s}

/* Page-scoped build polish (subtle blur + scale) */
.page-swap .reveal,.page-markets .reveal{filter:blur(6px);transform:translateY(18px) scale(.98)}
.page-swap .reveal.inview,.page-markets .reveal.inview{filter:none;transform:none}

/* Directional enters for major panels */
.enter-left.reveal{opacity:0;transform:translateX(-8vw) scale(.98);transition:transform .9s cubic-bezier(.2,.9,.15,1),opacity .9s}
.enter-right.reveal{opacity:0;transform:translateX(8vw) scale(.98);transition:transform .9s cubic-bezier(.2,.9,.15,1),opacity .9s}
.enter-up.reveal{opacity:0;transform:translateY(-8vh) scale(.98);transition:transform .9s cubic-bezier(.2,.9,.15,1),opacity .9s}
.enter-down.reveal{opacity:0;transform:translateY(8vh) scale(.98);transition:transform .9s cubic-bezier(.2,.9,.15,1),opacity .9s}
.enter-left.reveal.inview,.enter-right.reveal.inview,.enter-up.reveal.inview,.enter-down.reveal.inview{opacity:1;transform:none}

/* Directional staggers (children slide from a side) */
.stagger.from-left>*{opacity:0;transform:translateX(-6vw)}
.stagger.from-right>*{opacity:0;transform:translateX(6vw)}
.stagger.from-up>*{opacity:0;transform:translateY(-6vh)}
.stagger.from-down>*{opacity:0;transform:translateY(6vh)}
.stagger.inview.from-left>*,.stagger.inview.from-right>*,.stagger.inview.from-up>*,.stagger.inview.from-down>*{opacity:1;transform:none;transition:transform .85s cubic-bezier(.2,.8,.2,1), opacity .85s}

/* Parallax */
[data-parallax]{will-change:transform}

/* Progress bar */
.progress{position:fixed;left:0;top:0;height:2px;background:#14F195;width:0;z-index:5;box-shadow:0 0 12px rgba(20,241,149,.45)}

/* Gold/Transparent button styles (global) */
.btn, a.btn, button.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;border:1px solid var(--primary) !important;padding:0 24px;height:64px;color:#000 !important;background:var(--primary) !important;text-decoration:none;font-family:monospace;text-transform:uppercase;box-shadow:inset 0 0 54px 0 rgba(20,241,149,.35) !important;white-space:nowrap;line-height:1;cursor:pointer;position:relative;overflow:hidden;transition:transform .06s ease, filter .12s ease, box-shadow .12s ease}
.btn:hover, a.btn:hover, button.btn:hover{filter:brightness(1.02)}
.btn:active, a.btn:active, button.btn:active{transform:translateY(1px) scale(0.99); filter:brightness(0.98); box-shadow:inset 0 0 38px 0 #D9A800 !important}
.btn.shine, a.btn.shine, button.btn.shine{position:relative;overflow:hidden}
.btn.shine::after, a.btn.shine::after, button.btn.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.25) 40%,transparent 70%);background-size:200% 100%;transform:translateX(-50%);animation:shine 4s ease-in-out infinite}
.btn.secondary, a.btn.secondary, button.btn.secondary{border:1px solid #444 !important;color:#fff !important;background:transparent !important;box-shadow:none !important}
.btn.secondary:active, a.btn.secondary:active, button.btn.secondary:active{transform:translateY(1px) scale(0.99); filter:brightness(0.98)}
/* Active state (e.g., selected timeframe) */
.btn.active{border-color:#14F195 !important;background:linear-gradient(180deg, rgba(20,241,149,.22), rgba(20,241,149,.08)) !important;color:#fff !important}
/* Press feedback */
.btn.loading{opacity:.85}
.btn.loading::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;border:2px solid rgba(0,0,0,.35);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{0%{transform:translateY(-50%) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg)}}

/* Prominent launch notice */
.launch-note{display:inline-flex !important;align-items:center;gap:8px;border:1px solid #14F195 !important;background:linear-gradient(180deg, rgba(20,241,149,.28), rgba(20,241,149,.12)) !important;color:#fff !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;box-shadow:0 0 30px rgba(20,241,149,.22) inset, 0 10px 30px rgba(0,0,0,.35) !important}
.launch-note::before{content:"⚠";font-size:12px}

/* Chart containers */
.chart-box{height:240px;overflow:hidden}
.chart-box.small{height:160px}
canvas.chart{width:100% !important;height:100% !important;display:block}
/* VeilChart overlay styles */
.veil-label{position:absolute;transform:translate(-50%, -50%);padding:2px 6px;border:1px solid var(--primary);background:linear-gradient(180deg, rgba(20,241,149,.20), rgba(20,241,149,.08));color:#fff;font-family:monospace;font-size:11px;border-radius:0;pointer-events:none;white-space:nowrap}
/* Swap summary change flash */
@keyframes flashChange{0%{background:rgba(20,241,149,.18)}100%{background:transparent}}
.value.flash{animation:flashChange .8s ease; padding:2px 6px; border-radius:4px}
/* Amount input aesthetic borders (Swap) */
#from-amount,#to-amount{border:1px solid #3a3a3a;background:#000;box-shadow:inset 0 0 0 1px #1a1a1a, inset 0 0 18px rgba(20,241,149,.06)}
#from-amount:hover,#to-amount:hover{box-shadow:inset 0 0 0 1px #2a2a2a, inset 0 0 22px rgba(20,241,149,.10)}
#from-amount:focus,#to-amount:focus{outline:none;box-shadow:inset 0 0 0 2px #14F195, 0 0 24px rgba(20,241,149,.18)}
/* Flash red effect for disabled modes */
@keyframes flashRed{0%{box-shadow:0 0 0 2px #ff3b3b inset;background:rgba(255,59,59,.1)}100%{box-shadow:none;background:transparent}}
.flash-red{animation:flashRed .6s ease}

/* Global CN inputs/selects so Markets matches Swap styling */
.cn-select, .cn-input{width:100%;padding:8px 10px;border-radius:0;border:1px solid var(--border);background:#000;color:#fff;transition:box-shadow .2s,transform .05s;font-size:12px;line-height:20px;outline:none}
.cn-select:hover, .cn-input:hover{box-shadow:0 0 0 1px #333,0 8px 22px rgba(68,68,68,0.25)}
.cn-select:focus, .cn-input:focus{box-shadow:0 0 0 1px #666,0 10px 28px rgba(136,136,136,0.25)}
.cn-input::placeholder{color:#aaa}

/* Token picker modal (global aesthetic) */
.cn-token-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:40;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.cn-token-modal:not(.hidden){display:flex}
.cn-token-panel{position:relative;width:min(560px,92vw);max-height:82vh;overflow:auto;background:#0b0b0b;border:1px solid #222;border-radius:12px;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.cn-token-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.cn-token{display:flex;align-items:center;gap:8px;border:1px solid #222;border-radius:8px;padding:8px;background:#0a0a0a;cursor:pointer}
.cn-token:hover{border-color:#444;background:#0e0e0e}
.cn-token[data-chain="bsc"]{border-color:#b38f00}
.cn-token[data-chain="eth"]{border-color:#3b82f6}
.cn-token[data-chain="sol"]{border-color:#22d3ee}
.cn-token[data-chain="btc"]{border-color:#f59e0b}
.cn-logo svg{width:28px;height:28px;display:block}
.cn-ava{width:32px;height:32px;border-radius:8px;background:#1a1a1a;color:#ddd;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.cn-token-modal.hidden{display:none!important}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:40}
.modal{width:min(520px,90vw);border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(16,16,16,.96),rgba(10,10,10,.92));padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal h3{margin:0 0 8px 0}
.modal .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}
.modal label{font-family:monospace;color:#bbb;font-size:12px}
.modal input[type=range]{width:60%}
.modal .actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}

/* Subtle loading state for buttons */
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.btn.loading{cursor:progress}
.btn.loading::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.35);border-top-color:#000;border-radius:50%;margin-right:8px;animation:spin .8s linear infinite}
.btn.loading.shine::after, a.btn.loading.shine::after, button.btn.loading.shine::after{animation:none;opacity:.25}

/* Chain color accents (applied via data-chain attr) */
/* Chain tints per user spec */
button[data-chain="bsc"].secondary{box-shadow:inset 0 0 54px 0 rgba(255,199,0,.38) !important;border-color:#f2c200 !important}
button[data-chain="eth"].secondary{box-shadow:inset 0 0 54px 0 rgba(74,222,128,.28) !important;border-color:#22c55e !important}
button[data-chain="sol"].secondary{box-shadow:inset 0 0 54px 0 rgba(139,92,246,.34) !important;border-color:#8b5cf6 !important}
button[data-chain="btc"].secondary{box-shadow:inset 0 0 54px 0 rgba(245,158,11,.28) !important;border-color:#f59e0b !important}

@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .hero h1{font-size:44px}
  /* Header simplification: brand + hamburger only */
  .header{height:72px; padding-top:8px; display:flex; align-items:center; gap:10px; backdrop-filter:saturate(180%) blur(8px); background:rgba(0,0,0,.55); border-bottom:1px solid #111}
  .header nav{display:none !important}
  /* Keep header actions and launch button visible on small tablets */
  .header .header-actions{display:flex !important}
  #lang-toggle{display:flex !important}
  .launch{display:inline-flex !important}
  #menu-toggle{display:inline-flex !important}
  .brand img{height:24px !important; width:24px !important; border-radius:6px !important; margin-right:8px !important}
  .brand{font-size:20px}
}

/* Prevent nav/buttons overlap on mid-width screens */
@media (max-width: 1120px){
  .header nav{display:none !important}
  .header .header-actions{display:flex !important}
}