:root {
    --bg: #0d0904;
    --panel: rgba(28,19,9,.72);
    --panel2: rgba(39,27,12,.86);
    --line: rgba(242,215,173,.18);
    --text: #fbf8f3;
    --muted: #bfb7ad;
    --gold: #EEB762;
    --gold-hi: #F3DBB2;
    --gold-dim: #8A6B3A;
    --radius: 28px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--au-body,"DM Sans",system-ui,sans-serif);
    overflow-x: hidden
}

/* ---------------------------------------------------------------------------
   THE PAGE GROUND IS NOT PAINTED HERE.

   A `body:before` used to stand here painting a hue-30 radial at z-index:-5
   whose every stop was IDENTICAL to the one `.au-host` already paints in
   fpfx-aurora.css. It was a duplicate: a second full-viewport composited
   layer drawing the same pixels.

   It also sat in the wrong place to be dithered. A pseudo-element paints
   ABOVE its originating element's own background, negative z-index or not,
   and the ground dither is a background-image on that background — so an
   opaque :before covered the layer that was supposed to smooth it. The
   comment that stood here claimed the dither "resolves" this layer's
   banding; it could not, from underneath.

   Measured A/B on an isolated ground (no content, 1280x900, three columns,
   longest run of one identical 8-bit value):

       without body:before   7px /  9px /  6px      <- shipping
       with    body:before  10px /  9px / 10px

   Honest about the size of it: the win is small, because .au-grain::after
   re-dithers everything from above anyway. The rule is gone because it was
   redundant and mis-layered, not because it was the cause of banding.
   Nothing replaces it — .au-host is the ground on every surface.
   --------------------------------------------------------------------------- */

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

button {
    font: inherit
}

.section {
    position: relative;
    padding: 110px max(5vw, 28px)
}

.center {
    text-align: center;
    max-width: 1050px;
    margin: 0 auto 55px
}

.kicker {
    display: block;
    color: #dfd5c7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 18px
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3,
h4 {
    /* h3/h4 were missing here, so every sub-heading on the marketing pages fell
       back to the body face. The approved Aurora reference puts the display
       face on h1-h4. */
    font-family: var(--au-disp,"Outfit",system-ui,sans-serif);
    /* Was -.055em, the tracking Manrope needed. Outfit is ~6.6% narrower
       per glyph, so it does not need the same correction, and the approved
       Aurora reference (_design/dashboard-preview.html) never tracks a
       heading tighter than -.035em. */
    letter-spacing: -.035em
}

h2 {
    font-size: clamp(44px, 5.4vw, 84px);
    /* Was .98 — a display ratio tuned for Manrope. This bare element rule
       leaks onto every class-styled h2 that sets only font-size (measured:
       .plinth-set-h, .plinth-risk-h, and the legal operator heading), and
       Outfit has a taller line box than Manrope, so .98 cramped them. No
       display-size h2 on any live route takes its line-height from here —
       .fx-head h2 (1.08) and .lg-sec h2 (1.25) shadow it — so raising it
       repairs the small headings at no cost to the display ones. */
    line-height: 1.18;
    margin-bottom: 22px
}

h2 em,
h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ecc18b, var(--gold));
    -webkit-background-clip: text;
    color: transparent
}

.center>p,
.split-head>p {
    color: var(--muted);
    line-height: 1.75
}

.promo-bar {
    position: relative;
    height: 42px;
    background: linear-gradient(90deg, #bc701f, #d4a123);
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    z-index: 100
}

.promo-track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: ticker 34s linear infinite
}

.promo-track i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff
}

.promo-timer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    background: rgba(0, 0, 0, .25);
    height: 100%;
    white-space: nowrap
}

.promo-timer small {
    font-size: 9px
}

.header {
    height: 78px;
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    padding: 0 max(4vw, 24px);
    background: rgba(13,9,4,.62);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line)
}

.logo img {
    width: 180px
}

.header nav {
    display: flex;
    gap: 28px;
    margin: auto
}

.header nav a {
    color: #ddd7ce;
    font-size: 14px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 17px 25px;
    border-radius: 12px;
    background: linear-gradient(100deg, #e19b4a, var(--gold));
    font-weight: 800;
    box-shadow: 0 18px 50px rgba(208,145,34,.25);
    border: 0
}

.btn.small {
    padding: 13px 18px
}

.menu {
    display: none
}

.hero {
    min-height: calc(100vh - 120px);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 80px max(5vw, 28px);
    overflow: hidden
}

.hero-motion {
    position: absolute;
    inset: -6% -6% -6% 18%;
    background: radial-gradient(closest-side at 68% 46%, rgba(210,132,40,.30), transparent 72%);
    opacity: .9;
    mix-blend-mode: screen;
    filter: saturate(1.15) contrast(1.02);
    animation: heroGlow 7s ease-in-out infinite alternate
}
.hero-motion:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side at 62% 45%, rgba(229,173,96,.28), transparent 70%);
    mix-blend-mode: screen;
    animation: heroPulse 5.5s ease-in-out infinite alternate
}

.hero-motion:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13,9,4,.92) 0%, rgba(13,9,4,.48) 42%, rgba(13,9,4,.1) 72%), linear-gradient(0deg, #0d0904 0%, transparent 25%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, transparent)
}

.hero-copy {
    position: relative;
    z-index: 5;
    max-width: 680px
}

.pill {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: rgba(255, 255, 255, .045);
    font-size: 12px
}

.pill b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold)
}

h1 {
    font-size: clamp(70px, 9vw, 138px);
    line-height: .82;
    margin: 30px 0
}

.hero-copy>p {
    max-width: 570px;
    color: #ccc6bd;
    font-size: 18px;
    line-height: 1.7
}

.hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px
}

.video-btn {
    border: 0;
    background: transparent;
    color: white
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 50px
}

.hero-stats div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(24,17,8,.58);
    backdrop-filter: blur(12px)
}

.hero-stats strong {
    display: block;
    font-size: 22px
}

.hero-stats span {
    font-size: 11px;
    color: var(--muted)
}

.hero-scene {
    position: relative;
    height: 720px
}

.portal {
    position: absolute;
    left: 13%;
    top: 8%;
    width: 75%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226,173,80,.34), rgba(89,59,21,.12) 45%, transparent 68%);
    filter: drop-shadow(0 0 50px rgba(225,166,72,.42))
}

.portal span {
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(229,181,95,.36);
    border-radius: 50%;
    animation: spin 16s linear infinite
}

.portal span:nth-child(2) {
    inset: 20%;
    animation-direction: reverse
}

.character-rig {
    position: absolute;
    left: 21%;
    bottom: -9%;
    width: 58%;
    z-index: 3
}

.character-rig img {
    width: 100%;
    display: block
}

.character-glow {
    position: absolute;
    filter: blur(10px);
    opacity: .65
}

.character-light {
    position: absolute;
    left: 33%;
    top: 7%;
    width: 34%;
    height: 20%;
    background: radial-gradient(circle, #fff8, transparent 68%);
    mix-blend-mode: screen
}

.hero-coins {
    position: absolute;
    width: 32%;
    right: 2%;
    top: 7%;
    z-index: 4;
    filter: drop-shadow(0 0 25px #de9e32)
}

.payout-card {
    position: absolute;
    z-index: 5;
    width: 190px;
    padding: 16px;
    border: 1px solid rgba(232,195,114,.42);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(55,37,13,.9), rgba(22,15,7,.82));
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
}

.payout-card strong {
    font-size: 22px
}

.payout-card span,
.payout-card small,
.payout-card i {
    display: block;
    margin-top: 7px;
    font-size: 9px
}

.payout-card small {
    color: #eacb81
}

.payout-card i {
    text-align: right;
    color: #d8d0c5
}

.p1 {
    left: 0;
    top: 22%
}

.p2 {
    right: 0;
    top: 30%
}

.p3 {
    left: 8%;
    bottom: 16%
}

.p4 {
    right: 5%;
    bottom: 10%
}

.logo-ticker,
.certificate-section {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(16,11,5,.62);
    overflow: hidden
}

.logo-ticker p {
    text-align: center;
    font-size: 10px;
    letter-spacing: .2em;
    color: #afa699;
    padding: 20px 0 4px
}

.ticker-viewport {
    overflow: hidden
}

.ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 50px;
    padding: 24px 0;
    animation: ticker 32s linear infinite
}

.ticker-track span {
    font-weight: 800;
    color: #e1d9cf;
    letter-spacing: .05em
}

.ticker-track i {
    width: 7px;
    height: 7px;
    background: var(--gold-hi);
    transform: rotate(45deg)
}

@keyframes ticker {
    to {
        transform: translateX(-25%)
    }
}

.certificate-section {
    padding: 70px 0
}

.certificate-head,
.split-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 35px;
    padding: 0 max(4vw, 24px)
}

.certificate-head h2 {
    font-size: 48px
}

.live-pulse {
    font-size: 12px
}

.live-pulse i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 16px #22C55E
}

.certificate-marquee {
    overflow: hidden
}

.certificate-track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: ticker 50s linear infinite
}

.cert-card {
    width: 430px;
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 15px;
    align-items: center;
    padding: 18px 18px 18px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(66,46,15,.8), rgba(25,17,8,.8));
    position: relative;
    overflow: hidden
}

.cert-card:before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -20%;
    width: 80px;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, #fff2, transparent);
    animation: shine 4s linear infinite
}

.cert-card img {
    width: 125px
}

.cert-card small,
.cert-card span {
    display: block;
    color: #cec5b9
}

.cert-card strong {
    display: block;
    font-size: 24px;
    margin: 8px 0
}

.cert-card button {
    grid-column: 1/3;
    background: transparent;
    border: 0;
    color: #ebce86;
    text-align: left;
    font-size: 10px;
    font-weight: 800
}

.bento {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    gap: 16px
}

.glass {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(40,28,14,.82), rgba(14,10,5,.72));
    padding: 30px;
    min-height: 310px;
    position: relative;
    overflow: hidden;
    transition: .35s
}

.glass:hover {
    border-color: #e5b05e;
    box-shadow: 0 28px 80px rgba(151,99,25,.25)
}

.glass>span,
.card-copy>span {
    color: #e8c572;
    font-size: 11px
}

.glass h3 {
    font-size: 26px;
    margin: 28px 0 12px
}

.glass p {
    color: var(--muted);
    line-height: 1.65
}

.bento-main {
    grid-row: span 2;
    min-height: 640px;
    display: flex;
    flex-direction: column
}

.visual-terminal {
    margin-top: 24px;
    flex: 1;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #0b0805;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-shadow: inset 0 0 80px rgba(135,88,23,.18)
}

.terminal-top {
    position: absolute;
    left: 52px;
    right: 52px;
    bottom: 350px;
    display: flex;
    gap: 6px
}

.terminal-top i {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%
}

.terminal-top b {
    margin-left: auto;
    font-size: 9px;
    color: #867e70
}

.visual-terminal svg {
    width: 100%;
    filter: drop-shadow(0 0 12px #deac35)
}

.terminal-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

.risk-orbit {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 35px auto 0;
    display: grid;
    place-content: center;
    text-align: center;
    background: conic-gradient(var(--gold) 0 36%, #e1994a 36% 58%, #2e251b 58%);
    position: relative
}

.risk-orbit:after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #100c07
}

.risk-orbit b,
.risk-orbit small {
    z-index: 2
}

.risk-orbit b {
    font-size: 34px
}

.speed-core {
    margin: 46px 0 0
}

.speed-core b {
    font-size: 88px;
    background: linear-gradient(#fff, #e9b97b);
    -webkit-background-clip: text;
    color: transparent
}

.speed-core em {
    font-size: 11px
}

.wide {
    grid-column: 2/4;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.asset-orbit {
    position: relative;
    width: 300px;
    height: 260px;
    display: grid;
    place-items: center
}

/* orbit rings that the asset icons ride on */
.asset-orbit:before,
.asset-orbit:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(238,203,148,.28);
    transform: translate(-50%, -50%)
}

.asset-orbit:before {
    width: 250px;
    height: 250px;
    animation: spin 26s linear infinite
}

.asset-orbit:after {
    width: 150px;
    height: 150px;
    border-style: solid;
    border-color: rgba(238,203,148,.16);
    animation: spin 16s linear infinite reverse
}

.asset-orbit>img {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(20,14,7,.9);
    border: 1px solid rgba(238,203,148,.35);
    box-shadow: 0 0 18px rgba(226,180,79,.4);
    left: 50%;
    top: 50%;
    transform-origin: center
}

/* each asset sits on a ring and revolves; counter-spin keeps the logo upright */
.asset-orbit>img:nth-child(1) {
    animation: orbit-a 26s linear infinite
}

.asset-orbit>img:nth-child(2) {
    animation: orbit-b 26s linear infinite
}

.asset-orbit>img:nth-child(3) {
    animation: orbit-c 16s linear infinite
}

.orbit-core {
    position: relative;
    z-index: 2;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 25%, #e8b66f, #5d3f16 48%, #150f07 75%);
    box-shadow: 0 0 55px #d28b29, inset 0 0 22px rgba(246,230,199,.2)
}

.orbit-core:after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(232,187,113,.5);
    animation: pulse 3s ease-in-out infinite
}

.orbit-core img {
    width: 50px
}

@keyframes orbit-a {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(125px) rotate(0deg) }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(125px) rotate(-360deg) }
}

@keyframes orbit-b {
    from { transform: translate(-50%, -50%) rotate(140deg) translateX(125px) rotate(-140deg) }
    to   { transform: translate(-50%, -50%) rotate(500deg) translateX(125px) rotate(-500deg) }
}

@keyframes orbit-c {
    from { transform: translate(-50%, -50%) rotate(250deg) translateX(75px) rotate(-250deg) }
    to   { transform: translate(-50%, -50%) rotate(610deg) translateX(75px) rotate(-610deg) }
}

.feature-rail {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feature-rail article {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(24,17,8,.68)
}

.feature-rail strong {
    font-size: 30px;
    color: #e8c272
}

.feature-rail h3 {
    margin-bottom: 7px
}

.feature-rail p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.plan-builder {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    border: 1px solid var(--line);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(20,14,7,.8);
    box-shadow: 0 40px 110px rgba(0, 0, 0, .45)
}

.plan-controls,
.plan-summary {
    padding: 38px
}

.control-label {
    font-size: 10px;
    letter-spacing: .18em;
    color: #b4aa9e;
    margin: 5px 0 14px
}

.type-tabs,
.size-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.type-tabs button,
.size-tabs button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    color: #e3ddd4;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer
}

.type-tabs button.active,
.size-tabs button.active {
    background: linear-gradient(135deg, #e19545, #ddaa2f);
    color: #fff;
    border-color: transparent
}

.buyer-scene {
    margin: 24px 0;
    min-height: 220px;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: radial-gradient(circle at 20% 40%, rgba(218,140,36,.25), transparent 50%), rgba(255, 255, 255, .02)
}

.mini-character {
    height: 180px;
    position: relative;
    overflow: hidden
}

.mini-character img {
    height: 250px;
    position: absolute;
    left: 22px;
    top: 4px
}

.mini-character .scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #e1b346;
    box-shadow: 0 0 14px #e1b346;
    animation: scan 3s linear infinite
}

.buyer-scene small {
    color: #e9c878
}

.buyer-scene p,
.buyer-scene li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.custom-trust {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025)
}

.custom-trust .check {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #1FA652;
    font-weight: 900
}

.custom-trust small {
    display: block;
    color: var(--muted);
    margin-top: 4px
}

.stars {
    margin-left: auto;
    color: #ffc52d;
    letter-spacing: 2px
}

.plan-summary {
    position: relative;
    background: radial-gradient(circle at 95% 0, rgba(221,169,46,.18), transparent 42%)
}

.summary-top {
    display: flex;
    justify-content: space-between
}

.selected-type {
    font-weight: 800
}

.discount-badge {
    background: var(--gold);
    padding: 7px 10px;
    border-radius: 99px;
    font-size: 11px
}

