/* Base tokens */
:root {
  --brand: #3066be;
  --brand-ink: #0b1f3a;
  --accent: #00c2a8;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --ink: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --radius: 12px;
  --max: 72rem;
  --shadow: 0 10px 30px rgba(2, 12, 27, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --bg-alt: #0f172a;
    --ink: #e5eaf3;
    --muted: #94a3b8;
    --border: #1f2937;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: #fff; color: #000; padding: .5rem .75rem; border-radius: .5rem; }

/* Header */
.site-header { position: sticky; top: 0; background: rgba(255,255,255,0.7); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); z-index: 10; }
@media (prefers-color-scheme: dark) { .site-header { background: rgba(11,18,32,0.55); } }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.site-header__brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; }
.site-header__brand:hover { text-decoration: none; }
.site-header__logo { width: 28px; height: 28px; }
.site-header__title { font-weight: 700; letter-spacing: .2px; }

.site-header__toggle { display: none; }
.site-nav__list { display: flex; gap: .75rem; align-items: center; list-style: none; margin: 0; padding: 0; }

@media (max-width: 720px) {
  .site-header__toggle { display: inline-block; background: transparent; border: 1px solid var(--border); padding: .5rem .75rem; border-radius: .5rem; color: inherit; }
  .site-nav__list { position: absolute; right: 1rem; top: 3.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow); padding: .5rem; display: none; flex-direction: column; width: min(260px, 95vw); }
  .site-nav__list.is-open { display: flex; }
}

/* Hero */
.hero { padding: 5rem 0 3rem; background: radial-gradient(1200px 600px at 10% -10%, rgba(48,102,190,0.15), transparent), radial-gradient(1000px 500px at 100% 10%, rgba(0,194,168,0.12), transparent); }
.hero__content { text-align: center; }
.hero__title { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.15; margin: 0 0 1rem; letter-spacing: .2px; }
.hero__subtitle { margin: 0 auto 1.5rem; max-width: 55ch; color: var(--muted); }
.hero__ctas { display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Sections */
.section { padding: 3.5rem 0; }
.section--alt { background: var(--bg-alt); }
.section--highlight { background: linear-gradient(180deg, rgba(48,102,190,0.08), transparent 70%); }
.section__title { font-size: 1.6rem; margin: 0 0 .5rem; }
.section__lead { color: var(--muted); margin: 0 0 2rem; }

/* Features grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--bg); box-shadow: var(--shadow); }
.feature__title { margin: 0 0 .25rem; font-size: 1.05rem; }
.feature__text { margin: 0; color: var(--muted); }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }

/* Split */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

.checklist { margin: 0; padding-left: 1.1rem; }
.checklist li { margin: .25rem 0; }

/* Logos */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0; }
.logos__item { border: 1px dashed var(--border); border-radius: .75rem; padding: .9rem; text-align: center; color: var(--muted); }
@media (max-width: 800px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* Clients */
.clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.client-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); padding: 1rem; display: grid; gap: .5rem; }
.client-card__header { display: flex; align-items: center; gap: .75rem; }
.client-card__logo { display: block; height: auto; }
.client-card__title { margin: 0; font-size: 1.1rem; }
.client-card__blurb { margin: .25rem 0 .5rem; color: var(--muted); }
.client-card__episodes-title { margin: .5rem 0 .25rem; font-size: 1rem; }
.episode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.episode-list__item a { color: inherit; text-decoration: none; }
.episode-list__item a:hover { text-decoration: underline; }
.episode-meta { color: var(--muted); font-size: .9rem; }
@media (max-width: 960px) { .clients { grid-template-columns: 1fr; } }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .62rem .9rem; border-radius: .6rem; border: 1px solid var(--border); color: var(--ink); background: var(--bg); font-weight: 600; text-decoration: none; box-shadow: var(--shadow); }
.button:hover { text-decoration: none; filter: brightness(0.98); }
.button--primary { background: linear-gradient(180deg, var(--brand), #27539a); border-color: transparent; color: #fff; }
.button--ghost { background: transparent; border: 1px solid var(--border); }
.button--lg { padding: .8rem 1.1rem; font-size: 1.05rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 1.25rem 0; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer__top { color: var(--muted); }

/* Utilities */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }