:root {
    --na-public-bg: #060812;
    --na-public-bg-soft: #0b1020;
    --na-public-surface: rgba(17, 23, 43, .78);
    --na-public-surface-solid: #11172b;
    --na-public-border: rgba(164, 180, 255, .16);
    --na-public-text: #f6f8ff;
    --na-public-muted: #aeb7cf;
    --na-public-purple: #8c72ff;
    --na-public-blue: #4c8dff;
    --na-public-cyan: #43d9ef;
    --na-public-pink: #e76dff;
    --na-public-gold: #ffc86b;
    --na-public-radius-lg: 32px;
    --na-public-radius-md: 22px;
    --na-public-shadow: 0 30px 100px rgba(0, 0, 0, .38);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--na-public-bg);
}

.na-public-shell,
.na-public-shell * {
    box-sizing: border-box;
}

.na-public-shell {
    min-height: 100vh;
    overflow: hidden;
    color: var(--na-public-text);
    background:
        radial-gradient(circle at 15% 10%, rgba(76, 141, 255, .14), transparent 26rem),
        radial-gradient(circle at 88% 18%, rgba(140, 114, 255, .16), transparent 30rem),
        linear-gradient(180deg, #060812 0%, #090c17 48%, #060812 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.na-public-shell a {
    color: inherit;
    text-decoration: none;
}

.na-public-nav {
    position: relative;
    z-index: 30;
    width: min(1480px, calc(100% - 40px));
    min-height: 82px;
    margin: 18px auto 0;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    border: 1px solid var(--na-public-border);
    border-radius: 24px;
    background: rgba(7, 10, 21, .76);
    backdrop-filter: blur(20px);
    box-shadow: 0 14px 50px rgba(0, 0, 0, .24);
}

.na-public-brand {
    display: inline-flex;
    align-items: center;
}

.na-public-brand img {
    width: 172px;
    height: auto;
    object-fit: contain;
}

.na-public-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    color: var(--na-public-muted);
    font-size: .89rem;
    font-weight: 650;
}

.na-public-links a {
    position: relative;
    padding: 12px 0;
    transition: color .25s ease;
}

.na-public-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--na-public-blue), var(--na-public-cyan));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.na-public-links a:hover,
.na-public-links a.is-active {
    color: var(--na-public-text);
}

.na-public-links a:hover::after,
.na-public-links a.is-active::after {
    transform: scaleX(1);
}

.na-public-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.na-public-login {
    padding: 11px 14px;
    color: var(--na-public-muted) !important;
    font-weight: 700;
}

.na-public-nav-cta {
    padding: 12px 18px;
    border: 1px solid rgba(114, 183, 255, .28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(76, 141, 255, .22), rgba(140, 114, 255, .24));
    font-size: .88rem;
    font-weight: 800;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.na-public-section {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 118px 0;
}

.na-public-section-compact {
    padding-top: 84px;
    padding-bottom: 84px;
}

.na-public-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #9ebdff;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.na-public-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--na-public-blue), var(--na-public-cyan));
}

.na-public-shell h1,
.na-public-shell h2,
.na-public-shell h3,
.na-public-shell p {
    margin-top: 0;
}

.na-public-shell h1 {
    max-width: 920px;
    margin-bottom: 26px;
    font-size: clamp(3rem, 6vw, 6.9rem);
    line-height: .94;
    letter-spacing: -.065em;
}

.na-public-shell h2 {
    margin-bottom: 22px;
    font-size: clamp(2.15rem, 4.25vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.na-public-shell h3 {
    margin-bottom: 13px;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.na-public-shell p {
    color: var(--na-public-muted);
    line-height: 1.78;
}

.na-public-lead {
    max-width: 760px;
    margin-bottom: 34px;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.na-public-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.na-public-actions-center {
    justify-content: center;
}

.na-public-button {
    min-height: 54px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: .94rem;
    font-weight: 850;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.na-public-button:hover {
    transform: translateY(-2px);
}

.na-public-button-primary {
    background: linear-gradient(135deg, #397eff, #7965ff 55%, #9d65ff);
    box-shadow: 0 18px 42px rgba(88, 103, 255, .28), inset 0 1px rgba(255, 255, 255, .2);
}

.na-public-button-secondary {
    border-color: var(--na-public-border);
    background: rgba(255, 255, 255, .035);
}

.na-public-text-link {
    display: inline-flex;
    margin-top: 12px;
    color: #c7d8ff !important;
    font-weight: 800;
}

.na-home-hero {
    min-height: calc(100vh - 100px);
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
    align-items: center;
    gap: 50px;
    padding-top: 70px;
}

.na-hero-copy {
    position: relative;
    z-index: 3;
}

.na-hero-support {
    max-width: 650px;
    margin-top: 26px;
    font-size: .92rem;
}

.na-arena-scene {
    position: relative;
    min-height: 640px;
    isolation: isolate;
}

.na-arena-glow {
    position: absolute;
    inset: 14% 8% 8%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80, 120, 255, .29), rgba(117, 71, 255, .11) 39%, transparent 70%);
    filter: blur(8px);
}

.na-arena-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(125, 155, 255, .2);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(65deg);
}

.na-arena-ring::before,
.na-arena-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border-top: 2px solid rgba(67, 217, 239, .6);
    animation: na-spin 10s linear infinite;
}

.na-arena-ring-a {
    width: 570px;
    height: 390px;
}

.na-arena-ring-b {
    width: 420px;
    height: 280px;
    opacity: .7;
}

.na-arena-ring-b::before,
.na-arena-ring-b::after {
    animation-direction: reverse;
    animation-duration: 14s;
}

.na-arena-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230px;
    height: 230px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(136, 166, 255, .33);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(99, 133, 255, .3), rgba(16, 22, 43, .95) 66%);
    box-shadow: 0 0 80px rgba(85, 109, 255, .3), inset 0 0 50px rgba(94, 128, 255, .13);
    transform: translate(-50%, -50%);
}

.na-arena-core span,
.na-arena-core small {
    color: #9cadd4;
    font-size: .7rem;
    letter-spacing: .16em;
}

.na-arena-core strong {
    margin: 10px 0;
    font-size: 1.55rem;
    letter-spacing: -.03em;
}

.na-arena-card {
    position: absolute;
    width: 220px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--na-public-border);
    border-radius: 18px;
    background: rgba(12, 17, 34, .82);
    backdrop-filter: blur(17px);
    box-shadow: var(--na-public-shadow);
    animation: na-float 6s ease-in-out infinite;
}

.na-arena-card small,
.na-arena-card span {
    color: #9ca8c3;
    font-size: .75rem;
}

.na-arena-card strong {
    font-size: 1rem;
}

.na-arena-card-one { left: 3%; top: 17%; }
.na-arena-card-two { right: 0; top: 25%; animation-delay: -2s; }
.na-arena-card-three { left: 13%; bottom: 12%; animation-delay: -4s; }

.na-live-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #45ef9a;
    box-shadow: 0 0 14px #45ef9a;
}

.na-arena-avatar,
.na-map-person {
    position: absolute;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: linear-gradient(135deg, #304a90, #6b43bc);
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .36);
}

.na-avatar-a { right: 16%; bottom: 18%; }
.na-avatar-b { right: 9%; top: 50%; background: linear-gradient(135deg, #125b72, #268fb0); }
.na-avatar-c { left: 8%; top: 47%; background: linear-gradient(135deg, #70438d, #bd5fa7); }
.na-avatar-d { left: 39%; top: 7%; background: linear-gradient(135deg, #875b25, #d19335); }

.na-trophy-signal {
    position: absolute;
    right: 16%;
    bottom: 3%;
    width: 110px;
    opacity: .44;
    filter: drop-shadow(0 0 22px rgba(255, 200, 107, .48));
}

.na-trophy-signal svg,
.na-reward-trophy svg,
.na-reward-hero-object svg {
    width: 100%;
    fill: none;
    stroke: var(--na-public-gold);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.na-home-definition {
    text-align: center;
}

.na-home-definition h2,
.na-home-definition > p {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.na-home-definition > p {
    font-size: 1.08rem;
}

.na-ecosystem-line {
    margin-top: 52px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    border: 1px solid var(--na-public-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .025);
    color: #ced7ee;
    font-weight: 750;
}

.na-ecosystem-line i {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(76, 141, 255, .25), var(--na-public-cyan));
}

.na-chaos-section,
.na-reward-preview,
.na-topic-split,
.na-reward-model {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 74px;
}

.na-chaos-copy p,
.na-reward-preview-copy p,
.na-topic-split p {
    max-width: 650px;
}

.na-chaos-visual {
    position: relative;
    min-height: 520px;
    border: 1px solid var(--na-public-border);
    border-radius: var(--na-public-radius-lg);
    background:
        linear-gradient(rgba(100, 130, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 130, 255, .045) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(84, 109, 255, .2), transparent 46%),
        rgba(9, 13, 27, .65);
    background-size: 34px 34px, 34px 34px, auto, auto;
    overflow: hidden;
}

.na-chaos-chip {
    position: absolute;
    padding: 12px 15px;
    border: 1px solid rgba(166, 181, 255, .15);
    border-radius: 12px;
    background: rgba(19, 25, 47, .86);
    color: #afb9d1;
    font-size: .78rem;
    animation: na-drift 7s ease-in-out infinite;
}

.chip-one { left: 7%; top: 13%; transform: rotate(-7deg); }
.chip-two { right: 8%; top: 15%; transform: rotate(5deg); animation-delay: -1s; }
.chip-three { left: 9%; bottom: 15%; transform: rotate(4deg); animation-delay: -3s; }
.chip-four { right: 7%; bottom: 18%; transform: rotate(-5deg); animation-delay: -5s; }
.chip-five { right: 17%; top: 47%; animation-delay: -2s; }

.na-order-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    min-height: 150px;
    padding: 26px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid rgba(90, 162, 255, .4);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(56, 93, 184, .34), rgba(22, 25, 54, .92));
    box-shadow: 0 0 70px rgba(83, 107, 255, .23);
    transform: translate(-50%, -50%);
}

.na-order-core small {
    color: #8fb9ff;
    letter-spacing: .14em;
}

.na-order-core strong {
    margin-top: 10px;
    font-size: 1.18rem;
}

.na-public-section-heading {
    max-width: 840px;
    margin-bottom: 54px;
}

.na-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.na-portal-card {
    position: relative;
    min-height: 360px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    border: 1px solid var(--na-public-border);
    border-radius: 28px;
    background: var(--na-public-surface);
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease;
}

.na-portal-card::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -75px;
    top: -90px;
    border-radius: 50%;
    filter: blur(15px);
    opacity: .32;
    transition: transform .35s ease;
}

.na-portal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(157, 181, 255, .35);
}

.na-portal-card:hover::before {
    transform: scale(1.18);
}

.na-portal-community::before { background: var(--na-public-blue); }
.na-portal-competition::before { background: var(--na-public-purple); }
.na-portal-creators::before { background: var(--na-public-cyan); }
.na-portal-reward::before { background: var(--na-public-gold); }

.na-portal-index {
    position: absolute;
    right: 30px;
    top: 24px;
    color: rgba(255, 255, 255, .16);
    font-size: 3.2rem;
    font-weight: 900;
}

.na-portal-card small {
    margin-bottom: 12px;
    color: #9eb8ee;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.na-portal-card p {
    max-width: 520px;
}

.na-portal-card > strong {
    margin-top: auto;
    padding-top: 18px;
    color: #d9e5ff;
}

.na-reward-preview {
    width: min(1420px, calc(100% - 48px));
    padding-left: 58px;
    padding-right: 58px;
    border: 1px solid rgba(255, 200, 107, .18);
    border-radius: 42px;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 193, 91, .1), transparent 30%),
        linear-gradient(135deg, rgba(28, 22, 28, .96), rgba(11, 14, 29, .97));
}

.na-reward-preview-visual {
    min-height: 560px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.na-reward-result {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--na-public-border);
    border-radius: 20px;
    background: rgba(14, 18, 35, .82);
}

.na-reward-result small {
    color: #72f0a8;
    letter-spacing: .12em;
}

.na-reward-result strong {
    font-size: 1.35rem;
}

.na-reward-result span {
    color: var(--na-public-muted);
    font-size: .8rem;
}

.na-reward-transform {
    color: var(--na-public-gold);
    font-size: 2rem;
}

.na-reward-trophy {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.na-reward-trophy svg {
    width: 170px;
    filter: drop-shadow(0 0 25px rgba(255, 200, 107, .3));
}

.na-reward-trophy span {
    color: #e8c786;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    letter-spacing: .12em;
}

.na-reward-preview-copy blockquote {
    margin: 28px 0 34px;
    padding: 0 0 0 24px;
    border-left: 2px solid var(--na-public-gold);
    color: #f2e1bd;
    font-size: 1.15rem;
    line-height: 1.7;
}

.na-journey-section {
    text-align: center;
}

.na-journey-section h2 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.na-journey-line {
    position: relative;
    margin-top: 58px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.na-journey-line::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 29px;
    height: 1px;
    background: linear-gradient(90deg, var(--na-public-blue), var(--na-public-cyan), var(--na-public-gold));
    opacity: .45;
}

.na-journey-line article {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.na-journey-line article > span {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border: 1px solid rgba(126, 162, 255, .32);
    border-radius: 50%;
    background: #0e1428;
    color: #9dbaff;
    font-size: .75rem;
    font-weight: 900;
}

.na-journey-line strong {
    margin-bottom: 7px;
}

.na-journey-line small {
    max-width: 170px;
    color: var(--na-public-muted);
    line-height: 1.5;
}

.na-public-final-cta {
    text-align: center;
}

.na-public-final-cta h2,
.na-public-final-cta > p {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.na-public-final-cta > p {
    margin-bottom: 32px;
    font-size: 1.08rem;
}

.na-public-footer {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 38px 0 54px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid var(--na-public-border);
}

.na-public-footer-brand {
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.na-public-footer p {
    margin: 9px 0 0;
    font-size: .84rem;
}

.na-public-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
    color: var(--na-public-muted);
    font-size: .82rem;
    font-weight: 700;
}

/* Topic pages */
.na-topic-hero {
    position: relative;
    isolation: isolate;
    min-height: 760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, .82fr);
    align-items: center;
    gap: 70px;
    padding-top: 80px;
}

.na-topic-hero h1 {
    font-size: clamp(3.2rem, 5.8vw, 6.6rem);
}

.na-topic-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 600px;
    height: 600px;
    right: -170px;
    top: 80px;
    border-radius: 50%;
    background: rgba(77, 121, 255, .11);
    filter: blur(70px);
}

.na-topic-intro {
    text-align: center;
}

.na-topic-intro h2,
.na-topic-intro p {
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
}

.na-topic-intro p {
    font-size: 1.08rem;
}

.na-topic-orbit {
    position: relative;
    min-height: 520px;
}

.orbit-core,
.orbit-node {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--na-public-border);
    border-radius: 50%;
    background: rgba(14, 20, 39, .86);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.orbit-core {
    left: 50%; top: 50%;
    width: 170px; height: 170px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 30%, rgba(86, 137, 255, .35), #10162b 70%);
    font-size: 1.35rem;
    font-weight: 900;
}

.orbit-node {
    width: 104px; height: 104px;
    color: #c9d6f4;
    font-size: .78rem;
    font-weight: 800;
    animation: na-float 6s ease-in-out infinite;
}

.orbit-community { left: 7%; top: 18%; }
.orbit-club { right: 6%; top: 19%; animation-delay: -1s; }
.orbit-tournament { left: 4%; bottom: 12%; animation-delay: -2s; }
.orbit-stream { right: 3%; bottom: 10%; animation-delay: -3s; }
.orbit-reward { left: calc(50% - 52px); bottom: 0; animation-delay: -4s; }

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

.na-capability-grid article,
.na-process-track article,
.na-creator-loop article,
.na-reward-process article {
    padding: 30px;
    border: 1px solid var(--na-public-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, .025);
}

.na-capability-grid article > span,
.na-process-track article > span,
.na-creator-loop article > span,
.na-reward-process article > span {
    display: inline-block;
    margin-bottom: 34px;
    color: #8fb0f7;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.na-role-stack,
.na-widget-stack {
    display: grid;
    gap: 11px;
}

.na-role-stack article,
.na-widget-stack > div {
    padding: 18px 21px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--na-public-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, .03);
}

.na-role-stack span,
.na-widget-stack small {
    color: var(--na-public-muted);
}

.na-next-topics > h2 {
    max-width: 700px;
}

.na-next-topic-grid {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.na-next-topic-grid a {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--na-public-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .026);
}

.na-next-topic-grid span {
    color: var(--na-public-muted);
}

.na-community-map {
    position: relative;
    min-height: 550px;
}

.na-map-community {
    position: absolute;
    padding: 19px 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--na-public-border);
    border-radius: 18px;
    background: rgba(13, 18, 36, .9);
    box-shadow: var(--na-public-shadow);
}

.na-map-community span {
    color: var(--na-public-muted);
    font-size: .76rem;
}

.map-main {
    left: 50%; top: 50%;
    min-width: 230px;
    transform: translate(-50%, -50%);
    border-color: rgba(89, 158, 255, .36);
}

.map-club-a { left: 2%; top: 13%; }
.map-club-b { right: 2%; top: 18%; }
.map-club-c { right: 10%; bottom: 8%; }
.map-person-a { left: 13%; bottom: 16%; }
.map-person-b { left: 48%; top: 5%; }
.map-person-c { right: 3%; top: 53%; }

.na-story-steps {
    display: grid;
    gap: 2px;
}

.na-story-steps article {
    padding: 30px 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 25px;
    border-bottom: 1px solid var(--na-public-border);
}

.na-story-steps article > span {
    color: #759df2;
    font-size: .78rem;
    font-weight: 900;
}

.na-story-steps p {
    margin-bottom: 0;
}

.na-club-card-demo {
    position: relative;
    min-height: 420px;
    padding: 190px 28px 28px;
    border: 1px solid var(--na-public-border);
    border-radius: 28px;
    background: #101629;
    overflow: hidden;
}

.na-club-banner {
    position: absolute;
    inset: 0 0 auto;
    height: 175px;
    background:
        linear-gradient(135deg, rgba(32, 87, 197, .88), rgba(100, 52, 169, .8)),
        linear-gradient(45deg, transparent 45%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.09) 54%, transparent 55%);
    background-size: auto, 28px 28px;
}

.na-club-shield {
    position: absolute;
    left: 28px;
    top: 120px;
    width: 92px;
    height: 104px;
    display: grid;
    place-items: center;
    border: 5px solid #101629;
    border-radius: 28px 28px 38px 38px;
    background: linear-gradient(145deg, #3c74ef, #7f56cf);
    font-size: 1.4rem;
    font-weight: 900;
}

.na-club-card-demo small {
    color: #8ba9ec;
    letter-spacing: .1em;
}

.na-club-card-demo > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.na-club-card-demo > div:last-child span {
    padding: 8px 11px;
    border-radius: 99px;
    background: rgba(255,255,255,.06);
    color: var(--na-public-muted);
    font-size: .76rem;
}

.na-benefit-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid var(--na-public-border);
    border-radius: 24px;
    background: var(--na-public-border);
    overflow: hidden;
}

.na-benefit-band article {
    min-height: 190px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0b1020;
}

.na-benefit-band span {
    color: var(--na-public-muted);
    line-height: 1.6;
}

.na-competition-board {
    padding: 30px;
    border: 1px solid rgba(101, 139, 255, .25);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(26, 35, 72, .86), rgba(10, 14, 28, .95));
    box-shadow: var(--na-public-shadow);
}

.na-board-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8ca8e8;
    font-size: .75rem;
    letter-spacing: .12em;
}

.na-board-match {
    margin: 45px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.na-board-match span {
    font-size: 1rem;
    font-weight: 850;
}

.na-board-match strong {
    font-size: 3.3rem;
    letter-spacing: -.08em;
}

.na-board-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.na-board-progress i {
    height: 5px;
    border-radius: 99px;
    background: #3d73e4;
}

.na-board-progress i:last-child {
    background: rgba(255,255,255,.12);
}

.na-board-meta {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    color: var(--na-public-muted);
    font-size: .76rem;
}

.na-process-track,
.na-reward-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.na-message-chaos {
    position: relative;
    min-height: 380px;
}

.na-message-chaos span {
    position: absolute;
    padding: 13px 16px;
    border: 1px solid var(--na-public-border);
    border-radius: 14px;
    background: rgba(17, 23, 43, .9);
    color: var(--na-public-muted);
}

.na-message-chaos span:nth-child(1) { left: 4%; top: 8%; transform: rotate(-5deg); }
.na-message-chaos span:nth-child(2) { right: 3%; top: 19%; transform: rotate(5deg); }
.na-message-chaos span:nth-child(3) { left: 16%; top: 45%; transform: rotate(3deg); }
.na-message-chaos span:nth-child(4) { right: 12%; bottom: 17%; transform: rotate(-4deg); }
.na-message-chaos span:nth-child(5) { left: 3%; bottom: 3%; transform: rotate(5deg); }

.na-stream-stage {
    padding: 18px;
    border: 1px solid var(--na-public-border);
    border-radius: 30px;
    background: #0b1020;
    box-shadow: var(--na-public-shadow);
}

.na-stream-video {
    min-height: 330px;
    padding: 22px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(5,8,17,.08), rgba(5,8,17,.8)),
        radial-gradient(circle at 50% 40%, rgba(82, 117, 255, .42), transparent 33%),
        linear-gradient(135deg, #1b274d, #28183f);
}

.na-stream-video strong {
    font-size: .78rem;
    letter-spacing: .12em;
}

.na-stream-video small {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 6px;
    background: #d94c64;
    font-size: .64rem;
    font-weight: 900;
}

.na-stream-score {
    margin: -46px 22px 0;
    padding: 19px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    text-align: center;
    border: 1px solid var(--na-public-border);
    border-radius: 17px;
    background: rgba(8, 12, 25, .93);
}

.na-stream-score strong {
    font-size: 1.6rem;
}

.na-stream-creator {
    padding: 22px 10px 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.na-stream-creator i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #3177e8, #8350cf);
    font-style: normal;
    font-weight: 900;
}

.na-stream-creator div {
    display: flex;
    flex-direction: column;
}

.na-stream-creator span {
    color: var(--na-public-muted);
    font-size: .74rem;
}

.na-stream-creator b {
    padding: 8px 12px;
    border-radius: 9px;
    background: rgba(76, 141, 255, .17);
    color: #a9c6ff;
    font-size: .72rem;
}

.na-creator-loop {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.na-widget-stack > div {
    flex-direction: column;
}

.na-widget-stack small {
    letter-spacing: .12em;
}

.na-reward-hero-object {
    position: relative;
    min-height: 580px;
    display: grid;
    justify-items: center;
    align-content: center;
}

.na-reward-halo {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 99, .2), transparent 66%);
    filter: blur(10px);
}

.na-reward-hero-object svg {
    position: relative;
    width: 260px;
    filter: drop-shadow(0 20px 45px rgba(255, 200, 107, .22));
}

.na-reward-hero-object > div:last-child {
    position: relative;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.na-reward-hero-object span,
.na-reward-hero-object small {
    color: #c1ad86;
}

.na-reward-hero-object small {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .14em;
}

.na-serial-card {
    padding: 34px;
    border: 1px solid rgba(255, 200, 107, .22);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(44, 34, 30, .62), rgba(13, 17, 31, .9));
}

.na-serial-card > small {
    color: #d5b878;
    letter-spacing: .13em;
}

.na-serial-card > strong {
    display: block;
    margin: 15px 0 30px;
    color: #f5d99e;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.8rem;
}

.na-serial-card dl {
    margin: 0;
}

.na-serial-card dl div {
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.na-serial-card dt {
    color: var(--na-public-muted);
}

.na-serial-card dd {
    margin: 0;
    font-weight: 750;
}

.na-reward-model {
    align-items: start;
}

.na-reward-model-grid {
    display: grid;
    gap: 14px;
}

.na-reward-model-grid article {
    padding: 28px;
    border: 1px solid var(--na-public-border);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
}

.na-reward-manifesto {
    text-align: center;
}

.na-reward-manifesto p,
.na-reward-manifesto strong {
    display: block;
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 5.2rem);
    line-height: 1.1;
    letter-spacing: -.05em;
}

.na-reward-manifesto p {
    color: #7d88a5;
}

.na-reward-manifesto strong {
    margin-top: 10px;
    color: #f2d49a;
}

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

@keyframes na-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes na-drift {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -10px; }
}

@media (max-width: 1180px) {
    .na-public-nav {
        grid-template-columns: auto 1fr;
    }

    .na-public-links {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 4px;
    }

    .na-public-nav-actions {
        justify-content: flex-end;
    }

    .na-home-hero,
    .na-topic-hero {
        grid-template-columns: 1fr;
    }

    .na-home-hero {
        padding-top: 90px;
    }

    .na-arena-scene,
    .na-topic-orbit,
    .na-community-map,
    .na-reward-hero-object {
        width: min(720px, 100%);
        margin: 0 auto;
    }

    .na-capability-grid,
    .na-process-track,
    .na-reward-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .na-creator-loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .na-public-nav {
        width: min(1480px, calc(100% - 24px));
        margin-top: 12px;
        grid-template-columns: 1fr auto;
        border-radius: 18px;
    }

    .na-public-brand img {
        width: 148px;
    }

    .na-public-nav-actions > :first-child,
    .na-public-login {
        display: none;
    }

    .na-public-nav-cta {
        padding: 10px 12px;
        font-size: .76rem;
    }

    .na-public-links {
        gap: 19px;
        font-size: .79rem;
    }

    .na-public-section,
    .na-reward-preview,
    .na-public-footer {
        width: min(1320px, calc(100% - 30px));
    }

    .na-public-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .na-public-shell h1 {
        font-size: clamp(3.1rem, 14vw, 5rem);
    }

    .na-public-shell h2 {
        font-size: clamp(2.15rem, 10vw, 3.6rem);
    }

    .na-public-actions {
        align-items: stretch;
    }

    .na-public-button {
        width: 100%;
    }

    .na-arena-scene {
        min-height: 510px;
        transform: scale(.9);
        transform-origin: center;
    }

    .na-arena-ring-a { width: 470px; height: 320px; }
    .na-arena-ring-b { width: 340px; height: 225px; }
    .na-arena-card { width: 180px; padding: 14px; }
    .na-arena-card-one { left: 0; }
    .na-arena-card-two { right: 0; }
    .na-arena-card-three { left: 2%; }

    .na-chaos-section,
    .na-reward-preview,
    .na-topic-split,
    .na-reward-model {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .na-portal-grid,
    .na-next-topic-grid,
    .na-capability-grid,
    .na-process-track,
    .na-reward-process,
    .na-creator-loop {
        grid-template-columns: 1fr;
    }

    .na-portal-card {
        min-height: 330px;
        padding: 28px;
    }

    .na-reward-preview {
        padding-left: 24px;
        padding-right: 24px;
        border-radius: 28px;
    }

    .na-reward-preview-visual {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 20px 0;
    }

    .na-reward-transform {
        transform: rotate(90deg);
        text-align: center;
    }

    .na-journey-line {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: left;
    }

    .na-journey-line::before {
        left: 29px;
        right: auto;
        top: 30px;
        bottom: 30px;
        width: 1px;
        height: auto;
    }

    .na-journey-line article {
        min-height: 62px;
        display: grid;
        grid-template-columns: 58px 1fr;
        justify-items: start;
        column-gap: 18px;
    }

    .na-journey-line article > span {
        grid-row: 1 / 3;
        margin: 0;
    }

    .na-journey-line small {
        max-width: none;
    }

    .na-benefit-band {
        grid-template-columns: 1fr;
    }

    .na-public-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .na-public-footer nav {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .na-public-nav-cta {
        display: none;
    }

    .na-public-nav {
        grid-template-columns: 1fr;
    }

    .na-public-links {
        grid-row: auto;
    }

    .na-arena-scene {
        left: 50%;
        width: 560px;
        margin-left: -280px;
        transform: scale(.66);
    }

    .na-chaos-visual {
        min-height: 440px;
    }

    .na-chaos-chip {
        font-size: .68rem;
    }

    .na-order-core {
        width: 205px;
    }

    .na-story-steps article {
        grid-template-columns: 48px 1fr;
    }

    .na-board-match strong {
        font-size: 2.5rem;
    }

    .na-stream-score {
        margin-left: 8px;
        margin-right: 8px;
    }
}

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

    .na-public-shell *,
    .na-public-shell *::before,
    .na-public-shell *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Landing V2 · Platform focus, compact scale and persistent navigation
   -------------------------------------------------------------------------- */

html {
    scroll-padding-top: 112px;
}

.na-public-nav {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 1000;
    width: min(1240px, calc(100% - 28px));
    min-height: 66px;
    margin: 0;
    padding: 9px 13px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    border-radius: 18px;
    transform: translateX(-50%);
    background: rgba(6, 9, 19, .9);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .32);
}

.na-public-shell > main {
    padding-top: 86px;
}

.na-public-brand img {
    width: 146px;
}

.na-public-links {
    gap: 18px;
    font-size: .79rem;
    white-space: nowrap;
}

.na-public-links a {
    padding: 10px 0;
}

.na-public-login {
    padding: 9px 10px;
    font-size: .82rem;
}

.na-public-nav-cta {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .8rem;
}

.na-public-section {
    width: min(1180px, calc(100% - 40px));
    padding-top: 78px;
    padding-bottom: 78px;
}

.na-public-section-compact {
    padding-top: 58px;
    padding-bottom: 58px;
}

.na-public-shell h1 {
    max-width: 760px;
    margin-bottom: 20px;
    font-size: clamp(2.75rem, 5vw, 4.85rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.na-public-shell h2 {
    margin-bottom: 18px;
    font-size: clamp(1.9rem, 3.4vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -.042em;
}

.na-public-shell h3 {
    font-size: clamp(1.12rem, 1.6vw, 1.45rem);
}

.na-public-shell p {
    line-height: 1.65;
}

.na-public-lead {
    max-width: 690px;
    margin-bottom: 27px;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
}

.na-public-eyebrow {
    margin-bottom: 15px;
    font-size: .69rem;
}

.na-public-button {
    min-height: 48px;
    padding: 0 19px;
    border-radius: 13px;
    font-size: .86rem;
}

.na-home-hero {
    min-height: 650px;
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
    gap: 42px;
    padding-top: 32px;
    padding-bottom: 58px;
}

.na-hero-support {
    margin-top: 20px;
    font-size: .84rem;
}

.na-arena-scene {
    min-height: 500px;
}

.na-arena-ring-a {
    width: 455px;
    height: 310px;
}

.na-arena-ring-b {
    width: 335px;
    height: 225px;
}

.na-arena-core {
    width: 190px;
    height: 190px;
    padding: 26px;
}

.na-arena-core strong {
    font-size: 1.24rem;
}

.na-arena-card {
    width: 190px;
    padding: 14px;
    border-radius: 15px;
}

.na-arena-card-one { left: 1%; top: 15%; }
.na-arena-card-two { right: 0; top: 24%; }
.na-arena-card-three { left: 8%; bottom: 10%; }

.na-arena-avatar,
.na-map-person {
    width: 40px;
    height: 40px;
    border-width: 2px;
    font-size: .82rem;
}

.na-trophy-signal {
    width: 86px;
}

.na-home-definition h2,
.na-home-definition > p {
    max-width: 820px;
}

.na-home-definition > p,
.na-topic-intro p,
.na-public-final-cta > p {
    font-size: 1rem;
}

.na-ecosystem-line {
    margin-top: 36px;
    padding: 17px 21px;
    gap: 13px;
    border-radius: 16px;
    font-size: .82rem;
}

.na-ecosystem-line i {
    width: 20px;
}

.na-public-section-heading {
    max-width: 760px;
    margin-bottom: 38px;
}

.na-home-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.na-home-capability-grid > a {
    min-height: 245px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--na-public-border);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0%, rgba(88, 119, 255, .1), transparent 45%),
        rgba(255, 255, 255, .025);
    transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.na-home-capability-grid > a:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 166, 255, .34);
    background:
        radial-gradient(circle at 100% 0%, rgba(88, 119, 255, .17), transparent 48%),
        rgba(255, 255, 255, .038);
}

.na-home-capability-grid > a > span {
    margin-bottom: 34px;
    color: #789ff0;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.na-home-capability-grid small,
.na-platform-layer-grid small {
    margin-bottom: 9px;
    color: #91aee9;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.na-home-capability-grid p {
    margin-bottom: 0;
    font-size: .88rem;
}

.na-chaos-section,
.na-reward-preview,
.na-topic-split,
.na-reward-model {
    gap: 50px;
}

.na-chaos-visual {
    min-height: 410px;
    border-radius: 24px;
}

.na-order-core {
    width: 220px;
    min-height: 130px;
    padding: 20px;
    border-radius: 19px;
}

.na-order-core strong {
    font-size: 1rem;
}

.na-platform-layer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.na-platform-layer-grid article {
    min-height: 190px;
    padding: 23px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    border: 1px solid var(--na-public-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
}

.na-platform-layer-grid article > span {
    color: #789ff0;
    font-size: .72rem;
    font-weight: 900;
}

.na-platform-layer-grid h3 {
    margin-bottom: 9px;
}

.na-platform-layer-grid p {
    margin-bottom: 0;
    font-size: .88rem;
}

.na-portal-grid {
    gap: 13px;
}

.na-portal-card {
    min-height: 280px;
    padding: 29px;
    border-radius: 22px;
}

.na-portal-index {
    right: 24px;
    top: 18px;
    font-size: 2.5rem;
}

.na-portal-card p {
    font-size: .9rem;
}

.na-reward-preview {
    width: min(1220px, calc(100% - 40px));
    padding-left: 38px;
    padding-right: 38px;
    border-radius: 30px;
}

.na-reward-preview-visual {
    min-height: 430px;
}

.na-reward-trophy svg {
    width: 135px;
}

.na-reward-preview-copy blockquote {
    margin: 22px 0 27px;
    font-size: 1rem;
}

.na-topic-hero {
    min-height: 610px;
    grid-template-columns: minmax(0, 1fr) minmax(400px, .78fr);
    gap: 48px;
    padding-top: 30px;
}

.na-topic-hero h1 {
    font-size: clamp(2.7rem, 4.8vw, 4.7rem);
}

.na-topic-orbit {
    min-height: 430px;
}

.orbit-core {
    width: 140px;
    height: 140px;
    font-size: 1.1rem;
}

.orbit-node {
    width: 86px;
    height: 86px;
    font-size: .68rem;
}

.orbit-reward {
    left: calc(50% - 43px);
}

.na-capability-grid {
    gap: 12px;
}

.na-capability-grid article,
.na-process-track article,
.na-creator-loop article,
.na-reward-process article {
    padding: 23px;
    border-radius: 18px;
}

.na-capability-grid article > span,
.na-process-track article > span,
.na-creator-loop article > span,
.na-reward-process article > span {
    margin-bottom: 25px;
}

.na-role-stack article,
.na-widget-stack > div {
    padding: 15px 18px;
    border-radius: 13px;
    font-size: .88rem;
}

.na-benefit-band {
    border-radius: 19px;
}

.na-benefit-band article {
    min-height: 150px;
    padding: 24px;
}

.na-next-topic-grid {
    margin-top: 28px;
    gap: 11px;
}

.na-next-topic-grid a {
    padding: 20px;
    border-radius: 15px;
    font-size: .88rem;
}

.na-public-final-cta h2,
.na-public-final-cta > p {
    max-width: 790px;
}

.na-public-footer {
    width: min(1180px, calc(100% - 40px));
}

@media (max-width: 1180px) {
    .na-public-nav {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .na-public-links {
        grid-column: auto;
        grid-row: auto;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .na-public-links::-webkit-scrollbar {
        display: none;
    }

    .na-home-hero,
    .na-topic-hero {
        grid-template-columns: 1fr;
    }

    .na-home-hero {
        padding-top: 45px;
    }

    .na-arena-scene,
    .na-topic-orbit,
    .na-community-map,
    .na-reward-hero-object {
        width: min(650px, 100%);
    }
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: 142px;
    }

    .na-public-shell > main {
        padding-top: 124px;
    }

    .na-public-nav {
        grid-template-columns: 1fr auto;
        gap: 7px 14px;
        padding: 9px 12px 7px;
    }

    .na-public-links {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 17px;
        padding: 0 2px;
        font-size: .74rem;
    }

    .na-public-nav-actions {
        justify-content: flex-end;
    }

    .na-home-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .na-public-nav {
        width: calc(100% - 18px);
        top: 8px;
        margin: 0;
    }

    .na-public-section,
    .na-reward-preview,
    .na-public-footer {
        width: min(1180px, calc(100% - 28px));
    }

    .na-public-section {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .na-public-shell h1 {
        font-size: clamp(2.55rem, 11vw, 4rem);
    }

    .na-public-shell h2 {
        font-size: clamp(1.85rem, 8vw, 2.8rem);
    }

    .na-arena-scene {
        min-height: 460px;
        transform: scale(.84);
    }

    .na-home-capability-grid,
    .na-platform-layer-grid {
        grid-template-columns: 1fr;
    }

    .na-home-capability-grid > a {
        min-height: 205px;
    }

    .na-portal-card {
        min-height: 245px;
        padding: 24px;
    }

    .na-reward-preview {
        padding-left: 22px;
        padding-right: 22px;
        border-radius: 24px;
    }
}

@media (max-width: 520px) {
    html {
        scroll-padding-top: 130px;
    }

    .na-public-shell > main {
        padding-top: 116px;
    }

    .na-public-brand img {
        width: 132px;
    }

    .na-public-nav {
        grid-template-columns: 1fr auto;
    }

    .na-public-nav-actions {
        display: none;
    }

    .na-public-links {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .na-arena-scene {
        min-height: 420px;
    }

    .na-ecosystem-line {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .na-ecosystem-line span {
        white-space: nowrap;
    }

    .na-platform-layer-grid article {
        grid-template-columns: 34px 1fr;
    }
}

/* --------------------------------------------------------------------------
   Landing V3 · Guided RPG-inspired entry experience
   -------------------------------------------------------------------------- */

.na-public-journey-toggle {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(140, 114, 255, .32);
    border-radius: 11px;
    color: #e9e5ff;
    background: rgba(140, 114, 255, .1);
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.na-public-journey-toggle:hover {
    border-color: rgba(67, 217, 239, .52);
    background: rgba(67, 217, 239, .11);
    transform: translateY(-1px);
}

.na-guided-shell > main {
    min-height: 100vh;
}

.na-journey-stage {
    position: relative;
    min-height: calc(100vh - 86px);
    width: min(1380px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 44px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.na-journey-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.na-journey-atmosphere::before,
.na-journey-atmosphere::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
}

.na-journey-atmosphere::before {
    width: 660px;
    height: 660px;
    left: -240px;
    top: 4%;
    background: radial-gradient(circle, rgba(76, 141, 255, .18), transparent 68%);
}

.na-journey-atmosphere::after {
    width: 720px;
    height: 720px;
    right: -260px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(140, 114, 255, .2), transparent 68%);
}

.na-journey-grid {
    position: absolute;
    inset: 38% -10% -40%;
    opacity: .19;
    transform: perspective(500px) rotateX(64deg);
    transform-origin: top center;
    background-image:
        linear-gradient(rgba(116, 159, 255, .25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 159, 255, .25) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, black 25%, transparent 82%);
}

.na-journey-star {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b8eaff;
    box-shadow: 0 0 18px rgba(67, 217, 239, .8);
    animation: naJourneyPulse 3.2s ease-in-out infinite;
}

.na-journey-star.star-a { top: 18%; left: 11%; }
.na-journey-star.star-b { top: 27%; right: 16%; animation-delay: .8s; }
.na-journey-star.star-c { bottom: 19%; left: 48%; animation-delay: 1.6s; }

@keyframes naJourneyPulse {
    0%, 100% { opacity: .3; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1.35); }
}

.na-journey-topline {
    position: absolute;
    top: 22px;
    left: 44px;
    right: 44px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #8792ae;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .16em;
}

.na-journey-progress {
    position: absolute;
    top: 48px;
    left: 44px;
    right: 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.na-journey-progress span {
    height: 2px;
    border-radius: 99px;
    background: rgba(167, 179, 214, .14);
    transition: background .35s ease, box-shadow .35s ease;
}

.na-journey-progress span.is-active,
.na-journey-progress span.is-complete {
    background: linear-gradient(90deg, var(--na-public-blue), var(--na-public-cyan));
    box-shadow: 0 0 16px rgba(76, 141, 255, .34);
}

.na-journey-panel {
    width: min(1180px, 100%);
    margin: 54px auto 0;
    animation: naJourneyEnter .52s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes naJourneyEnter {
    from { opacity: 0; transform: translateY(18px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.na-journey-copy {
    max-width: 900px;
    margin-bottom: 36px;
}

.na-journey-copy h1,
.na-journey-question-copy h1,
.na-result-header h1 {
    max-width: 900px;
    font-size: clamp(2.65rem, 5vw, 5.2rem);
}

.na-journey-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.na-journey-choice,
.na-journey-goal {
    position: relative;
    border: 1px solid rgba(166, 184, 255, .16);
    color: var(--na-public-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(18, 25, 48, .92), rgba(10, 14, 29, .9)),
        rgba(11, 16, 32, .88);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 22px 55px rgba(0, 0, 0, .2);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.na-journey-choice::before,
.na-journey-goal::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at 20% 0%, rgba(76, 141, 255, .22), transparent 55%);
    transition: opacity .28s ease;
}

.na-journey-choice:hover,
.na-journey-goal:hover {
    z-index: 2;
    transform: translateY(-7px);
    border-color: rgba(92, 185, 255, .48);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34), 0 0 34px rgba(76, 141, 255, .11);
}

.na-journey-choice:hover::before,
.na-journey-goal:hover::before {
    opacity: 1;
}

.na-journey-choice {
    min-height: 300px;
    padding: 25px;
    border-radius: 20px;
}

.na-choice-glyph {
    width: 48px;
    height: 48px;
    margin-bottom: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(110, 190, 255, .28);
    border-radius: 14px;
    color: #b7eaff;
    background: rgba(76, 141, 255, .09);
    font-size: 1.25rem;
}

.na-journey-choice small {
    display: block;
    margin-bottom: 10px;
    color: #8ea8dd;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-journey-choice strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 11px;
    font-size: 1.22rem;
    line-height: 1.18;
}

.na-journey-choice p,
.na-journey-goal p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    font-size: .85rem;
    line-height: 1.55;
}

.na-choice-action {
    position: absolute;
    left: 25px;
    bottom: 23px;
    color: #a9dff8;
    font-size: .74rem;
    font-weight: 800;
}

.na-journey-back {
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    color: #9aa9c9;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
}

.na-journey-question-copy {
    max-width: 850px;
    margin-bottom: 32px;
}

.na-journey-goal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.na-journey-goal {
    min-height: 218px;
    padding: 24px;
    border-radius: 18px;
}

.na-journey-goal > span {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 30px;
    color: #83dbf4;
    font-size: 1.35rem;
}

.na-journey-goal strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 9px;
    font-size: 1.08rem;
}

.na-result-header {
    max-width: 880px;
    margin-bottom: 29px;
}

.na-result-rank {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 200, 107, .25);
    border-radius: 8px;
    color: #ffd68f;
    background: rgba(255, 200, 107, .07);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-result-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
}

.na-result-profile-card {
    min-height: 300px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 200, 107, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 200, 107, .17), transparent 35%),
        linear-gradient(155deg, rgba(30, 24, 43, .94), rgba(11, 15, 29, .94));
    box-shadow: 0 25px 70px rgba(0, 0, 0, .28);
}

.na-result-emblem {
    width: 82px;
    height: 82px;
    margin-bottom: auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 218, 151, .35);
    border-radius: 24px;
    color: #ffe0a8;
    background: rgba(255, 200, 107, .09);
    font-size: 2rem;
    box-shadow: 0 0 34px rgba(255, 200, 107, .11);
}

.na-result-profile-card small {
    color: #b8a987;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-result-profile-card strong {
    margin: 6px 0 8px;
    font-size: 1.35rem;
}

.na-result-profile-card span {
    color: var(--na-public-muted);
    font-size: .84rem;
}

.na-result-capabilities {
    display: grid;
    gap: 10px;
}

.na-result-capabilities article {
    min-height: 92px;
    padding: 19px 21px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(164, 180, 255, .14);
    border-radius: 16px;
    background: rgba(15, 21, 40, .72);
}

.na-result-capabilities article > span {
    color: #79d9f4;
}

.na-result-capabilities strong {
    display: block;
    margin-bottom: 5px;
    font-size: .98rem;
}

.na-result-capabilities p {
    margin-bottom: 0;
    font-size: .82rem;
}

.na-result-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.na-public-text-button {
    padding: 10px 3px;
    border: 0;
    color: #aab8d6;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.na-public-text-button:hover {
    color: #fff;
}

.na-journey-skip {
    position: absolute;
    right: 44px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    color: #7f8ca8;
    background: transparent;
    font: inherit;
    font-size: .69rem;
    font-weight: 800;
    cursor: pointer;
}

.na-journey-skip kbd {
    padding: 4px 7px;
    border: 1px solid rgba(161, 177, 214, .2);
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #b8c1d8;
    background: rgba(15, 20, 36, .8);
    font: inherit;
    font-size: .58rem;
}

.na-static-platform {
    animation: naStaticReveal .45s ease both;
}

@keyframes naStaticReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.na-static-hero {
    min-height: 650px;
    padding-top: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
    gap: 55px;
    align-items: center;
}

.na-decision-console {
    padding: 18px;
    border: 1px solid rgba(158, 186, 255, .18);
    border-radius: 23px;
    background:
        radial-gradient(circle at 80% 0%, rgba(140, 114, 255, .16), transparent 40%),
        rgba(11, 16, 31, .84);
    box-shadow: var(--na-public-shadow);
}

.na-console-header {
    padding: 9px 10px 17px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #98a9cf;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-decision-console article {
    margin-bottom: 9px;
    padding: 17px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(159, 176, 219, .12);
    border-radius: 13px;
    background: rgba(16, 22, 41, .76);
}

.na-decision-console article.is-active {
    border-color: rgba(67, 217, 239, .35);
    box-shadow: inset 3px 0 #43d9ef;
}

.na-decision-console article.is-complete {
    opacity: .78;
}

.na-decision-console article > span,
.na-decision-console article > b {
    color: #73d9f5;
    font-size: .78rem;
}

.na-decision-console article small {
    display: block;
    margin-bottom: 3px;
    color: #7987a8;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-decision-console article strong {
    font-size: .86rem;
}

.na-console-output {
    margin-top: 15px;
    padding: 21px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(76, 141, 255, .15), rgba(140, 114, 255, .13));
}

.na-console-output small {
    display: block;
    margin-bottom: 7px;
    color: #8fa4d4;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-console-output strong {
    font-size: 1.02rem;
}

.na-platform-first {
    text-align: center;
}

.na-platform-first .na-public-section-heading {
    max-width: 840px;
    margin: 0 auto 38px;
}

.na-human-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

.na-human-capability-grid article {
    min-height: 250px;
    padding: 23px;
    border: 1px solid var(--na-public-border);
    border-radius: 18px;
    background: rgba(15, 21, 40, .66);
}

.na-human-capability-grid article > span {
    display: block;
    margin-bottom: 31px;
    color: #76dbf4;
    font-size: .72rem;
    font-weight: 900;
}

.na-human-capability-grid small {
    display: block;
    margin-bottom: 9px;
    color: #8da7d9;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-human-capability-grid h3 {
    font-size: 1.16rem;
}

.na-human-capability-grid p {
    margin-bottom: 0;
    font-size: .84rem;
}

.na-feature-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.na-feature-copy {
    max-width: 560px;
}

.na-feature-list {
    margin: 26px 0 25px;
    padding: 0;
    display: grid;
    gap: 11px;
    list-style: none;
}

.na-feature-list li {
    position: relative;
    padding-left: 23px;
    color: #c6cee1;
    font-size: .88rem;
    line-height: 1.5;
}

.na-feature-list li::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: .15em;
    color: #64d5ef;
    font-size: .58rem;
}

.na-feature-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.na-stream-window {
    width: min(520px, 92%);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(155, 178, 255, .22);
    border-radius: 22px;
    background: linear-gradient(155deg, #171f39, #090d19);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .36);
}

.na-stream-topbar {
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #aeb8d4;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-stream-stage {
    min-height: 220px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        radial-gradient(circle at 50% 50%, rgba(76, 141, 255, .23), transparent 37%),
        linear-gradient(145deg, rgba(140, 114, 255, .09), rgba(67, 217, 239, .05));
}

.na-stream-stage strong {
    font-size: 2.5rem;
}

.na-stream-team {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    font-size: .72rem;
    font-weight: 900;
}

.na-stream-lower-third {
    padding: 13px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    background: rgba(5, 8, 17, .92);
    font-size: .72rem;
}

.na-stream-lower-third span { color: #8d99b6; }
.na-stream-lower-third b { color: #68d9ef; }

.na-stream-widget {
    position: absolute;
    padding: 11px 13px;
    border: 1px solid rgba(158, 185, 255, .2);
    border-radius: 11px;
    color: #b8c7e8;
    background: rgba(10, 14, 28, .9);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .1em;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}

.widget-chat { left: 0; top: 47px; }
.widget-bracket { right: 0; top: 90px; }
.widget-profile { right: 7%; bottom: 20px; }

.na-community-constellation {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.na-community-constellation::before,
.na-community-constellation::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(97, 178, 255, .17);
    border-radius: 50%;
}

.na-community-constellation::before { width: 380px; height: 270px; }
.na-community-constellation::after { width: 270px; height: 190px; }

.na-community-core {
    z-index: 2;
    width: 190px;
    height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(104, 213, 239, .31);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 141, 255, .2), rgba(11, 16, 31, .93) 68%);
    box-shadow: 0 0 65px rgba(76, 141, 255, .16);
}

.na-community-core small {
    color: #80cfe6;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-community-core strong { margin: 8px 0 5px; font-size: 1.04rem; }
.na-community-core span { color: #919db8; font-size: .72rem; }

.club-node {
    position: absolute;
    z-index: 3;
    min-width: 126px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(164, 180, 255, .17);
    border-radius: 13px;
    background: rgba(11, 16, 31, .92);
    box-shadow: 0 16px 36px rgba(0,0,0,.25);
}

.club-node b {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #b9eaff;
    background: rgba(76, 141, 255, .16);
    font-size: .64rem;
}

.club-node span { color: #c8d0e3; font-size: .72rem; font-weight: 800; }
.club-one { top: 40px; left: 15%; }
.club-two { top: 86px; right: 2%; }
.club-three { bottom: 57px; left: 2%; }
.club-four { bottom: 22px; right: 17%; }

.na-competition-path {
    min-height: 360px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 13px;
    align-items: center;
    border: 1px solid rgba(159, 179, 236, .15);
    border-radius: 22px;
    background: rgba(11, 16, 31, .63);
}

.na-competition-path article {
    min-height: 125px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(158, 177, 224, .13);
    border-radius: 14px;
    background: rgba(18, 24, 44, .76);
}

.na-competition-path article span {
    margin-bottom: 17px;
    color: #68d9ef;
    font-size: .64rem;
    font-weight: 900;
}

.na-competition-path article strong { font-size: .96rem; }
.na-competition-path article small { margin-top: 5px; color: #8793ad; }
.na-competition-path i { width: 22px; height: 1px; background: rgba(94, 197, 239, .35); }

.na-static-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.na-static-path-grid a {
    min-height: 170px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--na-public-border);
    border-radius: 17px;
    background: rgba(15, 21, 40, .67);
    transition: transform .22s ease, border-color .22s ease;
}

.na-static-path-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 191, 238, .4);
}

.na-static-path-grid small {
    margin-bottom: 28px;
    color: #85a7df;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-static-path-grid strong {
    margin-bottom: 20px;
    font-size: 1.02rem;
}

.na-static-path-grid span {
    margin-top: auto;
    color: #9fcfe8;
    font-size: .73rem;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .na-journey-choice-grid,
    .na-journey-goal-grid,
    .na-human-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .na-static-hero,
    .na-feature-spotlight {
        grid-template-columns: 1fr;
    }

    .na-feature-creators .na-feature-visual,
    .na-feature-competition .na-competition-path {
        order: 2;
    }

    .na-feature-copy {
        max-width: 760px;
    }
}

@media (max-width: 780px) {
    .na-journey-stage {
        width: min(100%, calc(100% - 16px));
        padding: 64px 14px 65px;
        justify-content: flex-start;
    }

    .na-journey-topline,
    .na-journey-progress {
        left: 14px;
        right: 14px;
    }

    .na-journey-topline {
        top: 22px;
    }

    .na-journey-progress {
        top: 48px;
    }

    .na-journey-panel {
        margin-top: 25px;
    }

    .na-journey-choice-grid,
    .na-journey-goal-grid,
    .na-human-capability-grid,
    .na-static-path-grid {
        grid-template-columns: 1fr;
    }

    .na-journey-choice {
        min-height: 230px;
    }

    .na-result-layout {
        grid-template-columns: 1fr;
    }

    .na-result-profile-card {
        min-height: 260px;
    }

    .na-journey-skip {
        right: 14px;
        bottom: 18px;
    }

    .na-static-hero {
        min-height: auto;
        padding-top: 44px;
    }

    .na-feature-spotlight {
        gap: 30px;
    }

    .na-feature-visual,
    .na-community-constellation {
        min-height: 360px;
    }

    .na-competition-path {
        grid-template-columns: 1fr;
    }

    .na-competition-path i {
        width: 1px;
        height: 16px;
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .na-public-nav-actions {
        display: flex;
    }

    .na-public-nav-actions > :not(.na-public-journey-toggle) {
        display: none !important;
    }

    .na-public-journey-toggle {
        min-height: 34px;
        padding: 0 9px;
        font-size: .66rem;
    }

    .na-journey-topline span:first-child {
        display: none;
    }

    .na-journey-topline {
        justify-content: flex-end;
    }

    .na-journey-copy h1,
    .na-journey-question-copy h1,
    .na-result-header h1 {
        font-size: clamp(2.2rem, 12vw, 3.4rem);
    }

    .na-result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .na-result-actions .na-public-button {
        width: 100%;
    }

    .na-stream-widget {
        display: none;
    }

    .na-stream-window {
        width: 100%;
    }

    .na-community-constellation {
        transform: scale(.84);
    }
}

/* --------------------------------------------------------------------------
   Landing V3.1 · Visual refinement
   - Fixed compact navigation
   - Continuous site-wide background
   - Contained journey heading
   - Clearer, animated choice cards
   -------------------------------------------------------------------------- */

/* One continuous atmosphere across the whole public experience. */
html,
body {
    min-height: 100%;
    background: #070a14;
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(54, 116, 236, .15), transparent 32rem),
        radial-gradient(circle at 88% 18%, rgba(119, 75, 224, .14), transparent 34rem),
        linear-gradient(180deg, #070a14 0%, #0a0e1b 48%, #070a14 100%);
    background-attachment: fixed;
}

.na-public-shell,
.na-guided-shell,
.na-guided-shell > main,
.na-static-platform {
    background: transparent;
}

.na-public-shell {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

.na-public-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(55, 127, 255, .12), transparent 31rem),
        radial-gradient(circle at 82% 30%, rgba(133, 86, 255, .13), transparent 34rem),
        linear-gradient(180deg, rgba(7, 10, 20, .15), rgba(8, 11, 22, .38));
}

/* Compact navigation that remains visible without occupying the scene. */
.na-public-nav {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 1000;
    width: min(1320px, calc(100% - 28px));
    min-height: 62px;
    margin: 0;
    padding: 7px 11px;
    gap: 18px;
    border-radius: 18px;
    background: rgba(7, 10, 21, .84);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .28);
    transform: translateX(-50%);
}

.na-public-brand img {
    width: 118px;
    max-height: 44px;
}

.na-public-links {
    gap: 18px;
    font-size: .77rem;
}

.na-public-links a {
    padding: 9px 0;
}

.na-public-links a::after {
    bottom: 1px;
}

.na-public-nav-actions {
    gap: 7px;
}

.na-public-login {
    padding: 8px 10px;
    font-size: .78rem;
}

.na-public-nav-cta {
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border-radius: 11px;
    font-size: .75rem;
}

.na-public-journey-toggle {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: .7rem;
}

/* Reserve actual space for the fixed navigation. */
.na-guided-shell > main {
    min-height: 100vh;
    padding-top: 80px;
}

/* The guided background now spans the full viewport instead of a central strip. */
.na-journey-stage {
    width: 100%;
    min-height: calc(100vh - 80px);
    margin: 0;
    padding: 72px max(28px, calc((100vw - 1180px) / 2)) 54px;
    overflow: hidden;
}

.na-journey-atmosphere {
    inset: 0;
}

.na-journey-atmosphere::before {
    width: min(760px, 58vw);
    height: min(760px, 58vw);
    left: -18vw;
    top: -8%;
    opacity: .8;
}

.na-journey-atmosphere::after {
    width: min(820px, 62vw);
    height: min(820px, 62vw);
    right: -20vw;
    bottom: -30%;
    opacity: .72;
}

.na-journey-grid {
    inset: 38% -4% -38%;
    opacity: .13;
    background-size: 64px 64px;
}

.na-journey-topline,
.na-journey-progress {
    width: min(1180px, calc(100% - 56px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.na-journey-topline {
    top: 24px;
}

.na-journey-progress {
    top: 48px;
}

.na-journey-panel {
    width: min(1120px, 100%);
    margin-top: 28px;
}

/* Keep the title editorial, readable and free from external decorative rules. */
.na-journey-copy {
    width: min(790px, 100%);
    max-width: none;
    margin-bottom: 28px;
}

.na-journey-copy h1,
.na-journey-question-copy h1,
.na-result-header h1 {
    width: auto;
    max-width: 790px;
    margin-bottom: 18px;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    clip-path: none !important;
    font-size: clamp(2.45rem, 4.25vw, 4.65rem);
    line-height: .99;
    letter-spacing: -.048em;
    text-wrap: balance;
}

.na-journey-copy h1::before,
.na-journey-copy h1::after,
.na-journey-question-copy h1::before,
.na-journey-question-copy h1::after,
.na-result-header h1::before,
.na-result-header h1::after {
    content: none !important;
    display: none !important;
}

.na-journey-copy .na-public-lead,
.na-journey-question-copy .na-public-lead,
.na-result-header .na-public-lead {
    max-width: 720px;
    margin-bottom: 0;
    font-size: clamp(.98rem, 1.25vw, 1.12rem);
    line-height: 1.62;
}

/* Choice cards: explicit layout avoids inherited button rules mixing the copy. */
.na-journey-choice-grid {
    gap: 16px;
}

.na-journey-choice {
    --choice-accent: 76, 141, 255;
    min-height: 270px;
    padding: 21px;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    border-radius: 18px;
    white-space: normal;
    isolation: isolate;
    transform: translateZ(0);
}

.na-journey-choice:nth-child(2) { --choice-accent: 230, 103, 255; }
.na-journey-choice:nth-child(3) { --choice-accent: 67, 217, 239; }
.na-journey-choice:nth-child(4) { --choice-accent: 255, 190, 92; }

.na-journey-choice::before {
    z-index: -2;
    opacity: .36;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--choice-accent), .2), transparent 48%),
        linear-gradient(145deg, rgba(var(--choice-accent), .045), transparent 58%);
    animation: naChoiceAura 6.8s ease-in-out infinite;
}

.na-journey-choice::after {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--choice-accent), .82), transparent);
    opacity: .56;
    transform: scaleX(.72);
    transition: opacity .28s ease, transform .28s ease;
}

.na-journey-choice:nth-child(2)::before { animation-delay: -1.7s; }
.na-journey-choice:nth-child(3)::before { animation-delay: -3.4s; }
.na-journey-choice:nth-child(4)::before { animation-delay: -5.1s; }

.na-journey-choice:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(var(--choice-accent), .5);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .3),
        0 0 30px rgba(var(--choice-accent), .1),
        inset 0 1px rgba(255, 255, 255, .055);
}

.na-journey-choice:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.na-choice-glyph {
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    margin: 0 0 18px;
    border-color: rgba(var(--choice-accent), .34);
    color: rgb(var(--choice-accent));
    background: rgba(var(--choice-accent), .09);
    font-size: 1.05rem;
    box-shadow: 0 0 0 0 rgba(var(--choice-accent), 0);
    animation: naChoiceGlyph 5.8s ease-in-out infinite;
}

.na-journey-choice:nth-child(2) .na-choice-glyph { animation-delay: -1.45s; }
.na-journey-choice:nth-child(3) .na-choice-glyph { animation-delay: -2.9s; }
.na-journey-choice:nth-child(4) .na-choice-glyph { animation-delay: -4.35s; }

.na-journey-choice small {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 0 10px;
    color: rgba(var(--choice-accent), .9);
    font-size: .61rem;
    line-height: 1.3;
    letter-spacing: .12em;
}

.na-journey-choice strong {
    width: 100%;
    margin: 0 0 10px;
    font-size: 1.08rem;
    line-height: 1.22;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.na-journey-choice p {
    width: 100%;
    margin: 0;
    color: #9fa9c2;
    font-size: .8rem;
    line-height: 1.52;
}

.na-choice-action {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
    color: rgba(var(--choice-accent), .92);
    font-size: .69rem;
    transition: transform .22s ease, color .22s ease;
}

.na-journey-choice:hover .na-choice-action {
    color: #f4fbff;
    transform: translateX(4px);
}

@keyframes naChoiceAura {
    0%, 100% { opacity: .28; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: .52; transform: translate3d(2%, -1%, 0) scale(1.035); }
}

@keyframes naChoiceGlyph {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(var(--choice-accent), 0); }
    50% { transform: translateY(-2px); box-shadow: 0 0 24px rgba(var(--choice-accent), .13); }
}

/* Goal cards receive the same readable stacking and restrained motion. */
.na-journey-goal {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    min-height: 205px;
}

.na-journey-goal > span {
    margin-bottom: 22px;
}

.na-journey-goal strong,
.na-journey-goal p {
    width: 100%;
}

.na-journey-goal p {
    margin-top: 0;
}

/* Static mode uses the same continuous surface under the fixed navigation. */
.na-static-platform {
    min-height: calc(100vh - 80px);
}

.na-static-hero {
    padding-top: 62px;
}

@media (max-width: 1180px) {
    .na-public-nav {
        grid-template-columns: auto 1fr;
    }

    .na-public-links {
        display: none;
    }

    .na-public-nav-actions {
        justify-content: flex-end;
    }

    .na-journey-stage {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 780px) {
    .na-public-nav {
        top: 7px;
        width: calc(100% - 14px);
        min-height: 56px;
        padding: 6px 9px;
        border-radius: 15px;
    }

    .na-public-brand img {
        width: 104px;
        max-height: 39px;
    }

    .na-guided-shell > main {
        padding-top: 70px;
    }

    .na-journey-stage {
        width: 100%;
        min-height: calc(100vh - 70px);
        padding: 68px 16px 68px;
    }

    .na-journey-topline,
    .na-journey-progress {
        width: calc(100% - 32px);
        left: 50%;
        right: auto;
    }

    .na-journey-panel {
        margin-top: 18px;
    }

    .na-journey-copy h1,
    .na-journey-question-copy h1,
    .na-result-header h1 {
        font-size: clamp(2.15rem, 10.5vw, 3.25rem);
        line-height: 1.01;
    }

    .na-journey-choice {
        min-height: 220px;
    }
}

@media (max-width: 520px) {
    .na-public-nav-actions > :not(.na-public-journey-toggle) {
        display: none !important;
    }

    .na-public-journey-toggle {
        min-height: 33px;
        padding: 0 9px;
        font-size: .64rem;
    }

    .na-journey-copy {
        margin-bottom: 22px;
    }

    .na-journey-choice {
        padding: 19px;
        min-height: 208px;
    }

    .na-choice-glyph {
        margin-bottom: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-journey-choice::before,
    .na-choice-glyph {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Landing V3.2 · Functional public theme toggle
   The public experience owns its visual theme and preserves it across routes.
   -------------------------------------------------------------------------- */

.na-public-theme-toggle {
    min-height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--na-public-border);
    border-radius: 11px;
    color: var(--na-public-text);
    background: rgba(255, 255, 255, .035);
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.na-public-theme-toggle:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(105, 164, 255, .42);
    background: rgba(255, 255, 255, .07);
}

.na-public-theme-toggle:focus-visible {
    outline: 2px solid var(--na-public-cyan);
    outline-offset: 3px;
}

.na-public-theme-toggle:disabled {
    opacity: .62;
    cursor: wait;
}

.na-public-theme-icon {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--na-public-cyan);
    background: rgba(67, 217, 239, .1);
    font-size: .72rem;
    line-height: 1;
}

/* Light palette */
html[data-na-theme="light"] {
    --na-public-bg: #edf2fb;
    --na-public-bg-soft: #e4ebf8;
    --na-public-surface: rgba(255, 255, 255, .78);
    --na-public-surface-solid: #ffffff;
    --na-public-border: rgba(41, 61, 105, .16);
    --na-public-text: #10182b;
    --na-public-muted: #52617b;
    --na-public-purple: #6f56db;
    --na-public-blue: #286bd7;
    --na-public-cyan: #087eaa;
    --na-public-pink: #a23bbd;
    --na-public-gold: #a56700;
    --na-public-shadow: 0 24px 70px rgba(42, 57, 92, .15);
}

html[data-na-theme="light"],
html[data-na-theme="light"] body {
    background: #edf2fb;
}

html[data-na-theme="light"] body {
    color: var(--na-public-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(47, 116, 220, .14), transparent 33rem),
        radial-gradient(circle at 88% 18%, rgba(122, 80, 216, .12), transparent 35rem),
        linear-gradient(180deg, #f7f9fe 0%, #edf2fb 48%, #f7f9fe 100%);
    background-attachment: fixed;
}

html[data-na-theme="light"] .na-public-shell {
    color: var(--na-public-text);
    background: transparent;
}

html[data-na-theme="light"] .na-public-shell::before {
    background:
        radial-gradient(circle at 18% 16%, rgba(44, 119, 222, .11), transparent 31rem),
        radial-gradient(circle at 82% 30%, rgba(119, 76, 210, .10), transparent 34rem),
        linear-gradient(180deg, rgba(247, 249, 254, .12), rgba(225, 233, 248, .35));
}

html[data-na-theme="light"] .na-public-nav {
    border-color: rgba(43, 63, 105, .15);
    background: rgba(250, 252, 255, .88);
    box-shadow: 0 12px 34px rgba(35, 49, 80, .14);
}

html[data-na-theme="light"] .na-public-links,
html[data-na-theme="light"] .na-public-login,
html[data-na-theme="light"] .na-journey-topline,
html[data-na-theme="light"] .na-public-footer,
html[data-na-theme="light"] .na-public-footer-brand p {
    color: var(--na-public-muted) !important;
}

html[data-na-theme="light"] .na-public-links a:hover,
html[data-na-theme="light"] .na-public-links a.is-active {
    color: var(--na-public-text);
}

html[data-na-theme="light"] .na-public-theme-toggle,
html[data-na-theme="light"] .na-public-journey-toggle,
html[data-na-theme="light"] .na-public-button-secondary,
html[data-na-theme="light"] .na-public-nav-cta {
    color: #17223a;
    border-color: rgba(54, 76, 125, .18);
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}

html[data-na-theme="light"] .na-public-theme-toggle:hover:not(:disabled),
html[data-na-theme="light"] .na-public-journey-toggle:hover,
html[data-na-theme="light"] .na-public-button-secondary:hover,
html[data-na-theme="light"] .na-public-nav-cta:hover {
    border-color: rgba(40, 107, 215, .36);
    background: rgba(255, 255, 255, .96);
}

html[data-na-theme="light"] .na-public-theme-icon {
    color: #986200;
    background: rgba(255, 186, 55, .18);
}

html[data-na-theme="light"] .na-public-shell h1,
html[data-na-theme="light"] .na-public-shell h2,
html[data-na-theme="light"] .na-public-shell h3,
html[data-na-theme="light"] .na-public-shell strong,
html[data-na-theme="light"] .na-public-shell b {
    color: var(--na-public-text);
}

html[data-na-theme="light"] .na-public-shell p,
html[data-na-theme="light"] .na-public-lead,
html[data-na-theme="light"] .na-journey-choice p,
html[data-na-theme="light"] .na-journey-goal p,
html[data-na-theme="light"] .na-result-profile-card span,
html[data-na-theme="light"] .na-result-capabilities p,
html[data-na-theme="light"] .na-feature-copy p,
html[data-na-theme="light"] .na-public-section-heading p {
    color: var(--na-public-muted);
}

html[data-na-theme="light"] .na-public-eyebrow,
html[data-na-theme="light"] .na-public-text-link,
html[data-na-theme="light"] .na-public-text-button {
    color: #265fae !important;
}

html[data-na-theme="light"] .na-journey-stage {
    background: transparent;
}

html[data-na-theme="light"] .na-journey-grid {
    opacity: .11;
    filter: invert(1) opacity(.42);
}

html[data-na-theme="light"] .na-journey-star {
    background: #3879c9;
    box-shadow: 0 0 12px rgba(56, 121, 201, .4);
}

html[data-na-theme="light"] .na-journey-progress span {
    background: rgba(39, 62, 110, .14);
}

html[data-na-theme="light"] .na-journey-progress span.is-active,
html[data-na-theme="light"] .na-journey-progress span.is-complete {
    background: linear-gradient(90deg, #286bd7, #6552cf);
}

/* Shared light surfaces across the guided flow and every public sublanding. */
html[data-na-theme="light"] :is(
    .na-journey-choice,
    .na-journey-goal,
    .na-result-profile-card,
    .na-result-capabilities article,
    .na-human-capability-grid article,
    .na-decision-console,
    .na-static-path-grid article,
    .na-capability-grid article,
    .na-next-topic-grid article,
    .na-story-steps article,
    .na-process-track article,
    .na-role-stack article,
    .na-benefit-band article,
    .na-reward-model,
    .na-serial-card,
    .na-reward-result,
    .na-competition-board,
    .na-club-card-demo,
    .na-stream-window,
    .na-stream-widget,
    .na-widget-stack article,
    .na-message-chaos article
) {
    border-color: rgba(44, 64, 108, .16);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 20px 52px rgba(39, 55, 91, .12), inset 0 1px rgba(255, 255, 255, .76);
}

html[data-na-theme="light"] .na-journey-choice:hover,
html[data-na-theme="light"] .na-journey-goal:hover {
    box-shadow:
        0 24px 58px rgba(39, 55, 91, .17),
        0 0 30px rgba(var(--choice-accent, 76, 141, 255), .09),
        inset 0 1px rgba(255, 255, 255, .9);
}

html[data-na-theme="light"] .na-choice-action {
    color: rgb(var(--choice-accent));
}

html[data-na-theme="light"] .na-journey-choice:hover .na-choice-action {
    color: #1b579e;
}

html[data-na-theme="light"] .na-journey-skip,
html[data-na-theme="light"] .na-journey-back {
    color: #42516c;
}

html[data-na-theme="light"] .na-journey-skip kbd {
    color: #273550;
    border-color: rgba(42, 61, 104, .2);
    background: rgba(255, 255, 255, .76);
}

html[data-na-theme="light"] .na-console-header,
html[data-na-theme="light"] .na-console-output,
html[data-na-theme="light"] .na-stream-topbar,
html[data-na-theme="light"] .na-stream-lower-third,
html[data-na-theme="light"] .na-board-meta,
html[data-na-theme="light"] .na-board-status {
    color: #34435e;
    border-color: rgba(46, 67, 111, .15);
    background: rgba(238, 243, 252, .86);
}

html[data-na-theme="light"] .na-decision-console article,
html[data-na-theme="light"] .na-board-match,
html[data-na-theme="light"] .na-reward-process article {
    border-color: rgba(44, 64, 108, .14);
    background: rgba(247, 249, 254, .82);
}

html[data-na-theme="light"] .na-stream-stage,
html[data-na-theme="light"] .na-stream-video,
html[data-na-theme="light"] .na-reward-preview-visual,
html[data-na-theme="light"] .na-topic-orbit,
html[data-na-theme="light"] .na-community-map,
html[data-na-theme="light"] .na-community-constellation,
html[data-na-theme="light"] .na-reward-halo {
    background-color: rgba(224, 232, 248, .62);
}

html[data-na-theme="light"] .na-feature-spotlight,
html[data-na-theme="light"] .na-topic-split,
html[data-na-theme="light"] .na-reward-preview,
html[data-na-theme="light"] .na-reward-manifesto,
html[data-na-theme="light"] .na-public-final-cta {
    border-color: rgba(43, 64, 108, .13);
}

html[data-na-theme="light"] .na-public-footer {
    border-color: rgba(43, 64, 108, .13);
}

html[data-na-theme="light"] .na-public-button-primary {
    color: #fff;
    box-shadow: 0 16px 36px rgba(64, 87, 201, .25), inset 0 1px rgba(255, 255, 255, .24);
}

html[data-na-theme="light"] .na-live-dot {
    box-shadow: 0 0 11px rgba(23, 166, 103, .55);
}

@media (max-width: 520px) {
    body .na-public-nav-actions > .na-public-theme-toggle {
        min-height: 33px;
        padding: 0 9px;
        display: inline-flex !important;
    }

    .na-public-theme-label {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Landing V4 · Hybrid Builder perspective
   - Multi-dimensional profile construction
   - Creator + club + community paths
   - Concrete growth scenarios
   -------------------------------------------------------------------------- */

.na-v4-shell {
    --na-v4-card: rgba(14, 20, 38, .78);
    --na-v4-card-strong: rgba(18, 25, 47, .94);
    --na-v4-line: rgba(151, 176, 255, .17);
    --na-v4-copy: #aeb9d2;
}

.na-v4-journey {
    padding-top: 66px;
}

.na-v4-panel {
    width: min(1180px, 100%);
}

.na-v4-intro {
    max-width: 850px;
    margin-bottom: 30px;
}

.na-v4-intro h1,
.na-v4-result-heading h1 {
    max-width: 850px;
    margin-bottom: 16px;
    font-size: clamp(2.55rem, 5vw, 5.15rem);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.na-v4-intro-compact h1 {
    font-size: clamp(2.35rem, 4.35vw, 4.55rem);
}

.na-v4-build-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.na-v4-build-card {
    position: relative;
    min-height: 204px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--na-v4-line);
    border-radius: 18px;
    color: var(--na-public-text);
    text-align: left;
    background:
        radial-gradient(circle at 8% 0%, rgba(76, 141, 255, .12), transparent 48%),
        var(--na-v4-card);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    overflow: hidden;
    cursor: pointer;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.na-v4-build-card:nth-child(2) { background-image: radial-gradient(circle at 8% 0%, rgba(231, 109, 255, .12), transparent 48%); }
.na-v4-build-card:nth-child(3) { background-image: radial-gradient(circle at 8% 0%, rgba(67, 217, 239, .12), transparent 48%); }
.na-v4-build-card:nth-child(4) { background-image: radial-gradient(circle at 8% 0%, rgba(255, 200, 107, .12), transparent 48%); }
.na-v4-build-card:nth-child(5) { background-image: radial-gradient(circle at 8% 0%, rgba(140, 114, 255, .14), transparent 48%); }

.na-v4-build-card::after {
    content: "";
    position: absolute;
    inset: auto 20px 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--na-public-cyan), transparent);
    opacity: 0;
    transform: scaleX(.55);
    transition: opacity .24s ease, transform .24s ease;
}

.na-v4-build-card:hover,
.na-v4-build-card.is-selected {
    transform: translateY(-4px);
    border-color: rgba(95, 177, 255, .48);
    background-color: rgba(21, 30, 55, .94);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .25), 0 0 28px rgba(76, 141, 255, .08);
}

.na-v4-build-card.is-selected::after {
    opacity: 1;
    transform: scaleX(1);
}

.na-v4-card-check {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--na-v4-line);
    border-radius: 9px;
    color: var(--na-public-muted);
    font-size: .78rem;
    font-weight: 900;
    background: rgba(255, 255, 255, .025);
}

.na-v4-build-card.is-selected .na-v4-card-check {
    border-color: rgba(67, 217, 239, .55);
    color: #eaffff;
    background: rgba(67, 217, 239, .13);
}

.na-v4-card-glyph {
    width: 42px;
    height: 42px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(113, 170, 255, .25);
    border-radius: 13px;
    color: #8dc9ff;
    background: rgba(76, 141, 255, .08);
    font-size: 1.05rem;
}

.na-v4-build-card small,
.na-v4-priority-card small,
.na-v4-content-moments small,
.na-v4-level-grid small,
.na-v4-platform-area small {
    color: #8fb7ff;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-v4-build-card strong {
    margin: 8px 42px 8px 0;
    font-size: 1.12rem;
    line-height: 1.18;
}

.na-v4-build-card p {
    margin: 0;
    color: var(--na-v4-copy);
    font-size: .83rem;
    line-height: 1.5;
}

.na-v4-step-footer {
    margin-top: 22px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--na-v4-line);
    color: var(--na-public-muted);
    font-size: .82rem;
}

.na-v4-step-footer .na-public-button:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.na-v4-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.na-v4-priority-card {
    min-height: 126px;
    padding: 17px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    border: 1px solid var(--na-v4-line);
    border-radius: 16px;
    color: var(--na-public-text);
    text-align: left;
    background: var(--na-v4-card);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.na-v4-priority-card > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #9ec9ff;
    background: rgba(76, 141, 255, .09);
}

.na-v4-priority-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: .96rem;
}

.na-v4-priority-card p {
    margin: 0;
    color: var(--na-v4-copy);
    font-size: .77rem;
    line-height: 1.48;
}

.na-v4-priority-card:hover,
.na-v4-priority-card.is-selected {
    transform: translateY(-3px);
    border-color: rgba(67, 217, 239, .46);
    background: rgba(21, 30, 55, .92);
}

.na-v4-priority-card.is-selected > span {
    color: #ecffff;
    background: linear-gradient(135deg, rgba(76, 141, 255, .28), rgba(67, 217, 239, .18));
}

.na-v4-context-block {
    margin-top: 28px;
    padding: 22px;
    display: grid;
    grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
    gap: 24px;
    border: 1px solid var(--na-v4-line);
    border-radius: 18px;
    background: rgba(9, 14, 28, .56);
}

.na-v4-context-block .na-public-eyebrow {
    margin-bottom: 10px;
}

.na-v4-context-block h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    line-height: 1.08;
}

