:root{
  --bg:#0b1020; --bg-soft:#121832; --card:#ffffff; --text:#0c1222; --text-soft:#4a5568;
  --brand:#3b82f6; --brand-2:#22c55e; --ring:rgba(59,130,246,.25);
  --container:1200px; --radius:14px; --shadow:0 10px 30px rgba(2,8,23,.12);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text); background:#f6f8fc; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.8); border-bottom:1px solid #eef2f7}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:#0b1220}
.logo-badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#7c3aed); color:#fff; font-weight:900}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{color:#0f172a; font-weight:600}
.hamburger{display:none; background:none; border:0; font-size:26px; line-height:1}
@media (max-width: 860px){
  nav ul{display:none}
  nav ul.open{display:flex; position:absolute; top:64px; left:0; right:0; background:#fff; padding:16px 20px; border-bottom:1px solid #eef2f7; flex-direction:column}
  .hamburger{display:block}
}

/* Hero */
.hero{background: radial-gradient(1200px 400px at 50% -50%, #c7d2fe 0%, transparent 60%), linear-gradient(0deg, #eaf1ff 0%, #f6f8fc 100%);
  border-bottom:1px solid #e8eef6}
.hero-wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:center; padding:56px 0}
.hero h1{font-size:clamp(28px,4.2vw,46px); line-height:1.1; margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,18px); color:#334155; margin:0 0 24px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:700;
  background:var(--brand); color:#fff; box-shadow:var(--shadow); transition:.2s transform ease, .2s box-shadow ease, .2s background ease}
.btn:hover{transform:translateY(-1px)} .btn.alt{background:#fff; color:#0b1220; border:1px solid #e5eaf2}
.hero-ill{width:100%; max-width:520px; margin-inline:auto}
@media (max-width: 980px){ .hero-wrap{grid-template-columns:1fr} }

/* Sections */
section{padding:42px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px}
.section-head h2{margin:0; font-size:clamp(22px,3.4vw,28px)}
.section-head a.more{font-weight:700}

/* Grids */
.grid{display:grid; gap:16px}
.grid.tools{grid-template-columns:repeat(5,1fr)}
.grid.articles{grid-template-columns:repeat(3,1fr)}
@media (max-width: 1100px){ .grid.tools{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 860px){ .grid.tools{grid-template-columns:repeat(3,1fr)} .grid.articles{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 600px){ .grid.tools{grid-template-columns:repeat(2,1fr)} .grid.articles{grid-template-columns:1fr} }

/* Cards */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eef2f7;
  padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(2,8,23,.16)}
.tool-icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#fff;
  background: linear-gradient(135deg, #3b82f6 0%, #22c55e 100%)}
.tool-title{font-weight:800; font-size:18px; margin:2px 0 6px}
.tool-desc{color:var(--text-soft); font-size:14px; margin:0}
.arrow{margin-top:auto; font-weight:700}
.article-thumb{width:100%; height:160px; border-radius:10px; object-fit:cover; background:#e8eef6}
.article-title{font-weight:800; font-size:18px; margin:4px 0}
.article-meta{font-size:13px; color:#64748b}

/* Promo strip */
.promo{background:linear-gradient(90deg,#111827 0%, #0b1020 100%); color:#dbeafe; border-radius:var(--radius); padding:18px 20px;
  display:flex; gap:14px; align-items:center; justify-content:space-between}
.promo a{color:#93c5fd; font-weight:700}

/* SEO blurb + FAQ */
.seo{color:#374151; background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
details{border:1px solid #e8eef6; border-radius:12px; background:#fff; padding:12px 14px}
details+details{margin-top:10px} summary{cursor:pointer; font-weight:700}
details[open]{box-shadow:0 10px 24px rgba(2,8,23,.06)}

/* Footer */
footer{margin-top:40px; padding:28px 0; background:#0b1020; color:#cbd5e1; border-top:2px solid #0a0f1f}
.foot-grid{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; font-weight:700}
.counter{background:#111827; color:#93c5fd; padding:6px 10px; border-radius:10px; border:1px solid #1f2937}
.foot-copy{margin-top:12px; font-size:13px; color:#94a3b8}

/* Accessibility */
.btn:focus, a:focus, button:focus, summary:focus { outline: 3px solid var(--ring); outline-offset: 2px }