/* ======================================================================
   VIDZO STREAMING
   Production Website UI
   Deep Plum • Warm Gold • Live Magenta
   ====================================================================== */


/* ======================================================================
   01. DESIGN TOKENS
   ====================================================================== */

:root {
    color-scheme: dark;

    /* Core Brand */
    --vz-black: #08040d;
    --vz-black-soft: #0b0612;

    --vz-plum-950: #0e0718;
    --vz-plum-900: #130a20;
    --vz-plum-850: #190f29;
    --vz-plum-800: #211333;
    --vz-plum-750: #2a1940;
    --vz-plum-700: #34204f;
    --vz-plum-600: #51336d;

    --vz-gold-300: #ffe992;
    --vz-gold-400: #ffdc69;
    --vz-gold-500: #ffc928;
    --vz-gold-600: #e7b315;

    --vz-white: #ffffff;
    --vz-ivory: #f8f6f1;

    --vz-muted: #d2ccd9;
    --vz-soft: #9f97aa;

    --vz-live: #ff4968;
    --vz-success: #45d58a;
    --vz-error: #ff6674;
    --vz-info: #8db9ff;


    /* ================================================================
       Compatibility Variables
       ================================================================ */

    --color-background:
        var(--vz-black);

    --color-background-alt:
        var(--vz-black-soft);

    --color-surface:
        rgba(255, 255, 255, 0.052);

    --color-surface-strong:
        rgba(255, 255, 255, 0.095);

    --color-border:
        rgba(255, 255, 255, 0.105);

    --color-border-strong:
        rgba(255, 255, 255, 0.19);

    --color-primary:
        #8f72b5;

    --color-primary-light:
        #b59bd4;

    --color-secondary:
        var(--vz-gold-500);

    --color-accent:
        #d84f99;

    --color-live:
        var(--vz-live);

    --color-success:
        var(--vz-success);

    --color-text:
        var(--vz-white);

    --color-text-heading:
        var(--vz-ivory);

    --color-text-muted:
        var(--vz-muted);

    --color-text-soft:
        var(--vz-soft);


    /* ================================================================
       Gradients
       ================================================================ */

    --gradient-page:
        radial-gradient(
            circle at 8% 8%,
            rgba(143, 114, 181, 0.13),
            transparent 28rem
        ),
        radial-gradient(
            circle at 94% 13%,
            rgba(255, 201, 40, 0.07),
            transparent 26rem
        ),
        linear-gradient(
            180deg,
            #09040f 0%,
            #0e0718 45%,
            #09040f 100%
        );

    --gradient-gold:
        linear-gradient(
            135deg,
            var(--vz-gold-300),
            var(--vz-gold-500) 52%,
            #c99808
        );

    --gradient-card:
        linear-gradient(
            145deg,
            rgba(48, 28, 72, 0.94),
            rgba(18, 10, 30, 0.97)
        );

    --gradient-card-soft:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.072),
            rgba(255, 255, 255, 0.022)
        );


    /* ================================================================
       Geometry
       ================================================================ */

    --container-width:
        1220px;

    --container-padding:
        24px;

    --header-height:
        78px;

    --radius-xs:
        10px;

    --radius-sm:
        14px;

    --radius-md:
        18px;

    --radius-lg:
        26px;

    --radius-xl:
        34px;

    --radius-pill:
        999px;


    /* ================================================================
       Shadows
       ================================================================ */

    --shadow-small:
        0 12px 30px
        rgba(0, 0, 0, 0.23);

    --shadow-medium:
        0 24px 64px
        rgba(0, 0, 0, 0.36);

    --shadow-large:
        0 42px 110px
        rgba(0, 0, 0, 0.52);

    --shadow-gold:
        0 18px 55px
        rgba(255, 201, 40, 0.16);

    --shadow-focus:
        0 0 0 4px
        rgba(255, 201, 40, 0.16);


    /* ================================================================
       Animation
       ================================================================ */

    --ease-standard:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --transition-fast:
        160ms ease;

    --transition-standard:
        280ms ease;

    --transition-slow:
        520ms var(--ease-standard);


    /* ================================================================
       Z-Index
       ================================================================ */

    --z-header:
        1000;

    --z-menu:
        1100;

    --z-floating:
        20;
}


/* ======================================================================
   02. RESET
   ====================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;

    scroll-padding-top:
        calc(
            var(--header-height) +
            22px
        );
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--gradient-page);

    color:
        var(--color-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        16px;

    line-height:
        1.7;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


body::before {
    position: fixed;

    inset: 0;

    z-index: -2;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.011) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.011) 1px,
            transparent 1px
        );

    background-size:
        56px 56px;

    content: "";

    pointer-events:
        none;
}


body.menu-open {
    overflow:
        hidden;
}


img,
picture,
svg,
video,
canvas {
    display: block;

    max-width: 100%;
}


img {
    height: auto;
}


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


button {
    border: 0;

    cursor:
        pointer;
}


button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.65;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


ul,
ol {
    list-style:
        none;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--color-text-heading);

    line-height:
        1.06;

    letter-spacing:
        -0.035em;

    text-wrap:
        balance;
}


p {
    text-wrap:
        pretty;
}


::selection {
    background:
        var(--vz-gold-500);

    color:
        #1a1025;
}


:focus-visible {
    outline:
        3px solid
        var(--vz-gold-500);

    outline-offset:
        4px;
}


/* ======================================================================
   03. ACCESSIBILITY
   ====================================================================== */

.skip-link {
    position:
        fixed;

    top:
        14px;

    left:
        14px;

    z-index:
        99999;

    padding:
        11px 17px;

    border-radius:
        var(--radius-sm);

    background:
        var(--gradient-gold);

    color:
        #1a1025;

    font-weight:
        850;

    transform:
        translateY(-180%);

    transition:
        transform
        var(--transition-fast);
}


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


.visually-hidden {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* ======================================================================
   04. SAFE REVEAL ANIMATIONS

   IMPORTANT:
   Content is visible by default.
   This prevents the website from becoming blank if JavaScript fails.
   ====================================================================== */

.reveal {
    opacity:
        1;

    visibility:
        visible;

    transform:
        none;
}


/*
   JavaScript must explicitly add .reveal-ready
   before CSS hides anything.
*/

html.reveal-ready
.reveal:not(.visible):not(.is-visible) {
    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity
        620ms
        var(--ease-standard),

        transform
        620ms
        var(--ease-standard);
}


html.reveal-ready
.reveal.visible,

html.reveal-ready
.reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ======================================================================
   05. CONTAINERS
   ====================================================================== */

.section-container,
.header-container,
.hero-container,
.footer-bottom-content {
    width:
        min(
            calc(
                100% -
                (
                    var(--container-padding) *
                    2
                )
            ),
            var(--container-width)
        );

    margin-inline:
        auto;
}


.section {
    position:
        relative;

    padding-block:
        clamp(
            78px,
            8vw,
            116px
        );

    isolation:
        isolate;
}


.section + .section {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );
}


section[id] {
    scroll-margin-top:
        calc(
            var(--header-height) +
            25px
        );
}


.section-heading {
    width:
        min(
            100%,
            820px
        );

    margin-bottom:
        clamp(
            34px,
            5vw,
            55px
        );
}


.centered-heading {
    margin-inline:
        auto;

    text-align:
        center;
}


.section-label,
.panel-label,
.hero-eyebrow {
    width:
        fit-content;

    margin-bottom:
        15px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--vz-gold-500);

    font-size:
        0.75rem;

    font-weight:
        850;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.section-label::before,
