:root {
    --cosmic: #0B1029;
    --cosmic-2: #121A3A;
    --cosmic-3: #1B244C;
    --red: #FF2D4D;
    --red-deep: #C01535;
    --gold: #FFC247;
    --violet: #7A5CFF;
    --ion: #1FE0B6;
    --orbit: #9AA0BF;
    --moon: #F4F5FB;
    --warm: #F875AA;
    --cool: #03AED2;
    --line: rgba(154, 160, 191, .16);
    --line-strong: rgba(154, 160, 191, .3);
    --surface: rgba(18, 26, 58, .72);
    --surface-2: rgba(11, 16, 41, .84);
    --shadow: 0 30px 80px -48px rgba(0, 0, 0, .9);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-back: cubic-bezier(.22, 1.08, .4, 1);
    --fa: 'Vazirmatn', sans-serif;
    --en: 'Inter', sans-serif;
    --max: 1180px;
    --accent: var(--red);
    --accent-rgb: 255, 45, 77;
}

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

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

body {
    font-family: var(--fa);
    background: #06081a;
    color: var(--moon);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.85
}

body.intro-lock {
    overflow: hidden
}

a {
    color: inherit
}

button,
input {
    font: inherit
}

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

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

.en {
    font-family: var(--en);
    direction: ltr;
    unicode-bidi: isolate
}

/* ===== persistent universe ===== */
#canvas-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 1.2s ease
}

/* ===== intro / logo explosion ===== */
#formation-stage {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: opacity 1s ease
}

#formation-stage.out {
    opacity: 0;
    pointer-events: none
}

#formation-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

#flash {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease
}

#flash.on {
    opacity: .35
}

#gate-stage {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(900px 650px at 50% 48%, rgba(255, 45, 77, .14), transparent 68%), linear-gradient(180deg, rgba(6, 8, 26, .36), rgba(6, 8, 26, .76));
    transition: opacity .6s ease
}

#gate-stage.visible {
    opacity: 1;
    pointer-events: auto
}

#gate-stage.out {
    opacity: 0;
    pointer-events: none
}

#gate-logo {
    position: absolute;
    left: 50%;
    top: 16%;
    z-index: 6;
    width: 94px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .5s ease .2s, transform .8s var(--ease-back) .2s;
    filter: drop-shadow(0 0 28px rgba(255, 45, 77, .42))
}

#gate-stage.visible #gate-logo {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

#gate-logo img {
    width: 100%;
    border-radius: 24px
}

#gate-nova {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%) scale(3);
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease .2s
}

#gate-stage.visible #gate-nova {
    opacity: 1
}

.gn-ring,
.hn-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 194, 71, .3);
    animation: nova-expand 3.4s ease-out infinite
}

.gn-ring.d,
.hn-ring.d {
    animation-delay: 1.7s
}

.gn-core,
.hn-core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--gold) 45%, var(--red) 100%);
    box-shadow: 0 0 18px 4px rgba(255, 194, 71, .7), 0 0 42px 12px rgba(255, 45, 77, .35);
    animation: nova-pulse 3.4s ease-in-out infinite
}

.gn-ray,
.hn-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 36px;
    background: linear-gradient(var(--gold), transparent);
    transform-origin: top center;
    opacity: .5
}

@keyframes nova-expand {
    0% {
        transform: scale(.2);
        opacity: .8
    }

    100% {
        transform: scale(1.65);
        opacity: 0
    }
}

@keyframes nova-pulse {

    0%,
    100% {
        transform: scale(.88)
    }

    50% {
        transform: scale(1.16)
    }
}

.gate-entry {
    position: relative;
    z-index: 7;
    width: min(680px, calc(100% - 40px));
    padding: 190px 42px 48px;
    text-align: center;
    border-radius: 38px;
    border: 1px solid rgba(154, 160, 191, .2);
    background: linear-gradient(180deg, rgba(18, 26, 58, .52), rgba(11, 16, 41, .74));
    backdrop-filter: blur(18px);
    box-shadow: 0 45px 110px -55px rgba(0, 0, 0, .95);
    opacity: 0;
    transform: translateY(36px) scale(.96);
    transition: opacity .65s ease .15s, transform .85s var(--ease-back) .15s
}

#gate-stage.visible .gate-entry {
    opacity: 1;
    transform: none
}

.gate-entry:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px
}

.gate-entry::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255, 194, 71, .42), rgba(255, 45, 77, .14), rgba(122, 92, 255, .32));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.pane-tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 17px;
    color: var(--gold)
}

.pane-headline {
    font-size: clamp(42px, 6vw, 78px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.035em;
    margin-bottom: 20px
}

.pane-headline em {
    font-style: normal;
    color: var(--red)
}

.pane-sub {
    max-width: 52ch;
    margin-inline: auto;
    color: #c8cce0;
    font-size: 15px;
    line-height: 2
}

.pane-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    background: linear-gradient(120deg, var(--red), #dc173a);
    box-shadow: 0 12px 34px -15px rgba(255, 45, 77, .9);
    transition: .25s
}

.gate-entry:hover .pane-cta {
    transform: translateY(-3px);
    box-shadow: 0 17px 42px -15px rgba(255, 45, 77, 1)
}

.gate-audience {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 20px
}

.gate-audience span {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
    color: #adb4cf
}

/* intro spacecraft + meteors */
.space-flyby {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4
}

.meteor {
    --scale: 1;
    --travel-x: -120vw;
    --travel-y: 74vh;
    --tail: 150px;
    position: absolute;
    right: -90px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff 0 8%, #ffe4a3 19%, #ffc247 36%, #ff653c 66%, #6d2032 100%);
    box-shadow: 0 0 14px 3px rgba(255, 194, 71, .34);
    opacity: 0;
    animation: meteor-sweep 3.2s cubic-bezier(.18, .62, .25, 1) infinite;
    will-change: transform, opacity
}

.meteor::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: var(--tail);
    height: 3px;
    border-radius: 999px;
    transform-origin: left center;
    transform: rotate(-31deg);
    background: linear-gradient(90deg, rgba(255, 244, 205, .94), rgba(255, 194, 71, .68) 18%, rgba(122, 92, 255, .2) 58%, transparent);
    filter: blur(.6px)
}

