/* v28: Google Fonts moved to <link rel="stylesheet"> in index.html (parallel
   load with preconnect). @import here was render-blocking — all CSS parse
   and paint halted until Google's CDN responded, causing initial-load lag. */

/* =============================================
   DESIGN TOKENS — CLEAN LIGHT PALETTE
   ============================================= */
:root {
  --bg:        #ffffff;
  --bg-2:      #fafafa;
  --surface:   #f5f5f7;
  --surface-2: #ededf0;
  --surface-3: #e5e5ea;
  --border:   rgba(0,0,0,0.06);
  --border-2: rgba(0,0,0,0.10);
  --border-3: rgba(0,0,0,0.18);
  --primary:       #111111;
  --primary-hover:  #2a2a2a;
  --gold:          #d4af37;
  --gold-light:    #e8c84a;
  --gold-dark:     #a07e1a;
  --gold-glow:     rgba(212,175,55,0.18);
  --gold-subtle:   rgba(212,175,55,0.08);
  --gold-gradient: linear-gradient(135deg, #f0ce60 0%, #d4af37 50%, #b08c14 100%);
  --blue:    #4285f4;
  --green:   #34a853;
  --red:     #ea4335;
  --text:   #111111;
  --text-2: #555555;
  --text-3: #999999;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:30px; --r-full:9999px;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}


/* =============================================
   WATERMARK LOGO — always visible, blended
   ============================================= */
.watermark-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
}
.watermark-logo img {
  width: 600px;
  max-width: 70vw;
  filter: brightness(0) saturate(100%);
}


/* ===== CURSOR SPOTLIGHT ===== */
#cursor-spotlight {
  position:fixed; pointer-events:none; z-index:1;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.05) 0%, rgba(212,175,55,0.02) 40%, transparent 60%);
  transform:translate(-50%,-50%);
  transition:left 0.12s ease, top 0.12s ease;
  will-change:left,top;
}


/* ===== LAYOUT ===== */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 2.5rem}
.section{padding:12rem 0;position:relative;z-index:1}
.divider{height:1px;background:linear-gradient(to right,transparent,var(--border) 25%,var(--border) 75%,transparent)}


/* ===== TYPOGRAPHY ===== */
.gold-text{background:var(--gold-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-tag{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.72rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:1.5rem}
.section-tag::before{content:'';width:30px;height:1px;background:var(--gold);flex-shrink:0}
.section-title{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-0.04em;line-height:1.08;margin-bottom:1.6rem}
.section-subtitle{font-size:1.1rem;color:var(--text-2);max-width:580px;line-height:1.8}
.section-header{text-align:left;margin-bottom:6rem}
.section-header .section-subtitle{margin:0}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.36s}.d4{transition-delay:.52s}.d5{transition-delay:.68s}

/* =============================================
   BUTTONS
   ============================================= */
.btn{display:inline-flex;align-items:center;gap:0.6rem;padding:0.9rem 1.75rem;border-radius:var(--r-md);font-weight:600;font-size:0.95rem;font-family:var(--font);cursor:pointer;transition:all 0.35s var(--ease-out);position:relative;overflow:hidden;border:none;white-space:nowrap}
.btn-dark{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.12)}
.btn-dark:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.18)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--border-3);background:rgba(0,0,0,0.02)}
.btn-gold{background:var(--gold-gradient);color:#111;font-weight:700;box-shadow:0 4px 24px var(--gold-glow)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(212,175,55,0.4);filter:brightness(1.05)}
.btn-lg{padding:1.1rem 2.6rem;font-size:1.05rem;border-radius:var(--r-lg)}
.btn-pulse{animation:btnPulse 3s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 4px 24px var(--gold-glow)}50%{box-shadow:0 6px 50px rgba(212,175,55,0.45),0 0 80px rgba(212,175,55,0.1)}}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(0,0,0,0.1);transform:scale(0);animation:rippleSpread 0.6s ease-out forwards;pointer-events:none}
.btn-dark .ripple{background:rgba(255,255,255,0.2)}
@keyframes rippleSpread{to{transform:scale(2.5);opacity:0}}


/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 900;
  padding: 1rem 0;
  background: rgba(32, 33, 37, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.navbar.scrolled {
  padding: 0.7rem 0;
  /* Stay the same greyish glass — do NOT darken to black */
  background: rgba(32, 33, 37, 0.62);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.live-dot {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.live-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--gold); opacity:0;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  align-items: center;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 48px;
  transition: all 0.25s;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
}
.nav-logo-img:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.nav-item {
  position: relative;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  padding: 0.5rem 0.9rem;
  border-radius: 20px;
  transition: color 0.2s ease;
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s var(--ease-out);
}
.nav-item:hover {
  color: #fff;
}
.nav-item:hover::after { transform: scaleX(1); }
.nav-item.active {
  color: #fff;
}
.nav-item.active::after { transform: scaleX(1); }
.nav-item.btn-contact {
  background: var(--gold-gradient);
  color: #111;
  font-weight: 700;
  margin-left: 0.5rem;
  box-shadow: 0 4px 20px rgba(212,175,55,0.25);
}
.nav-item.btn-contact::after { display: none; }
.nav-item.btn-contact:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(212,175,55,0.4);
  color: #111;
}


/* =============================================
   HERO — Split layout: text LEFT, image RIGHT
   ============================================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:90px;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-img{width:100%;height:100%;object-fit:cover;opacity:0.035;filter:grayscale(80%)}
.hero-bg-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.95) 80%,var(--bg) 100%),radial-gradient(ellipse at 50% 50%,transparent 15%,var(--bg) 80%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(0,0,0,0.018) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.018) 1px,transparent 1px);background-size:90px 90px;mask-image:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0.45) 0%,transparent 55%);pointer-events:none}

.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5rem;
  width:100%;
}

/* LEFT side — text */
.hero-left{
  flex:1;
  text-align:left;
  max-width:560px;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.5rem 1.2rem;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--r-full);
  font-size:0.78rem;font-weight:500;
  color:var(--text-2);
  background:rgba(0,0,0,0.02);
  margin-bottom:3rem;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.25}}

/* Main headline — typewriter */
.hero h1{
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.1;
  margin-bottom:2rem;
  color:var(--text);
  min-height:1.3em;
}