.panel-label::before,
.hero-eyebrow::before {
    width:
        25px;

    height:
        2px;

    flex:
        0 0 auto;

    border-radius:
        999px;

    background:
        currentColor;

    content:
        "";
}


.centered-heading
.section-label::after {
    width:
        25px;

    height:
        2px;

    border-radius:
        999px;

    background:
        currentColor;

    content:
        "";
}


.section-heading h2,
.about-content h2,
.launch-content h2,
.contact-information h2,
.platform-introduction h2,
.newsletter-copy h2 {
    margin-bottom:
        18px;

    font-size:
        clamp(
            2.15rem,
            5vw,
            4.15rem
        );

    font-weight:
        900;

    letter-spacing:
        -0.048em;
}


.section-heading p,
.about-content > p,
.launch-content > p,
.contact-information > p,
.intro-copy p,
.newsletter-copy > p {
    color:
        var(--color-text-muted);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.12rem
        );

    line-height:
        1.78;
}


/* ======================================================================
   06. HEADER
   ====================================================================== */

.site-header {
    position:
        fixed;

    inset:
        0 0 auto;

    z-index:
        var(--z-header);

    width:
        100%;

    min-height:
        var(--header-height);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.065
        );

    background:
        rgba(
            9,
            4,
            15,
            0.82
        );

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.12
        );

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    transition:
        background
        var(--transition-standard),

        border-color
        var(--transition-standard),

        box-shadow
        var(--transition-standard);
}


.site-header.is-scrolled,
.site-header.scrolled {
    border-bottom-color:
        rgba(
            255,
            201,
            40,
            0.14
        );

    background:
        rgba(
            9,
            4,
            15,
            0.96
        );

    box-shadow:
        0 14px 42px
        rgba(
            0,
            0,
            0,
            0.34
        );
}


.page-scroll-progress {
    position:
        absolute;

    right:
        0;

    bottom:
        -1px;

    left:
        0;

    height:
        2px;

    background:
        var(--gradient-gold);

    box-shadow:
        0 0 12px
        rgba(
            255,
            201,
            40,
            0.48
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.header-container {
    min-height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


/* ======================================================================
   07. LOGO
   ====================================================================== */

.logo,
.footer-logo-link {
    min-width:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;
}


.logo-image,
.footer-logo {
    width:
        auto !important;

    height:
        48px !important;

    max-width:
        64px !important;

    object-fit:
        contain !important;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(
                0,
                0,
                0,
                0.26
            )
        );
}


.logo-copy {
    display:
        grid;

    line-height:
        1;
}


.logo-text,
.footer-brand-name {
    color:
        var(--vz-ivory);

    font-size:
        1.22rem;

    font-weight:
        900;

    letter-spacing:
        -0.045em;
}


.logo-subtext,
.footer-brand-type {
    margin-top:
        4px;

    color:
        var(--vz-gold-500);

    font-size:
        0.66rem;

    font-weight:
        900;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


/* ======================================================================
   08. NAVIGATION
   ====================================================================== */

.navigation-menu {
    min-width:
        0;

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        2px;
}


.navigation-menu a {
    min-height:
        40px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-pill);

    color:
        #d8d2df;

    font-size:
        0.84rem;

    font-weight:
        740;

    white-space:
        nowrap;

    transition:
        color
        var(--transition-fast),

        border-color
        var(--transition-fast),

        background
        var(--transition-fast),

        transform
        var(--transition-fast);
}


.navigation-menu a:hover,
.navigation-menu a:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    color:
        var(--vz-white);

    transform:
        translateY(-1px);
}


.navigation-menu a.active,
.navigation-menu a[aria-current="page"] {
    border-color:
        rgba(
            255,
            201,
            40,
            0.23
        );

    background:
        rgba(
            255,
            201,
            40,
            0.078
        );

    color:
        var(--vz-gold-400);
}


.navigation-menu
.nav-contact-button {
    margin-left:
        6px;

    padding-inline:
        17px;

    border-color:
        rgba(
            255,
            201,
            40,
            0.3
        );

    background:
        var(--gradient-gold);

    color:
        #1a1025;

    box-shadow:
        0 10px 28px
        rgba(
            255,
            201,
            40,
            0.14
        );
}


.navigation-menu
.nav-contact-button:hover {
    color:
        #1a1025;

    box-shadow:
        0 14px 34px
        rgba(
            255,
            201,
            40,
            0.22
        );
}


/* ======================================================================
   09. MOBILE MENU BUTTON
   ====================================================================== */

.menu-button {
    display:
        none;

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid
        var(--color-border);

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.052
        );
}


.menu-button span {
    width:
        20px;

    height:
        2px;

    display:
        block;

    margin:
        4px auto;

    border-radius:
        999px;

    background:
        var(--vz-ivory);

    transition:
        transform
        var(--transition-standard),

        opacity
        var(--transition-fast);
}


.menu-button.is-active
span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.menu-button.is-active
span:nth-child(2) {
    opacity:
        0;
}


.menu-button.is-active
span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* ======================================================================
   10. BUTTONS
   ====================================================================== */

.primary-button,
.secondary-button,
.store-button {
    min-height:
        52px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-pill);

    font-size:
        0.92rem;

    font-weight:
        850;

    line-height:
        1;

    transition:
        transform
        var(--transition-fast),

        border-color
        var(--transition-fast),

        background
        var(--transition-fast),

        box-shadow
        var(--transition-fast),

        filter
        var(--transition-fast);
}


.primary-button {
    background:
        var(--gradient-gold);

    color:
        #1a1025;

    box-shadow:
        var(--shadow-gold);
}


.primary-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 22px 60px
        rgba(
            255,
            201,
            40,
            0.25
        );

    filter:
        brightness(1.035);
}


.secondary-button {
    border-color:
        var(--color-border);

    background:
        rgba(
            255,
            255,
            255,
            0.048
        );

    color:
        var(--vz-ivory);
}


.secondary-button:hover {
    border-color:
        rgba(
            255,
            201,
            40,
            0.34
        );

    background:
        rgba(
            255,
            201,
            40,
            0.068
        );

    color:
        var(--vz-gold-400);

    transform:
        translateY(-3px);
}


/* ======================================================================
   11. HERO
   ====================================================================== */

.hero {
    position:
        relative;

    min-height:
        min(
            900px,
            100svh
        );

    padding-top:
        calc(
            var(--header-height) +
            clamp(
                70px,
                8vw,
                105px
            )
        );

    padding-bottom:
        clamp(
            74px,
            8vw,
            105px
        );

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    isolation:
        isolate;
}


.hero::before {
    position:
        absolute;

    top:
        10%;

    right:
        -8%;

    width:
        430px;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        rgba(
            143,
            114,
            181,
            0.16
        );

    filter:
        blur(105px);

    content:
        "";

    pointer-events:
        none;
}


.hero::after {
    position:
        absolute;

    bottom:
        2%;

    left:
        5%;

    width:
        260px;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        rgba(
            255,
            201,
            40,
            0.06
        );

    filter:
        blur(90px);

    content:
        "";
}


.hero-container {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(390px, 0.88fr);

    align-items:
        center;

    gap:
        clamp(
            50px,
            7vw,
            92px
        );
}


.hero-content {
    max-width:
        735px;
}


.launch-badge {
    width:
        fit-content;

    margin-bottom:
        21px;

    padding:
        8px 13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.19
        );

    border-radius:
        var(--radius-pill);

    background:
        rgba(
            255,
            201,
            40,
            0.065
        );

    color:
        var(--vz-gold-400);

    font-size:
        0.77rem;

    font-weight:
        790;
}


.launch-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--vz-gold-500);

    box-shadow:
        0 0 0 6px
        rgba(
            255,
            201,
            40,
            0.09
        );

    animation:
        launchPulse
        1.7s
        ease-in-out
        infinite;
}


.hero-content h1 {
    max-width:
        760px;

    margin-bottom:
        23px;

    font-size:
        clamp(
            3.2rem,
            6.4vw,
            6.35rem
        );

    font-weight:
        930;

    line-height:
        0.97;

    letter-spacing:
        -0.058em;
}


.hero-content h1 span {
    display:
        block;

    background:
        var(--gradient-gold);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;
}


.hero-description {
    max-width:
        650px;

    margin-bottom:
        31px;

    color:
        #d0cad6;

    font-size:
        clamp(
            1.04rem,
            1.45vw,
            1.18rem
        );

    line-height:
        1.78;
}


.hero-buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;
}


.hero-highlights {
    margin-top:
        33px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        11px;
}


.hero-highlight {
    min-width:
        0;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.032
        );

    backdrop-filter:
        blur(12px);
}


.hero-highlight strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--vz-ivory);
}


.hero-highlight span {
    color:
        var(--color-text-soft);

    font-size:
        0.75rem;
}


/* ======================================================================
   12. PHONE PREVIEW
   ====================================================================== */

.hero-visual {
    position:
        relative;

    width:
        100%;

    max-width:
        535px;

    min-height:
        640px;

    margin-left:
        auto;

    display:
        grid;

    place-items:
        center;

    overflow:
        visible;
}


.phone-glow {
    position:
        absolute;

    top:
        48%;

    left:
        45%;

    z-index:
        -1;

    width:
        min(
            100%,
            400px
        );

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                143,
                114,
                181,
                0.30
            ),
            rgba(
                255,
                201,
                40,
                0.07
            )
            48%,
            transparent
            72%
        );

    filter:
        blur(24px);

    transform:
        translate(
            -50%,
            -50%
        );
}


.phone-frame {
    position:
        relative;

    z-index:
        4;

    width:
        min(
            100%,
            272px
        );

    margin-right:
        142px;

    padding:
        7px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.17
        );

    border-radius:
        38px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.17
            ),
            rgba(
                255,
                255,
                255,
                0.03
            )
        );

    box-shadow:
        0 40px 90px
        rgba(
            0,
            0,
            0,
            0.53
        );

    transform:
        perspective(1100px)
        rotateY(-4deg)
        rotateX(1deg);

    transition:
        transform
        var(--transition-slow);
}


.hero-visual:hover
.phone-frame {
    transform:
        perspective(1100px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}


.app-preview-image {
    width:
        100% !important;

    max-height:
        548px;

    border-radius:
        31px;

    object-fit:
        cover;
}


/* ======================================================================
   13. FLOATING LIVE CARD
   ====================================================================== */

.floating-card {
    position:
        absolute;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.105
        );

    background:
        rgba(
            20,
            11,
            34,
            0.92
        );

    box-shadow:
        0 22px 58px
        rgba(
            0,
            0,
            0,
            0.39
        );

    backdrop-filter:
        blur(18px)
        saturate(140%);
}


.live-card {
    right:
        -6px;

    bottom:
        244px;

    padding:
        9px 13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    border-color:
        rgba(
            255,
            73,
            104,
            0.22
        );

    border-radius:
        var(--radius-pill);

    color:
        var(--vz-ivory);

    font-size:
        0.75rem;

    font-weight:
        850;

    animation:
        floatingCard
        5s
        ease-in-out
        infinite;
}


.status-dot,
.live-pulse {
    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--vz-live);

    box-shadow:
        0 0 0 6px
        rgba(
            255,
            73,
            104,
            0.105
        );

    animation:
        livePulse
        1.3s
        infinite;
}


/* ======================================================================
   14. LIVE AUDIENCE CARD
   ====================================================================== */

.audience-card {
    right:
        -6px;

    bottom:
        18px;

    z-index:
        8;

    width:
        min(
            100%,
            292px
        );

    padding:
        18px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.19
        );

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 96% 6%,
            rgba(
                255,
                201,
                40,
                0.14
            ),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(
                43,
                24,
                66,
                0.98
            ),
            rgba(
                14,
                8,
                24,
                0.985
            )
        );

    box-shadow:
        0 25px 64px
        rgba(
            0,
            0,
            0,
            0.44
        );

    overflow:
        hidden;
}


.audience-header,
.audience-footer,
.live-status,
.avatars {
    display:
        flex;

    align-items:
        center;
}


.audience-header,
.audience-footer {
    justify-content:
        space-between;

    gap:
        12px;
}


.live-status {
    gap:
        7px;
}


.live-text {
    color:
        #ff91a5;

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;
}


.viewer-trend {
    padding:
        5px 8px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(
            69,
            213,
            138,
            0.08
        );

    color:
        var(--vz-success);

    font-size:
        0.69rem;

    font-weight:
        850;
}


.viewer-trend.trend-down,
.viewer-trend.negative {
    background:
        rgba(
            255,
            102,
            116,
            0.08
        );

    color:
        var(--vz-error);
}


.viewer-trend.trend-stable {
    color:
        var(--vz-info);
}


.audience-body {
    padding:
        14px 0;
}


.audience-body h3,
#live-viewer-count {
    margin-bottom:
        3px;

    color:
        var(--vz-white);

    font-size:
        2.05rem;

    font-weight:
        930;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;
}


.audience-label {
    color:
        var(--color-text-soft);

    font-size:
        0.72rem;
}


.audience-metrics {
    padding:
        11px 0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        6px;

    border-block:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );
}


.metric {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    color:
        var(--color-text-muted);

    font-size:
        0.7rem;

    font-weight:
        760;

    white-space:
        nowrap;
}


.metric strong {
    color:
        var(--vz-white);

    font-variant-numeric:
        tabular-nums;
}


.audience-footer {
    padding-top:
        13px;
}


.avatars {
    padding-left:
        6px;
}


.avatar,
.avatar-more {
    width:
        27px;

    height:
        27px;

    margin-left:
        -6px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid
        var(--vz-plum-900);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #755597,
            #3b2754
        );

    color:
        white;

    font-size:
        0.58rem;

    font-weight:
        850;
}


.avatar-more {
    width:
        auto;

    min-width:
        36px;

    padding-inline:
        7px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(
            255,
            201,
            40,
            0.12
        );

    color:
        var(--vz-gold-400);
}


.footer-text {
    color:
        var(--color-text-soft);

    font-size:
        0.61rem;
}


/* ======================================================================
   15. PLATFORM INTRODUCTION
   ====================================================================== */

.platform-introduction {
    padding-block:
        clamp(
            62px,
            7vw,
            90px
        );

    border-block:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.intro-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 0.82fr);

    align-items:
        center;

    gap:
        clamp(
            36px,
            7vw,
            80px
        );
}


.intro-copy {
    padding-left:
        clamp(
            24px,
            4vw,
            44px
        );

    border-left:
        1px solid
        rgba(
            255,
            201,
            40,
            0.2
        );
}


/* ======================================================================
   16. FEATURE CARDS
   ====================================================================== */

.feature-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        20px;
}


.feature-card {
    position:
        relative;

    min-height:
        270px;

    padding:
        29px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.095
        );

    border-radius:
        var(--radius-lg);

    background:
        var(--gradient-card);

    box-shadow:
        var(--shadow-small);

    overflow:
        hidden;

    transition:
        transform
        var(--transition-standard),

        border-color
        var(--transition-standard),

        box-shadow
        var(--transition-standard);
}


.feature-card:hover {
    border-color:
        rgba(
            255,
            201,
            40,
            0.26
        );

    transform:
        translateY(-6px);

    box-shadow:
        0 28px 74px
        rgba(
            0,
            0,
            0,
            0.4
        );
}


.feature-icon {
    width:
        54px;

    height:
        54px;

    margin-bottom:
        23px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.25
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            201,
            40,
            0.085
        );

    color:
        var(--vz-gold-500);

    font-size:
        1.24rem;
}


.feature-number {
    position:
        absolute;

    top:
        26px;

    right:
        27px;

    color:
        rgba(
            255,
            255,
            255,
            0.19
        );

    font-size:
        0.72rem;

    font-weight:
        900;
}


.feature-card h3 {
    margin-bottom:
        12px;

    font-size:
        1.28rem;

    font-weight:
        850;
}


.feature-card p {
    color:
        #cbc5d2;

    line-height:
        1.72;
}


/* ======================================================================
   17. COMMUNITY
   ====================================================================== */

.audience-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px;
}


.audience-panel {
    position:
        relative;

    padding:
        clamp(
            30px,
            4vw,
            44px
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        29px;

    background:
        var(--gradient-card);

    box-shadow:
        0 26px 72px
        rgba(
            0,
            0,
            0,
            0.31
        );

    overflow:
        hidden;
}


.audience-panel h3 {
    margin-bottom:
        16px;

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.65rem
        );

    font-weight:
        900;
}


.audience-panel
> p:not(.panel-label) {
    color:
        var(--color-text-muted);
}


.benefit-list {
    margin-block:
        27px 30px;

    display:
        grid;

    gap:
        13px;
}


.benefit-list li {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        #d6d0dd;
}


.benefit-list li span {
    width:
        23px;

    height:
        23px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(
            255,
            201,
            40,
            0.095
        );

    color:
        var(--vz-gold-500);

    font-size:
        0.72rem;
}


/* ======================================================================
   18. ABOUT / CONTACT / LAUNCH GRIDS
   ====================================================================== */

.about-grid,
.launch-grid,
.contact-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items:
        center;

    gap:
        clamp(
            40px,
            7vw,
            86px
        );
}


.vision-card {
    padding:
        clamp(
            30px,
            5vw,
            48px
        );

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.17
        );

    border-radius:
        var(--radius-xl);

    background:
        var(--gradient-card);

    box-shadow:
        var(--shadow-medium);
}


.vision-icon {
    width:
        54px;

    height:
        54px;

    margin-bottom:
        22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        rgba(
            255,
            201,
            40,
            0.095
        );

    color:
        var(--vz-gold-500);

    font-size:
        1.42rem;
}


.vision-card h3 {
    margin-bottom:
        14px;

    font-size:
        clamp(
            1.7rem,
            3.2vw,
            2.75rem
        );
}


/* ======================================================================
   19. LAUNCH
   ====================================================================== */

.launch-disclaimer {
    margin-top:
        15px;

    color:
        var(--color-text-soft) !important;

    font-size:
        0.86rem !important;
}


.store-buttons {
    margin-top:
        29px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.store-button {
    min-width:
        174px;

    min-height:
        58px;

    padding:
        10px 18px;

    align-items:
        flex-start;

    flex-direction:
        column;

    border-color:
        var(--color-border);

    background:
        rgba(
            255,
            255,
            255,
            0.047
        );
}


.store-button span {
    color:
        var(--color-text-soft);

    font-size:
        0.65rem;
}


.store-button strong {
    color:
        var(--vz-ivory);
}


.launch-date-card {
    width:
        min(
            100%,
            350px
        );

    aspect-ratio:
        1;

    margin-inline:
        auto;

    display:
        grid;

    place-content:
        center;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.22
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                201,
                40,
                0.11
            ),
            rgba(
                44,
                26,
                67,
                0.82
            )
            48%,
            rgba(
                13,
                7,
                22,
                0.97
            )
            72%
        );

    box-shadow:
        var(--shadow-large);

    text-align:
        center;
}


.launch-month,
.launch-year {
    color:
        var(--vz-gold-400);

    font-size:
        0.8rem;

    font-weight:
        900;

    letter-spacing:
        0.2em;
}


.launch-day {
    display:
        block;

    color:
        var(--vz-ivory);

    font-size:
        clamp(
            5rem,
            10vw,
            8rem
        );

    font-weight:
        930;

    line-height:
        1;
}


/* ======================================================================
   20. NEWSLETTER
   ====================================================================== */

.newsletter-section {
    overflow:
        hidden;
}


.newsletter-card {
    position:
        relative;

    padding:
        clamp(
            28px,
            5vw,
            52px
        );

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(
            35px,
            7vw,
            80px
        );

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.17
        );

    border-radius:
        var(--radius-xl);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                255,
                201,
                40,
                0.09
            ),
            transparent
            36%
        ),
        var(--gradient-card);

    box-shadow:
        var(--shadow-medium);
}


.newsletter-copy {
    align-self:
        center;
}


.newsletter-contact-note {
    margin-top:
        21px !important;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.13
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--color-text-soft) !important;

    font-size:
        0.82rem !important;
}


.newsletter-contact-note a {
    color:
        var(--vz-gold-400);

    font-weight:
        800;
}


.newsletter-form {
    display:
        grid;

    align-content:
        center;

    gap:
        15px;
}


/* ======================================================================
   21. CONTACT
   ====================================================================== */

.contact-information {
    align-self:
        start;
}


.contact-method {
    margin-top:
        27px;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    transition:
        transform
        var(--transition-fast),

        border-color
        var(--transition-fast),

        background
        var(--transition-fast);
}


.contact-method:hover {
    border-color:
        rgba(
            255,
            201,
            40,
            0.27
        );

    background:
        rgba(
            255,
            201,
            40,
            0.055
        );

    transform:
        translateY(-3px);
}


.contact-icon {
    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        rgba(
            255,
            201,
            40,
            0.10
        );

    color:
        var(--vz-gold-500);

    font-size:
        1.1rem;
}


.contact-method a {
    display:
        block;

    color:
        var(--vz-gold-400);

    font-weight:
        750;
}


.contact-company {
    margin-top:
        22px;

    color:
        var(--color-text-soft);
}


.contact-company strong {
    color:
        var(--vz-ivory);
}


/* ======================================================================
   22. CONTACT FORM CARD
   ====================================================================== */

.contact-form {
    position:
        relative;

    padding:
        clamp(
            28px,
            4vw,
            42px
        );

    display:
        grid;

    gap:
        18px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.16
        );

    border-radius:
        var(--radius-lg);

    background:
        var(--gradient-card);

    box-shadow:
        var(--shadow-medium);

    overflow:
        hidden;
}


.form-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        15px;
}


.form-group {
    min-width:
        0;

    display:
        grid;

    gap:
        7px;
}


.form-group label {
    color:
        #ded8e5;

    font-size:
        0.8rem;

    font-weight:
        760;
}


/* ======================================================================
   23. FORM CONTROLS
   ====================================================================== */

.contact-form input,
.contact-form textarea,
.contact-form select,
.newsletter-form input[type="email"] {
    width:
        100%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius:
        14px;

    background-color:
        #130a20;

    color:
        #ffffff;

    caret-color:
        var(--vz-gold-500);

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        border-color
        var(--transition-fast),

        background
        var(--transition-fast),

        box-shadow
        var(--transition-fast);
}


