/* =========================================================
   Viral Reach — Full Website Stylesheet
   Replace: assets/css/styles.css
   Brand: cinematic black, white, crimson red, premium glass
   Notes:
   - Campaign Support cards are styled as horizontal accordions.
   - Hover/active cards get a Tron-style red scan edge.
   - Mobile accordions stack vertically.
   ========================================================= */

:root {
  --vr-black: #030304;
  --vr-black-2: #070708;
  --vr-black-3: #0c0c0f;
  --vr-panel: rgba(11, 11, 14, 0.86);
  --vr-panel-solid: #0b0b0e;
  --vr-panel-soft: rgba(255, 255, 255, 0.035);
  --vr-white: #ffffff;
  --vr-text: #f4f4f5;
  --vr-muted: rgba(255, 255, 255, 0.66);
  --vr-soft: rgba(255, 255, 255, 0.48);
  --vr-faint: rgba(255, 255, 255, 0.12);
  --vr-line: rgba(255, 255, 255, 0.1);
  --vr-line-strong: rgba(255, 255, 255, 0.18);
  --vr-red: #ef2330;
  --vr-red-2: #c90f1d;
  --vr-red-3: #7b0610;
  --vr-red-soft: rgba(239, 35, 48, 0.18);
  --vr-red-glow: rgba(239, 35, 48, 0.5);
  --vr-gold: #c7a267;
  --vr-blue-grey: #8b95a5;
  --vr-radius-xs: 8px;
  --vr-radius-sm: 14px;
  --vr-radius-md: 22px;
  --vr-radius-lg: 32px;
  --vr-radius-xl: 44px;
  --vr-shadow: 0 26px 90px rgba(0, 0, 0, 0.58);
  --vr-shadow-red: 0 0 30px rgba(239, 35, 48, 0.18);
  --vr-container: 1320px;
  --vr-nav-height: 110px;
  --vr-ease: cubic-bezier(0.2, 0.78, 0.2, 1);
  --vr-ease-hard: cubic-bezier(0.16, 1, 0.3, 1);
  --vr-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vr-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color-scheme: dark;
  background: var(--vr-black);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 16% 8%, rgba(239, 35, 48, 0.12), transparent 28%),
    radial-gradient(circle at 84% 4%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, #020203 0%, #050506 42%, #020203 100%);
  color: var(--vr-text);
  font-family: var(--vr-font);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

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

button {
  border: 0;
  cursor: pointer;
}

::selection {
  background: rgba(239, 35, 48, 0.55);
  color: #fff;
}

.container {
  width: min(calc(100% - 40px), var(--vr-container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: clamp(76px, 8vw, 140px) 0;
}

.section-tight {
  padding: clamp(52px, 6vw, 94px) 0;
}

.section-dark {
  background: #030304;
}

.section-border {
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 800;
  transform: translateY(-140%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================================================
   Typography
   ========================================================= */

.eyebrow,
.kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--vr-blue-grey);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--vr-red);
  box-shadow: 0 0 20px rgba(239, 35, 48, 0.9);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--vr-display);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

h1 {
  max-width: 1050px;
  margin-bottom: 26px;
  font-size: clamp(3.2rem, 8.4vw, 8.6rem);
  font-weight: 950;
}

h1 span,
h2 span,
.text-red {
  color: var(--vr-red);
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.2rem, 5.2vw, 6.1rem);
  font-weight: 950;
}

h3 {
  margin-bottom: 14px;
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  font-weight: 900;
}

h4 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

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

.lead,
.hero-copy,
.section-lead {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.58fr);
  gap: clamp(28px, 5vw, 82px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.section-head.center {
  display: block;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.section-head.center .section-lead {
  margin-inline: auto;
}

.section-note {
  margin: 0;
  color: var(--vr-soft);
  font-size: 0.95rem;
}

/* =========================================================
   Buttons / CTAs
   ========================================================= */

.button,
.nav-cta,
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.28s var(--vr-ease),
    border-color 0.28s var(--vr-ease),
    background 0.28s var(--vr-ease),
    box-shadow 0.28s var(--vr-ease),
    color 0.28s var(--vr-ease);
}

.button:hover,
.nav-cta:hover,
.btn:hover {
  transform: translateY(-2px);
}

.button-primary,
.nav-cta,
.btn-primary {
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(135deg, var(--vr-red), var(--vr-red-2));
  color: #fff;
  box-shadow:
    0 16px 40px rgba(239, 35, 48, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.button-primary:hover,
.nav-cta:hover,
.btn-primary:hover {
  box-shadow:
    0 22px 58px rgba(239, 35, 48, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-ghost,
.btn-ghost {
  border-color: var(--vr-line-strong);
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  backdrop-filter: blur(14px);
}

.button-ghost:hover,
.btn-ghost:hover {
  border-color: rgba(239, 35, 48, 0.6);
  box-shadow: var(--vr-shadow-red);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 850;
}

.text-link span {
  color: var(--vr-red);
  transition: transform 0.22s ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

/* =========================================================
   Header / Navigation
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  min-height: var(--vr-nav-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 5, 7, 0.96), rgba(5, 5, 7, 0.82));
  backdrop-filter: blur(24px) saturate(150%);
  transition:
    min-height 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.site-header.is-scrolled,
.site-header[data-scrolled="true"] {
  min-height: 82px;
  background: rgba(4, 4, 5, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.52);
}

.nav-wrap {
  min-height: var(--vr-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height 0.25s ease;
}

.site-header.is-scrolled .nav-wrap,
.site-header[data-scrolled="true"] .nav-wrap {
  min-height: 82px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 52px;
  flex: 0 0 auto;
}

.brand-mark img {
  width: 72px;
  height: auto;
  object-fit: contain;
}

.brand-type {
  display: grid;
  gap: 2px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
}

.brand-type strong {
  font-size: 0.86rem;
}

.brand-type span {
  color: var(--vr-muted);
  font-size: 0.68rem;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 38px);
}

.site-nav > a:not(.nav-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 850;
  letter-spacing: -0.02em;
  transition: color 0.24s ease;
}

.site-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px;
  background: var(--vr-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.26s var(--vr-ease-hard);
}

.site-nav > a:hover,
.site-nav > a.is-active {
  color: #fff;
}

.site-nav > a:hover::after,
.site-nav > a.is-active::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 1002;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.menu-toggle span:not(.sr-only) {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
  transition: transform 0.22s ease, top 0.22s ease, opacity 0.22s ease;
}

.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 23px; }
.menu-toggle span:nth-child(3) { top: 31px; }

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 23px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 23px;
  transform: rotate(-45deg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* =========================================================
   Hero
   ========================================================= */

.hero,
.hero-video-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--vr-nav-height) + 76px) 0 clamp(64px, 8vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--vr-line);
}

.hero-video,
.hero-bg-video,
.hero-media video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 44%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(0deg, #030304 0%, transparent 42%),
    radial-gradient(circle at 78% 32%, rgba(239, 35, 48, 0.18), transparent 35%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 46%;
  background: linear-gradient(0deg, #030304 0%, transparent 100%);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

.hero-content {
  max-width: 1120px;
}

.hero-copy {
  margin-bottom: 32px;
}

.hero-actions,
.cta-actions,
.card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-meta span,
.stat-chip,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--vr-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 760;
  backdrop-filter: blur(10px);
}

/* =========================================================
   Generic Cards
   ========================================================= */

.card,
.glass-card,
.panel-card,
.service-card,
.package-card,
.location-card,
.client-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 10, 0.92);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

.card::before,
.glass-card::before,
.panel-card::before,
.service-card::before,
.package-card::before,
.location-card::before,
.client-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.11), transparent 32%),
    radial-gradient(circle at 100% 16%, rgba(239, 35, 48, 0.11), transparent 34%);
  opacity: 0.9;
}

.card > *,
.glass-card > *,
.panel-card > *,
.service-card > *,
.package-card > *,
.location-card > *,
.client-card > * {
  position: relative;
  z-index: 1;
}

.card-pad,
.service-card,
.package-card,
.location-card,
.client-card {
  padding: clamp(22px, 3vw, 34px);
}

.card-grid,
.services-grid,
.packages-grid,
.locations-grid,
.client-grid,
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* =========================================================
   Client Focus / Major Areas
   Hospitality, High-End Property, Automotive, Retail, SaaS
   ========================================================= */

.client-focus,
.major-areas,
.visual-clients {
  position: relative;
  padding: clamp(70px, 8vw, 130px) 0;
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
  background:
    radial-gradient(circle at 12% 8%, rgba(239, 35, 48, 0.08), transparent 28%),
    linear-gradient(180deg, #030304 0%, #070708 100%);
}

.client-focus .section-head,
.major-areas .section-head,
.visual-clients .section-head {
  margin-bottom: clamp(28px, 4vw, 54px);
}

.client-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 35, 48, 0.6) rgba(255, 255, 255, 0.08);
}

.client-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--vr-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  font-weight: 850;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.client-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 35, 48, 0.7);
  box-shadow: 0 0 26px rgba(239, 35, 48, 0.2);
}

