:root{
  --bg0:#05070b;
  --bg1:#0b0f14;
  --fg:#e9eef6;
  --muted:rgba(233,238,246,.72);
  --muted2:rgba(233,238,246,.55);
  --line:rgba(140,180,255,.18);
  --glow:rgba(140,180,255,.22);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  background: var(--bg0);
}
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  background-color: var(--bg0);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow:hidden;
  min-height: 100svh;
  min-height: 100vh;
  overscroll-behavior: none;
}

/* Fullscreen stage */
.stage{
  position:relative;
  height:100%;
  width:100%;
  isolation:isolate;
  min-height: 100svh;
  min-height: 100vh;
}

/* Brand */
.brand{
  position:absolute;
  top: clamp(14px, 2.6vw, 28px);
  left: clamp(14px, 2.6vw, 28px);
  z-index:3;
  opacity:.92;
  text-decoration:none;
}
.brand:hover{opacity:1}
.brand img{display:block; width:120px; height:60px; max-width:none; object-fit:contain; }

/* System background */
.system{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 650px at 30% 20%, rgba(140,180,255,.10), transparent 55%),
    radial-gradient(900px 650px at 75% 65%, rgba(140,180,255,.08), transparent 55%);
}
.system::before,
.system::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  z-index:0;
  filter: blur(26px);
  opacity: .16;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
}
/* Aurora / light beams (very subtle) */
.system::before{
  background:
    conic-gradient(from 210deg at 35% 45%,
      rgba(140,180,255,0) 0deg,
      rgba(140,180,255,.22) 40deg,
      rgba(140,180,255,0) 110deg,
      rgba(139,92,220,.14) 160deg,
      rgba(140,180,255,0) 240deg,
      rgba(140,180,255,.18) 300deg,
      rgba(140,180,255,0) 360deg);
  animation: auroraDrift1 46s ease-in-out infinite;
}
.system::after{
  background:
    radial-gradient(60% 50% at 70% 60%, rgba(140,180,255,.12), rgba(140,180,255,0) 70%),
    radial-gradient(55% 45% at 25% 70%, rgba(139,92,220,.10), rgba(139,92,220,0) 68%),
    radial-gradient(40% 35% at 55% 30%, rgba(140,180,255,.10), rgba(140,180,255,0) 66%);
  opacity: .14;
  animation: auroraDrift2 62s ease-in-out infinite;
}

@keyframes auroraDrift1{
  0%   { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.02); }
  50%  { transform: translate3d(2.2%, 1.6%, 0) rotate(2deg) scale(1.06); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.02); }
}
@keyframes auroraDrift2{
  0%   { transform: translate3d(1.2%, -1.6%, 0) scale(1.02); }
  50%  { transform: translate3d(-1.8%, 1.3%, 0) scale(1.06); }
  100% { transform: translate3d(1.2%, -1.6%, 0) scale(1.02); }
}
.system svg{
  width:100%;
  height:100%;
  display:block;
  position:relative;
  z-index:1;
  overflow: hidden;
}

/* overlays */
.noise{
  position:absolute;
  inset:0;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\");
  background-size:180px 180px;
  animation: noiseShift 10s linear infinite;
}
@keyframes noiseShift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-2%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

.vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(70% 70% at 50% 45%, transparent 0%, rgba(0,0,0,.22) 58%, rgba(0,0,0,.60) 100%);
  opacity:.95;
}

/* Floating hero (no card) */
.hero{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index:2;
  max-width: 720px;
  text-align: left;
  width: min(720px, calc(100% - 36px));
}

.hi{
  font-size: clamp(56px, 7.5vw, 92px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-shadow: 0 0 22px rgba(140,180,255,.08);
}
.dot{ color: rgba(233,238,246,.92); }

.sub{
  margin-top: 10px;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  color: rgba(233,238,246,.92);
  letter-spacing: -0.01em;
}
.tagline{
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted2);
}

/* staged reveal (subtle) */
.reveal{
  display:inline-block;
  opacity:0;
  transform: translateY(6px);
  will-change: transform, opacity;
  animation: revealIn .7s ease forwards;
  animation-delay: .5s; /* +0.5s */
}
.reveal2{
  display:inline-block;
  opacity:0;
  transform: translateY(6px);
  will-change: transform, opacity;
  animation: revealIn .7s ease forwards;
  animation-delay: 1s; /* +1.0s */
}
@keyframes revealIn{
  to{ opacity:1; transform: translateY(0); }
}

.ctaRow{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.btn{
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.cta1,
.cta2{
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
  animation: revealIn .7s ease forwards;
}
.cta1{ animation-delay: 1.5s; } /* +1.5s */
.cta2{ animation-delay: 2s; } /* +2.0s */

.primary{
  background: rgba(233,238,246,.95);
  color: #0b0f14;
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 rgba(140,180,255,0);
}
.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(140,180,255,.12);
}
.ghost{
  background: rgba(255,255,255,.06);
  color: var(--fg);
}
.ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
}

.mini{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(233,238,246,.50);
}

/* Footer (copyright) */
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(233,238,246,.50);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Mobile tweaks */
@media (max-width: 680px){
  .hero{
    left: 50%;
    right: auto;
    max-width: none;
  }
  .btn{ width: 100%; justify-content:center; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .noise{ animation: none !important; }
  .reveal, .reveal2{ animation: none !important; opacity:1 !important; transform:none !important; }
  .system::before, .system::after{ animation: none !important; }
  .cta1, .cta2{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Mobile: reduce aurora intensity */
@media (pointer: coarse){
  .system::before, .system::after{ opacity: .10; }
}