/* =====================================
   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,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; vertical-align:baseline; font-size:100%; font:inherit; box-sizing:border-box; } html { box-sizing:border-box; } *, *::before, *::after { box-sizing:inherit; }
body { line-height:1.5; background:#10151b; color:#F4FAFB; font-family:'Roboto', Arial, Helvetica, sans-serif; min-height:100vh; }
ul,ol { padding-left:1.5em; }li { margin-: 0.5em 0; }
a { text-decoration:none; color:#2196AF; transition:color 0.2s; }
a:focus-visible { outline:2px solid #2196AF; outline-offset:2px; }
img { max-width:100%; display:block; }
button { font-family:'Montserrat', 'Roboto', Arial, Helvetica, sans-serif; border:none; background:none; cursor:pointer; }
:focus { outline:2px solid #2196AF; outline-offset:2px; }

/* =====================================
   CUSTOM PROPERTIES (fallbacks supplied)
====================================== */
:root {
  --primary: #003D60;
  --secondary: #2196AF;
  --accent: #F4FAFB;
  --bg-main: #10151b;
  --bg-card: #171d25;
  --metallic: #a8b3ba;
  --danger: #cd2e3a;
  --success: #3aaf79;

  --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

/* =====================================
   LAYOUT CONTAINERS & SPACING
====================================== */
.container {
  width: 100%;
  max-width:1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.section {
  margin-bottom:60px;
  padding:40px 20px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap:24px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap:24px;
}
.card {
  background: var(--bg-card);
  border: 1px solid #232a33;
  border-radius:12px;
  box-shadow: 0 2px 12px rgba(34,44,54,0.12), 0 1.5px 0.5px 0px #19202a inset;
  margin-bottom:20px;
  position:relative;
  display:flex;
  flex-direction: column;
  padding: 28px 24px;
  transition: box-shadow 0.25s, border 0.2s;
}
.card:hover, .card:focus-within {
  box-shadow: 0 8px 24px #003d6044, 0 1.5px 0.5px 0px #193040 inset;
  border-color: var(--secondary);
}
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card img {
  margin-bottom:16px;
  filter: grayscale(20%) brightness(0.95) contrast(1.05) drop-shadow(0 2px 4px #0003);
}
.feature-grid, .benefits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.feature-grid > div, .benefits-grid > div {
  flex: 1 1 200px;
  min-width: 240px;
  background: var(--bg-card);
  border-radius:10px;
  border: 1px solid #232a33;
  box-shadow: 0 1.5px 6px rgba(40,56,80,.08);
  padding:26px 20px;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap:15px;
  transition: box-shadow 0.25s, border-color 0.2s;
  margin-bottom: 20px;
}
.feature-grid > div:hover, .benefits-grid > div:hover {
  box-shadow: 0 6px 20px #003d6055;
  border-color: var(--secondary);
}

.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 {
  background: var(--accent);
  color: #222d32;
  border-radius:10px;
  border:1.5px solid #d3e1ea;
  box-shadow: 0 2px 12px #003d6022;
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  margin-bottom:20px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 18px;
  font-style:italic;
  line-height:1.5;
  margin:0;
}
.testimonial-author {
  font-family: var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--secondary);
}

.feature-item {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.cta {
  padding:40px 20px;
  border-radius:14px;
  margin-bottom:60px;
  box-shadow: 0 6px 28px #003d6044;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content:center;
}
.accent-bg {
  background: linear-gradient(97deg, #0c1823 55%, #283946 100%);
  border:1.5px solid #1e2d3c;
}

.text-section {
  display:flex;
  flex-direction:column;
  gap:22px;
}

ul, ol {
  margin-bottom:16px;
}
ul > li, ol > li {
  margin-bottom:10px;
  line-height:1.5;
  list-style-position:inside
}
ul > li img, ol > li img {
  vertical-align:middle;
  margin-right:6px;
  height:22px;
}
h1, h2, h3, h4 {
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--accent);
  margin-bottom:14px;
}

h1 {
  font-size: 2.5rem;
  color: var(--secondary);
}
h2 {
  font-size: 2rem;
  color: var(--accent);
}
h3 {
  font-size: 1.25rem;
  color: var(--secondary);
}
h4 {
  font-size: 1.1rem;
  color: var(--primary);
}

p, li, blockquote {
  font-size: 16px;
  font-family: var(--font-body);
  color: #F4FAFB;
}
strong {
  font-weight:700;
  letter-spacing:0.01em;
}

/* =====================================
   HEADER & NAVIGATION
====================================== */
header {
  background: #161c24;
  border-bottom:1.5px solid #232a33;
  padding:0;
  z-index:300;
  position:sticky; top:0; left:0; width:100%;
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
}
header a img {
  height:40px;
}
.main-nav {
  display:flex;
  gap: 18px;
  align-items:center;
  font-family:var(--font-display);
}
.main-nav a {
  color: #bbc1c8;
  font-weight: 600;
  font-size:1rem;
  letter-spacing:0.02em;
  padding:6px 8px;
  border-radius:3px;
  transition: color 0.18s, background 0.18s;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--accent);
  background: #003D60;
}
.button.primary {
  background: var(--secondary);
  color: #fff;
  font-family:var(--font-display);
  font-weight:bold;
  font-size:1rem;
  border-radius:6px;
  box-shadow: 0 2px 8px #003d6033;
  padding:12px 26px;
  margin-left:18px;
  border: 1.5px solid var(--secondary);
  transition: background 0.22s, transform 0.18s, box-shadow 0.18s, border 0.18s;
  cursor:pointer;
  display:inline-block;
  min-width:fit-content;
}
.button.primary:hover, .button.primary:focus {
  background: #1E5973;
  border-color: var(--primary);
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 8px 22px #003d6066;
}
.button {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Hamburger Mobile Button */
.mobile-menu-toggle {
  display:none;
  background: #232a33;
  color: #F4FAFB;
  font-size:2rem;
  border-radius:6px;
  padding:6px 14px 6px 10px;
  margin-left:12px;
  box-shadow:0 2px 10px #003d6033;
  border:1px solid #232a33;
  z-index:1101;
  transition:background 0.2s;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
  background: #283946;
  color:var(--secondary);
}

/* Mobile Menu */
.mobile-menu {
  position:fixed;
  top:0; left:0; height:100vh; width:100vw;
  background:#10151be5;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  transform: translateX(-100vw);
  opacity:0;
  pointer-events:none;
  transition:transform 0.4s cubic-bezier(.46,.83,.24,1), opacity 0.32s;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity:1;
  pointer-events:all;
}
.mobile-menu-close {
  background: none;
  font-size:2.2rem;
  color: var(--accent);
  align-self:flex-end;
  margin: 24px 28px 10px 0;
  cursor:pointer;
  border:none;
  z-index:1220;
  transition:color 0.19s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus { color: var(--danger); }

.mobile-nav {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 36px;
  margin-top:0;
}
.mobile-nav a {
  color: #F4FAFB;
  font-family: var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:0.03em;
  padding:18px 0 10px;
  border-bottom:1px solid #232a33;
  width: 100%;
  transition:color 0.17s, background 0.18s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: var(--secondary);
  background: #232a33;
}

/* Show/hide nav for mobile/desktop */
@media (max-width: 990px) {
  .main-nav, .button.primary { display:none; }
  .mobile-menu-toggle { display:block; }
}
@media (min-width: 991px) {
  .mobile-menu { display:none !important; }
}

/* =====================================
   HERO SECTION
====================================== */
.hero {
  background: linear-gradient(110deg, #183147 70%, #132233 98%);
  min-height:320px;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom:60px;
}
.hero .container { align-items:center; min-height:340px; }
.hero .content-wrapper {
  align-items:flex-start;
  gap: 26px;
}
.hero h1 {
  color: var(--accent);
  font-size:2.3rem;
  font-family: var(--font-display);
  font-weight:900;
  text-shadow: 0 1.5px 8px #003d6022;
  margin-bottom:18px;
}
.hero p {
  color: var(--metallic);
  font-size: 1.12rem;
  max-width:650px;
  line-height:1.6;
  margin-bottom:24px;
}

/* =====================================
   FOOTER
====================================== */
footer {
  background: #131c25;
  border-top:1.5px solid #232a33;
  color:#F4FAFB;
  margin-top:60px;
  padding: 0 0 12px 0;
}
footer .container {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
  padding: 36px 20px 10px 20px;
}
.footer-brand {
  display:flex;
  align-items: flex-start;
  gap:16px;
}
.footer-brand img {
  height:38px;
  filter: grayscale(12%) brightness(1.03) drop-shadow(0 2px 4px #003d6022);
}
.footer-brand .address {
  color: #bbc1c8;
  font-size:0.95rem;
  font-family: var(--font-body);
  margin-left:6px;
}
.footer-nav {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-nav a {
  color:#7ba6c0;
  font-size:0.98rem;
  font-family: var(--font-display);
  letter-spacing:0.02em;
  margin-bottom:10px;
  transition:color .18s;
}
.footer-nav a:hover { color:var(--secondary); }

/* =====================================
   BUTTONS & LINKS
====================================== */
.button, .button.primary, .button.secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-family: var(--font-display);
  font-weight:700;
  text-transform: none;
  font-size:1rem;
  letter-spacing:0.02em;
  transition: all 0.18s;
  cursor:pointer;
  padding:12px 26px;
}
.button.primary { background: var(--secondary); color: #fff; border:1.5px solid var(--secondary); }
.button.primary:hover, .button.primary:focus { background: #1E5973; border-color: var(--primary); box-shadow:0 6px 18px #003d6022; }
.button.secondary { background: none; color:var(--secondary); border:1.5px solid var(--secondary); }
.button.secondary:hover, .button.secondary:focus { background: #1E5973; color:#fff; }
.button[aria-pressed="true"] { background:var(--success); color:#fff; border-color: var(--success); }

/* =====================================
   CARDS, SECTIONS, AND FOCUS STYLES
====================================== */
section {
  width:100%;
  margin-bottom:60px;
  padding:40px 0;
  background: none;
}
section.cta {
  padding:40px 0;
  margin-bottom:64px;
  background: var(--primary);
}

.card, .feature-grid > div, .benefits-grid > div {
  min-width:220px;
  box-shadow: 0 3px 13px #003d6022;
  border:1.5px solid #232a33;
  margin-bottom:20px;
  border-radius:10px;
}

.card:hover, .feature-grid > div:hover, .benefits-grid > div:hover {
  box-shadow: 0 6px 22px #003d6055, 0 1.5px 0.5px 0px #193040 inset;
  border-color: #2196af;
  z-index:3;
}

.feature-grid img, .benefits-grid img {
  width:34px;
  height:34px;
  margin-bottom:4px;
  filter: grayscale(10%) brightness(0.98) drop-shadow(0 1.5px 0.6px #003d6040);
}

@media (max-width: 768px) {
  .section { margin-bottom: 36px; padding: 26px 10px; }
  .content-wrapper, .container, .footer .container { gap:14px; }
  .footer .container, footer .container { flex-direction:column; gap:16px; padding:26px 12px 14px 12px; }
  .footer-brand { flex-direction:column; gap:10px; align-items:flex-start; }
  .main-nav, .button.primary { display:none; }
  section, .cta { padding:22px 0 !important; }
  .feature-grid, .benefits-grid, .card-container, .content-grid { flex-direction:column; gap:18px; }
  .testimonial-card { flex-direction:column; align-items:flex-start; gap:12px; padding:16px; }
  .hero .container { padding: 0 10px; min-height: 220px; }
  .footer-nav { flex-direction:column; gap:5px; }
  .mobile-menu-toggle { margin-left:0; }
}

@media (max-width: 550px) {
  h1 { font-size:1.5rem; }
  h2 { font-size:1.18rem; }
  .container, .section, .content-wrapper, .footer .container { padding: 0 8px; }
}

.text-image-section {
  align-items: center;
  gap:30px;
  flex-wrap:wrap;
}
@media (max-width: 768px) {
  .text-image-section { flex-direction:column; align-items:flex-start; gap:18px; }
}

/* =====================================
   COOKIE CONSENT BANNER
====================================== */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0;
  width:100vw;
  background:#232a33ee;
  color:#F4FAFB;
  z-index:2400;
  padding:18px 18px 18px 22px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  box-shadow:0 -2px 22px #003d6047;
  transition:transform 0.32s cubic-bezier(.55,.19,.33,1), opacity 0.21s;
  gap:22px;
  border-top:2.5px solid var(--secondary);
  animation:cookieBannerIn 0.65s cubic-bezier(.22,1.35,.81,1) both;
}
@keyframes cookieBannerIn { from { transform:translateY(120%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.cookie-banner.hidden { display:none !important; }
.cookie-banner .cookie-btns {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
}
.cookie-banner .button {
  font-size:1rem;
  padding:10px 22px;
  border-radius:20px;
  background:var(--secondary);
  color:#fff;
  border:1px solid var(--secondary);
  transition:background 0.18s, color 0.16s, border 0.16s;
  margin:0 0 0 10px;
  box-shadow:0 3px 13px #003d6022;
}
.cookie-banner .button.secondary { background:none; color:var(--secondary); border-color:var(--secondary); }
.cookie-banner .button.secondary:hover { background:#003d60; color:#fff; }

.cookie-banner .cookie-settings {
  font-size: .97rem;
  background:none;
  color:#a8b3ba;
  text-decoration: underline;
  border:none;
  cursor:pointer;
  padding:0 16px;
  margin-right:10px;
}
.cookie-banner .cookie-settings:hover { color:#fff; }

@media (max-width: 600px) {
  .cookie-banner { flex-direction:column; gap:8px; align-items:flex-start; padding:18px 10px 25px 12px; }
  .cookie-banner .cookie-btns { flex-wrap:wrap; gap:8px; }
}

/* Cookie Modal Popup */
.cookie-modal-overlay {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:#10151bcc;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2500;
  opacity:0; pointer-events:none;
  transition:opacity 0.33s;
}
.cookie-modal-overlay.open { opacity:1; pointer-events:all; }
.cookie-modal {
  background:var(--bg-card);
  color:var(--accent);
  border-radius:12px;
  box-shadow:0 8px 28px #003d6044;
  max-width:410px;
  width:96vw;
  padding:34px 26px 18px 26px;
  border:1.5px solid #283946;
  display:flex;
  flex-direction:column;
  gap:18px;
  animation:cookieModalIn 0.6s cubic-bezier(.7,.01,.25,1) both;
}
@keyframes cookieModalIn { from { transform:translateY(-40px) scale(0.96); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.cookie-modal h2 {
  font-size:1.38rem;
  font-family:var(--font-display);
  color:var(--secondary);
  margin-bottom:8px;
  font-weight:800;
}
.cookie-section {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}
.cookie-section input[type=checkbox] {
  accent-color:var(--secondary);
  width:19px; height:19px;
  margin:0 10px 0 0;
  border-radius:4px;
}
.cookie-section label {
  font-size:1.05rem;
  color:var(--metallic);
}
.cookie-modal .button {
  margin-top:14px;
  padding:11px 20px;
}
.cookie-modal .close-cookie-modal {
  position:absolute;
  top:18px; right:18px;
  background:none;
  color:var(--danger);
  font-size:1.4rem;
  border:none;
  cursor:pointer;
  padding:2px 3px;
}

@media (max-width:520px) {
  .cookie-modal { padding:18px 10px; max-width:95vw; }
}

/* =====================================
   INDUSTRIAL MODERN AESTHETIC EXTRAS
====================================== */
h1, h2, h3, h4 {
  text-transform: uppercase;
  letter-spacing:0.04em;
  font-family: var(--font-display), Arial, Helvetica, sans-serif;
}
body, p, li, .button, .footer-nav a {
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
}
section, .card, .testimonial-card, .cta {
  box-shadow: 0 2.5px 18px #003d6022;
}

hr {
  border:0; border-top:1.5px solid #232a33; margin:20px 0 24px 0;
}

/* Industrial metallic accent lines (urban feel) */
.card, .feature-grid > div, .benefits-grid > div {
  background: linear-gradient(100deg, #181e26 89%, #353c42 100%);
  border:1.5px solid #293b48;
  box-shadow: 0 2px 16px #003D6055, 0 2px 1px #232a3322 inset;
}
.feature-grid > div::before, .benefits-grid > div::before {
  content:'';
  display:block;
  width:28px;
  height:3px;
  background:linear-gradient(90deg, #a8b3ba 60%, #2196AF 100%);
  border-radius:2px;
  margin-bottom:8px;
}

/* Subtle card hover effect */
.card:hover, .testimonial-card:hover, .feature-grid > div:hover, .benefits-grid > div:hover {
  box-shadow: 0 10px 32px #003d6066, 0 2.5px 1.5px #293b4855 inset;
  border-color: var(--secondary);
}

/* ================================
   MISC/ACCESSIBILITY/HIERARCHY
================================ */
.skip-link { position:absolute; top:-45px; left:0; background:var(--secondary); color:#fff; padding:8px 16px; z-index:8000; transition:top 0.2s; }
.skip-link:focus { top:6px; }

::-webkit-scrollbar { width:11px; background:#232a33; }
::-webkit-scrollbar-thumb { background: #003D60; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#2196af; }

/* ICONS - slight filter for industrial metallic feel */
img[src*="icon-"] {
  filter: grayscale(12%) brightness(1.06) contrast(1.05) drop-shadow(0 1.5px 2.5px #2196AF33);
}

/* =================================
    INTERACTIVE ELEMENTS: TRANSITIONS
================================== */
.button, .main-nav a, .footer-nav a, .mobile-menu-toggle, .card, .feature-grid > div, .benefits-grid > div, .testimonial-card {
  transition: all 0.18s cubic-bezier(.6,.2,.25,1);
}

/* =====================================
   ENHANCEMENTS
====================================== */
::selection { background: #2196af; color: #fff; }

/* Overlap prevention for cards/sections */
.card, .feature-grid > div, .benefits-grid > div, .testimonial-card, .section, .cta {
  margin-bottom: 20px;
}
.content-wrapper, .feature-grid, .benefits-grid, .card-container, .content-grid, .footer-nav, .footer-brand, .mobile-nav {
  gap: 20px;
}

/* =====================================
   PRINT FRIENDLY
====================================== */
@media print {
  * { background: #fff !important; color: #003D60 !important; }
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display:none !important; }
  .container { width:100%; max-width:100vw; padding:0; }
}