/* ============================================================
   TEFS landing — 1:1 with Figma frame "Landing" (1440 × 5379)
   Container 1200 · Manrope + Plus Jakarta Sans · accent #19D98D
   ============================================================ */

:root{
  --bg:#09090b;
  --green:#19d98d;
  --ink:#050711;
  --surface:rgba(255,255,255,.05);
  --hairline:rgba(255,255,255,.05);
  --muted:rgba(255,255,255,.5);
  --container:1200px;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:#fff;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.container{width:var(--container);max-width:100%;margin:0 auto;padding:0 20px}
.accent{color:var(--green)}

/* ---------- section shells ---------- */
/* Figma block padding: 74 top / 74 bottom, gap 50 */
.block{position:relative;padding:74px 0}
.block > .container{position:relative;z-index:2;display:flex;flex-direction:column;gap:50px}

/* ---------- decorative backgrounds ---------- */
.sec-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

/* "Cubes" tile, 1440×776, masked opaque→transparent from 53.35% to 100% */
.hexgrid{
  position:absolute;left:50%;transform:translateX(-50%);
  top:0;width:1440px;height:776px;
  background:url("assets/hex-grid.png") no-repeat center top;
  background-size:1440px 776px;
  opacity:.55;
}
/* fade the tile to transparent without mask-image (avoids a compositor
   corruption bug seen on some software-rendered / headless Chromiums
   when mask-image is combined with backdrop-filter elsewhere on the page) */
.hexgrid::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,transparent 53.35%,var(--bg) 100%);
}

/* Figma: ellipse 705×700, fill #19D98D, layer-blur 384, opacity .30 */
.glow{
  position:absolute;
  width:1473px;height:1468px;
  background:radial-gradient(closest-side,rgba(25,217,141,.30),rgba(25,217,141,.13) 42%,rgba(25,217,141,0) 72%);
  pointer-events:none;
}
/* centres in frame coords → offset from the 1440 stage */
.glow--hero-r{left:calc(50% + 585px);top:-78px;transform:translateX(-50%)}
.glow--hero-l{left:calc(50% - 652px);top:-589px;transform:translateX(-50%)}

/* Smaller and vertically centred with a plain 50% (not a fixed px bleed
   past the section edge): a fixed-offset bleed across a section boundary
   measured 100+px off between browsers/zoom levels in the wild — sizing
   it to always land safely inside this section's own box, whatever that
   box's real height turns out to be, sidesteps the discrepancy entirely
   instead of chasing it. */
.glow--cta-l,.glow--cta-r{width:700px;height:700px;top:calc(50% - 350px)}
.glow--cta-l{left:calc(50% - 794px);transform:translateX(-50%)}
.glow--cta-r{left:calc(50% + 738px);transform:translateX(-50%)}

/* ============================================================
   BUTTONS / CHIPS / TIPS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:72px;
  font-weight:600;font-size:16px;line-height:22px;
  white-space:nowrap;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn--green{background:var(--green);color:var(--ink)}
.btn--white{background:#fff;color:var(--ink)}
.btn--sm{height:46px;padding:0 17px}
.btn--lg{height:56px;padding:0 28px}

/* pill used in hero (radius 8, not fully round) */
.tip{
  display:inline-flex;align-items:center;gap:8px;
  height:43px;padding:12px;
  border-radius:8px;
  background:var(--surface);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  font-size:14px;line-height:19px;font-weight:500;color:#fff;
  transition:background .15s ease;
}
button.tip:hover{background:rgba(255,255,255,.1)}

/* rounded chips in the plan card (radius 13) */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 14px;
  border-radius:13px;
  background:var(--surface);
  font-size:16px;line-height:22px;font-weight:600;color:#fff;
  transition:background .15s ease;
}
.chip:hover{background:rgba(255,255,255,.1)}
.chip.is-active{background:var(--green);color:#1d1b20}
.chip--wide{height:45px;padding:0 14px;min-width:205px;font-size:18px;line-height:25px}
.chip--num{width:40px;height:40px;padding:0;flex:none}
.chip--num:hover{background:var(--surface)}

/* big rounded chips in the "News / Algo / Scalping" card (radius 60) */
.chip-lg{
  display:inline-flex;align-items:center;
  height:45px;padding:0 20px;
  border-radius:60px;
  background:var(--surface);
  font-size:18px;line-height:20px;font-weight:600;
}

/* ============================================================
   HEADER  (Figma "head": 1200×46, space-between)
   ============================================================ */
.head{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:46px;
}
.logo img{height:24px;width:auto}

.menu{display:flex;align-items:center;gap:18px}
.menu a{font-size:14px;line-height:19px;font-weight:500;opacity:.9;transition:opacity .15s ease}
.menu a:hover{opacity:1}

.head-right{display:flex;align-items:center;gap:16px}
.head-login{font-size:14px;line-height:19px;font-weight:500}
.head-flag{width:27px;height:14px;border-radius:2px}

.burger{display:none;flex-direction:column;gap:4px;padding:8px}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO  (block: pad-top 14 · gap 50 · pad-bottom 64)
   ============================================================ */
.hero{position:relative;padding:24px 0 64px}
.hero > .container{position:relative;z-index:2;display:flex;flex-direction:column;gap:50px}

.hero-top{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero-head{display:flex;flex-direction:column;align-items:center;gap:12px}

.tip--badge{padding:12px}
.tip--badge img{width:18px;height:18px;flex:none}

.hero-title-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}

h1{
  font-size:54px;line-height:65px;font-weight:600;
  text-align:center;letter-spacing:0;
}
.hero-sub{
  font-size:20px;line-height:28px;font-weight:500;
  text-align:center;color:var(--muted);
}

.hero-tips{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}

.hero-cta{display:flex;flex-direction:column;align-items:center;gap:16px}
.hero-cta .btn{min-width:232px}

/* payment logo chips */
.paylogos{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
.paylogos--sm{gap:2px}
.paylogos--lg{gap:4px}
.paylogo{
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
}
.paylogos--sm .paylogo{width:37px;height:26px;border-radius:6px;padding:8px 6px}
.paylogos--lg .paylogo{width:75px;height:46px;border-radius:12px;padding:8px 26px}
.paylogo img{width:100%;height:100%;object-fit:contain}

/* ---------- hero visual (Figma group 803×449) ---------- */
/* centred with left:50%/translateX(-50%) rather than margin:auto —
   margin:auto only centers when the box is narrower than its parent,
   and this box overflows its container on tablet/mobile once scaled */
.hero-visual{
  position:relative;
  width:803px;height:449px;
  left:50%;
  transform:translateX(-50%);
}
/* soft dark ellipse behind the shots */
.hv-shade{
  position:absolute;left:189px;top:66px;width:483px;height:389px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(29,27,32,.55),rgba(29,27,32,0) 70%);
}
/* shots are exported unrotated (554×340); Figma tilts them −5.7° / +4.8° */
.hv-shot{
  position:absolute;
  width:554px;height:340px;
  max-width:none;
  border-radius:14px;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.55));
}
.hv-shot--back {left:235px;  top:87px; transform:rotate(4.8deg)}
.hv-shot--front{left:15px;   top:26px; transform:rotate(-5.7deg)}

/* floating glass cards */
.fcard{
  position:absolute;z-index:4;
  display:flex;
  border-radius:18px;
  background:rgba(10,24,21,.2);
  border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.fcard--left{
  left:-99px;top:-58px;
  width:282px;min-height:129px;
  padding:28px 24px;
  gap:32px;align-items:center;
}
.fcard--right{
  left:661px;top:7px;
  width:226px;min-height:126px;
  padding:28px 24px;
  flex-direction:column;gap:12px;
  justify-content:center;
}
.fcard-txt{display:flex;flex-direction:column;gap:16px;flex:1}
.fcard-label{font-size:16px;line-height:22px;font-weight:600;color:var(--muted)}
.fcard-txt strong{font-size:24px;line-height:26px;font-weight:600}
.fcard-big{font-size:32px;line-height:35px;font-weight:600}
.fcard-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:26px}
.fcard-side img{width:24px;height:24px;opacity:.3}
.fcard-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.fcard-arrow{width:24px;height:24px;opacity:.3;flex:none}
.fcard-bar{height:5px;border-radius:90px;background:var(--surface);overflow:hidden}
.fcard-bar i{display:block;height:100%;width:72.5%;border-radius:80px;background:var(--green)}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:18px}
.sec-title{
  font-size:40px;line-height:48px;font-weight:600;text-align:center;
}
.sec-title--narrow{max-width:536px;margin:0 auto}
.sec-sub{
  max-width:428px;
  font-size:20px;line-height:26px;font-weight:500;
  text-align:center;color:var(--muted);
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  position:relative;
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}
.card--lg{border-radius:36px;padding:36px;display:flex;flex-direction:column;gap:32px}

/* shared inner white glow (Figma: white ellipse, blur 114, op .1–.2) —
   the gradient itself fades softly, so no filter:blur() is needed
   (keeps this cheap even with 20+ cards on the page) */
.card::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:420px;height:420px;right:-140px;bottom:-180px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(255,255,255,0) 68%);
}
.card > *{position:relative;z-index:1}

/* ============================================================
   CONDITIONS  (1200 row · gap 12 · 398 | 428 | 350)
   ============================================================ */
.cond{display:flex;gap:12px;align-items:stretch}
.cond-a{flex:0 0 398px;min-height:377px;padding:24px 24px 36px}
.cond-mid{flex:0 0 428px;display:flex;flex-direction:column;gap:12px}
.cond-b{flex:0 0 166px;padding:24px;display:flex;align-items:center}
.cond-c{flex:1 1 auto;padding:24px;display:flex;align-items:center}
.cond-right{flex:1 1 350px;display:flex;flex-direction:column;gap:12px}

.cond-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px}
.stat{display:flex;flex-direction:column;gap:8px}
.stat-label{font-size:18px;line-height:20px;font-weight:600;color:var(--muted)}
.stat-title{font-size:24px;line-height:26px;font-weight:600}

/* stacked-blur number, exactly as the Figma "Glow" group */
.glowtext{position:relative;display:block;height:64px}
.glowtext i,.glowtext b{
  position:absolute;left:0;top:0;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:700;font-size:64px;line-height:64px;letter-spacing:-4.5px;
  font-style:normal;
  white-space:nowrap;
}
.glowtext i{color:var(--green)}
.glowtext i:nth-child(1){filter:blur(60px)}
.glowtext i:nth-child(2){filter:blur(30px);opacity:.5}
.glowtext i:nth-child(3){filter:blur(16px);opacity:.4}
.glowtext b{
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.93) 55%,rgba(255,255,255,0) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* 3D artwork, positions/rotation taken from the frame */
.cond-art{position:absolute;z-index:1;pointer-events:none;max-width:none}
.cond-art--trophy{left:28px;  top:77px;  width:477px;height:485px}
.cond-art--bolt  {left:217px; top:-72px; width:222px;height:286px}
.cond-art--bell  {left:146px; top:-46px; width:395px;height:395px}

.chips-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* right column rows (350×118) */
.cond-row{
  flex:1 1 0;min-height:118px;
  display:flex;align-items:center;gap:16px;
  padding:30px 24px;
}
.iconbox{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:12px;background:var(--surface);
}
.iconbox img{width:32px;height:32px}
.cond-row-txt{font-size:18px;line-height:22px;font-weight:600}

/* ============================================================
   PLANS  (1200 · gap 12 · 838 | 350)
   ============================================================ */
.plans{display:flex;gap:12px;align-items:flex-start}
.plans-left{flex:1 1 838px;min-width:0;display:flex;flex-direction:column;gap:12px}

.plan-head{display:flex;align-items:center;justify-content:space-between;gap:32px}
.plan-head h3{font-size:24px;line-height:29px;font-weight:600}
.plan-price{display:flex;align-items:center;gap:32px}
.price{display:flex;flex-direction:column;gap:7px}
.price-label{font-size:14px;line-height:19px;font-weight:600;color:var(--muted)}
.price-val{font-size:26px;line-height:31px;font-weight:600}

.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:14px;line-height:19px;font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:4px}

/* spec cells (150×71, radius 12) */
.spec-grid{display:flex;gap:4px;flex-wrap:wrap}
.spec-cell{
  flex:1 1 150px;min-width:150px;
  display:flex;flex-direction:column;gap:4px;
  padding:12px;border-radius:12px;background:var(--surface);
}
.spec-k{font-size:12px;line-height:16px;font-weight:600;color:var(--muted);white-space:nowrap}
.spec-v{font-size:20px;line-height:27px;font-weight:600}

.spec-list{display:flex;flex-direction:column;gap:12px}
.spec-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.spec-row span{font-size:14px;line-height:19px;font-weight:600;color:var(--muted);white-space:nowrap}
.spec-row b{font-size:16px;line-height:22px;font-weight:600;text-align:right}

/* steps card (350×504, radius 24, no fill) */
.steps{
  flex:0 0 350px;
  display:flex;flex-direction:column;gap:32px;
  padding:24px;border-radius:24px;
}
.steps h3{font-size:24px;line-height:33px;font-weight:600}
.steps-list{position:relative;display:flex;flex-direction:column;gap:36px}
/* connector segments between numbered chips only — sized in JS from actual
   chip positions, so the line never overlaps a chip or trails past the last one */
.steps-line{position:absolute;left:20px;width:1px;background:rgba(255,255,255,.2)}
.step{position:relative;display:flex;align-items:flex-start;gap:12px}
.step-ico{flex:none;width:32px;height:32px}
.step-ico img{width:32px;height:32px}
.step-txt{display:flex;flex-direction:column;gap:8px}
.step-txt strong{font-size:18px;line-height:23px;font-weight:600}
.step-txt p{font-size:16px;line-height:21px;font-weight:500;color:var(--muted)}

/* payment methods row */
.paymethods{display:flex;flex-direction:column;align-items:center;gap:24px}
.paymethods-label{font-size:18px;line-height:22px;font-weight:500;color:var(--muted)}

/* ============================================================
   REVIEWS  (4 columns × 360, gap 12, full-bleed 1476, staggered)
   ============================================================ */
.block--reviews{overflow:hidden}
.reviews{
  position:relative;z-index:2;
  display:flex;gap:12px;justify-content:center;
  width:1476px;max-width:none;margin:50px auto 0;
}
.rev-col{flex:0 0 360px;display:flex;flex-direction:column;gap:12px}
.rev-col--1{margin-top:106px}
.rev-col--2{margin-top:0}
.rev-col--3{margin-top:29px}
.rev-col--4{margin-top:153px}

.review{display:flex;flex-direction:column;gap:24px;padding:24px}
.review-stars{width:128px;height:24px}
.review-body{display:flex;flex-direction:column;gap:32px;justify-content:space-between;flex:1}
.review-text{display:flex;flex-direction:column;gap:16px}
.review h4{font-size:20px;line-height:22px;font-weight:600}
.review p{font-size:16px;line-height:24px;font-weight:500;color:var(--muted)}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:26px}
.review-foot strong{font-size:16px;line-height:18px;font-weight:600}
.review-foot span{font-size:14px;line-height:15px;font-weight:500;color:var(--muted)}

/* trustpilot strip */
.trust{display:flex;flex-direction:column;align-items:center;gap:16px}
.trust-top{display:flex;align-items:center;gap:12px}
.trust-word{font-size:24px;line-height:31px;font-weight:500}
.trust-stars{width:128px;height:24px}
.trust-bottom{display:flex;align-items:center;gap:8px;font-size:18px;line-height:23px;font-weight:500}
.trust-logo{
  display:flex;align-items:center;justify-content:center;
  padding:7px 10px 8px 8px;border-radius:12px;background:var(--surface);
}
.trust-logo img{width:98px;height:24px;object-fit:contain}

