:root{
  --if-blue:#4A90E2;
  --if-blue-600:#2F6FBF;
  --if-sky:#E9F3FF;
  --if-mint:#5FB49C;
  --if-gold:#D7B775;
  --if-text:#1F2D3D;
  --if-muted:#5C6B7A;
  --if-white:#FFFFFF;
  --if-border:#E3ECF5;
  --radius:14px;
  --shadow:0 8px 30px rgba(41,112,198,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans"}
body{color:var(--if-text);background:var(--if-white);line-height:1.6}
a{color:var(--if-blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header/Nav */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--if-border)}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;color:var(--if-blue-600)}
.brand img{height:34px}
.nav-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;transition:all .2s ease}
.btn.primary{background:var(--if-blue);color:#fff;border:1px solid var(--if-blue);box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--if-blue-600);border-color:var(--if-blue-600)}
.btn.ghost{background:transparent;color:var(--if-blue);border:1px solid var(--if-blue)}
.btn.ghost:hover{background:var(--if-sky)}
.btn img.avatar{width:18px;height:18px;border-radius:50%;border:1px solid var(--if-border);background:#fff}

/* Hero + Reel */
.hero{background:linear-gradient(180deg,var(--if-sky),#fff);padding:24px 0 0}
.hero .container{padding-bottom:24px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#E8FFF7;border:1px solid #C8F1E5;color:#067C62;font-weight:700}
h1{font-size:clamp(28px,4.2vw,44px);margin:.4em 0 .2em}
p.lead{font-size:clamp(16px,2.3vw,18px);color:var(--if-muted)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.kpi{padding:14px;border-radius:var(--radius);background:#FDF7E9;border:1px solid #F5E8C7;text-align:center}
.kpi small{color:#8C7131}
.kpi b{display:block;font-size:22px;color:#6C551A}

/* Reel (carousel) */
.reel{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--if-border);box-shadow:var(--shadow);background:#fff}
.reel .aspect{width:100%;aspect-ratio:16/9}
.reel-track{display:flex;width:100%;height:100%;transition:transform .6s ease}
.reel-slide{min-width:100%;height:100%;position:relative;background:#fff}
.reel-slide img,.reel-slide video{width:100%;height:100%;object-fit:cover;display:block;border:0}
.reel-arrow{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.85);padding:8px 12px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer}
.reel-arrow:hover{background:#fff}
.reel-arrow.prev{left:10px}
.reel-arrow.next{right:10px}
.reel-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center}
.reel-dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.2);cursor:pointer}
.reel-dot.active{background:var(--if-blue);border-color:var(--if-blue)}

/* Sections, cards, grids */
section{padding:40px 0}
h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 12px;color:#18324B}
.card{background:#fff;border:1px solid var(--if-border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.list{margin:0;padding-left:18px;color:var(--if-text)}
.list li{margin:.35em 0}
.unit-logo{height:24px;vertical-align:middle;margin-right:8px}

/* Footer */
footer{padding:36px 0;border-top:1px solid var(--if-border);background:#FAFCFF;color:var(--if-muted)}
.banner{background:linear-gradient(90deg,#F7FBFF,#ECF4FF);border:1px solid var(--if-border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.banner h3{margin:0}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reel .aspect{aspect-ratio:4/3}
}
@media (max-width: 560px){
  .reel .aspect{aspect-ratio:1/1}
}