/* Clyde Premium UI — v1.0 (inline) */ 
:root{ --blue-900:#002240; --blue-800:#002542; --blue-700:#002643; --blue-600:#002744;
--blue-300:#00AEEF; --yellow-500:#FFD700; --gray-50:#F5F5F5; --gray-200:#E6E6E6; --gray-400:#999999; --gray-500:#666666;
--white:#FFFFFF; --radius-xl:18px; --radius-lg:14px; --radius-full:999px; --shadow-lg:0 14px 36px rgba(0,0,0,0.12);
--shadow-md:0 10px 24px rgba(0,0,0,0.16); --reading:1.7; }
html, body{ line-height: var(--reading); } h1,h2,h3{ line-height:1.18; letter-spacing:.2px } p{ line-height:1.7 }
.section-panel{ background:var(--white); color:var(--blue-600); border:1px solid rgba(0,39,68,.10); border-radius:var(--radius-xl); box-shadow: var(--shadow-lg); padding:28px; }
.section-panel .section-title,.section-panel .sub{ color:var(--blue-600); }
.hero .inner{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); padding:28px 24px; box-shadow: var(--shadow-md); }
.section-sep{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); margin:34px auto; max-width:1100px; }
.testimonials .card{ background:#0B2235; border:1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-md); }
.testimonials .quote{ font-size:1.02rem; line-height:1.55; }
.exp-card, .step{ background:#0B2235; border:1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-md); }
.capture .wrap{ max-width: 980px; }
.lead-form input, .lead-form select{ font-size:16px; background:#FFFFFF !important; color:#002744 !important; border:1px solid rgba(0,39,68,.20) !important; }
.lead-form input::placeholder{ color:#666 !important; }
.lead-form button.btn, .lead-form .btn{ background: linear-gradient(135deg, var(--yellow-500), #FFE466) !important; color:#002744 !important; font-weight:800; border:none; box-shadow: 0 12px 30px rgba(255,215,0,.28); }
.cta-strong .wrap{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); padding:24px; box-shadow: var(--shadow-md); }
.logos img{ height:40px } @media (max-width:720px){ .logos img{ height:34px } }
.cta-yellow{ padding:10px 16px; border-radius:var(--radius-full); background:linear-gradient(135deg,var(--yellow-500),#FFE466); color:#002744 !important; font-weight:800; box-shadow:0 8px 18px rgba(255,215,0,.25); }
.cta-yellow:hover{ filter:brightness(1.03); transform:translateY(-1px); }
nav a:hover, nav a:focus{ background: rgba(255,255,255,0.10); color:#fff; box-shadow: inset 0 6px 16px rgba(0,0,0,0.18); }
section{ padding-top: clamp(36px, 5vw, 70px); padding-bottom: clamp(36px, 5vw, 70px); }
.hero{ padding-top: clamp(90px, 10vw, 140px); padding-bottom: clamp(46px, 7vw, 80px); }
@media (max-width: 720px){ .hero .inner{ padding:20px 16px } .section-panel{ padding:20px } .section-title{ padding: 0 8px; } .exp-grid{ gap:16px } .card{ min-width: 88vw } }
a.btn, .btn, .cta, .cta-yellow{ transition: transform .085s ease, box-shadow .2s ease, filter .2s ease !important; }
a.btn:hover, .btn:hover, .cta:hover, .cta-yellow:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.before-footer{ height:1px; margin: 26px 0 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
@media (prefers-reduced-motion: reduce){ .moving{ animation: none !important; transform: none !important; }
}
@media (max-width: 991px){ .mobile-list, .mobile-menu, .offcanvas-body, .drawer-list, nav ul { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } }