/* =====================================================*
   RESET
*===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
   
background:
  radial-gradient(
    ellipse at 52% 48%,
    rgba(8, 20, 38, .22) 0%,
    rgba(5, 11, 20, .12) 34%,
    transparent 67%
  ),
  radial-gradient(
    ellipse at 18% 74%,
    rgba(5, 15, 29, .18) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 88% 23%,
    rgba(7, 16, 30, .14) 0%,
    transparent 46%
  ),
  #050608;

    color: #f2f2ef;
    font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================*
   HERO
*===================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

    padding: 32px 5vw 40px;

    background:
        radial-gradient(
            ellipse at 52% 48%,
            rgba(8, 20, 38, .22) 0%,
            rgba(5, 11, 20, .12) 34%,
            transparent 67%
        ),
        radial-gradient(
            ellipse at 18% 74%,
            rgba(5, 15, 29, .18) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 88% 23%,
            rgba(7, 16, 30, .14) 0%,
            transparent 46%
        ),
        #050608;
}


/* =====================================================*
   SPACE BACKGROUND
*===================================================== */

.space-background {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 75% 68%,
            rgba(4, 11, 21, .34) 0%,
            rgba(3, 7, 13, .15) 34%,
            transparent 66%
        ),
        radial-gradient(
            ellipse at 25% 27%,
            rgba(7, 18, 34, .26) 0%,
            rgba(4, 10, 18, .12) 34%,
            transparent 63%
        );
}


/* =====================================================*
   DEEP SPACE COLOR REGIONS
*===================================================== */

.deep-space-cloud {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;

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

    filter: blur(70px);
    mix-blend-mode: screen;

    will-change: transform;
}


/* LARGE CENTRAL BLUE DEPTH */

.space-cloud-one {
    left: 60%;
    top: 49%;

    width: 58vw;
    height: 43vw;

    opacity: .18;

    background:
        radial-gradient(
            ellipse,
            rgba(17, 53, 91, .34) 0%,
            rgba(9, 31, 58, .18) 32%,
            rgba(5, 18, 36, .07) 55%,
            transparent 75%
        );
}


/* TOP LEFT DISTANT CLOUD */

.space-cloud-two {
    left: 18%;
    top: 21%;

    width: 39vw;
    height: 31vw;

    opacity: .13;

    background:
        radial-gradient(
            ellipse,
            rgba(18, 48, 82, .28) 0%,
            rgba(8, 25, 48, .12) 42%,
            transparent 72%
        );
}


/* LOWER RIGHT BLUE REGION */

.space-cloud-three {
    left: 83%;
    top: 78%;

    width: 42vw;
    height: 36vw;

    opacity: .15;

    background:
        radial-gradient(
            ellipse,
            rgba(12, 42, 76, .30) 0%,
            rgba(5, 21, 42, .12) 43%,
            transparent 73%
        );
}


/* VERY FAINT DUST BAND */

.space-dust-band {
    position: absolute;

    left: 50%;
    top: 53%;

    width: 120%;
    height: 30%;

    transform:
        translate(-50%, -50%)
        rotate(-11deg);

    pointer-events: none;

    opacity: .14;
    filter: blur(34px);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(14, 34, 57, .08) 15%,
            rgba(20, 49, 80, .16) 39%,
            rgba(10, 31, 57, .12) 61%,
            rgba(16, 39, 67, .07) 80%,
            transparent 100%
        );
}


/* =====================================================*
   DARK VOID AREAS
*===================================================== */

.space-void {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(2, 3, 5, .86) 0%,
            rgba(3, 4, 6, .50) 38%,
            transparent 72%
        );

    filter: blur(38px);
}

.space-void-one {
    left: 28%;
    top: 62%;

    width: 28vw;
    height: 22vw;
}

.space-void-two {
    right: -5%;
    top: 8%;

    width: 27vw;
    height: 26vw;
}


/* =====================================================*
   CURSOR LIGHT
   KEEPING CURRENT EFFECT
*===================================================== */

.cursor-space-light {
    position: absolute;

    left: 0;
    top: 0;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;
    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.055) 0%,
            rgba(255,255,255,.027) 22%,
            rgba(255,255,255,.010) 45%,
            transparent 72%
        );

    filter: blur(5px);

    transition:
        opacity .5s ease;

    will-change:
        left,
        top,
        opacity;
}

.space-background.cursor-active
.cursor-space-light {
    opacity: 1;
}


