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

   :root {
      --blue-400: #60A5FA;
      --blue-500: #3B82F6;
      --blue-600: #2563EB;
      --blue-700: #1D4ED8;
      --dark-950: #06080C;
      --dark-800: #111827;
      --dark-700: #1A2236;
      --dark-600: #243049;
      --gray-500: #6B7A96;
      --gray-400: #8896B0;
      --gray-300: #A8B8D0;
      --green-500: #22C55E;
      --green-600: #16A34A;
      --amber-400: #FBBF24;
      --red-400: #F87171;
      --font: 'Outfit', -apple-system, sans-serif;
    }

    html { font-size: 16px; -webkit-font-smoothing: antialiased; }

    body {
      font-family: var(--font);
      background: var(--dark-950);
      color: #F0F4FA;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }

    body::before {
      content: '';
      position: fixed;
      top: -30%; left: 50%;
      transform: translateX(-50%);
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .container { width: 100%; max-width: 440px; position: relative; z-index: 1; }

    .card {
      background: var(--dark-800);
      border: 1px solid rgba(96,165,250,0.08);
      border-radius: 16px;
      padding: 2.5rem 2rem;
      box-shadow: 0 0 60px rgba(37,99,235,0.06), 0 8px 32px rgba(0,0,0,0.5);
      animation: fadeUp 0.6s ease-out;
    }

    .card-title { font-size: 1.5rem; font-weight: 700; color: #FFF; letter-spacing: -0.03em; }
    .card-subtitle { font-size: 0.875rem; color: var(--gray-400); margin-top: 0.5rem; line-height: 1.6; margin-bottom: 2rem; }

    .field { margin-bottom: 1.25rem; }
    .field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--gray-300); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.45rem; }
    .field input { width: 100%; padding: 0.75rem 0.9rem; background: var(--dark-700); border: 1.5px solid var(--dark-600); border-radius: 8px; color: #FFF; font-family: var(--font); font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
    .field input::placeholder { color: var(--gray-500); }
    .field input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

    .phone-row { display: grid; grid-template-columns: 68px 68px 1fr; gap: 0.5rem; }
    .phone-row input { text-align: center; }
    .phone-row input:last-child { text-align: left; }
    .field-hint { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.35rem; }

    .sep { height: 1px; background: var(--dark-600); margin: 1.5rem 0; }

    .cf-turnstile { margin-bottom: 1rem; }

    .btn-submit { width: 100%; padding: 0.85rem 1.5rem; background: var(--blue-600); border: none; border-radius: 10px; color: #FFF; font-family: var(--font); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .btn-submit:hover:not(:disabled) { background: var(--blue-700); box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
    .btn-submit:active:not(:disabled) { transform: scale(0.98); }
    .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-submit .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #FFF; border-radius: 50%; animation: spin 0.6s linear infinite; margin: 0 auto; }
    .btn-submit.loading .btn-text { display: none; }
    .btn-submit.loading .spinner { display: block; }

    .msg { margin-top: 1.25rem; padding: 1rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.6; display: none; animation: fadeUp 0.35s ease-out; }
    .msg.show { display: block; }
    .msg.success { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.18); color: #ffffff; }
    .msg.warning { background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.15); color: var(--amber-400); }
    .msg.error-msg { background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.15); color: var(--red-400); }
    .msg strong { font-weight: 600; }
    .msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

    .btn-group { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding: 0.65rem 1.3rem; background: var(--green-500); color: #ffffff; font-weight: 600; font-size: 0.85rem; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
    .btn-group:hover { background: var(--green-600); box-shadow: 0 4px 14px rgba(34,197,94,0.25); }

    .support { text-align: center; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--dark-600); }
    .support p { font-size: 0.8rem; color: var(--gray-500); }
    .support a { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 500; color: var(--blue-400); text-decoration: none; transition: color 0.2s; }
    .support a:hover { color: var(--blue-500); }
    .support a svg { width: 16px; height: 16px; }

    .video-help { margin-top: 1rem; }
    .video-help-title { font-size: 0.8rem; color: var(--gray-300); margin-bottom: 0.5rem; }
    .video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--dark-700); border: 1px solid var(--dark-600); }
    .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 480px) {
      .card { padding: 2rem 1.4rem; }
      .card-title { font-size: 1.3rem; }
      .phone-row { grid-template-columns: 60px 60px 1fr; gap: 0.4rem; }
    }