/* -----------------------------------------------------
  CSS RESET & NORMALIZATION
----------------------------------------------------- */
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;
}
html {
  scroll-behavior: smooth;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
  display:block;
}
body {
  line-height:1.5;
  background:#1A2236;
  color:#F2F5FA;
  font-family:'Inter', Arial, Helvetica, sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img {
  display: block;
  max-width:100%;
  height:auto;
}
a {
  text-decoration: none;
  color: #49C2F0;
  transition: color 0.2s;
  outline: none;
}
a:hover,a:focus {
  color:#F2F5FA;
}
ul, ol {
  margin-left: 1.5em;
  margin-bottom: 16px;
}

/* -----------------------------------------------------
  BRAND TYPOGRAPHY & GENERAL
----------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #F2F5FA;
  line-height: 1.1;
  margin-bottom:12px;
}
h1 {font-size: 2.5rem;letter-spacing:0.5px;}
h2 {font-size: 2rem;letter-spacing:0.2px;}
h3 {font-size: 1.35rem;}
h4 {font-size: 1.125rem;}
.section h2,
.section h3 {
  color: #F2F5FA;
}
p,li {
  font-family:'Inter', Arial, Helvetica, sans-serif;
  font-size:1rem;
  color: #E6ECF1;
  margin-bottom: 8px;
}
strong {color: #F2F5FA; font-weight: 700;}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* -----------------------------------------------------
  HEADER & NAV STYLES
----------------------------------------------------- */
header {
  background: #181C28;
  border-bottom: 1.5px solid #222840;
  padding: 0;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}
header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
header nav a {
  color: #E6ECF1;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25px;
  padding: 6px 12px;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
  position:relative;
}
header nav a.cta {
  background: #49C2F0;
  color: #1A2236;
  font-weight: 700;
  margin-left: 8px;
  border-radius: 3.5px;
  padding: 10px 24px;
  box-shadow: 0 2px 10px rgba(34,40,60,0.11);
  border: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
header nav a.cta:hover,
header nav a.cta:focus {
  background: #197499;
  color: #F2F5FA;
  transform: translateY(-2px) scale(1.03);
}
header nav a:hover,
header nav a:focus {
  background: #232940;
  color: #49C2F0;
}
header img {
  height: 38px;
  width: auto;
  margin-right: 14px;
}

/* -----------------------------------------------------
  MOBILE MENU
----------------------------------------------------- */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 150;
  background: #222840;
  color: #49C2F0;
  border: none;
  font-size: 2rem;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background: #49C2F0;
  color: #181C28;
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #181C28;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 48px;
  gap: 0;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-close {
  background: transparent;
  border: none;
  color: #F2F5FA;
  font-size: 2.2rem;
  align-self: flex-end;
  margin: 8px 24px 0 0;
  cursor: pointer;
  transition: color 0.18s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  color: #49C2F0;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 0 32px;
  width: 90%;
}
.mobile-nav a {
  color: #F2F5FA;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  margin-bottom: 6px;
  padding: 10px 8px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.18s, color 0.2s;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background: #49C2F0;
  color: #181C28;
}

/* Burger only on mobile */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: block;
  }
  header nav {
    display: none;
  }
}
@media (min-width: 1025px) {
  .mobile-menu {
    display: none !important;
  }
}

/* -----------------------------------------------------
  SECTIONS & SPACING
----------------------------------------------------- */
section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.hero {
  background: #232940;
  border-radius: 0 0 8px 8px;
  position: relative;
  box-shadow: 0 8px 28px -8px rgba(34,40,60,0.22), 0 4px 18px 0 rgba(73,194,240,0.05);
}
.hero h1 {
  color: #F2F5FA;
  font-size:2.7rem;
  margin-bottom:10px;
  font-family:'Montserrat', Arial, Helvetica, sans-serif;
  letter-spacing:2px;
  text-shadow: 0 2px 12px rgba(33,49,85,0.22);
}
.hero p {
  color: #CED3E1;
  font-size: 1.125rem;
  margin-bottom:18px;
}
@media (max-width: 768px) {
  .hero h1 {font-size:2rem;}
}

/* Content wrappers always with adequate gaps */
.content-wrapper {
  padding: 0;
}

/* -----------------------------------------------------
  FEATURE & CARD FLEXBOX GRIDS
----------------------------------------------------- */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 20px;
  margin-bottom: 16px;
}
.feature-grid > div {
  background: #222840;
  border-radius: 7px;
  flex:1 1 240px;
  min-width: 225px;
  max-width: 340px;
  padding: 24px 22px;
  box-shadow: 0 4px 24px -10px rgba(49,60,95,0.18);
  border: 1.2px solid #232940;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  justify-content: flex-start;
  margin-bottom: 20px;
  margin-right: 0;
  transition: box-shadow 0.24s, border-color 0.22s, transform 0.18s;
}
.feature-grid > div:hover,
.feature-grid > div:focus-within {
  box-shadow: 0 8px 32px -6px #49C2F099, 0 2px 10px 0 #181C2899;
  border-color: #49C2F0;
  transform: translateY(-3px) scale(1.03);
  z-index:3;
}
.feature-grid img {
  width: 44px;
  height: 44px;
  background: #191F30;
  padding: 8px;
  border-radius: 5px;
  box-shadow: 0 2px 10px #23334c33;
}
.feature-grid h3 {
  font-size: 1.13rem;
  color: #F2F5FA;
  margin-bottom: 6px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.feature-grid p, .feature-grid ul li {
  font-size: 1rem;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:#CED3E1;
}

/* AUTHOR SNIPPETS flex for blog */
.author-snippets {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top:10px;
}
.author-snippets > div {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 330px;
  background: #232940;
  padding: 18px 18px 15px 18px;
  border-radius: 5px;
  box-shadow: 0 2px 12px -4px #23294055;
  border: 1px solid #232940;
}

/* CARD CONTAINER PATTERNS */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  flex: 1 1 320px;
  background: #222840;
  border-radius: 7px;
  box-shadow: 0 4px 24px -10px rgba(49,60,95,0.12);
  padding: 24px 18px;
}

/* GRID: strictly with flex only */
.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;
}
@media (max-width: 768px) {
  .feature-grid,
  .card-container,
  .content-grid,
  .text-image-section,
  .author-snippets {
    flex-direction: column;
  }
}

/* FEATURE ITEM */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 12px;
}

/* -----------------------------------------------------
  CTA BUTTONS
----------------------------------------------------- */
.cta,
.cta:visited {
  display: inline-flex;
  background: #49C2F0;
  color: #1A2236;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 5px;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: background 0.22s, color 0.16s, box-shadow 0.18s, transform 0.17s;
  box-shadow: 0 2px 12px -2px #49c2f077;
  margin-top: 6px;
  margin-bottom: 8px;
}
.cta:hover,
.cta:focus {
  background: #197499;
  color: #F2F5FA;
  box-shadow: 0 8px 32px -8px #49C2F0;
  transform: translateY(-1px) scale(1.04);
}

/* -----------------------------------------------------
  TESTIMONIALS & CARDS
----------------------------------------------------- */
.testimonial-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: #F2F5FA;
  color: #222840;
  border: 1.6px solid #49C2F0;
  border-radius: 7px;
  padding: 20px;
  min-width: 220px;
  box-shadow: 0 2px 16px -6px #2329402F;
  margin-bottom:20px;
  max-width:360px;
  transition: box-shadow 0.2s, border-color 0.2s;
  font-family:'Inter',Arial,Helvetica,sans-serif;
}
.testimonial-card:hover,
.testimonial-card:focus {
  border-color:#197499;
  box-shadow: 0 8px 32px -10px #49C2F099;
  z-index:2;
}
.testimonial-card p {
  color:#232940;
  font-size:1.05rem;
  margin-bottom:4px;
}
.testimonial-card strong {
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  color:#197499;
  font-size:0.98rem;
}

