:root{
      --bg:#0a0a0a; --fg:#f2f2f2; --muted:#a0a0a0; --line:#151515;
      --btn:#ffffff; --btnTxt:#000000;
    }

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

      color:var(--fg);

      font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      letter-spacing:.2px;

      display:flex;
      justify-content:center;
      align-items:center;

      min-height:100vh;

      overflow-x:hidden;
    }

    /* Subtle dimensional grid + lines (artistic but quiet) */
    
    .lines,
    .cuts{
      display:none;
    }

    main{
      position:relative; z-index:1;
      display:grid; place-items:center; gap:30px;
      padding:24px;
    }

    /* Title — large, uppercase, split-line accent */
    h1{
      position:relative; margin:0;
      text-transform:uppercase; font-weight:800; letter-spacing:4px;
      font-size:clamp(48px, 11vw, 160px); line-height:.82;
      filter: drop-shadow(0 18px 22px rgba(0,0,0,.35));
      text-align:center;
    }
  
    /* Center buttons cluster */
    .cta-wrap{
      display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
    }
    .cta{
      appearance:none;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(0,0,0,.15);
      color:var(--fg);

      text-decoration:none;
      
      padding:12px 20px;
      text-transform:uppercase;
      letter-spacing:1.4px;
      font-size:12px;

      cursor:pointer;
      position:relative;
      overflow:hidden;

      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      transition: all .18s ease;
    }
    
     .cta::before{
      content:"";
      position:absolute;
      top:0;
      left:-120%;
      width:60%;
      height:100%;

      background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
      );

      transform:skewX(-20deg);

      pointer-events:none; /* 🔥 THIS FIXES THE GLITCH */
    }
    
     .cta:hover{
      background:rgba(255,255,255,.92);
      color:#000;
      letter-spacing:1.8px;
      transform:translateY(-2px);
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    @keyframes sheen{
      to{
        left:140%;
      }
    }
    
    /* Minimal footer with year, kept microscopic */

    footer{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:11px; letter-spacing:.6px; }

    /* Motion polish (respect reduced motion) */
    
    @media (prefers-reduced-motion:no-preference){
      .cta{ transition: all .14s ease; }
      h1{ transition: letter-spacing .18s ease; }
      h1:hover{ letter-spacing:6px; }
      body{ transition: background .3s ease; }
    }
    
    /* A11y */
    :focus-visible{
      outline:1px dashed #fff;
      outline-offset:3px;
    }

  /* Top & bottom image banners */
   
    .banner-top,
    .banner-bottom{
      position:fixed;
      left:0;
      width:100%;
      height:40px;

      background-image:url('../images/banner.png');
      background-repeat:repeat-x;
      background-position:center;
      background-size:auto 40px;

      opacity:0.25;
      pointer-events:none;

      z-index:0;
    }

    .banner-top,
    .banner-bottom{
      animation:
        bannerScroll 35s linear infinite,
        bannerPulse 4s ease-in-out infinite alternate;
    }

    .banner-bottom{
      animation-direction:
        reverse,
        alternate;
    }
   
    @keyframes bannerScroll{
      from{ background-position-x:0; }
      to{ background-position-x:400px; }
    }

    @keyframes bannerPulse{
      from{ opacity:0.18; }
      to{ opacity:0.28; }
    }

    .banner-top{
      top:0;
    }

    .banner-bottom{
      bottom:0;
      transform:rotate(180deg);
    }
    
    .cta-wrap:hover .cta{
      opacity:0.4;
    }

    .cta-wrap .cta:hover{
      opacity:1;
    }

    .logo{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    }

    .logo img{
      width:clamp(140px, 20vw, 260px);
      height:auto;
      opacity:0.95;
      user-select:none;
      pointer-events:none;
    }

  /* optional subtle hover effect */
  .logo img{
      transition:transform .2s ease, opacity .2s ease;
    }

  .logo:hover img{
      transform:scale(1.03);
      opacity:1;
    }
      .logo{
      transform: translateY(-35px);
    }
    
        body{
      padding-top:25px;
      padding-bottom:25px;
      overflow-x:hidden;
    }

      * {
    filter: none !important;
    text-shadow: none !important;
    }
    
    .reveal{
      opacity:0;
      transform:translateY(40px);
      transition:opacity .7s ease, transform .7s ease;
    }

    .reveal.show{
      opacity:1;
      transform:translateY(0);
    }

    .logo{
      transition: transform .15s ease;
    }

      .secret-dancer{
      position:fixed;
      width:60px;
      height:auto;
      z-index:9999;
      cursor:pointer;
      user-select:none;
      animation: floaty 1.5s ease-in-out infinite alternate;
      touch-action:manipulation;
    }

    @keyframes floaty{
      from{
        transform:translateY(0px);
      }
      to{
        transform:translateY(-10px);
      }
    }
    
        .secret-mode{
      animation: secretFlash .8s ease;
    }

    @keyframes secretFlash{
      50%{ filter:invert(1); }
    }

     .copyright{
    margin-top:18px;
    text-align:center;
    font-size:9px;
    letter-spacing:2px;
    color:rgba(255,255,255,.22);
    line-height:1.8;
    text-transform:uppercase;
  }