/* =====================
   CSS RESET & NORMALIZE
   ===================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
main, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 box-sizing: border-box;
}
html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 line-height: 1.5;
 background: #F3F7FA;
 color: #2C2C2C;
 font-family: 'Roboto', Arial, sans-serif;
 font-size: 16px;
 min-height: 100vh;
}
a, button {
 -webkit-tap-highlight-color: transparent;
}
img {
 max-width: 100%;
 display: block;
 border-radius: 10px;
}
ul, ol {
 list-style: none;
}
h1, h2, h3, h4, h5, h6 {
 font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
 font-weight: 700;
 color: #17406B;
}
h1 {
 font-size: 2.75rem;
 margin-bottom: 18px;
 letter-spacing: -1px;
}
h2 {
 font-size: 2rem;
 margin-bottom: 14px;
}
h3 {
 font-size: 1.32rem;
 margin-bottom: 10px;
}
p, li {
 font-size: 1rem;
 line-height: 1.7;
 color: #353535;
}
strong {
 font-weight: 700;
}
.container {
 max-width: 1240px;
 padding: 0 20px;
 margin: 0 auto;
}

/* ================================
   GLOBAL SPACING / SECTION SYSTEM
   ================================ */
section {
 margin-bottom: 60px;
 padding: 40px 0;
}
.section {
 margin-bottom: 60px;
 padding: 40px 20px;
 background: #fff;
 border-radius: 24px;
 box-shadow: 0 4px 24px rgba(247,179,43,0.07);
}
.content-wrapper, .content-grid, .feature-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 justify-content: flex-start;
 align-items: stretch;
}
.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.card {
 margin-bottom: 20px;
 background: #fff;
 border-radius: 18px;
 box-shadow: 0 2px 16px rgba(23, 64, 107, 0.08);
 padding: 28px 24px;
 flex: 1 1 300px;
 position: relative;
 transition: box-shadow 0.25s;
}
.card:hover {
 box-shadow: 0 8px 30px rgba(247, 179, 43, 0.13);
}
.text-image-section {
 display: flex;
 align-items: center;
 gap: 30px;
 flex-wrap: wrap;
}
.testimonial-card {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
 background: #fffbea;
 border-radius: 18px;
 box-shadow: 0 2px 14px rgba(23, 64, 107, 0.06);
 padding: 20px 30px;
 margin-bottom: 20px;
 min-width: 260px;
 max-width: 420px;
 flex: 1 1 280px;
 transition: transform 0.2s, box-shadow 0.2s;
 color: #322500;
}
.testimonial-card strong {
 color: #17406B;
 font-size: 1rem;
}
.testimonial-card:hover {
 box-shadow: 0 8px 32px rgba(23, 64, 107, 0.10);
 transform: translateY(-3px) scale(1.025);
}
.feature-item, .feature-grid li {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
 background: #fff;
 border-radius: 15px;
 padding: 18px 20px 18px 14px;
 box-shadow: 0 1px 8px rgba(23, 64, 107, 0.08);
 font-size: 1rem;
 margin-bottom: 20px;
 min-width: 220px;
 flex: 1 1 230px;
}
.feature-grid li img {
 width: 36px;
 height: 36px;
 margin-bottom: 6px;
}

.highlighted-tips {
 background: #fff8e6;
 border-radius: 15px;
 padding: 18px 20px;
 margin-top: 8px;
 margin-bottom: 16px;
 box-shadow: 0 1px 8px rgba(247,179,43,0.09);
}
.benefit-list li {
 margin-bottom: 12px;
 padding-left: 8px;
 position: relative;
}
.benefit-list li:before {
 content: '\2022';
 position: absolute;
 left: -8px;
 color: #f7b32b;
 font-weight: bold;
}

/* =============
   NAVIGATION
   ============= */
