:root{
  --zenit-navy:#0f1e3a;
  --zenit-blue:#2f6db8;
  --zenit-red:#e14b58;
  --zenit-ice:#f6f8fb;
  --zenit-mid:#5a6b8c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:white;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#1a1a1a;
  background:var(--zenit-ice);
  line-height:1.55;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{
  position:sticky;top:0;z-index:50;
  background:white;
  border-bottom:1px solid #eaeef6;
  backdrop-filter:saturate(180%) blur(5px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav .brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto;border-radius:8px}
.brand .title{font-weight:700;letter-spacing:0.5px;color:var(--zenit-navy)}
.nav a{
  color:var(--zenit-navy);
  text-decoration:none;
  margin-left:18px;
  font-weight:600;
}
.nav a:hover{color:var(--zenit-blue)}

.hero{
  background:linear-gradient(120deg, rgba(47,109,184,.07), rgba(225,75,88,.09)), white;
  padding:64px 0 40px;
}
.hero h1{
  font-size:clamp(28px, 4vw, 44px);
  color:var(--zenit-navy);
  margin:0 0 14px 0;
}
.hero p{font-size:18px;max-width:800px;color:#33425b;margin:0 0 24px}
.cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--zenit-blue), var(--zenit-red));
  color:white;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 20px rgba(47,109,184,.25);
}
.cta:hover{opacity:.95}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:22px;
}
.section{padding:52px 0}
.section h2{
  font-size:28px;color:var(--zenit-navy);
  margin:0 0 18px 0;
}
.card{
  grid-column:span 6;
  background:white;
  border:1px solid #e9edf5;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,30,58,.06);
}
.card img{width:100%;display:block;aspect-ratio: 16 / 10;object-fit:cover}
.card .content{padding:16px 16px 18px}
.card .content h3{margin:4px 0 8px 0;color:var(--zenit-navy)}
.badge{
  display:inline-block;background:#eef4ff;color:var(--zenit-blue);
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px
}

.features{grid-template-columns:repeat(4,1fr)}
.feature{
  background:white;border:1px solid #e9edf5;border-radius:16px;padding:18px;text-align:center;
  box-shadow:0 8px 24px rgba(15,30,58,.05);
}
.feature .icon{font-size:22px;margin-bottom:8px}
.feature h4{margin:8px 0 6px;color:var(--zenit-navy)}
.feature p{margin:0;color:#41506b;font-size:14px}

.contact-strip{
  background:linear-gradient(120deg, rgba(47,109,184,.07), rgba(225,75,88,.08));
  border:1px dashed #dfe7f4;border-radius:18px;padding:18px;
}
.contact-strip a{color:var(--zenit-blue);font-weight:700;text-decoration:none}
.contact-strip a:hover{text-decoration:underline}

.footer{
  background:white;border-top:1px solid #eaeef6;margin-top:36px
}
.footer-inner{padding:22px 0;color:#58698b;font-size:14px; display:flex; justify-content:center; align-items:center;}
.footer-inner > div { text-align:center; }
.footer a{color:var(--zenit-blue);text-decoration:none}
.footer a:hover{text-decoration:underline}
  
.hero-image{
  border-radius:18px;overflow:hidden;border:1px solid #e9edf5;
  box-shadow:0 12px 36px rgba(15,30,58,.08);
}
.hero-image img{width:100%;height:100%;display:block;object-fit:cover}

@media (max-width:900px){
  .card{grid-column:span 12}
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .nav a{margin-left:12px}
  .features{grid-template-columns:1fr}
}


/* Mobile header + hero fixes (2025-11-02) */
@media (min-width: 769px){
  .nav-toggle { display:none; }
  .header nav { display:flex !important; position:static; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; }
  .header nav a { margin-left:16px; }
}
@media (max-width: 768px){
  .header .nav { display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; }
  .header .brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
  .header .brand .title { letter-spacing:.28em; font-size:18px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #eaeef6; border-radius:10px; background:#fff; cursor:pointer; }
  .header nav { display:none; position:absolute; right:8px; top:56px; background:#fff; border:1px solid #eaeef6; border-radius:12px; padding:10px; box-shadow:0 10px 30px rgba(15,30,58,.12); }
  .header nav.open { display:flex; flex-direction:column; gap:8px; min-width: 180px; }
  .header nav a { padding:8px 10px; margin:0; display:block; }
}
/* Hero mobile: stack text and image, avoid squeezed columns */
@media (max-width: 768px){
  .hero .grid { display:flex; flex-direction:column; gap:16px; }
  .hero .grid > div { grid-column:auto !important; }
  .hero h1 { font-size:28px; line-height:1.2; }
  .hero p { font-size:16px; }
  .hero .hero-image { order:2; }
  .hero .hero-image img { width:100%; height:auto; }
}