/* ============================================================
   100 CLUB  ·  style.css  v2
   Art-Deco dark gold — bright foregrounds on deep dark backgrounds
   Fixed: sidebar overflow/scroll, contrast, testimonials gallery
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --bg:    #06060a;
  --bg2:   #0b0b10;
  --bg3:   #111118;
  --bg4:   #181820;
  --bg5:   #1f1f28;
  --bg6:   #262630;

  --gold:    #d4a942;
  --gold-l:  #f0c84a;
  --gold-xl: #ffe083;
  --gold-d:  #8c6b1f;
  --gold-xd: #3d2f00;
  --gl:      rgba(212,169,66,.18);
  --gg:      rgba(212,169,66,.08);
  --ggg:     rgba(212,169,66,.04);

  /* neutral — BRIGHT foregrounds */
  --white:  #f5eed8;
  --off:    #e0d4b0;
  --muted:  #9a8f70;
  --dim:    #4a4535;

  --green:    #4ed88a;
  --green-bg: rgba(78,216,138,.08);
  --green-bd: rgba(78,216,138,.22);
  --red:      #e06868;
  --red-bg:   rgba(224,104,104,.08);
  --red-bd:   rgba(224,104,104,.22);
  --blue:     #6aabec;
  --blue-bg:  rgba(106,171,236,.08);
  --blue-bd:  rgba(106,171,236,.22);
  --amber:    #e8a830;
  --amber-bg: rgba(232,168,48,.08);
  --amber-bd: rgba(232,168,48,.22);

  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Inter', system-ui, sans-serif;
  --fm: 'JetBrains Mono', 'Courier New', monospace;

  --sidebar-w: 232px;
  --topbar-h:  60px;
  --ease: cubic-bezier(.22,1,.36,1);
  --t:    .16s;
  --t2:   .32s;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--fb);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.55;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { cursor:pointer; font-family:var(--fb); }
input,textarea,select { font-family:var(--fb); }

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(212,169,66,.05) 0%,transparent 70%);
}

@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes growBar  { from{width:0} to{width:var(--w,0%)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes ticker   { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══ LAYOUT ═════════════════════════════════════════════════ */
.app {
  display: block;           /* NOT flex — sidebar is position:fixed */
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ══ SIDEBAR ════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg2);
  border-right: 1px solid var(--gl);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform var(--t2) var(--ease);
  overflow: hidden; /* clip decorations, nav scrolls internally */
}
.sidebar::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(212,169,66,.3) 40%,rgba(212,169,66,.3) 60%,transparent 100%);
  pointer-events:none;
}

.sb-brand {
  padding: 1.2rem 1.3rem;
  border-bottom: 1px solid var(--gl);
  display: flex; align-items: center; gap: .65rem;
  flex-shrink: 0; background: var(--ggg);
}
.sb-brand img { height:28px; object-fit:contain; }
.sb-brand-name {
  font-family: var(--fd); font-size: 1.1rem; font-weight: 700;
  color: var(--gold-l); letter-spacing: .03em; line-height: 1;
  display:flex; align-items:center; gap:.4rem;
}
.sb-brand-sub {
  font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:.18rem;
}
.sb-admin-badge {
  display:inline-block; background:var(--red); color:#fff;
  font-size:.44rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.1rem .38rem; vertical-align:middle;
}

/* The nav list MUST scroll vertically */
.sb-nav {
  flex: 1;
  min-height: 0;      /* CRITICAL — allows flex child to shrink below content */
  padding: .5rem 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.sb-nav::-webkit-scrollbar { width:3px; }
.sb-nav::-webkit-scrollbar-thumb { background:var(--gl); }

.sb-section {
  padding: .55rem 1.3rem .1rem;
  font-size: .52rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d); margin-top: .5rem; font-weight: 700;
}
.sb-item a {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem 1.3rem;
  font-size: .8rem; font-weight: 500; color: var(--off);
  transition: color var(--t), background var(--t);
  border-left: 2px solid transparent; position: relative;
}
.sb-item a:hover { color:var(--white); background:rgba(255,255,255,.03); }
.sb-item.active a {
  color: var(--gold-l); border-left-color: var(--gold);
  background: var(--gg); font-weight: 600;
}
.sb-item.active a::before {
  content:''; position:absolute; left:2px; top:0; bottom:0; width:70px;
  background:linear-gradient(90deg,rgba(212,169,66,.14),transparent); pointer-events:none;
}
.sb-icon { font-size:.9rem; width:1.1rem; text-align:center; flex-shrink:0; }
.sb-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.5rem; font-weight:700; padding:.1rem .4rem;
  border-radius:20px; min-width:18px; text-align:center;
}

.sb-user {
  padding: 1rem 1.3rem; border-top: 1px solid var(--gl);
  display: flex; align-items: center; gap: .6rem;
  flex-shrink: 0; background: var(--ggg);
}
.sb-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--gg); border:1px solid var(--gl);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:.72rem; font-weight:700;
  color:var(--gold-l); flex-shrink:0;
}
.sb-uname   { font-size:.78rem; font-weight:600; color:var(--white); line-height:1.3; }
.sb-ustatus {
  font-size:.58rem; color:var(--green);
  display:flex; align-items:center; gap:.25rem; margin-top:.06rem;
}
.sb-ustatus::before {
  content:''; width:5px; height:5px; background:var(--green);
  border-radius:50%; animation:pulse 2.4s ease infinite;
}

/* ══ MAIN ════════════════════════════════════════════════════ */
.main {
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  /* width is naturally 100vw - sidebar because of margin-left on block element */
  box-sizing: border-box;
}

.topbar {
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.8rem;
  background: rgba(6,6,10,.92);
  border-bottom: 1px solid var(--gl);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position:sticky; top:0; z-index:100; flex-shrink:0;
  box-sizing: border-box;
  min-width: 0;
}
.topbar-left {
  display:flex; align-items:center; gap:.7rem;
  /* inner title block stays column */
}
.topbar-left > div { display:flex; flex-direction:column; }
.topbar-title { font-size:.98rem; font-weight:700; color:var(--white); letter-spacing:.01em; }
.topbar-sub   { font-size:.6rem; color:var(--muted); margin-top:.05rem; }
.topbar-right { display:flex; align-items:center; gap:.5rem; }
.topbar-code {
  background:var(--bg3); border:1px solid var(--gl); color:var(--gold-l);
  padding:.36rem .88rem; font-family:var(--fm); font-size:.66rem;
  letter-spacing:.08em; font-weight:600;
}
.topbar-btn {
  background:var(--bg3); border:1px solid rgba(255,255,255,.1);
  color:var(--off); padding:.38rem .9rem; font-size:.72rem;
  transition:all var(--t); letter-spacing:.04em;
}
.topbar-btn:hover { border-color:var(--gl); color:var(--white); }
.topbar-btn.primary {
  background:linear-gradient(135deg,var(--gold-xd),var(--gold));
  color:var(--bg); border:none; font-weight:700;
}
.topbar-btn.primary:hover { box-shadow:0 3px 16px rgba(212,169,66,.38); }
.mob-menu-btn {
  display:none; background:none; border:none;
  color:var(--white); font-size:1.2rem; padding:.3rem; line-height:1;
}

.ticker-bar {
  height:30px; background:var(--gold-xd); border-bottom:1px solid var(--gl);
  overflow:hidden; position:relative; flex-shrink:0;
}
.ticker-bar::before,.ticker-bar::after {
  content:''; position:absolute; top:0; bottom:0; z-index:2; width:50px;
}
.ticker-bar::before { left:0; background:linear-gradient(90deg,var(--gold-xd),transparent); }
.ticker-bar::after  { right:0; background:linear-gradient(-90deg,var(--gold-xd),transparent); }
.ticker-track {
  display:flex; gap:2.5rem; white-space:nowrap; width:max-content;
  height:100%; align-items:center;
  animation:ticker 32s linear infinite; padding-left:1.5rem;
}
.ticker-item {
  font-size:.64rem; font-weight:600;
  color:var(--gold-xl); letter-spacing:.08em; text-transform:uppercase;
}

.page {
  padding: 1.5rem 1.8rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
}
.page.animate { animation:fadeUp var(--t2) var(--ease) both; }

/* ══ STAT CARDS ══════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

.stat-card {
  background:var(--bg3); border:1px solid rgba(255,255,255,.08);
  padding:1.3rem 1.4rem; position:relative; overflow:hidden;
  transition:border-color var(--t), transform var(--t);
  min-width: 0; /* prevent grid overflow */
}
.stat-card:hover { border-color:var(--gl); transform:translateY(-2px); }
.stat-card.feat  { border-color:var(--gl); background:linear-gradient(135deg,var(--bg3),var(--bg4)); }
.stat-card.feat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.stat-card::after {
  content:''; position:absolute; bottom:0; right:0; width:60px; height:60px;
  background:radial-gradient(circle,var(--gg) 0%,transparent 70%); pointer-events:none;
}
.stat-lbl  { font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:.42rem; font-weight:600; }
.stat-val  { font-family:var(--fd); font-size:2.2rem; font-weight:700; line-height:1; color:var(--white); }
.stat-val.gold  { color:var(--gold-l); }
.stat-val.green { color:var(--green); }
.stat-val.red   { color:var(--red); }
.stat-note { font-size:.63rem; margin-top:.32rem; font-weight:500; }
.stat-note.good  { color:var(--green); }
.stat-note.amber { color:var(--amber); }
.stat-note.muted { color:var(--muted); }

/* ══ PANELS ══════════════════════════════════════════════════ */
.panel {
  background:var(--bg3); border:1px solid rgba(255,255,255,.08); padding:1.4rem;
  min-width: 0;
  box-sizing: border-box;
}
.panel-head {
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-l); margin-bottom:1.1rem;
  display:flex; justify-content:space-between; align-items:center;
}
.panel-action { font-size:.6rem; color:var(--muted); letter-spacing:.06em; cursor:pointer; transition:color var(--t); }
.panel-action:hover { color:var(--gold); }

/* Grids — min-width:0 prevents children from blowing out their container */
.grid-2   { display:grid; grid-template-columns:1.55fr 1fr;    gap:1.15rem; align-items:start; min-width:0; }
.grid-2eq { display:grid; grid-template-columns:1fr 1fr;       gap:1.15rem; align-items:start; min-width:0; }
.grid-3   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; align-items:start; min-width:0; }

/* ══ PROGRESS BARS ═══════════════════════════════════════════ */
.bar-wrap { margin-bottom:.9rem; }
.bar-wrap:last-child { margin-bottom:0; }
.bar-head { display:flex; justify-content:space-between; margin-bottom:.35rem; }
.bar-label { font-size:.7rem; color:var(--off); font-weight:500; }
.bar-val   { font-size:.68rem; font-weight:600; color:var(--gold-l); font-family:var(--fm); }
.bar-track { background:rgba(255,255,255,.06); height:5px; overflow:hidden; }
.bar-fill  { height:100%; animation:growBar 1.6s .1s var(--ease) both; }
.bar-fill.gold  { background:linear-gradient(90deg,var(--gold-xd),var(--gold),var(--gold-l)); }
.bar-fill.blue  { background:linear-gradient(90deg,#1a4075,var(--blue)); }
.bar-fill.green { background:linear-gradient(90deg,#0f4028,var(--green)); }
.bar-fill.red   { background:linear-gradient(90deg,#4a1010,var(--red)); }

/* ══ GOLD BARS ROW ═══════════════════════════════════════════ */
.gold-bars-row { display:flex; gap:.45rem; align-items:center; margin-bottom:1.1rem; flex-wrap:wrap; }
.gold-bar { font-size:1.65rem; transition:filter var(--t); line-height:1; }
.gold-bar.earned { filter:drop-shadow(0 0 7px rgba(212,169,66,.7)); }
.gold-bar.empty  { opacity:.12; filter:grayscale(1) brightness(.4); }

/* ══ REFERRAL BOX ════════════════════════════════════════════ */
.ref-box {
  background:var(--bg4); border:1px solid var(--gl);
  padding:.78rem 1rem; display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem;
}
.ref-link {
  font-family:var(--fm); font-size:.72rem; color:var(--gold-l);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.copy-btn {
  background:var(--gold); color:var(--bg); border:none;
  padding:.38rem .95rem; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; transition:background var(--t); flex-shrink:0;
}
.copy-btn:hover { background:var(--gold-l); }
.share-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.share-btn {
  background:var(--bg4); border:1px solid rgba(255,255,255,.09); color:var(--off);
  padding:.5rem .85rem; font-size:.7rem; flex:1; min-width:80px;
  transition:all var(--t); font-weight:500;
}
.share-btn:hover { border-color:var(--gl); color:var(--gold-l); background:var(--gg); }

/* ══ MEMBER / FEED / REWARD ══════════════════════════════════ */
.member-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.member-row:last-child { border-bottom:none; }
.member-av {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg5); border:1px solid var(--gl);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:.6rem; font-weight:700; color:var(--gold); flex-shrink:0;
}
.member-name { flex:1; font-size:.78rem; font-weight:600; color:var(--white); }
.member-date { font-size:.64rem; color:var(--muted); }

.feed-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.feed-item:last-child { border-bottom:none; }
.feed-dot { width:8px; height:8px; border-radius:50%; margin-top:.28rem; flex-shrink:0; }
.dot-gold  { background:var(--gold); box-shadow:0 0 6px rgba(212,169,66,.5); }
.dot-green { background:var(--green); box-shadow:0 0 6px rgba(78,216,138,.4); }
.dot-blue  { background:var(--blue); }
.feed-body { flex:1; font-size:.76rem; color:var(--off); line-height:1.4; }
.feed-time { font-size:.62rem; color:var(--muted); margin-top:.18rem; }
.feed-pts  { font-size:.7rem; font-weight:700; color:var(--gold-l); font-family:var(--fm); flex-shrink:0; }

.reward-item {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem; background:var(--bg4); border:1px solid rgba(255,255,255,.07);
  margin-bottom:.6rem; transition:border-color var(--t);
}
.reward-item:last-child { margin-bottom:0; }
.reward-item.unlocked { border-color:var(--gl); background:var(--gg); }
.reward-ico   { font-size:1.5rem; flex-shrink:0; }
.reward-info  { flex:1; }
.reward-title { font-size:.82rem; font-weight:700; color:var(--white); margin-bottom:.18rem; }
.reward-req   { font-size:.68rem; color:var(--muted); }
.reward-req .tick { color:var(--green); margin-left:.3rem; font-weight:700; }
.redeem-btn {
  background:var(--gold); color:var(--bg); border:none;
  padding:.42rem 1rem; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; transition:all var(--t); flex-shrink:0;
}
.redeem-btn:hover { background:var(--gold-l); transform:translateY(-1px); }
.redeem-btn.off { background:var(--bg5); color:var(--muted); cursor:default; transform:none; }

/* ══ BADGES ══════════════════════════════════════════════════ */
.badge {
  display:inline-block; font-size:.52rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.1rem .45rem;
}
.badge-new    { background:var(--green-bg); color:var(--green); border:1px solid var(--green-bd); }
.badge-gold   { background:var(--gg);       color:var(--gold);  border:1px solid var(--gl); }
.badge-nexus  { background:var(--blue-bg);  color:var(--blue);  border:1px solid var(--blue-bd); }
.badge-neptune{ background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber-bd); }

/* ══ TESTIMONIALS GALLERY ════════════════════════════════════ */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1rem;
}
.gallery-card {
  background:var(--bg3); border:1px solid rgba(255,255,255,.07);
  overflow:hidden; transition:border-color var(--t),transform var(--t); cursor:pointer;
}
.gallery-card:hover { border-color:var(--gl); transform:translateY(-3px); }
.gallery-card img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--bg4); display:block;
}
.gallery-placeholder {
  width:100%; aspect-ratio:4/3; background:var(--bg4);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--dim);
}
.gallery-card-body { padding:.75rem; }
.gallery-card-name { font-size:.76rem; font-weight:700; color:var(--white); margin-bottom:.14rem; }
.gallery-card-sub  { font-size:.64rem; color:var(--muted); }
.gallery-card-amt  { font-size:1.1rem; font-family:var(--fd); font-weight:700; color:var(--gold-l); margin-top:.22rem; }

.upload-zone {
  border:1.5px dashed var(--gl); background:var(--gg);
  padding:2rem; text-align:center; cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.upload-zone:hover { border-color:var(--gold); background:rgba(212,169,66,.06); }
.upload-zone-icon  { font-size:2.2rem; margin-bottom:.6rem; }
.upload-zone-label { font-size:.84rem; color:var(--off); margin-bottom:.3rem; font-weight:600; }
.upload-zone-sub   { font-size:.7rem; color:var(--muted); }

.lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox-img { max-width:100%; max-height:88vh; object-fit:contain; }
.lightbox-close {
  position:absolute; top:1.2rem; right:1.5rem;
  background:none; border:none; color:var(--white); font-size:1.5rem;
  cursor:pointer; opacity:.7; transition:opacity var(--t);
}
.lightbox-close:hover { opacity:1; }

/* ══ PAYOUT ELIGIBILITY BANNER ═══════════════════════════════ */
.payout-banner {
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1px solid var(--gl); border-left:4px solid var(--gold);
  padding:1.1rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.payout-banner.locked { border-left-color:var(--muted); }
.payout-banner-left { display:flex; align-items:center; gap:1rem; }
.payout-banner-icon { font-size:1.8rem; flex-shrink:0; }
.payout-banner.locked .payout-banner-icon { opacity:.4; }
.payout-banner-title { font-size:.96rem; font-weight:700; color:var(--white); margin-bottom:.2rem; }
.payout-banner-sub   { font-size:.73rem; color:var(--off); }

/* ══ FIELDS ══════════════════════════════════════════════════ */
.field { margin-bottom:.95rem; }
.field-label {
  display:block; font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--off); margin-bottom:.38rem;
}
.field-input,.field-textarea,.field-select {
  width:100%; background:var(--bg4); border:1px solid rgba(255,255,255,.1);
  color:var(--white); padding:.65rem .9rem; font-size:.82rem;
  outline:none; transition:border-color var(--t); -webkit-appearance:none; appearance:none;
}
.field-input::placeholder,.field-textarea::placeholder { color:var(--dim); }
.field-input:focus,.field-select:focus,.field-textarea:focus { border-color:rgba(212,169,66,.5); }
.field-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239a8f70'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem;
}
.field-select option { background:#181820; color:#f5eed8; }
.field-textarea { resize:vertical; min-height:100px; }
.field-hint  { font-size:.64rem; color:var(--muted); margin-top:.3rem; line-height:1.5; }
.field-error { font-size:.64rem; color:var(--red); margin-top:.3rem; display:none; }
.field-error.show { display:block; }
.pw-wrap { position:relative; }
.pw-wrap .field-input { padding-right:2.8rem; }
.pw-eye {
  position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font-size:.76rem; padding:0; transition:color var(--t);
}
.pw-eye:hover { color:var(--gold); }
.strength-row { display:flex; gap:3px; margin-top:.38rem; }
.strength-seg { flex:1; height:3px; background:rgba(255,255,255,.07); transition:background .3s; }
.strength-seg.weak   { background:var(--red); }
.strength-seg.fair   { background:var(--amber); }
.strength-seg.strong { background:var(--green); }

/* ══ ADMIN PILLS ══════════════════════════════════════════════ */
.admin-pills { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.38rem; }
.admin-pill {
  padding:.75rem 1rem; background:var(--bg4); border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer; text-align:center; transition:all var(--t);
}
.admin-pill:hover { border-color:rgba(212,169,66,.25); }
.admin-pill.sel   { border-color:var(--gold); background:var(--gg); }
.admin-pill-icon  { font-size:1.3rem; margin-bottom:.18rem; }
.admin-pill-name  { font-size:.82rem; font-weight:700; color:var(--off); }
.admin-pill.sel .admin-pill-name { color:var(--gold-l); }
.admin-pill-sub   { font-size:.58rem; color:var(--muted); margin-top:.08rem; }

/* ══ VOUCHER TYPES ════════════════════════════════════════════ */
.voucher-types { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
.vtype-btn {
  padding:.7rem 1rem; background:var(--bg4); border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer; text-align:center; transition:all var(--t); font-family:var(--fb);
}
.vtype-btn:hover { border-color:var(--gl); }
.vtype-btn.sel   { border-color:var(--gold); background:var(--gg); }
.vtype-name { font-size:.8rem; font-weight:700; color:var(--off); }
.vtype-btn.sel .vtype-name { color:var(--gold-l); }

/* ══ ALERTS ══════════════════════════════════════════════════ */
.alert { padding:.75rem 1rem; font-size:.78rem; line-height:1.5; display:none; }
.alert.show    { display:block; }
.alert.error   { background:var(--red-bg);   border:1px solid var(--red-bd);   color:#e8a0a0; }
.alert.success { background:var(--green-bg); border:1px solid var(--green-bd); color:#8ee8b4; }
.alert.info    { background:var(--amber-bg); border:1px solid var(--amber-bd); color:var(--gold-l); }

/* ══ TIP BOX ══════════════════════════════════════════════════ */
.tip {
  background:var(--gg); border:1px solid var(--gl); border-left:3px solid var(--gold);
  padding:.72rem .95rem; font-size:.74rem; color:var(--off); line-height:1.6; margin-top:.9rem;
}
.tip strong { color:var(--white); }

/* ══ SEARCH BAR ═══════════════════════════════════════════════ */
.search-bar { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
.search-input {
  background:var(--bg4); border:1px solid rgba(255,255,255,.1); color:var(--white);
  padding:.52rem .9rem; font-family:var(--fb); font-size:.78rem;
  outline:none; transition:border-color var(--t); flex:1; min-width:160px;
}
.search-input:focus { border-color:var(--gl); }
.search-input::placeholder { color:var(--dim); }
.filter-btn {
  background:var(--bg4); border:1px solid rgba(255,255,255,.09); color:var(--off);
  padding:.5rem .92rem; font-size:.68rem;
  transition:all var(--t); letter-spacing:.05em; font-family:var(--fb);
}
.filter-btn:hover,.filter-btn.on { border-color:var(--gl); color:var(--gold-l); }

/* ══ BUTTONS ═════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; font-family:var(--fb); font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border:none; cursor:pointer;
  transition:all var(--t); position:relative; text-decoration:none; line-height:1;
}
.btn-gold { background:linear-gradient(135deg,var(--gold-xd),var(--gold),var(--gold-l)); color:var(--bg); }
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 5px 22px rgba(212,169,66,.38); }
.btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.1); color:var(--off); }
.btn-ghost:hover { border-color:var(--gl); color:var(--white); }
.btn-danger { background:transparent; border:1px solid var(--red-bd); color:var(--red); }
.btn-danger:hover { background:var(--red-bg); }
.btn-full { width:100%; }
.btn .btn-text { transition:opacity var(--t); }
.btn.loading .btn-text { opacity:0; }
.btn.loading .btn-spin { display:flex; }
.btn-spin { display:none; position:absolute; inset:0; align-items:center; justify-content:center; }
.spinner {
  width:16px; height:16px; border:2px solid rgba(0,0,0,.2);
  border-top-color:var(--bg); border-radius:50%; animation:spin .65s linear infinite;
}

/* ══ TOAST ═══════════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  background:var(--bg3); border:1px solid var(--gl); border-left:3px solid var(--gold);
  padding:.82rem 1.2rem; font-size:.78rem; display:flex; align-items:center; gap:.5rem;
  opacity:0; transform:translateY(18px); transition:all .26s var(--ease);
  max-width:300px; pointer-events:none;
}
#toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.toast-icon { color:var(--gold-l); flex-shrink:0; }
.toast-msg  { color:var(--white); }

/* ══ FOOTER ══════════════════════════════════════════════════ */
.app-footer {
  border-top:1px solid var(--gl); background:var(--bg2);
  padding:.95rem 1.8rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-shrink:0; position:relative; z-index:1;
}
.footer-left  { font-size:.65rem; color:var(--muted); }
.footer-left strong { color:var(--gold-l); }
.footer-links { display:flex; align-items:center; gap:1.1rem; }
.footer-link  { font-size:.63rem; color:var(--muted); transition:color var(--t); }
.footer-link:hover { color:var(--gold); }
.footer-sep   { width:1px; height:11px; background:var(--dim); }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(212,169,66,.2); }
::-webkit-scrollbar-thumb:hover { background:rgba(212,169,66,.4); }

/* ══ ADMIN STATS WIDE GRID ═══════════════════════════════════ */
.admin-stats { grid-template-columns:repeat(5,1fr); }

/* ══ SIDEBAR OVERLAY (mobile backdrop) ══════════════════════ */
.sidebar-overlay {
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:199;
  backdrop-filter:blur(2px);
}
.sidebar-overlay.show { display:block; }

/* ══ RESPONSIVE ══════════════════════════════════════════════
   Breakpoints (viewport widths):
   ≥1400px  → 4-col stats, grid-2 side-by-side, grid-2eq side-by-side
   1100–1399 → 4-col stats (smaller), grids still side-by-side
   900–1099  → 2-col stats (2×2), grid-2 stacks, grid-2eq stacks
   681–899   → sidebar still visible, 2-col stats, single-col grids
   ≤680px    → sidebar hidden (drawer), 2-col stats, full mobile
   ≤440px    → 1-col stats, single col everything
   ════════════════════════════════════════════════════════════ */

/* 1400px — slightly tighten padding */
@media(max-width:1400px) {
  .page { padding: 1.4rem 1.6rem 2.5rem; }
}

/* 1300px — admin grid shrinks first */
@media(max-width:1300px) {
  .admin-stats { grid-template-columns:repeat(3,1fr); }
}

/* 1099px — stats to 2×2, grids stack */
@media(max-width:1099px) {
  .stats-grid   { grid-template-columns:repeat(2,1fr); }
  .admin-stats  { grid-template-columns:repeat(3,1fr); }
  .grid-2       { grid-template-columns:1fr; }
  .grid-2eq     { grid-template-columns:1fr 1fr; } /* keep eq side by side */
  .grid-3       { grid-template-columns:1fr 1fr; }
}

/* 900px — grid-2eq also stacks */
@media(max-width:900px) {
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .grid-2eq    { grid-template-columns:1fr; }
  .grid-3      { grid-template-columns:1fr; }
}

/* 768px — sidebar narrows, tighten spacing */
@media(max-width:768px) {
  :root { --sidebar-w: 210px; }
  .page  { padding:1.2rem 1.2rem; gap:1rem; }
  .topbar { padding:0 1.2rem; }
  .stat-val { font-size:1.8rem; }
}

/* 680px — sidebar becomes full mobile drawer */
@media(max-width:680px) {
  :root { --sidebar-w: 260px; } /* wider for easy tapping */

  /* Sidebar becomes off-canvas drawer */
  .sidebar {
    transform:translateX(-100%);
    box-shadow:none;
    width:var(--sidebar-w);
  }
  .sidebar.open {
    transform:translateX(0);
    box-shadow:8px 0 40px rgba(0,0,0,.7);
  }
  /* Show overlay when sidebar open */
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.show { display:block; }

  /* Main fills full width */
  .main { margin-left:0; width:100%; }

  /* Show hamburger */
  .mob-menu-btn { display:flex !important; }

  /* Topbar tweaks */
  .topbar { padding:0 1rem; height:56px; }
  :root  { --topbar-h: 56px; }
  .topbar-code { display:none; }
  .topbar-title { font-size:.9rem; }
  .topbar-sub   { display:none; }

  /* Page content */
  .page { padding:.9rem 1rem; gap:.85rem; }

  /* Stats: 2 columns on mobile */
  .stats-grid  { grid-template-columns:1fr 1fr; gap:.65rem; }
  .admin-stats { grid-template-columns:1fr 1fr; }

  /* All grids single column */
  .grid-2,.grid-2eq,.grid-3 { grid-template-columns:1fr; }

  /* Panels tighter padding */
  .panel { padding:1rem 1.1rem; }
  .panel-head { font-size:.58rem; margin-bottom:.85rem; }

  /* Stat cards smaller */
  .stat-card { padding:1rem 1.1rem; }
  .stat-val  { font-size:1.75rem; }
  .stat-lbl  { font-size:.55rem; }

  /* Payout banner stacks */
  .payout-banner {
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
    padding:.9rem 1rem;
  }
  .payout-banner-left { gap:.7rem; }
  .payout-banner-icon { font-size:1.4rem; }
  .payout-banner-title { font-size:.85rem; }

  /* Topbar right — fewer items */
  .topbar-btn { padding:.32rem .65rem; font-size:.68rem; }

  /* Ticker smaller */
  .ticker-item { font-size:.56rem; }

  /* Footer stacks */
  .app-footer {
    flex-direction:column;
    text-align:center;
    gap:.6rem;
    padding:.9rem 1rem;
  }
  .footer-links { justify-content:center; flex-wrap:wrap; gap:.7rem; }

  /* Gallery */
  .gallery-grid { grid-template-columns:1fr 1fr; gap:.65rem; }

  /* Share row */
  .share-row { gap:.4rem; }
  .share-btn { font-size:.65rem; padding:.45rem .5rem; }

  /* Reward items */
  .reward-item { flex-wrap:wrap; gap:.6rem; }
  .redeem-btn  { width:100%; text-align:center; }

  /* Gold bar row */
  .gold-bars-row { gap:.32rem; }
  .gold-bar { font-size:1.35rem; }

  /* Lightbox */
  .lightbox { padding:.5rem; }
}

/* 440px — single column stats, tightest layout */
@media(max-width:440px) {
  .stats-grid  { grid-template-columns:1fr; gap:.6rem; }
  .admin-stats { grid-template-columns:1fr 1fr; }
  .admin-pills { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .stat-val  { font-size:2rem; }

  /* Make panels more compact */
  .page { padding:.75rem; gap:.75rem; }
  .panel { padding:.9rem .95rem; }

  /* Topbar — just title + hamburger + one button */
  .topbar-btn:not(.primary) { display:none; }
}

/* ══════════════════════════════════════════════════════
   DIGITAL CLUB HOMEPAGE ADDITIONS
══════════════════════════════════════════════════════ */

/* ─── ROOT (homepage overrides) ─────────────────────── */
:root {
  --bg:#0a0a0a; --bg2:#0f0f0f; --bg3:#161616; --bg4:#1e1e1e; --bg5:#272727;
  --gold:#c8a84b; --gold-l:#e2c97e; --gold-xl:#f0dda0; --gold-d:#8a6e22; --gold-xd:#4a3800;
  --gold-glow:rgba(200,168,75,.16); --gold-line:rgba(200,168,75,.14); --gold-mid:rgba(200,168,75,.08);
  --white:#f5efe0; --off:#c8bfa8; --muted:#7a7060; --dim:#3a3530;
  --green:#4cba78; --green-bg:rgba(76,186,120,.08); --green-bd:rgba(76,186,120,.2);
  --fd:'Cormorant Garamond',serif; --fb:'DM Sans',sans-serif; --fm:'DM Mono',monospace;
  --max:1140px; --ease:cubic-bezier(.25,1,.5,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--white);font-family:var(--fb);font-weight:400;overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--gold-d)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ─── NOISE ─────────────────────────────────────────── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}

/* ─── KEYFRAMES ─────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes barGrow{from{width:0}to{width:var(--w,70%)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,.4)}70%{box-shadow:0 0 0 8px rgba(200,168,75,0)}}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── UTILS ──────────────────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 2rem}
.gold{color:var(--gold)}.off{color:var(--off)}.muted{color:var(--muted)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.vis{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal-l.vis{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal-r.vis{opacity:1;transform:none}

/* ─── BUTTONS ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;font-family:var(--fb);
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;border:none;transition:all .28s;text-decoration:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .5s}
.btn:hover::after{transform:translateX(100%)}
.btn-primary{background:linear-gradient(135deg,var(--gold-xd) 0%,var(--gold-d) 30%,var(--gold) 65%,var(--gold-l) 100%);
  color:#0a0a0a;box-shadow:0 4px 20px rgba(200,168,75,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(200,168,75,.4)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(200,168,75,.3)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--off);border:1px solid rgba(255,255,255,.07)}
.btn-ghost:hover{background:rgba(255,255,255,.07);color:var(--white)}

/* ─── TAGS ──────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .75rem;
  font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tag-gold{background:rgba(200,168,75,.08);color:var(--gold);border:1px solid rgba(200,168,75,.22)}
.tag-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.tag-dim{background:rgba(255,255,255,.03);color:var(--muted);border:1px solid rgba(255,255,255,.07)}

/* ─── NAV ───────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:62px;
  display:flex;align-items:center;justify-content:space-between;padding:0 2rem;
  background:rgba(10,10,10,.8);backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid rgba(200,168,75,.08);transition:all .3s}
#nav.scrolled{background:rgba(10,10,10,.97);border-bottom-color:rgba(200,168,75,.14)}
.nav-brand{display:flex;align-items:center;gap:.75rem}
.nav-brand-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--gold-xd),var(--gold));
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:1rem;
  font-weight:700;color:#0a0a0a;flex-shrink:0;position:relative}
.nav-brand-mark::before{content:'';position:absolute;inset:-1px;border:1px solid rgba(200,168,75,.4);z-index:-1}
.nav-brand-name{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--gold)}
.nav-brand-sub{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.05rem}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:.73rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:.65rem}
.btn-nav{padding:.5rem 1.25rem;font-size:.72rem}
.nav-ham{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:.4rem}
.nav-ham span{display:block;width:20px;height:1.5px;background:var(--white);transition:all .3s}

/* ─── HERO ──────────────────────────────────────────── */
#hero{position:relative;min-height:100vh;overflow:hidden;padding-top:62px;
  display:flex;flex-direction:column;justify-content:center}
.hero-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 45%,rgba(200,168,75,.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%,rgba(200,168,75,.04) 0%,transparent 55%),
    radial-gradient(ellipse 30% 40% at 90% 20%,rgba(200,168,75,.03) 0%,transparent 50%)}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,168,75,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,168,75,.022) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 80%)}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:4rem 2rem 3rem;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:2.5rem;
  background:rgba(200,168,75,.06);border:1px solid rgba(200,168,75,.18);padding:.38rem 1.1rem;
  animation:fadeUp .6s var(--ease) both}
