@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

   :root {
     /* Brand Primary & Royal Blues */
     --pc-blue-primary: #1f66ff;
     --pc-blue-hover: #1554e8;
     --pc-blue-dark: #0e40b8;
     --pc-blue-light: #4884ff;
     --pc-blue-soft: #eaf2ff;
     --pc-blue-glow: rgba(31, 102, 255, 0.35);
   
     /* Tech Cyan & Electric Accents */
     --pc-cyan: #00b4d8;
     --pc-cyan-bright: #00d2ff;
     --pc-cyan-light: #38bdf8;
     --pc-cyan-soft: #e0f7fc;
     --pc-cyan-glow: rgba(0, 210, 255, 0.3);
   
     /* Deep Contrast Dark Navy */
     --pc-dark-navy: #0b1220;
     --pc-dark-surface: #101a2e;
     --pc-dark-border: rgba(31, 102, 255, 0.25);
   
     /* Canvas & Backgrounds */
     --pc-bg-page: #f4f8fe;
     --pc-bg-card: #ffffff;
     --pc-bg-card-subtle: #f8fbff;
     --pc-bg-pill: #eaf2ff;
     --pc-bg-input: #f8fbff;
   
     /* Typography Colors */
     --pc-text-heading: #0b1220;
     --pc-text-body: #50617a;
     --pc-text-muted: #64748b;
     --pc-text-subtle: #8e9eaf;
   
     /* Borders & Dividers */
     --pc-border-card: #e2ecf8;
     --pc-border-card-hover: #b8d4fe;
     --pc-border-pill: #d0e2fe;
     --pc-border-input: #d8e5f5;
     --pc-border-input-focus: #1f66ff;
   
     /* Typography */
     --font-family-base: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   
     /* Shadows */
     --pc-shadow-card: 0 20px 45px -10px rgba(11, 18, 32, 0.07), 0 4px 16px rgba(31, 102, 255, 0.03);
     --pc-shadow-card-hover: 0 25px 55px -10px rgba(11, 18, 32, 0.12), 0 8px 24px rgba(31, 102, 255, 0.06);
     --pc-shadow-btn: 0 8px 22px rgba(31, 102, 255, 0.32);
     --pc-shadow-btn-hover: 0 12px 28px rgba(31, 102, 255, 0.45);
   }
   
   /* ==========================================================================
      GLOBAL RESET & CANVAS STYLING
      ========================================================================== */
   body {
     font-family: var(--font-family-base);
     background-color: var(--pc-bg-page);
     color: var(--pc-text-body);
     margin: 0;
     padding: 0;
     min-height: 100vh;
     position: relative;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   /* Ambient Subtle Tech Grid Matrix Pattern */
   .tech-grid-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
       radial-gradient(rgba(31, 102, 255, 0.08) 1.2px, transparent 1.2px);
     background-size: 28px 28px;
     pointer-events: none;
     z-index: 0;
     opacity: 0.85;
   }
   
   /* Ambient Royal Blue & Cyan Glow Spheres matching Website Lighting */
   .login-glow-sphere-1 {
     position: fixed;
     top: -50px;
     right: -50px;
     width: 580px;
     height: 580px;
     background: radial-gradient(circle, rgba(31, 102, 255, 0.14) 0%, rgba(0, 180, 216, 0.08) 40%, transparent 70%);
     filter: blur(80px);
     pointer-events: none;
     z-index: 0;
   }
   
   .login-glow-sphere-2 {
     position: fixed;
     bottom: -60px;
     left: -80px;
     width: 620px;
     height: 620px;
     background: radial-gradient(circle, rgba(0, 180, 216, 0.12) 0%, rgba(31, 102, 255, 0.08) 45%, transparent 70%);
     filter: blur(90px);
     pointer-events: none;
     z-index: 0;
   }
   
   /* ==========================================================================
      MAIN LOGIN SECTION
      ========================================================================== */
   .login-section {
     min-height: calc(100vh - 120px);
     padding: 70px 0 90px;
     position: relative;
     display: flex;
     align-items: center;
     z-index: 2;
   }
   
   @media (max-width: 991.98px) {
     .login-section {
       padding: 40px 0 60px;
     }
   }
   
   /* ==========================================================================
      LEFT COLUMN: BRAND CONTEXT, HERO & PLAN SHOWCASE
      ========================================================================== */
   .login-info-col {
     padding-right: 25px;
   }
   
   @media (max-width: 991.98px) {
     .login-info-col {
       padding-right: 0;
       margin-bottom: 40px;
       text-align: center;
     }
   }
   
   /* Top Pill Badge */
   .badge-pill-glow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--pc-bg-pill);
     border: 1px solid var(--pc-border-pill);
     color: var(--pc-blue-primary);
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 50px;
     box-shadow: 0 2px 10px rgba(31, 102, 255, 0.08);
     transition: all 0.25s ease;
   }
   
   .badge-pill-glow:hover {
     background: #dfeaff;
     border-color: #b3d1fe;
     transform: translateY(-1px);
   }
   
   .badge-pill-glow .dot-pulse {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--pc-cyan-bright);
     position: relative;
     display: inline-block;
   }
   
   .badge-pill-glow .dot-pulse::after {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     right: -3px;
     bottom: -3px;
     border-radius: 50%;
     background: rgba(0, 180, 216, 0.5);
     animation: pulseDot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
   }
   
   @keyframes pulseDot {
     0% {
       transform: scale(0.9);
       opacity: 0.8;
     }
     70% {
       transform: scale(2.2);
       opacity: 0;
     }
     100% {
       transform: scale(0.9);
       opacity: 0;
     }
   }
   
   /* Hero Headline */
   .login-hero-title {
     font-size: clamp(2.2rem, 3.8vw, 3.2rem);
     font-weight: 800;
     line-height: 1.16;
     color: var(--pc-text-heading);
     letter-spacing: -0.03em;
     margin-top: 18px;
     margin-bottom: 20px;
   }
   
   /* Signature Cyan/Royal Blue Gradient Text */
   .text-gradient-cyan {
     background: linear-gradient(135deg, #1f66ff 0%, #0099ff 50%, #00b4d8 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
     font-weight: 800;
   }
   
   /* Hero Description Text */
   .login-hero-desc {
     font-size: 15.5px;
     line-height: 1.68;
     color: var(--pc-text-body);
     max-width: 530px;
     margin-bottom: 34px;
   }
   
   @media (max-width: 991.98px) {
     .login-hero-desc {
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   /* Plan Feature Card (Matches Reference Feature Card Style) */
   .login-plan-card {
     display: flex;
     align-items: center;
     gap: 18px;
     background: var(--pc-bg-card);
     border: 1px solid var(--pc-border-card);
     border-radius: 20px;
     padding: 22px 24px;
     box-shadow: 0 10px 30px rgba(11, 18, 32, 0.04);
     max-width: 520px;
     transition: all 0.3s ease;
     text-align: left;
   }
   
   .login-plan-card:hover {
     transform: translateY(-3px);
     border-color: var(--pc-border-card-hover);
     box-shadow: var(--pc-shadow-card-hover);
   }
   
   @media (max-width: 991.98px) {
     .login-plan-card {
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   /* Dark Midnight Navy Container with Radiant Blue Shield Icon */
   .login-plan-icon-wrap {
     width: 54px;
     height: 54px;
     flex-shrink: 0;
     border-radius: 16px;
     background: var(--pc-dark-navy);
     border: 1px solid rgba(31, 102, 255, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: var(--pc-cyan-bright);
     box-shadow: 0 4px 16px rgba(11, 18, 32, 0.18);
     transition: all 0.3s ease;
   }
   
   .login-plan-card:hover .login-plan-icon-wrap {
     transform: scale(1.05);
     background: #101c34;
     border-color: var(--pc-cyan);
     box-shadow: 0 6px 20px rgba(0, 180, 216, 0.35);
     color: #ffffff;
   }
   
   .login-plan-info h4 {
     font-size: 16px;
     font-weight: 700;
     color: var(--pc-text-heading);
     letter-spacing: -0.015em;
     margin-bottom: 5px;
   }
   
   .login-plan-info p {
     font-size: 13.5px;
     color: var(--pc-text-muted);
     line-height: 1.5;
     margin-bottom: 0;
   }
   
   /* ==========================================================================
      RIGHT COLUMN: LOGIN AUTHENTICATION CARD
      ========================================================================== */
   .login-card-wrapper {
     position: relative;
     z-index: 3;
   }
   
   .login-card {
     position: relative;
     background: var(--pc-bg-card);
     border: 1px solid var(--pc-border-card);
     border-radius: 26px;
     padding: 42px 38px;
     box-shadow: var(--pc-shadow-card);
     overflow: hidden;
     transition: box-shadow 0.3s ease, border-color 0.3s ease;
   }
   
   .login-card:hover {
     box-shadow: var(--pc-shadow-card-hover);
     border-color: var(--pc-border-card-hover);
   }
   
   /* Decorative Top Gradient Line Accent */
   .login-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #1f66ff 0%, #00b4d8 50%, #2563eb 100%);
     border-radius: 26px 26px 0 0;
   }
   
   @media (max-width: 575.98px) {
     .login-card {
       padding: 32px 24px;
       border-radius: 22px;
     }
   }
   
   /* Welcome Back Pill Tag */
   .login-badge-welcome {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 5px 14px;
     border-radius: 50px;
     background: var(--pc-bg-pill);
     border: 1px solid var(--pc-border-pill);
     color: var(--pc-blue-primary);
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     margin-bottom: 20px;
   }
   
   .login-badge-welcome .pulse-green {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: #10b981;
     box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
     animation: pulseGreen 2s infinite ease-in-out;
   }
   
   @keyframes pulseGreen {
     0% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
     }
     70% {
       transform: scale(1);
       box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
     }
     100% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
     }
   }
   
   /* Card Header Typography */
   .login-card-title {
     font-size: 1.85rem;
     font-weight: 800;
     color: var(--pc-text-heading);
     letter-spacing: -0.025em;
     margin-bottom: 8px;
   }
   
   @media (max-width: 575.98px) {
     .login-card-title {
       font-size: 1.6rem;
     }
   }
   
   .login-card-subtitle {
     font-size: 14px;
     color: var(--pc-text-muted);
     line-height: 1.55;
     margin-bottom: 28px;
   }
   
   /* ==========================================================================
      FORM INPUTS & CONTROLS
      ========================================================================== */
   .login-form-group {
     margin-bottom: 20px;
   }
   
   .login-label {
     display: block;
     font-size: 13.5px;
     font-weight: 600;
     color: var(--pc-text-heading);
     margin-bottom: 7px;
     letter-spacing: -0.01em;
   }
   
   .login-input-wrap {
     position: relative;
     display: block;
     width: 100%;
   }
   
   .login-input-icon {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--pc-text-subtle);
     font-size: 17px;
     pointer-events: none;
     transition: all 0.25s ease;
     z-index: 2;
   }
   
   .login-input-field {
     width: 100%;
     height: 50px;
     background-color: var(--pc-bg-input) !important;
     border: 1.5px solid var(--pc-border-input) !important;
     border-radius: 12px !important;
     color: var(--pc-text-heading) !important;
     font-size: 14.5px !important;
     font-weight: 500 !important;
     padding: 10px 18px 10px 46px !important;
     transition: all 0.25s ease !important;
     outline: none !important;
   }
   
   .login-input-field::placeholder {
     color: var(--pc-text-subtle) !important;
     font-size: 14px !important;
     font-weight: 400 !important;
   }
   
   .login-input-field:hover {
     background-color: #ffffff !important;
     border-color: #b8d4fe !important;
   }
   
   .login-input-field:focus {
     background-color: #ffffff !important;
     border-color: var(--pc-border-input-focus) !important;
     box-shadow: 0 0 0 4px rgba(31, 102, 255, 0.14) !important;
   }
   
   .login-input-wrap:focus-within .login-input-icon {
     color: var(--pc-blue-primary);
     transform: translateY(-50%) scale(1.08);
   }
   
   /* ==========================================================================
      SUBMIT BUTTON (Signature Vibrant Royal Blue CTA)
      Matches website hero "Download", "Get License", & Pricing Plan buttons
      ========================================================================== */
   .login-submit-btn {
     width: 100%;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--pc-blue-primary) 0%, var(--pc-blue-hover) 100%);
     color: #ffffff !important;
     font-size: 15.5px;
     font-weight: 700;
     letter-spacing: -0.01em;
     padding: 14px 28px;
     border-radius: 50px;
     border: none;
     outline: none;
     cursor: pointer;
     box-shadow: var(--pc-shadow-btn);
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     margin-top: 10px;
     position: relative;
     overflow: hidden;
   }
   
   .login-submit-btn:hover {
     background: linear-gradient(135deg, #2b74ff 0%, #1757e8 100%);
     color: #ffffff !important;
     transform: translateY(-2px);
     box-shadow: var(--pc-shadow-btn-hover);
   }
   
   .login-submit-btn:hover #btnText i {
     transform: translateX(4px);
   }
   
   .login-submit-btn:active {
     transform: translateY(0);
     background: var(--pc-blue-dark);
     box-shadow: 0 4px 12px rgba(31, 102, 255, 0.25);
   }
   
   .login-submit-btn:disabled {
     opacity: 0.75;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
   }
   
   #btnText {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   #btnText i {
     transition: transform 0.25s ease;
   }
   
   #btnLoader {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #ffffff;
     font-weight: 700;
   }
   
   #btnLoader .spinner-border {
     color: #ffffff;
   }
   
   /* ==========================================================================
      FOOTER SWITCH LINK
      ========================================================================== */
   .login-footer-switch {
     text-align: center;
     margin-top: 26px;
     padding-top: 22px;
     border-top: 1px solid #edf4fc;
     font-size: 14px;
     color: var(--pc-text-muted);
   }
   
   .login-footer-switch a {
     color: var(--pc-blue-primary);
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     margin-left: 4px;
     transition: all 0.2s ease;
   }
   
   .login-footer-switch a i {
     font-size: 13px;
     transition: transform 0.2s ease;
   }
   
   .login-footer-switch a:hover {
     color: var(--pc-blue-hover);
   }
   
   .login-footer-switch a:hover i {
     transform: translateX(3px);
   }
   
   /* ==========================================================================
      FORM VALIDATION ERROR STATES (jQuery Validate Compatibility)
      ========================================================================== */
   #loginform label.error {
     display: block !important;
     color: #dc3545 !important;
     font-size: 12.5px !important;
     font-weight: 500 !important;
     margin-top: 6px !important;
     text-align: left !important;
   }
   
   #loginform input.error {
     border-color: #dc3545 !important;
     background-color: #fff8f8 !important;
   }
   
   #loginform input.error:focus {
     border-color: #dc3545 !important;
     box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12) !important;
   }