/* ================= Yagath Stocks — base styles ================= */
:root{
  --bg:#0A0F0D;
  --bg-soft:#0D1512;
  --surface:#121A17;
  --surface-2:#182420;
  --border:#223028;
  --border-soft:#1C2620;
  --text:#F3F6F4;
  --muted:#9FB0A8;
  --dim:#6E7F77;
  --green:#22D3A6;
  --green-light:#4BEFC9;
  --green-dark:#12A483;
  --gold:#F0B93E;
  --gold-light:#FFD873;
  --gold-dark:#D9992A;
  --radius:14px;
  --radius-sm:8px;
  --container:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
button,input,select{font-family:inherit;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:10px 0;}
.section-tight{padding:10px 0;}

/* Focus Areas / Curriculum / Enrollment sit back-to-back on the same plain
   background with no color or border to tell them apart, unlike About/FAQ/
   E-book/Testimonials/CTA which already have their own background or border.
   Give these three a touch more breathing room plus thin divider lines so
   they read as distinct sections instead of running together. */
#focus,#curriculum,#enroll{padding:36px 0;}
#curriculum,#enroll{border-top:1px solid var(--border-soft);}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--green-light);
}
.eyebrow::after{content:"";width:34px;height:2px;background:var(--green);border-radius:2px;}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px;flex-wrap:wrap;}
.section-head h2{font-size:34px;line-height:1.15;}
.section-head p{color:var(--muted);font-size:15px;margin-top:10px;}
.section-head .side{color:var(--muted);font-size:14.5px;text-align:right;line-height:1.5;}

.accent-green{color:var(--green-light);}
.accent-gold{color:var(--gold);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:10px;font-weight:600;font-size:15px;
  border:none;cursor:pointer;transition:transform .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-green{background:linear-gradient(135deg,var(--green-light),var(--green-dark));color:#06210F;}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#241804;}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{background:var(--surface-2);}
.btn-sm{padding:10px 18px;font-size:13.5px;}
.btn-block{width:100%;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,15,13,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.header-row{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .logo-mark{width:36px;height:36px;flex-shrink:0;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;justify-content:center;}
.brand-text .name{font-size:18px;font-weight:800;letter-spacing:.3px;color:var(--text);}
.brand-text .name span{color:var(--green-light);}
.brand-text .tag{font-size:10.5px;letter-spacing:1px;color:var(--dim);font-weight:500;margin-top:2px;}

.main-nav{display:flex;align-items:center;gap:32px;}
.main-nav a{font-size:14.5px;font-weight:500;color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent;transition:color .15s;}
.main-nav a:hover,.main-nav a.active{color:var(--text);}
.main-nav a.active{border-color:var(--gold);color:var(--text);}

.header-actions{display:flex;align-items:center;gap:16px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;width:40px;height:40px;align-items:center;justify-content:center;color:var(--text);}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;padding:1px 0;
  background:radial-gradient(120% 140% at 78% 45%,#0F2018 0%,var(--bg) 62%);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:24px;align-items:center;}
.badge-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-size:11px;font-weight:600;
  letter-spacing:.4px;color:var(--muted);margin-bottom:14px;
}
.badge-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.hero h1{font-size:40px;line-height:1;text-transform:uppercase;}
.hero h1 .line2{
  display:block;background:linear-gradient(90deg,var(--green-light),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{font-size:15px;font-weight:600;margin-top:8px;}
.hero .desc{color:var(--muted);font-size:12.5px;margin-top:8px;max-width:380px;line-height:1.55;}

/* Sized to fit Intraday/Swing/Options Trading on one line within the
   380px hero text column at every width, desktop included — the column
   is fixed-width regardless of viewport, so this isn't a responsive
   concern, just the right base size for that column. */
.focus-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.focus-item{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;white-space:nowrap;}
.focus-item .fi-icon{width:20px;height:20px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.focus-item small{display:block;color:var(--gold);font-weight:600;font-size:9.5px;}

.hero-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.hero-cta .btn{padding:10px 18px;font-size:13px;}

.trust-row{display:flex;align-items:center;gap:10px;margin-top:14px;}
.avatar-stack{display:flex;}
.avatar-stack-item{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);background:var(--surface-2);
  margin-left:-8px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--green-light);text-decoration:none;
  transition:transform .15s ease;
}
.avatar-stack-item:hover,.avatar-stack-item:focus-visible{transform:translateY(-2px);z-index:1;}
.avatar-stack-item:first-child{margin-left:0;}
.trust-row .count{font-size:12px;color:var(--muted);}
.trust-row .count b{color:var(--text);}

.hero-visual{position:relative;align-self:stretch;display:flex;}
.hero-banner{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  /* fade both the left edge (into the text column) and the right edge
     (into the section background) so the banner merges seamlessly on
     both sides instead of showing a hard rectangular cutoff */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 15%,black 95%,transparent 100%);
}

.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--green-light);font-weight:600;font-size:14.5px;}
.link-arrow:hover{color:var(--green);}

/* ============ ABOUT ============ */
.about.section{background:var(--bg-soft);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);position:relative;overflow:hidden;padding:10px 0;}
/* Image column (a circular photo, fixed size) on the LEFT, content on
   the RIGHT — mirrors .hero-grid's shape but with a compact avatar
   instead of a wide banner, so the text column stays roomy enough to
   keep all 4 stat items on a single row. The heading is its own grid
   item (not nested inside .about-content) so its position in the flow
   can be reordered independently per breakpoint — on mobile it moves
   above the photo via grid-template-areas, while paragraph/button/traits
   stay below the photo. */
.about-grid{
  display:grid;grid-template-columns:minmax(0,300px) 1fr;
  grid-template-areas:"visual heading" "visual content";
  column-gap:40px;row-gap:14px;align-items:center;
}
.about-heading{grid-area:heading;font-size:32px;}
.about-visual{grid-area:visual;position:relative;display:flex;align-items:center;justify-content:center;}
.about-content{grid-area:content;}
.about-photo-wrap{position:relative;width:300px;height:300px;flex-shrink:0;}
.about-photo-circle{
  width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 20%;display:block;
  border:4px solid var(--surface-2);box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.trx5-card{
  position:absolute;right:-14px;bottom:6px;z-index:2;
  background:rgba(10,15,13,.94);border:1px solid var(--gold);border-radius:12px;
  padding:12px 16px;display:flex;flex-direction:column;gap:2px;min-width:150px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
}
.trx5-card:hover,.trx5-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(240,185,62,.3);}
.trx5-label{font-size:16px;font-weight:800;color:var(--gold);letter-spacing:.5px;}
.trx5-sub{font-size:10px;color:var(--text);font-weight:600;line-height:1.3;}
.trx5-steps{font-size:8.5px;color:var(--muted);margin-top:4px;letter-spacing:.3px;}
.about-content{display:flex;flex-direction:column;gap:26px;}
.about-copy p{color:var(--muted);font-size:15px;line-height:1.75;}
.trait-row{display:flex;gap:16px;flex-wrap:nowrap;}
.trait{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100px;flex:0 0 auto;}
.trait.js-open-contact{cursor:pointer;}
.trait.js-open-contact:hover .t-num,.trait.js-open-contact:focus-visible .t-num{text-decoration:underline;text-underline-offset:3px;}
.trait .t-num{font-size:17px;font-weight:800;color:var(--green-light);line-height:1.15;}
.trait .t-num.accent-gold-num{color:var(--gold);}
.trait span{font-size:12px;font-weight:600;line-height:1.35;color:var(--muted);}

/* ============ FOCUS AREAS ============ */
.focus-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.focus-cards-4{grid-template-columns:repeat(4,1fr);}
.focus-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;position:relative;}
.focus-card .fc-icon{width:46px;height:46px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.focus-card h3{font-size:18px;margin-bottom:8px;}
.focus-card p{color:var(--muted);font-size:14px;line-height:1.65;}
.focus-card .tag{display:inline-block;margin-left:8px;font-size:11px;color:var(--gold);font-weight:700;}
.focus-card .note{margin-top:12px;color:var(--green-light);font-size:12.5px;font-style:italic;}
.focus-card.featured{background:linear-gradient(160deg,#1C1406,var(--surface));border-color:var(--gold);}
.focus-card.featured.js-open-contact{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;}
.focus-card.featured.js-open-contact:hover,.focus-card.featured.js-open-contact:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(240,185,62,.22);}
.focus-card.featured .fc-icon-gold{background:rgba(240,185,62,.15);}
.focus-card .fc-badge{
  position:absolute;top:-11px;right:20px;background:var(--gold);color:#241804;
  font-size:10px;font-weight:800;letter-spacing:.5px;padding:4px 11px;border-radius:999px;
}

/* ============ CURRICULUM CHIPS ============ */
.curriculum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch;}
.curr-chip{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,transform .15s;}
.curr-chip:hover{border-color:var(--green);transform:translateY(-2px);}
.curr-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.curr-chip .num{font-size:24px;font-weight:800;color:var(--green-light);}
.curr-chip .label{font-size:13px;font-weight:600;margin-top:8px;line-height:1.4;}
.curr-chip .desc{font-size:12px;color:var(--muted);line-height:1.55;margin-top:8px;}
.curr-chip.featured{border-color:var(--gold);background:linear-gradient(160deg,#1C1406,var(--surface));}
.curr-chip.featured .num{color:var(--gold);}
.curr-chip .star{color:var(--gold);font-size:11px;}

/* ============ PRICING CARDS ============ */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;position:relative;display:flex;flex-direction:column;}
.price-card.popular{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.price-card .badges{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.badge-tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);}
.badge-tag.green{background:rgba(34,197,94,.15);color:var(--green-light);}
.badge-tag.gold{background:var(--gold);color:#241804;display:inline-flex;align-items:center;gap:5px;}
.price-card h3{font-size:20px;margin-bottom:8px;}
.price-card .desc{color:var(--muted);font-size:13.5px;margin-bottom:16px;}
.price-card .feat-list{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.price-card .feat-list li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--muted);}
.price-card .feat-list li svg{flex-shrink:0;margin-top:2px;}
.price-card .batch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin-bottom:6px;}
.price-card .amount{font-size:30px;font-weight:800;margin:10px 0 18px;}
.price-card .amount.green{color:var(--green-light);}
.price-card .amount.gold{color:var(--gold);}
.price-card .btn{margin-top:auto;}

/* ============ ENROLLMENT ============ */
.enroll-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.enroll-card{border-radius:var(--radius);padding:34px;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;}
.enroll-card .kicker{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.8;margin-bottom:14px;}
.enroll-card .ec-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;}
.ec-badge{font-size:11px;font-weight:800;letter-spacing:.4px;padding:6px 14px;border-radius:999px;white-space:nowrap;}
.ec-badge.free-badge{background:#0EA57A;color:#fff;box-shadow:0 3px 8px rgba(14,165,122,.35);}
.ec-badge.priority-badge{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#2B2005;box-shadow:0 3px 8px rgba(217,153,42,.35);}
.enroll-card .ec-icon-circle{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.12);
}
.enroll-card .ec-icon-circle.free{background:linear-gradient(160deg,#22D3A6,#0EA57A);}
.enroll-card .ec-icon-circle.priority{background:linear-gradient(160deg,var(--gold-light),var(--gold-dark));}
.enroll-card h3{font-size:23px;margin-bottom:10px;}
.enroll-card .desc{font-size:14px;margin-bottom:18px;line-height:1.65;max-width:340px;}
.enroll-card .feat-list{display:inline-flex;flex-direction:column;gap:10px;margin:0 auto 24px;text-align:left;}
.enroll-card .feat-list li{display:flex;gap:8px;font-size:13.5px;align-items:flex-start;}
.enroll-card .feat-list li svg{flex-shrink:0;margin-top:2px;}
.enroll-card .btn-block{width:100%;}

.enroll-card.free{background:#E3FBF2;border:1px solid #BFEEDD;}
.enroll-card.free .kicker{color:#0B2B22;}
.enroll-card.free h3{color:#0B2B22;}
.enroll-card.free .desc{color:#2C5C4C;}
.enroll-card.free .feat-list li{color:#1B4A3C;}

.enroll-card.priority{
  background:#FDF3DC;border:2px solid var(--gold-dark);
  box-shadow:0 14px 34px rgba(217,153,42,.22);transform:scale(1.02);
}
.enroll-card.priority .kicker{color:#6B551C;}
.enroll-card.priority h3{color:#2B2005;}
.enroll-card.priority .desc{color:#6B551C;}
.enroll-card.priority .feat-list li{color:#5B4611;}
.enroll-card.priority .ec-ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#241804;
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 16px;border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.ec-price-flashy{
  display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:22px;
  padding:12px 28px;border-radius:14px;background:linear-gradient(135deg,#2B2005,#1C1406);
  box-shadow:0 6px 18px rgba(217,153,42,.28),inset 0 0 0 1px rgba(240,185,62,.4);
}
.ec-price-label{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold-light);}
.ec-price-amount{
  font-size:34px;font-weight:800;line-height:1.2;
  background:linear-gradient(135deg,#FBE4A0,var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 14px rgba(240,185,62,.35);
}

/* "Only N of TOTAL seats left" urgency badge on the Priority Pass card.
   Plain CSS for now (gradient pill + pulsing dot) — if a custom ribbon/
   badge graphic gets made later (see FIRESTORE_MIGRATION.md for the image
   prompt), drop it in as assets/seats-badge.png and swap the `background`
   line below for `background:url('../assets/seats-badge.png') center/cover
   no-repeat;` — the HTML/JS driving the text and daily number don't change. */
.seats-urgency{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FF7A5C,#E13D2A);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  padding:8px 18px;border-radius:999px;margin-bottom:18px;
  box-shadow:0 6px 16px rgba(225,61,42,.35);
  animation:seatsAttention 2.2s ease-in-out infinite;
}
.seats-urgency .dot{
  width:7px;height:7px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:seatsPulse 1.4s ease-in-out infinite;
}
.seats-urgency strong{font-weight:800;}
@keyframes seatsPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.65);}}
/* Subtle "breathing" glow + scale on the whole pill — just enough to catch
   the eye on a page scroll without feeling like a flashing ad. Runs
   continuously since it's cheap (transform + box-shadow only, no layout
   reflow); reduced-motion users get the plain static pill. */
@keyframes seatsAttention{
  0%,100%{transform:scale(1);box-shadow:0 6px 16px rgba(225,61,42,.35);}
  50%{transform:scale(1.045);box-shadow:0 8px 24px rgba(225,61,42,.55);}
}
@media (prefers-reduced-motion:reduce){
  .seats-urgency,.seats-urgency .dot{animation:none;}
}

/* ============ EBOOK BANNER ============ */
.ebook-banner{
  background:linear-gradient(120deg,#0F241A 0%,#0A0F0D 65%);
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.ebook-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(260px,320px);gap:40px;align-items:center;max-width:880px;margin:0 auto;}
.ebook-copy h2{font-size:30px;margin:14px 0 14px;}
.ebook-copy p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:22px;}

.getbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:230px;}
.getbox h4{font-size:14px;margin-bottom:14px;}
.getbox ul{display:flex;flex-direction:column;gap:10px;}
.getbox li{display:flex;gap:8px;font-size:13px;color:var(--muted);align-items:center;}

/* ============ TESTIMONIALS ============ */
.testi-section-light{background:#F4F6F5;border-top:1px solid #E2E8E4;border-bottom:1px solid #E2E8E4;color:#16241D;}
.testi-section-light h2{color:#0E1B15;}
.testi-section-light .testi-head p{color:#5B6D64;}
.testi-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px;flex-wrap:wrap;}
.testi-nav{display:flex;gap:10px;}
.testi-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;}
.testi-section-light .testi-nav button{border-color:#D8E1DC;color:#16241D;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{background:#FFFFFF;border:1px solid #E5EAE7;border-radius:var(--radius);padding:26px;box-shadow:0 2px 10px rgba(20,40,30,.04);}
.testi-card .tc-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;}
.testi-card .ph{width:46px;height:46px;border-radius:50%;background:#E7ECE9;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#5B6D64;flex-shrink:0;overflow:hidden;}
.testi-card .quote{font-size:13.5px;color:#3C4A43;font-style:italic;line-height:1.6;}
.testi-card .stars{display:flex;gap:3px;margin-bottom:12px;}
.testi-card .who .name{font-size:14px;font-weight:700;color:#16241D;}
.testi-card .who .role{font-size:12px;color:#7C8B83;}

/* ============ FAQ ============ */
.faq{background:var(--bg-soft);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.faq-item{border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:14px;background:var(--bg);cursor:pointer;}
.faq-item.open{border-color:var(--gold);}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;font-weight:600;}
.faq-q .icon{font-size:19px;color:var(--dim);flex-shrink:0;line-height:1;}
.faq-item.open .faq-q .icon{color:var(--gold);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:240px;margin-top:14px;}
.faq-a p{color:var(--muted);font-size:14px;line-height:1.7;}

/* ============ CTA BAND ============ */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(10,15,13,.55),rgba(10,15,13,.9)),
    radial-gradient(120% 160% at 20% 30%,#152018 0%,#0A0F0D 70%);
  padding:10px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.cta-runner{position:absolute;right:0;bottom:0;width:340px;height:auto;max-height:100%;opacity:.85;pointer-events:none;}
.cta-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-row h3{font-size:26px;line-height:1.35;}
.cta-row .cta-white{color:var(--text);}
.cta-row .actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ============ FOOTER ============ */
.site-footer{padding:10px 0 20px;}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:32px;}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;}
.footer-links a{font-size:14px;color:var(--muted);}
.footer-links a:hover{color:var(--text);}
.footer-social{display:flex;gap:12px;align-items:center;}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.footer-social a.wa{background:var(--green);border-color:var(--green);}
.footer-disclaimer{font-size:12px;color:var(--dim);line-height:1.6;max-width:640px;margin-bottom:16px;}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.footer-legal a{font-size:12.5px;color:var(--muted);}
.footer-legal a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--dim);}
.footer-bottom a{color:var(--dim);}
.footer-bottom a:hover{color:var(--muted);}

/* Floating WhatsApp */
.float-wa{
  position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:60;
}

/* Mobile bottom tab bar — hidden by default, shown only <=768px (see
   RESPONSIVE section) where it replaces the hamburger dropdown nav. */
.mobile-tabbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:rgba(10,15,13,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--border-soft);
  padding:7px 2px calc(7px + env(safe-area-inset-bottom));
}
.mt-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--dim);font-size:9.5px;font-weight:600;padding:4px 2px;
}
.mt-item svg{width:19px;height:19px;}
.mt-item.active{color:var(--green-light);}

/* ============ MODALS (registration + curriculum popups) ============ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(6,10,8,.72);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.open{display:flex;}
.modal{
  position:relative;background:var(--bg-soft);border:1px solid var(--border);border-radius:18px;
  max-width:480px;width:100%;max-height:88vh;overflow-y:auto;padding:34px 30px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:var(--surface);}

.reg-tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--surface);border-radius:10px;padding:4px;}
.reg-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px;border-radius:8px;cursor:pointer;}
.reg-tab.active{background:var(--surface-2);color:var(--text);}
#regTabFree.active{color:var(--green-light);}
#regTabPriority.active{color:var(--gold);}
.reg-panel .ec-badge{margin-bottom:14px;display:inline-block;}
.reg-panel h3{font-size:22px;margin-bottom:10px;color:var(--text);}
#regPanelFree h3{color:var(--green-light);}
#regPanelPriority h3{color:var(--gold);}
.reg-panel .desc{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.6;}
.reg-panel .feat-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.reg-panel .feat-list li{display:flex;gap:8px;font-size:13.5px;align-items:flex-start;color:var(--muted);}
.reg-panel .feat-list li svg{flex-shrink:0;margin-top:2px;}

.reg-price{font-size:14px;color:var(--text);margin-bottom:16px;}
.reg-price strong{color:var(--gold);}
.enroll-card .reg-price{font-size:13px;margin:6px 0 10px;}
.enroll-card .reg-price strong{color:var(--gold);}

.reg-fields{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.reg-fields label{font-size:12px;color:var(--muted);margin-top:6px;}
.reg-fields label .opt{color:var(--dim);}
.reg-fields label .req{color:var(--gold);}
.reg-fields input,.reg-fields select,.reg-fields textarea{
  width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;
}
.reg-fields textarea{resize:vertical;min-height:64px;}
.reg-fields input:focus,.reg-fields select:focus,.reg-fields textarea:focus{outline:none;border-color:var(--green);}
.reg-fields input::placeholder,.reg-fields textarea::placeholder{color:var(--dim);}

.reg-msg{margin-top:12px;font-size:13px;}
.reg-submit[disabled]{opacity:0.6;cursor:not-allowed;}

.curr-modal-num{font-size:15px;font-weight:800;color:var(--green-light);letter-spacing:1px;margin-bottom:6px;}
.curr-modal .modal-close{top:14px;}
#currModalTitle{font-size:21px;margin-bottom:10px;padding-right:30px;}
.curr-modal-desc{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:22px;}
.curr-modal-block{margin-bottom:18px;}
.curr-modal-block h4{font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.curr-modal-block p{font-size:13.5px;color:var(--muted);line-height:1.65;}
.curr-modal-block ul{display:flex;flex-direction:column;gap:8px;}
.curr-modal-block ul li{font-size:13.5px;color:var(--muted);line-height:1.5;padding-left:18px;position:relative;}
.curr-modal-block ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green);}
.curr-modal-enroll{margin-top:6px;}

/* ============ LEGAL PAGES ============ */
.legal-page{padding:48px 0 80px;}
.legal-page .container{max-width:780px;}
.legal-page h1{font-size:32px;margin-bottom:6px;}
.legal-page .legal-updated{color:var(--dim);font-size:13px;margin-bottom:32px;}
.legal-content h2{font-size:18px;color:var(--green-light);margin:28px 0 10px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--muted);font-size:14.5px;line-height:1.8;margin-bottom:14px;}
.legal-content ul{color:var(--muted);font-size:14.5px;line-height:1.8;margin:0 0 14px;padding-left:22px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color:var(--green-light);}
.back-home-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;margin-bottom:24px;}
.back-home-link:hover{color:var(--green-light);}

/* ============ CONTACT ============ */
.contact-form-wrap{max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;}
.contact-form-wrap .reg-fields{margin-bottom:0;}
.contact-form-wrap .btn-block{margin-top:6px;}

/* ---------- Broker choice popup ("Open Trading Account") ---------- */
.broker-modal h3{font-size:21px;margin-bottom:10px;color:var(--text);padding-right:20px;}
.broker-modal .desc{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:8px;}
.broker-options{margin-top:20px;display:flex;flex-direction:column;}
.broker-option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
}
.broker-name{font-size:15px;font-weight:700;color:var(--text);}
.broker-or{text-align:center;color:var(--dim);font-size:12.5px;margin:10px 0;}

/* ============ RESPONSIVE ============ */
/* Tablet (769-1080px): a scaled-down version of the desktop layout —
   hero/about stay side-by-side, just smaller — rather than the full
   single-column mobile stack, which only kicks in at 768px and below. */
@media (max-width:1080px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}

  .hero-grid{grid-template-columns:minmax(0,300px) 1fr;gap:20px;}
  /* At tablet widths the 1fr image column's height (set by the shorter
     text column next to it) no longer matches the source image's own
     ratio, so object-fit:cover started cropping the quote card/script
     text at the edges. Locking the image to its own aspect-ratio (and
     dropping the edge fade, which only worked against the old fixed-height
     crop) guarantees the full banner shows at every width down to 768px. */
  .hero-visual{height:auto;align-self:start;align-items:flex-start;}
  .hero-banner{
    aspect-ratio:1672/941;object-position:center;
  }
  .hero h1{font-size:32px;}
  .hero .sub{font-size:13.5px;}
  .hero .desc{font-size:11.5px;max-width:300px;}
  /* The 300px tablet text column is narrower than the base sizing needs
     for one line — shrink further so all 3 items still fit on one row. */
  .focus-row{gap:8px;margin-top:12px;flex-wrap:nowrap;}
  .focus-item{gap:5px;font-size:9.5px;}
  .focus-item .fi-icon{width:18px;height:18px;}
  .focus-item .fi-icon svg{width:13px;height:13px;}
  .hero-cta{margin-top:14px;}
  .hero-cta .btn{padding:9px 15px;font-size:12px;}
  .trust-row .count{font-size:11px;}

  .about-grid{grid-template-columns:minmax(0,220px) 1fr;column-gap:20px;}
  .about-photo-wrap{width:220px;height:220px;}
  .trx5-card{right:-10px;bottom:0;padding:9px 12px;min-width:120px;}
  .trx5-label{font-size:13px;}
  .trx5-sub{font-size:8.5px;}
  .trx5-steps{font-size:7.5px;}
  .about-heading{font-size:26px;}
  .about-copy p{font-size:13.5px;}
  .trait-row{gap:10px;}
  .trait{width:76px;gap:4px;}
  .trait .t-num{font-size:14px;}
  .trait span{font-size:10.5px;}

  .section-head h2{font-size:28px;}
  .focus-card{padding:20px;}
  .focus-cards,.price-cards,.testi-grid{grid-template-columns:1fr 1fr;}
  .curriculum-grid{grid-template-columns:repeat(3,1fr);}
  .stat-row{grid-template-columns:1fr 1fr;}
  .faq-cols{grid-template-columns:1fr;}
  .ebook-grid{gap:18px;}
  .ebook-copy h2{font-size:23px;}
  .getbox{min-width:0;padding:16px;}
  .getbox li{font-size:11.5px;gap:6px;}
}
/* Mobile (<=768px): a compact 2-up layout everywhere it makes sense
   (curriculum, focus cards, enrollment, FAQ), a swipe-scroll row for
   testimonials, and the About section reordered to heading → photo →
   copy — rather than just collapsing every grid to one full-width
   column, plus the bottom tab bar. */
@media (max-width:768px){
  .hero-grid,.ebook-grid{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
  .hero .desc{max-width:none;}

  /* Section headings (Curriculum/Testimonials/FAQ/etc.) were still at the
     desktop 34px size on mobile, wrapping to 2 lines and leaving a lot of
     dead space above the content below — shrink the heading and the gap
     under it. */
  .section-head{margin-bottom:20px;}
  .section-head h2{font-size:23px;}
  .section-head p{font-size:12.5px;margin-top:6px;}

  /* About: heading first, then the circular photo, then the copy/traits —
     the heading and content are separate grid items (see base .about-grid)
     specifically so this reorder is possible without duplicating markup. */
  .about-grid{
    grid-template-columns:1fr;
    grid-template-areas:"heading" "visual" "content";
    row-gap:18px;text-align:left;
  }
  .about-visual{margin-bottom:0;}
  .about-photo-wrap{width:220px;height:220px;}
  .trx5-card{right:-10px;bottom:0;}
  .trait-row{gap:8px;}
  .trait{width:70px;gap:4px;}
  .trait .t-num{font-size:13px;}
  .trait span{font-size:9.5px;}

  /* Curriculum: 2 columns (5 rows of 2) instead of one full-width stack. */
  .curriculum-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .curr-chip{padding:14px 12px;}
  .curr-chip .num{font-size:19px;}
  .curr-chip .label{font-size:12px;margin-top:6px;}
  .curr-chip .desc{font-size:10.5px;margin-top:6px;}

  /* Focus Areas: 2x2 instead of one full-width stack. */
  .focus-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .focus-card{padding:16px;}
  .focus-card h3{font-size:14.5px;}
  .focus-card p{font-size:11.5px;}
  .focus-card .fc-icon{width:36px;height:36px;margin-bottom:10px;}

  /* Enrollment: Priority Pass stacked above Free Registration (one column,
     Priority first since it's the recommended option — order:-1 moves it
     ahead visually without touching the HTML source order), with larger
     readable text than the old side-by-side 2-up layout. Padding/spacing
     is still kept tight by request, just not as cramped as squeezing two
     columns into one screen width required. (Promoted from the index1.html
     comparison build on Oct 2, 2026, after owner approval — see
     FIRESTORE_MIGRATION.md for that history.) */
  .enroll-grid{grid-template-columns:1fr;gap:10px;}
  .enroll-card{padding:14px;}
  .enroll-card.priority{transform:none;order:-1;}
  .enroll-card .kicker{font-size:11px;line-height:1.3;margin-bottom:7px;}
  .enroll-card .ec-head{gap:6px;margin-bottom:7px;}
  .ec-badge{font-size:10px;padding:2px 8px;}
  .enroll-card .ec-icon-circle{width:28px;height:28px;}
  .enroll-card .ec-icon-circle svg{width:15px;height:15px;}
  .enroll-card h3{font-size:17px;margin-bottom:5px;line-height:1.2;}
  .enroll-card .desc{font-size:12px;margin-bottom:8px;line-height:1.4;}
  .ec-price-flashy{padding:7px 14px;margin-bottom:8px;}
  .ec-price-label{font-size:8.5px;}
  .ec-price-amount{font-size:23px;}
  .seats-urgency{font-size:10.5px;padding:5px 12px;gap:6px;margin-bottom:8px;border-radius:999px;}
  .seats-urgency .dot{width:6px;height:6px;}
  .enroll-card .feat-list{gap:6px;margin-bottom:8px;}
  .enroll-card .feat-list li{font-size:11.5px;gap:5px;line-height:1.3;}
  .enroll-card .feat-list li svg{width:12px;height:12px;}
  .enroll-card .btn{padding:9px 8px;font-size:12px;gap:4px;}
  .enroll-card .btn svg{width:11px;height:11px;}
  .enroll-card.priority .ec-ribbon{font-size:8px;padding:2px 9px;top:-8px;}

  /* Testimonials: swipe left/right through the cards instead of stacking. */
  .testi-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
  .testi-card{flex:0 0 80%;scroll-snap-align:start;}

  /* FAQ: compact 2-up cards instead of one full-width column. */
  .faq-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
  .faq-item{padding:12px;margin-bottom:8px;border-radius:10px;}
  .faq-q{font-size:11.5px;gap:6px;}
  .faq-q .icon{font-size:15px;}
  .faq-item.open .faq-a{max-height:420px;margin-top:8px;}
  .faq-a p{font-size:10.5px;line-height:1.55;}

  /* CTA band headline — shrink so it wraps to 3 lines instead of 4, and
     tighten the gaps + make the buttons full-width so the section doesn't
     read as a small pair of pill buttons floating in a lot of empty space. */
  .cta-row{gap:16px;}
  .cta-row h3{font-size:20px;}
  .cta-row .actions{flex-direction:column;gap:10px;width:100%;}
  .cta-row .actions .btn{width:100%;}

  /* Footer — the desktop layout (logo left, ragged-wrapping link/legal rows,
     space-between bottom bar) doesn't hold together in one narrow column;
     rebuilt centered with the links/legal rows as neat 2-column grids
     instead of wrapping wherever they happen to break, plus extra bottom
     clearance so the last line doesn't sit under the floating WhatsApp
     button and the tab bar. */
  .footer-top{flex-direction:column;align-items:center;text-align:center;gap:18px;padding-bottom:22px;}
  .footer-links{
    display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;
    width:100%;max-width:260px;justify-items:center;
  }
  .footer-social{gap:14px;}
  .footer-disclaimer{text-align:center;max-width:320px;margin:0 auto 18px;font-size:11.5px;}
  .footer-legal{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;
    justify-items:center;margin:0 auto 20px;max-width:280px;
  }
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;}

  /* Bottom tab bar replaces the hamburger dropdown on true mobile —
     tablet (769-1080px) still uses the hamburger since the tab bar's
     labels/icons get too cramped above phone widths. */
  .nav-toggle{display:none;}
  .mobile-tabbar{display:flex;}
  /* Reserve just enough space below all content for the floating
     WhatsApp button (bottom:78px + 56px tall = 134px footprint) plus
     the tab bar underneath it, with a small buffer — was 64px here
     plus a separate 120px on .site-footer (184px total), which left a
     large empty gap at the very bottom without actually being enough
     to clear the WhatsApp button, causing it to overlap the last
     footer line. Consolidating into one 150px reservation here fixes
     the overlap and removes the excess gap in one place. */
  body{padding-bottom:150px;}
  .float-wa{bottom:78px;}
}

@media (max-width:680px){
  .hero h1{font-size:40px;}
  .price-cards,.form-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .section-head .side{text-align:left;}
  .cta-row{flex-direction:column;align-items:flex-start;}
  .cta-runner{display:none;}
  /* Keep Intraday / Swing / Options on one line instead of wrapping —
     shrink the icon, gap and type just for this row rather than letting
     it break into two lines on narrow phones. */
  .focus-row{gap:8px;flex-wrap:nowrap;}
  .focus-item{gap:4px;font-size:9.5px;white-space:nowrap;}
  .focus-item .fi-icon{width:18px;height:18px;border-radius:6px;}
  .focus-item .fi-icon svg{width:12px;height:12px;}
  .modal{padding:28px 20px 24px;}
  .reg-tabs{flex-direction:column;}
}
@media (max-width:480px){
  /* Header actions (WhatsApp + Join Now + hamburger) don't all fit next to
     the brand on narrow phones — drop the header's Join Now button here,
     the hero section right below already has its own prominent CTAs. */
  .header-actions{gap:10px;}
  .header-actions .btn-gold{display:none;}

  /* Keep Intraday / Swing / Options on one line down to the narrowest
     phones too (360px+ was already covered by the 680px rule above; this
     tightens it further so 320-360px doesn't overflow). */
  .focus-row{gap:5px;}
  .focus-item{gap:3px;font-size:8.3px;}
  .focus-item .fi-icon{width:15px;height:15px;}
  .focus-item .fi-icon svg{width:10px;height:10px;}

  /* Keep all 4 About stat items on one line down to the narrowest phones. */
  .trait-row{gap:6px;}
  .trait{width:60px;gap:3px;}
  .trait .t-num{font-size:11.5px;}
  .trait span{font-size:8.5px;line-height:1.25;}
}