:root {
  color-scheme: dark;
  --bg: #020303;
  --panel: #07101c;
  --panel-2: #0b182e;
  --text: #f6f7f2;
  --muted: #a7b0bd;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --cyan: #28b7ff;
  --green: #0473fc;
  --amber: #ffb24a;
  --navy: #0b182e;
  --shadow: 0 24px 80px rgba(4, 115, 252, 0.14);
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 5%, rgba(4, 115, 252, 0.16), transparent 34rem),
    radial-gradient(circle at 12% 28%, rgba(40, 183, 255, 0.08), transparent 30rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.5;
  animation: gridDrift 18s linear infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 3, 3, 0.55), transparent 18%, transparent 82%, rgba(2, 3, 3, 0.65)),
    linear-gradient(180deg, transparent, rgba(2, 3, 3, 0.75) 78%, #020303);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(40, 183, 255, 0.055) 47%, transparent 52% 100%),
    radial-gradient(circle at 18% 70%, rgba(255, 178, 74, 0.055), transparent 20rem);
  opacity: 0.9;
  pointer-events: none;
  animation: ambientSweep 11s ease-in-out infinite alternate;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--text);
  color: #020303;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(2, 3, 3, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.nav-shell,
.section-shell,
.site-footer {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1rem;
}

.brand,
.nav-links,
.nav-cta {
  display: flex;
  align-items: center;
}

.brand {
  gap: 0.7rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand img {
  display: block;
  width: clamp(118px, 14vw, 154px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(4, 115, 252, 0.24));
}

.nav-links {
  gap: clamp(1rem, 3vw, 2rem);
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.nav-cta {
  border: 1px solid var(--line-strong);
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.88rem;
  font-weight: 800;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: rgba(4, 115, 252, 0.85);
  color: var(--green);
  box-shadow: 0 0 28px rgba(4, 115, 252, 0.18);
}

.section-shell {
  padding: 56px 0;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(86vh - 76px);
  display: flex;
  align-items: center;
  padding-top: 34px;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -16px;
  left: 50%;
  z-index: -2;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(2, 3, 3, 0.92) 0%, rgba(2, 3, 3, 0.78) 42%, rgba(2, 3, 3, 0.64) 100%),
    linear-gradient(180deg, rgba(2, 3, 3, 0.28), #020303 94%),
    url("assets/images/business-team-analyzes-data-at-modern-office.webp") center right / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -16px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(40, 183, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(40, 183, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 74% 22%, rgba(4, 115, 252, 0.22), transparent 28rem);
  background-size: 72px 72px, 72px 72px, auto;
  opacity: 0.72;
  pointer-events: none;
}

.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  gap: 36px;
  align-items: center;
}

.hero-copy {
  max-width: 860px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  padding: 0.42rem 0.68rem;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(40, 183, 255, 0.9);
  animation: signalPulse 2.4s ease-in-out infinite;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  line-height: 1.02;
}

h1 {
  max-width: 880px;
  font-size: clamp(2.85rem, 4.3vw, 4.85rem);
  font-weight: 950;
}

h2 {
  max-width: 1120px;
  font-size: clamp(1.65rem, 2.35vw, 2.75rem);
  font-weight: 950;
}

h3 {
  font-size: 1.28rem;
  font-weight: 900;
}

.hero-lede {
  max-width: 660px;
  margin-top: 1.35rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.22rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.hero-proof span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem 0.68rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  padding: 0.8rem 1.1rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(135deg, var(--green), #22d3ff 62%, var(--amber));
  border-color: var(--green);
  color: #ffffff;
  box-shadow: 0 0 34px rgba(4, 115, 252, 0.24);
  background-size: 170% 170%;
  animation: accentShift 6s ease-in-out infinite;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(40, 183, 255, 0.75);
  color: var(--cyan);
}

.hero-panel,
.service-card,
.audience-card,
.timeline-grid article,
.platform-panel,
.why-panel,
.contact-panel,
.split-panel,
.engagements article {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012)),
    var(--panel);
  box-shadow: var(--shadow);
}

.hero-panel,
.split-panel,
.why-panel,
.contact-panel,
.service-card,
.audience-card,
.timeline-grid article,
.engagements article {
  position: relative;
  overflow: hidden;
}

.hero-panel,
.service-card,
.audience-card,
.timeline-grid article,
.platform-card,
.engagements article,
.why-panel,
.contact-panel,
.split-panel {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.service-card:hover,
.audience-card:hover,
.timeline-grid article:hover,
.platform-card:hover,
.engagements article:hover {
  transform: translateY(-4px);
  border-color: rgba(40, 183, 255, 0.38);
  box-shadow: 0 28px 90px rgba(4, 115, 252, 0.18);
}

.service-card::before,
.audience-card::before,
.timeline-grid article::before,
.engagements article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;
  right: 1.1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(40, 183, 255, 0.7), rgba(255, 178, 74, 0.36), transparent);
  transform: translateX(-32%);
  opacity: 0.7;
  animation: railGlide 5.6s ease-in-out infinite alternate;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(4, 115, 252, 0.14) 45%, transparent 47% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 16px);
  pointer-events: none;
  animation: panelScan 7s ease-in-out infinite alternate;
}