.contact-form input,
.contact-form select,
.newsletter-form input[type="email"] {
    min-height:
        54px;

    padding:
        0 16px;
}


.contact-form textarea {
    min-height:
        160px;

    padding:
        14px 16px;

    resize:
        vertical;
}


.contact-form input::placeholder,
.contact-form textarea::placeholder,
.newsletter-form input::placeholder {
    color:
        #a79ead;

    opacity:
        1;
}


.contact-form input:hover,
.contact-form textarea:hover,
.newsletter-form input:hover {
    border-color:
        rgba(
            255,
            201,
            40,
            0.30
        );

    background-color:
        #170d25;
}


.contact-form input:focus,
.contact-form textarea:focus,
.newsletter-form input:focus {
    outline:
        none;

    border-color:
        var(--vz-gold-500);

    background-color:
        #1b102a;

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            201,
            40,
            0.11
        ),
        0 18px 42px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* ======================================================================
   24. SUBJECT DROPDOWN — WHITE BACKGROUND FIX
   ====================================================================== */

.contact-form select {
    min-height:
        54px;

    padding:
        0 48px 0 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius:
        14px;

    /*
     * CRITICAL:
     * dark native UI preference
     */

    color-scheme:
        dark;

    background-color:
        #130a20;

    color:
        #ffffff;

    font-weight:
        600;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    -moz-appearance:
        none;


    /*
     * Custom gold arrow
     */

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffc928' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4-5.9 5.9-5.9-5.9z'/%3E%3C/svg%3E"
        );

    background-repeat:
        no-repeat;

    background-position:
        right 16px
        center;

    background-size:
        15px;
}


.contact-form select:hover {
    border-color:
        rgba(
            255,
            201,
            40,
            0.34
        );

    background-color:
        #190f29;
}


.contact-form select:focus {
    outline:
        none;

    border-color:
        var(--vz-gold-500);

    background-color:
        #1b102a;

    color:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            201,
            40,
            0.11
        ),
        0 18px 42px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/*
   ================================================================
   THIS IS THE IMPORTANT PART FOR THE OPEN DROP-DOWN WINDOW
   ================================================================
*/

.contact-form select option {
    background:
        #130a20 !important;

    background-color:
        #130a20 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.contact-form select option[value=""] {
    background:
        #130a20 !important;

    color:
        #a79ead !important;
}


.contact-form select option:checked {
    background:
        #34204f !important;

    background-color:
        #34204f !important;

    color:
        #ffe992 !important;
}


/*
   Helps Chrome / Windows use dark native select UI.
*/

.contact-form select,
.contact-form select:focus,
.contact-form select:active {
    color-scheme:
        dark !important;
}


/* ======================================================================
   25. CHROME AUTOFILL
   ====================================================================== */

.contact-form
input:-webkit-autofill,

.contact-form
input:-webkit-autofill:hover,

.contact-form
input:-webkit-autofill:focus,

.newsletter-form
input:-webkit-autofill,

.newsletter-form
input:-webkit-autofill:hover,

.newsletter-form
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #130a20
        inset !important;

    caret-color:
        #ffffff;

    transition:
        background-color
        9999s ease
        0s;
}


/* ======================================================================
   26. CHECKBOX
   ====================================================================== */

.newsletter-consent {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--color-text-soft);

    font-size:
        0.78rem;

    line-height:
        1.55;

    cursor:
        pointer;
}


.newsletter-consent
input[type="checkbox"] {
    width:
        18px;

    height:
        18px;

    min-height:
        0;

    margin-top:
        2px;

    flex:
        0 0 auto;

    accent-color:
        var(--vz-gold-500);
}


/* ======================================================================
   27. VALIDATION
   ====================================================================== */

input.invalid,
textarea.invalid,
select.invalid,

input.is-invalid,
textarea.is-invalid,
select.is-invalid,

[aria-invalid="true"] {
    border-color:
        var(--vz-error) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            102,
            116,
            0.10
        ) !important;
}


.field-error {
    margin-top:
        3px;

    display:
        block;

    color:
        #ff9da7;

    font-size:
        0.76rem;

    font-weight:
        680;

    line-height:
        1.4;
}


/* ======================================================================
   28. FORM STATUS
   ====================================================================== */

.form-status-message {
    width:
        100%;

    min-height:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        14px;

    background:
        transparent;

    font-size:
        0.84rem;

    font-weight:
        650;

    line-height:
        1.55;

    opacity:
        0;

    transform:
        translateY(-4px);

    transition:
        opacity
        220ms ease,

        transform
        220ms ease,

        padding
        220ms ease;
}


.form-status-message:not(:empty) {
    padding:
        13px 15px;

    opacity:
        1;

    transform:
        translateY(0);
}


.form-status-message.is-success,
.form-status-message[data-type="success"] {
    border:
        1px solid
        rgba(
            69,
            213,
            138,
            0.27
        );

    background:
        rgba(
            69,
            213,
            138,
            0.075
        );

    color:
        #78e5aa;
}


.form-status-message.is-error,
.form-status-message[data-type="error"] {
    border:
        1px solid
        rgba(
            255,
            102,
            116,
            0.30
        );

    background:
        rgba(
            255,
            102,
            116,
            0.075
        );

    color:
        #ff939e;
}


.form-status-message.is-information,
.form-status-message[data-type="information"] {
    border:
        1px solid
        rgba(
            141,
            185,
            255,
            0.26
        );

    background:
        rgba(
            141,
            185,
            255,
            0.07
        );

    color:
        #abcaff;
}


/* ======================================================================
   29. SECURITY MESSAGES
   ====================================================================== */

.contact-security-message,
.newsletter-disclaimer {
    position:
        relative;

    width:
        100%;

    padding:
        15px 17px
        15px 50px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.24
        );

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                201,
                40,
                0.075
            ),
            rgba(
                143,
                114,
                181,
                0.08
            )
        );

    color:
        #ddd7e4 !important;

    font-size:
        0.82rem !important;

    font-weight:
        590;

    line-height:
        1.62 !important;

    overflow:
        hidden;
}


.contact-security-message::before,
.newsletter-disclaimer::before {
    position:
        absolute;

    top:
        50%;

    left:
        16px;

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.30
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            201,
            40,
            0.11
        );

    color:
        var(--vz-gold-500);

    content:
        "✓";

    font-size:
        0.72rem;

    font-weight:
        950;

    transform:
        translateY(-50%);
}


.contact-security-message::after,
.newsletter-disclaimer::after {
    position:
        absolute;

    inset:
        0 auto
        0 0;

    width:
        3px;

    background:
        linear-gradient(
            var(--vz-gold-300),
            var(--vz-gold-500)
        );

    content:
        "";
}


.contact-security-message a,
.newsletter-disclaimer a {
    color:
        var(--vz-gold-400) !important;

    font-weight:
        850;
}


.contact-security-message a:hover,
.newsletter-disclaimer a:hover {
    color:
        var(--vz-gold-300) !important;
}


/* ======================================================================
   30. LOADING BUTTON
   ====================================================================== */

button.is-loading,
button[aria-busy="true"] {
    cursor:
        wait;

    opacity:
        0.90;

    pointer-events:
        none;
}


button.is-loading::after,
button[aria-busy="true"]::after {
    width:
        15px;

    height:
        15px;

    margin-left:
        9px;

    display:
        inline-block;

    border:
        2px solid
        rgba(
            26,
            16,
            37,
            0.30
        );

    border-top-color:
        #1a1025;

    border-radius:
        50%;

    content:
        "";

    animation:
        submitSpinner
        700ms
        linear
        infinite;
}


/* ======================================================================
   31. FAQ
   ====================================================================== */

.faq-list {
    width:
        min(
            100%,
            900px
        );

    margin-inline:
        auto;

    display:
        grid;

    gap:
        12px;
}


.faq-item {
    border:
        1px solid
        var(--color-border);

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    overflow:
        hidden;
}


.faq-item[open] {
    border-color:
        rgba(
            255,
            201,
            40,
            0.22
        );

    background:
        rgba(
            255,
            201,
            40,
            0.035
        );
}


.faq-item summary {
    position:
        relative;

    padding:
        20px 60px
        20px 21px;

    color:
        var(--vz-ivory);

    font-weight:
        790;

    cursor:
        pointer;

    list-style:
        none;
}


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


.faq-item summary::after {
    position:
        absolute;

    top:
        50%;

    right:
        22px;

    color:
        var(--vz-gold-500);

    content:
        "+";

    font-size:
        1.5rem;

    transform:
        translateY(-50%);
}


.faq-item[open]
summary::after {
    content:
        "−";
}


.faq-item p {
    padding:
        0 21px
        21px;

    color:
        var(--color-text-muted);
}


/* ======================================================================
   32. FOOTER
   ====================================================================== */

.site-footer {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    background:
        rgba(
            6,
            3,
            11,
            0.68
        );
}


.footer-grid {
    padding-block:
        64px;

    display:
        grid;

    grid-template-columns:
        1.55fr
        repeat(
            3,
            1fr
        );

    gap:
        38px;
}


.footer-brand {
    max-width:
        340px;
}


.footer-brand p {
    margin-top:
        17px;

    color:
        var(--color-text-soft);

    font-size:
        0.86rem;
}


.footer-email {
    margin-top:
        14px;

    display:
        inline-flex;

    color:
        var(--vz-gold-400);

    font-size:
        0.84rem;

    font-weight:
        780;
}


.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;
}


.footer-column h3 {
    margin-bottom:
        8px;

    color:
        var(--vz-ivory);

    font-size:
        0.88rem;
}


.footer-column a,
.footer-column span {
    color:
        var(--color-text-soft);

    font-size:
        0.84rem;

    transition:
        color
        var(--transition-fast);
}


.footer-column a:hover {
    color:
        var(--vz-gold-400);
}


.footer-bottom {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


.footer-bottom-content {
    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--color-text-soft);

    font-size:
        0.76rem;
}


/* ======================================================================
   33. NOSCRIPT
   ====================================================================== */

.noscript-message {
    position:
        fixed;

    right:
        18px;

    bottom:
        18px;

    left:
        18px;

    z-index:
        99999;

    max-width:
        760px;

    margin-inline:
        auto;

    padding:
        14px 18px;

    border:
        1px solid
        rgba(
            255,
            201,
            40,
            0.28
        );

    border-radius:
        15px;

    background:
        rgba(
            19,
            10,
            32,
            0.98
        );

    color:
        var(--vz-ivory);

    text-align:
        center;
}


/* ======================================================================
   34. ANIMATIONS
   ====================================================================== */

@keyframes livePulse {

    0%,
    100% {
        opacity:
            1;

        transform:
            scale(1);
    }

    50% {
        opacity:
            0.55;

        transform:
            scale(0.82);
    }
}


@keyframes launchPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px
            rgba(
                255,
                201,
                40,
                0.08
            );
    }

    50% {
        box-shadow:
            0 0 0 9px
            rgba(
                255,
                201,
                40,
                0.02
            );
    }
}


@keyframes floatingCard {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }
}


@keyframes submitSpinner {

    to {
        transform:
            rotate(360deg);
    }
}


/* ======================================================================
   35. TABLET
   ====================================================================== */

@media (max-width: 1050px) {

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


    .hero-container {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                340px,
                0.85fr
            );
    }


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


/* ======================================================================
   36. MOBILE NAVIGATION / TABLET
   ====================================================================== */

@media (max-width: 820px) {

    :root {
        --header-height:
            72px;
    }


    .menu-button {
        position:
            relative;

        z-index:
            var(--z-menu);

        display:
            block;
    }


    .navigation-menu {
        position:
            absolute;

        top:
            100%;

        right:
            0;

        left:
            0;

        z-index:
            calc(
                var(--z-menu) -
                1
            );

        max-height:
            0;

        padding:
            0
            var(--container-padding);

        display:
            flex;

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            3px;

        overflow:
            hidden;

        visibility:
            hidden;

        background:
            rgba(
                9,
                4,
                15,
                0.985
            );

        border-bottom:
            1px solid
            transparent;

        transition:
            max-height
            var(--transition-standard),

            padding
            var(--transition-standard),

            visibility
            var(--transition-standard);
    }


    .navigation-menu.show,
    .navigation-menu.is-open {
        max-height:
            700px;

        padding-block:
            16px 23px;

        visibility:
            visible;

        border-bottom-color:
            rgba(
                255,
                201,
                40,
                0.14
            );
    }


    .navigation-menu a {
        width:
            100%;

        min-height:
            46px;

        justify-content:
            flex-start;
    }


    .navigation-menu
    .nav-contact-button {
        margin:
            5px 0 0;

        justify-content:
            center;
    }


    .hero {
        min-height:
            auto;

        padding-top:
            calc(
                var(--header-height) +
                54px
            );

        padding-bottom:
            72px;
    }


    .hero-container {
        grid-template-columns:
            1fr;

        gap:
            48px;

        text-align:
            center;
    }


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


    .launch-badge,
    .hero-eyebrow {
        margin-inline:
            auto;
    }


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


    .hero-buttons {
        justify-content:
            center;
    }


    .hero-visual {
        width:
            min(
                100%,
                540px
            );

        min-height:
            720px;

        margin-inline:
            auto;

        padding-bottom:
            240px;
    }


    .phone-frame {
        width:
            min(
                100%,
                245px
            );

        margin:
            0;

        transform:
            none;
    }


    .audience-card {
        right:
            50%;

        bottom:
            22px;

        width:
            min(
                92%,
                300px
            );

        transform:
            translateX(50%);

        animation:
            none;
    }


    .live-card {
        right:
            50%;

        bottom:
            248px;

        transform:
            translateX(50%);

        animation:
            none;
    }


    .intro-grid,
    .about-grid,
    .launch-grid,
    .contact-grid,
    .audience-grid {
        grid-template-columns:
            1fr;
    }


    .intro-copy {
        padding-left:
            0;

        border-left:
            0;
    }


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


    .contact-information {
        position:
            static;
    }
}


/* ======================================================================
   37. SMALL TABLET / LARGE PHONE
   ====================================================================== */