.typewriter-text{
  font-family:var(--font);
  font-weight:inherit;
  font-size:inherit;
  letter-spacing:inherit;
}
.cursor-blink{
  display:inline-block;
  width:3px;height:1.05em;
  background:var(--gold);
  margin-left:4px;
  vertical-align:-2px;
  animation:cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

.hero-sub{
  font-size:1.1rem;
  color:var(--text-2);
  max-width:440px;
  line-height:1.85;
  margin-bottom:3rem;
}
/* Force each sentence of the subhead onto its own row, every viewport.
   "Backed by data." on row 1, "Numbers, not narratives." on row 2.
   Block-level spans survive inline whitespace collapsing where a `<br>`
   sometimes did not. */
.hero-sub-line{display:block}
.hero-cta{display:flex;gap:1.2rem;flex-wrap:wrap}

/* RIGHT side — image */
.hero-right{
  flex:0 0 auto;
}

/* === Rotating 3D risk-geometry surface video === */
.hero-surface-wrap{
  position:relative;
  width:min(520px, 44vw);              /* layout box unchanged — left column,
                                          typewriter, CTAs stay anchored */
  aspect-ratio: 5 / 4;
  overflow:visible;                    /* allow the scaled video to spill past */
  /* NO isolation — the video uses mix-blend-mode: multiply to blend with the
     page backdrop, which requires no isolating stacking context above it. */
  /* v27: subtle size bump (1.15 → 1.20) for slightly more atmospheric
     presence without grabbing attention. translateX nudged 60 → 70 so the
     extra growth bleeds outward, not inward toward the typewriter. */
  transform:translateX(70px) translateY(-34px) scale(1.20);
  transform-origin:left center;
  /* Scope paint to this subtree — when the video frame changes the browser
     doesn't have to invalidate / re-paint the surrounding hero region. */
  contain:paint;
}
.hero-surface-video{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  background:transparent;          /* no card backdrop */
  position:relative;z-index:1;
  /* Pure mesh-on-page: multiply blends the matplotlib white panes into the
     white page so they vanish entirely; only the viridis surface, the axis
     labels, and the faint pane edges remain — the rotating mesh feels like
     it's living on the page, not pasted onto a card. No border-radius, no
     shadow, no halo. The surface earns its presence by being a vol surface. */
  mix-blend-mode:multiply;
  /* Force a GPU compositor layer up front so the first video frame doesn't
     hitch when the blend-mode composite has to be set up on the fly.
     translateZ(0) is the classic "promote to layer" hint; will-change tells
     the browser the blend output will keep changing (it does — 30fps). */
  transform:translateZ(0);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.hero-surface-glow{
  display:none;
}
@media (prefers-reduced-motion: reduce){
  .hero-surface-video{animation:none;}
}

.hero-img-wrap{
  position:relative;
  width:min(480px, 40vw);
}
.hero-img-wrap img{
  width:100%;
  border-radius:var(--r-xl);
  position:relative;
  z-index:2;
  box-shadow:
    0 8px 25px rgba(0,0,0,0.08),
    0 25px 60px rgba(0,0,0,0.12),
    0 50px 120px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  transition:transform 0.15s ease-out, box-shadow 0.4s ease;
  will-change:transform;
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-img-wrap:hover img{
  animation-play-state:paused;
  box-shadow:
    0 12px 35px rgba(0,0,0,0.12),
    0 35px 80px rgba(0,0,0,0.16),
    0 60px 140px rgba(0,0,0,0.12),
    0 0 60px rgba(212,175,55,0.08),
    0 0 0 1px rgba(0,0,0,0.05);
}

/* Shimmer/shine sweep across image */
.hero-img-wrap::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  z-index:3;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 60%
  );
  animation:shimmerSweep 4s ease-in-out infinite;
  pointer-events:none;
  border-radius:var(--r-xl);
}
@keyframes shimmerSweep{
  0%{transform:translateX(-100%) rotate(15deg)}
  100%{transform:translateX(100%) rotate(15deg)}
}

/* Animated glow underneath */
.hero-img-glow{
  position:absolute;inset:-50px;
  background:radial-gradient(ellipse at center,
    rgba(212,175,55,0.14) 0%,
    rgba(212,175,55,0.06) 30%,
    rgba(66,133,244,0.04) 50%,
    transparent 70%);
  border-radius:50%;
  filter:blur(30px);
  animation:glowPulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

/* Spinning gradient ring */
.hero-img-ring{
  position:absolute;inset:-16px;
  border-radius:calc(var(--r-xl) + 12px);
  background:conic-gradient(from 0deg, transparent 0%, rgba(212,175,55,0.14) 25%, transparent 50%, rgba(66,133,244,0.08) 75%, transparent 100%);
  animation:ringRotate 8s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}
@keyframes ringRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Outer ring — subtle pulse */
.hero-img-ring-2{
  position:absolute;inset:-32px;
  border:1px solid rgba(0,0,0,0.035);
  border-radius:calc(var(--r-xl) + 24px);
  animation:ringFade 4s ease-in-out infinite;
}
@keyframes ringFade{0%,100%{opacity:0.8;transform:scale(1)}50%{opacity:0.15;transform:scale(1.02)}}

/* Scroll hint */
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.4rem;color:var(--text-3);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;animation:scrollHint 2.5s ease-in-out infinite;z-index:2}
@keyframes scrollHint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}


/* =============================================
   STATS
   ============================================= */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:4.5rem}
.stat-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.04);
  border-radius:24px;
  padding:3.5rem 1.5rem;
  text-align:center;
  position:relative;
  box-shadow:0 4px 24px rgba(0,0,0,0.02);
  transition:transform 0.4s var(--ease-out),box-shadow 0.4s,border-color 0.4s;
}
.stat-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 16px 40px rgba(0,0,0,0.05);
}
.stat-icon{
  width:46px;height:46px;
  margin:0 auto 2rem;
  border-radius:14px;
  background:#fdfaf2;
  border:1px solid rgba(212,175,55,0.15);
  display:flex;align-items:center;justify-content:center;
  color:#bfa044;
}
.stat-number{
  font-size:3.2rem;
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:1;
  margin-bottom:0.75rem;
  color:#111111;
}
.stat-label{
  font-size:0.85rem;
  color:#666666;
  font-weight:600;
}

.strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.strategy-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.75rem;transition:all 0.4s var(--ease-out)}
.strategy-card:hover{border-color:rgba(0,0,0,0.12);transform:translateY(-5px);box-shadow:0 16px 50px rgba(0,0,0,0.06)}
.strategy-icon{font-size:2rem;margin-bottom:1.5rem}
.strategy-card h4{font-size:1.05rem;font-weight:700;margin-bottom:0.85rem}
.strategy-card p{font-size:0.9rem;color:var(--text-2);line-height:1.75}


/* =============================================
   TRADES
   ============================================= */
.trades-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.trade-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all 0.5s var(--ease-out)}
.trade-card:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(0,0,0,0.14);box-shadow:0 24px 80px rgba(0,0,0,0.1)}
.trade-img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.trade-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease-out)}
.trade-card:hover .trade-img-wrap img{transform:scale(1.08)}
.upload-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.85rem;color:var(--text-3);font-size:0.8rem;background:var(--surface)}
.upload-placeholder svg{opacity:0.2;color:var(--gold-dark)}
.trade-body{padding:1.75rem 2rem}
.trade-pair{font-weight:700;font-size:1.05rem;margin-bottom:0.4rem}
.trade-setup{font-size:0.83rem;color:var(--text-2);margin-bottom:1.25rem}
.trade-tags{display:flex;gap:0.6rem;flex-wrap:wrap}
.tag{padding:0.28rem 0.85rem;border-radius:var(--r-full);font-size:0.75rem;font-weight:700}
.tag-rr{background:rgba(212,175,55,0.08);border:1px solid rgba(212,175,55,0.18);color:var(--gold-dark)}
.tag-win{background:rgba(52,168,83,0.08);border:1px solid rgba(52,168,83,0.2);color:#1a8a40}
.tag-loss{background:rgba(234,67,53,0.08);border:1px solid rgba(234,67,53,0.2);color:var(--red)}

/* Chart Placeholder — TradingView-style dark preview */
.chart-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;
  background:#0a0a0a;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:40px 40px;
  position:relative;
  overflow:hidden;
}
.chart-placeholder-candles{
  opacity:0.7;
  position:relative;
  z-index:2;
}
.chart-placeholder-line{
  position:absolute;
  left:0;right:0;
  top:50%;
  height:1px;
  border-top:1px dashed rgba(212,175,55,0.35);
  z-index:1;
}
.chart-placeholder-label{
  font-family:var(--mono);
  font-size:0.7rem;
  color:rgba(255,255,255,0.2);
  letter-spacing:0.08em;
  position:absolute;
  bottom:1rem;
  z-index:2;
}



/* =============================================
   COMMUNITY — Split layout
   ============================================= */
