/* ==========================================================================
   ChainVerse — navy & gold multi-chain NFT marketplace theme
   Design tokens live at the top as CSS custom properties — change the
   palette here and it cascades through the whole site.
   ========================================================================== */

:root{
  --bg:#FFFFFF; --bg-2:#F6F7FB; --panel:#FFFFFF; --panel-2:#F3F4F9;
  --border-soft:rgba(11,37,69,.12); --border-strong:rgba(201,151,28,.55);
  --navy:#0B2545; --navy-2:#163B6E;
  --gold:#C9971C; --gold-2:#E8B923;
  --charcoal:#0E1116; /* a deliberate near-black surface — used where black is a design choice (dashboard sidebar), not just body text */
  --text-hi:#0B2545; --text-mid:#48546C; --text-low:#8792A6;
  --success:#187A4F; --danger:#C23B3B; --pending:#9A7B1F;
  --poly:#8B5CF6; --sol:#0E9E86; --tron:#E11D48; --eth:#5468D4;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --glow:0 10px 34px rgba(11,37,69,.12);
  --btn-primary-bg:var(--navy);
  --btn-primary-fg:#fff;
  --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif; --font-num:'Space Grotesk',monospace;
}
:root[data-theme="dark"]{
  --bg:#0A1526; --bg-2:#0F1E36; --panel:#0F1E36; --panel-2:#13294A;
  --border-soft:rgba(232,185,35,.16); --border-strong:rgba(232,185,35,.55);
  --charcoal:#070A10;
  --text-hi:#F5F7FA; --text-mid:#B6C0D6; --text-low:#7D8AA6;
  --success:#2FD98A; --danger:#FF6B6B; --pending:#E8B923;
  --btn-primary-bg:var(--gold);
  --btn-primary-fg:#1a1400;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none !important;} /* several elements (e.g. .wallet-chip) declare their own `display`, which otherwise wins over the plain [hidden] attribute and defeats it */
body{
  background:var(--bg);
  color:var(--text-mid); font-family:var(--font-body); line-height:1.6;
  transition:background-color .35s ease, color .35s ease;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--text-hi); margin:0 0 .5em; font-weight:700;}