.selected-size {
    font: 800 68px/1 var(--au-disp,"Outfit",system-ui,sans-serif);
    margin: 26px 0 4px
}

.price-row {
    display: flex;
    align-items: end;
    gap: 13px;
    margin: 24px 0
}

.final-price {
    font-size: 50px
}

.original-price {
    font-size: 20px;
    color:var(--muted-2,#AEA8A1)
}

.save-panel {
    margin-left: auto;
    padding: 12px 16px;
    border: 1px solid #d89438;
    border-radius: 14px;
    background: rgba(198,131,37,.16)
}

.save-panel small {
    display: block;
    color: #cfc5b7
}

.save-panel b {
    font-size: 24px;
    color: #e9c97b
}

.phase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 22px 0
}

.phase-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    background: rgba(255, 255, 255, .03)
}

.phase-card h4 {
    margin: 0 0 10px
}

.phase-card div {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    margin: 6px 0
}

.plan-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0
}

.plan-facts span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 10px
}

.checkout-link {
    width: 100%
}

.secure-note {
    text-align: center;
    color: #979083;
    font-size: 10px;
    margin-top: 14px
}

.split-head strong {
    font-size: 64px
}

.split-head strong small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500
}

.rule-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.rule-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(23,16,8,.65)
}

.rule-grid span {
    color: #e8c675
}

.rule-grid p {
    color: var(--muted)
}

.dashboard {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center
}

.dashboard-copy ul {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

.dashboard-copy li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: #d4cdc3
}

.dashboard-stage {
    position: relative;
    min-height: 620px;
    perspective: 1300px
}

.dash-frame {
    position: absolute;
    inset: 30px 0 40px 20px;
    border: 1px solid #c58a3e;
    border-radius: 26px;
    overflow: hidden;
    background: #0d0a07;
    display: grid;
    grid-template-columns: 75px 1fr;
    transform: rotateY(-6deg) rotateX(2deg);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .48), 0 0 60px rgba(206,132,33,.18)
}

.dash-nav {
    background: #120e09;
    border-right: 1px solid var(--line);
    padding: 22px 18px
}

.dash-nav img {
    width: 38px
}

.dash-nav i {
    display: block;
    height: 38px;
    border-radius: 10px;
    background: #291f13;
    margin: 18px 0
}

.dash-content {
    padding: 30px
}

.dash-top {
    display: flex;
    justify-content: space-between
}

.dash-top span {
    color: #4ADE80
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 25px 0
}

.dash-kpis article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025)
}

.dash-kpis small {
    color: var(--muted)
}

.dash-kpis b {
    display: block;
    font-size: 24px;
    margin-top: 8px
}

.dash-chart {
    height: 240px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(rgba(182,118,30,.1), transparent)
}

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

.dash-chart path {
    fill: none;
    stroke: #deaa33;
    stroke-width: 6;
    filter: drop-shadow(0 0 12px #dda931)
}

.rewards {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: center
}

.mini-stats {
    display: flex;
    gap: 12px
}

.mini-stats span {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    font-size: 10px
}

.mini-stats b {
    display: block;
    font-size: 19px
}

.reward-vault {
    height: 600px;
    position: relative;
    perspective: 1200px
}

.reward-ring {
    position: absolute;
    inset: 8%;
    border: 1px solid #e09e3f;
    border-radius: 50%;
    transform: rotateX(70deg);
    box-shadow: 0 0 70px rgba(225,162,72,.25)
}

.reward-slab {
    position: absolute;
    left: 10%;
    right: 4%;
    height: 135px;
    border: 1px solid #e6ba65;
    border-radius: 24px;
    background: linear-gradient(100deg, rgba(115,74,20,.95), rgba(218,146,36,.8));
    box-shadow: 0 20px 70px rgba(203,135,33,.28);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px
}

.reward-slab i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2ab4d;
    font-size: 30px
}

.reward-slab small {
    padding: 7px 10px;
    border: 1px solid #fff5;
    border-radius: 99px
}

.reward-slab b {
    margin-left: auto;
    font-size: 30px
}

.s1 {
    top: 80px;
    transform: rotate(6deg)
}

.s2 {
    top: 235px
}

.s3 {
    top: 390px;
    transform: rotate(-6deg)
}

.reward-vault>img {
    position: absolute;
    width: 210px;
    right: 0;
    top: 210px
}

.process {
    padding-left: 0;
    padding-right: 0
}

.process-head {
    padding: 0 max(5vw, 28px)
}

.process-pin {
    overflow: hidden;
    padding: 30px 0
}

.process-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 7vw
}

.process-card {
    width: 420px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(43,30,13,.9), rgba(15,10,5,.85));
    overflow: hidden;
    padding-bottom: 30px
}

.process-scene {
    height: 330px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 70%, rgba(221,148,45,.5), transparent 45%), linear-gradient(#1c1308, #060504)
}

.process-scene>img {
    position: absolute;
    height: 370px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%)
}

.process-scene:after {
    content: "";
    position: absolute;
    inset: auto 8% 10% 8%;
    height: 40px;
    border-radius: 50%;
    background: #de9633;
    filter: blur(28px)
}

.holo {
    position: absolute;
    border: 1px solid #e5b15e;
    background: rgba(180,117,34,.14);
    box-shadow: 0 0 25px rgba(223,162,61,.25)
}

.h1 {
    width: 130px;
    height: 80px;
    left: 25px;
    top: 35px;
    transform: rotateY(25deg)
}

.h2 {
    width: 105px;
    height: 145px;
    right: 24px;
    top: 70px
}

.activity {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 9px 16px;
    border-radius: 99px;
    background: #deac33;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em
}

.process-card>span {
    display: block;
    color: #e8c675;
    padding: 24px 28px 0
}

.process-card h3,
.process-card p {
    padding: 0 28px
}

.process-card h3 {
    font-size: 28px;
    margin: 14px 0 9px
}

.process-card p {
    color: var(--muted);
    line-height: 1.65
}

.markets {
    min-height: 760px;
    text-align: center;
    overflow: hidden;
    background: transparent
}

.market-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    overflow: hidden;
    opacity: .72;
    mix-blend-mode: screen
}

/* The `.market-*` section was removed from the marketing page; its CSS, its
   JavaScript and its images all remain unreferenced. This rule is deleted
   rather than left dead because it was the platform's ONLY breach of the
   no-cool-hues rule: `waves.png` still carries the inherited build's blue
   (hues 210-230), and the 38-degree hue rotation here pushed that to 248-268 --
   violet -- while turning the gold parts yellow-green. Nothing rendered it,
   but reusing the class would have. See OUTSTANDING.md section F. */

.market-copy {
    position: relative;
    z-index: 4
}

.market-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.market-links path {
    fill: none;
    stroke: url(#x);
    stroke-width: 2;
    stroke-dasharray: 9 12;
    filter: drop-shadow(0 0 8px #e1b449);
    animation: dash 4s linear infinite
}

.market-universe {
    position: absolute;
    inset: 220px 5% 0;
    z-index: 3
}

.x-core {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #e5b15d;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #e2a04a, #251a0b 70%);
    box-shadow: 0 0 65px #dc912b
}

.x-core:before,
.x-core:after {
    content: "";
    position: absolute;
    border: 1px solid #e19e44;
    border-radius: 50%;
    inset: -35px;
    animation: spin 12s linear infinite
}

.x-core:after {
    inset: -75px;
    animation-direction: reverse
}

.x-core img {
    width: 75px
}

.market-icon {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    background: rgba(15,11,6,.88);
    box-shadow: 0 0 35px rgba(183,118,30,.22)
}

.market-icon img {
    width: 54%
}

.mi1 {
    left: 13%;
    top: 55%
}

.mi2 {
    left: 25%;
    top: 28%
}

.mi3 {
    left: 40%;
    top: 12%
}

.mi4 {
    right: 23%;
    top: 25%
}

.mi5 {
    right: 10%;
    top: 55%
}

.mi6 {
    left: 7%;
    top: 15%
}

.mi7 {
    right: 4%;
    top: 9%
}

.mi8 {
    left: 31%;
    top: 66%
}

.mi9 {
    right: 34%;
    top: 69%
}

.compare-arena {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center
}

.legacy-stack {
    position: relative;
    height: 510px
}

.legacy-stack article {
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    padding: 25px;
    border: 1px solid #948C82;
    border-radius: 20px;
    background: rgba(18,14,10,.88);
    box-shadow: 0 25px 60px #0007
}

.legacy-stack article:nth-child(2) {
    top: 95px;
    transform: scale(.96)
}

.legacy-stack article:nth-child(3) {
    top: 190px;
    transform: scale(.92)
}

.legacy-stack article:nth-child(4) {
    top: 285px;
    transform: scale(.88)
}

.legacy-stack span,
.legacy-stack small {
    display: block;
    color: #868179;
    font-size: 10px
}

.legacy-stack b {
    display: block;
    font-size: 22px;
    margin: 15px 0
}

.versus {
    text-align: center;
    font-weight: 900
}

.fpfx-standard {
    min-height: 500px;
    padding: 40px;
    border: 1px solid #e0ab40;
    border-radius: 30px;
    background: radial-gradient(circle at 80% 20%, rgba(220,160,43,.28), transparent 42%), linear-gradient(145deg, rgba(91,62,22,.9), rgba(27,18,8,.9));
    position: relative
}

.fpfx-standard>img {
    width: 65px
}

.fpfx-standard h3 {
    font-size: 32px
}

.fpfx-standard ul {
    list-style: none;
    padding: 0
}

.fpfx-standard li {
    padding: 17px 0;
    border-bottom: 1px solid #fff2
}

.standard-score {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 120px;
    height: 120px;
    border: 1px solid #e7b66b;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center
}

.standard-score b {
    font-size: 38px
}

.standard-score span {
    font-size: 8px
}

.video-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.video-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(25,18,9,.82);
    padding-bottom: 20px
}

.video-shell {
    height: 400px;
    position: relative;
    background: #100c07
}

.video-shell video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px
}

.video-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid #fff4;
    border-radius: 50%;
    background: #08060cb8;
    color: white;
    backdrop-filter: blur(8px)
}

.video-card h3,
.video-card>b,
.video-card>small {
    display: block;
    margin: 12px 18px 0
}

.video-card>b {
    font-size: 25px
}

.video-card>small {
    color: var(--muted)
}

.condition-system {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.condition-system article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: linear-gradient(160deg, rgba(43,31,15,.85), rgba(13,9,5,.8));
    overflow: hidden
}

.condition-visual {
    height: 220px;
    position: relative;
    display: grid;
    place-items: center
}

.icon-core {
    width: 115px;
    height: 115px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(145deg, #e19747, #ddaa31);
    box-shadow: 0 0 50px rgba(221,154,43,.34)
}

.condition-visual i {
    position: absolute;
    border: 1px solid #e09e42;
    border-radius: 50%;
    inset: 20px;
    animation: spin 12s linear infinite
}

.condition-visual i:nth-child(2) {
    inset: 48px;
    animation-direction: reverse
}

.condition-visual i:nth-child(3) {
    width: 10px;
    height: 10px;
    background: #fff;
    left: 25px;
    top: 90px;
    box-shadow: 0 0 15px #fff
}

.condition-system article>span {
    color: #e8c572
}

.condition-system h3 {
    font-size: 24px
}

.condition-system p {
    color: var(--muted);
    line-height: 1.6
}

.condition-system article>b {
    font-size: 10px;
    color: #e8c572
}

.expo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.expo-grid article {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(22,16,8,.72)
}

.expo-visual {
    height: 360px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, #9c6a22, transparent 60%)
}

.expo-visual img {
    height: 420px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.expo-visual span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 10px;
    letter-spacing: .15em
}

.expo-grid h3,
.expo-grid p {
    margin-left: 20px
}

.expo-grid p {
    color: var(--muted)
}

.testimonial-wall {
    columns: 3;
    column-gap: 16px
}

.testimonial-wall article {
    break-inside: avoid;
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(24,17,9,.72)
}

.testimonial-wall article:nth-child(2n) {
    padding-block: 38px
}

.testimonial-wall div {
    display: flex;
    align-items: center;
    gap: 12px
}

.testimonial-wall div span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e19848, #deab32)
}

.testimonial-wall p {
    font-size: 18px;
    line-height: 1.55;
    margin: 20px 0
}

.testimonial-wall small {
    color: #a49c8f
}

.community-card {
    max-width: 1400px;
    margin: auto;
    min-height: 600px;
    border: 1px solid var(--line);
    border-radius: 34px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    padding: 55px;
    background: radial-gradient(circle at 72% 45%, rgba(205,135,35,.22), transparent 37%), rgba(21,15,8,.72)
}

.network-visual {
    height: 500px;
    position: relative
}

.network-globe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 25%, #e6b365, #875716 43%, #181007 72%);
    box-shadow: inset -45px -40px 65px #040302, 0 0 90px rgba(222,155,55,.42)
}

.network-globe:after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 1px solid #f1daa8;
    animation: pulse 3s ease-in-out infinite
}

.network-globe img {
    width: 85px;
    filter: drop-shadow(0 0 18px #fff)
}

.network-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #d8922a;
    opacity: .6
}

.city {
    position: absolute;
    width: 80px;
    height: 44px;
    border: 1px solid #e4b059;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1b1207;
    font-style: normal;
    font-size: 10px;
    box-shadow: 0 0 25px rgba(225,168,70,.18)
}

.city em {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #fff
}

.c1 {
    left: 17%;
    top: 22%
}

.c2 {
    right: 20%;
    top: 18%
}

.c3 {
    right: 8%;
    top: 50%
}

.c4 {
    right: 28%;
    bottom: 10%
}

.c5 {
    left: 20%;
    bottom: 14%
}

.c6 {
    left: 5%;
    top: 52%
}

.faq {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 70px
}

.faq-list {
    border-top: 1px solid var(--line)
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-item button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    background: transparent;
    border: 0;
    color: white;
    text-align: left;
    font-weight: 700
}

.faq-item p {
    display: none;
    color: var(--muted);
    line-height: 1.7;
    padding: 0 0 20px
}

.faq-item.open p {
    display: block
}

.faq-item.open i {
    transform: rotate(45deg)
}

.final-cta {
    min-height: 720px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 60px
}

.cta-character {
    position: absolute;
    height: 650px;
    left: -30px;
    bottom: -90px
}

.cta-coins {
    position: absolute;
    width: 240px;
    right: 6%;
    top: 30px
}

.cta-rings {
    position: absolute;
    inset: 0
}

.cta-rings i {
    position: absolute;
    border: 1px solid rgba(228,173,86,.25);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 780px;
    height: 360px;
    animation: spin 18s linear infinite
}

.cta-rings i:nth-child(2) {
    width: 980px;
    height: 500px;
    animation-direction: reverse
}

.cta-rings i:nth-child(3) {
    width: 1200px;
    height: 650px
}

.final-cta>div:last-child {
    position: relative;
    z-index: 3
}

.final-cta h2 {
    font-size: clamp(58px, 7vw, 110px)
}

