:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#eef4ff;
  --text:#0f172a;
  --muted:#516074;
  --line:#dbe4f0;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --accent:#06b6d4;
  --dark:#0b1220;
  --ok:#0f766e;
  --warn:#7c3aed;
  --radius:22px;
  --shadow:0 14px 40px rgba(15,23,42,.08);
  --shadow-sm:0 8px 20px rgba(15,23,42,.06);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at top right, rgba(6,182,212,.08), transparent 30%),
    var(--bg);
  color:var(--text);
  line-height:1.68;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-2)}
.container{width:min(100% - 2rem,var(--max));margin:0 auto}
.topbar{background:var(--dark);color:#dbeafe;font-size:.94rem}
.topbar-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 0}
.topbar-links{display:flex;gap:1rem;flex-wrap:wrap}
.topbar-links a{color:#dbeafe}
.header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(219,228,240,.8)
}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:78px}
.brand{font-size:1.2rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.brand span{color:var(--primary)}
.nav-links{display:flex;align-items:center;gap:.95rem;flex-wrap:wrap}
.nav-links a{font-weight:700;color:var(--text)}
.nav-links a.active{color:var(--primary)}
.mobile-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.75rem 1rem;font-weight:700}
.btn,.button-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.88rem 1.1rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--text);font-weight:800;transition:.2s ease;
  box-shadow:var(--shadow-sm)
}
.btn:hover,.button-link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#fff}
.badge,.pill{
  display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.45rem .75rem;
  background:#eaf2ff;border:1px solid #c9d7ff;color:#1643b3;font-size:.85rem;font-weight:800
}
.hero{padding:4.7rem 0 3.4rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem;align-items:stretch}
.hero-copy h1,h1{font-size:clamp(2.35rem,4.5vw,4.3rem);line-height:1.03;letter-spacing:-.04em;margin:.65rem 0 1rem}
h2{font-size:clamp(1.75rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1rem}
h3{font-size:1.18rem;line-height:1.2;margin:0 0 .7rem}
.lead{font-size:1.08rem;color:var(--muted);max-width:66ch}
.hero-panel,.card,.article-card,.directory-item,.sidebar-card,.article-body,.feature-panel,.ad-slot,.stats-band,.author-box,.faq-item,.newsletter-panel,.form-card{
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero-panel{padding:1.3rem}
.hero-visual{
  min-height:100%;
  background:
    linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.9)),
    #1e3a8a;
  color:#fff;padding:1.4rem;position:relative;overflow:hidden
}
.hero-visual::before,.hero-visual::after{
  content:"";position:absolute;border-radius:999px;filter:blur(6px);opacity:.24
}
.hero-visual::before{width:230px;height:230px;background:#fff;top:-80px;right:-40px}
.hero-visual::after{width:180px;height:180px;background:#22d3ee;bottom:-55px;left:-30px}
.hero-visual > *{position:relative;z-index:1}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 0}
.highlight-list{padding-left:1.05rem;margin:1rem 0 0}
.highlight-list li{margin:.5rem 0}
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.mini-stat{padding:1rem;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}
.mini-stat strong{display:block;font-size:1.45rem}
.section{padding:3.7rem 0}
.section-header{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.kicker{font-size:.82rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.grid-4,.grid-3,.grid-2,.blog-grid,.category-grid,.footer-grid,.stats-grid,.two-col{display:grid;gap:1.2rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3,.blog-grid,.category-grid{grid-template-columns:repeat(3,1fr)}
.grid-2,.two-col{grid-template-columns:minmax(0,2fr) minmax(280px,.9fr)}
.card,.sidebar-card,.article-body,.form-card{padding:1.25rem}
.card p,.muted,.meta,.small,.article-body li,.article-body p{color:var(--muted)}
.card ul,.article-body ul,.article-body ol{padding-left:1.1rem}
.stat-card{
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--line);border-radius:20px;padding:1.1rem;
  box-shadow:var(--shadow-sm)
}
.stat-card strong{display:block;font-size:1.7rem}
.blog-grid .article-card,.category-grid .card{overflow:hidden}
.thumb{
  height:190px;border-bottom:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.14)),
    linear-gradient(180deg,#f8fbff,#eef4ff)
}
.thumb::after{
  content:attr(data-label);
  display:grid;place-items:center;height:100%;
  font-size:1.05rem;font-weight:800;color:#1643b3;letter-spacing:-.02em
}
.article-content{padding:1.2rem}
.directory-list{display:grid;gap:1rem}
.directory-item{padding:1.2rem}
.tag-row,.chip-row,.social-proof{display:flex;gap:.55rem;flex-wrap:wrap}
.tag{
  background:#f2f6fc;border:1px solid var(--line);border-radius:999px;
  padding:.38rem .7rem;color:#334155;font-size:.85rem;font-weight:700
}
.breadcrumbs{font-size:.95rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumbs a{color:var(--muted)}
.ad-slot{
  padding:1rem;background:
    repeating-linear-gradient(135deg,#f8fbff,#f8fbff 10px,#eef4ff 10px,#eef4ff 20px);
  text-align:center
}
.ad-slot .label{display:inline-block;margin-bottom:.45rem;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.ad-box{min-height:100px;display:grid;place-items:center;border:2px dashed #c3d4ea;border-radius:16px;color:#64748b;font-weight:700}
.inline-ad{margin:1.2rem 0}
.check-list{padding-left:1.1rem}
.notice{
  background:#ecfeff;color:#155e75;border:1px solid #a5f3fc;
  padding:.9rem 1rem;border-radius:16px
}
input,select,textarea{
  width:100%;padding:.95rem 1rem;border-radius:16px;border:1px solid var(--line);
  background:#fff;color:var(--text);font:inherit
}
label{display:block;font-weight:700;margin-bottom:.45rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
textarea{min-height:160px;resize:vertical}
button[type="submit"]{cursor:pointer}
.footer{background:var(--dark);color:#e2e8f0;padding:3rem 0;margin-top:3rem}
.footer a{color:#cbd5e1}
.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}
.footer-brand{color:#fff;display:inline-block;margin-bottom:.8rem}
.page-hero{
  padding:2.7rem 0 1rem
}
.page-hero .card{padding:1.6rem;background:linear-gradient(180deg,#fff,#f8fbff)}
.sidebar-stack{display:grid;gap:1rem}
.toc{padding-left:1rem}
.faq-list{display:grid;gap:1rem}
.faq-item summary{cursor:pointer;font-weight:800;color:var(--text)}
.faq-item{padding:1rem}
.post-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.search-wrap{display:flex;gap:.75rem;flex-wrap:wrap}
.filter-input{max-width:420px}
.newsletter-panel{padding:1.2rem;background:linear-gradient(135deg,#eff6ff,#ecfeff)}
.table-lite{width:100%;border-collapse:collapse}
.table-lite th,.table-lite td{padding:.85rem;border-bottom:1px solid var(--line);text-align:left}
.author-box{padding:1.1rem}
@media (max-width: 980px){
  .hero-grid,.grid-2,.two-col,.footer-grid,.grid-4,.grid-3,.blog-grid,.category-grid,.form-grid{grid-template-columns:1fr}
  .mobile-toggle{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:78px;left:1rem;right:1rem;background:#fff;border:1px solid var(--line);
    border-radius:22px;padding:1rem;box-shadow:var(--shadow)
  }
  .nav-links.open{display:grid}
  .topbar-wrap{justify-content:center;text-align:center}
}


.article-figure{margin:1.25rem 0 1.4rem;overflow:hidden}
.article-figure img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.article-figure figcaption{margin-top:.6rem;color:var(--muted);font-size:.95rem}
.directory-actions,.resource-links{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.85rem}
.directory-link,.external-link{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border:1px solid var(--line);border-radius:999px;background:#f8fbff;color:#1643b3;font-weight:700;font-size:.92rem}
.directory-link:hover,.external-link:hover{background:#eff6ff;transform:translateY(-1px)}
.directory-note{margin-top:.55rem;font-size:.95rem;color:var(--muted)}
.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0 1.2rem}
.resource-item{padding:1rem 1rem 1.05rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:var(--shadow-sm)}
.resource-item h3{margin-bottom:.45rem}
.resource-item p{margin:.35rem 0 0;color:var(--muted)}
.quick-jump{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.1rem}
.quick-jump a{display:inline-flex;align-items:center;padding:.5rem .8rem;border-radius:999px;background:#eef4ff;border:1px solid #d3e2ff;color:#1643b3;font-weight:700;font-size:.92rem}
.thumb.has-image{background-size:cover;background-position:center;position:relative}
.thumb.has-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.4))}
.thumb.has-image::after{position:absolute;inset:auto 1rem 1rem 1rem;height:auto;display:block;color:#fff;text-align:left;font-size:1.05rem;text-shadow:0 2px 8px rgba(0,0,0,.35)}
@media (max-width: 980px){.resource-grid{grid-template-columns:1fr}}

.footer-grid-extended{grid-template-columns:1.2fr 1fr 1fr 1fr}
.footer-tagline,.footer-helper-copy{max-width:48ch}
.keyword-cloud{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}
.keyword-cloud a{display:inline-flex;padding:.45rem .75rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:#1643b3;font-weight:700;font-size:.9rem;box-shadow:var(--shadow-sm)}
.keyword-cloud a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.data-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.2rem}
.data-point{padding:1rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--shadow-sm)}
.data-point strong{display:block;font-size:1.35rem;line-height:1.05}
.stat-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);margin:1rem 0 1.2rem}
.stat-table{width:100%;border-collapse:collapse;min-width:720px}
.stat-table th,.stat-table td{padding:.95rem 1rem;border-bottom:1px solid var(--line);text-align:left;color:var(--muted)}
.stat-table th{color:var(--text);background:#f8fbff}
.callout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 1.2rem}
.callout-card{padding:1rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--shadow-sm)}
.callout-card h3{margin-bottom:.45rem}
.link-list{display:grid;gap:.7rem;padding-left:1.1rem}
.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.city-card{padding:1rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.city-card h3{margin-bottom:.4rem}
.editor-note{font-size:.92rem;color:var(--muted);background:#f8fbff;border:1px solid var(--line);padding:1rem;border-radius:18px}
@media (max-width:980px){.data-strip,.callout-grid,.city-grid,.footer-grid-extended{grid-template-columns:1fr}}