:root {
  --bg: #fff8ea; --panel: rgba(255, 255, 255, 0.78); --ink: #173568;
  --muted: #6f6a61; --gold: #d8a739; --blue: #143a82;
}

* { box-sizing: border-box; }
body {
  margin: 0; overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top, #ffffff 0, var(--bg) 42%, #dce9f7 100%);
}
.page {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}
.nav, .card {
  background: var(--panel);
  border: 1px solid rgba(216, 167, 57, 0.42);
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(23, 53, 104, 0.11);
}
.nav {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 18px; padding: 14px 18px;
}
.brand { font-weight: 800; letter-spacing: 0.02em; }
.links { display: flex; gap: 14px; flex-wrap: wrap; }
a { color: var(--blue); font-weight: 700; text-decoration: none; }
.hero, .card { margin-top: 28px; padding: clamp(22px, 4vw, 34px); }
h1 { font-size: clamp(38px, 8vw, 82px); line-height: 0.92; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; }
p, li { color: var(--muted); font-size: 18px; line-height: 1.65; }
.button {
  display: inline-block; margin-top: 18px; padding: 15px 24px;
  color: white;
  background: linear-gradient(135deg, #0f2a66, #1c57b7);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(20, 58, 130, 0.28);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.soon { display: grid; grid-template-columns: 1fr minmax(210px, 320px); gap: 26px; align-items: center; overflow: hidden; }
.shot { display: block; width: 100%; max-height: 520px; object-fit: cover; object-position: top; border-radius: 32px; box-shadow: 0 24px 60px rgba(20, 58, 130, 0.24); }
.tag { color: var(--gold); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.mini { padding: 22px; }
.footer { margin-top: 34px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .brand, .links { width: 100%; text-align: center; justify-content: center; } .soon { grid-template-columns: 1fr; } .shot { max-height: 420px; } }