:root {
  --bg-0: #04100c;
  --bg-1: #071914;
  --bg-2: #0d241d;
  --panel: rgba(245, 255, 250, 0.078);
  --panel-strong: rgba(250, 255, 252, 0.13);
  --line: rgba(206, 255, 231, 0.16);
  --line-strong: rgba(206, 255, 231, 0.32);
  --text: #eefdf6;
  --muted: #9fb8ad;
  --soft: #d8fff0;
  --primary: #1ed6b3;
  --primary-2: #77f7a9;
  --cyan: #61d9ff;
  --warn: #f6c453;
  --danger: #ff5874;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius: 16px;
  --font: ui-sans-serif, "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-0); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at 10% -10%, rgba(30, 214, 179, 0.32), transparent 30%),
    radial-gradient(circle at 95% 12%, rgba(97, 217, 255, 0.18), transparent 34%),
    linear-gradient(145deg, var(--bg-0), var(--bg-1) 42%, #06110f 100%);
  overflow-x: hidden;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }

.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.orb { position: absolute; width: 32vw; aspect-ratio: 1; border-radius: 999px; filter: blur(34px); opacity: 0.48; animation: floatOrb 16s ease-in-out infinite; }
.orb-a { left: -10vw; top: 12vh; background: rgba(30, 214, 179, 0.38); }
.orb-b { right: -8vw; top: 4vh; background: rgba(97, 217, 255, 0.24); animation-delay: -4s; }
.orb-c { left: 28vw; bottom: -20vh; background: rgba(119, 247, 169, 0.18); animation-delay: -8s; }
.grid-glow {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(216,255,240,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,255,240,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 15%, black, transparent 72%);
}

@keyframes floatOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, -3vh, 0) scale(1.08); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseLine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

.download-shell {
  position: relative;
  z-index: 1;
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  overflow: hidden;
  animation: riseIn 0.54s cubic-bezier(.2,.8,.2,1) both;
}
.neon-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(30,214,179,0.34), transparent 30%, rgba(97,217,255,0.18) 72%, transparent);
  opacity: 0.75;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.topbar {
  min-height: 78px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--primary), var(--cyan));
  color: #03120d;
  font-weight: 950;
  letter-spacing: -0.08em;
  box-shadow: 0 18px 60px rgba(30,214,179,0.24);
}
.brand strong { display: block; font-size: 17px; }
.brand small { display: block; color: var(--muted); margin-top: 3px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.eyebrow { margin: 0 0 8px; color: var(--primary-2); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 900; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -0.045em; }
h1 { max-width: 13ch; font-size: clamp(42px, 7vw, 92px); }
h2 { font-size: clamp(24px, 2.4vw, 40px); }
h3 { font-size: clamp(22px, 2vw, 30px); }
p { color: var(--muted); line-height: 1.58; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 18px; }
.hero { min-height: 430px; padding: clamp(28px, 5vw, 62px); display: grid; align-content: end; }
.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -100px;
  border-radius: 90px;
  background: linear-gradient(135deg, rgba(30,214,179,0.22), rgba(97,217,255,0.12));
  transform: rotate(18deg);
}
.hero > * { position: relative; z-index: 1; }
.hero-copy { max-width: 760px; margin-top: 22px; font-size: clamp(16px, 1.45vw, 20px); }
.hero-badges { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-badges span,
.metric-pill,
.status-pill {
  border-radius: 999px;
  padding: 9px 13px;
  color: #04100c;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.metric-pill { color: var(--primary-2); background: rgba(30,214,179,0.09); border: 1px solid rgba(30,214,179,0.22); }
.status-pill { font-variant-numeric: tabular-nums; }
.status-pill.muted { color: var(--muted); background: rgba(255,255,255,0.08); border: 1px solid var(--line); }

.release-card { padding: 28px; display: grid; align-content: end; gap: 14px; min-height: 430px; }
.release-card strong { font-size: clamp(44px, 6vw, 76px); line-height: 0.9; letter-spacing: -0.08em; }
.release-card span:not(.release-orb) { color: var(--muted); font-weight: 850; }
.release-orb {
  width: 92px;
  height: 92px;
  border-radius: 30px;
  background: conic-gradient(from 210deg, var(--primary), var(--cyan), var(--primary-2), var(--primary));
  box-shadow: 0 0 72px rgba(30,214,179,0.42);
}
.release-meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.release-meter span { display: block; width: 76%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--cyan)); }

