/* Meridian FX — shared additions on top of the core four stylesheets.
   Loaded last on every page. Two jobs:
   1. a light-surface component layer so `.on-light` sections read correctly
      (the core components are dark-glass by default);
   2. shared building blocks used across pages — hero, lead form, service tiles. */

/* ============ exaggerated scroll blur ============ */
/* Elements defocus hard when off-screen and snap into focus as they enter — and
   blur back out again on the way out (animate.js removes .is-visible on exit).
   Overrides the core animations.css reveal. */
[data-animate]:not([data-animate="draw-line"]){
  filter:blur(16px);
  transition:opacity 900ms var(--ease-soft),
             transform 1000ms var(--ease-soft),
             filter 1100ms var(--ease-soft);
}
[data-animate="fade-up"]{transform:translateY(48px)}
[data-animate="fade-up-sm"]{transform:translateY(24px)}
[data-animate="fade-in"]{transform:translateY(10px)}
[data-animate="scale-in"]{transform:scale(.9)}
[data-animate="blur-in"]{filter:blur(30px);transform:translateY(36px)}
[data-animate="from-left"]{transform:translateX(-46px)}
[data-animate="from-right"]{transform:translateX(46px)}
[data-animate].is-visible{filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  [data-animate]:not([data-animate="draw-line"]){filter:none;transition:none}
}

/* ============ brand wordmark ============ */
.brand{font-weight:700;letter-spacing:-.04em;font-family:var(--font-body);font-size:17px}
.brand span{color:var(--gold-bright)}
.site-nav{background:rgba(11,7,16,.82)}

/* ============ headline emphasis ============ */
h1 em,h2 em,h3 em{text-shadow:var(--gold-glow-soft)}

/* ============ inner-page bands (dark) ============
   Kept the `.on-light` name so all the section markup still works — these bands
   are just a slightly raised dark surface now, not a light one. */
.on-light{background:var(--paper);border-top:1px solid var(--line)}
.on-light + .on-light{border-top:0}
.on-light .eyebrow{color:var(--gold-bright)}
.on-light .eyebrow::before{background:var(--gold-bright)}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{color:var(--text-on-light)}
.on-light p{color:var(--text-on-light-dim)}
.on-light .text-link{color:var(--text-on-light)}

/* black glass: a near-black translucent fill over a real backdrop blur, with a
   hairline top highlight so the panel edge catches light. Saturation is kept
   (rather than the core's saturate(0)) so a hint of the parallax glow diffuses
   through the pane — that bleed is what makes it read as glass and not paint. */
.on-light .card,.on-light .panel{
  background:rgba(5,3,10,.58);border-color:rgba(255,255,255,.085);
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.055);
}
.on-light .card p{color:var(--text-on-light-dim)}
.on-light .card .tag,.on-light .card h3{color:var(--text-on-light)}
.on-light .card .tag{color:var(--gold-bright)}
.on-light .card:hover{border-color:var(--gold-line);
  background:rgba(8,4,16,.6);
  box-shadow:0 28px 56px -26px rgba(139,61,255,.5),var(--gold-glow-soft),inset 0 1px 0 rgba(255,255,255,.08)}

.on-light .button.outline{border-color:var(--line-strong);color:var(--text-on-light)}
.on-light .button.outline:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

.on-light .tab-btn{background:var(--ink-3);border-color:var(--line);color:var(--text-on-light-dim)}
.on-light .tab-btn strong{color:var(--text-on-light)}
.on-light .tab-btn.active{background:var(--ink-4);border-color:var(--gold-bright);color:var(--text-on-light)}
.on-light .step-node::before{background:var(--line)}
.on-light .step-num{background:var(--ink-3);border-color:var(--line-strong);color:var(--text-on-light-dim)}
.on-light .step-node h3{color:var(--text-on-light)}
.on-light .step-node p{color:var(--text-on-light-dim)}
.on-light .disclosure{background:rgba(255,255,255,.02);border-color:var(--line)}
.on-light .risk-item p{color:var(--text-on-light-dim)}
.on-light .badge{background:rgba(139,61,255,.12);color:var(--gold-bright);box-shadow:none}

/* ============ hero ============ */
/* Extra bottom padding reserves a lane for the absolutely-positioned .scroll-cue,
   so it never lands on top of the CTA row on narrow screens. */
.hero{overflow:hidden;position:relative;padding-bottom:calc(var(--gap-2xl) + 30px)}
@media (max-width:760px){.hero{padding-bottom:calc(var(--gap-xl) + 38px)}}
.hero::before{content:'';position:absolute;top:-160px;left:50%;width:900px;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(139,61,255,.28), transparent 66%);
  pointer-events:none;z-index:0}