.hero-eyebrow-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;animation:pulse 2s ease infinite}
.hero-eyebrow-text{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hero-headline-wrap{text-align:center;margin-bottom:3.5rem}
.hero-h1{font-family:var(--fd);font-size:clamp(3.2rem,7vw,6.5rem);font-weight:700;
  line-height:.98;letter-spacing:-.025em;margin-bottom:1.5rem;animation:fadeUp .6s .1s var(--ease) both}
.hero-h1 .accent{color:var(--gold);font-style:italic;display:block}
.hero-sub-centre{font-size:1.05rem;color:var(--off);line-height:1.75;font-weight:300;
  max-width:560px;margin:0 auto 2.5rem;animation:fadeUp .6s .18s var(--ease) both}
.hero-cta-centre{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
  animation:fadeUp .6s .26s var(--ease) both;margin-bottom:3.5rem}

/* HERO MATH CARDS */
.hero-math{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:0;align-items:stretch;animation:fadeUp .7s .35s var(--ease) both;
  background:var(--bg3);border:1px solid rgba(200,168,75,.16);
  box-shadow:0 0 60px rgba(200,168,75,.06),0 24px 60px rgba(0,0,0,.5);
  position:relative;overflow:hidden}
.hero-math::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hm-step{padding:1.8rem 1.5rem;text-align:center;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.hm-step+.hm-step:not(.hm-arrow){border-left:1px solid rgba(255,255,255,.05)}
.hm-ico{font-size:2rem;margin-bottom:.6rem;display:block;line-height:1}
.hm-val{font-family:var(--fd);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1;
  color:var(--gold);margin-bottom:.3rem}
.hm-lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  line-height:1.5;max-width:130px;margin:0 auto}
.hm-lbl strong{color:var(--off);display:block;font-size:.73rem;letter-spacing:0;
  text-transform:none;margin-bottom:.1rem;font-weight:600}
.hm-arrow{padding:.5rem .4rem;color:rgba(200,168,75,.4);text-align:center;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hm-step.highlight{background:linear-gradient(180deg,rgba(200,168,75,.07) 0%,rgba(200,168,75,.02) 100%)}
.hm-step.big .hm-val{color:var(--gold-l);font-size:clamp(2.2rem,4vw,3.4rem)}
.hm-note{font-size:.58rem;color:var(--green);margin-top:.35rem;font-weight:600;letter-spacing:.04em}

/* HERO IMAGE ROW */
.hero-imgrow{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2px;
  margin-top:2rem;height:300px;animation:fadeIn .8s .5s var(--ease) both;
  border:1px solid rgba(200,168,75,.08)}
.hero-imgcell{position:relative;overflow:hidden;background:var(--bg4)}
.hero-imgcell img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);filter:brightness(.7) saturate(.75)}
.hero-imgcell:hover img{transform:scale(1.05);filter:brightness(.85) saturate(1.1)}
.hero-imgcell-ph{width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;
  background:linear-gradient(135deg,var(--bg3) 0%,var(--bg4) 100%)}
.hero-imgcell-ph .ph-icon{font-size:2.4rem;opacity:.3}
.hero-imgcell-ph .ph-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
.imgcell-tag{position:absolute;bottom:0;left:0;right:0;padding:.8rem 1rem;
  background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,transparent 100%)}
.imgcell-tag-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.imgcell-tag-val{font-size:.82rem;font-weight:600;color:var(--white);margin-top:.1rem}
.imgcell-tag-val span{color:var(--gold)}

/* TRUST BAR */
.hero-trust{display:flex;align-items:center;justify-content:center;gap:2.5rem;
  padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.06);
  animation:fadeUp .6s .62s var(--ease) both;flex-wrap:wrap;margin-top:2rem}
.h-trust-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.h-trust-val{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1}
.h-trust-lbl{font-size:.58rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.h-trust-div{width:1px;height:28px;background:rgba(255,255,255,.07)}

/* SCROLL INDICATOR */
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  animation:fadeIn 1s 1s both;z-index:5;pointer-events:none}
.scroll-line{width:1px;height:36px;background:linear-gradient(180deg,var(--gold-d),transparent);
  animation:float 2s ease-in-out infinite}
.scroll-txt{font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ─── TICKER ─────────────────────────────────────────── */
.ticker{background:var(--gold);overflow:hidden;padding:.48rem 0;position:relative;z-index:2}
.ticker-inner{display:flex;animation:tickScroll 26s linear infinite;white-space:nowrap}
.tick-item{display:inline-flex;align-items:center;gap:.65rem;padding:0 1.75rem;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--bg)}
.tick-sep{color:rgba(0,0,0,.25)}

