/* Klass Insurance - Global Styles */
:root {
  --klass-red: #e8311e;
  --klass-red-dark: #c4291a;
  --klass-blue: #16205b;
  --klass-blue-dark: #0c142b;
  --klass-blue-mid: #243a6b;
  --klass-blue-light: #2e4a87;
  --klass-neutral-50: #f8fafd;
  --klass-neutral-100: #f0f4fa;
  --klass-neutral-200: #e2e8f0;
  --klass-neutral-600: #475569;
  --klass-neutral-700: #334155;
  --klass-neutral-900: #0f172a;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
*:focus-visible { outline: 3px solid var(--klass-red); outline-offset: 2px; }
body { font-family: 'Inter', sans-serif; color: var(--klass-neutral-700); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: 'Manrope', sans-serif; }
.nav-link { position: relative; transition: color 0.2s ease; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--klass-red); transition: width 0.25s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--klass-red); color: white; padding: 0.75rem 1.75rem; border-radius: 0.5rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; text-decoration: none; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--klass-red-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,49,30,0.35); }
.btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--klass-blue); padding: 0.75rem 1.75rem; border-radius: 0.5rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.9375rem; border: 2px solid var(--klass-blue); transition: background 0.2s, color 0.2s, transform 0.15s; text-decoration: none; cursor: pointer; }
.btn-secondary:hover { background: var(--klass-blue); color: white; transform: translateY(-1px); }
.btn-outline-white { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: white; padding: 0.75rem 1.75rem; border-radius: 0.5rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.9375rem; border: 2px solid rgba(255,255,255,0.7); transition: background 0.2s, border-color 0.2s; text-decoration: none; cursor: pointer; }
.btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: white; }
.card { background: white; border: 1px solid var(--klass-neutral-200); border-radius: 1rem; padding: 2rem; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); border-color: rgba(232,49,30,0.15); }
.section-label { display: inline-block; font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--klass-red); margin-bottom: 0.75rem; }
.page-hero { background: linear-gradient(135deg, var(--klass-blue) 0%, var(--klass-blue-mid) 100%); padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.footer-link { color: #9ca3af; font-size: 0.875rem; transition: color 0.2s; text-decoration: none; }
.footer-link:hover { color: white; }
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
#mobile-menu.open { max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
#mobile-menu::-webkit-scrollbar { width: 4px; }
#mobile-menu::-webkit-scrollbar-track { background: transparent; }
#mobile-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.icon-wrap { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; background: rgba(232,49,30,0.08); margin-bottom: 1.25rem; }
.section-divider { width: 3.5rem; height: 3px; background: var(--klass-red); border-radius: 2px; margin: 1rem 0 1.5rem; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-content.open { max-height: 500px; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-btn[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.65s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.testimonial-card { background: white; border-radius: 1rem; padding: 2rem 2rem 2rem 2.5rem; border: 1px solid var(--klass-neutral-200); position: relative; }
.testimonial-card::before { content: "\201C"; position: absolute; top: 0.75rem; left: 1.25rem; font-size: 4rem; font-family: Georgia, serif; color: var(--klass-red); line-height: 1; opacity: 0.2; }
.form-input { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--klass-neutral-200); border-radius: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: var(--klass-neutral-900); background: white; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.form-input:focus { border-color: var(--klass-red); box-shadow: 0 0 0 3px rgba(232,49,30,0.12); }
.form-label { display: block; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--klass-neutral-700); margin-bottom: 0.375rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }