/* =========================
   VitrinenMeister CSS Reset
   ========================= */
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;} 
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;}
body {line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after, q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
img {max-width:100%;display:block;border:0;}
:root {
  --color-primary: #254471;
  --color-secondary: #5BC3AF;
  --color-accent: #F3F5F7;
  --color-bg: #fff;
  --color-heading: #181B21;
  --color-body: #24292F;
  --color-grey: #7993ad;
  --color-border: #E4E8EC;
  --shadow-card: 0 2px 12px rgba(40,68,100,0.07);
  --radius: 12px;
  --radius-sm: 7px;
  --transition: 0.22s cubic-bezier(.77,0,.175,1);
  --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

/* ===================
   Typography / Base
   =================== */
html {font-size: 100%;} /* 16px */
body {
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
h1 {font-size: 2.25rem; margin-bottom: 24px;}
h2 {font-size: 1.65rem; margin-bottom: 18px;}
h3 {font-size: 1.28rem; margin-bottom: 14px;}
h4 {font-size: 1.10rem; margin-bottom: 8px;}
h5,h6 {font-size:1rem;}
p,li,blockquote {margin-bottom: 16px;color: var(--color-body);line-height:1.7;}
p.subheadline{font-size:1.18rem;color:var(--color-grey);font-weight:500; margin-bottom: 20px;}
strong, b {font-weight: 600;}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover,a:focus {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ==============
   General Layout
   ============== */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: transparent;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .content-wrapper {gap:16px;}
  section {padding:30px 5vw;margin-bottom:36px;}
}

/* ==================
   Header & NAV Menu
   ================== */
header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position:sticky;top:0;left:0;width:100%;z-index:120;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
}
header img {height:36px;}
nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
nav a {
  color: var(--color-heading);
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
nav a:hover:not(.cta-primary), nav a:focus:not(.cta-primary) {
  background: var(--color-accent);
  color: var(--color-primary);
}
.cta-primary {
  background: var(--color-primary);
  color: #fff !important;
  padding:9px 22px;
  border-radius: var(--radius);
  font-weight:700;
  font-family:var(--font-display);
  font-size:1rem;
  box-shadow: 0 2px 6px rgba(40,68,100,0.08);
  transition: background var(--transition), box-shadow var(--transition);
}
.cta-primary:hover, .cta-primary:focus {
  background: var(--color-secondary);
  color: #fff;
  box-shadow:0 8px 24px rgba(91,195,175,.15);
  text-decoration:none;
}
.mobile-menu-toggle {
  display: none;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 2rem;
  padding: 4px 14px 6px 14px;
  margin-left:18px;
  cursor: pointer;
  transition: background var(--transition);
  z-index: 204;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
  background: var(--color-secondary);
  outline: none;
}
@media (max-width:900px){
  nav {gap:12px;}
}
@media (max-width: 768px) {
  header nav {display: none;}
  .mobile-menu-toggle {display: block;}
  header .container {padding-top:7px;padding-bottom:7px;}
}

/* ==============
   Mobile Menu
   ============== */
.mobile-menu {
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(37,68,113,0.97);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateX(-100vw);
  transition: transform 0.33s cubic-bezier(.7,0,.2,1);
  z-index: 999;
  opacity:1;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity:1;
  pointer-events: auto;
}
.mobile-menu-close {
  background: none;
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 10px 17px;
  align-self: flex-end;
  margin: 18px 18px 8px 0;
  cursor: pointer;
  border-radius: 14px;
  transition: background var(--transition);
}
.mobile-menu-close:hover {
  background: rgba(255,255,255,0.07);
}
.mobile-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-top:14px;
  padding-left: 36px;
}
.mobile-nav a {
  color: #fff;
  font-size: 1.12rem;
  font-family: var(--font-display);
  font-weight:500;
  padding: 13px 0 13px 0;
  border-radius: var(--radius);
  transition: background var(--transition),color var(--transition);
  width: 80vw;
  max-width: 320px;
  display: block;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background: rgba(91,195,175,0.15);
  color: var(--color-secondary);
  text-decoration: none;
}
@media (min-width: 769px) {
  .mobile-menu,.mobile-menu-toggle {display: none!important;}
}

/* ===================
   Global Buttons & Interactions
   =================== */
button, .button, input[type="submit"], input[type="button"] {
  font-family: var(--font-display);
  font-size: 1rem;
  border: none;
  outline: none;
  cursor: pointer;
}

/* =====================
   Section & Card Layouts
   ===================== */
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
.card {
  position: relative;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 28px 22px 28px;
  min-width: 260px;
  max-width: 100%;
  transition: box-shadow var(--transition),transform var(--transition);
}
.card:hover,.card:focus {
  box-shadow:0 8px 30px rgba(37,68,113,0.10);
  transform:translateY(-4px) scale(1.012);
}
.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;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 38px 22px 34px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  min-width: 250px;
  max-width: 570px;
}
.testimonial-card blockquote {
  color: var(--color-heading);
  font-size: 1.11rem;
  font-weight: 500;
  text-align:left;
  margin-bottom:10px;
  line-height:1.6;
}
.testimonial-card footer {
  color: var(--color-primary);
  font-size: .98rem;
  font-weight: 600;
  margin-top:-4px;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom:20px;
}
@media (max-width: 900px) {
  .card-container,.feature-grid,.benefit-grid,.content-grid {gap: 14px;}
  .testimonial-card {padding:18px 14px;gap:10px;}
}
@media (max-width: 768px) {
  .card-container,.feature-grid,.testimonial-cards,.benefit-grid,.content-grid {flex-direction:column;gap: 10px;}
  .section {margin-bottom:32px;padding:24px 3vw;}
  .card {min-width:unset;padding:17px 7vw 17px 7vw;}
  .testimonial-card {max-width: 100vw; padding:14px 5vw;}
  .text-image-section {flex-direction: column;gap:16px;}
}

/* ==== Feature/Benefit Grids, Custom Layout Classes === */
.feature-grid, .benefit-grid, .stepper, .pricing-tables, .logo-list, .faq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
}
.feature-grid > div, .benefit-grid > div, .stepper > div, .pricing-tables > div, .faq-list > div {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 230px;
  flex: 1 1 220px;
  padding: 26px 22px 16px 22px;
  margin-bottom: 20px;
  transition: box-shadow var(--transition),transform var(--transition);
}
.stepper > div {align-items:center; display:flex; flex-direction:column; text-align:center;gap:10px;}
.feature-grid img, .benefit-grid img, .stepper img {height: 36px; width:auto; margin-bottom:7px;}
.pricing-tables > div {
  border: 1.5px solid var(--color-border);
  min-width: 240px;
}
.pricing-tables .price {
  font-size: 1.24rem;
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 10px;
}
.feature-comparison, .terms-summary {
  margin: 18px 0;
  font-size: .99rem;
}
.feature-comparison ul, .terms-summary ul {
  margin-top: 7px;
  margin-bottom:7px;
}
.benefit-grid > div {padding-top: 19px; padding-bottom: 19px;}
.faq-list > div {
  padding:13px 12px 14px 16px; background: var(--color-accent); border-radius:var(--radius-sm);box-shadow:none;border:1px solid var(--color-border);}
