:root{
  /* Palette (requested) */
  --blue: #6A94C8;           /* primary */
  --light-blue: #A2BCDD;     /* secondary */
  --bg: #2D3539;             /* page background */
  --text: #EEF6FB;           /* main page text on dark bg */
  --muted: #BFCBD6;          /* muted text on dark bg */

  /* Card/background tones */
  --card-bg: #ffffff;        /* general bright card fallback (not used for contact) */
  --service-card-bg: #2F3A3F; /* service cards (darker) */
  --contact-card-bg: #31373B; /* contact cards (slightly lighter than page bg) */
  --contact-form-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));

  --container-width: 1200px;
  --radius: 12px;
  --gap: 1.25rem;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container-width);margin:0 auto;padding:0 1rem}

/* Header (fixed + shrink on scroll) */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1100;
  background:transparent;
  transition:background-color .24s ease, box-shadow .24s ease, backdrop-filter .24s ease;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.05rem 0;
  transition:padding .18s ease;
}

/* Logo image styling */
/* Primary full logo image */
.logo-img{
  width:300px;
  height:150px;
  display:block;
  object-fit:contain;
  flex-shrink:0;
}

/* Text next to logo */
.logo-text{display:flex;flex-direction:column;line-height:1;margin-left:0.6rem}
.brand{font-size:1.02rem}
.brand strong{color:var(--light-blue)}
.fzco{font-size:0.78rem;color:var(--muted);margin-top:-3px}
.tagline{font-size:0.78rem;color:var(--muted);margin-top:2px}

/* Compact logo (hidden by default, shown when header shrinks) */
.logo-compact-img{
  display:none;
  width:36px;
  height:36px;
  object-fit:contain;
}

/* Nav */
.nav{display:flex;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid transparent;padding:0.4rem 0.8rem;border-radius:6px;font-size:1.05rem;color:var(--text)}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--text);text-decoration:none;font-weight:600;padding:0.35rem 0.6rem;border-radius:8px}
.nav-list a:hover, .nav-list a:focus{background:rgba(162,188,221,0.12);outline:none}

/* Header scrolled (shrink + background) */
.site-header.scrolled{
  background: rgba(45,53,57,0.96); /* dark translucent background to match page bg */
  box-shadow: 0 6px 22px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}
.header-inner.small{padding:0.38rem 0}

/* When header is small: hide full logo text, scale main logo, show compact image */
.header-inner.small .logo-text{opacity:0;transform:translateY(-4px);transition:opacity .16s ease, transform .16s ease}
.header-inner.small .logo-img{transform:scale(0.86);transition:transform .16s ease}
.header-inner.small .logo-compact-img{display:block;opacity:0.98}

/* HERO / SLIDER */
.hero-slider{position:relative;overflow:hidden;border-bottom:1px solid rgba(162,188,221,0.06)}
.slider{position:relative;padding:2.25rem 0}
.slides{position:relative;min-height:300px}
.slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:2rem;
  color:var(--text);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease;
  background: linear-gradient(120deg, rgba(106,148,200,0.12), rgba(162,188,221,0.10));
}
.slide.active{opacity:1;transform:none}
.slide-inner{max-width:780px}
.slide h1, .slide h2{margin:0 0 .6rem;font-weight:700;color:var(--text);line-height:1.05}
.lead{margin:0 0 1rem;color:var(--text); font-size:1.02rem}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer}
.btn-primary{
  background: linear-gradient(90deg, var(--blue), var(--light-blue));
  color:var(--text);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 20px rgba(106,148,200,0.12);
}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:transparent;color:var(--light-blue);border:1px solid rgba(162,188,221,0.14)}

/* Slider controls */
.slider-controls{display:flex;align-items:center;gap:0.75rem;position:relative;top:0;justify-content:flex-end;margin-top:0.6rem}
.slider-btn{background:var(--blue);color:var(--text);border:none;padding:0.45rem 0.65rem;border-radius:8px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.dots{display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;cursor:pointer}
.dot.active{background:var(--light-blue)}

/* Sections */
.section{padding:3rem 0}
.section h3{margin:0 0 1rem;color:var(--light-blue)}
.section-intro{margin:0 0 1.25rem;color:var(--muted)}

/* ABOUT grid */
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gap);align-items:start}
.about-text p{margin:0 0 1rem;line-height:1.65;color:var(--text)}
.company-card{
  background: linear-gradient(180deg, rgba(162,188,221,0.12), rgba(255,255,255,0.02));
  padding:1rem;border-radius:10px;border:1px solid rgba(162,188,221,0.08)
}
.company-card h4{margin-top:0}

/* SERVICES: card grid with media area */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1rem}
.service-card{background:var(--service-card-bg);border:1px solid rgba(162,188,221,0.06);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;box-shadow:0 8px 20px rgba(0,0,0,0.18)}
.service-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(0,0,0,0.28);border-color: rgba(106,148,200,0.28)}
.service-media{display:flex;align-items:center;justify-content:center;padding:1.15rem;background: linear-gradient(180deg, rgba(162,188,221,0.14), rgba(106,148,200,0.06));border-bottom:1px solid rgba(162,188,221,0.06)}
.service-media svg *{stroke: none;fill: var(--light-blue)}
.service-media svg circle, .service-media svg path{stroke: var(--blue);stroke-width:0.8;fill: var(--light-blue)}
.service-body{padding:1.05rem 1.1rem 1.25rem;color:var(--service-card-text, #E8F2F7)}
.service-body h4{margin:0 0 .5rem;color:var(--light-blue);font-size:1.02rem}
.service-body p{margin:0;color:var(--text);opacity:0.92;line-height:1.55;font-size:0.96rem}

/* CONTACT: updated colors for contrast and accessibility */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}

/* Contact info card: slightly lighter than page bg, clear border */
.contact-info{
  background: var(--contact-card-bg);
  border: 1px solid rgba(162,188,221,0.06);
  padding:1.1rem;
  border-radius:12px;
  color:var(--text);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}
.contact-info h4{
  margin-top:0;
  color:var(--light-blue);
  font-size:1.05rem;
}
.contact-info p, .contact-info a{
  color:var(--text);
  opacity:0.92;
  line-height:1.55;
}
.contact-info a{
  color:var(--light-blue);
  text-decoration:underline;
}
.contact-info strong{color:var(--light-blue)}

/* Contact form card: slightly translucent with clear field styling */
.contact-form{
  background: var(--contact-form-bg);
  padding:1.1rem;
  border-radius:12px;
  border:1px solid rgba(162,188,221,0.06);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Labels/field colors */
.contact-form label{display:block;margin:0 0 0.75rem}
.contact-form label span{
  display:block;
  font-size:0.9rem;
  margin-bottom:0.35rem;
  color:var(--light-blue); /* accent label color */
  font-weight:600;
}

/* Inputs: darker inputs with light text */
.contact-form input, .contact-form textarea{
  width:100%;
  padding:0.7rem;
  border-radius:10px;
  border:1px solid rgba(162,188,221,0.10);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  font-size:0.95rem;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(239,246,251,0.6);
}

/* Focus styles for accessibility */
.contact-form input:focus, .contact-form textarea:focus{
  border-color: rgba(106,148,200,0.9);
  box-shadow: 0 6px 18px rgba(106,148,200,0.12);
}

/* Button area */
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:0.5rem;flex-wrap:wrap}
.btn-primary{
  background: linear-gradient(90deg, var(--blue), var(--light-blue));
  color:var(--text);
  border: none;
  padding:0.65rem 1rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(106,148,200,0.14)}
.form-note{font-size:0.9rem;color:var(--muted);margin:0}

/* Form status */
.form-status{margin-top:0.75rem;font-weight:700;color:var(--light-blue)}
.form-status.error{color:#fca5a5}
.form-status.success{color:#86efac}

/* FOOTER */
.site-footer{border-top:1px solid rgba(162,188,221,0.06);padding:1.25rem 0;background:transparent}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-nav a{display:inline-block;margin-left:0.75rem;color:var(--light-blue);text-decoration:none}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

/* Utilities */
.container{padding-left:1rem;padding-right:1rem}
.hidden{display:none}

/* Responsive: tablets & phones */
@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .slides{min-height:260px}
}

@media (max-width:720px){
  /* header */
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute;right:12px;top:64px;background:var(--contact-card-bg);border:1px solid rgba(162,188,221,0.08);padding:0.75rem;border-radius:10px;flex-direction:column;display:none;min-width:220px;box-shadow:0 10px 30px rgba(0,0,0,0.32)}
  .nav-list.open{display:flex}
  .nav-list a{padding:0.5rem 0.75rem;color:var(--text)}
  .logo-text{display:none}
  .logo-compact-img{display:none}
  .header-inner.small .logo-compact-img{display:block}

  .services-grid{grid-template-columns:1fr}
  .slides{min-height:220px}
  .slide-inner{padding-right:0}
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
  .slide{transition:none}
}