/* lift the hero's content above that glow — but NOT the decorative children that
   rely on being absolutely positioned inside the section (this rule would
   otherwise drop them back into normal flow) */
.hero > *{position:relative;z-index:1}
.hero > .scroll-cue,.hero > .sparkle-layer{position:absolute}
.hero > .scroll-cue{z-index:5}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-top:var(--gap-lg)}
.hero h1{font-size:clamp(30px,7.4vw,86px)}
.hero-copy{margin-top:var(--gap-md);font-size:17px;color:var(--text-on-dark-dim);max-width:52ch}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px}}

/* soft violet orbs behind the hero visual */
.orb{position:absolute;border-radius:50%;filter:blur(56px);opacity:.68;pointer-events:none;animation:float-y 9s ease-in-out infinite}
.orb-one{width:320px;height:320px;background:radial-gradient(circle,#9a4dff,transparent 68%);top:-40px;right:-30px}
.orb-two{width:240px;height:240px;background:radial-gradient(circle,#4c9fc4,transparent 70%);bottom:-50px;left:-20px;animation-delay:-4s}

.hero-visual{position:relative;border-radius:var(--radius-lg);padding:26px}
.hero-visual .quote-card{position:absolute;left:18px;bottom:18px;background:rgba(11,7,16,.75);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 14px;backdrop-filter:blur(8px)}
.hero-visual .quote-card small{font:10px var(--font-mono);letter-spacing:.1em;color:var(--text-on-dark-faint);text-transform:uppercase;display:block}
.hero-visual .quote-card strong{font:600 20px var(--font-mono);color:var(--gold-bright)}

/* ============ service tiles ============ */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:var(--gap-lg)}
@media (max-width:860px){.service-grid{grid-template-columns:1fr}}
.service{display:flex;flex-direction:column;gap:12px;padding:28px}
.service .svc-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#fff;font-size:19px;flex:none}
.service h3{font-size:21px}
.service .svc-meta{margin-top:auto;font:10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}

/* ============ lead form (contact + inline) ============ */
.lead-form{display:grid;gap:16px}
.lead-form .row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:620px){.lead-form .row{grid-template-columns:1fr}}
.lead-form label{display:block;font:10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-light-dim);margin-bottom:7px}
.on-dark-form label{color:var(--text-on-dark-faint)}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;font:15px var(--font-body);color:var(--text-on-light);background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:13px 14px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.lead-form select option{background:var(--ink-3);color:var(--text-on-light)}
.lead-form textarea{min-height:120px;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(139,61,255,.22)}
.lead-form .form-status{font:12px var(--font-mono);min-height:1.2em}
.lead-form .form-status.ok{color:#2f9e6e}
.lead-form .form-status.err{color:#c2455f}
.lead-form button[type=submit]{justify-content:center;border:0;cursor:pointer;width:100%}
.form-consent{display:flex;gap:10px;align-items:flex-start;font:12px/1.5 var(--font-mono);color:var(--text-on-light-dim)}
.form-consent input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--gold)}

/* ============ pipeline / journey strip ============ */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--gap-lg);counter-reset:pl}
@media (max-width:860px){.pipeline{grid-template-columns:1fr}}
.pipeline .stage{position:relative;padding:22px 20px;border:1px solid var(--line-on-light);border-right:0}
.pipeline .stage:last-child{border-right:1px solid var(--line-on-light)}
@media (max-width:860px){.pipeline .stage{border-right:1px solid var(--line-on-light);border-bottom:0}.pipeline .stage:last-child{border-bottom:1px solid var(--line-on-light)}}
.pipeline .stage::before{counter-increment:pl;content:counter(pl,decimal-leading-zero);font:10px var(--font-mono);color:var(--gold-bright);letter-spacing:.1em}
.pipeline .stage h3{font-size:15px;margin:8px 0 6px}
.pipeline .stage p{font-size:13px}

/* dark-section form variant */
.on-dark .lead-form input,.on-dark .lead-form select,.on-dark .lead-form textarea{
  background:rgba(255,255,255,.04);border-color:var(--line-strong);color:var(--text-on-dark);
}
.on-dark .lead-form input:focus,.on-dark .lead-form textarea:focus,.on-dark .lead-form select:focus{border-color:var(--gold-bright)}

