/* ============================================ HOW'S MY DRIVING GPS™ — UNIVERSAL STYLES Final clean build — all fixes applied ============================================ */ /* NOTE: Google Fonts are loaded via in HTML . Do NOT re-add @import here — it slows the site significantly. */ :root { --blue-900:#082A5E; --blue-800:#0d1f3c; --blue-700:#0B4AA2; --blue-600:#153568; --blue-400:#2563EB; --blue-300:#5b8def; --blue-100:#dbeafe; --blue-50:#EEF4FF; --gold-600:#b8860b; --gold-500:#D4AF37; --gold-400:#f0b429; --gold-300:#f0c843; --white:#ffffff; --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1e293b; --ease:cubic-bezier(0.16,1,0.3,1); --font-display:'Sora',system-ui,-apple-system,sans-serif; --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;} body{font-family:var(--font-body);color:var(--blue-900);background:var(--white);line-height:1.7;overflow-x:hidden;width:100%;max-width:100vw;} img{max-width:100%;height:auto;display:block;} a{text-decoration:none;color:inherit;} ul,ol{list-style:none;} .contain{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;} .gold-text{background:linear-gradient(135deg,var(--gold-500),var(--gold-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .white-text{color:var(--white);} /* ============ DOCTRINE TOP BAR (scrolls away with page) ============ */ .doctrine-topbar{background:linear-gradient(90deg,var(--blue-900),var(--blue-800));padding:8px 16px;text-align:center;position:absolute;top:0;left:0;right:0;z-index:999;border-bottom:1px solid rgba(212,175,55,0.15);} .doctrine-topbar a{font-family:var(--font-display);font-size:0.68rem;font-weight:600;color:var(--gold-300);letter-spacing:0.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:color 0.3s;} .doctrine-topbar a:hover{color:var(--gold-400);} /* ============ NAVIGATION ============ */ .main-nav{position:fixed;top:34px;left:0;right:0;height:72px;z-index:1000;transition:top 0.4s var(--ease),background 0.4s var(--ease),box-shadow 0.4s var(--ease);background:rgba(8,42,94,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .main-nav.scrolled{top:0;background:rgba(8,42,94,1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 30px rgba(0,0,0,0.25);} .nav-wrap{max-width:1200px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;} /* Logo — wide placeholder (3697x824 ratio supported) — perfectly centered */ .nav-logo{display:flex;align-items:center;justify-content:center;height:100%;z-index:1001;flex-shrink:0;} .nav-logo-img{height:42px;width:auto;max-width:220px;display:block;object-fit:contain;margin:auto 0;} .nav-links{display:flex;align-items:center;gap:2px;} .nav-link{font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:#ffffff;padding:10px 16px;border-radius:8px;transition:color 0.3s var(--ease),background 0.3s var(--ease);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer;pointer-events:auto;text-decoration:none;} .nav-link:hover{background:rgba(255,255,255,0.15);color:#ffffff;} .nav-link.active{background:rgba(212,175,55,0.18);color:var(--gold-300);} .nav-dd{position:relative;} .dd-arrow{width:12px;height:12px;transition:transform 0.3s var(--ease);} .nav-dd:hover .dd-arrow{transform:rotate(180deg);} .nav-dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--white);border-radius:14px;box-shadow:0 16px 48px rgba(8,42,94,0.16);min-width:210px;padding:8px;opacity:0;visibility:hidden;transition:opacity 0.3s var(--ease),visibility 0.3s var(--ease),transform 0.3s var(--ease);border:1px solid var(--gray-100);} .nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .nav-dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:0.85rem;color:var(--gray-700);font-weight:500;transition:background 0.25s var(--ease),color 0.25s var(--ease);} .nav-dd-menu a:hover{background:var(--blue-50);color:var(--blue-700);} .dd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .nav-cta-wrap{margin-left:12px;flex-shrink:0;} .nav-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:50px;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);font-family:var(--font-display);font-size:0.82rem;font-weight:700;box-shadow:0 4px 20px rgba(212,175,55,0.25);transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease);white-space:nowrap;} .nav-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,175,55,0.4);} .nav-cta-btn svg{transition:transform 0.3s var(--ease);} .nav-cta-btn:hover svg{transform:translateX(3px);} .mobile-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1004;padding:8px;background:none;border:none;} .mobile-hamburger span{width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform 0.4s var(--ease),opacity 0.4s var(--ease);transform-origin:center;} .mobile-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .mobile-hamburger.active span:nth-child(2){opacity:0;transform:translateX(10px);} .mobile-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);} .nav-overlay{display:none;position:fixed;inset:0;z-index:1002;background:rgba(8,42,94,0.5);opacity:0;pointer-events:none;transition:opacity 0.4s var(--ease);} .nav-overlay.active{display:block;opacity:1;pointer-events:auto;} .mobile-nav-cta{display:none;} /* ============ BUTTONS ============ */ .btn-gold{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:50px;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);font-family:var(--font-display);font-size:0.93rem;font-weight:700;box-shadow:0 4px 24px rgba(212,175,55,0.25);transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease);} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 8px 36px rgba(212,175,55,0.4);} .btn-gold svg{transition:transform 0.3s var(--ease);} .btn-gold:hover svg{transform:translateX(4px);} .btn-outline-light{display:inline-flex;align-items:center;padding:14px 30px;border-radius:50px;background:transparent;color:var(--white);font-family:var(--font-display);font-size:0.93rem;font-weight:600;border:2px solid rgba(255,255,255,0.2);transition:border-color 0.4s var(--ease),color 0.4s var(--ease),background 0.4s var(--ease);} .btn-outline-light:hover{border-color:var(--gold-400);color:var(--gold-400);background:rgba(212,175,55,0.05);} .btn-outline-dark{display:inline-flex;align-items:center;padding:14px 30px;border-radius:50px;background:transparent;color:var(--blue-700);font-family:var(--font-display);font-size:0.93rem;font-weight:600;border:2px solid var(--blue-100);transition:border-color 0.4s var(--ease),background 0.4s var(--ease);} .btn-outline-dark:hover{border-color:var(--blue-400);background:var(--blue-50);} /* ============ SECTIONS ============ */ .section{padding:90px 0;position:relative;overflow:hidden;} .section--light{background:var(--gray-50);} .section--dark{background:linear-gradient(160deg,var(--blue-900),var(--blue-800));overflow:hidden;} .section--dark p{color:#ffffff;} .section--dark h4{color:var(--white);} .sec-head{text-align:center;max-width:660px;margin:0 auto 50px;} .sec-head h2{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;color:var(--blue-900);line-height:1.2;letter-spacing:-0.02em;margin-bottom:12px;} .sec-head p{font-size:1rem;color:var(--gray-500);line-height:1.75;} .section--dark .sec-head h2{color:var(--white);} .section--dark .sec-head p{color:rgba(255,255,255,0.85);} .sec-label{font-family:var(--font-display);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold-500);display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;} .sec-label--light{color:var(--gold-300);} .sec-label-line{width:24px;height:2px;background:var(--gold-500);display:inline-block;} .sec-label--light .sec-label-line{background:var(--gold-300);} .bg-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:60px 60px;animation:gridSlide 22s linear infinite;} @keyframes gridSlide{to{transform:translate(60px,60px);}} .bg-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;animation:orbFloat 10s ease-in-out infinite;} @keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(15px,-20px) scale(1.05);}} .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);} .reveal.visible{opacity:1;transform:translateY(0);} /* ============ HERO ============ */ .hero{min-height:100vh;position:relative;display:flex;align-items:center;background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-800) 40%,var(--blue-700) 100%);overflow:hidden;padding:140px 0 70px;} .hero-inner{max-width:1200px;margin:0 auto;width:100%;padding:0 20px;display:flex;align-items:stretch;gap:40px;position:relative;z-index:2;} .hero-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;} .hero-img{flex:1;min-width:0;display:flex;align-items:stretch;} .hero-img img{width:100%;height:100%;object-fit:contain;object-position:right center;display:block;border-radius:12px;} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(212,175,55,0.1);border:1px solid rgba(212,175,55,0.2);border-radius:50px;padding:6px 18px;font-family:var(--font-display);font-size:0.72rem;font-weight:600;color:var(--gold-300);letter-spacing:0.04em;margin-bottom:24px;} .hero-badge-dot{width:8px;height:8px;background:var(--gold-400);border-radius:50%;animation:pulse 2s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.6);}} .hero h1{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;color:var(--white);line-height:1.12;letter-spacing:-0.025em;margin-bottom:18px;} .hero-sub{font-size:1.05rem;color:rgba(255,255,255,0.85);line-height:1.8;margin-bottom:32px;} .hero-btns{display:flex;gap:14px;flex-wrap:wrap;} /* ============ TRUST BAR ============ */ .trust-bar{background:var(--white);border-bottom:1px solid var(--gray-100);padding:22px 20px;position:relative;z-index:2;} .trust-bar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;} .trust-item{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:0.85rem;color:var(--gray-500);font-weight:500;} .trust-item strong{font-size:1.15rem;font-weight:800;color:var(--blue-700);} .trust-sep{width:1px;height:28px;background:var(--gray-200);} /* ============ FLAGSHIP IMAGE ============ */ .flagship-img-wrap{position:relative;max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 12px 50px rgba(8,42,94,0.1);border:1px solid var(--gray-100);} .flagship-img-wrap img{width:100%;height:auto;background:linear-gradient(135deg,var(--blue-50),var(--blue-100));} /* ============ FLOW ============ */ .flow-track{display:flex;align-items:flex-start;justify-content:center;flex-wrap:nowrap;} .flow-node{flex:0 0 148px;text-align:center;padding:0 6px;} .flow-icon{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;} .flow-icon--gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);box-shadow:0 6px 20px rgba(212,175,55,0.3);} .flow-icon--blue{background:linear-gradient(135deg,var(--blue-700),var(--blue-900));color:var(--white);box-shadow:0 6px 20px rgba(8,42,94,0.3);} .flow-node h4{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--blue-900);margin-bottom:5px;} .flow-node p{font-size:0.78rem;color:var(--gray-500);line-height:1.5;} .flow-arrow{flex:0 0 40px;display:flex;align-items:center;justify-content:center;padding-top:24px;color:var(--gray-300);} /* ============ INTEL CARDS ============ */ .intel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .intel-card{background:linear-gradient(160deg,var(--blue-800),var(--blue-700));border-radius:18px;padding:36px 28px;color:var(--white);position:relative;overflow:hidden;transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease);} .intel-card:hover{transform:translateY(-6px);box-shadow:0 16px 50px rgba(8,42,94,0.25);} .intel-card::after{content:'';position:absolute;top:-50%;right:-50%;width:180px;height:180px;background:radial-gradient(circle,rgba(212,175,55,0.08),transparent 70%);pointer-events:none;} .intel-num{font-family:var(--font-display);font-size:2.8rem;font-weight:800;color:rgba(212,175,55,0.1);line-height:1;margin-bottom:8px;} .intel-icon-ring{width:48px;height:48px;border-radius:50%;border:2px solid rgba(212,175,55,0.25);display:flex;align-items:center;justify-content:center;color:var(--gold-300);margin-bottom:18px;} .intel-card h4{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--gold-300);margin-bottom:10px;} .intel-card p{color:#ffffff;font-size:0.92rem;line-height:1.7;} /* ============ COMPARE TABLE ============ */ .compare-table-wrap{border-radius:18px;overflow-x:auto;overflow-y:hidden;box-shadow:0 8px 36px rgba(8,42,94,0.1);border:1px solid var(--gray-100);-webkit-overflow-scrolling:touch;} .compare-table{width:100%;min-width:600px;border-collapse:collapse;background:var(--white);} .compare-table thead th{background:var(--blue-900);color:var(--white);font-family:var(--font-display);font-size:0.85rem;font-weight:600;padding:18px 22px;text-align:left;white-space:nowrap;} .compare-highlight{background:linear-gradient(135deg,var(--gold-500),var(--gold-400))!important;color:var(--blue-900)!important;} .compare-table tbody td{padding:14px 22px;font-size:0.9rem;border-bottom:1px solid var(--gray-100);color:var(--gray-700);} .compare-table tbody tr:last-child td{border-bottom:none;} .compare-table tbody tr:hover{background:var(--blue-50);} .compare-table tbody td:first-child{font-weight:600;color:var(--gray-800);white-space:nowrap;} .compare-table tbody td:last-child{background:rgba(212,175,55,0.04);} .tbl-yes{color:#22c55e;display:inline-flex;} .tbl-no{color:var(--gray-300);display:inline-flex;} .tbl-partial{font-size:0.83rem;color:var(--gray-400);font-weight:500;} .tbl-yes-text{font-size:0.83rem;font-weight:600;color:#22c55e;display:inline-flex;align-items:center;gap:5px;} .tbl-yes-text::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;} /* ============ COMMAND CENTER ============ */ .cmd-visual{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:32px;} .cmd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .cmd-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:24px 16px;text-align:center;transition:background 0.4s var(--ease),transform 0.4s var(--ease);} .cmd-card:hover{background:rgba(255,255,255,0.07);transform:translateY(-4px);} .cmd-card-icon{width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,0.08);border:1px solid rgba(212,175,55,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--gold-300);} .cmd-card h4{font-family:var(--font-display);font-size:0.9rem;font-weight:700;margin-bottom:6px;} .cmd-card p{font-size:0.78rem;color:rgba(255,255,255,0.85);line-height:1.5;} /* ============ BENEFITS ============ */ .benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .benefit-card{background:var(--white);border:1px solid var(--gray-100);border-radius:14px;padding:24px 28px;display:flex;gap:18px;align-items:flex-start;transition:box-shadow 0.4s var(--ease),border-color 0.4s var(--ease),transform 0.4s var(--ease);} .benefit-card:hover{box-shadow:0 8px 28px rgba(8,42,94,0.08);border-color:var(--blue-100);transform:translateY(-3px);} .benefit-icon-wrap{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blue-50),var(--blue-100));display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-400);} .benefit-body h4{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--blue-900);margin-bottom:5px;} .benefit-body p{font-size:0.88rem;color:var(--gray-500);line-height:1.6;} /* ============ DOCTRINE BLOCK ============ */ .doctrine-block-inner{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;} .doctrine-block-inner h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;margin-bottom:14px;line-height:1.2;} .doctrine-block-inner>div>p{margin-bottom:24px;line-height:1.75;font-size:1rem;} .doctrine-points{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;} .doctrine-points li{display:flex;align-items:flex-start;gap:10px;font-size:0.92rem;color:#ffffff;line-height:1.55;} .doctrine-check{color:var(--gold-400);flex-shrink:0;margin-top:2px;} .doctrine-img-wrap{display:flex;justify-content:center;align-items:center;} .doctrine-img-wrap img{width:100%;max-width:460px;height:auto;border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.08);background:linear-gradient(135deg,var(--blue-800),var(--blue-700));object-fit:contain;} /* ============ FINAL CTA ============ */ .final-cta{padding:100px 0;background:linear-gradient(160deg,var(--blue-900),var(--blue-700));text-align:center;position:relative;overflow:hidden;} .final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 55% at 50% 50%,rgba(212,175,55,0.06),transparent 70%);pointer-events:none;} .final-cta-content{position:relative;z-index:2;max-width:620px;margin:0 auto;} .final-cta h2{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;margin-bottom:14px;line-height:1.2;} .final-cta p{font-size:1.02rem;margin-bottom:32px;line-height:1.7;color:#ffffff;} .final-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* ============ PAGE HERO ============ */ .page-hero{background:linear-gradient(160deg,var(--blue-900),var(--blue-800),var(--blue-700));padding:150px 20px 70px;text-align:center;position:relative;overflow:hidden;} .page-hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;color:var(--white);line-height:1.15;margin-bottom:14px;} .page-hero>.contain>p{font-size:1.05rem;color:rgba(255,255,255,0.85);max-width:560px;margin:0 auto;line-height:1.8;} /* ============ PROSE ============ */ .prose{max-width:800px;margin:0 auto;} .prose h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--blue-900);margin:32px 0 12px;} .prose h3:first-child{margin-top:0;} .prose p{font-size:0.98rem;color:var(--gray-600);line-height:1.8;margin-bottom:14px;} .prose ul{margin:14px 0 20px;padding:0;} .prose ul li{font-size:0.95rem;color:var(--gray-600);line-height:1.75;padding:6px 0 6px 24px;position:relative;} .prose ul li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--gold-500);} .prose ul li strong{color:var(--blue-900);font-weight:700;} .prose-quote{background:linear-gradient(135deg,var(--blue-50),var(--blue-100));border-left:4px solid var(--gold-500);border-radius:0 12px 12px 0;padding:24px 32px;margin:24px 0;} .prose-quote p{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--blue-900);font-style:italic;margin:0;} .leadership-msg{background:var(--blue-50);border-left:4px solid var(--gold-500);border-radius:0 12px 12px 0;padding:32px 36px;margin:36px 0;} .leadership-msg p{font-style:italic;color:var(--blue-900);margin-bottom:12px;} .leadership-msg p:last-child{margin-bottom:0;font-weight:700;color:var(--blue-700);} /* ============ PILLARS ============ */ .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .pillar-card{text-align:center;background:var(--white);border:1px solid var(--gray-100);border-radius:18px;padding:32px 20px;transition:box-shadow 0.3s var(--ease),transform 0.3s var(--ease);} .pillar-card:hover{box-shadow:0 8px 28px rgba(8,42,94,0.08);transform:translateY(-4px);} .pillar-num{font-family:var(--font-display);font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--blue-400),var(--gold-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;} .pillar-card h4{font-family:var(--font-display);font-weight:700;color:var(--blue-900);margin-bottom:6px;font-size:0.95rem;} .pillar-card p{font-size:0.85rem;color:var(--gray-500);} /* ============ INDUSTRIES ROW ============ */ .ind-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-bottom:80px;} .ind-row:last-child{margin-bottom:0;} .ind-row-reverse{direction:rtl;} .ind-row-reverse>*{direction:ltr;} .ind-num{font-family:var(--font-display);font-size:3rem;font-weight:800;background:linear-gradient(135deg,rgba(11,74,162,0.08),rgba(212,175,55,0.1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px;} .ind-text h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--blue-900);margin-bottom:12px;} .ind-text p{font-size:0.95rem;color:var(--gray-600);line-height:1.75;margin-bottom:18px;} .ind-benefits{display:flex;flex-direction:column;gap:10px;} .ind-benefits li{display:flex;align-items:flex-start;gap:10px;font-size:0.92rem;color:var(--gray-700);line-height:1.55;} .ind-check{width:22px;height:22px;min-width:22px;border-radius:50%;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));display:flex;align-items:center;justify-content:center;margin-top:1px;} .ind-check svg{width:13px;height:13px;color:var(--blue-900);} .ind-img-wrap{position:relative;} .ind-img-accent{position:absolute;width:85%;height:85%;border-radius:18px;background:linear-gradient(135deg,var(--blue-400),var(--blue-700));top:18px;right:-10px;z-index:0;opacity:0.1;} .ind-img-accent--alt{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));right:auto;left:-10px;} .ind-img-card{position:relative;z-index:1;border-radius:18px;overflow:hidden;box-shadow:0 8px 36px rgba(8,42,94,0.12);border:1px solid rgba(0,0,0,0.04);transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease);} .ind-row:hover .ind-img-card{transform:translateY(-5px);box-shadow:0 14px 48px rgba(8,42,94,0.18);} .ind-img-card img{width:100%;height:340px;object-fit:cover;background:linear-gradient(135deg,var(--blue-800),var(--blue-700));} .ind-img-badge{position:absolute;bottom:16px;left:16px;z-index:2;background:var(--white);border-radius:50px;padding:7px 16px;font-family:var(--font-display);font-size:0.75rem;font-weight:700;color:var(--blue-900);box-shadow:0 4px 14px rgba(0,0,0,0.1);display:flex;align-items:center;gap:6px;} /* ============ TESTIMONIALS ============ */ .testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .testi-card{border-radius:18px;transition:transform 0.5s var(--ease);} .testi-card:hover{transform:translateY(-5px);} .testi-card-inner{background:var(--white);border:1px solid var(--gray-100);border-radius:18px;padding:32px;height:100%;position:relative;overflow:hidden;transition:border-color 0.4s var(--ease),box-shadow 0.4s var(--ease);} .testi-card:hover .testi-card-inner{border-color:var(--blue-100);box-shadow:0 10px 40px rgba(8,42,94,0.1);} .testi-card-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-500),var(--blue-400));transform:scaleX(0);transform-origin:left;transition:transform 0.5s var(--ease);} .testi-card:hover .testi-card-inner::before{transform:scaleX(1);} .testi-featured .testi-card-inner{background:linear-gradient(160deg,var(--blue-900),var(--blue-800));border-color:rgba(255,255,255,0.06);} .testi-featured:hover .testi-card-inner{border-color:rgba(212,175,55,0.2);box-shadow:0 14px 50px rgba(8,42,94,0.3);} .testi-featured .testi-card-inner::before{background:linear-gradient(90deg,var(--gold-500),var(--gold-300));} .testi-featured .testi-stars{color:var(--gold-400);} .testi-featured .testi-quote-icon{color:rgba(212,175,55,0.12);} .testi-featured .testi-text{color:#ffffff;} .testi-featured .testi-divider{background:rgba(255,255,255,0.08);} .testi-featured .testi-author h5{color:var(--white);} .testi-featured .testi-author span{color:var(--gold-300);} .testi-featured .testi-avatar{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);} .testi-stars{font-size:0.82rem;color:var(--gold-400);letter-spacing:3px;margin-bottom:14px;} .testi-quote-icon{position:absolute;top:24px;right:24px;color:var(--gray-100);pointer-events:none;} .testi-text{font-size:0.92rem;line-height:1.8;color:var(--gray-700);font-style:italic;position:relative;z-index:1;} .testi-divider{height:1px;background:var(--gray-100);margin:20px 0;} .testi-author{display:flex;align-items:center;gap:12px;} .testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue-700),var(--blue-900));color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.8rem;font-weight:700;flex-shrink:0;} .testi-author h5{font-family:var(--font-display);font-size:0.88rem;font-weight:700;color:var(--blue-900);margin:0;} .testi-author span{font-size:0.78rem;color:var(--gray-400);} /* ============ TEAM ============ */ .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;} .team-card{background:var(--white);border:1px solid var(--gray-100);border-radius:18px;overflow:hidden;transition:box-shadow 0.4s var(--ease),transform 0.4s var(--ease);} .team-card:hover{box-shadow:0 8px 28px rgba(8,42,94,0.1);transform:translateY(-4px);} .team-card-img{overflow:hidden;} .team-card-img img{width:100%;height:auto;object-fit:contain;background:var(--gray-50);} .team-card-body{padding:24px;text-align:center;} .team-card-body h4{font-family:var(--font-display);font-weight:700;color:var(--blue-900);margin-bottom:5px;} .team-card-body p{font-size:0.85rem;color:var(--gray-500);} /* ============ CALL CENTER PILLARS ============ */ .cc-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;} .cc-pillar{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:24px 18px;text-align:center;} .cc-pillar-icon{margin:0 auto 10px;color:var(--gold-300);} .cc-pillar h4{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--gold-300);margin-bottom:4px;} .cc-pillar p{font-size:0.78rem;color:rgba(255,255,255,0.85);} .trust-strip{background:linear-gradient(135deg,var(--gold-500),var(--gold-400));padding:36px 20px;text-align:center;} .trust-strip h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--blue-900);margin-bottom:6px;} .trust-strip p{font-size:0.95rem;color:var(--blue-800);max-width:480px;margin:0 auto;} .transition-list{display:flex;flex-direction:column;gap:10px;margin:20px 0;} .transition-item{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--gray-100);border-radius:10px;padding:14px 18px;} .transition-item .from{font-size:0.88rem;color:var(--gray-500);min-width:180px;} .transition-item .arrow{color:var(--gold-500);font-weight:700;font-size:1.1rem;} .transition-item .to{font-size:0.88rem;font-weight:600;color:var(--blue-700);} .result-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0;} .result-card{background:linear-gradient(135deg,var(--blue-50),var(--blue-100));border-radius:12px;padding:18px;text-align:center;border:1px solid var(--blue-100);} .result-card .result-num{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--blue-700);} .result-card .result-label{font-size:0.78rem;color:var(--gray-600);margin-top:4px;} .client-quote-block{background:var(--blue-50);border-left:4px solid var(--gold-500);border-radius:0 12px 12px 0;padding:24px 28px;margin:28px 0;} .client-quote-block p{font-style:italic;color:var(--blue-900);font-size:1rem;margin-bottom:6px;} .client-quote-block .quote-author{font-family:var(--font-display);font-size:0.82rem;font-weight:600;color:var(--gray-600);font-style:normal;} /* ============ SOLUTIONS PRODUCT IMAGES ============ */ .product-duo{display:flex;justify-content:center;gap:28px;margin:40px auto 0;max-width:700px;} .product-duo-item{flex:0 1 40%;border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(8,42,94,0.1);border:1px solid var(--gray-100);transition:transform 0.4s var(--ease);} .product-duo-item:hover{transform:translateY(-4px);} .product-duo-item img{width:100%;height:auto;object-fit:contain;background:var(--gray-50);} .product-wide-img{max-width:90%;margin:30px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 12px 50px rgba(8,42,94,0.12);border:1px solid var(--gray-100);transition:transform 0.4s var(--ease);} .product-wide-img:hover{transform:translateY(-4px);} .product-wide-img img{width:100%;height:auto;object-fit:contain;display:block;background:var(--gray-50);} .product-full-img{max-width:90%;margin:50px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 12px 50px rgba(8,42,94,0.12);border:1px solid var(--gray-100);} .product-full-img img{width:100%;height:auto;object-fit:contain;background:var(--gray-50);} .product-tagline{text-align:center;margin-top:28px;} .product-tagline h3{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--blue-900);margin-bottom:6px;} .product-tagline p{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--gold-500);} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .why-card{background:var(--white);border:1px solid var(--gray-100);border-radius:16px;padding:32px 24px;transition:box-shadow 0.4s var(--ease),transform 0.4s var(--ease),border-color 0.4s var(--ease);} .why-card:hover{box-shadow:0 8px 28px rgba(8,42,94,0.08);transform:translateY(-4px);border-color:var(--blue-100);} .why-card h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--blue-900);margin-bottom:10px;} .why-card p{font-size:0.88rem;color:var(--gray-600);line-height:1.65;margin-bottom:12px;} .why-card ul{display:flex;flex-direction:column;gap:6px;} .why-card ul li{font-size:0.85rem;color:var(--gray-600);display:flex;align-items:flex-start;gap:8px;} .why-card ul li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-500);flex-shrink:0;margin-top:7px;} /* ============ LEGAL PAGE ============ */ .legal-content{max-width:860px;margin:0 auto;padding:0 20px;} .legal-content h2{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--blue-900);margin:50px 0 16px;padding-top:30px;border-top:1px solid var(--gray-200);} .legal-content h2:first-child{margin-top:0;padding-top:0;border-top:none;} .legal-content h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--blue-700);margin:28px 0 10px;} .legal-content p{font-size:0.95rem;color:var(--gray-600);line-height:1.85;margin-bottom:14px;} .legal-content ul{list-style:none;margin:14px 0 20px;padding:0;} .legal-content ul li{font-size:0.93rem;color:var(--gray-600);line-height:1.75;padding:6px 0 6px 24px;position:relative;} .legal-content ul li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--gold-500);} .legal-content .legal-updated{font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:var(--gray-400);margin-bottom:30px;} .legal-content .legal-caps{font-size:0.88rem;color:var(--gray-700);line-height:1.85;} .legal-contact{background:var(--blue-50);border-radius:14px;padding:28px 32px;margin:30px 0;} .legal-contact p{color:var(--blue-900);margin-bottom:4px;} .legal-contact a{color:var(--blue-400);font-weight:600;text-decoration:underline;} .legal-contact a:hover{color:var(--gold-500);} .legal-divider{height:2px;background:linear-gradient(90deg,var(--gold-500),var(--blue-400));border:none;margin:60px 0;border-radius:2px;} /* ============ CONTACT US PAGE ============ */ .cu-section{padding:80px 0;background:var(--blue-900);position:relative;} .cu-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;} .cu-info{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px 36px;} .cu-info h2{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--white);margin-bottom:12px;letter-spacing:-0.02em;} .cu-intro{font-size:0.95rem;color:rgba(255,255,255,0.65);line-height:1.7;margin-bottom:32px;} .cu-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;} .cu-item:last-child{margin-bottom:0;} .cu-icon{width:44px;height:44px;min-width:44px;border-radius:50%;background:rgba(212,175,55,0.1);border:1px solid rgba(212,175,55,0.25);display:flex;align-items:center;justify-content:center;color:var(--gold-400);} .cu-item h4{font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--gold-400);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;} .cu-item p{font-size:0.92rem;color:rgba(255,255,255,0.75);line-height:1.6;} .cu-item a{color:var(--gold-300);text-decoration:underline;transition:color 0.3s;} .cu-item a:hover{color:var(--gold-400);} .cu-phone{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--white);letter-spacing:0.02em;} .cu-visuals{display:flex;flex-direction:column;gap:20px;} .cu-building-img{border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);} .cu-building-img img{width:100%;height:auto;object-fit:cover;min-height:250px;background:linear-gradient(135deg,var(--blue-800),var(--blue-700));} .cu-location-block{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:24px 28px;} .cu-location-block h4{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--gold-400);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;} .cu-location-block p{font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.65;} .cu-map-img{border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.08);position:relative;} .cu-map-img img{width:100%;height:auto;min-height:200px;object-fit:cover;background:linear-gradient(135deg,#2d5a3d,#4a8c6e);} .cu-map-pin{position:absolute;top:50%;left:55%;transform:translate(-50%,-60%);display:flex;flex-direction:column;align-items:center;gap:6px;} .cu-pin-dot{color:var(--gold-400);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));animation:pinBounce 2s ease-in-out infinite;} @keyframes pinBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} .cu-demo-banner{padding:50px 0;background:linear-gradient(160deg,var(--blue-800),var(--blue-900));border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);} .cu-demo-inner{display:flex;align-items:center;gap:30px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:36px 40px;} .cu-demo-icon{width:60px;height:60px;min-width:60px;border-radius:14px;background:rgba(212,175,55,0.1);border:1px solid rgba(212,175,55,0.25);display:flex;align-items:center;justify-content:center;color:var(--gold-400);} .cu-demo-text{flex:1;} .cu-demo-text h3{font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;} .cu-demo-text h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--gold-400);margin-bottom:8px;} .cu-demo-text p{font-size:0.9rem;color:rgba(255,255,255,0.6);line-height:1.6;} .cu-demo-cta{text-align:center;flex-shrink:0;} .cu-demo-note{font-size:0.8rem;color:rgba(255,255,255,0.45);margin-top:12px;} .cu-demo-note em{font-style:italic;} .cu-pillars-section{padding:50px 0;background:var(--blue-900);border-top:1px solid rgba(255,255,255,0.06);} .cu-pillars-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .cu-pillar-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:24px 16px;text-align:center;transition:background 0.3s var(--ease),transform 0.3s var(--ease);} .cu-pillar-item:hover{background:rgba(255,255,255,0.07);transform:translateY(-3px);} .cu-pillar-icon{width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,0.08);border:1px solid rgba(212,175,55,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--gold-400);} .cu-pillar-item h5{font-family:var(--font-display);font-size:0.78rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;} .cu-pillar-item p{font-size:0.78rem;color:rgba(255,255,255,0.55);line-height:1.5;} .cu-closing{padding:50px 0;background:var(--blue-900);text-align:center;border-top:1px solid rgba(255,255,255,0.06);} .cu-closing h3{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--gold-400);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;} .cu-closing p{font-size:0.95rem;color:rgba(255,255,255,0.5);} /* ============ CLIENT PORTAL PAGE ============ */ .portal-page{min-height:100vh;background:linear-gradient(170deg,var(--blue-900) 0%,var(--blue-800) 50%,#0a1e3d 100%);display:flex;flex-direction:column;align-items:center;padding:0;overflow-x:hidden;} .portal-security-badge{display:flex;align-items:center;gap:14px;padding:20px 0;width:100%;max-width:1100px;justify-content:flex-end;padding-right:40px;margin-top:20px;} .portal-lock-icon{width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,0.15);border:2px solid rgba(212,175,55,0.3);display:flex;align-items:center;justify-content:center;color:var(--gold-400);} .portal-security-badge strong{font-family:var(--font-display);font-size:0.9rem;color:var(--white);display:block;letter-spacing:0.04em;} .portal-security-badge span{font-size:0.82rem;color:rgba(255,255,255,0.55);} .portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;width:100%;max-width:1100px;padding:20px 40px 40px;align-items:start;} .portal-left{position:relative;padding-bottom:280px;} .portal-logo{margin-bottom:12px;} .portal-logo img{max-width:280px;height:auto;object-fit:contain;} .portal-tagline-sub{font-family:var(--font-display);font-size:0.82rem;font-weight:600;color:var(--gold-400);letter-spacing:0.04em;margin-bottom:40px;} .portal-brand-text{margin-bottom:36px;} .portal-brand-text h2{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--white);line-height:1.2;margin-bottom:14px;} .portal-brand-text p{font-size:0.92rem;color:rgba(255,255,255,0.6);line-height:1.7;max-width:380px;} .portal-features{display:flex;flex-direction:column;gap:20px;} .portal-feature{display:flex;align-items:flex-start;gap:14px;} .portal-feature-icon{width:44px;height:44px;min-width:44px;border-radius:50%;background:rgba(212,175,55,0.12);border:1px solid rgba(212,175,55,0.25);display:flex;align-items:center;justify-content:center;color:var(--gold-400);} .portal-feature strong{font-family:var(--font-display);font-size:0.82rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.04em;display:block;margin-bottom:2px;} .portal-feature span{font-size:0.85rem;color:rgba(255,255,255,0.55);} .portal-truck-img{position:absolute;bottom:0;left:0;right:0;height:260px;overflow:hidden;border-radius:16px;} .portal-truck-img img{width:100%;height:100%;object-fit:cover;object-position:center bottom;} .portal-right{position:relative;} .portal-form-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:40px 36px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} .portal-form-header{text-align:center;margin-bottom:28px;} .portal-form-label{font-family:var(--font-display);font-size:0.82rem;font-weight:700;color:var(--gold-400);text-transform:uppercase;letter-spacing:0.1em;display:block;margin-bottom:6px;} .portal-form-header h1{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--white);margin-bottom:8px;} .portal-form-header p{font-size:0.9rem;color:rgba(255,255,255,0.55);} .portal-form-line{width:50px;height:3px;background:var(--gold-400);margin:16px auto 0;border-radius:2px;} .portal-field{margin-bottom:22px;} .portal-field label{font-family:var(--font-display);font-size:0.78rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;display:block;} .portal-input-wrap{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:14px 16px;transition:border-color 0.3s;} .portal-input-wrap:focus-within{border-color:var(--gold-400);} .portal-input-wrap svg{color:rgba(255,255,255,0.35);flex-shrink:0;} .portal-input-wrap input{flex:1;background:none;border:none;outline:none;font-family:var(--font-body);font-size:0.92rem;color:var(--white);} .portal-input-wrap input::placeholder{color:rgba(255,255,255,0.3);} .portal-eye{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.35);padding:0;display:flex;transition:color 0.3s;} .portal-eye:hover{color:var(--gold-400);} .portal-signin-btn{width:100%;padding:16px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);font-family:var(--font-display);font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease);margin-top:8px;} .portal-signin-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,175,55,0.35);} .portal-options{display:flex;justify-content:space-between;align-items:center;margin-top:16px;} .portal-remember{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:rgba(255,255,255,0.55);cursor:pointer;} .portal-remember input{accent-color:var(--gold-400);width:16px;height:16px;cursor:pointer;} .portal-forgot{font-family:var(--font-display);font-size:0.82rem;font-weight:600;color:var(--gold-400);transition:color 0.3s;} .portal-forgot:hover{color:var(--gold-300);} .portal-divider{display:flex;align-items:center;gap:16px;margin:24px 0;} .portal-divider::before,.portal-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.1);} .portal-divider span{font-family:var(--font-display);font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.35);} .portal-sso-btn{width:100%;padding:14px;border:1px solid rgba(255,255,255,0.15);border-radius:12px;background:transparent;color:var(--white);font-family:var(--font-display);font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color 0.3s var(--ease),background 0.3s var(--ease);} .portal-sso-btn span{font-weight:400;font-size:0.78rem;color:rgba(255,255,255,0.45);text-transform:none;} .portal-sso-btn:hover{border-color:var(--gold-400);background:rgba(212,175,55,0.05);} .portal-sso-btn svg{color:var(--gold-400);} .portal-help{display:flex;align-items:flex-start;gap:14px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06);} .portal-help-icon{color:var(--gold-400);flex-shrink:0;margin-top:2px;} .portal-help strong{font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--gold-400);text-transform:uppercase;display:block;margin-bottom:4px;} .portal-help p{font-size:0.82rem;color:rgba(255,255,255,0.55);margin:0 0 2px;} .portal-trust-strip{display:flex;justify-content:center;gap:40px;padding:40px;width:100%;max-width:1100px;border-top:1px solid rgba(255,255,255,0.06);} .portal-trust-item{display:flex;align-items:flex-start;gap:14px;} .portal-trust-icon{width:44px;height:44px;min-width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-400);border:1px solid;} .portal-trust-item strong{font-family:var(--font-display);font-size:0.82rem;font-weight:700;color:var(--white);text-transform:uppercase;display:block;margin-bottom:2px;} .portal-trust-item span{font-size:0.78rem;color:rgba(255,255,255,0.5);} .portal-footer{width:100%;text-align:center;padding:24px 20px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:center;align-items:center;gap:20px;font-size:0.78rem;color:rgba(255,255,255,0.3);} .portal-footer a{color:rgba(255,255,255,0.45);transition:color 0.3s;} .portal-footer a:hover{color:var(--gold-400);} /* ============ FORM PAGES — Solutions Inquiry & Speak to Advisor ============ */ .form-page{ font-family:Arial,Helvetica,sans-serif; margin:0; padding:40px 20px; background:linear-gradient(135deg,#082A5E 0%,#0B4AA2 100%); display:flex; justify-content:center; align-items:center; min-height:100vh; color:#082A5E; line-height:1.6; } .form-page .form-container{ background:rgba(255,255,255,0.97); max-width:650px; width:100%; padding:40px 50px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.35); box-sizing:border-box; } .form-page .logo-container{text-align:center;margin-bottom:20px;} .form-page .logo-container img{max-width:280px;height:auto;display:inline-block;} .form-page .divider{height:1px;background:#d1d5db;margin:15px 0;} .form-page h2.form-title{text-align:center;color:#d97706;font-style:italic;font-size:26px;margin:15px 0;font-weight:bold;font-family:Arial,Helvetica,sans-serif;} .form-page .form-group{display:flex;align-items:center;margin-bottom:12px;} .form-page .form-group label{width:35%;font-weight:bold;color:#1e293b;font-size:14px;padding-right:15px;text-align:left;line-height:1.3;} .form-page .form-group .input-wrapper{width:65%;} .form-page .form-group input, .form-page .form-group select{ width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:4px;background-color:#f8fafc; font-size:14px;color:#334155;box-sizing:border-box;outline:none;transition:border-color 0.2s; font-family:Arial,Helvetica,sans-serif; } .form-page .form-group input:focus, .form-page .form-group select:focus{border-color:#2563eb;background-color:#ffffff;} .form-page .captcha-group{display:flex;align-items:center;margin-top:20px;margin-bottom:25px;background:#f8fafc;padding:15px;border:1px solid #e2e8f0;border-radius:4px;} .form-page .captcha-group label{width:50%;font-weight:bold;color:#1e293b;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .form-page .captcha-group .input-wrapper{width:50%;} .form-page .captcha-img{height:38px;width:auto;max-width:140px;vertical-align:middle;border:1px solid #cbd5e1;border-radius:4px;background:#fff;display:inline-block;} .form-page .captcha-reload{background:none;border:none;cursor:pointer;color:#2563eb;font-size:18px;padding:2px 6px;line-height:1;font-weight:bold;} .form-page .submit-btn-container{text-align:center;margin-top:10px;} .form-page .submit-btn{ background:linear-gradient(to bottom,#2563eb,#1e3a8a);color:#ffffff;border:none; padding:14px 40px;border-radius:4px;font-size:16px;font-weight:bold;cursor:pointer; box-shadow:0 4px 6px rgba(0,0,0,0.2);text-transform:uppercase;letter-spacing:0.5px; transition:background 0.3s;font-family:Arial,Helvetica,sans-serif; } .form-page .submit-btn:hover{background:linear-gradient(to bottom,#1d4ed8,#1e3a8a);} @media (max-width:600px){ .form-page .form-group,.form-page .captcha-group{flex-direction:column;align-items:flex-start;} .form-page .form-group label,.form-page .form-group .input-wrapper, .form-page .captcha-group label,.form-page .captcha-group .input-wrapper{width:100%;} .form-page .form-group label{margin-bottom:5px;} .form-page .form-container{padding:30px 20px;} } /* ============ FORM RESPONSE PAGE ============ */ .form-response{font-family:Arial,Helvetica,sans-serif;margin:0;padding:40px 20px;background:linear-gradient(135deg,#082A5E 0%,#0B4AA2 100%);display:flex;justify-content:center;align-items:center;min-height:100vh;} .form-response .response-card{background:rgba(255,255,255,0.97);max-width:520px;width:100%;padding:50px 40px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.35);text-align:center;} .form-response .response-card img{max-width:240px;height:auto;margin:0 auto 24px;display:block;} .form-response .response-card h1{font-size:24px;color:#082A5E;margin-bottom:14px;font-family:Arial,Helvetica,sans-serif;} .form-response .response-card p{color:#475569;font-size:15px;line-height:1.6;margin-bottom:24px;} .form-response .response-icon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;font-weight:bold;} .form-response .response-icon.success{background:#22c55e;} .form-response .response-icon.error{background:#ef4444;} .form-response .back-btn{display:inline-block;padding:12px 32px;background:linear-gradient(to bottom,#2563eb,#1e3a8a);color:#fff;border-radius:4px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;font-size:14px;text-decoration:none;} .form-response .back-btn:hover{background:linear-gradient(to bottom,#1d4ed8,#1e3a8a);} /* ============ FOOTER ============ */ .site-footer{background:var(--blue-900);color:rgba(255,255,255,0.6);padding:70px 0 28px;border-top:1px solid rgba(255,255,255,0.06);} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;} .footer-brand p{font-size:0.85rem;margin-top:12px;line-height:1.7;max-width:300px;color:rgba(255,255,255,0.4);} .footer-brand .nav-logo-img{height:50px;max-width:260px;} .site-footer h5{font-family:var(--font-display);font-size:0.82rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:18px;} .footer-links a{display:block;font-size:0.85rem;color:rgba(255,255,255,0.45);padding:4px 0;transition:color 0.3s;} .footer-links a:hover{color:var(--gold-300);} .footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;color:rgba(255,255,255,0.3);flex-wrap:wrap;gap:8px;} /* ============ RESPONSIVE — TABLET (≤1024px) ============ */ @media(max-width:1024px){ .hero-inner{flex-direction:column;text-align:center;align-items:center;} .hero-btns{justify-content:center;} .hero-img{margin-top:30px;max-width:600px;width:100%;} .hero-img img{height:auto;object-position:center;} .intel-grid{grid-template-columns:1fr 1fr;} .cmd-grid{grid-template-columns:1fr 1fr;} .doctrine-block-inner{grid-template-columns:1fr;text-align:center;} .doctrine-img-wrap{margin-top:30px;} .doctrine-img-wrap img{max-width:400px;} .doctrine-points{align-items:center;} .footer-grid{grid-template-columns:1fr 1fr;} .ind-row{gap:36px;} .pillars-grid{grid-template-columns:1fr 1fr;} .contact-grid{grid-template-columns:1fr;} .result-cards{grid-template-columns:1fr 1fr;} .team-grid{grid-template-columns:1fr;} .why-grid{grid-template-columns:1fr;} .cu-grid{grid-template-columns:1fr;gap:40px;} .cu-pillars-grid{grid-template-columns:repeat(3,1fr);} .cu-demo-inner{flex-direction:column;text-align:center;} .portal-grid{grid-template-columns:1fr;padding:20px 24px 40px;} .portal-security-badge{justify-content:center;padding-right:0;} .portal-left{padding-bottom:0;} .portal-truck-img{display:none;} .portal-brand-text h2{font-size:1.6rem;} .portal-trust-strip{flex-direction:column;align-items:center;gap:20px;} } /* ============ RESPONSIVE — MOBILE (≤768px) ============ */ @media(max-width:768px){ .contain{padding:0 16px;} .doctrine-topbar{padding:6px 12px;} .doctrine-topbar a{font-size:0.6rem;letter-spacing:0.06em;gap:4px;} .doctrine-topbar a svg{width:10px;height:10px;} /* MOBILE NAV — wide-logo sized correctly */ .main-nav{top:28px;height:60px;} .nav-wrap{padding:0 16px;gap:12px;} .nav-logo-img{height:34px;max-width:160px;} .mobile-hamburger{display:flex;} .nav-cta-wrap{display:none;} /* MOBILE SLIDE-OUT DRAWER — full screen, sits above logo */ /* MOBILE DRAWER — TRUE full-screen, solid, bulletproof */ .nav-links{ position:fixed!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; max-width:100%!important; background:#082A5E!important; flex-direction:column!important; justify-content:flex-start!important; align-items:stretch!important; padding:90px 24px 40px!important; gap:6px!important; z-index:1003!important; transform:translateX(100%); transition:transform 0.4s var(--ease); overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:1!important; visibility:visible!important; } .nav-links.open{transform:translateX(0)!important;} /* Bigger, clearer tap targets */ .nav-link{ font-size:1.05rem!important; padding:16px 18px!important; border-radius:10px; color:rgba(255,255,255,0.85)!important; border-bottom:1px solid rgba(255,255,255,0.06); justify-content:space-between; font-weight:600; } .nav-link:hover,.nav-link.active{background:rgba(255,255,255,0.08)!important;color:#ffffff!important;} .nav-dd{width:100%;} /* Mobile dropdown — reset desktop positioning so menu doesn't shift off-screen */ .nav-dd-menu{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;background:rgba(255,255,255,0.03);box-shadow:none;border:none;border-radius:10px;opacity:1!important;visibility:visible!important;max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease),padding 0.4s var(--ease);min-width:auto;width:100%;padding:0 8px;margin-top:0;} .nav-dd.open .nav-dd-menu{max-height:400px;padding:8px;margin-top:4px;} .nav-dd:hover .nav-dd-menu{transform:none!important;} .nav-dd-menu a{color:rgba(255,255,255,0.55);padding:10px 14px;font-size:0.85rem;border-radius:8px;} .nav-dd-menu a:hover{background:rgba(255,255,255,0.06);color:var(--gold-300);} /* Mobile-only CTA inside drawer */ .mobile-nav-cta{display:block;margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,0.06);} .mobile-nav-cta a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:50px;background:linear-gradient(135deg,var(--gold-500),var(--gold-400));color:var(--blue-900);font-family:var(--font-display);font-size:0.9rem;font-weight:700;width:100%;} /* Footer logo on mobile */ .footer-brand .nav-logo-img{height:42px;max-width:200px;} .hero{min-height:auto;padding:110px 0 50px;} .hero-inner{padding:0 16px;gap:30px;} .hero h1{font-size:clamp(1.6rem,7vw,2.4rem);} .hero-sub{font-size:0.95rem;margin-bottom:24px;} .hero-btns{flex-direction:column;align-items:center;width:100%;} .hero-btns .btn-gold,.hero-btns .btn-outline-light{width:100%;justify-content:center;} .hero-img{max-width:100%;} .section{padding:50px 0;} .sec-head{margin-bottom:36px;} .sec-head h2{font-size:clamp(1.4rem,5.5vw,2rem);} .sec-head p{font-size:0.92rem;} .trust-bar{padding:16px 12px;} .trust-bar-inner{gap:14px;} .trust-item{font-size:0.78rem;gap:6px;} .trust-item strong{font-size:1rem;} .trust-sep{display:none;} .flow-track{flex-direction:column;align-items:center;} .flow-node{flex:none;width:100%;max-width:260px;margin-bottom:6px;} .flow-icon{width:56px;height:56px;} .flow-arrow{transform:rotate(90deg);flex:none;padding:0;margin:2px 0;} .intel-grid{grid-template-columns:1fr;} .cmd-grid{grid-template-columns:1fr;} .cmd-visual{padding:20px;} .benefits-grid{grid-template-columns:1fr;} .doctrine-block-inner{gap:30px;} .doctrine-img-wrap img{max-width:100%;} .compare-table-wrap{margin:0 -16px;border-radius:0;border-left:none;border-right:none;} .final-cta{padding:50px 0;} .final-cta-btns{flex-direction:column;align-items:center;width:100%;} .final-cta-btns .btn-gold,.final-cta-btns .btn-outline-light{width:100%;max-width:320px;justify-content:center;} .page-hero{padding:110px 16px 50px;} .page-hero h1{font-size:clamp(1.5rem,6vw,2.2rem);} .prose h3{font-size:1.2rem;} .prose-quote{padding:20px 24px;} .prose-quote p{font-size:1rem;} .leadership-msg{padding:24px 28px;} .pillars-grid{grid-template-columns:1fr;} .ind-row,.ind-row-reverse{grid-template-columns:1fr;direction:ltr;gap:24px;margin-bottom:50px;} .ind-img-accent{display:none;} .ind-img-card img{height:220px;} .ind-num{font-size:2.4rem;} .ind-text h3{font-size:1.2rem;} .testi-grid{grid-template-columns:1fr;} .testi-card-inner{padding:24px;} .cc-pillars{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;gap:30px;} .result-cards{grid-template-columns:1fr 1fr;} .transition-item{flex-direction:column;text-align:center;gap:6px;} .transition-item .from{min-width:auto;} .footer-grid{grid-template-columns:1fr;gap:24px;} .footer-bottom{flex-direction:column;text-align:center;gap:6px;} .footer-brand p{max-width:100%;} .product-duo{flex-direction:column;align-items:center;gap:20px;} .product-duo-item{flex:none;width:80%;max-width:300px;} .product-wide-img{max-width:100%;} .product-full-img{max-width:100%;} .cu-section{padding:50px 0;} .cu-info{padding:28px 24px;} .cu-info h2{font-size:1.3rem;} .cu-phone{font-size:1.1rem;} .cu-pillars-grid{grid-template-columns:1fr 1fr;} .cu-demo-inner{padding:28px 24px;} .cu-demo-text h2{font-size:1.2rem;} .cu-map-pin{display:none;} .portal-form-card{padding:28px 22px;} .portal-form-header h1{font-size:1.5rem;} .portal-brand-text{display:none;} .portal-features{display:none;} .portal-logo img{max-width:200px;} .portal-left{text-align:center;padding-bottom:0;} .portal-tagline-sub{margin-bottom:20px;} .portal-security-badge{flex-direction:column;text-align:center;gap:8px;} } /* ============ RESPONSIVE — SMALL MOBILE (≤480px) ============ */ @media(max-width:480px){ .contain{padding:0 14px;} /* Even smaller logo on tiny screens */ .nav-wrap{padding:0 14px;gap:8px;} .nav-logo-img{height:30px;max-width:140px;} .hero{padding:100px 0 40px;} .hero h1{font-size:1.5rem;} .hero-sub{font-size:0.88rem;} .nav-links{padding:80px 20px 30px;} .section{padding:40px 0;} .sec-head h2{font-size:1.3rem;} .sec-head{margin-bottom:28px;} .btn-gold,.btn-outline-light,.btn-outline-dark{padding:12px 24px;font-size:0.85rem;} .trust-bar-inner{flex-direction:column;gap:8px;} .ind-img-card img{height:180px;} .ind-num{font-size:2rem;} .flagship-img-wrap{border-radius:12px;} .result-cards{grid-template-columns:1fr;} .page-hero{padding:96px 14px 40px;} .page-hero h1{font-size:1.3rem;} .cu-pillars-grid{grid-template-columns:1fr;} .cu-info{padding:24px 20px;} .cu-building-img img{min-height:180px;} .portal-grid{padding:16px 14px 30px;} .portal-form-card{padding:24px 18px;} .portal-signin-btn{font-size:0.9rem;} .portal-footer{flex-direction:column;gap:8px;} } /* ============ SCROLLBAR ============ */ ::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:var(--gray-100);} ::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:var(--gray-400);}