.na-v4-context-chips {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
}

.na-v4-context-chip {
    min-height: 38px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--na-v4-line);
    border-radius: 999px;
    color: var(--na-public-muted);
    background: rgba(255, 255, 255, .025);
    font-size: .76rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.na-v4-context-chip span {
    color: #8fbfff;
    font-weight: 900;
}

.na-v4-context-chip:hover,
.na-v4-context-chip.is-selected {
    border-color: rgba(67, 217, 239, .42);
    color: var(--na-public-text);
    background: rgba(67, 217, 239, .08);
}

.na-v4-result-heading {
    max-width: 860px;
    margin-bottom: 28px;
}

.na-v4-result-rank {
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(67, 217, 239, .28);
    border-radius: 999px;
    color: #a8eaff;
    background: rgba(67, 217, 239, .07);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-v4-result-overview {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 17px;
}

.na-v4-profile-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(113, 170, 255, .25);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(76, 141, 255, .18), transparent 48%),
        var(--na-v4-card-strong);
}

.na-v4-profile-emblem {
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(67, 217, 239, .36);
    border-radius: 18px;
    color: #b6f5ff;
    background: rgba(67, 217, 239, .08);
    font-size: 1.45rem;
}

.na-v4-profile-card small,
.na-v4-profile-card > span {
    color: #8fb7ff;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-v4-profile-card strong {
    margin: 8px 0 25px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.na-v4-profile-card b {
    margin: 7px 0 14px;
    font-size: .95rem;
}

.na-v4-profile-card p {
    margin: auto 0 0;
    color: var(--na-v4-copy);
    font-size: .78rem;
    line-height: 1.52;
}

.na-v4-route-map {
    display: grid;
    gap: 9px;
}

.na-v4-route-map article {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    border: 1px solid var(--na-v4-line);
    border-radius: 15px;
    background: var(--na-v4-card);
}

.na-v4-route-index {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #a9dfff;
    background: rgba(76, 141, 255, .09);
    font-size: .75rem;
    font-weight: 900;
}

.na-v4-route-map small {
    color: #8fb7ff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-v4-route-map strong {
    display: block;
    margin: 3px 0 4px;
    font-size: .9rem;
}

.na-v4-route-map p {
    margin: 0;
    color: var(--na-v4-copy);
    font-size: .75rem;
    line-height: 1.45;
}

.na-v4-capability-strip {
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.na-v4-capability-strip article {
    padding: 14px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    border: 1px solid var(--na-v4-line);
    border-radius: 14px;
    background: rgba(10, 15, 30, .54);
}

.na-v4-capability-strip article > span {
    color: #75dff1;
}

.na-v4-capability-strip strong {
    display: block;
    margin-bottom: 4px;
    font-size: .8rem;
}

.na-v4-capability-strip p {
    margin: 0;
    color: var(--na-v4-copy);
    font-size: .7rem;
    line-height: 1.42;
}

.na-v4-static-hero {
    min-height: calc(100vh - 80px);
    padding-top: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr);
    align-items: center;
    gap: 62px;
}

.na-v4-static-copy h1 {
    max-width: 850px;
    font-size: clamp(3rem, 5.8vw, 6.35rem);
    text-wrap: balance;
}

.na-v4-hero-note {
    max-width: 720px;
    margin: 22px 0 0;
    font-size: .83rem;
}

.na-v4-example-profile {
    padding: 20px;
    border: 1px solid rgba(122, 159, 255, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(140, 114, 255, .2), transparent 50%),
        rgba(12, 18, 35, .88);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.na-v4-example-header {
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid var(--na-v4-line);
    color: #93a6c9;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-v4-example-identity {
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.na-v4-example-identity > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #b7f1ff;
    background: rgba(67, 217, 239, .09);
}

.na-v4-example-identity small,
.na-v4-example-output small {
    color: #89b3ff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-v4-example-identity strong {
    display: block;
    margin-top: 4px;
    font-size: 1.12rem;
}

.na-v4-example-profile ul {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.na-v4-example-profile li {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--na-v4-line);
    border-radius: 11px;
    color: var(--na-v4-copy);
    font-size: .76rem;
    background: rgba(255, 255, 255, .02);
}

.na-v4-example-profile li span {
    color: #9cd9ff;
    font-size: .68rem;
    font-weight: 900;
}

.na-v4-example-output {
    margin-top: 14px;
    padding: 13px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(76, 141, 255, .12), rgba(140, 114, 255, .1));
}

.na-v4-example-output strong {
    display: block;
    margin-top: 5px;
    font-size: .78rem;
    line-height: 1.45;
}

.na-v4-dna-section,
.na-v4-content-section,
.na-v4-rewards-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    align-items: center;
    gap: 68px;
}

.na-v4-role-orbit {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
    border: 1px solid var(--na-v4-line);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(76, 141, 255, .15), transparent 48%),
        rgba(10, 15, 30, .44);
}

.na-v4-role-orbit::before,
.na-v4-role-orbit::after {
    content: "";
    position: absolute;
    inset: 15%;
    border: 1px dashed rgba(117, 162, 255, .18);
    border-radius: 50%;
}

.na-v4-role-orbit::after {
    inset: 30%;
}

.na-v4-role-orbit strong {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.25;
}

.na-v4-role-orbit > span {
    position: absolute;
    z-index: 3;
    padding: 8px 12px;
    border: 1px solid rgba(91, 173, 255, .28);
    border-radius: 999px;
    color: #a9d7ff;
    background: rgba(11, 17, 33, .9);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.na-v4-role-orbit > span:nth-child(1) { top: 8%; left: 43%; }
.na-v4-role-orbit > span:nth-child(2) { top: 27%; right: 2%; }
.na-v4-role-orbit > span:nth-child(3) { bottom: 17%; right: 9%; }
.na-v4-role-orbit > span:nth-child(4) { bottom: 8%; left: 34%; }
.na-v4-role-orbit > span:nth-child(5) { top: 34%; left: 1%; }

.na-v4-team-scenario {
    margin-top: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
    align-items: stretch;
    gap: 15px;
}

.na-v4-team-card {
    padding: 25px;
    border: 1px solid var(--na-v4-line);
    border-radius: 20px;
    background: var(--na-v4-card);
}

.na-v4-team-card.is-established {
    background:
        radial-gradient(circle at 0% 0%, rgba(67, 217, 239, .13), transparent 48%),
        var(--na-v4-card);
}

.na-v4-team-card.is-building {
    background:
        radial-gradient(circle at 100% 0%, rgba(140, 114, 255, .15), transparent 48%),
        var(--na-v4-card);
}

.na-v4-team-status {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9cb7e8;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-v4-team-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--na-public-cyan);
    box-shadow: 0 0 14px rgba(67, 217, 239, .55);
}

.na-v4-team-card.is-building .na-v4-team-status span {
    background: var(--na-public-purple);
    box-shadow: 0 0 14px rgba(140, 114, 255, .55);
}

.na-v4-team-card h3 {
    max-width: 430px;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
}

.na-v4-team-card ul {
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.na-v4-team-card li {
    padding-left: 18px;
    position: relative;
    color: var(--na-v4-copy);
    font-size: .82rem;
    line-height: 1.5;
}

.na-v4-team-card li::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: .2em;
    color: #71dff1;
    font-size: .55rem;
}

.na-v4-scenario-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8fa4cc;
    text-align: center;
}

.na-v4-scenario-bridge span {
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-v4-scenario-bridge b {
    margin: 15px 0;
    color: #8edfff;
    font-size: 1.5rem;
}

.na-v4-scenario-bridge small {
    max-width: 130px;
    line-height: 1.45;
}

.na-v4-content-moments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.na-v4-content-moments article,
.na-v4-level-grid article,
.na-v4-platform-area {
    padding: 20px;
    border: 1px solid var(--na-v4-line);
    border-radius: 17px;
    background: var(--na-v4-card);
}

.na-v4-content-moments strong,
.na-v4-level-grid strong,
.na-v4-platform-area strong {
    display: block;
    margin: 8px 0;
    font-size: 1rem;
}

.na-v4-content-moments p,
.na-v4-level-grid p,
.na-v4-platform-area p {
    margin: 0;
    color: var(--na-v4-copy);
    font-size: .77rem;
    line-height: 1.5;
}

.na-v4-level-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.na-v4-level-grid article {
    position: relative;
    min-height: 210px;
}

.na-v4-level-grid article > span {
    display: block;
    margin-bottom: 28px;
    color: rgba(141, 204, 255, .44);
    font-size: 2.2rem;
    font-weight: 900;
}

.na-v4-platform-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.na-v4-platform-area {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    color: inherit;
    transition: transform .22s ease, border-color .22s ease;
}

.na-v4-platform-area > span {
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #a6e7ff;
    background: rgba(67, 217, 239, .08);
}

.na-v4-platform-area b {
    margin-top: auto;
    padding-top: 22px;
    color: #94dfff;
    font-size: .72rem;
}

.na-v4-platform-area:hover {
    transform: translateY(-4px);
    border-color: rgba(67, 217, 239, .4);
}

.na-v4-rewards-section {
    padding-top: 82px;
    padding-bottom: 82px;
}

.na-v4-reward-flow {
    min-height: 240px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid rgba(255, 200, 107, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 200, 107, .12), transparent 58%),
        rgba(15, 18, 31, .78);
}

.na-v4-reward-flow span {
    padding: 10px 12px;
    border: 1px solid rgba(255, 200, 107, .23);
    border-radius: 999px;
    color: #ffe0a5;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.na-v4-reward-flow b {
    color: rgba(255, 220, 154, .52);
}

.na-v4-final-cta {
    max-width: 960px;
    text-align: center;
}

.na-v4-final-cta .na-public-eyebrow {
    justify-content: center;
}

.na-v4-final-cta p {
    max-width: 720px;
    margin: 0 auto 28px;
}

.na-v4-footer {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

html[data-na-theme="light"] .na-v4-shell {
    --na-v4-card: rgba(255, 255, 255, .8);
    --na-v4-card-strong: rgba(255, 255, 255, .94);
    --na-v4-line: rgba(63, 88, 145, .16);
    --na-v4-copy: #596680;
}

html[data-na-theme="light"] .na-v4-build-card,
html[data-na-theme="light"] .na-v4-priority-card,
html[data-na-theme="light"] .na-v4-context-block,
html[data-na-theme="light"] .na-v4-profile-card,
html[data-na-theme="light"] .na-v4-route-map article,
html[data-na-theme="light"] .na-v4-capability-strip article,
html[data-na-theme="light"] .na-v4-example-profile,
html[data-na-theme="light"] .na-v4-role-orbit,
html[data-na-theme="light"] .na-v4-team-card,
html[data-na-theme="light"] .na-v4-content-moments article,
html[data-na-theme="light"] .na-v4-level-grid article,
html[data-na-theme="light"] .na-v4-platform-area,
html[data-na-theme="light"] .na-v4-reward-flow {
    box-shadow: 0 18px 45px rgba(52, 73, 120, .08);
}

html[data-na-theme="light"] .na-v4-build-card:hover,
html[data-na-theme="light"] .na-v4-build-card.is-selected,
html[data-na-theme="light"] .na-v4-priority-card:hover,
html[data-na-theme="light"] .na-v4-priority-card.is-selected {
    background-color: rgba(246, 250, 255, .98);
}

html[data-na-theme="light"] .na-v4-role-orbit > span {
    background: rgba(255, 255, 255, .94);
}

html[data-na-theme="light"] .na-v4-reward-flow span {
    color: #8a5c00;
}

@media (max-width: 1100px) {
    .na-v4-build-grid,
    .na-v4-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .na-v4-result-overview,
    .na-v4-static-hero,
    .na-v4-dna-section,
    .na-v4-content-section,
    .na-v4-rewards-section {
        grid-template-columns: 1fr;
    }

    .na-v4-example-profile {
        width: min(620px, 100%);
    }

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

    .na-v4-scenario-bridge {
        min-height: 90px;
    }

    .na-v4-scenario-bridge b {
        transform: rotate(90deg);
    }

    .na-v4-level-grid,
    .na-v4-platform-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .na-v4-journey {
        padding-top: 62px;
    }

    .na-v4-intro h1,
    .na-v4-result-heading h1 {
        font-size: clamp(2.25rem, 11vw, 3.45rem);
    }

    .na-v4-build-grid,
    .na-v4-priority-grid,
    .na-v4-capability-strip,
    .na-v4-content-moments,
    .na-v4-level-grid,
    .na-v4-platform-grid {
        grid-template-columns: 1fr;
    }

    .na-v4-build-card {
        min-height: 176px;
    }

    .na-v4-context-block {
        grid-template-columns: 1fr;
    }

    .na-v4-step-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .na-v4-step-footer .na-public-button {
        width: 100%;
    }

    .na-v4-result-overview {
        grid-template-columns: 1fr;
    }

    .na-v4-role-orbit {
        min-height: 330px;
    }

    .na-v4-static-copy h1 {
        font-size: clamp(2.7rem, 13vw, 4.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-v4-build-card,
    .na-v4-priority-card,
    .na-v4-platform-area {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Landing V4.1 · Platform Explorer
   Personalized platform map aligned with the Hybrid Builder experience.
   -------------------------------------------------------------------------- */

.na-platform-v41-shell {
    --na-platform-card: rgba(14, 20, 38, .76);
    --na-platform-card-strong: rgba(17, 23, 43, .94);
    --na-platform-copy: #aeb7cf;
    --na-platform-line: rgba(143, 167, 237, .16);
}

.na-platform-v41-shell > main {
    min-height: 100vh;
    padding-top: 80px;
}

.na-platform-v41-shell button {
    font: inherit;
}

.na-platform-v41-hero {
    min-height: calc(100vh - 80px);
    padding-top: 72px;
    padding-bottom: 82px;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(480px, 1.04fr);
    align-items: center;
    gap: 58px;
}

.na-platform-v41-hero-copy h1 {
    max-width: 850px;
    font-size: clamp(3.15rem, 5.6vw, 6.25rem);
    text-wrap: balance;
}

.na-platform-v41-hero-copy .na-public-lead {
    max-width: 790px;
}

.na-platform-v41-hero-note {
    max-width: 680px;
    margin: 24px 0 0;
    font-size: .82rem;
}

.na-platform-v41-profile-system {
    position: relative;
    min-height: 570px;
    isolation: isolate;
}

.na-platform-v41-system-orbit,
.na-platform-v41-system-ring {
    position: absolute;
    inset: 0;
}

.na-platform-v41-system-ring {
    left: 50%;
    top: 50%;
    border: 1px solid rgba(117, 158, 255, .22);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
}

.na-platform-v41-system-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border-top: 2px solid rgba(67, 217, 239, .6);
    animation: na-platform-v41-spin 14s linear infinite;
}

.na-platform-v41-system-ring.ring-one {
    width: min(530px, 94%);
    height: 350px;
}

.na-platform-v41-system-ring.ring-two {
    width: min(380px, 72%);
    height: 250px;
    opacity: .66;
    transform: translate(-50%, -50%) rotate(18deg);
}

.na-platform-v41-system-ring.ring-two::after {
    animation-direction: reverse;
    animation-duration: 18s;
}

.na-platform-v41-profile-core {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 238px;
    min-height: 178px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(116, 157, 255, .34);
    border-radius: 28px;
    background:
        radial-gradient(circle at 30% 15%, rgba(80, 133, 255, .23), transparent 55%),
        rgba(12, 17, 33, .92);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .4), 0 0 70px rgba(83, 105, 255, .18);
    transform: translate(-50%, -50%);
}

.na-platform-v41-profile-core small,
.na-platform-v41-decision-card small,
.na-platform-v41-result-head small,
.na-platform-v41-result-meta small,
.na-platform-v41-recommended > small {
    color: #8faeff;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-platform-v41-profile-core strong {
    margin: 12px 0 8px;
    font-size: 1.28rem;
    letter-spacing: -.03em;
}

.na-platform-v41-profile-core span {
    color: var(--na-public-muted);
    font-size: .75rem;
}

.na-platform-v41-role {
    position: absolute;
    padding: 9px 13px;
    border: 1px solid var(--na-platform-line);
    border-radius: 999px;
    color: #c9d8ff;
    background: rgba(12, 17, 33, .84);
    backdrop-filter: blur(12px);
    font-size: .68rem;
    font-weight: 850;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
    animation: na-platform-v41-float 6s ease-in-out infinite;
}

.na-platform-v41-role.role-creator { left: 4%; top: 21%; }
.na-platform-v41-role.role-club { right: 3%; top: 23%; animation-delay: -1.2s; }
.na-platform-v41-role.role-captain { left: 0; bottom: 27%; animation-delay: -2.4s; }
.na-platform-v41-role.role-organizer { right: 0; bottom: 29%; animation-delay: -3.6s; }
.na-platform-v41-role.role-player { left: 41%; top: 4%; animation-delay: -4.8s; }

.na-platform-v41-decision-card {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: min(390px, 82%);
    padding: 19px 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(67, 217, 239, .24);
    border-radius: 18px;
    background: rgba(10, 16, 31, .87);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
    transform: translateX(-50%);
}

.na-platform-v41-decision-card strong {
    font-size: .92rem;
}

.na-platform-v41-decision-card span {
    color: #91a3c5;
    font-size: .7rem;
}

.na-platform-v41-explorer,
.na-platform-v41-complete-map {
    padding-top: 76px;
}

.na-platform-v41-section-heading {
    margin-bottom: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.na-platform-v41-section-heading > div {
    max-width: 840px;
}

.na-platform-v41-section-heading h2 {
    margin-bottom: 14px;
    font-size: clamp(2.25rem, 4vw, 4.15rem);
}

.na-platform-v41-section-heading p {
    max-width: 760px;
    margin-bottom: 0;
}

.na-platform-v41-view-toggle {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    border: 1px solid var(--na-public-border);
    border-radius: 12px;
    color: var(--na-public-text);
    background: rgba(255, 255, 255, .035);
    font-size: .73rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.na-platform-v41-view-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(67, 217, 239, .4);
    background: rgba(67, 217, 239, .06);
}

.na-platform-v41-explorer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: start;
    gap: 24px;
}

.na-platform-v41-controls {
    display: grid;
    gap: 18px;
}

.na-platform-v41-control-block,
.na-platform-v41-result-panel {
    border: 1px solid var(--na-platform-line);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(76, 141, 255, .04), transparent 50%),
        var(--na-platform-card);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .2);
}

.na-platform-v41-control-block {
    padding: 23px;
}

.na-platform-v41-control-title {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.na-platform-v41-control-title > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(76, 141, 255, .24);
    border-radius: 11px;
    color: #91b1ff;
    background: rgba(76, 141, 255, .07);
    font-size: .68rem;
    font-weight: 900;
}

.na-platform-v41-control-title small {
    display: block;
    margin-bottom: 6px;
    color: #8fa7dc;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-platform-v41-control-title h3 {
    margin: 0;
    font-size: 1.1rem;
}

.na-platform-v41-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.na-platform-v41-project-card {
    --platform-card-accent: 76, 141, 255;
    position: relative;
    min-height: 188px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--na-platform-line);
    border-radius: 17px;
    color: var(--na-public-text);
    background:
        radial-gradient(circle at 0 0, rgba(var(--platform-card-accent), .11), transparent 50%),
        rgba(255, 255, 255, .018);
    cursor: pointer;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.na-platform-v41-project-card:nth-child(2) { --platform-card-accent: 140, 114, 255; }
.na-platform-v41-project-card:nth-child(3) { --platform-card-accent: 67, 217, 239; }
.na-platform-v41-project-card:nth-child(4) { --platform-card-accent: 255, 190, 92; }
.na-platform-v41-project-card:nth-child(5) { --platform-card-accent: 231, 109, 255; }

.na-platform-v41-project-card:hover,
.na-platform-v41-project-card.is-selected {
    transform: translateY(-3px);
    border-color: rgba(var(--platform-card-accent), .48);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18), 0 0 26px rgba(var(--platform-card-accent), .08);
}