/* ============ telegram splash / lead gate (built by splash.js) ============ */
.tf-splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
  background:rgba(5,3,8,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.tf-splash.is-open{opacity:1;visibility:visible}
.tf-splash__card{position:relative;width:min(100%,460px);max-height:calc(100dvh - 40px);overflow:hidden;
  border:1px solid var(--gold-line);border-radius:16px;
  background:linear-gradient(160deg,#160c26,#070510 72%);
  box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 64px rgba(139,61,255,.2);
  padding:clamp(26px,5vw,40px);transform:translateY(18px) scale(.955);
  transition:transform .5s var(--ease-soft)}
.tf-splash.is-open .tf-splash__card{transform:none}
.tf-splash__bar{position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));box-shadow:0 0 12px rgba(185,140,255,.85)}
.tf-splash.is-open .tf-splash__bar{width:100%;transition:width 1s var(--ease-soft) .25s}
.tf-splash__brand{font:700 15px var(--font-body);letter-spacing:-.03em;color:var(--text-on-dark)}
.tf-splash__brand span{color:var(--gold-bright)}
.tf-splash__eyebrow{display:flex;align-items:center;gap:8px;margin:16px 0 12px;
  font:10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright)}
.tf-splash__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 8px var(--gold-bright);animation:blink-dot 1.5s infinite;flex:none}
.tf-splash__card h2{font-size:clamp(23px,5vw,29px);line-height:1.06;letter-spacing:-.04em;color:var(--text-on-dark);margin:0 0 12px}
.tf-splash__card h2 em{font-family:var(--font-display);font-style:italic;color:var(--gold-bright);font-weight:500;text-shadow:var(--gold-glow-soft)}
.tf-splash__card p{font-size:14px;line-height:1.55;color:var(--text-on-dark-dim);margin:0 0 20px}
.tf-splash__field{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  border-radius:10px;padding:4px 4px 4px 14px;background:rgba(255,255,255,.04);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.tf-splash__field:focus-within{border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(139,61,255,.22)}
.tf-splash__at{font:15px var(--font-mono);color:var(--text-on-dark-faint)}
.tf-splash__field input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text-on-dark);
  font:15px var(--font-body);padding:12px 0}
.tf-splash__submit{flex:none;border:0;cursor:pointer;border-radius:8px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#160016;
  font:600 13px var(--font-body);padding:12px 15px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--gold-glow-soft);transition:transform var(--dur-fast) var(--ease)}
.tf-splash__submit:hover{transform:translateY(-1px)}
.tf-splash__submit[disabled]{opacity:.6;cursor:default;transform:none}
.tf-splash__spin{width:13px;height:13px;border:2px solid rgba(20,0,20,.3);border-top-color:#160016;
  border-radius:50%;animation:tf-spin .6s linear infinite;display:none}
.tf-splash.is-sending .tf-splash__spin{display:block}
.tf-splash.is-sending .tf-splash__submit-label{opacity:.45}
@keyframes tf-spin{to{transform:rotate(360deg)}}
.tf-splash__msg{min-height:1em;font:12px var(--font-mono);margin:10px 2px 0}
.tf-splash__msg.ok{color:#7cf7b2}
.tf-splash__msg.err{color:#ff8095}
.tf-splash__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;
  font:11px var(--font-mono);color:var(--text-on-dark-faint)}
.tf-splash__skip{background:none;border:0;color:var(--text-on-dark-faint);cursor:pointer;font:inherit;
  text-decoration:underline;text-underline-offset:2px}
.tf-splash__skip:hover{color:var(--text-on-dark-dim)}
body.tf-splash-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .tf-splash,.tf-splash__card,.tf-splash__bar{transition:none}
  .tf-splash__card{transform:none}
  .tf-splash.is-open .tf-splash__bar{width:100%;transition:none}
  .tf-splash__eyebrow i,.tf-splash__spin{animation:none}
}

/* ============ hero trader chip ============ */
.hero-trader{display:flex;align-items:center;gap:11px;padding-left:20px;
  border-left:1px solid var(--line);margin-left:2px}
.ht-avatar{position:relative;flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-bright),var(--gold));
  box-shadow:0 0 0 2px rgba(185,140,255,.55),var(--gold-glow-soft)}
/* initials sit underneath; the photo layer covers them once the file exists,
   so a missing image degrades to a branded monogram instead of a broken icon */
.ht-fallback{font:700 15px var(--font-mono);font-style:normal;color:#16031f;letter-spacing:-.02em}
.ht-photo{position:absolute;inset:0;background-position:center;background-size:cover;
  background-image:url('../images/trader.jpg')}
.ht-meta{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.ht-meta b{font:600 12.5px var(--font-mono);color:var(--text-on-dark);letter-spacing:.01em}
.ht-meta small{font:10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-on-dark-faint)}
@media (max-width:620px){
  .hero-trader{padding-left:0;border-left:0;width:100%;margin-top:4px}
}

/* ============ broker brand block ============ */
.broker-brand{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--line)}
.broker-brand__mark{width:44px;height:44px;border-radius:9px;flex:none;
  box-shadow:0 6px 18px -8px rgba(224,85,43,.85)}
