/* Color-communication inspired by brochure: navy + royal blue + bright red */
:root{
  --navy:#0b2a6a;
  --royal:#2155cd;
  --sky:#e9f2ff;
  --red:#e31e24;
  --ink:#0a1330;
  --muted:#5b6787;
  --card:#ffffff;
  --border:#e5eaf5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--ink)}

.container{max-width:1180px;margin:0 auto;padding:0 16px}

.topbar{
  background:var(--red);
  color:#fff;
  text-align:center;
  font-weight:700;
  letter-spacing:.02em;
  padding:8px 10px;
  font-size:14px;
}

.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,var(--royal),#4f8bff);color:#fff}
.brand-text h1{margin:0;font-size:24px;letter-spacing:.01em}
.brand-text span{color:var(--red)}
.tag{margin:2px 0 0 0;font-size:12px;color:var(--muted)}

.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);font-weight:700;padding:8px 10px;border-radius:8px}
.nav a:hover{background:var(--sky)}
.btn{background:var(--royal);color:#fff;border:none;border-radius:10px;padding:10px 16px;text-decoration:none;display:inline-block;font-weight:800;box-shadow:0 4px 18px rgba(33,85,205,.25)}
.btn:hover{filter:brightness(.95)}
.btn.small{padding:8px 12px}

.slider{position:relative;height:56vh;min-height:380px;max-height:640px;overflow:hidden;background:var(--sky)}
.slides{position:absolute;inset:0;display:grid}
.slide{background-position:center;background-size:cover;opacity:0;transition:opacity .9s ease-in-out}
.slide.active{opacity:1}
.slider-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,106,.55),rgba(11,42,106,.35),rgba(11,42,106,.1),transparent);display:flex;align-items:center}
.slider-overlay .container{color:#fff}
.slider-overlay h2{font-size:36px;margin:0 0 10px 0;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.slider-overlay p{max-width:760px;margin:0 0 14px 0;text-shadow:0 1px 8px rgba(0,0,0,.35)}

.section{padding:56px 0}
.section.alt{background:var(--sky)}
.bar{position:relative;padding-left:14px}
.bar::before{content:"";position:absolute;left:0;top:.35em;width:6px;height:1.25em;background:linear-gradient(180deg,var(--red),#ff6b6f);border-radius:3px}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
@media (max-width:980px){.two-col{grid-template-columns:1fr}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 1px 0 rgba(12,26,51,.04)}
.card.gradient{background:linear-gradient(180deg,#ffffff, #f9fbff)}
.card.muted{background:#fbfcff;color:#3b4354;border-style:dashed}

.lead{font-size:18px}
.small{font-size:13px}
.muted{color:var(--muted)}

.ticks{list-style:none;padding:0;margin:0}
.ticks li{margin:10px 0;padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--royal),#4f8bff)}
.ticks.tall li{margin:12px 0}

.bullets{padding-left:18px}
.bullets li{margin:8px 0}

.callout{border:2px solid var(--border);border-radius:12px;padding:14px 16px;margin:10px 0;background:#fff}
.callout.red{border-color:#ffd3d4;background:linear-gradient(180deg,#fff,#fff5f5)}
.callout.blue{border-color:#d5e3ff;background:linear-gradient(180deg,#fff,#f3f7ff)}

.contact{list-style:none;padding:0;margin:0}
.contact li{margin:8px 0}

.site-footer{border-top:1px solid var(--border);padding:24px 0;background:#fff;color:var(--muted);text-align:center}


/* ---------- Responsive System ---------- */

/* Tablet and below */
@media (max-width: 1024px){
  .slider{height:52vh;min-height:320px}
  .slider-overlay h2{font-size:30px}
}

/* Phablet / Large mobile */
@media (max-width: 820px){
  .header-inner{gap:10px}
  .menu-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:42px; height:42px;
    border-radius:10px; border:1px solid var(--border);
    background:#fff; font-size:20px; font-weight:800; color:var(--navy);
  }
  .nav{display:none; position:absolute; top:100%; right:0; left:0;
       background:#fff; border-top:1px solid var(--border); padding:8px 16px; gap:4px}
  .nav.open{display:flex; flex-direction:column}
  .nav a{padding:10px 12px; border-radius:8px}
  .btn.small{align-self:flex-start}

  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .slider{height:46vh;min-height:280px}
  .slider-overlay p{max-width:600px}
}

/* Mobile */
@media (max-width: 640px){
  .brand-text h1{font-size:20px}
  .slider{height:44vh;min-height:260px}
  .slider-overlay h2{font-size:24px}
  .slider-overlay p{font-size:14px}
  .grid{grid-template-columns:1fr}
  .section{padding:44px 0}
}

/* Small Mobile */
@media (max-width: 480px){
  .topbar{font-size:12px;padding:6px 8px}
  .mark{width:42px;height:42px}
  .btn{padding:9px 14px}
  .container{padding:0 12px}
  .bar::before{top:.4em;height:1.1em}
}