:root {
      --aqua:      #00e5ff;
      --aqua-dim:  #00b8d4;
      --teal:      #00796b;
      --deep:      #011f2e;
      --deeper:    #00121d;
      --glow:      rgba(0, 229, 255, 0.35);
      --glow-soft: rgba(0, 229, 255, 0.12);
    }

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

    html, body {
      height: 100%;
      font-family: 'Exo 2', sans-serif;
      background: var(--deeper);
      color: var(--aqua);
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,150,180,.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,100,130,.20) 0%, transparent 70%),
        linear-gradient(160deg, #001e2e 0%, #00121d 50%, #001a28 100%);
      animation: bgShift 12s ease-in-out infinite alternate;
    }

    @keyframes bgShift {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(18deg); }
    }

    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 0;
      background-image:
        linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
    }

    .page {
      position: relative; z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem 5rem;
      gap: 0;
    }

    .hero {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title-wrap {
      text-align: center;
      animation: fadeDown .9s cubic-bezier(.22,1,.36,1) both;
    }

    .title-sub {
      font-family: 'Exo 2', sans-serif;
      font-size: clamp(.65rem, 1.8vw, .9rem);
      font-weight: 600;
      letter-spacing: .45em;
      text-transform: uppercase;
      color: var(--aqua-dim);
      opacity: .7;
      margin-bottom: 1rem;
    }

    h1 {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(6rem, 22vw, 18rem);
      line-height: .88;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: linear-gradient(135deg, #ffffff 0%, var(--aqua) 45%, var(--aqua-dim) 80%, #00e5ff88 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 40px var(--glow)) drop-shadow(0 0 100px rgba(0,229,255,.15));
      animation: pulse 4s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { filter: drop-shadow(0 0 40px var(--glow)) drop-shadow(0 0 100px rgba(0,229,255,.15)); }
      50%       { filter: drop-shadow(0 0 60px rgba(0,229,255,.6)) drop-shadow(0 0 130px rgba(0,229,255,.25)); }
    }

    .divider {
      width: min(480px, 90vw);
      height: 1px;
      margin: 2.5rem auto;
      background: linear-gradient(90deg, transparent, var(--aqua), transparent);
      opacity: .4;
      animation: fadeUp .9s .3s cubic-bezier(.22,1,.36,1) both;
    }

    .footer {
      text-align: center;
      animation: fadeUp .9s .5s cubic-bezier(.22,1,.36,1) both;
    }

    .soon {
      font-family: 'Exo 2', sans-serif;
      font-size: clamp(1rem, 3.5vw, 1.6rem);
      font-weight: 300;
      letter-spacing: .25em;
      text-transform: lowercase;
      color: rgba(255,255,255,.55);
      margin-bottom: 2rem;
    }

    .soon span {
      color: var(--aqua);
      opacity: .85;
    }

    /* ─── links ─── */
    .links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .75rem 1.25rem;
    }

    .links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .55rem 1.4rem;
      font-family: 'Exo 2', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--aqua);
      border: 1px solid rgba(0,229,255,.3);
      border-radius: 3px;
      background: rgba(0,229,255,.05);
      backdrop-filter: blur(6px);
      transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .2s;
      overflow: hidden;
    }

    .links a::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 40%, rgba(0,229,255,.12) 100%);
      opacity: 0;
      transition: opacity .3s;
    }

    .links a:hover {
      color: #fff;
      background: rgba(0,229,255,.14);
      border-color: var(--aqua);
      box-shadow: 0 0 18px var(--glow), inset 0 0 14px rgba(0,229,255,.06);
      transform: translateY(-2px);
    }

    .links a:hover::before { opacity: 1; }

    .links a svg {
      width: 14px; height: 14px;
      flex-shrink: 0;
      fill: currentColor;
    }

    .corner {
      position: fixed;
      width: 80px; height: 80px;
      border-color: rgba(0,229,255,.18);
      border-style: solid;
      pointer-events: none;
      z-index: 2;
    }
    .corner--tl { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
    .corner--tr { top: 24px; right: 24px; border-width: 1px 1px 0 0; }
    .corner--bl { bottom: 24px; left: 24px; border-width: 0 0 1px 1px; }
    .corner--br { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }