/* ------------------------------------------------------------------
   fx-pass.com — theme
   Extends the shared ecosystem look (bv-theme.css conventions):
   Plus Jakarta Sans, deep navy-black ground, emerald accent, gold
   highlight. Violet is the prop/funded signature colour for this site.
   ------------------------------------------------------------------ */

:root{
  /* Shared ecosystem tokens — keep in sync with bv-theme.css */
  --bg:        #0a0d13;
  --surface:   #131822;
  --surface-2: #1a2130;
  --line:      #232c3d;
  --text:      #e8edf6;
  --muted:     #94a1b8;
  --dim:       #6b7891;
  --accent:    #2dd4a7;   /* emerald  */
  --gold:      #f6b73c;   /* gold     */
  --violet:    #8b74e6;   /* prop / funded theme */

  --accent-soft: rgba(45,212,167,.12);
  --violet-soft: rgba(139,116,230,.14);
  --gold-soft:   rgba(246,183,60,.12);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);

  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

/* Ambient glows — fixed, behind everything */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 460px at 12% -6%,  rgba(139,116,230,.16), transparent 62%),
    radial-gradient(680px 420px at 92% 4%,   rgba(45,212,167,.10),  transparent 62%),
    radial-gradient(900px 620px at 50% 108%, rgba(246,183,60,.055), transparent 64%);
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* ---------- Type ---------- */

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.18; letter-spacing:-.02em; font-weight:800; }
h1{ font-size:clamp(2rem,5.2vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.25rem); }
h3{ font-size:1.125rem; font-weight:700; }
p{ margin:0 0 1em; color:var(--muted); }
p.lead{ font-size:clamp(1.02rem,2vw,1.2rem); color:var(--muted); max-width:60ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--violet);
  background:var(--violet-soft);
  border:1px solid rgba(139,116,230,.28);
  border-radius:999px; padding:6px 14px; margin-bottom:20px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--violet); }

.grad{
  background:linear-gradient(100deg,var(--violet) 0%,var(--accent) 62%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gold{ color:var(--gold); }
.text-dim{ color:var(--dim); }
.small{ font-size:.875rem; }
.xsmall{ font-size:.8125rem; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:.95rem;
  padding:14px 26px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#25b892);
  color:#04120d;
  box-shadow:0 6px 22px rgba(45,212,167,.26);
}
.btn-primary:hover{ box-shadow:0 10px 30px rgba(45,212,167,.36); }
.btn-violet{
  background:linear-gradient(135deg,var(--violet),#6d55cf);
  color:#0d0820;
  box-shadow:0 6px 22px rgba(139,116,230,.28);
}
.btn-violet:hover{ box-shadow:0 10px 30px rgba(139,116,230,.38); }
.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:#33405a; }
.btn-lg{ padding:17px 34px; font-size:1rem; }
.btn-block{ width:100%; }

/* ---------- Cards & surfaces ---------- */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px;
  box-shadow:var(--shadow);
}
.card-glow{
  position:relative;
  border-color:rgba(139,116,230,.32);
  box-shadow:var(--shadow), 0 0 0 1px rgba(139,116,230,.08), 0 20px 60px rgba(139,116,230,.10);
}
.panel{
  background:linear-gradient(180deg,var(--surface) 0%,#0f141d 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--shadow-lg);
}

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

section{ padding:clamp(56px,9vw,104px) 0; }
.section-head{ max-width:64ch; margin-bottom:44px; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* Numbered step */
.step-n{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--violet-soft);
  border:1px solid rgba(139,116,230,.3);
  color:var(--violet);
  font-weight:800; font-size:.95rem;
  margin-bottom:16px;
}

/* Stat */
.stat-v{ font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stat-l{ font-size:.8125rem; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* Pills / tags */
.pill{
  display:inline-block; padding:5px 12px; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid rgba(45,212,167,.24);
}
.pill-gold{ background:var(--gold-soft); color:var(--gold); border-color:rgba(246,183,60,.26); }

/* ---------- Header ---------- */

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(10,13,19,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.06rem; color:var(--text); letter-spacing:-.02em; }
.brand:hover{ text-decoration:none; }
.brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--violet),var(--accent));
  display:grid; place-items:center;
  font-size:.8rem; font-weight:800; color:#0a0d13;
}
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ color:var(--muted); font-size:.9rem; font-weight:600; }
.nav a:hover{ color:var(--text); text-decoration:none; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--text); font-size:1.5rem; cursor:pointer; padding:4px 8px; }