/* ─── RIBBON ─────────────────────────────────────────── */
.ribbon{padding:2rem 0;border-bottom:1px solid rgba(200,168,75,.07)}
.ribbon-inner{display:flex;justify-content:center;flex-wrap:wrap;max-width:var(--max);margin:0 auto;padding:0 2rem}
.rib-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.7rem 1.4rem;border-right:1px solid rgba(255,255,255,.04);transition:all .2s;cursor:default}
.rib-item:last-child{border-right:none}
.rib-item:hover .rib-icon{color:var(--gold)}
.rib-icon{font-size:1.2rem;color:var(--muted);transition:color .2s}
.rib-lbl{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;text-align:center}

/* ─── PHOTO STRIP ────────────────────────────────────── */
.hero-photo-strip{position:relative;height:500px;overflow:hidden}
.hero-photo-strip img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.7)}
.hero-photo-strip-ph{width:100%;height:100%;
  background:linear-gradient(135deg,#080800 0%,#1e1500 40%,#0a0a00 100%);
  display:flex;align-items:center;justify-content:center}
.hps-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.65) 100%)}
.hps-content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding:0 max(2rem,calc((100vw - var(--max)) / 2 + 2rem))}
.hps-text{max-width:580px}
.hps-label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.75rem;font-weight:600}
.hps-h{font-family:var(--fd);font-size:clamp(2.2rem,5vw,4rem);font-weight:700;
  line-height:1.04;letter-spacing:-.02em;margin-bottom:1rem}
.hps-h em{color:var(--gold);font-style:italic}
.hps-p{font-size:.92rem;color:var(--off);line-height:1.75;font-weight:300;
  max-width:460px;margin-bottom:2rem}
.hps-stats-row{display:flex;gap:2.5rem}
.hps-stat-val{font-family:var(--fd);font-size:2.2rem;font-weight:700;color:var(--gold-l);line-height:1}
.hps-stat-lbl{font-size:.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.25rem}

/* ─── ABOUT ──────────────────────────────────────────── */
.about{padding:7rem 0;background:var(--bg2)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-img-wrap{position:relative}
.about-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about-img-ph{width:100%;aspect-ratio:4/3;background:var(--bg3);border:1px solid rgba(200,168,75,.08);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem}
.about-img-ph span{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.about-badge{position:absolute;bottom:-1.25rem;right:-1.25rem;
  background:var(--gold);color:var(--bg);padding:1.1rem 1.4rem}
.about-badge-num{font-family:var(--fd);font-size:2.4rem;font-weight:700;line-height:1}
.about-badge-lbl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem}
.eyebrow::before{content:'';display:block;width:18px;height:1px;background:var(--gold)}
.sec-h2{font-family:var(--fd);font-size:clamp(1.85rem,3.5vw,3rem);font-weight:700;
  line-height:1.1;letter-spacing:-.015em;margin-bottom:.75rem}
.sec-p{font-size:.95rem;color:var(--off);line-height:1.78;font-weight:300;max-width:520px}
.check-list{display:flex;flex-direction:column;gap:.9rem;margin:1.5rem 0 2rem}
.check-li{display:flex;gap:.75rem;align-items:flex-start}
.check-mark{width:20px;height:20px;background:rgba(200,168,75,.08);
  border:1px solid rgba(200,168,75,.25);display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--gold);flex-shrink:0;margin-top:2px}
.check-text{font-size:.88rem;color:var(--off);line-height:1.6}
.check-text strong{color:var(--white);font-weight:600}

/* ─── HOW IT WORKS ───────────────────────────────────── */
.hiw{padding:7rem 0}
.hiw-header{text-align:center;max-width:560px;margin:0 auto 4rem}
.hiw-header .sec-p{margin:0 auto}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative}
.hiw-steps-4{grid-template-columns:repeat(4,1fr)}
.hiw-step{background:var(--bg3);border:1px solid rgba(255,255,255,.055);
  padding:2.5rem 1.75rem;text-align:center;position:relative;overflow:hidden;transition:all .3s}
.hiw-step:hover{border-color:var(--gold-line);transform:translateY(-4px)}
.hiw-step::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(200,168,75,.025) 0%,transparent 100%)}
.hiw-num{width:4rem;height:4rem;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-xd),var(--gold));
  color:#0a0a0a;font-family:var(--fd);font-size:1.35rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;position:relative;z-index:1;
  box-shadow:0 0 20px rgba(200,168,75,.3)}
.hiw-title{font-family:var(--fd);font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.hiw-desc{font-size:.83rem;color:var(--muted);line-height:1.7}

/* ─── INVESTMENT PLAN CARDS ──────────────────────────── */
.benefits{padding:7rem 0;background:var(--bg2)}
.benefits-header{text-align:center;margin-bottom:4rem}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.ben-grid-4{grid-template-columns:repeat(4,1fr)}
.ben-card{background:var(--bg3);border:1px solid rgba(255,255,255,.055);
  padding:2.25rem 1.75rem;text-align:center;position:relative;overflow:hidden;transition:all .3s}
.ben-card:hover{border-color:var(--gold-line);transform:translateY(-5px)}
.ben-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .4s}
.ben-card:hover::after{transform:scaleX(1)}
.ben-icon{width:68px;height:68px;margin:0 auto 1.4rem;
  background:rgba(200,168,75,.055);border:1px solid rgba(200,168,75,.16);
  display:flex;align-items:center;justify-content:center}
.ben-icon svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.4}
.ben-h{font-family:var(--fd);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.ben-p{font-size:.83rem;color:var(--muted);line-height:1.7}

/* Plan specific */
.plan-card{padding-top:3rem}
.plan-badge{position:absolute;top:0;left:0;right:0;padding:.45rem;
  background:rgba(200,168,75,.08);border-bottom:1px solid rgba(200,168,75,.12);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.plan-badge.popular{background:linear-gradient(135deg,var(--gold-xd),var(--gold-d));color:#fff}
.plan-badge.max{background:rgba(255,60,0,.12);color:#ff8060;border-bottom-color:rgba(255,60,0,.15)}
.plan-rate{font-family:var(--fd);font-size:2.4rem;font-weight:700;color:var(--gold-l);
  margin:.5rem 0;line-height:1}
.plan-rate span{font-size:.8rem;font-family:var(--fb);color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.plan-example{background:var(--bg4);border:1px solid rgba(200,168,75,.08);padding:.75rem;margin-top:1rem;text-align:left}
.pe-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);padding:.2rem 0}
.pe-row .gold{color:var(--gold);font-weight:600}
.featured-plan{border-color:rgba(200,168,75,.3)}

/* ─── CALCULATOR ─────────────────────────────────────── */
.calc-section{padding:7rem 0;background:var(--bg)}
.calc-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.calc-left .sec-p{margin-bottom:2rem}
.calc-slider-wrap{margin-bottom:1.5rem}
.calc-slider-lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.65rem}
.csl-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.csl-val{font-family:var(--fd);font-size:1.4rem;font-weight:700;color:var(--gold)}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;
  background:rgba(255,255,255,.07);outline:none;border-radius:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  background:var(--gold);cursor:pointer;border-radius:0;border:2px solid var(--bg)}
.calc-result{background:var(--bg3);border:1px solid rgba(200,168,75,.18);padding:2rem;
  position:relative;overflow:hidden}
.calc-result::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cr-title{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
  margin-bottom:1.25rem;font-weight:600}
.cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.cr-item{background:var(--bg4);border:1px solid rgba(255,255,255,.04);padding:.9rem 1rem}
.cr-item-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.3rem}
.cr-item-val{font-family:var(--fd);font-size:1.6rem;font-weight:700;color:var(--white);line-height:1}
.cr-item-val.gold{color:var(--gold)}
.cr-big{background:linear-gradient(135deg,rgba(200,168,75,.08),rgba(200,168,75,.02));
  border:1px solid rgba(200,168,75,.22);padding:1.25rem 1rem;text-align:center;margin-bottom:1rem}
