/* ============================================================
       STS GLOBAL — Redesign v02
       Same blue family as the original site, lifted a few steps
       so the page reads brighter (was #011E48 … #A0C6F5):
       #0B2F60 #114177 #1B5691 #1668B8 #2E8BE6 #4FA3F0 #8AC3F8 #BBDBFB
       Plus market accents for candles: --up / --dn
       ============================================================ */

:root {
    --navy-950: #05090F;
    --navy-900: #08131F;
    --navy-800: #0E2135;
    --navy-700: #17334F;
    --navy-600: #1668B8;
    --blue-500: #2E8BE6;
    --blue-400: #4FA3F0;
    --blue-300: #8AC3F8;
    --blue-200: #BBDBFB;
    --white: #ffffff;
    --ink: #0B2F60;

    /* aurora family — sampled off the hero photograph, so the accents and
       the image are literally the same colours */
    --aur: #3EC29D;
    /* aurora core */
    --aur-deep: #028159;
    /* lagoon */
    --sea: #024839;

    /* accent set — rotated section by section. Blue leads, the aurora
       greens carry the rest; no hue outside the blue-teal-green range. */
    --a1: #4FA3F0;
    --a2: #2ED9C3;
    --a3: #46C79E;
    --a4: #35BCE0;
    --ac: var(--a1);

    /* market accents — candles, glow */
    --up: #22D68A;
    --up-rgb: 34, 214, 138;
    --dn: #FF4D6A;
    --dn-rgb: 255, 77, 106;

    --bg: var(--navy-950);
    --surface: rgba(255, 255, 255, .05);
    --surface-2: rgba(255, 255, 255, .08);
    --line: rgba(187, 219, 251, .16);
    --line-soft: rgba(187, 219, 251, .09);
    --txt: rgba(240, 247, 255, .96);
    --txt-dim: rgba(232, 242, 255, .88);
    --txt-faint: rgba(214, 231, 250, .66);

    /* buttons are pure light — a white plate on a near-black page is the
       loudest thing the palette can do, so the CTAs read as lamps */
    --btn-1: #FFFFFF;
    --btn-2: #EFF7FF;
    --btn-rgb: 255, 255, 255;
    /* label on the white plate. Green, not red: red is this palette's
       down-candle colour, and a red CTA on a trading site reads as "sell".
       The brightest green that still clears 4.5:1 against the PALE END of
       the plate's gradient (#EFF7FF), not just against pure white. */
    --btn-ink: #0B7F57;

    /* 3 distinct families: display · subhead/UI · body
       swap these 3 lines to retype the whole page */
    --font-h: 'Exo 2', Arial, sans-serif;
    --font-d: 'Archivo', Arial, sans-serif;
    --font: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;

    --pad: clamp(20px, 5vw, 80px);
    --maxw: 1360px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, .05, .36, 1);
}

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

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

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font);
    /* body copy was 16px/300 — the light weight was most of why it read as
       grey. 400 at a slightly larger size holds its own on a dark page. */
    font-size: clamp(16.5px, calc(15.2px + .35vw), 18px);
    font-weight: 400;
    line-height: 1.62;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.locked {
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

::selection {
    background: var(--blue-400);
    color: #fff;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--navy-950);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .85);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

/* Firefox has no ::-webkit pseudo-elements — this is the only way to reach
   its scrollbar */
html {
    scrollbar-color: rgba(255, 255, 255, .85) var(--navy-950);
    scrollbar-width: thin;
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
}

section {
    position: relative;
}

/* every band picks up the next accent, so the page runs through four hues
   instead of four tints of the same blue. Targets main's direct children —
   some sections sit inside a pinning wrapper, and nth-of-type would
   restart the count inside each one. */
main>*:nth-child(4n+1) {
    --ac: var(--a1);
}

main>*:nth-child(4n+2) {
    --ac: var(--a2);
}

main>*:nth-child(4n+3) {
    --ac: var(--a3);
}

main>*:nth-child(4n+4) {
    --ac: var(--a4);
}

/* ---------- ambient background ----------
   fixed field behind every section: grid, light-blue glows and a set of
   slowly tumbling wireframe solids so the page is never a flat panel. */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
}

.ambient .grid {
    position: absolute;
    inset: -20%;
    background-image: linear-gradient(rgba(138, 195, 248, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138, 195, 248, .13) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 92% 72% at 50% 34%, #000 22%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 92% 72% at 50% 34%, #000 22%, transparent 82%);
    opacity: .62;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    will-change: transform;
}

.orb.a {
    width: 46vw;
    height: 46vw;
    background: radial-gradient(circle, rgba(46, 139, 230, .55), transparent 62%);
    top: -12vw;
    left: -10vw;
    animation: drift 26s var(--ease-io) infinite alternate;
}

.orb.b {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(46, 217, 195, .34), transparent 62%);
    bottom: -14vw;
    right: -8vw;
    animation: drift 32s var(--ease-io) infinite alternate-reverse;
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,
header,
footer {
    position: relative;
    z-index: 2;
}

/* ---------- preloader ---------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--navy-950);
    display: grid;
    place-items: center;
    transition: opacity .7s var(--ease), visibility .7s;
}

#preloader.done {
    opacity: 0;
    visibility: hidden;
}

#preloader .pl-in {
    text-align: center;
    width: min(260px, 60vw);
}

#preloader img {
    width: 92px;
    margin: 0 auto 26px;
    animation: plpulse 1.8s var(--ease-io) infinite;
}

@keyframes plpulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.96)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

.pl-bar {
    height: 2px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    border-radius: 2px;
}

.pl-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blue-500), var(--a2));
    transition: width .3s linear;
}

/* ---------- scroll progress + cursor ---------- */
#progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 200;
    background: linear-gradient(90deg, var(--blue-600, #1668B8), var(--a2));
}
/* ---------- header ---------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    transition: transform .5s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
    border-bottom: 1px solid transparent;
}

/* no tinted bar on scroll — just enough blur to keep the links legible
   over whatever is passing underneath */
header.solid {
    background: transparent;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: transparent;
}

header.hide {
    transform: translateY(-104%);
}

/* the header alone breaks out of the 1360px content column, so the logo and
   the actions sit in the real screen corners instead of the column's edges */
header .wrap.nav {
    max-width: none;
    padding-inline: clamp(14px, 2vw, 34px);
}

/* three tracks: logo left, links optically centred in the bar, actions right.
   A grid (not flex) so the links stay centred no matter how wide the logo or
   the right-hand cluster get. */
.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(14px, 2.4vw, 40px);
    height: 82px;
    transition: height .4s var(--ease);
}

header.solid .nav {
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    /* never let the nav squeeze the mark: the global img{max-width:100%}
       would clamp its width while height stays fixed, squashing it */
    flex: 0 0 auto;
    flex-shrink: 0;
    /* columns are pinned, not auto-placed: the links are display:none on
       mobile, which would otherwise slide the actions into the centre track */
    grid-column: 1;
    justify-self: start;
}

/* the navbar mark is the icon on its own (the old asset was the full
   portrait lockup), so it needs less height to carry the same weight */
.brand img {
    height: 46px;
    width: auto;
    max-width: none;
    flex: none;
    object-fit: contain;
    transition: transform .5s var(--ease), height .4s var(--ease);
}

header.solid .brand img {
    height: 40px;
}

.brand:hover img {
    transform: scale(1.06);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.8vw, 30px);
    grid-column: 2;
    justify-self: center;
}

.nav-links a {
    position: relative;
    display: inline-block;
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--txt-dim);
    line-height: 1.6;
    height: 1.6em;
    padding: 0 2px;
    margin-block: 9px;
    overflow: hidden;
    background-image: linear-gradient(var(--blue-300), var(--blue-300));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: color .35s, background-size .45s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
    background-size: 100% 1px;
}

.nav-links a span {
    display: block;
    position: relative;
    transition: transform .45s var(--ease);
}

.nav-links a span::after {
    content: attr(data-t);
    position: absolute;
    left: 0;
    top: 100%;
    color: var(--white);
}

.nav-links a:hover span {
    transform: translateY(-100%);
}

.nav-links a.active {
    color: var(--white);
}

.nav-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 22px);
}













.lang {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--txt-faint);
}

.lang a.on {
    color: var(--white);
    border-bottom: 1px solid var(--blue-300);
}

.lang a:hover {
    color: var(--blue-300);
}

.burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    place-items: center;
}

.burger i {
    display: block;
    width: 17px;
    height: 1.5px;
    background: var(--white);
    position: relative;
    transition: .35s var(--ease);
}

.burger i::before,
.burger i::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: .35s var(--ease);
}

.burger i::before {
    top: -6px;
}

.burger i::after {
    top: 6px;
}

body.menu-open .burger i {
    background: transparent;
}

body.menu-open .burger i::before {
    top: 0;
    transform: rotate(45deg);
}

body.menu-open .burger i::after {
    top: 0;
    transform: rotate(-45deg);
}

/* mobile drawer */
#drawer {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: rgba(6, 33, 63, .97);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px var(--pad) 40px;
    clip-path: circle(0% at 100% 0%);
    transition: clip-path .8s var(--ease);
    visibility: hidden;
}

body.menu-open #drawer {
    clip-path: circle(150% at 100% 0%);
    visibility: visible;
}

#drawer a.dl {
    font-family: var(--font-h);
    font-size: clamp(24px, 6.6vw, 42px);
    font-weight: 300;
    letter-spacing: -.028em;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(24px);
    transition: .6s var(--ease);
}

body.menu-open #drawer a.dl {
    opacity: 1;
    transform: none;
    transition-delay: calc(.12s + var(--i) * .06s);
}

#drawer a.dl:hover {
    color: var(--blue-300);
    padding-left: 12px;
}

/* ---------- buttons ---------- */
.btn {
    --bc1: var(--btn-1);
    --bc2: var(--btn-2);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    /* green label on pure white; the stacked halos make the plate look lit
       rather than just filled */
    color: var(--btn-ink);
    background: linear-gradient(120deg, var(--bc1), var(--bc2));
    box-shadow:
        0 0 0 1px rgba(var(--btn-rgb), .95),
        0 0 18px -2px rgba(var(--btn-rgb), .85),
        0 0 46px -4px rgba(var(--btn-rgb), .6),
        0 0 96px -12px rgba(var(--btn-rgb), .45),
        0 16px 46px -14px rgba(var(--btn-rgb), .55);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    will-change: transform;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;
    opacity: 0;
    transition: opacity .45s var(--ease);
}

/* a slow specular sweep so the plate reads as shining, not just bright.
   clipped by the pill's own overflow:hidden. */
.btn::after {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 38%;
    left: -60%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .95) 50%,
            transparent);
    filter: blur(6px);
    /* translate, not `left` — `left` would relayout the pill every frame */
    transform: translateX(0) skewX(-18deg);
    animation: btn-sheen 4.6s var(--ease-io) infinite;
}

@keyframes btn-sheen {

    0%,
    62% {
        transform: translateX(0) skewX(-18deg);
    }

    92%,
    100% {
        transform: translateX(460%) skewX(-18deg);
    }
}

/* neighbouring CTAs shouldn't flash in unison */
.btn:nth-child(2)::after {
    animation-delay: .9s;
}

.btn:nth-child(3)::after {
    animation-delay: 1.8s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px #fff,
        0 0 26px 0 rgba(var(--btn-rgb), .95),
        0 0 64px -2px rgba(var(--btn-rgb), .75),
        0 0 128px -8px rgba(var(--btn-rgb), .55),
        0 22px 56px -14px rgba(var(--btn-rgb), .6);
}

.btn:hover::before {
    opacity: 1;
}

.btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform .4s var(--ease);
}

.btn:hover svg {
    transform: translateX(4px);
}

/* the outline button is the same white light, just unfilled — it used to
   disappear into the page as a grey hairline */
.btn.ghost {
    background: rgba(var(--btn-rgb), .06);
    border: 1px solid rgba(var(--btn-rgb), .85);
    box-shadow:
        0 0 16px -3px rgba(var(--btn-rgb), .55),
        0 0 44px -10px rgba(var(--btn-rgb), .35),
        inset 0 0 22px -14px rgba(var(--btn-rgb), .9);
    color: #FFFFFF;
    text-shadow: 0 0 14px rgba(var(--btn-rgb), .55);
}

.btn.ghost::before {
    background: rgba(var(--btn-rgb), .14);
}

.btn.ghost:hover {
    border-color: #fff;
    color: #FFFFFF;
    box-shadow:
        0 0 24px -2px rgba(var(--btn-rgb), .8),
        0 0 70px -8px rgba(var(--btn-rgb), .5),
        inset 0 0 28px -12px rgba(var(--btn-rgb), 1);
}

.btn.sm {
    padding: 12px 22px;
    font-size: 11px;
}

/* ---------- section shell ---------- */
.sec {
    padding: clamp(22px, 2.3vw, 36px) 0;
    overflow: hidden;
}

/* Space Grotesk carries all UI / label typography */
.btn,
.eyebrow,
.nav-links a,
.feat p,
.li span,
.chip,
.msg,
.f-col h5,
.stat .l {
    font-family: var(--font-d);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: 22px;
}

.eyebrow::before {
    background: var(--ac) !important;
    opacity: .55;
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

h2.h {
    font-family: var(--font-h);
    font-weight: 300;
    font-size: clamp(28px, 4.2vw, 58px);
    line-height: 1.08;
    letter-spacing: -.028em;
    color: #fff;
    max-width: 19ch;
}

h2.h.wide {
    max-width: 26ch;
}

/* Section headings centre with the content under them. Scoped to headings
   that are a direct child of .wrap, i.e. the full-width sections: a heading
   inside .split is one column of a two-column block and has to stay left,
   or it drifts away from the column it belongs to. */
.sec>.wrap>h2.h {
    text-align: center;
    margin-inline: auto;
}

/* the eyebrow is inline-flex, so text-align on an ancestor is the only way
   to move it — which would drag every other line in the section with it.
   Make it a full-width flex row instead and centre its own contents. */
.sec>.wrap>.eyebrow {
    display: flex;
    justify-content: center;
}

h3.h3 {
    font-family: var(--font-d);
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 21px);
    letter-spacing: -.005em;
    color: #fff;
    line-height: 1.25;
}

p.lead {
    font-size: clamp(16.5px, 1.42vw, 20px);
    color: var(--txt-dim);
    line-height: 1.75;
    max-width: 62ch;
}

.grad {
    background: linear-gradient(100deg, var(--ac), var(--blue-200) 45%, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- storytelling scroll ---------- */

/* chapter numeral on each section eyebrow */
.eyebrow .ch {
    font-family: var(--font-d);
    font-weight: 600;
    color: var(--ac);
    opacity: .55;
    margin-right: 2px;
}

/* per-line masked text reveal (built by JS) */
.ln {
    display: block;
    overflow: hidden;
}

.ln>span {
    display: block;
    transform: translateY(115%);
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--l, 0) * .075s);
}

.ln-go .ln>span {
    transform: none;
}

/* word-split reveal for section headings */
.wr {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.wr>span {
    display: inline-block;
    transform: translateY(105%) rotate(4deg);
    opacity: 0;
    transition: transform .95s var(--ease), opacity .8s var(--ease);
    transition-delay: calc(var(--w, 0) * .055s);
}

.wr-go .wr>span {
    transform: none;
    opacity: 1;
}

/* pinned quote chapter */
.why-pin {
    position: relative;
    height: 140vh;
}

.why-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.why-stage .wrap {
    width: 100%;
}

.quote-in p {
    opacity: .18;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transform: translateY(10px);
}

.quote-in p.lit {
    opacity: 1;
    transform: none;
}

.qsign {
    opacity: 0;
    transform: translateY(14px);
    transition: .8s var(--ease);
}

.qsign.lit {
    opacity: 1;
    transform: none;
}

/* sequential pillar activation */
.pillar {
    opacity: .42;
    transition: opacity .6s var(--ease), background .55s var(--ease),
        border-color .55s var(--ease), transform .55s var(--ease);
}

.pillar.live {
    opacity: 1;
    background: rgba(27, 86, 145, .28);
    border-color: rgba(138, 195, 248, .32);
}

.pillar.live::before {
    transform: scaleY(1);
}

/* reveal */
.rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--i, 0) * .09s);
}

