:root{--blue:#0757c9;--navy:#061b3d;--red:#c62832}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"DM Sans",Arial,sans-serif;color:#fff;background:#04122b}

/* deep, matte blue: circular radial gradient, lit from the upper middle */
.stage{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#0b4aa8 0%,#093b8a 24%,#072c69 48%,#051f4d 72%,#04122b 100%)}
/* crimson vanishing upward into the blue, eased with many stops so there is no visible band */
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(168,28,44,.92) 0%,
    rgba(168,28,44,.80) 10%,
    rgba(160,30,52,.60) 22%,
    rgba(140,32,64,.38) 36%,
    rgba(110,34,80,.18) 50%,
    rgba(80,34,90,.06) 62%,
    transparent 74%)}

.center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;text-align:center;padding:0 20px}
.wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.8vw,16px)}
.center h3 .sep{display:inline-block;width:.26rem;height:.26rem;margin:0 .7rem;border-radius:50%;background:currentColor;font-size:0;vertical-align:middle;opacity:.9}
.center h3{margin:0;max-width:34em;font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(.58rem,2.5vw,.8rem);letter-spacing:.2em;line-height:1.5;color:rgba(255,255,255,.84);text-wrap:balance}
.center h1{font-family:Manrope,sans-serif;font-weight:800;color:#fff;letter-spacing:.05em;white-space:nowrap;
  font-size:clamp(2rem,min(10.5vw,20vh),7.5rem);line-height:1;animation:rise .9s ease both}
.wordmark .mark{height:clamp(3rem,min(15vw,28vh),9.5rem);width:auto;display:block;animation:rise .9s ease both}

/* three vertical white bars, bottom left */
.bars{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));z-index:3;
  display:flex;gap:9px;align-items:flex-end}
.bar{--h:clamp(150px,28vh,250px);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;
  width:clamp(22px,4.6vw,30px);height:var(--h);
  background:#fff;color:#000;text-decoration:none;border-radius:8px;
  box-shadow:0 10px 28px rgba(2,10,30,.35);
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
.bar span{writing-mode:vertical-rl;transform:rotate(180deg); /* first letter at the bottom, reading upward */
  font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(.7rem,1.8vw,.82rem);white-space:nowrap}
.bar:nth-child(2){--h:clamp(170px,32vh,300px)}
.bar{-webkit-tap-highlight-color:transparent;animation:rise .8s ease both}
.bar:nth-child(2){animation-delay:.1s}
.bar:nth-child(3){animation-delay:.2s}
.bar:active{transform:translateY(-4px);background:var(--red);color:#fff}
.bar:focus-visible{transform:translateY(-10px);background:var(--red);color:#fff;outline:none;box-shadow:0 0 0 3px #fff,0 18px 38px rgba(168,28,44,.5)}
@media(hover:hover){
  .bar:hover{transform:translateY(-10px);background:var(--red);color:#fff;box-shadow:0 18px 38px rgba(168,28,44,.5)}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* short landscape screens: keep bars clear of the wordmark */
@media(prefers-reduced-motion:reduce){.bar,.center h1{transition:none;animation:none}}

/* launch event pill under the wordmark */
.launch{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,3.2vh,30px);padding:10px 12px 10px 18px;border-radius:999px;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(.66rem,2.4vw,.78rem);letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s,color .3s,transform .3s,box-shadow .3s;animation:rise .9s .25s ease both;-webkit-tap-highlight-color:transparent}
.launch i{width:8px;height:8px;border-radius:50%;background:#ff8a8f;box-shadow:0 0 0 0 rgba(255,138,143,.7);animation:ping 2s ease-out infinite}
.launch b{padding:7px 14px;border-radius:999px;background:#fff;color:#061b3d;font-weight:800;transition:background .3s,color .3s}
.launch:active,.launch:focus-visible{outline:none;transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,10,30,.4)}
@media(hover:hover){.launch:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,10,30,.4)}.launch:hover b{background:var(--red);color:#fff}}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,138,143,0)}100%{box-shadow:0 0 0 0 rgba(255,138,143,0)}}
@media(prefers-reduced-motion:reduce){.launch,.launch i{animation:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the wordmark sits in the exact middle of the screen; the launch pill hangs below it without pushing it */
.center .launch{position:absolute;left:0;right:0;top:calc(100% + clamp(14px,2.6vh,26px));width:max-content;margin:0 auto}

/* smaller phones: shorter bars so the wordmark and the pill stay fully visible */
@media(max-width:600px) and (max-height:800px){.bar{--h:clamp(110px,22vh,190px)}.bar:nth-child(2){--h:clamp(130px,26vh,230px)}}
@media(max-width:600px) and (max-height:680px){.bar{--h:clamp(90px,18vh,140px)}.bar:nth-child(2){--h:clamp(106px,22vh,166px)}}

/* phones: the three bars span the full width like a row of tall tabs, tidier than a small cluster in the corner */
@media(max-width:600px){.bars{left:max(16px,env(safe-area-inset-left));right:auto;gap:8px}.bar{flex:none;width:clamp(22px,6vw,28px);border-radius:5px}.center h1{font-size:clamp(1.9rem,min(10vw,17vh),4.2rem)}.wordmark .mark{height:clamp(2.6rem,min(17vw,20vh),6rem)}.wordmark{gap:clamp(8px,2.4vw,14px)}.launch{padding:8px 8px 8px 14px;gap:10px;font-size:.62rem}.launch b{padding:6px 12px}}

/* short screens (about 600px tall or less, any width): the wordmark stays centred, the bars become a compact
   cluster at the bottom left, sized from the height so they never climb into the wordmark or the pill */
@media(max-height:600px){
  .center h1{font-size:clamp(1.7rem,min(9vw,14vh),5rem)}
  .wordmark .mark{height:clamp(2.4rem,min(15vw,18vh),5.5rem)}
  .center .launch{top:calc(100% + 12px)}
  .bars{left:max(16px,env(safe-area-inset-left));right:auto;bottom:max(14px,env(safe-area-inset-bottom));gap:6px}
  .bar,.bar:nth-child(2){flex:none;width:clamp(18px,5vw,24px);border-radius:8px}
  .bar{--h:clamp(96px,24vh,128px)}
  .bar:nth-child(2){--h:clamp(114px,26vh,140px)}
  .bar span{font-size:.6rem;letter-spacing:.08em}
}

.disc{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));max-width:min(360px,calc(100vw - 150px));margin:0;font:400 11px/1.45 "DM Sans",sans-serif;color:rgba(255,255,255,.72);text-align:right}
@media(max-width:520px){.disc{max-width:calc(100vw - 96px);font-size:10px;line-height:1.35}}
/* slow drifting glow behind everything: same blues, very low contrast, transform only */
.stage::after{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:-1;will-change:transform;
  background:radial-gradient(38% 38% at 25% 35%,rgba(70,140,255,.22),transparent 70%),radial-gradient(34% 34% at 75% 55%,rgba(7,87,201,.14),transparent 70%),radial-gradient(30% 30% at 55% 85%,rgba(255,255,255,.07),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(-4%,-3%,0) scale(1)}50%{transform:translate3d(5%,2%,0) scale(1.08)}100%{transform:translate3d(-2%,5%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){.stage::after{animation:none}}