:root {
    color-scheme: dark;
    --bg: #07090d;
    --surface: #0d1118;
    --surface-2: #121823;
    --line: #1b2230;
    --ink: #eef2f8;
    --muted: #8b96a8;
    --accent: #2f7dff;
    --accent-hi: #66a3ff;
    --accent-soft: rgba(47, 125, 255, .12);
    --ok: #3ddc97;
    --radius: 20px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at center, transparent 24%, rgba(0, 0, 0, .72) 100%), linear-gradient(to right, rgba(181, 193, 211, .065) 1px, transparent 1px), linear-gradient(to bottom, rgba(181, 193, 211, .065) 1px, transparent 1px), radial-gradient(ellipse at 50% 14%, rgba(47, 125, 255, .2), transparent 50%), radial-gradient(ellipse at 82% 72%, rgba(139, 92, 246, .09), transparent 42%);
    background-size: auto, 44px 44px, 44px 44px, auto, auto;
    background-attachment: fixed;
    color: var(--ink);
    font-family: "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.brand,
.win-title,
.steps strong,
summary {
    font-family: "Instrument Sans", sans-serif;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

h1 {
    letter-spacing: -0.045em;
}

em.serif {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--accent-hi);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--accent-hi);
    outline-offset: 3px;
    border-radius: 8px;
}

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
}

.skip {
    position: absolute;
    left: -999px;
    top: 8px;
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 100;
}

.skip:focus {
    left: 8px;
}

nav.top {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 8px 12px 0;
    background: transparent;
    transition: padding .25s ease, transform .25s ease, opacity .25s ease;
}

nav.top.nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

nav.top.nav-hidden:focus-within {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

nav.top .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: fit-content;
    max-width: calc(100vw - 24px);
    height: 62px;
    margin: 0 auto;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(20, 27, 39, .92), rgba(10, 14, 22, .82));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 1.08rem;
    text-decoration: none;
}

.brand img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.links {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(4px, .6vw, 8px);
}

.links a {
    text-decoration: none;
    color: #a6b1c2;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.links a:not(.pill) {
    padding: 8px 7px;
    border-radius: 9px;
}

.links a:not(.pill):hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .07);
}

.links a.pill {
    color: #fff;
    background: linear-gradient(135deg, #6fa5ff, #2868e8);
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 5px 16px rgba(47, 125, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.links a.pill:hover {
    background: linear-gradient(135deg, #82b2ff, #3978f5);
    transform: translateY(-1px);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02rem;
    padding: 16px 26px;
    border-radius: 14px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.btn.primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(130, 175, 255, .4), 0 12px 40px -8px rgba(47, 125, 255, .75);
}

.btn.primary:hover {
    background: var(--accent-hi);
    transform: translateY(-2px);
}

.btn.ghost {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
}

.btn.ghost:hover {
    border-color: #2b3750;
    transform: translateY(-2px);
}

.hero {
    position: relative;
    padding: 84px 0 96px;
    overflow: hidden;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -260px;
    width: 1000px;
    height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(47,125,255,.28), transparent 70%);
    pointer-events: none;
}

.hero .wrap {
    position: relative;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .88rem;
}

.badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 10px var(--ok);
}

h1 {
    margin: 30px auto 0;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    max-width: 11em;
}

h1 em.serif {
    font-size: 1.08em;
}

.lead {
    margin: 28px auto 38px;
    max-width: 34em;
    color: var(--muted);
    font-size: 1.15rem;
}

.actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.meta {
    margin-top: 22px;
    color: var(--muted);
    font-size: .9rem;
}

.stage {
    margin: 64px auto 0;
    max-width: 760px;
}

.win {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(47,125,255,.08), 0 0 80px -20px rgba(47,125,255,.35);
    overflow: hidden;
}

.win-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
}

.win-bar .dots {
    display: flex;
    gap: 7px;
}

.win-bar .dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #232c3f;
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
}

.win-body {
    padding: 34px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 28px;
    align-items: center;
}

.win-body img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: block;
}

