/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #0A1628;
      --navy-mid:   #0F2044;
      --blue:       #2563EB;
      --blue-hover: #1D4ED8;
      --sky:        #60A5FA;
      --glass-bg:   rgba(255,255,255,0.10);
      --glass-border: rgba(255,255,255,0.20);
      --glass-inner: rgba(255,255,255,0.06);
      --white:      #FFFFFF;
      --off-white:  #F0F6FF;
      --muted:      rgba(255,255,255,0.55);
      --error:      #F87171;
      --success:    #34D399;
    }

    html, body {
      height: 100%;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
    }

    /* ── Animated Background ── */
    body {
      background: linear-gradient(135deg, var(--navy) 0%, #0D2456 45%, #132E6B 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      position: relative;
    }

    /* Ambient blobs */
    .blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.18;
      animation: drift 12s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }
    .blob-1 {
      width: 520px; height: 520px;
      background: radial-gradient(circle, #3B82F6, transparent);
      top: -140px; left: -120px;
      animation-duration: 14s;
    }
    .blob-2 {
      width: 380px; height: 380px;
      background: radial-gradient(circle, #6366F1, transparent);
      bottom: -80px; right: -100px;
      animation-duration: 18s; animation-delay: -6s;
    }
    .blob-3 {
      width: 260px; height: 260px;
      background: radial-gradient(circle, #0EA5E9, transparent);
      top: 50%; left: 55%;
      animation-duration: 10s; animation-delay: -3s;
    }

    @keyframes drift {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(40px, 30px) scale(1.08); }
    }

    /* Floating dots */
    .dots-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .dot {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.55);
      animation: floatUp linear infinite;
    }

    @keyframes floatUp {
      0%   { transform: translateY(0) scale(1);   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 0.6; }
      100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
    }

    /* ── Card ── */
    .card {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 440px;
      background: var(--glass-bg);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 40px 36px 36px;
      box-shadow:
        0 8px 32px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.08) inset;
      animation: cardIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(36px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── Illustration Header ── */
    .illus-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 28px;
    }

    .scene-svg {
      width: 200px;
      height: 88px;
      animation: sceneFade 0.9s 0.2s ease both;
    }
    @keyframes sceneFade {
      from { opacity: 0; transform: scale(0.88); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Car ride animation on the road */
    .car-group {
      animation: carDrive 3.6s ease-in-out infinite alternate;
    }
    @keyframes carDrive {
      from { transform: translateX(-6px); }
      to   { transform: translateX(6px); }
    }

    .brand-block {
      text-align: center;
      animation: fadeUp 0.7s 0.35s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .brand-eyebrow {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 4px;
    }

    .brand-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.2;
    }

    .brand-title span {
      color: var(--sky);
    }

    /* ── Form Section ── */
    .form-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: 20px;
      text-align: center;
      animation: fadeUp 0.7s 0.45s ease both;
    }

    .field-group {
      display: flex;
      flex-direction: column;
      gap: 14px;
      animation: fadeUp 0.7s 0.5s ease both;
    }

    .field {
      position: relative;
    }

    .field-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      display: flex;
      align-items: center;
      pointer-events: none;
      transition: color 0.2s;
    }

    .field input {
      width: 100%;
      background: var(--glass-inner);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 14px 16px 14px 46px;
      color: var(--white);
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 400;
      outline: none;
      transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    }

    .field input::placeholder {
      color: rgba(255,255,255,0.35);
    }

    .field input:focus {
      border-color: var(--sky);
      background: rgba(255,255,255,0.10);
      box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
    }

    .field input:focus + .field-icon,
    .field:focus-within .field-icon {
      color: var(--sky);
    }

    /* Reorder so icon appears after input in DOM but position absolute handles visual */
    .field .field-icon { order: -1; } /* not needed since absolute */

    /* Password toggle */
    .toggle-pw {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      padding: 0;
      display: flex;
      align-items: center;
      transition: color 0.2s;
      width: auto;
      margin: 0;
      font-size: 14px;
    }
    .toggle-pw:hover { color: var(--sky); background: none; }

    /* Validation states */
    .field.has-error input {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(248,113,113,0.15);
    }
    .field-error-msg {
      font-size: 11.5px;
      color: var(--error);
      margin-top: 5px;
      padding-left: 4px;
      display: none;
    }
    .field.has-error .field-error-msg { display: block; }

    /* Forgot */
    .forgot-row {
      text-align: right;
      margin-top: 6px;
      animation: fadeUp 0.7s 0.55s ease both;
    }
    .forgot-row a {
      font-size: 12.5px;
      color: var(--sky);
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.2s;
    }
    .forgot-row a:hover { opacity: 0.75; }

    /* ── Login Button ── */
    .btn-login {
      width: 100%;
      margin-top: 22px;
      padding: 15px;
      background: linear-gradient(135deg, var(--blue) 0%, #3B82F6 100%);
      border: none;
      border-radius: 12px;
      color: var(--white);
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s, box-shadow 0.18s;
      box-shadow: 0 4px 20px rgba(37,99,235,0.45);
      animation: fadeUp 0.7s 0.6s ease both;
    }

    .btn-login::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #3B82F6 0%, var(--blue) 100%);
      opacity: 0;
      transition: opacity 0.22s;
    }
    .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,0.55); }
    .btn-login:hover::before { opacity: 1; }
    .btn-login:active { transform: translateY(0); }

    .btn-login span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }

    /* Loading state */
    .btn-login.loading .btn-text { display: none; }
    .btn-login .btn-spinner { display: none; }
    .btn-login.loading .btn-spinner { display: inline-block; }

    .spinner {
      width: 18px; height: 18px;
      border: 2.5px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Divider ── */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0 0;
      animation: fadeUp 0.7s 0.65s ease both;
    }
    .divider-line { flex: 1; height: 1px; background: var(--glass-border); }
    .divider-text { font-size: 12px; color: var(--muted); white-space: nowrap; }

    /* ── Signup Row ── */
    .signup-row {
      text-align: center;
      margin-top: 18px;
      font-size: 13.5px;
      color: var(--muted);
      animation: fadeUp 0.7s 0.7s ease both;
    }
    .signup-row a {
      color: var(--sky);
      text-decoration: none;
      font-weight: 600;
      transition: opacity 0.2s;
    }
    .signup-row a:hover { opacity: 0.75; }

    /* ── Message ── */
    #message {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      min-height: 20px;
      transition: opacity 0.3s;
      animation: fadeUp 0.7s 0.72s ease both;
    }
    #message.success { color: var(--success); }
    #message.error   { color: var(--error); }

    /* ── Trust badges ── */
    .trust-row {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 22px;
      animation: fadeUp 0.7s 0.75s ease both;
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: rgba(255,255,255,0.35);
      font-weight: 500;
    }
    .trust-badge svg { flex-shrink: 0; }

    /* ── Responsive ── */
    @media (max-width: 480px) {
      .card { padding: 32px 24px 28px; border-radius: 20px; }
      .brand-title { font-size: 19px; }
      .scene-svg { width: 170px; height: 76px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; }
    }