/* ==== Base / variables ==== */
:root {
  --primary: #114e79;
  --secondary: #4ba074;
  --text: #082032;
  --bg: #f5f7fb;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ==== Header & Nav (hamburger) ==== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background:#fff; border-bottom:1px solid #e6eef5;
  padding-top: max(env(safe-area-inset-top, 0px), 0px);
}
.container { width:min(1280px, 92vw); margin-inline:auto; }

.header-content{
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; padding: 12px 0;
}
.logo img{ height:36px; display:block; }

.main-nav ul{ list-style:none; display:flex; gap: clamp(10px,3vw,28px); padding:0; margin:0; }
.main-nav a{ text-decoration:none; color:#0a2b45; font-weight:700; }

.nav-toggle{ position:absolute; left:-9999px; }
.hamburger{ display:none; cursor:pointer; padding:10px; margin-left:auto; border-radius:8px; }
.hamburger:focus-visible{ outline:2px solid #114e79; outline-offset:2px; }

@media (max-width: 760px){
  .hamburger{ display:block; }
  .main-nav{
    position: fixed;
    top: calc(56px + max(env(safe-area-inset-top, 0px), 0px));
    right:0; left:0;
    transform: translateY(-16px); opacity:0; pointer-events:none;
    background:#ffffff;
    border-bottom:1px solid #e6eef5;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition: opacity .18s ease, transform .18s ease;
  }
  .main-nav ul{ display:block; padding:12px min(4vw,20px); }
  .main-nav li{ margin:2px 0; }
  .main-nav a{ display:block; padding:12px 6px; border-radius:8px; color:#0a2b45; }
  .main-nav a:active, .main-nav a:focus-visible{ background:#f0f6fb; }
  .nav-toggle:checked ~ .main-nav{ transform: translateY(0); opacity:1; pointer-events:auto; }
}

/* ==== HERO (mobile-safe) ==== */
.hero { position:relative; isolation:isolate; min-height:60vh; }
.hero-image img{
  width:100%; height:min(70vh,560px); display:block; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:min(4vw,24px);
}
.hero-copy{
  background:rgba(17,78,121,0.58);
  color:#fff;
  padding:clamp(12px,3.5vw,28px);
  border-radius:12px;
  max-width:720px;
  width:min(92vw,720px);
  backdrop-filter:blur(2px);
}
.hero h1{
  font-size:clamp(28px,6.2vw,56px);
  line-height:1.1; margin:0 0 12px; color:#fff;
}
.hero p{
  font-size:clamp(16px,3.8vw,20px);
  line-height:1.45; margin:0 0 16px; overflow-wrap:anywhere; color:#fff;
}
.cta-button{
  display:inline-block; background:var(--secondary); color:#fff; text-decoration:none;
  padding:10px 18px; border-radius:10px; font-weight:700;
}
@media (max-width:560px){ .hero h1 br{ display:none; } }
@media (max-width:420px){
  .hero-image img{ height:56vh; }
  .hero-copy{ padding:12px; border-radius:10px; }
}

/* ==== Sections / layout ==== */
.section{ padding:clamp(36px,6vw,76px) 0; background:#fff; }
h2{ font-size:clamp(24px,4.8vw,36px); margin:0 0 12px; color:#0a2b45; }
h3{ font-size:clamp(18px,3.4vw,22px); margin:16px 0 6px; color:#174562; }
p { font-size:clamp(16px,3.6vw,18px); margin:0 0 12px; color:#213c52; }

.two-column{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap:clamp(18px,3.5vw,36px); align-items:center;
}
.two-column.reverse{ grid-template-columns: 1fr 1.05fr; }
.two-column.reverse .image-col{ order:-1; }
.image-col img{ width:100%; height:auto; display:block; border-radius:8px; }

@media (max-width:860px){
  .two-column, .two-column.reverse{ grid-template-columns:1fr; }
}

/* ==== Markets & Applications grid (4 → 3 → 2 → 1) ==== */
.apps-section .grid-three{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: clamp(14px, 3.2vw, 24px);
}
@media (max-width:1180px){
  .apps-section .grid-three{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width:920px){
  .apps-section .grid-three{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width:560px){
  .apps-section .grid-three{ grid-template-columns: 1fr; }
}

.app-card{
  background:#f7fbff; border:1px solid #e3eef6; border-radius:10px; padding:14px;
}
.app-card img{ width:100%; height:auto; display:block; border-radius:6px; margin-bottom:8px; }
.app-card h3{ margin:6px 0 4px; color:#0a2b45; }
.app-card p{ margin:0; }

/* ==== Contact & Footer ==== */
.contact-container { text-align:center; }
.contact-form { max-width:560px; margin:16px auto 0; text-align:left; }
.form-group { margin-bottom:12px; }
label{ display:block; margin-bottom:6px; font-weight:600; }
input, textarea{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid #d6e5f1; background:#fff; color:#0e2c43;
}
.site-footer{ background:#f6fbff; border-top:1px solid #e8f1f8; padding:22px 0; }
.site-footer p{ margin:4px 0; text-align:center; color:#40617b; }