:root {
  --bg:#fff;
  --surface:#f6f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#5b6b83;
  --line:#e6e8ef;
  --accent:#18a999;
  --accent-2:#0f766e;
  --ok:#16a34a;
  --warn:#b45309;
  --radius:16px;
  --shadow:0 6px 24px rgba(15,23,42,.08);
  --maxw:1120px;
  --space:clamp(16px,1.8vw,22px);
}

* { box-sizing:border-box }

html,body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

img { max-width:100%; height:auto; border-radius:12px }

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

.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space) }

.site-header {
  position:sticky;
  top:0;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  z-index:50;
}

.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--space);
}

.logo { font-weight:700; font-size:1.1rem; letter-spacing:.2px }
.logo strong {
  background:linear-gradient(90deg,var(--accent),#10b981);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.menu { display:flex; gap:22px; align-items:center }
.menu a { color:#1f2a44; font-weight:500 }

.btn {
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  box-shadow:var(--shadow);
}
.btn:hover { background:var(--accent-2); text-decoration:none }

/* Hero */
.hero {
  background:
    radial-gradient(1000px 300px at 20% 0%, #e8fffb 0%, transparent 60%),
    radial-gradient(800px 300px at 80% 0%, #eef2ff 0%, transparent 60%);
  border-bottom:1px solid var(--line);
}
.hero-inner {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
  padding:64px 0;
}
.hero h1 { font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.15; margin:0 0 12px }
.hero p { color:var(--muted); margin:0 0 22px }

/* Pills / Badges */
.pill {
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:#ecfeff;
  border:1px solid #cffafe;
  color:#0e7490;
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
}
.badge, .filter {
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#0f172a;
  font-weight:600;
  font-size:.8rem;
  padding:6px 10px;
  border-radius:999px;
}

/* Grids */
.grid { display:grid; gap:22px }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .grid.cols-3{grid-template-columns:1fr} }

.section { padding:44px 0 }
.section h2 { font-size:1.4rem; margin:0 0 10px }
.muted { color:var(--muted); margin:0 0 20px }

/* Cards */
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card h3 { margin:10px 0 6px; font-size:1.05rem }
.meta { font-size:.85rem; color:var(--muted); margin-bottom:16px }

.cat-badges { display:flex; flex-wrap:wrap; gap:10px }

/* Tiles */
.category-tiles {
  display:grid;
  gap:18px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1000px){.category-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.category-tiles{grid-template-columns:repeat(2,1fr)}}
.tile {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff, #f9fafb);
}
.tile span { font-weight:700 }

/* Newsletter */
.newsletter {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:center;
}
@media (max-width:900px){.newsletter{grid-template-columns:1fr}}
.nl-box {
  background:linear-gradient(180deg,#ecfeff,#fff);
  border:1px solid #cffafe;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.nl-form { display:flex; gap:10px }
.nl-form input {
  flex:1;
  padding:12px 14px;
  border:1px solid #94a3b8;
  border-radius:12px;
  font:inherit;
}
.nl-form button {
  padding:12px 16px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
}

/* Footer */
.site-footer {
  margin-top:44px;
  border-top:1px solid var(--line);
  background:#fff;
}
.foot {
  display:grid;
  gap:16px;
  grid-template-columns:2fr 1fr 1fr;
  align-items:start;
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px var(--space);
}
@media (max-width:900px){.foot{grid-template-columns:1fr}}
.fine { font-size:.85rem; color:var(--muted) }
.list-clean { list-style:none; margin:0; padding:0; display:grid; gap:10px }

/* Article */
.article { max-width:var(--maxw); margin:0 auto; padding:28px var(--space) }
.title { font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.2; margin:12px 0 }
.cover {
  aspect-ratio:16/9;
  background:#e5f7f4;
  border-radius:12px;
  border:1px solid #c7f7ee;
  margin:14px 0 20px;
}
article p { margin:0 0 16px }
article h2 { margin:24px 0 10px; font-size:1.35rem }
article h3 { margin:18px 0 8px; font-size:1.1rem }

.keypoints, .callout {
  border-radius:var(--radius);
  padding:16px;
  margin:18px 0;
}
.keypoints {
  background:linear-gradient(180deg,#ecfeff,#fff);
  border:1px solid #cffafe;
}
.keypoints strong { display:block; margin-bottom:6px }
.callout { background:#f8fafc; border:1px solid #e2e8f0 }

.byline {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.byline img {
  width:44px;
  height:44px;
  border-radius:50%;
  background:#e2e8f0;
}

.related { margin-top:34px; border-top:1px solid var(--line); padding-top:20px }
.related a { display:block; margin:6px 0 }

/* Category header */
.header-cat {
  padding:40px 0;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#ecfeff,transparent);
}
.header-cat h1 { margin:0 0 10px }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }

/* Pagination */
.pagination { display:flex; gap:10px; justify-content:center; margin:30px 0 }
.page { border:1px solid var(--line); padding:8px 12px; border-radius:10px }
.page.is-active { background:var(--accent); color:#fff; border-color:var(--accent) }

/* Misc */
#claim { font-size:14px; margin-top:-10px; font-weight:normal; text-align:center }

.logo-link { display:inline-block; line-height:0 }
.logo-link:hover { text-decoration:none }

.card-excerpt {
  margin:0;
  font-size:.92rem;
  color:var(--muted);
}

.empty-state {
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  border-radius:var(--radius);
  padding:18px;
  color:var(--muted);
}

.empty-state h1 {
  margin-top:0;
}

.empty-state-full {
  grid-column:1 / -1;
}

.article-body ul,
.article-body ol {
  margin:0 0 16px 20px;
}

.article-body li {
  margin-bottom:8px;
}

.cover-img {
  width:100%;
  border-radius:12px;
  border:1px solid #c7f7ee;
  margin:14px 0 20px;
  aspect-ratio:16/9;
  object-fit:cover;
}

@media (max-width:960px) {
  .nav {
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    align-items:flex-start;
    gap:10px;
    flex-direction:column;
  }

  .menu {
    flex-wrap:wrap;
    gap:12px;
  }
}

.form-feedback {
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:10px;
  font-size:.92rem;
  font-weight:500;
}

.form-feedback-success {
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#166534;
}

.form-feedback-info {
  background:#eff6ff;
  border:1px solid #93c5fd;
  color:#1e40af;
}

.form-feedback-error {
  background:#fef2f2;
  border:1px solid #fca5a5;
  color:#991b1b;
}