:root {
  color-scheme: dark;
  --bg: #071c24;
  --panel: rgba(19, 55, 67, .72);
  --panel-hover: rgba(29, 77, 91, .9);
  --line: rgba(151, 213, 222, .15);
  --text: #eefbfc;
  --muted: #9fc3ca;
  --aqua: #8ccdd8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 0%, rgba(72, 156, 175, .18), transparent 35rem),
    linear-gradient(155deg, #0d2b36 0%, var(--bg) 70%);
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 28vh;
  pointer-events: none;
  opacity: .32;
  background: linear-gradient(170deg, transparent 25%, rgba(70, 156, 175, .26) 26%, rgba(70, 156, 175, .06) 72%);
}

main { position: relative; z-index: 1; width: min(960px, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0 2rem; }

.hero { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 4rem; }
.hero img { border-radius: 1.5rem; box-shadow: 0 18px 55px rgba(0, 0, 0, .28); }
.eyebrow { margin: 0 0 .2rem; color: var(--aqua); font-size: .78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.lede { max-width: 38rem; margin: .8rem 0 0; color: var(--muted); font-size: 1.08rem; }

section { margin-top: 2.8rem; }
h2 { margin: 0 0 1rem; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.badge { margin: 0 0 1rem; padding: .28rem .62rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .72rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }

.card {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 86px;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-2px); background: var(--panel-hover); border-color: rgba(151, 213, 222, .34); outline: none; }
.featured { min-height: 104px; }
.card strong, .card small { display: block; }
.card strong { font-size: 1.05rem; }
.card small { margin-top: .12rem; color: var(--muted); }
.mark { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: .85rem; background: #7143d7; font-weight: 850; letter-spacing: -.04em; }
.featured .mark { flex-basis: 58px; height: 58px; font-size: 1.25rem; }
.sea { background: #28798b; }
.coral { background: #b8594d; }
.amber { background: #a16b26; }
.blue { background: #416fb1; }
.violet { background: #6152a9; }
.arrow { margin-left: auto; color: var(--aqua); font-size: 1.3rem; }

footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
code { color: var(--aqua); }

@media (max-width: 640px) {
  main { padding-top: 2rem; }
  .hero { align-items: flex-start; margin-bottom: 3rem; }
  .hero img { width: 72px; height: 72px; border-radius: 1.2rem; }
  .grid { grid-template-columns: 1fr; }
  .badge { display: none; }
  footer { flex-direction: column; }
}