/* ExecutionFX — Landing V9
   Graphite Hybrid · Mobile-first · Manrope / JetBrains Mono */

:root{
  --light:#F2F4F7;
  --white:#FFFFFF;
  --text:#111318;
  --muted:#565C68;
  --border:#DDE1E8;
  --graphite:#070A10;
  --graphite-card:#0E131D;
  --graphite-border:#1C2230;
  --graphite-text:#F5F7FA;
  --graphite-muted:#9AA3B2;
  --blue:#2563EB;
  --blue-dark:#1747B3;
  --blue-pale:#EEF4FF;
  --green:#16A34A;
  --green-pale:#EAFBF1;

  --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --container:1180px;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-soft:0 12px 32px -18px rgba(17,19,24,.18);
  --shadow-card:0 1px 2px rgba(17,19,24,.04),0 8px 24px -12px rgba(17,19,24,.08);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--light);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 20px;}
@media(min-width:768px){.container{padding:0 32px;}}

.eyebrow{
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.eyebrow.on-light{color:var(--blue);}
.eyebrow.on-dark{color:#6E9CFF;}

/* Selective blue accent inside a headline — used sparingly, not on every H2 */
.text-blue{color:var(--blue);}
.on-graphite .text-blue,.section.on-graphite .text-blue{color:#6E9CFF;}

h1,.h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.03;}
h2,.h2{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.1;}
h3,.h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.2;}
/* Typographic hierarchy: headline/subheadline/body need more visual separation,
   especially on mobile where the reader must know what to read first. */
p{color:var(--muted);}

.section{padding:48px 0;}
@media(min-width:768px){.section{padding:72px 0;}}
.section.tight{padding:40px 0;}
@media(min-width:768px){.section.tight{padding:56px 0;}}
.section.on-graphite{background:var(--graphite);color:var(--graphite-text);}
.section.on-white{background:var(--white);}

.section-head{max-width:660px;margin:0 auto 36px;text-align:center;}
.section-head .eyebrow{display:block;margin-bottom:16px;}
.section-head h2{font-size:clamp(32px,5vw,48px);margin-bottom:16px;}
.section-head p{color:var(--muted);font-size:17px;}
.section.on-graphite .section-head p{color:var(--graphite-muted);}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:700;font-size:15px;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border);}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);}
/* On graphite: white text + a clearly visible white border in its NORMAL
   state (not just on hover) — graphite-border alone is nearly invisible.
   .hero uses the graphite background directly (not the .on-graphite class),
   so it needs to be listed here too or this rule silently misses it. */
.on-graphite .btn-secondary,.hero .btn-secondary{color:#fff;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.05);}
.on-graphite .btn-secondary:hover,.hero .btn-secondary:hover{border-color:#6E9CFF;color:#6E9CFF;background:rgba(110,156,255,.1);}
.btn-block{display:flex;width:100%;}
.btn-lg{padding:18px 30px;font-size:16px;}
.btn-text-short{display:none;}
@media(max-width:480px){.btn-text-full{display:none;}.btn-text-short{display:inline;}}

/* ─── Header ─── */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(7,10,16,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--graphite-border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-family:var(--display);font-weight:800;font-size:19px;color:#fff;letter-spacing:-.01em;}
.brand span{color:#6E9CFF;}
.header-cta{display:none;}
@media(min-width:640px){.header-cta{display:inline-flex;}}

/* ─── Logo (real brand asset, horizontal icon+wordmark lockup, dark-bg version) ─── */
.logo-horizontal{height:22px;width:auto;max-width:100%;object-fit:contain;display:block;}
.logo-lockup{height:34px;width:auto;max-width:100%;object-fit:contain;display:block;}
.hero-logo{margin-bottom:22px;}
.footer-logo{height:24px;width:auto;max-width:100%;object-fit:contain;display:block;margin-bottom:10px;}

/* ─── Hero ─── */
.hero{background:var(--graphite);color:var(--graphite-text);padding:36px 0 48px;position:relative;}
@media(min-width:1024px){.hero{padding:72px 0 88px;}}

/* Hero uses grid-template-areas so mobile can interleave the VSL between headline
   and subheadline while desktop puts copy in one column and VSL in another —
   without duplicating markup for each breakpoint. */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"proof" "eyebrow" "headline" "media" "sub" "cta";
  row-gap:0;
}
.ga-proof{grid-area:proof;margin-bottom:22px;}
.ga-eyebrow{grid-area:eyebrow;margin-bottom:14px;}
.ga-headline{grid-area:headline;}
.ga-media{grid-area:media;margin:22px 0 26px;}
.ga-sub{grid-area:sub;margin-bottom:26px;}
.ga-cta{grid-area:cta;}

@media(min-width:1024px){
  .hero-grid{
    grid-template-columns:47% 1fr;
    column-gap:60px;
    row-gap:16px;
    grid-template-areas:
      "proof   media"
      "eyebrow media"
      "headline media"
      "sub     media"
      "cta     media";
    align-items:center;
  }
  /* The copy column's own content centers itself; the media column centers
     against the copy column's full height so the VSL's visual middle lines
     up with the middle of the text block, not its top edge. */
  .ga-media{margin:0;align-self:center;justify-self:stretch;}
}
@media(min-width:1280px){
  .hero-grid{grid-template-columns:45% 1fr;column-gap:72px;}
}

/* ─── Scroll indicator ─── */
.scroll-indicator{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:36px;color:var(--graphite-muted);
}
.scroll-indicator span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c3cbdb;}
.scroll-indicator-circle{
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  animation:efx-bounce 2.4s ease-in-out infinite;
}
.scroll-indicator svg{width:22px;height:22px;stroke:#6E9CFF;stroke-width:2.4;}
@media(prefers-reduced-motion:reduce){.scroll-indicator-circle{animation:none;}}
@keyframes efx-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(7px);}
}

/* ─── Trust strip (static, no marquee) ─── */
.trust-strip{background:var(--graphite-card);border-top:1px solid var(--graphite-border);border-bottom:1px solid var(--graphite-border);padding:18px 0;}
.trust-strip .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 32px;
}
.trust-item{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:#D7DCE6;white-space:nowrap;
}
.trust-item svg{width:17px;height:17px;stroke:#6E9CFF;flex-shrink:0;}
.trust-item .sup{font-size:10px;vertical-align:super;margin-left:1px;}
@media(max-width:600px){
  .trust-item{font-size:12px;}
  .trust-item svg{width:16px;height:16px;}
}

.hero-proof{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;row-gap:2px;
  font-family:var(--mono);font-size:15px;color:#D7DCE6;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:10px 18px 10px 13px;
}
.hero-proof .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 0 3px rgba(22,163,74,.22);}
.hero-proof strong{color:#fff;font-weight:800;letter-spacing:.02em;}
.hero-proof-sep{color:rgba(255,255,255,.3);}
.hero-proof-sub{font-weight:600;font-size:12.5px;letter-spacing:.06em;color:#A9B1C2;}
.hero h1{font-size:clamp(32px,7.2vw,56px);color:#fff;margin-top:2px;}
.hero-sub{font-size:16.5px;color:var(--graphite-muted);max-width:50ch;}
@media(min-width:1024px){.hero-sub{font-size:17.5px;}}
.hero-ctas{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
@media(min-width:480px){.hero-ctas{flex-direction:row;}}
.hero-trust{font-family:var(--mono);font-size:11.5px;color:var(--graphite-muted);letter-spacing:.03em;}

.hero-vsl-caption{font-family:var(--mono);font-size:12px;color:var(--graphite-muted);text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;}
.hero-vsl-caption svg{width:14px;height:14px;stroke:#6E9CFF;}
@media(min-width:1024px){
  .hero-vsl-caption{justify-content:flex-start;text-align:left;}
}

.vsl-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--graphite-border);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  background:#000;aspect-ratio:16/9;
}
.vsl-frame video{width:100%;height:100%;object-fit:cover;}
.vsl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;}
.vsl-play-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(7,10,16,.05),rgba(7,10,16,.55));
  border:none;padding:0;cursor:pointer;
}
.vsl-play-circle{
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -6px rgba(0,0,0,.5);
  transition:transform .18s ease;
}
.vsl-play-btn:hover .vsl-play-circle{transform:scale(1.06);}
.vsl-play-circle svg{width:26px;height:26px;fill:var(--blue);margin-left:4px;}
.vsl-frame.is-playing .vsl-play-btn{display:none;}
/* BUG FIX: the poster <img> sits after <video> in the DOM and is absolutely
   positioned over it — without this rule it stays on top forever, so the
   video plays invisibly underneath and looks completely broken/frozen. */
.vsl-frame.is-playing .vsl-poster{display:none;}

/* ─── Sticky mobile CTA ─── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(7,10,16,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--graphite-border);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(0);transition:transform .25s ease;
}
.sticky-cta.is-hidden{transform:translateY(110%);}
.sticky-cta-info{color:#fff;font-size:13px;line-height:1.3;}
.sticky-cta-info strong{display:block;font-size:14px;font-weight:800;}
.sticky-cta-info span{color:var(--graphite-muted);font-family:var(--mono);font-size:11.5px;}
.sticky-cta .btn{padding:11px 20px;font-size:13.5px;flex-shrink:0;}
@media(min-width:1024px){.sticky-cta{display:none;}}

/* ─── Clarity block ─── */
.clarity-points{display:grid;grid-template-columns:1fr;gap:14px;margin:36px 0 32px;}
@media(min-width:640px){.clarity-points{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.clarity-points{grid-template-columns:repeat(5,1fr);}}
.clarity-point{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 18px;text-align:left;
}
.clarity-point .num{font-family:var(--mono);font-size:11px;color:var(--blue);font-weight:700;margin-bottom:10px;}
.clarity-point strong{display:block;font-size:15px;margin-bottom:5px;}
.clarity-point p{font-size:13.5px;color:var(--muted);}
.center-cta{text-align:center;margin-top:8px;}

/* ─── Before / After slider (real, same chart, same moment) ─── */
.ba-wrap{max-width:820px;margin:32px auto 0;}
.ba-slider{
  position:relative;width:100%;aspect-ratio:2266/1313;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--graphite-border);box-shadow:0 30px 70px -35px rgba(0,0,0,.7);
  cursor:ew-resize;user-select:none;touch-action:pan-y;
}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.ba-img-after{clip-path:inset(0 0 0 50%);}
.ba-label{
  position:absolute;top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(7,10,16,.6);padding:5px 11px;border-radius:999px;pointer-events:none;
}
.ba-label-before{left:14px;}
.ba-label-after{right:14px;}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:0;
  transform:translateX(-50%);pointer-events:none;
}
.ba-handle-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.4);}
.ba-handle-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
}
.ba-handle-grip svg{width:14px;height:14px;stroke:var(--blue);}
.ba-caption{text-align:center;font-size:13px;color:var(--graphite-muted);margin-top:16px;}

/* ─── Product gallery (graphite island) ───
   A real carousel, not a fixed grid: each image keeps its own aspect ratio
   (some are portrait mobile screenshots, some landscape) instead of being
   cropped/letterboxed into equal cells. Mobile: one big slide + a sliver of
   the next to signal "more". Desktop: ~2 slides visible, arrows + counter. */