.meteor::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .26)
}

.meteor.m1 {
    top: 5%;
    animation-delay: .18s;
    --scale: .92;
    --travel-y: 71vh;
    --tail: 176px
}

.meteor.m2 {
    top: 23%;
    animation-delay: 1.08s;
    animation-duration: 3.85s;
    --scale: .62;
    --travel-x: -126vw;
    --travel-y: 78vh;
    --tail: 128px
}

.meteor.m3 {
    top: 48%;
    animation-delay: 1.9s;
    animation-duration: 3.55s;
    --scale: 1.08;
    --travel-x: -116vw;
    --travel-y: 69vh;
    --tail: 195px
}

.meteor.m4 {
    top: 67%;
    animation-delay: 2.45s;
    animation-duration: 4.2s;
    --scale: .48;
    --travel-x: -132vw;
    --travel-y: 82vh;
    --tail: 108px
}

#gate-stage .meteor {
    animation-duration: 6.4s;
    filter: saturate(.95);
    opacity: .72
}

#gate-stage .meteor.m1 {
    animation-delay: 1.1s
}

#gate-stage .meteor.m2 {
    animation-delay: 3.2s
}

#gate-stage .meteor.m3 {
    animation-delay: 4.9s
}

#gate-stage .meteor.m4 {
    animation-delay: 6.1s
}

@keyframes meteor-sweep {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--scale));
        opacity: 0
    }

    6% {
        opacity: .96
    }

    72% {
        opacity: .88
    }

    100% {
        transform: translate3d(var(--travel-x), var(--travel-y), 0) scale(var(--scale));
        opacity: 0
    }
}

/* ===== site shell ===== */
#site {
    position: relative;
    z-index: 5;
    display: none
}

#site.show {
    display: block
}

.container {
    width: min(var(--max), calc(100% - 48px));
    margin-inline: auto
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 76px;
    border-bottom: 1px solid transparent;
    transition: .3s
}

.site-header.scrolled {
    background: rgba(6, 8, 26, .76);
    backdrop-filter: blur(18px);
    border-color: var(--line)
}

.navbar {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px
}

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

.brand img {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow: 0 10px 30px -18px rgba(255, 45, 77, .8)
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

.brand-copy strong {
    font-size: 17px;
    font-weight: 900
}

.brand-copy small {
    font-size: 10px;
    color: var(--orbit);
    margin-top: 4px
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin-inline: auto
}

.nav-links a {
    font-size: 13px;
    color: #b5bad2;
    text-decoration: none;
    transition: .2s;
    white-space: nowrap
}

.nav-links a:hover {
    color: #fff
}

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

.nav-cta,
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    border-radius: 999px;
    transition: .25s
}

.nav-cta {
    font-size: 12px;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 26px -14px rgba(var(--accent-rgb), .9)
}

.nav-cta:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px -14px rgba(var(--accent-rgb), 1)
}

.menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    align-items: center;
    justify-content: center
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .25s
}

.menu-btn span {
    position: relative
}

.menu-btn span::before,
.menu-btn span::after {
    content: "";
    position: absolute;
    right: 0
}

.menu-btn span::before {
    top: -6px
}

.menu-btn span::after {
    top: 6px
}

.menu-btn.open span {
    background: transparent
}

.menu-btn.open span::before {
    top: 0;
    transform: rotate(45deg)
}

.menu-btn.open span::after {
    top: 0;
    transform: rotate(-45deg)
}

.mobile-panel,
.mobile-menu-backdrop {
    display: none
}

/* ===== shared blocks ===== */
.section {
    position: relative;
    padding: 110px 0
}

.section.alt {
    background: linear-gradient(180deg, rgba(18, 26, 58, .3), rgba(11, 16, 41, .08));
    border-block: 1px solid rgba(154, 160, 191, .08)
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 42px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 15px
}

.eyebrow::before {
    content: "✦"
}

.section-title {
    font-size: clamp(31px, 4.5vw, 54px);
    line-height: 1.24;
    font-weight: 900;
    letter-spacing: -.025em
}

.section-title em {
    font-style: normal;
    color: var(--accent)
}

.section-lead {
    color: #bdc2d9;
    font-size: 15px;
    line-height: 2;
    max-width: 58ch
}

.glass {
    background: linear-gradient(180deg, rgba(18, 26, 58, .8), rgba(11, 16, 41, .68));
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow)
}

.btn-primary {
    padding: 14px 29px;
    background: var(--accent);
    color: #fff;
    font-size: 14px
}

.btn-secondary {
    padding: 13px 28px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .035);
    color: #d8dbea;
    font-size: 14px
}

.btn-secondary:hover {
    border-color: rgba(var(--accent-rgb), .55);
    color: #fff
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s var(--ease-back)
}

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

/* ===== hero ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 128px 0 78px;
    overflow: hidden;
    position: relative;
    isolation: isolate
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2
}

/* ستاره‌ای که از انفجار ورودی متولد می‌شود و پشت تمام اجزای هیرو می‌ماند */
.hero-birth-star {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: clamp(300px, 46vw, 680px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.35s ease .08s, transform 1.65s cubic-bezier(.16, .84, .25, 1) .02s;
    will-change: transform, opacity
}

#site.born .hero-birth-star {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.hero-birth-star .birth-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 2%, rgba(255, 224, 145, .23) 4%, rgba(255, 194, 71, .16) 13%, rgba(255, 45, 77, .11) 29%, rgba(122, 92, 255, .07) 48%, transparent 70%);
    filter: blur(1px);
    animation: birth-breathe 5.4s ease-in-out infinite
}

.hero-birth-star .birth-ring {
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    border: 1px solid rgba(255, 194, 71, .14);
    box-shadow: 0 0 42px rgba(255, 45, 77, .07);
    animation: birth-ring 5.8s ease-out infinite
}

.hero-birth-star .birth-ring.r2 {
    inset: 32%;
    animation-delay: 2.9s
}

.hero-birth-star .birth-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0 18%, #fff2bd 35%, #ffc247 58%, #ff2d4d 100%);
    box-shadow: 0 0 14px 5px rgba(255, 255, 255, .72), 0 0 34px 13px rgba(255, 194, 71, .64), 0 0 96px 34px rgba(255, 45, 77, .32);
    animation: birth-core-pulse 3.8s ease-in-out infinite
}

.hero-birth-star .birth-ray {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 0 50%;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 194, 71, .46) 18%, rgba(255, 45, 77, .14) 52%, transparent);
    filter: blur(.15px)
}

.hero-birth-star .birth-ray.r1 {
    width: 42%;
    transform: rotate(0deg)
}

.hero-birth-star .birth-ray.r2 {
    width: 42%;
    transform: rotate(180deg)
}

.hero-birth-star .birth-ray.r3 {
    width: 35%;
    transform: rotate(90deg)
}

.hero-birth-star .birth-ray.r4 {
    width: 35%;
    transform: rotate(270deg)
}

.hero-birth-star .birth-ray.r5 {
    width: 24%;
    opacity: .48;
    transform: rotate(45deg)
}

.hero-birth-star .birth-ray.r6 {
    width: 24%;
    opacity: .48;
    transform: rotate(225deg)
}

.hero-birth-star .birth-ray.r7 {
    width: 24%;
    opacity: .48;
    transform: rotate(135deg)
}

.hero-birth-star .birth-ray.r8 {
    width: 24%;
    opacity: .48;
    transform: rotate(315deg)
}

@keyframes birth-breathe {

    0%,
    100% {
        transform: scale(.94);
        opacity: .78
    }

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

@keyframes birth-ring {
    0% {
        transform: scale(.45);
        opacity: .55
    }

    100% {
        transform: scale(1.25);
        opacity: 0
    }
}

@keyframes birth-core-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.9)
    }

    50% {
        transform: translate(-50%, -50%) scale(1.14)
    }
}

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

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 194, 71, .22);
    background: rgba(255, 194, 71, .06);
    color: #f5d98f;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 23px
}

.hero-kicker::before {
    content: "✦";
    color: var(--gold)
}

.hero h1 {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.04em;
    margin-bottom: 25px
}

.hero h1 .accent {
    color: var(--accent)
}

.hero-text {
    font-size: clamp(15px, 1.7vw, 18px);
    color: #bec3da;
    line-height: 2;
    max-width: 56ch
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 31px
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(18, 26, 58, .55);
    border: 1px solid var(--line);
    color: #b9bed5;
    font-size: 11px
}

.hero-meta span::before {
    content: "✦";
    color: var(--gold);
    font-size: 9px
}

.hero-visual {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-visual::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 66%);
    filter: blur(8px)
}

.hero-orbit {
    position: absolute;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 194, 71, .14);
    border-radius: 50%;
    animation: orbit-spin 28s linear infinite
}

.hero-orbit::before,
.hero-orbit::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 16px rgba(255, 194, 71, .9)
}

.hero-orbit::before {
    top: 10%;
    left: 15%
}

.hero-orbit::after {
    bottom: 14%;
    right: 12%
}

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

.hero-phone {
    position: relative;
    z-index: 3;
    width: 250px;
    height: 500px;
    padding: 9px;
    border-radius: 36px;
    background: #03040d;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 45px 90px -45px #000;
    transform: rotate(-5deg) translateX(34px)
}

.hero-phone-screen {
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #141d43, #090d24);
    border: 1px solid var(--line)
}

.phone-top {
    padding: 22px 18px;
    background: radial-gradient(210px 160px at 82% 10%, rgba(var(--accent-rgb), .55), transparent 65%), linear-gradient(160deg, #17204a, #0b1029)
}

.phone-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px
}

.phone-level {
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--gold);
    background: rgba(255, 194, 71, .12)
}

.phone-label {
    font-size: 10px;
    color: #aeb4ce;
    margin-top: 23px
}

.phone-balance {
    font-size: 24px;
    font-weight: 900;
    margin-top: 2px
}

.phone-balance small {
    font-size: 10px;
    color: var(--orbit);
    font-weight: 500
}

.phone-body {
    padding: 12px
}

.phone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(18, 26, 58, .7);
    margin-bottom: 9px
}

.phone-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 194, 71, .1);
    flex: none
}

.phone-item b {
    display: block;
    font-size: 12px
}

.phone-item small {
    display: block;
    color: var(--orbit);
    font-size: 10px;
    margin-top: 2px
}

.progress {
    height: 5px;
    background: rgba(154, 160, 191, .14);
    border-radius: 10px;
    margin-top: 7px;
    overflow: hidden
}

.progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), var(--accent))
}

.hero-card {
    position: absolute;
    z-index: 4;
    width: 335px;
    aspect-ratio: 1.586;
    border-radius: 24px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    right: -4px;
    bottom: 58px;
    transform: rotate(8deg);
    background: radial-gradient(380px 240px at 82% 8%, rgba(255, 45, 77, .66), transparent 60%), radial-gradient(280px 220px at 8% 92%, rgba(122, 92, 255, .42), transparent 62%), linear-gradient(145deg, #111a3c, #06091f);
    box-shadow: 0 38px 80px -35px #000;
    border: 1px solid rgba(255, 255, 255, .08)
}

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

.card-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900
}

.card-logo img {
    width: 36px;
    height: 36px;
    border-radius: 11px
}

.card-tier {
    font-family: var(--en);
    font-size: 9px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .68)
}

.card-chip {
    width: 43px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8d879, #b88622);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2)
}

.card-num {
    font-family: var(--en);
    direction: ltr;
    letter-spacing: .18em;
    font-size: 16px;
    color: rgba(255, 255, 255, .9)
}

.card-note {
    font-size: 10px;
    color: rgba(255, 255, 255, .68)
}

/* ===== value strip ===== */
.value-strip {
    position: relative;
    z-index: 7;
    margin-top: -10px
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 25px;
    overflow: hidden
}

.value-item {
    padding: 22px 24px;
    border-left: 1px solid var(--line);
    background: rgba(11, 16, 41, .78);
    backdrop-filter: blur(14px)
}

.value-item:last-child {
    border-left: 0
}

.value-item b {
    display: block;
    font-size: 14px;
    margin-bottom: 4px
}

