/* ═══════════════════════════════════════════════════════════
   HAVISIONZ — MAIN COMPONENT STYLES
   ═══════════════════════════════════════════════════════════ */


/* ── PILLS / BUTTONS ──────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.pill--brand {
  background: var(--gradient-brand);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-glow-brand);
}
.pill--brand:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 12px 48px rgba(108,60,224,0.35), 0 0 100px rgba(255,107,107,0.15);
  color: var(--color-white);
}

.pill--glass {
  background: var(--glass-bg);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.pill--glass:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-2px);
  color: var(--color-white);
}

.pill--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.pill--outline:hover {
  border-color: var(--color-violet-mid);
  color: var(--color-white);
}

.pill--sm  { padding: 0.5rem 1.25rem; font-size: var(--font-xs); }
.pill--lg  { padding: 1rem 2.25rem; font-size: var(--font-base); }
.pill--full { width: 100%; justify-content: center; }

.pill i { font-size: 0.85em; transition: transform var(--transition-fast); }
.pill:hover i { transform: translateX(3px); }


/* ── NAVIGATION ───────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  transition: background var(--transition-base), backdrop-filter var(--transition-base);
}

.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-brand-h);
  opacity: 0.3;
}

.nav.scrolled {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
}

.nav__brand { text-decoration: none; }

.nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  transition: color var(--transition-fast);
}

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

.nav__links {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.nav__link {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-brand-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav__link:hover { color: var(--color-white); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: calc(var(--z-overlay) + 1);
}
.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all var(--transition-base);
}
.nav__toggle.active .nav__toggle-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__toggle.active .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle.active .nav__toggle-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.nav__mobile.open {
  opacity: 1;
  pointer-events: all;
}

.nav__mobile-inner { text-align: center; }

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.nav__mobile-link {
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  letter-spacing: var(--tracking-tight);
}
.nav__mobile-link:hover { color: var(--color-violet-light); }

.nav__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 320px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .nav__menu, .nav__actions { display: none; }
  .nav__toggle { display: flex; }
}


/* ── HERO ─────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,15,0.5) 0%,
    rgba(10,10,15,0.3) 40%,
    rgba(10,10,15,0.7) 80%,
    rgba(10,10,15,1) 100%
  );
  z-index: 1;
}

.hero__glow {
  --gx: 50%;
  --gy: 50%;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at var(--gx) var(--gy), rgba(108,60,224,0.15) 0%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}

/* Static gradient orbs — pure decoration, zero animation cost */
.hero__orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
}

.hero__orb--violet {
  width: clamp(500px, 60vw, 900px);
  height: clamp(500px, 60vw, 900px);
  background: radial-gradient(circle, rgba(108, 60, 224, 0.18) 0%, rgba(108, 60, 224, 0) 70%);
  top: -20%;
  left: -15%;
}

.hero__orb--coral {
  width: clamp(400px, 50vw, 800px);
  height: clamp(400px, 50vw, 800px);
  background: radial-gradient(circle, rgba(255, 107, 107, 0.12) 0%, rgba(255, 107, 107, 0) 70%);
  bottom: -25%;
  right: -15%;
}

.hero__orb--blue {
  width: clamp(350px, 40vw, 650px);
  height: clamp(350px, 40vw, 650px);
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 70%);
  top: 30%;
  left: 45%;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--font-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-violet-light);
  margin-bottom: var(--space-sm);
}