footer {
    position: relative;
    padding: 80px max(5vw, 28px) 30px;
    border-top: 1px solid var(--line);
    background: #0A0806
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.socials a {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 11px
}


.promo-modal,
.exit-modal {
    position: fixed;
    z-index: 1000;
    background: linear-gradient(145deg, #2f2110, #0e0a05);
    border: 1px solid #e1a94a;
    border-radius: 26px;
    box-shadow: 0 35px 120px #000;
    display: none
}

.promo-modal {
    width: min(760px, 92vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: 280px 1fr;
    overflow: hidden;
    padding: 0
}

.promo-modal.show {
    display: grid
}

.modal-character {
    height: 430px;
    background: radial-gradient(circle, #b57a25, transparent 65%);
    overflow: hidden
}

.modal-character img {
    height: 500px;
    transform: translateX(-20px)
}

.promo-modal>div:last-of-type {
    padding: 45px 35px
}

.promo-modal span,
.exit-modal span {
    color: #e9c97b;
    font-size: 11px;
    letter-spacing: .15em
}

.promo-modal h2 {
    font-size: 42px;
    margin: 14px 0
}

.promo-modal p,
.exit-modal p {
    color: var(--muted);
    line-height: 1.6
}

.coupon-box {
    display: flex;
    justify-content: space-between;
    border: 1px dashed #e6b862;
    border-radius: 12px;
    padding: 14px;
    margin: 22px 0
}

.coupon-box button {
    background: transparent;
    border: 0;
    color: white
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #130e07;
    color: white;
    z-index: 3
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: #000b;
    z-index: 999
}

.modal-backdrop.show {
    display: block
}

.exit-modal {
    right: 25px;
    bottom: 25px;
    width: min(420px, calc(100vw - 30px));
    padding: 30px
}

.exit-modal.show {
    display: block
}

.exit-modal>img {
    width: 150px;
    float: right
}

.exit-modal h2 {
    font-size: 40px;
    margin: 10px 0
}

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

@keyframes float {
    50% {
        transform: translateY(-14px)
    }
}

@keyframes shine {
    to {
        left: 120%
    }
}

@keyframes scan {
    from {
        top: 0
    }

    to {
        top: 100%
    }
}

@keyframes pulse {
    50% {
        transform: scale(1.2);
        opacity: .3
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -42
    }
}

@keyframes heroGlow {
    to {
        filter: saturate(1.5) brightness(1.15)
    }
}

@media(max-width:1050px) {
    .header nav {
        display: none
    }

    .hero,
    .dashboard,
    .rewards,
    .faq,
    .community-card {
        grid-template-columns: 1fr
    }

    .hero-scene {
        height: 620px
    }

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

    .bento-main {
        grid-row: auto
    }

    .wide {
        grid-column: 1/3
    }

    .plan-builder {
        grid-template-columns: 1fr
    }

    .feature-rail,
    .condition-system,
    .video-proof-grid {
        grid-template-columns: 1fr 1fr
    }

    .community-card {
        gap: 30px
    }

    .dashboard-stage {
        min-height: 580px
    }
}

@media(max-width:700px) {
    .section {
        padding: 80px 20px
    }

    .promo-timer {
        display: none
    }

    .header {
        height: 68px
    }

    .logo img {
        width: 145px
    }

    .header-actions .login {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 70px
    }

    .hero h1 {
        font-size: 72px
    }

    .hero-scene {
        height: 500px;
        margin-top: 30px
    }

    .character-rig {
        width: 72%;
        left: 14%
    }

    .payout-card {
        width: 145px;
        padding: 11px
    }

    .payout-card strong {
        font-size: 16px
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr
    }

    .certificate-head,
    .split-head {
        align-items: flex-start;
        flex-direction: column
    }

    .cert-card {
        width: 330px;
        grid-template-columns: 1fr 95px
    }

    .cert-card img {
        width: 95px
    }

    .bento,
    .feature-rail,
    .rule-grid,
    .condition-system,
    .expo-grid,
    .video-proof-grid {
        grid-template-columns: 1fr
    }

    .wide {
        grid-column: auto;
        display: block
    }

    .asset-orbit {
        width: 100%
    }

    .plan-controls,
    .plan-summary {
        padding: 24px
    }

    .buyer-scene {
        grid-template-columns: 110px 1fr
    }

    .mini-character img {
        left: 0
    }

    .selected-size {
        font-size: 52px
    }

    .phase-grid {
        grid-template-columns: 1fr
    }

    .dashboard {
        gap: 20px
    }

    .dashboard-stage {
        min-height: 500px
    }

    .dash-frame {
        inset: 20px 0;
        grid-template-columns: 50px 1fr
    }

    .dash-content {
        padding: 16px
    }

    .dash-kpis {
        grid-template-columns: 1fr
    }

    .dash-kpis article:nth-child(n+2) {
        display: none
    }

    .rewards {
        gap: 20px
    }

    .reward-vault {
        height: 500px
    }

    .reward-slab {
        left: 0;
        right: 0;
        height: 110px;
        padding: 15px
    }

    .reward-slab b {
        font-size: 18px
    }

    .process-card {
        width: 330px
    }

    .market-icon {
        width: 58px;
        height: 58px
    }

    .x-core {
        width: 115px;
        height: 115px
    }

    .compare-arena {
        grid-template-columns: 1fr
    }

    .legacy-stack {
        height: 430px
    }

    .versus {
        padding: 20px
    }

    .testimonial-wall {
        columns: 1
    }

    .community-card {
        padding: 28px
    }

    .network-visual {
        height: 420px
    }

    .network-globe {
        width: 220px;
        height: 220px
    }

    .final-cta {
        min-height: 620px
    }

    .cta-character {
        height: 470px;
        left: -100px;
        opacity: .5
    }

    .cta-coins {
        width: 150px
    }

    .promo-modal.show {
        display: block
    }

    .modal-character {
        display: none
    }

    .promo-modal>div:last-of-type {
        padding: 40px 25px
    }
}

/* ============================================================
   FPFX NEXTGEN v6 — ENHANCEMENTS
   Galaxy background · animated dashboards · lightning markets
   marquee testimonials · figma-matched reward cards · network
   ============================================================ */

/* ---- crisp animated neon ribbons layered over the hero ---- */
@keyframes heroPulse{from{opacity:.35;transform:scale(1)}to{opacity:.85;transform:scale(1.08)}}

/* ============ generic premium card hover shimmer ============ */
.glass::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-18deg);transition:.7s;pointer-events:none;z-index:4}
.glass:hover::before{left:130%}

/* ============ 01 · animated live analytics terminal ============ */
.visual-terminal{position:relative}
.chart-live{position:relative;width:100%;height:100%}
.chart-live svg{width:100%;height:100%;overflow:visible}
.chart-grid line{stroke:rgba(242,215,173,.10);stroke-width:1}
.chart-area{fill:url(#fpfxArea);opacity:0;animation:areaFade 1.2s ease .8s forwards}
@keyframes areaFade{to{opacity:.55}}
.chart-line{fill:none;stroke:url(#fpfxLine);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px #deac35);stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLine 2.6s ease forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.chart-dot{fill:#fff;filter:drop-shadow(0 0 8px #e8c472);opacity:0;animation:dotIn .4s ease 2.4s forwards}
.chart-dot-ring{fill:none;stroke:#e8c472;stroke-width:2;transform-origin:center;transform-box:fill-box;
  opacity:0;animation:dotIn .4s ease 2.4s forwards, ping 1.8s ease-out 2.6s infinite}
@keyframes dotIn{to{opacity:1}}
@keyframes ping{0%{r:4;opacity:.9}100%{r:16;opacity:0}}
.chart-bars rect{fill:url(#fpfxBar);opacity:.5;transform-origin:bottom;transform-box:fill-box;
  animation:barPump 2.4s ease-in-out infinite}
.chart-bars rect:nth-child(2n){animation-delay:.3s}
.chart-bars rect:nth-child(3n){animation-delay:.6s}
.chart-bars rect:nth-child(4n){animation-delay:.9s}
@keyframes barPump{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.chart-scan{stroke:rgba(255,255,255,.35);stroke-width:1;animation:scanX 3.2s linear infinite}
@keyframes scanX{from{transform:translateX(0)}to{transform:translateX(520px)}}
.terminal-metrics b{position:relative;padding-left:14px}
.terminal-metrics b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 10px #22C55E;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.count[data-count]{font-variant-numeric:tabular-nums}

/* ---- 02 risk orbit + 03 speed core micro-motion ---- */
.risk-orbit{animation:spin 28s linear infinite}
.risk-orbit b,.risk-orbit small{animation:spin 28s linear infinite reverse}
.speed-core b{position:relative}
.glass:hover .risk-orbit{filter:drop-shadow(0 0 22px rgba(225,177,70,.5))}

/* ================ RULE TRANSPARENCY hover FX ================ */
.rule-grid article{position:relative;overflow:hidden;cursor:default;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s}
.rule-grid article::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(120deg,#e19b4a,#dda92d,#8A6B3A);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.rule-grid article::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;top:-40%;right:-20%;
  background:radial-gradient(circle,rgba(225,177,70,.22),transparent 70%);opacity:0;transition:opacity .45s}
.rule-grid article:hover{transform:translateY(-8px);background:rgba(38,26,12,.8);
  box-shadow:0 26px 60px rgba(194,128,32,.28)}
.rule-grid article:hover::before{opacity:1}
.rule-grid article:hover::after{opacity:1}
.rule-grid span{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.14em;
  transition:transform .4s;position:relative;z-index:2}
.rule-grid article:hover span{transform:translateX(4px)}
.rule-grid h3{transition:color .35s;position:relative;z-index:2}
.rule-grid article:hover h3{color:#fff}
.rule-grid p{position:relative;z-index:2}
.rule-grid article .rule-arrow{position:absolute;right:24px;bottom:22px;font-size:18px;color:#e8c675;
  opacity:0;transform:translateX(-8px);transition:.4s;z-index:2}
.rule-grid article:hover .rule-arrow{opacity:1;transform:translateX(0)}

/* ============ THE FPFX COMMAND CENTER — working dash ============ */
.dash-top span{position:relative;padding-left:16px}
.dash-top span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 12px #4ADE80;transform:translateY(-50%);animation:pulse 1.4s ease-in-out infinite}
.dash-chart{position:relative;overflow:hidden}
.dash-chart svg{overflow:visible}
.dash-area{fill:url(#dashArea);opacity:0;animation:areaFade 1.4s ease 1s forwards}
.dash-chart path.dash-line{stroke:url(#dashLine);stroke-width:5;stroke-dasharray:1500;stroke-dashoffset:1500;
  animation:drawLine 3s ease .3s forwards}
.dash-live-dot{fill:#fff;opacity:0;animation:dotIn .4s ease 3.1s forwards}
.dash-live-ring{fill:none;stroke:#e8c472;stroke-width:2;opacity:0;
  animation:dotIn .4s ease 3.1s forwards,ping 1.8s ease-out 3.3s infinite}
.dash-grid line{stroke:rgba(242,215,173,.08)}
.dash-kpis b{font-variant-numeric:tabular-nums}

/* ================ REWARDS — matched to figma cards ================ */
.reward-vault{height:auto;min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:24px;
  perspective:1400px;padding:20px 0}
.reward-ring{display:none}
.reward-vault>img{display:none}
.reward-slab{position:relative;left:auto;right:auto;top:auto;height:auto;width:100%;
  transform:none;padding:26px 30px;gap:22px;border-radius:24px;
  border:1px solid rgba(236,205,139,.45);
  background:linear-gradient(120deg,rgba(190,123,40,.34),rgba(92,60,21,.5));
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(172,111,28,.32),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;overflow:hidden}
.reward-slab::before{content:"";position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(160px 120px at 12% 30%,rgba(236,205,139,.28),transparent 70%);pointer-events:none}
.reward-slab:nth-child(1){transform:rotate(1.6deg) translateX(3%)}
.reward-slab:nth-child(2){transform:rotate(-1deg) translateX(-2%);z-index:2}
.reward-slab:nth-child(3){transform:rotate(1.4deg) translateX(1%)}
.reward-slab:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 34px 80px rgba(223,157,57,.5)}
.reward-slab .rw-coin{width:62px;height:62px;min-width:62px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:900;position:relative;
  background:radial-gradient(circle at 34% 28%,#efd49b,#dd962c 55%,#855616);
  box-shadow:0 0 26px rgba(231,183,105,.6),inset 0 -6px 12px rgba(0,0,0,.3),inset 0 4px 8px rgba(255,255,255,.35);
  animation:coinBob 3.4s ease-in-out infinite}
.reward-slab:nth-child(2) .rw-coin{animation-delay:.4s}
.reward-slab:nth-child(3) .rw-coin{animation-delay:.8s}
@keyframes coinBob{50%{transform:translateY(-7px) rotate(6deg)}}
.reward-slab .rw-body{flex:1;display:flex;flex-direction:column;gap:8px}
.reward-slab .rw-tag{align-self:flex-start;padding:5px 12px;border:1px solid rgba(255,255,255,.35);
  border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.18em;background:rgba(0,0,0,.2)}
.reward-slab .rw-amount{font-family:var(--au-disp,"Outfit",system-ui,sans-serif);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.reward-slab .rw-amount .cents{font-size:20px;opacity:.8}
.reward-float{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#eabd80,#855616 60%,#312310);
  box-shadow:0 0 22px rgba(228,169,87,.5);display:grid;place-items:center}
.reward-float img{width:52%;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
.reward-float.rf1{width:66px;height:66px;right:-14px;top:8%;animation:float 4s ease-in-out infinite}
.reward-float.rf2{width:54px;height:54px;right:6%;bottom:6%;animation:float 5s ease-in-out infinite .6s}

/* ============ HOW WE OPERATE — revamped step scenes ============ */
.process-scene{height:280px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(220,143,40,.35),transparent 60%),linear-gradient(#20160a,#0c0804)}
.process-scene>img{display:none}
.process-scene .holo,.process-scene .activity+.holo{display:none}
.step-viz{position:relative;width:190px;height:190px;display:grid;place-items:center}
.step-viz .ring{position:absolute;border-radius:50%;border:1px solid rgba(236,199,139,.32)}
.step-viz .ring.r-a{inset:0;animation:spin 18s linear infinite}
.step-viz .ring.r-b{inset:26px;border-style:dashed;border-color:rgba(236,199,139,.22);animation:spin 12s linear infinite reverse}
.step-viz .core{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(60,41,18,.9),rgba(22,15,8,.9));border:1px solid rgba(236,199,139,.4);
  box-shadow:0 0 40px rgba(222,154,53,.35),inset 0 0 24px rgba(180,115,30,.3);position:relative;z-index:2}
.step-viz .core svg{width:44px;height:44px;stroke:#efd49b;fill:none;stroke-width:1.7;
  filter:drop-shadow(0 0 6px #e4bc5a)}
.step-viz .orbdot{position:absolute;width:14px;height:14px;border-radius:50%;background:#e2b750;
  box-shadow:0 0 14px #e2b750;top:50%;left:50%;margin:-7px;animation:stepOrbit 6s linear infinite}
.step-viz .orbdot.d2{background:#e8ad72;box-shadow:0 0 14px #e8ad72;animation-duration:9s;animation-delay:-3s}
@keyframes stepOrbit{from{transform:rotate(0) translateX(92px) rotate(0)}to{transform:rotate(360deg) translateX(92px) rotate(-360deg)}}
.step-viz .spark{position:absolute;inset:0}
.step-viz .spark i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7;
  animation:twk 2.4s ease-in-out infinite}
.step-viz .spark i:nth-child(1){left:12%;top:20%}
.step-viz .spark i:nth-child(2){right:10%;top:30%;animation-delay:.6s}
.step-viz .spark i:nth-child(3){left:20%;bottom:16%;animation-delay:1.1s}
.step-viz .spark i:nth-child(4){right:18%;bottom:22%;animation-delay:1.6s}
@keyframes twk{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.2)}}
.process-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s}
.process-card:hover{transform:translateY(-8px);border-color:#e5b05e;box-shadow:0 30px 70px rgba(163,106,27,.3)}
.process-card:hover .step-viz .core{box-shadow:0 0 60px rgba(229,178,96,.55),inset 0 0 24px rgba(180,115,30,.3)}
.process-card .activity{background:linear-gradient(100deg,#e19b4a,#deac33)}

/* ============ GLOBAL MARKET ACCESS — lightning strikes ============ */
.market-links path{stroke:url(#x);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:0;filter:drop-shadow(0 0 6px #e4a756);
  opacity:0;animation:strike 3.4s ease-in-out infinite}
.market-links path:nth-child(1){animation-delay:0s}
.market-links path:nth-child(2){animation-delay:.35s}
.market-links path:nth-child(3){animation-delay:.7s}
.market-links path:nth-child(4){animation-delay:1.05s}
.market-links path:nth-child(5){animation-delay:1.4s}
.market-links path:nth-child(6){animation-delay:1.75s}
.market-links path:nth-child(7){animation-delay:2.1s}
.market-links path:nth-child(8){animation-delay:2.45s}
.market-links path:nth-child(9){animation-delay:2.8s}
@keyframes strike{
  0%,92%{opacity:0}
  4%{opacity:1;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #e1b449)}
  7%{opacity:.2}
  10%{opacity:1;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #e4a756)}
  22%{opacity:.85}
  40%{opacity:.35;filter:drop-shadow(0 0 6px #e4a756)}
  60%{opacity:.7}
  100%{opacity:0}}
.market-icon{transition:transform .4s,box-shadow .4s;z-index:4}
.market-icon:hover{transform:scale(1.12);box-shadow:0 0 40px rgba(228,183,87,.6)}
.x-core{z-index:5}
.x-core::before{border-color:rgba(231,189,105,.4)}

/* ============ BUILT FOR PROFESSIONAL EXECUTION — animated ============ */
.condition-system article{position:relative;overflow:hidden;transition:transform .45s,border-color .45s,box-shadow .45s}
.condition-system article:hover{transform:translateY(-8px);border-color:#e5b05e;box-shadow:0 28px 66px rgba(185,121,30,.3)}
.condition-visual{height:190px}
.cond-anim{position:relative;width:150px;height:150px;display:grid;place-items:center}
.cond-anim .halo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(228,171,87,.28),transparent 62%);animation:pulse 3s ease-in-out infinite}
.cond-anim .ring2{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(236,199,139,.35);
  animation:spin 14s linear infinite}
.cond-anim .ring2::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px #fff;top:-5px;left:50%;margin-left:-5px}
.cond-anim .chip{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;position:relative;z-index:2;
  background:linear-gradient(150deg,#e19747,#ddaa31);box-shadow:0 0 44px rgba(221,154,43,.4)}
.cond-anim .chip svg{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.8}
/* mini animated candlesticks for "fast execution" */
.cond-anim.exec .chip{background:linear-gradient(150deg,#5f3e16,#160f07)}
.cond-anim .mini-bars{display:flex;gap:5px;align-items:flex-end;height:44px}
.cond-anim .mini-bars i{width:6px;border-radius:3px;background:linear-gradient(#e8c472,#e19b4a);
  animation:barPump 1.6s ease-in-out infinite}
.cond-anim .mini-bars i:nth-child(2){animation-delay:.2s}
.cond-anim .mini-bars i:nth-child(3){animation-delay:.4s}
.cond-anim .mini-bars i:nth-child(4){animation-delay:.6s}
.cond-anim .mini-bars i:nth-child(5){animation-delay:.8s}

/* ================ TESTIMONIALS — dual marquee rows ================ */
.testimonial-wall{columns:auto;column-gap:0;display:flex;flex-direction:column;gap:18px;
  overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-row{display:flex;gap:18px;width:max-content}
.tm-row.left{animation:marqL 46s linear infinite}
.tm-row.right{animation:marqR 52s linear infinite}
.testimonial-wall:hover .tm-row{animation-play-state:paused}
@keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.testimonial-wall article{break-inside:auto;margin:0;flex:0 0 380px;width:380px;padding:26px;
  border:1px solid var(--line);border-radius:20px;background:rgba(24,17,9,.72);
  transition:transform .4s,border-color .4s,box-shadow .4s}
.testimonial-wall article:hover{transform:translateY(-6px);border-color:#e5b05e;box-shadow:0 22px 50px rgba(176,115,29,.28)}
.testimonial-wall article:nth-child(2n){padding-block:26px}
.tm-stars{color:#ffbf47;font-size:13px;letter-spacing:2px;margin-top:6px}

/* ================ THE FPFX NETWORK — animated network ================ */
.network-visual{height:520px;position:relative}
.net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:250px;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#e6b166,#875716 44%,#160f06 74%);
  box-shadow:inset -40px -36px 60px #040302,0 0 100px rgba(222,155,55,.5)}
.net-core img{width:78px;filter:drop-shadow(0 0 20px #fff);animation:float 4s ease-in-out infinite}
.net-core::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px solid rgba(240,217,165,.5);
  animation:pulse 3.4s ease-in-out infinite}
.net-core::before{content:"";position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(239,212,156,.35),transparent 68%);animation:pulse 2.6s ease-in-out infinite}
.net-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(227,166,83,.18)}
.net-orbit.o1{width:360px;height:360px;animation:spin 40s linear infinite}
.net-orbit.o2{width:470px;height:470px;animation:spin 60s linear infinite reverse}
.net-node{position:absolute;padding:8px 14px;border-radius:99px;border:1px solid #e4b059;
  background:rgba(22,15,7,.9);font-size:11px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 0 22px rgba(228,171,87,.35);transform:translate(-50%,-50%);z-index:3;white-space:nowrap}
.net-node small{display:block;font-size:8px;font-weight:600;color:#d6be9a;letter-spacing:.04em}
.net-node::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 10px #22C55E;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.net-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.net-link{stroke:url(#netGrad);stroke-width:1.4;fill:none;opacity:.4}
.net-packet{fill:#fff;filter:drop-shadow(0 0 6px #e8c472)}
@keyframes netTravel{from{offset-distance:0%}to{offset-distance:100%}}

/* keep the reduced-motion crowd comfortable */
@media(prefers-reduced-motion:reduce){
  .hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen,.chart-line,.dash-chart path.dash-line,.market-links path,
  .tm-row.left,.tm-row.right{animation:none!important}
  .chart-line,.dash-chart path.dash-line{stroke-dashoffset:0}
}

/* responsive polish for the reworked blocks */
@media(max-width:1050px){
  .reward-vault{min-height:auto}
  .network-visual{height:460px}
  .net-orbit.o2{width:400px;height:400px}
}
@media(max-width:700px){
  .testimonial-wall article{flex-basis:300px;width:300px}
  .reward-slab .rw-amount{font-size:26px}
  .net-core{width:180px;height:180px}
  .net-orbit.o1{width:250px;height:250px}
  .net-orbit.o2{width:320px;height:320px}
  .step-viz{width:150px;height:150px}
  .hero-art{opacity:.62}
}


/* ============================================================
   HERO ART — figma ribbon artwork + character action pose
   Infinite, seamless (0% == 100%), GPU-only transforms.
   GSAP owns .character-rig's transform, so the character's
   "action" is animated on its INNER layers to avoid conflict.
   ============================================================ */
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-art-aura{position:absolute;right:6%;top:44%;width:52%;height:74%;transform:translateY(-50%);
  background:radial-gradient(closest-side,rgba(228,169,87,.30),rgba(170,104,30,.12) 52%,transparent 74%);
  filter:blur(12px);mix-blend-mode:screen;
  animation:artAura 9s ease-in-out infinite;will-change:transform,opacity}
@keyframes artAura{0%,100%{opacity:.62;transform:translateY(-50%) scale(1)}
  50%{opacity:.95;transform:translateY(-50%) scale(1.07)}}

/* --- the ribbon artwork: sits right, blended onto the black galaxy --- */
.hero-art-ribbon{position:absolute;right:-6%;top:50%;width:78%;transform:translateY(-50%);
  perspective:1600px;perspective-origin:58% 50%;filter:saturate(1.1) contrast(1.03)}
.hero-art-ribbon img{display:block;width:100%;height:auto;
  transform-style:preserve-3d;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite;will-change:transform;backface-visibility:visible}
/* The artwork is a pair of interlocked rings. Precessing its plane — spin the
   frame, tilt, then unspin — sweeps the surface normal around a cone, so the
   rings orbit one another instead of drifting. 0% and 100% are identical. */
@keyframes ringRevolve{
  0%     {transform:rotateZ(0deg) rotateX(21deg) rotateZ(-0deg)}
  6.25%  {transform:rotateZ(22.5deg) rotateX(21deg) rotateZ(-22.5deg)}
  12.5%  {transform:rotateZ(45deg) rotateX(21deg) rotateZ(-45deg)}
  18.75% {transform:rotateZ(67.5deg) rotateX(21deg) rotateZ(-67.5deg)}
  25%    {transform:rotateZ(90deg) rotateX(21deg) rotateZ(-90deg)}
  31.25% {transform:rotateZ(112.5deg) rotateX(21deg) rotateZ(-112.5deg)}
  37.5%  {transform:rotateZ(135deg) rotateX(21deg) rotateZ(-135deg)}
  43.75% {transform:rotateZ(157.5deg) rotateX(21deg) rotateZ(-157.5deg)}
  50%    {transform:rotateZ(180deg) rotateX(21deg) rotateZ(-180deg)}
  56.25% {transform:rotateZ(202.5deg) rotateX(21deg) rotateZ(-202.5deg)}
  62.5%  {transform:rotateZ(225deg) rotateX(21deg) rotateZ(-225deg)}
  68.75% {transform:rotateZ(247.5deg) rotateX(21deg) rotateZ(-247.5deg)}
  75%    {transform:rotateZ(270deg) rotateX(21deg) rotateZ(-270deg)}
  81.25% {transform:rotateZ(292.5deg) rotateX(21deg) rotateZ(-292.5deg)}
  87.5%  {transform:rotateZ(315deg) rotateX(21deg) rotateZ(-315deg)}
  93.75% {transform:rotateZ(337.5deg) rotateX(21deg) rotateZ(-337.5deg)}
  100%   {transform:rotateZ(360deg) rotateX(21deg) rotateZ(-360deg)}}
/* counter-revolving companion glow — gives the second ring its own orbit,
   so the pair reads as revolving around each other rather than in lockstep */
.hero-art-ribbon::after{content:"";position:absolute;inset:6% 4%;
  background:radial-gradient(closest-side at 58% 48%,rgba(231,190,105,.20),transparent 68%);
  mix-blend-mode:screen;pointer-events:none;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite reverse;will-change:transform}

/* --- travelling light sheen across the ribbon (clipped to the artwork) --- */
.hero-art-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%);
  mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%)}
.hero-art-sheen::before{content:"";position:absolute;top:-30%;left:-45%;width:34%;height:160%;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.16) 42%,rgba(246,230,199,.28) 50%,rgba(255,255,255,.16) 58%,transparent);
  transform:skewX(-14deg);mix-blend-mode:screen;
  animation:artSheen 9s cubic-bezier(.45,0,.2,1) infinite;will-change:transform,opacity}
@keyframes artSheen{
  0%{transform:translateX(-40%) skewX(-14deg);opacity:0}
  6%{opacity:.85}
  40%{opacity:.7}
  55%{transform:translateX(300%) skewX(-14deg);opacity:0}
  100%{transform:translateX(-40%) skewX(-14deg);opacity:0}}

/* ---------- CHARACTER: the idle "action" loop ---------- */
/* bottom origin keeps the feet planted while the body breathes */
.character-body{transform-origin:52% 100%;
  animation:charBreathe 5.6s ease-in-out infinite;will-change:transform,filter}
@keyframes charBreathe{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 18px rgba(227,172,86,.34))}
  50%{transform:scale(1.014) rotate(.45deg);filter:drop-shadow(0 0 30px rgba(232,193,113,.52))}}
/* aura behind the figure throbs on a different period so it never looks mechanical */
.character-glow{transform-origin:52% 100%;
  animation:charAura 4.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes charAura{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.05)}}
/* key light drifting over the figure = the sense of "doing something" */
.character-light{animation:charKey 6.8s ease-in-out infinite;will-change:transform,opacity}
@keyframes charKey{
  0%,100%{opacity:.45;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:.9;transform:translate3d(-8%,3%,0) scale(1.12)}
  70%{opacity:.62;transform:translate3d(6%,-2%,0) scale(.95)}}

/* subtle pointer parallax (JS sets --px/--py) — depth without motion sickness */
.hero-art-ribbon{transform:translateY(-50%) translate3d(calc(var(--px,0)*14px),calc(var(--py,0)*10px),0)}
.character-rig{--rigx:calc(var(--px,0)*-7px);--rigy:calc(var(--py,0)*-5px)}

@media(prefers-reduced-motion:reduce){
  .hero-art-aura,.hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen::before,
  .character-body,.character-glow,.character-light{animation:none!important}
  .hero-art-sheen::before{opacity:0}
}
@media(max-width:900px){
  .hero-art-ribbon{right:-18%;width:118%;opacity:.72}
  .hero-art-aura{right:-6%;width:82%}
}

/* ============================================================
   FINAL POLISH 6.3 — smooth motion, premium loader, offers
   ============================================================ */
:root{--motion-smooth:var(--au-ease,cubic-bezier(.2,.8,.3,1))}
img{image-rendering:auto}
.hero-art-ribbon,.hero-art-ribbon img,.character-rig,.payout-card,.process-track{transform-style:preserve-3d;backface-visibility:hidden;-webkit-font-smoothing:antialiased}
.hero-art-ribbon{will-change:transform}
.hero-art-ribbon img{animation:ribbonDrift 18s var(--motion-smooth) infinite alternate!important;will-change:transform,filter;filter:saturate(1.08) contrast(1.04) brightness(1.02)}
.hero-art-ribbon::after{animation:ribbonGlow 11s ease-in-out infinite!important}
@keyframes ribbonDrift{
  0%{transform:translate3d(-.35%,.15%,0) scale(1.012) rotateZ(-.15deg)}
  50%{transform:translate3d(.45%,-.35%,0) scale(1.022) rotateZ(.12deg)}
  100%{transform:translate3d(-.1%,.32%,0) scale(1.015) rotateZ(-.08deg)}
}
@keyframes ribbonGlow{0%,100%{opacity:.42;transform:scale(.99)}50%{opacity:.78;transform:scale(1.025)}}
.hero-art-sheen::before{animation-duration:12s!important}
.character-body,.character-glow,.character-light,.hero-coins,.payout-card{will-change:transform,opacity}

/* Risk ring rotates independently; 10% and MAX LOSS remain perfectly still. */
.risk-orbit{background:#100c07;animation:none!important;isolation:isolate;overflow:hidden}
.risk-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--gold) 0 36%,#e1994a 36% 58%,#2e251b 58%);animation:riskSpin 12s linear infinite;z-index:-2}
.risk-orbit::after{z-index:-1}
.risk-orbit b,.risk-orbit small{animation:none!important;transform:none!important;position:relative}
@keyframes riskSpin{to{transform:rotate(360deg)}}

/* Important phase information is larger and easier to scan. */
.phase-grid{gap:14px;margin:28px 0 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.phase-card{padding:20px 20px 18px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(175,114,30,.075));box-shadow:inset 0 1px rgba(255,255,255,.04);transition:border-color .35s var(--motion-smooth),transform .35s var(--motion-smooth),background .35s}
.phase-card:hover{transform:translateY(-3px);border-color:rgba(229,178,96,.55);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(207,136,35,.12))}
.phase-card h4{font-size:16px;margin-bottom:14px;color:#fff}
.phase-card div{font-size:13px;margin:9px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055)}
.phase-card div:last-child{border-bottom:0;padding-bottom:0}
.phase-card div b{color:#fff;font-size:13px}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Prevent hover transforms from fighting the pinned horizontal ScrollTrigger. */
.process-track{will-change:transform}
.process-card{transform:translateZ(0);contain:paint;transition:border-color .4s,box-shadow .4s!important}
.process-card:hover{transform:translateZ(0)!important;box-shadow:0 28px 70px rgba(163,106,27,.28)}
.process-pin{overscroll-behavior:contain;transform:translateZ(0)}


/* Multiple-offer marquee and copy feedback */
.promo-bar{height:44px;background:linear-gradient(90deg,#9e5e1a,#b37a1d 46%,#d4a223);box-shadow:0 8px 32px rgba(187,124,30,.18)}
.promo-track{gap:22px;animation-duration:48s;will-change:transform;padding-left:22px}
.promo-item{display:inline-flex;align-items:center;gap:8px}
.promo-item strong{color:#fff}.promo-item small{display:inline-flex;gap:5px;align-items:center;color:#f7e8d0;font-size:9px;letter-spacing:.12em}.promo-item time{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.inline-code{padding:4px 7px;border:1px dashed rgba(255,255,255,.55);border-radius:6px;background:rgba(0,0,0,.12)}
.copy-inline{position:relative;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:7px;height:26px;min-width:30px;cursor:pointer;transition:.25s}
.copy-inline:hover,.copy-inline.copied{background:#fff;color:#ad701c;transform:translateY(-1px)}
.copy-inline em{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%) translateY(4px);padding:5px 8px;border-radius:6px;background:#0d0803;color:#fff;font-style:normal;font-size:9px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 24px #000;z-index:20}
.copy-inline:hover em,.copy-inline.copied em{opacity:1;transform:translateX(-50%) translateY(0)}
.pricing-coupon{display:flex;align-items:center;gap:9px}.pricing-copy{background:rgba(224,161,63,.12);border:1px solid rgba(230,181,100,.3)}

/* Multi-offer modal */
.promo-modal{width:min(900px,94vw);grid-template-columns:minmax(250px,330px) 1fr;background:linear-gradient(145deg,rgba(49,33,13,.98),rgba(5,4,3,.99));backdrop-filter:blur(22px)}
.modal-character{height:520px;position:relative;background:radial-gradient(circle at 50% 42%,rgba(226,166,78,.55),transparent 58%),#0d0904}
.modal-character img{height:570px;position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);mix-blend-mode:screen}
.modal-orbit{position:absolute;left:50%;top:42%;width:230px;height:230px;border:1px solid rgba(232,187,113,.45);border-radius:50%;transform:translate(-50%,-50%);animation:spin 18s linear infinite}
.modal-orbit::after{content:"";position:absolute;inset:24px;border:1px dashed rgba(232,187,113,.28);border-radius:50%;animation:spin 10s linear infinite reverse}
.offer-panel{padding:38px 36px!important;min-width:0}.offer-panel h2{font-size:38px}.offer-carousel{position:relative;min-height:250px;margin-top:18px}.offer-card{position:absolute;inset:0;padding:22px;border:1px solid rgba(230,181,101,.26);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(187,122,31,.08));opacity:0;visibility:hidden;transform:translateX(28px) scale(.98);transition:.5s var(--motion-smooth)}.offer-card.active{opacity:1;visibility:visible;transform:none}.offer-card>small{color:#f5e1c1;font-size:10px;letter-spacing:.14em}.offer-card>strong{display:block;font:800 42px/1 var(--au-disp,"Outfit",system-ui,sans-serif);margin:9px 0;background:linear-gradient(90deg,#fff,#e5bd61);-webkit-background-clip:text;color:transparent}.offer-card p{margin-bottom:12px}.offer-time{display:flex;justify-content:space-between;padding:9px 0;color:#b1a99c;font-size:10px}.offer-time time{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}.offer-card .coupon-box{margin:8px 0 0}.offer-dots{display:flex;gap:7px;margin:14px 0 20px}.offer-dots button{width:22px;height:4px;border:0;border-radius:8px;background:#584b38;transition:.3s}.offer-dots button.active{width:42px;background:linear-gradient(90deg,#e19b4a,#dda92d)}
.copy-code{cursor:pointer}.copy-code.copied{color:#4ADE80!important}

/* General interaction quality */
.btn,.glass,.rule-grid article,.condition-system article,.faq-item,.cert-card{transition-timing-function:var(--motion-smooth)!important}
@media(max-width:700px){.promo-modal{grid-template-columns:1fr}.modal-character{display:none}.offer-panel{padding:34px 22px!important}.phase-grid{grid-template-columns:1fr}.promo-item small{display:none}}
.exit-code-line{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.exit-code{color:#eac97c}

/* Offer grid + reliable coupon layout — v6.4 */
.promo-modal{width:min(1180px,96vw);max-height:min(90vh,860px);grid-template-columns:minmax(240px,330px) minmax(0,1fr);overflow:hidden}
.offer-panel{overflow:auto;max-height:min(90vh,860px);scrollbar-width:thin;scrollbar-color:rgba(227,174,85,.55) transparent}
.offer-panel>p{max-width:680px}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 22px;align-items:stretch}
.offer-grid .offer-card{position:relative;inset:auto;display:flex;flex-direction:column;min-width:0;min-height:270px;padding:22px;opacity:1;visibility:visible;transform:none;box-sizing:border-box;overflow:hidden}
.offer-grid .offer-card p{flex:1;overflow-wrap:anywhere}
.offer-grid .offer-time{gap:12px;align-items:center}
.offer-grid .coupon-box{display:flex;width:100%;min-width:0;box-sizing:border-box;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;padding:0 0 0 15px}
.offer-grid .coupon-box b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-grid .coupon-box button{flex:0 0 auto;white-space:nowrap;max-width:46%;padding-inline:14px}
.offer-time time,.promo-item time,.pricing-expiry time{font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-time .expired,.pricing-expiry .expired{color:#edda91}
.pricing-offer-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.pricing-offer-row .pricing-coupon{margin:0}
.pricing-expiry{display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px;border:1px solid rgba(228,177,92,.26);border-radius:10px;background:rgba(177,117,29,.09)}
.pricing-expiry[hidden]{display:none!important}
.pricing-expiry span{color:#a89c8b;font-size:9px;letter-spacing:.12em}
.pricing-expiry time{color:#fff;font-size:11px;font-weight:800}
@media(max-width:920px){.promo-modal{grid-template-columns:1fr;width:min(720px,95vw)}.modal-character{display:none}.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.offer-grid{grid-template-columns:1fr}.offer-panel{padding:30px 18px!important}.offer-panel h2{font-size:30px}.offer-grid .offer-card{min-height:240px}.promo-item time{font-size:9px}}


/* ===================================================================
   v6.3 — MOBILE / RESPONSIVE FIXES
   =================================================================== */

/* --- 1. Runaway zoom-out and the phantom gutter on the right ---------
   `overflow-x:hidden` on <body> alone does NOT clip: the overflow
   propagates up to the viewport, so the page stayed 512px wide on a
   390px phone. The browser then zoomed out to fit, which is what showed
   the empty strip on the right. Clipping on <html> is the actual fix.
   `clip` rather than `hidden` so no scroll container is created and
   position:sticky keeps working. ------------------------------------- */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%}


/* --- 2. THE FPFX NETWORK: orbit rings pushed past the viewport ------ */
.network-visual{overflow:hidden}
@media(max-width:700px){
  .net-orbit.o1{width:230px;height:230px}
  .net-orbit.o2{width:290px;height:290px}
  .net-core{width:150px;height:150px}
  .net-node{font-size:10px;padding:6px 10px}
  .net-node small{font-size:7px}
}
@media(max-width:400px){
  .net-orbit.o1{width:195px;height:195px}
  .net-orbit.o2{width:240px;height:240px}
}

/* --- 3. HOW WE OPERATE: cards were unswipeable on mobile -------------
   The pinned horizontal scroll is a GSAP matchMedia block gated at
   (min-width:901px). Below that nothing ran, so the track just
   overflowed and was clipped — no drag, no scrollbar, no way to reach
   cards 2-5. Under 900px it becomes a native scroll-snap carousel,
   which also feels correct on touch. ---------------------------------- */
@media(max-width:900px){
  .process-pin{height:auto!important;transform:none!important}
  .process-track{
    width:auto;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-left:5vw;
    padding:4px 5vw 22px;
    transform:none!important;      /* defeat any stale GSAP transform */
    cursor:grab;
    scrollbar-width:none;
  }
  .process-track::-webkit-scrollbar{display:none}
  .process-track:active{cursor:grabbing}
  .process-card{
    scroll-snap-align:center;
    flex:0 0 min(300px,82vw);
    width:min(300px,82vw);
  }
  /* a hint that there is more to the right */
  .process-head{position:relative}
  .process-head::after{
    content:"Swipe for more →";
    display:block;margin-top:10px;
    font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    color:rgba(242,215,173,.55);font-weight:700;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .process-track{scroll-behavior:auto}
}

/* --- 4. Modals: were taller than the screen with no way to scroll ---- */
@media(max-width:700px){
  .promo-modal{
    width:min(500px,94vw);
    max-height:88vh;
    max-height:88dvh;              /* dodges mobile browser chrome */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:1fr;
    border-radius:20px;
  }
  /* the artwork panel eats the whole screen on a phone — trim it */
  .promo-modal .promo-visual,
  .promo-modal>figure,
  .promo-modal>img{max-height:150px;object-fit:cover}
  .promo-modal .promo-body,
  .promo-modal>div:last-child{padding:22px 20px 26px}
  .promo-modal h3,.promo-modal h2{font-size:22px;line-height:1.2}
  .modal-close{right:10px;top:10px;width:38px;height:38px}  /* 38px ≥ tap target */

  .exit-modal{
    right:12px;left:12px;bottom:12px;
    width:auto;
    max-height:80vh;max-height:80dvh;
    overflow-y:auto;
    padding:22px 20px;
  }
  .exit-modal h3{font-size:20px}
  .modal-orbit{display:none}       /* decorative, and it overflowed */
}
@media(max-width:400px){
  .promo-modal .promo-visual,.promo-modal>figure,.promo-modal>img{max-height:110px}
}

/* --- 5. Marquees and tickers: clip at the section, not the viewport -- */
.promo-strip,.ticker,.certificate-strip,.testimonial-wall{overflow:hidden;max-width:100vw}

/* --- 6. Tap targets and text sizing on small screens ----------------- */
@media(max-width:700px){
  .btn,.fpfx-btn,button,.nav a{min-height:44px}          /* WCAG 2.5.5 */
  .copy-inline{min-width:44px;min-height:44px}
  input,select,textarea{font-size:16px}                /* stops iOS auto-zoom */
  h1{font-size:clamp(34px,10vw,52px);line-height:1.05}
  h2{font-size:clamp(26px,7.5vw,38px);line-height:1.12}
  .section{padding-left:20px;padding-right:20px}
  .hero-copy{padding-right:8px}
}

/* --- 7. Tables and wide blocks scroll instead of stretching the page - */
@media(max-width:700px){
  .rule-grid,.condition-system,.bento{grid-template-columns:1fr!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* --- 8. Respect the notch --------------------------------------------- */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* --- 9. Consent banner ------------------------------------------------ */
.fpfx-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
  display:none;gap:14px;align-items:center;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;
  background:rgba(32,21,10,.97);border:1px solid rgba(236,199,139,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);
}
.fpfx-consent.show{display:flex}
.fpfx-consent p{margin:0;flex:1 1 280px;font-size:13px;line-height:1.55;color:#ddcbb6}
.fpfx-consent a{color:#e8c472}
.fpfx-consent .fpfx-consent-actions{display:flex;gap:9px;flex-wrap:wrap}
.fpfx-consent button{
  padding:11px 18px;border-radius:10px;border:1px solid rgba(236,199,139,.34);
  background:transparent;color:#faf1e6;font:700 13px/1 inherit;cursor:pointer;min-height:44px;
}
.fpfx-consent button.primary{background:linear-gradient(100deg,#e19b4a,#dda92d);border-color:transparent;color:#fff}
@media(max-width:620px){
  .fpfx-consent{left:10px;right:10px;bottom:10px;padding:16px}
  .fpfx-consent .fpfx-consent-actions{width:100%}
  .fpfx-consent .fpfx-consent-actions button{flex:1}
}

/* --- 10. Tap targets on tablet too, not just phones -------------------
   The 44px rule was scoped to 700px, so tablets kept 13-26px controls.
   Inline links inside prose are exempt: padding them out would wreck
   the line rhythm, and they are not primary controls. ----------------- */
@media(max-width:900px){
  /* Every control gets the 44px target. */
  .btn,.fpfx-btn,button,.video-btn,.play-toggle,.mute-toggle,
  .copy-inline,.login,.nav a,.footer-nav a,.modal-close{
    min-height:44px;
  }
  /* ...but only SINGLE-LABEL controls get centred with inline-flex. A button
     whose content is a stack (.fx-opt: index, title, description, discount
     badge) is a card, not a label: making it a flex ROW laid its four children
     side by side and pushed them straight out of a 111px grid cell, cutting the
     discount badge off every plan and size button below 900px. Card buttons
     opt out here and set their own display. */
  .btn,.fpfx-btn,button:not(.fx-opt),.video-btn,.play-toggle,.mute-toggle,
  .copy-inline,.login,.nav a,.footer-nav a,.modal-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .copy-inline{min-width:44px}
  /* standalone links get a hit area without shifting the layout */
  .nav a,.footer-nav a,.login{padding:10px 12px}
}

/* Discount chips on programme and balance selectors */
.type-tabs button,.size-tabs button{position:relative;overflow:visible}
.program-offer-chip,.plan-offer-chip{position:absolute;top:-10px;right:-8px;z-index:4;padding:4px 7px;border-radius:999px;background:linear-gradient(135deg,#e19b4a,#dba724);color:#fff;font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.04em;box-shadow:0 7px 20px rgba(219,167,36,.34);border:1px solid rgba(255,255,255,.28);white-space:nowrap;font-style:normal}
.size-tabs button.active .plan-offer-chip,.type-tabs button.active .program-offer-chip{background:linear-gradient(135deg,#22C55E,#EEB762);box-shadow:0 7px 20px rgba(34,197,94,.26)}


/* v8.5.1 — premium selector discount chips */
.type-tabs .type-tab,
.size-tabs > button{position:relative!important;overflow:visible!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;isolation:isolate}
.type-tabs .type-tab > .program-offer-chip,
.size-tabs > button > .plan-offer-chip{position:absolute!important;top:-12px!important;right:-10px!important;left:auto!important;bottom:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:max-content!important;height:22px!important;padding:0 8px!important;margin:0!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:999px!important;background:linear-gradient(135deg,#e1b344 0%,#e19d45 52%,#8A6B3A 100%)!important;box-shadow:0 8px 24px rgba(223,159,56,.38),inset 0 1px 0 rgba(255,255,255,.22)!important;color:#fff!important;font-family:var(--au-disp,"Outfit",system-ui,sans-serif)!important;font-size:9px!important;font-weight:800!important;font-style:normal!important;line-height:1!important;letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap!important;pointer-events:none!important;transform:none!important;z-index:30!important}
.type-tabs .type-tab > .program-offer-chip::before,
.size-tabs > button > .plan-offer-chip::before{content:'✦';margin-right:4px;font-size:8px;opacity:.95}
.type-tabs .type-tab.active > .program-offer-chip,
.size-tabs > button.active > .plan-offer-chip{background:linear-gradient(135deg,#22C55E 0%,#EEB762 100%)!important;box-shadow:0 8px 24px rgba(224,142,62,.32),inset 0 1px 0 rgba(255,255,255,.28)!important}
@media(max-width:700px){.type-tabs .type-tab > .program-offer-chip,.size-tabs > button > .plan-offer-chip{top:-9px!important;right:-5px!important;height:19px!important;padding:0 6px!important;font-size:8px!important}}

/* FPFX phase cards restoration v8.5.2 */
.phase-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 24px;overflow:visible!important;opacity:1!important;visibility:visible!important;height:auto!important}
.phase-section-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:2px;padding:0 2px}
.phase-section-head span{font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em}
.phase-section-head small{font-size:11px;color:rgba(235,216,188,.62)}
.phase-card{display:block!important;min-height:0;padding:18px;border:1px solid rgba(229,178,97,.22);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(175,114,30,.08));box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 34px rgba(28,19,7,.18)}
.phase-card-top{display:flex!important;align-items:center;gap:10px;padding-bottom:12px!important;margin:0 0 10px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.phase-card-top span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#e09d43,#dba724);color:#fff!important;font-size:10px!important;font-weight:900}
.phase-card-top h4{margin:0!important;font-size:15px;color:#fff}
.phase-card>div:not(.phase-card-top){display:flex;justify-content:space-between;gap:12px;margin:8px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}
.phase-card>div:last-child{border-bottom:0;padding-bottom:0}
.phase-card>div span{color:rgba(229,210,184,.68)}
.phase-card>div b{color:#fff;font-size:12px}
.phase-empty{grid-column:1/-1;padding:18px;border:1px dashed rgba(230,179,99,.3);border-radius:15px;background:rgba(139,93,24,.07);display:flex;flex-direction:column;gap:5px}
.phase-empty b{color:#fff}.phase-empty span{font-size:12px;color:rgba(231,214,190,.65)}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.phase-grid{grid-template-columns:1fr}.phase-section-head{align-items:flex-start;flex-direction:column;gap:3px}}


/* FPFX pricing recovery v8.5.3 */
.type-tabs,.size-tabs{display:flex!important;flex-wrap:wrap!important;column-gap:10px!important;row-gap:20px!important;overflow:visible!important;padding-top:13px!important;padding-right:8px!important}
.type-tabs .type-tab,.size-tabs>button{position:relative!important;min-height:46px!important;padding:0 18px!important;overflow:visible!important}
.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{top:-13px!important;right:-5px!important;transform:translateY(-2px)!important}
.plan-summary .pricing-offer-row{margin-top:16px!important;min-height:34px!important}
.plan-summary .pricing-coupon{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;color:rgba(247,236,220,.78)!important}
.plan-summary .pricing-coupon b{color:#fff!important;padding:6px 10px!important;border:1px solid rgba(229,181,98,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.035)!important}
.phase-grid{display:grid!important;opacity:1!important;visibility:visible!important;max-height:none!important;min-height:120px!important;margin-top:24px!important}
.promo-modal.show{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.modal-backdrop.show{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
@media(max-width:700px){.type-tabs,.size-tabs{row-gap:18px!important}.type-tabs .type-tab,.size-tabs>button{padding:0 14px!important}.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{right:0!important}}

/* ============================================================
   FPFX PUBLIC UI HOTFIX 8.7.0
   Stable responsive header, creative mobile navigation and
   connected Help Center CTA. Tracking selectors are untouched.
   ============================================================ */

/* ----- Header: stable geometry on every desktop width ----- */
.header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(22px,3vw,52px);
    min-width:0;
    height:78px;
    padding-inline:clamp(22px,4vw,72px);
    isolation:isolate;
}
.header .logo{
    display:flex;
    align-items:center;
    min-width:0;
    flex:0 0 auto;
    position:relative;
    z-index:2;
}
.header .logo img{
    display:block;
    width:clamp(148px,11.5vw,184px);
    height:auto;
    max-width:none;
}
.header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,1.7vw,31px);
    margin:0;
    min-width:0;
}
.header-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 0;
    white-space:nowrap;
    color:#ddd7ce;
    font-size:clamp(12px,.92vw,14px);
    transition:color .25s ease,transform .25s ease;
}
.header-nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:4px;
    height:1px;
    background:linear-gradient(90deg,#e2a04a,#dfad39);
    transition:right .3s cubic-bezier(.22,.61,.36,1);
}
.header-nav a:hover,
.header-nav a:focus-visible{
    color:#fff;
    transform:translateY(-1px);
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after{right:0}
.header-help-link{
    padding:8px 12px!important;
    border:1px solid rgba(230,177,98,.28);
    border-radius:999px;
    background:rgba(188,124,34,.10);
}
.header-help-link::after{display:none}
.header-help-link span{font-size:11px;color:#edd192}
.header-actions{
    justify-self:end;
    min-width:max-content;
}
.header-actions .btn.small{white-space:nowrap}
.menu{
    position:relative;
    z-index:102;
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:48px;
    height:44px;
    padding:0 13px;
    border:1px solid rgba(230,179,103,.30);
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,rgba(142,95,31,.28),rgba(24,16,7,.84));
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 36px rgba(0,0,0,.22);
    cursor:pointer;
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.menu:hover,.menu:focus-visible{border-color:rgba(232,187,111,.68);transform:translateY(-1px)}
.menu-label{font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.menu-lines{width:18px;height:15px;display:block;position:relative}
.menu-lines i{
    display:block;
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#fff;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),top .35s,opacity .2s;
}
.menu-lines i:first-child{top:3px}
.menu-lines i:last-child{top:10px;width:13px;left:5px}
.menu[aria-expanded="true"] .menu-lines i:first-child{top:7px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-lines i:last-child{top:7px;left:0;width:18px;transform:rotate(-45deg)}

/* ----- Creative mobile navigation ----- */
.mobile-menu-shell{
    position:fixed;
    inset:0;
    z-index:1000;
    visibility:hidden;
    pointer-events:none;
}
.mobile-menu-shell.is-open{visibility:visible;pointer-events:auto}
.mobile-menu-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(2,1,0,.76);
    backdrop-filter:blur(9px);
    opacity:0;
    transition:opacity .35s ease;
}
.mobile-menu-shell.is-open .mobile-menu-backdrop{opacity:1}
.mobile-menu-panel{
    position:absolute;
    top:8px;
    right:8px;
    bottom:8px;
    width:min(430px,calc(100vw - 16px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(229,178,98,.34);
    border-radius:27px;
    background:
      radial-gradient(circle at 78% 14%,rgba(223,161,60,.22),transparent 32%),
      radial-gradient(circle at 10% 84%,rgba(226,153,80,.18),transparent 34%),
      linear-gradient(155deg,#221709 0%,#0f0a04 60%,#0A0806 100%);
    box-shadow:-34px 0 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
    transform:translate3d(105%,0,0) scale(.985);
    transition:transform .48s cubic-bezier(.22,.75,.18,1);
}
.mobile-menu-shell.is-open .mobile-menu-panel{transform:translate3d(0,0,0) scale(1)}
.mobile-menu-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    background-image:
      radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.6px),
      radial-gradient(circle,rgba(237,203,146,.75) 0 1px,transparent 1.5px);
    background-size:92px 92px,137px 137px;
    background-position:22px 14px,65px 48px;
    mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.mobile-menu-head{
    position:relative;
    z-index:1;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu-head img{width:154px;height:auto;display:block}
.mobile-menu-close{
    width:43px;height:43px;position:relative;border:1px solid rgba(255,255,255,.13);border-radius:13px;
    background:rgba(255,255,255,.045);cursor:pointer;transition:background .25s,border-color .25s;
}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:rgba(225,164,72,.14);border-color:rgba(231,183,105,.45)}
.mobile-menu-close i{position:absolute;left:12px;top:20px;width:18px;height:2px;border-radius:2px;background:#fff}
.mobile-menu-close i:first-child{transform:rotate(45deg)}
.mobile-menu-close i:last-child{transform:rotate(-45deg)}
.mobile-menu-body{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    overflow:auto;
    overscroll-behavior:contain;
    padding:24px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(227,172,85,.4) transparent;
}
.mobile-menu-eyebrow{
    margin:0 0 12px;
    color:#aa9b87;
    font:700 10px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);
    letter-spacing:.18em;
    text-transform:uppercase;
}
.mobile-menu-nav{display:grid;gap:7px}
.mobile-menu-nav a{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 24px;
    align-items:center;
    min-width:0;
    padding:13px 14px;
    border:1px solid transparent;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    color:#fbf6ef;
    transition:background .25s,border-color .25s,transform .25s;
}
.mobile-menu-nav a:hover,.mobile-menu-nav a:focus-visible{
    background:rgba(223,157,58,.11);
    border-color:rgba(229,175,93,.27);
    transform:translateX(3px);
}
.mobile-menu-nav small{color:#99876e;font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.08em}
.mobile-menu-nav span{font:700 clamp(16px,4.5vw,19px)/1.2 var(--au-disp,"Outfit",system-ui,sans-serif)}
.mobile-menu-nav i{justify-self:end;color:#e8b86f;font-style:normal}
.mobile-help-feature{
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:16px;
    overflow:hidden;
    border:1px solid rgba(232,188,114,.36);
    border-radius:17px;
    background:linear-gradient(135deg,rgba(219,142,38,.25),rgba(123,80,24,.10));
    box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.mobile-help-feature::before{
    content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;top:-80px;
    background:radial-gradient(circle,rgba(227,181,82,.28),transparent 70%);pointer-events:none
}
.mobile-help-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#e19b4a,#deab31);font:800 22px/1 var(--au-disp,"Outfit",system-ui,sans-serif);color:#fff;box-shadow:0 12px 25px rgba(215,145,35,.24)}
.mobile-help-feature>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.mobile-help-feature small{color:#ebc586;font:700 9px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.15em}
.mobile-help-feature b{margin-top:5px;color:#fff;font:700 14px/1.3 var(--au-disp,"Outfit",system-ui,sans-serif)}
.mobile-help-feature em{margin-top:3px;color:#b7ab9a;font:500 11px/1.35 var(--au-body,"DM Sans",system-ui,sans-serif);font-style:normal}
.mobile-help-feature>i{justify-self:end;color:#eccd89;font-style:normal}
.mobile-menu-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;margin-top:18px}
.mobile-menu-actions>a{min-height:48px;border-radius:13px}
.mobile-login{display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);color:#fff;font-weight:700;background:rgba(255,255,255,.035)}
.mobile-menu-actions .btn{padding:13px 14px;font-size:13px;gap:9px}
.mobile-menu-foot{
    position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,.07);color:#80796d;font-size:10px
}
.mobile-menu-foot a{color:#e2d0b5;text-align:right}
body.mobile-menu-open{overflow:hidden;touch-action:none}

/* ----- Homepage Help Center CTA ----- */
.helpdesk-cta{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
    gap:clamp(38px,6vw,88px);
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    padding-top:clamp(90px,9vw,145px);
    padding-bottom:clamp(90px,9vw,145px);
    border-top:1px solid rgba(255,255,255,.045);
    border-bottom:1px solid rgba(255,255,255,.045);
    background:
      radial-gradient(circle at 14% 36%,rgba(221,145,45,.14),transparent 33%),
      radial-gradient(circle at 88% 58%,rgba(222,173,53,.10),transparent 34%),
      linear-gradient(180deg,rgba(15,10,4,.70),rgba(4,3,2,.92));
}
.helpdesk-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.helpdesk-backdrop::before{
    content:"";position:absolute;inset:0;opacity:.28;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:68px 68px;
    mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent)
}
.helpdesk-backdrop i{position:absolute;border:1px solid rgba(229,175,96,.13);border-radius:50%;animation:helpOrbit 16s linear infinite}
.helpdesk-backdrop i:nth-child(1){width:540px;height:540px;right:-120px;top:50%;margin-top:-270px}
.helpdesk-backdrop i:nth-child(2){width:390px;height:390px;right:-45px;top:50%;margin-top:-195px;animation-direction:reverse;animation-duration:21s}
.helpdesk-backdrop i:nth-child(3){width:12px;height:12px;right:188px;top:21%;border:0;background:#f2d8ad;box-shadow:0 0 22px #e4ae57;animation:helpPulse 2.4s ease-in-out infinite}
@keyframes helpOrbit{to{transform:rotate(360deg)}}
@keyframes helpPulse{50%{opacity:.34;transform:scale(.65)}}
.helpdesk-copy{max-width:650px}
.helpdesk-copy h2{margin:18px 0 18px;font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.045em}
.helpdesk-copy h2 em{font-style:normal;background:linear-gradient(90deg,#eabd81,#e3b853);-webkit-background-clip:text;background-clip:text;color:transparent}
.helpdesk-copy>p{max-width:620px;color:#bbb2a5;font-size:clamp(15px,1.2vw,18px);line-height:1.75}
.helpdesk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.helpdesk-link{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#fff;font-weight:750;background:rgba(255,255,255,.035);transition:border-color .25s,background .25s,transform .25s}
.helpdesk-link:hover{border-color:rgba(231,184,106,.48);background:rgba(220,152,45,.10);transform:translateY(-2px)}
.helpdesk-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}
.helpdesk-trust span{display:flex;flex-direction:column;min-width:126px;padding:13px 15px;border-left:1px solid rgba(232,186,114,.28);background:linear-gradient(90deg,rgba(204,142,47,.055),transparent)}
.helpdesk-trust b{color:#fff;font:800 17px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif)}
.helpdesk-trust small{margin-top:3px;color:#878075;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.helpdesk-options{position:relative;display:grid;gap:13px;min-width:0}
.helpdesk-option{
    position:relative;
    display:grid;
    grid-template-columns:38px 58px minmax(0,1fr) 30px;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:20px 20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:19px;
    background:linear-gradient(145deg,rgba(45,31,14,.88),rgba(20,14,7,.88));
    box-shadow:0 22px 65px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
    transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s,background .35s,box-shadow .35s;
}
.helpdesk-option::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 20%,rgba(231,186,111,.08),transparent 75%);transform:translateX(-45%);transition:opacity .35s,transform .55s}
.helpdesk-option:hover,.helpdesk-option:focus-visible{transform:translateX(-8px);border-color:rgba(230,181,101,.45);background:linear-gradient(145deg,rgba(68,47,19,.95),rgba(24,16,7,.94));box-shadow:0 28px 72px rgba(98,68,23,.24)}
.helpdesk-option:hover::after,.helpdesk-option:focus-visible::after{opacity:1;transform:translateX(35%)}
.helpdesk-option.is-primary{margin-left:-32px;border-color:rgba(230,179,98,.30);background:linear-gradient(145deg,rgba(91,62,21,.88),rgba(27,18,7,.94))}
.helpdesk-option-index{align-self:start;color:var(--muted-2,#AEA8A1);font:700 10px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.1em}
.helpdesk-option-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(232,186,112,.24);border-radius:16px;background:rgba(222,152,49,.09);color:#efcf9a;font:600 24px/1 var(--au-disp,"Outfit",system-ui,sans-serif)}
.helpdesk-option>div{min-width:0}
.helpdesk-option small{color:#d0a969;font:700 9px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.15em}
.helpdesk-option h3{margin:6px 0 5px;color:#fff;font-size:clamp(16px,1.4vw,21px);line-height:1.2}
.helpdesk-option p{margin:0;color:#9e9689;font-size:12px;line-height:1.55}
.helpdesk-option>i{justify-self:end;color:#ebc383;font-style:normal;font-size:17px}

/* ----- Responsive protection: the logo and controls never collide ----- */
@media(max-width:1260px){
    .header{gap:22px;padding-inline:24px}
    .header-nav{gap:18px}
    .header-nav a{font-size:12px}
    .header-help-link{padding-inline:10px!important}
}
@media(max-width:1120px){
    .header{grid-template-columns:auto 1fr;height:74px}
    .header-nav{display:none!important}
    .header-actions{display:flex;justify-content:flex-end}
    .menu{display:inline-flex}
    .helpdesk-cta{grid-template-columns:1fr;gap:52px}
    .helpdesk-copy{max-width:760px}
    .helpdesk-options{max-width:850px;width:100%;margin-inline:auto}
    .helpdesk-option.is-primary{margin-left:0}
}
@media(max-width:700px){
    .header{height:66px;padding-inline:15px;gap:10px}
    .header .logo img{width:clamp(128px,36vw,148px)}
    .header-actions{gap:8px}
    .header-actions .login{display:none}
    .header-actions .btn.small{padding:11px 13px;border-radius:10px;font-size:11px;gap:7px;box-shadow:none}
    .menu{height:42px;min-width:42px;padding-inline:11px;border-radius:11px}
    .menu-label{display:none}
    .mobile-menu-panel{top:5px;right:5px;bottom:5px;width:calc(100vw - 10px);border-radius:23px}
    .mobile-menu-head{height:68px;padding-inline:16px}
    .mobile-menu-head img{width:145px}
    .mobile-menu-body{padding:20px 16px 17px}
    .mobile-menu-foot{padding-inline:16px}
    .helpdesk-cta{padding-inline:20px}
    .helpdesk-copy h2{font-size:clamp(41px,12vw,58px)}
    .helpdesk-actions{align-items:stretch}
    .helpdesk-actions>a{width:100%}
    .helpdesk-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
    .helpdesk-trust span{min-width:0;padding:11px 8px}
    .helpdesk-trust small{font-size:8px}
    .helpdesk-option{grid-template-columns:34px 48px minmax(0,1fr) 20px;gap:10px;padding:16px 13px;border-radius:16px}
    .helpdesk-option-icon{width:46px;height:46px;border-radius:13px;font-size:20px}
    .helpdesk-option p{font-size:11px}
}
@media(max-width:480px){
    .header-actions .btn.small{display:none}
    .header{grid-template-columns:minmax(0,1fr) auto}
    .menu{display:inline-flex}
    .mobile-menu-actions{grid-template-columns:1fr}
    .mobile-menu-foot{align-items:flex-start;flex-direction:column}
    .mobile-menu-foot a{text-align:left}
    .helpdesk-trust{grid-template-columns:1fr}
    .helpdesk-trust span{display:grid;grid-template-columns:60px 1fr;align-items:center}
    .helpdesk-option{grid-template-columns:28px 44px minmax(0,1fr)}
    .helpdesk-option>i{display:none}
    .helpdesk-option h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
    .mobile-menu-panel,.mobile-menu-backdrop,.menu-lines i,.helpdesk-option,.helpdesk-option::after{transition:none!important}
    .helpdesk-backdrop i{animation:none!important}
}


/* ============================================================
   FPFX CHALLENGE SELECTOR + EXIT INTENT v3.4.0
   Responsive option cards for any programme/account count.
   ============================================================ */
.selector-section-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:#fff}
.selector-section-head.balance-head{margin-top:25px}
.selector-section-head>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid rgba(231,187,111,.34);border-radius:11px;background:linear-gradient(145deg,rgba(225,160,68,.18),rgba(222,173,55,.06));color:#efd2a0;font:800 11px/1 var(--au-disp,"Outfit",system-ui,sans-serif);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.selector-section-head b,.selector-section-head small{display:block}.selector-section-head b{font:800 13px/1.2 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.01em}.selector-section-head small{margin-top:3px;color:rgba(235,218,194,.58);font-size:10px;line-height:1.4}
.type-tabs.choice-grid,.size-tabs.choice-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:11px!important;padding:0!important;overflow:visible!important}
.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:minmax(190px,280px)!important}
.type-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(170px,1fr))!important}
.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(150px,1fr))!important}
.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{position:relative!important;min-width:0!important;min-height:82px!important;width:100%!important;display:grid!important;grid-template-columns:31px minmax(0,1fr) 24px!important;align-items:center!important;gap:10px!important;margin:0!important;padding:14px 13px!important;border:1px solid rgba(231,181,107,.2)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(118,78,19,.07))!important;color:#ebe6dd!important;text-align:left!important;overflow:hidden!important;isolation:isolate;box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 28px rgba(14,9,3,.13)!important;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease!important}
.type-tabs.choice-grid .type-tab::before,.size-tabs.choice-grid>button::before{content:"";position:absolute;inset:auto -35% -75% 20%;height:150%;border-radius:50%;background:radial-gradient(circle,rgba(223,162,60,.18),transparent 66%);opacity:0;transform:translateY(15px);transition:.25s;z-index:-1}
.type-tabs.choice-grid .type-tab:hover,.size-tabs.choice-grid>button:hover{transform:translateY(-2px)!important;border-color:rgba(231,184,109,.47)!important;background:linear-gradient(145deg,rgba(226,165,74,.11),rgba(224,177,63,.045))!important;box-shadow:0 16px 38px rgba(123,81,20,.18),inset 0 1px rgba(255,255,255,.07)!important}
.type-tabs.choice-grid .type-tab:hover::before,.size-tabs.choice-grid>button:hover::before,.type-tabs.choice-grid .type-tab.active::before,.size-tabs.choice-grid>button.active::before{opacity:1;transform:none}
.type-tabs.choice-grid .type-tab.active,.size-tabs.choice-grid>button.active{border-color:rgba(227,183,83,.82)!important;background:linear-gradient(145deg,rgba(224,157,65,.24),rgba(221,171,46,.13))!important;box-shadow:0 16px 40px rgba(223,156,59,.2),inset 0 0 0 1px rgba(255,255,255,.07)!important;color:#fff!important}
.selector-order{width:31px;height:31px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.16);color:rgba(239,218,186,.56);font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif);letter-spacing:.05em}
.type-tab.active .selector-order,.size-tabs>button.active .selector-order{border-color:rgba(255,255,255,.2);background:linear-gradient(135deg,#e19e4a,#dda92d);color:#fff;box-shadow:0 7px 18px rgba(221,169,45,.25)}
.selector-main{min-width:0;display:block!important}.selector-main strong,.selector-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selector-main strong{color:inherit;font:800 15px/1.25 var(--au-disp,"Outfit",system-ui,sans-serif)}.selector-main small{margin-top:4px;color:rgba(229,214,193,.55);font:600 9.5px/1.35 var(--au-body,"DM Sans",system-ui,sans-serif)}.active .selector-main small{color:rgba(252,248,238,.68)}
.selector-check{width:22px;height:22px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:transparent;background:rgba(255,255,255,.025);font-size:11px;font-weight:900}.active .selector-check{border-color:rgba(91,228,155,.3);background:rgba(91,228,155,.13);color:#5BE49B}
.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{position:absolute!important;top:7px!important;right:8px!important;left:auto!important;bottom:auto!important;transform:none!important;display:inline-flex!important;align-items:center!important;width:auto!important;min-width:0!important;height:19px!important;padding:0 6px!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:7px!important;background:linear-gradient(135deg,#e09542,#deaf37)!important;color:#fff!important;font:800 7.5px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.045em!important;box-shadow:0 6px 14px rgba(223,155,57,.22)!important;pointer-events:none!important;z-index:4!important}
.type-tabs.choice-grid .program-offer-chip::before,.size-tabs.choice-grid .plan-offer-chip::before{content:""!important;margin:0!important}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,.size-tabs.choice-grid>button.active>.plan-offer-chip{background:linear-gradient(135deg,#1FA652,#E08E3E)!important;box-shadow:0 6px 14px rgba(34,197,94,.18)!important}
.pricing-offer-row .pricing-coupon{border:1px solid rgba(231,185,111,.17);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.025)}
.pricing-offer-label{color:rgba(236,219,193,.62);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.pricing-coupon .coupon-code{padding:0!important;border:0!important;background:none!important;color:#fff!important;font-size:12px!important}
.exit-modal:not(.exit-band){width:min(420px,calc(100vw - 24px))!important;padding:30px!important;border-radius:24px!important;background:radial-gradient(circle at 85% 0,rgba(224,162,67,.19),transparent 40%),linear-gradient(155deg,#221709,#100b04)!important;border:1px solid rgba(230,183,99,.5)!important;box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06)!important;text-align:left!important}
.exit-modal:not(.exit-band)>img{position:absolute!important;right:10px!important;top:4px!important;width:142px!important;opacity:.9;pointer-events:none}.exit-modal>span{display:block!important;color:#ebc586!important;font:800 9px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.17em!important}.exit-modal:not(.exit-band) h2{max-width:280px;margin:10px 0 12px!important;font-size:clamp(29px,4vw,42px)!important;line-height:.98!important;letter-spacing:-.045em!important}.exit-modal:not(.exit-band)>p{max-width:330px;margin:0 0 18px!important;color:rgba(239,229,214,.68)!important;font-size:13px!important;line-height:1.65!important;text-align:left!important}.exit-modal:not(.exit-band)>.btn{margin-top:16px!important;min-width:190px!important}
.exit-modal:not(.exit-band) .exit-auto-offer,.exit-modal:not(.exit-band) .exit-offer-code{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:center;padding:13px 14px;border:1px solid rgba(231,183,106,.25);border-radius:14px;background:linear-gradient(135deg,rgba(224,157,66,.13),rgba(223,176,59,.055));overflow:hidden}.exit-auto-offer::after,.exit-offer-code::after{content:"";position:absolute;right:-22px;top:-35px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(225,178,72,.22),transparent 68%)}
.exit-modal:not(.exit-band) .exit-auto-offer span,.exit-modal:not(.exit-band) .exit-offer-code>span{grid-column:1/-1;color:#c7b293!important;font:800 8px/1 var(--au-disp,"Outfit",system-ui,sans-serif)!important;letter-spacing:.14em!important}.exit-auto-offer b,.exit-offer-code b{color:#fff;font-size:17px;line-height:1.2}.exit-auto-offer small{color:#c5b9a9;font-size:9.5px}.exit-offer-code .copy-inline{justify-self:end;min-height:34px!important}
.exit-modal:not(.exit-band) .exit-offer-time{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.exit-offer-time span{color:#a8967c!important;font-size:8px!important;font-weight:800;letter-spacing:.1em}.exit-offer-time time{color:#fff;font:800 12px/1 var(--au-mono,"JetBrains Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums}
@media(max-width:1180px){.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(160px,1fr))!important}}
@media(max-width:700px){.selector-section-head{margin-bottom:10px}.selector-section-head.balance-head{margin-top:20px}.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:74px!important;grid-template-columns:25px minmax(0,1fr) 18px!important;gap:7px!important;padding:12px 9px!important;border-radius:13px!important}.selector-order{width:25px;height:25px;border-radius:8px;font-size:8px}.selector-main strong{font-size:13px}.selector-main small{font-size:8.5px}.selector-check{width:18px;height:18px;border-radius:6px;font-size:9px}.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{top:5px!important;right:5px!important;height:17px!important;font-size:6.8px!important}.exit-modal{padding:25px 20px!important}.exit-modal>img{width:112px!important;opacity:.72}}
@media(max-width:420px){.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important}}

/* FPFX pricing selector refinement v3.4.1 */
.type-tabs.choice-grid,
.size-tabs.choice-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.type-tabs.choice-grid .type-tab,
.size-tabs.choice-grid>button{
  position:relative!important;
  min-width:0!important;
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  padding:14px 13px!important;
  overflow:visible!important;
  border:1px solid rgba(236,195,136,.22)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(206,133,34,.035))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  text-align:left!important;
}
.type-tabs.choice-grid .type-tab:hover,
.size-tabs.choice-grid>button:hover{
  border-color:rgba(230,184,103,.58)!important;
  background:linear-gradient(145deg,rgba(226,165,78,.12),rgba(222,172,49,.055))!important;
  transform:translateY(-2px)!important;
}
.type-tabs.choice-grid .type-tab.active,
.size-tabs.choice-grid>button.active{
  border-color:rgba(225,178,69,.9)!important;
  background:linear-gradient(145deg,rgba(221,146,47,.32),rgba(221,171,46,.16))!important;
  box-shadow:0 14px 34px rgba(219,144,37,.22),inset 0 1px rgba(255,255,255,.12)!important;
}
.type-tabs.choice-grid .type-tab.active:after,
.size-tabs.choice-grid>button.active:after{
  content:""!important;
  position:absolute!important;
  inset:auto 13px 0 13px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#e1b244,#e8ae73,transparent)!important;
  box-shadow:0 0 14px rgba(225,178,68,.65)!important;
}
.type-tabs.choice-grid .selector-order,
.size-tabs.choice-grid .selector-order{
  width:34px!important;
  height:34px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(239,206,157,.18)!important;
  background:rgba(255,255,255,.035)!important;
  color:#b7a58d!important;
  font-size:9px!important;
  font-weight:900!important;
}
.type-tabs.choice-grid .active .selector-order,
.size-tabs.choice-grid>button.active .selector-order{
  border-color:rgba(255,255,255,.18)!important;
  background:linear-gradient(135deg,#e19c44,#deae34)!important;
  color:#fff!important;
}
.type-tabs.choice-grid .selector-main,
.size-tabs.choice-grid .selector-main{min-width:0!important;display:block!important}
.type-tabs.choice-grid .selector-main strong,
.size-tabs.choice-grid .selector-main strong{
  display:block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  color:#fbf7f2!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:800!important;
}
.type-tabs.choice-grid .selector-main small,
.size-tabs.choice-grid .selector-main small,
.type-tabs.choice-grid .selector-check,
.size-tabs.choice-grid .selector-check{display:none!important}
.type-tabs.choice-grid .program-offer-chip,
.size-tabs.choice-grid .plan-offer-chip{
  top:-8px!important;
  right:9px!important;
  height:20px!important;
  padding:0 8px!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#e19648,#dfb038)!important;
  box-shadow:0 8px 20px rgba(220,151,42,.3)!important;
  color:#fff!important;
  font-size:7.5px!important;
  letter-spacing:.045em!important;
}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,
.size-tabs.choice-grid>button.active>.plan-offer-chip{
  background:linear-gradient(135deg,#22C55E,#E08E3E)!important;
}
@media(max-width:620px){
  .type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important;padding:12px 10px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:8px!important}
  .type-tabs.choice-grid .selector-order,.size-tabs.choice-grid .selector-order{width:29px!important;height:29px!important;border-radius:9px!important}
  .type-tabs.choice-grid .selector-main strong,.size-tabs.choice-grid .selector-main strong{font-size:13px!important}
}
@media(max-width:390px){.type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:1fr!important}}
/* v2.0.18 Affiliate Network homepage CTA */
.affiliate-home-cta{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);background:radial-gradient(circle at 78% 38%,rgba(222,155,55,.12),transparent 28%)}.affiliate-home-copy{max-width:680px}.affiliate-home-copy h2{font-size:clamp(46px,5vw,76px);line-height:.97;letter-spacing:-.055em;margin:12px 0 20px}.affiliate-home-copy h2 em{font-style:normal;color:#e9bd76}.affiliate-home-copy>p{color:var(--muted,#aaa);line-height:1.75;max-width:650px}.affiliate-home-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.affiliate-home-chips span{font-size:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#d5c9b9;background:rgba(255,255,255,.025)}.affiliate-home-visual{min-height:500px;position:relative;display:grid;place-items:center}.affiliate-home-visual>img{max-height:485px;max-width:70%;position:relative;z-index:2;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}.affiliate-home-ring{position:absolute;width:430px;height:430px;border:1px solid rgba(229,177,93,.17);border-radius:50%;box-shadow:inset 0 0 60px rgba(223,152,56,.08)}.affiliate-home-visual article{position:absolute;z-index:3;width:190px;padding:14px;border-radius:14px;border:1px solid rgba(232,188,114,.22);background:rgba(24,17,10,.84);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.32)}.affiliate-home-visual article:first-of-type{left:3%;top:24%}.affiliate-home-visual article:last-of-type{right:2%;bottom:20%}.affiliate-home-visual article small,.affiliate-home-visual article span{display:block;color:#b3a695;font-size:9px}.affiliate-home-visual article b{display:block;font-size:20px;margin:5px 0}@media(max-width:900px){.affiliate-home-cta{grid-template-columns:1fr}.affiliate-home-visual{min-height:420px}.affiliate-home-visual>img{max-height:390px}}@media(max-width:560px){.affiliate-home-copy h2{font-size:43px}.affiliate-home-visual{min-height:360px}.affiliate-home-ring{width:310px;height:310px}.affiliate-home-visual article{width:145px;padding:10px}.affiliate-home-visual article:first-of-type{left:-5px}.affiliate-home-visual article:last-of-type{right:-5px}}

/* =====================================================================
   v2.0.23 — certificates, momentum showcase and exhibition visual refresh
   ===================================================================== */
.certificate-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.certificate-wall-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(232,196,114,.28);border-radius:12px;background:rgba(225,155,74,.08);color:#f7f0e7;font-size:11px;font-weight:800;letter-spacing:.02em;transition:.22s}
.certificate-wall-link:hover{transform:translateY(-2px);border-color:rgba(232,196,114,.65);background:rgba(225,155,74,.16)}
.cert-card{width:520px;grid-template-columns:minmax(0,1fr) 176px;padding:18px 18px 14px 22px;gap:14px 18px}
/* Square since the Design B port (1080x1080). This block is currently unreferenced by any template, but a 1.6/1 certificate frame left in the stylesheet is a trap for the next caller. */
.cert-preview-mini{width:176px;aspect-ratio:1/1;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#120c06;position:relative;z-index:1}
.cert-preview-mini svg{display:block;width:100%;height:100%}
.cert-open{grid-column:1/3;display:inline-flex;align-items:center;width:max-content;color:#ebce86;font-size:10px;font-weight:800;letter-spacing:.08em;position:relative;z-index:2}
.cert-open:hover{color:#fff}
.certificate-empty-public{max-width:1400px;margin:0 auto;padding:24px max(4vw,24px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(66,46,15,.48),rgba(25,17,8,.62));display:flex;align-items:center;justify-content:space-between;gap:22px}
.certificate-empty-public b,.certificate-empty-public span{display:block}.certificate-empty-public span{margin-top:7px;color:var(--muted);font-size:13px}.certificate-empty-public a{color:#ebce86;font-weight:800;font-size:12px;white-space:nowrap}

.milestone-showcase{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;max-width:1400px;margin:0 auto}
.milestone-loop-card{position:relative;min-height:620px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#0d0904;box-shadow:0 24px 80px rgba(65,44,15,.34)}
.milestone-loop-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,3,2,.94) 100%);pointer-events:none}
.milestone-loop-card video{width:100%;height:100%;min-height:620px;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.03)}
.milestone-loop-overlay{position:absolute;left:28px;right:28px;bottom:28px;z-index:2;padding:20px 22px;border:1px solid rgba(232,196,114,.2);border-radius:18px;background:rgba(16,11,4,.64);backdrop-filter:blur(18px)}
.milestone-loop-overlay span{display:block;color:#e8c572;font:800 10px/1.2 var(--au-mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.18em}.milestone-loop-overlay b{display:block;font-size:26px;margin:8px 0 4px}.milestone-loop-overlay small{color:var(--muted);font-size:12px}
.milestone-thumb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.milestone-thumb{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(155deg,rgba(41,29,13,.94),rgba(13,9,4,.9));transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s;min-width:0}
.milestone-thumb:hover{transform:translateY(-6px);border-color:rgba(232,196,114,.45);box-shadow:0 24px 60px rgba(129,85,21,.23)}
.milestone-thumb-media{aspect-ratio:16/8.2;overflow:hidden;background:#100a04}.milestone-thumb-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--motion-smooth)}.milestone-thumb:hover img{transform:scale(1.035)}
.milestone-thumb>div:last-child{padding:18px 18px 20px}.milestone-thumb span{color:#e8c572;font-size:9px;font-weight:800;letter-spacing:.16em}.milestone-thumb h3{font-size:18px;margin:7px 0 6px}.milestone-thumb p{color:var(--muted);font-size:12px;line-height:1.55;margin:0}

.expo-grid-generated article{position:relative;overflow:hidden;transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s}.expo-grid-generated article:hover{transform:translateY(-7px);border-color:rgba(232,196,114,.42);box-shadow:0 26px 70px rgba(92,63,22,.28)}
.expo-grid-generated .expo-visual{height:430px;background:#100b05}.expo-grid-generated .expo-visual img{position:static;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .7s var(--motion-smooth)}.expo-grid-generated article:hover .expo-visual img{transform:scale(1.035)}
.expo-grid-generated .expo-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,3,2,.76));pointer-events:none}.expo-grid-generated .expo-visual span{z-index:2;padding:7px 10px;border:1px solid rgba(232,196,114,.28);border-radius:9px;background:rgba(13,9,4,.68);backdrop-filter:blur(10px);font-weight:800}.expo-grid-generated article>small{display:block;margin:18px 20px 0;color:#e8c572;font-size:9px;font-weight:800;letter-spacing:.16em}.expo-grid-generated h3{font-size:23px;margin-top:7px;margin-bottom:0}.expo-grid-generated p{margin-top:6px;margin-bottom:22px}

@media(max-width:1100px){.milestone-showcase{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:500px}}
@media(max-width:700px){.certificate-head-actions{justify-content:flex-start}.certificate-empty-public{margin:0 20px;flex-direction:column;align-items:flex-start}.cert-card{width:350px;grid-template-columns:1fr 112px}.cert-preview-mini{width:112px}.milestone-thumb-grid{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:360px}.milestone-loop-overlay{left:14px;right:14px;bottom:14px;padding:15px}.milestone-loop-overlay b{font-size:20px}.expo-grid-generated .expo-visual{height:360px}}
@media(prefers-reduced-motion:reduce){.milestone-loop-card video{display:none}.milestone-loop-card{background:url('../images/hotfix-20260816/milestone-trader-progress.webp') center/cover no-repeat}.milestone-thumb,.expo-grid-generated article,.milestone-thumb-media img,.expo-grid-generated .expo-visual img{transition:none!important}}


/* ===================================================================
   POP-UP DIALOGS — welcome + exit intent
   Paired with index.php (markup) and assets/js/fpfx.js (behaviour).
   Aurora only: warm gold on dark-translucent glass, one easing curve,
   no cool hue anywhere in this block.
   =================================================================== */

/* A single running offer is the NORMAL case, not an edge case — an operator
   seeds one promotion at a time. repeat(2,minmax(0,1fr)) left that one card
   sitting in the left half of a 1180px panel with dead space beside it. */
.offer-grid>.offer-card:only-child{grid-column:1/-1}

/* Aurora: every figure is JetBrains Mono. The offer card's countdown was the one
   figure in either dialog still set in DM Sans — .exit-offer-time time already
   carried --au-mono, .offer-time time only ever got tabular-nums. */
.offer-grid .offer-time time{font-family:var(--au-mono,"JetBrains Mono",ui-monospace,monospace)}

/* Body scroll lock. overflow-y only, because html/body already carry
   overflow-x:clip on purpose (v6.3 note above: `hidden` propagated to the
   viewport and broke position:sticky). */
body.fpfx-modal-open{overflow-y:hidden}

/* The action row. Both dialogs now carry an explicit dismiss beside the CTA;
   a close glyph in a corner is not a dismissal a visitor can find in a hurry. */
.modal-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.exit-modal:not(.exit-band) .modal-actions{margin-top:16px}
.exit-modal:not(.exit-band) .modal-actions>.btn{min-width:190px}
.modal-dismiss{
  border:1px solid rgba(238,183,98,.24);
  border-radius:999px;
  background:rgba(13,11,10,.58);          /* dark-translucent glass, never white */
  color:#C9C1B4;
  font:500 12px/1 var(--au-body,"DM Sans",system-ui,sans-serif);
  letter-spacing:.01em;
  padding:11px 18px;
  cursor:pointer;
  transition:color .32s var(--motion-smooth),border-color .32s var(--motion-smooth),background .32s var(--motion-smooth);
}
.modal-dismiss:hover{color:#F3DBB2;border-color:rgba(238,183,98,.5);background:rgba(138,107,58,.16)}

/* Visible focus ring. The dialogs trap Tab, so the ring is the only thing
   telling a keyboard visitor where they are inside the trap. */
.promo-modal :focus-visible,
.exit-modal :focus-visible,
.promo-modal:focus-visible,
.exit-modal:focus-visible{outline:2px solid #EEB762;outline-offset:3px}
.modal-close{cursor:pointer;transition:border-color .3s var(--motion-smooth),color .3s var(--motion-smooth)}
.modal-close:hover{border-color:rgba(238,183,98,.6);color:#F3DBB2}

/* The exit dialog had no height ceiling at all above 700px: on a short laptop
   window it ran off the bottom of the screen with no way to reach the CTA. */
.exit-modal{max-height:calc(100vh - 50px);max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain}
.promo-modal,.exit-modal{scrollbar-width:thin;scrollbar-color:rgba(227,174,85,.55) transparent}

/* The backdrop is shared by both dialogs. It was previously emitted outside
   #promoModal and #exitModal had none at all, which is not survivable once
   aria-modal="true" claims the background is inert. */
.modal-backdrop{background:rgba(5,5,5,.72);backdrop-filter:blur(3px)}

@media(prefers-reduced-motion:reduce){
  /* Two infinite spins. The only rule that stopped them was `display:none`
     inside @media(max-width:900px), so on a desktop with reduce set they ran.
     None of the five reduced-motion blocks earlier in this file reached here. */
  .modal-orbit,.modal-orbit::after{animation:none!important}
  .modal-dismiss,.modal-close{transition:none!important}
}

/* ═══════════ OFFER POP-UP — "THE MARQUEE" ═══════════
   Chosen from four variations on 2026-08-30.

   The inherited shape was a centred TWO-COLUMN dialog: a 280px artwork panel
   beside the offer stack, buttons beneath. That silhouette read as the inherited build's, so
   the split is gone entirely and with it the .modal-character panel — there is
   no artwork column any more. The discount figure IS the composition, set at a
   scale the page cannot ignore, with everything else beneath it as a caption.
   Portrait rather than landscape, which is the visible break.

   Scoped to .promo-marquee so the exit modal keeps the shared base rules it
   still shares with .promo-modal above. */
.promo-modal.promo-marquee{
  width:min(460px,94vw);
  grid-template-columns:none;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(243,196,106,.16),transparent 64%),
    rgba(20,16,13,.94);
  backdrop-filter:blur(22px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.promo-modal.promo-marquee.show{display:block}
.promo-modal.promo-marquee>.offer-panel{padding:34px 30px 26px;text-align:center}

.promo-marquee .pm-eyebrow{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#B4823A}

/* The first offer is the marquee. Any further offers collapse to a compact row
   beneath it rather than repeating the huge figure — the shape is built for one
   headline offer and must not break when a second is running. */
.promo-marquee .offer-grid{display:block;margin:0}
.promo-marquee .offer-card{border:0;background:none;padding:0;margin:0}
.promo-marquee .offer-card+.offer-card{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:11px;text-align:left;flex-wrap:wrap}

.promo-marquee .pm-fig{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:96px;font-weight:700;line-height:.84;letter-spacing:-.04em;margin:14px 0 0;
  background:linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.promo-marquee .offer-card+.offer-card .pm-fig{font-size:30px;margin:0;flex:none}

.promo-marquee .pm-off{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:15px;letter-spacing:.4em;color:#B4823A;margin-top:8px}
.promo-marquee .offer-card+.offer-card .pm-off{font-size:10px;letter-spacing:.2em;margin:0}

.promo-marquee .pm-title{
  display:block;font-family:"Outfit",system-ui,sans-serif;font-size:15px;font-weight:600;
  color:#F5F3F0;margin-top:16px;letter-spacing:-.01em}
.promo-marquee .offer-card+.offer-card .pm-title{margin:0;font-size:13px}
.promo-marquee .pm-desc{margin:8px 0 0;font-size:13px;color:#BCB5AB;line-height:1.55}
.promo-marquee .offer-card+.offer-card .pm-desc{display:none}

.promo-marquee .coupon-box{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;
  border:1px dashed rgba(243,196,106,.42);border-radius:12px;padding:9px 13px;
  background:rgba(243,196,106,.05)}
.promo-marquee .coupon-box b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;
  letter-spacing:.1em;color:#FFF0CE;font-size:13px}
.promo-marquee .coupon-box span{font-size:11.5px;color:#948C82}
.promo-marquee .copy-code{
  appearance:none;background:none;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;color:#F3C46A;cursor:pointer;
  border:1px solid rgba(243,196,106,.42);border-radius:100px;padding:4px 10px;
  transition:background .3s cubic-bezier(.2,.8,.3,1)}
.promo-marquee .copy-code:hover{background:rgba(243,196,106,.12)}

.promo-marquee .offer-time{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.promo-marquee .offer-time span{letter-spacing:.18em;text-transform:uppercase;color:#948C82}
.promo-marquee .offer-time time{color:#FFF0CE;font-variant-numeric:tabular-nums;font-weight:700}
.promo-marquee .offer-card+.offer-card .offer-time{margin:0 0 0 auto}

.promo-marquee h2{
  font-family:"Outfit",system-ui,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.02em;margin:18px 0 0;color:#F5F3F0}
.promo-marquee .pm-lede{margin:9px 0 0;font-size:13px;color:#BCB5AB;line-height:1.55}

.promo-marquee .modal-actions{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:11px;align-items:center}
.promo-marquee .modal-actions .btn{width:100%;justify-content:center;text-align:center}
.promo-marquee .modal-dismiss{
  appearance:none;background:none;border:0;color:#948C82;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.promo-marquee .modal-dismiss:hover{color:#BCB5AB}

@media(max-width:520px){
  .promo-marquee .pm-fig{font-size:72px}
  .promo-modal.promo-marquee>.offer-panel{padding:28px 20px 22px}
}

/* ═══════════ EXIT INTENT — "THE INTERCEPTION BAND" ═══════════
   The inherited exit dialog was a floating card bottom-right, 420px wide, with a
   150px illustration floated into it — the inherited build's shape, and the illustration was
   the previous brand's coin render, 100% violet across every saturated pixel.

   Exit intent fires when the cursor leaves through the TOP of the viewport. So
   this sits at the top edge, in the path the cursor is already taking, rather
   than in the opposite corner where it has to be hunted for. Shallow and full
   width, so it intercepts without covering the page the visitor is leaving.

   Three surfaces, three shapes, on purpose: the offer modal is a centred
   portrait marquee, this is a horizontal band, and neither is the other's
   layout rotated. */
.exit-modal.exit-band{
  left:0;right:0;top:0;bottom:auto;width:auto;flex-wrap:nowrap;
  border-radius:0 0 20px 20px;border:1px solid rgba(255,255,255,.1);border-top:0;
  border-bottom:1px solid rgba(243,196,106,.42);
  background:
    radial-gradient(70% 200% at 22% 0%,rgba(243,196,106,.14),transparent 62%),
    rgba(14,11,9,.97);
  backdrop-filter:blur(22px);
  box-shadow:0 26px 70px -24px rgba(0,0,0,.9);
  padding:16px 26px 18px;
  display:none;
  align-items:center;gap:20px;
}
.exit-modal.exit-band.show{display:flex}

.exit-band .xb-mark{width:52px;height:52px;flex:none;float:none;object-fit:contain}
.exit-band .xb-say{flex:1 1 auto;min-width:0}
.exit-band .xb-eyebrow{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#B4823A}
.exit-band h2{
  font-family:"Outfit",system-ui,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.02em;margin:4px 0 0;color:#F5F3F0;float:none}
/* One line, clamped. The description is context, not the message — it must
   never be the thing that forces the band to grow a second row. */
.exit-band p{margin:3px 0 0;font-size:12.5px;color:#BCB5AB;line-height:1.5;max-width:70ch;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.exit-band .xb-offer{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
.exit-band .exit-auto-offer,
.exit-band .exit-offer-code{
  display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:100px;
  border:1px dashed rgba(243,196,106,.42);background:rgba(243,196,106,.06);
  margin:0;flex-wrap:wrap}
.exit-band .exit-auto-offer b,
.exit-band .exit-offer-code b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;font-weight:700;
  color:#FFF0CE;letter-spacing:.04em}
.exit-band .exit-auto-offer small,
.exit-band .exit-offer-code span{font-size:11px;color:#948C82}
.exit-band .copy-inline{
  appearance:none;background:none;border:1px solid rgba(243,196,106,.42);
  border-radius:100px;padding:3px 9px;color:#F3C46A;cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px}
.exit-band .exit-offer-time{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.exit-band .exit-offer-time span{letter-spacing:.16em;text-transform:uppercase;color:#948C82}
.exit-band .exit-offer-time time{color:#FFF0CE;font-variant-numeric:tabular-nums;font-weight:700}

.exit-band .modal-actions{display:flex;align-items:center;gap:14px;flex:none;margin:0 0 0 auto}
.exit-band .modal-dismiss{
  appearance:none;background:none;border:0;color:#948C82;font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.exit-band .modal-dismiss:hover{color:#BCB5AB}
.exit-band .modal-close{top:10px;right:12px}

@media(max-width:900px){
  .exit-modal.exit-band{padding:16px 18px 18px;gap:14px;flex-wrap:wrap}
  .exit-band .xb-mark{width:40px;height:40px}
  .exit-band p{display:none}
  .exit-band .modal-actions{width:100%;justify-content:space-between}
}