*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:'Inter',sans-serif;
}


:root{
 --bg:#000;
 --white:#f7f7f2;
 --muted:rgba(255,255,255,.68);
 --dim:rgba(255,255,255,.45);
 --green:#18ffc1;
 --green2:#00ff99;
 --cyan:#00ffff;
 --pink:#ff3d81;
 --panel:rgba(0,0,0,.72);
 --line:rgba(255,255,255,.1);
 --ease:cubic-bezier(.16,1,.3,1);
 --hero-bg:
   radial-gradient(circle at 10% 16%, rgba(24,255,193,.18), transparent 30%),
   radial-gradient(circle at 88% 24%, rgba(255,61,129,.15), transparent 34%),
   linear-gradient(135deg, rgba(2,255,178,.12), transparent 36%),
   linear-gradient(315deg, rgba(255,61,129,.13), transparent 42%),
   #050505;
}


html{
 background:var(--hero-bg);
 min-height:100%;
 overscroll-behavior-y:none;
 scroll-behavior:smooth;
}


body{
 position:relative;
 min-height:100%;
 background:transparent;
 color:#fff;
 font-family:'Plus Jakarta Sans','Inter',sans-serif;
 overflow-x:hidden;
 overscroll-behavior-y:none;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
 letter-spacing:-0.01em;
}


body::before{
 content:"";
 position:fixed;
 inset:-30vh 0;
 z-index:0;
 pointer-events:none;
 background:var(--hero-bg);
 transform:translateZ(0);
}


body.locked{
 overflow:hidden;
}


a{
 color:inherit;
 text-decoration:none;
}


button,
input,
textarea{
 font:inherit;
}


.mono{
 font-family:'JetBrains Mono',monospace;
}


::selection{
 background:rgba(24,255,193,.3);
}


/* BACKGROUND FX */


#codeRain,
#stars{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:0;
}


.noise{
 position:fixed;
 inset:0;
 z-index:2;
 pointer-events:none;
 opacity:.08;
 background-image:
   radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 1px),
   radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 0 1px, transparent 1px);
 background-size:32px 32px,48px 48px;
}


.scanlines{
 position:fixed;
 inset:0;
 z-index:3;
 pointer-events:none;
 opacity:.11;
 background:linear-gradient(to bottom, transparent 0 92%, rgba(255,255,255,.18) 93%, transparent 100%);
 background-size:100% 5px;
}


.grid-bg{
 position:fixed;
 inset:-20%;
 z-index:0;
 pointer-events:none;
 opacity:.28;
 background:
   linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
 background-size:72px 72px;
 mask-image:radial-gradient(circle at 50% 28%, #000 0%, transparent 72%);
 animation:gridMove 30s linear infinite;
}


.aurora{
 position:fixed;
 inset:-20%;
 z-index:0;
 pointer-events:none;
 background:
   radial-gradient(circle at 10% 16%, rgba(24,255,193,.18), transparent 30%),
   radial-gradient(circle at 88% 24%, rgba(255,61,129,.15), transparent 34%),
   radial-gradient(circle at 50% 88%, rgba(0,255,255,.12), transparent 40%);
 filter:blur(12px);
 animation:aurora 14s ease-in-out infinite alternate;
}


.cursor-glow{
 position:fixed;
 left:50%;
 top:50%;
 width:420px;
 height:420px;
 border-radius:50%;
 transform:translate(-50%,-50%);
 pointer-events:none;
 z-index:1;
 background:radial-gradient(circle, rgba(24,255,193,.18), rgba(0,255,255,.07) 35%, transparent 70%);
 mix-blend-mode:screen;
}


/* PRELOADER */


.preloader{
 position:fixed;
 inset:0;
 z-index:9999;
 display:grid;
 place-items:center;
 background:
   radial-gradient(circle at 50% 30%, rgba(24,255,193,.18), transparent 30%),
   radial-gradient(circle at 80% 70%, rgba(255,61,129,.14), transparent 30%),
   #000;
 transition:.8s var(--ease);
}


.preloader.hide{
 opacity:0;
 visibility:hidden;
}


.boot-card{
 width:min(630px, calc(100% - 34px));
 padding:42px;
 border-radius:24px;
 background:rgba(0,0,0,.75);
 border:1px solid rgba(255,255,255,.12);
 box-shadow:0 35px 120px rgba(0,0,0,.8);
 position:relative;
 overflow:hidden;
}


.boot-card::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.08), transparent 65%);
 transform:translateX(-120%);
 animation:shine 2.8s linear infinite;
}


.boot-orb{
 width:148px;
 height:118px;
 margin:0 auto 26px;
 position:relative;
 display:grid;
 place-items:center;
 border-radius:0;
 background:transparent;
 filter:drop-shadow(0 0 28px rgba(24,255,193,.48));
 animation:pulse 3s ease-in-out infinite;
}


.boot-orb::before{
 content:"";
 position:absolute;
 inset:8%;
 z-index:-1;
 border-radius:50%;
 background:radial-gradient(circle, rgba(24,255,193,.34), rgba(0,255,255,.18) 42%, transparent 70%);
 filter:blur(8px);
}


.boot-orb img{
 width:100%;
 height:100%;
 object-fit:contain;
 display:block;
}


.boot-kicker{
 text-align:center;
 color:var(--green);
 letter-spacing:.18em;
 font-size:12px;
 font-weight:800;
}


.boot-card h1{
 text-align:center;
 font-size:clamp(32px,5vw,56px);
 line-height:.95;
 letter-spacing:-.055em;
 margin:12px 0 24px;
}


.boot-lines{
 display:grid;
 gap:10px;
 min-height:116px;
 color:rgba(255,255,255,.72);
 font-family:'JetBrains Mono',monospace;
 font-size:13px;
}


.boot-lines div{
 opacity:0;
 transform:translateY(8px);
 animation:fadeUp .45s ease forwards;
}


.boot-progress{
 height:8px;
 background:rgba(255,255,255,.08);
 border-radius:999px;
 overflow:hidden;
 margin-top:26px;
}


.boot-progress span{
 display:block;
 height:100%;
 width:100%;
 border-radius:inherit;
 background:linear-gradient(90deg,var(--green2),var(--cyan),var(--pink));
 transform-origin:left;
 animation:load 3s var(--ease) forwards;
}


/* NAVBAR */


.navbar{
 width:calc(100% - 80px);
 max-width:1400px;
 margin:20px 40px 0;
 padding:18px 40px;
 position:sticky;
 top:20px;
 z-index:1000;
 background:rgba(0,0,0,.85);
 backdrop-filter:blur(12px);
 border-radius:16px;
 border:1px solid rgba(255,255,255,.08);
 box-shadow:
   0 12px 30px rgba(0,0,0,.35),
   0 2px 6px rgba(0,0,0,.25);
 transition:none;
 overflow:hidden;
}


.navbar::before{
 content:"";
 position:absolute;
 inset:-1px auto -1px -46%;
 width:42%;
 background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 30%, rgba(24,255,193,.22) 50%, rgba(0,255,255,.12) 68%, transparent 100%);
 filter:blur(.2px);
 transform:translateX(-110%) skewX(-18deg);
 animation:navbarShimmer 5.8s var(--ease) infinite;
 pointer-events:none;
}


.nav-container{
 position:relative;
 z-index:2;
 display:flex;
 align-items:center;
}


.brand{
 display:flex;
 align-items:center;
 gap:10px;
}


.footer-logo{
 display:grid;
 place-items:center;
 color:#030303;
 background:linear-gradient(135deg,#fff,var(--green),var(--cyan),#fff);
 animation:logoHue 14s linear infinite;
 box-shadow:
   0 0 30px rgba(24,255,193,.35),
   inset 0 0 10px rgba(255,255,255,.8);
}


.brand-logo{
 width:68px;
 height:52px;
 display:grid;
 place-items:center;
 overflow:visible;
 --logo-filter:drop-shadow(0 0 18px rgba(24,255,193,.32));
 filter:var(--logo-filter);
 animation:siteLogoHue 10s linear infinite;
}


.brand-logo img{
 width:100%;
 height:100%;
 display:block;
 object-fit:contain;
 transform:translateY(-3px);
}


.brand-text{
 font-size:22px;
 font-weight:700;
 text-shadow:
   0 0 8px rgba(255,255,255,.25),
   0 0 14px rgba(255,255,255,.15);
}


.nav-links{
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:30px;
}


.nav-links a{
 font-size:13px;
 font-weight:700;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:rgba(255,255,255,.68);
 position:relative;
}


.nav-links a::after{
 content:"";
 position:absolute;
 left:0;
 bottom:-5px;
 width:0;
 height:1px;
 background:linear-gradient(90deg,#00ff99,#00ffff);
 box-shadow:0 0 12px rgba(0,255,200,.45);
 transition:.35s ease;
}


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


.nav-links a:hover::after{
 width:100%;
}


.nav-actions{
 margin-left:auto;
 display:flex;
 align-items:center;
 gap:16px;
}


.start-btn{
 border:none;
 border-radius:999px;
 padding:11px 20px;
 cursor:pointer;
 font-weight:800;
}


.start-btn{
 background:#fff;
 color:#000;
 position:relative;
 overflow:hidden;
}


.start-btn::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(120deg, transparent 30%, rgba(24,255,193,.45), transparent 70%);
 transform:translateX(-120%);
 transition:.7s var(--ease);
}


.start-btn:hover::before{
 transform:translateX(120%);
}


.mobile-toggle{
 display:none;
 margin-left:auto;
 width:46px;
 height:46px;
 border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.06);
 border-radius:12px;
 cursor:pointer;
}


.mobile-toggle span{
 display:block;
 width:20px;
 height:2px;
 background:#fff;
 margin:4px auto;
}


.mobile-menu{
 display:none;
}


/* SECTIONS */


main{
 position:relative;
 z-index:5;
}


.section{
 position:relative;
 min-height:100vh;
 padding:130px 80px;
 overflow:hidden;
}


.eyebrow{
 color:var(--green);
 font-family:'JetBrains Mono',monospace;
 letter-spacing:.18em;
 font-size:12px;
 text-transform:uppercase;
 font-weight:800;
}


.section-heading{
 max-width:940px;
 margin:0 auto 60px;
 text-align:center;
}


.section-heading.align-left{
 text-align:left;
 margin-left:0;
}


.section-heading h2{
 font-size:clamp(38px,5.5vw,86px);
 line-height:.95;
 letter-spacing:-.065em;
 margin-top:14px;
}


.section-heading p:not(.eyebrow){
 color:var(--muted);
 font-size:18px;
 line-height:1.7;
 max-width:720px;
 margin:20px auto 0;
}


.reveal{
 opacity:0;
 transform:translateY(48px) scale(.98);
 transition:
   opacity .9s ease,
   transform 1.1s var(--ease);
}


.reveal.visible{
 opacity:1;
 transform:translateY(0) scale(1);
}


/* HERO */


.hero{
 min-height:calc(100vh - 110px);
 display:flex;
 align-items:center;
 justify-content:flex-start;
 gap:0;
 padding-left:80px;
 padding-right:80px;
 padding-top:90px;
 background:transparent;
}


.hero::after{
 content:"";
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 height:230px;
 background:linear-gradient(to bottom, transparent, #000);
 pointer-events:none;
}


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


.hero-copy{
 flex:0 0 min(820px,100%);
 width:min(820px,100%);
 max-width:820px;
 margin-left:0;
 margin-right:auto;
 text-align:left;
}


.access-chip{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding:10px 14px;
 border:1px solid rgba(24,255,193,.22);
 border-radius:999px;
 background:rgba(24,255,193,.06);
 margin-bottom:24px;
 box-shadow:0 0 32px rgba(24,255,193,.08);
}


.access-chip span{
 width:9px;
 height:9px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 18px var(--green);
}


.access-chip b{
 font-size:12px;
 letter-spacing:.14em;
}


.hero-logo-wrap{
 position:relative;
 width:150px;
 height:150px;
 margin-bottom:28px;
 margin-left:0;
 margin-right:auto;
 display:grid;
 place-items:center;
}


.hero-logo{
 width:136px;
 height:122px;
 object-fit:contain;
 border-radius:0;
 transform:rotate(0deg);
 --logo-filter:drop-shadow(0 0 34px rgba(24,255,193,.5));
 filter:var(--logo-filter);
 animation:siteLogoHue 10s linear infinite;
}


.forge-ring{
 position:absolute;
 border:1px solid rgba(24,255,193,.35);
 border-radius:34% 66% 63% 37% / 41% 41% 59% 59%;
 animation:spin 12s linear infinite;
 box-shadow:0 0 40px rgba(24,255,193,.12);
}


.r1{
 inset:5px;
}


.r2{
 inset:20px;
 animation-duration:8s;
 animation-direction:reverse;
 border-color:rgba(0,255,255,.3);
}


.r3{
 inset:-10px;
 animation-duration:16s;
 border-color:rgba(255,61,129,.26);
}


.hero h1{
 font-size:clamp(48px,6.2vw,92px);
 line-height:.9;
 letter-spacing:-.075em;
 max-width:820px;
 margin-left:0;
 margin-right:auto;
 margin-top:14px;
}


.word-shell{
 display:inline-grid;
 grid-template-areas:"word";
 vertical-align:baseline;
 color:var(--green);
 text-shadow:
   0 0 20px rgba(24,255,193,.35),
   0 0 45px rgba(0,255,255,.18);
}


.word-sizer,
#wordSwap{
 grid-area:word;
 display:inline-block;
 white-space:nowrap;
 line-height:.95;
 min-height:1em;
 min-width:0;
 transition:.5s var(--ease);
}


