:root {
    --bg: #100a12;
    --bg-deep: #09070d;
    --surface: rgba(30, 17, 32, 0.84);
    --surface-strong: #211326;
    --surface-soft: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 224, 239, 0.12);
    --border-strong: rgba(255, 224, 239, 0.22);
    --text: #fff8fb;
    --muted: rgba(255, 239, 247, 0.57);
    --pink: #ff76b7;
    --pink-soft: #ffb4d5;
    --pink-pale: #ffe0ee;
    --purple: #a86aff;
    --purple-deep: #7040d5;
    --gold: #ffe270;
    --green: #67f4c6;
    --shadow: 0 28px 80px rgba(4, 1, 8, 0.46);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    min-width: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--bg-deep);
    color: var(--text);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
a,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(255, 118, 183, 0.52);
    outline-offset: 4px;
}

.shell {
    width: min(1180px, calc(100% - 44px));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 999;
    transform: translateY(-150%);
    border-radius: 10px;
    padding: 10px 14px;
    background: #fff;
    color: #160d18;
    font-size: 13px;
    font-weight: 800;
    transition: transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.page-grid {
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        radial-gradient(circle at 48% -8%, rgba(255, 118, 183, 0.14), transparent 35rem),
        linear-gradient(180deg, #120a15, #08070b 52%, #0d0810);
    background-size: 44px 44px, 44px 44px, auto, auto;
}

.ambient-glow {
    position: fixed;
    z-index: -4;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(105px);
    opacity: 0.24;
}

.glow-pink {
    width: 35rem;
    height: 25rem;
    top: -11rem;
    left: 8%;
    background: #ff5fae;
}

.glow-purple {
    width: 31rem;
    height: 24rem;
    top: 19rem;
    right: -13rem;
    background: #955cff;
    opacity: 0.18;
}

.petal-field {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
}

.petal-field i {
    position: absolute;
    top: -8vh;
    width: 12px;
    height: 18px;
    border-radius: 80% 20% 75% 25%;
    background: linear-gradient(145deg, rgba(255, 219, 237, 0.85), rgba(255, 111, 179, 0.36));
    box-shadow: inset 2px 1px 3px rgba(255,255,255,.35);
    opacity: 0.28;
    animation: petalFall linear infinite;
}

.petal-field i:nth-child(1) { left: 7%; animation-duration: 16s; animation-delay: -2s; }
.petal-field i:nth-child(2) { left: 19%; animation-duration: 21s; animation-delay: -13s; transform: scale(.75); }
.petal-field i:nth-child(3) { left: 34%; animation-duration: 18s; animation-delay: -8s; }
.petal-field i:nth-child(4) { left: 47%; animation-duration: 24s; animation-delay: -16s; transform: scale(.65); }
.petal-field i:nth-child(5) { left: 61%; animation-duration: 19s; animation-delay: -5s; }
.petal-field i:nth-child(6) { left: 73%; animation-duration: 23s; animation-delay: -18s; transform: scale(.8); }
.petal-field i:nth-child(7) { left: 87%; animation-duration: 17s; animation-delay: -11s; }
.petal-field i:nth-child(8) { left: 95%; animation-duration: 22s; animation-delay: -6s; transform: scale(.7); }

.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border-bottom: 1px solid transparent;
    background: rgba(10, 7, 12, 0.44);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.topbar.is-scrolled {
    background: rgba(10, 7, 12, 0.83);
    border-bottom-color: rgba(255, 226, 239, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}

.topbar-inner {
    width: min(1180px, calc(100% - 44px));
    min-height: 68px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand,
.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 225, 239, 0.16);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 161, 207, 0.18), rgba(121, 66, 158, 0.12));
    box-shadow: 0 0 28px rgba(255, 102, 178, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.brand-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 45%);
}

.brand-logo img,
.logo-crystal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-fallback {
    font-size: 19px;
    font-weight: 800;
    color: var(--pink-pale);
    text-shadow: 0 0 18px var(--pink);
}

.logo-fallback[hidden] {
    display: none;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-copy strong {
    font-size: 14px;
    letter-spacing: -0.025em;
}

.brand-copy small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-actions > a {
    padding: 9px 12px;
    border-radius: 10px;
    color: rgba(255, 242, 248, 0.58);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-actions > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.nav-actions .nav-discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    padding-inline: 15px;
    color: #24101d;
    background: linear-gradient(180deg, #fff8fb, #f7dbe8);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 -2px 5px rgba(87, 26, 61, 0.09);
}

.nav-actions .nav-discord:hover {
    color: #24101d;
    background: #fff;
    transform: translateY(-1px);
}

.nav-discord svg,
.button svg,
.gateway-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero {
    min-height: 760px;
    padding-top: 150px;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
    align-items: center;
    gap: 68px;
}

.hero-copy {
    max-width: 650px;
}

.eyebrow {
    width: max-content;
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 124, 187, 0.2);
    border-radius: 999px;
    background: rgba(255, 111, 181, 0.075);
    color: rgba(255, 227, 241, 0.79);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.eyebrow-dot,
.panel-header i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(103, 244, 198, 0.08), 0 0 15px rgba(103, 244, 198, 0.72);
}

.hero h1 {
    margin-bottom: 24px;
    font-size: clamp(3.75rem, 6.25vw, 6.35rem);
    line-height: .97;
    letter-spacing: -.078em;
    font-weight: 800;
    text-wrap: balance;
}

.hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(110deg, #fff 0%, #ffd6e9 28%, #ff87bf 58%, #b98aff 97%);
    background-size: 155% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textBloom 8s ease-in-out infinite alternate;
}

.hero-description {
    max-width: 590px;
    margin-bottom: 31px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 27px;
}

.button {
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 19px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease, background 190ms ease;
}

.button-primary {
    color: #2b1322;
    background: linear-gradient(180deg, #fffafb, #ffddec);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 15px 34px rgba(0, 0, 0, 0.28), inset 0 -3px 7px rgba(111, 26, 73, 0.09);
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 43px rgba(0, 0, 0, 0.34), 0 0 28px rgba(255, 105, 180, 0.12);
}

.button-ghost {
    color: rgba(255, 243, 249, 0.73);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
}

.button-ghost:hover {
    color: #fff;
    transform: translateY(-2px);
    border-color: rgba(255, 219, 236, .2);
    background: rgba(255, 255, 255, .055);
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    color: rgba(255, 239, 247, 0.42);
    font-size: 11px;
    font-weight: 650;
}

.hero-notes span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-notes i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 171, 211, .7);
}

.hero-art {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    justify-self: end;
    width: min(100%, 500px);
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 160ms ease-out;
}

.vyx-panel {
    position: relative;
    min-height: 500px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 218, 237, .13);
    border-radius: 31px;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 133, 192, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(35, 21, 42, .94), rgba(12, 10, 16, .96));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 70px rgba(255, 89, 173, .07);
}

.vyx-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 22%, transparent 75%, rgba(255,112,181,.04));
}

.panel-noise {
    position: absolute;
    inset: 0;
    opacity: .24;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 236, 246, .16) .7px, transparent .8px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.panel-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 239, 247, .52);
    font-size: 10px;
    font-weight: 700;
}

.panel-header b {
    margin-left: auto;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(103, 244, 198, .18);
    color: #7dffd4;
    background: rgba(103, 244, 198, .065);
    font-size: 9px;
    text-transform: uppercase;
}

.logo-stage {
    position: relative;
    z-index: 2;
    width: 210px;
    height: 185px;
    margin: 32px auto 3px;
    display: grid;
    place-items: center;
}

.blossom-ring {
    position: absolute;
    border: 1px solid rgba(255, 153, 203, .14);
    border-radius: 44% 56% 48% 52%;
    transform: rotate(45deg);
}

.ring-one {
    width: 165px;
    height: 165px;
    animation: ringBreathe 5.5s ease-in-out infinite;
}

.ring-two {
    width: 124px;
    height: 124px;
    border-style: dashed;
    border-color: rgba(183, 118, 255, .18);
    animation: ringSpin 18s linear infinite;
}

.logo-crystal {
    position: relative;
    z-index: 2;
    width: 105px;
    height: 105px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 228, 242, .2);
    border-radius: 29px;
    background: linear-gradient(145deg, rgba(255, 198, 226, .17), rgba(108, 64, 135, .08));
    box-shadow: 0 24px 56px rgba(0,0,0,.46), 0 0 48px rgba(255, 96, 177, .2), inset 0 1px 0 rgba(255,255,255,.18);
}

.logo-crystal img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 18px;
}

.mini-petal {
    position: absolute;
    z-index: 3;
    width: 12px;
    height: 18px;
    border-radius: 80% 20% 70% 30%;
    background: linear-gradient(145deg, #ffd5e8, #ff7fbd);
    box-shadow: 0 0 20px rgba(255, 114, 183, .35);
}

.petal-a { top: 13px; right: 24px; transform: rotate(24deg); }
.petal-b { bottom: 17px; left: 24px; transform: rotate(-38deg) scale(.78); }
.petal-c { top: 52px; left: 12px; transform: rotate(80deg) scale(.62); opacity: .72; }

.panel-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.panel-copy strong {
    font-size: 17px;
    letter-spacing: -.035em;
}

.panel-copy small {
    color: rgba(255, 236, 245, .43);
    font-size: 10px;
}

.down-cue {
    position: relative;
    z-index: 2;
    height: 62px;
    margin: 11px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    perspective: 260px;
}

.down-cue > span {
    color: rgba(255, 218, 236, .47);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.arrow-3d {
    position: relative;
    width: 34px;
    height: 38px;
    transform-style: preserve-3d;
    animation: arrowFloat 2.3s ease-in-out infinite;
}

.arrow-face {
    position: absolute;
    inset: 0;
    clip-path: polygon(34% 0, 66% 0, 66% 48%, 100% 48%, 50% 100%, 0 48%, 34% 48%);
    background: linear-gradient(135deg, #ffe1ef, #ff7dba 47%, #a771ff 100%);
    box-shadow: inset 4px 4px 7px rgba(255,255,255,.28), inset -5px -6px 10px rgba(86, 23, 91, .28);
    transform: rotateX(16deg) rotateY(-13deg) translateZ(8px);
    filter: drop-shadow(0 8px 9px rgba(255, 84, 168, .3));
}

.arrow-shadow {
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 27px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 101, 177, .32);
    filter: blur(5px);
    transform: translateX(-50%) rotateX(70deg);
}

.panel-metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.panel-metrics > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 222, 238, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .028);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.metric-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
}

.metric-gold {
    color: #ffe986;
    border: 1px solid rgba(255, 226, 112, .12);
    background: rgba(255, 226, 112, .09);
}

.metric-pink {
    color: #ffb5d7;
    border: 1px solid rgba(255, 118, 183, .13);
    background: rgba(255, 118, 183, .09);
}

.metric-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panel-metrics p {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.panel-metrics strong {
    font-size: 10px;
}

.panel-metrics small {
    overflow: hidden;
    color: rgba(255, 236, 245, .38);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.section {
    padding-top: 112px;
    scroll-margin-top: 75px;
}

.section-heading {
    max-width: 650px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-heading > span,
.utility-kicker {
    display: inline-block;
    margin-bottom: 11px;
    color: #ff94c7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-heading h2,
.loader-copy h2,
.boost-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(2.05rem, 4vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -.055em;
}

.section-heading p,
.loader-copy p,
.boost-copy p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.gateway-grid {
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.gateway-card {
    --glow-x: 50%;
    --glow-y: 0%;
    position: relative;
    min-height: 440px;
    padding: 27px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 27px;
    background:
        linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.008)),
        rgba(25, 15, 29, .9);
    box-shadow: 0 28px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.075);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.gateway-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle 150px at var(--glow-x) var(--glow-y), rgba(255,255,255,.12), transparent 72%);
    transition: opacity 220ms ease;
}

.gateway-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 226, 240, .2);
    box-shadow: 0 36px 88px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.11);
}

.gateway-card:hover::before {
    opacity: 1;
}

.card-light {
    position: absolute;
    width: 250px;
    height: 250px;
    top: -132px;
    right: -100px;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .18;
}

.gateway-shrtfly .card-light {
    background: radial-gradient(circle, #a96cff, transparent 67%);
}

.gateway-linkvertise .card-light {
    background: radial-gradient(circle, #ffe470, transparent 67%);
}

.gateway-topline,
.gateway-copy,
.gateway-button,
.gateway-details {
    position: relative;
    z-index: 2;
}

.gateway-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 39px;
}

.provider-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.provider-mark svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.provider-purple {
    color: #c7a7ff;
    background: rgba(168, 106, 255, .11);
}

.provider-gold {
    color: #ffe479;
    background: rgba(255, 226, 112, .1);
}

.gateway-tag {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tag-purple {
    color: #d7c1ff;
    background: rgba(168, 106, 255, .07);
}

.tag-gold {
    color: #ffec9b;
    background: rgba(255, 226, 112, .065);
}

.gateway-copy {
    display: flex;
    flex-direction: column;
}

.gateway-name {
    margin-bottom: 8px;
    color: rgba(255, 238, 247, .55);
    font-size: 15px;
    font-weight: 650;
}

.gateway-copy > strong {
    margin-bottom: 13px;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -.065em;
}

.gateway-copy p {
    min-height: 48px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.gateway-button {
    width: 100%;
    min-height: 50px;
    margin: 27px 0 29px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.gateway-button::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    transition: transform 520ms ease;
}

.gateway-button:hover::before {
    transform: translateX(120%) skewX(-18deg);
}

.gateway-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.gateway-button:active {
    transform: translateY(1px) scale(.99);
}

.gateway-button:disabled {
    cursor: wait;
    opacity: .7;
}

.gateway-button-purple {
    color: #fff;
    background: linear-gradient(180deg, #b47cff, #7b48dd);
    box-shadow: 0 13px 27px rgba(102, 51, 178, .27), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -3px 6px rgba(44, 20, 83, .2);
}

.gateway-button-gold {
    color: #2b2410;
    background: linear-gradient(180deg, #fff1a0, #e5b42c);
    box-shadow: 0 13px 27px rgba(177, 125, 24, .22), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(89, 58, 6, .14);
}

.gateway-details {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 229, 241, .08);
}

.gateway-details > span {
    display: block;
    margin-bottom: 15px;
    color: rgba(255, 241, 248, .78);
    font-size: 11px;
    font-weight: 700;
}

.gateway-details p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    color: rgba(255, 238, 247, .58);
    font-size: 11px;
    font-weight: 650;
}

.gateway-details i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 139, 196, .09);
    color: #ffacd3;
    font-style: normal;
    font-size: 10px;
}

.how-section {
    padding-top: 125px;
}

.step-grid {
    max-width: 960px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.step-card {
    position: relative;
    min-height: 200px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 23px;
    background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
}

.step-card::after {
    content: "✿";
    position: absolute;
    right: -13px;
    bottom: -32px;
    color: rgba(255, 130, 190, .055);
    font-size: 120px;
    line-height: 1;
}

.step-card > span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 28px;
    border-radius: 12px;
    background: rgba(255, 126, 188, .09);
    color: #ffacd2;
    font-size: 10px;
    font-weight: 800;
}

.step-card h3 {
    margin-bottom: 9px;
    font-size: 19px;
    letter-spacing: -.035em;
}

.step-card p {
    max-width: 220px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.utilities {
    max-width: 980px;
    padding-bottom: 125px;
}

.loader-card,
.boost-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 27px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
}

.loader-card {
    padding: 31px;
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 106, 255, .1), transparent 30%),
        rgba(24, 15, 28, .88);
}

.loader-copy {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 25px;
}

.utility-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 190, 221, .15);
    border-radius: 16px;
    color: #ffadd3;
    background: rgba(255, 118, 183, .09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}

.utility-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loader-copy h2,
.boost-copy h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.code-shell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 226, 240, .1);
    border-radius: 16px;
    background: rgba(3, 3, 7, .42);
}

.code-shell code {
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    padding: 0 9px;
    color: #ffe7f2;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    white-space: nowrap;
    scrollbar-width: none;
}

.code-shell code::-webkit-scrollbar {
    display: none;
}

.code-shell button {
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 11px;
    cursor: pointer;
    color: #28121f;
    background: linear-gradient(180deg, #fffafd, #f3d7e5);
    font-size: 11px;
    font-weight: 800;
    box-shadow: inset 0 -2px 4px rgba(82, 20, 53, .1), 0 8px 20px rgba(0,0,0,.2);
}

.boost-card {
    min-height: 230px;
    margin-top: 20px;
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    background:
        radial-gradient(circle at 8% 18%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(120deg, #b6528a, #7f4fc6 66%, #5c3e9a);
}

.boost-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.16) .7px, transparent .8px);
    background-size: 20px 20px;
    opacity: .24;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}

.boost-blossom {
    position: absolute;
    right: 20%;
    bottom: -105px;
    color: rgba(255, 225, 239, .09);
    font-size: 240px;
    line-height: 1;
}

.boost-copy,
.boost-button {
    position: relative;
    z-index: 2;
}

.boost-copy {
    max-width: 590px;
}

.boost-copy .utility-kicker,
.boost-copy p {
    color: rgba(255, 246, 251, .76);
}

.boost-button {
    color: #35182a;
    background: linear-gradient(180deg, #fffafd, #f6dbe8);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 14px 30px rgba(47, 12, 45, .22), inset 0 -3px 6px rgba(104, 33, 71, .1);
}

.boost-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(47, 12, 45, .3);
}