.na-platform-v41-project-card.is-selected {
    background:
        radial-gradient(circle at 0 0, rgba(var(--platform-card-accent), .2), transparent 55%),
        rgba(var(--platform-card-accent), .045);
}

.na-platform-v41-project-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--platform-card-accent), .25);
    border-radius: 11px;
    color: rgb(var(--platform-card-accent));
    background: rgba(var(--platform-card-accent), .08);
}

.na-platform-v41-project-card small {
    margin-bottom: 7px;
    color: rgba(var(--platform-card-accent), .9);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-platform-v41-project-card strong {
    margin-bottom: 7px;
    font-size: .94rem;
}

.na-platform-v41-project-card p {
    margin: 0;
    color: var(--na-platform-copy);
    font-size: .72rem;
    line-height: 1.48;
}

.na-platform-v41-project-card > b {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--platform-card-accent), .3);
    border-radius: 8px;
    color: rgb(var(--platform-card-accent));
    font-size: .72rem;
}

.na-platform-v41-priority-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.na-platform-v41-priority-option {
    min-height: 76px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border: 1px solid var(--na-platform-line);
    border-radius: 15px;
    color: var(--na-public-text);
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.na-platform-v41-priority-option:hover,
.na-platform-v41-priority-option.is-selected {
    transform: translateY(-2px);
    border-color: rgba(67, 217, 239, .38);
    background: rgba(67, 217, 239, .055);
}

.na-platform-v41-priority-option > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #75ddf2;
    background: rgba(67, 217, 239, .08);
}

.na-platform-v41-priority-option div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.na-platform-v41-priority-option strong {
    font-size: .79rem;
}

.na-platform-v41-priority-option small {
    color: var(--na-platform-copy);
    font-size: .64rem;
    line-height: 1.35;
}

.na-platform-v41-result-panel {
    position: sticky;
    top: 92px;
    min-height: 680px;
    padding: 24px;
    background:
        radial-gradient(circle at 90% 0, rgba(140, 114, 255, .12), transparent 45%),
        var(--na-platform-card-strong);
}

.na-platform-v41-empty-result {
    min-height: 630px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.na-platform-v41-empty-result > span {
    width: 70px;
    height: 70px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(76, 141, 255, .26);
    border-radius: 22px;
    color: #8fb1ff;
    background: rgba(76, 141, 255, .08);
    font-size: 1.8rem;
    animation: na-platform-v41-pulse 5s ease-in-out infinite;
}

.na-platform-v41-empty-result small {
    margin-bottom: 13px;
    color: #8faeff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-platform-v41-empty-result h3 {
    max-width: 330px;
    font-size: 1.45rem;
}

.na-platform-v41-empty-result p {
    max-width: 360px;
    margin-bottom: 0;
    font-size: .78rem;
}

.na-platform-v41-result-head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--na-platform-line);
}

.na-platform-v41-result-head > span {
    float: right;
    padding: 6px 9px;
    border: 1px solid rgba(140, 114, 255, .28);
    border-radius: 999px;
    color: #bfb1ff;
    background: rgba(140, 114, 255, .08);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.na-platform-v41-result-head h3 {
    margin: 11px 0 8px;
    font-size: 1.65rem;
}

.na-platform-v41-result-head p {
    margin-bottom: 0;
    font-size: .75rem;
    line-height: 1.55;
}

.na-platform-v41-result-meta {
    margin: 14px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.na-platform-v41-result-meta div {
    min-height: 70px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--na-platform-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .02);
}

.na-platform-v41-result-meta strong {
    font-size: .68rem;
    line-height: 1.38;
}

.na-platform-v41-route {
    display: grid;
    gap: 6px;
}

.na-platform-v41-route article {
    position: relative;
    min-height: 74px;
    padding: 10px 10px 10px 49px;
    display: flex;
    align-items: center;
    border: 1px solid var(--na-platform-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .018);
}

.na-platform-v41-route article > span {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #9ebcff;
    background: rgba(76, 141, 255, .08);
    font-size: .56rem;
    font-weight: 900;
    transform: translateY(-50%);
}

.na-platform-v41-route article small {
    display: block;
    margin-bottom: 3px;
    color: #7f9bd7;
    font-size: .51rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-platform-v41-route article strong {
    display: block;
    font-size: .71rem;
}

.na-platform-v41-route article p {
    margin: 3px 0 0;
    font-size: .61rem;
    line-height: 1.35;
}

.na-platform-v41-recommended {
    margin-top: 17px;
}

.na-platform-v41-recommended > small {
    display: block;
    margin-bottom: 9px;
}

.na-platform-v41-recommended > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.na-platform-v41-recommended a {
    min-height: 64px;
    padding: 9px;
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--na-platform-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
    transition: transform .2s ease, border-color .2s ease;
}

.na-platform-v41-recommended a:hover {
    transform: translateY(-2px);
    border-color: rgba(67, 217, 239, .35);
}

.na-platform-v41-recommended a > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #7fe4f4;
    background: rgba(67, 217, 239, .08);
    font-size: .68rem;
}

.na-platform-v41-recommended a strong,
.na-platform-v41-recommended a small {
    display: block;
}

.na-platform-v41-recommended a strong {
    margin-bottom: 3px;
    font-size: .63rem;
}

.na-platform-v41-recommended a small {
    color: var(--na-platform-copy);
    font-size: .53rem;
    line-height: 1.25;
}

.na-platform-v41-recommended a > b {
    color: #80dff0;
    font-size: .68rem;
}

.na-platform-v41-map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.na-platform-v41-map-card {
    --map-accent: 76, 141, 255;
    min-height: 310px;
    padding: 23px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--na-platform-line);
    border-radius: 21px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--map-accent), .11), transparent 48%),
        var(--na-platform-card);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.na-platform-v41-map-card:nth-child(2) { --map-accent: 231, 109, 255; }
.na-platform-v41-map-card:nth-child(3) { --map-accent: 140, 114, 255; }
.na-platform-v41-map-card:nth-child(4) { --map-accent: 67, 217, 239; }
.na-platform-v41-map-card:nth-child(5) { --map-accent: 255, 190, 92; }
.na-platform-v41-map-card:nth-child(6) { --map-accent: 106, 228, 161; }
.na-platform-v41-map-card:nth-child(7) { --map-accent: 255, 200, 107; }

.na-platform-v41-map-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--map-accent), .42);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .23), 0 0 28px rgba(var(--map-accent), .07);
}

.na-platform-v41-map-card > span {
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--map-accent), .28);
    border-radius: 13px;
    color: rgb(var(--map-accent));
    background: rgba(var(--map-accent), .08);
}

.na-platform-v41-map-card > small {
    margin-bottom: 9px;
    color: rgba(var(--map-accent), .92);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-platform-v41-map-card h3 {
    margin-bottom: 10px;
    font-size: 1.18rem;
}

.na-platform-v41-map-card p {
    margin-bottom: 18px;
    font-size: .74rem;
    line-height: 1.52;
}

.na-platform-v41-map-card > div {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.na-platform-v41-map-card > div b {
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--na-platform-copy);
    background: rgba(255, 255, 255, .035);
    font-size: .56rem;
}

.na-platform-v41-map-card > strong {
    margin-top: 19px;
    color: rgba(var(--map-accent), .94);
    font-size: .68rem;
}

.na-platform-v41-dna {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    align-items: center;
    gap: 70px;
}

.na-platform-v41-dna-copy p {
    max-width: 680px;
}

.na-platform-v41-decision-flow {
    display: grid;
    gap: 9px;
}

.na-platform-v41-decision-flow article {
    min-height: 116px;
    padding: 17px;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: start;
    gap: 15px;
    border: 1px solid var(--na-platform-line);
    border-radius: 17px;
    background: var(--na-platform-card);
}

.na-platform-v41-decision-flow article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #9ebcff;
    background: rgba(76, 141, 255, .08);
    font-size: .65rem;
    font-weight: 900;
}

.na-platform-v41-decision-flow small {
    display: block;
    margin-bottom: 5px;
    color: #7f9bd7;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-platform-v41-decision-flow strong {
    display: block;
    margin-bottom: 5px;
    font-size: .91rem;
}

.na-platform-v41-decision-flow p {
    margin: 0;
    font-size: .7rem;
    line-height: 1.45;
}

.na-platform-v41-spotlight {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    align-items: center;
    gap: 70px;
}

.na-platform-v41-spotlight-copy p {
    max-width: 670px;
}

.na-platform-v41-moment-list {
    margin: 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.na-platform-v41-moment-list span {
    padding: 10px 12px;
    border: 1px solid var(--na-platform-line);
    border-radius: 11px;
    color: var(--na-platform-copy);
    background: rgba(255, 255, 255, .025);
    font-size: .68rem;
}

.na-platform-v41-content-loop {
    position: relative;
    min-height: 500px;
}

.na-platform-v41-content-loop::before,
.na-platform-v41-content-loop::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px dashed rgba(231, 109, 255, .25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.na-platform-v41-content-loop::before { width: 440px; height: 330px; }
.na-platform-v41-content-loop::after { width: 310px; height: 220px; }

.na-platform-v41-content-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    min-height: 160px;
    padding: 23px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(231, 109, 255, .3);
    border-radius: 24px;
    background: rgba(19, 15, 35, .9);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .32), 0 0 50px rgba(231, 109, 255, .1);
    transform: translate(-50%, -50%);
}

.na-platform-v41-content-core small,
.na-platform-v41-content-loop article small {
    color: #e8a3f5;
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-platform-v41-content-core strong {
    margin: 10px 0 7px;
    font-size: 1.05rem;
}

.na-platform-v41-content-core span {
    color: var(--na-platform-copy);
    font-size: .67rem;
}

.na-platform-v41-content-loop article {
    position: absolute;
    width: 180px;
    min-height: 88px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--na-platform-line);
    border-radius: 15px;
    background: rgba(14, 18, 34, .85);
    backdrop-filter: blur(12px);
    animation: na-platform-v41-float 6s ease-in-out infinite;
}

.na-platform-v41-content-loop article strong {
    font-size: .76rem;
}

.na-platform-v41-content-loop .moment-before { left: 4%; top: 16%; }
.na-platform-v41-content-loop .moment-live { right: 2%; top: 20%; animation-delay: -1.5s; }
.na-platform-v41-content-loop .moment-result { left: 8%; bottom: 14%; animation-delay: -3s; }
.na-platform-v41-content-loop .moment-growth { right: 4%; bottom: 17%; animation-delay: -4.5s; }

.na-platform-v41-clubs {
    grid-template-columns: minmax(500px, 1.08fr) minmax(0, .92fr);
}

.na-platform-v41-team-system {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 13px;
}

.na-platform-v41-team-system article {
    min-height: 270px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--na-platform-line);
    border-radius: 22px;
    background: var(--na-platform-card);
}

.na-platform-v41-team-system article.is-established {
    background:
        radial-gradient(circle at 15% 10%, rgba(76, 141, 255, .15), transparent 60%),
        var(--na-platform-card);
}

.na-platform-v41-team-system article.is-building {
    border-style: dashed;
    background:
        radial-gradient(circle at 85% 10%, rgba(67, 217, 239, .12), transparent 60%),
        var(--na-platform-card);
}

.na-platform-v41-team-system article small {
    margin-bottom: 10px;
    color: #86a9ec;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.na-platform-v41-team-system article strong {
    margin-bottom: 10px;
    font-size: 1.08rem;
}

.na-platform-v41-team-system article span {
    color: var(--na-platform-copy);
    font-size: .7rem;
    line-height: 1.5;
}

.na-platform-v41-team-link {
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.na-platform-v41-team-link span {
    width: 1px;
    height: 60px;
    background: linear-gradient(transparent, rgba(67, 217, 239, .6), transparent);
}

.na-platform-v41-team-link b {
    writing-mode: vertical-rl;
    color: #7aaac2;
    font-size: .5rem;
    letter-spacing: .12em;
}

.na-platform-v41-competition {
    padding-top: 82px;
    padding-bottom: 82px;
}

.na-platform-v41-competition-heading {
    max-width: 850px;
    margin-bottom: 34px;
}

.na-platform-v41-competition-path {
    display: grid;
    grid-template-columns: repeat(9, auto);
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.na-platform-v41-competition-path article {
    width: 178px;
    min-height: 132px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--na-platform-line);
    border-radius: 16px;
    background: var(--na-platform-card);
}

.na-platform-v41-competition-path article > span {
    margin-bottom: 20px;
    color: #78dff0;
    font-size: .58rem;
    font-weight: 900;
}

.na-platform-v41-competition-path article strong {
    margin-bottom: 7px;
    font-size: .8rem;
}

.na-platform-v41-competition-path article small {
    color: var(--na-platform-copy);
    font-size: .61rem;
    line-height: 1.42;
}

.na-platform-v41-competition-path i {
    width: 20px;
    height: 1px;
    background: rgba(67, 217, 239, .35);
}

.na-platform-v41-rewards {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: 70px;
}

.na-platform-v41-reward-path {
    min-height: 230px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    border: 1px solid rgba(255, 200, 107, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 200, 107, .12), transparent 58%),
        var(--na-platform-card);
}

.na-platform-v41-reward-path span {
    padding: 10px 12px;
    border: 1px solid rgba(255, 200, 107, .24);
    border-radius: 999px;
    color: #ffe0a5;
    background: rgba(255, 200, 107, .04);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.na-platform-v41-reward-path b {
    color: rgba(255, 220, 154, .5);
}

.na-platform-v41-final {
    max-width: 980px;
    text-align: center;
}

.na-platform-v41-final .na-public-eyebrow {
    justify-content: center;
}

.na-platform-v41-final h2 {
    font-size: clamp(2.35rem, 4vw, 4.25rem);
}

.na-platform-v41-final p {
    max-width: 760px;
    margin: 0 auto 28px;
}

html[data-na-theme="light"] .na-platform-v41-shell {
    --na-platform-card: rgba(255, 255, 255, .78);
    --na-platform-card-strong: rgba(255, 255, 255, .94);
    --na-platform-copy: #5a6882;
    --na-platform-line: rgba(54, 76, 125, .16);
}

html[data-na-theme="light"] .na-platform-v41-profile-core,
html[data-na-theme="light"] .na-platform-v41-role,
html[data-na-theme="light"] .na-platform-v41-decision-card,
html[data-na-theme="light"] .na-platform-v41-content-core,
html[data-na-theme="light"] .na-platform-v41-content-loop article {
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 50px rgba(48, 66, 108, .12);
}

html[data-na-theme="light"] .na-platform-v41-project-card,
html[data-na-theme="light"] .na-platform-v41-priority-option,
html[data-na-theme="light"] .na-platform-v41-result-meta div,
html[data-na-theme="light"] .na-platform-v41-route article,
html[data-na-theme="light"] .na-platform-v41-recommended a,
html[data-na-theme="light"] .na-platform-v41-moment-list span,
html[data-na-theme="light"] .na-platform-v41-map-card > div b {
    background-color: rgba(245, 249, 255, .76);
}

html[data-na-theme="light"] .na-platform-v41-project-card:hover,
html[data-na-theme="light"] .na-platform-v41-project-card.is-selected,
html[data-na-theme="light"] .na-platform-v41-priority-option:hover,
html[data-na-theme="light"] .na-platform-v41-priority-option.is-selected {
    background-color: rgba(248, 251, 255, .98);
}

html[data-na-theme="light"] .na-platform-v41-reward-path span {
    color: #885c08;
}

@keyframes na-platform-v41-spin {
    to { transform: rotate(360deg); }
}

@keyframes na-platform-v41-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes na-platform-v41-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(76, 141, 255, 0); }
    50% { transform: scale(1.04); box-shadow: 0 0 34px rgba(76, 141, 255, .12); }
}

@media (max-width: 1180px) {
    .na-platform-v41-hero,
    .na-platform-v41-dna,
    .na-platform-v41-spotlight,
    .na-platform-v41-clubs,
    .na-platform-v41-rewards {
        grid-template-columns: 1fr;
    }

    .na-platform-v41-profile-system,
    .na-platform-v41-content-loop {
        width: min(680px, 100%);
        margin: 0 auto;
    }

    .na-platform-v41-explorer-layout {
        grid-template-columns: 1fr;
    }

    .na-platform-v41-result-panel {
        position: static;
        min-height: auto;
    }

    .na-platform-v41-empty-result {
        min-height: 340px;
    }

    .na-platform-v41-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .na-platform-v41-clubs .na-platform-v41-team-system {
        order: 2;
    }

    .na-platform-v41-competition-path {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .na-platform-v41-competition-path article {
        width: 100%;
        min-height: 105px;
    }

    .na-platform-v41-competition-path i {
        width: 1px;
        height: 16px;
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    .na-platform-v41-shell > main {
        padding-top: 70px;
    }

    .na-platform-v41-hero {
        min-height: auto;
        padding-top: 58px;
        gap: 28px;
    }

    .na-platform-v41-hero-copy h1 {
        font-size: clamp(2.65rem, 13vw, 4.25rem);
    }

    .na-platform-v41-profile-system {
        min-height: 470px;
        transform: scale(.92);
    }

    .na-platform-v41-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .na-platform-v41-project-grid,
    .na-platform-v41-priority-list,
    .na-platform-v41-result-meta,
    .na-platform-v41-recommended > div,
    .na-platform-v41-map-grid,
    .na-platform-v41-moment-list {
        grid-template-columns: 1fr;
    }

    .na-platform-v41-project-card {
        min-height: 172px;
    }

    .na-platform-v41-dna,
    .na-platform-v41-spotlight,
    .na-platform-v41-clubs,
    .na-platform-v41-rewards {
        gap: 34px;
    }

    .na-platform-v41-content-loop {
        min-height: 430px;
        transform: scale(.9);
    }

    .na-platform-v41-team-system {
        grid-template-columns: 1fr;
    }

    .na-platform-v41-team-link {
        min-height: 65px;
        flex-direction: row;
        justify-content: center;
    }

    .na-platform-v41-team-link span {
        width: 60px;
        height: 1px;
    }

    .na-platform-v41-team-link b {
        writing-mode: horizontal-tb;
    }
}

@media (max-width: 520px) {
    .na-platform-v41-profile-system {
        min-height: 420px;
        margin-top: -18px;
        transform: scale(.8);
        transform-origin: top center;
    }

    .na-platform-v41-role.role-captain,
    .na-platform-v41-role.role-organizer {
        bottom: 20%;
    }

    .na-platform-v41-control-block,
    .na-platform-v41-result-panel {
        padding: 17px;
        border-radius: 18px;
    }

    .na-platform-v41-map-card {
        min-height: 270px;
    }

    .na-platform-v41-content-loop {
        min-height: 390px;
        margin-top: -20px;
        transform: scale(.78);
        transform-origin: top center;
    }

    .na-platform-v41-content-loop article {
        width: 160px;
    }

    .na-platform-v41-team-system article {
        min-height: 220px;
    }

    .na-platform-v41-reward-path {
        min-height: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-platform-v41-system-ring::after,
    .na-platform-v41-role,
    .na-platform-v41-content-loop article,
    .na-platform-v41-empty-result > span {
        animation: none !important;
    }

    .na-platform-v41-project-card,
    .na-platform-v41-priority-option,
    .na-platform-v41-map-card,
    .na-platform-v41-view-toggle,
    .na-platform-v41-recommended a {
        transition: none !important;
    }
}


/* ========================================================================== 
   V4.2 · Premios físicos public highlight
   Keeps the public route stable while replacing the opaque "Rewards" label
   with a Spanish proposition visitors understand immediately.
   ========================================================================== */

.na-public-links .na-public-reward-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    color: var(--na-public-muted);
}

.na-public-links .na-public-reward-link:hover,
.na-public-links .na-public-reward-link.is-active {
    color: var(--na-public-text);
}

.na-public-nav-badge,
.na-physical-reward-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid rgba(255, 205, 103, .36);
    background: linear-gradient(135deg, rgba(255, 190, 72, .22), rgba(255, 120, 75, .16));
    color: #ffd982;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 7px 22px rgba(255, 175, 54, .12), inset 0 1px rgba(255, 255, 255, .12);
}

.na-public-nav-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    left: auto;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: .42rem;
    line-height: 1;
    transform: translate3d(0, 0, 0) scale(.96);
    transform-origin: center;
    white-space: nowrap;
    pointer-events: none;
    animation: naRewardBadgeFloat 2.6s ease-in-out infinite;
}

