:root{
  --bg:#09111f;
  --panel:#0f182a;
  --line:rgba(255,255,255,.10);
  --text:#eef3ff;
  --muted:#9fb0cb;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  background:radial-gradient(circle at top, rgba(29,48,89,.55), transparent 25%), #09111f;
}
.app{max-width:1180px;margin:0 auto;padding:28px 18px 60px}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#91a3c2;font-size:12px;margin:0 0 10px}
.eyebrow.small{margin-bottom:6px}
h1{margin:0;font-size:42px;line-height:1}
.sub{color:var(--muted);max-width:620px;line-height:1.5;margin:10px 0 0}
.filters{display:flex;gap:12px;flex-wrap:wrap}
.filter{
  border:1px solid var(--line);background:transparent;color:var(--text);
  padding:13px 22px;border-radius:999px;cursor:pointer;font-size:16px
}
.filter.active{background:rgba(255,255,255,.08)}
.card{
  margin-top:28px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:26px;padding:22px;
}
.topline{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.topline h2{margin:0;font-size:30px}
.badge{padding:10px 15px;border-radius:999px;font-weight:700;background:rgba(31,143,106,.22);color:#7ee2b7}
.muted{color:var(--muted)}
.tomorrow-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center}
.copy h3{margin:0 0 10px;font-size:34px;line-height:1.08}
.hero-image{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:22px;border:1px solid var(--line);display:block}
.calendar-head{margin-top:34px;margin-bottom:14px}
.calendar-head h2{margin:0 0 6px;font-size:30px}
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.card-item{background:var(--panel);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.card-item img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#162337}
.card-body{padding:16px}
.meta-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.day{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#91a3c2}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:8px 12px;background:rgba(31,143,106,.22);color:#7ee2b7}
.tag.good{background:rgba(191,137,42,.22);color:#ffd98a}
.tag.safe{background:rgba(101,116,145,.24);color:#d8e0ef}
.title{font-size:24px;line-height:1.08;margin:0 0 10px}
.desc{font-size:15px;line-height:1.45;color:var(--muted);margin:0}
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .tomorrow-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  h1{font-size:34px}
  .topline h2{font-size:24px}
  .copy h3{font-size:28px}
  .calendar-head h2{font-size:26px}
  .grid{grid-template-columns:1fr}
}