.word-sizer{
 visibility:hidden;
 pointer-events:none;
}


#wordSwap.swap{
 opacity:0;
 transform:translateY(-24px) skewX(-8deg);
 filter:blur(8px);
}


.hero-sub{
 color:rgba(255,255,255,.72);
 font-size:18px;
 line-height:1.75;
 max-width:760px;
 margin-left:0;
 margin-right:auto;
 margin-top:28px;
}


.hero-actions{
 display:flex;
 align-items:center;
 justify-content:flex-start;
 gap:16px;
 flex-wrap:wrap;
 margin-top:34px;
}


.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 min-height:54px;
 padding:0 24px;
 border-radius:999px;
 font-weight:900;
 position:relative;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.12);
 transition:.25s ease;
}


.btn::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.32), transparent 70%);
 transform:translateX(-120%);
 transition:.75s var(--ease);
}


.btn:hover::before{
 transform:translateX(120%);
}


.btn:hover{
 transform:translateY(-2px);
}


.btn span,
.btn i{
 position:relative;
 z-index:2;
}


.btn-primary{
 color:#020202;
 background:linear-gradient(135deg,#fff,var(--green),var(--cyan));
 box-shadow:0 18px 45px rgba(24,255,193,.2);
 animation:buttonHue 10s linear infinite;
}


.btn-ghost{
 color:#fff;
 background:rgba(255,255,255,.045);
 backdrop-filter:blur(12px);
}


.terminal{
 width:min(620px,100%);
 margin-left:0;
 margin-right:auto;
 margin-top:34px;
 border:1px solid rgba(255,255,255,.1);
 border-radius:18px;
 overflow:hidden;
 background:rgba(0,0,0,.62);
 box-shadow:0 22px 80px rgba(0,0,0,.35);
}


.terminal-top{
 height:44px;
 display:flex;
 align-items:center;
 gap:8px;
 padding:0 14px;
 border-bottom:1px solid rgba(255,255,255,.08);
 background:rgba(255,255,255,.035);
}


.terminal-top span{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(255,255,255,.25);
}


.terminal-top p{
 margin-left:8px;
 color:rgba(255,255,255,.55);
 font-size:12px;
}


.terminal-body{
 min-height:124px;
 padding:18px;
 color:rgba(255,255,255,.74);
 font-size:13px;
 line-height:1.7;
 font-family:'JetBrains Mono',monospace;
}


.terminal-body p::before{
 content:"$ ";
 color:var(--green);
}


.cursor{
 animation:blink 1s infinite;
}


.hero-visual{
 position:absolute;
 right:clamp(240px, 17vw, 380px);
 top:50%;
 width:min(360px,24vw);
 min-height:390px;
 display:grid;
 place-items:center;
 transform:translateY(-50%);
 opacity:.82;
 pointer-events:none;
}


.browser{
 --browser-scale:.56;
 width:min(640px,70vw);
 border:1px solid rgba(255,255,255,.18);
 background:#f6f1ea;
 border-radius:22px;
 overflow:hidden;
 box-shadow:0 38px 120px rgba(0,0,0,.62), 0 0 60px rgba(24,255,193,.08);
 position:relative;
 transform:perspective(900px) rotateY(-10deg) rotateX(7deg) scale(var(--browser-scale));
 transform-origin:center;
 animation:floatCard 6s ease-in-out infinite;
 color:#15120f;
}


.browser-top{
 height:50px;
 display:flex;
 align-items:center;
 gap:8px;
 padding:0 18px;
 border-bottom:1px solid rgba(255,255,255,.08);
 background:#050505;
}


.browser-top span{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(255,255,255,.36);
}


.browser-top small{
 margin-left:8px;
 color:rgba(255,255,255,.72);
 font-size:13px;
 letter-spacing:0;
}


.browser-content{
 min-height:470px;
}


.browser-scan{
 position:absolute;
 inset:48px 0 0;
 height:90px;
 background:linear-gradient(to bottom, transparent, rgba(24,255,193,.1), transparent);
 animation:scanDown 4.5s ease-in-out infinite;
 mix-blend-mode:screen;
 pointer-events:none;
}


.mini-site{
 padding:0;
 background:#f8f6f0;
}


.mini-site-header{
 min-height:66px;
 display:grid;
 grid-template-columns:auto 1fr auto;
 align-items:center;
 gap:18px;
 padding:0 24px;
 background:#050505;
 color:#fff;
}


.mini-site-header strong{
 font-family:'Plus Jakarta Sans','Inter',sans-serif;
 font-size:19px;
 font-weight:900;
 letter-spacing:.02em;
 white-space:nowrap;
}


.mini-site-header nav{
 display:flex;
 justify-content:center;
 gap:18px;
 color:rgba(255,255,255,.78);
 font-size:12px;
 font-weight:800;
}


.mini-site-header button,
.mini-booking button{
 border:0;
 border-radius:0;
 background:#fff;
 color:#0a0a0a;
 font-size:12px;
 font-weight:900;
 padding:10px 14px;
 cursor:pointer;
}


.mini-site-tabs{
 display:flex;
 justify-content:center;
 gap:18px;
 padding:24px 20px 20px;
 background:#fff;
 color:#171411;
 font-size:14px;
}


.mini-site-tabs span{
 padding:10px 16px;
 border-radius:999px;
 white-space:nowrap;
}


.mini-site-tabs .active{
 background:#e8e5e0;
}


.mini-site-stage{
 position:relative;
 min-height:290px;
 margin:0 26px;
 border-radius:7px;
 overflow:hidden;
 background:
   linear-gradient(90deg, rgba(73,43,21,.94), rgba(104,62,31,.78) 46%, rgba(36,31,27,.82)),
   url("assets/codepreme-email-hero.jpg") center/cover;
 box-shadow:0 16px 40px rgba(71,44,25,.18);
}


.mini-site-stage::before{
 content:"";
 position:absolute;
 inset:0;
 background:
   linear-gradient(90deg, rgba(55,26,12,.9), rgba(93,57,30,.44) 48%, rgba(23,26,22,.36)),
   radial-gradient(circle at 86% 30%, rgba(24,255,193,.18), transparent 36%);
}


.mini-slide{
 position:absolute;
 left:28px;
 top:28px;
 width:min(300px,54%);
 color:#fff;
 opacity:0;
 transform:translateX(24px);
 animation:miniSlideSwap 9s ease-in-out infinite;
}


.mini-slide.slide-two{
 animation-delay:4.5s;
}


.mini-kicker{
 color:rgba(255,255,255,.78);
 font-size:10px;
 font-weight:900;
 letter-spacing:.12em;
 text-transform:uppercase;
 margin-bottom:10px;
}


.mini-slide h3{
 max-width:260px;
 font-family:Georgia,'Times New Roman',serif;
 font-size:32px;
 line-height:1;
 letter-spacing:0;
 font-weight:700;
 margin-bottom:12px;
}


.mini-slide p:not(.mini-kicker){
 max-width:270px;
 color:rgba(255,255,255,.86);
 font-size:13px;
 line-height:1.45;
}


.mini-type{
 position:relative;
 width:max-content;
 max-width:100%;
 margin-top:18px;
 padding:10px 13px;
 background:rgba(255,255,255,.9);
 color:#19130e;
 border-radius:5px;
 font-size:12px;
 font-weight:900;
 box-shadow:0 12px 26px rgba(0,0,0,.16);
 overflow:hidden;
 white-space:nowrap;
}


.mini-type::before{
 content:"";
 position:absolute;
 inset:0;
 background:#fff;
 transform-origin:right;
 animation:miniTyping 4.5s steps(28,end) infinite;
}


.mini-type span{
 display:inline-block;
 width:2px;
 height:14px;
 margin-left:4px;
 background:#12b886;
 vertical-align:-2px;
 animation:blink 1s infinite;
}


.mini-photo{
 position:absolute;
 right:28px;
 bottom:28px;
 width:48%;
 min-height:156px;
 border-radius:7px;
 background:
   linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02)),
   linear-gradient(135deg, rgba(241,221,198,.88), rgba(102,66,43,.72) 45%, rgba(22,35,29,.9));
 box-shadow:0 22px 42px rgba(0,0,0,.2);
 overflow:hidden;
 animation:miniPhotoFloat 5.8s ease-in-out infinite;
}


.mini-photo::before{
 content:"";
 position:absolute;
 left:30%;
 top:12%;
 width:38%;
 height:76%;
 border-radius:999px 999px 10px 10px;
 background:linear-gradient(180deg, rgba(250,248,239,.88), rgba(121,72,42,.36));
 transform:rotate(-16deg);
}


.mini-photo::after{
 content:"";
 position:absolute;
 right:-18%;
 bottom:-32%;
 width:58%;
 height:70%;
 border-radius:50%;
 background:#245038;
 box-shadow:-52px -18px 0 rgba(36,80,56,.55);
}


.mini-calendar{
 position:absolute;
 left:-18px;
 bottom:44px;
 width:132px;
 padding:14px;
 border-radius:6px;
 background:#fff;
 color:#171411;
 box-shadow:0 16px 30px rgba(0,0,0,.18);
 z-index:1;
 animation:miniWidgetIn 9s ease-in-out infinite;
}


.mini-calendar b{
 display:block;
 margin-bottom:10px;
 font-size:14px;
}


.mini-calendar span{
 display:grid;
 place-items:center;
 width:26px;
 height:26px;
 border-radius:50%;
 background:#050505;
 color:#fff;
 font-size:12px;
 font-weight:900;
}


.mini-toast{
 position:absolute;
 right:14px;
 bottom:18px;
 z-index:2;
 padding:10px 13px;
 border-radius:999px;
 background:#fff;
 color:#171411;
 font-size:11px;
 font-weight:900;
 box-shadow:0 15px 32px rgba(0,0,0,.16);
 animation:miniToastPop 9s ease-in-out infinite;
 white-space:nowrap;
}


.mini-booking{
 width:52%;
 margin:0 auto;
 transform:translateY(-34px);
 padding:14px;
 border-radius:7px;
 background:rgba(73,56,43,.94);
 color:#fff;
 box-shadow:0 20px 45px rgba(50,31,18,.2);
 position:relative;
 z-index:2;
}


.mini-booking div{
 display:grid;
 grid-template-columns:1fr auto auto;
 align-items:center;
 gap:10px;
 padding:10px;
 border:1px solid rgba(255,255,255,.14);
 border-radius:5px;
}


.mini-booking div + div{
 margin-top:8px;
}


.mini-booking span{
 font-size:12px;
 font-weight:900;
}


.mini-booking b{
 color:rgba(255,255,255,.62);
 font-size:11px;
}


.mini-booking button{
 padding:6px 9px;
 border-radius:999px;
 background:#d9cfc4;
 color:#3f3026;
 font-size:10px;
}


.mini-strip{
 display:flex;
 align-items:center;
 gap:8px;
 margin:-16px 26px 24px;
 color:#2a221c;
 font-size:12px;
 font-weight:900;
 white-space:nowrap;
 overflow:hidden;
}


.mini-strip span{
 animation:miniTicker 8s ease-in-out infinite;
}


.floating-code span{
 position:absolute;
 left:var(--x);
 top:var(--y);
 z-index:1;
 color:rgba(255,255,255,.18);
 font-family:'JetBrains Mono',monospace;
 font-weight:800;
 letter-spacing:.04em;
 animation:floatingBadge calc(5s * var(--d)) ease-in-out infinite;
}


/* APP SHOWCASE */

.app-showcase-section{
 min-height:auto;
 padding-top:120px;
 padding-bottom:120px;
}


.app-showcase-system{
 max-width:1240px;
 margin:0 auto;
 border:1px solid rgba(255,255,255,.1);
 border-radius:32px;
 background:#000;
 box-shadow:
   0 30px 120px rgba(0,0,0,.75),
   inset 0 0 90px rgba(24,255,193,.05);
 overflow:hidden;
}


.app-showcase-system .section-heading{
 max-width:940px;
 margin:0 auto;
 padding:70px 42px 42px;
}


.app-panel{
 min-height:560px;
 position:relative;
 display:grid;
 grid-template-columns:280px minmax(0,1fr);
 border-top:1px solid rgba(255,255,255,.08);
 border-bottom:1px solid rgba(255,255,255,.08);
 background:
   radial-gradient(circle at 18% 10%, rgba(24,255,193,.16), transparent 28%),
   radial-gradient(circle at 88% 84%, rgba(255,61,129,.08), transparent 34%),
   linear-gradient(90deg, rgba(24,255,193,.08), transparent 32%),
   #000;
 overflow:hidden;
}