.downloads-section { padding: 20px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 8px 20px; }
.downloads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.download-card {
  min-height: 330px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.055);
  display: grid;
  align-content: space-between;
  gap: 18px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.download-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: rgba(255,255,255,0.085); }
.download-card.is-primary { border-color: rgba(30,214,179,0.45); background: linear-gradient(145deg, rgba(30,214,179,0.13), rgba(97,217,255,0.055)); }
.download-card.is-portable { border-color: rgba(214,138,0,0.38); background: linear-gradient(145deg, rgba(255,214,102,0.12), rgba(30,214,179,0.04)); }
.download-card.is-mac-test { border-color: rgba(97,217,255,0.3); background: linear-gradient(145deg, rgba(97,217,255,0.12), rgba(30,214,179,0.04)); }
.platform-head { display: flex; align-items: center; gap: 12px; }
.platform-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #04100c;
  font-weight: 950;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  box-shadow: 0 14px 34px rgba(30,214,179,0.18);
}
.apple-icon { font-size: 24px; }
.intel-icon { font-family: var(--mono); font-size: 14px; }
.platform { color: var(--primary-2); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 950; }
.download-card p { margin-top: 10px; }
.download-card small { color: rgba(216,255,240,0.62); font-family: var(--mono); }
.button-stack { display: grid; gap: 10px; }

.btn {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 13px 16px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(255,255,255,0.1); }
.btn-primary { border-color: rgba(30,214,179,0.65); color: #02120d; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 18px 36px rgba(30,214,179,0.2); }
.btn-soft { background: rgba(255,255,255,0.09); }
.btn-ghost { color: var(--primary-2); border-color: rgba(30,214,179,0.22); }
.btn-wide { width: 100%; min-height: 54px; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.ops-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 18px; }
.ops-card { padding: 26px; }
.timeline { display: grid; gap: 12px; margin-top: 20px; }
.timeline div { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.045); }
.timeline span { grid-row: span 2; font-family: var(--mono); color: var(--primary-2); font-weight: 950; }
.timeline strong { color: var(--text); }
.timeline p { font-size: 14px; }
.support-card { display: grid; gap: 14px; align-content: start; }
.support-note { margin-top: 10px; border: 1px solid rgba(246,196,83,0.26); border-radius: var(--radius); padding: 14px; background: rgba(246,196,83,0.08); display: grid; gap: 5px; }
.support-note strong { color: var(--warn); }
.support-note span { color: var(--muted); line-height: 1.45; }