/* =====================================================*
   ROCKET LIGHT
   KEEPING CURRENT EFFECT
*===================================================== */

.rocket-space-light {
    position: absolute;

    left: 0;
    top: 0;

    width: 300px;
    height: 300px;

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

    border-radius: 50%;
    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.085) 0%,
            rgba(255,255,255,.035) 20%,
            rgba(255,255,255,.012) 42%,
            transparent 70%
        );

    filter: blur(5px);

    will-change:
        left,
        top,
        opacity;
}


/* =====================================================*
   STAR LAYERS
*===================================================== */

.star-layer {
    position: absolute;

    inset: -35px;

    pointer-events: none;

    will-change: transform;
}

.star-layer-far {
    opacity: .82;
}

.star-layer-mid {
    opacity: .90;
}

.star-layer-near {
    opacity: .96;
}


/* =====================================================*
   BASIC STAR
*===================================================== */

.space-star {
    position: absolute;
    display: block;

    width: var(--star-size);
    height: var(--star-size);

    border-radius: 50%;

    background:
        rgba(
            var(--star-r),
            var(--star-g),
            var(--star-b),
            var(--base-opacity)
        );

    box-shadow:
        0 0 var(--base-glow)
        rgba(
            var(--star-r),
            var(--star-g),
            var(--star-b),
            .20
        );

    opacity: 1;

    will-change:
        transform,
        background,
        box-shadow;

    transition:
        background .14s linear,
        box-shadow .14s linear,
        transform .14s linear;
}


/* =====================================================*
   DIFFERENT STAR TYPES
*===================================================== */

/* Tiny deep-space dust */

.space-star.star-dust {
    filter: blur(.18px);
}


/* Blue distant stars */

.space-star.star-blue {
    box-shadow:
        0 0 3px
        rgba(104, 160, 225, .18);
}


/* Cold blue-white stars */

.space-star.star-cold {
    box-shadow:
        0 0 4px
        rgba(174, 211, 255, .22);
}


/* Slightly brighter white stars */

.space-star.star-white {
    box-shadow:
        0 0 4px
        rgba(255,255,255,.23);
}


/* Rare bright stars */

.space-star.star-bright {
    box-shadow:
        0 0 3px
        rgba(205, 227, 255, .75),

        0 0 8px
        rgba(114, 172, 235, .28);
}


/* Cross flare only on very few stars */

.space-star.star-flare::before,
.space-star.star-flare::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

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

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(198, 225, 255, .46),
            transparent
        );
}

.space-star.star-flare::before {
    width: 10px;
    height: 1px;
}

.space-star.star-flare::after {
    width: 1px;
    height: 10px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(198, 225, 255, .40),
            transparent
        );
}


/* =====================================================*
   NAVIGATION
*===================================================== */

.navbar {
    position: relative;

    z-index: 80;

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;
}

.nav-logo {
    justify-self: start;

    display: flex;
    align-items: center;

    width: 62px;
    height: 62px;

    text-decoration: none;
}

.nav-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.nav-center {
    display: flex;

    align-items: center;

    gap: 42px;
}

.nav-center a {
    color: #999;

    text-decoration: none;

    font-size: 13px;

    transition:
        color .25s ease;
}

.nav-center a:hover {
    color: #fff;
}

.nav-actions {
    position: relative;

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 28px;
}

.nav-results {
    color: #aaa;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: .5px;

    white-space: nowrap;

    opacity: 0;

    transition:
        color .3s ease,
        text-shadow .3s ease;
}