.rv.in {
    opacity: 1;
    transform: none;
}

.rv-l {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: calc(var(--i, 0) * .09s);
}

.rv-l.in {
    opacity: 1;
    transform: none;
}

/* line mask reveal for hero words */
.mask-line {
    display: block;
    overflow: hidden;
}

.mask-line>span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.15s var(--ease);
    transition-delay: calc(var(--i, 0) * .1s + .15s);
}

.ready .mask-line>span {
    transform: none;
}

/* ============================================================
       HERO
       ============================================================ */
/* height minus one viewport = how far you scroll while the hero is pinned.
   185vh leaves 85vh of travel; the flight is the same, it just happens over
   half the scrolling it used to take. */
.hero-scroll {
    position: relative;
    height: 185vh;
}

/* overflow lives on .stage, not here — the aurora river has to be able to
   run out of the hero and carry on into the section below it */
.hero {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: visible;
}

/* --- depth stage --- */
.stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    perspective: 900px;
}

.layer {
    position: absolute;
    inset: -14%;
    will-change: transform;
    backface-visibility: hidden;
}

/* the ground under the chart, on the home hero and the sub-pages alike */
.l-sky {
    background:
        radial-gradient(120% 80% at 50% 6%, rgba(10, 52, 44, .85), transparent 64%),
        radial-gradient(90% 60% at 50% 108%, rgba(14, 74, 60, .55), transparent 70%),
        linear-gradient(180deg, #04110E, #04080B 74%);
}

/* ---------- live chart plate (home hero) ----------
   The canvas is drawn at DPR 1 and sits under the grid. It is faded out at
   the top and bottom edges rather than cut, so the series look like they
   carry on past the frame instead of stopping at it. */
.hcv {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    display: block;
    will-change: transform;
    backface-visibility: hidden;
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 62%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 62%, transparent 90%);
}

/* The pinned hero ends on a hard horizontal line: .stage clips everything
   at its bottom edge, and the page below is a flat, slightly different dark.
   Fade the hero onto exactly the page colour so there is no edge left to
   see. Sub-page heroes have carried an .l-fade for this all along — the home
   hero lost its own when the photograph replaced the original background. */
.hero-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    /* above .float-layer (z-index 2), or the sparks poke through the fade */
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg,
            transparent,
            rgba(5, 15, 14, .40) 44%,
            rgba(5, 11, 13, .84) 78%,
            var(--navy-950) 97%);
}

/* seats the headline without darkening the bottom edge into a band */
.au-scrim {
    background:
        radial-gradient(62% 48% at 50% 46%, rgba(4, 12, 10, .66), rgba(4, 12, 10, .24) 70%, transparent 92%),
        linear-gradient(180deg, rgba(4, 12, 10, .42), transparent 24%, transparent 100%);
}

.l-grid {
    background-image:
        linear-gradient(rgba(94, 242, 196, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 242, 196, .12) 1px, transparent 1px);
    background-size: 90px 90px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 55%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 55%, #000 10%, transparent 72%);
}

.l-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .18;
}

.l-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 9, 15, .82), rgba(5, 9, 15, .45) 40%, rgba(5, 9, 15, .94));
}

/* single decorative chart surface — translate only, never scaled */
canvas.cvl {
    position: absolute;
    inset: -4% 0 -22% 0;
    /* overscan: the plane travels upward on scroll */
    width: 100%;
    height: 126%;
    will-change: transform;
}

.l-beam {
    background: conic-gradient(from 210deg at 50% -10%,
            transparent 0deg, rgba(138, 195, 248, .10) 18deg, transparent 38deg,
            transparent 320deg, rgba(79, 163, 240, .09) 340deg, transparent 360deg);
    mask-image: linear-gradient(180deg, #000, transparent 78%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
    animation: beam 18s var(--ease-io) infinite alternate;
}

@keyframes beam {
    to {
        transform: rotate(6deg) scale(1.1)
    }
}

.l-vig {
    background: radial-gradient(ellipse 78% 62% at 50% 50%, transparent 40%, rgba(6, 33, 63, .78) 100%);
}

.l-fade {
    inset: auto -14% -14% -14%;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(6, 33, 63, .55) 62%, var(--navy-950));
}

/* --- levitating objects --- */
.float-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* .fo = scroll-driven depth wrapper · .lv = free-floating levitation */
.fo {
    position: absolute;
    will-change: transform;
}

.lv {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
    animation: lev var(--dur, 9s) var(--ease-io) infinite alternate;
    animation-delay: var(--dl, 0s);
}

@keyframes lev {
    to {
        transform: translate3d(var(--dx, 14px), var(--dy, -22px), 0) rotate(var(--dr, 6deg))
    }
}

.glass {
    border-radius: 16px;
    border: 1px solid rgba(187, 219, 251, .22);
    background: linear-gradient(150deg, rgba(138, 195, 248, .13), rgba(255, 255, 255, .03));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: hidden;
}

.glass svg {
    width: 100%;
    height: 100%;
    display: block;
}

.glass svg path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* faint permanent trace + bright head that sweeps along it */
.glass svg path.base {
    stroke: rgba(187, 219, 251, .28);
}

.glass svg path.draw {
    stroke: rgba(190, 222, 255, .95);
    stroke-dasharray: 46 300;
    stroke-dashoffset: 346;
    filter: drop-shadow(0 0 4px rgba(138, 195, 248, .9));
    animation: draw 6s linear infinite;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.dia {
    border: 1px solid rgba(187, 219, 251, .3);
    --dr: 45deg;
    transform: rotate(45deg);
}

.ringo {
    border: 1px solid rgba(138, 195, 248, .26);
    border-radius: 50%;
}

.ringo::after {
    content: '';
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 1px dashed rgba(138, 195, 248, .3);
}

.spark {
    border-radius: 50%;
    background: var(--blue-300);
    box-shadow: 0 0 14px 2px rgba(138, 195, 248, .8);
}

.logo-ghost img {
    width: 100%;
    opacity: .12;
    filter: drop-shadow(0 0 50px rgba(79, 163, 240, .5));
}

/* --- levitating candle cluster ---
   each .cnd is one candle: --h body height, --b gap from the baseline,
   --wt / --wb how far the wick runs past the body. */
.cnds {
    display: flex;
    align-items: flex-end;
    gap: 12%;
    width: 100%;
    height: 100%;
}

.cnd {
    position: relative;
    flex: 1;
    height: var(--h, 40%);
    margin-bottom: var(--b, 0%);
    border-radius: 2px;
    animation: cndPulse var(--cd, 3.6s) var(--ease-io) infinite alternate;
    animation-delay: var(--cdl, 0s);
}

.cnd::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 1.5px;
    margin-left: -.75px;
    top: calc(var(--wt, 22%) * -1);
    bottom: calc(var(--wb, 22%) * -1);
    background: inherit;
    border-radius: 2px;
    opacity: .8;
}

.cnd.up {
    background: var(--up);
    box-shadow: 0 0 9px rgba(var(--up-rgb), .8), 0 0 26px rgba(var(--up-rgb), .38);
}

.cnd.dn {
    background: var(--dn);
    box-shadow: 0 0 9px rgba(var(--dn-rgb), .75), 0 0 26px rgba(var(--dn-rgb), .32);
}

@keyframes cndPulse {
    to {
        opacity: .55;
        filter: brightness(1.35);
    }
}

@media (prefers-reduced-motion:reduce) {
    .cnd {
        animation: none;
    }
}

/* --- centred hero core --- */
.hero-core {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    padding-inline: var(--pad);
    will-change: transform, opacity;
}

h1 {
    font-family: var(--font-h);
    font-weight: 200;
    /* elegant, airy descriptor line */
    font-size: clamp(34px, 6.4vw, 100px);
    line-height: 1.04;
    letter-spacing: -.025em;
    color: #fff;
    max-width: 17ch;
    margin-inline: auto;
    text-shadow: 0 24px 70px rgba(6, 33, 63, .7);
}

/* brand line carries the weight */
h1 .lead-word {
    display: block;
    font-weight: 800;
    letter-spacing: -.035em;
    margin-bottom: .04em;
}

h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #fff 10%, var(--blue-300) 55%, var(--blue-200));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- home hero: script descriptor laid over the wordmark ----------
   --script-size is the one number to touch if it wants resizing. */
/* .7em of the heading — lands on exactly 70px where h1 hits its 100px cap,
   and keeps the same proportion (so the same overlap) at every width */
.hero-core h1 {
    --script-size: .7em;
    max-width: none;
}

.hero-core h1 .lead-word {
    margin-bottom: 0;
}

.hero-core h1 em {
    font-family: 'Corinthia', 'Segoe Script', cursive;
    font-weight: 700;
    font-size: var(--script-size);
    line-height: 1;
    letter-spacing: 0;
    /* the old dusty blue sat too close to both the white wordmark under it
       and the photograph behind it. Aurora mint separates from both, and the
       halo keeps the thin script legible over the busiest part of the image. */
    color: #5EF2C4;
    /* the script crosses the white wordmark, so a mint glow alone wouldn't
       separate the two. The tight dark halo (listed after, so it paints
       beneath) traces a contour that reads against white and photo alike. */
    text-shadow:
        0 0 14px rgba(94, 242, 196, .6),
        0 0 3px rgba(2, 14, 11, .95),
        0 0 10px rgba(2, 14, 11, .85),
        0 0 40px rgba(94, 242, 196, .28),
        0 4px 26px rgba(3, 18, 14, .85);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* the second line rides up over the brand line; it comes later in the DOM,
   so it paints on top without needing a z-index */
/* padding buys headroom for Corinthia's ascenders and descenders, which
   overshoot the em box badly; margin absorbs the padding so the overlap holds */
.hero-core h1 .mask-line:nth-child(2) {
    margin-top: -1.14em;
    padding-block: .24em;
}

/* Corinthia has no Cyrillic (its ranges stop at U+2BA), so the Russian hero
   uses Marck Script — a calligraphic face that does cover it. It has a much
   larger x-height than Corinthia, hence the smaller size and shallower lift. */
html[lang="ru"] .hero-core h1 {
    --script-size: .58em;
}

html[lang="ru"] .hero-core h1 em {
    font-family: 'Marck Script', 'Segoe Script', cursive;
    font-weight: 400;
}

html[lang="ru"] .hero-core h1 .mask-line:nth-child(2) {
    margin-top: -1.19em;
}

/* the reveal slides from further down, or the taller padded box would let the
   script peek out before it is meant to appear */
.hero-core h1 .mask-line:nth-child(2)>span {
    transform: translateY(150%);
}

.ready .hero-core h1 .mask-line:nth-child(2)>span {
    transform: none;
}

.hero-sub {
    margin: 26px auto 0;
    font-size: clamp(15px, 1.55vw, 22px);
    font-weight: 300;
    color: rgba(214, 231, 252, .8);
    letter-spacing: .01em;
    max-width: 44ch;
}

.hero-cta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

/* feature strip below the pinned hero */
/* transparent at the top so the aurora river runs behind it instead of
   hitting an opaque edge — this is the hero-to-page handover */
.feats-band {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, transparent, rgba(11, 47, 96, .34) 58%, rgba(11, 47, 96, .45));
    border-bottom: 1px solid var(--line-soft);
}

.hero-feats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.feat {
    position: relative;
    background: rgba(6, 33, 63, .55);
    backdrop-filter: blur(6px);
    padding: 30px clamp(16px, 2vw, 32px) 32px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: background .5s var(--ease);
}

.feat:hover {
    background: rgba(27, 86, 145, .35);
}

.feat::after {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-400), var(--blue-200));
    transition: width .6s var(--ease);
}

.feat:hover::after {
    width: 100%;
}

.feat .ic {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .14);
    border: 1px solid rgba(138, 195, 248, .22);
}

.ic img,
.pic img {
    width: 19px;
    height: 19px;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.feat p {
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--txt-dim);
}

.scroll-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 26px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--txt-faint);
}

.scroll-hint i {
    display: block;
    width: 1px;
    height: 44px;
    background: linear-gradient(var(--blue-300), transparent);
    animation: sh 2s var(--ease-io) infinite;
}

@keyframes sh {

    0%,
    100% {
        transform: scaleY(.35);
        transform-origin: top;
        opacity: .4
    }

    50% {
        transform: scaleY(1);
        opacity: 1
    }
}

/* ---------- scroll-driven drifting decor (whole page) ---------- */
.decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.decor>* {
    position: absolute;
    will-change: transform;
}

.sec>.wrap {
    position: relative;
    z-index: 1;
}

.d-chart {
    width: clamp(150px, 20vw, 280px);
    aspect-ratio: 16/10;
    border-radius: 14px;
    border: 1px solid rgba(187, 219, 251, .16);
    background: linear-gradient(150deg, rgba(138, 195, 248, .09), rgba(255, 255, 255, .02));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: .5;
}

.d-chart svg {
    width: 100%;
    height: 100%;
}

.d-chart svg path {
    fill: none;
    stroke: rgba(187, 219, 251, .55);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.d-ring {
    border-radius: 50%;
    border: 1px solid rgba(138, 195, 248, .16);
}

.d-dia {
    border: 1px solid rgba(138, 195, 248, .2);
    transform: rotate(45deg);
}

/* ============================================================
       ABOUT
       ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}

.about-txt p+p {
    margin-top: 20px;
}

.about-txt .btn {
    margin-top: 36px;
}

.about-vis {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 340px;
}

.about-vis .halo {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 163, 240, .35), transparent 62%);
    filter: blur(30px);
    animation: halo 6s var(--ease-io) infinite alternate;
}

@keyframes halo {
    to {
        transform: scale(1.14);
        opacity: .75
    }
}

.about-vis .ring {
    position: absolute;
    border: 1px solid var(--line);
    border-radius: 50%;
    inset: 8%;
    animation: spin 34s linear infinite;
}

.about-vis .ring:nth-child(3) {
    inset: 20%;
    border-style: dashed;
    border-color: rgba(138, 195, 248, .22);
    animation-duration: 26s;
    animation-direction: reverse;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.about-vis img {
    position: relative;
    width: min(300px, 72%);
    filter: drop-shadow(0 24px 60px rgba(79, 163, 240, .45));
    animation: float 7s var(--ease-io) infinite alternate;
}

@keyframes float {
    to {
        transform: translateY(-16px)
    }
}

/* ---------- stats ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-soft);
    margin-top: clamp(22px, 2.8vw, 38px);
}

.stat {
    position: relative;
    padding: 34px 26px 34px 0;
    border-right: 1px solid var(--line-soft);
}

.stat:last-child {
    border-right: 0;
}

.stat:not(:first-child) {
    padding-left: 26px;
}

.stat .n {
    font-family: var(--font-h);
    font-size: clamp(24px, 2.9vw, 42px);
    font-weight: 600;
    letter-spacing: -.035em;
    color: #fff;
    line-height: 1;
}

.stat .l {
    margin-top: 12px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--txt-faint);
}

.stat .l b {
    color: var(--blue-300);
    font-weight: 500;
}

.stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--blue-400);
    transition: width .8s var(--ease);
}

.stats.in .stat::before {
    width: 100%;
    transition-delay: calc(var(--i) * .12s);
}

/* ============================================================
       WHY TRADING (quote)
       ============================================================ */
.quote-wrap {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--line);
    isolation: isolate;
}

.quote-wrap>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
    z-index: -2;
    transform: scale(1.08);
    will-change: transform;
}

.quote-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, rgba(11, 47, 96, .94), rgba(17, 65, 119, .7) 55%, rgba(22, 104, 184, .45));
}

.quote-in {
    padding: clamp(34px, 5.4vw, 74px);
}

.qmark {
    font-family: var(--font-d);
    font-size: clamp(64px, 9vw, 128px);
    line-height: .6;
    color: rgba(138, 195, 248, .3);
    margin-bottom: 10px;
    display: block;
}

.quote-in p {
    font-size: clamp(16px, 1.75vw, 25px);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(240, 247, 255, .93);
    max-width: 40ch;
}

.quote-in p+p {
    margin-top: 22px;
}

.qsign {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--txt-dim);
}

.qsign::before {
    content: '';
    width: 46px;
    height: 1px;
    background: var(--blue-300);
}

.qsign b {
    color: var(--blue-300);
    font-weight: 500;
}

/* ============================================================
       AUDIENCE (bento)
       ============================================================ */
.bento {
    margin-top: clamp(18px, 2.4vw, 30px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bcard {
    position: relative;
    padding: clamp(24px, 2.6vw, 38px);
    border-radius: 20px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    overflow: hidden;
    transition: border-color .5s var(--ease), transform .5s var(--ease);
}

.bcard::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 163, 240, .22), transparent 65%);
}

.bcard:hover {
    border-color: rgba(138, 195, 248, .38);
    transform: translateY(-5px);
}

.bcard:hover::before {
    opacity: 1;
}

.bcard .num {
    position: absolute;
    top: 20px;
    right: 26px;
    font-family: var(--font-d);
    font-size: 13px;
    color: var(--ac);
    opacity: .7;
    letter-spacing: .12em;
}

.bcard .ic {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .13);
    border: 1px solid rgba(138, 195, 248, .2);
    margin-bottom: 22px;
    transition: .5s var(--ease);
}

.bcard:hover .ic {
    background: var(--blue-500);
    transform: rotate(-6deg) scale(1.06);
}

.bcard .ic img {
    width: 23px;
    height: 23px;
}

.bcard h3 {
    margin-bottom: 12px;
}

.bcard q,
.bcard .q {
    display: block;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--txt-dim);
    font-style: italic;
    quotes: none;
}

.cta-row {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ============================================================
       METHOD
       ============================================================ */
.method {
    background:
        radial-gradient(1000px 500px at 85% 10%, rgba(22, 104, 184, .3), transparent 60%),
        linear-gradient(180deg, transparent, rgba(11, 47, 96, .5), transparent);
}

.method-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(34px, 5vw, 76px);
    align-items: start;
}

.method-vis {
    position: sticky;
    top: 120px;
    display: grid;
    place-items: center;
    padding: 20px;
}

.method-vis .glow {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 195, 248, .3), transparent 65%);
    filter: blur(40px);
}

.method-vis img {
    position: relative;
    width: min(420px, 90%);
    filter: drop-shadow(0 30px 70px rgba(22, 104, 184, .6));
    transition: transform .6s var(--ease);
}

.pillars {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pillar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 24px 24px 24px 22px;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .028);
    transition: .55s var(--ease);
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(var(--ac), transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .6s var(--ease);
}

.pillar:hover {
    background: rgba(27, 86, 145, .3);
    border-color: rgba(138, 195, 248, .3);
    transform: translateX(6px);
}

.pillar:hover::before {
    transform: scaleY(1);
}

.pillar .pn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pillar .pn span {
    font-family: var(--font-d);
    font-size: 12px;
    color: var(--blue-300);
    letter-spacing: .1em;
}

.pillar .pic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .14);
    border: 1px solid rgba(138, 195, 248, .22);
}

.pillar .pic img {
    width: 20px;
    height: 20px;
}

.pillar h3 {
    font-size: clamp(14px, 1.25vw, 17px);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.pillar p {
    margin-top: 9px;
    font-size: 16px;
    color: var(--txt-dim);
    line-height: 1.65;
}

.method-banner {
    margin-top: clamp(20px, 2.6vw, 34px);
    padding: clamp(28px, 4vw, 52px);
    border-radius: 22px;
    border: 1px solid var(--line);
    background: linear-gradient(110deg, rgba(22, 104, 184, .4), rgba(11, 47, 96, .25));
    position: relative;
    overflow: hidden;
}

.method-banner::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 40%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(187, 219, 251, .12), transparent);
    transform: rotate(18deg);
    animation: sheen 6.5s var(--ease-io) infinite;
}

@keyframes sheen {
    0% {
        left: -40%
    }

    55%,
    100% {
        left: 130%
    }
}

/* the 32ch cap left a wide empty gutter on the right and squeezed the copy
   into a narrow column — the banner is full width, so let the text be too */
.method-banner p {
    font-family: var(--font-h);
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 300;
    line-height: 1.5;
    color: #fff;
    letter-spacing: -.015em;
    max-width: none;
}

.method-banner b {
    font-weight: 600;
    color: var(--blue-300);
}

/* ============================================================
       PERSONAL TRAINING
       ============================================================ */
.pt-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    margin-top: 26px;
    /* the chips column is much taller; centring drops the paragraph down so
       it sits against them instead of leaving a hole underneath */
    align-items: center;
}

.pt-intro>p.lead {
    font-size: clamp(18px, 1.65vw, 23px);
    line-height: 1.65;
    max-width: 46ch;
}

/* the format chips took the note's slot in the intro grid — half a column is
   too narrow for them to sit side by side, so they stack */
.pt-fmt .fmt-row {
    margin-top: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.pt-note {
    padding: 24px 26px;
    border-left: 2px solid var(--blue-400);
    background: linear-gradient(90deg, rgba(79, 163, 240, .1), transparent);
    border-radius: 0 14px 14px 0;
}

.pt-note p+p {
    margin-top: 10px;
}

.lists {
    margin-top: clamp(20px, 2.4vw, 32px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 54px);
}

.lbox {
    padding: clamp(24px, 2.6vw, 36px);
    border-radius: 20px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}

/* section labels: display face instead of the UI face, heavier, larger and
   in aurora mint — the old 12px blue-300 read as a caption, not a heading */
.lbox>h4,
.pt-fmt .eyebrow {
    font-family: var(--font-h);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6FEFD0;
    text-shadow: 0 0 18px rgba(94, 242, 196, .35);
}

.lbox>h4 {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lbox>h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

.li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    transition: .45s var(--ease);
}

.li:last-child {
    border-bottom: 0;
}

.li:hover {
    padding-left: 8px;
}

.li .ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .12);
    border: 1px solid rgba(138, 195, 248, .18);
    transition: .45s var(--ease);
}

/* the icon tiles were near-invisible against the card — give them a lit
   rim and a glow so the column reads as a row of indicators */
.li .ic,
.chip .ic {
    box-shadow:
        0 0 0 1px rgba(94, 242, 196, .28),
        0 0 16px -4px rgba(94, 242, 196, .45),
        inset 0 0 14px -8px rgba(255, 255, 255, .9);
}

.li .ic img,
.chip .ic img {
    filter: drop-shadow(0 0 6px rgba(140, 220, 255, .6));
}

.li:hover .ic,
.chip:hover .ic {
    background: rgba(94, 242, 196, .22);
    border-color: rgba(94, 242, 196, .7);
    box-shadow:
        0 0 0 1px rgba(94, 242, 196, .8),
        0 0 24px -2px rgba(94, 242, 196, .7);
}

.li .ic img {
    width: 17px;
    height: 17px;
}

.li span {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.45;
    transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

/* hovering the row lifts the label to a lit white */
.li:hover span {
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 255, 255, .75), 0 0 30px rgba(140, 220, 255, .4);
}

.pt-after {
    margin-top: clamp(18px, 2.2vw, 30px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}

.adv b {
    color: var(--blue-300);
    font-weight: 500;
}

.fmt {
    margin-top: clamp(18px, 2.2vw, 28px);
}

.fmt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 12px;
    border-radius: 100px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .035);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-dim);
    transition: .45s var(--ease);
}

.chip:hover {
    border-color: rgba(138, 195, 248, .4);
    color: #fff;
    transform: translateY(-3px);
}

.chip .ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .16);
}

.chip .ic img {
    width: 15px;
    height: 15px;
}

/* ============================================================
       PRACTICE
       ============================================================ */
