*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:-apple-system,'PingFang SC','Hiragino Sans GB',sans-serif;
     background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-tap-highlight-color:transparent;
     font-size:16px;line-height:1.6;}
:root{
  --bg:#0a0c10;--bg-card:#111318;--bg-dropdown:#13161e;
  --border:rgba(255,255,255,.07);--border-hover:rgba(240,180,41,.35);
  --text:#e8edf5;--text-muted:#8a96ac;--text-dim:#5a6478;
  --accent:#f0b429;--accent-dim:rgba(240,180,41,.12);--accent-border:rgba(240,180,41,.28);
}
[data-theme="light"]{
  --bg:#f4f5f7;--bg-card:#ffffff;--bg-dropdown:#ffffff;
  --border:rgba(0,0,0,.08);--border-hover:rgba(240,180,41,.4);
  --text:#1a1d24;--text-muted:#52586a;--text-dim:#9aa0af;
}
/* NAV */
nav{position:sticky;top:0;z-index:200;background:rgba(10,12,16,.92);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:.5px solid var(--border);}
[data-theme="light"] nav{background:rgba(244,245,247,.95);}
.nav-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:52px;}
.logo{font-size:16px;font-weight:700;color:var(--accent);letter-spacing:.02em;text-decoration:none;white-space:nowrap;margin-right:auto;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-item{position:relative;}
.nav-label{font-size:15px;color:var(--text-muted);padding:6px 9px;border-radius:6px;cursor:pointer;
           display:flex;align-items:center;gap:4px;transition:color .15s,background .15s;white-space:nowrap;}
.nav-label:hover{color:var(--text);background:rgba(255,255,255,.05);}
.arr{font-size:13px;transition:transform .2s;}
.nav-item:hover .arr{transform:rotate(180deg);color:var(--accent);}
.nav-single{font-size:15px;color:var(--text-muted);padding:6px 9px;border-radius:6px;
            text-decoration:none;white-space:nowrap;transition:color .15s,background .15s;}
.nav-single:hover{color:var(--text);background:rgba(255,255,255,.05);}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:148px;background:var(--bg-dropdown);
          border:.5px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.5);
          opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .18s;z-index:999;}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:15px;text-decoration:none;
            color:var(--text-muted);text-decoration:none;transition:color .12s,background .12s;}
.dropdown a:hover{color:var(--text);background:rgba(255,255,255,.05);}
.dd{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;flex-shrink:0;}
.nav-cta{font-size:14px;font-weight:700;color:#0a0c10;background:var(--accent);
         padding:5px 13px;border-radius:6px;text-decoration:none;margin-left:6px;white-space:nowrap;transition:opacity .15s;}
.nav-cta:hover{opacity:.88;}
.nav-donate{font-size:15px;color:var(--accent);padding:5px 9px;border-radius:6px;
            text-decoration:none;white-space:nowrap;transition:background .15s;}
.nav-donate:hover{background:var(--accent-dim);}
.theme-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
           border:none;background:none;font-size:16px;cursor:pointer;border-radius:8px;
           transition:background .15s;margin-left:4px;flex-shrink:0;}
.theme-btn:hover{background:rgba(255,255,255,.07);}
.mob-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;
         border:.5px solid var(--border);background:none;color:var(--text-muted);font-size:18px;
         cursor:pointer;border-radius:8px;margin-left:4px;}
@media(max-width:768px){.nav-links{display:none;}.mob-btn{display:flex;}}
/* TICKER */
.ticker-wrap{border-bottom:.5px solid var(--border);padding:8px 0;overflow:hidden;background:rgba(255,255,255,.012);}
.ticker-track{display:inline-flex;animation:ticker 42s linear infinite;white-space:nowrap;}
.ticker-track:hover{animation-play-state:paused;}
.ti{font-size:14px;color:var(--text-muted);padding:0 22px;letter-spacing:.02em;}
.td{color:var(--accent);margin-right:5px;}
.tc{color:var(--accent);font-weight:700;font-family:monospace;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* LAYOUT */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.section{padding:28px 0;}
.section-sm{padding:20px 0;}
hr.div{border:none;border-top:.5px solid var(--border);max-width:1080px;margin:0 auto;}
.sec-label{font-size:13px;color:var(--text-dim);letter-spacing:.12em;font-weight:600;margin-bottom:7px;}
.sec-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px;}
.sec-sub{font-size:15px;color:var(--text-muted);margin-bottom:20px;}
/* HERO */
.hero{max-width:1080px;margin:0 auto;padding:36px 24px 28px;position:relative;overflow:hidden;}
.hero-glow{position:absolute;top:-20px;left:40%;width:500px;height:300px;
           background:radial-gradient(ellipse at center,rgba(240,180,41,.055) 0%,transparent 68%);
           pointer-events:none;animation:glow 6s ease-in-out infinite;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);color:var(--accent);
         font-size:13px;font-weight:700;letter-spacing:.1em;padding:4px 12px;border-radius:20px;
         border:.5px solid var(--accent-border);margin-bottom:18px;}
h1.hero-h1{font-size:clamp(26px,4.2vw,42px);font-weight:800;line-height:1.18;
           letter-spacing:-.03em;color:var(--text);margin-bottom:14px;}
h1.hero-h1 em{font-style:normal;color:var(--accent);}
.hero-sub{font-size:16px;color:var(--text-muted);line-height:1.95;max-width:400px;margin-bottom:28px;}
.hero-sub strong{color:var(--text);}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;}
.btn-p{background:var(--accent);color:#0a0c10;font-size:16px;font-weight:700;padding:10px 22px;
       border-radius:8px;text-decoration:none;display:inline-block;transition:opacity .15s;white-space:nowrap;}
.btn-p:hover{opacity:.88;}
.btn-o{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(240,180,41,.08);
  color:var(--accent);
  font-size:16px;font-weight:700;
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid rgba(240,180,41,.3);
  transition:background .15s,border-color .15s,gap .18s;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn-o::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(240,180,41,.06),transparent);
  transform:translateX(-100%);
  transition:transform .4s ease;
}
.btn-o:hover{background:rgba(240,180,41,.14);border-color:rgba(240,180,41,.5);gap:12px;}
.btn-o:hover::before{transform:translateX(100%);}
[data-theme="light"] .btn-o{background:rgba(196,127,10,.07);border-color:rgba(196,127,10,.3);}
[data-theme="light"] .btn-o:hover{background:rgba(196,127,10,.13);}
/* NEEDS */

@media(max-width:860px){}
@media(max-width:420px){}


















.nc-au 
.nc-bl 
.nc-gr 
.nc-pu 
/* TOOLS */
.cat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.cat-tab{font-size:14px;font-weight:600;padding:5px 13px;border-radius:20px;border:.5px solid var(--border);
         background:none;color:var(--text-muted);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.cat-tab.on,.cat-tab:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-border);}
.acgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
@media(max-width:860px){.acgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.acgrid{grid-template-columns:1fr 1fr;gap:8px;}}
.ac{background:var(--bg-card);border:.5px solid var(--border);border-radius:12px;padding:16px;
    display:flex;flex-direction:column;transition:border-color .18s,transform .18s;}
.ac:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.ac.hid{display:none;}
.ac-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.ac-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
         font-size:13px;font-weight:800;flex-shrink:0;border:.5px solid;}
.ac-name{font-size:15px;font-weight:700;color:var(--text);line-height:1.2;}
.ac-tag{font-size:13px;color:var(--text-muted);margin-top:2px;}
.ac-perk{font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-dim);
         border:.5px solid var(--accent-border);padding:2px 8px;border-radius:4px;
         display:inline-block;margin-bottom:9px;align-self:flex-start;}
.ac-code{display:flex;align-items:center;justify-content:space-between;gap:5px;
         background:rgba(255,255,255,.03);border:.5px solid var(--border);border-radius:6px;
         padding:5px 9px;margin-bottom:10px;}
[data-theme="light"] .ac-code{background:rgba(0,0,0,.03);}
.ac-cl{font-size:13px;color:var(--text-dim);white-space:nowrap;flex-shrink:0;}
.ac-cv{font-size:14px;font-weight:700;font-family:monospace;letter-spacing:.04em;color:#ef4444;
       flex:1;text-align:center;}
.ac-cp{font-size:13px;font-weight:700;padding:2px 7px;border-radius:3px;
       border:.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text-muted);
       cursor:pointer;transition:all .12s;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.ac-cp:hover,.ac-cp.ok{background:rgba(52,211,153,.15);color:#34d399;border-color:rgba(52,211,153,.3);}
[data-theme="light"] .ac-cp{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);color:#52586a;}
.ac-no{font-size:13px;color:var(--text-dim);background:rgba(255,255,255,.02);border:.5px solid var(--border);
       border-radius:6px;padding:5px 9px;margin-bottom:10px;text-align:center;}
[data-theme="light"] .ac-no{background:rgba(0,0,0,.02);}
.ac-btn{display:block;text-align:center;font-size:14px;font-weight:700;padding:7px 0;border-radius:7px;
        background:var(--accent);color:#0a0c10;text-decoration:none;margin-top:auto;
        transition:opacity .15s;-webkit-tap-highlight-color:transparent;}
.ac-btn:hover{opacity:.88;}
/* TRUST */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.trust-grid{grid-template-columns:1fr;}}
.trust-card{background:var(--bg-card);border:.5px solid var(--border);border-radius:14px;padding:22px;}
.trust-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;}
.trust-desc{font-size:15px;color:var(--text-muted);line-height:1.85;margin-bottom:18px;}
.trust-stats{display:flex;gap:18px;flex-wrap:wrap;}
.ts-n{font-size:21px;font-weight:800;color:var(--accent);line-height:1;}
.ts-l{font-size:13px;color:var(--text-dim);margin-top:2px;}
.tlinks{display:flex;flex-direction:column;gap:8px;}
.tl{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:.5px solid var(--border);
    border-radius:10px;padding:10px 13px;text-decoration:none;transition:border-color .15s,background .15s;}
.tl:hover{border-color:var(--border-hover);background:rgba(240,180,41,.04);}
[data-theme="light"] .tl{background:rgba(0,0,0,.02);}
.tl-ic{font-size:16px;flex-shrink:0;}
.tl-nm{font-size:15px;font-weight:700;color:var(--text);}
.tl-ds{font-size:13px;color:var(--text-muted);}
.tl-ar{margin-left:auto;font-size:14px;color:var(--text-dim);flex-shrink:0;}
/* EXPLORE */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media(max-width:600px){.egrid{grid-template-columns:repeat(2,1fr);}}
.ec{background:var(--bg-card);border:.5px solid var(--border);border-radius:12px;
    padding:16px 14px;text-decoration:none;display:block;transition:border-color .15s,transform .15s;}
.ec:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.ec-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
       font-size:16px;margin-bottom:9px;border:.5px solid;}
.ec-nm{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;}
.ec-ds{font-size:13px;color:var(--text-muted);line-height:1.5;}
.ec-lb{font-size:13px;color:var(--text-dim);margin-top:5px;letter-spacing:.05em;}
/* JOURNEY */
.jbanner{background:var(--bg-card);border:.5px solid rgba(248,113,113,.22);border-radius:16px;
         padding:26px 26px 22px;display:flex;align-items:center;justify-content:space-between;
         gap:22px;flex-wrap:wrap;}