.app-panel::before{
 content:"";
 position:absolute;
 inset:0;
 background:
   linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
 background-size:46px 46px;
 mask-image:linear-gradient(90deg, #000, transparent 82%);
 opacity:.42;
 pointer-events:none;
}


.app-selector{
 position:relative;
 z-index:1;
 display:flex;
 flex-direction:column;
 gap:10px;
 padding:26px;
 border-right:1px solid rgba(255,255,255,.16);
 background:
   linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
   #000;
 box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}


.app-option{
 width:100%;
 min-height:72px;
 display:flex;
 align-items:center;
 gap:14px;
 padding:16px 14px;
 border:1px solid rgba(255,255,255,.14);
 border-radius:14px;
 color:var(--green);
 background:#000;
 cursor:pointer;
 text-align:left;
 transition:
   color .25s ease,
   border-color .25s ease,
   background .25s ease,
   box-shadow .25s ease,
   transform .25s ease;
}


.app-option span{
 flex:0 0 auto;
 width:34px;
 height:34px;
 display:grid;
 place-items:center;
 border-radius:10px;
 color:var(--green);
 background:#000;
 border:1px solid rgba(255,255,255,.68);
 font-family:'JetBrains Mono',monospace;
 font-size:12px;
 font-weight:900;
 box-shadow:0 0 18px rgba(255,255,255,.08);
}


.app-option strong{
 font-size:15px;
 line-height:1.15;
 letter-spacing:.01em;
 color:var(--green);
}


.app-option:hover,
.app-option.active{
 color:#fff;
 border-color:rgba(255,255,255,.78);
 background:
   linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
   #000;
 box-shadow:
   inset 0 0 26px rgba(255,255,255,.04),
   0 14px 34px rgba(0,0,0,.24),
   0 0 28px rgba(255,255,255,.06);
 transform:translateX(4px);
}


.app-option:hover span,
.app-option.active span{
 border-color:#fff;
 color:var(--green);
 box-shadow:
   0 0 18px rgba(255,255,255,.1),
   0 0 20px rgba(24,255,193,.12);
}


.app-option:hover strong,
.app-option.active strong{
 color:#fff;
}


.app-panel-body{
 position:relative;
 z-index:1;
 min-height:560px;
 padding:34px;
 overflow:hidden;
}


.app-content{
 min-height:492px;
 display:grid;
 grid-template-columns:minmax(300px,480px) minmax(0,1fr);
 align-items:start;
 gap:34px;
 will-change:opacity, transform, filter;
}


.app-content.is-exiting{
 animation:appPanelOut .28s ease forwards;
}


.app-content.is-entering{
 animation:appPanelIn .52s var(--ease) forwards;
}


.app-video-frame{
 width:100%;
 aspect-ratio:16 / 10;
 position:relative;
 align-self:start;
 justify-self:start;
 border:1px solid rgba(255,255,255,.13);
 border-radius:18px;
 background:#030303;
 overflow:hidden;
 box-shadow:
   0 28px 70px rgba(0,0,0,.48),
   0 0 55px rgba(24,255,193,.08);
}


.app-video-frame::after{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
   linear-gradient(120deg, rgba(255,255,255,.16), transparent 26%),
   linear-gradient(to bottom, transparent 64%, rgba(0,0,0,.36));
 mix-blend-mode:screen;
 opacity:.45;
}


.app-video-frame video{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}


.app-copy{
 max-width:520px;
 padding-top:6px;
}


.app-kicker{
 color:var(--green);
 font-family:'JetBrains Mono',monospace;
 font-size:12px;
 font-weight:800;
 letter-spacing:.16em;
 text-transform:uppercase;
}


.app-copy h3{
 margin-top:12px;
 font-size:clamp(34px,4vw,58px);
 line-height:.94;
 letter-spacing:-.055em;
}


.app-copy p:not(.app-kicker){
 margin-top:18px;
 color:rgba(255,255,255,.72);
 font-size:17px;
 line-height:1.72;
}


.app-points{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-top:26px;
}


.app-points span{
 min-height:38px;
 display:inline-flex;
 align-items:center;
 padding:0 13px;
 border:1px solid rgba(24,255,193,.18);
 border-radius:999px;
 color:rgba(255,255,255,.82);
 background:rgba(24,255,193,.055);
 font-size:13px;
 font-weight:700;
}


/* STATS */


.stats{
 max-width:none;
 margin:0;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 border:0;
 border-radius:0;
 overflow:hidden;
 background:#000;
}


.stat{
 min-height:230px;
 padding:32px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 border-right:1px solid rgba(255,255,255,.28);
 background:
   radial-gradient(circle at 18% 18%, rgba(24,255,193,.08), transparent 38%),
   #000;
}


.stat:last-child{
 border-right:0;
}


.stat h3{
 font-size:clamp(46px,5vw,84px);
 line-height:.9;
 letter-spacing:-.07em;
}


.stat p{
 color:var(--muted);
}


.stat-checklist{
 display:grid;
 gap:9px;
 color:rgba(255,255,255,.74);
 font-size:13px;
 line-height:1.2;
 font-weight:700;
}


.stat-checklist span{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 opacity:.62;
 animation:statCheckFade 7.5s ease-in-out infinite;
}


.stat-checklist span:nth-child(2){
 animation-delay:.45s;
}


.stat-checklist span:first-child{
 animation:none;
 opacity:.62;
}


.stat-checklist span:nth-child(3){
 animation-delay:.9s;
}


.stat-checklist span:nth-child(4){
 animation-delay:1.35s;
}


.stat-checklist span:nth-child(5){
 animation-delay:1.8s;
}


.stat-checklist span::after{
 content:"✓";
 flex:0 0 auto;
 width:22px;
 height:22px;
 display:grid;
 place-items:center;
 border:1px solid rgba(255,255,255,.52);
 border-radius:50%;
 color:#fff;
 background:rgba(255,255,255,.035);
 box-shadow:
   inset 0 0 14px rgba(255,255,255,.05),
   0 0 18px rgba(24,255,193,.12);
 animation:statCheckGlow 7.5s ease-in-out infinite;
}


.stat-checklist span:nth-child(2)::after{
 animation-delay:.45s;
}


.stat-checklist span:first-child::after{
 content:"";
 border-color:transparent;
 background:transparent;
 box-shadow:none;
 animation:none;
}


.stat-checklist span:nth-child(3)::after{
 animation-delay:.9s;
}


.stat-checklist span:nth-child(4)::after{
 animation-delay:1.35s;
}


.stat-checklist span:nth-child(5)::after{
 animation-delay:1.8s;
}


/* CARDS */


.cards{
 max-width:1240px;
 margin:0 auto;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 perspective:1200px;
}


.card{
 position:relative;
 min-height:300px;
 padding:30px;
 border-radius:26px;
 background:#000;
 border:1px solid rgba(255,255,255,.32);
 overflow:hidden;
 box-shadow:
   0 24px 80px rgba(0,0,0,.42),
   inset 0 0 0 1px rgba(255,255,255,.04);
 transition:.25s ease;
}


.card::before{
 content:none;
}


.card:hover{
 transform:translateY(-8px);
}


.card span{
 color:var(--green);
 font-family:'JetBrains Mono',monospace;
 font-weight:900;
}


.card h3{
 font-size:28px;
 line-height:1;
 margin:72px 0 18px;
 letter-spacing:-.04em;
}


.card p{
 color:var(--muted);
 line-height:1.65;
}


/* SCANNER */


.scanner-card{
 width:min(1120px,100%);
 min-height:620px;
 margin:0 auto;
 border-radius:24px;
 background:#000;
 border:1px solid rgba(255,255,255,.12);
 padding:56px;
 position:relative;
 overflow:hidden;
 box-shadow:0 35px 120px rgba(0,0,0,.65);
 color:#fff;
}


.scanner-line{
 position:absolute;
 left:0;
 right:0;
 top:var(--scanner-top, -24%);
 opacity:var(--scanner-opacity, .2);
 height:150px;
 background:
   linear-gradient(to bottom, transparent, rgba(24,255,193,.34), transparent),
   linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
 filter:blur(1px);
 transition:top .08s linear, opacity .08s linear;
 z-index:1;
 pointer-events:none;
}


.scanner-card > *:not(.scanner-line){
 position:relative;
 z-index:2;
}


.scanner-heading{
 margin-bottom:0;
}


.scanner-headlines{
 min-height:190px;
 position:relative;
 color:#fff;
}


.scanner-headlines span{
 position:absolute;
 left:0;
 top:0;
 max-width:860px;
 opacity:0;
 transform:translateX(36px);
 animation:scannerHeadlineSwap 18s ease-in-out infinite;
}


.scanner-headlines span:nth-child(2){
 animation-delay:6s;
}


.scanner-headlines span:nth-child(3){
 animation-delay:12s;
}


.scan-list{
 display:grid;
 gap:14px;
 max-width:720px;
 margin-top:22px;
}


.scan-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 padding:20px 22px;
 border:1px solid rgba(255,255,255,.12);
 background:#070707;
 border-radius:12px;
 box-shadow:none;
 transition:
   border-color .35s ease,
   background .35s ease,
   box-shadow .35s ease;
 overflow:hidden;
 position:relative;
}


.scan-row::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(90deg, transparent, rgba(24,255,193,.16), transparent);
 opacity:0;
 transform:translateX(-100%);
}


.scan-row.upgraded{
 border-color:rgba(255,255,255,.12);
 background:#070707;
 box-shadow:none;
}


.scan-row.scan-hit::before{
 animation:scanRowFlash .8s ease-out;
}


.scan-row > *{
 position:relative;
 z-index:2;
}


.scan-list span{
 color:#fff;
 font-weight:800;
}


.scan-list b{
 min-width:128px;
 min-height:18px;
 display:grid;
 place-items:center end;
 font-size:12px;
 letter-spacing:.16em;
 font-family:'JetBrains Mono',monospace;
 text-transform:uppercase;
 position:relative;
}


.scan-list b i{
 grid-area:1/1;
 font-style:normal;
 transition:
   opacity .28s ease,
   transform .28s ease;
}


.scan-list b i:first-child{
 color:rgba(255,255,255,.5);
 opacity:1;
 transform:translateY(0);
}


.scan-list b i:last-child{
 color:var(--green);
 opacity:0;
 transform:translateY(10px);
 text-shadow:0 0 18px rgba(24,255,193,.3);
}


.scan-row.upgraded b i:first-child{
 opacity:0;
 transform:translateY(-10px);
}


.scan-row.upgraded b i:last-child{
 opacity:1;
 transform:translateY(0);
}


/* REPAIR */


.repair-demo{
 max-width:1200px;
 margin:0 auto;
 display:grid;
 grid-template-columns:1fr 180px 1fr;
 align-items:center;
 gap:20px;
}


.broken-site,
.premium-site{
 min-height:430px;
 border-radius:24px;
 border:1px solid rgba(255,255,255,.1);
 padding:0 0 58px;
 position:relative;
 overflow:hidden;
}


.broken-site{
 background:
   repeating-linear-gradient(0deg, rgba(255,61,129,.05) 0 10px, transparent 10px 22px),
   linear-gradient(145deg, rgba(80,49,54,.18), rgba(255,255,255,.025));
 filter:saturate(.7);
 animation:glitchBox 2.4s steps(2) infinite;
}


.premium-site{
 background:
   radial-gradient(circle at 26% 16%, rgba(24,255,193,.2), transparent 30%),
   radial-gradient(circle at 88% 74%, rgba(255,61,129,.16), transparent 35%),
   linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
 box-shadow:0 0 80px rgba(24,255,193,.16);
}


.repair-browser-top{
 height:42px;
 display:flex;
 align-items:center;
 gap:7px;
 padding:0 16px;
 border-bottom:1px solid rgba(255,255,255,.1);
 background:rgba(0,0,0,.72);
}


.repair-browser-top span{
 width:9px;
 height:9px;
 border-radius:50%;
 background:rgba(255,255,255,.34);
}


.repair-browser-top small{
 margin-left:8px;
 color:rgba(255,255,255,.5);
 font-family:'JetBrains Mono',monospace;
 font-size:11px;
 letter-spacing:0;
}


.broken-webpage,
.premium-webpage{
 position:relative;
 min-height:330px;
 margin:22px;
 border-radius:12px;
 overflow:hidden;
}


.broken-webpage{
 padding:18px;
 background:
   linear-gradient(90deg, rgba(255,61,129,.1), transparent 36%),
   rgba(255,255,255,.08);
 border:1px dashed rgba(255,255,255,.24);
}


.broken-nav{
 display:flex;
 align-items:center;
 gap:12px;
 min-height:44px;
 padding:0 14px;
 background:rgba(255,255,255,.12);
 color:rgba(255,255,255,.68);
}


.broken-nav b{
 margin-right:auto;
 color:#fff;
 font-size:17px;
 letter-spacing:.12em;
}


.broken-nav span{
 font-size:10px;
 text-transform:uppercase;
}


.broken-hero-block{
 width:86%;
 margin:22px 0 0 28px;
 padding:18px;
 border-radius:18px 4px 18px 4px;
 background:rgba(0,0,0,.36);
 transform:rotate(-1.5deg);
 box-shadow:0 18px 44px rgba(0,0,0,.22);
}


.broken-hero-block p{
 margin-bottom:10px;
 color:rgba(255,255,255,.45);
 font-size:10px;
 font-weight:900;
 letter-spacing:.16em;
 text-transform:uppercase;
}


.broken-hero-block h3{
 max-width:260px;
 color:#fff;
 font-size:34px;
 line-height:.92;
 letter-spacing:0;
}


.broken-hero-block button,
.premium-hero-block button,
.premium-nav button{
 border:0;
 cursor:pointer;
 font-weight:900;
}


.broken-hero-block button{
 margin-top:18px;
 padding:11px 16px;
 border-radius:999px;
 background:rgba(255,255,255,.16);
 color:#fff;
}


.broken-stack{
 display:grid;
 gap:11px;
 width:62%;
 margin:20px 0 0 auto;
}


.broken-stack span{
 height:18px;
 border-radius:999px;
 background:rgba(255,255,255,.15);
}


.broken-stack span:nth-child(2){
 width:76%;
 transform:translateX(-34px);
}


.broken-stack span:nth-child(3){
 width:54%;
 transform:translateX(18px);
}


.broken-callout{
 position:absolute;
 right:18px;
 top:92px;
 padding:14px 16px;
 border-radius:5px;
 background:rgba(255,61,129,.22);
 color:#fff;
 font-size:12px;
 font-weight:900;
 text-transform:uppercase;
 transform:rotate(6deg);
 animation:brokenNudge 1.8s steps(2) infinite;
}


.broken-error{
 position:absolute;
 left:22px;
 bottom:22px;
 padding:8px 10px;
 border:1px solid rgba(255,61,129,.28);
 color:rgba(255,255,255,.58);
 font-family:'JetBrains Mono',monospace;
 font-size:11px;
}


.premium-webpage{
 background:#f8f6f0;
 color:#15120f;
 border:1px solid rgba(255,255,255,.18);
 box-shadow:0 22px 70px rgba(0,0,0,.3);
}


.premium-nav{
 min-height:54px;
 display:grid;
 grid-template-columns:auto 1fr auto;
 align-items:center;
 gap:16px;
 padding:0 18px;
 background:#050505;
 color:#fff;
}


.premium-nav b{
 font-size:14px;
 font-weight:900;
 white-space:nowrap;
}


.premium-nav nav{
 display:flex;
 justify-content:center;
 gap:14px;
 color:rgba(255,255,255,.68);
 font-size:10px;
 font-weight:900;
 text-transform:uppercase;
}


.premium-nav button{
 padding:8px 12px;
 border-radius:999px;
 background:#fff;
 color:#060606;
 font-size:10px;
}


.premium-hero-block{
 position:relative;
 display:grid;
 grid-template-columns:1fr 128px;
 gap:18px;
 min-height:166px;
 margin:18px;
 padding:22px;
 border-radius:8px;
 background:
   linear-gradient(135deg, rgba(19,87,63,.92), rgba(40,48,42,.78) 50%, rgba(79,35,51,.82)),
   url("assets/codepreme-email-hero.jpg") center/cover;
 color:#fff;
 overflow:hidden;
}


.premium-hero-block::before{
 content:"";
 position:absolute;
 inset:0;
 background:
   radial-gradient(circle at 86% 18%, rgba(24,255,193,.32), transparent 34%),
   linear-gradient(90deg, rgba(0,0,0,.4), transparent 58%);
}


.premium-hero-block > *{
 position:relative;
 z-index:1;
}


.premium-hero-block p{
 margin-bottom:8px;
 color:rgba(255,255,255,.74);
 font-size:10px;
 font-weight:900;
 letter-spacing:.14em;
 text-transform:uppercase;
}


.premium-hero-block h3{
 max-width:300px;
 font-family:Georgia,'Times New Roman',serif;
 font-size:31px;
 line-height:1;
 letter-spacing:0;
}


.premium-slogan{
 position:relative;
 min-height:64px;
}


.premium-slogan span{
 position:absolute;
 inset:0;
 display:block;
 opacity:0;
 transform:translateY(12px);
 animation:premiumSloganSwap 12s ease-in-out infinite;
}


.premium-slogan span:nth-child(2){
 animation-delay:4s;
}


.premium-slogan span:nth-child(3){
 animation-delay:8s;
}


.premium-hero-block button{
 margin-top:18px;
 padding:10px 14px;
 border-radius:999px;
 background:#fff;
 color:#15120f;
 font-size:11px;
}


.premium-hero-block aside{
 align-self:end;
 padding:14px;
 border-radius:7px;
 background:rgba(255,255,255,.9);
 color:#15120f;
 box-shadow:0 16px 30px rgba(0,0,0,.2);
 animation:premiumWidgetFloat 5.5s ease-in-out infinite;
}


.premium-hero-block aside span{
 display:block;
 margin-bottom:8px;
 color:rgba(0,0,0,.5);
 font-size:10px;
 font-weight:900;
 text-transform:uppercase;
}


.premium-hero-block aside b{
 display:block;
 font-size:30px;
 line-height:1;
}


.premium-hero-block aside i{
 display:block;
 height:7px;
 margin-top:12px;
 border-radius:999px;
 background:linear-gradient(90deg,var(--green),var(--cyan));
 animation:premiumMeter 3.6s ease-in-out infinite;
}


.premium-content-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
 margin:0 18px;
}


.premium-content-grid article{
 min-height:74px;
 padding:13px;
 border-radius:7px;
 background:#fff;
 box-shadow:0 12px 26px rgba(38,29,21,.08);
}


.premium-content-grid span{
 display:block;
 margin-bottom:14px;
 color:#0fb98f;
 font-family:'JetBrains Mono',monospace;
 font-size:11px;
 font-weight:900;
}


.premium-content-grid b{
 color:#15120f;
 font-size:13px;
 line-height:1.15;
}


.premium-signal{
 display:flex;
 align-items:end;
 gap:7px;
 margin:16px 18px 0;
 color:#1f2a25;
 font-size:11px;
 font-weight:900;
 text-transform:uppercase;
}


.premium-signal span{
 width:8px;
 border-radius:999px;
 background:linear-gradient(180deg,var(--cyan),var(--green));
 animation:signalLift 1.6s ease-in-out infinite;
}


.premium-signal span:nth-child(1){
 height:16px;
}


.premium-signal span:nth-child(2){
 height:28px;
 animation-delay:.18s;
}


.premium-signal span:nth-child(3){
 height:21px;
 animation-delay:.36s;
}


.repair-status{
 position:absolute;
 bottom:24px;
 left:28px;
 color:rgba(255,255,255,.52);
 font-family:'JetBrains Mono',monospace;
 font-size:13px;
}


.repair-beam{
 height:3px;
 background:rgba(255,255,255,.1);
 position:relative;
}


.repair-beam span{
 position:absolute;
 inset:-25px 0;
 background:linear-gradient(90deg, transparent, rgba(24,255,193,.45), transparent);
 animation:beamPulse 2.2s ease-in-out infinite;
}


/* TIMELINE */


.timeline{
 max-width:1160px;
 margin:0 auto;
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:18px;
 position:relative;
 padding-top:70px;
}


.timeline-line{
 position:absolute;
 left:0;
 right:0;
 top:24px;
 height:2px;
 background:rgba(255,255,255,.1);
}


.timeline-line span{
 display:block;
 width:0%;
 height:100%;
 background:linear-gradient(90deg,var(--green),var(--cyan),var(--pink));
 box-shadow:0 0 25px rgba(24,255,193,.45);
}


.step{
 padding:26px;
 min-height:260px;
 border-radius:22px;
 background:
   radial-gradient(circle at 18% 12%, rgba(24,255,193,.07), transparent 34%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 position:relative;
 box-shadow:
   0 22px 70px rgba(0,0,0,.4),
   inset 0 0 0 1px rgba(255,255,255,.035);
}


.step::before{
 content:"";
 position:absolute;
 top:-54px;
 left:28px;
 width:18px;
 height:18px;
 border-radius:50%;
 background:#000;
 border:2px solid var(--green);
 box-shadow:0 0 24px rgba(24,255,193,.45);
}


.step b{
 color:var(--green);
 font-family:'JetBrains Mono',monospace;
}


.step h3{
 font-size:24px;
 margin:50px 0 14px;
}


.step p{
 color:var(--muted);
 line-height:1.6;
}


/* RINGS */


.rings-grid{
 max-width:1420px;
 margin:0 auto;
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:16px;
}


.ring-card{
 text-align:center;
 border-radius:26px;
 padding:28px 22px;
 background:
   radial-gradient(circle at 50% 16%, rgba(24,255,193,.07), transparent 40%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 box-shadow:
   0 22px 70px rgba(0,0,0,.4),
   inset 0 0 0 1px rgba(255,255,255,.035);
}


.power-symbol{
 width:150px;
 height:150px;
 display:block;
 margin:0 auto;
 overflow:visible;
 fill:none;
 stroke:var(--green);
 stroke-width:5.5;
 stroke-linecap:round;
 stroke-linejoin:round;
 filter:
   drop-shadow(0 0 10px rgba(24,255,193,.6))
   drop-shadow(0 18px 40px rgba(0,0,0,.4));
}


.power-symbol .symbol-glow{
 stroke:rgba(24,255,193,.18);
 stroke-width:11;
 filter:drop-shadow(0 0 20px rgba(24,255,193,.72));
}


.symbol-improve{
 stroke:rgba(67,255,215,.98);
}


.symbol-manage{
 stroke:rgba(24,255,193,.95);
}


.symbol-analyze{
 stroke:rgba(111,255,235,.98);
}


.symbol-optimize{
 stroke:rgba(24,255,193,.95);
}


.symbol-analyze circle:not(.symbol-glow){
 stroke-width:5.5;
}


.ring-card h3{
 font-size:clamp(26px,2.25vw,36px);
 line-height:1;
 letter-spacing:-.04em;
 margin-top:14px;
}


.ring-card p{
 color:var(--muted);
 max-width:230px;
 margin:12px auto 0;
 line-height:1.55;
 font-size:15px;
}


/* DASHBOARD */


.dashboard{
 max-width:1200px;
 margin:0 auto;
 padding:40px;
 border-radius:32px;
 background:
   radial-gradient(circle at 18% 14%, rgba(24,255,193,.12), transparent 30%),
   radial-gradient(circle at 84% 18%, rgba(24,255,193,.07), transparent 34%),
   linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%),
   #000;
 border:1px solid rgba(24,255,193,.14);
 box-shadow:
   0 35px 120px rgba(0,0,0,.78),
   inset 0 0 0 1px rgba(255,255,255,.035),
   inset 0 0 80px rgba(24,255,193,.035);
}


.dashboard-top{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:20px;
 margin-bottom:32px;
}


.dashboard h2{
 font-size:clamp(38px,5vw,72px);
 letter-spacing:-.06em;
}


.live{
 display:inline-flex;
 align-items:center;
 gap:8px;
 border:1px solid rgba(24,255,193,.24);
 background:rgba(24,255,193,.07);
 padding:10px 14px;
 border-radius:999px;
 color:var(--green);
 font-family:'JetBrains Mono',monospace;
 font-size:12px;
 font-weight:900;
}


.live i{
 width:8px;
 height:8px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 14px var(--green);
}


.dashboard-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:16px;
}