.pcards {
    margin-top: clamp(18px, 2.4vw, 30px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pcard {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .03);
    display: flex;
    flex-direction: column;
    transition: .55s var(--ease);
}

.pcard:hover {
    transform: translateY(-8px);
    border-color: rgba(138, 195, 248, .35);
    box-shadow: 0 30px 60px -30px rgba(22, 104, 184, .9);
}

.pcard .ph {
    position: relative;
    aspect-ratio: 16/10.5;
    overflow: hidden;
}

.pcard .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.pcard:hover .ph img {
    transform: scale(1.09);
}

.pcard .ph::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 47, 96, .1), rgba(6, 33, 63, .82));
}

.pcard .pb {
    padding: 24px clamp(20px, 2vw, 28px) 28px;
    position: relative;
    margin-top: -46px;
    z-index: 1;
}

.pcard .pb p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--txt-dim);
}

.pcard .arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(6, 33, 63, .55);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
    transition: .5s var(--ease);
}

.pcard:hover .arrow {
    background: var(--blue-500);
    border-color: var(--blue-500);
    transform: rotate(-45deg);
}

.pcard .arrow svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.6;
}

.closing {
    margin-top: clamp(20px, 2.4vw, 32px);
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 30px;
    align-items: center;
    padding-top: clamp(30px, 4vw, 48px);
    border-top: 1px solid var(--line-soft);
}

.closing a.tg {
    color: var(--blue-300);
    border-bottom: 1px solid rgba(138, 195, 248, .45);
    transition: .3s;
}

.closing a.tg:hover {
    color: #fff;
    border-color: #fff;
}

/* ============================================================
       FINAL CTA
       ============================================================ */
.final {
    position: relative;
    overflow: hidden;
}

.final-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.final-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
}

.final-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--navy-950), rgba(22, 104, 184, .28) 55%, var(--navy-950));
}

.final .wrap {
    position: relative;
    z-index: 1;
    text-align: center;
}

.final h2 {
    font-family: var(--font-h);
    font-weight: 300;
    font-size: clamp(29px, 4.9vw, 70px);
    line-height: 1.05;
    letter-spacing: -.035em;
    color: #fff;
    margin-inline: auto;
    max-width: 18ch;
}

.final p {
    margin: 22px auto 38px;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--txt-dim);
    max-width: 44ch;
}

/* on pages with no paragraph between them the button block follows the
   heading directly and sat flush against it — this is that case */
.final h2+div {
    margin-top: clamp(30px, 3.4vw, 46px);
}

.final .cta-row,
.final .hero-cta {
    justify-content: center;
}

/* ---------- contact ---------- */
.contact {
    border-top: 0;
}

.contact-in {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
}

.msgs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.msg {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 24px;
    border-radius: 100px;
    border: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: .45s var(--ease);
}

.msg svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.msg:hover {
    transform: translateY(-4px);
    border-color: transparent;
    color: #fff;
}

.msg.wa:hover {
    background: #25D366;
}

.msg.vb:hover {
    background: #7360F2;
}

.msg.tg:hover {
    background: #229ED9;
}

.msg.dc:hover {
    background: #5865F2;
}

/* ---------- footer ---------- */
footer {
    border-top: 1px solid var(--line-soft);
    padding: clamp(28px, 3.4vw, 44px) 0 28px;
    background: rgba(6, 33, 63, .6);
}

.f-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.f-top img.flogo {
    height: 46px;
    width: auto;
    margin-bottom: 20px;
}

.f-col h5 {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 16px;
    font-weight: 600;
}

.f-col a {
    display: block;
    font-size: 15px;
    color: var(--txt-dim);
    padding: 6px 0;
    transition: .35s var(--ease);
}

.f-col a:hover {
    color: #fff;
    transform: translateX(5px);
}

.disclaimer {
    margin-top: clamp(18px, 2.2vw, 28px);
    padding-top: 26px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--txt-faint);
    max-width: 72ch;
}

.f-bot {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--txt-faint);
    letter-spacing: .06em;
}

/* ---------- to top ---------- */
#totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 110;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(11, 47, 96, .8);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: .5s var(--ease);
}

#totop.on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#totop:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
}

#totop svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.7;
}

/* ---------- modal form ---------- */
#modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .45s var(--ease);
}

#modal.on {
    opacity: 1;
    visibility: visible;
}

#modal .veil {
    position: absolute;
    inset: 0;
    background: rgba(5, 28, 54, .82);
    backdrop-filter: blur(10px);
}

.mbox {
    position: relative;
    width: min(520px, 100%);
    padding: clamp(28px, 4vw, 46px);
    border-radius: 24px;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(17, 65, 119, .98), rgba(8, 42, 78, .99));
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
    transform: translateY(24px) scale(.97);
    transition: .55s var(--ease);
}

#modal.on .mbox {
    transform: none;
}

.mbox h3 {
    font-family: var(--font-d);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 400;
    color: #fff;
    letter-spacing: -.01em;
    margin-bottom: 26px;
}

.fld {
    position: relative;
    margin-bottom: 18px;
}

.fld input {
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    outline: none;
    transition: .35s var(--ease);
}

.fld input::placeholder {
    color: var(--txt-faint);
}

.fld input:focus {
    border-color: var(--blue-300);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 4px rgba(79, 163, 240, .14);
}

.mbox .policy {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--txt-faint);
    margin: 16px 0 22px;
}

/* ---------- messenger buttons (modal + contact band) ----------
   round brand-coloured targets that link straight out to the chat */
.svcs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 30px);
    margin-top: 28px;
}

.svc {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 76px;
}

.svc i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.svc svg {
    width: 27px;
    height: 27px;
    fill: #fff;
}

.svc span {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--txt-faint);
    transition: color .4s var(--ease);
}

.svc:hover i {
    transform: translateY(-5px) scale(1.06);
}

.svc:hover span {
    color: #fff;
}

.svc.wa i {
    background: #25D366;
}

.svc.wa:hover i {
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
}

.svc.vb i {
    background: #7360F2;
}

.svc.vb:hover i {
    box-shadow: 0 10px 26px rgba(115, 96, 242, .45);
}

.svc.tg i {
    background: #229ED9;
}

.svc.tg:hover i {
    box-shadow: 0 10px 26px rgba(34, 158, 217, .45);
}

.svc.dc i {
    background: #5865F2;
}

.svc.dc:hover i {
    box-shadow: 0 10px 26px rgba(88, 101, 242, .45);
}

.mlead {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--txt-dim);
    margin-top: 14px;
}

.mclose {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--txt-dim);
    transition: .4s var(--ease);
}

.mclose:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: rotate(90deg);
}

/* ============================================================
       RESPONSIVE
       ============================================================ */
@media (max-width: 1180px) {
    
}

@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    .burger {
        display: grid;
    }

    .about-grid,
    .method-grid,
    .lists,
    .pt-intro,
    .pt-after,
    .contact-in,
    .closing {
        grid-template-columns: 1fr;
    }

    .method-vis {
        position: static;
        order: -1;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat:nth-child(2n) {
        border-right: 0;
    }

    .pcards {
        grid-template-columns: 1fr;
    }

    .f-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .hero-scroll {
        height: 155vh;
    }
}

@media (max-width: 760px) {
    /* the phone pin was already short (40vh of travel); trim it, but not as
       hard as the desktop cut or the flight has no room to read */
    .hero-scroll {
        height: 130vh;
    }

    .fo:has(.glass),
    .fo:has(.ringo),
    .fo:has(.cnds) {
        display: none;
    }

    .hero-feats {
        grid-template-columns: 1fr;
    }

    .bento {
        grid-template-columns: 1fr;
    }

    .scroll-hint {
        display: none;
    }

    

    h1 {
        max-width: none;
    }

    .stat:not(:first-child) {
        padding-left: 18px;
    }

    .f-top {
        grid-template-columns: 1fr;
    }

    /* --- phones: cheaper compositing --- */
    /* a full-screen blended layer costs a repaint every frame for a
       texture nobody can see at this size */
    .noise {
        display: none;
    }

    .orb {
        filter: blur(54px);
        opacity: .4;
    }

    /* --- phones: 44px minimum touch targets --- */
    #drawer a.dl {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .f-col a {
        padding: 12px 0;
    }

    .lang a {
        padding: 12px 3px;
    }

    .btn {
        min-height: 46px;
        font-size: 12px;
    }

    .msg {
        min-height: 48px;
    }

    .f-bot a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-inline: 8px;
    }

    #modal .mclose {
        width: 44px;
        height: 44px;
    }
}



