:root{
    color-scheme:dark;
    --bg:#09090b;
    --text:#fafafa;
    --muted:#a1a1aa;
    --blue:#2ea7ff;
    --violet:#7c3cff;
    --pink:#f01886;
    --orange:#ff5a2f;
    --gold:#ffb000;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:
      radial-gradient(circle at 13% 18%,rgba(46,167,255,.16),transparent 27rem),
      radial-gradient(circle at 88% 26%,rgba(240,24,134,.13),transparent 30rem),
      radial-gradient(circle at 68% 88%,rgba(255,176,0,.08),transparent 24rem),
      var(--bg);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
.page-shell{
    width:min(1180px,calc(100% - 24px));
    min-height:100vh;
    margin:0 auto;
    display:grid;
    place-items:center;
    padding:28px 0 44px;
}
.hero{width:100%;text-align:center}

/* The PNG has a lot of transparent breathing room.
   Oversizing the image makes the VISIBLE lettering as large as on YLLT. */
.brand-wrap{
    width:100%;
    height:260px;
    margin:0 auto -4px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}
.main-logo{
    display:block;
    width:min(1450px,128vw);
    max-width:none;
    height:auto;
    flex:0 0 auto;
    transform:scale(1.28);
    transform-origin:center;
}
.brand-fallback{
    display:none;
    font-size:clamp(4rem,10vw,8rem);
    line-height:.9;
    font-weight:900;
    letter-spacing:-.07em;
    font-style:italic;
    background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--orange),var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.eyebrow{
    margin:0 0 16px;
    color:#d4d4d8;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.20em;
}
h1{
    max-width:900px;
    margin:0 auto;
    font-size:clamp(2.2rem,5vw,4.8rem);
    line-height:.98;
    letter-spacing:-.055em;
}
.tagline{
    max-width:680px;
    margin:24px auto 0;
    color:var(--muted);
    font-size:clamp(1rem,2vw,1.18rem);
    line-height:1.7;
}
.coming-soon{
    margin:18px 0 0;
    color:#71717a;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
@media(max-width:640px){
    .page-shell{width:min(100% - 18px,1180px);padding:14px 0 30px}
    .brand-wrap{height:190px;margin-bottom:-10px}
    .main-logo{width:155vw;transform:scale(1.18)}
    .eyebrow{font-size:.67rem;letter-spacing:.15em}
    h1{font-size:clamp(2rem,11vw,3.25rem);line-height:1.02}
    .tagline{margin-top:18px;line-height:1.6}
}