.nav-results.results-arrived {
    animation:
        resultReveal
        .55s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

@keyframes resultReveal {

    0% {
        opacity: 0;

        transform:
            translateX(-5px)
            scale(.95);

        filter: blur(5px);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        filter: blur(0);

        color: #fff;

        text-shadow:
            0 0 14px
            rgba(255,255,255,.32);
    }
}

.contact-btn {
    color: #fff;

    text-decoration: none;

    font-size: 13px;

    border:
        1px solid #444;

    border-radius: 100px;

    padding:
        12px 19px;

    transition:
        border-color .25s ease,
        background .25s ease;
}

.contact-btn:hover {
    border-color: #888;

    background: #111;
}


/* =====================================================*
   HERO MESSAGE
*===================================================== */

.hero-message {
    position: absolute;

    left: 5vw;
    top: 17%;

    z-index: 10;
}

.hero-message p {
   color: rgba(255, 255, 255, .62);

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 16px;
}

.hero-message h1 {
    color: #f0f0ed;

    font-size:
        clamp(
            28px,
            3.3vw,
            56px
        );

    line-height: .96;

    font-weight: 500;

    letter-spacing: -2.5px;
}


/* =====================================================*
   NOVA
*===================================================== */

.nova-word {
    position: absolute;

    left: 50%;
    top: 55%;

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

    z-index: 5;

    display: flex;

    align-items: center;

    white-space: nowrap;

    color: #ededeb;

    font-size:
        clamp(
            120px,
            18vw,
            290px
        );

    font-weight: 700;

    line-height: .8;

    letter-spacing: -0.035em;

    user-select: none;

    transition:
        filter .3s ease;
}

.nova-word > span {
    display: inline-block;
}


/* =====================================================*
   NOVA PORTAL
*===================================================== */

.nova-o {
    position: relative;

    color: #ededeb;

    z-index: 6;

    isolation: isolate;

    transform-origin: center;

    transition:
        transform .35s ease,
        text-shadow .35s ease,
        color .35s ease;
}

.nova-o::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 51%;

    width: 43%;
    height: 58%;

    transform:
        translate(-50%, -50%)
        scale(.82);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.98) 0%,
            rgba(5,5,5,.94) 55%,
            rgba(30,30,30,.25) 76%,
            transparent 100%
        );

    box-shadow:
        inset 0 0 18px
        rgba(255,255,255,.05);

    opacity: 0;

    transition:
        opacity .45s ease,
        transform .45s ease;

    z-index: -1;
}


/* =====================================================
   NOVA O — 3D PORTAL
===================================================== */

.nova-o::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 51%;

    width: 43%;
    height: 58%;

    transform:
        translate(-50%, -50%)
        scale(.82);

    border-radius: 50%;

    /*
       THE PORTAL INTERIOR

       Left side stays almost completely black.

       Right side receives several layers of light,
       which makes the opening look cylindrical
       instead of like a flat black circle.
    */
    background:

        /* Small reflected light deep inside */
        radial-gradient(
            ellipse at 76% 50%,
            rgba(195, 225, 255, .15) 0%,
            rgba(105, 165, 225, .07) 15%,
            transparent 34%
        ),

        /* Right inner wall */
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 54%,
            rgba(15,35,55,.18) 68%,
            rgba(75,125,175,.18) 82%,
            rgba(180,215,245,.13) 94%,
            rgba(255,255,255,.08) 100%
        ),

        /* Deep black center */
        radial-gradient(
            ellipse at 42% 50%,
            #000 0%,
            #010204 48%,
            #03070c 68%,
            #08111b 84%,
            #111923 100%
        );

    /*
       Multiple inset shadows create physical depth.

       Bright right rim = near wall.
       Dark left shadow = tunnel depth.
    */
    box-shadow:

        inset -3px 0 3px
        rgba(230, 242, 255, .20),

        inset -8px 0 10px
        rgba(115, 175, 225, .16),

        inset -16px 0 20px
        rgba(40, 90, 145, .12),

        inset 8px 0 15px
        rgba(0, 0, 0, .95),

        inset 0 0 24px
        rgba(0, 0, 0, .92);

    opacity: 0;

    transition:
        opacity .45s ease,
        transform .5s cubic-bezier(.22,.75,.18,1),
        box-shadow .45s ease;

    z-index: -1;
}


/* =====================================================
   INNER DEPTH ARC

   This is NOT the outside glow.

   It sits inside the right side of the portal and
   represents another circular edge deeper in the tunnel.
===================================================== */

.nova-o::after {
    content: "";

    position: absolute;

    /*
       Keep the arc attached to the RIGHT wall.
    */
    left: 66.5%;
    top: 51%;

    width: 27%;
    height: 48%;

    transform:
        translate(-50%, -50%)
        scale(.88);

    border-radius: 50%;

    /*
       We create a complete ellipse but reveal only
       its LEFT-facing curved edge.

       Because the ellipse itself is on the right,
       this produces the ")"-style depth curve
       you were drawing.
    */
    border:
        1.5px solid transparent;

    border-left-color:
        rgba(215, 235, 250, .62);

    /*
       Secondary darker line immediately behind the
       highlight gives the curve thickness/depth.
    */
    box-shadow:

        -2px 0 2px
        rgba(210, 235, 255, .16),

        -5px 0 8px
        rgba(90, 155, 215, .13),

        inset 3px 0 5px
        rgba(15, 55, 95, .30);

    /*
       Only show around one third of the ellipse.

       This prevents it looking like another full O.
    */
    clip-path:
        polygon(
            0 12%,
            58% 12%,
            58% 88%,
            0 88%
        );

    opacity: 0;

    filter:
        drop-shadow(
            -2px 0 3px
            rgba(135, 190, 235, .20)
        );

    pointer-events: none;

    transition:
        opacity .45s ease,
        transform .5s cubic-bezier(.22,.75,.18,1),
        border-color .45s ease,
        box-shadow .45s ease,
        filter .45s ease;
}


/* =====================================================
   PORTAL ACTIVATION
===================================================== */

.nova-o.portal-active {
    transform:
        scale(1.08);

    color: #fff;

    text-shadow:

        0 0 12px
        rgba(255,255,255,.58),

        0 0 30px
        rgba(190,220,250,.20);
}


/* Dark opening expands */

.nova-o.portal-active::before {
    opacity: 1;

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

    box-shadow:

        /* BRIGHT NEAR WALL */
        inset -3px 0 4px
        rgba(235, 246, 255, .32),

        inset -8px 0 12px
        rgba(130, 190, 235, .22),

        inset -18px 0 24px
        rgba(45, 100, 160, .14),

        /* DARK FAR WALL */
        inset 10px 0 18px
        rgba(0, 0, 0, 1),

        /* DEPTH */
        inset 0 0 27px
        rgba(0, 0, 0, .95);
}


/* Inner circular wall appears */

.nova-o.portal-active::after {
    opacity: .92;

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

    border-left-color:
        rgba(225, 241, 253, .78);

    box-shadow:

        -2px 0 3px
        rgba(225, 242, 255, .25),

        -6px 0 10px
        rgba(95, 165, 225, .17),

        inset 3px 0 5px
        rgba(25, 70, 115, .38);

    filter:
        drop-shadow(
            -3px 0 5px
            rgba(120, 180, 230, .25)
        );
}


/* =====================================================
   PORTAL IMPACT
===================================================== */

.nova-o.portal-impact {
    transform:
        scale(1.115);

    text-shadow:

        0 0 16px
        rgba(255,255,255,.72),

        0 0 38px
        rgba(190,220,250,.25);
}


.nova-o.portal-impact::before {
    opacity: 1;

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

    box-shadow:

        inset -3px 0 5px
        rgba(255,255,255,.45),

        inset -9px 0 14px
        rgba(145,205,245,.28),

        inset -20px 0 28px
        rgba(50,110,175,.17),

        inset 11px 0 20px
        rgba(0,0,0,1),

        inset 0 0 30px
        rgba(0,0,0,.98);
}


.nova-o.portal-impact::after {
    opacity: 1;

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

    border-left-color:
        rgba(245, 250, 255, .94);

    box-shadow:

        -2px 0 4px
        rgba(245,250,255,.36),

        -7px 0 13px
        rgba(115,180,235,.22),

        inset 4px 0 6px
        rgba(30,80,125,.42);

    filter:
        drop-shadow(
            -3px 0 7px
            rgba(145,200,240,.32)
        );
}/* REMOVE INNER PORTAL LINE */

.nova-o::after,
.nova-o.portal-active::after,
.nova-o.portal-impact::after {
    content: none !important;
    display: none !important;
}

.nova-word.nova-impact {
    filter:
        drop-shadow(
            0 0 8px
            rgba(255,255,255,.15)
        );
}


/* =====================================================*
   YOUR BUSINESS
*===================================================== */

.business-label-fixed {
    position: absolute;

    left: 7vw;
    bottom: 19%;

    z-index: 50;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;

    isolation: isolate;
}

.business-label-fixed span {
    position: relative;

    z-index: 2;

    color: #fff;

    text-shadow:
        0 0 2px #fff,
        0 0 6px rgba(255,255,255,.9),
        0 0 14px rgba(255,255,255,.65),
        0 0 28px rgba(255,255,255,.40);

    animation:
        businessTextPulse
        2.3s
        ease-in-out
        infinite;
}

.business-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 145px;
    height: 48px;

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

    z-index: 1;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.25) 0%,
            rgba(255,255,255,.13) 28%,
            rgba(255,255,255,.055) 53%,
            transparent 75%
        );

    filter: blur(9px);

    opacity: .9;

    animation:
        businessHaloPulse
        2.3s
        ease-in-out
        infinite;
}