.win-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.win-sub {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 18px;
}

.bar {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar b {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    box-shadow: 0 0 16px rgba(47,125,255,.8);
    transform-origin: left;
}

.checks {
    list-style: none;
    margin-top: 22px;
    display: grid;
    gap: 9px;
    font-size: .95rem;
}

.checks li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checks li::before {
    content: "✓";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: .72rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
}

.js .bar b {
    transform: scaleX(0);
}

.js .checks li {
    opacity: .3;
    transition: opacity .45s ease;
}

.js .checks li::before {
    background: var(--surface-2);
    color: transparent;
    transition: background .4s ease, color .4s ease;
}

.js .checks li.on {
    opacity: 1;
}

.js .checks li.on::before {
    background: var(--accent-soft);
    color: var(--accent-hi);
}

.win-sub b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.win-sub .done {
    color: var(--ok);
}

section {
    padding: 100px 0;
}

.kicker {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 16px;
}

h2 {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem);
    font-weight: 700;
    max-width: 14em;
}

h2 em.serif {
    font-size: 1.08em;
}

.sub {
    margin-top: 18px;
    color: var(--muted);
    max-width: 36em;
    font-size: 1.05rem;
}

.center {
    text-align: center;
}

.center h2,
.center .sub {
    margin-left: auto;
    margin-right: auto;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 340px;
}

.card h3 {
    font-size: 1.45rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.card p {
    color: var(--muted);
    font-size: .98rem;
}

.card .vis {
    margin-top: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    font-size: .88rem;
    display: grid;
    gap: 10px;
}

.presentation h2,
.presentation h3 {
    font-family: "Instrument Sans", sans-serif;
    letter-spacing: -.045em;
}

.presentation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
}

.presentation-card {
    min-height: 0;
    gap: 14px;
}

.presentation-card.presentation-overview,
.presentation-card.presentation-conclusion {
    grid-column: 1 / -1;
}

.presentation-card.presentation-workspace {
    grid-column: span 2;
}

.presentation-card h3 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 1.4rem;
}

.presentation-card h3 span {
    color: var(--accent-hi);
    font-family: "Funnel Display", sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.presentation-card p,
.presentation-card li {
    color: var(--muted);
    font-size: .98rem;
}

.presentation-card p + p {
    margin-top: 8px;
}

.presentation-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin-top: 4px;
    padding-left: 20px;
}

.presentation-card li {
    padding-left: 3px;
}

.presentation-card li::marker {
    color: var(--accent-hi);
}

.presentation-conclusion {
    border-color: rgba(102, 163, 255, .3);
    background: linear-gradient(145deg, rgba(47, 125, 255, .16), rgba(255, 255, 255, .025)), rgba(13, 17, 24, .72);
}

.presentation-conclusion .presentation-tag {
    color: var(--accent-hi);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 880px) {
    .presentation-grid {
        grid-template-columns: 1fr;
    }
    .presentation-card.presentation-overview,
    .presentation-card.presentation-conclusion,
    .presentation-card.presentation-workspace {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .presentation-card {
        padding: 22px;
    }
    .presentation-card ul {
        grid-template-columns: 1fr;
    }
}

.file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.file span:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file small {
    color: var(--muted);
}

.tag {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-weight: 600;
    font-size: .75rem;
}

.vis .ok {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vis .ok::before {
    content: "✓";
    color: var(--ok);
    font-weight: 700;
}

.tile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tile img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.steps {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    counter-reset: s;
}

.steps li {
    counter-increment: s;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.steps li::before {
    content: counter(s);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-family: "Funnel Display", sans-serif;
    font-weight: 700;
    margin-bottom: 22px;
}

.steps strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.steps span {
    color: var(--muted);
    font-size: .98rem;
}

.trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 56px;
}

.trust > div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}

.trust > div:first-child {
    background: linear-gradient(160deg, rgba(47,125,255,.16), var(--surface) 60%);
    border-color: rgba(47,125,255,.4);
}

.trust h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.trust p {
    color: var(--muted);
    font-size: .98rem;
}

.hash {
    margin-top: 20px;
    padding: 26px 28px;
    border: 1px dashed #2a3654;
    border-radius: var(--radius);
    display: grid;
    gap: 10px;
}

.hash span {
    color: var(--muted);
    font-size: .94rem;
}

.hash code {
    display: block;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--accent-hi);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .84rem;
    overflow-x: auto;
    white-space: nowrap;
    user-select: all;
}

