:root {
      --klsr-navy: #1f2a37;
      --klsr-navy-light: #2c3a4b;
      --klsr-navy-dark: #151d27;
      --klsr-orange: #f89b24;
      --klsr-white: #ffffff;
      --klsr-gray-300: #b6c0cd;
    }

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

    html, body { height: 100%; }

    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(248, 155, 36, 0.12), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(44, 58, 75, 0.8), transparent 60%),
        var(--klsr-navy-dark);
      color: var(--klsr-white);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
      -webkit-font-smoothing: antialiased;
    }

    main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 16px;
    }

    .card {
      width: 100%;
      max-width: 640px;
      text-align: center;
      background: var(--klsr-navy);
      border: 1px solid var(--klsr-navy-light);
      border-radius: 28px;
      padding: 48px 28px 40px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

    .logo { width: clamp(160px, 45vw, 220px); height: auto; margin: 0 auto 28px; display: block; }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(248, 155, 36, 0.14);
      color: var(--klsr-orange);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    h1 {
      font-size: clamp(1.6rem, 5.5vw, 2.2rem);
      line-height: 1.2;
      margin-bottom: 14px;
    }

    p.lead {
      color: var(--klsr-gray-300);
      font-size: 1.05rem;
      line-height: 1.6;
      max-width: 46ch;
      margin: 0 auto 32px;
    }

    .progress {
      height: 8px;
      max-width: 360px;
      margin: 0 auto 36px;
      border-radius: 999px;
      background: var(--klsr-navy-light);
      overflow: hidden;
    }
    .progress i {
      display: block;
      height: 100%;
      width: 40%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--klsr-orange), #ffb957);
      animation: slide 2.4s ease-in-out infinite alternate;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      text-align: left;
    }
    .feature {
      background: var(--klsr-navy-dark);
      border: 1px solid var(--klsr-navy-light);
      border-radius: 16px;
      padding: 16px 18px;
    }
    .feature strong { display: block; margin-bottom: 4px; font-size: 0.98rem; }
    .feature span { color: var(--klsr-gray-300); font-size: 0.9rem; line-height: 1.45; }

    footer {
      text-align: center;
      padding: 20px 16px 28px;
      color: var(--klsr-gray-300);
      font-size: 0.85rem;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.75); }
    }
    @keyframes slide {
      from { margin-left: 0; }
      to { margin-left: 60%; }
    }

    @media (max-width: 520px) {
      .card { padding: 36px 20px 28px; border-radius: 22px; }
      .features { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .badge::before, .progress i { animation: none; }
    }