@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .rv,
    .rv-l,
    .mask-line>span {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-scroll {
        height: 100svh;
    }

}
/* ============================================================
   SHARED SUB-PAGE BLOCKS  (about / program / intensives / contacts)
   ============================================================ */

/* compact page hero (non-pinned) */
.phero {
    position: relative;
    min-height: clamp(460px, 74svh, 760px);
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    padding: 104px 0 40px;
}

.phero .stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* dissolve the whole hero into the page instead of ending on an edge —
       two near-identical darks meeting at a hard boundary read as a rule */
    -webkit-mask-image: linear-gradient(to bottom, #000 0 74%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0 74%, transparent 99%);
}

/* sub-page heroes carry the home hero's palette as a gradient rather than a
   second photograph — aurora glow up top, near-black ground below */
.phero .l-sky {
    background:
        radial-gradient(120% 72% at 50% 2%, rgba(62, 194, 157, .34), transparent 64%),
        radial-gradient(82% 52% at 24% -4%, rgba(46, 217, 195, .24), transparent 70%),
        radial-gradient(72% 48% at 80% 6%, rgba(79, 163, 240, .20), transparent 72%),
        radial-gradient(60% 40% at 50% 96%, rgba(2, 129, 89, .16), transparent 70%),
        linear-gradient(180deg, #06171A, #05100F 46%, var(--navy-950));
}

.phero .l-grid {
    opacity: .5;
}

.phero .wrap {
    position: relative;
    z-index: 3;
}

.phero h1 {
    max-width: 20ch;
}

/* programme name on its own centred line, the abbreviation string on a
   quieter line under it — as one line it broke as "... / SP" and lost centre */
.phero h1 .pname {
    display: block;
    text-align: center;
}

.phero h1 .pabbr {
    display: block;
    text-align: center;
    font-size: .62em;
    letter-spacing: .12em;
    margin-top: .12em;
}

.phero .lead {
    margin-inline: auto;
    margin-top: 24px;
    text-align: center;
}

/* the breadcrumb only ever repeated the nav item that is already underlined
   in the header — hidden rather than deleted so it can come back in one line */
.crumb {
    display: none;
}

.crumb--on {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-d);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 24px;
}

.crumb span {
    opacity: .45;
}

/* profile / founder split */
.profile {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(28px, 4.5vw, 70px);
    align-items: center;
}

.profile-ph {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4/4.6;
}

.profile-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.profile-ph:hover img {
    transform: scale(1.05);
}

.profile-ph::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6, 33, 63, .8));
}

.ticks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
}

.tick {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.tick:last-child {
    border-bottom: 0;
}

.tick i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .16);
    border: 1px solid rgba(138, 195, 248, .28);
    color: var(--blue-300);
    font-size: 11px;
    font-style: normal;
}

.tick p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--txt-dim);
}

/* team grid */
.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(16px, 2.2vw, 28px);
}

.member {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .03);
    transition: .55s var(--ease);
}

.member:hover {
    transform: translateY(-8px);
    border-color: rgba(138, 195, 248, .35);
    box-shadow: 0 30px 60px -30px rgba(22, 104, 184, .9);
}

.member .mph {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
}

.member .mph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85);
    transition: transform 1.1s var(--ease), filter .6s;
}

.member:hover .mph img {
    transform: scale(1.06);
    filter: saturate(1);
}

.member .mph::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 47, 96, .05), rgba(6, 33, 63, .9));
}

.member .mb {
    padding: 0 24px 26px;
    margin-top: -60px;
    position: relative;
    z-index: 1;
}

.member .role {
    margin-top: 8px;
    font-family: var(--font-d);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue-300);
}

.member .role span {
    display: block;
    color: var(--txt-faint);
    letter-spacing: .08em;
    margin-top: 5px;
    text-transform: none;
    font-size: 12px;
}

/* feature rows with icon + copy */
.frows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

.frow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .028);
    transition: .5s var(--ease);
}

.frow:hover {
    background: rgba(27, 86, 145, .3);
    border-color: rgba(138, 195, 248, .3);
    transform: translateX(6px);
}

.frow .ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .14);
    border: 1px solid rgba(138, 195, 248, .22);
}

.frow h3 {
    font-family: var(--font-d);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
}

.frow p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--txt-dim);
}

/* two-column split section */
/* the decorative second column is gone — text runs at a readable measure */
.split {
    display: block;
    max-width: 74ch;
}

@media (max-width:1024px) {

    .profile,
    .split {
        grid-template-columns: 1fr;
    }

    .team {
        grid-template-columns: 1fr;
    }
}

/* ---------- pillar/level cards (3-up) ---------- */
/* the skills row went from 3 cards to 5. Flex rather than grid: whatever
   count lands on the last row grows to fill it, so there is never a hole —
   which a fixed track count cannot avoid with 5 items. */
.lvls {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: clamp(28px, 3.6vw, 46px);
}

/* 300px basis rather than a fifth of the row: at five across each card was
   only ~228px wide, which is what made the copy read as tiny. Three per row
   gives the larger type room to breathe. */
.lvls>* {
    flex: 1 1 300px;
    min-width: 0;
}

.lvl {
    position: relative;
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: 20px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    overflow: hidden;
    transition: .5s var(--ease);
}

.lvl::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 163, 240, .2), transparent 65%);
}

/* the radial ::before only lights up where the cursor is, which read as
   "nothing happens" — the card now changes colour as a whole */
.lvl:hover {
    background: linear-gradient(160deg, rgba(46, 217, 195, .20), rgba(27, 86, 145, .40));
    border-color: rgba(94, 242, 196, .55);
    box-shadow: 0 0 36px -14px rgba(94, 242, 196, .8);
    transform: translateY(-5px);
}

.lvl:hover .num {
    color: #6FEFD0;
    text-shadow: 0 0 16px rgba(94, 242, 196, .6);
}

.lvl:hover h3 {
    color: #6FEFD0;
    text-shadow: 0 0 18px rgba(94, 242, 196, .45);
}

.lvl:hover p {
    color: #fff;
}

.lvl:hover::before {
    opacity: 1;
}

.lvl .num {
    font-family: var(--font-d);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ac);
    margin-bottom: 16px;
    display: block;
    transition: color .5s var(--ease), text-shadow .5s var(--ease);
}

.lvl h3 {
    font-family: var(--font-d);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -.005em;
    transition: color .5s var(--ease), text-shadow .5s var(--ease);
}

.lvl p {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.6;
    color: #fff;
    transition: color .5s var(--ease);
}

/* ---------- fact strip (4-up icon facts) ---------- */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-block: 1px solid var(--line-soft);
    margin-top: clamp(26px, 3.4vw, 44px);
}

.fact {
    background: rgba(6, 33, 63, .5);
    padding: 26px clamp(14px, 1.6vw, 26px) 28px;
    transition: background .5s var(--ease);
}

/* each tile lights up on its own so the row reads as four separate things */
.fact:hover {
    background: linear-gradient(165deg, rgba(46, 217, 195, .22), rgba(27, 86, 145, .42));
    box-shadow: inset 0 0 0 1px rgba(94, 242, 196, .38), 0 0 34px -14px rgba(94, 242, 196, .6);
}

.fact:hover .ic {
    background: rgba(94, 242, 196, .22);
    border-color: rgba(94, 242, 196, .6);
}

.fact:hover h4 {
    color: #fff;
    text-shadow: 0 0 16px rgba(255, 255, 255, .6);
}

.fact .ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(79, 163, 240, .14);
    border: 1px solid rgba(138, 195, 248, .22);
    margin-bottom: 16px;
}

/* this row was unreadable at 13.5/14.5 — the tile is the densest text on
   the page, so it gets the largest step up */
.fact h4 {
    font-family: var(--font-d);
    font-size: 17px;
    font-weight: 700;
    color: #6FEFD0;
    letter-spacing: .01em;
    line-height: 1.3;
    transition: color .35s var(--ease), text-shadow .35s var(--ease);
}

