/* ==========================================================================
   AdEx Media Technology — company site
   Design tokens and layout transcribed from the Claude Design handoff
   (company-portfolio-hero-section/project/AdEx Site.dc.html)
   ========================================================================== */

:root {
  --bg: #05050a;

  --text: #f2f2f5;
  --text-soft: #b0b0c0;
  --text-nav: #b6b6c2;
  --text-muted: #9a9aa8;
  --text-body: #9393a3;
  --text-body-dim: #8d8d9d;
  --text-marquee: #7e7e92;
  --text-meta: #6f6f80;
  --text-eyebrow: #5f5f74;
  --text-faint: #55556a;

  --accent-hover: #8f8fff;

  /* Brand marks */
  --brand-red: #ff3b47;
  --brand-blue: #1baaf0;
  --brand-green: #57e257;
  --brand-indigo: #3f6fe0;

  --line-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.07);

  --font-sans: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 44px;
  --shell: 1240px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 1px solid var(--accent-hover);
  outline-offset: 4px;
}

section[id] {
  scroll-margin-top: 84px;
}

.page {
  position: relative;
  width: 100%;
  background: var(--bg);
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Animated backdrop
   -------------------------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.backdrop__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.backdrop__radial,
.backdrop__linear {
  position: absolute;
  inset: 0;
}

.backdrop__radial {
  background: radial-gradient(
    56% 50% at 50% 46%,
    rgba(5, 5, 10, 0.94) 0%,
    rgba(5, 5, 10, 0.72) 45%,
    rgba(5, 5, 10, 0) 78%
  );
}

.backdrop__linear {
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 10, 0.7) 0%,
    rgba(5, 5, 10, 0) 24%,
    rgba(5, 5, 10, 0) 70%,
    rgba(5, 5, 10, 0.9) 100%
  );
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--gutter);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease;
}

.header.is-scrolled {
  background: rgba(5, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.logo {
  display: flex;
  align-items: center;
}

/* Single lockup image from the brand handoff — the mark and wordmark are one
   asset, so there is nothing to keep in sync here. */
.logo__lockup {
  display: block;
  height: 44px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-nav);
}

.nav a {
  color: inherit;
}

.nav a:hover {
  color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 3;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

@supports (min-height: 100svh) {
  .hero {
    min-height: calc(100svh - var(--header-h));
  }
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 40px 110px;
  gap: 30px;
}

.hero__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(44px, 7.6vw, 124px);
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__lede {
  margin: 0;
  max-width: 50ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Brand band / marquee — PARKED, currently unused

   The publisher name band was removed from the hero (CONTENT-BRIEF.md §3):
   the names were placeholders and the real roster cannot be named publicly
   yet. These rules match nothing today and are kept deliberately, since the
   brief expects the band to return the moment a publisher can be named
   (§9) and this project has no version control to recover them from.
   -------------------------------------------------------------------------- */

.brandband {
  padding: 0 0 40px;
}

.brandband__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter) 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.brandband__head > span:first-child {
  flex: none;
}

.brandband__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: av-marquee var(--marquee-duration, 34s) linear infinite;
}

.marquee__item {
  flex: none;
  padding: 0 34px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-marquee);
}

@keyframes av-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  z-index: 3;
  padding: 150px var(--gutter);
  border-top: 1px solid var(--line-soft);
}

.section--contact {
  padding: 150px var(--gutter) 0;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
}

.shell--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 80px;
  align-items: start;
}

.shell--stack {
  display: flex;
  flex-direction: column;
  gap: 76px;
}

.split__aside,
.section__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.split__aside {
  position: sticky;
  top: 130px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.eyebrow--wide {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--text-meta);
}

.section__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

#buyers .section__title     { max-width: 15em; }
#publishers .section__title { max-width: 17em; }

/* --------------------------------------------------------------------------
   01 — What we do
   -------------------------------------------------------------------------- */

.services {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--line-strong);
}

.service__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-meta);
  padding-top: 6px;
}

.service__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service__title {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.service__text {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   02 — Publishers
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-strong);
}

.card {
  background: var(--bg);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body-dim);
  text-wrap: pretty;
}

/* Figures — PARKED, currently unused

   The stats row was removed from Publishers (CONTENT-BRIEF.md §3): the
   numbers in it were placeholders. Kept, like the marquee rules above, for
   when real figures exist (§9) — this project has no version control. */

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}

.figures--ruled {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.figure__value {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.figure__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-meta);
}

/* --------------------------------------------------------------------------
   03 — Contact
   -------------------------------------------------------------------------- */

.contact__head {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.contact__title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(40px, 6.4vw, 108px);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.contact__email {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.02em;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 6px;
  align-self: flex-start;
  transition: color 200ms ease, border-color 200ms ease;
}

.contact__email:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Contact split blocks — PARKED, currently unused

   The Publishers/Demand partners email split was removed (single 'Contact
   us at' + info@ad-ex.tv now covers it). Kept in case a split contact
   layout returns — this project has no version control. */

.contact__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  padding-bottom: 90px;
}

.contact__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.contact__value {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  white-space: pre-line;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 34px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 900ms cubic-bezier(0.16, 0.84, 0.28, 1),
    transform 1000ms cubic-bezier(0.16, 0.84, 0.28, 1);
}

[data-reveal="2"] { transition-delay: 110ms; }
[data-reveal="3"] { transition-delay: 220ms; }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .shell--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .split__aside {
    position: static;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 24px;
  }

  .section {
    padding: 110px var(--gutter);
  }

  .section--contact {
    padding: 110px var(--gutter) 0;
  }

  .shell--stack { gap: 56px; }

  .hero__inner {
    padding: 70px 24px 90px;
    gap: 24px;
  }

  .marquee__item {
    padding: 0 24px;
    font-size: 22px;
  }

  .service {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
  }

  .figures { gap: 40px; }
  .figure__value { font-size: 44px; }

  .contact__blocks {
    gap: 32px;
    padding-bottom: 64px;
  }
}

@media (max-width: 640px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  section[id] {
    scroll-margin-top: 116px;
  }

  .logo__lockup {
    height: 36px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 18px;
    font-size: 11px;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .card {
    padding: 30px 24px;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}