.faq-list h3 {color:var(--color-primary);margin-bottom:8px;}

@media (max-width: 850px) {
  .feature-grid,.benefit-grid,.stepper,.pricing-tables,.faq-list {
    gap: 12px;
  }
  .feature-grid > div, .benefit-grid > div, .stepper > div, .pricing-tables > div, .faq-list > div {
    padding: 18px 9vw;
    min-width: 170px;
  }
}
@media (max-width: 600px) {
  .feature-grid,.benefit-grid,.stepper,.pricing-tables,.faq-list {gap:8px;}
  .feature-grid > div,.benefit-grid > div,.stepper > div,.pricing-tables > div,.faq-list > div {padding:13px 4vw;}
}

/* ================== 
   OL, UL, LI Spacing
   ================== */
ul,ol {margin-left:15px;margin-bottom:16px;}
li {
  margin-bottom: 12px;
  line-height: 1.7;
}
ol li {counter-increment: step-counter; position:relative;}
ol li strong {color:var(--color-primary);}
ol li span {color:var(--color-grey);margin-left:4px;}
ul li strong {color:var(--color-primary);}

/* =============
   Infographics
   ============= */
.infographic img {width:98px;margin:12px auto;display:block;}
.logo-list {
  display: flex;
  align-items:center;
  gap: 38px;
  margin: 30px 0 0 0;
}
.logo-list img {height:58px;max-width:110px;width: auto; opacity:.82;transition:opacity .2s;}
.logo-list img:hover {opacity:1;}
@media (max-width: 600px){ .logo-list {gap:11px;} .logo-list img{height:37px;max-width:65px;} }