/* Card content utility for flex-centered */
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Contact block styles */
.contact-info-block {
  background: #232940;
  border-radius: 7px;
  padding: 20px 24px;
  display:flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom:30px;
  box-shadow:0 2px 12px -4px #49C2F044;
}
.contact-info-block p {
  color: #CED3E1;
  display:flex;
  align-items:center;
  font-size:1rem;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  gap:9px;
}
.contact-info-block img {
  width:18px;height:18px; display:inline-block; margin-right:4px;
}

/* -----------------------------------------------------
  FOOTER
----------------------------------------------------- */
footer {
  background: #181C28;
  color: #F2F5FA;
  padding: 0 0 10px 0;
  border-top: 1px solid #232940;
  font-size: 0.97rem;
}
footer .container {
  padding-top: 32px;
  padding-bottom: 10px;
}
.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.footer-main a {
  color: #F2F5FA;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin-bottom: 7px;
  transition: color 0.16s;
}
.footer-main a:hover, .footer-main a:focus {
  color: #49C2F0;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 170px;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 230px;
  font-size:0.97rem;
}
.footer-contact img {
  width:16px; height:16px;
  margin-right: 5px;vertical-align:middle;
}
.footer-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  /* min-width: 120px; */
  margin-left:12px;
}
.footer-social a img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #222840;
  padding:2px;
  transition:box-shadow 0.13s;
}
.footer-social a:hover img {
  box-shadow:0 0 8px #49C2F0;
  background: #191F30;
}
.footer-bottom {
  margin-top: 16px;
  border-top:1px solid #222840;
  padding-top: 15px;
  color: #CED3E1;
  font-size: 0.97rem;
  text-align:center;
}

@media (max-width: 940px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px 0;
  } 
  .footer-social {margin-left:0;}
}

/* -----------------------------------------------------
  MEDIA QUERIES FOR RESPONSIVE DESIGN
----------------------------------------------------- */
@media (max-width: 850px) {
  .hero h1 {font-size: 2.1rem;}
  .container {padding-left: 14px; padding-right: 14px;}
  section, .section {padding: 32px 8px;}
}
@media (max-width: 650px) {
  .container {padding-left:6px;padding-right:6px;}
  section, .section {padding: 23px 2vw; margin-bottom:40px;}
  .footer-main, .feature-grid, .card-container, .content-grid, .author-snippets {gap: 16px;}
  .testimonial-carousel {gap:14px;}
}

/* Soften headings on dark background for industrial look */
h1, h2, h3, h4 {
  text-shadow: 0 2.5px 18px #11141e11;
}

/* -----------------------------------------------------
  UTILITY CLASSES & MICROINTERACTIONS
----------------------------------------------------- */
::-webkit-scrollbar {
  width: 9px;
  background: #232940;
}
::-webkit-scrollbar-thumb {
  background: #222840;
  border-radius: 5px;
}
::-webkit-input-placeholder { color:#BDC4D2; }
::-moz-placeholder { color:#BDC4D2; }
:-ms-input-placeholder { color:#BDC4D2; }
::placeholder { color:#BDC4D2; }

/* Industrial metallic accent borders (use sparingly) */
.feature-grid > div, .card, .content-grid > div, .footer-main, .testimonial-card {
  border-bottom: 1.5px solid #2e394c;
}

/* Focus outline for accessibility */
:focus-visible {
  outline: 2px dashed #49C2F0;
  outline-offset: 2px;
}

hr {
  border:0; height: 1px; background:#232940;margin:28px 0;
}

/* -----------------------------------------------------
  COOKIE CONSENT BANNER + MODAL
----------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left:0; right:0; bottom:0;
  width:100vw;
  z-index:9999;
  background: #232940;
  color: #F2F5FA;
  box-shadow: 0 -3px 18px -3px #23294055;
  padding: 22px 30px 18px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  font-size:1rem;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  transition: transform 0.38s, opacity 0.22s;
}
.cookie-banner.hide {
  transform: translateY(100%);
  opacity:0;
  pointer-events:none;
}
.cookie-banner .cookie-actions {
  display: flex; flex-direction: row; gap: 14px; align-items:center;
  flex-shrink:0;
}
.cookie-banner button {
  font-family: 'Montserrat',Arial,Helvetica,sans-serif;
  font-size: 1rem;
  font-weight:600;
  border: none;
  border-radius: 4px;
  padding: 9px 18px;
  margin-right: 0;
  background: #49C2F0;
  color: #1A2236;
  cursor:pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.16s;
}
.cookie-banner button:hover,
.cookie-banner button:focus {
  background:#197499;
  color:#F2F5FA;
  box-shadow: 0 2px 8px #49C2F066;
}
.cookie-banner .cookie-settings-btn {
  background: transparent;
  color: #49C2F0;
  border: 1.2px solid #49C2F0;
  font-weight:600;
  margin-left: 2px;
  transition: background 0.17s, color 0.17s, border-color 0.17s;
}
.cookie-banner .cookie-settings-btn:hover,
.cookie-banner .cookie-settings-btn:focus {
  background: #232940;
  color: #197499;
  border-color: #197499;
}
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap:20px;
    padding:16px 9px 14px 9px;
    font-size:0.97rem;
  }
  .cookie-banner .cookie-actions { justify-content: flex-end; }
}

/* Cookie Modal */
.cookie-modal-backdrop {
  position:fixed; left:0; top:0; width:100vw; height:100vh;
  background:rgba(34,40,60,0.85);
  z-index:10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.28s;
}
.cookie-modal {
  background: #181C28;
  border-radius: 9px;
  box-shadow: 0 8px 44px -18px #232940EE;
  padding:30px 22px 22px 22px;
  color: #F2F5FA;
  width:90%;
  max-width:440px;
  min-width: 250px;
  font-size: 1rem;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  display:flex;
  flex-direction:column;
  gap:16px;
  position: relative;
}
.cookie-modal h2 {
  color: #49C2F0;
  font-size: 1.3rem;
  margin-bottom:7px;
}
.cookie-modal label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  margin: 9px 0 8px 0;
}
.cookie-modal input[type="checkbox"] {
  accent-color: #49C2F0;
}
.cookie-modal .modal-actions {
  display:flex;
  flex-direction: row;
  gap:13px;
  margin-top:6px;
}
.cookie-modal .modal-close {
  position:absolute;
  top:14px; right:15px;
  background:transparent;
  border:none;
  color:#F2F5FA;
  font-size:1.7rem;
  cursor:pointer;
  transition:color 0.15s;
}
.cookie-modal .modal-close:hover,
.cookie-modal .modal-close:focus {color: #49C2F0;}

/* -----------------------------------------------------
  INDUSTRIAL-MODERN/URBAN TOUCHES
----------------------------------------------------- */
/* Card metallic accent stripe */
.feature-grid > div::before, .testimonial-card::before {
  content: '';
  display: block;
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,#49C2F0 0%,#297aac 100%);
  position: absolute;
  top: 20px;
  left: 21px;
  z-index: 2;
  opacity: 0.54;
}
.testimonial-card::before {top:14px; left:18px;}

/* Slight metallic border for call-to-action sections */
.cta {
  border-bottom: 2.5px solid #BDC4D2;
}

/* -----------------------------------------------------
  MISC/UTILITY
----------------------------------------------------- */
@media (max-width:480px) {
  h1 {font-size:1.39rem;}
  .testimonial-card, .feature-grid > div {min-width:160px; max-width: 98vw;}
  header .container {flex-direction: row; gap: 12px;}
}

@media (max-width:350px) {
  .cookie-modal {padding:10px 1vw;}
  section, .section {padding: 12px 2vw;}
}


/* -----------------------------------------------------
  INDUSTRIAL FONT FAMILIES & STYLES
----------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat'), url('https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), url('https://fonts.gstatic.com/s/inter/v12/UcCo3Fwr1s4l5pUEyLw8.ttf') format('truetype');
}

/* -----------------------------------------------------
  END OF CSS FILE
----------------------------------------------------- */