.jb-ey{font-size:13px;font-weight:700;letter-spacing:.1em;color:#f87171;margin-bottom:7px;}
.jb-ti{font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.02em;}
.jb-ds{font-size:15px;color:var(--text-muted);line-height:1.8;max-width:400px;}
.jb-steps{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;}
.jb-st{font-size:13px;padding:3px 9px;border-radius:4px;border:.5px solid rgba(248,113,113,.28);
       background:rgba(248,113,113,.07);color:#f87171;font-weight:600;}
.jb-btn{display:inline-flex;align-items:center;gap:6px;background:#f87171;color:#fff;
        font-size:16px;font-weight:700;padding:11px 20px;border-radius:10px;text-decoration:none;
        transition:opacity .15s;white-space:nowrap;flex-shrink:0;}
.jb-btn:hover{opacity:.88;}

/* ANIM */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.fu{animation:fadeUp .5s ease both;}
.fu1{animation-delay:.07s;}.fu2{animation-delay:.14s;}.fu3{animation-delay:.21s;}
@keyframes glow{0%,100%{opacity:.85;}50%{opacity:1;}}
  


[data-theme="light"] #risk-modal-box {
  background: #fff !important;
  border-color: rgba(239,68,68,.3) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}
[data-theme="light"] .risk-modal-bar { background: rgba(0,0,0,.07) !important; }

@keyframes fadeInOverlay { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:480px){ #disclaimer-box{padding:20px 18px 18px;} }
[data-theme="light"] #disclaimer-box {
  background: #ffffff !important;
  border-color: rgba(240,180,41,.25) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.15) !important;
}
[data-theme="light"] #disclaimer-box [style*="color:#8a96aa"] { color: #52586a !important; }
[data-theme="light"] #disclaimer-box [style*="color:#e8edf5"] { color: #1a1d24 !important; }
[data-theme="light"] #disclaimer-box [style*="color:#c8d4e0"] { color: #374151 !important; }

#mobMenu a, #mobMenu span { border-bottom: none !important; text-decoration: none !important; }
#mobMenu > div:first-child { border-bottom: .5px solid var(--border) !important; }

/* NC card: icon + title row */



.nc-step strong{color:var(--text);font-weight:700;}

.nav-item.open .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav-item.open .arr { transform:rotate(180deg); color:var(--accent); }

/* ── X Subscribe button ── */

[data-theme="light"] 
@media (max-width: 768px) {  }

/* ── Mobile menu links consistent alignment ── */
#mobMenu a.mob-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size:14px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: .5px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
#mobMenu a.mob-link:last-child { border-bottom: none; }
#mobMenu a.mob-link .mob-icon {
  width: 20px;
  text-align: center;
  font-size:15px;
  flex-shrink: 0;
}
#mobMenu a.mob-link .mob-text { flex: 1; }
#mobMenu a.mob-link.accent { color: var(--accent); }

/* ── Footer layout fix ── */

@media (max-width: 640px) {
  
  
  
  
}

