@font-face {
      font-family: 'Aerodome';
      src:
        url('AerodomeRegular.otf') format('opentype');
      font-display: swap;
    }

    :root {
      --c1: #4a4473;
      --c2: #fc7c5e;
      --c3: #885477;
      --c4: #fdc89f;
      --bg: #0b0b12;
    }

    body {
      background: linear-gradient(120deg, var(--c1), var(--c3), var(--c2));
      background-size: 400% 400%;
      animation: gradientMove 20s ease infinite;
      color: #eaeaf0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
      max-width: 100vw;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    body { opacity: 0; animation: pageIn 0.8s ease forwards; }
    @keyframes pageIn { to { opacity: 1; } }

    .glass-nav {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(100vw - 32px);
      width: max-content;
      backdrop-filter: blur(28px) saturate(180%);
      background: rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 10px 26px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 20px 60px rgba(0,0,0,0.45);
      z-index: 1000;
      white-space: nowrap;
    }

    .glass-nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      font-size: 0.95rem;
      opacity: 0.85;
    }

    .glass-nav a:hover { color: var(--c4); opacity: 1; }


    .hero {
      min-height: 90svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      text-align: center;
    }

    .hero-title {
      font-family: 'Aerodome', system-ui, sans-serif;
      font-size: clamp(3rem, 14vw, 8rem);
      letter-spacing: 0.14em;
      opacity: 0;
      transform: scale(2);
      animation: heroIn 1.8s cubic-bezier(.19,1,.22,1) forwards;
      word-break: break-word;
    }

    @keyframes heroIn { to { opacity: 1; transform: scale(1); } }


    section.panel {
      min-height: auto;
      display: flex;
      align-items: center;
      padding: 48px 16px;
      max-width: 100vw;
      overflow-x: clip;
    }

    .panel-content {
      width: 100%;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease;
    }

    .panel-content.visible { opacity: 1; transform: translateY(0); }

    .parallax { transform: translateY(var(--offset, 0px)); }

    .glass-card {
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(30px) saturate(180%);
      border-radius: 24px;
      padding: 28px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 30px 80px rgba(0,0,0,0.45);
    }

    .feature {
      padding: 26px;
      border-radius: 22px;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(22px);
      height: 100%;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 20px 60px rgba(0,0,0,0.45);
      z-index: 1000;
    }

    .feature i { font-size: 30px; color: var(--c2); }
    .feature h4 { margin-top: 14px; color: var(--c4); }


    .download-btn {
      margin-top: 24px;
      padding: 14px 34px;
      border-radius: 999px;
      border: none;
      font-weight: 600;
      background: linear-gradient(135deg, var(--c2), var(--c4));
      color: #000;
      box-shadow: 0 16px 40px rgba(252,124,94,0.45);
      cursor: not-allowed;
      width: 100%;
      max-width: 320px;
    }

    footer { padding: 28px 0; text-align: center; opacity: 0.6; }


    @media (max-width: 768px) {
      html, body {
        overflow-x: hidden;
        overscroll-behavior-x: none;
      }

      .glass-nav {
        padding: 8px 18px;
        max-width: calc(100vw - 24px);
      }

      .glass-nav a {
        margin: 0 6px;
        font-size: 0.85rem;
      }

      .row.g-4 {
        margin-left: 0;
        margin-right: 0;
      }
    }
      .glass-nav a {
        margin: 0 6px;
        font-size: 0.85rem;
      }
      .row.g-4 > div {
        margin-bottom: 16px;
      }