:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(10, 24, 44, 0.88);
  --panel-2: rgba(18, 39, 67, 0.88);
  --text: #edf5ff;
  --muted: #adc5df;
  --accent: #72d5ff;
  --accent-2: #ffd166;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, #173257, var(--bg) 55%);
  color: var(--text);
}
.hero {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 2rem;
  padding: 4rem min(6vw, 4rem) 2rem;
  align-items: center;
}
.hero__content, .countdown-card, .post {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 24px;
}
.hero__content { padding: 2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-size: .8rem; }
h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); margin: .3rem 0 1rem; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 65ch; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.button {
  text-decoration: none; border: 1px solid var(--border); padding: .9rem 1.2rem; border-radius: 999px;
  color: var(--text); background: transparent; cursor: pointer; font-weight: 700;
}
.button--primary { background: linear-gradient(135deg, var(--accent), #4ea8de); color: #04111f; border: none; }
.button--ghost { background: rgba(255,255,255,.03); }
.countdown-card {
  padding: 2rem;
  background: linear-gradient(180deg, rgba(9,25,46,.96), rgba(18,39,67,.96));
  display: grid;
  gap: .7rem;
}
.countdown-card__label { color: var(--accent-2); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.countdown-card strong { font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.15; }
.countdown-card span:last-child { color: var(--muted); }
.container { padding: 0 min(6vw, 4rem) 4rem; }
.section__head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.section__head p { color: var(--muted); }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.post { padding: 1.25rem; background: var(--panel-2); }
.post--highlight { outline: 2px solid rgba(255, 209, 102, .35); }
.post__meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.badge { color: var(--accent); }
.post h3 { margin: 0 0 .8rem; font-size: 1.18rem; }
.post p { color: var(--muted); min-height: 7.2em; }
.post a { color: var(--accent-2); text-decoration: none; font-weight: 700; }
.loading, .error { background: var(--panel); padding: 1rem 1.2rem; border-radius: 16px; }
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .section__head { flex-direction: column; align-items: flex-start; }
}