@keyframes businessTextPulse {

    0%,
    100% {
        text-shadow:
            0 0 2px #fff,
            0 0 6px rgba(255,255,255,.72),
            0 0 14px rgba(255,255,255,.45),
            0 0 25px rgba(255,255,255,.25);
    }

    50% {
        text-shadow:
            0 0 3px #fff,
            0 0 9px rgba(255,255,255,1),
            0 0 20px rgba(255,255,255,.78),
            0 0 38px rgba(255,255,255,.45);
    }
}

@keyframes businessHaloPulse {

    0%,
    100% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            scale(.92);
    }

    50% {
        opacity: 1;

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


/* =====================================================*
   ROCKET
*===================================================== */

.rocket-launch-point {
    position: absolute;

    left:
        calc(
            7vw + 125px
        );

    bottom:
        calc(
            19% - 17px
        );

    width: 48px;
    height: 48px;

    z-index: 55;
}

#rocket {
    position: absolute;

    left: 0;
    top: 0;

    width: 48px;
    height: 48px;

    z-index: 100;

    opacity: 1;

    transform-origin: center;

    will-change:
        transform,
        opacity;
}


/* =====================================================*
   SHIP
*===================================================== */

.ship-body {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 17px;
    height: 40px;

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

    border-radius:
        55% 55% 30% 30%;

    background:
        linear-gradient(
            90deg,
            #777 0%,
            #eeeeeb 35%,
            #ffffff 50%,
            #bcbcbc 72%,
            #555 100%
        );

    box-shadow:
        0 0 8px
        rgba(255,255,255,.15),

        inset -3px 0 5px
        rgba(0,0,0,.35);
}

.ship-body::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -9px;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        8.5px solid transparent;

    border-right:
        8.5px solid transparent;

    border-bottom:
        15px solid #e9e9e6;
}

.ship-window {
    position: absolute;

    left: 50%;
    top: 8px;

    transform:
        translateX(-50%);

    width: 7px;
    height: 9px;

    border-radius: 50%;

    background: #191919;

    border:
        1px solid #aaa;
}

.ship-wing {
    position: absolute;

    bottom: 3px;

    width: 11px;
    height: 18px;

    background: #8f8f8d;
}

.ship-wing-left {
    left: -8px;

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 100%
        );
}

.ship-wing-right {
    right: -8px;

    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 100%
        );
}

.ship-engine {
    position: absolute;

    left: 50%;
    bottom: -5px;

    transform:
        translateX(-50%);

    width: 9px;
    height: 7px;

    background: #777;

    border-radius:
        2px 2px 5px 5px;
}


/* =====================================================*
   EXHAUST
*===================================================== */

.ship-exhaust {
    position: absolute;

    left: 50%;
    top: 43px;

    transform:
        translateX(-50%)
        scaleY(.45);

    transform-origin:
        top center;

    width: 16px;
    height: 45px;

    pointer-events: none;

    opacity: .12;

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.ship-exhaust::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -3px;

    transform:
        translateX(-50%);

    width: 6px;
    height: 22px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.9);

    filter: blur(3px);

    box-shadow:
        0 8px 15px
        rgba(255,255,255,.35);
}

#rocket.engine-on .ship-exhaust {
    opacity: .9;

    transform:
        translateX(-50%)
        scaleY(1);
}

#rocket.high-speed .ship-exhaust {
    opacity: 1;

    transform:
        translateX(-50%)
        scaleY(1.9);
}

#rocket.high-speed .ship-exhaust::before {
    height: 35px;

    filter: blur(4px);

    box-shadow:
        0 15px 25px
        rgba(255,255,255,.45);
}


/* =====================================================*
   FLIGHT TRAIL
*===================================================== */

.flight-trail {
    position: absolute;

    inset: 0;

    z-index: 25;

    overflow: hidden;

    pointer-events: none;
}

.trail-particle {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(205,205,205,.28);

    filter: blur(2.2px);

    pointer-events: none;

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

    animation:
        realSmoke
        1.65s
        cubic-bezier(.16,.65,.3,1)
        forwards;
}

.trail-particle.hot {
    width: 4px;
    height: 4px;

    background:
        rgba(255,255,255,.62);

    filter: blur(1px);

    animation-duration:
        .75s;
}

.trail-particle.fast {
    width: 4px;
    height: 9px;

    background:
        rgba(245,245,245,.42);

    filter: blur(1.5px);

    animation-duration:
        .75s;
}

@keyframes realSmoke {

    0% {
        opacity: .72;

        transform:
            translate(-50%, -50%)
            translate(0,0)
            scale(.55);
    }

    30% {
        opacity: .48;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(
                var(--smoke-x),
                var(--smoke-y)
            )
            scale(2.6);
    }
}/* =====================================================*
   IMPACT
*===================================================== */

.impact-layer {
    position: absolute;

    inset: 0;

    z-index: 150;

    pointer-events: none;

    overflow: visible;
}

.impact-flash {
    position: absolute;

    width: 12px;
    height: 12px;

    transform:
        translate(-50%, -50%)
        scale(.15);

    border-radius: 50%;

    background: #fff;

    opacity: 0;

    box-shadow:
        0 0 8px #fff,
        0 0 20px rgba(255,255,255,.95),
        0 0 45px rgba(255,255,255,.65),
        0 0 80px rgba(255,255,255,.28);

    animation:
        impactFlash
        .48s
        ease-out
        forwards;
}

@keyframes impactFlash {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.1);
    }

    12% {
        opacity: 1;
    }

    42% {
        opacity: .95;

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

    100% {
        opacity: 0;

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

.impact-wave {
    position: absolute;

    width: 12px;
    height: 12px;

    transform:
        translate(-50%, -50%)
        scale(.2);

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.9);

    opacity: 0;

    box-shadow:
        0 0 10px
        rgba(255,255,255,.25);

    animation:
        impactWave
        .72s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.impact-wave.wave-two {
    animation-delay: .08s;

    border-color:
        rgba(255,255,255,.45);
}

@keyframes impactWave {

    0% {
        opacity: .95;

        transform:
            translate(-50%, -50%)
            scale(.2);
    }

    100% {
        opacity: 0;

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

.impact-ray {
    position: absolute;

    width: 2px;
    height: var(--ray-length);

    border-radius: 100px;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,0),
            rgba(255,255,255,.95)
        );

    transform-origin:
        center bottom;

    opacity: 0;

    animation:
        impactRay
        .62s
        cubic-bezier(.16,.8,.3,1)
        forwards;
}

@keyframes impactRay {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -100%)
            rotate(var(--angle))
            translateY(0)
            scaleY(.25);
    }

    18% {
        opacity: .95;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -100%)
            rotate(var(--angle))
            translateY(
                calc(
                    var(--distance) * -1
                )
            )
            scaleY(1);
    }
}

.impact-symbol {
    position: absolute;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    opacity: 0;

    text-shadow:
        0 0 5px rgba(255,255,255,.9),
        0 0 13px rgba(255,255,255,.35);

    pointer-events: none;
}


/* =====================================================
   BOTTOM VALUES
===================================================== */

.hero-bottom {
    position: absolute;

    left: 5vw;
    right: 5vw;
    bottom: 35px;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 10px;
    letter-spacing: 2.5px;
}


/* =====================================================
   FOOTER INITIAL LIGHT SWEEP
===================================================== */

.hero-bottom span {
    position: relative;

    color: rgba(255, 255, 255, .46);

    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.46) 0%,
            rgba(255,255,255,.46) 38%,
            rgba(255,255,255,1) 48%,
            rgba(210,235,255,.95) 50%,
            rgba(255,255,255,1) 52%,
            rgba(255,255,255,.46) 62%,
            rgba(255,255,255,.46) 100%
        );

    background-size: 250% 100%;
    background-position: 100% 0;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        footerShine 4.5s
        cubic-bezier(.22,.65,.25,1)
        .7s
        1 forwards;
}


/* Make each word illuminate progressively from left to right */

.hero-bottom span:nth-child(1) {
    animation-delay: .6s;
}

.hero-bottom span:nth-child(2) {
    animation-delay: 1.6s;
}

.hero-bottom span:nth-child(3) {
    animation-delay: 2.6s;
}

.hero-bottom span:nth-child(4) {
    animation-delay: 3.6s;
}


@keyframes footerShine {

    0% {
        background-position: 100% 0;

        filter:
            drop-shadow(
                0 0 0
                rgba(255,255,255,0)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 5px
                rgba(210,230,255,.18)
            );
    }

    100% {
        background-position: 0% 0;

        filter:
            drop-shadow(
                0 0 0
                rgba(255,255,255,0)
            );
    }
}


