:root{
  color-scheme: dark;
  --horizon-y: 68%;
  --cyan: #9fe9ff;
  --cyan-strong: #6fd9ff;
  --blue: #5b9dff;
  --blue-strong: #2f78ff;
  --green: #9dffb0;
  --text-top: #eaf5ff;
  --text-mid: #a9cdf2;
  --text-low: #6f9bce;
}
*{box-sizing:border-box;}
html,body{margin:0;width:100%;min-height:100%;}
body{
  min-height:100vh;
  overflow:hidden;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(30,60,50,0.28), transparent 60%),
    linear-gradient(180deg,#071019 0%,#060e18 30%,#040a12 65%,#02060b 100%);
  color:#fff;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.landing{
  position:relative;
  height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}
.scene,.scene > *{position:absolute;pointer-events:none;}
.scene{inset:0;z-index:-1;overflow:hidden;}

/* atmosphere */
.aura-top{
  left:-15%;right:-15%;top:-16%;height:52%;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(150,255,170,0.20) 0%,
    rgba(110,225,190,0.14) 14%,
    rgba(100,195,255,0.16) 32%,
    rgba(60,130,255,0.10) 56%,
    transparent 82%);
  filter:blur(20px);
}
.aura-mid{
  inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(70,150,255,0.10), transparent 68%);
}
.aura-floor{
  left:-10%;right:-10%;bottom:-8%;height:34%;
  background:radial-gradient(ellipse at 50% 55%, rgba(85,210,255,0.16) 0%, rgba(60,135,255,0.09) 38%, transparent 78%);
  filter:blur(16px);
}
.columns{inset:0;}
.column{
  width:20vw;min-width:220px;height:88vh;top:6vh;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(130,205,255,0.10) 0%, rgba(80,160,255,0.05) 40%, transparent 75%);
  filter:blur(52px);
}
.column.l{left:6%;}
.column.c{left:40%;opacity:0.55;}
.column.r{right:6%;opacity:0.75;}

.horizon-glow{
  left:0;right:0;top:var(--horizon-y);height:14px;
  background:linear-gradient(90deg, transparent 0%, rgba(110,225,255,0.16) 10%, rgba(140,240,255,0.30) 50%, rgba(110,225,255,0.16) 90%, transparent 100%);
  filter:blur(9px);
}
.horizon-line{
  left:0;right:0;top:var(--horizon-y);height:1.5px;
  background:linear-gradient(90deg, transparent 0%, rgba(120,230,255,0.9) 10%, rgba(170,248,255,1) 50%, rgba(120,230,255,0.9) 90%, transparent 100%);
  box-shadow:0 0 18px rgba(130,230,255,0.5), 0 0 44px rgba(70,160,255,0.2);
}

/* ribbons */
.ribbons{left:-2%;bottom:calc(100% - var(--horizon-y) - 2%);width:clamp(300px,40vw,560px);height:clamp(220px,34vw,420px);overflow:visible;}
.ribbons svg{width:100%;height:100%;overflow:visible;display:block;}
.trail{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.trail.core{stroke:url(#g1);}
.trail.faint{stroke:url(#g2);}

.grain{inset:0;opacity:0.03;mix-blend-mode:overlay;
  background-image:repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0 0.5px, transparent 0.75px 3px);
  background-size:5px 5px;}
.vignette{inset:0;background:radial-gradient(ellipse at center, transparent 26%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.55) 100%);}

/* hero */
.hero{position:relative;display:grid;place-items:center;width:100%;padding:2rem;}
.title-shell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:fit-content;max-width:calc(100vw - 2rem);
  padding:clamp(1.3rem,2vw,1.8rem) clamp(2.5rem,4.2vw,4.8rem);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(24,68,122,0.72) 0%, rgba(14,46,90,0.82) 55%, rgba(8,30,60,0.88) 100%);
  border:1px solid rgba(185,230,255,0.16);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 28px 70px rgba(0,0,0,0.38),
    0 0 46px rgba(75,160,255,0.2),
    0 0 110px rgba(100,210,255,0.14);
  overflow:hidden;
}
.title-shell::before{
  content:"";position:absolute;inset:-18px;border-radius:inherit;
  background:radial-gradient(ellipse at center, rgba(110,210,255,0.24) 0%, rgba(75,160,255,0.12) 38%, transparent 78%);
  filter:blur(22px);z-index:-1;
}
.sheen{
  position:absolute;top:-60%;left:-35%;width:32%;height:220%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.28) 48%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.28) 52%,
    rgba(255,255,255,0.02) 70%,
    transparent 100%);
  transform:rotate(14deg);
  filter:blur(0.4px);
}
h1{
  position:relative;margin:0;padding-inline:0.08em;
  font-size:clamp(3rem,7vw,7.6rem);line-height:1;white-space:nowrap;
  font-weight:800;letter-spacing:-0.07em;text-align:center;
  background:linear-gradient(180deg, var(--text-top) 0%, var(--text-mid) 40%, var(--text-low) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.06)) drop-shadow(0 12px 26px rgba(54,135,236,0.14));
}
@media (prefers-reduced-motion:no-preference){
  .sheen{animation:sweep 6.5s cubic-bezier(.3,0,.2,1) infinite;}
}
@keyframes sweep{
  0%{left:-35%;}
  38%{left:135%;}
  100%{left:135%;}
}

@media (max-width:900px){
  .title-shell{padding:1rem clamp(1.5rem,4vw,2.4rem);}
  h1{font-size:clamp(2.3rem,10vw,4.6rem);letter-spacing:-0.06em;}
  .ribbons{width:17rem;height:7.5rem;}
  :root{--horizon-y:72%;}
}