.hash code.inline {
    display: inline;
    padding: 2px 8px;
    white-space: normal;
}

.faq {
    max-width: 760px;
    margin: 52px auto 0;
}

details {
    border-top: 1px solid var(--line);
}

details:last-child {
    border-bottom: 1px solid var(--line);
}

summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    color: var(--accent-hi);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}

details[open] summary::after {
    transform: rotate(45deg);
}

details p {
    color: var(--muted);
    padding: 0 40px 24px 0;
}

.final {
    text-align: center;
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.final::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -320px;
    width: 900px;
    height: 600px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(47,125,255,.25), transparent 70%);
    pointer-events: none;
}

.final .wrap {
    position: relative;
}

.final h2 {
    margin: 0 auto 36px;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
}

footer {
    border-top: 1px solid var(--line);
    padding: 30px 0 44px;
    color: var(--muted);
    font-size: .9rem;
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.floating-action {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.floating-action:hover {
    transform: translateY(-3px);
    border-color: #35415a;
}

.floating-action svg {
    width: 22px;
    height: 22px;
    flex: none;
}

.discord-action {
    left: max(20px, env(safe-area-inset-left));
    background: #5865f2;
    border-color: #5865f2;
    color: #fff;
}

.discord-action:hover {
    background: #4752c4;
    border-color: #4752c4;
}

.top-action {
    right: max(20px, env(safe-area-inset-right));
    width: 50px;
    padding: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 880px) {
    nav.top .wrap {
        width: fit-content;
        max-width: calc(100vw - 24px);
        gap: 10px;
    }
    .links {
        min-width: 0;
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .links::-webkit-scrollbar {
        display: none;
    }
    .links a {
        flex: 0 0 auto;
    }
    .hero {
        padding-top: 56px;
    }
    .cards,
    .steps,
    .trust {
        grid-template-columns: 1fr;
    }
    .card {
        min-height: 0;
    }
    .win-body {
        grid-template-columns: 1fr;
        padding: 26px;
        gap: 20px;
    }
    .win-body img {
        width: 72px;
        height: 72px;
    }
    section {
        padding: 72px 0;
    }
}

@media (max-width: 420px) {
    nav.top {
        padding: 6px 12px 0;
    }
    nav.top .wrap {
        width: fit-content;
        max-width: calc(100vw - 24px);
        height: 54px;
        gap: 8px;
        padding: 0 10px;
        border-radius: 14px;
    }
    .links {
        gap: 5px;
    }
    .brand {
        gap: 7px;
        font-size: .92rem;
    }
    .brand img {
        width: 27px;
        height: 27px;
    }
    .links {
        gap: 5px;
    }
    .links a {
        font-size: .82rem;
    }
    .links a:not(.pill) {
        padding: 7px 4px;
    }
    .links a.pill {
        padding: 7px 8px;
        border-radius: 9px;
        font-size: .78rem;
    }
    .floating-action {
        bottom: max(14px, env(safe-area-inset-bottom));
        min-height: 46px;
        padding: 0 14px;
        font-size: .84rem;
    }
    .discord-action {
        left: max(14px, env(safe-area-inset-left));
    }
    .top-action {
        right: max(14px, env(safe-area-inset-right));
        width: 46px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-action {
        transition: none;
    }
}

.win,
.card,
.card .vis,
.steps li,
.trust > div,
.hash,
details {
    border-color: rgba(255, 255, 255, .12);
    background-color: rgba(13, 17, 24, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .16);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.win {
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)), rgba(13, 17, 24, .78);
}

.card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)), rgba(13, 17, 24, .68);
}

.card .vis {
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), rgba(7, 9, 13, .52);
}

