/* Minimal brand-inspired landing styles */
:root{
  --bg:#0b1224;           /* deep navy */
  --bg2:#101a37;
  --fg:#e6eefc;           /* soft white */
  --accent:#39c6ff;       /* cyan accent */
  --accent2:#7a5cff;      /* violet accent */
  --muted:#95a3c4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 80% 20%, var(--bg2), transparent 60%),
              radial-gradient(1000px 700px at 10% 90%, #0a1633, transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #070c19 100%);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  line-height:1.4;
}

.hero{
  min-height:100dvh;
  display:grid;
  grid-template-rows: auto 1fr auto;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* animated glow orbs */
.hero::before, .hero::after{
  content:"";
  position:absolute; inset:-20vh -20vw auto auto;
  width:60vmax; height:60vmax; filter:blur(80px);
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
  opacity:.15; transform:translate3d(0,0,0); animation:float 18s ease-in-out infinite alternate;
  z-index:-1;
}
.hero::after{
  inset:auto auto -30vh -30vw;
  background: radial-gradient(circle at 70% 70%, var(--accent2), transparent 60%);
  animation-duration:22s;
}

@keyframes float{
  to{ transform: translate3d(6vmax, -4vmax, 0) scale(1.05); opacity:.25;}
}

.topbar{
  display:flex; align-items:center; justify-content:flex-start;
  padding: clamp(12px, 3vmin, 32px);
}

.brand{ height:28px; opacity:.95; }

.center{
  display:grid; place-items:center; text-align:center; padding:8vmin 3vmin;
}

.slogan{
  font-size: clamp(36px, 8vw, 104px);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.nowrap{ white-space:nowrap; }

.cta{ margin-top: clamp(16px, 3vmin, 32px); }

.btn{
  display:inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent),
    rgba(255,255,255,.03);
  color:var(--fg); text-decoration:none; font-weight:700; letter-spacing:.3px;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(57,198,255,.0);
}
.btn:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
}
.btn:active{ transform: translateY(0); }

.foot{
  display:flex; align-items:center; justify-content:center;
  padding: 16px; color:var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{ animation:none }
  .btn{ transition:none }
}