.footer {
    border-top: 1px solid rgba(255, 225, 239, .075);
    background: rgba(8, 6, 10, .66);
}

.footer-inner {
    min-height: 150px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.brand-logo.small {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.footer-brand > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-brand strong {
    font-size: 13px;
}

.footer-brand small,
.footer-inner > p {
    color: rgba(255, 237, 246, .34);
    font-size: 10px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-links a {
    color: rgba(255, 239, 247, .52);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: color 180ms ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-inner > p {
    justify-self: end;
}

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    width: min(330px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 225, 239, .15);
    border-radius: 16px;
    background: rgba(27, 16, 31, .92);
    box-shadow: 0 22px 55px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.96);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.toast > span {
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #ffbee0;
    background: rgba(255, 118, 183, .1);
    font-size: 14px;
    font-weight: 800;
}

.toast[data-type="error"] > span {
    color: #ffd6de;
    background: rgba(255, 89, 117, .12);
}

.toast > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.toast strong {
    font-size: 12px;
}

.toast small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
    transition: opacity 680ms cubic-bezier(.2,.75,.25,1), transform 680ms cubic-bezier(.2,.75,.25,1), filter 680ms ease;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Legal pages */
.legal-page {
    background: #0c080f;
}

.legal-orb {
    position: fixed;
    z-index: -3;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
}

.legal-orb-one {
    width: 29rem;
    height: 24rem;
    top: 7rem;
    left: -11rem;
    background: rgba(255, 94, 170, .17);
}

.legal-orb-two {
    width: 24rem;
    height: 23rem;
    right: -10rem;
    bottom: 4rem;
    background: rgba(163, 96, 255, .13);
}

.legal-shell {
    width: min(1120px, calc(100% - 44px));
    margin-inline: auto;
    padding: 145px 0 100px;
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 68px;
}

.legal-intro {
    position: sticky;
    top: 110px;
    min-height: 520px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 218, 236, .12);
    border-radius: 30px;
    background:
        radial-gradient(circle at 30% 10%, rgba(255, 145, 198, .15), transparent 32%),
        linear-gradient(145deg, rgba(40, 21, 42, .9), rgba(16, 11, 19, .94));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}

.legal-kicker {
    display: inline-block;
    margin-bottom: 28px;
    color: #ff9bc9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.legal-intro h1 {
    margin-bottom: 22px;
    font-size: clamp(3rem, 5vw, 4.55rem);
    line-height: .95;
    letter-spacing: -.07em;
}

.legal-intro p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.72;
}

.legal-date {
    margin-top: 31px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legal-date span {
    color: rgba(255, 235, 245, .38);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-date strong {
    font-size: 12px;
}

.legal-flower {
    position: absolute;
    right: -64px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 155, 204, .08);
    border-radius: 46% 54% 42% 58%;
    color: rgba(255, 126, 190, .095);
    font-size: 175px;
    transform: rotate(18deg);
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.legal-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 27px;
    border: 1px solid rgba(255, 222, 238, .1);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.legal-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 154, 203, .12);
    border-radius: 14px;
    color: #ffafd5;
    background: rgba(255, 118, 183, .075);
    font-size: 10px;
    font-weight: 800;
}

.legal-card h2 {
    margin: 5px 0 12px;
    font-size: 18px;
    letter-spacing: -.035em;
}

.legal-card p,
.legal-card li {
    color: rgba(255, 237, 246, .58);
    font-size: 12px;
    line-height: 1.75;
}

.legal-card ul {
    margin-top: 13px;
    padding-left: 18px;
}

.legal-card li + li {
    margin-top: 7px;
}

.legal-card strong {
    color: rgba(255, 248, 252, .87);
}

.legal-contact-card {
    background:
        radial-gradient(circle at 95% 10%, rgba(255, 143, 197, .12), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.013));
}

.legal-contact-card a {
    width: max-content;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 12px;
    color: #2b1422;
    background: linear-gradient(180deg, #fffafd, #f4d7e5);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.legal-footer {
    min-height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid rgba(255, 224, 239, .07);
    color: rgba(255, 236, 245, .38);
    font-size: 10px;
}

.legal-footer a {
    color: rgba(255, 239, 247, .58);
    text-decoration: none;
    font-weight: 700;
}

.legal-footer > span {
    color: rgba(255, 133, 192, .45);
}

@keyframes petalFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    50% { transform: translate3d(42px, 52vh, 0) rotate(180deg); }
    100% { transform: translate3d(-30px, 112vh, 0) rotate(360deg); }
}