.steps li {
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)), rgba(13, 17, 24, .66);
}

.trust > div {
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)), rgba(13, 17, 24, .66);
}

.trust > div:first-child {
    background: linear-gradient(145deg, rgba(47, 125, 255, .2), rgba(255, 255, 255, .025) 72%), rgba(13, 17, 24, .72);
}

.hash {
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), rgba(13, 17, 24, .5);
}

details {
    margin: 0 0 10px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)), rgba(13, 17, 24, .58);
}

details:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ticker .chip {
    background: rgba(13, 17, 24, .52);
    border-color: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.card,
.steps li,
.trust > div {
    transition: transform .3s ease, border-color .3s ease, opacity .8s cubic-bezier(.2,.7,.2,1);
}

.card:hover,
.steps li:hover,
.trust > div:hover {
    transform: translateY(-5px);
    border-color: #2d3d5e;
}

nav.top.scrolled .wrap {
    border-color: rgba(255, 255, 255, .2);
    background: linear-gradient(120deg, rgba(22, 30, 44, .96), rgba(10, 14, 22, .92));
    box-shadow: 0 16px 46px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 22px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.track {
    display: flex;
    width: max-content;
    gap: 14px;
}

.track:hover {
    animation-play-state: paused;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .92rem;
    white-space: nowrap;
}

.chip::before {
    content: "✓";
    color: var(--accent-hi);
    font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
    .hero .badge,
    .hero h1,
    .hero .lead,
    .hero .actions,
    .hero .meta,
    .hero .stage {
        animation: rise .9s cubic-bezier(.2,.7,.2,1) both;
    }
    .hero .badge {
        animation-delay: .05s;
    }
    .hero h1 {
        animation-delay: .15s;
    }
    .hero .lead {
        animation-delay: .28s;
    }
    .hero .actions {
        animation-delay: .4s;
    }
    .hero .meta {
        animation-delay: .5s;
    }
    .hero .stage {
        animation-delay: .65s;
    }
    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(26px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    .hero::before {
        animation: breathe 7s ease-in-out infinite alternate;
    }
    @keyframes breathe {
        from {
            opacity: .7;
            transform: translateX(-50%) scale(.95);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) scale(1.08);
        }
    }
    .badge i,
    .live i {
        animation: blink 2s ease-in-out infinite;
    }
    @keyframes blink {
        50% {
            opacity: .35;
        }
    }
    .track {
        animation: scroll 38s linear infinite;
    }
    @keyframes scroll {
        to {
            transform: translateX(calc(-50% - 7px));
        }
    }
    .js .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
        transition-delay: var(--d, 0s);
    }
    .js .reveal.in {
        opacity: 1;
        transform: none;
    }
    .js .reveal.in:hover {
        transition-delay: 0s;
        transition-duration: .3s;
    }
    .js .vis .ok {
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .js .card.in .vis .ok {
        opacity: 1;
        transform: none;
    }
    .js .card.in .vis .ok:nth-child(1) {
        transition-delay: .5s;
    }
    .js .card.in .vis .ok:nth-child(2) {
        transition-delay: .9s;
    }
    .js .card.in .vis .ok:nth-child(3) {
        transition-delay: 1.3s;
    }
    details[open] p {
        animation: faq .4s ease both;
    }
    @keyframes faq {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    .final .btn.primary {
        animation: pulse 2.8s ease-in-out infinite;
    }
    @keyframes pulse {
        0%,
        100% {
            box-shadow: 0 0 0 1px rgba(130,175,255,.4), 0 12px 40px -8px rgba(47,125,255,.6);
        }
        50% {
            box-shadow: 0 0 0 1px rgba(130,175,255,.6), 0 12px 70px 0 rgba(47,125,255,.95);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.top,
    nav.top .wrap {
        scroll-behavior: auto;
        transition: none;
    }
}

/* ===== ANIMATIONS SUPPLÉMENTAIRES ===== */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3;translate:calc(var(--px,0)*34px) calc(var(--py,0)*34px);transition:translate .8s cubic-bezier(.2,.7,.2,1)}
.bg span:nth-child(1){width:520px;height:520px;background:#2a4fd0;top:-160px;right:-140px}
.bg span:nth-child(2){width:420px;height:420px;background:#2f7dff;top:46%;left:-170px;opacity:.2}
.bg span:nth-child(3){width:380px;height:380px;background:#8b5cf6;bottom:-140px;right:12%;opacity:.12}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:linear-gradient(90deg,var(--accent),var(--accent-hi),var(--ok));transform:scaleX(0);transform-origin:0 50%}

.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.btn:hover::after{transform:translateX(130%);transition:transform .75s}
.btn:active{transform:scale(.97)}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(47,125,255,.18),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 50px -22px rgba(47,125,255,.5)}
.steps li:hover::before{transform:scale(1.12) rotate(-6deg)}
.steps li::before{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
details{transition:border-color .3s,transform .3s}
details:hover{border-color:rgba(102,163,255,.45);transform:translateX(4px)}
footer a,.links a:not(.pill){transition:color .2s,background .2s}

.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .16em 0;margin:-.08em -.06em -.16em 0}

@media (prefers-reduced-motion:no-preference){
  .bg span:nth-child(1){animation:d1 19s ease-in-out infinite alternate}
  .bg span:nth-child(2){animation:d2 23s ease-in-out infinite alternate}
  .bg span:nth-child(3){animation:d3 27s ease-in-out infinite alternate}
  @keyframes d1{to{transform:translate(-150px,190px) scale(1.25)}}
  @keyframes d2{to{transform:translate(210px,-130px) scale(1.15)}}
  @keyframes d3{to{transform:translate(-230px,-90px) scale(1.3)}}

  .hero h1{animation:none}
  .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%}
  .go .w>span{animation:wordUp .95s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i)*.07s) both}
  @keyframes wordUp{to{transform:none}}
  em.serif{animation:tint 4s ease-in-out infinite}
  @keyframes tint{50%{color:#fff;text-shadow:0 0 28px rgba(102,163,255,.6)}}

  .win-body img{animation:floaty 5s ease-in-out infinite,halo 3.2s ease-in-out infinite}
  @keyframes floaty{50%{transform:translateY(-10px) rotate(2deg)}}
  @keyframes halo{50%{box-shadow:0 0 38px rgba(47,125,255,.55)}}
  .brand img{transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
  .brand:hover img{transform:rotate(360deg)}
  .hero .btn.primary{animation:glowBtn 2.8s ease-in-out infinite}
  @keyframes glowBtn{50%{box-shadow:0 0 0 1px rgba(130,175,255,.6),0 12px 60px 0 rgba(47,125,255,.95)}}
}
/* ===== ANIMATIONS V2 ===== */
:root{interpolate-size:allow-keywords}
.links a.active:not(.pill){color:var(--ink);background:rgba(255,255,255,.08)}
.bar b{position:relative;overflow:hidden}
.bar b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%)}
.btn{transition:transform .15s ease,background .15s ease,border-color .15s ease,translate .25s cubic-bezier(.2,.8,.2,1);translate:var(--tx,0) var(--ty,0)}

@media (prefers-reduced-motion:no-preference){
  /* Titre : mots qui montent en se précisant */
  .w>span{filter:blur(10px);opacity:0}
  @keyframes wordUp{to{transform:none;filter:none;opacity:1}}

  /* Apparition au scroll : flou, échelle, ressort doux */
  .js .reveal{opacity:0;transform:translateY(36px) scale(.97);filter:blur(8px);
    transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease,border-color .3s ease;
    transition-delay:var(--d,0s)}
  .js .reveal.in{opacity:1;transform:none;filter:none}
  .js .presentation .card.reveal:nth-child(odd){--d:.05s}
  .js .presentation .card.reveal:nth-child(even){--d:.18s}

  /* Survol : relief 3D guidé par la souris */
  .js .card.reveal.in:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition-duration:.25s}
  .js .steps li.reveal.in:hover,.js .trust>div.reveal.in:hover{transform:translateY(-6px);transition-duration:.3s}

  /* Fenêtre d'installation : se redresse en entrant dans l'écran */
  .win{transform-origin:50% 0;transform:perspective(1200px) rotateX(calc((1 - var(--sp,1))*14deg)) scale(calc(.93 + var(--sp,1)*.07));will-change:transform}
  .bar b::after{animation:sheen 1.6s ease-in-out infinite}
  @keyframes sheen{to{transform:translateX(100%)}}
  .js .checks li.on::before{animation:pop .55s cubic-bezier(.2,1.7,.4,1)}
  @keyframes pop{from{transform:scale(.3)}to{transform:none}}
  .win.finish{animation:finish 1.4s ease-out}
  @keyframes finish{30%{box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 0 2px rgba(61,220,151,.55),0 0 90px -10px rgba(61,220,151,.55)}}

  /* FAQ : ouverture fluide */
  details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
  details[open]::details-content{block-size:auto}
  details[open] p{animation:none}

  /* Bouton retour haut : apparaît après le hero */
  .js .top-action{opacity:0;translate:0 24px;pointer-events:none;transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .35s ease,translate .45s cubic-bezier(.2,1.4,.4,1)}
  .js .top-action.show{opacity:1;translate:0 0;pointer-events:auto}
  .discord-action{animation:rise .9s cubic-bezier(.2,.7,.2,1) 1.2s both}
}

/* ===== Points de fenêtre + fin d'installation ===== */
.win-bar .dots i:nth-child(1){background:#ff5f57}
.win-bar .dots i:nth-child(2){background:#febc2e}
.win-bar .dots i:nth-child(3){background:#28c840}
.win{position:relative}
.win.finish .bar b{background:linear-gradient(90deg,#2fbf85,var(--ok));box-shadow:0 0 18px rgba(61,220,151,.8)}
@media (prefers-reduced-motion:no-preference){
  .win.finish .win-sub #winlabel{display:inline-block;animation:pop .6s cubic-bezier(.2,1.7,.4,1)}
  .win.finish .checks li.on{animation:pop .5s cubic-bezier(.2,1.7,.4,1) both}
  .win.finish .checks li:nth-child(2){animation-delay:.12s}
  .win.finish .checks li:nth-child(3){animation-delay:.24s}
}

/* ===== Validation façon Apple Pay ===== */
.pay{position:absolute;transform:translate(-50%,-50%);border-radius:50%;z-index:3;pointer-events:none;transition:opacity .4s ease}
.pay.out{opacity:0}
.pay svg{display:block;width:100%;height:100%;overflow:visible}
.pay .fill{fill:var(--accent)}
.pay .ring{fill:none;stroke:var(--accent-hi);stroke-width:3}
.pay .tick{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .pay{animation:paypop .4s cubic-bezier(.3,1.6,.5,1) 1.15s, payglow 1.6s ease-out 1.1s}
  .pay .ring{stroke-dasharray:290;stroke-dashoffset:290;transform-origin:50% 50%;transform:rotate(-90deg);animation:paydraw .5s cubic-bezier(.5,0,.2,1) forwards}
  .pay .fill{transform-origin:50% 50%;transform:scale(0);animation:payfill .4s cubic-bezier(.2,1.4,.4,1) .45s forwards}
  .pay .tick{stroke-dasharray:70;stroke-dashoffset:70;animation:paytick .38s cubic-bezier(.65,0,.35,1) .8s forwards}
  @keyframes paydraw{to{stroke-dashoffset:0}}
  @keyframes payfill{to{transform:scale(1)}}
  @keyframes paytick{to{stroke-dashoffset:0}}
  @keyframes paypop{50%{transform:translate(-50%,-50%) scale(1.1)}}
  @keyframes payglow{40%{box-shadow:0 0 60px 8px rgba(47,125,255,.7)}}
}

/* Section Présentation : pas de halo ni de lueur qui suit la souris */
.presentation .card::before{display:none}
.presentation .card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.16)}