.dash-card{
 min-height:210px;
 padding:24px;
 border-radius:22px;
 background:
   radial-gradient(circle at 18% 12%, rgba(24,255,193,.08), transparent 34%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 box-shadow:
   0 22px 54px rgba(0,0,0,.42),
   inset 0 0 0 1px rgba(255,255,255,.035);
}


.dash-card span{
 color:rgba(255,255,255,.55);
 font-size:13px;
 text-transform:uppercase;
 letter-spacing:.08em;
}


.dash-card strong{
 display:block;
 margin:54px 0 12px;
 font-size:34px;
}


.dash-card p{
 color:var(--muted);
}


.heartbeat{
 margin-top:24px;
 min-height:124px;
 padding:28px 30px;
 border-radius:22px;
 background:
   radial-gradient(circle at 50% 0%, rgba(24,255,193,.08), transparent 46%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 box-shadow:
   inset 0 0 0 1px rgba(255,255,255,.035),
   0 22px 60px rgba(0,0,0,.5);
 position:relative;
 overflow:hidden;
 display:grid;
 align-items:center;
 justify-content:center;
}


.heartbeat::before{
 content:"";
 position:absolute;
 left:30px;
 right:30px;
 bottom:28px;
 height:18px;
 border-radius:999px;
 padding:1px;
 background:linear-gradient(90deg,var(--green),var(--cyan),var(--pink),#fff,var(--green));
 background-size:240% 100%;
 box-shadow:
   0 0 22px rgba(24,255,193,.35),
   0 0 44px rgba(0,255,255,.12);
 animation:
   dashboardBarHue 5s linear infinite,
   dashboardBarFlow 3.8s linear infinite;
 filter:saturate(1.22);
}


.heartbeat::after{
 content:"";
 position:absolute;
 left:34px;
 right:34px;
 bottom:32px;
 height:10px;
 border-radius:999px;
 background:
   linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent),
   linear-gradient(90deg,var(--green),var(--cyan),var(--pink),#fff,var(--green));
 background-size:34% 100%, 220% 100%;
 box-shadow:
   0 0 18px rgba(24,255,193,.52),
   inset 0 0 8px rgba(255,255,255,.42);
 transform-origin:left;
 animation:
   dashboardLoad 3.8s var(--ease) infinite,
   dashboardBarFlow 3.8s linear infinite,
   buttonHue 7s linear infinite;
}


.heartbeat p{
 position:relative;
 z-index:2;
 color:rgba(255,255,255,.78);
 font-weight:800;
 transform:translateY(-14px);
 text-align:center;
}


/* EQUATION */


.equation-row{
 max-width:1180px;
 margin:0 auto;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:18px;
 flex-wrap:wrap;
}


.equation-row span,
.equation-row b{
 min-width:150px;
 text-align:center;
 padding:24px 26px;
 border-radius:20px;
 background:#000;
 border:1px solid rgba(255,255,255,.32);
 font-size:20px;
 box-shadow:
   0 20px 60px rgba(0,0,0,.4),
   inset 0 0 0 1px rgba(255,255,255,.035);
}


.equation-row b{
 color:#000;
 border-color:rgba(255,255,255,.54);
 background:linear-gradient(135deg,#fff,var(--green),var(--cyan));
}


.equation-row i{
 color:var(--green);
 font-size:32px;
 font-style:normal;
}


/* UNIVERSE */


.universe{
 width:min(680px,100%);
 aspect-ratio:1;
 margin:0 auto;
 position:relative;
 display:grid;
 place-items:center;
 border-radius:50%;
 background:radial-gradient(circle, rgba(24,255,193,.08), transparent 65%);
}


.sun{
 width:188px;
 height:170px;
 border-radius:0;
 display:grid;
 place-items:center;
 background:transparent;
 --logo-filter:drop-shadow(0 0 60px rgba(24,255,193,.42));
 filter:var(--logo-filter);
 animation:siteLogoHue 10s linear infinite;
 z-index:3;
}


.sun img{
 width:100%;
 height:100%;
 object-fit:contain;
}


.universe span{
 position:absolute;
 left:50%;
 top:50%;
 width:var(--planet-size, 68px);
 height:var(--planet-size, 68px);
 margin:calc(var(--planet-size, 68px) / -2);
 display:grid;
 place-items:center;
 border-radius:50%;
 background:#071716;
 border:1px solid rgba(255,255,255,.22);
 color:#fff;
 font-size:var(--planet-font, 11px);
 font-weight:900;
 letter-spacing:.02em;
 text-shadow:
   0 1px 4px rgba(0,0,0,.95),
   0 0 12px rgba(255,255,255,.32);
 box-shadow:
   inset calc(var(--planet-size, 68px) * -.18) calc(var(--planet-size, 68px) * -.18) calc(var(--planet-size, 68px) * .36) rgba(0,0,0,.78),
   inset calc(var(--planet-size, 68px) * .12) calc(var(--planet-size, 68px) * .1) calc(var(--planet-size, 68px) * .24) rgba(255,255,255,.16),
   0 0 28px var(--planet-glow),
   0 24px 70px rgba(0,0,0,.42);
 animation:orbitPlanet var(--s) linear infinite;
 isolation:isolate;
 overflow:visible;
}


.universe span::before{
 content:"";
 position:absolute;
 inset:-18%;
 z-index:-1;
 border-radius:50%;
 overflow:hidden;
 background:
   var(--planet-surface),
   radial-gradient(circle at 28% 22%, rgba(255,255,255,.56), transparent 0 16%, transparent 32%),
   radial-gradient(circle at 72% 78%, rgba(0,0,0,.66), transparent 0 48%, transparent 70%);
 opacity:.88;
 animation:planetSelfSpin var(--spin, 9s) linear infinite;
 pointer-events:none;
}


.universe span::after{
 content:"";
 position:absolute;
 inset:calc(var(--planet-size, 68px) * .14);
 z-index:-1;
 border-radius:50%;
 border:1px solid rgba(255,255,255,.18);
 opacity:.48;
 pointer-events:none;
}


.universe span b{
 position:relative;
 z-index:2;
 font:inherit;
}


.universe span:nth-of-type(1){
 --planet-size:62px;
 --planet-font:10px;
 --spin:8s;
 --planet-glow:rgba(24,255,193,.32);
 --planet-surface:
   radial-gradient(circle at 28% 24%, rgba(255,255,255,.72), transparent 0 12%, transparent 26%),
   radial-gradient(circle at 36% 48%, rgba(47,219,122,.92), transparent 0 16%, transparent 29%),
   radial-gradient(circle at 70% 58%, rgba(20,112,73,.9), transparent 0 17%, transparent 31%),
   radial-gradient(circle at 48% 70%, rgba(178,237,204,.58), transparent 0 9%, transparent 21%),
   repeating-linear-gradient(16deg, rgba(255,255,255,.18) 0 3px, transparent 3px 14px),
   linear-gradient(135deg, #0d463f, #21a56d 38%, #0d2f44 72%, #061216);
}


.universe span:nth-of-type(2){
 --planet-size:74px;
 --planet-font:11px;
 --spin:10s;
 --planet-glow:rgba(0,255,255,.3);
 --planet-surface:
   radial-gradient(circle at 26% 22%, rgba(255,255,255,.66), transparent 0 13%, transparent 28%),
   radial-gradient(circle at 30% 62%, rgba(72,226,255,.84), transparent 0 18%, transparent 32%),
   radial-gradient(circle at 74% 44%, rgba(15,99,176,.88), transparent 0 20%, transparent 36%),
   repeating-linear-gradient(-22deg, rgba(229,255,255,.18) 0 3px, transparent 3px 12px),
   linear-gradient(135deg, #082743, #17afd4 42%, #0a3768 76%, #03121e);
}


.universe span:nth-of-type(3){
 --planet-size:58px;
 --planet-font:10px;
 --spin:7s;
 --planet-glow:rgba(255,61,129,.3);
 --planet-surface:
   radial-gradient(circle at 26% 22%, rgba(255,231,204,.58), transparent 0 11%, transparent 26%),
   radial-gradient(circle at 62% 50%, rgba(255,84,95,.84), transparent 0 18%, transparent 35%),
   radial-gradient(circle at 34% 72%, rgba(113,38,94,.9), transparent 0 16%, transparent 32%),
   repeating-linear-gradient(12deg, rgba(255,226,167,.16) 0 4px, transparent 4px 15px),
   linear-gradient(135deg, #351249, #a72165 44%, #ff7247 72%, #241120);
}


.universe span:nth-of-type(4){
 --planet-size:64px;
 --planet-font:10px;
 --spin:11s;
 --planet-glow:rgba(188,113,255,.38);
 --planet-surface:
   radial-gradient(circle at 28% 22%, rgba(255,255,255,.68), transparent 0 11%, transparent 26%),
   repeating-linear-gradient(8deg, rgba(255,255,255,.2) 0 4px, rgba(184,101,255,.22) 4px 11px, transparent 11px 18px),
   linear-gradient(135deg, #1c124f, #7c3cff 34%, #c59cff 51%, #4f1da1 72%, #100725);
}


.universe span:nth-of-type(4)::after{
 inset:auto;
 left:50%;
 top:50%;
 width:190%;
 height:64%;
 box-sizing:border-box;
 z-index:-2;
 border:3px solid rgba(235,217,255,.96);
 border-left-color:rgba(235,217,255,.62);
 border-right-color:rgba(235,217,255,.62);
 transform:translate(-50%, -50%) rotate(-18deg);
 box-shadow:
   0 0 10px rgba(255,255,255,.42),
   0 0 24px rgba(188,113,255,.68);
 -webkit-mask:radial-gradient(
   circle at center,
   transparent 0 calc(var(--planet-size, 68px) * .96),
   #000 calc(var(--planet-size, 68px) * .96 + 1px)
 );
 mask:radial-gradient(
   circle at center,
   transparent 0 calc(var(--planet-size, 68px) * .96),
   #000 calc(var(--planet-size, 68px) * .96 + 1px)
 );
}


.universe::before,
.universe::after{
 content:"";
 position:absolute;
 border:1px solid rgba(255,255,255,.08);
 border-radius:50%;
}


.universe::before{
 inset:120px;
}


.universe::after{
 inset:60px;
}


/* COUNTDOWN */


.countdown{
 max-width:980px;
 margin:0 auto;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:18px;
}


.countdown div{
 padding:34px 20px;
 border-radius:24px;
 background:
   radial-gradient(circle at 50% 10%, rgba(24,255,193,.07), transparent 42%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 text-align:center;
 overflow:hidden;
 position:relative;
 box-shadow:
   0 22px 70px rgba(0,0,0,.42),
   inset 0 0 0 1px rgba(255,255,255,.035);
}


.countdown div::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
 transform:translateX(-120%);
 animation:shine 5s linear infinite;
}


.countdown b{
 display:block;
 font-size:clamp(42px,6vw,82px);
 letter-spacing:-.07em;
 position:relative;
}


.countdown span{
 color:var(--muted);
 text-transform:uppercase;
 letter-spacing:.14em;
 font-size:12px;
 position:relative;
}


/* WAITLIST */


.waitlist-card{
 width:min(980px,100%);
 margin:0 auto;
 border-radius:32px;
 padding:58px;
 position:relative;
 overflow:hidden;
 background:
   radial-gradient(circle at 18% 14%, rgba(24,255,193,.1), transparent 36%),
   radial-gradient(circle at 86% 76%, rgba(255,61,129,.07), transparent 38%),
   #000;
 border:1px solid rgba(255,255,255,.32);
 box-shadow:
   0 30px 120px rgba(0,0,0,.72),
   inset 0 0 0 1px rgba(255,255,255,.035),
   inset 0 0 90px rgba(24,255,193,.045);
 text-align:center;
}


.waitlist-card::before{
 content:"";
 position:absolute;
 inset:0;
 background:
   linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
   linear-gradient(120deg, transparent 36%, rgba(255,255,255,.055), transparent 64%);
 background-size:52px 52px,52px 52px,100% 100%;
 opacity:.44;
 pointer-events:none;
}


.waitlist-card::after{
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 background:linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%, rgba(24,255,193,.045));
 pointer-events:none;
}


.waitlist-card > *{
 position:relative;
 z-index:1;
}


.waitlist-heading{
 margin-bottom:20px;
}


.waitlist-form{
 display:flex;
 justify-content:center;
 margin-top:30px;
}


.waitlist-form input{
 width:100%;
 height:56px;
 border-radius:999px;
 padding:0 20px;
 border:1px solid rgba(255,255,255,.12);
 background:rgba(0,0,0,.5);
 color:#fff;
 outline:none;
}


.waitlist-form input:focus{
 border-color:rgba(24,255,193,.6);
 box-shadow:0 0 0 4px rgba(24,255,193,.08);
}


.form-message{
 min-height:24px;
 margin-top:20px;
 color:var(--green);
 font-weight:800;
}


/* EARLY ACCESS MODAL */


body.modal-open{
 overflow:hidden;
}


.early-modal{
 position:fixed;
 inset:0;
 z-index:3000;
 display:grid;
 place-items:center;
 padding:24px;
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transition:opacity .25s ease, visibility .25s ease;
}


.early-modal.open{
 opacity:1;
 visibility:visible;
 pointer-events:auto;
}


.early-modal-backdrop{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.72);
 backdrop-filter:blur(14px);
}


.early-modal-panel{
 position:relative;
 z-index:2;
 width:min(720px,100%);
 max-height:min(840px,calc(100vh - 48px));
 overflow:auto;
 border-radius:24px;
 padding:34px;
 background:
   radial-gradient(circle at 16% 10%, rgba(24,255,193,.18), transparent 34%),
   radial-gradient(circle at 90% 18%, rgba(255,61,129,.13), transparent 32%),
   rgba(0,0,0,.9);
 border:1px solid rgba(255,255,255,.12);
 box-shadow:0 35px 120px rgba(0,0,0,.8);
}


.early-modal-panel h2{
 max-width:560px;
 margin:10px 0 14px;
 font-size:clamp(30px,4vw,48px);
 line-height:1;
 letter-spacing:-.04em;
}


.early-modal-note{
 max-width:620px;
 margin:0 0 24px;
 color:rgba(255,255,255,.72);
 font-size:15px;
 line-height:1.6;
}


.modal-close{
 position:absolute;
 top:18px;
 right:18px;
 width:42px;
 height:42px;
 border:1px solid rgba(255,255,255,.12);
 border-radius:50%;
 background:rgba(255,255,255,.06);
 color:#fff;
 font-size:28px;
 line-height:1;
 cursor:pointer;
}


.early-form{
 display:grid;
 gap:16px;
}


.field-pair{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:14px;
}


.early-form label{
 display:grid;
 gap:8px;
 color:rgba(255,255,255,.78);
 font-size:13px;
 font-weight:800;
 letter-spacing:.04em;
}


.early-form small{
 color:var(--dim);
 font-size:11px;
 font-weight:700;
}


.early-form input,
.early-form textarea{
 width:100%;
 border:1px solid rgba(255,255,255,.12);
 border-radius:16px;
 background:rgba(255,255,255,.055);
 color:#fff;
 outline:none;
 padding:15px 16px;
 resize:vertical;
}


.early-form input{
 height:52px;
}


.early-form textarea{
 min-height:136px;
 line-height:1.55;
}


.early-form input:focus,
.early-form textarea:focus{
 border-color:rgba(24,255,193,.62);
 box-shadow:0 0 0 4px rgba(24,255,193,.08);
}


.early-form .btn{
 margin-top:4px;
 border:0;
 cursor:pointer;
}


.early-form .btn:disabled{
 opacity:.6;
 cursor:not-allowed;
 transform:none;
}


/* FOOTER */


.footer{
 position:relative;
 z-index:5;
 background:#000;
 color:#bdbdbd;
 padding:120px 80px 45px;
 border-top:1px solid rgba(255,255,255,.06);
 overflow:hidden;
}


.footer::before{
 content:"";
 position:absolute;
 top:0;
 left:-120%;
 width:220%;
 height:100%;
 background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.03) 50%, transparent 60%);
 animation:footerShimmer 14s linear infinite;
}


.footer-grid{
 max-width:1500px;
 margin:auto;
 display:grid;
 grid-template-columns:1.8fr 1fr 1fr 1fr;
 gap:70px;
 position:relative;
 z-index:2;
}


.footer-logo{
 width:118px;
 height:102px;
 border-radius:0;
 display:grid;
 place-items:center;
 background:transparent;
 box-shadow:none;
 --logo-filter:drop-shadow(0 0 28px rgba(24,255,193,.34));
 filter:var(--logo-filter);
 animation:siteLogoHue 10s linear infinite;
 overflow:visible;
}


.footer-logo img{
 width:100%;
 height:100%;
 display:block;
 object-fit:contain;
}


.footer-brand h2{
 color:#fff;
 font-weight:600;
 font-size:34px;
 line-height:1.15;
 margin-top:20px;
 max-width:340px;
}


.footer-col{
 display:flex;
 flex-direction:column;
 gap:11px;
}


.footer-col h4{
 color:#fff;
 font-size:13px;
 text-transform:uppercase;
 letter-spacing:.08em;
 margin-bottom:10px;
}


.footer-col a{
 color:#bdbdbd;
 font-size:14px;
}


.footer-col a:hover{
 color:#fff;
}


.footer-bottom{
 max-width:1500px;
 margin:90px auto 0;
 padding-top:30px;
 border-top:1px solid rgba(255,255,255,.08);
 color:#777;
 font-size:13px;
 position:relative;
 z-index:2;
}


/* ANIMATIONS */


@keyframes gridMove{
 to{
   transform:translate(72px,72px);
 }
}


@keyframes aurora{
 to{
   transform:translate(2%,2%) scale(1.08);
 }
}


@keyframes shine{
 to{
   transform:translateX(120%);
 }
}


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


@keyframes load{
 from{
   transform:scaleX(0);
 }
 to{
   transform:scaleX(1);
 }
}


@keyframes pulse{
 50%{
   transform:scale(1.12);
   opacity:1;
 }
}


@keyframes navbarShimmer{
 from{
   transform:translateX(-140%) skewX(-18deg);
 }
 to{
   transform:translateX(380%) skewX(-18deg);
 }
}


@keyframes logoHue{
 to{
   filter:hue-rotate(360deg) brightness(1.15) contrast(1.15);
 }
}


@keyframes siteLogoHue{
 from{
   filter:var(--logo-filter) hue-rotate(0deg);
 }
 to{
   filter:var(--logo-filter) hue-rotate(360deg);
 }
}


@keyframes buttonHue{
 to{
   filter:hue-rotate(360deg);
 }
}


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


@keyframes floatCard{
 0%,100%{
   transform:perspective(900px) rotateY(-10deg) rotateX(7deg) translateY(0) scale(var(--browser-scale, 1));
 }
 50%{
   transform:perspective(900px) rotateY(-6deg) rotateX(5deg) translateY(-18px) scale(var(--browser-scale, 1));
 }
}


@keyframes scanDown{
 0%,100%{
   transform:translateY(-120px);
   opacity:0;
 }
 18%,78%{
   opacity:1;
 }
 50%{
   transform:translateY(360px);
 }
}


@keyframes miniSlideSwap{
 0%,10%{
   opacity:0;
   transform:translateX(24px);
 }
 18%,47%{
   opacity:1;
   transform:translateX(0);
 }
 55%,100%{
   opacity:0;
   transform:translateX(-24px);
 }
}


@keyframes miniTyping{
 0%,14%{
   transform:scaleX(1);
 }
 48%,70%{
   transform:scaleX(0);
 }
 100%{
   transform:scaleX(1);
 }
}


@keyframes miniPhotoFloat{
 0%,100%{
   transform:translateY(0) scale(1);
 }
 50%{
   transform:translateY(-8px) scale(1.015);
 }
}


@keyframes miniWidgetIn{
 0%,14%,100%{
   opacity:0;
   transform:translateY(12px);
 }
 24%,78%{
   opacity:1;
   transform:translateY(0);
 }
}


@keyframes miniToastPop{
 0%,38%,100%{
   opacity:0;
   transform:translateY(12px) scale(.96);
 }
 48%,82%{
   opacity:1;
   transform:translateY(0) scale(1);
 }
}


@keyframes miniTicker{
 0%,25%{
   transform:translateX(0);
 }
 55%,100%{
   transform:translateX(-18px);
 }
}


@keyframes floatingBadge{
 0%,100%{
   transform:translate3d(0,0,0) rotate(0deg);
   opacity:.14;
 }
 50%{
   transform:translate3d(16px,-26px,0) rotate(8deg);
   opacity:.32;
 }
}


@keyframes appPanelOut{
 to{
   opacity:0;
   transform:translateX(34px);
   filter:blur(10px);
 }
}


@keyframes appPanelIn{
 from{
   opacity:0;
   transform:translateX(-28px);
   filter:blur(10px);
 }

 to{
   opacity:1;
   transform:translateX(0);
   filter:blur(0);
 }
}


@keyframes borderFlow{
 to{
   filter:hue-rotate(360deg);
 }
}


@keyframes scanCard{
 0%,100%{
   top:-24%;
   opacity:.2;
 }
 50%{
   top:96%;
   opacity:1;
 }
}


@keyframes statCheckFade{
 0%,100%{
   opacity:.54;
   transform:translateX(0);
 }
 45%,70%{
   opacity:1;
   transform:translateX(2px);
 }
}


@keyframes statCheckGlow{
 0%,100%{
   color:#fff;
   border-color:rgba(255,255,255,.5);
   box-shadow:
     inset 0 0 14px rgba(255,255,255,.05),
     0 0 14px rgba(255,255,255,.06);
 }
 45%,70%{
   color:var(--green);
   border-color:rgba(24,255,193,.76);
   box-shadow:
     inset 0 0 16px rgba(24,255,193,.08),
     0 0 22px rgba(24,255,193,.28);
 }
}


@keyframes scannerHeadlineSwap{
 0%,8%{
   opacity:0;
   transform:translateX(36px);
 }
 16%,42%{
   opacity:1;
   transform:translateX(0);
 }
 50%,100%{
   opacity:0;
   transform:translateX(-36px);
 }
}


@keyframes scanRowPulse{
 0%,17%,100%{
   background:#070707;
 }
 23%,72%{
   background:#070707;
 }
}


@keyframes scanRowFlash{
 0%,17%,100%{
   opacity:0;
   transform:translateX(-100%);
 }
 21%{
   opacity:1;
 }
 35%,72%{
   opacity:.24;
   transform:translateX(100%);
 }
}


@keyframes statusBefore{
 0%,20%,100%{
   opacity:1;
   transform:translateY(0);
 }
 26%,82%{
   opacity:0;
   transform:translateY(-10px);
 }
}


@keyframes statusAfter{
 0%,20%,100%{
   opacity:0;
   transform:translateY(10px);
 }
 26%,82%{
   opacity:1;
   transform:translateY(0);
 }
}


@keyframes glitchBox{
 0%,100%{
   transform:translate(0);
   filter:hue-rotate(0deg);
 }
 20%{
   transform:translate(-2px,1px);
 }
 40%{
   transform:translate(2px,-1px);
   filter:hue-rotate(35deg);
 }
 60%{
   transform:translate(-1px,2px);
 }
}


@keyframes brokenNudge{
 0%,100%{
   transform:translate(0,0) rotate(6deg);
 }
 50%{
   transform:translate(-4px,3px) rotate(3deg);
 }
}


@keyframes premiumWidgetFloat{
 0%,100%{
   transform:translateY(0);
 }
 50%{
   transform:translateY(-7px);
 }
}


@keyframes premiumSloganSwap{
 0%,8%{
   opacity:0;
   transform:translateY(12px);
   filter:blur(5px);
 }
 14%,30%{
   opacity:1;
   transform:translateY(0);
   filter:blur(0);
 }
 36%,100%{
   opacity:0;
   transform:translateY(-12px);
   filter:blur(5px);
 }
}


@keyframes premiumMeter{
 0%,100%{
   transform:scaleX(.42);
   transform-origin:left;
 }
 50%{
   transform:scaleX(1);
   transform-origin:left;
 }
}


@keyframes signalLift{
 0%,100%{
   transform:scaleY(.72);
   opacity:.7;
 }
 50%{
   transform:scaleY(1.18);
   opacity:1;
 }
}


@keyframes beamPulse{
 0%,100%{
   opacity:.3;
   transform:scaleX(.8);
 }
 50%{
   opacity:1;
   transform:scaleX(1.15);
 }
}


@keyframes heartbeat{
 from{
   transform:translateX(-48%);
 }
 to{
   transform:translateX(0);
 }
}


@keyframes dashboardLoad{
 0%,100%{
   transform:scaleX(.18);
   opacity:.8;
 }

 48%{
   transform:scaleX(1);
   opacity:1;
 }

 70%{
   transform:scaleX(.74);
   opacity:.94;
 }
}


@keyframes dashboardBarFlow{
 to{
   background-position:240% 0;
 }
}


@keyframes dashboardBarHue{
 to{
   filter:hue-rotate(360deg) saturate(1.22);
 }
}


@keyframes orbitPlanet{
 from{
   transform:rotate(0deg) translateX(var(--r)) rotate(0deg);
 }
 to{
   transform:rotate(360deg) translateX(var(--r)) rotate(-360deg);
 }
}


@keyframes planetSelfSpin{
 from{
   transform:rotate(0deg) scale(1.16);
 }
 to{
   transform:rotate(360deg) scale(1.16);
 }
}


@keyframes footerShimmer{
 to{
   transform:translateX(40%);
 }
}


@keyframes blink{
 50%{
   opacity:0;
 }
}


/* RESPONSIVE */


@media(max-width:1120px){
 .hero{
   display:block;
   padding-left:40px;
   padding-right:40px;
   padding-top:120px;
 }


 .hero-copy{
   width:100%;
   max-width:820px;
   margin-left:0;
   margin-right:auto;
 }


 .hero-visual{
   position:relative;
   right:auto;
   top:auto;
   transform:none;
   width:100%;
   min-height:auto;
   margin-top:52px;
   opacity:.72;
   place-items:start;
   pointer-events:auto;
 }


 .browser{
   --browser-scale:1;
   width:min(640px,100%);
 }


 .cards,
 .dashboard-grid{
   grid-template-columns:repeat(2,1fr);
 }


 .stats,
 .countdown,
 .rings-grid{
   grid-template-columns:repeat(2,1fr);
 }


 .app-panel{
   grid-template-columns:240px minmax(0,1fr);
 }


 .app-content{
   grid-template-columns:1fr;
 }


 .app-video-frame{
   max-width:520px;
 }


 .timeline{
   grid-template-columns:1fr;
   padding-top:0;
 }


 .timeline-line,
 .step::before{
   display:none;
 }


 .repair-demo{
   grid-template-columns:1fr;
 }


 .repair-beam{
   height:80px;
   width:3px;
   margin:0 auto;
 }


 .repair-beam span{
   inset:0 -25px;
 }


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


@media(max-width:900px){
 .navbar{
   width:calc(100% - 32px);
   margin:16px;
   padding:14px 16px;
   border-radius:18px;
 }


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


 .mobile-toggle{
   display:block;
 }


 .mobile-menu{
   position:fixed;
   top:94px;
   left:16px;
   right:16px;
   z-index:999;
   display:grid;
   gap:10px;
   padding:18px;
   border-radius:20px;
   background:rgba(0,0,0,.9);
   border:1px solid rgba(255,255,255,.1);
   backdrop-filter:blur(16px);
   transform:translateY(-12px);
   opacity:0;
   visibility:hidden;
   transition:.3s ease;
 }


 .mobile-menu.active{
   opacity:1;
   visibility:visible;
   transform:translateY(0);
 }


.mobile-menu a{
   padding:16px;
   border-radius:14px;
   background:rgba(255,255,255,.04);
   color:rgba(255,255,255,.8);
   font-weight:800;
   letter-spacing:.08em;
   text-transform:uppercase;
   font-size:13px;
 }


 .mobile-menu button{
   border:0;
   padding:16px;
   border-radius:14px;
   background:#fff;
   color:#000;
   font-weight:900;
   letter-spacing:.08em;
   text-transform:uppercase;
   font-size:13px;
   cursor:pointer;
 }


 .section{
   padding:96px 24px;
 }


 .app-showcase-section{
   padding-left:24px;
   padding-right:24px;
 }


 .app-showcase-system{
   border-radius:24px;
 }


 .app-showcase-system .section-heading{
   padding:48px 24px 34px;
 }


 .app-panel{
   grid-template-columns:1fr;
 }


 .app-selector{
   display:grid;
   grid-template-columns:repeat(5,minmax(0,1fr));
   border-right:0;
   border-bottom:1px solid rgba(255,255,255,.1);
   padding:18px;
 }


 .app-option{
   min-height:82px;
   align-items:flex-start;
   flex-direction:column;
   gap:10px;
 }


 .app-option:hover,
 .app-option.active{
   transform:translateY(-3px);
 }


 .app-panel-body{
   min-height:auto;
   padding:24px;
 }


 .hero{
   padding-left:24px;
   padding-right:24px;
 }


 .hero h1{
   font-size:clamp(44px,13vw,78px);
 }


 .browser{
   transform:none;
   max-width:720px;
 }


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


 .word-shell{
   width:100%;
 }


 .word-sizer,
 #wordSwap{
   white-space:normal;
   overflow-wrap:anywhere;
 }
}


@media(max-width:640px){
 .cursor-glow{
   display:none;
 }


 .early-modal{
   padding:14px;
 }


 .early-modal-panel{
   max-height:calc(100vh - 28px);
   padding:26px 20px;
   border-radius:20px;
 }


 .field-pair{
   grid-template-columns:1fr;
 }


 .hero-logo{
   width:118px;
   height:108px;
 }


 .browser-top{
   height:44px;
   padding:0 12px;
 }


 .browser-top small{
   font-size:11px;
 }


 .mini-site-header{
   grid-template-columns:1fr auto;
   gap:12px;
   min-height:58px;
   padding:0 16px;
 }


 .mini-site-header nav{
   display:none;
 }


 .mini-site-tabs{
   justify-content:flex-start;
   gap:8px;
   padding:16px 14px;
   overflow:hidden;
   font-size:12px;
 }


 .mini-site-tabs span{
   padding:8px 10px;
 }


 .mini-site-stage{
   min-height:410px;
   margin:0 14px;
 }


 .mini-slide{
   left:18px;
   top:20px;
   width:calc(100% - 36px);
 }


 .mini-slide h3{
   font-size:28px;
 }


 .mini-photo{
   left:18px;
   right:18px;
   bottom:20px;
   width:auto;
   min-height:170px;
 }


 .mini-booking{
   width:calc(100% - 28px);
   transform:none;
   margin:14px;
 }


 .mini-booking div{
   grid-template-columns:1fr auto;
 }


 .mini-booking b{
   display:none;
 }


 .mini-strip{
   margin:0 14px 18px;
   font-size:11px;
 }


 .sun{
   width:152px;
   height:138px;
 }


 .universe span{
   font-size:11px;
 }


 .universe span:nth-of-type(1){
   --r:86px;
   --planet-size:48px;
   --planet-font:9px;
 }


 .universe span:nth-of-type(2){
   --r:134px;
   --planet-size:58px;
   --planet-font:10px;
 }


 .universe span:nth-of-type(3){
   --r:182px;
   --planet-size:44px;
   --planet-font:9px;
 }


 .universe span:nth-of-type(4){
   --r:228px;
   --planet-size:50px;
   --planet-font:9px;
 }


 .cards,
 .stats,
 .countdown,
 .dashboard-grid,
 .rings-grid{
   grid-template-columns:1fr;
 }


 .app-selector{
   grid-template-columns:1fr;
 }


 .app-option{
   min-height:62px;
   flex-direction:row;
   align-items:center;
 }


 .app-content{
   min-height:auto;
   gap:24px;
 }


 .app-copy h3{
   font-size:clamp(32px,10vw,48px);
 }


 .app-copy p:not(.app-kicker){
   font-size:16px;
 }


 .app-points span{
   width:100%;
   justify-content:center;
 }


 .stat{
   border-right:0;
   border-bottom:1px solid rgba(255,255,255,.1);
 }


 .scanner-card,
 .dashboard,
 .waitlist-card{
   padding:28px;
   border-radius:24px;
 }


 .broken-site,
 .premium-site{
   min-height:0;
   padding-bottom:52px;
 }


 .broken-webpage,
 .premium-webpage{
   margin:14px;
 }


 .broken-nav{
   gap:8px;
   padding:0 10px;
 }


 .broken-nav span:nth-of-type(3),
 .premium-nav nav{
   display:none;
 }


 .broken-hero-block{
   width:100%;
   margin-left:0;
 }


 .broken-hero-block h3{
   font-size:28px;
 }


 .broken-callout{
   right:12px;
   top:82px;
   max-width:100px;
 }


 .premium-nav{
   grid-template-columns:1fr auto;
   padding:0 14px;
 }


 .premium-hero-block{
   grid-template-columns:1fr;
   margin:14px;
   padding:18px;
 }


 .premium-hero-block h3{
   font-size:27px;
 }


 .premium-slogan{
   min-height:86px;
 }


 .premium-hero-block aside{
   max-width:150px;
 }


 .premium-content-grid{
   grid-template-columns:1fr;
   margin:0 14px;
 }


 .premium-content-grid article{
   min-height:auto;
 }


 .premium-signal{
   margin-left:14px;
   margin-right:14px;
   flex-wrap:wrap;
 }


 .btn{
   width:100%;
 }


 .hero-actions{
   align-items:stretch;
 }


 .footer{
   padding:90px 24px 40px;
 }


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


 .hero-visual{
   min-height:520px;
 }
}


/* =========================================================
  FRESH ADD-ON ANIMATIONS
  Added without removing the original Codepreme build.
  01 Laggy Logo Ghosts
  02 Quantum Cursor Shards
  03 Neural Vein Cards
  04 Liquid Chrome Portal
  05 Scroll Hyperspace Tunnel
========================================================= */


#hyperTunnel{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:0;
 opacity:.32;
 mix-blend-mode:screen;
}


.cursor-shards{
 position:fixed;
 inset:0;
 z-index:8;
 pointer-events:none;
 overflow:hidden;
}


.cursor-shard{
 position:absolute;
 width:6px;
 height:6px;
 border-radius:2px;
 background:linear-gradient(135deg,var(--green),var(--cyan),#fff);
 box-shadow:0 0 18px rgba(24,255,193,.65);
 transform:translate(-50%,-50%) rotate(0deg) scale(1);
 animation:cursorShard .72s var(--ease) forwards;
}


.cursor-shard::after{
 content:"";
 position:absolute;
 inset:-6px;
 border:1px solid rgba(255,255,255,.14);
 transform:rotate(45deg);
}


.lag-logo,
.lag-word{
 position:relative;
 isolation:isolate;
 animation:logoLagStutter 3.8s steps(2,end) infinite;
}


.lag-logo::before,
.lag-logo::after,
.lag-word::before,
.lag-word::after{
 content:attr(data-lag);
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 pointer-events:none;
 mix-blend-mode:screen;
 opacity:0;
 z-index:-1;
}


.lag-word::before,
.lag-word::after{
 display:inline;
 place-items:unset;
 left:0;
 top:0;
}


.lag-logo::before,
.lag-word::before{
 color:var(--cyan);
 text-shadow:0 0 18px rgba(0,255,255,.75);
 animation:logoGhostCyan 2.7s steps(2,end) infinite;
}


.lag-logo::after,
.lag-word::after{
 color:var(--pink);
 text-shadow:0 0 18px rgba(255,61,129,.75);
 animation:logoGhostPink 2.7s steps(2,end) infinite reverse;
}


.brand-logo.lag-logo,
.footer-logo.lag-logo{
 overflow:visible;
}


.lag-logo.mini{
 width:72px;
 height:72px;
 border-radius:22px;
 display:grid;
 place-items:center;
 color:#030303;
 font-weight:900;
 font-size:38px;
 background:linear-gradient(135deg,#fff,var(--green),var(--cyan),#fff);
 box-shadow:0 0 38px rgba(24,255,193,.28), inset 0 0 10px rgba(255,255,255,.8);
}


.fresh-lab-section{
 background:
   radial-gradient(circle at 18% 22%, rgba(24,255,193,.13), transparent 34%),
   radial-gradient(circle at 84% 70%, rgba(255,61,129,.13), transparent 36%),
   #020202;
}


.fresh-lab-grid{
 max-width:1240px;
 margin:0 auto;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:18px;
 perspective:1300px;
}


.fresh-card{
 --fresh-lift:0px;
 --fresh-rotate-x:0deg;
 --fresh-rotate-y:0deg;
 --fresh-shift-x:0px;
 --fresh-shift-y:0px;
 --fresh-glow-x:50%;
 --fresh-glow-y:50%;
 min-height:340px;
 position:relative;
 border-radius:30px;
 padding:28px;
 overflow:hidden;
 background:
   linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
   rgba(0,0,0,.52);
 border:1px solid rgba(255,255,255,.1);
 box-shadow:0 28px 90px rgba(0,0,0,.42);
 transform-style:preserve-3d;
 transform:
   translate3d(var(--fresh-shift-x), calc(var(--fresh-lift) + var(--fresh-shift-y)), 0)
   rotateX(var(--fresh-rotate-x))
   rotateY(var(--fresh-rotate-y))
   scale(var(--fresh-scale, 1));
 transform-origin:center;
 transition:transform .08s ease-out, border-color .45s ease, box-shadow .45s ease;
 will-change:transform;
}


.fresh-card.wide{
 grid-column:span 2;
}


.fresh-card::before{
 content:attr(data-fresh);
 position:absolute;
 right:24px;
 top:22px;
 color:rgba(255,255,255,.12);
 font-family:'JetBrains Mono',monospace;
 font-size:52px;
 font-weight:900;
 letter-spacing:-.08em;
}


.fresh-card::after{
 content:"";
 position:absolute;
 inset:-1px;
 border-radius:inherit;
 padding:1px;
 background:conic-gradient(from var(--spin,0deg), transparent, rgba(24,255,193,.8), rgba(0,255,255,.45), rgba(255,61,129,.45), transparent);
 mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 mask-composite:exclude;
 opacity:.34;
 animation:cardConicSpin 5s linear infinite;
}


.fresh-card:hover{
 --fresh-lift:-12px;
 --fresh-scale:1.025;
 border-color:rgba(24,255,193,.24);
 box-shadow:
   0 36px 120px rgba(24,255,193,.1),
   0 24px 90px rgba(0,0,0,.5),
   inset 0 0 70px rgba(24,255,193,.08);
}


.fresh-card:hover::after{
 opacity:.58;
 background:
   radial-gradient(circle at var(--fresh-glow-x) var(--fresh-glow-y), rgba(255,255,255,.95), rgba(24,255,193,.44) 12%, transparent 26%),
   conic-gradient(from var(--spin,0deg), transparent, rgba(24,255,193,.9), rgba(0,255,255,.48), rgba(255,61,129,.5), transparent);
}


.fresh-card h3{
 position:relative;
 z-index:2;
 margin-top:86px;
 font-size:28px;
 line-height:1;
 letter-spacing:-.045em;
}


.fresh-card p{
 position:relative;
 z-index:2;
 margin-top:16px;
 color:var(--muted);
 line-height:1.65;
}


.spark-field,
.neural-veins,
.chrome-portal,
.tunnel-preview{
 position:absolute;
 left:28px;
 top:28px;
 width:118px;
 height:86px;
 z-index:1;
}


.spark-field span{
 position:absolute;
 width:12px;
 height:12px;
 border-radius:3px;
 background:linear-gradient(135deg,var(--green),var(--cyan),#fff);
 box-shadow:0 0 24px rgba(24,255,193,.58);
 animation:sparkOrbit 2.9s ease-in-out infinite;
}


.spark-field span:nth-child(1){left:8px;top:12px;animation-delay:.1s;}
.spark-field span:nth-child(2){left:54px;top:4px;animation-delay:.35s;}
.spark-field span:nth-child(3){left:94px;top:36px;animation-delay:.6s;}
.spark-field span:nth-child(4){left:38px;top:58px;animation-delay:.85s;}
.spark-field span:nth-child(5){left:76px;top:70px;animation-delay:1.1s;}


.neural-veins{
 width:150px;
 height:110px;
 border-radius:28px;
 background:rgba(0,0,0,.34);
 border:1px solid rgba(255,255,255,.1);
 overflow:hidden;
}


.neural-veins::before{
 content:"";
 position:absolute;
 inset:0;
 background:
   linear-gradient(90deg, transparent 0 25%, rgba(24,255,193,.8) 26% 27%, transparent 28% 100%),
   linear-gradient(140deg, transparent 0 42%, rgba(0,255,255,.72) 43% 44%, transparent 45% 100%),
   linear-gradient(40deg, transparent 0 52%, rgba(255,61,129,.55) 53% 54%, transparent 55% 100%);
 filter:drop-shadow(0 0 10px rgba(24,255,193,.7));
 animation:neuralScan 2.4s linear infinite;
}


.neural-veins i{
 position:absolute;
 width:10px;
 height:10px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 20px var(--green);
 animation:nodeBlink 1.8s ease-in-out infinite;
}
.neural-veins i:nth-child(1){left:26px;top:24px;}
.neural-veins i:nth-child(2){left:94px;top:18px;animation-delay:.25s;}
.neural-veins i:nth-child(3){left:52px;top:70px;animation-delay:.5s;}
.neural-veins i:nth-child(4){left:118px;top:76px;animation-delay:.75s;}


.chrome-portal{
 width:112px;
 height:112px;
 border-radius:50%;
 background:
   radial-gradient(circle at 35% 30%, #fff 0 5%, rgba(24,255,193,.9) 6% 22%, rgba(0,255,255,.3) 23% 42%, transparent 43%),
   conic-gradient(from 0deg, var(--green), var(--cyan), var(--pink), #fff, var(--green));
 filter:blur(.1px) drop-shadow(0 0 35px rgba(24,255,193,.35));
 animation:liquidPortal 4.8s ease-in-out infinite, portalHue 8s linear infinite;
}


.chrome-portal::after{
 content:"";
 position:absolute;
 inset:18px;
 border-radius:50%;
 background:#000;
 box-shadow:inset 0 0 34px rgba(24,255,193,.35);
 animation:portalBreath 2.8s ease-in-out infinite;
}


.tunnel-preview{
 width:210px;
 height:112px;
 border-radius:26px;
 border:1px solid rgba(255,255,255,.1);
 background:radial-gradient(circle at 50% 50%, rgba(24,255,193,.28), rgba(0,0,0,.84) 42%, rgba(255,255,255,.04));
 overflow:hidden;
}


.tunnel-preview span{
 position:absolute;
 left:50%;
 top:50%;
 width:28px;
 height:28px;
 border:1px solid rgba(24,255,193,.42);
 border-radius:50%;
 transform:translate(-50%,-50%) scale(.2);
 animation:tunnelPulse 2.2s ease-in-out infinite;
}
.tunnel-preview span:nth-child(2){animation-delay:.22s;}
.tunnel-preview span:nth-child(3){animation-delay:.44s;}
.tunnel-preview span:nth-child(4){animation-delay:.66s;}
.tunnel-preview span:nth-child(5){animation-delay:.88s;}


@keyframes logoLagStutter{
 0%,88%,100%{transform:translate(0,0) skew(0deg);filter:none;}
 89%{transform:translate(1px,-1px) skew(.8deg);filter:contrast(1.25);}
 91%{transform:translate(-2px,1px) skew(-1.1deg);filter:brightness(1.25);}
 93%{transform:translate(2px,0) skew(.4deg);}
}


@keyframes logoGhostCyan{
 0%,82%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0);}
 84%{opacity:.85;transform:translate(-7px,2px);clip-path:inset(0 0 55% 0);}
 88%{opacity:.62;transform:translate(5px,-2px);clip-path:inset(58% 0 10% 0);}
 92%{opacity:.32;transform:translate(-3px,1px);clip-path:inset(22% 0 32% 0);}
}


@keyframes logoGhostPink{
 0%,80%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0);}
 83%{opacity:.75;transform:translate(7px,-2px);clip-path:inset(52% 0 0 0);}
 87%{opacity:.45;transform:translate(-5px,2px);clip-path:inset(8% 0 62% 0);}
 91%{opacity:.28;transform:translate(4px,-1px);clip-path:inset(34% 0 24% 0);}
}


@keyframes cursorShard{
 to{
   opacity:0;
   transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.15);
 }
}


@keyframes cardConicSpin{
 to{--spin:360deg;}
}


@keyframes sparkOrbit{
 0%,100%{transform:translate(0,0) rotate(0deg) scale(.9);opacity:.42;}
 50%{transform:translate(12px,-18px) rotate(90deg) scale(1.25);opacity:1;}
}


@keyframes neuralScan{
 from{transform:translateX(-32%);}
 to{transform:translateX(32%);}
}


@keyframes nodeBlink{
 0%,100%{transform:scale(.72);opacity:.55;}
 50%{transform:scale(1.35);opacity:1;}
}


@keyframes liquidPortal{
 0%,100%{border-radius:52% 48% 58% 42% / 44% 58% 42% 56%;transform:rotate(0deg) scale(1);}
 50%{border-radius:38% 62% 42% 58% / 62% 38% 62% 38%;transform:rotate(180deg) scale(1.07);}
}


@keyframes portalHue{
 to{filter:hue-rotate(360deg) drop-shadow(0 0 35px rgba(24,255,193,.35));}
}


@keyframes portalBreath{
 0%,100%{transform:scale(.9);opacity:.8;}
 50%{transform:scale(1.08);opacity:1;}
}


@keyframes tunnelPulse{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
 35%{opacity:1;}
 100%{opacity:0;transform:translate(-50%,-50%) scale(5.6);}
}


@media(max-width:1120px){
 .fresh-lab-grid{
   grid-template-columns:repeat(2,1fr);
 }
}


@media(max-width:640px){
 #hyperTunnel{
   opacity:.18;
 }


 .fresh-lab-grid{
   grid-template-columns:1fr;
 }


 .fresh-card.wide{
   grid-column:auto;
 }


 .fresh-card{
   min-height:310px;
 }
}




.lag-hit{
 animation:logoLagStutter .18s steps(2,end) 1 !important;
}




/* =========================================
  EXTRA FRESH ADD-ON ANIMATIONS V2
  06 Prismatic Scanner Blades
  07 Gravity Orb Swarm
  08 Data Vault Flip
  09 Signal Equalizer Bars
  10 Hologram Headline Ripple
  ========================================= */


.prism-blades,
.gravity-orb,
.vault-flip,
.wave-equalizer,
.headline-ripple{
 width:160px;
 height:118px;
 margin-bottom:24px;
 position:relative;
 border-radius:24px;
 border:1px solid rgba(255,255,255,.12);
 background:rgba(0,0,0,.42);
 overflow:hidden;
 box-shadow:inset 0 0 35px rgba(24,255,193,.08), 0 18px 55px rgba(0,0,0,.35);
}


.prism-blades::before{
 content:"";
 position:absolute;
 inset:-40%;
 background:
   conic-gradient(from 90deg, transparent, rgba(24,255,193,.28), transparent, rgba(0,255,255,.22), transparent, rgba(255,61,129,.18), transparent);
 animation:prismSpin 7s linear infinite;
}


.prism-blades::after{
 content:"";
 position:absolute;
 top:-20%;
 left:var(--scan-x, -40%);
 width:34%;
 height:140%;
 transform:rotate(18deg);
 background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), rgba(24,255,193,.28), transparent);
 filter:blur(.4px);
 animation:prismBlade 2.8s var(--ease) infinite;
}