.na-physical-reward-badge {
    margin: 0 0 12px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .62rem;
    line-height: 1;
}

.na-platform-v41-rewards {
    position: relative;
    isolation: isolate;
    border-color: rgba(255, 202, 103, .25);
    background:
        radial-gradient(circle at 84% 20%, rgba(255, 195, 84, .13), transparent 24rem),
        linear-gradient(135deg, rgba(22, 20, 31, .9), rgba(13, 17, 31, .76));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 239, 201, .06);
}

.na-platform-v41-rewards::after {
    content: "PIEZAS REALES · HISTORIA DIGITAL";
    position: absolute;
    right: 28px;
    top: 24px;
    z-index: -1;
    color: rgba(255, 218, 143, .07);
    font-size: clamp(1.3rem, 3vw, 3.6rem);
    font-weight: 950;
    letter-spacing: .05em;
    pointer-events: none;
}

.na-v4-platform-area[href="/platform/winners-rewards"],
.na-platform-v41-map-card[href="/platform/winners-rewards"],
.na-platform-v41-recommended a[href="/platform/winners-rewards"] {
    border-color: rgba(255, 202, 103, .27);
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 192, 71, .14), transparent 13rem),
        rgba(18, 21, 36, .72);
}

.na-v4-platform-area[href="/platform/winners-rewards"]::before,
.na-platform-v41-map-card[href="/platform/winners-rewards"]::before {
    content: "NUEVO";
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 202, 103, .3);
    border-radius: 999px;
    background: rgba(255, 187, 66, .12);
    color: #ffd982;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-v4-platform-area[href="/platform/winners-rewards"],
.na-platform-v41-map-card[href="/platform/winners-rewards"] {
    position: relative;
}

@keyframes naRewardBadgeFloat {
    0%, 100% {
        opacity: .78;
        transform: translate3d(0, 1px, 0) scale(.96);
        box-shadow: 0 5px 15px rgba(255, 176, 52, .08), inset 0 1px rgba(255, 255, 255, .12);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, -2px, 0) scale(1.04);
        box-shadow: 0 8px 23px rgba(255, 176, 52, .24), inset 0 1px rgba(255, 255, 255, .16);
    }
}

html[data-na-theme="light"] .na-public-links .na-public-reward-link {
    color: var(--na-public-muted);
}

html[data-na-theme="light"] .na-public-links .na-public-reward-link:hover,
html[data-na-theme="light"] .na-public-links .na-public-reward-link.is-active {
    color: var(--na-public-text);
}

html[data-na-theme="light"] .na-public-nav-badge,
html[data-na-theme="light"] .na-physical-reward-badge {
    border-color: rgba(172, 105, 0, .24);
    background: linear-gradient(135deg, rgba(255, 190, 58, .24), rgba(255, 143, 65, .14));
    color: #855100;
    box-shadow: 0 7px 20px rgba(167, 102, 0, .11), inset 0 1px rgba(255, 255, 255, .65);
}

html[data-na-theme="light"] .na-platform-v41-rewards {
    border-color: rgba(166, 105, 0, .18);
    background:
        radial-gradient(circle at 84% 20%, rgba(255, 185, 54, .13), transparent 24rem),
        linear-gradient(135deg, rgba(255, 252, 242, .94), rgba(247, 249, 255, .9));
    box-shadow: 0 28px 75px rgba(56, 46, 25, .09), inset 0 1px rgba(255, 255, 255, .78);
}

html[data-na-theme="light"] .na-platform-v41-rewards::after {
    color: rgba(137, 85, 0, .055);
}

html[data-na-theme="light"] .na-v4-platform-area[href="/platform/winners-rewards"],
html[data-na-theme="light"] .na-platform-v41-map-card[href="/platform/winners-rewards"],
html[data-na-theme="light"] .na-platform-v41-recommended a[href="/platform/winners-rewards"] {
    border-color: rgba(169, 106, 0, .2);
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 188, 54, .13), transparent 13rem),
        rgba(255, 253, 247, .82);
}

html[data-na-theme="light"] .na-v4-platform-area[href="/platform/winners-rewards"]::before,
html[data-na-theme="light"] .na-platform-v41-map-card[href="/platform/winners-rewards"]::before {
    border-color: rgba(158, 96, 0, .22);
    background: rgba(255, 183, 46, .17);
    color: #805000;
}

@media (max-width: 1180px) {
    .na-public-nav-badge {
        display: none;
    }
}

@media (max-width: 780px) {
    .na-platform-v41-rewards::after {
        right: 18px;
        top: 18px;
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-public-nav-badge {
        animation: none;
        transform: none;
    }
}

/* ========================================================================== */
/* V4.3 · NEXOARENA THREE.JS TROPHY                                           */
/* ========================================================================== */

.na-trophy-scene {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(118, 142, 192, .28);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 24%, rgba(173, 113, 255, .16), transparent 42%),
        radial-gradient(circle at 74% 62%, rgba(90, 206, 255, .12), transparent 34%),
        linear-gradient(180deg, rgba(250, 252, 255, .98), rgba(234, 240, 249, .98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 28px 70px rgba(48, 64, 99, .16);
    isolation: isolate;
}

.na-trophy-scene::before,
.na-trophy-scene::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.na-trophy-scene::before {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.85%, rgba(120, 176, 255, .06) 50%, transparent 50.15%),
        linear-gradient(0deg, transparent 49.85%, rgba(120, 176, 255, .04) 50%, transparent 50.15%);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    opacity: .34;
}

.na-trophy-scene::after {
    inset: auto 9% 10% 9%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(111, 187, 233, .45), rgba(193, 118, 255, .42), transparent);
    box-shadow: 0 0 18px rgba(130, 143, 187, .18);
}

.na-trophy-scene.is-featured {
    min-height: 620px;
}

.na-trophy-scene.is-compact {
    min-height: 470px;
}

.na-trophy-scene__viewport {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: grab;
    touch-action: pan-y;
}

.na-trophy-scene__viewport.is-dragging {
    cursor: grabbing;
}

.na-trophy-scene__viewport canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.na-trophy-scene__loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    color: rgba(58, 76, 114, .74);
    background:
        radial-gradient(circle, rgba(130, 76, 255, .09), transparent 40%),
        linear-gradient(180deg, rgba(250,252,255,.98), rgba(236,241,249,.98));
    transition: opacity .3s ease, visibility .3s ease;
}

.na-trophy-scene__loading span {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(105, 189, 255, .18);
    border-top-color: #55dfff;
    border-right-color: #c455ff;
    border-radius: 50%;
    animation: na-trophy-loader 1s linear infinite;
}

.na-trophy-scene__loading small {
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.na-trophy-scene__viewport.is-ready .na-trophy-scene__loading {
    opacity: 0;
    visibility: hidden;
}

.na-trophy-scene__hud {
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.na-trophy-scene__hud span {
    padding: 7px 9px;
    border: 1px solid rgba(118, 169, 255, .2);
    border-radius: 8px;
    color: rgba(68, 86, 122, .78);
    background: rgba(248, 251, 255, .78);
    backdrop-filter: blur(12px);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.na-trophy-scene__identity {
    position: absolute;
    z-index: 4;
    right: 20px;
    bottom: 20px;
    left: 20px;
    padding: 15px 17px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 18px;
    border: 1px solid rgba(117, 163, 255, .2);
    border-radius: 14px;
    background: rgba(248, 251, 255, .82);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
    pointer-events: none;
}

.na-trophy-scene__identity small {
    grid-column: 1 / -1;
    color: #456a93;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.na-trophy-scene__identity strong {
    color: #17223a;
    font-size: .84rem;
    letter-spacing: .035em;
}

.na-trophy-scene__identity span {
    align-self: center;
    color: rgba(74, 92, 129, .7);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .56rem;
    letter-spacing: .07em;
}

.na-v4-reward-visual {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.na-v4-reward-visual .na-v4-reward-flow {
    min-height: auto;
    padding: 14px 16px;
    border-radius: 17px;
}

.na-reward-hero-three {
    min-width: 0;
}

.na-topic-hero.na-topic-rewards {
    align-items: center;
}

html[data-na-theme="light"] .na-trophy-scene {
    border-color: rgba(70, 101, 170, .2);
    background:
        radial-gradient(circle at 50% 30%, rgba(132, 83, 255, .13), transparent 43%),
        radial-gradient(circle at 78% 68%, rgba(38, 179, 218, .1), transparent 36%),
        #f1f5fc;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 26px 65px rgba(58, 74, 112, .14);
}

html[data-na-theme="light"] .na-trophy-scene__loading {
    color: rgba(42, 57, 92, .72);
    background:
        radial-gradient(circle, rgba(130, 76, 255, .09), transparent 40%),
        #f1f5fc;
}

html[data-na-theme="light"] .na-trophy-scene__hud span,
html[data-na-theme="light"] .na-trophy-scene__identity {
    border-color: rgba(69, 91, 140, .18);
    background: rgba(242, 246, 253, .78);
    box-shadow: 0 14px 36px rgba(62, 78, 115, .12);
}

html[data-na-theme="light"] .na-trophy-scene__hud span,
html[data-na-theme="light"] .na-trophy-scene__identity span {
    color: rgba(49, 67, 105, .7);
}

html[data-na-theme="light"] .na-trophy-scene__identity strong {
    color: #17223a;
}

html[data-na-theme="light"] .na-trophy-scene__identity small {
    color: #315f91;
}

@keyframes na-trophy-loader {
    to { transform: rotate(360deg); }
}

@media (max-width: 1040px) {
    .na-trophy-scene.is-featured {
        min-height: 540px;
    }

    .na-trophy-scene.is-compact {
        min-height: 430px;
    }
}

@media (max-width: 720px) {
    .na-trophy-scene {
        border-radius: 20px;
    }

    .na-trophy-scene.is-featured,
    .na-trophy-scene.is-compact {
        min-height: 460px;
    }

    .na-trophy-scene__hud {
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .na-trophy-scene__hud span:last-child {
        display: none;
    }

    .na-trophy-scene__identity {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 13px;
        grid-template-columns: 1fr;
    }

    .na-trophy-scene__identity span {
        margin-top: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-trophy-scene__loading span {
        animation: none;
    }
}

.na-platform-v41-reward-visual {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.na-platform-v41-reward-visual .na-platform-v41-reward-path {
    min-height: auto;
    padding: 14px 16px;
    border-radius: 17px;
}

.na-trophy-scene__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    color: rgba(58, 76, 114, .74);
    background:
        radial-gradient(circle, rgba(130, 76, 255, .17), transparent 44%),
        #060914;
}

.na-trophy-scene__fallback svg {
    width: min(38%, 220px);
    overflow: visible;
    fill: rgba(122, 77, 255, .18);
    stroke: #75ddff;
    stroke-width: 3;
    filter: drop-shadow(0 0 24px rgba(142, 83, 255, .5));
}

.na-trophy-scene__fallback small {
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .15em;
}

html[data-na-theme="light"] .na-trophy-scene__fallback {
    color: rgba(42, 57, 92, .7);
    background:
        radial-gradient(circle, rgba(130, 76, 255, .1), transparent 44%),
        #f1f5fc;
}

/* V4.4 · Real GLB trophy model */
.na-trophy-scene__viewport canvas {
    opacity: 0;
    transition: opacity .45s ease;
}

.na-trophy-scene__viewport.is-ready canvas {
    opacity: 1;
}

.na-trophy-scene__fallback {
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(circle, rgba(130, 76, 255, .09), transparent 44%),
        linear-gradient(180deg, #fafcff, #edf2fa);
    transition: opacity .3s ease, visibility .3s ease;
}

.na-trophy-scene__viewport.is-load-failed .na-trophy-scene__fallback {
    opacity: 1;
    visibility: visible;
}

.na-trophy-scene__viewport.is-load-failed .na-trophy-scene__loading,
.na-trophy-scene__viewport.is-ready .na-trophy-scene__loading {
    opacity: 0;
    visibility: hidden;
}

.na-trophy-scene__viewport.is-load-failed canvas {
    opacity: 0;
}

/* ========================================================================== */
/* V4.5 · CREATIVE JOURNEY MOTION LAYER                                       */
/* ========================================================================== */

.na-public-shell.na-motion-mounted {
    --na-pointer-x: 50vw;
    --na-pointer-y: 28vh;
}

.na-public-shell.na-motion-mounted::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background:
        radial-gradient(430px circle at var(--na-pointer-x) var(--na-pointer-y), rgba(91, 184, 255, .11), transparent 62%),
        radial-gradient(360px circle at calc(var(--na-pointer-x) + 8vw) calc(var(--na-pointer-y) + 7vh), rgba(200, 72, 255, .08), transparent 68%);
    transition: opacity .35s ease;
}

.na-public-shell.na-motion-mounted > * {
    position: relative;
    z-index: 1;
}

.na-motion-tilt {
    --na-tilt-x: 0deg;
    --na-tilt-y: 0deg;
    --na-lift: 0px;
    --na-glow-x: 50%;
    --na-glow-y: 50%;
    transform:
        perspective(1050px)
        translate3d(0, var(--na-lift), 0)
        rotateX(var(--na-tilt-x))
        rotateY(var(--na-tilt-y)) !important;
    transform-style: preserve-3d;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
    will-change: transform;
}

.na-motion-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(260px circle at var(--na-glow-x) var(--na-glow-y), rgba(121, 207, 255, .16), transparent 62%);
    transition: opacity .2s ease;
}

.na-motion-tilt:hover::after {
    opacity: 1;
}

.na-motion-tilt > * {
    position: relative;
    z-index: 1;
}

.na-v4-build-card.is-selected,
.na-v4-priority-card.is-selected,
.na-v4-context-chip.is-selected {
    animation: na-v45-selection-pulse .48s cubic-bezier(.2,.75,.2,1);
}

.na-journey-progress .is-active {
    position: relative;
    overflow: hidden;
}

.na-journey-progress .is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
    transform: translateX(-120%);
    animation: na-v45-progress-scan 1.8s ease-in-out infinite;
}

.na-motion-magnetic {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.na-motion-magnetic::before {
    content: "";
    position: absolute;
    top: -120%;
    bottom: -120%;
    left: -42%;
    width: 28%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transform: rotate(18deg);
    transition: left .58s cubic-bezier(.2,.75,.2,1);
}

.na-motion-magnetic:hover::before {
    left: 118%;
}

.na-v4-route-map {
    position: relative;
}

.na-v4-route-map::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 23px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(71, 209, 255, .12), rgba(135, 85, 255, .72), rgba(255, 77, 193, .16));
    box-shadow: 0 0 18px rgba(103, 116, 255, .28);
}

.na-v4-route-map article {
    position: relative;
}

.na-v4-route-index {
    box-shadow: 0 0 0 5px rgba(10, 15, 31, .9), 0 0 24px rgba(93, 177, 255, .2);
}

html[data-na-theme="light"] .na-v4-route-index {
    box-shadow: 0 0 0 5px rgba(244, 248, 255, .92), 0 0 22px rgba(85, 110, 176, .16);
}

html[data-na-theme="light"] .na-public-shell.na-motion-mounted::after {
    opacity: .5;
    background:
        radial-gradient(450px circle at var(--na-pointer-x) var(--na-pointer-y), rgba(65, 142, 222, .11), transparent 64%),
        radial-gradient(360px circle at calc(var(--na-pointer-x) + 8vw) calc(var(--na-pointer-y) + 7vh), rgba(151, 87, 226, .08), transparent 68%);
}

html[data-na-theme="light"] .na-motion-tilt::after {
    background: radial-gradient(260px circle at var(--na-glow-x) var(--na-glow-y), rgba(73, 132, 211, .12), transparent 62%);
}

@keyframes na-v45-selection-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(.975); }
    100% { transform: scale(1); }
}

@keyframes na-v45-progress-scan {
    0%, 18% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}

@media (max-width: 760px) {
    .na-public-shell.na-motion-mounted::after {
        display: none;
    }

    .na-motion-tilt {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-public-shell.na-motion-mounted::after,
    .na-motion-tilt::after {
        display: none;
    }

    .na-motion-tilt,
    .na-motion-magnetic {
        transform: none !important;
        transition: none !important;
    }

    .na-journey-progress .is-active::after,
    .na-v4-build-card.is-selected,
    .na-v4-priority-card.is-selected,
    .na-v4-context-chip.is-selected {
        animation: none !important;
    }
}


/* ========================================================================== */
/* V4.6 · FLUID OPENING / LAST EXPLORER / PHYSICAL REWARD STORY              */
/* ========================================================================== */

/* Opening screens use the available viewport instead of inheriting the 1320px content rail. */
.na-public-section.na-v46-fluid-hero {
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 80px);
    padding-inline: clamp(24px, 5vw, 96px);
    box-sizing: border-box;
}

.na-v46-fluid-stage {
    width: 100%;
    max-width: none;
    padding-inline: clamp(24px, 5vw, 96px);
}

.na-v46-fluid-stage .na-v4-panel {
    width: min(1540px, 100%);
    margin-inline: auto;
}

/* The capability explorer is intentionally the final chapter, after the visitor understands the platform. */
.na-platform-v46-last-explorer,
.na-v4-platform-map {
    position: relative;
    margin-top: 30px;
    padding-top: 112px;
    border-top: 1px solid rgba(130, 161, 235, .16);
}

.na-platform-v46-last-explorer::before,
.na-v4-platform-map::before {
    content: "EXPLORA DESPUÉS DE CONOCER LA HISTORIA";
    position: absolute;
    top: 66px;
    left: 0;
    color: rgba(126, 207, 255, .72);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .16em;
}

/* Creator journey: content now explicitly includes the physical reward and its reveal. */
.na-creator-story-loop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.na-creator-story-loop article {
    min-height: 230px;
    display: flex;
    flex-direction: column;
}

.na-creator-story-loop article > small {
    margin: 14px 0 8px;
    color: #78dfff;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.na-creator-story-loop article p {
    flex: 1;
}

.na-creator-story-loop article a {
    margin-top: 14px;
    color: #ffd57c;
    font-size: .72rem;
    font-weight: 900;
    text-decoration: none;
}

.na-creator-story-loop .is-physical-reward {
    border-color: rgba(255, 190, 77, .42);
    background:
        radial-gradient(circle at 90% 8%, rgba(255, 195, 75, .15), transparent 42%),
        linear-gradient(145deg, rgba(38, 31, 30, .94), rgba(19, 24, 43, .96));
    box-shadow: inset 0 1px rgba(255, 238, 192, .08), 0 22px 55px rgba(0, 0, 0, .18);
}

.na-creator-story-loop .is-physical-reward > span,
.na-creator-story-loop .is-physical-reward > small {
    color: #ffd57c;
}

html[data-na-theme="light"] .na-creator-story-loop .is-physical-reward {
    border-color: rgba(181, 126, 22, .3);
    background:
        radial-gradient(circle at 90% 8%, rgba(255, 195, 75, .2), transparent 42%),
        linear-gradient(145deg, rgba(255, 252, 242, .98), rgba(239, 244, 252, .98));
}

@media (max-width: 1180px) {
    .na-creator-story-loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .na-public-section.na-v46-fluid-hero,
    .na-v46-fluid-stage {
        padding-inline: 20px;
    }

    .na-creator-story-loop {
        grid-template-columns: 1fr;
    }

    .na-platform-v46-last-explorer::before,
    .na-v4-platform-map::before {
        top: 62px;
        font-size: .52rem;
    }
}

/* ========================================================================== */
/* V4.6.2 · DESKTOP MAIN SPACING                                              */
/* ========================================================================== */

/*
 * On wide desktop screens the guided landing already has enough internal
 * breathing room inside its first scene. Reducing the outer main offset makes
 * better use of the viewport without changing the mobile navigation reserve.
 */
@media (min-width: 1100px) {
    .na-guided-shell > main {
        min-height: 100svh;
        padding-top: 15px;
    }
}

/* Preserve the fixed-navigation clearance on tablets and phones. */
@media (max-width: 1099.98px) {
    .na-guided-shell > main {
        min-height: 100svh;
        padding-top: 80px;
    }
}

@media (max-width: 780px) {
    .na-guided-shell > main {
        padding-top: 70px;
    }
}

/* ========================================================================== */
/* V4.7 · RPG CONTENT INTEGRATION                                             */
/* ========================================================================== */

.na-rpg-story {
    position: relative;
    isolation: isolate;
}

.na-rpg-story::before {
    content: "";
    position: absolute;
    inset: 8% -12% 5%;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 45%, rgba(67, 217, 239, .1), transparent 28%),
        radial-gradient(circle at 82% 42%, rgba(231, 109, 255, .1), transparent 30%);
    pointer-events: none;
}