header {
 background: #fff;
 box-shadow: 0 2.5px 28px rgba(23, 64, 107, 0.08);
 position: relative;
 z-index: 100;
}
header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 padding-top: 15px;
 padding-bottom: 15px;
}
.main-nav {
 display: flex;
 gap: 20px;
}
.main-nav a {
 color: #17406B;
 font-family: 'Montserrat', Arial, sans-serif;
 font-weight: 500;
 font-size: 1rem;
 padding: 9px 12px;
 border-radius: 7px;
 text-decoration: none;
 transition: background 0.15s, color 0.15s;
}
.main-nav a:hover, .main-nav a:focus {
 background: #f7b32b26;
 color: #F7B32B;
}
.cta-btn {
 appearance: none;
 border: none;
 background: #F7B32B;
 color: #17406B;
 font-family: 'Montserrat', Arial, sans-serif;
 font-weight: 700;
 font-size: 1.15rem;
 padding: 12px 28px;
 border-radius: 21px;
 cursor: pointer;
 box-shadow: 0 2px 18px rgba(185, 155, 22, 0.10);
 transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
 display: inline-block;
 text-decoration: none;
 margin-left: 16px;
 outline: 0;
}
.cta-btn:hover, .cta-btn:focus {
 background: #FFD368;
 color: #17406B;
 box-shadow: 0 6px 24px rgba(185, 155, 22, 0.15);
 transform: translateY(-2px) scale(1.045);
}

/* ================
  MOBILE NAVIGATION
   ================ */
.mobile-menu-toggle {
 display: none;
 background: transparent;
 border: none;
 font-size: 2.1rem;
 color: #17406B;
 margin-left: 14px;
 cursor: pointer;
 z-index: 202;
 border-radius: 10px;
 padding: 7px 12px;
 transition: background 0.14s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
 background: #F7B32B44;
}
.mobile-menu {
 display: none;
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 width: 100vw;
 height: 100vh;
 background: #fff;
 z-index: 201;
 transform: translateX(100%);
 transition: transform 0.33s cubic-bezier(.62,.24,.23,1.04);
 flex-direction: column;
}
.mobile-menu.open {
 display: flex;
 transform: translateX(0%);
}
.mobile-menu-close {
 background: transparent;
 border: none;
 color: #17406B;
 font-size: 2.2rem;
 margin: 18px 28px 14px auto;
 align-self: flex-end;
 cursor: pointer;
 border-radius: 8px;
 transition: background 0.14s;
 padding: 7px 14px;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
 background: #f7b32b33;
}
.mobile-nav {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 margin-top: 40px;
}
.mobile-nav a {
 font-family: 'Montserrat', Arial, sans-serif;
 font-size: 1.22rem;
 color: #17406B;
 font-weight: 600;
 padding: 12px 20px;
 border-radius: 7px;
 text-decoration: none;
 transition: background 0.17s, color 0.13s;
 width: 100%;
 text-align: center;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
 background: #ffd46a42;
 color: #F7B32B;
}

@media (max-width: 1024px) {
 .main-nav {
   gap: 10px;
 }
}
@media (max-width: 900px) {
 .main-nav {
   gap: 6px;
 }
 .cta-btn {
   margin-left: 6px;
 }
}
@media (max-width: 820px) {
 .main-nav {
   display: none !important;
 }
 .mobile-menu-toggle {
   display: inline-block;
 }
 .cta-btn {
   margin-left: 0;
 }
}

/* =============
   HERO SECTION
   ============= */
.hero-section {
 background: #fffbea;
 border-radius: 0 0 28px 28px;
 padding: 60px 0 55px 0;
 box-shadow: 0 4px 40px rgba(247,179,43,0.06);
 margin-bottom: 60px;
}
.hero-section h1 {
 color: #b5730b;
 font-size: 2.4rem;
 margin-bottom: 15px;
}
.hero-section .subheadline, .hero-section .tagline {
 font-size: 1.16rem;
 color: #59543f;
 margin-bottom: 24px;
 font-family: 'Roboto', Arial, sans-serif;
}
.hero-section p:not(.subheadline):not(.tagline) {
 max-width: 480px;
 margin-bottom: 12px;
}
.hero-section .cta-btn {
 margin-top: 20px;
}

/* ===================
   CUSTOM CONTENT WRAP
   =================== */
.content-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 margin-bottom: 16px;
}
.text-section {
 flex: 2 1 340px;
 min-width: 275px;
 padding: 14px 16px 14px 4px;
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 1px 6px rgba(23,64,107,0.06);
 margin-bottom: 20px;
}
.faq-list {
 display: flex;
 flex-direction: column;
 gap: 24px;
 width: 100%;
}
.faq-item {
 background: #fff;
 border-left: 5px solid #F7B32B;
 border-radius: 12px;
 padding: 18px 22px;
 margin-bottom: 8px;
 box-shadow: 0 1px 6px rgba(23,64,107,0.04);
}
.faq-item strong {
 font-size: 1.07rem;
 color: #17406B;
 display: block;
 margin-bottom: 7px;
}
.faq-item p {
 color: #36322b;
}