@media (max-width: 680px) {

    :root {
        --container-padding:
            18px;
    }


    .feature-grid {
        grid-template-columns:
            1fr;
    }


    .form-row {
        grid-template-columns:
            1fr;
    }


    .hero-highlights {
        grid-template-columns:
            1fr;
    }


    .store-buttons {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .store-button {
        width:
            100%;
    }


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


    .footer-bottom-content {
        padding-block:
            22px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .contact-form > .primary-button,
    .newsletter-form > .primary-button {
        width:
            100%;
    }


    /*
     * Prevent iPhone Safari from zooming into fields.
     */

    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .newsletter-form input {
        font-size:
            16px;
    }


    .contact-security-message,
    .newsletter-disclaimer {
        padding:
            14px
            14px
            14px
            46px;

        font-size:
            0.78rem !important;
    }
}


/* ======================================================================
   38. SMALL MOBILE
   ====================================================================== */

@media (max-width: 440px) {

    :root {
        --container-padding:
            14px;
    }


    .logo-subtext {
        display:
            none;
    }


    .hero-buttons {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .hero-action,
    .hero-action > a {
        width:
            100%;
    }


    .hero-content h1 {
        font-size:
            clamp(
                2.75rem,
                15vw,
                4.2rem
            );
    }


    .hero-visual {
        min-height:
            630px;

        padding-bottom:
            208px;
    }


    .phone-frame {
        width:
            min(
                58vw,
                190px
            );
    }


    .live-card {
        bottom:
            203px;

        padding:
            8px 11px;

        font-size:
            0.69rem;
    }


    .audience-card {
        bottom:
            8px;

        width:
            min(
                96%,
                260px
            );

        padding:
            15px;
    }


    .audience-body h3,
    #live-viewer-count {
        font-size:
            1.66rem;
    }


    .audience-metrics {
        grid-template-columns:
            1fr;

        gap:
            4px;
    }


    .metric {
        justify-content:
            flex-start;
    }


    .metric strong {
        margin-left:
            auto;
    }


    .feature-card,
    .audience-panel,
    .vision-card,
    .contact-form,
    .newsletter-card {
        padding:
            24px;
    }
}


/* ======================================================================
   39. REDUCED MOTION
   ====================================================================== */

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .reveal,
    html.reveal-ready .reveal {
        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            none !important;
    }
}


/* ======================================================================
   40. HIGH CONTRAST ACCESSIBILITY
   ====================================================================== */

@media (prefers-contrast: more) {

    :root {
        --color-text-muted:
            #eeeaf2;

        --color-text-soft:
            #d6d0dd;

        --color-border:
            rgba(
                255,
                255,
                255,
                0.28
            );
    }


    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .newsletter-form input {
        border-color:
            rgba(
                255,
                255,
                255,
                0.34
            );
    }
}


/* ======================================================================
   41. FINAL SAFETY LAYER
   Never allow CSS / JavaScript errors to blank the site.
   ====================================================================== */

html,
body,
main,
#main-content {
    visibility:
        visible;

    opacity:
        1;
}


body {
    display:
        block;
}


/*
   Native Subject dropdown final override.
   Keep this at the VERY BOTTOM so earlier rules cannot override it.
*/

#subject,
.contact-form #subject {
    color-scheme:
        dark !important;

    background-color:
        #130a20 !important;

    color:
        #ffffff !important;
}


#subject option,
.contact-form #subject option {
    background:
        #130a20 !important;

    background-color:
        #130a20 !important;

    color:
        #ffffff !important;
}


#subject option:checked,
.contact-form #subject option:checked {
    background:
        #34204f !important;

    background-color:
        #34204f !important;

    color:
        #ffe992 !important;
}

/* ======================================================================
   42. INTRODUCING VIDZO — ADVANCED SHOWCASE
   Added for revised HTML. Existing CSS above is intentionally preserved.
   ====================================================================== */

.introduction-showcase {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items: center;

    gap:
        clamp(
            44px,
            7vw,
            92px
        );

    isolation: isolate;
}


.introduction-showcase::before {
    position: absolute;

    top: 50%;
    right: -12%;

    z-index: -2;

    width: min(46vw, 520px);

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(143, 114, 181, 0.18),
            rgba(255, 201, 40, 0.045) 52%,
            transparent 72%
        );

    filter: blur(42px);

    content: "";

    transform:
        translateY(-50%);

    pointer-events: none;
}


.introduction-content {
    min-width: 0;

    max-width: 700px;
}


.introduction-content h2 {
    margin-bottom: 20px;

    color:
        var(--color-text-heading);

    font-size:
        clamp(
            2.35rem,
            5vw,
            4.45rem
        );

    font-weight: 930;

    line-height: 1.02;

    letter-spacing: -0.052em;
}


.introduction-description {
    max-width: 640px;

    color:
        var(--color-text-muted);

    font-size:
        clamp(
            1.02rem,
            1.35vw,
            1.14rem
        );

    line-height: 1.82;
}


.introduction-highlights {
    margin-top:
        clamp(
            28px,
            4vw,
            38px
        );

    display: grid;

    gap: 12px;
}


.introduction-highlight {
    position: relative;

    min-width: 0;

    padding: 15px 17px;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            rgba(143, 114, 181, 0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    overflow: hidden;

    transition:
        transform var(--transition-standard),
        border-color var(--transition-standard),
        background var(--transition-standard),
        box-shadow var(--transition-standard);
}


.introduction-highlight::after {
    position: absolute;

    inset:
        auto 0 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 201, 40, 0.34),
            transparent
        );

    content: "";

    opacity: 0;

    transform: scaleX(0.55);

    transition:
        opacity var(--transition-standard),
        transform var(--transition-standard);
}


.introduction-highlight:hover {
    border-color:
        rgba(255, 201, 40, 0.23);

    background:
        linear-gradient(
            135deg,
            rgba(255, 201, 40, 0.055),
            rgba(143, 114, 181, 0.065)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);

    transform:
        translateY(-3px);
}


.introduction-highlight:hover::after {
    opacity: 1;

    transform:
        scaleX(1);
}


.introduction-highlight-icon {
    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255, 201, 40, 0.22);

    border-radius: 13px;

    background:
        rgba(255, 201, 40, 0.085);

    color:
        var(--vz-gold-500);

    font-size: 0.98rem;

    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


.introduction-highlight strong {
    display: block;

    margin-bottom: 2px;

    color:
        var(--vz-ivory);

    font-size: 0.94rem;

    font-weight: 850;
}


.introduction-highlight div > span {
    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.78rem;

    line-height: 1.5;
}


/* ======================================================================
   43. TESTIMONIAL / COMMUNITY IMAGE
   ====================================================================== */

.introduction-visual {
    position: relative;

    width: 100%;

    max-width: 610px;

    margin-left: auto;

    isolation: isolate;
}


.testimonial-image-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: -1;

    width: 86%;

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 201, 40, 0.11),
            rgba(143, 114, 181, 0.15) 44%,
            transparent 72%
        );

    filter: blur(34px);

    content: "";

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


.testimonial-image-card {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 8px;

    border:
        1px solid
        rgba(255, 201, 40, 0.19);

    border-radius:
        clamp(
            22px,
            3vw,
            30px
        );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 34px 88px rgba(0, 0, 0, 0.43),
        0 0 0 1px rgba(255, 255, 255, 0.018) inset;

    overflow: hidden;

    isolation: isolate;

    transform:
        perspective(1200px)
        rotateY(-2deg);

    transition:
        transform var(--transition-slow),
        border-color var(--transition-standard),
        box-shadow var(--transition-standard);
}


.testimonial-image-card:hover {
    border-color:
        rgba(255, 201, 40, 0.31);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.48),
        0 0 52px rgba(255, 201, 40, 0.07);

    transform:
        perspective(1200px)
        rotateY(0deg)
        translateY(-5px);
}


.testimonial-image {
    width: 100%;

    min-height:
        clamp(
            320px,
            39vw,
            500px
        );

    max-height: 540px;

    border-radius:
        calc(
            clamp(
                22px,
                3vw,
                30px
            ) - 7px
        );

    object-fit: cover;

    object-position: center;

    background:
        var(--vz-plum-900);
}


.testimonial-image-overlay {
    position: absolute;

    right: 20px;
    bottom: 20px;
    left: 20px;

    z-index: 3;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 15px;

    background:
        rgba(12, 6, 20, 0.78);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);
}