.fact p {
    margin-top: 10px;
    font-size: 16.5px;
    line-height: 1.55;
    color: #fff;
}

/* ---------- numbered timeline ---------- */
.tl {
    margin-top: clamp(28px, 3.6vw, 46px);
    position: relative;
    padding-left: 34px;
}

.tl::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(var(--blue-400), transparent);
}

.tl-item {
    position: relative;
    padding: 0 0 26px;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-item::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--navy-950);
    border: 1px solid var(--blue-300);
    transition: .45s var(--ease);
}

.tl-item:hover::before {
    background: var(--blue-300);
    box-shadow: 0 0 12px rgba(138, 195, 248, .8);
}

.tl-item h4 {
    font-family: var(--font-d);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.tl-item p {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--txt-dim);
}

/* ---------- course catalogue ---------- */
.cat-group {
    margin-top: clamp(18px, 2.2vw, 30px);
}

.cat-group>h3 {
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cat-group>h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
}

.card {
    display: block;
    position: relative;
    padding: 22px 22px 28px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    transition: .5s var(--ease);
}

.card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(var(--ac), transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .55s var(--ease);
}

/* hover shifts the whole card into the aurora green so it clearly separates
   from its neighbours, not just a slightly bluer blue */
.card:hover {
    background: linear-gradient(165deg, rgba(46, 217, 195, .20), rgba(27, 86, 145, .40));
    border-color: rgba(94, 242, 196, .55);
    box-shadow: 0 0 34px -14px rgba(94, 242, 196, .75);
    transform: translateY(-4px);
}

.card:hover h4 {
    color: #6FEFD0;
    text-shadow: 0 0 18px rgba(94, 242, 196, .45);
}

.card:hover p,
.card:hover ul li {
    color: #fff;
}

.card:hover::after {
    transform: scaleY(1);
}

.card h4 {
    font-family: var(--font-d);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    /* the heading is centred, so it can no longer be kept off the corner
       arrow with a one-sided pad — any pad wide enough to clear the arrow
       also shifts the text off centre. Drop below the arrow instead: full
       content width, genuinely centred, and collision is impossible. */
    margin-top: 30px;
    line-height: 1.35;
    transition: color .5s var(--ease), text-shadow .5s var(--ease);
}

.card p {
    margin-top: 12px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--txt-dim);
}

.card ul {
    margin-top: 14px;
    list-style: none;
    display: grid;
    gap: 10px;
}

/* centred rows, so no hanging dash: a leading marker only reads as a marker
   when every row starts on the same left edge, which centring removes */
.card ul li {
    position: relative;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--txt);
}

.card .go {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 22px;
    height: 22px;
    opacity: .35;
    transition: .45s var(--ease);
}

.card:hover .go {
    opacity: 1;
    transform: translate(3px, -3px);
}

.card .go svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--blue-200);
    stroke-width: 1.6;
}

/* ---------- outcome columns ---------- */
.outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 44px);
    margin-top: clamp(28px, 3.4vw, 44px);
}

/* ---------- contact detail rows ---------- */
.cdetails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: clamp(28px, 3.4vw, 44px);
}

.cdetail {
    padding: 26px 28px;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    transition: .5s var(--ease);
}

.cdetail:hover {
    border-color: rgba(138, 195, 248, .38);
    transform: translateY(-4px);
}

.cdetail h4 {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue-300);
    margin-bottom: 12px;
}

.cdetail a,
.cdetail p {
    font-size: 16px;
    color: #fff;
    word-break: break-word;
}

.cdetail a:hover {
    color: var(--blue-300);
}

@media (max-width:1024px) {

    .lvls,
    .facts,
    .outcomes {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:700px) {

    .lvls,
    .facts,
    .outcomes,
    .cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TOUCH / SMALL-SCREEN PERFORMANCE
   Phones were dropping frames. The three worst offenders are all
   continuously-compositing effects that a phone GPU re-rasterises every
   frame; none of them carry meaning, so they come off below 900px and on
   any pointerless device.
   ============================================================ */
@media (max-width: 900px),
(hover: none) {

    /* eleven buttons each animating a blurred layer forever */
    .btn::after,
    .method-banner::after {
        display: none;
    }

    /* a fixed, full-width backdrop blur is the single most expensive thing
       in the layout — a flat tint reads the same at this size */
    header.solid {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(5, 9, 15, .82);
    }

    /* The pinned, scroll-scrubbed flight is what makes the hero stutter and
       jump on a phone. Progress is measured against window.innerHeight, and
       that value changes the instant the URL bar collapses — so the camera
       re-scales mid-scroll and snaps. Phones get the hero as one still
       screen: no pin, no per-frame transforms, no promoted layers. The JS
       skips the flight at this same breakpoint. */
    .hero-scroll {
        height: auto;
    }

    /* relative, not static: .hero-core is absolutely positioned
       against this box */
    .hero {
        position: relative;
        height: 100svh;
    }

    .stage {
        perspective: none;
    }

    .layer,
    .hcv {
        will-change: auto;
        transform: none;
    }

    .lv,
    .spark {
        animation-duration: 14s;
    }
}

/* ============ phones ============ */
@media (max-width: 600px) {

    /* the hero is unpinned at this width (see the perf block above), so it
       is exactly one screen and needs no scroll length of its own */
    .hero-scroll {
        height: auto;
    }

    .sec {
        padding: 56px 0;
    }

    .wrap {
        padding-inline: 18px;
    }

    /* leaner header leaves more of the hero visible */
    .nav {
        height: 66px;
    }

    header.solid .nav {
        height: 56px;
    }

    .brand img {
        height: 40px;
    }

    header.solid .brand img {
        height: 34px;
    }

    /* the header CTA was taking half the bar and wrapping onto two lines,
       which is also what squeezed the logo. It is still in the burger menu. */
    .nav-right {
        gap: 8px;
    }

    .nav-right .btn.sm {
        padding: 9px 13px;
        font-size: 9.5px;
        letter-spacing: .06em;
        white-space: nowrap;
        min-height: 0;
    }

    /* 1.04 is a desktop line-height; it collides at 34px over 3 lines */
    h1 {
        line-height: 1.12;
    }

    h1 .lead-word {
        margin-bottom: .02em;
    }

    /* the global clamp bottoms out at 34px, which leaves the hero wordmark
       and its script line far too small on a phone — scale off the viewport.
       14.6vw is the ceiling: past that "STS GLOBAL" breaks onto two lines,
       and the 47px floor is what keeps it on one line on a 320px screen. */
    .hero-core h1 {
        font-size: clamp(47px, 14.6vw, 64px);
        line-height: 1.02;
    }

    /* Marck Script is much wider per character than Corinthia, so the
       Russian descriptor would wrap to two lines at the bigger heading
       size. Same specificity as the base RU rule, but later, so it wins. */
    html[lang="ru"] .hero-core h1 {
        --script-size: .54em;
    }

    .hero-sub {
        font-size: 15px;
        margin-top: 12px;
    }

    /* the taller heading would otherwise push the buttons off the fold */
    .hero-cta {
        margin-top: 26px;
    }

    /* stacked cards don't need desktop-sized inner padding */
    .bcard,
    .lbox,
    .pillar,
    .lvl,
    .card,
    .fact,
    .frow,
    .cdetail,
    .tl-item {
        padding: 20px;
    }

    .quote-in {
        padding: 24px 22px;
    }

    .method-banner {
        padding: 24px 22px;
    }

    .stat {
        padding: 22px 12px 22px 0;
    }

    .stat:not(:first-child) {
        padding-left: 14px;
    }

    .feat {
        padding: 22px 16px 24px;
    }

    /* stacked, but centred and capped — edge-to-edge pills looked like
       banners rather than buttons */
    .hero-cta,
    .cta-row {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta .btn,
    .cta-row .btn {
        width: min(100%, 290px);
        padding-inline: 20px;
        justify-content: center;
    }

    /* 4 across wraps to an lopsided 3+1 on a phone — force a tidy 2x2 */
    .svcs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        max-width: 250px;
        margin-inline: auto;
        gap: 22px 14px;
    }
}