/* AgencyNika — approved UI feedback, 2026-11-05.
   This stylesheet is LAST in the cascade on all 42 routes.
   Keep site predominantly light, with intentionally dark gradient sections. */
:root {
  --site-gradient: linear-gradient(110deg,#ff32a1 0%,#a44cff 50%,#0068ff 100%);
  --nika-gradient: linear-gradient(110deg,#ff32a1 0%,#a44cff 50%,#0068ff 100%);
  --action-gradient: linear-gradient(110deg,#ff32a1 0%,#a44cff 50%,#0068ff 100%);
  --brand-gradient: linear-gradient(110deg,#ff32a1 0%,#a44cff 50%,#0068ff 100%);
  --brand-accent: #542b9b;
}

/* Unified gradient for prominent actions, navigation and the wordmark. */
body :is(.pill-cta,.diagnosis-trigger,.btn-primary,.gradient-button),
body.nika-imported main :is(a.button,a.btn,.cta-btn,.nav-cta),
body .site-header .nav > a:last-child {
  background:var(--site-gradient)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body :is(.pill-cta,.diagnosis-trigger,.btn-primary,.gradient-button):hover,
body.nika-imported main :is(a.button,a.btn,.cta-btn,.nav-cta):hover {
  background:var(--site-gradient)!important;
  filter:brightness(.92);
  color:#fff!important;
}
body header.site-header .nika-logo :is(b,i),
body footer.footer .nika-logo :is(b,i) {
  background:var(--site-gradient)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
body main :is(h1,h2,h3) .accent,
body main :is(h1,h2,h3) em:not(.no-gradient),
body .nika-directory-hero h1 em {
  background:var(--site-gradient)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

/* 1. Center the entire first-screen content within the available viewport. */
body.home-v2 main > section.home-hero {
  min-height:calc(100svh - 74px)!important;
  display:flex!important;
  align-items:center!important;
  padding:clamp(38px,5vw,78px) 0!important;
}
body.home-v2 .home-hero > .wrap {
  width:min(1320px,calc(100% - clamp(32px,5vw,104px)))!important;
  margin:auto!important;
}
body.home-v2 .home-hero .hero-stage {
  display:grid!important;
  align-items:center!important;
  gap:clamp(32px,4.6vw,76px)!important;
}
body.home-v2 .home-hero .hero-copy {
  align-self:center!important;
}

/* 3. Equal-sized primary and outline CTAs in the hero. */
body.home-v2 .home-hero .hero-ctas {
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
body.home-v2 .home-hero .hero-ctas > a {
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:52px!important;
  padding:0 22px!important;
  border-radius:999px!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
  white-space:normal!important;
  text-align:center!important;
  text-decoration:none!important;
  width:auto!important;
}
body.home-v2 .home-hero .hero-ctas > a.scroll-pill {
  background:#fff!important;
  color:#492986!important;
  border:1.5px solid #6a4ca3!important;
  box-shadow:none!important;
}
body.home-v2 .home-hero .hero-ctas > a.scroll-pill:hover {
  background:#f2ecfa!important;
  color:#492986!important;
  border-color:#492986!important;
}

/* 4. Clean, centered video play affordance. Video stays landscape 16:9. */
body .founder-video-frame {
  position:relative!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
}
body .founder-video-frame .founder-play-button {
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  place-items:center!important;
  width:80px!important;
  height:80px!important;
  min-width:80px!important;
  min-height:80px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  border:1.5px solid rgba(255,255,255,.7)!important;
  background:var(--site-gradient)!important;
  color:#fff!important;
  box-shadow:0 12px 32px rgba(19,13,40,.3)!important;
  z-index:6!important;
  cursor:pointer;
}
body .founder-video-frame .founder-play-button:hover,
body .founder-video-frame .founder-play-button:focus-visible {
  transform:translate(-50%,-50%) scale(1.06)!important;
  filter:brightness(1.05);
}
body .founder-video-frame .founder-play-button > span {
  font-size:30px!important;
  color:#fff!important;
  line-height:1!important;
  margin:0!important;
  transform:translateX(2px)!important;
  position:static!important;
  inset:auto!important;
}
body .founder-video-frame .founder-play-button small {display:none!important;}

/* 5. KPI strip extends across the ENTIRE viewport (not merely the centered wrap). */
body.home-v2 main > section.section.compact {
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  background:#f3f1f8!important;
  border-block:1px solid #e3deea!important;
}
body.home-v2 main > section.section.compact > .wrap {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.home-v2 .metric-grid.metric-grid-four {
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
}
body.home-v2 .metric-grid-four > .metric {
  min-width:0!important;
  min-height:156px!important;
  padding:25px clamp(18px,2.6vw,48px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:6px!important;
  border-radius:0!important;
  border:0!important;
  border-right:1px solid #ddd8e7!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.home-v2 .metric-grid-four > .metric:last-child {border-right:0!important;}

/* 6. The previously white 'revenue leaking' CTA is a brand-gradient button. */
body.home-v2 .leak-section a.pill-cta.light {
  background:var(--site-gradient)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(60,29,106,.18)!important;
}

/* 7. The gradient growth-system steps MUST have WHITE headings and body copy. */
body.home-v2 main > section#system {
  background:var(--site-gradient)!important;
  color:#fff!important;
}
body.home-v2 #system :is(h2,h3,h4),
body.home-v2 #system .system-steps article :is(h3,h4) {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body.home-v2 #system .eyebrow,
body.home-v2 #system .system-steps article > b {
  color:#ffd4e9!important;
  -webkit-text-fill-color:#ffd4e9!important;
}
body.home-v2 #system :is(p,.section-lead),
body.home-v2 #system .system-steps article p {
  color:#f5f1ff!important;
  -webkit-text-fill-color:#f5f1ff!important;
}
body.home-v2 #system .system-steps,
body.home-v2 #system .system-steps > article {
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.home-v2 #system .system-steps article {
  border-color:rgba(255,255,255,.26)!important;
}
body.home-v2 #system .system-steps article h3,
body.home-v2 #system .system-steps article p {
  background:none!important;
}

/* Follow-up 1: partner/logo tiles should not have outlines around them. */
body.home-v2 .partners-band .partner-grid {
  border:0!important;
  box-shadow:none!important;
  gap:14px!important;
}
body.home-v2 .partners-band .partner-grid > * {
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:16px!important;
  background:#fff!important;
}
body.home-v2 .partners-band .partner-grid > a {
  background:var(--site-gradient)!important;
  color:#fff!important;
}
body.home-v2 .partners-band .partner-grid > a:hover {
  filter:brightness(.92);
  color:#fff!important;
}

/* Follow-up 2: white accountability heading over an intentionally dark section. */
body.home-v2 main > section.why-agencynika {
  background:#21173a!important;
  color:#fff!important;
}
body.home-v2 main > section.why-agencynika h2 {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body.home-v2 main > section.why-agencynika :is(.eyebrow,.section-lead) {
  color:#e8e0f3!important;
}
body.home-v2 .why-agencynika .comparison {
  background:transparent!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.2)!important;
}
body.home-v2 .why-agencynika .comparison :is(span,b,div) {
  color:#f0eaf7!important;
  border-color:rgba(255,255,255,.2)!important;
}
body.home-v2 .why-agencynika .comparison .nika-col,
body.home-v2 .why-agencynika .comparison > div > b:last-child {
  color:#ffd4e9!important;
}
body.home-v2 .why-agencynika .comparison > div::after {
  background:rgba(255,255,255,.22)!important;
}

/* Follow-up 3: softer radii for Strong fit / Probably not a fit. */
body.home-v2 main .fit-section .fit-grid > article {
  border-radius:28px!important;
  overflow:hidden!important;
  border-color:#e0dae9!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(42,27,68,.035)!important;
}

/* Follow-up 4: turn 'Ask us a specific question' into the same brand gradient. */
body.home-v2 .faq-section .faq > a[href="#diagnosis"] {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:60px!important;
  padding:12px 28px!important;
  border-radius:999px!important;
  border:0!important;
  text-decoration:none!important;
  background:var(--site-gradient)!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 12px 30px rgba(62,30,103,.17)!important;
}
body.home-v2 .faq-section .faq > a[href="#diagnosis"]:hover {
  filter:brightness(.91);
  color:#fff!important;
}

/* Responsive: editorial first screen; 2-column then single-column KPI grid. */
@media(max-width:1100px) {
  body.home-v2 main > section.home-hero {
    min-height:0!important;
    padding:clamp(42px,6vw,70px) 0!important;
  }
}
@media(max-width:800px) {
  body.home-v2 .home-hero .hero-stage {
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
  }
  body.home-v2 .metric-grid.metric-grid-four {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.home-v2 .metric-grid-four > .metric {
    min-height:132px!important;
    padding:18px 24px!important;
    border-bottom:1px solid #ddd8e7!important;
  }
  body.home-v2 .metric-grid-four > .metric:nth-child(2n) {border-right:0!important;}
  body.home-v2 .metric-grid-four > .metric:nth-last-child(-n+2) {border-bottom:0!important;}
  body .founder-video-frame .founder-play-button {
    width:64px!important;height:64px!important;
    min-width:64px!important;min-height:64px!important;
  }
  body .founder-video-frame .founder-play-button > span {font-size:25px!important;}
}
@media(max-width:520px) {
  body.home-v2 main > section.home-hero {padding:42px 0 54px!important;}
  body.home-v2 .home-hero .hero-ctas {flex-direction:column!important;}
  body.home-v2 .home-hero .hero-ctas > a {width:100%!important;}
  body.home-v2 .partners-band .partner-grid {gap:8px!important;}
  body.home-v2 .partners-band .partner-grid > * {border-radius:12px!important;}
}

/* Resolve more-specific light-section alternation from the legacy templates:
   white accountability heading needs a dark, high-contrast background. */
body.home-v2 main > section.why-agencynika.why-agencynika.why-agencynika.why-agencynika {
  background:#21173a!important;
  color:#fff!important;
}
body.home-v2 main > section.why-agencynika .comparison .comparison-head,
body.home-v2 main > section.why-agencynika .comparison > div {
  background:transparent!important;
}
body.home-v2 main > section.why-agencynika :is(p,.section-lead,span,small) {
  color:#eee7f5!important;
}
/* Keep the video fallback using the same unified gradient. */
body.home-v2 .founder-video-frame {
  background:var(--site-gradient)!important;
}

/* WCAG corrections for the original high-specificity muted-color rules. */
body.home-v2 main > section.why-agencynika.why-agencynika.why-agencynika .wrap > .eyebrow,
body.home-v2 main > section.why-agencynika.why-agencynika.why-agencynika .wrap > .section-lead {
  color:#eee7f5!important;
  -webkit-text-fill-color:#eee7f5!important;
}
body.home-v2 main > section.why-agencynika.why-agencynika.why-agencynika a.pill-cta.light {
  background:var(--site-gradient)!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* Ensure the shared navigation CTA uses the same brand gradient on migrated/case pages.
   The older migrated-page nav selector has higher specificity than the base rule. */
body.migrated-page header.site-header nav.nav > a:last-child,
body.case-page header.site-header nav.nav > a:last-child,
body.home-v2 header.site-header nav.nav > a:last-child {
  background:var(--site-gradient)!important;
  background-image:var(--site-gradient)!important;
  background-color:transparent!important;
  color:#fff!important;
  border-color:transparent!important;
}