/* ── Footer ── */
.footer-bar { border-top: .5px solid var(--border); margin-top: 60px; }
.footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.fc {
  font-size:13px; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  flex: 1; min-width: 200px;
}
.sep { opacity: .4; }
.fsoc { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.fsb {
  display: flex; align-items: center; gap: 5px;
  font-size:13px; color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border: .5px solid var(--border);
  padding: 5px 10px; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.fsb:hover { color: var(--text); border-color: var(--border-hover); }
[data-theme="light"] 
[data-theme="light"] .fsb:hover { color: #1a1d24; border-color: rgba(0,0,0,.2); }
@media (max-width: 600px) {
  

  .fc { width: 100%; }
  .fsoc { width: 100%; justify-content: flex-start; 
  .fsb { padding: 7px 12px; font-size:13px; }
}
  .fsb { padding: 7px 12px; font-size:13px; }
}



[data-theme="light"] 
@media (max-width: 768px) {  }

.nav-xsub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:13px; font-weight: 700; color: #fff;
  background: #000; border: 1.5px solid rgba(255,255,255,.2);
  padding: 5px 13px; border-radius: 20px; text-decoration: none;
  letter-spacing: .02em; transition: opacity .15s;
  margin-left: 4px; flex-shrink: 0; white-space: nowrap;
}
.nav-xsub:hover { opacity: .8; }
[data-theme="light"] .nav-xsub { color: #000; background: #fff; border-color: rgba(0,0,0,.25); }
@media (max-width: 768px) { .nav-xsub { display: none; } }


/* ── Needs cards D4 style ── */
.needs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nc {
  background: var(--bg-card);
  border: .5px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px 16px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.nc:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.nc-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.nc-au .nc-icon-wrap { background: rgba(240,180,41,.12); }
.nc-bl .nc-icon-wrap { background: rgba(96,165,250,.12); }
.nc-gr .nc-icon-wrap { background: rgba(52,211,153,.12); }
.nc-pu .nc-icon-wrap { background: rgba(167,139,250,.12); }
.nc-name {
  font-size:14px; font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.nc-divider {
  height: .5px;
  margin-bottom: 8px;
  opacity: .6;
}
.nc-au .nc-divider { background: rgba(240,180,41,.5); }
.nc-bl .nc-divider { background: rgba(96,165,250,.5); }
.nc-gr .nc-divider { background: rgba(52,211,153,.5); }
.nc-pu .nc-divider { background: rgba(167,139,250,.5); }
.nc-au:hover { border-color: rgba(240,180,41,.38); }
.nc-bl:hover { border-color: rgba(96,165,250,.38); }
.nc-gr:hover { border-color: rgba(52,211,153,.38); }
.nc-pu:hover { border-color: rgba(167,139,250,.38); }
.nc-desc {
  font-size:14px;
  color: var(--text-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 12px;
}
.nc-cta {
  font-size:13px;
  font-weight: 700;
  margin-top: auto;
}
.nc-au .nc-cta { color: #f0b429; }
.nc-bl .nc-cta { color: #60a5fa; }
.nc-gr .nc-cta { color: #34d399; }
.nc-pu .nc-cta { color: #a78bfa; }
/* Light mode overrides */
[data-theme="light"] .nc { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .nc:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
[data-theme="light"] .nc-name { color: #1a1d24; }
[data-theme="light"] .nc-desc { color: #52586a; }
[data-theme="light"] .nc-au .nc-icon-wrap { background: rgba(240,180,41,.1); }
[data-theme="light"] .nc-bl .nc-icon-wrap { background: rgba(96,165,250,.1); }
[data-theme="light"] .nc-gr .nc-icon-wrap { background: rgba(52,211,153,.1); }
[data-theme="light"] .nc-pu .nc-icon-wrap { background: rgba(167,139,250,.1); }
[data-theme="light"] .nc-au .nc-cta { color: #b45309; }
[data-theme="light"] .nc-bl .nc-cta { color: #2563eb; }
[data-theme="light"] .nc-gr .nc-cta { color: #059669; }
[data-theme="light"] .nc-pu .nc-cta { color: #7c3aed; }
[data-theme="light"] .nc-au .nc-divider { background: rgba(240,180,41,.6); }
[data-theme="light"] .nc-bl .nc-divider { background: rgba(96,165,250,.6); }
[data-theme="light"] .nc-gr .nc-divider { background: rgba(52,211,153,.6); }
[data-theme="light"] .nc-pu .nc-divider { background: rgba(167,139,250,.6); }
/* Mobile */
@media (max-width: 700px) {
  .needs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 420px) {
  .needs-grid { grid-template-columns: 1fr; }
  .nc { padding: 16px 14px; }
}

/* ── Spotlight feature cards ── */
.spotlight { max-width:1080px; margin:0 auto; padding:28px 24px 20px; }
.spotlight-grid { display:flex; flex-direction:column; gap:8px; }
.sp-card {
  display:flex; overflow:hidden;
  background:var(--bg-card);
  border:.5px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  transition:border-color .18s, transform .15s;
}
.sp-card:hover {
  border-color:var(--border-hover);
  transform:translateY(-1px);
}
.sp-side {
  width:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  background:rgba(240,180,41,.04);
  border-right:.5px solid var(--border);
}
[data-theme="light"] .sp-side { background:rgba(240,180,41,.05); }
.sp-body { flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.sp-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sp-eyebrow { font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.sp-badge {
  font-size:13px; font-weight:700;
  background:rgba(240,180,41,.1); color:var(--accent);
  border:.5px solid rgba(240,180,41,.25);
  padding:2px 7px; border-radius:20px; letter-spacing:.04em;
  white-space:nowrap; flex-shrink:0;
}
.sp-title { font-size:16px; font-weight:700; color:var(--text); line-height:1.35; }
.sp-desc { font-size:14px; color:var(--text-muted); line-height:1.6; opacity:.6; }
.sp-cta { font-size:14px; font-weight:700; color:var(--accent); margin-top:2px; transition:letter-spacing .15s; }
.sp-card:hover .sp-cta { letter-spacing:.02em; }
<style>
/* =========================================================
   NIFULEI UX v3 — interaction polish / component consistency
   ========================================================= */
:root { --tap-size: 44px; }

/* Keep interactive controls visually consistent across pages. */
.btn-primary, .btn-ghost, .btn-p, .btn-o,
.btn-hero, .anchor-btn, .nav-cta, .nav-donate,
.rank-open-btn, .dex-visit-btn, .btn-buy, .ac-btn, .jb-btn,
.copy-btn, .region-btn, .hk-tab-btn, .dex-tab, .cat-tab, .ftab,
.stage-nav-btn, .stage-btn, .guide-tab, .guide-btn-next, .guide-btn-skip,
.prompt-btn-go, .mobile-sidebar-toggle, .theme-btn, .mob-btn {
  -webkit-tap-highlight-color: transparent;
}

.btn-primary, .btn-ghost, .btn-p, .btn-o,
.btn-hero, .anchor-btn, .nav-cta, .nav-donate,
.rank-open-btn, .dex-visit-btn, .btn-buy, .ac-btn, .jb-btn {
  min-height: var(--tap-size);
}

.copy-btn, .theme-btn, .mob-btn, .mobile-sidebar-toggle {
  min-width: 40px;
  min-height: 40px;
}

/* Stronger affordance: users should immediately recognize what is clickable. */
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover, .btn-p:hover, .btn-hero:hover,
  .nav-cta:hover, .ac-btn:hover, .jb-btn:hover,
  .rank-open-btn.available:hover, .dex-visit-btn:hover, .btn-buy:hover,
  .anchor-btn:hover {
    filter: brightness(1.045);
    transform: translateY(-1px);
  }
  .btn-ghost:hover, .btn-o:hover, .anchor-btn:hover,
  .btn-ghost:hover, .copy-btn:hover, .region-btn:hover,
  .hk-tab-btn:hover, .dex-tab:hover, .cat-tab:hover, .ftab:hover {
    border-color: var(--border-hover, rgba(255,255,255,.22));
  }
}

/* Don't animate transforms on touch devices where they can feel like accidental movement. */
@media (hover:none), (pointer:coarse) {
  .btn-primary, .btn-p, .btn-hero, .ac-btn, .jb-btn,
  .rank-open-btn.available, .dex-visit-btn, .btn-buy, .anchor-btn {
    transform: none !important;
  }
}

/* Keyboard users get a clear, consistent focus state. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #f0b429) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(240,180,41,.12);
}

/* Disabled/unavailable controls should look inactive, not broken. */
button:disabled, .btn-primary:disabled, .btn-ghost:disabled,
.rank-open-btn.unavailable, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.7);
}

/* Tabs need an obvious active state and enough touch area. */
.region-btn, .hk-tab-btn, .dex-tab, .cat-tab, .ftab {
  min-height: 42px;
}

/* Copy controls: icon-only controls need a reliable target and tooltip-like affordance. */
.copy-btn {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent long financial/product names from forcing cards wider than the viewport. */
.card, .ac, .ec, .trust-card, .sp-card, .nc,
.rank-card, .broker-card, .crypto-card, .bank-card,
.tool-card, .esim-card {
  min-width: 0;
}

/* Long strings: wallet addresses, URLs, codes and identifiers. */
code, pre, .ac-code, .copy-value, .wallet-address, .address,
[data-copy], .mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Avoid horizontal overflow from tables and dense data blocks. */
.table-wrap, .table-responsive, .rank-table-wrap, .income-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: prioritize the primary action and prevent cramped button groups. */
@media (max-width: 600px) {
  .card-btns, .hero-btns, .store-btns, .prompt-actions, .guide-bubble-btns {
    gap: 10px;
  }
  .card-btns > a, .card-btns > button,
  .hero-btns > a, .hero-btns > button {
    min-height: 44px;
  }
  .copy-btn { min-width: 42px; min-height: 42px; }
  .region-btn, .hk-tab-btn, .dex-tab, .cat-tab, .ftab {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .btn-primary, .btn-ghost, .btn-p, .btn-o, .btn-hero,
  .anchor-btn, .nav-cta, .nav-donate {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}