.value-item span {
    font-size: 11px;
    color: var(--orbit)
}

/* ===== story ===== */
.story-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
    align-items: center
}

.story-visual {
    position: relative;
    min-height: 430px;
    border-radius: 36px;
    overflow: hidden;
    isolation: isolate
}

.story-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 45, 77, .26), transparent 52%), radial-gradient(circle at 30% 70%, rgba(122, 92, 255, .2), transparent 48%)
}

.story-star {
    position: absolute;
    inset: 0;
    z-index: 6;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 28px 8px rgba(255, 194, 71, .8), 0 0 90px 28px rgba(255, 45, 77, .42);
    animation: story-star-pulse 3.8s ease-in-out infinite
}

.story-ring {
    position: absolute;
    inset: 18%;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 194, 71, .19);
    box-shadow: inset 0 0 24px rgba(255, 194, 71, .025)
}

.story-ring.r2 {
    inset: 31%;
    border-color: rgba(122, 92, 255, .22);
    box-shadow: inset 0 0 22px rgba(122, 92, 255, .035)
}

.story-orbit {
    position: absolute;
    z-index: 4;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform
}

.story-orbit.o1 {
    inset: 18%;
    animation: story-orbit-spin 18s linear infinite
}

.story-orbit.o2 {
    inset: 31%;
    animation: story-orbit-spin-reverse 11s linear infinite
}

.story-planet {
    position: absolute;
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(255, 255, 255, .12);
    animation: story-planet-breathe 3.4s ease-in-out infinite
}

.story-planet::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .68), transparent 24%);
    opacity: .85
}

.story-planet.p1 {
    width: 24px;
    height: 24px;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 34% 28%, #fff2bd 0 8%, #ffbd4a 18%, #ff6548 52%, #8f203d 100%);
    box-shadow: 0 0 20px rgba(255, 101, 72, .42)
}

.story-planet.p2 {
    width: 14px;
    height: 14px;
    right: 5%;
    bottom: 19%;
    background: radial-gradient(circle at 34% 28%, #eff5ff 0 9%, #78dcff 24%, #3973c8 62%, #172455 100%);
    box-shadow: 0 0 17px rgba(85, 219, 244, .36);
    animation-delay: -1.4s
}

.story-planet.p3 {
    width: 18px;
    height: 18px;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 34% 28%, #f5eaff 0 8%, #b78cff 24%, #704bd4 58%, #271b68 100%);
    box-shadow: 0 0 18px rgba(122, 92, 255, .42);
    animation-delay: -.8s
}

.story-planet.p4 {
    width: 9px;
    height: 9px;
    left: 7%;
    top: 22%;
    background: radial-gradient(circle at 34% 28%, #fff 0 10%, #ffe39a 28%, #ca8b2d 68%, #5f3518 100%);
    box-shadow: 0 0 13px rgba(255, 194, 71, .38);
    animation-delay: -2.1s
}

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

@keyframes story-orbit-spin-reverse {
    to {
        transform: rotate(-360deg)
    }
}

@keyframes story-planet-breathe {

    0%,
    100% {
        filter: brightness(.9);
        opacity: .88
    }

    50% {
        filter: brightness(1.17);
        opacity: 1
    }
}

@keyframes story-star-pulse {

    0%,
    100% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1.16)
    }
}

.story-caption {
    position: absolute;
    bottom: 25px;
    right: 28px;
    left: 28px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    color: var(--orbit);
    font-size: 11px
}

.story-copy h2 {
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.25;
    font-weight: 900;
    margin-bottom: 21px
}

.story-copy h2 em {
    font-style: normal;
    color: var(--red)
}

.story-copy>p {
    color: #c1c6db;
    font-size: 15px;
    line-height: 2.05
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 27px
}

.mission-card {
    border-radius: 20px;
    padding: 21px
}

.mission-card span {
    color: var(--gold);
    font-size: 11px;
    font-weight: 800
}

.mission-card h3 {
    font-size: 16px;
    margin: 8px 0
}

.mission-card p {
    font-size: 12px;
    color: var(--orbit);
    line-height: 1.9
}

/* ===== features ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.feature-card {
    position: relative;
    border-radius: 24px;
    padding: 27px;
    min-height: 230px;
    overflow: hidden;
    transition: .28s
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), .35)
}

.feature-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    left: -70px;
    top: -75px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .2), transparent 65%)
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 23px;
    background: rgba(var(--accent-rgb), .13);
    border: 1px solid rgba(var(--accent-rgb), .16);
    margin-bottom: 20px
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 9px
}

.feature-card p {
    font-size: 13px;
    color: #b9bfd6;
    line-height: 1.95
}

.feature-tag {
    display: inline-flex;
    margin-top: 16px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800
}

/* ===== age journey ===== */
.journey {
    overflow: hidden
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    position: relative
}

.journey-grid::before {
    content: "";
    position: absolute;
    right: 12%;
    left: 12%;
    top: 45px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 194, 71, .06), rgba(255, 194, 71, .55), rgba(255, 194, 71, .06));
    z-index: 0
}

.tier-card {
    position: relative;
    z-index: 1;
    border-radius: 28px;
    padding: 25px;
    overflow: hidden
}

.tier-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    top: -105px;
    left: -80px;
    background: radial-gradient(circle, var(--tier-glow), transparent 66%)
}

.tier-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px
}

.tier-badge {
    font-family: var(--en);
    direction: ltr;
    font-size: 10px;
    letter-spacing: .14em;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 194, 71, .1);
    color: var(--gold);
    border: 1px solid rgba(255, 194, 71, .2)
}

.tier-age {
    font-size: 11px;
    color: var(--orbit);
    font-weight: 700
}

.tier-name {
    font-size: 29px;
    font-weight: 900;
    display: flex;
    gap: 9px;
    align-items: center
}

.tier-name::before {
    content: "✦";
    color: var(--gold);
    font-size: 18px
}

.tier-desc {
    color: #bbc0d7;
    font-size: 13px;
    line-height: 1.95;
    margin-top: 8px
}

.mini-card {
    aspect-ratio: 1.586;
    border-radius: 17px;
    padding: 16px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 22px 44px -28px #000;
    background: var(--tier-bg)
}

.mini-card .top,
.mini-card .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: rgba(255, 255, 255, .78)
}

.mini-card strong {
    font-size: 14px;
    color: #fff
}

.mini-chip {
    width: 33px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f8d879, #b88622)
}

.tier-slogan {
    padding: 13px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    margin-bottom: 16px
}

.tier-slogan b {
    display: block;
    font-size: 15px
}

.tier-slogan span {
    font-family: var(--en);
    direction: ltr;
    display: block;
    color: var(--orbit);
    font-size: 10px;
    margin-top: 3px
}

.tier-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.tier-list li {
    font-size: 12px;
    color: #c0c5da;
    padding-right: 17px;
    position: relative
}

.tier-list li::before {
    content: "✦";
    position: absolute;
    right: 0;
    color: var(--gold);
    font-size: 9px
}

.journey-note {
    margin-top: 24px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 194, 71, .24);
    background: rgba(255, 194, 71, .055);
    border-radius: 20px;
    color: #ead49a;
    font-size: 12px;
    line-height: 1.95
}

/* ===== cards studio ===== */
.card-studio {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 45px;
    align-items: center
}

.card-copy h2 {
    font-size: clamp(34px, 4.5vw, 54px);
    font-weight: 900;
    line-height: 1.25
}

.card-copy h2 em {
    font-style: normal;
    color: var(--gold)
}

.card-copy>p {
    color: #bec3d9;
    line-height: 2;
    font-size: 14px;
    margin-top: 18px
}

.card-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 25px
}

.card-features span {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(18, 26, 58, .48);
    font-size: 11px;
    color: #ccd0e2
}

.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px
}

.theme-picker button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--orbit);
    font-size: 11px;
    transition: .2s
}

.theme-picker button::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dot)
}

.theme-picker button.active {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .07)
}

.card-stage {
    position: relative;
    min-height: 530px;
    display: grid;
    place-items: center;
    border-radius: 38px;
    overflow: hidden
}

.card-stage::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stage-glow), transparent 66%);
    transition: .4s
}

.big-card {
    position: relative;
    z-index: 2;
    width: min(480px, 82%);
    aspect-ratio: 1.586;
    border-radius: 30px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-4deg);
    box-shadow: 0 55px 100px -45px #000;
    transition: background .45s, transform .35s, color .35s;
    background: var(--card-bg);
    color: var(--card-fg, #fff);
    border: 1px solid rgba(255, 255, 255, .1)
}

.big-card:hover {
    transform: rotate(-1deg) scale(1.015)
}

.big-card .brand-row,
.big-card .bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.big-card .card-brand-lock {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 900
}

.big-card .card-brand-lock img {
    width: 43px;
    height: 43px;
    border-radius: 13px
}

.big-card .tier-code {
    font-family: var(--en);
    direction: ltr;
    font-size: 10px;
    letter-spacing: .15em;
    opacity: .7
}

.big-card .middle {
    display: flex;
    align-items: center;
    gap: 18px
}

.big-card .big-chip {
    width: 52px;
    height: 39px;
    border-radius: 9px;
    background: linear-gradient(135deg, #f7d77b, #b6841d)
}

.big-card .number {
    font-family: var(--en);
    direction: ltr;
    letter-spacing: .17em;
    font-size: 18px
}

.big-card .holder {
    font-family: var(--en);
    direction: ltr;
    font-size: 11px;
    letter-spacing: .08em
}

.big-card .network {
    font-family: var(--en);
    font-weight: 800;
    font-size: 17px
}

.card-studio[data-card="signature"] {
    --card-bg: radial-gradient(400px 260px at 82% 10%, rgba(255, 45, 77, .65), transparent 62%), radial-gradient(300px 230px at 8% 90%, rgba(122, 92, 255, .45), transparent 62%), linear-gradient(150deg, #10183a, #06091d);
    --stage-glow: rgba(255, 45, 77, .25);
    --card-fg: #fff
}

.card-studio[data-card="warm"] {
    --card-bg: radial-gradient(360px 230px at 82% 12%, rgba(255, 194, 71, .35), transparent 62%), linear-gradient(150deg, #f875aa, #d6457f);
    --stage-glow: rgba(248, 117, 170, .26);
    --card-fg: #fff
}

.card-studio[data-card="cool"] {
    --card-bg: radial-gradient(360px 240px at 80% 12%, rgba(255, 255, 255, .24), transparent 62%), linear-gradient(150deg, #03aed2, #027f9a);
    --stage-glow: rgba(3, 174, 210, .26);
    --card-fg: #fff
}

.card-studio[data-card="moon"] {
    --card-bg: linear-gradient(150deg, #fff, #e7e9f4);
    --stage-glow: rgba(244, 245, 251, .2);
    --card-fg: #0b1029
}

/* ===== app experience ===== */
.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start
}

.app-column {
    border-radius: 28px;
    padding: 22px
}

.app-column-head {
    margin-bottom: 19px
}

.app-column-head span {
    font-family: var(--en);
    direction: ltr;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .13em
}

.app-column-head h3 {
    font-size: 18px;
    margin: 7px 0
}

.app-column-head p {
    font-size: 12px;
    color: var(--orbit);
    line-height: 1.9
}

.app-phone {
    max-width: 265px;
    margin: 0 auto;
    padding: 9px;
    border-radius: 34px;
    background: #03040d;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 25px 60px -38px #000
}

.app-screen {
    min-height: 475px;
    border-radius: 26px;
    overflow: hidden;
    background: #0b1029;
    border: 1px solid var(--line)
}

.app-hero {
    padding: 18px;
    background: radial-gradient(210px 150px at 82% 10%, var(--app-glow), transparent 65%), linear-gradient(160deg, #17204a, #0b1029)
}

.app-hero-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

.app-hero-label {
    font-size: 10px;
    color: var(--orbit);
    margin-top: 20px
}

.app-hero-value {
    font-size: 22px;
    font-weight: 900;
    margin-top: 3px
}

.app-hero-value small {
    font-size: 9px;
    color: var(--orbit)
}

.app-list {
    padding: 11px
}

.app-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--line);
    background: rgba(18, 26, 58, .7);
    border-radius: 13px;
    margin-bottom: 8px
}

.app-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 194, 71, .1);
    flex: none
}

.app-tile b {
    display: block;
    font-size: 11px
}

.app-tile small {
    display: block;
    font-size: 9px;
    color: var(--orbit);
    margin-top: 2px
}

.app-tabbar {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    border-top: 1px solid var(--line);
    color: #777f9f;
    font-size: 14px
}

.app-tabbar .active {
    color: var(--accent)
}

/* ===== security ===== */
.security-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: stretch
}