.community-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.community-left{
  position:sticky;
  top:140px;
  text-align:left;
}
.community-left .section-tag{margin-bottom:1.5rem}
.community-left .section-title{margin-bottom:1.2rem}
.community-left .section-subtitle{margin:0;max-width:380px;font-size:0.95rem;font-weight:300;line-height:1.6;color:var(--text-3)}

.community-right{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.testi-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:2.5rem;
  transition:border-color 0.3s,transform 0.4s var(--ease-out),box-shadow 0.4s;
  position:relative;
  overflow:hidden;
}
.testi-card::before{
  content:'\201C';
  position:absolute;
  top:-8px;right:20px;
  font-size:7rem;
  font-family:Georgia,serif;
  color:rgba(212,175,55,0.07);
  line-height:1;
  pointer-events:none;
}
.testi-card:hover{border-color:rgba(212,175,55,0.15);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
.testi-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.testi-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
  border:1px solid rgba(212,175,55,0.2);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.9rem;color:var(--gold-dark);flex-shrink:0;
  letter-spacing:0.02em;
}
.testi-avatar svg{display:block}
.testi-name{font-size:0.95rem;font-weight:700;margin-bottom:0.1rem}
.testi-role{font-size:0.78rem;color:var(--text-3)}
.testi-stars{color:var(--gold);font-size:0.82rem;letter-spacing:2px;margin-bottom:1rem}
.testi-body{font-size:0.93rem;color:var(--text-2);line-height:1.8;font-style:italic}
.testi-proof{margin-top:1.25rem;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.testi-proof img{display:block;width:100%;height:auto}

/* Reviews section background */
.reviews-section{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}


/* =============================================
   DISCORD CTA
   ============================================= */
.cta-section{padding:12rem 0;position:relative;z-index:1;text-align:center;overflow:hidden}
.cta-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(212,175,55,0.05) 0%,rgba(66,133,244,0.03) 40%,transparent 65%);animation:ctaPulse 5s ease-in-out infinite;pointer-events:none}
@keyframes ctaPulse{0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta-brand-logo{height:72px;margin-bottom:3rem;filter:drop-shadow(0 0 2px rgba(0,0,0,0.4)) drop-shadow(0 4px 20px rgba(0,0,0,0.15))}
.cta-discord-icon{width:76px;height:76px;margin:0 auto 3rem;background:rgba(88,101,242,0.06);border:1px solid rgba(88,101,242,0.15);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;color:#5865f2;animation:discordGlow 4s ease-in-out infinite}
@keyframes discordGlow{0%,100%{box-shadow:0 0 0 0 rgba(88,101,242,0)}50%{box-shadow:0 0 35px rgba(88,101,242,0.15)}}
.cta-section h2{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:900;letter-spacing:-0.05em;margin-bottom:1.6rem}
.cta-section p{color:var(--text-2);font-size:1.12rem;max-width:520px;margin:0 auto 4rem;line-height:1.85}


/* =============================================
   FOOTER
   ============================================= */
.footer{padding:3rem 0;border-top:1px solid var(--border);position:relative;z-index:1}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-left{display:flex;align-items:center;gap:2rem}
.footer-logo{height:28px;filter:drop-shadow(0 0 1px rgba(0,0,0,0.5)) drop-shadow(0 1px 3px rgba(0,0,0,0.2))}
.footer-copy{font-size:0.82rem;color:var(--text-3)}
.footer-socials{display:flex;gap:0.75rem}
.footer-link{width:40px;height:40px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all 0.2s}
.footer-link:hover{border-color:var(--primary);color:var(--primary);background:var(--surface);transform:translateY(-2px)}


/* =============================================
   PERFORMANCE — left-aligned header + scroll-snap gallery
   ============================================= */
.perf-section{position:relative;padding:5rem 0 1.5rem}
.perf-section > .container{position:relative;z-index:1}

.perf-head{display:block;}

/* 2-column grid: text + CTA left, Monte Carlo viz right.
   v8 (reverted from v7's viewport-bleed): back to the v6 layout that
   Barni liked — left column untouched, normal container behavior, no
   invented space. The "shift right" effect now happens INSIDE the
   canvas via a left-offset on the fan's start point (see main.js). */
.perf-grid{
  display:grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr);
  gap:6rem;
  align-items:start;            /* MC top-aligns with Performance tag, not centered */
}
.perf-grid-left{
  /* untouched — preserves original Performance head + CTA spacing */
}
.perf-grid-right{
  display:flex;flex-direction:column;align-items:stretch;
  min-width:0;
  /* v19: chart's right edge lands at the exact viewport edge (0px inset)
     on every laptop width. To overcome the container's 2.5rem right
     padding fully on narrow viewports, and the additional (V − 1200) / 2
     margin on wide viewports, we need:
       narrow (V ≤ 1200): -2.5rem
       wide   (V > 1200): -((V − 1200) / 2 + 2.5rem)
     min() picks the more-negative value. */
  margin-right: min(-2.5rem, calc((1200px - 100vw) / 2 - 2.5rem));
}
@media (max-width: 960px){
  .perf-grid{
    grid-template-columns: 1fr;
    gap:2.25rem;
  }
  .perf-grid-right{margin-right:0;}
}
.perf-head-left .section-tag,
.perf-head-left .section-title{margin-bottom:1rem}
.perf-head-left .section-title{margin-bottom:1.25rem}
.perf-tough{
  font-size:1.05rem;line-height:1.7;color:var(--text-2);max-width:520px;
  font-weight:500;margin:0;
}

/* Quiet CTA → opens the right-side .trades-drawer with all 27 trades. */
.perf-cta-wrap{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0.75rem;
  margin-top:4.5rem;
}
.perf-cta-link{
  /* Reset button defaults so it matches the prior link styling exactly. */
  appearance:none;background:transparent;border:0;border-radius:0;
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:baseline;gap:0.5rem;
  color:var(--text);text-decoration:none;
  font-size:1.15rem;font-weight:600;letter-spacing:0.01em;
  padding:0.35rem 0.15rem;
  border-bottom:1px solid rgba(212,175,55,0.55);
  transition:
    border-color .35s cubic-bezier(.16,1,.3,1),
    color .25s ease;
}
.perf-cta-link:hover,
.perf-cta-link:focus-visible{
  border-bottom-color:var(--gold-dark);
  outline:none;
}
.perf-cta-arrow{
  display:inline-block;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.perf-cta-link:hover .perf-cta-arrow,
.perf-cta-link:focus-visible .perf-cta-arrow{
  transform:translateX(6px);
}
@media (prefers-reduced-motion: reduce){
  .perf-cta-link,.perf-cta-arrow{transition:none;}
  .perf-cta-link:hover .perf-cta-arrow,
  .perf-cta-link:focus-visible .perf-cta-arrow{transform:none;}
}

/* =============================================
   LIVE BROKER STATEMENTS — compact 2x2 social
   proof block, sits in the LEFT column of
   .perf-grid below the trade-log CTA.
     .perf-broker--tradovate  → full image, NB
        watermark stays intact
     .perf-broker--tradesyncer → left-side crop
        (right "All Copy Traded Accounts" panel
        cut off; only the headline stats card
        with NB-style stars remains visible)
   ============================================= */
.perf-brokers{
  display:flex;flex-direction:column;
  gap:0.55rem;
  margin-top:3rem;
  margin-left:-6rem;            /* pushed further LEFT for more abstract bleed */
  max-width:280px;              /* tighter — each tile ~135px, slightly bigger than 4-grid */
}
/* Override the .reveal animation transforms — .reveal sets translateY(40px)
   initial and translateY(0) visible, which would cancel any transform we
   apply on .perf-brokers itself. We need MORE specificity than .reveal so
   the down-shift sticks BOTH before and after the reveal fires. */
.perf-brokers.reveal{
  transform:translateY(170px);          /* initial reveal state = final + 40px */
}
.perf-brokers.reveal.visible{
  transform:translateY(130px);          /* final position — 130px below flow */
}
.perf-brokers-tag{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--text-3);
  text-transform:uppercase;
  text-align:center;
}
.perf-brokers-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.55rem;
}
.perf-broker{
  display:block;
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg);
  /* The real Tradovate broker screenshots (IMG_2563 + IMG_2635) are
     phone-portrait shots. IMG_2563.webp is 498x1076; IMG_2635.jpg is
     1170x2532. Both share ~9:16 portrait. Tile aspect matches so the
     full statement fits with zero crop. */
  aspect-ratio: 9 / 16;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s ease;
}
.perf-broker:hover,
.perf-broker:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  border-color:rgba(212,175,55,0.35);
  outline:none;
}
.perf-broker img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Tradovate — full mobile screenshot, top-anchored. NB watermark stays. */
.perf-broker--tradovate img{
  object-fit:contain;
  background:#fff;
  object-position:center top;
}
/* TradeSyncer — left-aligned crop. Wide cards (the $18K one with the right
   panel) get their right side cut off; narrow cards display flush from the
   left. The headline stats column with stars stays visible on both. */