.prism-blades span{
 position:absolute;
 inset:18px;
 border-radius:20px;
 border:1px solid rgba(255,255,255,.12);
 transform:rotate(calc(var(--n, 0) * 13deg));
 animation:prismBreath 2.7s ease-in-out infinite;
}


.prism-blades span:nth-child(1){--n:1;}
.prism-blades span:nth-child(2){--n:2; animation-delay:.22s;}
.prism-blades span:nth-child(3){--n:3; animation-delay:.44s;}


.gravity-orb{
 display:grid;
 place-items:center;
 overflow:visible;
 background:radial-gradient(circle at 50% 50%, rgba(24,255,193,.18), transparent 40%), rgba(0,0,0,.44);
}


.gravity-orb::before{
 content:"";
 width:54px;
 height:54px;
 border-radius:50%;
 background:radial-gradient(circle at 30% 24%, #fff, var(--green) 22%, rgba(0,255,255,.38) 52%, rgba(0,0,0,.2));
 box-shadow:0 0 38px rgba(24,255,193,.45), inset 0 0 18px rgba(255,255,255,.34);
 transform:translate(var(--mx, 0px), var(--my, 0px));
 transition:transform .35s var(--ease);
}


.gravity-orb span{
 position:absolute;
 width:10px;
 height:10px;
 border-radius:50%;
 background:var(--cyan);
 box-shadow:0 0 18px var(--cyan);
 animation:gravityOrbit 3.7s linear infinite;
}


.gravity-orb span:nth-child(1){--r:62px;--delay:0s;}
.gravity-orb span:nth-child(2){--r:76px;--delay:-.8s;background:var(--pink);box-shadow:0 0 18px var(--pink);}
.gravity-orb span:nth-child(3){--r:48px;--delay:-1.4s;}
.gravity-orb span:nth-child(4){--r:88px;--delay:-2.1s;background:#fff;box-shadow:0 0 18px #fff;}


.vault-flip{
 display:grid;
 place-items:center;
 transform-style:preserve-3d;
 perspective:700px;
 cursor:pointer;
}


.vault-flip::before{
 content:"";
 position:absolute;
 width:74px;
 height:74px;
 border-radius:18px;
 border:1px solid rgba(24,255,193,.34);
 background:
   linear-gradient(135deg, rgba(255,255,255,.12), transparent),
   rgba(0,0,0,.65);
 box-shadow:0 0 34px rgba(24,255,193,.18);
 transform:rotateY(var(--vault-rot, 0deg));
 transition:transform .75s var(--ease), box-shadow .75s var(--ease);
}


.vault-flip span,
.vault-flip b{
 position:absolute;
 font-family:'JetBrains Mono',monospace;
 font-size:11px;
 letter-spacing:.16em;
 color:var(--green);
 z-index:2;
 transition:.45s var(--ease);
}


.vault-flip b{
 opacity:0;
 transform:translateY(14px);
}


.vault-flip.open{
 --vault-rot:180deg;
}


.vault-flip.open::before{
 box-shadow:0 0 60px rgba(24,255,193,.38), inset 0 0 25px rgba(24,255,193,.16);
}


.vault-flip.open span{
 opacity:0;
 transform:translateY(-14px);
}


.vault-flip.open b{
 opacity:1;
 transform:translateY(0);
}


.wave-equalizer{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:24px;
}


.wave-equalizer span{
 width:9px;
 height:var(--bar, 30%);
 min-height:18px;
 border-radius:999px;
 background:linear-gradient(to top, var(--green), var(--cyan), #fff);
 box-shadow:0 0 18px rgba(24,255,193,.45);
 animation:equalizerPulse 1.05s ease-in-out infinite;
}


.wave-equalizer span:nth-child(1){animation-delay:-.1s;}
.wave-equalizer span:nth-child(2){animation-delay:-.3s;}
.wave-equalizer span:nth-child(3){animation-delay:-.5s;}
.wave-equalizer span:nth-child(4){animation-delay:-.7s;}
.wave-equalizer span:nth-child(5){animation-delay:-.9s;}
.wave-equalizer span:nth-child(6){animation-delay:-.45s;}
.wave-equalizer span:nth-child(7){animation-delay:-.2s;}


.headline-ripple{
 width:100%;
 max-width:430px;
 display:grid;
 place-items:center;
 isolation:isolate;
}


.headline-ripple::before{
 content:"";
 position:absolute;
 inset:-20%;
 background:radial-gradient(circle, rgba(24,255,193,.16), transparent 58%);
 animation:rippleGlow 3s ease-in-out infinite;
}


.headline-ripple span{
 grid-area:1/1;
 font-size:clamp(28px, 6vw, 62px);
 font-weight:900;
 letter-spacing:-.07em;
 color:#fff;
 text-shadow:0 0 22px rgba(24,255,193,.38);
 animation:holoRipple 2.9s var(--ease) infinite;
}


.headline-ripple span:nth-child(2){
 color:var(--green);
 opacity:.48;
 animation-delay:.12s;
}


.headline-ripple span:nth-child(3){
 color:var(--pink);
 opacity:.34;
 animation-delay:.24s;
}


.headline-ripple.ping span{
 animation-duration:.72s;
}


@keyframes prismSpin{
 to{transform:rotate(360deg);}
}


@keyframes prismBlade{
 0%{left:-45%;opacity:0;}
 20%,70%{opacity:1;}
 100%{left:115%;opacity:0;}
}


@keyframes prismBreath{
 0%,100%{transform:rotate(calc(var(--n) * 13deg)) scale(.88);opacity:.35;}
 50%{transform:rotate(calc(var(--n) * 13deg + 18deg)) scale(1.08);opacity:.75;}
}


@keyframes gravityOrbit{
 from{transform:rotate(0deg) translateX(var(--r)) rotate(0deg);}
 to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg);}
}


@keyframes equalizerPulse{
 0%,100%{height:20%;}
 35%{height:86%;}
 62%{height:44%;}
}


@keyframes holoRipple{
 0%,100%{transform:translate3d(0,0,0) scale(1);filter:blur(0);}
 20%{transform:translate3d(-7px,2px,0) scale(1.01);filter:blur(.3px);}
 40%{transform:translate3d(8px,-3px,0) scale(.99);filter:blur(1px);}
 58%{transform:translate3d(-3px,4px,0) scale(1.025);filter:blur(.2px);}
}


@keyframes rippleGlow{
 0%,100%{transform:scale(.78);opacity:.42;}
 50%{transform:scale(1.25);opacity:.78;}
}