/* CSS RESET & NORMALIZE (mobile first) */
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, 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, menu, 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; scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
*, *:before, *:after {box-sizing:inherit;}
body {line-height:1.5; font-family:'Roboto', Arial, sans-serif; color:#253747; background-color:#F9F9F6; min-height:100vh;}
img {max-width:100%; height:auto; display:block;}
a {color:inherit; text-decoration:none; transition:color 0.2s;}
strong, b {font-weight:700;}
ul, ol {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-family:'Montserrat', Arial, sans-serif; color:#253747; font-weight:700; line-height:1.15;}
h1 {font-size:2rem; margin-bottom:24px;}
h2 {font-size:1.5rem; margin-bottom:20px;}
h3 {font-size:1.17rem; margin-bottom:16px;}
p, ul li, ol li {font-size:1rem; margin-bottom:12px;}
.subtitle {font-family:'Montserrat', Arial,sans-serif; color:#394c5c; font-size:1.15rem; margin-bottom:24px;}
.container {max-width:1170px; margin:0 auto; padding:0 20px;}
.content-wrapper {width:100%; margin:0 auto; display:flex; flex-direction:column; gap:24px; align-items:flex-start;}
/* HEADER & NAVIGATION */
header {background:#fff; border-bottom:1px solid #e5e8ea; box-shadow:0 2px 6px rgba(37,55,71,0.04); position:sticky; top:0; z-index:20;}
nav {display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px; padding:8px 0;}
nav > a img {height:44px; width:auto;}
nav ul {display:none; flex-direction:row; gap:24px; align-items:center;}
nav ul li {margin:0;}
nav ul li a {padding:8px 16px; border-radius:4px; font-family:'Montserrat', Arial, sans-serif; font-size:1rem; font-weight:500; color:#253747; transition:background 0.16s,color 0.16s;}
nav ul li a:hover, nav ul li a:focus {background:#F2F4F7; color:#205bb5; outline:none;}
nav ul li .cta {background:#253747; color:#fff; font-weight:700; border-radius:6px; border:none; box-shadow:0 2px 8px rgba(37,55,71,.08); transition:background 0.2s,color 0.2s;}
nav ul li .cta:hover, nav ul li .cta:focus {background:#205bb5; color:#FFD670;}
.mobile-menu-toggle {display:block; background:none; border:none; font-size:2rem; padding:4px 16px; color:#253747; cursor:pointer; border-radius:6px; transition:background 0.15s; z-index:22;}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {background:#f0f4fa;}
/* MOBILE MENU OVERLAY */
.mobile-menu {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; position:fixed; top:0; right:0; left:0; height:100vh; background:rgba(37,55,71,0.98); transform:translateX(100%); transition:transform 0.36s cubic-bezier(.55,.06,.68,.19); z-index:30; box-shadow:0 0 32px rgba(0,0,0,0.16); pointer-events:none;}
.mobile-menu.active {transform:translateX(0); pointer-events:auto;}
.mobile-menu-close {background:none; border:none; color:#fff; font-size:2.2rem; position:absolute; top:20px; right:24px; padding:8px; z-index:32; cursor:pointer; transition:background 0.18s; border-radius:50%;}
.mobile-menu-close:hover, .mobile-menu-close:focus {background:#205bb5;}
.mobile-nav {margin-top:80px; width:100%; display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:0 36px;}
.mobile-nav a {color:#fff; font-family:'Montserrat', Arial,sans-serif; font-size:1.15rem; font-weight:500; padding:10px 4px; border-radius:4px; transition:background 0.16s, color 0.16s; width:100%; display:block;}
.mobile-nav a:hover, .mobile-nav a:focus {background:#FFD670; color:#253747; outline:none;}
@media (min-width: 1024px) {
  nav ul {display:flex !important;}
  .mobile-menu-toggle, .mobile-menu {display:none !important;}
}
/* HERO / SECTION LAYOUTS */
.section {margin-bottom:60px; padding:40px 20px; width:100%; display:flex; flex-direction:column; align-items:stretch; background:transparent;}
.features-grid, .card-container, .content-grid {display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;}
.features-grid > div, .feature-item, .card, .testimonial-card {background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(37,55,71,0.07); padding:24px; min-width:220px; flex:1 1 220px; display:flex; flex-direction:column; align-items:flex-start; gap:15px; margin-bottom:20px; position:relative;}
.features-grid img {height:48px; width:48px; margin-bottom:10px;}
.feature-item h3, .features-grid h3 {color:#205bb5; font-size:1.1rem;}
.features-grid p {font-size:1rem;}
.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:8px; padding:20px 24px; background:#f4f8fb; margin-bottom:20px; border-radius:14px; box-shadow:0 8px 22px rgba(37,55,71,.04); border:1px solid #e5e8ea; max-width:540px;}
.testimonial-card p {color:#1a2834; font-size:1.08rem; margin-bottom:8px;}
.testimonial-card span {font-size:0.97rem; color:#394c5c; font-style:italic;}
.card-container {gap:24px;}
.card {margin-bottom:20px; border-radius:14px; box-shadow:0 2px 10px rgba(37,55,71,0.08); background:#fff; padding:24px;}
.card-content {display:flex; flex-direction:column; justify-content:center; gap:14px;}
.section ul {margin:0 0 10px 23px;}
.section ul li {margin-bottom:8px; position:relative; padding-left:22px; color:#253747;}
.section ul li:before {content:"•"; position:absolute; left:0; top:0; color:#205bb5; font-size:1.15rem; font-weight:700;}
.section ul li img {display:inline-block; height:18px; width:auto; margin-right:8px; vertical-align:middle;}
.section a {font-weight:500;}
@media (max-width:768px) {
  .section {padding:24px 6px; margin-bottom:38px;}
  .features-grid, .card-container, .content-grid {flex-direction:column; gap:20px;}
  .section ul {margin-left:17px;}
  .text-image-section {flex-direction:column; gap:20px;}
}
/* BUTTONS */
.btn, .btn-primary, .btn-accent, .section a.btn, .cookie-banner .btn {display:inline-block; font-family:'Montserrat',Arial,sans-serif; font-size:1.08rem; padding:14px 32px; margin-top:6px; background:#253747; color:#fff; border-radius:8px; border:none; font-weight:600; box-shadow:0 3px 12px rgba(37,55,71,0.09); cursor:pointer; outline:none; transition:all 0.20s cubic-bezier(.57,.07,.64,.93); text-align:center;}
.btn-primary {background:#253747; color:#fff;}
.btn-primary:hover, .btn-primary:focus {background:#205bb5; color:#FFD670;}
.btn-accent {background:#FFD670; color:#253747;}
.btn-accent:hover, .btn-accent:focus {background:#ffeaa5; color:#204061;}
.section a.btn, .section a.btn-primary, .section a.btn-accent {margin-top:18px; display:inline-block;}
/* _Cookie banner and buttons_ */
.cookie-banner {position:fixed; bottom:0; left:0; right:0; background:rgba(37,55,71,0.98); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; padding:24px 8px 18px 8px; gap:14px; font-size:1rem; border-radius:12px 12px 0 0; box-shadow:0 -2px 20px rgba(37,55,71,0.10); opacity:1; transition:opacity .35s;}
.cookie-banner.hide {opacity:0; pointer-events:none;}
.cookie-banner .btn {padding:10px 26px; margin:6px 8px 0 0; border-radius:8px; background:#FFD670; color:#253747; font-size:1rem; font-weight:600; border:none; min-width:134px; box-shadow:0 1px 4px rgba(37,55,71,0.09); transition:background 0.19s,color 0.18s;}
.cookie-banner .btn:hover, .cookie-banner .btn:focus {background:#ffeaa5; color:#1a2834; outline:none;}
.cookie-banner .btn.settings {background:#fff; color:#205bb5; border:1px solid #FFD670;}
.cookie-banner .btn.settings:hover, .cookie-banner .btn.settings:focus {background:#FFD670; color:#253747;}
.cookie-banner .actions {display:flex; flex-direction:row; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
/* Cookie settings modal */
.cookie-modal-overlay {display:none; position:fixed; z-index:120; top:0; left:0; width:100vw; height:100vh; background:rgba(37,55,71,0.65); align-items:center; justify-content:center;}
.cookie-modal-overlay.active {display:flex;}
.cookie-modal {background:#fff; color:#253747; border-radius:16px; box-shadow:0 8px 36px rgba(37,55,71,0.09); padding:36px 24px 24px 24px; min-width:320px; max-width:96vw; width:400px; animation:bounceIn .5s cubic-bezier(.27,.77,.19,1.36); display:flex; flex-direction:column; gap:22px;}
.cookie-modal-close {background:none; border:none; color:#253747; font-size:2.1rem; position:absolute; top:22px; right:32px; cursor:pointer;}
.cookie-modal h2 {font-size:1.3rem; margin-bottom:8px;}
.cookie-modal .cookie-categories {display:flex; flex-direction:column; gap:12px; margin:16px 0 12px 0;}
.cookie-category {display:flex; align-items:center; gap:12px;}
.cookie-category input[type=checkbox] {width:18px; height:18px; accent-color:#205bb5;}
.cookie-category label {font-size:1.02rem; font-weight:500;}
.cookie-category.essential label {color:#777;}
.cookie-modal .btn {margin-top:8px;}
@keyframes bounceIn {
  0% {transform:scale(.5); opacity:0;}
  80% {transform:scale(1.03);}
  100% {transform:scale(1); opacity:1;}
}
/* FOOTER */
footer {background:#253747; color:#fff; padding:42px 0 20px 0; margin-top:54px;}
footer .container {max-width:1170px; padding:0 16px;}
footer .content-wrapper {flex-direction:row; display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px; align-items:flex-start;}
footer img {height:48px; width:auto;}
footer ul {margin:8px 0 0 0; padding:0; color:#e7ebef;}
footer ul li {display:flex; align-items:center; font-size:1rem; margin-bottom:8px; color:#e7ebef; padding-left:0;}
footer ul li img {height:18px; width:18px; margin-right:9px; filter:brightness(5) grayscale(1) invert(1);}
footer nav ul {display:flex; flex-direction:column; gap:5px;}
footer nav ul li a {color:#e7ebef; font-weight:500; font-size:1rem; border-radius:4px; padding:6px 4px; transition:color 0.18s,background 0.16s;}
footer nav ul li a:hover, footer nav ul li a:focus {color:#FFD670; background:rgba(255,214,112,0.06);}
footer .social-links {display:flex; flex-direction:row; gap:18px; align-items:center; margin-top:12px;}
footer .social-links a img {height:28px; width:auto; filter:brightness(2) grayscale(.3) invert(.1); opacity:.84; transition:opacity 0.2s;}
footer .social-links a:hover img {opacity:1; filter:brightness(2.6) invert(.1) sepia(.3) hue-rotate(168deg);}
@media (max-width:1020px) {
  footer .content-wrapper {flex-direction:column; gap:20px; align-items:flex-start;}
}
@media (max-width:768px) {
  footer {padding:28px 0 12px 0;}
  footer .content-wrapper {flex-direction:column; gap:16px; font-size:.99rem;}
  footer img {height:40px;}
}
/* FORM ELEMENTS & GENERAL UTILITY */
input, textarea, select, button {font-family:inherit; font-size:1rem;}
input[type=text], input[type=email], textarea, select {
  border:1px solid #ccd3db; border-radius:7px; padding:8px 12px; margin-bottom:16px; background:#FAFAFA;
}
input:focus, textarea:focus, select:focus {outline:2px solid #205bb5; border-color:#205bb5;}
::-webkit-input-placeholder {color:#aab4be;}
::-moz-placeholder {color:#aab4be;}
:-ms-input-placeholder {color:#aab4be;}
::placeholder {color:#aab4be;}
.hr {border-top:1px solid #e5e8ea; margin:32px 0; width:100%;}
.no-margin {margin:0;}
/* VISUAL MICRO-INTERACTIONS */
a, button, .btn, .mobile-menu-toggle, .mobile-menu-close, .cookie-banner .btn, .cookie-modal-close {
  transition:background 0.21s,color 0.21s,box-shadow 0.19s,transform 0.19s;
}
.btn:active, .mobile-menu-toggle:active, .cookie-banner .btn:active {transform:scale(.97);}
section .btn:active {transform:scale(.97);}
.card:hover, .features-grid > div:hover, .feature-item:hover {
  box-shadow:0 6px 26px rgba(32,91,181,0.09);
  transform:translateY(-2px) scale(1.012);
}
.testimonial-card:hover {
  box-shadow:0 12px 32px rgba(37,55,71,0.12);
}
/* TYPOGRAPHY SCALE */
@media (min-width:600px) {
  h1 {font-size:2.75rem;}
  h2 {font-size:2rem;}
  h3 {font-size:1.18rem;}
  p, ul li, ol li {font-size:1.09rem;}
  .btn,.btn-primary,.btn-accent {font-size:1.18rem;}
}
@media (min-width:1000px) {
  h1 {font-size:3rem;}
  h2 {font-size:2.3rem;}
}
/* ACCESSIBILITY & CONTRAST */
.testimonial-card, .testimonial-card p, .testimonial-card span {
  color:#1a2834; background-color:#f4f8fb;
}
@media (max-width:520px) {
  h1 {font-size:1.5rem;}
  h2 {font-size:1.15rem;}
  .container {padding:0 4vw;}
  .btn,.btn-primary,.btn-accent {font-size:.98rem;}
}
/* CRITICAL FLEXBOX SPACING & ALIGNMENT PATTERNS */
.section {margin-bottom:60px; padding:40px 20px;}
.card-container {display:flex; flex-wrap:wrap; gap:24px;}
.card {margin-bottom:20px; position:relative;}
.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;}
.feature-item {display:flex; flex-direction:column; align-items:flex-start; gap:15px;}
/* Responsive Flex Adjustments */
@media (max-width: 768px) {
  .features-grid, .card-container, .content-grid {flex-direction:column; gap:20px;}
  .text-image-section {flex-direction:column; align-items:flex-start;}
  .testimonial-card {flex-direction:column; align-items:flex-start;}
}