:root{
  --bg:#f3f6fb;
  --bg2:#e9eef8;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#2563eb;
  --accent2:#7c3aed;
  --accent-soft:#eff6ff;
  --max:920px;
  --radius:22px;
  --shadow:0 14px 40px rgba(15, 23, 42, 0.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(124,58,237,.10), transparent 25%),
    linear-gradient(180deg, var(--bg2) 0px, var(--bg) 220px, #f8fafc 100%);
  line-height:1.75;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

header{
  padding:30px 16px 10px;
}

.topbar{
  max-width:var(--max);
  margin:0 auto;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  border-radius:28px;
  overflow:hidden;
}

.hero-banner{
width:100%;
max-width:1500px;
height:300px;
object-fit:cover;
display:block;
margin:auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.topbar-inner{
  padding:28px 28px 24px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
}

.brand{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.4px;
  margin-bottom:14px;
}

.site-title{
  margin:0;
  font-size:2.2rem;
  line-height:1.15;
}

.site-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  font-size:1.04rem;
  max-width:680px;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.nav a{
  display:inline-block;
  padding:10px 14px;
  background:rgba(255,255,255,.85);
  border:1px solid #e6ebf3;
  border-radius:14px;
  color:#111827;
  font-weight:700;
  transition:.2s ease;
}

.nav a:hover{
  transform:translateY(-1px);
  background:#fff;
  text-decoration:none;
  border-color:#c7d7f7;
}

.container{
  max-width:var(--max);
  margin:18px auto 40px;
  padding:0 16px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px;
  border:1px solid #eef2f7;
}

h1{
  margin:0 0 18px;
  font-size:2rem;
  line-height:1.2;
}

h2{
  margin:34px 0 12px;
  font-size:1.3rem;
  line-height:1.3;
  position:relative;
  padding-left:16px;
}

h2::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:6px;
  height:calc(100% - 8px);
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
}

p{
  margin:0 0 16px;
}

.intro{
  font-size:1.08rem;
  color:#374151;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 24px;
}

.badge{
  display:inline-block;
  padding:7px 13px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
  background:var(--accent-soft);
  color:#1d4ed8;
  border:1px solid #dbeafe;
}

.article-list{
  list-style:none;
  padding:0;
  margin:26px 0 0;
  display:grid;
  gap:14px;
}

.article-list li{
  margin:0;
}

.article-list a{
  display:block;
  background:linear-gradient(180deg, #ffffff, #f9fbff);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  color:var(--text);
  font-weight:700;
  box-shadow:0 4px 16px rgba(15,23,42,.04);
  transition:.22s ease;
}

.article-list a:hover{
  transform:translateY(-2px);
  text-decoration:none;
  border-color:#bfd4ff;
  box-shadow:0 10px 22px rgba(37,99,235,.10);
}

.note{
  margin:24px 0;
  padding:16px 18px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e5edf7;
  color:#475569;
}

.grid-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:24px;
}

.cat-card{
  display:block;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:0 4px 16px rgba(15,23,42,.04);
  transition:.22s ease;
  color:var(--text);
}

.cat-card:hover{
  transform:translateY(-2px);
  border-color:#bfd4ff;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(37,99,235,.10);
}

.cat-card strong{
  display:block;
  font-size:1.08rem;
  margin-bottom:6px;
}

.cat-card span{
  color:var(--muted);
  font-size:.95rem;
}

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:30px 0;
}

footer{
  max-width:var(--max);
  margin:0 auto 50px;
  padding:0 16px;
}

.footer-card{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.95);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px 22px;
  color:var(--muted);
  font-size:.95rem;
}

small{
  color:var(--muted);
}

@media (max-width:700px){
  header{padding:18px 10px 8px}
  .container, footer{padding:0 10px}
  .topbar-inner, .card, .footer-card{padding:22px}
  .site-title{font-size:1.7rem}
  h1{font-size:1.6rem}
  h2{font-size:1.14rem}
  .nav a{font-size:.95rem;padding:9px 12px}
}