/* === 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, 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, 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;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section{
  display: block;
}
body {
  line-height: 1.6;
  font-family: 'Roboto', Arial, sans-serif;
  background: #F6F8FB;
  color: #225B82;
  min-height: 100vh;
  font-size: 16px;
}
ul, ol {
  list-style: none;
}
a {
  color: #225B82;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover, a:focus {
  color: #37B36E;
  outline: none;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

/* === BRAND TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #225B82;
  line-height: 1.15;
}
h1 {
  font-size: 2.5rem; /* 40px */
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -1.5px;
}
h2 {
  font-size: 2rem; /* 32px */
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -1px;
}
h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin-bottom: 12px;
}
h4 {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  margin-bottom: 10px;
}
p, li, dd {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1rem; /* 16px */
  color: #225B82;
  margin-bottom: 10px;
}
strong{
  color: #37B36E;
}

/* ==== LAYOUT CONTAINERS === */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* --- Spacing & Section Patterns --- */
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(34,91,130,0.07);
  border-radius: 18px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 28px 0 rgba(34,91,130,0.13);
}
.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;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px 0 rgba(34,91,130,0.09);
  margin-bottom: 20px;
  color: #1D2028;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}
.text-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==== HEADER ==== */
header {
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(55,179,110,0.09);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 50;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 12px;
}
header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
header nav a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #225B82;
  padding: 7px 10px;
  border-radius: 8px;
  background: none;
  transition: background 0.16s, color 0.16s;
}
header nav a:hover,
header nav a:focus {
  background: #E7F5EC;
  color: #37B36E;
}
.cta-primary {
  background: #37B36E;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 11px 24px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 12px 0 rgba(55,179,110,0.13);
  font-size: 1.12rem;
  position: relative;
  transition: background 0.18s, transform 0.18s, box-shadow 0.2s;
  margin-left: 4px;
  border: 2px solid #37B36E;
}
.cta-primary:hover, .cta-primary:focus {
  background: #225B82;
  border-color: #225B82;
  color: #fff !important;
  transform: scale(1.04) rotate(-1.5deg);
  box-shadow: 0 4px 18px 2px rgba(34,91,130,0.12);
}

.mobile-menu-toggle {
  display: none;
  font-size: 2rem;
  color: #225B82;
  background: #E4EBF3;
  border-radius: 8px;
  padding: 4px 14px;
  margin-left: 10px;
  transition: background 0.18s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background: #37B36E;
  color: #fff;
}

/* ==== MOBILE MENU ==== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: #fff;
  z-index: 120;
  transform: translateX(100vw);
  transition: transform 0.32s cubic-bezier(.77,.04,.58,1.1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 40px rgba(34,91,130,0.18);
  padding-top: 0;
}
.mobile-menu.open {
  transform: translateX(0vw);
}
.mobile-menu-close {
  align-self: flex-end;
  font-size: 2.2rem;
  background: #37B36E;
  color: #fff;
  border-radius: 18px;
  margin: 22px 22px 8px 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  background: #225B82;
  color: #fff;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 44px;
  margin-top: 20px;
}
.mobile-nav a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #225B82;
  padding: 14px 0;
  border-radius: 10px;
  transition: background 0.14s, color 0.14s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background: #E7F5EC;
  color: #37B36E;
}

/* === HERO & MAIN SECTIONS === */
.hero {
  background: #37B36E;
  background-image: url('../assets/bg-playful.svg');
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 8px 32px 0 rgba(55,179,110,0.08);
  min-height: 330px;
  margin-bottom: 42px;
  position: relative;
  overflow: hidden;
}
.hero .container {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1, .hero p, .hero a {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(34,91,130,.09);
}
.hero .content-wrapper {
  gap: 16px;
  padding: 45px 0;
  align-items: flex-start;
  animation: fadeInUp 0.8s cubic-bezier(.17,.67,.33,1.04) 0.05s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.features .content-wrapper,
.steps .text-section,
.cards .card-container {
  gap: 32px;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
}

.features ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.features li {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px 0 rgba(55,179,110,0.07);
  padding: 24px 18px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 260px;
  flex: 1 1 300px;
  position: relative;
  transition: transform 0.16s, box-shadow 0.18s;
  margin-bottom: 12px;
}
.features li img {
  height: 48px;
  width: 48px;
  margin-bottom: 8px;
}
.features li a {
  margin-top: 8px;
  font-size: 1rem;
  color: #225B82;
  font-weight: bold;
  transition: color 0.13s;
}
.features li a:hover {
  color: #37B36E;
  text-decoration: underline;
}
.features li:hover {
  transform: translateY(-6px) scale(1.04) rotate(-1deg);
  box-shadow: 0 8px 30px 0 rgba(55,179,110,0.14);
}

.steps ol, .steps ul {
  padding-left: 24px;
}
.steps li {
  margin-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.trust ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.trust li {
  background: #E4EBF3;
  color: #225B82;
  padding: 7px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 1px 6px 0 rgba(34,91,130,0.06);
}

/* === CTA SECTIONS === */
.cta-guide, .cta-security, .cta-faq {
  background: #225B82;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 24px 0 rgba(34,91,130,0.11);
  margin: 46px 0 56px;
}
.cta-guide .content-wrapper, .cta-security .content-wrapper, .cta-faq .content-wrapper {
  align-items: center;
  gap: 18px;
  text-align: center;
}
.cta-guide h2, .cta-security p, .cta-faq p {
  color: #fff;
}
.cta-guide .cta-primary, .cta-security .cta-primary, .cta-faq .cta-primary {
  background: #fff;
  color: #225B82 !important;
  border: 2px solid #fff;
}
.cta-guide .cta-primary:hover, .cta-security .cta-primary:hover, .cta-faq .cta-primary:hover {
  background: #37B36E;
  color: #fff !important;
  border-color: #37B36E;
}

/* ==== FOOTER ==== */
footer {
  background: #225B82;
  color: #fff;
  border-radius: 20px 20px 0 0;
  margin-top: 60px;
  padding: 32px 0 0 0;
}
footer .container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
footer .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
}
.footer-brand img {
  height: 54px;
  margin-bottom: 5px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-nav a {
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  padding: 8px 0;
  border-radius: 4px;
  transition: color 0.15s, background 0.18s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color: #37B36E;
  background: #193F5E;
}
.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-contact li {
  color: #FAC700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-contact li strong { color: #fff; }
.footer-contact img {
  width: 22px;
  height: 22px;
}
.copyright {
  text-align: center;
  color: #BED6F5;
  font-size: 0.92rem;
  font-family: 'Roboto',Arial,sans-serif;
  padding-bottom: 24px;
  opacity: 0.73;
  margin-top: 8px;
}

/* === FAQ Sections, Download, Legal, Thank You, Simple Sections === */
.faqs dl {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.faqs dt {
  font-weight: 700;
  font-size: 1.18rem;
  color: #225B82;
}
.faqs dd {
  color: #216275;
  margin-bottom: 6px;
  margin-left: 12px;
}
.download ul {
  margin-top: 8px;
}
.download ul li {
  margin-bottom: 10px;
  font-weight: 500;
}
.legal ul, .about ul {
  margin-top: 10px;
}
.legal ul li, .about ul li {
  margin-bottom: 9px;
  font-weight: 500;
}

/* === Playful Dynamic Touches === */
.features li, .steps li, .card, .testimonial-card, .feature-item, .footer-contact li {
  position: relative;
}
.features li::after, .card::after, .testimonial-card::after {
  content: '';
  display: block;
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px; height: 44px;
  background: rgba(55,179,110,0.12);
  border-radius: 60% 40% 50% 60%/60% 30% 70% 40%;
  z-index: 0;
  pointer-events: none;
}
.features li::after { left: auto; right: 11px; bottom: 6px; }

.card::after { background: rgba(34,91,130,0.07); }

.testimonial-card::after {
  background: #37B36E12;
  width: 34px; height: 34px;
  bottom: 8px; right: 8px;
}

.features li:hover::after, .card:hover::after {
  background: rgba(55,179,110,0.22);
  transition: background 0.14s;
}

/* === Animations for playful dynamic feel === */
.cta-primary {
  animation: bounceIn 0.8s cubic-bezier(0.38,0.56,0.45,1.3) both;
}
@keyframes bounceIn {
  0%   { transform: scale(0.8) translateY(40px); opacity:0; }
  70%  { transform: scale(1.07) translateY(-5px); opacity: 0.85; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* === Cookie Consent Banner === */
.cookie-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 9999;
  background: #fff;
  color: #225B82;
  box-shadow: 0 -6px 24px 0 rgba(34,91,130,0.11);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 12px;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 1.05rem;
  animation: cookieBannerSlideIn 0.7s cubic-bezier(.17,.67,.33,1.04) both;
}
@keyframes cookieBannerSlideIn {
  from { transform: translateY(160px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-banner button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.14s, color 0.14s, box-shadow 0.17s;
  border: 2px solid #37B36E;
  background: #37B36E;
  color: #fff;
  margin-left: 0;
}
.cookie-banner button.accept {
  background: #37B36E;
  color: #fff;
  border-color: #37B36E;
}
.cookie-banner button.reject {
  background: #fff;
  color: #225B82;
  border-color: #BED6F5;
}
.cookie-banner button.settings {
  background: #225B82;
  color: #fff;
  border-color: #225B82;
}
.cookie-banner button:hover, .cookie-banner button:focus {
  background: #225B82;
  color: #fff;
  border-color: #225B82;
  box-shadow: 0 2px 10px 0 rgba(55,179,110,0.11);
}

/* Cookie Modal */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34,91,130,0.22);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeModalIn 0.3s both;
}
@keyframes fadeModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cookie-modal {
  background: #fff;
  padding: 36px 28px 26px 28px;
  border-radius: 18px;
  max-width: 420px;
  width: 97vw;
  box-shadow: 0 18px 66px 0 rgba(34,91,130,0.19);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: #225B82;
}
.cookie-modal h2 {
  font-size: 1.4rem;
  margin-bottom: 6px;
  color: #225B82;
  font-family: 'Montserrat', Arial,sans-serif;
}
.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.cookie-category label {
  font-weight: 600;
  color: #225B82;
  font-size: 1rem;
}
.cookie-switch {
  appearance: none;
  width: 48px;
  height: 24px;
  background: #BED6F5;
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
}
.cookie-switch:checked {
  background: #37B36E;
}
.cookie-switch::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px #afd8c6ad, 0 0px 1px #225b8255;
  transition: left 0.23s cubic-bezier(.38,.49,.62,1.2);
}
.cookie-switch:checked::before {
  left: 27px;
}
.cookie-modal .essential {
  opacity: 0.72;
  cursor: not-allowed;
}
.cookie-modal-buttons {
  display: flex;
  flex-direction: row;
  gap: 14px;
  margin-top: 10px;
}
.cookie-modal button {
  padding: 9px 18px;
  border-radius: 8px;
  border: 2px solid #BED6F5;
  background: #fff;
  font-weight: 600;
}
.cookie-modal button.accept {
  background: #37B36E;
  border-color: #37B36E;
  color: #fff;
}
.cookie-modal button.cancel {
  background: #fff;
  border-color: #BED6F5;
  color: #225B82;
}
.cookie-modal button.accept:hover,
.cookie-modal button.accept:focus {
  background: #225B82;
  color: #fff;
  border-color: #225B82;
}
.cookie-modal button.cancel:hover,
.cookie-modal button.cancel:focus {
  background: #37B36E11;
  border-color: #37B36E;
  color: #225B82;
}

/* ==== FORM ELEMENTS ==== */
input[type="text"], input[type="email"], input[type="password"] {
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #BED6F5;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #225B82;
  margin-bottom: 16px;
  transition: border 0.15s, box-shadow 0.17s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #37B36E;
  box-shadow: 0 2px 12px 0 rgba(55,179,110,0.10);
  outline: none;
}

/* ==== UTILITIES ==== */
.rounded {
  border-radius: 14px;
}
.shadow {
  box-shadow: 0 2px 16px 0 rgba(34,91,130,0.14);
}
.bg-accent {
  background: #F6F8FB !important;
}
.text-secondary {
  color: #37B36E !important;
}
.text-primary {
  color: #225B82 !important;
}

/* === RESPONSIVE === */
@media (max-width: 1050px) {
  .content-wrapper, .footer .content-wrapper {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }
}
@media (max-width: 900px) {
  .features ul, .content-grid {
    flex-direction: column;
    gap: 20px;
  }
  .footer .content-wrapper {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.35rem;
  }
  h3 {
    font-size: 1.1rem;
  }
  .container {
    padding: 0 10px;
  }
  .hero {
    min-height: 230px;
    border-radius: 0 0 18px 18px;
    margin-bottom: 28px;
  }
  .hero .container {
    min-height: 230px;
  }
  .hero .content-wrapper {
    padding: 26px 0;
  }
  .features ul {
    flex-direction: column;
    gap: 18px;
  }
  .section {
    margin-bottom: 38px;
    padding: 26px 6px;
  }
  .testimonial-card {
    flex-direction: column;
    gap: 8px;
  }
  .footer .content-wrapper {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  header .container {
    flex-direction: row;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .footer-contact ul {
    gap: 4px;
  }
}
@media (max-width: 640px) {
  .footer, footer .container {
    padding: 0;
    margin: 0;
  }
  .faqs dl {
    gap: 18px;
  }
}
@media (max-width: 600px) {
  .container {
    padding: 0 4px;
  }
  .content-wrapper,
  .footer .content-wrapper {
    gap: 11px;
  }
  .features ul {
    gap: 10px;
  }
  .features li {
    min-width: 175px;
    padding: 16px 8px;
  }
  .section {
    margin-bottom: 20px;
    padding: 12px 3vw;
  }
}

/* === MOBILE NAV === */
@media (max-width: 980px) {
  header nav {
    display: none;
  }
  .mobile-menu-toggle {
    display: block;
  }
}
@media (min-width: 981px) {
  .mobile-menu {
    display: none !important;
  }
}

/* === Section and Card Responsive Alignment === */
@media (max-width: 1000px){
  .text-image-section, .content-grid{
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .features ul, .card-container{
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 630px){
  .card, .testimonial-card {
    padding: 15px;
  }
}

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