/* ============================================================
   FAQ  (637 wide, centred, gap 12)
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:12px;width:637px;max-width:100%;margin:0 auto}
.faq-item{padding:18px 24px}
.faq-item[open]{padding:24px}
.faq-item::after{display:none}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  list-style:none;cursor:pointer;
  font-size:20px;line-height:22px;font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-btn{
  position:relative;flex:none;
  width:40px;height:40px;border-radius:80px;background:var(--surface);
}
.faq-btn::before,.faq-btn::after{
  content:"";position:absolute;left:50%;top:50%;
  background:#fff;border-radius:1px;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease,transform .2s ease;
}
.faq-btn::before{width:14px;height:2px}
.faq-btn::after{width:2px;height:14px}
.faq-item[open] .faq-btn::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq-body{padding-top:24px}
.faq-item p{font-size:16px;line-height:24px;font-weight:500;color:var(--muted)}

.faq-more{display:flex;flex-direction:column;align-items:center;gap:24px}
.faq-more > span{font-size:18px;line-height:23px;font-weight:500}
.faq-more .btn{min-width:232px}

/* ============================================================
   CTA + FOOTER  (card 1200×406, radius 36)
   ============================================================ */
/* belt-and-braces: both glows are already sized to stay inside this
   section's own box (see .glow--cta-l/r above), so this shouldn't clip
   anything visible — it's just a guard against this being the very last
   section, where any stray overflow inflates the page's scrollable
   height with invisible empty space below the real content. */
.block--cta{padding-bottom:0;overflow:hidden}
.block--cta .hexgrid{top:auto;bottom:0}

.cta{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  min-height:406px;
  padding:54px 64px 64px;
  border-radius:36px;
  background:var(--surface);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  overflow:hidden;
}
.cta::before{
  content:"";position:absolute;left:-114px;top:-354px;
  width:579px;height:573px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.cta-left{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;max-width:430px}
.cta-txt{display:flex;flex-direction:column;gap:18px}
.cta-txt h2{font-size:54px;line-height:65px;font-weight:600}
.cta-txt p{font-size:20px;line-height:26px;font-weight:500;color:var(--muted);max-width:402px}
.cta-btns{display:flex;gap:12px}
.cta-btns .btn:first-child{min-width:232px}
.cta-btns .btn:last-child{min-width:186px;padding:0 36px}

.cta-stats{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:352px}
.statcard{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:82px;padding:24px 32px;
  border-radius:18px;background:var(--surface);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.statcard b{font-size:36px;line-height:40px;font-weight:600}
.statcard span{font-size:16px;line-height:22px;font-weight:500;color:var(--muted);text-align:right}

.head--footer{margin-top:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .hero-visual{transform:translateX(-50%) scale(.86);transform-origin:top center;height:386px}
  .reviews{
    width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;
    scroll-snap-type:x mandatory;
    padding-left:20px;padding-right:20px;
  }
  .rev-col{scroll-snap-align:start}
  .rev-col--1,.rev-col--2,.rev-col--3,.rev-col--4{margin-top:0}
}

@media (max-width:1100px){
  .cond{flex-wrap:wrap}
  .cond-a,.cond-mid{flex:1 1 100%}
  .cond-right{flex:1 1 100%;flex-direction:row}
  .plans{flex-direction:column}
  .plans-left,.steps{flex:1 1 100%;width:100%}
  .cta{flex-direction:column;align-items:stretch;padding:40px}
  .cta-left{max-width:none}
  .cta-stats{width:100%}
}

@media (max-width:900px){
  .menu{
    display:none;
    position:absolute;left:0;right:0;top:60px;
    flex-direction:column;align-items:center;gap:0;
    padding:12px 0;
    background:rgba(9,9,11,.97);
    border-radius:18px;
    border:1px solid var(--hairline);
  }
  .menu.is-open{display:flex}
  .menu a{width:100%;padding:14px 0;text-align:center}
  .burger{display:flex}
  .head-login,.head-flag{display:none}

  .hero{padding-bottom:40px}
  h1{font-size:38px;line-height:46px}
  .hero-sub{font-size:17px;line-height:25px}
  .hero-visual{transform:translateX(-50%) scale(.55);height:250px;margin-bottom:-40px}

  .block{padding:56px 0}
  .block > .container,.hero > .container{gap:36px}
  .sec-title{font-size:30px;line-height:38px}
  .sec-sub{font-size:17px;line-height:24px}

  .cond-right{flex-direction:column}
  .card--lg{padding:24px;border-radius:24px}
  .plan-head{flex-direction:column;align-items:flex-start;gap:20px}
  .plan-price{width:100%;justify-content:space-between}
  .spec-row{flex-direction:column;gap:4px}
  .spec-row b{text-align:left}

  .faq{width:100%}
  .cta-txt h2{font-size:36px;line-height:44px}
  .cta-btns{flex-direction:column}
  .cta-btns .btn{width:100%}
  .statcard{padding:20px 24px}
  .statcard b{font-size:28px;line-height:34px}

  .head--footer{flex-direction:column;gap:24px;height:auto}
  .head--footer .menu{position:static;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;background:none;border:0;padding:0;gap:18px}
  .head--footer .menu a{width:auto;padding:0}
}

@media (max-width:560px){
  .hero-visual{transform:translateX(-50%) scale(.4);height:180px;margin-bottom:-60px}
  .cond-a{min-height:320px}
  .glowtext,.glowtext i,.glowtext b{font-size:52px;line-height:52px;height:52px;letter-spacing:-3px}
  .paylogos--lg .paylogo{width:60px;padding:8px 14px}
}

@media (max-width:400px){
  /* keep "Funded trading with" on one line instead of an orphaned "with" */
  h1{font-size:32px;line-height:40px}
}

/* ============================================================
   MOTION — scroll reveals, hover polish, parallax drift
   All of it is opt-in via [data-reveal]/[data-parallax], added by JS,
   and fully disabled under prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* :where() keeps this at zero specificity, so elements that already carry
     their own load-bearing transform (.hero-visual's centering translateX)
     always win the cascade and only fade in, instead of having their
     transform clobbered by the generic translateY reveal. */
  :where([data-reveal]){
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),
               transform .8s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--reveal-delay,0s);
  }
  :where([data-reveal].is-visible){opacity:1;transform:none}

  /* decorative background drift, driven by scroll/mouse position in JS */
  .glow{transform:translate(calc(-50% + var(--px,0px)),var(--py,0px))}
  .glow--hero-r{transform:translate(calc(-50% + var(--px,0px)),var(--py,0px))}
  .glow--hero-l{transform:translate(calc(-50% + var(--px,0px)),var(--py,0px))}
  .glow--cta-l{transform:translate(calc(-50% + var(--px,0px)),var(--py,0px))}
  .glow--cta-r{transform:translate(calc(-50% + var(--px,0px)),var(--py,0px))}
}