.perf-broker--tradesyncer img{
  object-fit:cover;
  object-position:left center;
}
@media (max-width:640px){
  .perf-brokers-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .perf-broker{transition:none;}
  .perf-broker:hover,.perf-broker:focus-visible{transform:none;}
}

/* =============================================
   MONTE CARLO EQUITY-FAN — Performance section
   Mirrors the style of members/algo-nb.html chart 1
   (50 simulated equity curves): minimal chrome, gold
   fan over light background, JBM mono axis labels.
   Animated path-by-path left-to-right on first reveal
   via initMonteCarloFan in main.js.
   ============================================= */
.mc-anim{
  position:relative;
  width:100%;
  aspect-ratio: 2.0 / 1;              /* v22 — taller still; start cluster has real estate */
  max-height: 600px;
  background: transparent;
}
.mc-anim::before{ display: none; }
.mc-canvas{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;
  min-height:1px;
  /* Soft global appear — pure opacity + subtle blur-to-sharp so it reads as
     "materializing into focus", not "fading in flat". All paths appear
     together (no left-to-right reveal). No per-frame paint work — just two
     compositor-only properties on an already-rendered canvas, so it can't
     lag. JS adds .is-loaded after the first paintFrame call. */
  opacity:0;
  filter:blur(6px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter  1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:opacity, filter;
}
.mc-canvas.is-loaded{ opacity:1; filter:blur(0); }
@media (prefers-reduced-motion: reduce){
  .mc-canvas{ transition:none; opacity:1; filter:none; }
}
@media (max-width: 960px){
  .mc-anim{aspect-ratio: 2.2 / 1;}
}

.perf-stats{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(1.5rem,3vw,3rem);flex-wrap:wrap;
  padding-bottom:0.5rem;
}
.perf-stat{display:flex;flex-direction:column;align-items:flex-start;gap:0.35rem;min-width:0}
.perf-stat-num{
  font-size:clamp(1.6rem,2.4vw,2rem);font-weight:800;letter-spacing:-0.02em;
  color:var(--text);line-height:1;white-space:nowrap;
}
.perf-stat-label{
  font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;
}

/* Scroll-snap gallery */
.gallery-scroll{
  position:relative;margin:0 -1.5rem;
}
.gallery-track{
  display:flex;gap:1.5rem;overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:2.5rem max(8%, 1.5rem);
  -ms-overflow-style:none;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{
  flex-shrink:0;scroll-snap-align:center;
  width:240px;aspect-ratio:355/768;
  position:relative;
  background:#0a0a0a;border-radius:34px;padding:8px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.16),
    0 4px 14px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  cursor:zoom-in;
  transition:transform 0.45s var(--ease-out), box-shadow 0.45s;
}
.gallery-slide::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:90px;height:18px;background:#0a0a0a;border-radius:0 0 12px 12px;z-index:3;
}
.gallery-slide:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.22),
    0 8px 24px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(212,175,55,0.25);
}
.gallery-slide img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:top;
  border-radius:26px;position:relative;z-index:1;
  image-rendering:-webkit-optimize-contrast;
}
.phone-reflection{
  position:absolute;inset:8px;border-radius:26px;z-index:2;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%);
  mix-blend-mode:overlay;opacity:0.5;
}

/* Arrows */
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border-2);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.08);
  transition:all 0.25s var(--ease-out);
}
.gallery-arrow:hover{
  background:var(--text);color:#fff;border-color:var(--text);
  transform:translateY(-50%) scale(1.08);
}
.gallery-arrow-prev{left:1rem}
.gallery-arrow-next{right:1rem}

.gallery-hint{
  display:flex;justify-content:center;align-items:center;gap:0.5rem;
  margin-top:1.5rem;font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;
}
.gallery-hint svg{opacity:0.5}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1100;
  background:rgba(5,5,5,0.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s var(--ease-out);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-inner{position:relative;display:flex;flex-direction:column;align-items:center}
#lightboxImg{
  max-height:86vh;max-width:90vw;border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.15);
  transform:scale(0.92);
  transition:transform 0.35s var(--ease-out), opacity 0.22s var(--ease-out);
}
.lightbox.open #lightboxImg{transform:scale(1)}
/* Slide-fade swap animation when navigating between trade images */
#lightboxImg.swap-out-left  { opacity:0; transform:translateX(-22px) scale(1); }
#lightboxImg.swap-out-right { opacity:0; transform:translateX( 22px) scale(1); }
#lightboxImg.swap-in-left   { opacity:0; transform:translateX( 22px) scale(1); }
#lightboxImg.swap-in-right  { opacity:0; transform:translateX(-22px) scale(1); }
.lightbox-close,.lightbox-nav{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.25s;z-index:2;
}
.lightbox-close:hover,.lightbox-nav:hover{
  background:var(--gold);color:#111;border-color:var(--gold);transform:scale(1.08);
}
.lightbox-close{top:2rem;right:2rem}
.lightbox-nav{top:50%;transform:translateY(-50%);width:54px;height:54px}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.08)}
.lightbox-prev{left:2.5rem}
.lightbox-next{right:2.5rem}
.lightbox-counter{
  margin-top:1.5rem;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);font-weight:600;
}


/* =============================================
   VIDEO SHOWCASE
   ============================================= */
.video-section{
  position:relative;
  overflow:hidden;
}
.video-container{
  position:relative;
  width:92vw;
  max-width:1400px;
  margin:0 auto;
  aspect-ratio:16/9;
  background:#050505;
  border-radius:20px;
  overflow:hidden;
  cursor:none;
  box-shadow:0 40px 100px rgba(0,0,0,0.2);
}
.video-placeholder{
  width:100%;
  height:100%;
  position:relative;
}
.video-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:#ffffff;
  color:#111111;
  font-weight:600;
  font-size:0.95rem;
  padding:0.8rem 1.6rem;
  border-radius:40px;
  pointer-events:none;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  transform:translate(-50%,-50%) scale(1);
  transition:opacity 0.4s ease;
  z-index:10;
  white-space:nowrap;
}


/* =============================================
   FAQ ACCORDION — card-based
   ============================================= */
