@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-void:#05070d;
  --bg-void-deep:#03040a;
  --line:rgba(140,165,200,0.14);
  --line-strong:rgba(140,165,200,0.26);
  --steel-100:#eef1f6;
  --steel-300:#b7c1cf;
  --steel-400:#8b96a8;
  --steel-600:#5b6576;
  --pulse:#2fd3ff;
  --pulse-dim:#0f6f96;
  --pending:#ffb545;
  --display:'Saira Condensed','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --ease-smooth:cubic-bezier(.22,.68,.19,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overscroll-behavior:none;}
html{background:var(--bg-void);}
body{
  font-family:var(--body);
  background:var(--bg-void);
  color:var(--steel-300);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}

::selection{background:var(--pulse); color:#03040a;}
:focus-visible{outline:2px solid var(--pulse); outline-offset:3px; border-radius:2px;}

.grain{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj4KPGZpbHRlciBpZD0ibiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODUiIG51bU9jdGF2ZXM9IjIiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+PC9maWx0ZXI+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCUyM24pIi8+PC9zdmc+");
  background-size:180px 180px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  color:var(--pending); text-transform:uppercase; margin-bottom:22px; font-weight:500;
  padding:6px 14px 6px 10px; border:1px solid rgba(255,181,69,0.3);
  border-radius:20px; background:rgba(255,181,69,0.06);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--pending); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,181,69,0.55);
  animation:dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,181,69,0.5);}
  70%{box-shadow:0 0 0 7px rgba(255,181,69,0);}
  100%{box-shadow:0 0 0 0 rgba(255,181,69,0);}
}

h1{
  font-family:var(--display); color:var(--steel-100); font-weight:800;
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.02;
}

.reveal{opacity:0; transform:translateY(18px); animation:revealUp .9s var(--ease-out) forwards;}
@keyframes revealUp{ to{opacity:1; transform:translateY(0);} }

/* ---------- LOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--bg-void-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .7s var(--ease-smooth), visibility .7s;
}
.loader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{width:64px; height:64px; animation:loaderPulse 1.6s ease-in-out infinite;}
.loader-mark img{width:100%;}
@keyframes loaderPulse{
  0%,100%{transform:scale(1); filter:drop-shadow(0 0 12px rgba(47,211,255,.5));}
  50%{transform:scale(1.1); filter:drop-shadow(0 0 26px rgba(47,211,255,.9));}
}
.loader-bar{width:170px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden;}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#2fd3ff,#7fe8ff);
  animation:loaderFill 1.3s var(--ease-smooth) forwards;
}
@keyframes loaderFill{ from{width:0%;} to{width:100%;} }
.loader-text{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em;
  color:var(--steel-600); text-transform:uppercase;
}

/* ---------- PAGE SHELL (single viewport, no scroll) ---------- */
.page{
  height:100dvh; height:100vh;
  display:flex; flex-direction:column;
  position:relative;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:clamp(11px,1.6vh,14px) clamp(20px,2.4vw,27px); font-size:14px; font-weight:600;
  border-radius:3px; letter-spacing:0.02em;
  transition:transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), background .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0px); transition-duration:.15s;}
.btn-primary{
  background:linear-gradient(180deg,#4fdcff,#1aa8e0);
  color:#03121a; font-weight:700;
  box-shadow:0 0 0 1px rgba(47,211,255,0.3), 0 8px 30px -8px rgba(47,211,255,0.55);
}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(47,211,255,0.55), 0 14px 40px -8px rgba(47,211,255,0.8);}
.btn-primary svg{width:15px; height:15px; transition:transform .35s var(--ease-out);}
.btn-primary:hover svg{transform:translateX(3px);}
.btn-ghost{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line-strong);
  color:var(--steel-100);
}
.btn-ghost:hover{border-color:var(--pulse); background:rgba(47,211,255,0.07); box-shadow:0 10px 30px -12px rgba(47,211,255,0.4);}
.btn-ghost.copied{border-color:var(--pulse); color:var(--pulse);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:0 clamp(20px,4vw,32px);
}
.aurora{position:absolute; inset:-10%; pointer-events:none; z-index:0;}
.aurora span{position:absolute; border-radius:50%; filter:blur(80px); opacity:0.5; will-change:transform;}
.aurora span:nth-child(1){
  width:46vw; height:46vw; left:-10%; top:0%;
  background:radial-gradient(circle, rgba(47,150,211,0.45), transparent 70%);
  animation:driftA 22s ease-in-out infinite;
}
.aurora span:nth-child(2){
  width:40vw; height:40vw; right:-8%; top:14%;
  background:radial-gradient(circle, rgba(47,211,255,0.32), transparent 70%);
  animation:driftB 26s ease-in-out infinite;
}
.aurora span:nth-child(3){
  width:34vw; height:34vw; left:30%; bottom:-18%;
  background:radial-gradient(circle, rgba(255,181,69,0.14), transparent 70%);
  animation:driftC 30s ease-in-out infinite;
}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6%,8%) scale(1.12);}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-8%,6%) scale(1.08);}}
@keyframes driftC{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4%,-6%) scale(1.15);}}
.spotlight{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%), rgba(47,211,255,0.09), transparent 60%);
}