/* card lift on hover — smaller, self-contained tiles only */
.card{transition:transform .35s cubic-bezier(.16,1,.3,1),
                  border-color .35s ease, box-shadow .35s ease}
.review,.statcard,.cond-row{border:1px solid transparent}
.review:hover,.statcard:hover,.cond-row:hover{
  transform:translateY(-4px);
  border-color:rgba(25,217,141,.35);
  box-shadow:0 20px 40px -20px rgba(25,217,141,.28);
}
.faq-item{transition:border-color .3s ease,transform .3s ease}
.faq-item:hover{border-color:rgba(255,255,255,.14)}

/* pills / logos lift */
.tip,.chip,.paylogo{transition:transform .25s ease,background .25s ease,border-color .25s ease}
button.tip:hover,.chip:hover{transform:translateY(-2px)}
.paylogo:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.iconbox{transition:background .3s ease,transform .3s ease}
.cond-row:hover .iconbox{background:rgba(25,217,141,.16);transform:scale(1.06)}

/* nav underline sweep */
.menu a{position:relative}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--green);transition:right .3s cubic-bezier(.16,1,.3,1);
}
.menu a:hover::after{right:0}

/* button shine sweep on hover */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(130%)}

/* glow-text pop on hover for the big stat numbers */
.glowtext{transition:filter .3s ease}
.cond-a:hover .glowtext,.cond-b:hover .glowtext{filter:brightness(1.15)}

/* animated FAQ open/close instead of the native abrupt jump.
   Details' UA stylesheet hides non-summary children with
   `details:not([open]) > :not(summary){display:none}` — override that
   (two classes beats it on specificity) so our own grid-rows collapse
   drives the reveal instead of the browser's instant show/hide. */
.faq-item{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}
.faq-item[open]{grid-template-rows:auto 1fr}
.faq-item summary{grid-row:1}
.faq-item .faq-body{display:block;overflow:hidden;min-height:0}
.faq-body p{padding-top:0}
@media (prefers-reduced-motion: reduce){
  .faq-item{transition:none}
}