.security-main {
    border-radius: 30px;
    padding: 34px;
    position: relative;
    overflow: hidden
}

.security-main::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    left: -100px;
    top: -120px;
    background: radial-gradient(circle, rgba(31, 224, 182, .18), transparent 65%)
}

.security-shield {
    width: 72px;
    height: 72px;
    border-radius: 23px;
    display: grid;
    place-items: center;
    font-size: 32px;
    background: rgba(31, 224, 182, .11);
    border: 1px solid rgba(31, 224, 182, .18);
    margin-bottom: 23px
}

.security-main h3 {
    font-size: 27px;
    font-weight: 900;
    margin-bottom: 12px
}

.security-main p {
    color: #bdc3d9;
    font-size: 14px;
    line-height: 2
}

.security-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 26px
}

.security-list div {
    padding: 15px;
    border-radius: 17px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035)
}

.security-list b {
    display: block;
    font-size: 13px
}

.security-list span {
    display: block;
    color: var(--orbit);
    font-size: 10px;
    margin-top: 5px;
    line-height: 1.8
}

.parent-control {
    border-radius: 30px;
    padding: 27px
}

.control-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px
}

.control-head h3 {
    font-size: 18px
}

.secure-pill {
    font-size: 9px;
    color: var(--ion);
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(31, 224, 182, .09);
    border: 1px solid rgba(31, 224, 182, .15)
}

.control-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.control-item:last-child {
    border-bottom: 0
}

.control-item b {
    display: block;
    font-size: 12px
}

.control-item small {
    display: block;
    font-size: 9px;
    color: var(--orbit);
    margin-top: 3px
}

.toggle {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: var(--ion);
    position: relative;
    flex: none
}

.toggle::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff
}

.toggle.off {
    background: #3a4264
}

.toggle.off::after {
    left: 20px
}

/* ===== academy ===== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px
}

.blog-card {
    border-radius: 25px;
    overflow: hidden;
    text-decoration: none;
    transition: .28s
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), .34)
}

.blog-cover {
    aspect-ratio: 16/10;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--cover)
}

.blog-cover .label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, .82)
}

.blog-cover .symbol {
    font-size: 42px;
    align-self: flex-end;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .2))
}

.blog-body {
    padding: 21px
}

.blog-body h3 {
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 8px
}

.blog-body p {
    font-size: 12px;
    color: var(--orbit);
    line-height: 1.9
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    color: var(--gold);
    font-size: 10px
}

/* ===== FAQ ===== */
.faq-wrap {
    max-width: 900px;
    margin-inline: auto
}

.faq-wrap .section-head {
    grid-template-columns: 1fr;
    text-align: center
}