.faq-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.faq-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.faq-item:hover{
  border-color:rgba(0,0,0,0.1);
}
.faq-item[open]{
  border-color:rgba(212,175,55,0.2);
  box-shadow:0 4px 20px rgba(0,0,0,0.03);
}
.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:1.35rem 1.75rem;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  transition:color 0.2s;
  gap:1.5rem;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{
  content:'';
  width:9px;height:9px;
  border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);
  transition:transform 0.3s var(--ease-out), border-color 0.3s;
  flex-shrink:0;
}
.faq-item[open] .faq-question::after{
  transform:rotate(-135deg);
  border-color:var(--gold);
}
.faq-item[open] .faq-question{
  color:var(--gold-dark);
}
.faq-question:hover{
  color:var(--gold-dark);
}
.faq-answer{
  overflow:hidden;
}
.faq-answer p{
  padding:0 1.75rem 1.5rem;
  font-size:0.9rem;
  color:var(--text-2);
  line-height:1.85;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:960px){
  .hero-content{flex-direction:column;text-align:center}
  .hero-left{text-align:center;max-width:none}
  .hero-cta{justify-content:center}
  .hero-img-wrap{width:min(480px,80vw)}
  .hero-surface-wrap{width:min(460px,82vw)}
  .community-split{grid-template-columns:1fr}
  .community-left{position:static}
  .perf-stats{justify-content:flex-start}
  .gallery-slide{width:210px}
}
@media(max-width:640px){
  .nav-links{display:none}
  .nav-status{display:none}
  .hero h1{font-size:2.4rem}
  .hero-img-wrap{width:90vw}
  .hero-surface-wrap{width:88vw}
  .testi-card{min-width:auto}
  .section{padding:7rem 0}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .gallery-slide{width:190px;border-radius:28px;padding:6px}
  .gallery-slide::before{width:70px;height:14px;top:6px}
  .gallery-slide img{border-radius:22px}
  .gallery-arrow{width:40px;height:40px}
  .gallery-arrow-prev{left:0.5rem}
  .gallery-arrow-next{right:0.5rem}
  .lightbox-close{top:1rem;right:1rem}
  .lightbox-prev{left:0.75rem}
  .lightbox-next{right:0.75rem}
  .lightbox-nav{width:44px;height:44px}
  .faq-question{font-size:0.9rem;padding:1.1rem 1.25rem}
  .faq-answer p{padding:0 1.25rem 1.25rem;font-size:0.85rem}
}


/* =============================================
   MEMBER LOGIN — subtle entry under hero CTAs
   ============================================= */
.member-login-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.6rem;
  font-size: 0.88rem;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.35s var(--ease-out);
}
.member-login-link .member-login-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
  font-weight: 600;
  position: relative;
}
.member-login-link .member-login-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.member-login-link .member-login-cta svg {
  transition: transform 0.35s var(--ease-out);
}
.member-login-link:hover .member-login-cta { color: var(--gold-dark); }
.member-login-link:hover .member-login-cta::after { transform: scaleX(1); }
.member-login-link:hover .member-login-cta svg { transform: translateX(4px); }


/* =============================================
   LOGIN PAGE
   ============================================= */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 1.5rem 5rem;
  position: relative;
  z-index: 1;
}
.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 3rem 2.4rem 2.6rem;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.04),
    0 32px 80px rgba(0,0,0,0.06);
  position: relative;
}
.login-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.55;
}
.login-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-bottom: 1.8rem;
  transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.login-back:hover { color: var(--text); gap: 0.6rem; }
.login-card h1 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.45rem;
}
.login-card .login-sub {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 2.1rem;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.login-field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.login-field input {
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  outline: none;
  transition:
    border-color 0.25s var(--ease-out),
    background 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}
.login-field input::placeholder { color: var(--text-3); }
.login-field input:focus {
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.08);
}
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.4rem 0 1.5rem;
  font-size: 0.82rem;
}
.login-row .remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.login-row .remember input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.login-row .remember input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.login-row .remember input:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.login-row .forgot {
  color: var(--text-2);
  font-weight: 500;
  transition: color 0.2s;
}
.login-row .forgot:hover { color: var(--gold-dark); }
.login-card .btn-gold {
  width: 100%;
  justify-content: center;
}
.login-foot {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-3);
}
.login-foot a {
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.login-foot a:hover { color: var(--gold-dark); }


/* =============================================
   NB LOADER — short brand moment on login enter
   ============================================= */
.nb-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
}
.nb-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.06) 0%, transparent 55%),
    linear-gradient(to bottom, var(--bg), var(--surface));
  pointer-events: none;
}
.nb-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nb-loader-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
}
.nb-loader-mark img {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)) drop-shadow(0 8px 30px rgba(212,175,55,0.18));
  animation: nbLoaderPulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.nb-loader-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(212,175,55,0.18);
  border-top-color: var(--gold);
  animation: nbLoaderSpin 1.05s linear infinite;
}
.nb-loader-mark::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.08);
  animation: nbLoaderRing 2.2s ease-in-out infinite;
}
.nb-loader-label {
  position: absolute;
  bottom: -54px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  animation: nbLoaderLabel 1.6s ease-in-out infinite;
}
@keyframes nbLoaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes nbLoaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes nbLoaderRing {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.06); }
}
@keyframes nbLoaderLabel {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}


/* =============================================
   LOGIN — responsive
   ============================================= */
@media(max-width:640px){
  .login-card { padding: 2.4rem 1.6rem 2rem; border-radius: var(--r-lg); }
  .login-card h1 { font-size: 1.6rem; }
  .nb-loader-mark { width: 130px; height: 130px; }
  .nb-loader-mark img { width: 80px; }
  .nb-loader-label { bottom: -44px; font-size: 0.58rem; letter-spacing: 0.3em; }
}

/* =============================================
   MOBILE NAV — hamburger + full-screen overlay
   ============================================= */
.nav-hamburger{
  display:none;
  width:42px;height:42px;
  background:transparent;border:none;cursor:pointer;
  padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .25s;
}
body.menu-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-hamburger span:nth-child(2){opacity:0}
body.menu-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:1000;
  background:rgba(15,15,18,0.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease-out);
  display:flex;flex-direction:column;
  padding:1.25rem 1.5rem 2rem;
  color:var(--text);
}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}

.mobile-menu-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.25rem 0 0;
}
.mobile-menu-top .nav-logo-img{height:42px}
.mobile-menu-close{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s,transform .25s;
}
.mobile-menu-close:active{transform:scale(0.92)}

.mobile-menu-links{
  display:flex;flex-direction:column;
  margin-top:3rem;gap:0.25rem;flex:1 1 auto;
}
.mobile-menu-links a{
  display:block;
  font-size:1.75rem;font-weight:700;letter-spacing:-0.02em;
  color:var(--text);
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  -webkit-tap-highlight-color:transparent;
  transition:color .25s,transform .25s;
}
.mobile-menu-links a:active{color:var(--gold-dark);transform:translateX(4px)}

.mobile-menu-cta{
  display:flex;flex-direction:column;align-items:stretch;
  gap:1rem;padding-top:2rem;
}
.mobile-menu-cta .btn{justify-content:center;width:100%}
.mobile-menu-login{
  display:block;text-align:center;
  font-size:0.9rem;color:var(--text-3);
  padding:0.6rem 0;
}

/* =============================================
   RESPONSIVE LAYOUT — phone refinements
   ============================================= */