.client-pill span,
.client-initial {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

/* Bigger visual version — preferred for homepage */
.client-showcase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.client-showcase-card {
  position: relative;
  isolation: isolate;
  min-height: clamp(310px, 34vw, 520px);
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--vr-line);
  background: #060607;
  box-shadow: 0 22px 82px rgba(0, 0, 0, 0.46);
  transition:
    transform 0.38s var(--vr-ease),
    border-color 0.38s var(--vr-ease),
    box-shadow 0.38s var(--vr-ease);
}

.client-showcase-card:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 35, 48, 0.72);
  box-shadow:
    0 32px 98px rgba(0, 0, 0, 0.56),
    0 0 34px rgba(239, 35, 48, 0.16);
}

.client-showcase-card img,
.client-showcase-card video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transform: scale(1.02);
  transition: transform 0.6s var(--vr-ease-hard), opacity 0.4s ease;
}

.client-showcase-card:hover img,
.client-showcase-card:hover video {
  opacity: 0.92;
  transform: scale(1.07);
}

.client-showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.58) 56%, rgba(0, 0, 0, 0.92) 100%),
    radial-gradient(circle at 50% 20%, rgba(239, 35, 48, 0.13), transparent 42%);
}

.client-showcase-content {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 2;
}

.client-showcase-content .kicker {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.68rem;
}

.client-showcase-content h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
}

.client-showcase-content p {
  max-width: 28ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  line-height: 1.46;
}

/* =========================================================
   Campaign Support Horizontal Accordions
   ========================================================= */

.campaign-support,
.campaign-section,
.support-section {
  position: relative;
  padding: clamp(74px, 8vw, 138px) 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(239, 35, 48, 0.11), transparent 30%),
    linear-gradient(180deg, #020203 0%, #070708 44%, #030304 100%);
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
}

.campaign-accordion,
.campaign-support-accordion,
.support-accordion,
.accordion-cards {
  display: flex;
  align-items: stretch;
  gap: 18px;
  min-height: clamp(520px, 58vw, 680px);
}

.campaign-accordion-card,
.support-accordion-card,
.accordion-panel,
.support-card {
  position: relative;
  isolation: isolate;
  flex: 0.72 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #050506;
  color: #fff;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5);
  transition:
    flex 0.62s var(--vr-ease-hard),
    transform 0.36s var(--vr-ease),
    border-color 0.36s var(--vr-ease),
    box-shadow 0.36s var(--vr-ease),
    filter 0.36s var(--vr-ease);
}

.campaign-accordion-card.is-active,
.campaign-accordion-card[aria-expanded="true"],
.support-accordion-card.is-active,
.support-accordion-card[aria-expanded="true"],
.accordion-panel.is-active,
.accordion-panel[aria-expanded="true"],
.support-card.is-active,
.support-card[aria-expanded="true"] {
  flex: 2.35 1 0;
}

.campaign-accordion:hover .campaign-accordion-card:not(:hover):not(.is-active),
.campaign-support-accordion:hover .campaign-accordion-card:not(:hover):not(.is-active),
.support-accordion:hover .support-accordion-card:not(:hover):not(.is-active),
.accordion-cards:hover .accordion-panel:not(:hover):not(.is-active) {
  filter: saturate(0.8) brightness(0.78);
}

.campaign-accordion-card:hover,
.campaign-accordion-card:focus-within,
.support-accordion-card:hover,
.support-accordion-card:focus-within,
.accordion-panel:hover,
.accordion-panel:focus-within,
.support-card:hover,
.support-card:focus-within {
  transform: translateY(-4px);
}

.campaign-accordion-card img,
.campaign-accordion-card video,
.support-accordion-card img,
.support-accordion-card video,
.accordion-panel img,
.accordion-panel video,
.support-card img,
.support-card video {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.74;
  transform: scale(1.02);
  transition:
    opacity 0.42s ease,
    transform 0.78s var(--vr-ease-hard),
    filter 0.42s ease;
}

.campaign-accordion-card:hover img,
.campaign-accordion-card:hover video,
.campaign-accordion-card.is-active img,
.campaign-accordion-card.is-active video,
.support-accordion-card:hover img,
.support-accordion-card:hover video,
.support-accordion-card.is-active img,
.support-accordion-card.is-active video,
.accordion-panel:hover img,
.accordion-panel:hover video,
.accordion-panel.is-active img,
.accordion-panel.is-active video,
.support-card:hover img,
.support-card:hover video,
.support-card.is-active img,
.support-card.is-active video {
  opacity: 0.88;
  transform: scale(1.06);
  filter: contrast(1.06) saturate(1.06);
}

.campaign-accordion-card::before,
.support-accordion-card::before,
.accordion-panel::before,
.support-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.14) 100%),
    radial-gradient(circle at 78% 18%, rgba(239, 35, 48, 0.16), transparent 38%);
  pointer-events: none;
}

/* Tron-style red activation line */
.campaign-accordion-card::after,
.support-accordion-card::after,
.accordion-panel::after,
.support-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(239, 35, 48, 0.94);
  box-shadow:
    0 0 10px rgba(239, 35, 48, 0.72),
    0 0 34px rgba(239, 35, 48, 0.2),
    inset 0 0 18px rgba(239, 35, 48, 0.22);
  transition: opacity 0.32s ease;
}

.tron-scan-line,
.campaign-accordion-card .scan-line,
.support-accordion-card .scan-line,
.accordion-panel .scan-line,
.support-card .scan-line {
  position: absolute;
  left: -44%;
  top: 0;
  z-index: 6;
  width: 44%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 35, 48, 1), transparent);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(239, 35, 48, 0.95));
  pointer-events: none;
}

.campaign-accordion-card:hover,
.campaign-accordion-card:focus-within,
.campaign-accordion-card.is-active,
.campaign-accordion-card[aria-expanded="true"],
.support-accordion-card:hover,
.support-accordion-card:focus-within,
.support-accordion-card.is-active,
.support-accordion-card[aria-expanded="true"],
.accordion-panel:hover,
.accordion-panel:focus-within,
.accordion-panel.is-active,
.accordion-panel[aria-expanded="true"],
.support-card:hover,
.support-card:focus-within,
.support-card.is-active,
.support-card[aria-expanded="true"] {
  border-color: rgba(239, 35, 48, 0.7);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.62),
    0 0 30px rgba(239, 35, 48, 0.2),
    inset 0 0 26px rgba(239, 35, 48, 0.08);
}

.campaign-accordion-card:hover::after,
.campaign-accordion-card:focus-within::after,
.campaign-accordion-card.is-active::after,
.campaign-accordion-card[aria-expanded="true"]::after,
.support-accordion-card:hover::after,
.support-accordion-card:focus-within::after,
.support-accordion-card.is-active::after,
.support-accordion-card[aria-expanded="true"]::after,
.accordion-panel:hover::after,
.accordion-panel:focus-within::after,
.accordion-panel.is-active::after,
.accordion-panel[aria-expanded="true"]::after,
.support-card:hover::after,
.support-card:focus-within::after,
.support-card.is-active::after,
.support-card[aria-expanded="true"]::after {
  opacity: 1;
}

.campaign-accordion-card:hover .tron-scan-line,
.campaign-accordion-card:hover .scan-line,
.campaign-accordion-card:focus-within .tron-scan-line,
.campaign-accordion-card:focus-within .scan-line,
.campaign-accordion-card.is-active .tron-scan-line,
.campaign-accordion-card.is-active .scan-line,
.campaign-accordion-card[aria-expanded="true"] .tron-scan-line,
.campaign-accordion-card[aria-expanded="true"] .scan-line,
.support-accordion-card:hover .tron-scan-line,
.support-accordion-card:hover .scan-line,
.support-accordion-card.is-active .tron-scan-line,
.support-accordion-card.is-active .scan-line,
.accordion-panel:hover .tron-scan-line,
.accordion-panel:hover .scan-line,
.accordion-panel.is-active .tron-scan-line,
.accordion-panel.is-active .scan-line,
.support-card:hover .tron-scan-line,
.support-card:hover .scan-line,
.support-card.is-active .tron-scan-line,
.support-card.is-active .scan-line {
  opacity: 1;
  animation: tron-scan-line 1.45s ease-in-out infinite;
}

@keyframes tron-scan-line {
  0% { left: -44%; }
  100% { left: 100%; }
}

.campaign-card-content,
.support-card-content,
.accordion-panel-content,
.accordion-content {
  position: absolute;
  inset: auto clamp(22px, 3vw, 44px) clamp(24px, 3.4vw, 48px) clamp(22px, 3vw, 44px);
  z-index: 3;
  display: grid;
  gap: 16px;
  max-width: 680px;
}

.campaign-card-content h3,
.support-card-content h3,
.accordion-panel-content h3,
.accordion-content h3 {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 5.05rem);
  line-height: 0.92;
  letter-spacing: -0.07em;
  text-wrap: balance;
}

.campaign-accordion-card.is-active .campaign-card-content h3,
.campaign-accordion-card[aria-expanded="true"] .campaign-card-content h3,
.accordion-panel.is-active .accordion-panel-content h3,
.accordion-panel[aria-expanded="true"] .accordion-panel-content h3 {
  max-width: 18ch;
}

.campaign-card-content p,
.support-card-content p,
.accordion-panel-content p,
.accordion-content p {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.55;
}

.campaign-card-extra,
.support-card-extra,
.accordion-panel-extra {
  display: grid;
  gap: 12px;
  max-width: 620px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    max-height 0.45s var(--vr-ease),
    transform 0.35s ease;
}

.campaign-accordion-card.is-active .campaign-card-extra,
.campaign-accordion-card[aria-expanded="true"] .campaign-card-extra,
.support-accordion-card.is-active .support-card-extra,
.support-accordion-card[aria-expanded="true"] .support-card-extra,
.accordion-panel.is-active .accordion-panel-extra,
.accordion-panel[aria-expanded="true"] .accordion-panel-extra,
.support-card.is-active .support-card-extra,
.support-card[aria-expanded="true"] .support-card-extra {
  opacity: 1;
  max-height: 260px;
  transform: translateY(0);
}

.campaign-card-button,
.accordion-trigger,
.support-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  text-indent: -9999px;
}

.accordion-trigger:focus-visible,
.support-trigger:focus-visible,
.campaign-card-button:focus-visible {
  outline: 2px solid var(--vr-red);
  outline-offset: -8px;
  border-radius: inherit;
}

/* =========================================================
   Services / Video & Content
   ========================================================= */

.service-card {
  min-height: 320px;
  display: grid;
  align-content: end;
  transition: transform 0.35s var(--vr-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 35, 48, 0.54);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45), var(--vr-shadow-red);
}

.service-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(255, 255, 255, 0.18);
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.08em;
}

.service-card p {
  max-width: 34ch;
}

/* =========================================================
   Packages
   ========================================================= */

.packages-grid {
  align-items: stretch;
}

.package-card {
  display: grid;
  gap: 24px;
  min-height: 520px;
}

.package-card.featured,
.package-card.is-featured {
  border-color: rgba(239, 35, 48, 0.56);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.56), 0 0 42px rgba(239, 35, 48, 0.16);
}

.package-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
}

.package-price strong {
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.package-price span {
  color: var(--vr-soft);
  font-size: 0.95rem;
}

.package-list,
.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.package-list li,
.check-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.72);
}

.package-list li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--vr-red);
  box-shadow: 0 0 14px rgba(239, 35, 48, 0.72);
}

/* =========================================================
   Locations
   ========================================================= */

.location-card {
  min-height: 280px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  transition: transform 0.3s var(--vr-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.location-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 35, 48, 0.5);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.42), var(--vr-shadow-red);
}

.location-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 850;
}

.location-card a span {
  color: var(--vr-red);
}

/* =========================================================
   CTA Band
   ========================================================= */

.cta-band {
  position: relative;
  padding: clamp(60px, 7vw, 110px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(239, 35, 48, 0.18);
  border-bottom: 1px solid rgba(239, 35, 48, 0.18);
  background:
    radial-gradient(circle at 18% 50%, rgba(239, 35, 48, 0.24), transparent 26%),
    linear-gradient(135deg, #09090b 0%, #160407 55%, #050506 100%);
}

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.cta-band h2 {
  max-width: 880px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 4.2vw, 5.2rem);
}

.cta-band p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Contact / Forms
   ========================================================= */

.form-card,
.contact-card,
.contact-aside-card {
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-md);
  background: rgba(255, 255, 255, 0.045);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--vr-shadow);
}

.form-grid,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 26px;
}

.field,
.form-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
}

input,
textarea,
select {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.44);
  color: #fff;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(239, 35, 48, 0.74);
  box-shadow: 0 0 0 4px rgba(239, 35, 48, 0.12);
  background: rgba(0, 0, 0, 0.62);
}

::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  padding: clamp(54px, 7vw, 90px) 0 34px;
  background: #020203;
  border-top: 1px solid var(--vr-line);
}

.footer-main,
.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
}

.footer-brand p {
  max-width: 420px;
  margin-top: 18px;
}

.footer-base {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.9rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.footer-links div {
  display: grid;
  gap: 10px;
}

.footer-links span {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--vr-line);
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.88rem;
  flex-wrap: wrap;
}

/* Agency credit. Full-width row so it drops below the copyright line at every
   width instead of squeezing into the two existing spans. */
.footer-credit {
  flex: 1 0 100%;
}

.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit a:hover {
  color: var(--vr-red);
}