@keyframes textBloom {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes ringBreathe {
    0%, 100% { transform: rotate(45deg) scale(.98); opacity: .65; }
    50% { transform: rotate(51deg) scale(1.04); opacity: 1; }
}

@keyframes ringSpin {
    to { transform: rotate(405deg); }
}

@keyframes arrowFloat {
    0%, 100% { transform: translateY(1px) rotateZ(-1deg); }
    50% { transform: translateY(9px) rotateZ(1deg); }
}

@media (max-width: 960px) {
    .hero {
        min-height: auto;
        padding-top: 135px;
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .hero-copy {
        max-width: 740px;
        text-align: center;
        margin-inline: auto;
    }

    .eyebrow {
        margin-inline: auto;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-notes {
        justify-content: center;
    }

    .hero-art {
        justify-self: center;
        width: min(100%, 540px);
    }

    .legal-shell {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .legal-intro {
        position: relative;
        top: auto;
        min-height: 370px;
    }
}

@media (max-width: 720px) {
    .shell,
    .topbar-inner,
    .legal-shell {
        width: min(100% - 28px, 1180px);
    }

    .topbar-inner {
        min-height: 62px;
    }

    .brand-logo {
        width: 35px;
        height: 35px;
    }

    .brand-copy small,
    .nav-actions > a:not(.nav-discord) {
        display: none;
    }

    .nav-actions .nav-discord {
        margin-left: 0;
        padding: 9px 12px;
        font-size: 10px;
    }

    .hero {
        padding-top: 116px;
        gap: 43px;
    }

    .hero h1 {
        font-size: clamp(3.2rem, 16vw, 4.65rem);
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-notes {
        gap: 11px 15px;
    }

    .vyx-panel {
        min-height: 475px;
        padding: 19px;
        border-radius: 25px;
    }

    .panel-metrics {
        gap: 8px;
    }

    .panel-metrics > div {
        padding: 10px;
        gap: 8px;
    }

    .metric-icon {
        width: 31px;
        height: 31px;
    }

    .section {
        padding-top: 92px;
    }

    .gateway-grid,
    .step-grid {
        grid-template-columns: 1fr;
    }

    .gateway-card {
        min-height: 415px;
    }

    .step-card {
        min-height: 175px;
    }

    .loader-card,
    .boost-card {
        padding: 23px;
        border-radius: 23px;
    }

    .loader-copy {
        flex-direction: column;
    }

    .code-shell {
        align-items: stretch;
        flex-direction: column;
    }

    .code-shell code {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .boost-card {
        grid-template-columns: 1fr;
    }

    .boost-button {
        width: 100%;
    }

    .footer-inner {
        min-height: 185px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 19px;
        padding-block: 30px;
        text-align: center;
    }

    .footer-inner > p {
        justify-self: center;
    }

    .legal-shell {
        padding-top: 112px;
    }

    .legal-intro {
        min-height: 350px;
        padding: 25px;
        border-radius: 24px;
    }

    .legal-card {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 13px;
        padding: 20px;
        border-radius: 19px;
    }

    .legal-number {
        width: 36px;
        height: 36px;
    }
}

@media (hover: none), (pointer: coarse) {
    .gateway-card:hover,
    .button:hover,
    .nav-actions .nav-discord:hover,
    .boost-button:hover {
        transform: none;
    }

    .gateway-button:hover::before {
        transform: translateX(-120%) skewX(-18deg);
    }

    .hero-art {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .petal-field {
        display: none;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Vyx Hub v2 — compact Reset HWID navigation action */
.nav-actions > a.nav-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    margin-left: 2px;
    color: rgba(255, 229, 242, 0.82);
    border: 1px solid rgba(255, 132, 190, 0.17);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 132, 190, 0.095), rgba(159, 85, 177, 0.055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.nav-actions > a.nav-reset:hover {
    color: #fff;
    border-color: rgba(255, 151, 202, 0.31);
    background: linear-gradient(180deg, rgba(255, 132, 190, 0.16), rgba(159, 85, 177, 0.09));
    transform: translateY(-1px);
}

.nav-actions > a.nav-reset svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    .nav-actions > a.nav-reset {
        width: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
    }

    .nav-actions > a.nav-reset span {
        display: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .nav-actions > a.nav-reset:hover {
        transform: none;
    }
}