@media(max-width:640px){
  .nav-hamburger{display:flex}
  .container{padding:0 1.25rem}
  .hero-right{display:none}
  .hero-left{max-width:none;width:100%}
  .hero h1{font-size:clamp(1.85rem, 7.5vw, 2.4rem)}
  .hero-sub{font-size:1rem;line-height:1.7;margin-bottom:2rem;max-width:none}
  .hero-cta{gap:0.7rem;width:100%}
  .hero-cta .btn{flex:1 1 auto;min-width:0;justify-content:center}
  .hero-cta .btn-lg{padding:0.95rem 1.2rem;font-size:0.95rem}
  .section{padding:5.5rem 0}
  .section-title{font-size:clamp(1.85rem, 7vw, 2.6rem)}
  .testi-card{padding:1.75rem}
  .testi-body{font-size:0.9rem;line-height:1.7}
  .testi-card::before{font-size:5.5rem;top:-6px;right:16px}
  .gallery-track{padding:2rem max(4%, 0.75rem)}
  .gallery-slide{width:175px}
  .footer-inner{gap:1rem}
  .community-split{gap:2.5rem}
}
@media(max-width:420px){
  .container{padding:0 1rem}
  .hero h1{font-size:clamp(1.6rem, 7vw, 2rem)}
  .hero-img-wrap{width:80vw}
  .hero-badge{font-size:0.72rem;padding:0.4rem 1rem}
  .gallery-slide{width:160px}
  .testi-card{padding:1.4rem}
  .mobile-menu-links a{font-size:1.55rem;padding:0.9rem 0}
}


/* The mobile-only top-right Contact link — hidden by default on desktop.
   The full styling rule lives inside the @media block below. */
.hero-mobile-contact{display:none}


/* =============================================
   MOBILE PASS — final responsive polish (pre-deploy)
   Layered ON TOP of the earlier responsive blocks above
   so these rules win via cascade order.

   Mobile spec (v2 — user-directed):
   - Hero: NO 3D surface, NO badge, NO hamburger. Just
     left-aligned typewriter, smaller, then CTAs side
     by side, then the member login link below.
   - Performance: brokers + Monte Carlo SIDE-BY-SIDE
     in two columns under the head + CTA.
   - Everything else stays as is.
   ============================================= */
@media (max-width:640px){
  /* === Nav: drop the entire navbar on mobile ===
       Without nav links and without a hamburger, the navbar is
       just a strip of background holding one logo — pure chrome.
       Premium minimal sites (Linear, Vercel, Stripe mobile) hide
       the bar entirely on phones; the brand mark moves inline
       into the hero as a subtle accent (see .hero-left::after
       below) instead of sitting in a fixed top bar. */
  .navbar{display:none}

  /* === Hero — left-aligned, minimal. Override the 960px
       block's center-align. === */
  /* Kill the 100vh min-height + the 90px navbar clearance.
     Hero now sizes to content with clean top/bottom breathing.
     Bottom padding bumped to 6rem so the white space between the
     "Already a member? Log in" link and the Performance section
     reads as deliberate breathing, not awkward emptiness. */
  .hero{
    /* ~1cm gap between NB logo and typewriter, per user's exact request.
       !important here because the desktop rule's `min-height:100vh +
       display:flex + align-items:center` was somehow centering content
       against the padding on iOS and silently eating these changes.
       Bottom padding pulled in (10rem → 4rem) so the boundary line
       between hero and Performance sits higher up — less dead air. */
    min-height:auto !important;
    display:block !important;            /* kill the flex centering that was
                                            ignoring my padding-top */
    padding:8rem 0 4rem !important;
    position:relative;                   /* anchor for the page-corner NB logo */
  }
  .hero-scroll{display:none}            /* "Scroll" hint not useful on phones */
  .hero-content{text-align:left; align-items:stretch}
  .hero-left{text-align:left; max-width:none; width:100%}

  /* NB logo at the TOP-LEFT CORNER OF THE PAGE (the hero is now the top
     of the page on mobile since the navbar is hidden). Positioned absolute
     inside .hero so it scrolls AWAY with the page — NOT sticky, NOT fixed.
     Once the user scrolls past the hero, the logo is gone and the rest
     of the page is clean. */
  .hero::before{
    content:'';
    position:absolute;
    top:2.5rem;                          /* pushed a touch lower per user feedback */
    left:1.25rem;
    width:48px; height:48px;
    background:url('assets/img2.png') center/contain no-repeat;
    opacity:0.55;
    filter:brightness(0);                /* flat black mark */
    pointer-events:none;
    z-index:3;
  }

  /* Top-right Contact link — small, premium, mailto: direct to the user's
     email. Paired visually with the NB logo on the opposite corner: same
     vertical position, same subtle weight. On tap it opens the device's
     mail app. */
  .hero-mobile-contact{
    display:inline-flex; align-items:center;
    position:absolute;
    top:2.5rem;                          /* match NB logo vertical position */
    right:1.25rem;
    z-index:4;
    font-size:0.78rem;
    font-weight:500;
    letter-spacing:0.03em;
    color:var(--text-2);
    text-decoration:none;
    padding:0.5rem 0.85rem;
    border:1px solid rgba(0,0,0,0.10);
    border-radius:999px;
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
  }
  .hero-mobile-contact:hover,
  .hero-mobile-contact:focus-visible{
    color:var(--gold-dark);
    border-color:rgba(212,175,55,0.45);
    background:rgba(255,255,255,0.85);
    outline:none;
  }

  /* Performance section — tight top padding to bring "The results speak."
     up closer to the login link. The boundary "line" between hero and
     Performance now sits higher in the scroll. */
  .perf-section{padding-top:4rem}

  .hero-badge{display:none}             /* "Futures Trading Community" off */
  .hero-right{display:none}             /* no surface, no poster, no video */
  .hero-surface-wrap{display:none}
  .hero-surface-video{display:none}
  .hero-surface-glow{display:none}
  /* Smaller typewriter so the longest rotating phrase
     ("Make your first 10k a month.") fits on one line. */
  /* Tighter h1→subhead gap on mobile (default h1 has margin-bottom:2rem;
     halve it so "Backed by data." sits closer to the typewriter). */
  .hero h1{font-size:clamp(1.4rem, 6.5vw, 1.95rem); line-height:1.18; margin-bottom:1rem}
  .hero-sub{margin-top:0; margin-bottom:2rem; line-height:1.55}
  .hero-cta{justify-content:flex-start; gap:0.7rem; width:100%; flex-wrap:nowrap}
  .hero-cta .btn{flex:1 1 0; min-width:0; justify-content:center}
  .hero-cta .btn-lg{padding:0.85rem 0.9rem; font-size:0.88rem}
  .member-login-link{justify-content:flex-start; margin-top:2rem}

  /* === Performance — single column.
       Order: head → CTA → "This could be you." → 2 brokers SIDE BY SIDE
       → Monte Carlo BELOW (placed lower for breathing room).
       Brokers stay tap-to-enlarge via the broker lightbox. === */
  .perf-grid{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
  }
  .perf-grid-left{display:flex; flex-direction:column; gap:1rem}
  .perf-grid-right{margin-right:0; margin-top:1.5rem}
  .perf-brokers{margin-left:0; margin-top:0; max-width:none}
  .perf-brokers.reveal{transform:translateY(40px)}
  .perf-brokers.reveal.visible{transform:translateY(0)}
  /* Two broker statements SIDE BY SIDE (horizontal row of 2).
     Bleed the grid out to the viewport edges so each tile gets the most
     pixel real-estate the screen can offer. */
  .perf-brokers-grid{
    grid-template-columns:1fr 1fr;
    gap:0.6rem;
    justify-items:stretch;
    margin-left:-1.25rem;
    margin-right:-1.25rem;
  }
  /* ROOT-CAUSE FIX for broker image quality:
     The actual broker screenshots are 498x1076 (aspect ratio ~0.463).
     The desktop tile uses aspect-ratio: 9/16 (= 0.5625) which is WIDER
     than the image. With `object-fit: cover` the image was being cropped
     at the bottom; with `object-fit: contain` it would have left ugly
     white bars on the sides. Either way looked "ruined".
     Fix: match the tile aspect ratio to the actual image aspect on
     mobile, then use `object-fit: contain` for safety. Result: image
     fills the tile precisely, zero crop, zero white space, full
     resolution preserved. */
  /* New 2026-04 broker statements are 2303 x 1572 (landscape). Tile aspect
     matches the image so the entire statement fits with zero crop and zero
     white space. Inherits from the desktop rule above. */
  .perf-broker img,
  .perf-broker--tradovate img{
    object-fit:contain;
    object-position:center;
    background:#fff;
  }
  /* MC sits below the brokers; restore a fan-like proportion. */
  .mc-anim{aspect-ratio:1.55 / 1; min-height:0; flex:initial; width:100%}
  .perf-brokers-tag{font-size:0.78rem; opacity:0.7}

  /* === Smooth scroll-in animations — brokers AND Monte Carlo ===
     The brokers already use the staggered perfBrokerIn keyframe (rise +
     fade per tile). The MC has a fade+blur opacity transition tied to
     .is-loaded via IntersectionObserver. On mobile we add a subtle
     upward rise to the MC entry too, so its arrival matches the brokers'
     vibe instead of just popping into view. Both animations are triggered
     when the user scrolls the section into view — not on page load. */
  .mc-canvas{
    transform:translateY(18px);
    transition:
      opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
      filter  1.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mc-canvas.is-loaded{transform:translateY(0)}

  /* === Reviews — show only the first 3 cards on phone.
       The 6-card flow on desktop becomes overwhelming vertical scroll
       on mobile; trim to the strongest 3 for a tighter section. === */
  .community-right .testi-card:nth-child(n+4){display:none}
}


/* =============================================
   MOBILE PASS — typography tightening (≤480px)
   ============================================= */
@media (max-width:480px){
  .section{padding:5rem 0}
  /* NOTE: do NOT set .hero padding here — let the 640px block above win
     so the typewriter gets the full breathing room the user requested. */
  .hero h1{font-size:clamp(1.25rem, 6.2vw, 1.7rem); line-height:1.2}
  .hero-cta .btn-lg{padding:0.8rem 0.75rem; font-size:0.84rem}
  .faq-question{padding:0.95rem 1.1rem;font-size:0.86rem}
  .faq-answer p{padding:0 1.1rem 1.15rem;font-size:0.82rem}
  .trades-drawer-grid{gap:0.55rem}
  .testi-card{padding:1.35rem}
  .testi-body{font-size:0.86rem}
  .perf-brokers-tag{font-size:0.72rem}
}

/* =============================================
   TRADES DRAWER — right-side slide-in panel
   Opens from the "Open trade log" button. Plain
   image grid inside, NO text — just pictures.
   z-index sits ABOVE the .navbar (z-index 900)
   so the nav doesn't overlap the top of the panel.
   Tile click → .lightbox (z-index 1100) cycles
   through. Esc closes.
   ============================================= */
.trades-drawer{
  position:fixed;inset:0;z-index:1000;
  pointer-events:none;
}
.trades-drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(8,8,12,0);
  transition:background .35s var(--ease-out);
}
.trades-drawer.open{pointer-events:auto;}
.trades-drawer.open .trades-drawer-backdrop{
  background:rgba(8,8,12,0.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.trades-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(760px, 55vw);
  /* Cleaner sheet: warm off-white paper tone instead of pure white. */
  background:
    linear-gradient(180deg,
      rgba(212,175,55,0.012) 0%,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 82%,
      rgba(0,0,0,0.012) 100%),
    #fdfcf8;
  border-left:1px solid var(--border);
  box-shadow:
    -1px 0 0 rgba(255,255,255,0.6) inset,                  /* hint of inner highlight */
    -36px 0 80px rgba(0,0,0,0.20),
    -8px 0 24px rgba(0,0,0,0.06);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.22,1,.36,1);     /* gentler overshoot ease */
  will-change:transform;
}
.trades-drawer.open .trades-drawer-panel{transform:translateX(0);}

