:root{
  --bg:#06141c;
  --bg-2:#0a202a;
  --panel:rgba(255,255,255,.065);
  --panel-strong:rgba(255,255,255,.10);
  --text:#f5fbfd;
  --muted:#9ab1ba;
  --aqua:#4ee7ff;
  --aqua-2:#00a8d8;
  --lime:#b9ff65;
  --line:rgba(255,255,255,.13);
  --shadow:0 32px 80px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 16%, rgba(0,200,255,.18), transparent 24rem),
    radial-gradient(circle at 8% 72%, rgba(185,255,101,.10), transparent 30rem),
    linear-gradient(135deg, #041016 0%, #071923 44%, #0a202a 100%);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

body::selection{background:var(--aqua); color:#002532}

.page-noise{
  position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.cursor-glow{
  position:fixed; width:26rem; height:26rem; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(78,231,255,.16), transparent 64%);
  transform:translate(-50%,-50%); left:50%; top:20%; transition:opacity .25s ease;
}

.site-header{
  width:min(1200px, calc(100% - 40px)); margin:0 auto; padding:24px 0;
  display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10;
}

.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.brand-mark{
  width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(135deg,var(--aqua),var(--lime)); color:#03202b; font-size:28px; font-weight:950;
  box-shadow:0 10px 34px rgba(78,231,255,.22); transform:rotate(-5deg);
}
.brand-copy{display:grid; line-height:1}
.brand-copy strong{font-size:18px; letter-spacing:.18em}
.brand-copy small{font-size:9px; color:var(--muted); letter-spacing:.18em; margin-top:6px}

.launch-pill{
  display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); backdrop-filter:blur(12px); border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.16em;
}
.pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(185,255,101,.6); animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(185,255,101,0)}100%{box-shadow:0 0 0 0 rgba(185,255,101,0)}}

main{position:relative; z-index:1}
.hero{
  width:min(1200px, calc(100% - 40px)); min-height:calc(100vh - 96px); margin:0 auto;
  display:grid; grid-template-columns:1.04fr .96fr; gap:68px; align-items:center; padding:50px 0 100px;
}

.eyebrow{font-size:12px; font-weight:850; letter-spacing:.18em; color:#c5dce3; text-transform:uppercase; display:flex; align-items:center; gap:12px}
.eyebrow span{color:var(--aqua)}
.eyebrow::after{content:""; width:72px; height:1px; background:linear-gradient(90deg,var(--aqua),transparent)}

h1{font-size:clamp(4rem, 7.2vw, 7.4rem); line-height:.86; letter-spacing:-.07em; margin:22px 0 28px; font-weight:950}
h1 .line{display:block; transform-origin:left center}
.gradient-text{background:linear-gradient(90deg,var(--aqua),#dffcff 54%,var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-lead{font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.75; color:var(--muted); max-width:640px; margin:0 0 34px}
.hero-lead strong{color:#e7fbff}

.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  border:0; text-decoration:none; cursor:pointer; border-radius:16px; min-height:54px; padding:0 20px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:850; font-size:14px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease; position:relative; overflow:hidden;
}
.btn-primary{background:linear-gradient(135deg,var(--aqua),#75f4dd); color:#05212a; box-shadow:0 16px 34px rgba(78,231,255,.17)}
.btn-primary:hover{box-shadow:0 20px 46px rgba(78,231,255,.28)}
.btn-primary svg{width:20px; fill:none; stroke:currentColor; stroke-width:2}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.play-icon{font-size:11px; color:var(--lime)}

.quick-stats{display:grid; grid-template-columns:repeat(3,1fr); max-width:650px; margin-top:44px; border-top:1px solid var(--line); padding-top:22px; gap:20px}
.quick-stats div{display:grid; gap:5px}
.quick-stats strong{font-size:13px; letter-spacing:.14em}
.quick-stats span{font-size:12px; color:var(--muted)}

.hero-visual{position:relative; min-height:650px; display:grid; place-items:center; perspective:1200px}
.portrait-card{
  position:relative; width:min(100%, 510px); aspect-ratio:.8; border-radius:34px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); background:#0a1e28; box-shadow:var(--shadow);
  transform-style:preserve-3d; transition:transform .15s ease-out; isolation:isolate;
}
.portrait-card::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.24); border-radius:25px; z-index:3; pointer-events:none;
}
.portrait-card img{width:100%; height:100%; object-fit:cover; object-position:54% center; display:block; transform:scale(1.08); transition:transform .25s ease-out; filter:saturate(.92) contrast(1.03)}
.portrait-overlay{position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(1,12,18,.9) 100%); z-index:1}
.portrait-shine{position:absolute; z-index:2; width:44%; height:160%; left:-70%; top:-30%; transform:rotate(12deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation:shine 5.2s ease-in-out infinite}
@keyframes shine{0%,45%{left:-70%}70%,100%{left:125%}}
.portrait-caption{position:absolute; z-index:4; left:34px; right:34px; bottom:32px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.portrait-caption span{font-size:10px; letter-spacing:.18em; color:#b9ced5; max-width:190px}
.portrait-caption strong{font-size:28px; letter-spacing:.12em}

.visual-orbit{position:absolute; border:1px solid rgba(78,231,255,.18); border-radius:50%; animation:orbitSpin 18s linear infinite}
.orbit-one{width:590px; height:590px}
.orbit-two{width:680px; height:680px; animation-direction:reverse; animation-duration:26s; border-style:dashed}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

.floating-tag{
  position:absolute; z-index:5; padding:10px 14px; border:1px solid rgba(255,255,255,.13); background:rgba(5,20,28,.74);
  backdrop-filter:blur(16px); border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.15em;
  box-shadow:0 12px 30px rgba(0,0,0,.26); animation:float 4.6s ease-in-out infinite;
}
.tag-a{left:-8px; top:18%}
.tag-b{right:-8px; top:36%; animation-delay:-1.2s}
.tag-c{left:3%; bottom:10%; animation-delay:-2.2s}
@keyframes float{50%{transform:translateY(-12px) rotate(1.5deg)}}

.droplet{position:absolute; border-radius:50% 50% 55% 45%; background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(78,231,255,.16)); opacity:.55; filter:blur(.2px); animation:dropFloat 5s ease-in-out infinite}
.d1{width:22px;height:22px;right:4%;top:12%}
.d2{width:12px;height:12px;left:8%;bottom:28%;animation-delay:-1.4s}
.d3{width:17px;height:17px;right:8%;bottom:18%;animation-delay:-2.1s}
@keyframes dropFloat{50%{transform:translate(8px,-18px) rotate(24deg); opacity:.9}}

.ticker{border-block:1px solid var(--line); background:rgba(255,255,255,.025); overflow:hidden; padding:16px 0; transform:rotate(-1deg) scale(1.01)}
.ticker-track{width:max-content; display:flex; align-items:center; gap:28px; font-weight:900; letter-spacing:.14em; font-size:12px; animation:ticker 24s linear infinite}
.ticker-track i{color:var(--aqua); font-style:normal}
@keyframes ticker{to{transform:translateX(-50%)}}

.coming{width:min(1200px, calc(100% - 40px)); margin:0 auto; padding:140px 0 90px}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:44px}
.section-head h2,.launch-copy h2{font-size:clamp(2.7rem,5vw,5.6rem); line-height:.96; letter-spacing:-.055em; margin:0; max-width:900px}
.section-head h2 span{color:var(--muted)}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feature-card{
  min-height:330px; padding:26px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border-radius:24px; position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .2s ease-out, border-color .25s ease, background .25s ease;
}
.feature-card:hover{border-color:rgba(78,231,255,.42); background:linear-gradient(180deg,rgba(78,231,255,.10),rgba(255,255,255,.04))}
.feature-card::after{content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-90px; bottom:-90px; background:radial-gradient(circle,rgba(78,231,255,.14),transparent 65%)}
.feature-number{position:absolute; top:24px; right:24px; font-size:11px; color:#8097a0; letter-spacing:.14em}
.feature-icon{font-size:36px; margin:42px 0 40px; filter:drop-shadow(0 6px 16px rgba(78,231,255,.18))}
.feature-card h3{font-size:20px; margin:0 0 12px}
.feature-card p{font-size:14px; color:var(--muted); line-height:1.7; margin:0}
.card-line{position:absolute; left:26px; right:26px; bottom:22px; height:2px; background:linear-gradient(90deg,var(--aqua),transparent); transform:scaleX(.28); transform-origin:left; transition:transform .3s ease}
.feature-card:hover .card-line{transform:scaleX(1)}

.launch-panel{
  width:min(1200px, calc(100% - 40px)); margin:60px auto 120px; border:1px solid var(--line); border-radius:32px; padding:48px;
  background:
    radial-gradient(circle at 80% 20%,rgba(78,231,255,.16),transparent 22rem),
    linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:var(--shadow); display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
}
.launch-copy p:not(.eyebrow){color:var(--muted); line-height:1.75; max-width:620px}
.progress-wrap{align-self:end}
.progress-top,.progress-meta{display:flex; justify-content:space-between; gap:12px}
.progress-top{font-size:13px; font-weight:800; margin-bottom:12px}
.progress-top strong{color:var(--aqua)}
.progress-bar{height:13px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; border:1px solid rgba(255,255,255,.1)}
.progress-bar span{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--aqua),var(--lime)); box-shadow:0 0 28px rgba(78,231,255,.35); transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.progress-meta{font-size:10px; letter-spacing:.12em; color:#728a94; margin-top:10px; text-transform:uppercase}
.notify-form{grid-column:1/-1; border-top:1px solid var(--line); padding-top:28px}
.notify-form label{display:block; font-size:13px; font-weight:800; margin-bottom:10px}
.notify-row{display:flex; gap:10px}
.notify-row input{flex:1; min-width:0; border:1px solid var(--line); background:rgba(3,15,21,.58); color:var(--text); border-radius:14px; padding:16px 17px; outline:none; font:inherit}
.notify-row input:focus{border-color:rgba(78,231,255,.65); box-shadow:0 0 0 4px rgba(78,231,255,.08)}
.notify-row button{border:0; border-radius:14px; padding:0 24px; font-weight:900; cursor:pointer; background:var(--text); color:#05202a}
.form-message{height:18px; margin:9px 0 0; color:var(--lime); font-size:12px}

.big-type{width:min(1200px, calc(100% - 40px)); margin:0 auto 70px; display:grid; line-height:.8; letter-spacing:-.07em; font-weight:950; opacity:.11; font-size:clamp(5rem,14vw,13rem); white-space:nowrap; overflow:hidden}
.big-type span:last-child{transform:translateX(12%)}

footer{width:min(1200px, calc(100% - 40px)); margin:0 auto; min-height:110px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:32px; color:var(--muted)}
footer div{display:grid; gap:3px}
footer strong{color:var(--text); letter-spacing:.14em}
footer span, footer p{font-size:12px}
footer button{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:18px}

.bubble-field{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bubble{position:absolute; bottom:-80px; border-radius:50%; border:1px solid rgba(186,244,255,.28); background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),rgba(78,231,255,.06) 45%,transparent 70%); animation:bubbleRise linear forwards}
@keyframes bubbleRise{to{transform:translateY(calc(-100vh - 180px)) translateX(var(--drift)) scale(1.15); opacity:0}}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1; transform:translateY(0)}

.intro-modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; visibility:hidden; opacity:0; transition:.3s ease}
.intro-modal.open{visibility:visible; opacity:1}
.intro-backdrop{position:absolute; inset:0; background:rgba(0,8,12,.78); backdrop-filter:blur(12px)}
.intro-card{position:relative; z-index:1; width:min(520px,calc(100% - 36px)); padding:46px; border-radius:28px; border:1px solid var(--line); background:linear-gradient(145deg,#0a202a,#06151d); box-shadow:var(--shadow); text-align:center; overflow:hidden}
.intro-card::after{content:""; position:absolute; inset:auto -20% -50% -20%; height:220px; background:radial-gradient(circle,rgba(78,231,255,.24),transparent 65%)}
.intro-close{position:absolute; right:15px; top:15px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.07); color:white; font-size:24px; cursor:pointer}
.intro-logo{width:78px; height:78px; border-radius:22px; margin:0 auto 22px; display:grid; place-items:center; background:linear-gradient(135deg,var(--aqua),var(--lime)); color:#04212b; font-size:44px; font-weight:950; transform:rotate(-6deg); animation:introBounce 1.7s ease-in-out infinite}
@keyframes introBounce{50%{transform:translateY(-8px) rotate(5deg)}}
.intro-card p{font-size:11px; letter-spacing:.18em; color:var(--aqua); font-weight:900}
.intro-card h2{font-size:32px; line-height:1.08; margin:10px 0 24px}
.intro-card small{color:var(--muted)}
.intro-scan{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:26px 0 18px}
.intro-scan span{display:block; height:100%; width:28%; border-radius:inherit; background:linear-gradient(90deg,var(--aqua),var(--lime)); animation:scan 1.4s ease-in-out infinite}
@keyframes scan{50%{transform:translateX(260%)}}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr; padding-top:55px; text-align:center; gap:20px}
  .hero-copy{display:grid; justify-items:center}
  .eyebrow{justify-content:center}
  .hero-visual{min-height:620px}
  .quick-stats{width:100%}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .launch-panel{grid-template-columns:1fr}
  .progress-wrap{align-self:auto}
}

@media (max-width:650px){
  .site-header{width:min(100% - 28px,1200px); padding:17px 0}
  .brand-mark{width:40px;height:40px;font-size:23px;border-radius:12px}
  .brand-copy strong{font-size:15px}.brand-copy small{font-size:7px}
  .launch-pill{font-size:9px; padding:8px 10px}
  .hero{width:min(100% - 28px,1200px); min-height:auto; padding:44px 0 80px}
  h1{font-size:clamp(3.65rem,18vw,5.8rem)}
  .hero-lead{font-size:15px}
  .hero-actions{width:100%; flex-direction:column}
  .btn{width:100%}
  .quick-stats{grid-template-columns:1fr; text-align:left; gap:14px}
  .quick-stats div{grid-template-columns:95px 1fr; align-items:center}
  .hero-visual{min-height:500px; width:100%}
  .portrait-card{width:min(92vw,420px); border-radius:26px}
  .orbit-one{width:112vw;height:112vw}.orbit-two{width:130vw;height:130vw}
  .floating-tag{font-size:8px}.tag-a{left:-2%}.tag-b{right:-2%}
  .coming{width:min(100% - 28px,1200px); padding:100px 0 70px}
  .section-head{display:block}.section-head .eyebrow{justify-content:flex-start;margin-bottom:18px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:280px}
  .launch-panel{width:min(100% - 28px,1200px); padding:28px; margin-bottom:90px}
  .notify-row{flex-direction:column}.notify-row button{min-height:50px}
  .big-type{width:min(100% - 28px,1200px)}
  footer{width:min(100% - 28px,1200px); grid-template-columns:1fr auto; padding:24px 0}
  footer p{grid-column:1/-1; margin:0; order:3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important}
  .cursor-glow,.bubble-field{display:none}
}