.cr-big-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.35rem}
.cr-big-val{font-family:var(--fd);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;
  color:var(--gold-l);line-height:1}
.cr-note{font-size:.72rem;color:var(--muted);line-height:1.6;font-style:italic}

/* Plan tabs */
.plan-tab{background:var(--bg3);border:1px solid rgba(255,255,255,.07);color:var(--muted);
  padding:.45rem .85rem;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:var(--fb)}
.plan-tab:hover{border-color:rgba(200,168,75,.22);color:var(--off)}
.plan-tab.active{background:rgba(200,168,75,.1);border-color:rgba(200,168,75,.35);color:var(--gold)}

/* ─── REFERRAL / REWARDS ─────────────────────────────── */
.rewards{padding:7rem 0}
.rewards-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center}
.tier-list{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.tier-item{background:var(--bg3);border:1px solid rgba(255,255,255,.055);
  padding:1rem 1.3rem;display:flex;align-items:center;gap:1.1rem;
  transition:all .3s;cursor:default}
.tier-item:hover{border-color:rgba(200,168,75,.22);background:var(--bg4)}
.tier-item.lit{border-color:rgba(200,168,75,.18)}
.tier-bars{font-size:1.2rem;min-width:80px}
.tier-info{flex:1}
.tier-refs{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.12rem}
.tier-val{font-size:.9rem;font-weight:500;color:var(--white)}
.tier-status{flex-shrink:0}
.prog-card{background:var(--bg3);border:1px solid rgba(200,168,75,.18);
  padding:2rem;position:relative;overflow:hidden}
.prog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.pc-title{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
  margin-bottom:1.4rem;font-weight:600}
.pc-bars-vis{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.pc-bar-ico{font-size:1.7rem;filter:drop-shadow(0 0 5px rgba(200,168,75,.5));transition:transform .2s;cursor:default}
.pc-bar-ico:hover{transform:scale(1.1)}
.pc-bar-ico.dim{filter:none;opacity:.12}
.prog-item{margin-bottom:1rem}
.prog-lbl{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-bottom:.38rem}
.prog-lbl span{color:var(--gold-l)}
.prog-track{background:rgba(255,255,255,.05);height:5px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold-xd),var(--gold),var(--gold-l));
  --w:75%;animation:barGrow 1.8s .5s cubic-bezier(.25,1,.5,1) both;width:var(--w)}