/* =====================================================*
   RESULTS SECTION
*===================================================== */

.work-placeholder {
    min-height: 100vh;

    background: #edede8;

    color: #111;

    padding:
        12vw 7vw;
}

.work-placeholder p {
    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 25px;
}

.work-placeholder h2 {
    max-width: 1000px;

    font-size:
        clamp(
            42px,
            7vw,
            110px
        );

    line-height: .94;

    letter-spacing: -5px;
}


/* =====================================================*
   MOBILE
*===================================================== */

@media (max-width: 750px) {

    .hero {
        padding:
            25px 6vw 35px;
    }

    .navbar {
        grid-template-columns:
            1fr auto;
    }

    .nav-center {
        display: none;
    }

    .nav-actions {
        gap: 14px;
    }

    .nav-results {
        font-size: 11px;
    }

    .contact-btn {
        font-size: 11px;

        padding:
            10px 14px;
    }

    .hero-message {
        left: 6vw;
        top: 16%;
    }

    .hero-message h1 {
        font-size:
            clamp(
                27px,
                8vw,
                44px
            );

        letter-spacing: -1.5px;
    }

    .nova-word {
        top: 53%;

        font-size: 23vw;
    }

    .business-label-fixed {
        left: 6vw;
        bottom: 22%;

        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .business-glow {
        width: 120px;
        height: 42px;
    }

    .rocket-launch-point {
        left:
            calc(
                6vw + 105px
            );

        bottom:
            calc(
                22% - 17px
            );
    }

    .hero-bottom {
        left: 6vw;
        right: 6vw;

        gap: 14px;

        flex-wrap: wrap;
    }

    .cursor-space-light {
        display: none;
    }

    .star-layer {
        transform: none !important;
    }

    .deep-space-cloud {
        filter: blur(45px);
    }

    .space-cloud-one {
        width: 90vw;
        height: 80vw;
    }
}


/* =====================================================*
   REDUCED MOTION
*===================================================== */

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

    .space-star,
    .star-layer {
        transition: none;
    }
}



/* ==========================================
   NOVA — OUR STORY
========================================== */

.nova-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  min-height: auto;

  padding: 65px 5vw 75px;

  background: #050608;
  color: #f2f2ef;
}

/* SPACE BACKGROUND */

.nova-story-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.nova-story-space .space-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* CONTENT */

.nova-story-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* HEADLINE */

.nova-story-title {
  margin: 0 auto 22px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 4.1vw, 60px);
  font-weight: 500;

  line-height: 1.05;
  letter-spacing: -0.045em;
  text-align: center;

  color: #0278ff;
}

/* OPENING PARAGRAPH */

.nova-story-opening {
  max-width: 810px;
  margin: 0 auto 30px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: -0.018em;
  text-align: center;

  color: rgba(242, 242, 239, 0.95);
}

/* TWO BALANCED COLUMNS */

.nova-story-columns {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: clamp(36px, 6vw, 92px);
  align-items: start;
}

.nova-story-column {
  min-width: 0;
}

.nova-story-column p {
  margin: 0 0 15px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 1.12vw, 16px);
  font-weight: 400;

  line-height: 1.65;
  letter-spacing: 0;

  color: rgba(242, 242, 239, 0.8);
}

.nova-story-column p:last-child {
  margin-bottom: 0;
}

/* MOBILE */

@media (max-width: 760px) {

  .nova-story {
    padding: 68px 6vw 76px;
  }

  .nova-story-title {
    font-size: clamp(32px, 7vw, 48px);
    margin-bottom: 22px;
  }

  .nova-story-opening {
    text-align: left;
    font-size: 18px;
    margin-bottom: 26px;
  }

  .nova-story-columns {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .nova-story-column p {
    font-size: 15px;
  }

}
@media (max-width: 750px) {
  /* Keep the flight layout stable as Safari's toolbar moves */
  .hero {
    min-height: 100svh;
  }

  /* Reduce expensive effects during the flight */
  .hero .deep-space-cloud,
  .hero .space-dust-band,
  .hero .space-void,
  .hero .rocket-space-light {
    display: none;
  }

  .hero .trail-particle {
    filter: none;
    box-shadow: none;
  }

  .hero .nova-word.nova-impact {
    filter: none;
  }
}