.broker-brand__text{display:flex;flex-direction:column;gap:2px}
.broker-brand__text b{font:700 17px var(--font-body);letter-spacing:-.02em;color:var(--text-on-light)}
.broker-brand__text small{font:9.5px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-on-light-dim)}

/* ============ Vantage hand-off gate ============ */
.bg-gate{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;
  background:rgba(4,2,7,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.bg-gate.is-open{opacity:1;visibility:visible}
.bg-card{width:min(100%,560px);max-height:calc(100dvh - 40px);overflow-y:auto;
  border:1px solid var(--gold-line);border-radius:18px;
  background:linear-gradient(165deg,#180d29,#07040e 76%);
  box-shadow:0 44px 130px rgba(0,0,0,.76),0 0 70px rgba(139,61,255,.2);
  padding:clamp(24px,4.5vw,36px);
  transform:translateY(16px) scale(.96);transition:transform .45s var(--ease-soft)}
.bg-gate.is-open .bg-card{transform:none}

.bg-steps{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.bg-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.bg-dot.is-on{background:var(--gold-bright);box-shadow:0 0 10px var(--gold-bright)}
.bg-line{flex:1;height:1px;background:rgba(255,255,255,.14);max-width:52px}

.bg-kicker{font:10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 10px}
.bg-card h2{font-size:clamp(24px,4.6vw,31px);line-height:1.05;letter-spacing:-.04em;
  color:var(--text-on-dark);margin:0 0 12px}
.bg-card h2 em{font-family:var(--font-display);font-style:italic;font-weight:500;
  color:var(--gold-bright);text-shadow:var(--gold-glow-soft)}
.bg-lead{font-size:14px;line-height:1.6;color:var(--text-on-dark-dim);margin:0 0 20px}
.bg-lead b,.bg-note b{color:var(--text-on-dark)}

/* the replica — a picture of Vantage's form, never a form */
.bg-shot{position:relative;border-radius:14px;padding:3px;
  background:linear-gradient(140deg,rgba(185,140,255,.5),rgba(139,61,255,.14));
  pointer-events:none;user-select:none}
.bg-shot__inner{position:relative;background:#fff;border-radius:12px;padding:20px 18px 18px;
  color:#14161b;font-family:var(--font-body)}
.bg-shot__inner h3{font:700 18px var(--font-body);letter-spacing:-.02em;color:#14161b;margin:0 0 12px}
.bg-shot__inner p{font-size:11.5px;line-height:1.5;color:#3c4049;margin:0 0 14px}
.bg-shot__label{display:block;font:600 11px var(--font-body);color:#14161b;margin-bottom:6px}
.bg-shot__input{border-radius:9px;background:#f2f3f5;color:#9aa0aa;font-size:12px;
  padding:11px 12px;margin-bottom:14px}
.bg-shot__check{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  font-size:11px;line-height:1.45;color:#3c4049;margin-bottom:11px;border-radius:7px}
.bg-shot__box{width:18px;height:18px;border:2px solid #74757b;border-radius:5px;background:#fff}
.bg-shot__check.is-flag{outline:2px solid rgba(139,61,255,.55);outline-offset:5px}
.bg-shot__cta{margin-top:14px;border-radius:999px;background:#14161b;color:#fff;text-align:center;
  font:700 13px var(--font-body);padding:12px}
.bg-shot__pin{position:absolute;top:52%;right:-10px;transform:translateY(-50%) rotate(90deg);
  transform-origin:right center;
  font:9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-bright);white-space:nowrap}

.bg-list{margin:0 0 18px;padding-left:20px;display:grid;gap:10px}
.bg-list li{font-size:14.5px;line-height:1.5;color:var(--text-on-dark-dim)}
.bg-list b{color:var(--text-on-dark)}
.bg-note{font-size:12.5px;line-height:1.6;color:var(--text-on-dark-faint);margin:0}

.bg-next{width:100%;justify-content:center;border:0;cursor:pointer;margin-top:22px}
body.bg-lock{overflow:hidden}

@media (max-width:520px){
  .bg-shot__pin{display:none}
  .bg-shot__check.is-flag{outline-offset:3px}
}
@media (prefers-reduced-motion:reduce){
  .bg-gate,.bg-card,.bg-dot{transition:none}
  .bg-card{transform:none}
}

/* ============ hero stat row ============ */
/* Overrides the core mobile treatment, which turned this into a cramped
   horizontal-scroll strip with 19px numbers. A grid reads better and keeps the
   counters big enough for the count-up animation to actually register. */
.stat-row{align-items:stretch;margin-top:var(--gap-lg);gap:26px}
.stat.partner{display:flex;flex-direction:row;align-items:center;gap:12px}
.stat-vlogo{width:30px;height:30px;border-radius:7px;flex:none;
  box-shadow:0 5px 14px -6px rgba(224,85,43,.8)}
.stat-partner-text{display:flex;flex-direction:column;gap:3px}

@media (max-width:760px){
  .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    overflow:visible;padding-bottom:0}
  .stat{flex:auto;padding:14px 15px;border:1px solid rgba(255,255,255,.085);
    border-radius:var(--radius-md);justify-content:center;
    background:rgba(5,3,10,.58);
    backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .stat strong{font-size:clamp(22px,6.5vw,28px)}
  .stat small{font-size:9.5px;letter-spacing:.09em;white-space:normal}
  .stat.partner{border-left:1px solid var(--line);padding-left:13px;
    justify-content:flex-start;gap:9px}
  .stat.partner b{font-size:12px}
  .stat-vlogo{width:26px;height:26px}
}
@media (max-width:360px){
  .stat-row{grid-template-columns:1fr}
}

/* ============ parallax scene ============ */
/* parallax.js publishes --p on the section: +1 below the fold, 0 centred,
   -1 once passed. Each layer picks its own depth here.
   Negative multipliers lag behind the scroll (background), positive ones lead. */
.px-scene{position:relative;isolation:isolate;overflow:hidden}
.px-back,.px-front{position:absolute;inset:0;pointer-events:none}
.px-back{z-index:0}
.px-front{z-index:3}
/* keep the real content between the two layers — none of these are absolutely
   positioned, so promoting them to relative is safe here */
.px-scene > *:not(.px-back):not(.px-front){position:relative;z-index:2}

.px-orb{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.px-orb-a{width:460px;height:460px;top:-90px;left:-130px;opacity:.5;
  background:radial-gradient(circle,#8b3dff,transparent 68%);
  transform:translate3d(0,calc(var(--p,0) * -110px),0)}
.px-orb-b{width:380px;height:380px;bottom:-110px;right:-90px;opacity:.38;
  background:radial-gradient(circle,#4c9fc4,transparent 70%);
  transform:translate3d(0,calc(var(--p,0) * 90px),0)}

/* thin drifting rules — they read as depth without drawing attention */
.px-rule{position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(185,140,255,.4),transparent);
  will-change:transform}
.px-rule-a{top:22%;transform:translate3d(0,calc(var(--p,0) * -60px),0)}
.px-rule-b{top:74%;transform:translate3d(0,calc(var(--p,0) * -34px),0)}

/* the overlay proper — a wide diagonal sheen that sweeps across as you scroll */
.px-sheen{position:absolute;top:-30%;left:-20%;width:140%;height:160%;
  background:linear-gradient(104deg,transparent 40%,rgba(185,140,255,.07) 50%,transparent 60%);
  will-change:transform;
  transform:translate3d(calc(var(--p,0) * 140px),calc(var(--p,0) * 40px),0)}

@media (max-width:760px){
  .px-orb-a{width:300px;height:300px;filter:blur(58px)}
  .px-orb-b{width:260px;height:260px;filter:blur(58px)}
}
@media (prefers-reduced-motion:reduce){
  .px-orb,.px-rule,.px-sheen{transform:none}
  .px-sheen{display:none}
}

/* ============ section headings ============ */
/* Section h2s had no size rule at all, so they fell back to the browser default
   (1.5em = 22.5px) — undersized next to a 44-86px h1. Scoped to main so the
   splash / hand-off / consent dialogs keep their own smaller headings. */
main section h2{font-size:clamp(26px,3.2vw,36px)}

/* ============ text overflow safety ============ */
/* interactions.js rebuilds the hero headline as per-word inline-blocks so it can
   animate each letter without letting the browser wrap mid-word. */
.split-word{display:inline-block;white-space:nowrap}
.split-char{display:inline-block}

/* Last-resort net: a single unbreakable run (a long handle, a URL, a pasted
   token) should wrap rather than push the page sideways. Applies only when a
   word genuinely cannot fit, so normal copy is unaffected. */
body{overflow-wrap:break-word}
h1,h2,h3,h4{overflow-wrap:break-word}