:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --text:#0b1b3a;
  --muted:#667085;
  --line:#e9edf5;
  --brand:#2563eb;
  --radius:16px;
  --shadow:0 24px 40px rgba(15,23,42,.07);
  --shadow-sm:0 10px 20px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--text); background:var(--bg); font:16px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:0 24px}

/* Header */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; min-height:60px;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{height:48px; width:auto; border-radius:8px}
.brand-title{font-weight:800; font-size:1rem; white-space:nowrap}

/* Main navigation */
.mainnav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.mainnav a{
  display:inline-block; padding:8px 10px; border-radius:8px;
  color:var(--text); font-weight:700; white-space:nowrap;
}
.mainnav a:hover{background:#eef2ff}

/* Mobile menu */
.menu-toggle{
  display:none; background:none; border:0; font-size:1.6rem; line-height:1;
  cursor:pointer; padding:6px 8px; border-radius:8px;
}
.menu-toggle:focus-visible{outline:2px solid var(--brand)}

/* Mobile dropdown */
@media (max-width:900px){
  .mainnav{
    display:none; position:absolute; top:100%; right:16px; left:auto;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:8px; width:min(88vw, 280px);
  }
  .mainnav a{padding:10px 12px; border-radius:8px}
  .mainnav.show{display:flex}
  .menu-toggle{display:block}
  .brand-title{display:none}
}

/* Hero */
.hero{background:var(--surface)}
.hero .container{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; padding:40px 24px;
}
@media (max-width:880px){ .hero .container{grid-template-columns:1fr; padding:28px 24px} }
.hero h1{margin:0 0 10px; font-size:clamp(1.8rem, 1rem + 3.2vw, 3rem); line-height:1.15}
.hero p{margin:0 0 18px; color:var(--muted)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:800; border:1px solid transparent}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{filter:brightness(.96)}
.btn-secondary{background:#fff; color:var(--text); border-color:var(--line)}
.btn-secondary:hover{background:#f8fafc}
.hero-visual{
  align-self:center; justify-self:center; background:#f4f6fb;
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); padding:18px;
}

/* Sections */
section{scroll-margin-top:84px}
.section{padding:40px 0}
.section-title{font-size:clamp(1.2rem, .9rem + 1vw, 1.6rem); margin:0 0 16px}
.grid{display:grid; gap:16px}
@media (min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.row{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:880px){.row{grid-template-columns:1.1fr .9fr}}
.with-icons{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.card h2{margin:0 0 8px; font-size:1.1rem}
.list{list-style:none; margin:0; padding:0}
.list li{padding:10px 0; border-top:1px dashed var(--line)}
.list li:first-child{border-top:none}
.muted{color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--line); color:#667085}
.footer-inner{padding:20px 0; text-align:center; font-size:.95rem}


@media (max-width: 768px) {
  .logo {
    display: block;
    margin: 0 auto;
  }
}