:root{
    --ink:        #eef4ff;
    --ink-soft:   rgba(226,238,255,.84);
    --ink-dim:    rgba(226,238,255,.52);
    --bg:         #03070f;
    --ease:       cubic-bezier(.22,1,.36,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{
    height:100%;
    background:var(--bg);
    overflow:hidden;
  }

  body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }

  #bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
  }

  body.no-gl #bg{ display:none; }
  body.no-gl::before{
    content:'';
    position:fixed;
    inset:-25%;
    z-index:0;
    background:
      radial-gradient(45% 55% at 25% 30%, #2f6fd0 0%, transparent 62%),
      radial-gradient(40% 50% at 78% 62%, #7fb4ff 0%, transparent 60%),
      radial-gradient(60% 60% at 50% 95%, #0a1c3d 0%, transparent 70%),
      linear-gradient(160deg, #040a1a 0%, #071733 50%, #030a16 100%);
    filter:blur(40px) saturate(115%);
    animation:drift 26s var(--ease) infinite alternate;
  }
  @keyframes drift{
    from{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(-2deg); }
    to  { transform:translate3d(3%,2%,0)   scale(1.15) rotate(2deg);  }
  }

  .veil{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(82% 66% at 50% 50%, rgba(3,7,15,0) 0%, rgba(3,7,15,.14) 60%, rgba(3,7,15,.55) 100%),
      linear-gradient(to bottom, rgba(3,7,15,.20) 0%, rgba(3,7,15,0) 30%, rgba(3,7,15,0) 70%, rgba(3,7,15,.28) 100%);
  }

  .stage{
    position:relative;
    z-index:2;
    height:100%;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8vh 6vw;
    text-align:center;
  }

  .wordmark{
    font-size:clamp(2.05rem, 8.4vw, 7.25rem);
    font-weight:200;
    letter-spacing:.34em;
    line-height:1;
    text-indent:.34em;
    color:var(--ink);
    text-shadow:
      0 0 1px rgba(255,255,255,.28),
      0 0 42px rgba(120,175,255,.30),
      0 0 120px rgba(60,120,235,.20);
    white-space:nowrap;
  }

  .rule{
    width:min(190px, 34vw);
    height:1px;
    margin:clamp(1.6rem, 3.6vh, 2.9rem) 0;
    border:0;
    background:linear-gradient(to right,
      transparent,
      rgba(200,224,255,.55) 30%,
      rgba(200,224,255,.55) 70%,
      transparent);
  }

  .tagline{
    font-size:clamp(.86rem, 2.05vw, 1.22rem);
    font-weight:300;
    letter-spacing:.075em;
    line-height:1.62;
    color:var(--ink-soft);
    max-width:min(60ch, 90vw);
    text-wrap:balance;
  }

  .status{
    margin-top:clamp(1.5rem, 3.4vh, 2.6rem);
    font-size:clamp(.55rem, 1.3vw, .72rem);
    font-weight:300;
    letter-spacing:.5em;
    text-indent:.5em;
    color:var(--ink-dim);
    text-transform:uppercase;
    white-space:nowrap;
  }

  .reveal{
    opacity:0;
    transform:translateY(14px);
    filter:blur(9px);
    animation:reveal 1.85s var(--ease) forwards;
    will-change:opacity, transform, filter;
  }
  .wordmark{ animation-delay:.28s; }

  .rule{
    transform:translateY(8px);
    filter:blur(2px);
    animation-name:revealSmall;
    animation-duration:1.2s;
    animation-delay:.78s;
  }
  .tagline{
    transform:translateY(10px);
    filter:blur(3.5px);
    animation-name:revealSmall;
    animation-duration:1.1s;
    animation-delay:1.02s;
  }
  .status{
    transform:translateY(8px);
    filter:blur(2.5px);
    animation-name:revealSmall;
    animation-duration:1.0s;
    animation-delay:1.30s;
  }

  @keyframes reveal{
    to{ opacity:1; transform:none; filter:blur(0); }
  }
  @keyframes revealSmall{
    to{ opacity:1; transform:none; filter:blur(0); }
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{ animation-duration:.01ms; opacity:1; transform:none; filter:none; }
    body.no-gl::before{ animation:none; }
  }

  @media (max-width: 420px){
    .wordmark{ letter-spacing:.22em; text-indent:.22em; }
    .status  { letter-spacing:.34em; text-indent:.34em; }
  }

  @media (max-height: 540px){
    .stage{ padding:5vh 6vw; }
    .rule{ margin:clamp(.9rem, 2.2vh, 1.6rem) 0; }
    .status{ margin-top:clamp(.9rem, 2.2vh, 1.5rem); }
  }

[data-plx-root]{
  height:100%;
}