.testimonial-image-overlay::before {
    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255, 201, 40, 0.035),
            transparent 42%,
            rgba(143, 114, 181, 0.06)
        );

    content: "";

    pointer-events: none;
}


.testimonial-live-state {
    position: relative;

    z-index: 1;

    min-width: 0;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        #ff9daf;

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.testimonial-image-overlay p {
    position: relative;

    z-index: 1;

    margin: 0;

    color:
        var(--vz-gold-400);

    font-size: 0.76rem;

    font-weight: 820;

    white-space: nowrap;
}


/* ======================================================================
   44. ADVANCED LAUNCH COUNTDOWN CONTAINER
   ====================================================================== */

.launch-countdown-container {
    position: relative;

    width: 100%;

    margin-top:
        clamp(
            28px,
            4vw,
            38px
        );

    padding:
        clamp(
            18px,
            2.5vw,
            24px
        );

    border:
        1px solid
        rgba(255, 201, 40, 0.18);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 201, 40, 0.095),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(42, 25, 64, 0.72),
            rgba(14, 8, 24, 0.80)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 24px 62px rgba(0, 0, 0, 0.22);

    overflow: hidden;
}


.launch-countdown-container::before {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vz-gold-500),
            transparent
        );

    content: "";

    opacity: 0.72;
}


.launch-countdown-heading {
    margin-bottom: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;
}


.countdown-status-wrapper {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.countdown-status-dot {
    width: 8px;

    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--vz-live);

    box-shadow:
        0 0 0 6px rgba(255, 73, 104, 0.09);

    animation:
        livePulse
        1.3s
        ease-in-out
        infinite;
}


.countdown-status {
    color:
        #ff91a5;

    font-size: 0.69rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.countdown-target-date {
    color:
        var(--vz-gold-400);

    font-size: 0.78rem;

    font-weight: 850;

    letter-spacing: 0.035em;
}


/* ======================================================================
   45. COUNTDOWN GRID / VALUES
   ====================================================================== */

.launch-countdown {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.countdown-item {
    position: relative;

    min-width: 0;

    min-height: 110px;

    padding: 16px 10px;

    display: grid;

    align-content: center;

    justify-items: center;

    gap: 7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    overflow: hidden;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}


.countdown-item::before {
    position: absolute;

    top: 0;
    right: 15%;
    left: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 201, 40, 0.68),
            transparent
        );

    content: "";
}


.countdown-item:hover {
    border-color:
        rgba(255, 201, 40, 0.26);

    background:
        linear-gradient(
            145deg,
            rgba(255, 201, 40, 0.07),
            rgba(143, 114, 181, 0.05)
        );

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18);

    transform:
        translateY(-2px);
}


.countdown-value {
    color:
        var(--vz-white);

    font-size:
        clamp(
            1.85rem,
            3.6vw,
            3.05rem
        );

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.04em;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 22px rgba(255, 201, 40, 0.075);
}


.countdown-label {
    color:
        var(--vz-gold-400);

    font-size: 0.63rem;

    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* Launch reached state */

.launch-countdown.is-live .countdown-item {
    border-color:
        rgba(69, 213, 138, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(69, 213, 138, 0.095),
            rgba(69, 213, 138, 0.035)
        );
}


.launch-countdown.is-live .countdown-value,
.launch-countdown.is-live .countdown-label {
    color:
        #7fe7ae;
}


/* ======================================================================
   46. ADVANCED LAUNCH DATE CARD EXTENSIONS
   ====================================================================== */

.launch-date-card {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}


.launch-date-card::before {
    position: absolute;

    inset: 8%;

    z-index: -1;

    border:
        1px solid
        rgba(255, 201, 40, 0.10);

    border-radius: 50%;

    content: "";

    pointer-events: none;
}


.launch-date-card::after {
    position: absolute;

    top: 13%;
    right: 13%;

    z-index: -1;

    width: 76px;

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        rgba(255, 201, 40, 0.10);

    filter: blur(24px);

    content: "";

    pointer-events: none;
}


.launch-date-eyebrow {
    margin-bottom: 6px;

    color:
        #ff91a5;

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.launch-date-divider {
    width: 62px;

    height: 1px;

    margin:
        13px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 201, 40, 0.62),
            transparent
        );
}


.launch-date-card > p {
    margin: 0;

    color:
        var(--vz-ivory);

    font-size: 0.85rem;

    font-weight: 820;
}


.launch-platforms {
    margin-top: 5px;

    color:
        var(--color-text-soft);

    font-size: 0.66rem;

    font-weight: 760;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ======================================================================
   47. UPDATED INTRODUCTION + COUNTDOWN RESPONSIVE DESIGN
   ====================================================================== */

@media (max-width: 1050px) {

    .introduction-showcase {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.88fr);

        gap: 46px;
    }


    .testimonial-image {
        min-height: 360px;
    }


    .launch-countdown {
        gap: 8px;
    }


    .countdown-item {
        min-height: 100px;
    }
}


@media (max-width: 820px) {

    .introduction-showcase {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .introduction-content {
        max-width: 760px;
    }


    .introduction-visual {
        max-width: 680px;

        margin-inline: auto;
    }


    .testimonial-image-card {
        transform: none;
    }


    .testimonial-image-card:hover {
        transform:
            translateY(-4px);
    }


    .testimonial-image {
        min-height:
            clamp(
                320px,
                64vw,
                500px
            );
    }


    .launch-countdown-container {
        max-width: 680px;
    }
}


@media (max-width: 620px) {

    .introduction-content h2 {
        font-size:
            clamp(
                2.15rem,
                10vw,
                3.25rem
            );
    }


    .introduction-highlight {
        padding: 14px;
    }


    .testimonial-image-overlay {
        right: 14px;
        bottom: 14px;
        left: 14px;

        padding: 11px 12px;

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .testimonial-image-overlay p {
        white-space: normal;
    }


    .launch-countdown-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }


    .launch-countdown {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .countdown-item {
        min-height: 96px;
    }
}


@media (max-width: 440px) {

    .introduction-highlights {
        gap: 9px;
    }


    .introduction-highlight {
        grid-template-columns:
            38px minmax(0, 1fr);

        gap: 11px;
    }


    .introduction-highlight-icon {
        width: 38px;

        height: 38px;
    }


    .testimonial-image-card {
        padding: 6px;

        border-radius: 22px;
    }


    .testimonial-image {
        min-height: 290px;

        border-radius: 17px;
    }


    .launch-countdown-container {
        padding: 16px;

        border-radius: 19px;
    }


    .countdown-value {
        font-size: 2rem;
    }
}


/* ======================================================================
   48. REDUCED-MOTION SUPPORT FOR NEW COMPONENTS
   ====================================================================== */

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

    .introduction-highlight,
    .testimonial-image-card,
    .countdown-item,
    .countdown-status-dot {
        animation: none !important;

        transition: none !important;

        transform: none !important;
    }
}


/* ======================================================================
   49. HIGH-CONTRAST SUPPORT FOR NEW COMPONENTS
   ====================================================================== */

@media (prefers-contrast: more) {

    .introduction-highlight,
    .testimonial-image-card,
    .launch-countdown-container,
    .countdown-item {
        border-color:
            rgba(255, 255, 255, 0.28);
    }


    .countdown-label,
    .countdown-target-date {
        color:
            var(--vz-gold-300);
    }
}


/* ======================================================================
   50. FINAL PRESERVATION / COMPATIBILITY NOTES

   This block was appended after all original rules.
   Nothing from the uploaded stylesheet has been removed.
   ====================================================================== */