/* ==========================================================================
   ChainVerse — Bloom theme (black & gold), ported over from the Bloom preview
   so the two match exactly. This is the only palette the site has — no
   light mode, no toggle. Design tokens live at the top as CSS custom
   properties — change the palette here and it cascades through the whole
   site.
   ========================================================================== */

:root{
  --bg:#14110A; --bg-2:#1C170D; --panel:#1E1912; --panel-2:#26200F;
  --border-soft:rgba(232,185,35,.18); --border-strong:rgba(242,194,48,.55);
  --navy:#E8B923; --navy-2:#B8860B;
  --gold:#F2C230; --gold-2:#C9922A;
  --charcoal:#0F0C07; /* a deliberate near-black surface color, distinct from the page's own dark background */
  --text-hi:#FFFFFF; --text-mid:#C9BC98; --text-low:#8C8066;
  --success:#34D399; --danger:#EF5350; --pending:#E8B923;
  --poly:#A78BFA; --sol:#34D399; --tron:#C0654B; --eth:#2DD4BF;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --glow:0 10px 34px rgba(232,185,35,.28);
  --btn-primary-bg:var(--navy);
  --btn-primary-fg:#1A1508;
  --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif; --font-num:'Space Grotesk',monospace;
}
*{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(242,194,48,.4);}
.btn-outline{background:transparent; color:var(--gold); border-color:var(--border-strong);}
.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(--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(--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;}

.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(242,194,48,.1); color:var(--gold); border:1px solid rgba(242,194,48,.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(--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;}
}

/* ---------- 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(0,0,0,.4)), 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(--gold); font-size:.93rem; font-family:var(--font-num);}
.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(--gold); display:block; font-size:.9rem; font-family:var(--font-num);}
.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(--gold); color:var(--charcoal);}
.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;}}
@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(--gold); border-color: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-2); 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;}

/* ---------- boot loader (homepage only, once per browser session — see main-v3.js) ---------- */
#bootLoader{position:fixed; inset:0; z-index:999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .5s ease, visibility .5s ease;}
#bootLoader.hide{opacity:0; visibility:hidden; pointer-events:none;}
#bootLoader .mark-wrap{width:84px; height:84px;}
#bootLoader .orbit{animation:spin 2.6s linear infinite; transform-origin:30px 30px;}
@keyframes spin{ to{ transform:rotate(360deg);} }
#bootLoader .boot-word{font-family:var(--font-head); font-weight:800; font-size:1.05rem; letter-spacing:.02em; color:var(--text-hi);}
#bootLoader .boot-bar{width:160px; height:3px; border-radius:3px; background:var(--border-soft); overflow:hidden;}
#bootLoader .boot-bar span{display:block; height:100%; width:0%; background:var(--gold); animation:fillbar 1.1s ease forwards;}
@keyframes fillbar{ to{width:100%;} }

/* ---------- top loading bar (every page — a slim cue while a link navigates away) ---------- */
#topBar{position:fixed; top:0; left:0; height:3px; width:0%; z-index:300; background:var(--gold); box-shadow:0 0 10px rgba(242,194,48,.5); transition:width .35s ease, opacity .3s ease .2s;}
#topBar.active{transition:width .35s ease;}

/* ---------- continuous marquee strips (wallets, and reusable for any horizontal ticker) ---------- */
.wallets{position:relative; overflow:hidden; padding:24px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.wallets::before,.wallets::after{content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;}
.wallets::before{left:0; background:linear-gradient(90deg,var(--bg),rgba(20,17,10,0));}
.wallets::after{right:0; background:linear-gradient(270deg,var(--bg),rgba(20,17,10,0));}
.wallets-track{display:flex; align-items:center; gap:26px; width:max-content; animation:walletMarquee 26s linear infinite;}
.wallets:hover .wallets-track{animation-play-state:paused;}
@keyframes walletMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.wallets-track img{height:22px; width:auto; flex:none; opacity:.85; filter:grayscale(1) brightness(1.6); transition:opacity .2s, filter .2s;}
.wallets-track img:hover{opacity:1; filter:none;}

/* ---------- stats band (full-bleed gold fold, real platform numbers) ---------- */
.stats-band{background:var(--navy); position:relative; overflow:hidden; padding:36px 0;}
.stats-band-grid{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:22px;}
.stats-band-grid b{display:block; font-size:1.6rem; color:#1A1508; font-family:var(--font-num);}
.stats-band-grid span{font-size:.8rem; color:rgba(26,21,8,.72);}

/* ---------- fold band: a plain white strip behind a dashboard/admin page title + KPI widgets,
   so gold stays an accent rather than the whole surface (ported from the Bloom preview) ---------- */
.fold-band{background:#FFFFFF; border-radius:var(--radius-lg); padding:26px 26px 22px; margin-bottom:24px; box-shadow:0 10px 26px rgba(0,0,0,.22); position:relative; overflow:hidden; border-top:3px solid var(--navy);}
.fold-band > *{position:relative;}
.fold-band h1,.fold-band h2,.fold-band h3{color:#1A1508;}
.fold-band p{color:rgba(26,21,8,.7);}
.fold-band .widget-grid{margin-bottom:0;}
.fold-band .widget{background:rgba(26,21,8,.04); border-color:rgba(26,21,8,.1);}
.fold-band .widget .label,.fold-band .widget .sub{color:rgba(26,21,8,.62);}
.fold-band .widget .value{color:#1A1508;}
.fold-band .dash-section-head h3{color:rgba(26,21,8,.7);}
.fold-band .live-badge{color:var(--success);}

/* ---------- learn / educational teaser cards ---------- */
.learn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.learn-card{display:block; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:22px; cursor:pointer; transition:transform .25s cubic-bezier(.16,.8,.3,1), box-shadow .25s ease, border-color .25s ease;}
.learn-card:hover{transform:translateY(-8px); box-shadow:0 16px 36px -12px rgba(0,0,0,.4), var(--glow); border-color:var(--navy);}
.learn-card .learn-icon{width:40px; height:40px; border-radius:12px; background:var(--navy-2); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.05rem;}
.learn-card h4{font-size:1rem; margin-bottom:6px;}
.learn-card p{font-size:.85rem; margin:0 0 12px; color:var(--text-low);}
.learn-card .learn-link{font-size:.78rem; font-weight:700; color:var(--gold);}
@media (max-width:760px){ .learn-grid{grid-template-columns:1fr;} }

/* ---------- 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,.learn-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;}
  .stats-band-grid{justify-content:flex-start;}
}