/* FM Tactic Lab "neon stadium" theme + motion layer (Instagram graphic style: neon green, heavy italic display
   type, slanted light streaks, floodlight bokeh). Loaded after glass.css; the Exo 2 font link sits next to it.
   Static styling works without JS. Everything that moves is inside @media (prefers-reduced-motion:no-preference).
   Scroll reveal never hides content unless motion.js runs and the element starts below the fold (.mo-wait). */
:root{--neon:#2bff9a;--neon2:#37f28b;--neon-glow:rgba(43,255,154,.5);
  --disp:"Exo 2","Arial Black",system-ui,sans-serif}

/* ---------- Site-wide stadium atmosphere (fixed layer above the photo, below content) ---------- */
html:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  /* floodlight clusters, top-left and top-right */
  radial-gradient(5px 5px at 6% 9%,#eafff3 40%,transparent 100%),radial-gradient(5px 5px at 8.5% 8%,#eafff3 40%,transparent 100%),
  radial-gradient(5px 5px at 11% 9.5%,#eafff3 40%,transparent 100%),radial-gradient(4px 4px at 7.5% 12%,#eafff3 40%,transparent 100%),
  radial-gradient(5px 5px at 94% 9%,#eafff3 40%,transparent 100%),radial-gradient(5px 5px at 91.5% 8%,#eafff3 40%,transparent 100%),
  radial-gradient(5px 5px at 89% 9.5%,#eafff3 40%,transparent 100%),radial-gradient(4px 4px at 92.5% 12%,#eafff3 40%,transparent 100%),
  radial-gradient(160px 120px at 8.5% 10%,rgba(200,255,225,.30),transparent 70%),
  radial-gradient(160px 120px at 91.5% 10%,rgba(200,255,225,.30),transparent 70%),
  radial-gradient(520px 380px at 8% 6%,rgba(43,255,154,.16),transparent 70%),
  radial-gradient(520px 380px at 92% 6%,rgba(43,255,154,.16),transparent 70%),
  /* soft bokeh */
  radial-gradient(26px 26px at 22% 30%,rgba(43,255,154,.20),transparent 70%),radial-gradient(18px 18px at 78% 38%,rgba(220,255,236,.16),transparent 70%),
  radial-gradient(34px 34px at 64% 22%,rgba(43,255,154,.14),transparent 70%),radial-gradient(14px 14px at 36% 16%,rgba(255,255,255,.18),transparent 70%),
  /* pitch glow at the bottom */
  radial-gradient(1200px 260px at 50% 104%,rgba(43,255,154,.20),transparent 70%)}
@media (max-width:700px){html:after{background:
  radial-gradient(4px 4px at 10% 6%,#eafff3 40%,transparent 100%),radial-gradient(4px 4px at 15% 5%,#eafff3 40%,transparent 100%),
  radial-gradient(4px 4px at 90% 6%,#eafff3 40%,transparent 100%),radial-gradient(4px 4px at 85% 5%,#eafff3 40%,transparent 100%),
  radial-gradient(120px 90px at 12% 6%,rgba(200,255,225,.25),transparent 70%),radial-gradient(120px 90px at 88% 6%,rgba(200,255,225,.25),transparent 70%),
  radial-gradient(500px 200px at 50% 104%,rgba(43,255,154,.18),transparent 70%)}}

/* ---------- Display type ---------- */
h1,h2,h3,.logo,.btn,.price,.count b,summary{font-family:var(--disp)}
h1,h2{font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
h3{font-style:italic;font-weight:800;letter-spacing:0}
.logo{font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.price{font-style:italic}

/* ---------- Homepage hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:96px 0 72px!important}
.hero>.wrap{position:relative;z-index:2}
/* big slanted neon streaks (one wide glow beam + a thin echo line) */
.hero:before{content:"";position:absolute;z-index:1;pointer-events:none;top:-40%;right:-2%;width:560px;height:190%;
  transform:skewX(-32deg);will-change:transform;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 88%);mask-image:linear-gradient(180deg,#000 62%,transparent 88%);background:
  linear-gradient(90deg,transparent 0,rgba(43,255,154,.35) 5%,rgba(220,255,236,.85) 6.5%,rgba(43,255,154,.35) 8%,transparent 13%,
    transparent 34%,rgba(43,255,154,.05) 40%,rgba(43,255,154,.28) 58%,rgba(43,255,154,.75) 66%,rgba(230,255,240,.95) 68%,rgba(43,255,154,.75) 70%,rgba(43,255,154,.28) 78%,rgba(43,255,154,.05) 92%,transparent 100%)}
/* floodlight haze + bokeh inside the hero */
.hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(70px 70px at 70% 18%,rgba(220,255,236,.22),transparent 70%),
  radial-gradient(110px 110px at 84% 10%,rgba(43,255,154,.24),transparent 70%),
  radial-gradient(46px 46px at 95% 32%,rgba(255,255,255,.16),transparent 70%),
  radial-gradient(140px 140px at 58% 6%,rgba(43,255,154,.14),transparent 70%),
  radial-gradient(30px 30px at 50% 70%,rgba(43,255,154,.16),transparent 70%),
  radial-gradient(900px 480px at 80% 0%,rgba(43,255,154,.22),transparent 65%),
  linear-gradient(180deg,transparent 60%,rgba(4,10,7,.55) 100%)}
@media (max-width:700px){
  .hero{padding:56px 0 44px!important}
  .hero:before{right:-260px;width:430px;opacity:.6}
}
.hero h1{font-size:clamp(42px,7.4vw,96px);line-height:1.06;letter-spacing:-.015em;margin:22px 0 18px;max-width:15ch;
  text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero h1 em{display:inline;font-style:italic;color:var(--neon);
  background:linear-gradient(100deg,#2bff9a 0%,#37f28b 50%,#c4ffdf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:0 .1em 0 .02em;margin:0 -.08em 0 -.02em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-shadow:none;filter:drop-shadow(0 0 22px rgba(43,255,154,.55))}
.hero .lead{color:#d3e6dc;font-size:clamp(17px,1.9vw,21px)}
.hero .badge{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  box-shadow:0 0 0 1px rgba(255,211,77,.16),0 0 28px -6px rgba(255,211,77,.45)}
.hero .count div{border-color:rgba(43,255,154,.35)!important;transform:skewX(-8deg)}
.hero .count div>*{transform:skewX(8deg)}
.hero .count b{font-style:italic;font-weight:900;font-size:36px;color:var(--neon);text-shadow:0 0 18px var(--neon-glow)}

/* ---------- Section headings: slanted neon bar (igtable header style) ---------- */
section>.wrap>h2,main>h2{position:relative;font-size:clamp(26px,3.6vw,42px);line-height:1.05;padding:0 0 0 26px;margin-top:0}
main>h2{margin-top:44px;font-size:clamp(24px,3.2vw,32px)}
section>.wrap>h2:before,main>h2:before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:12px;
  background:linear-gradient(180deg,#c4ffdf,var(--neon) 40%,var(--neon2));transform:skewX(-18deg);border-radius:2px;
  box-shadow:0 0 18px var(--neon-glow),0 0 2px #fff}
section>.wrap>h2:after,main>h2:after{content:"";display:block;height:3px;margin:12px 0 0 -26px;max-width:340px;
  background:linear-gradient(90deg,var(--neon),rgba(43,255,154,.35) 45%,transparent);transform:skewX(-30deg);transform-origin:left center}
#masterclass h2{font-size:clamp(20px,2.4vw,26px)!important}
main>h1{font-size:clamp(34px,5.6vw,64px)!important;line-height:1!important;letter-spacing:-.01em!important;
  background:linear-gradient(100deg,#ffffff 0%,#eafff3 42%,#2bff9a 72%,#37f28b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-right:.08em;filter:drop-shadow(0 0 22px rgba(43,255,154,.28))}

/* ---------- Cards: stronger contrast, neon accent edge ---------- */
.card{position:relative;background:linear-gradient(160deg,rgba(18,44,31,.86),rgba(7,18,13,.88))!important;border-color:rgba(43,255,154,.20)!important}
.card:before{content:"";position:absolute;left:18px;right:60%;top:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--neon),transparent);box-shadow:0 0 12px var(--neon-glow);border-radius:2px}
.card:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(43,255,154,.7),0 18px 50px -12px rgba(43,255,154,.45),inset 0 1px 0 rgba(43,255,154,.3)}
.card h3{font-size:21px;line-height:1.15}
.pro{position:relative;border-color:rgba(43,255,154,.55)!important;
  box-shadow:0 0 0 1px rgba(43,255,154,.25),0 0 60px -10px rgba(43,255,154,.45)!important}

.pick a,.rel a{background:linear-gradient(160deg,rgba(18,44,31,.86),rgba(7,18,13,.88))!important;border-color:rgba(43,255,154,.22)!important;box-shadow:inset 3px 0 0 var(--neon2)}
.pick b,.rel b{font-family:var(--disp);font-style:italic;font-weight:800}

/* ---------- Glowing chips ---------- */
.tag{font-family:var(--disp);font-style:italic;font-weight:800;letter-spacing:.02em}
.tag.g{color:#04140b!important;background:linear-gradient(100deg,#2bff9a,#37f28b)!important;border-color:transparent!important;box-shadow:0 0 14px rgba(43,255,154,.45)}
.tag.y{box-shadow:0 0 12px -2px rgba(255,211,77,.35)}
html .igt-chip{font-family:var(--disp);font-style:italic;font-weight:900}
html .igt-val{background:linear-gradient(100deg,#2bff9a,#37f28b);box-shadow:0 0 18px rgba(43,255,154,.55),0 0 0 1px rgba(200,255,225,.4) inset}
@media (min-width:701px){html .igt-chip{font-size:16px;padding:6px 9px}html .igt-val{min-width:70px}}
html .igt thead th{font-family:var(--disp);font-style:italic;box-shadow:0 0 18px rgba(43,255,154,.35)}

/* ---------- Buttons ---------- */
.btn{font-style:italic;text-transform:uppercase;letter-spacing:.02em}
.btn.primary,.cta,.fmtl-signup button{box-shadow:0 0 0 1px rgba(200,255,225,.35) inset,0 8px 28px -6px var(--neon-glow),0 0 22px -4px rgba(43,255,154,.5)}
.btn.primary{position:relative;overflow:hidden;background:linear-gradient(100deg,#2bff9a,#37f28b)!important}
.btn.primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);opacity:0}
.fmtl-signup{border-color:rgba(43,255,154,.55)!important;box-shadow:0 0 50px -14px rgba(43,255,154,.45)}
.fmtl-signup h2{font-size:clamp(20px,2.6vw,26px)!important;line-height:1.15}

/* ---------- Scroll progress bar ---------- */
.mo-prog{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--neon2),#c4ffdf);box-shadow:0 0 12px var(--neon-glow)}

/* ---------- Motion (only when the user allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero:before{animation:mo-streak 7s ease-in-out infinite alternate}
  .hero:after{animation:mo-bokeh 4.5s ease-in-out infinite alternate}
  html:after{animation:mo-bokeh 6s ease-in-out infinite alternate}
  @keyframes mo-streak{0%{transform:translate3d(0,0,0) skewX(-32deg)}100%{transform:translate3d(-70px,0,0) skewX(-32deg)}}
  @keyframes mo-bokeh{0%{opacity:.65}100%{opacity:1}}

  /* hero entrance (plays once; the resting state is the visible end state) */
  .hero .badge,.hero h1,.hero .lead,.hero .btns,.hero .count{animation:mo-up .8s cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation-name:mo-slam;animation-duration:.9s;animation-delay:.05s}
  .hero .lead{animation-delay:.18s}.hero .btns{animation-delay:.26s}.hero .count{animation-delay:.34s}
  @keyframes mo-up{0%{opacity:0;transform:translate3d(0,18px,0)}100%{opacity:1;transform:none}}
  @keyframes mo-slam{0%{opacity:0;transform:translate3d(-40px,0,0)}100%{opacity:1;transform:none}}

  /* hover lift + neon edge */
  @media (hover:hover){
    html .card,html .card:hover{transition:transform .28s cubic-bezier(.2,.7,.2,1),background .2s}
    .card:after{transition:opacity .28s}
    a.card:hover,article.card:hover,.grid>.card:hover,.pick a:hover,.rel a:hover{transform:translate3d(0,-6px,0)}
    .pick a,.rel a{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
    .card:hover:after{opacity:1}
    .btn,.cta,.fmtl-signup button,.chip,.rflt button{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
    .btn:hover,.cta:hover,.fmtl-signup button:hover:not(:disabled){transform:translate3d(0,-2px,0)}
    .chip:hover,.rflt button:hover{transform:translate3d(0,-1px,0)}
    .btn.primary:hover:after{opacity:1;transform:translateX(400%) skewX(-20deg);transition:transform .7s ease,opacity .2s}
  }

  /* scroll reveal: .mo-wait is only ever added by motion.js to elements below the fold */
  .mo-rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--mo-d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--mo-d,0s)}
  .mo-rv.mo-wait{opacity:0;transform:translate3d(0,28px,0)}
  h2.mo-rv:after{transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--mo-d,0s) + .25s)}
  h2.mo-wait:after{transform:skewX(-30deg) scaleX(0)}
}
@media (prefers-reduced-motion:reduce){.mo-prog{display:none}}
@media print{.mo-prog,.hero:before,html:after{display:none}.mo-wait{opacity:1!important;transform:none!important}}

/* Higgsfield hero background video (neon tactics pitch); sits under the haze layer, hidden for reduced motion */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.7) 0%,#000 50%);mask-image:linear-gradient(90deg,rgba(0,0,0,.7) 0%,#000 50%)}
@media (max-width:700px){.hero-vid{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none}}