.demo-carousel{position:relative;margin-top:36px;}
.demo-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.demo-track::-webkit-scrollbar{display:none;}
.demo-slide{
  flex:0 0 88%;scroll-snap-align:start;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--graphite-border);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7);cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;background:var(--graphite-card);
  max-height:66vh;position:relative;
}
.demo-slide img{width:100%;height:100%;object-fit:contain;display:block;}
.demo-slide-caption{
  position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:#fff;background:rgba(7,10,16,.65);padding:6px 12px;border-radius:999px;pointer-events:none;
}
.demo-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;}
.demo-arrow{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--graphite-card);border:1px solid var(--graphite-border);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.demo-arrow:hover{border-color:#6E9CFF;background:rgba(110,156,255,.1);}
.demo-arrow svg{width:16px;height:16px;stroke:currentColor;}
.demo-counter{font-family:var(--mono);font-size:11.5px;color:var(--graphite-muted);}
.demo-dots{display:flex;gap:7px;}
.demo-dot{width:7px;height:7px;border-radius:50%;background:var(--graphite-border);border:none;padding:0;cursor:pointer;}
.demo-dot.is-active{background:#6E9CFF;}

@media(min-width:640px){.demo-slide{flex-basis:62%;max-height:70vh;}}
@media(min-width:900px){.demo-slide{flex-basis:46%;max-height:560px;}}

/* ─── Lightbox ─── */
.lightbox-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(3,5,9,.92);
  display:none;align-items:center;justify-content:center;padding:24px;
  backdrop-filter:blur(4px);
}
.lightbox-overlay.is-open{display:flex;}
.lightbox-img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.18);}

.demo-callouts{display:grid;grid-template-columns:1fr;gap:14px;margin-top:32px;}
@media(min-width:640px){.demo-callouts{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.demo-callouts{grid-template-columns:repeat(4,1fr);}}
.demo-callout{
  background:var(--graphite-card);border:1px solid var(--graphite-border);border-radius:var(--radius);
  padding:18px;
}
.demo-callout .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#6E9CFF;font-weight:700;margin-bottom:8px;display:block;}
.demo-callout p{font-size:13.5px;color:var(--graphite-muted);}

/* ─── Prop firms ─── */
/* Clean uniform text list — no logo boxes (mismatched backgrounds/renders
   looked inconsistent), just names, evenly weighted, generous spacing. */
.propfirm-group{margin-top:8px;}
.propfirm-group h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;text-align:center;}
.propfirm-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 28px;margin-bottom:32px;
}
.propfirm-name{
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);
  letter-spacing:-.01em;
}
.propfirm-disclaimer{max-width:640px;margin:0 auto;text-align:center;font-size:13px;color:var(--muted);}

/* ─── Problem section ─── */
.problem-lockup{max-width:760px;margin:0 auto;text-align:center;}
.problem-lockup h2{font-size:clamp(24px,4vw,34px);margin-bottom:16px;}
.problem-lockup p{color:var(--muted);font-size:16px;max-width:56ch;margin:0 auto;}
.compare-wrap{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px;align-items:center;}
@media(min-width:800px){.compare-wrap{grid-template-columns:1fr auto 1fr;}}
.compare-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;}
.compare-card.is-efx{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.compare-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;text-align:center;}
.compare-card.is-efx .compare-label{color:var(--blue);}
.compare-flow{display:flex;flex-direction:column;gap:0;align-items:center;}
.compare-step{font-size:14.5px;font-weight:600;padding:9px 0;}
.compare-card.is-efx .compare-step{font-weight:700;}
.compare-arrow{color:var(--border);font-size:14px;}
.compare-card.is-efx .compare-arrow{color:var(--blue);opacity:.5;}
.compare-vs{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;font-weight:700;}

/* ─── Steps ─── */
.steps-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;}
@media(min-width:640px){.steps-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.steps-grid{grid-template-columns:repeat(4,1fr);}}
.step-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.step-num{font-family:var(--mono);font-size:12px;color:var(--blue);font-weight:700;margin-bottom:12px;}
.step-card h3{font-size:16px;margin-bottom:6px;}
.step-card p{font-size:13.5px;color:var(--muted);}
.steps-close{text-align:center;margin-top:52px;}
.steps-close h3{font-size:clamp(22px,4vw,30px);letter-spacing:-.01em;}
.steps-close p{color:var(--muted);margin-top:10px;font-size:15px;}