/* =====================
   ADDRESS / CONTACT
   ===================== */
address {
 margin-top: 16px;
 font-style: normal;
 color: #5f5d55;
 font-size: 0.98rem;
 line-height: 1.56;
}
address a {
 color: #17406B;
 text-decoration: underline dotted #F7B32B;
 font-weight: 500;
 transition: color 0.13s;
}
address a:hover, address a:focus {
 color: #F7B32B;
}
address img {
 vertical-align: middle;
 height: 22px;
 width: 22px;
 margin-right: 6px;
 border-radius: 0;
 display: inline-block;
}

/* ===============
   FOOTER STYLE
   =============== */
footer {
 background: #fff;
 padding: 32px 0 24px 0;
 box-shadow: 0 -2.5px 32px rgba(23, 64, 107, 0.05);
 border-radius: 28px 28px 0 0;
 position: relative;
 width: 100%;
}
footer .container {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 align-items: flex-start;
 justify-content: space-between;
}
.footer-nav {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 10px;
 min-width: 200px;
}
.footer-nav a {
 color: #17406B;
 text-decoration: none;
 font-family: 'Montserrat', sans-serif;
 font-weight: 600;
 font-size: 1rem;
 transition: color 0.2s;
}
.footer-nav a:hover, .footer-nav a:focus {
 color: #F7B32B;
}
footer img {
 height: 48px;
 margin-bottom: 15px;
 border-radius: 10px;
}

/* ===============
   BUTTONS & LINKS
   =============== */
button, .cta-btn {
 font-family: 'Montserrat', Arial, sans-serif;
 font-weight: 600;
 border: none;
 outline: none;
 cursor: pointer;
 border-radius: 21px;
 transition: background 0.17s, box-shadow 0.17s, color 0.14s, transform 0.14s;
}
button:active, .cta-btn:active {
 transform: scale(0.96);
}

/* ==================
   COOKIE CONSENT
   ================== */
.cookie-banner {
 position: fixed;
 left: 0; bottom: 0; right: 0;
 background: #fffbea;
 box-shadow: 0 -2px 24px rgba(23, 64, 107, 0.12);
 border-top-left-radius: 21px;
 border-top-right-radius: 21px;
 padding: 25px 18px 22px 18px;
 z-index: 9999;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 font-size: 1rem;
 transition: transform 0.36s cubic-bezier(.62,.24,.23,1.04), opacity 0.2s;
 opacity: 1;  
}
.cookie-banner.hide {
 opacity: 0;
 transform: translateY(120%);
 pointer-events: none;
}
.cookie-banner-message {
 color: #634700;
 font-size: 1rem;
 padding-right: 15px;
 max-width: 600px;
}
.cookie-banner-actions {
 display: flex;
 gap: 14px;
 flex-wrap: wrap;
}
.cookie-btn, .cookie-btn-primary, .cookie-btn-secondary {
 font-family: 'Montserrat', Arial, sans-serif;
 font-weight: 600;
 background: #F7B32B;
 color: #17406B;
 border: none;
 border-radius: 12px;
 font-size: 0.98rem;
 padding: 10px 23px;
 margin: 0;
 outline: none;
 box-shadow: 0 1px 8px rgba(247,179,43,0.10);
 cursor: pointer;
 transition: background 0.16s, color 0.15s, box-shadow 0.14s;
}
.cookie-btn-secondary {
 background: #fff;
 color: #17406B;
 border: 2px solid #F7B32B;
}
.cookie-btn:hover,
.cookie-btn-primary:hover,
.cookie-btn-secondary:hover {
 background: #FFD368;
 color: #17406B;
}
.cookie-btn:focus, .cookie-btn-primary:focus, .cookie-btn-secondary:focus {
 box-shadow: 0 0 0 2px #F7B32B;
}

