:root {
    --green-950: #06130d;
    --green-900: #0b2418;
    --green-800: #123524;
    --green-700: #166534;
    --green-600: #16a34a;
    --green-500: #22c55e;
    --green-400: #4ade80;
    --mint: #dff8ea;
    --white: #ffffff;
    --soft: #f6fbf8;
    --text: #17231c;
    --muted: #647067;
    --border: #dbe8df;
    --danger: #b91c1c;
    --success: #15803d;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    
#desktop-warning {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    color: white;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* Block phones and tablets */
@media screen and (max-width: 1024px) {
    #desktop-warning {
        display: flex;
    }
    
    main, .opening-screen {
        display: none !important;
    }

    body {
        overflow: hidden;
    }
}
    
body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(circle at 12% 18%, rgba(74, 222, 128, 0.24), transparent 28%), 
        radial-gradient(circle at 82% 76%, rgba(34, 197, 94, 0.18), transparent 30%),
        linear-gradient(135deg, var(--green-950), var(--green-900) 48%, #0f2e20);
    overflow: hidden;
    color: var(--text);
}

/* Opening Animation Screen */
.opening-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.22), transparent 35%),
        linear-gradient(135deg, #04110a, #0b2418 55%, #06130d);
    color: white;
    transition: opacity 1.45s ease, visibility 1.45s ease, transform 1.45s ease, filter 1.45s ease;
}

.opening-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.08);
    filter: blur(18px);
}

.opening-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    animation: moveGrid 8s linear infinite;
    opacity: 0.8;
}

    .scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(74,222,128,0.85), transparent);
      box-shadow: 0 0 20px rgba(74,222,128,0.8);
      animation: scanDown 3.4s ease-in-out infinite;
    }

    .scan-line-vertical {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(74,222,128,0.85), transparent);
      box-shadow: 0 0 20px rgba(74,222,128,0.8);
      animation: scanAcross 4.2s ease-in-out infinite;
    }

    .opening-orb {
      position: absolute;
      width: 440px;
      height: 440px;
      border-radius: 50%;
      border: 1px solid rgba(74,222,128,0.22);
      animation: rotateOrb 9s linear infinite;
    }

    .opening-orb::before,
    .opening-orb::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      inset: 34px;
      border: 1px dashed rgba(74,222,128,0.22);
    }

    .opening-orb::after {
      inset: 78px;
      border-style: solid;
      opacity: 0.45;
    }

    .opening-glow {
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: rgba(34, 197, 94, 0.18);
      filter: blur(70px);
      animation: glowPulse 2.5s ease-in-out infinite;
    }

    .opening-content {
      position: relative;
      z-index: 5;
      width: min(90vw, 600px);
      text-align: center;
      padding: 36px 28px 150px;
      animation: centerStage 9.5s ease forwards;
    }

    .finance-skit {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .coin {
      position: absolute;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #bbf7d0, #22c55e);
      color: #052211;
      font-weight: 900;
      box-shadow: 0 0 25px rgba(74,222,128,0.45);
      opacity: 0;
      animation: coinDrop 9.5s ease forwards;
    }

    .coin-1 { top: 13%; left: 18%; animation-delay: 0.25s; }
    .coin-2 { top: 20%; right: 18%; animation-delay: 0.75s; }
    .coin-3 { bottom: 20%; left: 24%; animation-delay: 1.25s; }
    .coin-4 { bottom: 16%; right: 24%; animation-delay: 1.75s; }
    .coin-5 { top: 10%; left: 42%; animation-delay: 2.25s; }
    .coin-6 { top: 34%; left: 7%; animation-delay: 2.75s; }
    .coin-7 { top: 38%; right: 7%; animation-delay: 3.25s; }
    .coin-8 { bottom: 32%; left: 12%; animation-delay: 3.75s; }
    .coin-9 { bottom: 30%; right: 12%; animation-delay: 4.25s; }
    .coin-10 { top: 9%; right: 38%; animation-delay: 4.75s; }

    .skit-card {
      position: absolute;
      width: 190px;
      min-height: 128px;
      border-radius: 22px;
      padding: 18px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(187,247,208,0.22);
      backdrop-filter: blur(16px);
      box-shadow: 0 24px 70px rgba(0,0,0,0.22);
      color: white;
      opacity: 0;
    }

    .ledger-card {
      top: 20%;
      left: 10%;
      animation: cardSlideLeft 9.5s ease forwards;
    }

    .budget-card {
      top: 18%;
      right: 10%;
      animation: cardSlideRight 9.5s ease forwards;
    }

    

    .card-title {
      font-size: 11px;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 14px;
      font-weight: 900;
    }

    .ledger-line {
      height: 9px;
      border-radius: 999px;
      background: rgba(187,247,208,0.65);
      margin-bottom: 9px;
      transform-origin: left;
      transform: scaleX(0);
      animation: writeLine 9.5s ease forwards;
    }

    .ledger-line.w90 { width: 90%; animation-delay: 2.15s; }
    .ledger-line.w65 { width: 65%; animation-delay: 2.65s; }
    .ledger-line.w78 { width: 78%; animation-delay: 3.15s; }

    .approved-stamp {
      position: absolute;
      right: 14px;
      bottom: 12px;
      padding: 5px 9px;
      border: 2px solid #86efac;
      border-radius: 8px;
      color: #bbf7d0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1px;
      transform: rotate(-9deg) scale(0);
      animation: stampIn 9.5s ease forwards;
    }

    .budget-ring {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      margin-bottom: 13px;
      background:
        conic-gradient(#4ade80 0deg, #4ade80 260deg, rgba(255,255,255,0.17) 260deg);
      box-shadow: inset 0 0 0 9px rgba(6,19,13,0.85);
      transform: scale(0) rotate(-90deg);
      animation: budgetSpin 9.5s ease forwards;
    }

    .budget-mini-line {
      height: 8px;
      width: 82%;
      border-radius: 999px;
      background: rgba(187,247,208,0.58);
      margin-bottom: 9px;
      transform: scaleX(0);
      transform-origin: left;
      animation: writeLine 9.5s ease forwards;
      animation-delay: 3.6s;
    }

    .budget-mini-line.short {
      width: 56%;
      animation-delay: 4.1s;
    }

    

    

    

    .route-line {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(74,222,128,0.9), transparent);
      opacity: 0;
      transform-origin: left;
      animation: routeFlash 9.5s ease forwards;
    }

    .route-1 {
      width: 32vw;
      top: 39%;
      left: 25%;
      --r: 8deg;
      transform: rotate(8deg) scaleX(0);
    }

    .route-2 {
      width: 28vw;
      top: 60%;
      left: 38%;
      --r: -14deg;
      transform: rotate(-14deg) scaleX(0);
      animation-delay: 0.4s;
    }

    .route-dot {
      position: absolute;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #86efac;
      box-shadow: 0 0 22px #4ade80;
      opacity: 0;
      animation: dotTravel 9.5s ease forwards;
    }

    .dot-a { top: 38%; left: 25%; animation-delay: 3.1s; }
    .dot-b { top: 45%; left: 52%; animation-delay: 4.0s; }
    .dot-c { top: 58%; left: 61%; animation-delay: 4.9s; }

    .splash-stage-text {
      position: relative;
      z-index: 5;
      margin-top: 42px;
      color: #bbf7d0;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.4px;
      margin: -12px 0 22px;
      min-height: 18px;
      animation: stageTextGlow 1.8s ease-in-out infinite;
    }

    .seal {
      width: 130px;
      height: 130px;
      margin: 0 auto 24px;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      box-shadow: 0 0 0 rgba(74, 222, 128, 0.5);
      animation: sealFloat 2.2s ease-in-out infinite;
    }

    .seal-inner {
      width: 92px;
      height: 92px;
      border-radius: 25px;
      background: linear-gradient(145deg, var(--green-400), var(--green-600));
      color: #052211;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -1px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 16px 35px rgba(22,163,74,0.35);
    }

    .opening-title {
      font-size: clamp(32px, 5vw, 50px);
      font-weight: 900;
      margin-bottom: 10px;
      letter-spacing: -1.5px;
    }

    .opening-subtitle {
      color: rgba(255,255,255,0.72);
      font-size: 16px;
      margin-bottom: 30px;
    }

    .loading-track {
      margin-top: 86px;
      width: min(380px, 80vw);
      height: 10px;
      margin: 0 auto 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.13);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
    }

    .loading-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green-600), var(--green-400), #bbf7d0);
      animation: loadFinance 8.8s ease forwards;
    }

    .loading-text {
      margin-top: 8px;
      font-size: 12px;
      letter-spacing: 1.9px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.64);
    }

    /* =========================================================
       MAIN LOGIN SCREEN
    ========================================================= */

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: scale(0.985) translateY(14px);
      filter: blur(10px);
      animation: pageReveal 1.65s ease forwards;
      animation-delay: 8.75s;
    }

    .page::before,
    .page::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(74, 222, 128, 0.12);
      filter: blur(8px);
      animation: drift 12s ease-in-out infinite;
      pointer-events: none;
    }

    .page::before {
      width: 260px;
      height: 260px;
      top: 120px;
      left: -80px;
    }

    .page::after {
      width: 360px;
      height: 360px;
      right: -140px;
      bottom: 80px;
      animation-delay: -4s;
    }

    .floating-shapes span {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(187,247,208,0.5);
      animation: floatParticle 10s linear infinite;
      pointer-events: none;
    }

    .floating-shapes span:nth-child(1) { left: 8%; animation-delay: 0s; width: 8px; height: 8px; }
    .floating-shapes span:nth-child(2) { left: 16%; animation-delay: 1.2s; width: 13px; height: 13px; }
    .floating-shapes span:nth-child(3) { left: 27%; animation-delay: 2.4s; width: 7px; height: 7px; }
    .floating-shapes span:nth-child(4) { left: 39%; animation-delay: 3.6s; width: 15px; height: 15px; }
    .floating-shapes span:nth-child(5) { left: 51%; animation-delay: 4.8s; width: 9px; height: 9px; }
    .floating-shapes span:nth-child(6) { left: 61%; animation-delay: 6s; width: 12px; height: 12px; }
    .floating-shapes span:nth-child(7) { left: 70%; animation-delay: 7.2s; width: 6px; height: 6px; }
    .floating-shapes span:nth-child(8) { left: 81%; animation-delay: 8.4s; width: 16px; height: 16px; }
    .floating-shapes span:nth-child(9) { left: 91%; animation-delay: 9.6s; width: 10px; height: 10px; }
    .floating-shapes span:nth-child(10) { left: 34%; animation-delay: 10.8s; width: 11px; height: 11px; }
    .floating-shapes span:nth-child(11) { left: 66%; animation-delay: 12s; width: 8px; height: 8px; }
    .floating-shapes span:nth-child(12) { left: 96%; animation-delay: 13.2s; width: 14px; height: 14px; }
    .floating-shapes span:nth-child(13) {  left: 5%;
  animation-delay: 1.8s;
  width: 18px;
  height: 18px;}
    .floating-shapes span:nth-child(14) {  left: 22%;
  animation-delay: 5.4s;
  width: 7px;
  height: 7px;}
    .floating-shapes span:nth-child(15) { left: 47%;
  animation-delay: 8.2s;
  width: 20px;
  height: 20px;}
    .floating-shapes span:nth-child(16) {.floating-shapes span:nth-child(16) {
  left: 76%;
  animation-delay: 3.3s;
  width: 9px;
  height: 9px;
}}
    .floating-shapes span:nth-child(17) {.floating-shapes span:nth-child(17) {
  left: 89%;
  animation-delay: 6.7s;
  width: 15px;
  height: 15px;
}}
    .floating-shapes span:nth-child(18) { left: 21%; animation-delay: 18.7s; width: 9px; height: 9px; }
    
    .floating-shapes span:nth-child(18) {
  left: 12%;
  animation-delay: 2.1s;
  width: 22px;
  height: 22px;
}