/* =========================================================
   Reveal / Utility
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s var(--vr-ease), transform 0.68s var(--vr-ease);
}

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

.hide-mobile {
  display: initial;
}

.show-mobile {
  display: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --vr-nav-height: 92px;
  }

  .site-nav {
    gap: 20px;
  }

  .brand-mark {
    width: 62px;
  }

  .client-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-showcase-card:first-child {
    grid-column: span 2;
  }

  .campaign-accordion,
  .campaign-support-accordion,
  .support-accordion,
  .accordion-cards {
    min-height: 600px;
  }
}

@media (max-width: 980px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 110px 28px 38px;
    background:
      radial-gradient(circle at 50% 15%, rgba(239, 35, 48, 0.18), transparent 32%),
      rgba(3, 3, 4, 0.97);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.24s ease,
      visibility 0.24s ease,
      transform 0.24s ease;
  }

  .site-nav.is-open,
  .site-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav > a:not(.nav-cta) {
    min-height: auto;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 950;
    line-height: 1;
  }

  .site-nav > a:not(.nav-cta)::after {
    bottom: -6px;
  }

  .nav-cta {
    margin-top: 12px;
    min-height: 58px;
    padding-inline: 26px;
  }

  .section-head,
  .cta-grid,
  .form-grid,
  .contact-layout,
  .footer-main,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .services-grid,
  .packages-grid,
  .locations-grid,
  .client-grid,
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-accordion,
  .campaign-support-accordion,
  .support-accordion,
  .accordion-cards {
    flex-direction: column;
    min-height: auto;
  }

  .campaign-accordion-card,
  .support-accordion-card,
  .accordion-panel,
  .support-card,
  .campaign-accordion-card.is-active,
  .campaign-accordion-card[aria-expanded="true"],
  .support-accordion-card.is-active,
  .support-accordion-card[aria-expanded="true"],
  .accordion-panel.is-active,
  .accordion-panel[aria-expanded="true"],
  .support-card.is-active,
  .support-card[aria-expanded="true"] {
    flex: none;
    min-height: 430px;
  }

  .campaign-card-content,
  .support-card-content,
  .accordion-panel-content,
  .accordion-content {
    inset: auto 24px 26px 24px;
  }

  .campaign-card-content h3,
  .support-card-content h3,
  .accordion-panel-content h3,
  .accordion-content h3 {
    max-width: 16ch;
    font-size: clamp(2.35rem, 10vw, 4.2rem);
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 28px), var(--vr-container));
  }

  h1 {
    font-size: clamp(3rem, 15vw, 5.1rem);
  }

  h2 {
    font-size: clamp(2.35rem, 12vw, 4.2rem);
  }

  .hero,
  .hero-video-stage {
    min-height: 92svh;
    padding-top: calc(var(--vr-nav-height) + 48px);
  }

  .brand-type {
    display: none;
  }

  .brand-mark {
    width: 58px;
    height: 44px;
  }

  .hero-actions,
  .cta-actions,
  .card-actions {
    align-items: stretch;
  }

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

  .card-grid,
  .services-grid,
  .packages-grid,
  .locations-grid,
  .client-grid,
  .industry-grid,
  .two-grid,
  .client-showcase {
    grid-template-columns: 1fr;
  }

  .client-showcase-card:first-child {
    grid-column: auto;
  }

  .client-showcase-card {
    min-height: 380px;
  }

  .campaign-accordion-card,
  .support-accordion-card,
  .accordion-panel,
  .support-card,
  .campaign-accordion-card.is-active,
  .campaign-accordion-card[aria-expanded="true"],
  .support-accordion-card.is-active,
  .support-accordion-card[aria-expanded="true"],
  .accordion-panel.is-active,
  .accordion-panel[aria-expanded="true"],
  .support-card.is-active,
  .support-card[aria-expanded="true"] {
    min-height: 410px;
    border-radius: 20px;
  }

  .campaign-card-extra,
  .support-card-extra,
  .accordion-panel-extra {
    opacity: 1;
    max-height: none;
    transform: none;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    display: grid;
  }

  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: initial;
  }
}

@media (max-width: 460px) {
  .site-header,
  .site-header.is-scrolled,
  .site-header[data-scrolled="true"] {
    min-height: 78px;
  }

  .nav-wrap,
  .site-header.is-scrolled .nav-wrap,
  .site-header[data-scrolled="true"] .nav-wrap {
    min-height: 78px;
  }

  .hero,
  .hero-video-stage {
    padding-top: 112px;
  }

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

  .client-showcase-content,
  .campaign-card-content,
  .support-card-content,
  .accordion-panel-content,
  .accordion-content {
    inset-inline: 18px;
    bottom: 20px;
  }
}

/* =========================================================
   Motion Safety
   ========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .campaign-accordion-card:hover .tron-scan-line,
  .campaign-accordion-card:hover .scan-line,
  .campaign-accordion-card.is-active .tron-scan-line,
  .campaign-accordion-card.is-active .scan-line,
  .support-accordion-card:hover .tron-scan-line,
  .support-accordion-card:hover .scan-line,
  .support-accordion-card.is-active .tron-scan-line,
  .support-accordion-card.is-active .scan-line,
  .accordion-panel:hover .tron-scan-line,
  .accordion-panel:hover .scan-line,
  .accordion-panel.is-active .tron-scan-line,
  .accordion-panel.is-active .scan-line {
    animation: none !important;
  }
}


/* =========================================================
   Viral Reach — Front Page + Lead Generation Page Additions
   ========================================================= */

.brand-mark-text {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 70% 20%, rgba(239, 35, 48, 0.42), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(239,35,48,0.16));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.page-hero-kicker {
  max-width: 860px;
}

.hero-copy strong,
.stage-copy strong,
.flow-copy strong {
  color: #fff;
}

.stage-section {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 9vw, 156px) 0;
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
  background:
    radial-gradient(circle at 82% 18%, rgba(239, 35, 48, 0.16), transparent 30%),
    radial-gradient(circle at 8% 72%, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #050506 0%, #020203 100%);
}

.stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
}

.stage-title {
  margin: 0;
  max-width: 920px;
  font-size: clamp(3.2rem, 8vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
}

.stage-copy {
  display: grid;
  gap: 22px;
  max-width: 640px;
  margin-left: auto;
}

.stage-copy p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.55;
}

.stage-line {
  width: min(100%, 420px);
  height: 1px;
  background: linear-gradient(90deg, var(--vr-red), transparent);
  box-shadow: 0 0 18px rgba(239, 35, 48, 0.62);
}

.stage-statement {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(239, 35, 48, 0.28);
  border-radius: var(--vr-radius-md);
  background:
    radial-gradient(circle at 8% 0%, rgba(239, 35, 48, 0.2), transparent 42%),
    rgba(255,255,255,0.035);
  box-shadow: 0 22px 78px rgba(0,0,0,0.38), 0 0 32px rgba(239,35,48,0.08);
}

.stage-statement p {
  margin: 0;
  max-width: 980px;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 880;
}

.client-showcase-card,
.campaign-accordion-card,
.support-accordion-card,
.accordion-panel,
.support-card {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.7) 58%, rgba(0,0,0,0.96) 100%),
    radial-gradient(circle at 80% 12%, rgba(239, 35, 48, 0.24), transparent 38%),
    var(--card-image, linear-gradient(135deg, #151518, #040405));
  background-size: cover;
  background-position: center;
}

.client-showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(239, 35, 48, 0);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.client-showcase-card:hover::after {
  border-color: rgba(239, 35, 48, 0.72);
  box-shadow: inset 0 0 22px rgba(239, 35, 48, 0.14), 0 0 22px rgba(239, 35, 48, 0.18);
}

.flow-section {
  padding: clamp(78px, 8vw, 132px) 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(239,35,48,0.09), transparent 28%),
    #030304;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 4vw, 54px);
}

.flow-step {
  position: relative;
  min-height: 250px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-md);
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.062), rgba(255,255,255,0.018)),
    rgba(7,7,8,0.88);
}

.flow-step::before {
  content: attr(data-step);
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(239,35,48,0.42);
  font-size: clamp(2rem, 4.5vw, 4.8rem);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.08em;
}

.flow-step h3 {
  max-width: 11ch;
  margin-top: 72px;
}

.flow-step p {
  margin: 0;
  color: rgba(255,255,255,0.64);
}

.proof-band {
  padding: clamp(54px, 6vw, 96px) 0;
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
  background: linear-gradient(90deg, rgba(239,35,48,0.12), rgba(255,255,255,0.03), rgba(239,35,48,0.08));
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.proof-item {
  padding: clamp(20px, 2.6vw, 32px);
  border-left: 1px solid rgba(239,35,48,0.5);
  background: rgba(0,0,0,0.22);
}

.proof-item strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(1.25rem, 1.9vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.proof-item span {
  color: rgba(255,255,255,0.62);
}

.page-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}

.intent-card {
  position: sticky;
  top: calc(var(--vr-nav-height) + 26px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(239,35,48,0.28);
  border-radius: var(--vr-radius-lg);
  background:
    radial-gradient(circle at 75% 8%, rgba(239,35,48,0.22), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018));
  box-shadow: var(--vr-shadow);
}

.intent-card ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.intent-card li {
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--vr-line);
  color: rgba(255,255,255,0.74);
}

.page-copy p {
  max-width: 74ch;
}

@media (max-width: 1180px) {
  .client-showcase,
  .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-step:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 980px) {
  .stage-grid,
  .page-intro-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .stage-copy {
    margin-left: 0;
  }

  .intent-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  .flow-grid,
  .client-showcase {
    grid-template-columns: 1fr;
  }

  .flow-step:last-child {
    grid-column: auto;
  }

  .stage-title {
    font-size: clamp(3.4rem, 17vw, 6.4rem);
  }

  .stage-statement p {
    font-size: clamp(1.55rem, 8vw, 2.8rem);
  }
}


/* =========================================================
   Final Pete Pass — Logo, Centered Hero, Platform Strip,
   Industry Images, Paid Promotion Package
   ========================================================= */

.brand-logo {
  gap: 0;
}

.logo-mark {
  width: clamp(118px, 10vw, 172px);
  height: auto;
}

.logo-mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(239, 35, 48, 0.16));
}

.footer-brand .logo-mark {
  width: clamp(150px, 14vw, 220px);
}

.brand-mark-text {
  display: none;
}

/* Keep the hero in the original centered/top composition, not pushed low-left. */
.hero,
.hero-video-stage {
  align-items: start;
  min-height: 92svh;
  padding: calc(var(--vr-nav-height) + 42px) 0 clamp(54px, 7vw, 96px);
}

.hero-layout {
  min-height: calc(92svh - var(--vr-nav-height) - 116px);
  align-items: start;
  justify-items: center;
  padding-top: clamp(26px, 5.5vw, 82px);
  text-align: center;
}

.hero-content {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.hero-copy {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 28px;
}

.hero-actions,
.hero-meta {
  justify-content: center;
}

.hero .eyebrow,
.hero-video-stage .eyebrow {
  justify-content: center;
}

h1 {
  max-width: 920px;
  margin-inline: auto;
  font-size: clamp(2.9rem, 6.2vw, 6.2rem);
  line-height: 0.93;
  letter-spacing: -0.065em;
}

h2 {
  font-size: clamp(2.05rem, 4.35vw, 4.9rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.stage-title {
  font-size: clamp(2.6rem, 5.8vw, 6.6rem);
  letter-spacing: -0.075em;
}

.client-showcase-card,
.campaign-accordion-card,
.support-accordion-card,
.accordion-panel,
.support-card {
  background-position: var(--card-position, center);
}

.client-showcase-content h3 {
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  letter-spacing: -0.045em;
}

.campaign-card-content h3,
.support-card-content h3,
.accordion-panel-content h3,
.accordion-content h3 {
  max-width: 15ch;
  font-size: clamp(1.75rem, 3.4vw, 3.45rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.campaign-accordion-card.is-active .campaign-card-content h3,
.campaign-accordion-card[aria-expanded="true"] .campaign-card-content h3,
.accordion-panel.is-active .accordion-panel-content h3,
.accordion-panel[aria-expanded="true"] .accordion-panel-content h3 {
  max-width: 18ch;
}

.platform-strip {
  position: relative;
  padding: clamp(54px, 6vw, 96px) 0;
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
  background:
    radial-gradient(circle at 14% 20%, rgba(239, 35, 48, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
}

.platform-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

.platform-layout h2 {
  max-width: 780px;
  margin-bottom: 0;
}

.platform-copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.platform-copy p {
  max-width: 58ch;
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
}

.platform-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.platform-logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    rgba(0,0,0,0.34);
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}

.platform-logo::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--vr-red);
  box-shadow: 0 0 16px rgba(239,35,48,0.85);
}

.platform-logo:hover {
  border-color: rgba(239,35,48,0.62);
  box-shadow: 0 20px 58px rgba(0,0,0,0.34), 0 0 28px rgba(239,35,48,0.16);
  transform: translateY(-2px);
}

.packages-section {
  background:
    radial-gradient(circle at 80% 12%, rgba(239,35,48,0.12), transparent 30%),
    linear-gradient(180deg, #030304 0%, #070708 100%);
}

.package-card {
  align-content: start;
}

.package-card .button {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

@media (max-width: 980px) {
  .hero,
  .hero-video-stage {
    min-height: 86svh;
    padding-top: calc(var(--vr-nav-height) + 26px);
  }

  .hero-layout {
    min-height: auto;
    padding-top: clamp(18px, 6vw, 52px);
  }

  .platform-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .platform-copy {
    justify-items: center;
  }

  .platform-logos {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  h1 {
    font-size: clamp(2.55rem, 12vw, 4.5rem);
  }

  h2,
  .stage-title {
    font-size: clamp(2.1rem, 10vw, 3.8rem);
  }

  .hero-meta span {
    font-size: 0.76rem;
  }

  .platform-logo {
    min-height: 44px;
    padding-inline: 14px;
  }
}


/* =========================================================
   Locked Cleanup Pass — form wiring, Typeform-style brief,
   package readability, front-page buttons, contact hero spacing
   ========================================================= */

.footer-email {
  margin-top: 8px;
}

.footer-email a {
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}

.footer-email a:hover {
  color: var(--vr-red);
}

/* Front page: keep the approved centered hero, only push the buttons/meta lower. */
body.home-page .hero-layout {
  min-height: calc(92svh - var(--vr-nav-height) - 110px);
}

body.home-page .hero-content {
  min-height: calc(92svh - var(--vr-nav-height) - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.home-page .hero-copy {
  margin-bottom: 0;
}

body.home-page .hero-actions {
  margin-top: auto;
  padding-top: clamp(90px, 20vh, 260px);
}

body.home-page .hero-meta {
  margin-top: 18px;
}

/* Keep package words inside the cards. */
.package-card h3 {
  max-width: 14ch;
  font-size: clamp(1.85rem, 2.55vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: -0.052em;
}

.package-price {
  display: grid;
  align-items: start;
  gap: 8px;
  margin: 10px 0 18px;
}

.package-price strong {
  display: block;
  max-width: 100%;
  font-size: clamp(2.55rem, 4.15vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.package-price span {
  display: block;
  max-width: 24ch;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.34;
}

.package-price-label strong {
  font-size: clamp(2.4rem, 3.7vw, 3.65rem);
}

.package-list {
  font-size: clamp(0.96rem, 1vw, 1.05rem);
}

/* Make the card imagery obvious instead of buried under black gradients. */
.client-showcase-card,
.campaign-accordion-card,
.support-accordion-card,
.accordion-panel,
.support-card {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.36) 46%, rgba(0,0,0,0.88) 100%),
    radial-gradient(circle at 80% 12%, rgba(239,35,48,0.18), transparent 34%),
    var(--card-image, linear-gradient(135deg, #151518, #040405));
  background-size: cover;
  background-position: var(--card-position, center);
}

.client-showcase-card::before,
.campaign-accordion-card::before,
.support-accordion-card::before,
.accordion-panel::before,
.support-card::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.06) 100%);
}

.client-showcase-content h3 {
  font-size: clamp(1.45rem, 2vw, 2.05rem);
}

.campaign-card-content h3,
.support-card-content h3,
.accordion-panel-content h3,
.accordion-content h3 {
  max-width: 17ch;
  font-size: clamp(1.75rem, 3vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.campaign-accordion-card.is-active .campaign-card-content h3,
.campaign-accordion-card[aria-expanded="true"] .campaign-card-content h3 {
  max-width: 20ch;
}

/* Strategic TikTok/video proof placement. */
.video-proof-section {
  padding: clamp(70px, 8vw, 128px) 0;
  border-top: 1px solid var(--vr-line);
  border-bottom: 1px solid var(--vr-line);
  background:
    radial-gradient(circle at 82% 22%, rgba(239,35,48,0.12), transparent 32%),
    linear-gradient(180deg, #020203 0%, #070708 100%);
}

.video-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
}

.video-proof-copy h2 {
  max-width: 780px;
}

.video-proof-copy p:not(.eyebrow) {
  max-width: 62ch;
  color: rgba(255,255,255,0.7);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.58;
}

.phone-video-card {
  position: relative;
  width: min(100%, 310px);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(239,35,48,0.34);
  border-radius: 34px;
  background: #050506;
  box-shadow: 0 30px 95px rgba(0,0,0,0.55), 0 0 34px rgba(239,35,48,0.16);
}

.phone-demo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contact page: video starts below the fixed menu, not hidden under it. */
.contact-page .contact-hero,
.thank-you-page .contact-hero {
  position: relative;
  isolation: isolate;
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding: calc(var(--vr-nav-height) + 92px) 0 clamp(76px, 8vw, 126px);
  overflow: hidden;
  border-bottom: 1px solid var(--vr-line);
  background: #030304;
}

.contact-hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
}

.contact-page .contact-hero::before,
.thank-you-page .contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.68) 52%, rgba(0,0,0,0.42) 100%),
    linear-gradient(0deg, #030304 0%, transparent 46%);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
  gap: clamp(28px, 6vw, 82px);
  align-items: end;
}

.contact-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6rem);
}

.contact-hero-note {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--vr-radius-md);
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(12px);
}

.contact-hero-note p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.58;
}

.typeform-section {
  padding: clamp(74px, 8vw, 132px) 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(239,35,48,0.12), transparent 30%),
    #030304;
}

.typeform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}

.typeform-card {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.typeform-intro h2 {
  margin-bottom: 12px;
}

.typeform-intro p:not(.eyebrow) {
  max-width: 62ch;
  margin: 0;
  color: rgba(255,255,255,0.66);
}

.type-question {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--vr-radius-md);
  background:
    radial-gradient(circle at 95% 0%, rgba(239,35,48,0.13), transparent 34%),
    rgba(0,0,0,0.28);
}

.question-number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(239,35,48,0.46);
  font-size: clamp(1.6rem, 3vw, 3.2rem);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.08em;
}

.type-question h3 {
  max-width: 720px;
  margin: 0;
  padding-right: 72px;
  font-size: clamp(1.55rem, 2.35vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.052em;
}

.form-row.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.platform-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-pill {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-pill span {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.78);
  font-weight: 850;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.choice-pill span::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  box-shadow: none;
}

.choice-pill:hover span,
.choice-pill input:focus-visible + span {
  border-color: rgba(239,35,48,0.5);
  color: #fff;
  transform: translateY(-1px);
}

.choice-pill input:checked + span {
  border-color: rgba(239,35,48,0.86);
  background: rgba(239,35,48,0.14);
  color: #fff;
  box-shadow: 0 0 22px rgba(239,35,48,0.12), inset 0 0 18px rgba(239,35,48,0.08);
}

.choice-pill input:checked + span::before {
  background: var(--vr-red);
  box-shadow: 0 0 14px rgba(239,35,48,0.9);
}

.profile-links-field {
  margin-top: 4px;
}

.upload-field input[type="file"] {
  min-height: 64px;
  padding: 18px;
  border-style: dashed;
}

.upload-field small {
  display: block;
  color: rgba(255,255,255,0.48);
  line-height: 1.45;
}

.honeypot {
  display: none !important;
}

.typeform-submit {
  justify-self: start;
}

.typeform-aside {
  position: sticky;
  top: calc(var(--vr-nav-height) + 24px);
  display: grid;
  gap: 18px;
}

.aside-media {
  min-height: 240px;
  border: 1px solid rgba(239,35,48,0.2);
  border-radius: var(--vr-radius-md);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.62)),
    var(--card-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 70px rgba(0,0,0,0.4);
}

@media (max-width: 1080px) {
  .platform-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body.home-page .hero-layout,
  body.home-page .hero-content {
    min-height: auto;
  }

  body.home-page .hero-actions {
    margin-top: clamp(56px, 12vw, 92px);
    padding-top: 0;
  }

  .video-proof-grid,
  .contact-hero-grid,
  .typeform-grid {
    grid-template-columns: 1fr;
  }

  .typeform-aside {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  .package-card h3 {
    font-size: clamp(1.9rem, 8vw, 2.85rem);
  }

  .package-price strong,
  .package-price-label strong {
    font-size: clamp(2.45rem, 14vw, 3.7rem);
  }

  .form-row.two-cols,
  .choice-grid,
  .platform-choice-grid {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-hero,
  .thank-you-page .contact-hero {
    padding-top: calc(var(--vr-nav-height) + 60px);
  }

  .contact-hero h1 {
    font-size: clamp(2.55rem, 12vw, 4.6rem);
  }

  .phone-video-card {
    width: min(100%, 260px);
  }
}

/* =========================================================
   Checkbox Selector Fix — Small boxes on the left
   ========================================================= */
.choice-grid,
.platform-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.platform-choice-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.choice-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.8);
  font-weight: 850;
  cursor: pointer;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.choice-pill input[type="checkbox"] {
  position: static;
  inset: auto;
  flex: 0 0 17px;
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  padding: 0;
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
  cursor: pointer;
}

.choice-pill input[type="checkbox"]:checked {
  border-color: rgba(239,35,48,0.95);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 38%),
    var(--vr-red);
  box-shadow: 0 0 16px rgba(239,35,48,0.55), inset 0 0 0 2px rgba(0,0,0,0.18);
}

.choice-pill input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(239,35,48,0.72);
  outline-offset: 3px;
}

.choice-pill span {
  display: block;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.25;
  font-weight: 850;
  box-shadow: none;
  transition: none;
}

.choice-pill span::before {
  content: none;
}

.choice-pill:hover,
.choice-pill:focus-within {
  border-color: rgba(239,35,48,0.5);
  color: #fff;
  transform: translateY(-1px);
}

.choice-pill:has(input[type="checkbox"]:checked) {
  border-color: rgba(239,35,48,0.86);
  background: rgba(239,35,48,0.14);
  color: #fff;
  box-shadow: 0 0 22px rgba(239,35,48,0.12), inset 0 0 18px rgba(239,35,48,0.08);
}

.choice-pill:hover span,
.choice-pill input:focus-visible + span,
.choice-pill input:checked + span {
  color: inherit;
  transform: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 720px) {
  .choice-grid,
  .platform-choice-grid {
    grid-template-columns: 1fr;
  }

  .choice-pill {
    width: 100%;
  }
}


/* =========================================================
   Contact page founder video card
   ========================================================= */

.aside-video-frame {
  position: relative;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #050506;
}

.aside-card-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  background: #050506;
}

.aside-card-video:focus-visible {
  outline: 2px solid rgba(239,35,48,0.82);
  outline-offset: 4px;
}

/* =========================================================
   South Africa final visual parity + package-card repair
   ========================================================= */

/* Match the approved .com card rendering: use a real image layer as well as
   the CSS fallback so sector/campaign visuals remain visible and predictable. */
.client-showcase-card > img,
.campaign-accordion-card > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  transform: scale(1.02);
  transition: transform 0.6s var(--vr-ease-hard), opacity 0.4s ease;
}

.client-showcase-card:hover > img,
.campaign-accordion-card:hover > img,
.campaign-accordion-card.is-active > img,
.campaign-accordion-card[aria-expanded="true"] > img {
  opacity: 0.96;
  transform: scale(1.06);
}

/* SA package labels are words, not currency figures. Do not let the generic
   large-price styling split them inside narrower cards. */
.package-card {
  min-width: 0;
  grid-template-rows: auto auto auto 1fr auto;
}

.package-card > * {
  min-width: 0;
}

.package-price {
  min-height: 88px;
}

.package-price-label strong {
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.package-price-label span {
  max-width: 100%;
}

.package-card.featured .kicker,
.package-card.is-featured .kicker {
  padding-right: 148px;
}

@media (max-width: 980px) {
  /* Three mismatched-width pricing cards looked untidy at tablet widths.
     Stack them cleanly before the phone breakpoint instead. */
  .packages-section .packages-grid {
    grid-template-columns: 1fr;
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .packages-section .package-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .package-card.featured .kicker,
  .package-card.is-featured .kicker {
    padding-right: 0;
    margin-top: 42px;
  }

  .package-price-label strong {
    font-size: clamp(1.95rem, 11vw, 2.8rem);
  }
}

/* Final hero scale: slimmer, more premium, less shouty. */
body.home-page #hero-title {
  max-width: 900px;
  font-size: clamp(2.35rem, 4.6vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

@media (max-width: 720px) {
  body.home-page #hero-title {
    font-size: clamp(2.25rem, 10.2vw, 3.35rem);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.04em;
  }
}

/* =========================================================
   Feature imagery — portrait feature and wide band
   ========================================================= */
.feature-media,
.feature-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-lg);
  background: #050506;
  box-shadow: var(--vr-shadow);
}

.feature-media {
  width: min(100%, 620px);
  aspect-ratio: 4 / 5;
}

/* Portrait features carry a caption too, so they need the same scrim the wide
   bands use — otherwise the text sits directly on a photograph. */
.feature-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.30) 52%, rgba(0, 0, 0, 0.88) 100%),
    radial-gradient(circle at 84% 14%, rgba(239, 35, 48, 0.18), transparent 42%);
}

.feature-media .feature-caption { z-index: 2; }

.feature-band {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.feature-media img,
.feature-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.46) 62%, rgba(0,0,0,0.82) 100%),
    radial-gradient(circle at 84% 18%, rgba(239,35,48,0.20), transparent 40%);
}

.feature-caption {
  position: absolute;
  inset: auto clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
  margin: 0;
  color: #fff;
}

.feature-caption h3 {
  margin: 0 0 8px;
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.feature-caption p {
  max-width: 48ch;
  margin: 0;
  color: rgba(255,255,255,0.74);
}

/* =========================================================
   Format cards — the "What we make" grid
   ========================================================= */
.format-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.format-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border: 1px solid rgba(239, 35, 48, 0.34);
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 24%, rgba(239, 35, 48, 0.22), transparent 72%),
    rgba(255, 255, 255, 0.035);
  color: var(--vr-red);
  box-shadow: 0 0 22px rgba(239, 35, 48, 0.12);
}

.format-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.format-card h3 {
  margin: 0;
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.14;
  letter-spacing: -0.032em;
}

.format-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.96rem;
  line-height: 1.5;
}

/* The campaign path infographic — shown crisp, with no gradient overlay,
   because it is a diagram rather than a photograph. */
.path-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-lg);
  background: #050506;
  box-shadow: var(--vr-shadow);
}

.path-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.path-figure figcaption {
  padding: 16px clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--vr-line);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.94rem;
  line-height: 1.5;
}

.path-steps {
  margin-top: clamp(24px, 3vw, 42px);
}

/* =========================================================
   Balanced grids
   The column count is derived from the item count so a row is never left with an
   orphan beside empty slots. Where a count does not divide (5, 7), the trailing
   item spans the full row instead of sitting in a half-empty one.
   ========================================================= */
.balanced-grid {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.balanced-grid > .span-all {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .balanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .balanced-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Motion safety
   [data-reveal] starts hidden, so it must never be able to stay hidden.
   ========================================================= */
@media (scripting: none) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   Free 30-second video offer — modal
   Deliberately compact: tightened padding, 13px type scale and a two-up
   field grid so five fields still fit a phone screen without scrolling.
   ========================================================= */
.offer-modal[hidden] { display: none; }

.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 14px;
}

.offer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 4, 0.86);
  backdrop-filter: blur(7px);
  animation: offerFade 0.22s ease both;
}

.offer-card {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  max-height: 92svh;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(239, 35, 48, 0.34);
  border-radius: var(--vr-radius-lg);
  background:
    radial-gradient(circle at 84% 0%, rgba(239, 35, 48, 0.22), transparent 42%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    #08080a;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.74);
  animation: offerRise 0.28s var(--vr-ease) both;
}

.offer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.offer-close:hover { border-color: rgba(239, 35, 48, 0.7); background: rgba(239, 35, 48, 0.12); }
.offer-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.offer-card .eyebrow { margin: 0 0 8px; font-size: 0.68rem; letter-spacing: 0.18em; }

.offer-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.34rem, 2.9vw, 1.82rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.offer-lead {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.5;
}

.offer-form { display: grid; gap: 10px; }

/* Scarcity chip — the offer is capped at five productions a month, so the limit
   is stated plainly rather than implied by a fake countdown. */
.offer-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 13px;
  padding: 5px 11px;
  border: 1px solid rgba(239, 35, 48, 0.4);
  border-radius: 999px;
  background: rgba(239, 35, 48, 0.12);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.offer-scarcity::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--vr-red);
  box-shadow: 0 0 10px rgba(239, 35, 48, 0.85);
}

.offer-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.offer-fields .form-field--wide { grid-column: 1 / -1; }

.offer-form .form-field { display: grid; gap: 4px; }

.offer-form .form-field > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-form .form-field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
}

.offer-form .form-field input::placeholder { color: rgba(255, 255, 255, 0.32); }

.offer-form .form-field input:focus {
  outline: none;
  border-color: rgba(239, 35, 48, 0.62);
  background: rgba(239, 35, 48, 0.07);
}

.offer-form .button { width: 100%; justify-content: center; padding: 12px 18px; font-size: 0.95rem; }

.offer-note {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.74rem;
  line-height: 1.45;
}

.offer-dismiss {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.42);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

.offer-dismiss:hover { color: rgba(255, 255, 255, 0.78); }

body.offer-open { overflow: hidden; }

@keyframes offerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes offerRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 470px) {
  .offer-fields { grid-template-columns: 1fr; }
  .offer-card { padding: 20px 16px; }
}

/* =========================================================
   Market-page brief form
   The same compact treatment as the offer modal: tight labels, a two-up
   field grid, and a full-width submit.
   ========================================================= */
.mini-form { display: grid; gap: 11px; }

.mini-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
}

.mini-form .form-field { display: grid; gap: 4px; }

.mini-form .form-field > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mini-form input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
}

.mini-form input::placeholder { color: rgba(255, 255, 255, 0.32); }

.mini-form input:focus {
  outline: none;
  border-color: rgba(239, 35, 48, 0.62);
  background: rgba(239, 35, 48, 0.07);
}

.mini-form .button { width: 100%; justify-content: center; padding: 12px 18px; }

@media (max-width: 560px) {
  .mini-form .form-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Zoomable figure + lightbox
   The retention diagram is dense, so on a phone it must be able to open
   full-screen rather than be squinted at. The hint is touch-only.
   ========================================================= */
.figure-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.figure-zoom img { display: block; width: 100%; height: auto; }

.figure-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 3, 4, 0.74);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

@media (hover: hover) and (pointer: fine) {
  .figure-zoom { cursor: zoom-in; }
  .figure-zoom-hint { display: none; }
}

.retention-checks { margin-top: clamp(24px, 3vw, 40px); }
.retention-checks .check-list { display: grid; gap: 13px; }

.zoom-modal[hidden] { display: none; }

.zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 14px;
}

.zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 4, 0.95);
  animation: offerFade 0.2s ease both;
}

.zoom-image {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 92svh;
  border: 1px solid var(--vr-line);
  border-radius: var(--vr-radius-md);
}

.zoom-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vr-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}

.zoom-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Showcase video inside a framed figure. Its first and last frames match, so it
   loops continuously rather than playing once and freezing. */
.figure-video {
  display: block;
  width: 100%;
  height: auto;
  background: #050506;
}

/* =========================================================
   Hero video legibility on narrow screens
   Below ~1100px the hero switches to top-aligned centred text, which puts the
   copy over the bright upper area of the footage. Measured with
   _build/check-contrast.py: body copy fell to 3.14:1 there. Deepen the scrim
   and lift less of the video so the type clears WCAG AA at every width.
   ========================================================= */
/* Hero: one consistent, slightly transparent tone.
   The hero previously stacked a dark frame scrim, a 46%-height bottom fade and
   later a near-solid black pool behind the text — which blacked out the footage
   entirely. A search over uniform scrim values found 0.60 is the lightest tone
   that still clears WCAG AA once the copy is brightened. One layer, one value,
   top to bottom and left to right. */
.hero-video,
.hero-bg-video,
.hero-media video { opacity: 1; }

.hero::before {
  background: rgba(3, 3, 4, 0.6);
}

.hero::after { content: none; }

.hero-video-stage .hero-content::before { content: none; }

/* The copy carries the contrast, so it no longer depends on a blacked-out
   background to stay readable. */
.hero-video-stage .hero-copy { color: rgba(255, 255, 255, 0.96); }
.hero-video-stage .hero-meta span { color: rgba(255, 255, 255, 0.92); }
.hero-video-stage .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* =========================================================
   Menu typography — matched to viralreachcontent.com
   .com renders desktop 14px / 500 / +0.01em and overlay
   calc(clamp(1.45rem, 5.8vw, 2.35rem) + 2px) / 600 / -0.015em. These are the
   same computed values, so the two menus are identical at every width.
   The gap is matched too: this file's base .site-nav gap is
   clamp(18px, 2.4vw, 38px), which rendered 36px against .com's 15.75px.
   NOT restyled: the red .nav-cta button. .com has no .nav-cta — a founder
   portrait sits there instead — so there is no counterpart to match, and the
   button is kept deliberately.
   ========================================================= */
@media (min-width: 981px) {
  .site-nav {
    gap: clamp(9px, 1.05vw, 16px);
  }
  .site-nav > a:not(.nav-cta) {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
  }
}

@media (max-width: 980px) {
  .site-nav {
    gap: 10px;
  }
  .site-nav > a:not(.nav-cta) {
    font-size: calc(clamp(1.45rem, 5.8vw, 2.35rem) + 2px);
    font-weight: 600;
    letter-spacing: -.015em;
  }
}

/* =========================================================
   Service cards with a background image
   The image sits behind a two-ended scrim: a short fade at the top so the big
   service number still reads, a heavier one at the bottom where the copy sits,
   and a clear band between them that lets the picture show.
   ========================================================= */
.service-card { min-height: 350px; }

.service-card > .card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 3, 4, 0.62) 0%, rgba(3, 3, 4, 0) 28%),
    linear-gradient(0deg, rgba(3, 3, 4, 0.96) 0%, rgba(3, 3, 4, 0.58) 44%, rgba(3, 3, 4, 0) 74%);
}

.service-card > *:not(.card-bg) { z-index: 2; }

/* =========================================================
   Intent card with a background image
   Only the "1 idea -> 10 assets" card uses this. The image sits behind a scrim
   weighted to the bottom, where the checklist sits.
   ========================================================= */
.intent-card--image { overflow: hidden; }
.intent-card--image::before { content: none; }

.intent-card--image > .card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.intent-card--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 3, 4, 0.58) 0%, rgba(3, 3, 4, 0.72) 40%, rgba(3, 3, 4, 0.94) 100%);
}

.intent-card--image > *:not(.card-bg) { position: relative; z-index: 2; }

/* =========================================================
   Creator jobs
   The application form is the whole point of the page. A single column of
   inputs spanning the full 1320px container reads badly, so it is capped and
   centred while the section itself stays full width.
   ========================================================= */
body.creator-jobs .typeform-card { max-width: 940px; margin-inline: auto; }
body.creator-jobs .typeform-intro { max-width: 820px; }

/* The front-page hero carries a search phrase as its H1, with the brand line
   demoted to a subheading beneath it. */
.hero-sub {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.1rem, 1.85vw, 1.55rem);
  font-weight: 860;
  letter-spacing: -0.03em;
  line-height: 1.16;
}

/* The lead-generation hero runs bright, moving footage: gold rays and confetti
   push the measured contrast to 4.57:1 on desktop — passing, but with little
   headroom. A shadow costs nothing and lifts real-world legibility on the
   brightest frames. WCAG does not count it, so it is an addition, not a fix. */
.hero-video-stage .hero-sub,
.hero-video-stage .hero-copy,
.hero-video-stage .hero-meta span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   Platforms band — the one bright moment on the site
   The artwork is light, so this section flips to dark type rather than white,
   and the scrim lifts the image instead of dimming it. Keeping the colours is
   the entire point; a dark scrim turned it grey.
   ========================================================= */
.platform-strip {
  overflow: hidden;
  background: #eaf3fc;
  border-color: rgba(10, 10, 12, 0.12);
}

.platform-strip .strip-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

.platform-strip .strip-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.24) 100%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.34) 52%, rgba(255, 255, 255, 0.02) 100%);
}

.platform-strip .platform-layout {
  position: relative;
  z-index: 2;
}

.platform-strip .eyebrow { color: rgba(10, 10, 12, 0.68); }
.platform-strip .eyebrow-dot { background: var(--vr-red); box-shadow: 0 0 12px rgba(239, 35, 48, 0.55); }
.platform-strip h2 { color: #08080a; }

/* Body copy must clear WCAG AA (4.5:1) against the lightest-worst background
   pixel. Measured with _build/check-contrast.py; 0.76 failed at 4.15:1. */
.platform-strip .platform-copy p {
  color: rgba(10, 10, 12, 0.9);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.platform-strip .platform-logo {
  border-color: rgba(10, 10, 12, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: #08080a;
  box-shadow: 0 14px 34px rgba(10, 25, 45, 0.14);
  backdrop-filter: blur(8px);
}

.platform-strip .platform-logo::before { background: var(--vr-red); box-shadow: 0 0 12px rgba(239, 35, 48, 0.5); }

.platform-strip .platform-logo:hover {
  border-color: rgba(239, 35, 48, 0.62);
  box-shadow: 0 16px 40px rgba(10, 25, 45, 0.18), 0 0 24px rgba(239, 35, 48, 0.14);
}