.na-rpg-story__heading {
    max-width: 880px;
    margin: 0 auto 48px;
    text-align: center;
}

.na-rpg-story__heading .na-public-eyebrow::before {
    display: none;
}

.na-rpg-story__heading h2 {
    margin-bottom: 18px;
    font-size: clamp(2.45rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.na-rpg-story__heading p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--na-public-muted);
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.72;
}

.na-rpg-story__layout {
    display: grid;
    grid-template-columns: minmax(210px, .42fr) minmax(0, 1.58fr);
    align-items: stretch;
    gap: 14px;
}

.na-rpg-story__rail {
    padding: 10px;
    display: grid;
    gap: 7px;
    align-content: stretch;
    border: 1px solid var(--na-public-border);
    border-radius: 22px;
    background: rgba(8, 13, 28, .68);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.na-rpg-story__step {
    position: relative;
    min-height: 58px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: color-mix(in srgb, var(--na-public-muted) 78%, transparent);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.na-rpg-story__step > span {
    color: rgba(128, 208, 255, .72);
    font: 850 .58rem ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
}

.na-rpg-story__step > strong {
    overflow: hidden;
    font-size: .76rem;
    letter-spacing: .045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.na-rpg-story__step > small {
    padding: 4px 6px;
    border: 1px solid rgba(255, 200, 107, .32);
    border-radius: 999px;
    color: var(--na-public-gold);
    background: rgba(255, 200, 107, .08);
    font-size: .46rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.na-rpg-story__step:hover {
    color: var(--na-public-text);
    border-color: rgba(107, 166, 255, .2);
    background: rgba(43, 61, 111, .2);
    transform: translateX(3px);
}

.na-rpg-story__step.is-complete > span {
    color: var(--na-public-cyan);
}

.na-rpg-story__step.is-active {
    color: var(--na-public-text);
    border-color: rgba(85, 206, 255, .42);
    background:
        linear-gradient(90deg, rgba(33, 91, 131, .42), rgba(54, 34, 92, .26));
    box-shadow:
        inset 3px 0 0 var(--na-public-cyan),
        0 14px 35px rgba(0, 0, 0, .16);
    transform: translateX(4px);
}

.na-rpg-story__step.is-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 8px;
    left: 42px;
    height: 1px;
    background: linear-gradient(90deg, var(--na-public-cyan), var(--na-public-pink), transparent);
    opacity: .72;
}

.na-rpg-story__step.is-reward {
    border-color: rgba(255, 200, 107, .13);
}

.na-rpg-story__step.is-reward.is-active {
    border-color: rgba(255, 200, 107, .4);
    background:
        linear-gradient(90deg, rgba(104, 74, 30, .34), rgba(85, 31, 91, .3));
    box-shadow:
        inset 3px 0 0 var(--na-public-gold),
        0 15px 38px rgba(0, 0, 0, .18);
}

.na-rpg-story__panel {
    min-height: 590px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(28px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid var(--na-public-border);
    border-radius: 26px;
    background:
        radial-gradient(circle at 14% 26%, rgba(67, 217, 239, .1), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(231, 109, 255, .1), transparent 30%),
        linear-gradient(145deg, rgba(15, 22, 43, .92), rgba(7, 12, 26, .9));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .04),
        0 34px 84px rgba(0, 0, 0, .22);
}

.na-rpg-story__panel.is-reward {
    border-color: rgba(255, 200, 107, .28);
    background:
        radial-gradient(circle at 18% 26%, rgba(255, 200, 107, .1), transparent 32%),
        radial-gradient(circle at 84% 18%, rgba(231, 109, 255, .12), transparent 34%),
        linear-gradient(145deg, rgba(24, 23, 39, .94), rgba(9, 12, 25, .92));
}

.na-rpg-story__visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(111, 151, 231, .16);
    border-radius: 22px;
    background:
        linear-gradient(rgba(95, 126, 205, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 126, 205, .045) 1px, transparent 1px),
        rgba(6, 11, 24, .56);
    background-size: 38px 38px;
}

.na-rpg-story__visual::after {
    content: "";
    position: absolute;
    right: 12%;
    bottom: 8%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--na-public-cyan), var(--na-public-pink), transparent);
    opacity: .5;
}

.na-rpg-story__rings,
.na-rpg-story__rings span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.na-rpg-story__rings {
    width: min(70%, 320px);
    height: min(70%, 320px);
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.na-rpg-story__rings span {
    border: 1px dashed rgba(94, 180, 255, .24);
}

.na-rpg-story__rings span:nth-child(2) {
    inset: 13%;
    border-style: solid;
    border-color: rgba(143, 91, 255, .24);
}

.na-rpg-story__rings span:nth-child(3) {
    inset: 29%;
    border-color: rgba(255, 79, 197, .28);
}

.na-rpg-story__core {
    position: relative;
    z-index: 2;
    min-width: 178px;
    min-height: 178px;
    padding: 24px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;
    border: 1px solid rgba(88, 204, 255, .34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 70, 151, .82), rgba(9, 15, 34, .95));
    box-shadow:
        0 0 58px rgba(73, 97, 255, .23),
        inset 0 0 36px rgba(68, 212, 255, .1);
    text-align: center;
}

.na-rpg-story__core small {
    color: var(--na-public-cyan);
    font-size: .5rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.na-rpg-story__core strong {
    color: transparent;
    background: linear-gradient(115deg, #ffffff, var(--na-public-cyan), var(--na-public-purple), var(--na-public-pink));
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 1;
}

.na-rpg-story__core span {
    max-width: 145px;
    color: var(--na-public-text);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.na-rpg-story__signal {
    position: absolute;
    z-index: 3;
    max-width: 145px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(111, 158, 238, .18);
    border-radius: 999px;
    color: rgba(211, 223, 247, .78);
    background: rgba(7, 12, 27, .78);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.na-rpg-story__signal.signal-1 { top: 15%; left: 8%; }
.na-rpg-story__signal.signal-2 { top: 16%; right: 8%; }
.na-rpg-story__signal.signal-3 { bottom: 16%; left: 10%; }
.na-rpg-story__signal.signal-4 { right: 8%; bottom: 15%; }

.na-rpg-story__copy > small {
    color: var(--na-public-cyan);
    font: 900 .62rem ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
}

.na-rpg-story__panel.is-reward .na-rpg-story__copy > small {
    color: var(--na-public-gold);
}

.na-rpg-story__copy h3 {
    margin: 14px 0 16px;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.na-rpg-story__copy > p {
    margin: 0;
    color: var(--na-public-muted);
    font-size: clamp(.98rem, 1.35vw, 1.12rem);
    line-height: 1.72;
}

.na-rpg-story__copy ul {
    margin: 25px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}

.na-rpg-story__copy li {
    padding: 11px 12px;
    border-left: 2px solid var(--na-public-cyan);
    color: rgba(221, 228, 248, .82);
    background: rgba(15, 22, 43, .58);
    font-size: .76rem;
    line-height: 1.35;
}

.na-rpg-story__panel.is-reward .na-rpg-story__copy li {
    border-left-color: var(--na-public-gold);
}

.na-rpg-story__copy .na-public-text-link {
    margin-top: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.na-rpg-story.is-compact {
    padding-block: 88px;
}

.na-rpg-story.is-compact .na-rpg-story__panel {
    min-height: 510px;
}

html[data-na-theme="light"] .na-rpg-story__rail,
html[data-na-theme="light"] .na-rpg-story__panel {
    background: linear-gradient(145deg, rgba(250, 252, 255, .94), rgba(235, 241, 250, .92));
    box-shadow: 0 28px 70px rgba(58, 74, 112, .12), inset 0 1px rgba(255,255,255,.9);
}

html[data-na-theme="light"] .na-rpg-story__visual {
    background:
        linear-gradient(rgba(81, 103, 153, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(81, 103, 153, .045) 1px, transparent 1px),
        rgba(232, 238, 249, .72);
    background-size: 38px 38px;
}

html[data-na-theme="light"] .na-rpg-story__core {
    background: radial-gradient(circle, rgba(183, 199, 245, .9), rgba(235, 240, 252, .98));
    box-shadow: 0 24px 58px rgba(56, 75, 122, .16), inset 0 0 32px rgba(74, 138, 221, .08);
}

html[data-na-theme="light"] .na-rpg-story__core span,
html[data-na-theme="light"] .na-rpg-story__step.is-active,
html[data-na-theme="light"] .na-rpg-story__copy li {
    color: #17223a;
}

html[data-na-theme="light"] .na-rpg-story__signal {
    color: rgba(48, 65, 102, .8);
    background: rgba(247, 250, 255, .86);
}

html[data-na-theme="light"] .na-rpg-story__copy li {
    background: rgba(223, 231, 245, .66);
}

@media (max-width: 980px) {
    .na-rpg-story__layout {
        grid-template-columns: 1fr;
    }

    .na-rpg-story__rail {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .na-rpg-story__step,
    .na-rpg-story__step:hover,
    .na-rpg-story__step.is-active {
        transform: none;
    }

    .na-rpg-story__panel {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .na-rpg-story {
        padding-block: 92px;
    }

    .na-rpg-story__heading {
        margin-bottom: 32px;
        text-align: left;
    }

    .na-rpg-story__heading .na-public-eyebrow::before {
        display: block;
    }

    .na-rpg-story__layout {
        gap: 12px;
    }

    .na-rpg-story__rail {
        margin-right: -24px;
        padding: 8px 24px 10px 8px;
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-radius: 18px 0 0 18px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .na-rpg-story__rail::-webkit-scrollbar {
        display: none;
    }

    .na-rpg-story__step {
        min-width: 155px;
        min-height: 54px;
        grid-template-columns: 28px minmax(0, 1fr);
        scroll-snap-align: start;
    }

    .na-rpg-story__step > small {
        display: none;
    }

    .na-rpg-story__panel {
        padding: 16px;
        grid-template-columns: 1fr;
        gap: 22px;
        border-radius: 21px;
    }

    .na-rpg-story__visual {
        min-height: 340px;
    }

    .na-rpg-story__core {
        min-width: 145px;
        min-height: 145px;
    }

    .na-rpg-story__signal {
        max-width: 118px;
        padding: 7px 8px;
        font-size: .48rem;
    }

    .na-rpg-story__copy {
        padding: 4px 4px 10px;
    }
}

@media (max-width: 520px) {
    .na-rpg-story__heading h2 {
        font-size: 2.55rem;
    }

    .na-rpg-story__visual {
        min-height: 290px;
    }

    .na-rpg-story__rings {
        width: 230px;
        height: 230px;
    }

    .na-rpg-story__signal.signal-1 { top: 11%; left: 5%; }
    .na-rpg-story__signal.signal-2 { top: 12%; right: 5%; }
    .na-rpg-story__signal.signal-3 { bottom: 12%; left: 6%; }
    .na-rpg-story__signal.signal-4 { right: 5%; bottom: 11%; }

    .na-rpg-story__copy ul {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-rpg-story__step,
    .na-rpg-story__panel {
        transition: none !important;
    }
}

/* ========================================================================== */
/* V4.7.1 · PLATFORM REWARD MISSION                                           */
/* ========================================================================== */

.na-platform-v41-rewards {
    position: relative;
    isolation: isolate;
    width: min(1280px, calc(100% - 48px));
    padding: clamp(38px, 5vw, 72px);
    overflow: hidden;
    border: 1px solid rgba(110, 157, 255, .22);
    border-radius: 34px;
    grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
    gap: clamp(42px, 6vw, 86px);
    background:
        radial-gradient(circle at 12% 20%, rgba(67, 220, 255, .11), transparent 28rem),
        radial-gradient(circle at 88% 22%, rgba(160, 82, 255, .14), transparent 30rem),
        radial-gradient(circle at 72% 92%, rgba(255, 190, 72, .08), transparent 23rem),
        linear-gradient(135deg, rgba(11, 18, 38, .9), rgba(13, 16, 34, .82));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 34px 90px rgba(2, 7, 20, .24);
}

.na-platform-v41-rewards::before {
    content: "MISIÓN FINAL · RECOMPENSA REAL";
    position: absolute;
    top: 18px;
    right: 28px;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(255, 204, 106, .24);
    border-radius: 999px;
    color: rgba(255, 222, 158, .76);
    background: rgba(255, 187, 63, .07);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .14em;
    pointer-events: none;
}

.na-platform-v41-rewards::after {
    content: "";
    position: absolute;
    inset: auto -9% -42% auto;
    z-index: -1;
    width: 520px;
    aspect-ratio: 1;
    border: 1px solid rgba(128, 110, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px rgba(128, 110, 255, .026),
        0 0 0 96px rgba(67, 220, 255, .018);
    pointer-events: none;
}

.na-platform-v41-rewards > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 570px;
}

.na-platform-v41-rewards > div:first-child::before {
    content: "RECOMPENSA DE LA RUTA";
    display: block;
    margin-bottom: 16px;
    color: #76ddff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .17em;
}

.na-platform-v41-rewards h2 {
    max-width: 600px;
    margin: 18px 0 18px;
    font-size: clamp(2.45rem, 4.6vw, 5.15rem);
    line-height: .94;
    letter-spacing: -.058em;
    text-wrap: balance;
}

.na-platform-v41-rewards p {
    max-width: 570px;
    color: var(--na-platform-copy);
    font-size: clamp(.96rem, 1.25vw, 1.08rem);
    line-height: 1.72;
}

.na-platform-v41-rewards .na-public-text-link {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #91e4ff;
}

.na-platform-v41-reward-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(119, 160, 238, .16);
    border-radius: 30px;
    background: rgba(8, 13, 29, .36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.na-platform-v41-reward-visual .na-trophy-scene {
    min-height: 510px;
    border-radius: 23px;
    box-shadow: 0 24px 58px rgba(0,0,0,.18);
}

.na-platform-v41-reward-path {
    min-height: auto;
    margin-top: 12px;
    padding: 13px 15px;
    border-color: rgba(255, 204, 106, .18);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(67, 220, 255, .045), rgba(159, 82, 255, .055), rgba(255, 190, 72, .05)),
        rgba(9, 14, 31, .72);
    box-shadow: none;
}

.na-platform-v41-reward-path span {
    padding: 8px 11px;
    border-color: rgba(255, 204, 106, .2);
    color: #f1dba9;
    background: rgba(255, 200, 107, .045);
}

.na-platform-v41-reward-path b {
    color: rgba(130, 198, 255, .48);
}

html[data-na-theme="light"] .na-platform-v41-rewards {
    border-color: rgba(81, 109, 177, .18);
    background:
        radial-gradient(circle at 11% 16%, rgba(55, 178, 227, .13), transparent 26rem),
        radial-gradient(circle at 90% 18%, rgba(155, 88, 255, .13), transparent 29rem),
        radial-gradient(circle at 76% 94%, rgba(255, 181, 53, .09), transparent 24rem),
        linear-gradient(135deg, rgba(246, 250, 255, .74), rgba(238, 242, 252, .68));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 28px 72px rgba(55, 72, 111, .13);
    backdrop-filter: blur(18px);
}

html[data-na-theme="light"] .na-platform-v41-rewards::before {
    border-color: rgba(155, 96, 0, .18);
    color: #805000;
    background: rgba(255, 188, 55, .14);
}

html[data-na-theme="light"] .na-platform-v41-rewards > div:first-child::before {
    color: #336a91;
}

html[data-na-theme="light"] .na-platform-v41-rewards h2 {
    color: #16213a;
}

html[data-na-theme="light"] .na-platform-v41-rewards p {
    color: #596882;
}

html[data-na-theme="light"] .na-platform-v41-rewards .na-public-text-link {
    color: #245f96;
}

html[data-na-theme="light"] .na-platform-v41-reward-visual {
    border-color: rgba(70, 94, 151, .14);
    background: rgba(247, 250, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

html[data-na-theme="light"] .na-platform-v41-reward-path {
    border-color: rgba(157, 103, 15, .16);
    background:
        linear-gradient(90deg, rgba(67, 184, 220, .055), rgba(151, 90, 243, .06), rgba(255, 184, 60, .065)),
        rgba(249, 251, 255, .62);
}

html[data-na-theme="light"] .na-platform-v41-reward-path span {
    border-color: rgba(151, 98, 7, .18);
    color: #76500d;
    background: rgba(255, 193, 72, .09);
}

html[data-na-theme="light"] .na-platform-v41-reward-path b {
    color: rgba(62, 100, 154, .5);
}

@media (max-width: 1120px) {
    .na-platform-v41-rewards {
        grid-template-columns: 1fr;
        width: min(100% - 34px, 920px);
    }

    .na-platform-v41-rewards > div:first-child {
        max-width: 720px;
    }

    .na-platform-v41-reward-visual .na-trophy-scene {
        min-height: 560px;
    }
}

@media (max-width: 720px) {
    .na-platform-v41-rewards {
        width: min(100% - 24px, 680px);
        padding: 28px 18px 20px;
        gap: 28px;
        border-radius: 24px;
    }

    .na-platform-v41-rewards::before {
        position: static;
        width: fit-content;
        display: block;
        margin-bottom: 14px;
    }

    .na-platform-v41-rewards > div:first-child::before {
        display: none;
    }

    .na-platform-v41-rewards h2 {
        font-size: clamp(2.15rem, 11vw, 3.6rem);
    }

    .na-platform-v41-reward-visual {
        padding: 8px;
        border-radius: 22px;
    }

    .na-platform-v41-reward-visual .na-trophy-scene {
        min-height: 470px;
    }

    .na-platform-v41-reward-path {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .na-platform-v41-reward-path::-webkit-scrollbar {
        display: none;
    }

    .na-platform-v41-reward-path span,
    .na-platform-v41-reward-path b {
        flex: 0 0 auto;
    }
}