button,input,select,textarea{font-family:var(--font-body);}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
.text-gold{color:var(--gold);}
.text-low{color:var(--text-low);}
::selection{background:var(--gold); color:#1a1400;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important; transition-duration:.001s !important;} }

/* ---------- preview / disclosure banner ---------- */
.preview-strip{background:var(--panel-2); border-bottom:1px solid var(--border-soft); text-align:center; padding:9px 16px; font-size:.78rem; color:var(--text-low);}
.preview-strip b{color:var(--gold); font-weight:700;}

/* ---------- scroll reveal contract ----------
   Driven by a small self-contained script in main.js (IntersectionObserver +
   a scroll-position fallback) — not an external library, so content is never
   left permanently invisible if a CDN is slow or blocked. */
[data-aos]{opacity:0; transition-property:transform,opacity; transition-duration:.7s; transition-timing-function:cubic-bezier(.16,.8,.3,1); pointer-events:none;}
[data-aos].aos-animate{opacity:1; pointer-events:auto;}
[data-aos="fade-up"]{transform:translateY(26px);} [data-aos="fade-up"].aos-animate{transform:translateY(0);}
[data-aos="fade-down"]{transform:translateY(-26px);} [data-aos="fade-down"].aos-animate{transform:translateY(0);}
[data-aos="fade-left"]{transform:translateX(26px);} [data-aos="fade-left"].aos-animate{transform:translateX(0);}
[data-aos="fade-right"]{transform:translateX(-26px);} [data-aos="fade-right"].aos-animate{transform:translateX(0);}
[data-aos="zoom-in"]{transform:scale(.88);} [data-aos="zoom-in"].aos-animate{transform:scale(1);}
/* No-JS / JS-failure safety net: if main.js never runs, this rule (which a
   working script always beats by adding .aos-animate almost immediately)
   still reveals everything after a short delay so content is never stuck hidden. */
@media (prefers-reduced-motion: no-preference){
  [data-aos]{animation:aosFallbackReveal 0s 2.5s forwards;}
}
@keyframes aosFallbackReveal{ to{ opacity:1; transform:none; pointer-events:auto; } }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 26px; border-radius:999px; font-weight:600; font-size:.9rem; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .25s ease, background .25s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--btn-primary-bg); color:var(--btn-primary-fg); box-shadow:var(--glow);}
.btn-primary:hover{box-shadow:0 0 30px rgba(201,151,28,.4);}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--border-strong);}
:root[data-theme="dark"] .btn-outline{color:var(--gold);}
.btn-outline:hover{background:var(--panel-2);}
.btn-ghost{background:var(--bg-2); color:var(--text-hi); border-color:var(--border-soft);}
.btn-ghost:hover{background:var(--panel-2);}
.btn-sm{padding:8px 16px; font-size:.8rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-soft);}
.nav-wrap{display:flex; align-items:center; gap:24px; padding:14px 0; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--text-hi);}
.brand-mark{width:30px; height:30px; flex:none; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--panel) inset;}
.nav-toggle{display:none; background:none; border:none; font-size:1.4rem; color:var(--text-hi); cursor:pointer;}
.main-nav{display:flex; gap:24px; flex:1; justify-content:center; flex-wrap:wrap;}
.main-nav a{color:var(--text-mid); font-size:.9rem; font-weight:500; padding:6px 0; position:relative;}
.main-nav a:hover{color:var(--navy);} :root[data-theme="dark"] .main-nav a:hover{color:var(--gold);}
.main-nav a.active{color:var(--text-hi);}
.main-nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--navy);}
:root[data-theme="dark"] .main-nav a.active::after{background:var(--gold);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.wallet-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(24,122,79,.1); border:1px solid rgba(24,122,79,.4); color:var(--success); font-size:.8rem; font-weight:600; font-family:var(--font-num);}
.wallet-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--success);}
.avatar-mini{width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; border:1.5px solid var(--border-soft);}
.avatar-mini img{width:100%; height:100%; object-fit:cover;}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-soft); background:var(--bg-2); color:var(--text-hi); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.theme-toggle:hover{background:var(--panel-2);}

.alert{margin-bottom:16px; padding:12px 16px; border-radius:var(--radius-sm); font-size:.87rem;}
.alert-success{background:rgba(24,122,79,.1); border:1px solid rgba(24,122,79,.35); color:var(--success);}
.alert-error{background:rgba(194,59,59,.08); border:1px solid rgba(194,59,59,.3); color:var(--danger);}

/* ---------- hero ---------- */
.hero{padding:64px 0 50px; position:relative; overflow:hidden;}
.hero .container{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(201,151,28,.1); color:var(--gold); border:1px solid rgba(201,151,28,.4); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px;}
.hero h1{font-size:clamp(2rem,3.4vw,3rem); line-height:1.12;}
.hero h1 .glow{color:var(--navy);} :root[data-theme="dark"] .hero h1 .glow{color:var(--gold);}
.hero p.lead{font-size:1rem; max-width:500px; margin-bottom:28px;}
.hero-actions{display:flex; gap:14px; margin-bottom:30px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:32px; flex-wrap:wrap;}
.hero-stats .stat b{display:block; font-size:1.35rem; color:var(--text-hi); font-family:var(--font-num);}
.hero-stats .stat span{font-size:.8rem; color:var(--text-low);}
.hero-showcase{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.hero-showcase .nft-card:nth-child(1){transform:translateY(-14px);}
.hero-showcase .nft-card:nth-child(3){transform:translateY(8px);}

/* Decorative hero background: a slow crossfade of seeded artwork behind the
   copy, purely atmospheric — same idea as a studio photo-slideshow hero, but
   dialed way down (low opacity, heavily scrimmed) so it never competes with
   the text or the real featured-NFT cards sitting on top of it. Scoped to
   this one marketing section only — dashboard/checkout/admin pages stay
   plain so nothing distracts from a working screen. */
.hero-bg-slideshow{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-bg-slideshow .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation:heroBgCrossfade 24s infinite;}
.hero-bg-slideshow .slide:nth-child(1){animation-delay:0s;}
.hero-bg-slideshow .slide:nth-child(2){animation-delay:4s;}
.hero-bg-slideshow .slide:nth-child(3){animation-delay:8s;}
.hero-bg-slideshow .slide:nth-child(4){animation-delay:12s;}
.hero-bg-slideshow .slide:nth-child(5){animation-delay:16s;}
.hero-bg-slideshow .slide:nth-child(6){animation-delay:20s;}
@keyframes heroBgCrossfade{
  0%{opacity:0;} 4%{opacity:.16;} 17%{opacity:.16;} 25%{opacity:0;} 100%{opacity:0;}
}
.hero-scrim{position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg, var(--bg) 0%, var(--bg) 55%, transparent 88%);}
@media (prefers-reduced-motion: reduce){
  .hero-bg-slideshow .slide{animation:none !important; opacity:0 !important;}
  .hero-bg-slideshow .slide:first-child{opacity:.1 !important;}
}

/* ---------- wallets strip ---------- */
.wallets-strip{display:flex; flex-wrap:wrap; gap:22px; justify-content:center; align-items:center; padding:24px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.wallets-strip img{height:40px; width:auto; opacity:.9; border-radius:10px;}

/* ---------- section chrome ---------- */
.section{padding:50px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:1.45rem; margin:0;}
.section-head p{margin:5px 0 0; color:var(--text-low); font-size:.9rem;}

/* ---------- NFT card (used everywhere: hero, grids, dashboard, spotlight) ---------- */
.nft-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(226px,1fr)); gap:20px;}
.nft-card{display:block; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .28s ease, border-color .28s ease;}
.nft-card:hover{transform:translateY(-8px) scale(1.02); border-color:var(--chain-glow, var(--border-strong)); box-shadow:0 0 0 1px var(--chain-glow, transparent), 0 18px 40px -10px var(--chain-glow, rgba(11,37,69,.3)), var(--glow);}
.thumb{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-2);}
.thumb img{width:100%; height:100%; object-fit:cover;}
.chain-tag{position:absolute; top:11px; left:11px; z-index:2; padding:4px 10px; border-radius:999px; font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-family:var(--font-num); background:rgba(4,7,13,.75); color:#fff; border:1px solid rgba(255,255,255,.25);}
.like-tag{position:absolute; top:11px; right:11px; z-index:2; padding:4px 10px; border-radius:999px; font-size:.68rem; background:rgba(4,7,13,.75); color:#fff; border:1px solid rgba(255,255,255,.2); font-family:var(--font-num);}
.nft-card .body{padding:15px 17px 17px;}
.nft-card .title{font-weight:600; color:var(--text-hi); font-size:.98rem; margin-bottom:3px; font-family:var(--font-head);}
.nft-card .creator{font-size:.78rem; color:var(--text-low); margin-bottom:9px;}
.price-row{display:flex; align-items:center; justify-content:space-between;}
.price b{display:block; color:var(--navy); font-size:.93rem; font-family:var(--font-num);}
:root[data-theme="dark"] .price b{color:var(--gold);}
.price span{font-size:.7rem; color:var(--text-low); font-family:var(--font-num);}
.edition{font-size:.7rem; color:var(--text-low); font-family:var(--font-num);}

/* ---------- filter bar ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; padding:14px; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md);}
.filter-bar select,.filter-bar input{background:var(--bg-2); border:1px solid var(--border-soft); color:var(--text-hi); padding:9px 12px; border-radius:var(--radius-sm); font-size:.85rem; font-family:var(--font-body); flex:1; min-width:140px;}

/* ---------- panels / sellers / activity ---------- */
.panel{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:20px; margin-bottom:22px;}
.panel h3{font-size:1rem; margin-bottom:14px; font-family:var(--font-head);}
.empty-state{padding:18px 4px; color:var(--text-low); font-size:.88rem;}
.seller-row{display:flex; align-items:center; gap:14px; padding:12px 6px; border-radius:var(--radius-sm);}
.seller-row:hover{background:var(--bg-2);}
.seller-rank{width:24px; text-align:center; font-family:var(--font-num); color:var(--text-low); font-weight:700; font-size:.9rem;}
.seller-rank.top{color:var(--gold);}
.seller-avatar{width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none;}
.seller-avatar img{width:100%; height:100%; object-fit:cover;}
.seller-info{flex:1;}
.seller-info .name{color:var(--text-hi); font-weight:600; font-size:.9rem;}
.seller-info .handle{color:var(--text-low); font-size:.76rem;}
.seller-amount{text-align:right;}
.seller-amount b{color:var(--navy); display:block; font-size:.9rem; font-family:var(--font-num);}
:root[data-theme="dark"] .seller-amount b{color:var(--gold);}
.seller-amount span{color:var(--text-low); font-size:.74rem; font-family:var(--font-num);}
.activity-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:.86rem;}
.activity-row:last-child{border-bottom:none;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:600;}
.badge-success{background:rgba(24,122,79,.12); color:var(--success);}
.badge-pending{background:rgba(232,185,35,.14); color:var(--pending);}
.badge-failed{background:rgba(194,59,59,.1); color:var(--danger);}
.data-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.data-table th{text-align:left; color:var(--text-low); font-weight:600; text-transform:uppercase; font-size:.68rem; letter-spacing:.04em; padding:9px 10px; border-bottom:1px solid var(--border-soft);}
.data-table td{padding:11px 10px; border-bottom:1px solid var(--border-soft); color:var(--text-mid);}

/* ---------- Spotlight (auto-advancing banner) ---------- */
.spotlight{position:relative; border-radius:var(--radius-lg); overflow:hidden;}
.spotlight-track{display:flex; transition:transform .7s cubic-bezier(.16,.8,.3,1);}
.spotlight-slide{position:relative; flex:0 0 100%; width:100%; height:400px; background-size:cover; background-position:center;}
.spotlight-slide::before{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,7,13,.88) 0%, rgba(4,7,13,.4) 48%, rgba(4,7,13,.08) 100%);}
.spotlight-content{position:absolute; left:0; right:0; bottom:0; padding:28px 34px; color:#fff;}
.spotlight-content .kicker{display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); font-family:var(--font-num); margin-bottom:8px;}
.spotlight-content h3{font-size:1.6rem; margin:0 0 8px; color:#fff;}
.spotlight-content p{color:rgba(255,255,255,.82); max-width:520px; margin:0 0 14px; font-size:.9rem;}
.spotlight-content .price b{color:#fff;}
.spotlight-dots{display:flex; justify-content:center; gap:6px; margin-top:14px;}
.spotlight-dots span{width:7px; height:7px; border-radius:50%; background:var(--border-soft); cursor:pointer;}
.spotlight-dots span.active{background:var(--gold); transform:scale(1.3);}
.spotlight-arrow{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(4,7,13,.45); color:#fff; font-size:1.2rem; cursor:pointer; z-index:2;}
.spotlight-arrow.prev{left:14px;} .spotlight-arrow.next{right:14px;}
@media (max-width:640px){ .spotlight-slide{height:320px;} .spotlight-content{padding:18px;} .spotlight-content h3{font-size:1.25rem;} }

/* ---------- category / chain grids ---------- */
.category-grid,.chain-detail-grid,.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.category-card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s ease, border-color .25s ease; display:block;}
.category-card:hover{transform:translateY(-8px); border-color:var(--border-strong); box-shadow:0 16px 36px -12px rgba(0,0,0,.22), var(--glow);}
.category-art{aspect-ratio:16/9; background-size:cover; background-position:center;}
.category-body{padding:16px 18px 18px;}
.category-body h4{margin-bottom:6px; font-size:1rem;}
.category-body p{margin:0; font-size:.82rem; color:var(--text-low);}
.chain-detail-card,.trust-card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:22px; transition:transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s ease, border-color .25s ease;}
.chain-detail-card:hover,.trust-card:hover{transform:translateY(-8px); border-color:var(--border-strong); box-shadow:0 16px 36px -12px rgba(0,0,0,.22), var(--glow);}
.chain-detail-logo,.trust-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-family:var(--font-head); margin-bottom:14px;}
.trust-icon{background:var(--navy);}
:root[data-theme="dark"] .trust-icon{background:var(--gold); color:var(--navy);}
.chain-detail-card h4,.trust-card h4{font-size:1rem; margin-bottom:6px;}
.chain-detail-card p,.trust-card p{font-size:.82rem; color:var(--text-low); margin:0 0 12px;}
.chain-detail-stats{display:flex; justify-content:space-between; border-top:1px solid var(--border-soft); padding-top:12px; font-size:.72rem;}
.chain-detail-stats b{display:block; margin-top:2px; color:var(--text-hi);}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{padding:24px 20px 20px; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); transition:transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s ease, border-color .25s ease;}
.step:hover{transform:translateY(-8px); border-color:var(--border-strong); box-shadow:0 16px 36px -12px rgba(0,0,0,.22), var(--glow);}
.step .step-no{font-family:var(--font-num); font-size:.75rem; color:var(--gold); font-weight:700; letter-spacing:.08em;}
.step h4{margin:8px 0 6px; font-size:1rem;}
.step p{margin:0; font-size:.85rem; color:var(--text-low);}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden;}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:16px 20px; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--text-hi); cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.faq-chevron{transition:transform .25s ease; color:var(--text-low); font-size:1.1rem;}
.faq-q.open .faq-chevron{transform:rotate(180deg); color:var(--gold);}
.faq-a{padding:0 20px 18px; display:none;}
.faq-a.open{display:block;}
.faq-a p{margin:0; font-size:.86rem; color:var(--text-low);}

/* ---------- testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.testi-panel{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:24px; height:100%; transition:transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s ease, border-color .25s ease;}
.testi-panel:hover{transform:translateY(-8px); border-color:var(--border-strong); box-shadow:0 16px 36px -12px rgba(0,0,0,.22), var(--glow);}
.testi-stars{color:var(--gold); font-size:.8rem; margin-bottom:10px; letter-spacing:2px;}
.testi-quote{font-size:.9rem; color:var(--text-mid); margin-bottom:16px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none;}
.testi-avatar img{width:100%; height:100%; object-fit:cover;}
.testi-person .name{color:var(--text-hi); font-weight:600; font-size:.87rem;}
.testi-person .role{color:var(--text-low); font-size:.76rem;}

/* ---------- newsletter ---------- */
.newsletter{border-radius:var(--radius-lg); padding:46px; text-align:center; background:var(--panel); border:1px solid var(--border-soft); border-top:3px solid var(--gold-2);}
.newsletter-form{display:flex; gap:10px; max-width:400px; margin:22px auto 0;}
.newsletter-form input{flex:1; padding:12px 16px; border-radius:999px; border:1px solid var(--border-soft); background:var(--bg-2); color:var(--text-hi); font-family:var(--font-body);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border-soft); padding:44px 0 24px; margin-top:16px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:26px; margin-bottom:26px;}
.footer-grid h4{color:var(--text-hi); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; font-family:var(--font-head);}
.footer-grid li{margin-bottom:9px; font-size:.88rem;}
.footer-grid a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid var(--border-soft); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--text-low);}

/* ---------- auth pages ---------- */
.auth-shell{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.auth-card{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:32px;}
.auth-card h1{font-size:1.5rem;}
.auth-card .sub{color:var(--text-low); font-size:.87rem; margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.8rem; color:var(--text-low); margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%; padding:10px 12px; border-radius:8px; background:var(--bg-2); border:1px solid var(--border-soft); color:var(--text-hi); font-size:.88rem;}
.field-hint{font-size:.74rem; color:var(--text-low); margin-top:4px;}

/* ---------- badge chip / summary rows (detail page) ---------- */
.badge-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--bg-2); font-size:.72rem; color:var(--text-mid);}
.summary-row{display:flex; justify-content:space-between; padding:8px 0; font-size:.88rem;}
.summary-row.total{border-top:1px solid var(--border-soft); margin-top:6px; padding-top:12px; font-weight:700; color:var(--text-hi);}

/* ---------- modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(6,12,22,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:28px;}
.modal-box h3{margin-bottom:3px;}
.modal-sub{color:var(--text-low); font-size:.84rem; margin-bottom:20px;}
.modal-close{float:right; background:none; border:none; color:var(--text-low); font-size:1.25rem; cursor:pointer;}

/* ---------- dashboard ---------- */
.dashboard-layout{display:grid; grid-template-columns:230px 1fr; gap:26px; padding:36px 0 60px;}
.dash-sidebar{background:var(--charcoal); border-radius:var(--radius-lg); padding:22px 16px; height:fit-content;}
.dash-profile{text-align:center; margin-bottom:18px;}
.dash-profile img{width:60px; height:60px; border-radius:50%; margin:0 auto 8px; object-fit:cover; border:1.5px solid rgba(255,255,255,.3);}
.dash-profile .name{color:#fff; font-weight:600; font-size:.92rem;}
.dash-profile .email{color:rgba(255,255,255,.6); font-size:.75rem;}
.dash-nav a{display:block; padding:9px 13px; border-radius:var(--radius-sm); color:rgba(255,255,255,.72); font-size:.86rem; margin-bottom:3px;}
.dash-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.dash-nav a.active{background:rgba(232,185,35,.2); color:var(--gold-2);}
.widget-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px;}
.widget{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:18px;}
.widget-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.widget .label{font-size:.74rem; color:var(--text-low); text-transform:uppercase; letter-spacing:.04em;}
.widget .value{font-size:1.4rem; color:var(--text-hi); font-family:var(--font-num); margin-top:5px;}
.widget .sub{font-size:.74rem; color:var(--text-low); margin-top:3px;}

/* ---------- live decoration: sparkline charts + "reading" count-up numbers ----------
   Purely cosmetic layer used on the dashboard overview. Real figures (total spent,
   NFTs owned, chain counts) are never faked or fluctuated — they animate into place
   once from 0 to their true server-computed value. Only the little trend squiggles
   next to them are decorative and redraw periodically for a "live" feel. */
.widget-spark,.chain-spark{flex:none; opacity:.9;}
.widget-spark svg,.chain-spark svg{display:block;}
.widget-spark{width:56px; height:24px;}
.chain-spark{width:44px; height:18px; margin:0 10px;}
.live-badge{display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--success);}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--success); flex:none; animation:liveDotPulse 1.7s ease-in-out infinite;}
@keyframes liveDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(24,122,79,.45); opacity:1;} 50%{box-shadow:0 0 0 5px rgba(24,122,79,0); opacity:.6;}}
:root[data-theme="dark"] .live-dot{background:var(--success); box-shadow:none;}
@media (prefers-reduced-motion: reduce){ .live-dot{animation:none;} }
.dash-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.chain-breakdown-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:.86rem;}
.chain-breakdown-row:last-child{border-bottom:none;}
.chain-breakdown-row .chain-name{display:flex; align-items:center; flex:1;}
.chain-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; flex:none;}

/* ---------- gold accent header band (Trade / Deposit dashboard pages) ---------- */
.dash-page-band{background:var(--gold-2); color:#1a1400; border-radius:var(--radius-lg); padding:22px 26px; margin-bottom:18px; border-top:3px solid var(--charcoal);}
.dash-page-band h1{margin:0; color:#1a1400;}

/* ---------- trade / deposit (preview only — no real orders or payments) ---------- */
.trade-label{display:block; font-size:.78rem; color:var(--text-low); margin:14px 0 6px;}
.trade-label:first-child{margin-top:0;}
.trade-select{width:100%; padding:10px 12px; border-radius:8px; background:var(--bg-2); border:1px solid var(--border-soft); color:var(--text-hi); font-size:.88rem;}
.trade-price-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border-soft); margin-bottom:4px;}
.trade-price-row b{font-family:var(--font-num); color:var(--text-hi);}
.trade-side-toggle{display:flex; gap:8px; margin:14px 0 4px;}
.trade-side-btn{flex:1; padding:10px; border-radius:8px; border:1px solid var(--border-soft); background:var(--bg-2); color:var(--text-mid); font-weight:600; font-size:.86rem; cursor:pointer;}
.trade-side-btn[data-side="buy"].active{background:rgba(24,122,79,.12); border-color:var(--success); color:var(--success);}
.trade-side-btn[data-side="sell"].active{background:rgba(194,59,59,.1); border-color:var(--danger); color:var(--danger);}
.auto-trade-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border-soft);}
.auto-trade-row .desc{font-size:.78rem; color:var(--text-low); margin-top:3px; max-width:280px;}
.switch{position:relative; display:inline-block; width:44px; height:26px; flex:none;}
.switch input{opacity:0; width:0; height:0;}
.switch-track{position:absolute; inset:0; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:999px; cursor:pointer; transition:background .2s;}
.switch-thumb{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.switch input:checked + .switch-track{background:var(--navy); border-color:var(--navy);}
:root[data-theme="dark"] .switch input:checked + .switch-track{background:var(--gold);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(18px);}
.deposit-tabs{display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--border-soft); padding-bottom:14px;}
.deposit-tab{padding:9px 16px; border-radius:999px; border:1px solid var(--border-soft); background:var(--bg-2); color:var(--text-mid); font-size:.84rem; font-weight:600; cursor:pointer;}
.deposit-tab.active{background:var(--btn-primary-bg); color:var(--btn-primary-fg); border-color:transparent;}
.notice{display:none; margin-top:16px; padding:11px 14px; border-radius:var(--radius-sm); font-size:.82rem; background:rgba(24,122,79,.08); border:1px solid rgba(24,122,79,.3); color:var(--success);}
.quicklink-grid{display:flex; flex-wrap:wrap; gap:10px;}

/* ---------- admin ---------- */
.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--navy); padding:22px 16px;}
.admin-sidebar .brand{color:#fff; margin-bottom:22px;}
.admin-sidebar nav a{display:block; padding:10px 12px; border-radius:var(--radius-sm); color:rgba(255,255,255,.72); font-size:.87rem; margin-bottom:3px;}
.admin-sidebar nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.admin-sidebar nav a.active{background:rgba(232,185,35,.2); color:var(--gold-2);}
.admin-main{padding:28px 32px 60px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.media-group{margin-bottom:32px;} .media-group:last-child{margin-bottom:0;}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px;}
.media-slot{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px; text-align:center;}
.media-thumb{width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); margin-bottom:8px; object-fit:cover; background:var(--bg-2);}
.media-thumb.avatar-thumb{border-radius:50%;}
.media-label{font-size:.74rem; color:var(--text-mid); line-height:1.3;}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;} .hero-showcase{display:none;}
  .dashboard-layout,.admin-shell{grid-template-columns:1fr;} .widget-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  .category-grid,.chain-detail-grid,.trust-grid,.testi-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .main-nav{display:none;}
  .nav-toggle{display:block;}
  .main-nav.open{display:flex; flex-direction:column; width:100%; order:3;}
}