.hero-grid{
  position:relative; z-index:2;
  width:100%; max-width:1300px;
  display:grid; grid-template-columns:0.85fr 1.15fr;
  align-items:center; gap:clamp(24px,5vw,72px);
}
.hero-visual{display:flex; align-items:center; justify-content:center; position:relative;}
.hero-ring{
  position:absolute; width:min(40vh,300px); height:min(40vh,300px);
  border-radius:50%; border:1px solid rgba(47,211,255,0.16);
  animation:ringSpin 40s linear infinite;
}
.hero-ring::before{
  content:''; position:absolute; top:-1px; left:50%; width:6px; height:6px;
  background:var(--pulse); border-radius:50%; transform:translateX(-50%);
  box-shadow:0 0 10px 2px rgba(47,211,255,0.8);
}
.hero-ring.r2{width:min(50vh,370px); height:min(50vh,370px); border-color:rgba(47,211,255,0.08); animation-duration:60s; animation-direction:reverse;}
@keyframes ringSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.hero-logo{
  width:clamp(220px,25vw,380px);
  filter:drop-shadow(0 0 36px rgba(47,211,255,0.4));
  animation:heroFloat 8s var(--ease-smooth) infinite, revealUp 1s var(--ease-out) forwards;
  position:relative; z-index:2;
}
@keyframes heroFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

.hero-copy{text-align:left;}
h1.hero-title{
  font-size:clamp(32px,4.6vw,66px);
  color:var(--steel-100);
  margin-bottom:16px;
}
h1.hero-title span{
  background:linear-gradient(180deg,#7fe8ff,#2fd3ff 55%,#1789b8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(47,211,255,0.5));
}
.slogan{
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:0.14em; color:var(--pulse); text-transform:uppercase;
  margin-bottom:16px;
}
.hero-sub{
  max-width:460px; font-size:clamp(14px,1.5vh,16.5px); color:var(--steel-400);
  margin-bottom:clamp(20px,3vh,30px);
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.status-line{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; color:var(--steel-600);
  border:1px solid var(--line); border-radius:20px; padding:8px 16px 8px 12px;
  background:rgba(255,255,255,0.015); backdrop-filter:blur(6px);
}
.status-line .dot{
  width:7px; height:7px; border-radius:50%; background:var(--pending); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,181,69,0.55);
  animation:dotPulse 2.2s ease-in-out infinite;
}
.status-line b{color:var(--steel-300); font-weight:600;}
.status-line button{
  color:var(--steel-400); font-family:var(--mono); font-size:12px;
  border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease;
}
.status-line button:hover{color:var(--pulse); border-color:var(--pulse-dim);}
.status-line button.copied{color:var(--pulse);}

/* ---------- FOOTER ---------- */
.footer{
  flex:0 0 auto;
  border-top:1px solid var(--line);
  padding:clamp(18px,2.8vh,28px) clamp(20px,3vw,32px);
  z-index:2;
  background:linear-gradient(180deg,rgba(3,4,10,0.15),rgba(3,4,10,0.5));
}
.footer-inner{
  max-width:1300px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.footer-copy{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--steel-600); text-align:center;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px;}
  .hero-copy{text-align:center;}
  .hero-sub{max-width:440px; margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-visual{order:0;}
  .hero-ring{display:none;}
  .hero-logo{width:min(70vw,270px); margin-bottom:2px;}
}
@media (max-height:720px){
  .eyebrow{margin-bottom:12px;}
  .slogan{margin-bottom:10px;}
  .hero-sub{margin-bottom:16px;}
}
@media (max-height:700px){
  .hero-logo{width:min(46vw,190px);}
  .hero-visual{margin-bottom:2px;}
  .eyebrow{font-size:10.5px; padding:5px 12px 5px 9px; margin-bottom:10px;}
  h1.hero-title{font-size:clamp(26px,7vw,40px); margin-bottom:8px;}
  .slogan{font-size:11px; margin-bottom:8px;}
  .hero-sub{font-size:12.5px; margin-bottom:14px;}
  .hero-actions{margin-bottom:12px;}
  .status-line{font-size:10.5px; padding:6px 12px 6px 10px; flex-wrap:wrap; justify-content:center; row-gap:2px;}
  .footer{padding-top:14px; padding-bottom:14px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  .reveal{opacity:1; transform:none;}
}