/* ─── Benefits ─── */
.benefits-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;}
@media(min-width:640px){.benefits-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.benefits-grid{grid-template-columns:repeat(5,1fr);}}
.benefit-card{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.benefit-icon{width:38px;height:38px;border-radius:10px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.benefit-icon svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.benefit-card h3{font-size:15px;margin-bottom:6px;}
.benefit-card p{font-size:13.5px;color:var(--muted);}

/* ─── Results / proof wall ───
   align-items:start so shorter screenshots don't get stretched to match the
   tallest card in the row (each card's height follows its own content). */
.proof-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;align-items:start;}
@media(min-width:640px){.proof-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.proof-grid{grid-template-columns:repeat(3,1fr);}}
.proof-card{height:auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);}
.proof-card img{width:100%;display:block;}
.proof-card .proof-body{padding:14px 16px;}
.proof-card .proof-kind{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:5px;}
.proof-card p{font-size:13px;color:var(--muted);}
.proof-disclaimer{max-width:680px;margin:32px auto 0;text-align:center;font-size:12px;color:var(--muted);}
/* Dark variant for the "operaciones reales" section, now on graphite */
.section.on-graphite .proof-card{background:var(--graphite-card);border-color:var(--graphite-border);}
.section.on-graphite .proof-card p{color:var(--graphite-muted);}
.section.on-graphite .proof-disclaimer{color:var(--graphite-muted);}

/* ─── Community ─── */
.community-note{
  background:var(--blue-pale);border:1px solid #CBDCFB;border-radius:var(--radius);
  padding:18px 20px;max-width:680px;margin:36px auto 0;text-align:center;
}
.community-note p{font-size:14px;color:var(--blue-dark);}

/* ─── For you / not for you ─── */
.audience-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px;}
@media(min-width:800px){.audience-grid{grid-template-columns:1fr 1fr;}}
.audience-card{border-radius:var(--radius);padding:28px 24px;}
.audience-card.is-yes{background:var(--white);border:1px solid var(--border);}
.audience-card.is-no{background:var(--graphite-card);border:1px solid var(--graphite-border);color:var(--graphite-text);}
.audience-card h3{font-size:18px;margin-bottom:18px;}
.audience-card ul{display:grid;gap:12px;}
.audience-card li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;}
.audience-card.is-yes li{color:var(--text);}
.audience-card.is-no li{color:var(--graphite-muted);}
.mark-yes{color:var(--green);font-weight:800;flex-shrink:0;}
.mark-no{color:#F87171;font-weight:800;flex-shrink:0;}

/* ─── Offer transition ─── */
.offer-concepts{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px;}
@media(min-width:700px){.offer-concepts{grid-template-columns:repeat(3,1fr);}}
.offer-concept{text-align:center;padding:20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--light);}
.offer-concept.is-mid{border-color:var(--blue);background:var(--blue-pale);}
.offer-concept .oc-name{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--blue);font-weight:700;margin-bottom:6px;}
.offer-concept .oc-desc{font-size:14.5px;font-weight:600;}

/* ─── Pricing ─── */
.pricing-section{background:var(--white);}
.plans{display:flex;flex-direction:column;gap:18px;margin-top:0;}
@media(min-width:960px){.plans{flex-direction:row;align-items:stretch;justify-content:center;gap:20px;}}
.plan-card{
  position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px 26px;display:flex;flex-direction:column;
}
@media(min-width:960px){.plan-card{flex:1 1 0;max-width:340px;}}
.plan-card.order-essential{order:2;}
.plan-card.order-pro{order:1;}
.plan-card.order-quarterly{order:3;}
@media(min-width:960px){
  .plan-card.order-essential{order:1;}
  .plan-card.order-pro{order:2;}
  .plan-card.order-quarterly{order:3;}
}
/* Pro is recommended through border/halo/badge — never made physically bigger,
   so all three cards keep identical width/height and stay aligned. */