.prog-fill.blue{background:linear-gradient(90deg,#1a3a7a,#5b9bd5);--w:80%}
.hint-box{margin-top:1.25rem;background:var(--bg4);border:1px solid rgba(200,168,75,.1);
  padding:.85rem 1rem;font-size:.79rem;color:var(--off);line-height:1.6}
.reflink-row{margin-top:1.25rem;background:var(--bg4);border:1px solid rgba(200,168,75,.14);
  padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.reflink-text{font-size:.68rem;color:var(--muted);font-family:var(--fm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{background:var(--gold);color:#0a0a0a;border:none;padding:.38rem .85rem;
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;font-family:var(--fb);transition:background .2s;flex-shrink:0}
.copy-btn:hover{background:var(--gold-l)}

/* ─── DASHBOARD PREVIEW ──────────────────────────────── */
.dashprev{padding:7rem 0;background:var(--bg2)}
.dashprev-header{text-align:center;margin-bottom:3.5rem}
.browser{background:var(--bg3);border:1px solid rgba(200,168,75,.16);overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(200,168,75,.07),0 0 70px rgba(200,168,75,.05);
  position:relative}
.browser::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.browser-bar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;
  background:var(--bg4);border-bottom:1px solid rgba(255,255,255,.04)}
.br-dots{display:flex;gap:.35rem}
.br-d{width:9px;height:9px;border-radius:50%}
.br-r{background:#ff5f57}.br-y{background:#febc2e}.br-g{background:#28c840}
.br-url{flex:1;background:rgba(255,255,255,.04);padding:.18rem .8rem;
  font-size:.62rem;color:var(--muted);border-radius:20px;text-align:center;max-width:300px;margin:0 auto}
.br-btns{display:flex;gap:.45rem}
.br-b{padding:.18rem .65rem;font-size:.58rem;border:1px solid rgba(200,168,75,.2);
  color:var(--gold);background:none;cursor:pointer;font-family:var(--fb);letter-spacing:.06em;text-transform:uppercase}
.br-b.fill{background:var(--gold);color:#0a0a0a}
.db-layout{display:grid;grid-template-columns:196px 1fr;min-height:400px}
.db-sidebar{background:var(--bg4);border-right:1px solid rgba(255,255,255,.04);padding:.7rem 0}
.db-logo{padding:.55rem 1.1rem;font-family:var(--fd);font-size:.9rem;font-weight:700;
  color:var(--gold);border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:.45rem}
.db-nav{padding:.38rem 1.1rem;font-size:.65rem;color:var(--muted);
  display:flex;align-items:center;gap:.45rem;cursor:pointer;transition:color .2s}
.db-nav.on{color:var(--gold);background:rgba(200,168,75,.06);border-left:2px solid var(--gold)}
.db-nav:hover{color:var(--white)}
.db-dot{width:4px;height:4px;background:currentColor;border-radius:50%;flex-shrink:0}
.db-user{padding:.8rem 1.1rem;border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:.45rem}
.db-av{width:26px;height:26px;background:rgba(200,168,75,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.56rem;color:var(--gold);font-weight:700}
.db-un{font-size:.58rem;font-weight:600}.db-us{font-size:.52rem;color:var(--green)}
.db-main{padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.db-greeting{font-size:.7rem;color:var(--muted)}.db-greeting strong{color:var(--white);font-weight:600}
.db-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.db-s{background:var(--bg4);border:1px solid rgba(255,255,255,.04);padding:.75rem .85rem}
.db-s.gold{border-color:rgba(200,168,75,.18)}
.db-sl{font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.2rem}
.db-sv{font-family:var(--fd);font-size:1.2rem;color:var(--white);font-weight:700;line-height:1}
.db-sv.g{color:var(--gold)}
.db-sc{font-size:.5rem;color:var(--green);margin-top:.12rem}
.db-bottom{display:grid;grid-template-columns:1.35fr 1fr;gap:.7rem}
.db-tracker{background:var(--bg4);border:1px solid rgba(200,168,75,.14);padding:.9rem 1rem;position:relative;overflow:hidden}
.db-tracker::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.db-tt{font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.65rem;font-weight:700}
.db-prow{display:flex;justify-content:space-between;font-size:.57rem;color:var(--muted);margin-bottom:.28rem}
.db-prow span{color:var(--gold-l)}
.db-pt{background:rgba(255,255,255,.05);height:3px;margin-bottom:.65rem;overflow:hidden}
.db-pf{height:100%;background:linear-gradient(90deg,var(--gold-xd),var(--gold))}
.db-bars{display:flex;gap:.4rem}
.db-bi{text-align:center}.db-bi span{font-size:1.2rem;display:block;filter:drop-shadow(0 0 3px rgba(200,168,75,.35))}
.db-bi.dim span{filter:none;opacity:.12}.db-bi small{font-size:.46rem;color:var(--muted);white-space:nowrap}
.db-team{background:var(--bg4);border:1px solid rgba(255,255,255,.04);padding:.9rem 1rem}
.db-team-t{font-size:.54rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem;font-weight:600}
.db-member{display:flex;align-items:center;gap:.45rem;padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.db-member:last-child{border-bottom:none}
.db-mav{width:18px;height:18px;background:rgba(200,168,75,.1);border-radius:50%;
  font-size:.48rem;color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700}
.db-mn{font-size:.58rem;color:var(--white);flex:1}
.db-mnew{font-size:.46rem;color:var(--green);background:var(--green-bg);padding:.08rem .28rem;border:1px solid var(--green-bd)}

/* ─── SOCIAL PROOF ───────────────────────────────────── */
.sp-section{padding:5rem 0;text-align:center;
  background:var(--bg3);border-top:1px solid rgba(200,168,75,.07);border-bottom:1px solid rgba(200,168,75,.07)}
.sp-big{font-family:var(--fd);font-size:clamp(4rem,10vw,8rem);font-weight:700;line-height:.9;
  background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% auto;animation:shimmer 3s linear infinite}
.sp-label{font-size:1.15rem;color:var(--off);margin-top:.5rem;font-weight:300}
.sp-label strong{color:var(--white);font-weight:600}
.sp-sub{font-size:.84rem;color:var(--muted);margin-top:.4rem}

/* ─── TESTIMONIALS ───────────────────────────────────── */
.testimonials{padding:7rem 0}
.testi-header{text-align:center;margin-bottom:3.5rem}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.testi-card{background:var(--bg3);border:1px solid rgba(255,255,255,.055);
  padding:1.85rem;position:relative;transition:border-color .3s}
.testi-card:hover{border-color:var(--gold-line)}
.testi-quote{font-family:var(--fd);font-size:2.8rem;color:var(--gold);line-height:.8;margin-bottom:.75rem;opacity:.35}
.testi-text{font-size:.86rem;line-height:1.75;color:var(--off);margin-bottom:1.4rem;font-weight:300}
.testi-bottom{display:flex;align-items:center;gap:.65rem}
.testi-av{width:34px;height:34px;border-radius:50%;background:var(--bg4);
  border:1px solid rgba(200,168,75,.18);display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:var(--gold);font-weight:700;flex-shrink:0}
.testi-name{font-size:.82rem;font-weight:600;color:var(--white)}
.testi-loc{font-size:.68rem;color:var(--muted);margin-top:.03rem}
.testi-stars{margin-left:auto;font-size:.7rem;color:var(--gold);letter-spacing:.1em}

/* ─── FAQ ────────────────────────────────────────────── */
.faq{padding:7rem 0;background:var(--bg2)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.faq-left .sec-p{margin-bottom:1.75rem}
.faq-support{background:var(--bg3);border:1px solid rgba(255,255,255,.055);padding:1.2rem;
  display:flex;align-items:flex-start;gap:.85rem;margin-top:1.5rem}
.faq-support-icon{font-size:1.4rem;margin-top:.1rem}
.faq-support-text{font-size:.8rem;color:var(--off);line-height:1.55}
.faq-support-text strong{color:var(--white);display:block;margin-bottom:.12rem}
.faq-list{display:flex;flex-direction:column;gap:.45rem}
.faq-item{background:var(--bg3);border:1px solid rgba(255,255,255,.055);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem 1.2rem;cursor:pointer;font-size:.88rem;font-weight:500;
  transition:color .2s;gap:.75rem}
.faq-q:hover{color:var(--gold)}
.faq-icon{width:18px;height:18px;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.75rem;transition:transform .3s,background .2s;color:var(--muted)}
.faq-item.open .faq-icon{transform:rotate(180deg);background:rgba(200,168,75,.08);color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.faq-item.open .faq-a{max-height:200px;padding:0 1.2rem 1.05rem}
.faq-a p{font-size:.83rem;color:var(--muted);line-height:1.7}

/* ─── CTA BAND ───────────────────────────────────────── */
.cta-band{padding:7rem 0;text-align:center;position:relative;overflow:hidden}
.cta-band-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 75% at 50% 50%,rgba(200,168,75,.065) 0%,transparent 70%)}
.cta-band::before,.cta-band::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cta-band::before{top:0}.cta-band::after{bottom:0}
.cta-h2{font-family:var(--fd);font-size:clamp(2.5rem,5vw,4.2rem);font-weight:700;
  line-height:1.05;letter-spacing:-.02em;margin-bottom:.5rem}
.cta-sub{font-size:.95rem;color:var(--off);line-height:1.75;font-weight:300;
  max-width:540px;margin:0 auto 2.25rem;text-align:center}
.cta-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}

/* ─── FOOTER ─────────────────────────────────────────── */
footer{background:var(--bg2);border-top:1px solid rgba(200,168,75,.09)}
.foot-main{padding:4rem 0 3rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.foot-logo-name{font-family:var(--fd);font-size:1.4rem;font-weight:700;color:var(--gold)}
.foot-tagline{font-size:.78rem;color:var(--muted);line-height:1.7;margin:1rem 0 1.4rem;max-width:220px}
.foot-socials{display:flex;gap:.5rem}
.f-soc{width:32px;height:32px;border:1px solid rgba(200,168,75,.14);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:.7rem;cursor:pointer;transition:all .2s}
.f-soc:hover{border-color:var(--gold);color:var(--gold);background:rgba(200,168,75,.05)}
.foot-col-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
  font-weight:700;margin-bottom:1rem}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.foot-links a{font-size:.79rem;color:var(--muted);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--white)}
.foot-bottom{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.04);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.foot-copy{font-size:.7rem;color:var(--dim)}
.foot-legal{display:flex;gap:1.5rem}
.foot-legal a{font-size:.7rem;color:var(--dim);transition:color .2s}
.foot-legal a:hover{color:var(--muted)}

/* ─── TOAST ──────────────────────────────────────────── */
#toast{position:fixed;bottom:2rem;right:2rem;z-index:9999;
  background:var(--bg3);border:1px solid rgba(200,168,75,.22);
  padding:.8rem 1.15rem;display:flex;align-items:center;gap:.55rem;
  font-size:.8rem;transform:translateY(70px);opacity:0;transition:all .35s;max-width:270px}
#toast.show{transform:translateY(0);opacity:1}
#toast-icon{color:var(--gold)}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:1100px){
  .ben-grid-4{grid-template-columns:repeat(2,1fr)}
  .hiw-steps-4{grid-template-columns:repeat(2,1fr)}
  .about-grid,.rewards-grid,.faq-grid,.calc-inner{grid-template-columns:1fr;gap:2.5rem}
  .testi-grid{grid-template-columns:1fr 1fr}
  .db-layout{grid-template-columns:1fr}.db-sidebar{display:none}
  .db-stats{grid-template-columns:repeat(2,1fr)}
  .about-badge{bottom:0;right:0}
  .foot-main{grid-template-columns:1fr 1fr}
  .nav-links{display:none}.nav-ham{display:flex}
}
@media(max-width:640px){
  .ben-grid,.ben-grid-4,.testi-grid,.foot-main{grid-template-columns:1fr}
  .hiw-steps,.hiw-steps-4{grid-template-columns:1fr;gap:1rem}
  .container{padding:0 1.25rem}
  .cta-actions{flex-direction:column;align-items:center}
  .db-stats{grid-template-columns:1fr 1fr}
  .db-bottom{grid-template-columns:1fr}
  .hps-stats-row{flex-direction:column;gap:1rem}
  .hero-imgrow{grid-template-columns:1fr;height:180px}
  .hero-imgrow .hero-imgcell:not(:first-child){display:none}
  .hero-math{grid-template-columns:1fr 1fr}
  .hm-arrow{display:none}
  .hm-step{padding:1.2rem .9rem}
  .hero-trust{gap:1.2rem}
  .hero-photo-strip{height:360px}
}

/* ══ SIDEBAR-NAV (dashboard.html) ══════════════════════════════ */
.sidebar-brand {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--gl);
  display: flex; align-items: center; gap: .65rem;
  flex-shrink: 0; background: var(--ggg);
}
.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: .5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--gl); }

.sidebar-nav > div[style*="letter-spacing"] {
  padding: .55rem 1.1rem .1rem;
  flex-shrink: 0;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--off);
  transition: color var(--t), background var(--t);
  border-left: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-nav a svg {
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-nav a:hover {
  color: var(--gold-l);
  background: rgba(212,169,66,.06);
  border-left-color: rgba(212,169,66,.3);
}
.sidebar-nav a.active, .sidebar-nav a.active:hover {
  background: rgba(212,169,66,.10);
  color: var(--gold);
  border-left-color: var(--gold);
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}