/* ---------- Footer ---------- */

.site-foot{ border-top:1px solid var(--line); background:#080b10; padding:52px 0 34px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; margin-bottom:34px; }
.foot-grid h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:14px; }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-links a{ color:var(--muted); font-size:.9rem; }
.foot-links a:hover{ color:var(--text); text-decoration:none; }

.risk-warning{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  background:rgba(246,183,60,.045);
  padding:18px 20px;
  font-size:.8125rem; line-height:1.65; color:var(--muted);
  margin-bottom:26px;
}
.risk-warning strong{ color:var(--gold); display:block; margin-bottom:6px; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; }

.foot-legal{ display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; color:var(--dim); font-size:.8125rem; }

/* ---------- Forms ---------- */

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8125rem; font-weight:700; color:var(--muted); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.95rem;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--r-sm);
  padding:13px 15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(139,116,230,.16);
}
.field input::placeholder,.field textarea::placeholder{ color:#55607a; }
.form-note{ font-size:.75rem; color:var(--dim); line-height:1.55; }

/* ---------- FAQ ---------- */

.faq details{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  padding:18px 20px;
  margin-bottom:10px;
}
.faq summary{ cursor:pointer; font-weight:700; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--violet); font-size:1.3rem; line-height:1; flex:0 0 auto; }
.faq details[open] summary::after{ content:'\2013'; }
.faq details p{ margin:14px 0 0; font-size:.92rem; }

/* ---------- Utilities ---------- */

.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mb-0{ margin-bottom:0; }
.mt-2{ margin-top:22px; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-3{ gap:14px; }
.wrap-narrow{ max-width:720px; }

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .nav{
    display:none; position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#0d1119; border-bottom:1px solid var(--line); padding:8px 20px 16px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line); }
  .nav a:last-child{ border-bottom:0; }
  .nav-toggle{ display:block; }
  .nav-cta .btn{ padding:11px 18px; font-size:.875rem; }
  .panel{ padding:24px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==================================================================
   LANDING PAGE (cold traffic, single page)
   Minimal chrome: no nav, one job — play the video, click the CTA.
   ================================================================== */

.lp-bar{ padding:26px 0 4px; }
.lp-bar .wrap{ display:flex; justify-content:center; }
.lp-logo{ height:52px; width:auto; }

.lp-hero{ padding:clamp(30px,5vw,54px) 0 clamp(26px,4vw,40px); text-align:center; }
.lp-hero h1{
  font-size:clamp(2.1rem,5.6vw,4rem);
  line-height:1.08; letter-spacing:-.032em;
  max-width:17ch; margin:0 auto .22em;
}
.lp-sub{
  font-size:clamp(1.05rem,2.2vw,1.32rem);
  color:var(--muted); line-height:1.55;
  max-width:56ch; margin:0 auto;
}

/* --- video --- */
.lp-video-wrap{ padding:0 0 clamp(28px,4vw,44px); }
.lp-video{
  position:relative;
  max-width:900px; margin:0 auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#000;
  border:1px solid rgba(139,116,230,.3);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(139,116,230,.08);
}
.lp-video::before{ content:''; display:block; padding-top:56.25%; }
.lp-video > video,
.lp-video > iframe,
.lp-video > .lp-video-ph{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.lp-video-ph{
  display:grid; place-items:center; gap:14px;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(139,116,230,.18), transparent 70%),
    linear-gradient(180deg,#151b27,#0c1017);
  color:var(--dim); text-align:center; padding:24px;
}
.lp-play{
  width:74px; height:74px; border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid; place-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lp-play svg{ margin-left:5px; }

.lp-video-note{
  text-align:center; font-size:.85rem; color:var(--dim);
  margin:16px auto 0; max-width:46ch;
}

/* --- CTA --- */
.lp-cta{ text-align:center; padding:0 0 clamp(40px,6vw,72px); }
.lp-cta .btn{ min-width:min(420px,100%); }
.lp-cta-note{ font-size:.82rem; color:var(--dim); margin-top:14px; }

/* --- proof --- */
.lp-proof{ padding:clamp(44px,6vw,76px) 0; border-top:1px solid var(--line); }
.lp-proof-head{ text-align:center; margin-bottom:38px; }
.lp-proof-head h2{ font-size:clamp(1.4rem,3vw,2rem); }

.tp-strip{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-bottom:34px;
  color:var(--muted); font-size:.92rem;
}
.tp-stars{ display:inline-flex; gap:3px; }
.tp-star{ width:22px; height:22px; background:#00b67a; display:grid; place-items:center; border-radius:2px; }
.tp-star svg{ width:14px; height:14px; }

.vid-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vid-card{
  position:relative; border-radius:var(--r);
  overflow:hidden; background:#0f141d;
  border:1px solid var(--line);
  aspect-ratio:9/16;
}
.vid-card > video,.vid-card > iframe,.vid-card > .vid-ph{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.vid-ph{ display:grid; place-items:center; color:var(--dim); font-size:.8rem; text-align:center; padding:16px;
  background:linear-gradient(180deg,#161c28,#0d1119); }
.vid-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 14px 12px; font-size:.82rem; font-weight:700; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
}

.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.rev{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px;
}
.rev-stars{ display:flex; gap:2px; margin-bottom:10px; }
.rev p{ font-size:.9rem; color:var(--text); margin-bottom:12px; line-height:1.55; }
.rev cite{ font-style:normal; font-size:.8rem; color:var(--dim); font-weight:600; }

.lp-source-note{
  text-align:center; font-size:.78rem; color:var(--dim);
  margin-top:26px; max-width:64ch; margin-left:auto; margin-right:auto; line-height:1.6;
}

/* --- slim footer --- */
.lp-foot{ border-top:1px solid var(--line); background:#080b10; padding:34px 0 30px; }
.lp-foot-links{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-bottom:22px; }
.lp-foot-links a{ color:var(--muted); font-size:.82rem; }

@media (max-width:820px){
  .vid-grid{ grid-template-columns:repeat(2,1fr); }
  .rev-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .vid-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .lp-logo{ height:42px; }
  .lp-cta .btn{ min-width:100%; }
}

/* ---------- Modal (lead form popup) ---------- */

.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(4,6,10,.78);
  backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
}
.modal.is-open .modal-backdrop{ opacity:1; }

.modal-box{
  position:relative; width:100%; max-width:440px;
  background:linear-gradient(180deg,var(--surface) 0%,#0f141d 100%);
  border:1px solid rgba(139,116,230,.32);
  border-radius:var(--r-lg);
  padding:34px 30px 30px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(139,116,230,.08);
  max-height:calc(100vh - 40px); overflow-y:auto;
  opacity:0; transform:translateY(12px) scale(.985);
  transition:opacity .2s ease, transform .2s ease;
}
.modal.is-open .modal-box{ opacity:1; transform:none; }

.modal-x{
  position:absolute; top:12px; right:14px;
  background:none; border:0; cursor:pointer;
  color:var(--dim); font-size:1.7rem; line-height:1;
  padding:4px 8px; border-radius:8px;
}
.modal-x:hover{ color:var(--text); background:rgba(255,255,255,.05); }

.modal-title{ font-size:1.5rem; margin-bottom:6px; }
.modal-sub{ font-size:.92rem; color:var(--muted); margin-bottom:24px; }

.modal-tick{
  width:58px; height:58px; border-radius:50%;
  background:var(--accent);
  display:grid; place-items:center;
  margin:6px auto 18px;
  box-shadow:0 8px 30px rgba(45,212,167,.32);
}

@media (max-width:480px){
  .modal{ padding:0; place-items:end stretch; }
  .modal-box{
    max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:30px 22px 26px; max-height:92vh;
    transform:translateY(24px);
  }
}