.floating-shapes span:nth-child(19) {
  left: 36%;
  animation-delay: 7.4s;
  width: 10px;
  height: 10px;
}

.floating-shapes span:nth-child(20) {
  left: 58%;
  animation-delay: 4.6s;
  width: 17px;
  height: 17px;
}

.floating-shapes span:nth-child(21) {
  left: 83%;
  animation-delay: 9.1s;
  width: 8px;
  height: 8px;
}

    .top-utility-bar {
      position: relative;
      z-index: 2;
      height: 32px;
      background: rgba(4, 17, 10, 0.74);
      color: rgba(255,255,255,0.9);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
      font-size: 12px;
      letter-spacing: 0.2px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(14px);
    }

    .system-status {
      color: #86efac;
      font-weight: 800;
    }

    .login-wrapper {
      position: relative;
      z-index: 2;
      flex: 1;
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      align-items: center;
      gap: 42px;
      width: min(1180px, 92vw);
      margin: 0 auto;
      padding: 50px 0;
    }

    .brand-panel {
      color: white;
      animation: slideUp 0.9s ease both;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 999px;
      color: rgba(255,255,255,0.8);
      font-size: 13px;
      margin-bottom: 22px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-400);
      box-shadow: 0 0 14px var(--green-400);
      animation: blinkDot 1.4s ease-in-out infinite;
    }

    .brand-panel h1 {
      font-size: clamp(40px, 6vw, 70px);
      line-height: 0.95;
      letter-spacing: -2.6px;
      margin-bottom: 20px;
    }

    .brand-panel h1 span {
      color: #bbf7d0;
    }

    .brand-panel p {
      width: min(560px, 100%);
      font-size: 17px;
      line-height: 1.7;
      color: rgba(255,255,255,0.72);
      margin-bottom: 26px;
    }

    .feature-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .feature-pill {
      padding: 10px 13px;
      border-radius: 14px;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.82);
      font-size: 13px;
      backdrop-filter: blur(10px);
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .feature-pill:hover {
      transform: translateY(-3px);
      background: rgba(34,197,94,0.18);
      font-weight: bold;
      cursor: pointer;
    }

    .login-card {
      background: rgba(255,255,255,0.93);
      border-radius: 28px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,0.62);
      overflow: hidden;
      animation: slideUp 0.9s ease 0.12s both;
      backdrop-filter: blur(18px);
    }

    .login-card-header {
      padding: 28px 30px;
      background:
        radial-gradient(circle at top right, rgba(74,222,128,0.26), transparent 32%),
        linear-gradient(135deg, rgba(11,36,24,0.98), rgba(18,53,36,0.98));
      color: white;
      position: relative;
      overflow: hidden;
    }

    .login-card-header::after {
      content: "";
      position: absolute;
      inset: auto -30px -55px auto;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(74,222,128,0.16);
    }

    .login-card-header h2 {
      position: relative;
      z-index: 1;
      font-size: 26px;
      margin-bottom: 6px;
    }

    .login-card-header p {
      position: relative;
      z-index: 1;
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }

    .login-form {
      padding: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,251,248,0.96));
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      color: #25352b;
      margin-bottom: 8px;
    }

    .input-wrap {
      position: relative;
    }

    .input-wrap input {
      width: 100%;
      height: 50px;
      padding: 0 44px 0 15px;
      border: 1px solid var(--border);
      border-radius: 15px;
      font-size: 15px;
      outline: none;
      background: #fbfffc;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .input-wrap input:focus {
      border-color: var(--green-500);
      background: white;
      transform: translateY(-1px);
      box-shadow: 0 0 0 4px rgba(34,197,94,0.14);
    }

    .input-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 18px;
      user-select: none;
      cursor: default;
    }

    #togglePassword {
      cursor: pointer;
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin: 6px 0 22px;
      font-size: 13px;
      color: var(--muted);
    }

    .form-options label {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
    }

    .form-options a {
      color: var(--green-700);
      font-weight: 800;
      text-decoration: none;
    }

    .login-btn {
      width: 100%;
      height: 52px;
      border: none;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--green-700), var(--green-500));
      color: white;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(22,163,74,0.30);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
      position: relative;
      overflow: hidden;
    }

    .login-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      transition: left 0.45s ease;
    }

    .login-btn:hover::before {
      left: 100%;
    }

    .login-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: 0 20px 38px rgba(22,163,74,0.40);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .message-box {
      display: none;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 700;
      animation: popIn 0.25s ease;
    }

    .message-box.error {
      display: block;
      color: var(--danger);
      background: #fff1f1;
      border: 1px solid #fecaca;
    }

    .message-box.success {
      display: block;
      color: var(--success);
      background: #ecfdf3;
      border: 1px solid #bbf7d0;
    }

    .login-footer {
      padding: 18px 30px;
      border-top: 1px solid var(--border);
      background: #f6fbf8;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .secondary-action-btn {
      width: 100%;
      height: 46px;
      margin-top: 12px;
      border: 1px solid rgba(22,163,74,0.28);
      border-radius: 15px;
      background: rgba(236,253,245,0.9);
      color: var(--green-700);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .secondary-action-btn:hover {
      transform: translateY(-2px);
      background: #dcfce7;
      box-shadow: 0 12px 26px rgba(22,163,74,0.15);
    }

    .request-page {
      position: relative;
      z-index: 3;
      flex: 1;
      width: min(920px, 92vw);
      margin: 0 auto;
      padding: 54px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: formPageIn 0.65s ease both;
    }

    .hidden-page {
      display: none;
    }

    .hide-login {
      display: none;
    }

    .form-page-card {
      width: 100%;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(255,255,255,0.62);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(18px);
    }

    .form-page-card.small-card {
      max-width: 560px;
    }

    .back-btn {
      margin: 22px 24px 18px;
      border: none;
      background: transparent;
      color: var(--green-700);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .form-page-header {
      padding: 24px 30px 28px;
      background:
        radial-gradient(circle at top right, rgba(74,222,128,0.22), transparent 32%),
        linear-gradient(135deg, rgba(11,36,24,0.98), rgba(18,53,36,0.98));
      color: white;
    }

    .form-page-header h2 {
      font-size: 28px;
      margin-bottom: 7px;
    }

    .form-page-header p {
      color: rgba(255,255,255,0.72);
      font-size: 14px;
      line-height: 1.5;
    }

    .form-page-body {
      padding: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,251,248,0.96));
    }

    .two-column {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .form-page-body input,
    .form-page-body select,
    .form-page-body textarea {
      width: 100%;
      padding: 14px 15px;
      border: 1px solid var(--border);
      border-radius: 15px;
      font-size: 15px;
      outline: none;
      background: #fbfffc;
      font-family: Arial, Helvetica, sans-serif;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .form-page-body input:focus,
    .form-page-body select:focus,
    .form-page-body textarea:focus {
      border-color: var(--green-500);
      transform: translateY(-1px);
      box-shadow: 0 0 0 4px rgba(34,197,94,0.14);
    }

    @keyframes formPageIn {
      from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    
    .popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-box {
    background: rgba(15, 35, 25, 0.95);
    color: white;
    max-width: 650px;
    width: 90%;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(134, 239, 172, 0.35);
    animation: popupFadeUp 0.35s ease;
}

.popup-box h2 {
    color: #86efac;
    margin-bottom: 15px;
}

.popup-box p {
    line-height: 1.7;
    font-size: 1rem;
    
}

.popup-box p + p {
    margin-top: 12px;
}

.popup-close {
    float: right;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

@keyframes popupFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
    
    

    /* =========================================================
       STAGECOACH WEST OVERLAY
    ========================================================= */

    .about-screen {
      position: fixed;
      inset: auto 0 0 0;
      height: 100vh;
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease;
      z-index: 2000;
      overflow: hidden;
    }

    .about-screen.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.28), rgba(0,0,0,.78)),
        url("stagecoach-west.png") center/cover no-repeat;
      animation: slowPan 26s ease-in-out infinite alternate;
      transform: scale(1.04);
    }

    .sun-glow {
      position: absolute;
      right: 8%;
      top: 35%;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,211,116,.82), rgba(255,166,43,.22) 45%, transparent 72%);
      filter: blur(8px);
      animation: glowPulse 4.8s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .dust {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255,221,151,.42) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,221,151,.25) 1px, transparent 2px);
      background-size: 140px 140px, 210px 210px;
      animation: dustMove 18s linear infinite;
      opacity: .55;
    }