/*.case-study-teaser*/
.case-study-teaser {
  padding: 18px 22px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  color: var(--color-primary);
  font-size: 1.07rem;
  box-shadow: 0 1px 7px rgba(60,80,95,.05);
}
.outcome-overview ul li {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 11px;
}

/* ===========
   Footer
   =========== */
footer {
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 28px 0 10px 0;
  color: var(--color-grey);
}
footer .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap:24px;
  flex-wrap: wrap;
  font-size: .99rem;
}
.footer-nav {
  display: flex;
  flex-direction: row;
  gap: 22px;
}
.footer-nav a {
  color: var(--color-grey);
  font-size: .98rem;
  padding: 3px 0;
  border-radius: 8px;
  transition: color .18s, background .20s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color: var(--color-primary);
  background: var(--color-accent);
  text-decoration:none;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img {
  height: 27px;
}

@media (max-width: 850px) {
  footer .container {flex-direction: column; gap:14px; align-items: flex-start;}
  .footer-nav {flex-wrap:wrap;gap:13px;}
}
@media (max-width:500px) {
  .footer-brand img {height:19px;}
  .footer-brand {font-size: .89rem;gap:7px;}
}

/* ========================
   Contact & Accessibility
   ======================== */
.text-section ul li {
 display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px;}
.text-section img {width:22px;height:22px;filter: grayscale(.2) contrast(1.3);margin-top:1px;}

/* =============
   Misc Elements
   ============= */
blockquote {border-left:3px solid var(--color-secondary);padding-left:15px;font-style:italic;opacity:0.96;}
hr {border: 0;height:1px;background:var(--color-border);margin:32px 0;}

/* =================
   Micro-animations
   ================= */
a, .cta-primary, button, .card, .testimonial-card,
.feature-grid > div, .benefit-grid > div, .pricing-tables > div, .faq-list > div, .case-study-teaser {
  transition: box-shadow var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}
.card:hover, .feature-grid > div:hover, .benefit-grid > div:hover, .testimonial-card:hover, .pricing-tables > div:hover, .faq-list > div:hover, .case-study-teaser:hover {
  box-shadow:0 8px 30px rgba(37,68,113,0.11);
  transform:translateY(-3px) scale(1.011);
  z-index:3;
}

/* ==============
   Form Elements
   =============== */
input, textarea, select {
  background: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--font-body);
  margin-bottom: 18px;
  transition: border-color var(--transition),box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-secondary);
  border-color: var(--color-secondary);
}
input[type="submit"],input[type="button"]{
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 9px 20px;
  font-size: 1rem;
  font-family: var(--font-display);
  box-shadow: 0 2px 8px rgba(37,68,113,.09);
}
input[type="submit"]:hover,input[type="button"]:hover{background:var(--color-secondary);}

/* =============
   Cookie Banner
   ============= */
