/* ---------------------------
   Base styles & variables
---------------------------- */
:root{
  --brand-ink:#0B1F2A;
  --brand-accent:#1769ff;
  --brand-accent-2:#00A2FF;
  --text:#13232f;
  --muted:#5b6b78;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --card:#ffffff;
  --card-border:#e3e9ef;
  --focus:#ffab00;
  --radius:14px;
  --container:1160px;
  --shadow:0 8px 28px rgba(13, 35, 58, .07);
  --shadow-sm:0 2px 10px rgba(13, 35, 58, .08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  font-size:clamp(15px, .95vw + 9px, 18px);
}

img{max-width:100%;display:block}
a{color:var(--brand-accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}

.section{padding: min(9vh, 96px) 0}
.section.small{padding: 48px 0}
.grid{display:grid; gap:28px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
.grid-4{grid-template-columns: repeat(4, 1fr)}
.card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card .body{padding:22px}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(23,105,255,.12), rgba(0,162,255,.12));
  color:var(--brand-ink); font-weight:600; font-size:.85em; letter-spacing:.2px;
}

h1,h2,h3{line-height:1.2; color:var(--brand-ink)}
h1{font-size: clamp(32px, 3.2vw + 18px, 56px); margin:0 0 12px}
h2{font-size: clamp(26px, 2.1vw + 14px, 38px); margin:0 0 12px}
h3{font-size: clamp(20px, 1.2vw + 12px, 24px); margin:0 0 8px}

.lead{color:var(--muted); font-size: clamp(16px, 1.1vw + 12px, 20px)}

.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-accent-2));
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow);
}
.btn:hover{filter:brightness(1.03); text-decoration:none}
.btn.ghost{background:transparent; color:var(--brand-ink); border-color:var(--card-border)}
.btn.small{padding:8px 12px; border-radius:10px; font-weight:600}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.kpi{padding:20px; border:1px solid var(--card-border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm)}
.kpi strong{display:block; font-size: clamp(28px, 3vw + 10px, 44px)}
.kpi span{color:var(--muted)}

.hero{
  padding: clamp(80px, 11vh, 160px) 0; position:relative; overflow:hidden;
  background: linear-gradient(180deg, #e6eef7, #fff);
}
.hero .bg{
  position:absolute; inset:-10% -5% auto -5%; height:60%; z-index:0;
  background: radial-gradient(1000px 280px at 20% 0%, rgba(23,105,255,.18) 0, transparent 60%),
              radial-gradient(800px 240px at 80% 10%, rgba(0,162,255,.18) 0, transparent 60%);
  filter:saturate(1.2);
}
.hero .content{position:relative; z-index:1}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}

.header{
  position:sticky; top:0; z-index:50; background:#ffffffd6; backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid rgba(12,26,39,.06);
}
.header .inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav{display:flex; align-items:center; gap:20px}
.nav a{color:var(--brand-ink); font-weight:600}
.nav .btn{margin-left:8px}

.nav-toggle{
  display:none; background:none; border:none; width:44px; height:44px; border-radius:10px;
}
.nav-toggle:focus{outline:2px dashed var(--focus); outline-offset:2px}

.mobile-nav{
  position:fixed; inset:64px 0 auto 0; background:#fff; border-top:1px solid var(--card-border);
  transform:translateY(-110%); transition:transform .35s ease; z-index:45;
  padding:14px 20px; box-shadow:var(--shadow);
}
.mobile-nav.open{transform:none}
.mobile-nav a{display:block; padding:14px 4px; color:var(--brand-ink); font-weight:600}

.logos{
  display:grid; grid-template-columns: repeat(6,1fr); gap:20px; align-items:center; opacity:.8;
}
.logo-txt{border:1px dashed var(--card-border); border-radius:10px; padding:16px; text-align:center; font-weight:700}

.split{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.cover{border-radius:16px; overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--shadow)}

.slider{position:relative; overflow:hidden; border-radius:var(--radius)}
.slider-track{display:flex; transition:transform .5s ease; will-change:transform}
.slide{min-width:100%; background:#fff}
.slider .controls{display:flex; gap:10px; position:absolute; right:12px; bottom:12px}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--card-border); background:#fff; border-radius:10px}

.footer{
  border-top:1px solid var(--card-border); background:var(--bg-soft);
}
.footer .cols{display:grid; grid-template-columns:2fr repeat(3,1fr); gap:20px}
.footer a{color:var(--text)}

.faq details{
  border:1px solid var(--card-border); border-radius:12px; padding:14px 16px; background:#fff;
}
.faq summary{cursor:pointer; font-weight:700}
.faq details + details{margin-top:12px}

/* Utilities */
.hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}

/* Responsive */
@media (max-width: 1100px){
  .grid-4{grid-template-columns: repeat(2,1fr)}
  .kpis{grid-template-columns: repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .nav{display:none}
  .nav-toggle{display:block}
  .logos{grid-template-columns: repeat(3,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .slider-track{transition:none}
}