.about-content {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.about-panel {
  width: min(1100px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(247,216,137,.55);
  border-radius: 32px;
  background: rgba(18, 10, 5, 0.82);
  box-shadow: 0 30px 100px rgba(0,0,0,.75), inset 0 0 45px rgba(217,164,65,.10);
  backdrop-filter: blur(9px);
  animation: panelReveal 2s ease both;
  color: #fff1cf;
}

.about-panel::-webkit-scrollbar {
  width: 10px;
}

.about-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}

.about-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(#f7d889, #d9a441);
  border-radius: 999px;
}

    .brand-mark {
      width: 92px;
      height: 92px;
      margin: 0 auto 18px;
      border: 3px solid #d9a441;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #f7d889;
      font-size: 3rem;
      animation: compassSpin 12s linear infinite;
      box-shadow: 0 0 28px rgba(217,164,65,.45);
    }

    .about-image {
      width: min(100%, 700px);
      display: block;
      margin: 0 auto 30px;
      border-radius: 24px;
      border: 1px solid rgba(247,216,137,.4);
      box-shadow: 0 25px 60px rgba(0,0,0,.55);
      animation: imageFloat 8s ease-in-out infinite;
    }

    .about-panel h2 {
      margin: 0;
      text-align: center;
      font-size: clamp(2.2rem, 6vw, 5.6rem);
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #f7d889;
      text-shadow: 0 0 30px rgba(217,164,65,.35);
    }

    .tagline {
      margin: 14px auto 28px;
      text-align: center;
      font-size: clamp(1.2rem, 2.6vw, 2rem);
      font-style: italic;
      color: #ffe9b1;
    }

    .gold-line {
      height: 1px;
      width: min(720px, 84%);
      margin: 24px auto 34px;
      background: linear-gradient(90deg, transparent, #d9a441, transparent);
      position: relative;
    }

    .gold-line::after {
      content: "◆";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #d9a441;
      background: rgba(18,10,5,.95);
      padding: 0 16px;
    }

    .about-text {
      max-width: 860px;
      margin: 0 auto;
      font-size: clamp(1rem, 1.8vw, 1.28rem);
      line-height: 1.75;
      text-align: center;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 36px;
      text-align: center;
    }

    .value {
      padding: 18px 10px;
      border-radius: 18px;
      border: 1px solid rgba(217,164,65,.28);
      background: rgba(255,255,255,.05);
      color: #ffe9b1;
      letter-spacing: .09em;
      text-transform: uppercase;
      font-size: .9rem;

          /* base animation */
    animation-name: valueFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
      
    }
    
    
    .value:nth-child(1) {
    animation-duration: 4s;
    animation-delay: 0s;
}

.value:nth-child(2) {
    animation-duration: 5.5s;
    animation-delay: .8s;
}

.value:nth-child(3) {
    animation-duration: 6.2s;
    animation-delay: 1.4s;
}

.value:nth-child(4) {
    animation-duration: 4.8s;
    animation-delay: 2s;
}

.value:nth-child(5) {
    animation-duration: 7s;
    animation-delay: 2.8s;
}

    .close-link {
      position: absolute;
      top: 24px;
      right: 28px;
      z-index: 5;
      color: #fff1cf;
      text-decoration: none;
      font-size: 1rem;
      padding: 10px 16px;
      border: 1px solid rgba(247,216,137,.5);
      border-radius: 999px;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(8px);
      cursor: pointer;
    }

    .bottom-footer {
      position: relative;
      z-index: 2;
      color: rgba(255,255,255,0.58);
      text-align: center;
      font-size: 12px;
      padding: 0 18px 20px;
    }

    .bottom-footer a {
    display: inline-block;
    margin-top: 12px;
}
    
    
    /* =========================================================
       ANIMATIONS
    ========================================================= */

    @keyframes loadFinance {
      0% { width: 0%; }
      16% { width: 18%; }
      32% { width: 39%; }
      52% { width: 61%; }
      72% { width: 82%; }
      100% { width: 100%; }
    }

    @keyframes coinDrop {
      0% { opacity: 0; transform: translateY(-80px) rotate(0deg) scale(0.75); }
      18% { opacity: 1; }
      42% { transform: translateY(24px) rotate(260deg) scale(1); }
      68% { opacity: 1; transform: translateY(0) rotate(520deg) scale(1.05); }
      100% { opacity: 0; transform: translateY(60px) rotate(720deg) scale(0.65); }
    }

    @keyframes cardSlideLeft {
      0% { opacity: 0; transform: translateX(-80px) rotate(-6deg) scale(0.92); }
      18%, 78% { opacity: 1; transform: translateX(0) rotate(-2deg) scale(1); }
      100% { opacity: 0; transform: translateX(-40px) rotate(-6deg) scale(0.95); }
    }

    @keyframes cardSlideRight {
      0% { opacity: 0; transform: translateX(80px) rotate(6deg) scale(0.92); }
      22%, 78% { opacity: 1; transform: translateX(0) rotate(2deg) scale(1); }
      100% { opacity: 0; transform: translateX(40px) rotate(6deg) scale(0.95); }
    }

        @keyframes writeLine {
      0%, 22% { transform: scaleX(0); }
      38%, 100% { transform: scaleX(1); }
    }

    @keyframes stampIn {
      0%, 42% { transform: rotate(-9deg) scale(0); opacity: 0; }
      50%, 86% { transform: rotate(-9deg) scale(1); opacity: 1; }
      100% { transform: rotate(-9deg) scale(0.85); opacity: 0; }
    }

    @keyframes budgetSpin {
      0%, 20% { transform: scale(0) rotate(-90deg); opacity: 0; }
      42%, 86% { transform: scale(1) rotate(270deg); opacity: 1; }
      100% { transform: scale(0.85) rotate(360deg); opacity: 0; }
    }

            @keyframes routeFlash {
      0%, 26% { opacity: 0; transform: rotate(var(--r, 8deg)) scaleX(0); }
      45%, 72% { opacity: 1; transform: rotate(var(--r, 8deg)) scaleX(1); }
      100% { opacity: 0; transform: rotate(var(--r, 8deg)) scaleX(0); }
    }

    @keyframes dotTravel {
      0%, 35% { opacity: 0; transform: scale(0.6); }
      45%, 72% { opacity: 1; transform: scale(1.15); }
      100% { opacity: 0; transform: scale(0.6); }
    }

    @keyframes centerStage {
      0% { transform: scale(0.96); opacity: 0; }
      18%, 84% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.02); opacity: 1; }
    }

    @keyframes stageTextGlow {
      0%, 100% { opacity: 0.7; text-shadow: 0 0 0 rgba(74,222,128,0); }
      50% { opacity: 1; text-shadow: 0 0 18px rgba(74,222,128,0.55); }
    }

    @keyframes sealFloat {
      0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,0.35); }
      50% { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 0 18px rgba(74,222,128,0); }
    }

    @keyframes glowPulse {
      0%, 100% { transform: scale(0.96); opacity: 0.72; }
      50% { transform: scale(1.1); opacity: 1; }
    }

    @keyframes moveGrid {
      from { transform: translate(0, 0); }
      to { transform: translate(42px, 42px); }
    }

    @keyframes scanDown {
      0% { top: -5%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { top: 105%; opacity: 0; }
    }

    @keyframes scanAcross {
      0% { left: -5%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { left: 105%; opacity: 0; }
    }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { top: 105%; opacity: 0; }
    }

    @keyframes rotateOrb {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes pageReveal {
      from { opacity: 0; transform: scale(0.985) translateY(14px); filter: blur(10px); }
      to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes drift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(32px, -26px) scale(1.08); }
    }

    @keyframes floatParticle {
      0% { bottom: -30px; transform: translateX(0) scale(0.9); opacity: 0; }
      15% { opacity: 0.75; }
      80% { opacity: 0.75; }
      100% { bottom: 110%; transform: translateX(55px) scale(1.4); opacity: 0; }
    }

    @keyframes blinkDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.82); }
    }

    @keyframes imageFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

    @keyframes slowPan {
      from { transform: scale(1.05) translateX(-1.5%) translateY(0); }
      to { transform: scale(1.1) translateX(2%) translateY(-1.5%); }
    }

    @keyframes dustMove {
      from { background-position: 0 0, 70px 120px; }
      to { background-position: 600px -360px, -500px 420px; }
    }

    @keyframes panelReveal {
      from { opacity: 0; transform: translateY(70px) scale(.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes compassSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

@keyframes valueFloat {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

    @keyframes popIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 860px) {
      body {
        overflow-y: auto;
      }

      .login-wrapper {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 34px 0;
      }

      .brand-panel {
        text-align: center;
      }

      .brand-panel p {
        margin-left: auto;
        margin-right: auto;
      }

      .feature-row {
        justify-content: center;
      }
    }

    @media (max-width: 700px) {
      .two-column {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    @media (max-width: 520px) {
      .top-utility-bar {
        height: auto;
        min-height: 36px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 7px 12px;
        text-align: center;
      }

      .login-card-header,
      .login-form,
      .login-footer {
        padding-left: 22px;
        padding-right: 22px;
      }

      .form-options {
        flex-direction: column;
        align-items: flex-start;
      }
    }