.footer { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.footer span:first-child { color: var(--soft); font-weight: 950; }

@media (max-width: 980px) {
  .download-shell { padding: 14px; }
  .hero-grid,
  .downloads-grid,
  .ops-grid { grid-template-columns: 1fr; }
  .hero,
  .release-card { min-height: auto; }
  .section-head,
  .topbar,
  .footer { flex-direction: column; align-items: stretch; }
  .topbar-actions { justify-content: flex-start; }
  h1 { font-size: clamp(38px, 12vw, 66px); }
}

@media (max-width: 560px) {
  .download-shell { padding: 10px; gap: 12px; }
  .hero,
  .release-card,
  .downloads-section,
  .ops-card { padding: 18px; border-radius: 22px; }
  .brand small { display: none; }
  .download-card { min-height: 280px; padding: 18px; }
  .hero-badges span,
  .metric-pill,
  .status-pill { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Premium cockpit refresh - aligned with CAG Admin v5 */
:root {
  --bg-0: #f6f7f9;
  --bg-1: #eef2f6;
  --bg-2: #ffffff;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: #ffffff;
  --line: #d8e1ec;
  --line-strong: #c8d4e3;
  --text: #101828;
  --muted: #667085;
  --soft: #344054;
  --primary: #087f6f;
  --primary-2: #12b886;
  --cyan: #2f6fed;
  --warn: #d68a00;
  --danger: #d92d20;
  --shadow: 0 24px 70px rgba(16, 24, 40, 0.1);
  --shadow-soft: 0 12px 34px rgba(16, 24, 40, 0.075);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius: 10px;
}

html {
  background: var(--bg-0);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 16% -12%, rgba(8, 127, 111, 0.14), transparent 34%),
    radial-gradient(circle at 104% 6%, rgba(47, 111, 237, 0.1), transparent 30%),
    linear-gradient(180deg, #fbfcfd 0%, var(--bg-0) 42%, var(--bg-1) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(16, 24, 40, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.ambient {
  opacity: 0.78;
}

.orb {
  filter: blur(42px);
  opacity: 0.32;
}

.orb-a {
  background: rgba(8, 127, 111, 0.22);
}

.orb-b {
  background: rgba(47, 111, 237, 0.18);
}

.orb-c {
  background: rgba(18, 184, 134, 0.18);
}

.grid-glow {
  display: none;
}

.download-shell {
  width: min(1560px, 100%);
  padding: 22px;
  gap: 16px;
}

.panel {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.neon-panel::before {
  display: none;
}

.topbar {
  min-height: 74px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: #fff;
  background: #101828;
  box-shadow: none;
  letter-spacing: -0.06em;
}

.brand strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.topbar-actions {
  gap: 8px;
}

.eyebrow {
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
  font-weight: 850;
}

h1,
h2,
h3 {
  color: var(--text);
  letter-spacing: -0.055em;
}

h1 {
  max-width: 11.5ch;
  font-size: clamp(44px, 6vw, 86px);
}

h2 {
  font-size: clamp(26px, 2.6vw, 44px);
}

h3 {
  font-size: clamp(24px, 2vw, 34px);
}

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

.hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  gap: 16px;
}

.hero,
.release-card {
  min-height: 470px;
}

.hero {
  padding: clamp(30px, 5vw, 68px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    radial-gradient(circle at 82% 14%, rgba(8, 127, 111, 0.16), transparent 28%);
  overflow: hidden;
}

.hero::after {
  right: -90px;
  top: -105px;
  width: 390px;
  height: 390px;
  border-radius: 86px;
  background:
    linear-gradient(135deg, rgba(8, 127, 111, 0.18), rgba(47, 111, 237, 0.12)),
    linear-gradient(45deg, transparent 36%, rgba(255,255,255,0.66) 36% 38%, transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(8, 127, 111, 0.08);
}

.hero::before {
  content: "";
  position: absolute;
  right: 78px;
  top: 58px;
  width: 12px;
  height: 260px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--cyan));
  opacity: 0.18;
  transform: rotate(35deg);
  animation: scanGlow 4.8s ease-in-out infinite;
}

.hero-copy {
  max-width: 720px;
  margin-top: 20px;
  color: #475467;
}

.hero-badges span,
.metric-pill,
.status-pill {
  color: var(--text);
  background: #f8fafc;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.045);
}

.hero-badges span:first-child,
.status-pill {
  color: #fff;
  background: #101828;
  border-color: #101828;
}

.metric-pill {
  color: var(--primary);
  background: rgba(8, 127, 111, 0.08);
  border-color: rgba(8, 127, 111, 0.2);
}

.status-pill.muted {
  color: var(--muted);
  background: #f8fafc;
  border-color: var(--line);
}

.release-card {
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.88)),
    radial-gradient(circle at 15% 10%, rgba(47, 111, 237, 0.1), transparent 28%);
}

.release-card strong {
  color: var(--text);
  font-size: clamp(52px, 7vw, 88px);
}

.release-card span:not(.release-orb) {
  color: var(--muted);
}

.release-orb {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #101828 0%, #101828 48%, var(--primary) 48%, var(--primary) 100%);
  box-shadow: 0 18px 46px rgba(16, 24, 40, 0.12);
  animation: tileBreath 4.6s ease-in-out infinite;
}

.release-meter {
  height: 8px;
  background: #eef2f6;
}

.release-meter span {
  width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--primary));
  background-size: 220% 100%;
  animation: meterFlow 3.4s ease-in-out infinite;
}

.downloads-section {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.section-head {
  align-items: center;
  padding: 12px 10px 22px;
  border-bottom: 1px solid #edf1f5;
}

.downloads-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  padding-top: 16px;
}

.download-card {
  position: relative;
  min-height: 360px;
  padding: 24px;
  border-color: var(--line);
  background:
    linear-gradient(180deg, #fff, #fbfcfe),
    radial-gradient(circle at 92% 8%, rgba(8, 127, 111, 0.1), transparent 24%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.download-card::before {
  content: "";
  position: absolute;
  inset: auto 22px 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  opacity: 0;
  transform: translateY(4px);
  transition: 0.22s ease;
}

.download-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
}

.download-card:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.download-card.is-primary {
  border-color: rgba(8, 127, 111, 0.28);
  background:
    linear-gradient(180deg, #fff, rgba(240, 253, 249, 0.9)),
    radial-gradient(circle at 90% 10%, rgba(8, 127, 111, 0.16), transparent 26%);
}

.download-card.is-portable {
  border-color: rgba(214, 138, 0, 0.28);
  background:
    linear-gradient(180deg, #fff, rgba(255, 250, 235, 0.92)),
    radial-gradient(circle at 90% 10%, rgba(214, 138, 0, 0.14), transparent 26%);
}

.download-card.is-mac-test {
  border-color: rgba(8, 127, 111, 0.22);
  background:
    linear-gradient(180deg, #fff, rgba(240, 253, 249, 0.72)),
    radial-gradient(circle at 90% 10%, rgba(97, 217, 255, 0.15), transparent 26%);
}

.platform-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  background: #101828;
  box-shadow: none;
}

.platform {
  color: var(--muted);
  letter-spacing: 0.035em;
  font-size: 12px;
}

.download-card p {
  color: #475467;
}

.download-card small {
  color: #667085;
  font-family: var(--mono);
  font-size: 12px;
}

.button-stack {
  display: grid;
  gap: 10px;
}

.btn {
  min-height: 48px;
  border-color: var(--line);
  color: var(--text);
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.045);
}

.btn:hover {
  border-color: var(--line-strong);
  background: #f9fafb;
}

.btn-primary {
  color: #fff;
  border-color: #101828;
  background: #101828;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.16);
}

.btn-primary:hover {
  background: #1d2939;
}

.btn-soft {
  color: var(--primary);
  background: rgba(8, 127, 111, 0.075);
  border-color: rgba(8, 127, 111, 0.18);
}

.btn-soft:hover {
  background: rgba(8, 127, 111, 0.11);
}

.btn-ghost {
  color: var(--text);
  background: #fff;
}

.ops-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ops-card {
  padding: 26px;
  background: rgba(255, 255, 255, 0.94);
}

.timeline div {
  border-color: var(--line);
  background: #fbfcfe;
}

.timeline span {
  color: var(--primary);
}

.timeline strong {
  color: var(--text);
}

.support-note {
  border-color: rgba(214, 138, 0, 0.22);
  background: rgba(255, 247, 230, 0.86);
}

.support-note strong {
  color: var(--warn);
}

.footer {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
}

.footer span:first-child {
  color: var(--text);
}

@keyframes scanGlow {
  0%, 100% { opacity: 0.1; transform: rotate(35deg) translateY(0); }
  50% { opacity: 0.28; transform: rotate(35deg) translateY(28px); }
}

@keyframes tileBreath {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.045); }
}

@keyframes meterFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 980px) {
  .download-shell {
    padding: 14px;
  }

  .hero-grid,
  .downloads-grid,
  .ops-grid {
    grid-template-columns: 1fr;
  }

  .hero,
  .release-card {
    min-height: 360px;
  }

  .topbar,
  .section-head,
  .footer {
    align-items: stretch;
  }

  .topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .download-shell {
    padding: 10px;
    gap: 12px;
  }

  .topbar,
  .hero,
  .release-card,
  .downloads-section,
  .ops-card,
  .footer {
    border-radius: 14px;
  }

  .hero,
  .release-card,
  .download-card,
  .ops-card {
    padding: 18px;
  }

  .hero {
    min-height: 430px;
  }

  .release-card {
    min-height: 300px;
  }

  .hero::after {
    width: 260px;
    height: 260px;
    right: -120px;
  }

  .hero-badges,
  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn,
  .status-pill,
  .metric-pill,
  .hero-badges span {
    width: 100%;
  }
}