.hero-panel::after,
.platform-card::before,
.contact-panel::before,
.why-panel::before,
.split-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.08) 46%, transparent 54% 100%);
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 0;
  animation: surfaceSweep 9s ease-in-out infinite;
}

.hero-panel::after {
  z-index: 0;
}

.hero-panel > *,
.split-panel > *,
.why-panel > *,
.contact-panel > * {
  position: relative;
  z-index: 1;
}

.panel-topline,
.metric-strip {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.signal-board {
  position: relative;
  display: grid;
  gap: 0.72rem;
  margin: 1.15rem 0;
}

.signal-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "index title"
    "index text";
  column-gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(4, 115, 252, 0.08), transparent 54%),
    rgba(2, 3, 3, 0.76);
  padding: 0.95rem 1.05rem;
}

.signal-card::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.95rem;
  bottom: 0.8rem;
  width: 34%;
  background:
    linear-gradient(90deg, transparent, rgba(40, 183, 255, 0.16), transparent),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 11px);
  opacity: 0.42;
  transform: skewX(-12deg);
  pointer-events: none;
}

.signal-card.active {
  border-color: rgba(4, 115, 252, 0.72);
  box-shadow: inset 0 0 38px rgba(4, 115, 252, 0.12);
  animation: activeSignal 3.8s ease-in-out infinite;
}

.signal-card.active::before {
  opacity: 0.7;
}

.signal-card span {
  grid-area: index;
  margin-bottom: 0;
}

.signal-card strong {
  grid-area: title;
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
}

.signal-card small {
  grid-area: text;
  position: relative;
  z-index: 1;
  margin-top: 0.18rem;
}

.signal-card span,
.timeline-grid span,
.engagements span,
.card-index {
  --index-color: var(--cyan);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.55rem;
  height: 1.85rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(40, 183, 255, 0.34);
  border-left-color: var(--index-color);
  background:
    linear-gradient(90deg, rgba(40, 183, 255, 0.14), rgba(255, 255, 255, 0.025)),
    rgba(2, 3, 3, 0.58);
  box-shadow:
    inset 0 0 18px rgba(40, 183, 255, 0.08),
    0 0 18px rgba(40, 183, 255, 0.08);
  color: var(--index-color);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
}

.signal-card span::after,
.timeline-grid span::after,
.engagements span::after,
.card-index::after {
  content: "";
  position: absolute;
  right: -0.42rem;
  top: 50%;
  width: 0.42rem;
  height: 1px;
  background: var(--index-color);
  box-shadow: 0 0 12px var(--index-color);
  transform: translateY(-50%);
}

.signal-card:nth-child(3n) span,
.platform-card:nth-child(3n) .card-index,
.platform-card:nth-child(4n) .card-index,
.service-card:nth-child(4n) .card-index,
.timeline-grid article:nth-child(3n) span,
.engagements article:nth-child(2) span {
  --index-color: var(--amber);
  border-color: rgba(255, 178, 74, 0.34);
  border-left-color: var(--index-color);
  background:
    linear-gradient(90deg, rgba(255, 178, 74, 0.15), rgba(255, 255, 255, 0.025)),
    rgba(2, 3, 3, 0.58);
  box-shadow:
    inset 0 0 18px rgba(255, 178, 74, 0.08),
    0 0 18px rgba(255, 178, 74, 0.08);
}

.signal-card.active span {
  border-color: rgba(4, 115, 252, 0.62);
  border-left-color: var(--cyan);
  box-shadow:
    inset 0 0 22px rgba(4, 115, 252, 0.18),
    0 0 22px rgba(4, 115, 252, 0.12);
}

.service-card:nth-child(4n) .card-index,
.timeline-grid article:nth-child(3n) span,
.engagements article:nth-child(2) span {
  color: var(--amber);
}

.signal-card strong,
.metric-strip strong {
  display: block;
}

.signal-card small {
  color: var(--muted);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  text-transform: none;
}

.metric-strip span {
  display: block;
  margin-bottom: 0.25rem;
}

.section-heading {
  margin-bottom: 1.45rem;
}

.section-heading h2 + p,
.native-platforms .section-heading p:not(.eyebrow),
.service-card p,
.audience-card p,
.timeline-grid p,
.platform-layout p,
.platform-card p,
.why-panel p,
.contact-copy p,
.engagements p,
.split-panel p {
  color: var(--muted);
}

.native-platforms .section-heading p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 0.9rem;
  font-size: 1.02rem;
}

.compact {
  margin-bottom: 1rem;
}

.card-grid {
  display: grid;
  gap: 1rem;
}

.card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.card-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.service-card,
.audience-card,
.engagements article {
  padding: 1.15rem;
}

.service-card p,
.audience-card p,
.engagements p {
  margin-top: 0.8rem;
}

.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: end;
  padding: 34px;
}

.visual-split {
  align-items: center;
}

.insight-visual,
.contact-image-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05080d;
  box-shadow: var(--shadow);
}

.insight-visual {
  min-height: 340px;
}

.insight-visual img,
.contact-image-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04) brightness(0.72);
}

.insight-visual img {
  position: absolute;
  inset: 0;
  object-position: center;
}

.insight-visual::after,
.contact-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.05), rgba(2, 3, 3, 0.78)),
    linear-gradient(90deg, rgba(4, 115, 252, 0.18), transparent 45%);
  pointer-events: none;
}

.visual-copy {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.45rem;
}

.visual-copy span,
.contact-image-panel span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.visual-copy p {
  max-width: 620px;
  color: rgba(246, 247, 242, 0.82);
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.timeline-grid article {
  padding: 1.25rem;
}

.timeline-grid p {
  margin-top: 0.75rem;
}

.audience-card ul,
.why-list,
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.audience-card li,
.why-list span,
.pill-grid span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.55rem 0.7rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
}

.pill-grid span {
  min-height: 74px;
  display: inline-flex;
  align-items: center;
  flex: 1 1 190px;
  color: var(--text);
}

.platform-panel {
  padding: 34px;
}

.native-platforms {
  padding-top: 56px;
}

.platform-showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "taboola taboola taboola taboola taboola taboola taboola outbrain outbrain outbrain outbrain outbrain"
    "taboola taboola taboola taboola taboola taboola taboola outbrain outbrain outbrain outbrain outbrain"
    "mgid mgid mgid mgid ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem"
    "mgid mgid mgid mgid ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem ecosystem";
  gap: 1.05rem;
  align-items: stretch;
}

.platform-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    #05080d;
  box-shadow: var(--shadow);
}

.platform-card > * {
  position: relative;
}

.platform-card:nth-child(odd) {
  transform: translateY(14px);
}

.platform-card:nth-child(even) {
  transform: translateY(-8px);
}

.platform-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(2, 3, 3, 0.9));
  pointer-events: none;
  z-index: 0;
}

.platform-card-featured {
  grid-area: taboola;
}

.platform-card-outbrain {
  grid-area: outbrain;
}

.platform-card-mgid {
  grid-area: mgid;
}

.platform-card-ecosystem {
  grid-area: ecosystem;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.platform-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
}

.platform-card-featured img {
  height: 315px;
  object-position: left top;
}

.platform-card-outbrain img,
.platform-card-mgid img {
  object-position: left top;
}

.platform-card-outbrain img {
  height: 285px;
}

.platform-card-mgid img {
  height: 265px;
}

.platform-card-ecosystem img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-position: center;
  opacity: 0.48;
}

.platform-card-body {
  position: relative;
  z-index: 1;
  padding: 1.2rem;
}

.platform-card-body h3 {
  margin-bottom: 0.7rem;
}

.platform-card-body ul {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.platform-card-body li {
  position: relative;
  padding-left: 1.05rem;
}

.platform-card-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(40, 183, 255, 0.55);
}

.platform-card-featured .platform-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: end;
}

.platform-metrics,
.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.platform-metrics {
  max-width: 330px;
  justify-content: flex-end;
}

.platform-metrics span,
.platform-tags span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem 0.62rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
}

.platform-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.platform-layout article {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

.platform-layout p {
  margin-top: 0.75rem;
}

.why-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 34px;
}

.why-panel p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 1rem;
}

.cta-section {
  padding-top: 56px;
}

.engagements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 34px;
}

.contact-copy h2 {
  font-size: clamp(1.65rem, 2.35vw, 2.35rem);
}

.contact-copy p {
  margin-top: 1rem;
  max-width: 510px;
}

.contact-image-panel {
  aspect-ratio: 16 / 9;
  margin-top: 1rem;
}

.contact-image-panel img {
  object-position: center 38%;
}

.contact-image-panel span {
  position: absolute;
  z-index: 1;
  left: 1rem;
  right: 1rem;
  bottom: 0.95rem;
  margin-bottom: 0;
  color: var(--text);
  text-transform: none;
}

.email-link {
  display: inline-flex;
  margin-top: 1.25rem;
  color: var(--cyan);
  font-weight: 850;
}

.contact-form {
  display: grid;
  gap: 0.9rem;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
}