/* Thin gold hairline along the top edge — letterhead feel. */
.trades-drawer-panel::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(212,175,55,0.55) 22%,
    rgba(212,175,55,0.55) 78%,
    transparent 100%);
  pointer-events:none;
  z-index:6;
}

/* Floating close button — top-right corner, sits above the grid
   on a translucent disc so it stays visible against any image. */
.trades-drawer-close{
  appearance:none;
  position:absolute;top:1.1rem;right:1.1rem;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-2);
  color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.10);
  transition:
    border-color .25s ease,
    color .25s ease,
    background .25s ease,
    transform .25s var(--ease-out);
}
.trades-drawer-close:hover,
.trades-drawer-close:focus-visible{
  border-color:rgba(212,175,55,0.55);
  background:#fff;
  outline:none;
  transform:rotate(90deg);
}

.trades-drawer-body{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4.75rem 2rem 3rem;        /* slightly more breathing room than v1 */
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
}
.trades-drawer-body::-webkit-scrollbar{width:8px;}
.trades-drawer-body::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px;}
.trades-drawer-body::-webkit-scrollbar-track{background:transparent;}

/* --- Plain image grid (no phone case) ----------------------- */
.trades-drawer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:1.1rem;
}
.trade-tile{
  appearance:none;background:#0a0a0e;border:0;padding:0;
  position:relative;display:block;
  width:100%;aspect-ratio:9 / 19.5;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  /* Softer, paper-floating shadow — tile reads as a photo pinned to the sheet. */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 22px rgba(0,0,0,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.06);
  transition:
    transform .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
  /* Start hidden so the staggered fade-in only fires when the drawer opens. */
  opacity:0;
  transform:translateY(12px);
}

/* Staggered reveal — tiles cascade in left-to-right, top-to-bottom when
   the drawer's `.open` class is set. 30ms per tile, capped at 16 stagger
   slots so the cascade finishes in under half a second even with 26 tiles. */
