:root{
    --black:#000000;
    --white:#ffffff;
    --brand-red:#FF2640;
    --ink-cyan:#1ED5FC;
    --pink:#F7B5C5;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--black);
    color:var(--white);
    font-family:'Inter', system-ui, sans-serif;
    overflow-x:hidden;
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important;}
  }

  /* ---------- header: brand logo only, top left ---------- */
  header{
    /* Brand logo hidden for now — re-enable by removing this display:none. */
    display:none;
    position:fixed; top:0; left:0; right:0; z-index:10;
    padding:22px clamp(20px,5vw,48px);
  }
  header img{
    height:32px;
    width:auto;
    display:block;
  }

  /* ---------- ambient background ---------- */
  .ambient{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 900px 700px at 50% 42%, rgba(30,213,252,.10), transparent 65%),
      radial-gradient(ellipse 700px 500px at 50% 55%, rgba(255,38,64,.08), transparent 60%);
  }

  /* ---------- hero ---------- */
  main{
    position:relative; z-index:1;
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:120px 6% 80px;
    min-height:100svh;
  }

  .glow-wrap{
    position:relative;
    display:inline-block;
    isolation:isolate;
  }

  /* Persistent VHS-style glitch texture, always active (not just during the
     periodic bursts below): two color layers clipped to the logo's own
     silhouette (mask-image, so nothing bleeds past the artwork's edge)
     jitter a few pixels apart and screen-blend together for a chromatic-
     aberration/RGB-split fringe, and a masked scanline overlay multiplies
     fine horizontal bands over the whole shape for a CRT-static feel. */
  .glitch-layer{
    position:absolute;
    inset:0;
    -webkit-mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-size:100% 100%;
    mask-repeat:no-repeat;
    mask-position:center;
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:1;
  }
  .glitch-layer.chan-r{
    background:#ff2d6b;
    animation:chanShiftR 0.42s linear infinite;
  }
  .glitch-layer.chan-b{
    background:#00e5ff;
    animation:chanShiftB 0.36s linear infinite;
  }
  @keyframes chanShiftR{
    0%{ transform:translate(0,0); }
    25%{ transform:translate(-3px,.5px); }
    50%{ transform:translate(-1px,0); }
    75%{ transform:translate(-4px,-.5px); }
    100%{ transform:translate(0,0); }
  }
  @keyframes chanShiftB{
    0%{ transform:translate(0,0); }
    30%{ transform:translate(3px,-.5px); }
    55%{ transform:translate(1px,0); }
    80%{ transform:translate(4px,.5px); }
    100%{ transform:translate(0,0); }
  }
  .scanlines{
    position:absolute;
    inset:0;
    -webkit-mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-size:100% 100%;
    mask-repeat:no-repeat;
    mask-position:center;
    background-image:repeating-linear-gradient(to bottom,
      rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 1px,
      transparent 1px, transparent 3px);
    background-size:100% 5px;
    mix-blend-mode:multiply;
    pointer-events:none;
    z-index:3;
    animation:scanRoll 0.9s linear infinite;
  }
  @keyframes scanRoll{
    from{ background-position:0 0; }
    to{ background-position:0 5px; }
  }
  @media (prefers-reduced-motion: reduce){
    .glitch-layer, .scanlines{ animation:none; }
  }

  /* Glitch effect on the logo itself: brief, irregular bursts where the
     artwork jitters position, flashes an off-palette hue (from filter:hue-
     rotate/saturate), and gets sliced into a displaced horizontal band
     (via clip-path) — like a signal cutting out — then eases back to the
     clean, static artwork. linear timing makes each burst glide smoothly
     between states instead of hard-cutting. */
  .hero-logo{
    position:relative;
    z-index:2;
    display:block;
    width:min(78vw, 360px);
    height:auto;
    animation:logoGlitch 3.4s linear infinite;
  }
  @keyframes logoGlitch{
    0%,100%{ transform:translate(0,0); filter:none; clip-path:none; }
    4%{ transform:translate(-4px,0) skewX(-1deg); filter:hue-rotate(45deg) saturate(2.4) brightness(1.15); clip-path:inset(18% 0 55% 0); }
    5.5%{ transform:translate(3px,0); filter:hue-rotate(-55deg) saturate(2) brightness(.9); clip-path:inset(60% 0 10% 0); }
    7%{ transform:translate(0,0); filter:none; clip-path:none; }
    27%{ transform:translate(0,0); filter:none; clip-path:none; }
    28%{ transform:translate(5px,-2px); filter:hue-rotate(50deg) saturate(3) brightness(1.2); clip-path:inset(35% 0 40% 0); }
    29.5%{ transform:translate(-3px,1px); filter:hue-rotate(-35deg) saturate(1.6); clip-path:none; }
    31%{ transform:translate(0,0); filter:none; clip-path:none; }
    52%{ transform:translate(0,0); filter:none; clip-path:none; }
    53%{ transform:translate(-6px,1px); filter:hue-rotate(-70deg) saturate(2.2); clip-path:inset(48% 0 22% 0); }
    54.5%{ transform:translate(4px,0); filter:hue-rotate(40deg) saturate(1.8) brightness(1.1); clip-path:inset(8% 0 70% 0); }
    56%{ transform:translate(0,0); filter:none; clip-path:none; }
    76%{ transform:translate(0,0); filter:none; clip-path:none; }
    77%{ transform:translate(4px,-1px) skewX(1deg); filter:hue-rotate(-50deg) saturate(2.6); clip-path:inset(62% 0 8% 0); }
    78.5%{ transform:translate(-5px,0); filter:hue-rotate(30deg) saturate(1.7) brightness(.95); clip-path:none; }
    80%{ transform:translate(0,0); filter:none; clip-path:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-logo{ animation:none; }
  }
  .tagline{
    margin-top:14px;
    font-size:clamp(.95rem, 2vw, 1.1rem);
    color:rgba(255,255,255,.6);
    max-width:480px;
    line-height:1.6;
  }

  footer{
    position:relative; z-index:1;
    text-align:center;
    padding:22px 6% 28px;
    font-size:.72rem;
    color:rgba(255,255,255,.35);
    letter-spacing:.03em;
  }