:root{
  --bg: #F7FBFF;
  --surface: #FFFFFF;
  --surface-2: #F0F7FF;
  --text: #0F172A;
  --muted: #334155;
  --brand: #B8D7EB;
  --brand-2: #7FB8DE;
  --primary: #1C4F82;
  --primary-2: #173B5F;
  --border: #D7E7F5;

  --shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --shadow-sm: 0 8px 18px rgba(15, 23, 42, .07);

  --radius: 18px;
  --radius-sm: 14px;

  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--brand), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, var(--brand-2), transparent 55%),
    linear-gradient(180deg, var(--bg), #FFFFFF 65%);
  color: var(--text);
  line-height: 1.65;
}

img{max-width:100%;height:auto}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline: 3px solid rgba(28,79,130,.25);
  outline-offset: 2px;
  border-radius: 10px;
}

.container{width:min(var(--container), 92%); margin:0 auto}
.section{padding:64px 0}
.section.compact{padding:40px 0}

.card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad{padding:26px}

h1{
  margin:14px 0 10px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h2{
  font-size: clamp(22px, 2.2vw, 30px);
  margin:0 0 12px;
  letter-spacing: -0.01em;
}
h3{
  margin:0 0 8px;
  font-size: 1.12rem;
}
p{margin:0 0 12px; text-align: justify}
.lead{
  font-size: 1.05rem;
  color: var(--muted);
  text-align: justify;
}
small, .note{color:var(--muted)}
hr{
  border:none;
  border-top:1px solid var(--border);
  margin:18px 0;
}

ul,ol{margin:10px 0 12px 20px; padding:0}
li{margin:6px 0; text-align: justify}

/* Header / Nav */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(247, 251, 255, .74);
  border-bottom: 1px solid var(--border);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brand img{width:140px; height:auto}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius: 12px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .1px;
}
.nav a:hover{
  background: rgba(184, 215, 235, .35);
  text-decoration:none;
}
.nav a.active{
  background: rgba(184, 215, 235, .45);
  border: 1px solid rgba(215,231,245,.9);
}

.dropdown{position:relative}
.dropdown > a{gap:8px}
.caret{
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-top:-2px;
}
.dropdown-menu{
  position:absolute;
  top: 44px;
  right: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-sm);
  padding: 8px;
  display:none;
}
.dropdown-menu a{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--text);
}
.dropdown-menu a:hover{
  background: rgba(240,247,255,.9);
  text-decoration:none;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}

/* Buttons */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(28,79,130,.25);
  text-decoration:none !important;
}
.cta:hover{filter: brightness(1.03)}

.btn{
  cursor:pointer;
  font-weight:800;
  border-radius: 14px;
  padding:12px 14px;
  border:1px solid var(--border);
  background: rgba(184,215,235,.45);
}
.btn:hover{filter: brightness(1.03)}
.btn.primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  border-color: rgba(255,255,255,.18);
}

.menu-btn{
  display:none;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding:10px 12px;
  font-weight:800;
}

/* Hero */
.hero{padding:72px 0 44px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:28px;
  align-items:stretch;
}

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(184,215,235,.35);
  border: 1px solid rgba(184,215,235,.7);
  font-weight: 800;
  color: var(--primary-2);
  letter-spacing: .2px;
}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.pill{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding:8px 12px;
  font-weight: 800;
  color: var(--primary-2);
  font-size: .92rem;
}

/* Grids */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

/* Tags */
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  font-weight: 800;
  color: var(--primary-2);
  font-size: .85rem;
}

/* Forms */
.form{display:grid; gap:12px}
.input{
  width:100%;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  font-size: 1rem;
}
textarea.input{min-height:120px; resize:vertical}

/* Product: spec tables / callouts / FAQ */
.spec-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
}
.spec-table th, .spec-table td{
  padding:12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.spec-table th{
  text-align:left;
  color: var(--primary-2);
  background: rgba(240,247,255,.92);
  font-weight: 900;
  width: 34%;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td{border-bottom:none}

.callout{
  background: rgba(184,215,235,.25);
  border: 1px solid rgba(184,215,235,.7);
  border-radius: var(--radius);
  padding: 18px;
}
.callout p{margin-bottom:0}

.faq details{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.86);
  margin-bottom: 10px;
}
.faq summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--primary-2);
}
.faq details p{margin-top:10px}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  background: rgba(255,255,255,.72);
}
.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer a{color:var(--primary-2)}
.footer .mini{max-width:520px}

/* Mobile */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}

  .nav{display:none}
  .menu-btn{display:inline-flex}

  .nav.mobile-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    position:absolute;
    top:68px;
    right:4%;
    left:4%;
    background: rgba(255,255,255,.94);
    border:1px solid var(--border);
    border-radius: 18px;
    padding:10px;
    box-shadow: var(--shadow);
  }

  .dropdown-menu{
    position: static;
    display:block;
    box-shadow:none;
    border:none;
    padding:0;
    min-width:unset;
    background: transparent;
  }
  .dropdown-menu a{background: rgba(240,247,255,.78)}
}