@keyframes tradeTileIn{
  to { opacity: 1; transform: translateY(0); }
}
.trades-drawer.open .trade-tile{
  animation: tradeTileIn .5s var(--ease-out) forwards;
  animation-delay: .15s;                   /* default for tiles beyond #16 */
}
.trades-drawer.open .trade-tile:nth-child(1)  { animation-delay: .15s; }
.trades-drawer.open .trade-tile:nth-child(2)  { animation-delay: .18s; }
.trades-drawer.open .trade-tile:nth-child(3)  { animation-delay: .21s; }
.trades-drawer.open .trade-tile:nth-child(4)  { animation-delay: .24s; }
.trades-drawer.open .trade-tile:nth-child(5)  { animation-delay: .27s; }
.trades-drawer.open .trade-tile:nth-child(6)  { animation-delay: .30s; }
.trades-drawer.open .trade-tile:nth-child(7)  { animation-delay: .33s; }
.trades-drawer.open .trade-tile:nth-child(8)  { animation-delay: .36s; }
.trades-drawer.open .trade-tile:nth-child(9)  { animation-delay: .39s; }
.trades-drawer.open .trade-tile:nth-child(10) { animation-delay: .42s; }
.trades-drawer.open .trade-tile:nth-child(11) { animation-delay: .45s; }
.trades-drawer.open .trade-tile:nth-child(12) { animation-delay: .48s; }
.trades-drawer.open .trade-tile:nth-child(13) { animation-delay: .51s; }
.trades-drawer.open .trade-tile:nth-child(14) { animation-delay: .54s; }
.trades-drawer.open .trade-tile:nth-child(15) { animation-delay: .57s; }
.trades-drawer.open .trade-tile:nth-child(16) { animation-delay: .60s; }
.trades-drawer.open .trade-tile:nth-child(17) { animation-delay: .63s; }
.trades-drawer.open .trade-tile:nth-child(18) { animation-delay: .66s; }
.trades-drawer.open .trade-tile:nth-child(19) { animation-delay: .69s; }
.trades-drawer.open .trade-tile:nth-child(20) { animation-delay: .72s; }
.trades-drawer.open .trade-tile:nth-child(21) { animation-delay: .75s; }
.trades-drawer.open .trade-tile:nth-child(22) { animation-delay: .78s; }
.trades-drawer.open .trade-tile:nth-child(23) { animation-delay: .81s; }
.trades-drawer.open .trade-tile:nth-child(24) { animation-delay: .84s; }
.trades-drawer.open .trade-tile:nth-child(25) { animation-delay: .87s; }
.trades-drawer.open .trade-tile:nth-child(26) { animation-delay: .90s; }
.trades-drawer.open .trade-tile:nth-child(27) { animation-delay: .93s; }
.trades-drawer.open .trade-tile:nth-child(28) { animation-delay: .96s; }
.trades-drawer.open .trade-tile:nth-child(29) { animation-delay: .99s; }
.trades-drawer.open .trade-tile:nth-child(30) { animation-delay: 1.02s; }
.trades-drawer.open .trade-tile:nth-child(31) { animation-delay: 1.05s; }
.trades-drawer.open .trade-tile:nth-child(32) { animation-delay: 1.08s; }
.trades-drawer.open .trade-tile:nth-child(33) { animation-delay: 1.11s; }
.trades-drawer.open .trade-tile:nth-child(34) { animation-delay: 1.14s; }
@media (prefers-reduced-motion: reduce){
  .trade-tile{opacity:1;transform:none;}
  .trades-drawer.open .trade-tile{animation:none;}
}
.trade-tile:hover,
.trade-tile:focus-visible{
  transform:translateY(-4px);
  outline:none;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.10),
    0 18px 40px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(212,175,55,0.55),
    0 0 0 1px rgba(212,175,55,0.20);
  z-index:2;
}
.trade-tile img{
  width:100%;height:100%;
  object-fit:contain;            /* never crop — these are proof */
  display:block;
  background:#0a0a0e;
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 960px){
  .trades-drawer-panel{width:min(620px, 72vw);}
  .trades-drawer-body{padding:4rem 1.25rem 2rem;}
}
@media (max-width: 640px){
  .trades-drawer-panel{width:100vw; border-left:0;}
  .trades-drawer-grid{grid-template-columns:repeat(2, 1fr); gap:0.8rem;}
}

@media (prefers-reduced-motion: reduce){
  .trades-drawer-panel,
  .trades-drawer-backdrop,
  .trade-tile,
  .trades-drawer-close{transition:none !important;}
  .trade-tile:hover,
  .trade-tile:focus-visible{transform:none;}
  .trades-drawer-close:hover,
  .trades-drawer-close:focus-visible{transform:none;}
}

/* =============================================
   LOGIN — phone-only "desktop only" notice
   ============================================= */
.login-mobile-notice{display:none}
@media(max-width:640px){
  .login-card{display:none}
  .login-mobile-notice{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    min-height:70vh;
    padding:2rem 1.5rem;
    gap:1.25rem;
    max-width:380px;margin:0 auto;
  }
  .login-mobile-notice-icon{
    width:72px;height:72px;border-radius:50%;
    background:linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
    border:1px solid rgba(212,175,55,0.22);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-dark);
    margin-bottom:0.5rem;
  }
  .login-mobile-notice h1{
    font-size:1.75rem;font-weight:800;letter-spacing:-0.02em;margin:0;
  }
  .login-mobile-notice p{
    color:var(--text-2);line-height:1.7;font-size:1rem;margin:0;
  }
  .login-mobile-notice .btn{margin-top:0.5rem}
}

/* =============================================
   BROKER LIGHTBOX — in-page modal with prev/next
   nav, slide-fade transition between images,
   close via X / click-outside / Esc.
   ============================================= */
.broker-lightbox{
  position:fixed;inset:0;
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease-out), visibility .25s var(--ease-out);
  padding:3rem;
}
.broker-lightbox.open{opacity:1;visibility:visible;}
.broker-lightbox-frame{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:0.75rem;
  max-width:92vw;max-height:88vh;
}
.broker-lightbox img{
  max-width:92vw;max-height:82vh;
  width:auto;height:auto;
  display:block;
  border-radius:var(--r-md);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  background:#fff;
  transition:opacity .22s var(--ease-out), transform .35s var(--ease-out);
}
/* Slide-out / slide-in animation classes toggled by JS during navigation */
.broker-lightbox img.swap-out-left  { opacity:0; transform:translateX(-24px); }
.broker-lightbox img.swap-out-right { opacity:0; transform:translateX( 24px); }
.broker-lightbox img.swap-in-left   { opacity:0; transform:translateX( 24px); }
.broker-lightbox img.swap-in-right  { opacity:0; transform:translateX(-24px); }

.broker-lightbox-counter{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:rgba(255,255,255,0.8);
  text-transform:uppercase;
}
.broker-lightbox-close,
.broker-lightbox-nav{
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;border:0;
  background:rgba(255,255,255,0.92);
  color:#111;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease-out), background .2s ease;
  z-index:2;
}
.broker-lightbox-close{ top:1.25rem;right:1.25rem; }
.broker-lightbox-prev{ top:50%; left:1.25rem; transform:translateY(-50%); }
.broker-lightbox-next{ top:50%; right:1.25rem; transform:translateY(-50%); }
.broker-lightbox-close:hover,
.broker-lightbox-close:focus-visible{ transform:scale(1.08); background:#fff; outline:none; }
.broker-lightbox-prev:hover,
.broker-lightbox-prev:focus-visible{ transform:translateY(-50%) scale(1.08); background:#fff; outline:none; }
.broker-lightbox-next:hover,
.broker-lightbox-next:focus-visible{ transform:translateY(-50%) scale(1.08); background:#fff; outline:none; }
@media (max-width:640px){
  .broker-lightbox-prev{ left:0.5rem; }
  .broker-lightbox-next{ right:0.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .broker-lightbox,.broker-lightbox-close,.broker-lightbox-nav,.broker-lightbox img{transition:none;}
}

/* Stagger reveal for the 4 broker tiles — each fades in with a small delay
   so the row builds left → right when the section enters viewport. */
@keyframes perfBrokerIn{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.perf-brokers.reveal.visible .perf-broker{
  opacity:0;
  animation: perfBrokerIn .55s var(--ease-out) forwards;
}
.perf-brokers.reveal.visible .perf-broker:nth-child(1){ animation-delay: .10s; }
.perf-brokers.reveal.visible .perf-broker:nth-child(2){ animation-delay: .20s; }
.perf-brokers.reveal.visible .perf-broker:nth-child(3){ animation-delay: .30s; }
.perf-brokers.reveal.visible .perf-broker:nth-child(4){ animation-delay: .40s; }
@media (prefers-reduced-motion: reduce){
  .perf-brokers.reveal.visible .perf-broker{ animation: none; opacity: 1; }
}