/* RESET & NORMALIZE */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; background: #101E32; color: #EBF4FD; }
body { min-height: 100vh; background: linear-gradient(135deg, #14223b 0%, #1C3556 60%, #192e45 100%); font-size: 16px; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 18px 0; font-family: 'Roboto Slab', 'Open Sans', Arial, serif; font-weight: 700; letter-spacing: 0.01em; color: #ffffff; }
h1 { font-size: 2.25rem; line-height: 1.18; }
h2 { font-size: 1.5rem; margin-bottom: 18px; color: #D1E2F7; }
h3 { font-size: 1.2rem; color: #FFB800; }
h4 { font-size: 1rem; color: #FFB800; }
p, ul, ol { margin: 0 0 14px 0; }
ul, ol { padding-left: 24px; }
strong { color: #FFB800; font-weight: 700; }
img { max-width: 100%; height: auto; border-radius: 7px; }
a { color: #6acea7; text-decoration: none; transition: color .18s; }
a:hover, a:focus { color: #FFB800; text-decoration: underline; }

/* UNIVERSAL SPACING & CONTAINERS */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { margin-bottom: 60px; padding: 40px 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; border-radius: 16px; background: #162543; box-shadow: 0 2px 28px 0 rgba(28,53,86,0.12); padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; border: 1px solid #25395b; }
.card-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: 15px; background: #fff; color: #1C3556; box-shadow: 0 2px 12px 0 rgba(28, 53, 86, 0.14); margin-bottom: 20px; border-left: 4px solid #FFB800; transition: box-shadow .24s; }
.testimonial-card:hover { box-shadow: 0 4px 20px 0 rgba(255,184,0,0.14),0 2px 12px 0 rgba(28, 53, 86, 0.14); }
.client-details { color: #1C3556; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* FEATURE CARDS / GRIDS */
.feature-grid { display: flex; flex-wrap: wrap; gap: 32px; list-style: none; margin: 0; padding: 0; }
.feature-grid li { flex: 1 1 220px; min-width: 220px; background: #192e45; padding: 28px 18px 22px 18px; border-radius: 14px; box-shadow: 0 1px 12px 0 rgba(28,53,86,0.16); display: flex; flex-direction: column; gap: 10px; border-bottom: 3px solid #FFB800; transition: transform .18s, box-shadow .22s; }
.feature-grid li:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 28px #FFB80044, 0 2px 12px #1C3556A8; }
.feature-grid img { width: 38px; height: 38px; margin-bottom: 4px; filter: drop-shadow(0 0 6px #FFB80055); }

/* HERO SECTIONS */
.hero { background: linear-gradient(110deg, #1C3556 55%, #181f48 100%); position: relative; padding: 60px 0 48px 0; margin-bottom: 60px; box-shadow: 0 8px 54px -8px #06112733; }
.hero .container { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { color: #FFB800; font-size: 2.3rem; margin-bottom: 14px; text-shadow: 0 1px 12px #FFB80038; }
.hero .subheadline { font-size: 1.22rem; color: #D1E2F7; margin-bottom: 22px; }

/* CTAs */
.cta { background: #14223b; border-top: 2.5px solid #FFB800; border-radius: 0 0 28px 28px; margin-bottom: 0; }
.cta p { color: #D1E2F7; font-size: 1.18rem; }
.cta-btn, .main-nav .cta-btn, .mobile-nav .cta-btn { background: #FFB800; color: #1C3556!important; border: none; border-radius: 31px; padding: 11px 30px; font-family: 'Roboto Slab',serif; font-size: 1.16em; font-weight: bold; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 0 12px #FFB80044; transition: background .18s, color .14s, box-shadow .18s; text-shadow: none; margin-left: 14px; display: inline-block; }
.cta-btn:hover, .cta-btn:focus { background: #fff; color: #1C3556!important; box-shadow: 0 0 24px #FFB80099, 0 0 0px #fff; text-decoration: none; }

/* MAIN NAVIGATION */
header { background: #181f48; position: sticky; top: 0; z-index: 105; box-shadow: 0 4px 16px #0c122a33; }
header .container { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.logo img { height: 38px; display: block; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { color: #D1E2F7; font-weight: 600; padding: 7px 12px; border-radius: 6px; font-family: 'Open Sans', Arial, sans-serif; transition: background .17s, color .13s; }
.main-nav a:hover, .main-nav a:focus { background: #233f68; color: #FFB800; }
.main-nav .cta-btn { margin-left: 22px; margin-right: 0; background: #FFB800; color: #1C3556; }

/* MOBILE MENU */
.mobile-menu-toggle { display: none; font-size: 2.2rem; background: none; border: none; color: #FFB800; margin-left: 18px; cursor: pointer; z-index: 201; }
.mobile-menu { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #181f48; transform: translateX(-100%); transition: transform .32s cubic-bezier(.45,.06,.46,1.12); z-index: 210; box-shadow: 0 2px 28px 0 #0008; display: flex; flex-direction: column; }
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { font-size: 2.25rem; border: none; background: none; color: #FFB800; align-self: flex-end; margin: 24px 28px 18px 0; cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 12px; padding: 0 38px; }
.mobile-nav a { color: #fff; font-size: 1.18rem; font-weight: 600; background: none; padding: 8px 6px; border-radius: 5px; transition: background .16s, color .14s; }
.mobile-nav a:hover, .mobile-nav a:focus { background: #FFB80022; color: #FFB800; }

/* FOOTER */
footer { background: #181f48; padding: 40px 0 0 0; color: #D1E2F7; border-top: 4px solid #FFB800; margin-top: 64px; }
footer .container { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; padding-bottom: 30px; }
.footer-logo img { height: 38px; margin-bottom: 18px; filter: drop-shadow(0 0 5px #FFB80050); }
footer nav { display: flex; flex-direction: column; gap: 12px; }
footer nav a { color: #D1E2F7; font-weight: 500; font-size: 1rem; padding: 3px 0; transition: color .13s; }
footer nav a:hover { color: #FFB800; }
.footer-info { flex: 1 1 100%; color: #7EAED2; margin-top: 20px; font-size: 0.93rem; text-align: right; }

/* CARDS & LISTS */
.faq-list { display: flex; flex-direction: column; gap: 18px; margin: 18px 0; }
.faq-item { background: #223354; padding: 18px 22px; border-radius: 12px; box-shadow: 0 1px 8px #0003; border-left: 4px solid #FFB800; margin-bottom: 10px; }
.faq-item h3 { color: #FFB800; margin-bottom: 10px; }
.search-bar { width: 100%; padding: 12px 14px; border: 1.5px solid #FFB800; border-radius: 9px; background: #101e32; color: #EBF4FD; font-size: 1rem; margin-bottom: 18px; outline: none; transition: border-color .18s, box-shadow .16s; }
.search-bar:focus { border-color: #1C3556; box-shadow: 0 0 0 2px #FFB80044; }

.text-section { background: #192e45; border-radius: 12px; padding: 22px 20px; margin-bottom: 18px; box-shadow: 0 1px 8px #FFB80022; }
.text-section ul { margin: 0 0 10px 18px; }
.text-section li { margin-bottom: 10px; }

/* FORMS & INPUTS */
input[type="text"], input[type="email"], input[type="tel"], textarea { background: #101e32; color: #EBF4FD; border: 1.5px solid #25395b; border-radius: 8px; padding: 14px 12px; font-size: 1rem; outline: none; margin-bottom: 16px; transition: border-color .16s; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus { border-color: #FFB800; box-shadow: 0 0 0 2px #FFB80055; }
button, input[type="submit"] { font-family: 'Roboto Slab',Arial,sans-serif; background: #FFB800; color: #1C3556; border: none; border-radius: 25px; font-size: 1rem; font-weight: 700; padding: 10px 24px; cursor: pointer; box-shadow: 0 2px 8px #FFB80022; transition: background .18s, color .14s, box-shadow .18s; }
button:hover, input[type="submit"]:hover { background: #fff; color: #1C3556; box-shadow: 0 0 18px #FFB80033; }

/* COOKIE BANNER */
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100vw; background: #181f48; color: #EBF4FD; box-shadow: 0 -2px 18px #0007; padding: 22px 16px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2100; animation: slideUp .46s cubic-bezier(.74,.02,.31,1.36); }
@keyframes slideUp { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner .cookie-btns { display: flex; gap: 16px; }
.cookie-banner button { padding: 10px 22px; border-radius: 18px; margin: 0 2px; font-size: 1em; box-shadow: 0 0 8px #FFB80022; }
.cookie-banner .accept-btn { background: #FFB800; color: #1C3556; font-weight: 700; }
.cookie-banner .accept-btn:hover { background: #fff; color: #1C3556; }
.cookie-banner .reject-btn { background: #25395b; color: #D1E2F7; }
.cookie-banner .reject-btn:hover { background: #1C3556; color: #FFB800; }
.cookie-banner .settings-btn { background: #192e45; color: #FFB800; border: 1.5px solid #FFB800; }
.cookie-banner .settings-btn:hover { background: #fff; color: #1C3556; border: 1.5px solid #FFB800; }

/* COOKIE PREFERENCES MODAL */
.cookie-modal-overlay { position: fixed; inset: 0; background: #050b1944; z-index: 2110; display: flex; justify-content: center; align-items: center; animation: fadeIn .31s cubic-bezier(.8,.05,.35,1.45); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal { background: #192e45; color: #EBF4FD; border-radius: 17px; padding: 40px 32px 28px 32px; min-width: 310px; max-width: 95vw; box-shadow: 0 6px 48px #000b,0 1px 8px #FFB80033; position: relative; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; animation: popIn .35s cubic-bezier(.45,1.75,.65,1.19); }
@keyframes popIn { 0% { transform: scale(.9); opacity: 0;} 100% { transform: scale(1); opacity:1;} }
.cookie-modal h3 { color: #FFB800; font-size: 1.15em; margin-top: 0; }
.cookie-modal label { display: flex; align-items: center; gap: 10px; font-size: 1em; font-weight: 500; margin-bottom: 18px; }
.cookie-switch { width: 38px; height: 21px; background: #192e45; border-radius: 100px; position: relative; border: 1.5px solid #FFB800; transition: background .18s; cursor: pointer; display: block; margin-right: 8px; }
.cookie-switch input[type='checkbox'] { opacity: 0; width: 0; height: 0; }
.cookie-switch span { content: ''; display: block; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background: #FFB800; border-radius: 50%; transition: left .23s, background .18s; box-shadow: 0 1px 4px #FFB80099; }
.cookie-switch input[type='checkbox']:not(:checked) + span { background: #D1E2F7; left: 2px; }
.cookie-switch input[type='checkbox']:checked + span { background: #FFB800; left: 18px; }
.cookie-modal .essential { color: #FFB800; font-weight: 600; }
.cookie-modal .close-modal { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 1.6rem; color: #FFB800; cursor: pointer; }
.cookie-modal .modal-btns { display: flex; gap: 14px; margin-top: 14px; }

/* TABLES, CODE, BLOCKQUOTES */
table { width: 100%; border-collapse: collapse; margin: 24px 0; background: #182649; color: #D1E2F7; border-radius: 8px; overflow: hidden; }
th, td { border: 1px solid #25395b; padding: 14px 10px; text-align: left; }
th { background: #223354; color: #FFB800; }
blockquote { background: #223354; border-left: 4px solid #FFB800; margin: 18px 0; padding: 18px 22px; border-radius: 12px; color: #D1E2F7; font-style: italic; }
code { background: #243d60; color: #FFB800; border-radius: 5px; padding: 2px 5px; }

/* ICONS INLINE */
.text-section img, .feature-item img, ul img { vertical-align: middle; margin-right: 8px; }

/* UTILITIES */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.gap-20 { gap: 20px; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }

/* RESPONSIVE DESIGN (MOBILE FIRST) */
@media (max-width: 1020px) {
  .container { max-width: 96vw; }
  .footer-info { text-align: left; margin-top: 30px; }
}
@media (max-width: 900px) {
  .feature-grid { gap: 20px; }
  footer .container { gap: 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .container { padding: 0 12px; }
  .hero { padding: 34px 0 28px 0; margin-bottom: 34px; }
  .cta { border-radius: 0 0 22px 22px; }
  .feature-grid { flex-direction: column; gap: 20px; }
  .feature-grid li { min-width: 0; }
  .testimonial-card { flex-direction: column; text-align: left; gap: 10px; }
  .content-grid, .card-container { flex-direction: column; gap: 20px; }
  .content-wrapper { gap: 14px; }
  .footer-logo { margin-bottom: 0; }
  .text-image-section { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 540px) {
  h1 { font-size: 1.33rem; }
  h2 { font-size: 1.02rem; }
  .container { padding: 0 5vw; }
  .cookie-modal { padding: 22px 9px 18px 9px; }
}

/* MICRO-INTERACTIONS & EFFECTS */
.cta-btn, .main-nav .cta-btn, .mobile-nav a, button, input[type="submit"] { transition: background .20s, color .12s, box-shadow .17s, border .18s; }
.card, .faq-item, .feature-grid li { transition: box-shadow .17s, transform .16s, border-color .13s; }
.card:hover { box-shadow: 0 6px 32px #FFB80033,0 2px 12px #1C3556A8; border-color: #FFB800; z-index: 2; }
.faq-item:hover { box-shadow: 0 6px 24px #FFB80033,0 1px 12px #1C3556A8; border-color: #FFB800; }
input, textarea { transition: border-color .14s, box-shadow .18s; }

/* ACCESSIBILITY: Focus styles */
a:focus, button:focus, input:focus, .cta-btn:focus { outline: 2px solid #FFB800; outline-offset: 2px; box-shadow: 0 0 0 2px #FFB80077; }

/* ENSURE NO CONTENT OVERLAP */
.section, .card, .card-container, .content-grid, .feature-grid,
.text-image-section, .testimonial-card, .faq-item, .text-section { box-sizing: border-box; min-width: 0; min-height: 0; }

/* BRAND FONTS */
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: local('Roboto Slab'), local('RobotoSlab-Regular'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans-Regular'); font-display: swap; }

/* END STYLE.CSS */