@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@layer tokens, reset, foundation, components, layout, scenes, responsive, motion;
@layer tokens {
    :root {
        --lime:#D0FF00;
        --cyan:#33FBFF;
        --cyan-deep:#003233;
        --pink:#FF0055;
        --bg:#020b0a;
        --white:#fff;
        --muted:rgba(255,255,255,.76);
        --panel-bg:rgba(42,51,0,.8);
        --panel-strong:#003233;
        --panel-border:10px solid var(--lime);
        --panel-glow:0 -10px 14px -12px rgba(208,255,0,.8);
        --max:1220px;
        --panel-gap:clamp(150px,18vh,210px);
        --section-padding:clamp(20px,5vw,72px);
        --panel-padding:clamp(24px,3.2vw,46px);
        --cut:12px;
        --focus:3px solid #fff;
    }
}
@layer reset {
    *,*::before,*::after {
        box-sizing:border-box
    }
    html {
        scroll-behavior:smooth;
        scroll-padding-top:calc(86px + env(safe-area-inset-top,0px));
        background:var(--bg)
    }
    body {
        margin:0;
        overflow-x:hidden;
        background:var(--bg);
        color:var(--white);
        font-family:Montserrat,'Avenir Next','Segoe UI',Arial,sans-serif
    }
    a {
        color:inherit;
        text-decoration:none
    }
    button,input {
        font:inherit
    }
    img,video {
        max-width:100%
    }
}
@layer foundation {
    .heading,.display {
        margin:0;
        font-weight:300;
        letter-spacing:.065em;
        line-height:.98;
        text-transform:uppercase;
        font-size:clamp(50px,6.6vw,105px)
    }
    .heading--medium,.display.medium {
        font-size:clamp(40px,5.2vw,78px)
    }
    .heading--small,.display.small {
        font-size:clamp(34px,4.2vw,62px)
    }
    .body-copy,.lead {
        font-size:clamp(18px,1.5vw,22px);
        line-height:1.68;
        color:var(--white)
    }
    .lime {
        color:var(--lime)
    }
    .center {
        text-align:center
    }
    .center .lead {
        margin-inline:auto
    }
    a:not(.btn):not(.scroll-cue):hover {
        color:var(--cyan)
    }
    a:not(.btn):not(.scroll-cue):focus-visible {
        color:var(--cyan);
        text-decoration:underline;
        text-underline-offset:5px
    }
    :where(a,button,input):focus-visible {
        outline:var(--focus);
        outline-offset:5px
    }
}
@layer tokens {
 :root { --pink-deep:#330011; --studio-header-bg:rgba(51,0,17,.86); }
}
@layer components {

.btn--secondary:focus-visible,.btn.secondary:focus-visible {
        color:#fff;
        background:#fff
    }
.nav-cta {
        min-height:39px;
        padding:0 20px;
        margin-left:0;
        font-size:11px
    }

}
@layer layout {
 .skip {position:fixed;top:-90px;left:12px;z-index:1000;background:#fff;color:#000;padding:12px}
 .skip:focus {top:12px}
 .site-nav {position:fixed;inset:0 0 auto;z-index:50;min-height:72px;height:calc(72px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));background:var(--studio-header-bg);border-bottom:2px solid var(--pink)}
 .nav-inner {width:100%;max-width:1420px;margin:auto;min-height:72px;display:flex;align-items:center;gap:clamp(10px,1.5vw,24px)}
 .studio-home {position:relative;align-self:flex-start;flex-shrink:0;width:105px;height:142px;z-index:52;margin-top:5px}
 .studio-home img {display:block;width:100%;height:auto}
 .studio-wordmark {align-self:center;color:#fff;font-size:clamp(11px,1.1vw,15px);font-weight:700;letter-spacing:.24em;white-space:nowrap}
 .nav-links {display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);margin-left:auto;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan)}
 .nav-cta {min-height:39px;padding:0 20px;font-size:11px}
 .mobile-menu-toggle {display:none}
 .panel {position:relative;min-height:100svh;isolation:isolate;overflow:hidden}
 .hero {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:155px 32px 90px;background:#071514}
 .hero-content {width:min(100%,1180px);display:flex;flex-direction:column;align-items:center;position:relative;z-index:4}
 .hero h1 {margin:0;width:min(90%,920px)}
 .hero h1 img {display:block;width:100%;height:auto}
 .hero-subtitle {margin:18px 0 30px;font-size:clamp(14px,1.45vw,19px);font-weight:600;line-height:1.55;text-align:center;color:#e0ece9;max-width:850px}
 .actions {display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-bottom:clamp(35px,6vh,65px)}
 .feature-grid {margin-top:-60px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.7vw,24px);width:100%;align-items:end}
 .feature {display:block;transition:translate .2s,filter .2s}
 .feature:hover {translate:0 -7px;filter:drop-shadow(0 0 13px #ff005577)}
 .feature img {display:block;width:100%;height:auto}
}
@layer scenes {
 .ambient,.hero-shade {position:absolute;inset:0;z-index:0;pointer-events:none}
 .ambient video {display:block;width:100%;height:100%;object-fit:cover;opacity:.72}
 .hero-shade {z-index:1;background:linear-gradient(180deg,rgba(0,13,12,.42),rgba(0,13,12,.2) 40%,rgba(0,13,12,.66) 100%)}
 .corner {position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 0 17px #ff005555)}
 .corner img {display:block;width:100%;height:auto}
 .corner-top {width:clamp(250px,27vw,510px);top:-13%;right:-8%;transform:rotate(39deg)}
 .corner-bottom {width:clamp(310px,34vw,600px);bottom:-21%;left:-15%;transform:rotate(-35deg)}
 .cup {position:absolute;width:clamp(205px,25vw,420px);bottom:-10px;right:-6%;transform:rotate(-29deg);z-index:2;pointer-events:none;filter:drop-shadow(0 0 18px #fff3)}
 .flight {position:absolute;left:-2%;top:94px;width:min(58vw,900px);height:200px;z-index:3;pointer-events:none}
 .flight svg {display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 9px #ff0055)}
 .flight path {fill:var(--pink)}
 .flight .ball {position:absolute;left:69%;top:47%;transform:translate(-50%,-50%);width:clamp(55px,5vw,82px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--pink),0 0 22px #ff0055}
 .hero h1 img {filter:brightness(0) saturate(100%) invert(89%) sepia(71%) saturate(1321%) hue-rotate(17deg) brightness(106%) contrast(110%) drop-shadow(0 0 12px #d0ff0033)}
 .about {background: radial-gradient(circle farthest-corner at right top, transparent 0%, rgba(0, 0, 0, 1) 100%) no-repeat, url('assets/background/LogoWallpaper_Black.png') repeat; background-size: cover, auto; display:flex;flex-direction:column;justify-content:center;padding:120px 28px 0}
 .about::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pink);box-shadow:0 0 18px var(--pink)}
 .about-orbit {position:absolute;z-index:-1;right:-170px;top:18%;width:600px;aspect-ratio:1;border:1px solid #33fbff23;transform:rotate(45deg);box-shadow:0 0 0 70px #33fbff05,0 0 0 140px #ff005505}
 .about-inner {width:min(100%,920px);margin:auto;padding:35px 0 65px}
 .eyebrow {font-size:11px;font-weight:800;letter-spacing:.24em;color:var(--cyan);text-align:center}
 .about .eyebrow {text-align:left;color:var(--pink);margin-bottom:17px}
 .about h2 {font-size:clamp(43px,7vw,92px);line-height:.98;letter-spacing:-.06em;margin:0;font-weight:900}
 .about h2 span {color:#01D19F}
 .about-rule {width:90px;height:4px;background:var(--pink);margin:32px 0}
 .about-inner>p:not(.eyebrow) {max-width:680px;color:#d2e3df;font-size:clamp(15px,1.4vw,19px);line-height:1.8}
 .about em {font-style:normal;color:inherit;font-weight:800}
 .about-actions {display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin:32px 0 46px}
 .contact {font-size:13px;font-weight:700}
 .socials {border-top:1px solid #ffffff33;padding-top:25px;display:flex;flex-wrap:wrap;gap:14px 26px}
 .socials a {font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}

}
@layer responsive {
 @media(max-width:850px) {
 .site-nav {height:calc(66px + env(safe-area-inset-top,0px));min-height:66px}
 .nav-inner {min-height:66px}
 .studio-home {width:83px;height:110px}
 .studio-wordmark {font-size:11px;letter-spacing:.14em}
 .mobile-menu-toggle {display:flex;position:relative;z-index:54;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--pink);background:#330011;color:#fff;cursor:pointer;margin-left:auto}
 .mobile-menu-toggle span {width:20px;height:2px;background:#fff}
 .nav-links {position:absolute;top:calc(66px + env(safe-area-inset-top,0px));left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:20px 24px 26px;background:#24000def;border-bottom:2px solid var(--pink);box-shadow:0 14px 25px #0009}
 .nav-links.is-open {display:flex}
 .nav-links>a {padding:16px 8px}
 .nav-links .nav-cta {text-align:center;margin-top:8px}
 .hero {padding:150px 22px 68px}
 .corner-top {top:-7%;right:-25%;width:330px}
 .corner-bottom {left:-35%;bottom:-8%;width:330px}
 .cup {width:220px;right:-8px;bottom:-10px}
 .flight {width:90vw;height:140px;top:85px}
 .flight .ball {width:55px}
 .hero h1 {width:100%}
 .actions {margin-bottom:32px}
 .feature-grid {gap:8px}
 }
 @media(max-width:600px) {
 .hero {padding:140px 16px 65px;min-height:100svh}
 .hero-subtitle {font-size:13px;margin:16px 0 23px}
 .actions {gap:9px;margin-bottom:28px}
 .btn {min-height:44px;padding:12px 15px;font-size:10px}
 .feature-grid {grid-template-columns:1fr;max-width:350px;gap:14px}
 .feature img {max-height:260px;object-fit:contain}
 .corner-top {width:250px;right:-145px}
 .corner-bottom {width:250px;left:-175px;bottom:4%}
 .cup {width:180px;right:-8px;bottom:-10px}
 .flight {top:80px;width:85vw}
 .flight .ball {width:38px}
 .about {padding:110px 24px 0}
 .about h2 {font-size:clamp(43px,12vw,68px)}
 .about-actions {gap:20px}
 .socials {gap:20px}

}
}
@layer motion {
 @media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 .ambient video {display:none}
 .ambient {background:url('assets/background/floating-shapes-poster.jpg') center/cover}
 .btn,.feature {transition:none}
 }
}

@layer layout {
    .nav-inner { height: 72px; }
    .nav-links { align-self: center; }
}
@layer responsive {
    @media(max-width:850px) {
        .nav-inner { height: 66px; }
        .nav-links { align-self: auto; }
      
    }
    @media(max-width:430px) { .studio-wordmark { font-size: 9px; letter-spacing: .08em; } }
}

@layer scenes {
    .corner-top { width: clamp(200px, 22vw, 410px); }
    .corner-bottom { width: clamp(245px, 27vw, 480px); }
}
@layer responsive {
    @media (max-width: 850px) {
        .corner-top, .corner-bottom { width: 265px; }
    }
    @media (max-width: 600px) {
        .corner-top, .corner-bottom { width: 200px; }
    }
}

@layer responsive {
    @media (max-width: 600px) { .hero > .scroll-cue { display: none; } }
}

@layer scenes { .flight .flight-trail { width: 100%; height: 100%; } }

@layer layout { .hero > .scroll-cue { position: relative; z-index: 5; } }

@layer reset { html { scroll-padding-top: 0; } }
@layer layout {
    .hero { justify-content: flex-start; padding-bottom: 12px; }
    .hero-content { flex: 1 0 auto; min-height: 0; justify-content: space-around; gap: 0; padding-top: clamp(12px, 2vh, 26px); }
    .hero-intro { width: 100%; display: flex; flex-direction: column; align-items: center; }
    .hero-subtitle { margin-bottom: 0; }
    .hero .actions { margin: 0; }
    .hero > .scroll-cue { flex: 0 0 auto; margin: 0 auto; }
    .about { scroll-margin-top: 0; }
}
@layer responsive {
    @media(max-width:600px) { .hero { padding-bottom: 20px; } }
}