.hero__title {
  font-size: var(--font-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.hero__dot {
  color: var(--color-coral);
}

.hero__bottom { max-width: 600px; margin-inline: auto; }

.hero__sub {
  font-size: var(--font-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: var(--leading-snug);
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero fade-up animation */
.anim-fade {
  opacity: 0;
  transform: translateY(28px);
  animation: heroFadeUp 0.8s var(--ease-smooth) forwards;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero__scroll-label {
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__scroll-bar {
  width: 1px;
  height: 40px;
  background: var(--gradient-brand-v);
  opacity: 0.4;
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.6); }
  50% { opacity: 0.6; transform: scaleY(1); }
}


/* ── TRUST BAR (Infinite Marquee) ─────────────────────── */

.trust {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.trust__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.trust__label {
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.trust__marquee {
  overflow: hidden;
  flex: 1;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.trust__track {
  display: flex;
  gap: var(--space-sm);
  width: max-content;
  animation: marquee 35s linear infinite;
}

.trust__marquee:hover .trust__track {
  animation-play-state: paused;
}

.trust__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.trust__tag i {
  color: var(--color-violet-light);
  font-size: 0.85em;
}

.trust__tag:hover {
  border-color: var(--color-violet-mid);
  color: var(--color-white);
  background: var(--color-surface-2);
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .trust__inner { flex-direction: column; text-align: center; }
  .trust__marquee { width: 100%; }
}


/* ── STATEMENT ────────────────────────────────────────── */

.statement {
  padding: var(--space-2xl) 0;
}

.statement__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.statement__watermark {
  position: absolute;
  top: -0.3em;
  right: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(6rem, 10vw, 14rem);
  font-weight: var(--weight-bold);
  color: var(--color-text-ghost);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.statement__body {
  max-width: 900px;
}

.statement__text {
  font-size: var(--font-3xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.statement__sub {
  font-size: var(--font-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  line-height: var(--leading-relaxed);
}


/* ── DASHBOARD STATS (Bento Grid) ────────────────────── */

.dash {
  padding: var(--space-2xl) 0;
}

.dash__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
}

/* Each card */
.dash__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.dash__card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 30px rgba(108, 60, 224, 0.06);
}

.dash__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.dash__card-label {
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dash__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-violet-light);
  background: rgba(139, 92, 246, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.dash__card-badge--green {
  color: var(--color-success);
  background: rgba(52, 211, 153, 0.1);
}

.dash__card-val {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: var(--space-sm);
}

.dash__num {
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.dash__suffix {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.dash__card-sub {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

/* Live pulse indicator */
.dash__card-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-success);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dash__pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  animation: dashPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

@keyframes dashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.5); }
}


/* ── Card 1: Mini Bar Chart ──────────────────────────── */

.dash__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  margin-top: auto;
}

.dash__bar {
  flex: 1;
  height: var(--h, 50%);
  background: var(--gradient-brand);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

.dash.visible .dash__bar {
  opacity: 0.6;
  transform: scaleY(1);
}

.dash__bar:last-child { opacity: 1; }

/* Stagger bars */
.dash.visible .dash__bar:nth-child(1)  { transition-delay: 0.1s; }
.dash.visible .dash__bar:nth-child(2)  { transition-delay: 0.15s; }
.dash.visible .dash__bar:nth-child(3)  { transition-delay: 0.2s; }
.dash.visible .dash__bar:nth-child(4)  { transition-delay: 0.25s; }
.dash.visible .dash__bar:nth-child(5)  { transition-delay: 0.3s; }
.dash.visible .dash__bar:nth-child(6)  { transition-delay: 0.35s; }
.dash.visible .dash__bar:nth-child(7)  { transition-delay: 0.4s; }
.dash.visible .dash__bar:nth-child(8)  { transition-delay: 0.45s; }
.dash.visible .dash__bar:nth-child(9)  { transition-delay: 0.5s; }
.dash.visible .dash__bar:nth-child(10) { transition-delay: 0.55s; }


/* ── Card 2: Mesh Grid + Platform Breakdown ──────────── */

.dash__card--creators {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dash__card-meta {
  display: flex;
  gap: var(--space-md);
  margin-top: auto;
}

.dash__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

.dash__meta-item i {
  color: var(--color-violet-light);
  font-size: 0.9em;
}

/* CSS-only mesh grid — zero animation overhead */
.dash__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(139, 92, 246, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 80% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 80% 30%, black 0%, transparent 70%);
  border-radius: inherit;
}


/* ── Card 3: Bereik per platform ──────────────────────── */

.dash__card--reach {
  grid-column: 1 / -1;
  background: var(--color-surface-2);
  border-color: rgba(139, 92, 246, 0.12);
  padding: var(--space-lg) var(--space-xl);
}

.dash__card--reach .dash__card-head {
  margin-bottom: var(--space-xs);
}

.dash__card-val--hero {
  margin-bottom: var(--space-md);
}

.dash__card-val--hero .dash__num {
  font-size: var(--font-4xl);
}

.dash__card-val--hero .dash__suffix {
  font-size: var(--font-2xl);
}

/* Platform breakdown rows */
.dash__platforms {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dash__platform {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dash__platform-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-violet-light);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dash__platform-info {
  flex: 1;
  min-width: 0;
}

.dash__platform-name {
  display: block;
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.dash__platform-bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.dash__platform-bar {
  height: 100%;
  width: 0;
  background: var(--gradient-brand);
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dash.visible .dash__platform-bar {
  width: var(--w);
}

.dash__platform-val {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  min-width: 3.5rem;
  text-align: right;
}


/* ── Card 4: ROAS — duidelijke uitleg ────────────────── */

.dash__card--roas {
  display: flex;
  flex-direction: column;
}

.dash__card--roas .dash__card-head {
  width: 100%;
}

.dash__roas-hero {
  margin: var(--space-xs) 0 var(--space-sm);
}

.dash__roas-val {
  font-family: var(--font-display);
  font-size: var(--font-4xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.dash__roas-explain {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.dash__roas-explain strong {
  color: var(--color-white);
}

/* Visual comparison bars */
.dash__roas-compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: auto;
}

.dash__roas-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dash__roas-bar-label {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  min-width: 6rem;
  flex-shrink: 0;
}

.dash__roas-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.dash__roas-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dash.visible .dash__roas-bar-fill {
  width: var(--w);
}

.dash__roas-bar-fill--invest {
  background: rgba(255, 255, 255, 0.15);
}

.dash__roas-bar-fill--return {
  background: var(--gradient-brand);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.dash__roas-bar-val {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  min-width: 3rem;
  text-align: right;
}


/* ── Dashboard Responsive ────────────────────────────── */

@media (max-width: 768px) {
  .dash__grid {
    grid-template-columns: 1fr;
  }
  .dash__card--reach {
    grid-column: auto;
    padding: var(--space-md);
  }
  .dash__roas-bar-label {
    min-width: 5rem;
  }
}


/* ── SERVICES GRID ────────────────────────────────────── */

.services {
  padding: var(--space-2xl) 0;
}

.services__head {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.services__title {
  font-size: var(--font-3xl);
}

.services__intro {
  max-width: 400px;
  color: var(--color-text-secondary);
  text-align: right;
}

.services__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.service-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition-base), background var(--transition-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
}

/* Index watermark */
.service-card::after {
  content: attr(data-index);
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  pointer-events: none;
  transition: color var(--transition-base);
}

.service-card:hover::after {
  color: rgba(139, 92, 246, 0.06);
}

/* Cursor-follow light effect */
.service-card__light {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 0;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

/* Gradient border glow on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-2);
}
.service-card:hover::before { opacity: 1; }

.service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  color: var(--color-violet-light);
  font-size: 1.25rem;
}

.service-card__title {
  font-size: var(--font-xl);
  margin-bottom: var(--space-xs);
  color: var(--color-white);
}

.service-card__desc {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-violet-light);
  margin-top: var(--space-md);
  transition: color var(--transition-fast);
}
.service-card__link i { font-size: 0.75em; transition: transform var(--transition-fast); }
.service-card:hover .service-card__link { color: var(--color-white); }
.service-card:hover .service-card__link i { transform: translateX(4px); }

@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services__head { flex-direction: column; align-items: flex-start; }
  .services__intro { text-align: left; max-width: 100%; }
  .services__grid { grid-template-columns: 1fr; }
}


/* ── FEATURED CASE STUDY ──────────────────────────────── */

.featured {
  padding: var(--space-2xl) 0;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.featured__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform var(--transition-slower);
}
.featured:hover .featured__image img { transform: scale(1.03); }

.featured__title {
  font-size: var(--font-3xl);
  margin-bottom: var(--space-md);
}

.featured__metrics {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.featured__metric { text-align: left; }

.featured__metric-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.featured__metric-lbl {
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  margin-top: 0.25rem;
}

.featured__body {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  max-width: 500px;
}

.featured__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured__metrics { gap: var(--space-md); }
}


/* ── HOW IT WORKS / COMPARISON ────────────────────────── */

.howit {
  padding: var(--space-2xl) 0;
}

.howit__head {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.howit__title { font-size: var(--font-3xl); }

.howit__compare {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.howit__side {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
}

.howit__side--without {
  border-color: rgba(248,113,113,0.15);
  opacity: 0.65;
  filter: saturate(0.4);
  transition: all var(--transition-base);
}
.howit__side--without:hover {
  opacity: 0.8;
  filter: saturate(0.6);
}
.howit__side--with {
  border-color: rgba(108,60,224,0.25);
  background: var(--color-surface-2);
  position: relative;
  transform: scale(1.02);
  box-shadow: 0 8px 40px rgba(108, 60, 224, 0.1);
}

/* Staggered list item reveal */
.howit__list-item {
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.howit.visible .howit__side.visible .howit__list-item:nth-child(1) { transition-delay: 0.15s; }
.howit.visible .howit__side.visible .howit__list-item:nth-child(2) { transition-delay: 0.25s; }
.howit.visible .howit__side.visible .howit__list-item:nth-child(3) { transition-delay: 0.35s; }
.howit.visible .howit__side.visible .howit__list-item:nth-child(4) { transition-delay: 0.45s; }
.howit.visible .howit__side.visible .howit__list-item:nth-child(5) { transition-delay: 0.55s; }
.howit__side--with::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
}

.howit__side-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--font-xl);
  margin-bottom: var(--space-md);
}
.howit__side--without .howit__side-title i { color: var(--color-error); }
.howit__side--with .howit__side-title i { color: var(--color-success); }

.howit__list { display: flex; flex-direction: column; gap: var(--space-sm); }

.howit__list-item {
  font-size: var(--font-base);
  color: var(--color-text-secondary);
  padding-left: 1.5rem;
  position: relative;
}
.howit__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.howit__side--without .howit__list-item::before { background: var(--color-error); opacity: 0.5; }
.howit__side--with .howit__list-item::before { background: var(--color-success); }
.howit__side--with .howit__list-item { color: var(--color-text); }

.howit__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-xl);
}

.howit__vs {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .howit__compare { grid-template-columns: 1fr; }
  .howit__divider { padding: 0; }
  .howit__vs { margin: var(--space-sm) auto; }
}


/* ── DUAL CTA ─────────────────────────────────────────── */

.dual-cta {
  padding: var(--space-2xl) 0;
}

.dual-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.dual-cta__panel {
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--color-border);
}

.dual-cta__panel--brands {
  background: var(--color-surface);
}

.dual-cta__panel--creators {
  background: var(--color-surface-2);
  position: relative;
  overflow: hidden;
}
.dual-cta__panel--creators::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(108,60,224,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.dual-cta__title {
  font-size: var(--font-2xl);
  margin-bottom: var(--space-sm);
}

.dual-cta__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 400px;
}

@media (max-width: 768px) {
  .dual-cta__inner { grid-template-columns: 1fr; }
}


/* ── FOOTER ───────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--color-surface);
}

.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer__content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  letter-spacing: var(--tracking-tight);
}

.footer__brand { text-decoration: none; display: inline-block; margin-bottom: var(--space-sm); }

.footer__tagline {
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  margin-bottom: var(--space-md);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
}
.footer__social-link:hover {
  background: var(--color-violet);
  border-color: var(--color-violet);
  color: var(--color-white);
}

.footer__title {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.footer__links { display: flex; flex-direction: column; gap: var(--space-xs); }

.footer__link {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--color-white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer__copyright {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

.footer__legal { display: flex; gap: var(--space-md); }

.footer__legal-link {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer__legal-link:hover { color: var(--color-text-secondary); }

@media (max-width: 900px) {
  .footer__content { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer__col--brand { grid-column: span 2; }
}
@media (max-width: 600px) {
  .footer__content { grid-template-columns: 1fr; }
  .footer__col--brand { grid-column: span 1; }
  .footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .footer__legal { gap: var(--space-sm); }
}


/* ═══════════════════════════════════════════════════════════
   SUBPAGE COMPONENTS
   ═══════════════════════════════════════════════════════════ */


/* ── PAGE HERO (compact for subpages) ─────────────────── */

.page-hero {
  position: relative;
  padding: clamp(8rem, 15vh, 12rem) 0 var(--space-2xl);
  text-align: center;
  overflow: hidden;
}

.page-hero--compact { padding-bottom: var(--space-xl); }

.page-hero__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

.page-hero__title {
  font-size: var(--font-4xl);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

.page-hero__sub {
  font-size: var(--font-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.page-hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.page-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 30%, rgba(108,60,224,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 30% 70%, rgba(255,107,107,0.05) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.page-hero__glow--brands {
  background:
    radial-gradient(ellipse 50% 60% at 50% 30%, rgba(108,60,224,0.1) 0%, transparent 60%);
}

.page-hero__glow--creators {
  background:
    radial-gradient(ellipse 50% 60% at 50% 30%, rgba(255,107,107,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 70% 70%, rgba(108,60,224,0.06) 0%, transparent 60%);
}


/* ── PAGE CTA (bottom CTA for subpages) ───────────────── */

.page-cta {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.page-cta__inner { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.page-cta__title { font-size: var(--font-3xl); margin-bottom: var(--space-lg); }
.page-cta__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }


/* ── VALUE PROPS (brand page stats) ───────────────────── */

.value-props { padding: var(--space-2xl) 0; }
.value-props__head { margin-bottom: var(--space-xl); }
.value-props__title { font-size: var(--font-3xl); }

.value-props__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.value-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.value-card__desc {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) { .value-props__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .value-props__grid { grid-template-columns: 1fr; } }


/* ── PROCESS STEPS ────────────────────────────────────── */

.process { padding: var(--space-2xl) 0; }
.process__inner { max-width: var(--container-max); }
.process__head { margin-bottom: var(--space-xl); }
.process__title { font-size: var(--font-3xl); }

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.process__steps--three { grid-template-columns: repeat(3, 1fr); }

.process__step {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.process__step-num {
  font-family: var(--font-display);
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.process__step-title {
  font-size: var(--font-xl);
  margin-bottom: var(--space-xs);
}

.process__step-desc {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

@media (max-width: 1000px) { .process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .process__steps, .process__steps--three { grid-template-columns: 1fr; } }


/* ── BENEFITS GRID (creators page) ────────────────────── */

.benefits { padding: var(--space-2xl) 0; }
.benefits__head { margin-bottom: var(--space-xl); }
.benefits__title { font-size: var(--font-3xl); }

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.benefit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  transition: all var(--transition-base);
}
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(108,60,224,0.2);
  box-shadow: var(--shadow-lg);
}

.benefit-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  color: var(--color-violet-light);
  font-size: 1.25rem;
}

.benefit-card__title { font-size: var(--font-xl); margin-bottom: var(--space-xs); }
.benefit-card__desc { font-size: var(--font-sm); color: var(--color-text-secondary); }

@media (max-width: 900px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .benefits__grid { grid-template-columns: 1fr; } }


/* ── TESTIMONIALS ─────────────────────────────────────── */

.testimonials { padding: var(--space-2xl) 0; }
.testimonials__title { font-size: var(--font-3xl); margin-bottom: var(--space-xl); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.testimonial__text {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
  font-style: italic;
}

.testimonial__author { display: flex; align-items: center; gap: var(--space-sm); }

.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--gradient-subtle);
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
}

.testimonial__name {
  display: block;
  font-style: normal;
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  font-size: var(--font-sm);
}

.testimonial__handle {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

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


/* ── PLATFORMS BADGES ─────────────────────────────────── */

.platforms { padding: var(--space-xl) 0 var(--space-2xl); text-align: center; }
.platforms__title { font-size: var(--font-2xl); margin-bottom: var(--space-lg); }

.platforms__grid {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.platform-badge i { font-size: 1.25rem; color: var(--color-violet-light); }
.platform-badge:hover { border-color: var(--color-violet-mid); color: var(--color-white); }


/* ── CASE CARDS (subpage version) ─────────────────────── */

.case-highlight { padding: var(--space-2xl) 0; }
.case-highlight__title { font-size: var(--font-3xl); margin-bottom: var(--space-xl); }

.case-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.case-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.case-card__image img {
  width: 100%; height: 220px; object-fit: cover;
  transition: transform var(--transition-slower);
}
.case-card:hover .case-card__image img { transform: scale(1.05); }

.case-card__body { padding: var(--space-md); }

.case-card__tags { display: flex; gap: 0.5rem; margin-bottom: var(--space-xs); flex-wrap: wrap; }

.case-card__tag {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-violet-light);
  background: rgba(108,60,224,0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}
.case-card__tag--platform {
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
}

.case-card__title { font-size: var(--font-xl); margin-bottom: var(--space-xs); }
.case-card__desc { font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: var(--space-sm); }

.case-card__metrics { display: flex; gap: var(--space-lg); }
.case-card__metric-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.case-card__metric-lbl {
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

/* Large case cards (case studies page) */
.cases-grid { padding: var(--space-xl) 0 var(--space-2xl); }
.cases-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.case-card--large .case-card__image img { height: 280px; }
.case-card--large .case-card__body { padding: var(--space-lg); }

@media (max-width: 768px) {
  .case-cards, .cases-grid__inner { grid-template-columns: 1fr; }
}


/* ── COMPLIANCE SECTION ───────────────────────────────── */

.compliance { padding: var(--space-2xl) 0; }

.compliance__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.compliance__title { font-size: var(--font-2xl); margin-bottom: var(--space-md); }
.compliance__desc { color: var(--color-text-secondary); margin-bottom: var(--space-lg); }

.compliance__list { display: flex; flex-direction: column; gap: var(--space-sm); }
.compliance__item {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--font-base); color: var(--color-text);
}
.compliance__item i { color: var(--color-success); font-size: 1.1rem; flex-shrink: 0; }

.compliance__visual { display: flex; justify-content: center; }
.compliance__badge {
  width: 200px; height: 200px;
  border-radius: var(--radius-full);
  background: var(--gradient-subtle);
  border: 2px solid rgba(108,60,224,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
}
.compliance__badge i { font-size: 2.5rem; color: var(--color-success); }
.compliance__badge span { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--font-lg); color: var(--color-white); line-height: 1.2; }

@media (max-width: 768px) { .compliance__inner { grid-template-columns: 1fr; } .compliance__visual { order: -1; } }


/* ── INTAKE / FORM SECTION ────────────────────────────── */

.intake { padding: var(--space-2xl) 0; }

.intake__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: start;
}

.intake__title { font-size: var(--font-2xl); margin-bottom: var(--space-sm); }
.intake__desc { color: var(--color-text-secondary); margin-bottom: var(--space-lg); }

.intake__highlights { display: flex; flex-direction: column; gap: var(--space-sm); }
.intake__highlight {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--font-sm); color: var(--color-text);
}
.intake__highlight i { color: var(--color-violet-light); width: 20px; text-align: center; }

.intake__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

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


/* ── FORM ELEMENTS ────────────────────────────────────── */

.form__group { margin-bottom: var(--space-md); }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.form__label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  letter-spacing: var(--tracking-wide);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-violet-mid);
  box-shadow: 0 0 0 3px rgba(108,60,224,0.15);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-muted);
}

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A78BFA' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form__textarea { resize: vertical; min-height: 100px; }

.form__feedback {
  margin-top: var(--space-md);
  font-size: var(--font-sm);
  text-align: center;
}
.form__feedback--success { color: var(--color-success); }
.form__feedback--error { color: var(--color-error); }


/* ── SERVICE DETAIL (services page) ───────────────────── */

.service-detail { padding: var(--space-2xl) 0; }

.service-detail__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.service-detail--reverse .service-detail__inner { grid-template-columns: 1fr 1.2fr; }
.service-detail--reverse .service-detail__content { order: 2; }
.service-detail--reverse .service-detail__visual { order: 1; }

.service-detail__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  color: var(--color-violet-light);
  font-size: 1.5rem;
}

.service-detail__title { font-size: var(--font-2xl); margin-bottom: var(--space-sm); }
.service-detail__lead { font-size: var(--font-lg); color: var(--color-text-secondary); margin-bottom: var(--space-lg); }

.service-detail__features {
  display: flex; flex-direction: column; gap: var(--space-sm);
  list-style: none;
}
.service-detail__features li {
  font-size: var(--font-base);
  color: var(--color-text);
  padding-left: 1.75rem;
  position: relative;
}
.service-detail__features li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-violet-mid);
}

@media (max-width: 900px) {
  .service-detail__inner { grid-template-columns: 1fr; }
  .service-detail--reverse .service-detail__content,
  .service-detail--reverse .service-detail__visual { order: unset; }
}


/* ── SERVICE DETAIL VISUAL MOCKS ──────────────────────── */

.service-detail__visual { display: flex; justify-content: center; }

/* Matching mockup cards */
.service-detail__mockup { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 380px; }
.mockup-card {
  display: flex; align-items: center; gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.mockup-card__avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--gradient-subtle);
  flex-shrink: 0;
}
.mockup-card__info { flex: 1; }
.mockup-card__name { display: block; font-weight: var(--weight-semibold); color: var(--color-white); font-size: var(--font-sm); }
.mockup-card__stats { font-size: var(--font-xs); color: var(--color-text-muted); }
.mockup-card__match { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--font-lg); }

/* Timeline mockup */
.service-detail__timeline {
  display: flex; flex-direction: column; gap: 0;
  position: relative; padding-left: 2rem;
}
.service-detail__timeline::before {
  content: '';
  position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--color-border-strong);
}
.timeline__item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; position: relative; }
.timeline__dot {
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg);
  position: absolute; left: -2rem;
  z-index: 2;
}
.timeline__item--active .timeline__dot { background: var(--color-violet); border-color: var(--color-violet); }
.timeline__item--current .timeline__dot { background: var(--color-coral); border-color: var(--color-coral); box-shadow: 0 0 12px rgba(255,107,107,0.4); }
.timeline__label { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.timeline__item--active .timeline__label { color: var(--color-white); }
.timeline__item--current .timeline__label { color: var(--color-coral-light); font-weight: var(--weight-semibold); }

/* Platform cards stack */
.service-detail__platforms-stack { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 280px; }
.platform-card {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-semibold); color: var(--color-white);
}
.platform-card i { color: var(--color-violet-light); font-size: 1.25rem; }

/* Metrics mockup */
.service-detail__metrics-mock { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 320px; }
.metrics-mock__item {
  display: flex; align-items: center; gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.metrics-mock__label { font-size: var(--font-sm); color: var(--color-text-secondary); min-width: 90px; }
.metrics-mock__val { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--font-xl); flex: 1; }
.metrics-mock__change { font-size: var(--font-xs); color: var(--color-success); font-weight: var(--weight-semibold); }


/* ── ABOUT PAGE SECTIONS ──────────────────────────────── */

.about-mission { padding: var(--space-2xl) 0; }
.about-mission__title { font-size: var(--font-2xl); line-height: var(--leading-snug); margin-bottom: var(--space-lg); }
.about-mission__text { color: var(--color-text-secondary); font-size: var(--font-lg); line-height: var(--leading-relaxed); max-width: 800px; }

.about-values { padding: var(--space-xl) 0 var(--space-2xl); }
.about-values__title { font-size: var(--font-3xl); margin-bottom: var(--space-xl); }

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.value-block {
  padding: var(--space-lg);
  border-left: 3px solid;
  border-image: var(--gradient-brand-v) 1;
}
.value-block__title {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}
.value-block__desc { color: var(--color-text-secondary); font-size: var(--font-base); }

@media (max-width: 600px) { .about-values__grid { grid-template-columns: 1fr; } }


/* ── CONTACT PAGE ─────────────────────────────────────── */

.contact-section { padding: var(--space-xl) 0 var(--space-2xl); }

.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: var(--space-xl); }
.contact-info__title { font-size: var(--font-lg); margin-bottom: var(--space-sm); }
.contact-info__link {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--font-base); color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  transition: color var(--transition-fast);
}
.contact-info__link:hover { color: var(--color-white); }
.contact-info__link i { width: 20px; text-align: center; color: var(--color-violet-light); }
.contact-info__socials { display: flex; gap: var(--space-sm); }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

@media (max-width: 900px) { .contact-section__inner { grid-template-columns: 1fr; } }


/* ─── LEGAL PAGES ─────────────────────────────────────────── */

.legal-content {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.legal-content__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Table of Contents - sticky sidebar */
.legal-toc {
  position: sticky;
  top: calc(var(--space-xl) + 80px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.legal-toc__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.legal-toc__list li {
  counter-increment: toc;
}

.legal-toc__list li a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--ease-smooth) 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.legal-toc__list li:last-child a { border-bottom: none; }

.legal-toc__list li a:hover {
  color: var(--color-violet-light);
}

/* Legal body content */
.legal-body {
  max-width: 780px;
}

.legal-body section {
  margin-bottom: var(--space-xl);
  scroll-margin-top: 120px;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.legal-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.legal-body p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.legal-body ul,
.legal-body ol {
  color: var(--color-text-muted);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: var(--space-sm);
}

.legal-body li {
  margin-bottom: 0.4rem;
}

.legal-body a {
  color: var(--color-violet-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.legal-body a:hover {
  color: var(--color-coral);
}

.legal-body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Info blocks */
.legal-info-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
}

.legal-info-block p {
  margin-bottom: 0.25rem;
}

.legal-info-block p:last-child {
  margin-bottom: 0;
}

/* Cookie table */
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-sm) 0 var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal-table thead {
  background: var(--color-surface);
}

.legal-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}

.legal-table td {
  padding: 0.75rem 1rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.legal-table tbody tr:last-child td { border-bottom: none; }

.legal-table code {
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--color-violet-light);
}

.legal-note {
  font-size: var(--text-sm);
  font-style: italic;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 900px) {
  .legal-content__inner {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }
}


/* ═══════════════════════════════════════════════════════════
   UX ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── GRADIENT TEXT SWEEP ON SCROLL ────────────────────── */

.gradient-text {
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 1s var(--ease-smooth);
}

.visible .gradient-text,
.anim-fade.visible .gradient-text {
  background-position: 0 0;
}


/* ── PILL / BUTTON SHINE EFFECT ───────────────────────── */

.pill--brand {
  position: relative;
  overflow: hidden;
}

.pill--brand::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.pill--brand:hover::after {
  left: 100%;
}


/* ── SECTION CONNECTORS ───────────────────────────────── */

.trust + .statement::before,
.dash + .services::before,
.services + .featured::before,
.featured + .howit::before {
  content: '';
  display: block;
  height: 1px;
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--gradient-brand-h);
  opacity: 0.06;
  box-shadow: 0 0 60px 30px rgba(108, 60, 224, 0.03);
}


/* ── DUAL CTA ANIMATED DIVIDER ────────────────────────── */

.dual-cta__inner {
  position: relative;
}

.dual-cta__inner::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background: var(--gradient-brand-v);
  opacity: 0.15;
  animation: dividerPulse 3s ease-in-out infinite;
}

@keyframes dividerPulse {
  0%, 100% { opacity: 0.1; box-shadow: none; }
  50%      { opacity: 0.3; box-shadow: 0 0 20px rgba(139, 92, 246, 0.12); }
}

.dual-cta__panel--brands:hover {
  background: linear-gradient(135deg, rgba(108, 60, 224, 0.06), transparent);
}

.dual-cta__panel--creators:hover {
  background: linear-gradient(135deg, transparent, rgba(255, 107, 107, 0.04));
}

@media (max-width: 768px) {
  .dual-cta__inner::after {
    top: auto;
    left: 10%;
    right: 10%;
    bottom: 50%;
    width: auto;
    height: 1px;
    background: var(--gradient-brand-h);
  }
}


/* ── CUSTOM CURSOR (desktop only) ─────────────────────── */

/* Custom cursor — zero transitions on dot for instant tracking */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  display: none;
}

@media (pointer: fine) {
  .cursor-dot,
  .cursor-ring { display: block; }
  html { cursor: none; }
  a, button, .pill, .service-card, .nav__link, input, select, textarea { cursor: none; }
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-white);
  margin: -3px 0 0 -3px;
  will-change: transform;
  /* NO transition — must be instant */
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(139, 92, 246, 0.5);
  margin: -18px 0 0 -18px;
  will-change: transform;
  /* Size/color transitions only — transform is handled via JS lerp */
  transition: width 0.25s, height 0.25s, margin 0.25s, border-color 0.25s;
}

.cursor-ring--active {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(255, 107, 107, 0.6);
}

.cursor-dot--active {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--color-coral);
}


/* ── WHATSAPP FLOATING BUTTON ─────────────────────────── */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  z-index: var(--z-sticky);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  animation: waPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3s both;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45);
  color: #fff;
}

@keyframes waPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* ── REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .trust__track { animation: none; }
  .hero__orb { animation: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
  html { cursor: auto !important; }
  a, button, .pill, .service-card, .nav__link { cursor: auto !important; }
}