/* NORDIC FONTS */
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Thin-BF69660c268f4e8.ttf') format('truetype');
      font-weight: 100;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-ExtraLight-BF69660c2616e85.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Light-BF69660c264166c.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Regular-BF69660c265749b.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Medium-BF69660c264ba57.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-SemiBold-BF69660c2663559.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Bold-BF69660c260b3e6.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-ExtraBold-BF69660c2676fcd.ttf') format('truetype');
      font-weight: 800;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nordix';
      src: url('Fonts/gc-nordix-font-family/GCNordixDemo-Black-BF69660c254bc26.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
    }

    /* NIPPO font */
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Variable.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Extralight.otf') format('opentype');
      font-weight: 200;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Light.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
    }
    @font-face {
      font-family: 'Nippo';
      src: url('Fonts/Nippo/Nippo-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
    }

    /* IRONPUNK FONT FACES */
    @font-face {
      font-family: 'Ironpunk';
      src: url('Fonts/Iron Punk/Ironpunk.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: 'Ironpunk';
      src: url('Fonts/Iron Punk/Ironpunk Rounded.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
    }

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

    :root {
      --black: #000000;
      --white: #ffffff;
      --grey: #666666;
      --grey-mid: #999999;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--black);
      color: var(--white);
      font-family: 'Nordix', 'Inconsolata', monospace;
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
    }

    /* BACKGROUND */
    .bg {
      position: fixed;
      inset: 0;
      background-image: url('elevator-cropped.png');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      z-index: 0;
    }

    .bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.005) 30%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0.3) 100%
      );
    }

    /* LAYOUT */
    .page {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    /* HEADER */
    header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 28px 56px;
    }

    .header__mark {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #333;
    }

    /* CENTER CONTENT */
    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 48px;
      padding: 0 24px;
    }

    .hero__logo {
      width: min(500px, 78vw);
      display: block;
      opacity: 0.88;
      filter: brightness(0) invert(1) drop-shadow(0 2px 28px rgba(0,0,0,0.98));
    }

    /* SIGNUP */
    .signup {
      width: min(440px, 90vw);
      text-align: center;
    }

    .signup__heading {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 14px;
    }

    .signup__form {
      display: flex;
      border: 1px solid #333;
      transition: border-color 0.25s;
    }

    .signup__form:focus-within {
      border-color: #555;
    }

    .signup__input {
      flex: 1;
      background: rgba(0,0,0,0.5);
      color: var(--white);
      font-family: 'Nordix', 'Inconsolata', monospace;
      font-size: 14px;
      font-weight: 400;
      padding: 13px 18px;
      border: none;
      outline: none;
      border-radius: 0;
      -webkit-appearance: none;
    }

    .signup__input::placeholder {
      color: #444;
    }

    .signup__input:focus {
      background: rgba(0,0,0,0.7);
    }

    .signup__btn {
      background: var(--white);
      color: var(--black);
      font-family: 'Nordix', 'Inconsolata', monospace;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      padding: 13px 26px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background 0.2s;
      white-space: nowrap;
      -webkit-appearance: none;
    }

    .signup__btn:hover {
      background: #ccc;
    }

    .signup__meta {
      margin-top: 10px;
      font-size: 11px;
      color: #333;
      letter-spacing: 0.04em;
    }

    .signup__meta a {
      color: #555;
      text-decoration: none;
      border-bottom: 1px solid #333;
      transition: color 0.2s, border-color 0.2s;
    }

    .signup__meta a:hover {
      color: #999;
      border-color: #555;
    }

    .signup__success,
    .signup__error {
      display: none;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      padding: 15px 0;
      border-top: 1px solid #333;
    }

    .signup__success { color: var(--grey-mid); }
    .signup__error   { color: #888; border-color: #333; }

    /* FOOTER */
    footer {
      width: 100%;
      background: transparent;
      padding: 20px 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer__copy {
      font-size: 11px;
      color: #333;
      letter-spacing: 0.08em;
      font-family: 'Inconsolata', monospace;
    }

    .footer__mark {
      font-size: 11px;
      color: #222;
      letter-spacing: 0.05em;
    }

    /* PRIVACY MODAL */
    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.88);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-backdrop.open {
      display: flex;
    }

    .modal {
      width: min(560px, 100%);
      background: #0a0a0a;
      border: 1px solid #222;
      padding: 48px;
      position: relative;
    }

    .modal__close {
      position: absolute;
      top: 20px;
      right: 24px;
      background: none;
      border: none;
      color: #555;
      font-family: 'Inconsolata', monospace;
      font-size: 18px;
      font-weight: 300;
      cursor: pointer;
      line-height: 1;
      padding: 4px;
      transition: color 0.2s;
    }

    .modal__close:hover {
      color: var(--white);
    }

    .modal__title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: 28px;
    }

    .modal__body {
      font-size: 13px;
      font-weight: 400;
      line-height: 22px;
      color: #888;
      font-family: 'Inconsolata', monospace;
    }

    .modal__body p + p {
      margin-top: 16px;
    }

    .modal__body strong {
      color: #bbb;
      font-weight: 600;
    }

    /* RESPONSIVE */
    @media (max-width: 640px) {
      header,
      footer {
        padding: 20px 24px;
      }

      .hero__logo {
        width: min(300px, 85vw);
      }

      .center {
        gap: 36px;
      }

      .signup__form {
        flex-direction: column;
      }

      .signup__btn {
        padding: 13px;
      }

      .modal {
        padding: 32px 24px;
      }
    }