.cookie-banner {
  position: fixed;
  left:0;right:0;bottom: 0;
  width: 100vw;
  background: #fff;
  color: var(--color-heading);
  box-shadow: 0 -2px 20px rgba(37,68,113,.13);
  border-top: 1.5px solid var(--color-border);
  z-index: 1999;
  padding: 25px 16px 20px 16px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  align-items:center;
  transition: transform .37s cubic-bezier(.7,0,.2,1), opacity .22s;
  opacity:1;
  transform: translateY(0);
}
.cookie-banner.hide {
  opacity: 0;
  pointer-events:none;
  transform: translateY(50px);
}
.cookie-banner p {
  color: var(--color-body);
  font-size: 1rem;
  margin-bottom:3px;
}
.cookie-buttons {
  display: flex; flex-direction:row; gap:13px; justify-content:center; align-items:center;
}
.cookie-btn {
  background: var(--color-primary);
  color:#fff;
  padding: 8px 20px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);
  font-weight:500;
  border:none;outline:none;
  cursor: pointer;
  font-size:1rem;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  margin:0;
}
.cookie-btn.cookie-btn-settings {
  background: var(--color-accent);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.cookie-btn.cookie-btn-reject {
  background: #e0e3e6;
  color: var(--color-primary);
  font-weight:400;
  border: 1px solid var(--color-border);
}
.cookie-btn:hover:not(.cookie-btn-settings), .cookie-btn:focus:not(.cookie-btn-settings) {
  background: var(--color-secondary);
  color:#fff;
}
.cookie-btn.cookie-btn-settings:hover, .cookie-btn.cookie-btn-settings:focus {
  background: #ecf1f8;
  color: var(--color-secondary);
}
.cookie-btn.cookie-btn-reject:hover,.cookie-btn.cookie-btn-reject:focus{
  background: #d3d6db;
}
@media(max-width:480px){
  .cookie-buttons{flex-direction:column;gap:5px;width:100vw;}
  .cookie-banner{padding:16px 2vw 13px 2vw;}
}

/* Cookie modal (if you show preference settings) */
.cookie-modal {
  position:fixed;
  left:0;top:0;right:0;bottom:0;
  width:100vw;height:100vh;
  background:rgba(37,68,113,0.29);
  backdrop-filter:blur(1.5px);
  z-index:2999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  pointer-events:auto;
  transition:opacity .22s;
}
.cookie-modal.hide{
  opacity:0;pointer-events:none;
}
.cookie-modal-content{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 12px 38px rgba(37,68,113,0.19);
  padding:26px 26px 22px 26px;
  max-width:90vw;
  min-width: 292px;
  max-width:420px;
  display:flex; flex-direction:column; gap:19px; align-items:center;
  position:relative;
}
.cookie-modal-content h2{font-size:1.29rem;color:var(--color-primary);margin-bottom:8px;}
.cookie-modal-content .cookie-category{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 5px 0;
}
.cookie-modal-content .category-label{
  font-family:var(--font-display);font-size:1rem;}
.cookie-modal-content .toggle{
  display: inline-block; width:40px;height:22px; position:relative;
}
.cookie-modal-content .toggle input {
  opacity:0;width:0;height:0;position:absolute;}
.cookie-modal-content .slider{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:#e7eaf0;
  border-radius:11px;
  transition:background .18s;
}
.cookie-modal-content .toggle input:checked + .slider{background:var(--color-secondary);}
.cookie-modal-content .slider:before{
  content:""; position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1.5px 7px rgba(40,68,100,.11);}
.cookie-modal-content .toggle input:checked + .slider:before{transform:translateX(16px);}
.cookie-modal-close{
  position:absolute;top:8px;right:8px; background:none; border:none;color:var(--color-primary);font-size:1.37rem;cursor:pointer; padding:0 7px; border-radius:8px;}
.cookie-modal-close:hover{background:var(--color-accent);}
.cookie-modal-content button[type="submit"]{margin-top:12px;}

/* ===================
   Accessibility Tweaks
   =================== */
:focus {
  outline:2px solid var(--color-secondary);
  outline-offset:1px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {transition: none !important;}
}

/* =============
   Hide Utility
   ============= */
.d-none, [hidden], .hide {display: none !important;}

/* =============
   Helper Gaps
   ============= */
.gap16 {gap: 16px;}
.gap24 {gap: 24px;}
.mb32 {margin-bottom: 32px;}
.mt32 {margin-top: 32px;}

/* ===============
   Print styles
   =============== */
@media print {header,footer,.mobile-menu,.cookie-banner,.cookie-modal{display:none!important;}}