:root{
  --satab-blue: #083868;
  --satab-yellow:#F8B810;
  --white:#ffffff;

  --ink: rgba(8,56,104,.92);
  --muted: rgba(8,56,104,.72);
  --line: rgba(8,56,104,.18);
  --soft: rgba(8,56,104,.06);

  --radius: 16px;
  --shadow: 0 12px 30px rgba(8,56,104,.18);
  --shadow2: 0 10px 22px rgba(8,56,104,.14);
  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height:1.5;
}
a{ color: inherit; }
.container{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }

/* Header */
.topbar{ background: var(--white); border-bottom: 1px solid var(--line); }
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0; gap:16px;
}
.brand{ display:flex; align-items:center; gap:14px; padding: 6px 0; min-height: 56px; }
.brand img{ height: 52px; width:auto; display:block; }

.lang{
  display:flex; align-items:center; gap:10px;
  font-weight:700; color: rgba(8,56,104,.68); white-space:nowrap;
}
.lang a{
  text-decoration:none; padding: 6px 10px;
  border-radius: 999px; border:1px solid transparent;
}
.lang a:hover{ border-color: var(--line); background: var(--soft); }
.lang .active{ color: var(--satab-blue); border-color: var(--line); background: var(--soft); }

.nav{
  background: var(--satab-blue);
  position: sticky; top:0; z-index: 20;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 0;
}
.menu{
  display:flex; gap: 2px; margin:0; padding:0;
  list-style:none; overflow:auto;
}
.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 14px; text-decoration:none;
  color: rgba(255,255,255,.92); font-weight:700;
  border-bottom: 3px solid transparent; white-space:nowrap;
}
.menu a:hover{ background: rgba(255,255,255,.08); }
.menu a.active{ border-bottom-color: var(--satab-yellow); color: var(--white); }

/* Mobile burger */
.burger{
  display:none;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--white);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:800;
  cursor:pointer;
}
.mobile-panel{
  display:none;
  background: var(--satab-blue);
  border-top: 1px solid rgba(255,255,255,.12);
}
.mobile-panel a{
  display:block;
  padding: 14px 16px;
  text-decoration:none;
  color: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-weight:800;
}
.mobile-panel a.active{ border-left: 5px solid var(--satab-yellow); }

/* Hero */
.hero{
  background: linear-gradient(180deg, var(--soft), var(--white));
  border-bottom: 1px solid var(--line);
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  padding: 26px 0 22px;
  align-items:center;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(26px, 3vw, 44px);
  line-height:1.15;
  letter-spacing: -0.02em;
  color: var(--satab-blue);
}
.hero p{
  margin:0 0 16px;
  color: var(--muted);
  max-width: 62ch;
  font-weight:600;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight:900;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--satab-yellow);
  color: rgba(8,56,104,.96);
  border-color: rgba(8,56,104,.10);
}
.btn-primary:hover{ background: rgba(248,184,16,.92); }
.btn-secondary{
  background: var(--white);
  border-color: var(--line);
  color: var(--satab-blue);
}
.btn-secondary:hover{ background: var(--soft); }

.hero-media{
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--soft);
  aspect-ratio: 16/11;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Sections / Cards */
section{ padding: 28px 0; }
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 16px; margin-bottom: 16px;
}
.section-title h2{
  margin:0; font-size: 22px; color: var(--satab-blue); letter-spacing: -.01em;
}
.section-title .hint{ color: var(--muted); font-weight:700; font-size: 13px; }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.card.soft{ background: linear-gradient(180deg, var(--soft), var(--white)); }
.card h3{ margin:0 0 8px; font-size: 16px; color: var(--satab-blue); }
.meta{ margin:0; color: var(--muted); font-weight:700; font-size: 14px; }

.list{ margin: 10px 0 0; padding-left: 18px; color: var(--ink); font-weight:600; }
.list li{ margin: 6px 0; }

.kpi{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.kpi .row{
  display:flex; justify-content:space-between; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-weight:900;
  color: rgba(8,56,104,.90);
}
.kpi .row span:last-child{ color: var(--satab-blue); }

/* Grid spans */
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-5{ grid-column: span 5; }
.col-4{ grid-column: span 4; }
.col-8{ grid-column: span 8; }
.col-12{ grid-column: span 12; }

/* Services */
.services{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.service{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--white);
  font-weight:900;
  color: rgba(8,56,104,.90);
  box-shadow: 0 10px 18px rgba(8,56,104,.10);
}
.service small{ display:block; font-weight:800; color: var(--muted); margin-top: 6px; }

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.shot{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  box-shadow: var(--shadow2);
  min-height: 180px;
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot.wide{ grid-column: span 7; }
.shot.narrow{ grid-column: span 5; }

/* Simple blocks */
.prose{
  margin: 0;
  color: rgba(8,56,104,.86);
  font-weight:650;
}
.hr{
  height:1px; background: var(--line); border:0; margin: 14px 0;
}

/* Footer */
footer{
  background: var(--satab-blue);
  color: rgba(255,255,255,.92);
  margin-top: 10px;
}
.footer-inner{
  padding: 18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  font-weight:700;
}
.footer-inner a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.footer-inner a:hover{ border-bottom-color: var(--satab-yellow); }

/* Responsive */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ aspect-ratio: 16/10; }
  .services{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .brand img{ height: 42px; }
  .burger{ display:inline-flex; }
  .menu{ display:none; }
  .nav-inner{ padding: 10px 0; }
  .grid{ gap: 12px; }
  .col-7,.col-5,.col-6,.col-4,.col-8{ grid-column: span 12; }
  .gallery .shot.wide, .gallery .shot.narrow{ grid-column: span 12; }
}