/* Cookie modal */
.cookie-modal-backdrop {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(23,64,107,0.13);
 z-index: 10000;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 1;
 transition: opacity 0.28s;
}
.cookie-modal-backdrop.hide {
 opacity: 0;
 pointer-events: none;
}
.cookie-modal {
 background: #fff;
 border-radius: 22px;
 box-shadow: 0 12px 48px rgba(23,64,107,0.11);
 padding: 32px 28px 22px 28px;
 max-width: 420px;
 width: 94vw;
 z-index: 10001;
 display: flex;
 flex-direction: column;
 gap: 26px;
}
.cookie-modal h2 {
 margin-bottom: 10px;
}
.cookie-modal .cookie-categories {
 display: flex;
 flex-direction: column;
 gap: 17px;
}
.cookie-category {
 display: flex;
 align-items: center;
 gap: 13px;
 font-size: 0.99rem;
}
.cookie-category input[type='checkbox'] {
 accent-color: #F7B32B;
 width: 20px; height: 20px;
 border-radius: 6px;
 margin: 0;
}
.cookie-modal-actions {
 display: flex;
 gap: 12px;
 margin-top: 10px;
}
.cookie-modal-close {
 background: transparent;
 border: none;
 color: #17406B;
 font-size: 1.9rem;
 position: absolute;
 top: 12px; right: 18px;
 cursor: pointer;
 border-radius: 50%;
 transition: background 0.12s;
}
.cookie-modal-close:hover, .cookie-modal-close:focus {
 background: #F7B32B22;
}
.cookie-category .cookie-locked {
 color: #aaa;
 margin-left: 7px;
 font-size: 13px;
 border-radius: 7px;
 background: #F3F7FA;
 padding: 2px 8px;
}

/* =======================
   RESPONSIVE LAYOUT
   ======================= */
@media (max-width: 1200px) {
 .container {
   max-width: 95vw;
 }
 .footer-nav {
   min-width: 150px;
 }
}
@media (max-width: 1024px) {
 .testimonial-card {
   min-width: 190px;
   max-width: 100%;
   padding: 18px 13px;
 }
 .feature-grid li, .feature-item {
   min-width: 130px;
   padding: 13px 10px 13px 6px;
 }
}
@media (max-width: 850px) {
 section, .section {
   padding: 29px 0;
 }
 .footer-nav {
   min-width: 100px;
 }
}
@media (max-width: 768px) {
 section, .section {
   padding: 24px 0;
   margin-bottom: 42px;
 }
 .container {
   padding: 0 8px;
 }
 .content-wrapper, .content-grid, .feature-grid, .card-container {
   flex-direction: column;
   gap: 18px;
 }
 .card {
   padding: 18px 10px;
 }
 .testimonial-card {
   padding: 14px 9px;
   max-width: 100%;
   min-width: 0;
 }
 .feature-grid li, .feature-item {
   min-width: 0;
   max-width: 100%;
   padding: 10px 7px 10px 0px;
 }
 .text-section {
   padding: 10px 6px 10px 2px;
 }
 .text-image-section {
   flex-direction: column;
   gap: 18px;
 }
 footer .container {
   flex-direction: column;
   gap: 12px;
   align-items: flex-start;
 }
 .footer-nav {
   flex-direction: row;
   gap: 9px;
   margin-bottom: 14px;
 }
 .footer-nav a {
   font-size: 0.97rem;
 }
}
@media (max-width: 600px) {
 h1 {
   font-size: 1.65rem;
 }
 h2 {
   font-size: 1.23rem;
 }
 h3 {
   font-size: 1.03rem;
 }
 .cta-btn, .cookie-btn, .cookie-btn-primary, .cookie-btn-secondary {
   font-size: 0.96rem;
   padding: 10px 12px;
 }
 .hero-section {
   padding: 35px 0 28px;
   margin-bottom: 32px;
 }
 .cookie-banner-message {
   max-width: 100%;
   font-size: 0.99rem;
 }
 .cookie-modal {
   padding: 22px 8px;
 }
}
@media (max-width: 425px) {
 .cookie-banner {
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   font-size: 0.97rem;
 }
}

/* ===========
   UTILITIES
   =========== */
.gap-24 { gap: 24px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-24 { margin-bottom: 24px; }
.hide { display: none !important; }

/* ===============
   FOCUS VISIBLE
   =============== */
:focus-visible {
 outline: 2.5px solid #F7B32B;
 outline-offset: 2px;
}

/* =====================
   MICRO INTERACTIONS
   ===================== */
a, button, .cta-btn {
 transition: color 0.13s, background 0.13s, box-shadow 0.16s, transform 0.13s;
}

/* =====================
   SCROLLBAR STYLES
   ===================== */
::-webkit-scrollbar {
 width: 11px;
 background: #F3F7FA;
}
::-webkit-scrollbar-thumb {
 background: #FFD368;
 border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
 background: #F7B32B;
}

/* ============================
   CUSTOM FONT IMPORTS
   ============================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Roboto:wght@400;500;700&display=swap');