.plan-card.is-featured{
  border-color:var(--blue);border-width:1.5px;
  box-shadow:0 0 0 3px var(--blue-pale),0 24px 50px -24px rgba(37,99,235,.4);
}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
}
.plan-badge.badge-blue{background:var(--blue);color:#fff;}
.plan-badge.badge-green{background:var(--green);color:#fff;}
.plan-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.plan-name{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:16px;}
.plan-price-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.plan-price-old{font-family:var(--display);font-size:19px;color:var(--muted);text-decoration:line-through;opacity:.7;}
.plan-price{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.01em;}
.plan-per{font-size:13px;color:var(--muted);}
.plan-eq{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:6px;}
.plan-save{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--green);background:var(--green-pale);padding:4px 10px;border-radius:999px;}
.plan-desc{font-size:13.5px;color:var(--muted);margin:16px 0;}
.plan-divider{border-top:1px solid var(--border);margin:4px 0 18px;}
.plan-feat{display:grid;gap:11px;flex:1;margin-bottom:22px;}
.plan-feat li{display:flex;gap:9px;font-size:13.5px;align-items:flex-start;}
.plan-feat li svg{width:16px;height:16px;flex-shrink:0;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.plan-card.is-featured .plan-feat li svg{stroke:var(--blue);}
.plan-cta-sub{text-align:center;font-size:12px;color:var(--muted);margin-top:10px;}
.plan-micro{text-align:center;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;}

.decision-strip{display:grid;grid-template-columns:1fr;gap:12px;margin-top:36px;}
@media(min-width:700px){.decision-strip{grid-template-columns:repeat(3,1fr);}}
.decision-item{text-align:center;padding:16px;border-radius:var(--radius);background:var(--light);border:1px solid var(--border);font-size:13.5px;}
.decision-item strong{display:block;font-size:14.5px;margin-bottom:4px;}

/* ─── Comparison table (compact, all rows kept — just tighter columns) ─── */
.compare-table-wrap{
  margin:24px auto 0;max-width:960px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);
}
table.compare-table{width:100%;border-collapse:collapse;min-width:480px;background:var(--white);table-layout:fixed;}
.compare-table th,.compare-table td{padding:11px 8px;font-size:13px;text-align:center;border-bottom:1px solid var(--border);}
.compare-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.compare-table td:first-child,.compare-table th:first-child{width:46%;text-align:left;font-weight:600;color:var(--text);padding-left:16px;}
.compare-table th.is-pro{color:var(--blue);}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table .yes{color:var(--blue);font-weight:800;}
.compare-table .dash{color:var(--border);}
/* Sticky first column on mobile so labels stay visible while swiping */
@media(max-width:640px){
  .compare-table td:first-child,.compare-table th:first-child{position:sticky;left:0;background:var(--white);z-index:1;box-shadow:1px 0 0 var(--border);}
}

/* ─── Crypto payment — always visible, no accordion ─── */
.crypto-wrap{max-width:640px;margin:0 auto;}
.crypto-head{margin-bottom:20px;}
.crypto-head-left{display:flex;align-items:center;gap:12px;}
.crypto-head-left svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.8;flex-shrink:0;}
.crypto-head h3{font-size:20px;}
.crypto-head p{font-size:14px;margin-top:6px;}
.crypto-panel-inner{
  padding:22px;background:var(--light);border:1px solid var(--border);border-radius:var(--radius);
}
.crypto-field-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.crypto-field-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.crypto-badge{font-family:var(--mono);font-size:13px;font-weight:700;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:8px 12px;}
.crypto-wallet-box{
  display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;margin-bottom:18px;
}
.crypto-wallet-box code{font-family:var(--mono);font-size:12.5px;color:var(--text);word-break:break-all;flex:1;}
.crypto-copy-btn{
  flex-shrink:0;font-family:var(--mono);font-size:11.5px;font-weight:700;
  background:var(--blue);color:#fff;border:none;border-radius:7px;padding:9px 14px;cursor:pointer;
  transition:background .15s ease;white-space:nowrap;
}
.crypto-copy-btn:hover{background:var(--blue-dark);}
.crypto-copy-btn.is-copied{background:var(--green);}
.crypto-steps{display:grid;gap:12px;margin-bottom:18px;}
.crypto-step{display:flex;gap:12px;font-size:13.5px;color:var(--text);align-items:flex-start;}
.crypto-step-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--blue-pale);color:var(--blue);
  font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.crypto-warning{
  display:flex;gap:10px;background:#FEF2F2;border:1px solid #FCD3D3;border-radius:10px;
  padding:12px 14px;font-size:12.5px;color:#9A1B1B;align-items:flex-start;
}
.crypto-warning svg{width:16px;height:16px;stroke:#DC2626;flex-shrink:0;margin-top:1px;}
.crypto-proof-cta{margin-top:16px;text-align:center;}

/* ─── Testimonials marquee (two rows, opposite directions, images only) ─── */
.marquee-wrap{margin-top:36px;display:grid;gap:16px;}
.marquee-row{
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex;gap:16px;width:max-content;animation:efx-marquee-left 48s linear infinite;}
.marquee-row.is-reverse .marquee-track{animation-name:efx-marquee-right;animation-duration:54s;}
.marquee-row:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{
  height:220px;width:auto;flex-shrink:0;border-radius:12px;border:1px solid var(--graphite-border);
  display:block;
}
@media(min-width:768px){.marquee-track img{height:260px;}}
@keyframes efx-marquee-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes efx-marquee-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ─── TradingView "works inside" badge (separate from prop firms) ─── */
.tv-badge-row{display:flex;justify-content:center;margin-bottom:36px;}
.tv-badge{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;
  background:var(--white);border:1px solid var(--border);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-weight:600;
}
.tv-badge svg{width:16px;height:16px;stroke:var(--blue);flex-shrink:0;}

/* ─── Contact (Telegram, secondary — never competes with the main CTA) ─── */
.contact-box{
  max-width:520px;margin:0 auto;text-align:center;
  padding:32px 28px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border);
}
.contact-box h3{font-size:19px;margin-bottom:8px;}
.contact-box p{font-size:14.5px;margin-bottom:20px;}
.contact-box .btn svg{stroke:currentColor;}
.contact-handle{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;margin-bottom:0;}

/* ─── FAQ ─── */
.faq-list{max-width:760px;margin:40px auto 0;display:grid;gap:10px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--white);overflow:hidden;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;background:none;border:none;text-align:left;
  font-family:var(--body);font-weight:700;font-size:15px;color:var(--text);
}
.faq-q .plus{flex-shrink:0;width:20px;height:20px;position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--blue);border-radius:2px;}
.faq-q .plus::before{width:14px;height:2px;top:9px;left:3px;}
.faq-q .plus::after{width:2px;height:14px;top:3px;left:9px;transition:transform .2s ease;}
.faq-item.is-open .faq-q .plus::after{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 20px 18px;font-size:14px;color:var(--muted);}

/* ─── Final CTA ─── */
.final-cta{text-align:center;}
.final-cta h2{font-size:clamp(28px,5.6vw,44px);color:#fff;margin-bottom:16px;}
.final-cta p{color:var(--graphite-muted);font-size:16px;max-width:52ch;margin:0 auto 30px;}
.final-cta .hero-ctas{justify-content:center;margin:0 auto 18px;max-width:520px;}
.final-cta .hero-trust{display:block;}

/* ─── Legal strip ─── */
.legal-strip{background:var(--graphite);border-top:1px solid var(--graphite-border);padding:28px 0;}
.legal-strip .container{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;}
.legal-strip a{font-size:12.5px;color:var(--graphite-muted);}
.legal-strip a:hover{color:#fff;}

/* ─── Footer ─── */
.site-footer{background:var(--graphite);padding:32px 0 40px;}
.site-footer .brand{margin-bottom:8px;}
.site-footer p{color:var(--graphite-muted);font-size:13px;}
.site-footer .foot-bottom{margin-top:24px;padding-top:20px;border-top:1px solid var(--graphite-border);font-size:11.5px;color:#5B6474;}

/* ─── reveal-on-scroll ───
   Progressive enhancement: content is visible by default (no-JS, JS-blocked,
   or JS-not-yet-run all show full content). Only once html.js is set AND the
   element is confirmed observed does it start hidden, then reveal on scroll. */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
html.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none;}}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}