:root{
    /* DARK is the default theme — neutral charcoal (Pons-style), lime used only as an accent */
    --bg:#0b0b0d; --bg2:#0f0f12; --panel:#151519; --panel2:#1a1a1f; --raise:#212127;
    --line:#242429; --line2:#2e2e35;
    --txt:#f1f4f8; --mut:#9a9aa3; --dim:#68686f;
    --brand:#c7ff36; --brand2:#a6e01f; --brandsoft:rgba(199,255,54,.12); --brandline:rgba(199,255,54,.42);
    --up:#3ddc84; --down:#ff5f6d; --amber:#ffcb47; --eth:#8a9cff;
    --grad:linear-gradient(135deg,#c7ff36,#a6e01f);
    --sh:0 24px 60px -20px rgba(0,0,0,.7);
    --glow:rgba(199,255,54,.18); --grid:rgba(255,255,255,.03); --bgfade:rgba(199,255,54,.09);
    --ring:rgba(255,255,255,.09); --ringsoft:rgba(255,255,255,.045);
    --headbg:rgba(9,9,11,.8);
    --r:16px; --rsm:11px; --rlg:22px; --rpill:999px;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --disp:"Space Grotesk",var(--sans);
    --mono:"SF Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  }
  :root[data-theme="light"]{
    --bg:#f4f7fa; --bg2:#eaeff4; --panel:#ffffff; --panel2:#f4f7fa; --raise:#eaeff4;
    --line:#e4eaf0; --line2:#d3dbe4;
    --txt:#0e1620; --mut:#54616f; --dim:#8b96a4;
    --brand:#0aa35c; --brand2:#0a9455; --brandsoft:rgba(10,163,92,.12); --brandline:rgba(10,163,92,.28);
    --up:#0aa35c; --down:#e5484d; --amber:#b9770a; --eth:#4f5bd5;
    --grad:linear-gradient(135deg,#0aa35c,#16c46f);
    --sh:0 16px 40px -20px rgba(30,50,70,.18);
    --glow:rgba(10,163,92,.10); --grid:rgba(15,30,45,.045); --bgfade:rgba(10,163,92,.06);
    --ring:transparent; --ringsoft:transparent;
    --headbg:rgba(255,255,255,.82);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
  a{color:inherit;text-decoration:none}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .up{color:var(--up)}.down{color:var(--down)}
  .ico{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .ico.sm{width:15px;height:15px}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .eyebrow{color:var(--brand);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

  /* particles */
  .themetgl{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rsm);background:var(--panel);border:1px solid var(--line2);color:var(--mut);cursor:pointer;transition:.15s;flex:0 0 auto}
  .themetgl:hover{color:var(--brand);border-color:var(--brandline)}
  #bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.12}
  :root[data-theme="light"] #bg{opacity:.06}
  .wrap,footer,.tape{position:relative;z-index:1}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:14px;border-radius:var(--rpill);padding:11px 20px;background:var(--brand);color:#04140d;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
  .btn:hover{background:#1af0a0}
  .btn.ghost{background:var(--panel);color:var(--txt);border:1px solid var(--line2)}
  .btn.ghost:hover{border-color:var(--brandline);color:var(--brand);box-shadow:none;background:var(--panel2)}
  .btn.islive{color:var(--brand);border-color:var(--brandline)}
  .btn.lg{padding:14px 26px;font-size:15px}
  .btn.sm{padding:8px 14px;font-size:13px}

  /* header */
  header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);background:var(--headbg);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:28px;height:70px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em}
  .brand img{width:34px;height:34px;border-radius:10px}
  .brand small{color:var(--brand);font-weight:700}
  nav.links{display:flex;gap:26px;margin-left:6px}
  nav.links a{color:var(--mut);font-size:14px;font-weight:500;transition:color .15s}
  nav.links a:hover{color:var(--txt)}
  .spacer{flex:1}
  .chainpill{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);border:1px solid var(--line2);border-radius:var(--rpill);padding:7px 13px;background:var(--panel)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 9px var(--brand);animation:pulse 2.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  .burger{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:40px;background:var(--panel2);border:1px solid var(--brandline);border-radius:11px;cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(199,255,54,.06),0 4px 16px -6px rgba(199,255,54,.25)}
  .burger:hover{border-color:var(--brand)}
  .burger span{width:20px;height:2px;background:var(--txt);border-radius:2px}
  .mobnav{display:none;position:absolute;top:70px;left:0;right:0;z-index:59;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 20px 18px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
  .mobnav a{display:block;padding:14px 6px;color:var(--txt);font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
  .mobnav a:last-child{border-bottom:0}
  .mobnav .mobchain{color:var(--mut);font-size:12.5px;font-weight:500;padding:12px 6px 4px;border:0}
  @media(max-width:860px){nav.links,.chainpill{display:none} .burger{display:flex} .mobnav:not([hidden]){display:block} .nav{gap:8px} .nav #connectBtn{padding:10px 13px;font-size:13px}}
  /* very narrow phones: the brand + connect button + burger were overflowing the viewport,
     pushing the burger half off-screen — shrink the connect label and side padding to fit. */
  @media(max-width:420px){.ct-wallet{display:none} .wrap{padding:0 14px} .nav{gap:6px} .brand{font-size:17px;gap:8px} .brand img{width:28px;height:28px} .nav #connectBtn{padding:9px 11px}}

  /* ticker tape */
  .tape{overflow:hidden;white-space:nowrap;background:var(--bg2);border-bottom:1px solid var(--line)}
  .tape-track{display:inline-flex;animation:scroll 80s linear infinite;will-change:transform}
  .tape:hover .tape-track{animation-play-state:paused}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .titem{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-right:1px solid var(--line);font-size:12.5px}
  .titem img{width:17px;height:17px;border-radius:5px;background:#fff;object-fit:contain;padding:1px}
  .titem .t{font-weight:600;color:var(--txt)}
  .titem .p{color:var(--mut);font-size:12px}
  .titem .c{font-weight:600;font-size:11.5px}

  /* hero */
  .hero{padding:74px 0 44px}
  .hero .eyebrow{margin-bottom:18px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:var(--rpill);padding:6px 14px;background:var(--panel)}
  .hero-top{display:flex;align-items:center;gap:48px;margin-bottom:46px}
  .hero-left{flex:1;min-width:0}
  .hero-right{flex:0 0 auto;display:grid;place-items:center}
  .hero-logo-wrap{position:relative;display:grid;place-items:center;padding:26px}
  .hero-logo-wrap::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(199,255,54,.22),transparent 68%);filter:blur(14px)}
  .hero-logo{position:relative;width:280px;max-width:34vw;border-radius:34px;box-shadow:0 30px 70px -24px rgba(199,255,54,.4)}
  /* motion polish — reveal on scroll (GPU transforms only; disabled for reduced-motion) */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .65s cubic-bezier(.2,.75,.2,1);will-change:opacity,transform}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  /* subtle entrance for dynamically rendered cards (board + dashboard only) */
  .tcard,.rcard{animation:cardin .5s cubic-bezier(.2,.75,.2,1) both}
  @keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.985)}}
  /* soft drifting aurora behind everything (very light, GPU) */
  body::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:70vh;z-index:0;pointer-events:none;
    background:radial-gradient(50% 60% at 78% 8%,rgba(199,255,54,.10),transparent 70%),radial-gradient(40% 55% at 12% 4%,rgba(110,231,255,.07),transparent 70%);
    filter:blur(6px);animation:aurora 18s ease-in-out infinite alternate}
  @keyframes aurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
  :root[data-theme="light"] body::before{opacity:.45}
  /* LIGHT: soft green gradient wash instead of harsh flat white (easier on the eyes) */
  :root[data-theme="light"] body{
    background:
      radial-gradient(1200px 720px at 85% -12%,rgba(10,163,92,.11),transparent 58%),
      radial-gradient(900px 560px at 6% 3%,rgba(10,163,92,.06),transparent 55%),
      linear-gradient(180deg,#f2f8f4 0%,var(--bg) 46%);
    background-attachment:fixed;
  }
  /* DARK (default): Pons-style — a neutral charcoal canvas, near-flat, with just a faint vignette
     for depth. Lime is reserved for buttons/accents, not smeared across the whole background —
     a heavy green ambient wash + green-glowing card borders read as amateurish next to Pons's
     clean neutral surface, where color contrast comes from token art, not chrome. */
  :root:not([data-theme="light"]) body{
    background:
      radial-gradient(1000px 640px at 82% -8%,rgba(255,255,255,.035),transparent 60%),
      radial-gradient(900px 620px at 8% 6%,rgba(255,255,255,.02),transparent 55%),
      var(--bg);
    background-attachment:fixed;
  }
  /* DARK (default): flat neutral cards, subtle hairline border — brand-colored border only on hover */
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .tcard,
  :root:not([data-theme="light"]) .lcard{
    box-shadow:0 8px 30px -18px rgba(0,0,0,.6);
  }
  :root:not([data-theme="light"]) .panel:hover,
  :root:not([data-theme="light"]) .tcard:hover,
  :root:not([data-theme="light"]) .lcard:hover{
    border-color:var(--brandline);
  }
  :root:not([data-theme="light"]) header{box-shadow:0 1px 0 var(--line)}
  @media(prefers-reduced-motion:reduce){body::before{animation:none}}
  /* orbit constellation — stock logos circling the brand (like a "pairs with anything" map) */
  .orbit{position:relative;width:400px;height:400px;max-width:82vw;max-height:82vw}
  .orbit::before{content:"";position:absolute;inset:9%;border:1px solid var(--line);border-radius:50%}
  .orbit::after{content:"";position:absolute;inset:27%;border:1px dashed var(--line2);border-radius:50%;opacity:.6}
  .orbit-ring{position:absolute;inset:0;animation:orbspin 70s linear infinite;will-change:transform}
  .orbit-dot{position:absolute;transform:translate(-50%,-50%)}
  .orbit-dot .oi{display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#0e1218;border:1px solid var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:orbspin-r 70s linear infinite;will-change:transform}
  .orbit-dot .oi img{width:100%;height:100%;object-fit:cover;display:block}
  .orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle,rgba(199,255,54,.18),transparent 70%)}
  .orbit-core img{width:92px;height:92px;border-radius:24px;box-shadow:0 18px 50px -8px rgba(199,255,54,.55)}
  .orbit-core span{position:absolute;bottom:14px;font-size:9.5px;letter-spacing:.04em;color:var(--dim);text-align:center;line-height:1.25;text-transform:uppercase}
  @keyframes orbspin{to{transform:rotate(360deg)}}
  @keyframes orbspin-r{to{transform:rotate(-360deg)}}
  @media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-dot .oi{animation:none}}
  @media(max-width:880px){.hero-top{gap:24px}.hero-logo{width:150px}.orbit{width:300px;height:300px}}
  @media(max-width:620px){
    .hero-top{flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:34px}
    .hero-left{width:100%}
    .hero .eyebrow{margin-left:auto;margin-right:auto}
    .hero p.sub{margin-left:auto;margin-right:auto}
    .hero-right{width:100%}
    .orbit{width:250px;height:250px;max-width:72vw;max-height:72vw;margin:0 auto}
    .orbit-core{width:130px;height:130px}.orbit-core img{width:70px;height:70px}
    .orbit-dot .oi{width:38px;height:38px}
  }
  .hero h1{font-family:var(--disp);font-size:clamp(40px,6.4vw,74px);line-height:1.0;letter-spacing:-.038em;font-weight:700;margin:0 0 20px}
  .hero h1 .g{background:linear-gradient(100deg,#C7FF36,#8ff0c0 55%,#6ee7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand)}
  .hero p.sub{font-size:clamp(16px,2.1vw,19px);color:var(--mut);max-width:600px;margin:0 0 30px;line-height:1.55}
  .heroact{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:46px}
  .stats{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
  .stat{flex:1;min-width:150px;padding:20px 24px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat b{display:block;font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
  .stat span{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:500}

  /* sections */
  section{padding:44px 0}
  .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
  .shead h2{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.025em;margin:8px 0 0}
  .shead p{color:var(--mut);font-size:14.5px;margin:7px 0 0;max-width:460px}

  /* search */
  .search{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rpill);padding:10px 16px;min-width:230px;color:var(--mut)}
  .search input{background:none;border:0;outline:0;color:var(--txt);font-size:14px;width:100%;font-family:var(--sans)}

  /* stock grid */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
  .scard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;transition:border-color .16s,transform .16s,background .16s}
  .scard:hover{border-color:var(--brandline);background:var(--panel2)}
  .scard .top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .scard img{width:40px;height:40px;border-radius:11px;background:#fff;object-fit:contain;padding:3px;flex:0 0 auto}
  .scard .tk{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em}
  .scard .nm{color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
  .lbadge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line2);border-radius:var(--rpill);padding:3px 8px}
  .lbadge i{width:5px;height:5px;border-radius:50%;background:var(--dim)}
  .lbadge.live{color:var(--brand);border-color:var(--brandline)}
  .lbadge.live i{background:var(--brand);box-shadow:0 0 6px var(--brand)}
  .scard .pxrow{display:flex;justify-content:space-between;align-items:baseline}
  .scard .px{font-size:17px;font-weight:600}
  .chg{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:var(--rpill)}
  .chg.up{background:rgba(37,209,150,.12)}.chg.down{background:rgba(255,95,109,.12)}
  .scard .pairbtn{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;padding:9px;border-radius:var(--rpill);background:transparent;color:var(--mut);border:1px solid var(--line2);cursor:pointer;transition:.15s}
  .scard:hover .pairbtn{background:var(--brandsoft);color:var(--brand);border-color:var(--brandline)}

  /* two-col launch + board */
  .cols{display:grid;grid-template-columns:1.35fr .9fr;gap:24px;align-items:start}
  @media(max-width:980px){.cols{grid-template-columns:1fr}}
  .tokprev{position:sticky;top:88px}
  @media(max-width:980px){.tokprev{position:static}}
  .pvhead{display:flex;align-items:center;gap:13px;padding:2px 0 18px}
  .pvlogo{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--bg2);border:1px solid var(--line2);flex:0 0 auto}
  .pvname{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--txt);word-break:break-word}
  .pvticker{font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
  .ethdot{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a6b6ff,#5c6cff);display:inline-block;vertical-align:-2px;margin-left:6px}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rlg);padding:26px}
  .panel .ptitle{display:flex;align-items:center;gap:10px;margin:0 0 4px}
  .panel .ptitle .pi{width:34px;height:34px;border-radius:10px;background:var(--brandsoft);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
  .panel h3{font-family:var(--disp);margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
  .panel .hint{color:var(--mut);font-size:13.5px;margin:0 0 20px;padding-left:44px}
  label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:16px 0 7px;letter-spacing:.01em}
  input.f,select.f,textarea.f{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rsm);padding:12px 14px;color:var(--txt);font-size:14px;outline:0;font-family:var(--sans);transition:.15s}
  input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--brandline);box-shadow:0 0 0 3px var(--brandsoft)}
  textarea.f{resize:vertical;min-height:62px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .upload{border:1.5px dashed var(--line2);border-radius:var(--rsm);padding:20px;text-align:center;color:var(--dim);cursor:pointer;transition:.15s;font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px}
  .upload:hover{border-color:var(--brandline);color:var(--brand)}
  .fees{display:flex;gap:9px}
  .feeopt{flex:1;text-align:center;padding:11px;border:1px solid var(--line2);border-radius:var(--rsm);cursor:pointer;font-weight:600;font-size:13.5px;color:var(--mut);transition:.15s}
  .feeopt.on{border-color:var(--brandline);background:var(--brandsoft);color:var(--brand)}
  .toggle{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rsm);padding:13px 15px;margin-top:16px}
  .sw{width:44px;height:25px;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;transition:.15s;flex:0 0 auto}
  .sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.15s}
  .sw.on{background:var(--brand)}.sw.on::after{left:22px}
  .pairsel{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rsm);padding:8px 13px;margin-top:2px}
  .pairsel img{width:28px;height:28px;border-radius:7px;background:#fff;padding:2px;flex:0 0 auto}
  .pairsel select{background:none;border:0;padding:6px 0;color:var(--txt);font-size:14px;outline:0;width:100%;font-family:var(--sans);cursor:pointer}
  .pairsel select option, #f-stock option{background:#141821;color:#eef1f6}
  #f-stock{color-scheme:dark}
  .note{font-size:12px;color:var(--dim);margin-top:12px;display:flex;gap:8px;align-items:center}

  /* board */
  .filters{display:flex;gap:8px;flex-wrap:wrap}
  .fil{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--mut);border:1px solid var(--line2);border-radius:var(--rpill);padding:8px 15px;cursor:pointer;background:var(--panel);transition:.15s}
  .fil:hover{border-color:var(--line2);color:var(--txt)}
  .fil.on{color:#04140d;background:var(--brand);border-color:var(--brand)}
  .dsummary{display:flex;gap:26px;margin:18px 0 6px;flex-wrap:wrap}
  .dsummary div span{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
  .dsummary div b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;margin-top:3px}
  .trow{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:14px 12px;border-radius:var(--r);border:1px solid transparent;transition:.14s;cursor:pointer}
  .trow:hover{background:var(--panel2);border-color:var(--line2)}
  .trow.grad{border-left:2px solid var(--brand);background:linear-gradient(90deg,rgba(199,255,54,.05),transparent 40%)}
  .tk-img{width:40px;height:40px;border-radius:11px;background:#fff;object-fit:contain;padding:3px}
  .tname{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .paired{font-family:var(--mono);font-size:10.5px;color:var(--eth);border:1px solid rgba(138,156,255,.28);border-radius:6px;padding:2px 6px}
  .gradtag{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--brand);border:1px solid var(--brandline);border-radius:6px;padding:2px 6px}
  .vbadge{font-size:9.5px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:2px 6px;text-transform:uppercase}
  .vbadge.v1{color:var(--dim);border:1px solid var(--line2)}
  .vbadge.v2{color:#04140d;background:var(--brand);border:1px solid var(--brand)}
  .vbadge.v3{color:#04140d;background:linear-gradient(90deg,#C7FF36,#6ee7ff);border:1px solid var(--brand)}
  .vbadge.v4{color:#04140d;background:linear-gradient(90deg,#C7FF36,#b98cff);border:1px solid var(--brand)}
  .pooltag{font-size:11px;color:var(--brand)}
  .tmeta{color:var(--dim);font-size:12px;margin-top:3px}
  .tprog{height:5px;background:var(--line);border-radius:99px;margin-top:8px;overflow:hidden;max-width:200px}
  .tprog i{display:block;height:100%;background:var(--grad);border-radius:99px}
  .tright{text-align:right}
  .tmc{font-family:var(--disp);font-weight:600;font-size:15px}
  .tvol{color:var(--dim);font-size:12px;margin-top:2px}
  /* Pons-style card grid */
  .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;margin-top:18px}
  .tcard{display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.14s;cursor:pointer}
  .tcard:hover{transform:translateY(-2px);border-color:var(--brandline);box-shadow:0 8px 24px rgba(0,0,0,.28)}
  .tcard.grad{border-color:var(--brandline)}
  .tcard-top{position:relative;aspect-ratio:1/1;background:#fff}
  .tcard-img{width:100%;height:100%;object-fit:cover;display:block}
  .tcard-top .vbadge{position:absolute;top:8px;left:8px}
  .tcard-top .gradtag{position:absolute;top:8px;right:8px;background:rgba(4,20,13,.7)}
  /* buyback-and-burn markers */
  .burnbadge{position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:linear-gradient(90deg,#ff7a1a,#ff3b3b);border-radius:6px;padding:2px 6px;box-shadow:0 2px 10px rgba(255,80,40,.45)}
  .burnpill{font-size:12px;vertical-align:middle}
  .tcard-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px}
  .tcard-name{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcard-sym{font-family:var(--mono);font-size:11px;color:var(--eth);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcard-mcrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:2px}
  .tcard-mcrow b{font-family:var(--disp);font-size:15px;font-weight:600}
  .tcard-fee{font-size:10.5px;color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:1px 6px}
  .tcard-sub{font-size:11px;color:var(--dim)}
  .tcard .prog-pct{color:var(--dim)}
  @media(max-width:560px){.tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
  /* On phones, big square cards eat the whole screen per coin — switch to compact horizontal
     rows (logo · name/ticker · mcap) like a list, so several coins are visible at once. */
  @media(max-width:640px){
    .tgrid{grid-template-columns:1fr;gap:8px}
    .tcard{flex-direction:row;align-items:center}
    .tcard:hover{transform:none}
    .tcard-top{aspect-ratio:auto;width:56px;height:56px;flex:0 0 auto;border-radius:12px;margin:8px}
    .tcard-top .burnbadge{transform:scale(.62);transform-origin:top right;top:-2px;right:-2px}
    .tcard-top .vbadge,.tcard-top .gradtag{transform:scale(.7);transform-origin:top left}
    .tcard-body{flex:1;min-width:0;padding:8px 12px 8px 0;display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:2px;grid-template-areas:"name mc" "sym mc"}
    .tcard-name{grid-area:name}
    .tcard-sym{grid-area:sym}
    .tcard-mcrow{grid-area:mc;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;margin-top:0}
    .tcard-sub,.tprog{display:none}
  }
  /* board pagination — page-by-page (Recent trades–style) instead of dumping every launch at once */
  .pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:20px 0 4px}
  .pager button{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:8px;min-width:32px;height:32px;padding:0 9px;cursor:pointer;font-size:13px;font-family:var(--mono)}
  .pager button:hover{border-color:var(--brandline)}
  .pager button.on{background:var(--brand);color:#04140d;border-color:var(--brand);font-weight:700}
  .pager button:disabled{opacity:.35;cursor:not-allowed}
  .pager .dots{color:var(--dim);padding:0 2px;font-size:13px}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:780px){.steps{grid-template-columns:1fr}}
  .step{background:var(--panel);border:1px solid var(--line);border-radius:var(--rlg);padding:26px}
  .step .si{width:44px;height:44px;border-radius:13px;background:var(--brandsoft);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
  .step .num{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
  .step h4{font-family:var(--disp);margin:6px 0 8px;font-size:17px;font-weight:600}
  .step p{margin:0;color:var(--mut);font-size:14px}

  /* fees cards */
  .frow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
  .frow:last-child{border:0}.frow span{color:var(--mut);display:flex;align-items:center;gap:9px}.frow b{font-weight:600}
  .disc{display:flex;gap:12px;align-items:flex-start;background:rgba(255,203,71,.05);border:1px solid rgba(255,203,71,.2);border-radius:var(--r);padding:16px 18px;color:#ffe4a6;font-size:13px;margin-top:26px}
  .disc .ico{stroke:var(--amber);margin-top:1px}

  /* footer */
  footer{border-top:1px solid var(--line);margin-top:50px;padding:48px 0 30px;color:var(--dim);font-size:13.5px}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
  @media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
  .fcol h5{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;font-weight:600}
  .fcol a{display:block;color:var(--mut);padding:5px 0;font-size:14px;transition:.15s}
  .fcol a:hover{color:var(--txt)}
  .fabout p{color:var(--mut);font-size:14px;margin:14px 0 0;max-width:290px;line-height:1.6}
  .fbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-top:24px;border-top:1px solid var(--line)}

  /* modal */
  .modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(4,6,9,.74);backdrop-filter:blur(8px);padding:20px}
  .modal.on{display:grid}
  .mbox{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rlg);padding:28px;max-width:430px;width:100%;box-shadow:var(--sh)}
  .mbox .mh{display:flex;align-items:center;gap:11px;margin-bottom:6px}
  .mbox .mh .pi{width:36px;height:36px;border-radius:10px;background:var(--brandsoft);color:var(--brand);display:grid;place-items:center}
  .mbox h3{font-family:var(--disp);margin:0;font-size:19px;font-weight:600}
  .mbox p{color:var(--mut);font-size:13.5px;margin:0 0 18px}
  .wallets{display:grid;gap:10px}
  .wopt{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--rsm);padding:14px;cursor:pointer;font-weight:600;transition:.15s}
  .wopt:hover{border-color:var(--brandline)}
  .wopt .wi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--panel2)}
  .x{margin-left:auto;color:var(--dim);cursor:pointer;display:grid;place-items:center}
  .x:hover{color:var(--txt)}

  /* ---- homepage additions: hero stats · trending · reward flow ---- */
  .herostats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
  .hs .hsv{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--txt)}
  .hs .hsl{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

  .sechead{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.025em;margin:8px 0 22px}
  .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
  .shead .sechead{margin:8px 0 0}
  .seelink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap;padding-bottom:4px}
  .seelink:hover{gap:9px}

  .lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1000px){.lgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.lgrid{grid-template-columns:1fr}}
  .lcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px;transition:border-color .15s,transform .12s;min-height:150px}
  .lcard:hover{border-color:var(--brandline);transform:translateY(-2px)}
  .lcard-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}
  .lcard-logo{width:38px;height:38px;border-radius:10px;object-fit:cover;background:var(--bg2,#0e1114);border:1px solid var(--line2);flex:0 0 auto}
  .lcard-nm{font-weight:600;font-size:14.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lcard-sym{font-size:11.5px;color:var(--dim);margin-top:1px}
  .lcard-pair{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--mut);border:1px solid var(--line2);border-radius:6px;padding:3px 7px;white-space:nowrap}
  .lcard-stat{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-top:1px solid var(--line)}
  .lcard-stat span{color:var(--dim)}.lcard-stat b{font-weight:600}
  .lcard-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--brand);margin-top:10px}
  .lcard-badge .d{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
  .skel{position:relative;overflow:hidden;background:var(--panel)}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.3s infinite}
  @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

  .flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
  .flownode{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center}
  .flownode.acc{border-color:var(--brandline);background:linear-gradient(180deg,var(--brandsoft),var(--panel))}
  .flownode .fi{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--panel2);color:var(--brand);margin-bottom:10px}
  .flownode.acc .fi{background:var(--brand);color:#04140d}
  .flownode b{display:block;font-size:14px;margin-bottom:3px}
  .flownode small{color:var(--dim);font-size:12px;line-height:1.4}
  .flowarrow{display:grid;place-items:center;color:var(--dim);flex:0 0 auto}
  @media(max-width:820px){.flowarrow{transform:rotate(90deg)}.flownode{min-width:0;flex:1 1 100%}}