/* 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,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;}
*, *:before, *:after {box-sizing: inherit;}
body {line-height:1.5;background: #121820;color:#f7fafc;font-family: 'Roboto', Arial, sans-serif;}
ul,ol {list-style:none;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
input,button,textarea,select{font-family:inherit;font-size:100%;}
button{background: none;border:none;cursor:pointer;}

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

/* VARIABLES */
:root {
  --primary: #182d4f;
  --secondary: #f7fafc;
  --accent: #128a71;
  --accent-dark: #0e5e4a;
  --bg-dark: #121820;
  --card-bg: #181c23;
  --metal: #b6bec9;
  --danger: #a11229;
  --success: #128a71;
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;
  --radius: 10px;
  --shadow-strong: 0 3px 24px rgba(24,45,79,0.28);
  --shadow-soft: 0 1.5px 10px rgba(24,45,79,0.14);
  --gap: 24px;
  --transition: 0.2s cubic-bezier(.6, .1, .42, 1);
}

/* CONTAINER & GENERAL LAYOUT */
.container {
  width:100%;
  max-width:1200px;
  padding:0 20px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* HEADER & NAVIGATION */
header {
  background:var(--primary);
  box-shadow:var(--shadow-strong);
  position:relative;
  z-index:2200;
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:72px;
}
header nav {
  display:flex;
  gap:24px;
  align-items:center;
}
header nav a {
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:var(--secondary);
  letter-spacing:0.03em;
  padding:6px 0;
  transition:color var(--transition);
  position:relative;
}
header nav a:hover,
header nav a:focus{
  color:var(--accent);
}
header .btn-primary {
  margin-left:16px;
}

/* LOGO */
header .container > a img,
footer .container > a img{
  height:44px;max-width:140px;
}

/* MOBILE MENU TOGGLE */
.mobile-menu-toggle {
  display:none;
  background:transparent;
  color:var(--accent);
  font-size:30px;
  border:none;
  margin-left:16px;
  z-index:2501;
  padding:8px 8px 7px 8px;
  border-radius:var(--radius);
  transition:background var(--transition);
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {background:rgba(18,40,66,0.12);}

/* MOBILE MENU OVERLAY */
.mobile-menu {
  position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  background:rgba(18,40,66,0.98);
  z-index:2500;
  transform:translateX(-100vw);
  transition:transform 0.36s cubic-bezier(.33,.15,.59,1.08);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:36px 28px 24px 28px;
}
.mobile-menu.open {
  transform:translateX(0%);
}
.mobile-menu-close {
  font-size:30px;
  color:var(--accent);
  align-self:flex-end;
  margin-bottom:24px;
  background:rgba(255,255,255,0.09);
  border-radius:50%;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {background:rgba(255,255,255,0.20);}

.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:8px;
  width:100%;
}
.mobile-nav a {
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  color:var(--secondary);
  padding:10px 6px;
  border-radius:5px;
  transition:background var(--transition), color var(--transition);
}
.mobile-nav a:hover,
.mobile-nav a:focus {background:var(--accent);color:var(--secondary);}

/* MAIN LAYOUT & FLEX PATTERNS */
.section {
  margin-bottom:60px;
  padding:40px 20px;
}
.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  margin-bottom:20px;
  position:relative;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.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:center;
  gap:20px;
  padding:20px;
  background:#fff;
  color:#222d37;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  min-width:260px;
  max-width:420px;
  margin-bottom:24px;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

/* HERO SECTION */
.hero {
  background:linear-gradient(128deg, #182d4f 76%,#128a71 100%);
  color:var(--secondary);
  padding:80px 0 60px 0;
  width:100%;
}
.hero .container {
  align-items:center;
  min-height:420px;
  justify-content:center;
}
.hero .content-wrapper {
  align-items:center;
  gap:32px;
  max-width:760px;
}
.hero h1 {
  font-family:var(--font-display);
  font-size:2.8rem;
  line-height:1.15;
  font-weight:900;
  color:var(--secondary);
  margin-bottom:14px;
  text-shadow: 1px 3px 15px #161a28;
  letter-spacing:0.01em;
}
.hero p{font-size:1.23rem;}

/* FEATURE & SERVICE GRIDS */
.feature-grid, .service-list {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  justify-content:space-between;
  margin:32px 0;
}
.feature-grid > div,
.service-list > li{
  flex:1 1 220px;
  min-width:230px;
  max-width:255px;
  background:var(--card-bg);
  color:var(--secondary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:24px 20px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  border-left:5px solid var(--metal);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.feature-grid > div:hover,
.service-list > li:hover{
  border-color:var(--accent);
  box-shadow:0 2px 16px 0 rgba(18,42,60,0.20);
}
.feature-grid img,
.service-list img
{height:42px;width:42px;filter: grayscale(30%) brightness(0.92) contrast(1.5);}
.feature-grid h3,
.service-list h3{font-size:1.16rem;font-family:var(--font-display);font-weight:700;letter-spacing:0.03em;}
.feature-grid p,
.service-list p{font-size:1rem;color:var(--metal);}

/* BLOG LIST */
.blog-list {display:flex;flex-wrap:wrap;gap:24px;margin-top:28px;}
.blog-list article {
  flex:1 1 320px; min-width:240px;max-width:370px;
  background:var(--card-bg);
  color:var(--secondary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:26px 20px 18px 22px;
  display:flex;flex-direction:column;gap:13px;
  border-left:5px solid var(--primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.blog-list article:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(18,42,60,0.16);}
.blog-list article h2{font-size:1.1rem;font-family:var(--font-display);font-weight:700;}
.blog-list .tag{font-size:0.87em;background:var(--accent);color:#fff;display:inline-block;padding:1px 10px;border-radius:4px;margin-right:5px;opacity:0.93;}
.blog-list a{font-size:1em;color:var(--accent);font-weight:500;text-decoration:underline;transition:color var(--transition);}
.blog-list a:hover{color:var(--metal);}

input[type='text']{
  font-size:1.06em;padding:8px 12px;color:#101c2b;background:var(--secondary);border:1.4px solid var(--primary);border-radius:6px;margin-bottom:18px;width:100%;max-width:330px;}
input[type='text']:focus, input[type='text']:hover{outline:none;border-color:var(--accent);}

/* CARD, TESTIMONIALS, FAQ, PRICING */
.card {
  background:var(--card-bg);
  color:var(--secondary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:24px;
}
.testimonial-slider {
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:18px;
}
.testimonial-card {
  background:#fff;
  color:#1d283f;
  min-width:240px;max-width:420px;
  border-radius:var(--radius);
  box-shadow:0 2px 20px rgba(24,45,79,0.10),0 1px 5px rgba(18,42,60,0.08);
  padding:28px 24px 20px 24px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  margin-bottom:24px;
  transition:box-shadow var(--transition), transform var(--transition);
  border-left:5px solid var(--accent);
}
.testimonial-card:hover{box-shadow:0 8px 32px #182d4f33;transform:translateY(-4px);}
.testimonial-card p{font-size:1.12em;letter-spacing:0.01em;font-style:italic;line-height:1.55;text-align:center;}
.testimonial-card strong{font-weight:700;letter-spacing:0.01em;}
.testimonial-card .stars{display:flex;gap:2.5px;align-items:center;}
.testimonial-card .stars img{height:18px;width:18px;filter: grayscale(0) contrast(1.1);}

/* FAQ-LIST */
.faq-list {display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;}
.faq-list > div {flex:1 1 240px;min-width:220px;max-width:350px;background:var(--card-bg);color:var(--secondary);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:20px 16px 14px 18px;display:flex;flex-direction:column;gap:11px;border-left:5px solid var(--accent);transition:border-color var(--transition), box-shadow var(--transition);}
.faq-list > div:hover{border-color:#fcdf6c;box-shadow:0 3px 18px #0e5e4a26;}

/* PRICING TABLE */
.pricing-table{width:100%;margin:26px 0 34px 0;border-collapse:separate;border-spacing:0;}
.pricing-table th,.pricing-table td{padding:14px 10px 14px 10px;text-align:center;}
.pricing-table th{background:var(--primary);color:var(--secondary);font-family:var(--font-display);font-size:1.08rem;font-weight:700;letter-spacing:0.01em;}
.pricing-table td{background:var(--card-bg);color:var(--metal);border-right:1.3px solid #22324c;}
.pricing-table td:first-child{font-weight:bold;color:var(--secondary);background:#161c26;}
.pricing-table tr:last-child td{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}

/* CONTACT INFO */
.contact-info {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:1.08em;
}
.contact-info p {display:flex;align-items:center;gap:10px;}
.contact-info img {width:20px;height:20px;filter:brightness(1.2) grayscale(25%);}
.contact-info a{color:var(--accent);font-weight:500;text-decoration:underline;}
.contact-info a:hover{text-decoration:none;}

/* TEXT SECTION */
.text-section{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:1.09em;
  color:var(--metal);
}
.text-section ul, .text-section ol{
  margin-left:18px;
  margin-top:6px;
}
.text-section h2,.text-section h3 {
  color:var(--secondary);
  margin-top:12px;
  font-family:var(--font-display);
  font-weight:700;
}
.text-section h2{font-size:1.45em;}
.text-section h3{font-size:1.17em;}

/* CONTENT TYPOGRAPHY */
h1{font-size:2.2rem;line-height:1.14;font-family:var(--font-display);font-weight:900;color:var(--accent);letter-spacing:-0.01em;margin-bottom:12px;}
h2{font-size:1.38rem;font-family:var(--font-display);font-weight:900;color:var(--secondary);margin-bottom:10px;}
h3{font-size:1.11rem;font-family:var(--font-display);font-weight:700;color:var(--accent);margin-bottom:6px;}

p,li{font-size:1em;line-height:1.7;}

/* BUTTONS */
.btn-primary {
  display:inline-block;
  background:var(--accent);
  color:var(--secondary) !important;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  border:none;
  border-radius:var(--radius);
  padding:13px 32px;
  margin-top:12px;
  letter-spacing:0.01em;
  box-shadow:0 2px 10px #128a7165;
  cursor:pointer;
  transition:box-shadow var(--transition), background var(--transition), transform var(--transition);
  outline:none;text-align:center;
}
.btn-primary:hover, .btn-primary:focus {
  background:var(--primary);
  color:var(--accent)!important;
  box-shadow:0 6px 26px #128a713a;
  transform:translateY(-3px) scale(1.03);
}

/* FOOTER */
footer {
  margin-top:60px;
  background:var(--primary);
  color:var(--metal);
  padding:40px 0 28px 0;
}
footer .container {
  flex-direction:row;
  align-items:flex-start;
  gap:20px;
  justify-content:space-between;
}
footer nav {
  display:flex;
  flex-direction:column;
  gap:11px;
  font-size:1em;
}
footer nav a {
  color:var(--metal);
  font-family:var(--font-display);
  transition:color var(--transition);
}
footer nav a:hover{color:var(--secondary);}
footer p {font-size:.98em;line-height:1.45;}

/* COOKIE CONSENT BANNER */
.cookie-banner {
  position:fixed;
  left:0;right:0;bottom:0;
  width:100vw;
  background:linear-gradient(90deg, var(--primary) 78%,var(--accent) 100%);
  box-shadow:0 -2px 22px rgba(24,45,79,0.12);
  color:var(--secondary);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:28px 24px 24px 16px;
  z-index:2150;
  font-size:1.02rem;
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.25s,transform 0.24s;
}
.cookie-banner.hide {
  opacity:0;
  pointer-events:none;
  transform:translateY(100%);
}
.cookie-banner__text {flex:1 1 auto;max-width:540px;}
.cookie-banner__actions {
  display:flex;gap:11px;align-items:center;justify-content:flex-end;
}
.cookie-banner button{
  font-family:var(--font-display);font-weight:700;font-size:1em;padding:9px 22px;border-radius:7px;border:none;cursor:pointer;outline:none;transition:background var(--transition),color var(--transition);}
.cookie-banner .accept-all{background:var(--accent);color:#fff;}
.cookie-banner .accept-all:hover{background:var(--success);}
.cookie-banner .reject-all{background:var(--danger);color:#fff;}
.cookie-banner .reject-all:hover{background:#88081b;}
.cookie-banner .cookie-settings{background:var(--primary);color:var(--accent);border:1.2px solid var(--accent);}
.cookie-banner .cookie-settings:hover {background:var(--accent);color:#fff;}

/* COOKIE MODAL */
.cookie-modal {
  position:fixed;z-index:2151;left:0;right:0;top:0;bottom:0;
  background:rgba(20,28,39,0.84);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transform:translateY(0);transition:opacity 0.23s,transform 0.2s;
}
.cookie-modal.hide{opacity:0;pointer-events:none;transform:translateY(100%);}
.cookie-modal__dialog {
  background:var(--card-bg);
  color:var(--secondary);
  border-radius:var(--radius);
  max-width:390px;
  width:95vw;
  padding:32px 22px 24px 22px;
  box-shadow:0 8px 34px #182d4f66;
  display:flex;flex-direction:column;gap:22px;align-items:stretch;
}
.cookie-modal__dialog h2 {font-size:1.23em;font-family:var(--font-display);font-weight:900;color:var(--accent);}
.cookie-modal__categories{
  display:flex;flex-direction:column;gap:13px;margin-bottom:18px;}
.cookie-modal__category {
  display:flex;align-items:center;gap:13px;font-size:1.06em;}
.cookie-modal__category input[type=checkbox]{accent-color:var(--accent);width:19px;height:19px;}
.cookie-modal__category label{cursor:pointer;}
.cookie-modal__category input[disabled]{opacity:0.68;}
.cookie-modal__footer{display:flex;gap:16px;justify-content:flex-end;}
.cookie-modal__footer button{font-family:var(--font-display);font-weight:700;font-size:1em;padding:8px 18px;border-radius:6px;outline:none;cursor:pointer;}
.cookie-modal__footer .save{background:var(--accent);color:#fff;}
.cookie-modal__footer .save:hover{background:var(--success);}
.cookie-modal__footer .cancel{background:var(--primary);color:var(--accent);border:1.1px solid var(--accent);}
.cookie-modal__footer .cancel:hover{background:var(--accent);color:#fff;}

/* SPACING */
.section + .section{margin-top:0 !important;}
section{margin-bottom:60px;padding:40px 0;}

/* RESPONSIVE : MOBILE FIRST */
@media (max-width:1200px){.container{max-width:1000px;}}
@media (max-width:992px){
  .container{max-width:756px;}
  header .container, footer .container{flex-direction:column;align-items:flex-start;gap:20px;}
  .feature-grid, .service-list, .faq-list, .blog-list {justify-content:flex-start;}
}
@media (max-width:768px){
  .hero {padding:60px 0 28px 0;}
  .feature-grid, .service-list, .faq-list, .blog-list, .testimonial-slider, .content-grid {
    flex-direction:column;
    align-items:stretch;
    gap:20px;
  }
  .text-image-section {flex-direction:column;align-items:flex-start;gap:17px;}
  header .container {flex-direction:row;}
  .section, section {padding:26px 0;}
  .pricing-table th,.pricing-table td{padding:8px 7px;}
  .faq-list > div, .feature-grid > div, .blog-list article, .service-list > li{max-width:100%;}
}
@media (max-width:600px){
  .container{padding:0 7px;}
  header .container{padding:0 7px;}
  .hero .container{min-height:210px;}
  .hero h1{font-size:1.52rem;}
  h1{font-size:1.32rem;}
  h2{font-size:1.09rem;}
  .btn-primary{font-size:.97rem;padding:11px 18px;}
  .card, .feature-grid > div, .service-list > li{padding:11px 10px 10px 11px;}
  .testimonial-card{padding:13px 8px;}
  .pricing-table td, .pricing-table th{font-size:.97em;}
  .cookie-banner{flex-direction:column;align-items:flex-start;padding:16px 6px;gap:10px;font-size:0.97em;}
}

/* MOBILE NAVIGATION LOGIC */
@media (max-width: 1024px) {
  header nav {
    display:none;
  }
  .mobile-menu-toggle {
    display:block;
  }
}
@media (max-width: 450px) {
  .mobile-nav a {font-size:17px;padding:7px 3px;}
}
@media (min-width:1025px){
  .mobile-menu-toggle,
  .mobile-menu{display:none!important;}
}

/* MICRO-INTERACTIONS */
.btn-primary, .cookie-banner button, .cookie-modal__footer button {
  transition:box-shadow var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.card, .feature-grid > div, .service-list > li, .faq-list > div, .blog-list article, .testimonial-card {
  transition:box-shadow 0.23s,transform 0.18s,border-color var(--transition);
}
.card:hover, .feature-grid > div:hover, .service-list > li:hover, .faq-list > div:hover, .blog-list article:hover {
  transform:translateY(-2.5px) scale(1.015);
  box-shadow:0 6px 26px #182d4f1f;
}

/* UTILITIES */
.mt32 {margin-top:32px;}
.text-center{text-align:center;}

/* HIGH CONTRAST TEXT FOR TESTIMONIALS */
.testimonial-card,
.testimonial-card p,
.testimonial-card strong { color: #1d283f !important;}

/* Accessibility focus outlines */
a:focus, button:focus, .btn-primary:focus {
  outline:2.5px solid var(--accent);
  outline-offset:1.7px;
}

/* Hide visually but keep for screen readers */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;}

/* END */