.faq-wrap .section-lead {
    margin-inline: auto
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

details.faq {
    border-radius: 19px;
    overflow: hidden
}

details.faq summary {
    list-style: none;
    padding: 19px 22px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer
}

details.faq summary::-webkit-details-marker {
    display: none
}

details.faq summary::after {
    content: "+";
    font-family: var(--en);
    font-size: 22px;
    color: var(--gold);
    transition: .2s
}

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

details.faq p {
    padding: 0 22px 20px;
    color: #b8bed4;
    font-size: 13px;
    line-height: 2;
    border-top: 1px solid var(--line);
    padding-top: 17px
}

/* ===== CTA / footer ===== */
.cta {
    padding: 120px 0 100px;
    text-align: center;
    overflow: hidden
}

.cta-box {
    position: relative;
    border-radius: 38px;
    padding: 70px 30px;
    overflow: hidden;
    background: radial-gradient(650px 360px at 50% 10%, rgba(var(--accent-rgb), .34), transparent 68%), linear-gradient(160deg, rgba(18, 26, 58, .92), rgba(11, 16, 41, .9));
    border: 1px solid var(--line)
}

.cta-box::before,
.cta-box::after {
    content: "✦";
    position: absolute;
    color: rgba(255, 194, 71, .2);
    font-size: 100px
}

.cta-box::before {
    right: 8%;
    top: 10%
}

.cta-box::after {
    left: 8%;
    bottom: 5%;
    font-size: 70px
}

.cta h2 {
    font-size: clamp(38px, 6vw, 70px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.035em
}

.cta h2 em {
    font-style: normal;
    color: var(--accent)
}

.cta p {
    max-width: 52ch;
    margin: 20px auto 30px;
    color: #bdc2d7;
    font-size: 14px;
    line-height: 2
}

.cta .hero-actions {
    justify-content: center;
    margin-top: 0
}

footer {
    border-top: 1px solid var(--line);
    background: rgba(4, 6, 18, .6);
    padding: 48px 0 28px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, .7fr);
    gap: 35px
}

.footer-brand p {
    color: var(--orbit);
    font-size: 12px;
    line-height: 1.9;
    max-width: 34ch;
    margin-top: 14px
}

.footer-title {
    font-size: 12px;
    color: #fff;
    margin-bottom: 13px
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer-links a {
    font-size: 11px;
    color: var(--orbit);
    text-decoration: none
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: #707897;
    font-size: 10px
}

.footer-spark {
    color: var(--gold)
}

/* ===== responsive ===== */
@media(max-width:1060px) {
    .nav-links {
        gap: 15px
    }

    .nav-links a {
        font-size: 12px
    }

    .hero-grid {
        gap: 30px
    }

    .hero-card {
        right: -30px
    }

    .hero-phone {
        transform: rotate(-4deg) translateX(15px)
    }

    .feature-grid,
    .app-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .app-column:last-child {
        grid-column: 1/-1;
        max-width: 570px;
        margin-inline: auto;
        width: 100%
    }
}

@media(max-width:820px) {
    html {
        scroll-padding-top: 75px
    }

    .container {
        width: min(100% - 30px, var(--max))
    }

    .site-header {
        height: 68px;
        background: rgba(6, 8, 26, .72);
        backdrop-filter: blur(16px);
        border-color: var(--line)
    }

    .navbar {
        gap: 10px
    }

    .brand-copy small {
        display: none
    }

    .brand img {
        width: 38px;
        height: 38px
    }

    .brand-copy strong {
        font-size: 15px
    }

    .nav-links,
    .nav-actions .nav-cta {
        display: none
    }

    .nav-actions {
        margin-right: auto
    }

    .menu-btn {
        display: flex
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 98;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(2, 4, 16, .7);
        backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .32s ease, visibility .32s ease
    }

    .mobile-menu-backdrop.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .mobile-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 101;
        display: block;
        height: clamp(330px, 52dvh, 430px);
        max-height: calc(100dvh - 68px);
        padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 0;
        border-radius: 30px 30px 0 0;
        background:
            radial-gradient(circle at 82% 8%, rgba(255, 45, 77, .2), transparent 29%),
            radial-gradient(circle at 12% 100%, rgba(3, 174, 210, .13), transparent 34%),
            rgba(9, 13, 36, .98);
        box-shadow: 0 -24px 70px rgba(0, 0, 0, .48);
        backdrop-filter: blur(24px);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .42s cubic-bezier(.22, 1, .36, 1), visibility .42s
    }

    .mobile-panel.open {
        transform: translateY(0);
        visibility: visible
    }

    .mobile-panel-handle {
        display: block;
        width: 44px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .22)
    }

    .mobile-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 4px 10px;
        border-bottom: 1px solid rgba(154, 160, 191, .11)
    }

    .mobile-panel-head div {
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .mobile-panel-head small {
        color: #7f88aa;
        font-size: 10px
    }

    .mobile-panel-head strong {
        color: #fff;
        font-size: 18px;
        font-weight: 850
    }

    .mobile-panel-orbit {
        position: relative;
        width: 39px;
        height: 39px;
        flex: none;
        border: 1px solid rgba(var(--accent-rgb), .42);
        border-radius: 50%;
        box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .12)
    }

    .mobile-panel-orbit::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), .9);
        transform: translate(50%, -50%)
    }

    .mobile-panel-orbit::after {
        content: "";
        position: absolute;
        inset: 7px -4px;
        border: 1px solid rgba(3, 174, 210, .42);
        border-radius: 50%;
        transform: rotate(-25deg)
    }

    .mobile-panel-links {
        display: grid;
        gap: 4px;
        padding-top: 9px
    }

    .mobile-panel a {
        display: flex;
        align-items: center;
        gap: 13px;
        min-height: 42px;
        padding: 5px 12px;
        border: 1px solid transparent;
        border-radius: 15px;
        color: #e8eaf4;
        text-decoration: none;
        background: rgba(255, 255, 255, .025);
        transition: transform .2s ease, border-color .2s ease, background .2s ease
    }

    .mobile-panel a:active {
        transform: scale(.98);
        border-color: rgba(var(--accent-rgb), .3);
        background: rgba(var(--accent-rgb), .08)
    }

    .mobile-panel a span {
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        flex: none;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 10px;
        color: var(--orbit);
        background: rgba(255, 255, 255, .035);
        font-size: 9px
    }

    .mobile-panel a strong {
        font-size: 13px;
        font-weight: 720
    }

    body.mobile-menu-open {
        overflow: hidden
    }

    .hero {
        padding: 115px 0 65px;
        min-height: auto
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center
    }

    .hero-copy {
        order: 1
    }

    .hero-visual {
        order: 2;
        min-height: 470px;
        margin-top: 12px
    }

    .hero-text {
        margin-inline: auto
    }

    .hero-actions,
    .hero-meta {
        justify-content: center
    }

    .hero h1 {
        font-size: clamp(48px, 15vw, 72px)
    }

    .hero-phone {
        width: 205px;
        height: 412px;
        transform: rotate(-5deg) translateX(24px)
    }

    .hero-card {
        width: 270px;
        right: 50%;
        bottom: 38px;
        transform: translateX(64%) rotate(7deg);
        padding: 20px;
        border-radius: 21px
    }

    .hero-orbit {
        width: 350px;
        height: 350px
    }

    .hero-visual::before {
        width: 420px;
        height: 420px
    }

    .hero-birth-star {
        width: min(700px, 120vw);
        top: 48%
    }

    .phone-top {
        padding: 17px 14px
    }

    .phone-balance {
        font-size: 20px
    }

    .phone-item {
        padding: 8px
    }

    .phone-icon {
        width: 29px;
        height: 29px
    }

    .card-num {
        font-size: 13px
    }

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

    .value-item:nth-child(2) {
        border-left: 0
    }

    .value-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }

    .section {
        padding: 76px 0
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 30px;
        text-align: center
    }

    .section-lead {
        margin-inline: auto
    }

    .section-title {
        font-size: clamp(30px, 9vw, 43px)
    }

    .story-grid,
    .card-studio,
    .security-grid {
        grid-template-columns: 1fr
    }

    .story-copy {
        text-align: center
    }

    .story-copy>p {
        font-size: 13px
    }

    .story-visual {
        min-height: 320px;
        order: 2
    }

    .mission-grid {
        grid-template-columns: 1fr;
        text-align: right
    }

    .feature-grid,
    .journey-grid,
    .app-grid,
    .blog-grid {
        grid-template-columns: 1fr
    }

    .feature-card {
        min-height: auto
    }

    .journey-grid::before {
        display: none
    }

    .tier-card {
        max-width: 480px;
        margin-inline: auto;
        width: 100%
    }

    .card-copy {
        text-align: center
    }

    .card-features {
        grid-template-columns: 1fr 1fr;
        text-align: right
    }

    .theme-picker {
        justify-content: center
    }

    .card-stage {
        min-height: 390px
    }

    .big-card {
        width: 90%;
        padding: 22px;
        border-radius: 23px
    }

    .big-card .number {
        font-size: 13px
    }

    .big-card .card-brand-lock {
        font-size: 16px
    }

    .big-card .card-brand-lock img {
        width: 36px;
        height: 36px
    }

    .app-column:last-child {
        grid-column: auto;
        max-width: none
    }

    .app-phone {
        max-width: 280px
    }

    .security-list {
        grid-template-columns: 1fr
    }

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

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center
    }

    .cta {
        padding: 80px 0
    }

    .cta-box {
        padding: 55px 20px;
        border-radius: 28px
    }

    .cta-box::before,
    .cta-box::after {
        display: none
    }
}

@media(max-width:480px) {
    .hero-actions {
        flex-direction: column
    }

    .hero-actions a {
        width: 100%
    }

    .hero-meta span {
        width: 100%;
        justify-content: center
    }

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

    .value-item {
        border-left: 0 !important;
        border-bottom: 1px solid var(--line) !important
    }

    .value-item:last-child {
        border-bottom: 0 !important
    }

    .card-features {
        grid-template-columns: 1fr
    }

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

    .footer-brand {
        grid-column: auto
    }

    .big-card {
        width: 96%;
        padding: 18px
    }

    .big-card .middle {
        gap: 10px
    }

    .big-card .big-chip {
        width: 43px;
        height: 32px
    }

    .big-card .number {
        font-size: 11px;
        letter-spacing: .12em
    }

    .theme-picker button {
        flex: 1;
        justify-content: center;
        min-width: 45%
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-birth-star,
    .hero-birth-star * {
        animation: none !important;
        transition: none !important
    }

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

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

/* ===== RedNova minimal headings + refined story planets ===== */
.hero h1 {
    font-size: clamp(38px, 5.8vw, 68px);
    line-height: 1.08;
}

.section-title,
.story-copy h2,
.card-copy h2 {
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.35;
}

.cta h2 {
    font-size: clamp(30px, 4.8vw, 54px);
    line-height: 1.2;
}

.pane-headline {
    font-size: clamp(34px, 4.9vw, 62px);
    line-height: 1.16;
}

.tier-name {
    font-size: 24px
}

.section-head {
    gap: 28px
}

.story-visual {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 194, 71, .08), rgba(255, 194, 71, 0) 18%),
        radial-gradient(circle at 52% 48%, rgba(255, 45, 77, .16), rgba(255, 45, 77, 0) 34%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .045), transparent 20%),
        linear-gradient(180deg, rgba(10, 14, 36, .92), rgba(7, 10, 25, .92));
}

.story-visual::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 194, 71, .16), transparent 18%),
        radial-gradient(circle at 50% 50%, rgba(255, 45, 77, .18), transparent 40%),
        radial-gradient(circle at 28% 30%, rgba(122, 92, 255, .12), transparent 28%),
        radial-gradient(circle at 72% 70%, rgba(3, 174, 210, .08), transparent 24%);
}

.story-ring {
    inset: 15%;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 22px rgba(255, 255, 255, .025), 0 0 0 1px rgba(255, 194, 71, .02);
}

.story-ring.r2 {
    inset: 29%;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 18px rgba(122, 92, 255, .03);
}

.story-orbit {
    inset: 0
}

.story-orbit.o1 {
    inset: 15%;
    animation: story-orbit-spin 24s linear infinite;
}

.story-orbit.o2 {
    inset: 29%;
    animation: story-orbit-spin-reverse 16s linear infinite;
}

.story-planet {
    position: absolute;
    border-radius: 50%;
    overflow: visible;
    filter: saturate(1.08);
}

.story-planet::after {
    inset: 10%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .72), transparent 26%);
}

.story-planet.p1 {
    width: 26px;
    height: 26px;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 34% 28%, #fff4cf 0 10%, #ffca6b 20%, #ff8a52 58%, #7f2331 100%);
    box-shadow: 0 0 22px rgba(255, 138, 82, .28);
}

.story-planet.p2 {
    width: 17px;
    height: 17px;
    right: -8px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: radial-gradient(circle at 34% 28%, #eef7ff 0 12%, #81d8ff 24%, #4578d1 62%, #14224e 100%);
    box-shadow: 0 0 20px rgba(85, 219, 244, .24);
}

.story-planet.p3 {
    width: 20px;
    height: 20px;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 34% 28%, #f4eaff 0 10%, #b98fff 24%, #7551d8 60%, #281c69 100%);
    box-shadow: 0 0 20px rgba(122, 92, 255, .26);
}

.story-planet.p4 {
    display: none !important
}

.story-star {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, #fff 0 20%, #fff1b8 38%, #ffc247 66%, #ff6f4f 100%);
    box-shadow: 0 0 18px 4px rgba(255, 255, 255, .55), 0 0 40px 12px rgba(255, 194, 71, .40), 0 0 92px 28px rgba(255, 45, 77, .24);
}

@media(max-width:820px) {
    .hero h1 {
        font-size: clamp(34px, 9.4vw, 54px)
    }

    .section-title,
    .story-copy h2,
    .card-copy h2 {
        font-size: clamp(24px, 7vw, 34px)
    }

    .cta h2 {
        font-size: clamp(28px, 8vw, 42px)
    }

    .pane-headline {
        font-size: clamp(30px, 8vw, 48px)
    }

    .story-visual {
        min-height: 340px
    }
}


/* ===== Font Awesome homepage icons ===== */
.phone-icon i,
.feature-icon i,
.app-tile-icon i,
.security-shield i,
.blog-cover .symbol i,
.app-tabbar i,
.app-hero-row i,
.secure-pill i,
.blog-meta i {
    display: inline-block;
    line-height: 1;
    text-align: center;
}

.phone-icon i {
    font-size: 15px
}

.feature-icon i {
    font-size: 22px
}

.app-tile-icon i {
    font-size: 14px
}

.app-hero-row i {
    font-size: .88em;
    margin-inline: 3px
}

.app-tabbar span {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px
}

.app-tabbar i {
    font-size: 13px
}

.security-shield i {
    font-size: 31px
}

.secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.secure-pill i {
    font-size: 5px
}

.blog-cover .symbol i {
    font-size: 40px
}

.blog-meta i {
    font-size: 9px;
    margin-right: 3px
}