.contact-form span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(2, 3, 3, 0.86);
  color: var(--text);
  padding: 0.85rem 0.9rem;
  outline: none;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(40, 183, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(40, 183, 255, 0.08);
}

.contact-form .button {
  width: 100%;
}

.form-note {
  min-height: 1.5rem;
  color: var(--green);
  font-weight: 800;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 28px;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(4, 115, 252, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012)),
    var(--panel);
  padding: 24px;
  box-shadow: var(--shadow);
}

.footer-brand img {
  display: block;
  width: clamp(112px, 13vw, 148px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(4, 115, 252, 0.24));
}

.footer-kicker {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.footer-cta h2 {
  max-width: 720px;
  margin-top: 0.45rem;
  font-size: clamp(1.45rem, 2.15vw, 2.1rem);
}

.footer-cta p:not(.footer-kicker) {
  margin-top: 0.65rem;
}

.footer-bottom,
.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom {
  justify-content: space-between;
  margin-top: 1.1rem;
}

.site-footer a {
  color: var(--text);
}

.legal-main {
  width: min(860px, calc(100% - 40px));
  margin-inline: auto;
  padding: 56px 0;
}

.legal-hero {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012)),
    var(--panel);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}

.legal-hero h1 {
  max-width: 760px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.legal-hero p {
  margin-top: 1rem;
  color: var(--muted);
}

.legal-content {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.legal-content section {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  padding: clamp(1.1rem, 3vw, 1.55rem);
}

.legal-content h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.legal-content p,
.legal-content li {
  color: var(--muted);
}

.legal-content p,
.legal-content ul {
  margin-top: 0.75rem;
}

.legal-content ul {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.1rem;
}

.legal-content li {
  list-style: disc;
}

@keyframes gridDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 72px 0, 0 72px, 0 0;
  }
}

@keyframes ambientSweep {
  0% {
    transform: translate3d(-2%, -1%, 0);
    opacity: 0.62;
  }
  100% {
    transform: translate3d(2%, 1%, 0);
    opacity: 0.95;
  }
}

@keyframes signalPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(40, 183, 255, 0.65);
  }
  50% {
    transform: scale(1.45);
    box-shadow: 0 0 26px rgba(255, 178, 74, 0.72);
  }
}

@keyframes panelScan {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 64px 0, 0 64px;
  }
}

@keyframes surfaceSweep {
  0%,
  58% {
    transform: translateX(-125%);
  }
  78%,
  100% {
    transform: translateX(125%);
  }
}

@keyframes activeSignal {
  0%,
  100% {
    border-color: rgba(4, 115, 252, 0.72);
    box-shadow: inset 0 0 38px rgba(4, 115, 252, 0.12);
  }
  50% {
    border-color: rgba(255, 178, 74, 0.48);
    box-shadow: inset 0 0 44px rgba(40, 183, 255, 0.16);
  }
}

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

@keyframes railGlide {
  0% {
    transform: translateX(-34%);
    opacity: 0.42;
  }
  100% {
    transform: translateX(34%);
    opacity: 0.86;
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .split-panel,
  .why-panel,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
  }

  .card-grid.four,
  .timeline-grid,
  .engagements {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "taboola"
      "outbrain"
      "mgid"
      "ecosystem";
  }

  .platform-card:nth-child(odd),
  .platform-card:nth-child(even) {
    transform: none;
  }

  .platform-card-featured .platform-card-body {
    grid-template-columns: 1fr;
  }

  .platform-metrics {
    max-width: none;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .nav-shell,
  .section-shell,
  .site-footer {
    width: min(100% - 28px, 1120px);
  }

  .nav-shell {
    min-height: 68px;
  }

  .nav-links {
    display: none;
  }

  .section-shell {
    padding: 40px 0;
  }

  .hero {
    padding-top: 28px;
  }

  h1 {
    font-size: clamp(2.45rem, 12vw, 3.4rem);
  }

  .hero-panel,
  .split-panel,
  .platform-panel,
  .platform-card-body,
  .why-panel,
  .contact-panel {
    padding: 18px;
  }

  .card-grid.four,
  .card-grid.two,
  .timeline-grid,
  .platform-layout,
  .engagements,
  .metric-strip {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .button,
  .nav-cta {
    width: 100%;
  }

  .nav-cta {
    justify-content: center;
    max-width: 132px;
  }

  .site-footer {
    padding-top: 38px;
  }

  .footer-cta,
  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .footer-cta {
    padding: 18px;
  }

  .footer-bottom {
    display: grid;
  }

  .platform-card img,
  .platform-card-featured img {
    height: 190px;
  }

  .platform-card-ecosystem {
    min-height: 360px;
  }

  .insight-visual {
    min-height: 360px;
  }

  .visual-copy {
    padding: 1.1rem;
  }

  .contact-image-panel {
    aspect-ratio: 4 / 3;
  }
}

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