:root {
            --background: #000000;
            --ember: #ff5a00;
            --ember-bright: #ff9a32;
            --gold: #f6b34a;
            --text: #f5eee6;
            --muted: #b7aaa0;
        }

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

        html,
        body {
            width: 100%;
            min-height: 100%;
            background: var(--background);
        }

        body {
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    overflow-x: hidden;
    overflow-y: auto;
}

        .page {
    position: relative;
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: 60px 18px;
    isolation: isolate;
}

        .background-glow {
            position: absolute;
            top: 43%;
            left: 50%;
            width: min(72vw, 620px);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background:
                radial-gradient(
                    circle,
                    rgba(255, 95, 0, 0.22) 0%,
                    rgba(255, 65, 0, 0.09) 38%,
                    transparent 72%
                );
            filter: blur(26px);
            animation: glowPulse 4s ease-in-out infinite;
            z-index: -2;
        }

        .content {
            width: min(94vw, 820px);
            text-align: center;
            animation: fadeIn 1.6s ease-out both;
        }

        .logo-wrap {
            position: relative;
            width: clamp(180px, 29vw, 320px);
            margin: 0 auto 18px;
        }

        .logo-wrap::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 1%;
            width: 66%;
            height: 12%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: rgba(255, 86, 0, 0.48);
            filter: blur(20px);
            animation: emberBase 3.2s ease-in-out infinite;
            z-index: -1;
        }

        .logo {
            display: block;
            width: 100%;
            height: auto;
            background: transparent;
            filter:
                drop-shadow(0 0 7px rgba(255, 174, 71, 0.88))
                drop-shadow(0 0 22px rgba(255, 84, 0, 0.75))
                drop-shadow(0 0 52px rgba(255, 45, 0, 0.42));
            animation: breathe 3.2s ease-in-out infinite;
        }

        .brand {
            margin-top: 2px;
            line-height: 0.9;
        }

        .brand-main {
            display: block;
            font-size: clamp(3.5rem, 12vw, 7.8rem);
            font-weight: 400;
            letter-spacing: clamp(0.28rem, 1.8vw, 1.15rem);
            color: transparent;
            background:
                linear-gradient(
                    180deg,
                    #ffd67a 0%,
                    #f3a632 34%,
                    #e85a0a 72%,
                    #8f2607 100%
                );
            background-clip: text;
            -webkit-background-clip: text;
            text-shadow:
                0 0 12px rgba(255, 129, 24, 0.3),
                0 0 34px rgba(255, 82, 0, 0.2);
        }

        .brand-rise-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-top: 18px;
        }

        .brand-rise-row::before,
        .brand-rise-row::after {
            content: "";
            width: clamp(42px, 10vw, 90px);
            height: 1px;
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--ember)
                );
            box-shadow: 0 0 8px rgba(255, 85, 0, 0.7);
        }

        .brand-rise-row::after {
            background:
                linear-gradient(
                    90deg,
                    var(--ember),
                    transparent
                );
        }

        .brand-rise {
            display: block;
            font-size: clamp(1.65rem, 5vw, 3.3rem);
            font-weight: 400;
            letter-spacing: clamp(0.55rem, 2vw, 1.35rem);
            color: var(--gold);
            text-shadow:
                0 0 8px rgba(255, 144, 33, 0.35),
                0 0 20px rgba(255, 79, 0, 0.18);
        }

        .story {
            max-width: 660px;
            margin: 38px auto 0;
            font-size: clamp(1.05rem, 2.4vw, 1.55rem);
            line-height: 1.65;
            color: var(--muted);
            font-style: italic;
        }

        .story strong {
            color: var(--ember-bright);
            font-weight: 400;
        }

        .coming-soon {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-top: 34px;
            color: var(--ember-bright);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.38rem;
            text-transform: uppercase;
        }

        .coming-soon::before,
        .coming-soon::after {
            content: "";
            width: 48px;
            height: 1px;
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--ember)
                );
            box-shadow: 0 0 8px rgba(255, 90, 0, 0.6);
        }

        .coming-soon::after {
            background:
                linear-gradient(
                    90deg,
                    var(--ember),
                    transparent
                );
        }

        /* Floating ember particles */

.ember {
    --drift-start: 0px;
    --drift-middle: 18px;
    --drift-end: 36px;
    --ember-scale: 1;

    position: absolute;
    bottom: -16px;

    width: 3px;
    height: 3px;
    border-radius: 50%;

    background: var(--ember-bright);

    box-shadow:
        0 0 5px var(--ember),
        0 0 12px rgba(255, 80, 0, 0.8),
        0 0 20px rgba(255, 45, 0, 0.35);

    opacity: 0;

    animation:
        emberRise linear infinite,
        emberFlicker ease-in-out infinite;

    pointer-events: none;
    z-index: -1;
}


/* Ember 1 — slow, drifting right */

.ember:nth-child(1) {
    left: 12%;

    width: 3px;
    height: 3px;

    --drift-middle: 20px;
    --drift-end: 48px;
    --ember-scale: 1.05;

    animation-duration: 10s, 1.8s;
    animation-delay: 0s, 0.2s;
}


/* Ember 2 — tiny, drifting left */

.ember:nth-child(2) {
    left: 27%;

    width: 2px;
    height: 2px;

    --drift-middle: -14px;
    --drift-end: -34px;
    --ember-scale: 0.8;

    animation-duration: 13s, 2.4s;
    animation-delay: 2.5s, 0.8s;
}


/* Ember 3 — brighter, faster spark */

.ember:nth-child(3) {
    left: 41%;

    width: 4px;
    height: 4px;

    --drift-middle: 10px;
    --drift-end: 28px;
    --ember-scale: 1.2;

    animation-duration: 8.5s, 1.3s;
    animation-delay: 4s, 0s;
}


/* Ember 4 — large, slow curve left */

.ember:nth-child(4) {
    left: 58%;

    width: 4px;
    height: 4px;

    --drift-middle: -18px;
    --drift-end: -46px;
    --ember-scale: 1.15;

    animation-duration: 12s, 2s;
    animation-delay: 1s, 0.4s;
}


/* Ember 5 — faint background ember */

.ember:nth-child(5) {
    left: 73%;

    width: 2px;
    height: 2px;

    --drift-middle: 12px;
    --drift-end: 24px;
    --ember-scale: 0.7;

    animation-duration: 15s, 2.8s;
    animation-delay: 5s, 1.2s;
}


/* Ember 6 — medium spark drifting left */

.ember:nth-child(6) {
    left: 87%;

    width: 3px;
    height: 3px;

    --drift-middle: -10px;
    --drift-end: -30px;
    --ember-scale: 0.95;

    animation-duration: 11s, 1.6s;
    animation-delay: 3s, 0.6s;
}


/* Natural upward movement */

@keyframes emberRise {
    0% {
        opacity: 0;
        transform:
            translate3d(var(--drift-start), 0, 0)
            scale(0.55);
    }

    8% {
        opacity: 0.95;
    }

    38% {
        transform:
            translate3d(var(--drift-middle), -38vh, 0)
            scale(var(--ember-scale));
    }

    68% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(var(--drift-end), -112vh, 0)
            scale(0.35);
    }
}


/* Small irregular brightness changes */

@keyframes emberFlicker {
    0%,
    100% {
        filter: brightness(0.8);
    }

    24% {
        filter: brightness(1.6);
    }

    47% {
        filter: brightness(1);
    }

    72% {
        filter: brightness(1.9);
    }

    88% {
        filter: brightness(0.9);
    }
}

        @keyframes breathe {
    0%,
    100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 7px rgba(255, 174, 71, 0.78))
            drop-shadow(0 0 20px rgba(255, 84, 0, 0.66))
            drop-shadow(0 0 46px rgba(255, 45, 0, 0.34));
    }

    42% {
        transform: scale(1.018);
        filter:
            drop-shadow(0 0 9px rgba(255, 190, 90, 0.92))
            drop-shadow(0 0 27px rgba(255, 92, 0, 0.78))
            drop-shadow(0 0 58px rgba(255, 45, 0, 0.43));
    }

    58% {
        transform: scale(1.026);
        filter:
            drop-shadow(0 0 8px rgba(255, 170, 65, 0.85))
            drop-shadow(0 0 23px rgba(255, 78, 0, 0.72))
            drop-shadow(0 0 51px rgba(255, 38, 0, 0.38));
    }
}

        @keyframes glowPulse {
            0%,
            100% {
                opacity: 0.7;
                transform: translate(-50%, -50%) scale(0.96);
            }

            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.05);
            }
        }

        @keyframes emberBase {
            0%,
            100% {
                opacity: 0.55;
                transform: translateX(-50%) scaleX(0.9);
            }

            50% {
                opacity: 0.95;
                transform: translateX(-50%) scaleX(1.08);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes rise {
            0% {
                opacity: 0;
                transform: translateY(0) translateX(0) scale(0.7);
            }

            12% {
                opacity: 0.9;
            }

            70% {
                opacity: 0.45;
            }

            100% {
                opacity: 0;
                transform: translateY(-105vh) translateX(38px) scale(1.15);
            }
        }

        @media (max-width: 600px) {
            .page {
                padding: 22px 16px;
            }

            .logo-wrap {
                width: min(46vw, 230px);
                margin-bottom: 14px;
            }

            .brand-main {
                letter-spacing: 0.28rem;
            }

            .brand-rise-row {
                gap: 10px;
                margin-top: 14px;
            }

            .brand-rise {
                letter-spacing: 0.62rem;
            }

            .story {
                max-width: 350px;
                margin-top: 30px;
            }

            .coming-soon {
                gap: 10px;
                letter-spacing: 0.25rem;
            }

            .coming-soon::before,
            .coming-soon::after {
                width: 28px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }