/* ============================================================
   HOI DIGITAL — home.css
   Homepage-only styles: hero, story, services, disc journey,
   results, pricing, testimonials, final CTA
   ============================================================ */

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #fbe9e3 0%, #fcf2ec 35%, #f5f3ee 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

/* Subtle grid overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .04;
  background-image:
    linear-gradient(rgba(0,0,0,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.4) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 20s linear infinite;
}

/* Mouse-tracking soft glows */
.hero-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,78,26,.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left .8s ease, top .8s ease;
  left: 75%; top: 40%;
  filter: blur(20px);
}
.hero-glow2 {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,102,65,.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 1.2s ease, top 1.2s ease;
  left: 30%; top: 60%;
  filter: blur(20px);
}

/* Floating orbs */
.orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.orb-1 { width: 300px; height: 300px; background: rgba(217,78,26,.15);  top: 10%;  right: 10%; animation: orb1 12s ease-in-out infinite; }
.orb-2 { width: 200px; height: 200px; background: rgba(28,102,65,.10); bottom: 20%; left: 5%;  animation: orb2 9s ease-in-out infinite; }
.orb-3 { width: 150px; height: 150px; background: rgba(217,78,26,.08); top: 50%;  left: 40%; animation: orb3 15s ease-in-out infinite; }

@keyframes orb1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(-30px,20px) scale(1.1); }
  66%       { transform: translate(20px,-30px) scale(.9); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0,0); }
  50%       { transform: translate(40px,-20px); }
}
@keyframes orb3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(-20px,30px) scale(1.2); }
}

/* Left column */
.hero-left {
  padding: 130px var(--gut) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(28,102,65,.08);
  border: 1px solid rgba(28,102,65,.2);
  color: var(--gr);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 32px;
  width: fit-content;
  animation: fadeUp .7s .1s both;
}

.hero h1 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 24px;
  animation: fadeUp .8s .2s both;
}
.hero h1 em  { font-style: italic; color: var(--or); font-weight: 300; }
.hero h1 .gw { color: var(--gr); }

.hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 440px;
  line-height: 1.7;
  margin-bottom: 44px;
  animation: fadeUp .8s .35s both;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-btns {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeUp .7s .5s both;
}
.hero .btn-ghost {
  color: var(--muted);
  border-bottom-color: rgba(0,0,0,.15);
}
.hero .btn-ghost:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Proof stats */
.hero-proof {
  display: flex;
  gap: 32px;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,.08);
  animation: fadeUp .7s .65s both;
}
.proof-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -1.5px;
  color: var(--ink);
  display: block;
  line-height: 1;
}
.proof-num.green  { color: var(--gr); }
.proof-num.orange { color: var(--or); }
.proof-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* Right column — result cards */
.hero-right {
  /* Top padding clears the fixed/overlaid nav so the carousel panel never
     tucks underneath it. */
  padding: 110px var(--gut) 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-right-label {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.15;
  color: var(--ink);
  /* Clear gap from the process carousel block above, then space before the cards */
  margin-top: 56px;
  margin-bottom: 22px;
  padding-top: 36px;
  border-top: 1px solid rgba(0,0,0,.08);
}
@media (max-width: 600px) {
  .hero-right-label { font-size: 21px; margin-top: 40px; padding-top: 28px; }
}
.result-cards { display: flex; flex-direction: column; gap: 12px; }
.result-card {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  opacity: 0;
  animation: slideInRight .6s forwards;
  transition: background .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.result-card:hover {
  background: rgba(255,255,255,.95);
  transform: translateX(-4px);
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.result-card:nth-child(1) { animation-delay: .7s; }
.result-card:nth-child(2) { animation-delay: .85s; }
.result-card:nth-child(3) { animation-delay: 1s; }
.rc-company   { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.rc-value     { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -.5px; line-height: 1.1; }
.rc-sub       { font-size: 13px; color: var(--muted); margin-top: 2px; }
.badge        { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.badge-green  { background: rgba(28,102,65,.12); color: var(--gr); border: 1px solid rgba(28,102,65,.25); }
.badge-orange { background: rgba(217,78,26,.12); color: var(--or); border: 1px solid rgba(217,78,26,.25); }
.badge-blue   { background: rgba(28,93,168,.12); color: #1C5DA8; border: 1px solid rgba(28,93,168,.25); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  ARC CAROUSEL — The DigitalHOI Process (dark card on hero) ║
   ║  Remove this section + the matching HTML + arc carousel JS  ║
   ║  in main.js to delete the feature.                          ║
   ╚══════════════════════════════════════════════════════════════╝ */
.arc-carousel {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: none;          /* stretches to match result-cards width below */
  width: 100%;
  padding: 24px 22px 20px;
  background: #0a0e1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(10,14,26,.25);
  opacity: 0;
  animation: fadeUp .8s .45s both;
}
.arc-eyebrow {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4f8aff;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.arc-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4f8aff;
  animation: arcEyebrowPulse 2s ease-in-out infinite;
}
@media (max-width: 600px) {
  .arc-eyebrow { font-size: 16px; }
}

.arc-stage {
  position: relative;
  height: 240px;
  perspective: 1000px;
  overflow: hidden;
}

.arc-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 200px;
  margin: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .65s cubic-bezier(.4,0,.2,1), opacity .65s cubic-bezier(.4,0,.2,1), background .35s, border-color .35s, box-shadow .35s;
}
.arc-card.is-active {
  /* Solid dark base hides cards behind it; subtle white gradient on top
     keeps the glassy look without losing opacity. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    #0f1426;
  border-color: var(--arc-accent, #4f8aff);
  box-shadow: 0 0 0 1px var(--arc-accent, #4f8aff), 0 14px 40px rgba(79,138,255,.18);
}
.arc-card-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
  background: var(--arc-accent-bg, rgba(79,138,255,.15));
}
.arc-card-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--arc-accent, #4f8aff);
  margin-bottom: 6px;
}
.arc-card-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #f0f2ff;
  margin-bottom: 6px;
  line-height: 1.2;
  letter-spacing: -.2px;
}
.arc-card-desc {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.45;
  margin: 0;
}

/* Per-card accent colours */
.arc-card[data-arc-index="0"] { --arc-accent: #4f8aff; --arc-accent-bg: rgba(79,138,255,.15); }
.arc-card[data-arc-index="1"] { --arc-accent: #a78bfa; --arc-accent-bg: rgba(167,139,250,.15); }
.arc-card[data-arc-index="2"] { --arc-accent: #34d399; --arc-accent-bg: rgba(52,211,153,.15); }
.arc-card[data-arc-index="3"] { --arc-accent: #fbbf24; --arc-accent-bg: rgba(251,191,36,.15); }
.arc-card[data-arc-index="4"] { --arc-accent: #f97316; --arc-accent-bg: rgba(249,115,22,.15); }
.arc-card[data-arc-index="5"] { --arc-accent: #ec4899; --arc-accent-bg: rgba(236,72,153,.15); }

/* Arrows */
.arc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.arc-arrow:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.arc-arrow-prev { left: 4px; }
.arc-arrow-next { right: 4px; }

/* Bottom bar */
.arc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 12px;
}
.arc-pause {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #9ca3af;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  letter-spacing: -1px;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.arc-pause:hover { background: rgba(255,255,255,.12); color: #fff; }
.arc-pause-icon { line-height: 1; }
.arc-dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.arc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .35s, width .35s;
}
.arc-dot.is-active {
  background: #4f8aff;
  width: 18px;
  border-radius: 4px;
}

@keyframes arcEyebrowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

@media (max-width: 900px) {
  .arc-carousel {
    margin: 32px auto 0;
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .arc-carousel { padding: 20px 16px 16px; }
  .arc-stage { height: 230px; }
  .arc-card { width: 160px; height: 195px; padding: 16px 12px; }
  .arc-arrow { width: 28px; height: 28px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-card { transition: opacity .3s ease; }
}
/* ╚═══ END ARC CAROUSEL ═══╝ */

/* ══════════════════════════
   STORY — why HOI
══════════════════════════ */
.story {
  padding: var(--section) var(--gut);
  max-width: 1200px;
  margin: 0 auto;
}
.story-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 72px;
}
.story-intro h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--ink);
}
.story-intro h2 em { font-style: italic; color: var(--or); font-weight: 300; }
.story-intro p { font-size: 17px; color: var(--muted); margin-top: 14px; }

.story-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--rule);
}
.story-col { display: flex; flex-direction: column; gap: 3px; }
.story-col-head {
  background: var(--white);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.story-col-head.bad  { color: var(--muted); }
.story-col-head.good { color: var(--gr); }
.col-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.col-icon.bad  { background: #FDF0F0; }
.col-icon.good { background: var(--gr-lt); }

.story-card {
  background: var(--white);
  padding: 28px;
  position: relative;
  transition: background .2s;
}
.story-card:hover { background: var(--canvas); }
.story-card.bad  { border-left: 3px solid #F0D8D8; }
.story-card.good { border-left: 3px solid var(--gr); }
.story-card .card-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .07;
}
.story-card.bad  .card-num { color: var(--ink); }
.story-card.good .card-num { color: var(--gr); }
.story-card h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--ink);
}
.story-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.65; }
.story-pill {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.story-pill.bad  { background: #FAEAEA; color: #C0392B; }
.story-pill.good { background: var(--gr-lt); color: var(--gr); }

/* ══════════════════════════
   AEO SECTION WRAPPER
══════════════════════════ */
.aeo-section {
  padding: 0 var(--gut);
  max-width: 1200px;
  margin: 80px auto 0;
}

/* ══════════════════════════
   SERVICES GRID
══════════════════════════ */
.services-section {
  padding: var(--section) var(--gut);
  max-width: 1200px;
  margin: 0 auto;
}
.services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.services-head h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--ink);
}
.services-head h2 em { font-style: italic; color: var(--gr); font-weight: 300; }
.services-head p { font-size: 15px; color: var(--muted); max-width: 260px; text-align: right; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}
.service-card {
  background: var(--white);
  padding: 40px 32px;
  position: relative;
  cursor: pointer;
  transition: background .25s;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gr);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover { background: var(--canvas); }
.service-card:hover .service-icon-wrap { background: var(--gr-lt); border-color: rgba(28,102,65,.2); }
.service-card:hover .service-arrow     { color: var(--gr); transform: translate(3px,-3px); }
.service-card:hover .srv-tag           { background: var(--gr-lt); color: var(--gr); border-color: rgba(28,102,65,.2); }

.service-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 13px;
  color: #C2BAB0;
  font-weight: 700;
  margin-bottom: 18px;
}
.service-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  transition: background .25s, border-color .25s;
}
.service-card h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 9px;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: var(--ink);
}
.service-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.65; }
.service-arrow {
  position: absolute;
  top: 32px; right: 32px;
  font-size: 20px;
  color: var(--rule);
  transition: color .2s, transform .2s;
}

/* Services reveal on scroll */
.services-head,
.services-grid .service-card {
  opacity: 0;
}
.services-section.is-in .services-head {
  animation: srv-head-reveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.services-section.is-in .services-grid .service-card {
  animation: srv-card-reveal .75s cubic-bezier(.22, 1, .36, 1) forwards;
}
.services-section.is-in .services-grid .service-card:nth-child(1) { animation-delay: .30s; }
.services-section.is-in .services-grid .service-card:nth-child(2) { animation-delay: .40s; }
.services-section.is-in .services-grid .service-card:nth-child(3) { animation-delay: .50s; }
.services-section.is-in .services-grid .service-card:nth-child(4) { animation-delay: .60s; }
.services-section.is-in .services-grid .service-card:nth-child(5) { animation-delay: .70s; }
.services-section.is-in .services-grid .service-card:nth-child(6) { animation-delay: .80s; }

@keyframes srv-head-reveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes srv-card-reveal {
  from { opacity: 0; transform: translateY(44px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .services-head,
  .services-grid .service-card {
    opacity: 1;
    animation: none;
  }
}

/* ══════════════════════════
   DISC JOURNEY
══════════════════════════ */
.disc-journey {
  background: var(--ink);
  padding: var(--section) var(--gut);
  position: relative;
  overflow: hidden;
}
.disc-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(28,102,65,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(217,78,26,.1) 0%, transparent 50%);
}
.dj-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.dj-header { text-align: center; margin-bottom: 80px; }
.dj-header .section-tag { color: var(--gr2); justify-content: center; }
.dj-header h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -2px;
  color: #fff;
}
.dj-header h2 em { font-style: italic; color: var(--or2); font-weight: 300; }
.dj-header p { font-size: 16px; color: rgba(255,255,255,.4); margin-top: 14px; }

.dj-steps { position: relative; }
.dj-steps::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08) 10%, rgba(255,255,255,.08) 90%, transparent);
  transform: translateX(-50%);
}

.dj-step {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 72px;
}
.dj-step:last-child { margin-bottom: 0; }
.dj-content {
  padding: 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--rad);
  transition: background .2s, border-color .2s, transform .2s;
}
.dj-content:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: scale(1.01);
}
.dj-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dj-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.dj-badge.D { background: linear-gradient(135deg,var(--or),var(--or2));  box-shadow: 0 0 20px rgba(217,78,26,.5); }
.dj-badge.I { background: linear-gradient(135deg,#F5A623,#F7C462);       box-shadow: 0 0 20px rgba(245,166,35,.4); }
.dj-badge.S { background: linear-gradient(135deg,var(--gr),var(--gr2));  box-shadow: 0 0 20px rgba(28,102,65,.5); }
.dj-badge.C { background: linear-gradient(135deg,#1C5DA8,#4A90D9);       box-shadow: 0 0 20px rgba(28,93,168,.4); }
.dj-type { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.25); text-align: center; line-height: 1.4; }
.dj-step-num { font-size: 11px; color: rgba(255,255,255,.2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.dj-content h3 { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 21px; color: #fff; margin-bottom: 10px; letter-spacing: -.2px; }
.dj-content p  { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; margin: 0; }
.dj-bullet {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.dj-bullet::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.D-card .dj-bullet::before { background: var(--or2); }
.I-card .dj-bullet::before { background: #F7C462; }
.S-card .dj-bullet::before { background: var(--gr2); }
.C-card .dj-bullet::before { background: #4A90D9; }

/* Disc journey reveal on scroll */
.dj-header,
.disc-journey .dj-content,
.disc-journey .dj-badge,
.disc-journey .dj-type {
  opacity: 0;
}
.disc-journey .dj-steps::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
}

.disc-journey.is-in .dj-header {
  animation: srv-head-reveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.disc-journey.is-in .dj-steps::before {
  animation: dj-line-draw 1.8s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}
.disc-journey.is-in .dj-badge {
  animation: dj-badge-pop .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.disc-journey.is-in .dj-type {
  animation: srv-head-reveal .6s cubic-bezier(.22, 1, .36, 1) forwards;
}
.disc-journey.is-in .dj-step:nth-child(odd) .dj-content {
  animation: dj-content-left .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.disc-journey.is-in .dj-step:nth-child(even) .dj-content {
  animation: dj-content-right .8s cubic-bezier(.22, 1, .36, 1) forwards;
}

.disc-journey.is-in .dj-step:nth-child(1) .dj-badge   { animation-delay: .45s; }
.disc-journey.is-in .dj-step:nth-child(1) .dj-type    { animation-delay: .55s; }
.disc-journey.is-in .dj-step:nth-child(1) .dj-content { animation-delay: .60s; }

.disc-journey.is-in .dj-step:nth-child(2) .dj-badge   { animation-delay: .75s; }
.disc-journey.is-in .dj-step:nth-child(2) .dj-type    { animation-delay: .85s; }
.disc-journey.is-in .dj-step:nth-child(2) .dj-content { animation-delay: .90s; }

.disc-journey.is-in .dj-step:nth-child(3) .dj-badge   { animation-delay: 1.05s; }
.disc-journey.is-in .dj-step:nth-child(3) .dj-type    { animation-delay: 1.15s; }
.disc-journey.is-in .dj-step:nth-child(3) .dj-content { animation-delay: 1.20s; }

.disc-journey.is-in .dj-step:nth-child(4) .dj-badge   { animation-delay: 1.35s; }
.disc-journey.is-in .dj-step:nth-child(4) .dj-type    { animation-delay: 1.45s; }
.disc-journey.is-in .dj-step:nth-child(4) .dj-content { animation-delay: 1.50s; }

@keyframes dj-badge-pop {
  0%   { opacity: 0; transform: scale(.3) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes dj-content-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dj-content-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dj-line-draw {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dj-header,
  .disc-journey .dj-content,
  .disc-journey .dj-badge,
  .disc-journey .dj-type {
    opacity: 1;
    animation: none;
  }
  .disc-journey .dj-steps::before {
    transform: translateX(-50%) scaleY(1);
  }
}

/* ══════════════════════════
   RESULTS
══════════════════════════ */
.results-section {
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--section) var(--gut);
}
.results-inner { max-width: 1200px; margin: 0 auto; }
.results-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.results-head h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--ink);
}
.results-head h2 em { font-style: italic; color: var(--gr); font-weight: 300; }
.results-head p { font-size: 16px; color: var(--muted); }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.result-big {
  border-radius: var(--rad);
  padding: 40px;
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  background: var(--canvas);
}
.result-big:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,.1); border-color: rgba(28,102,65,.2); }
.result-big::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.result-big.c1::after { background: linear-gradient(90deg, var(--or), var(--or2)); }
.result-big.c2::after { background: linear-gradient(90deg, var(--gr), var(--gr2)); }
.result-big.c3::after { background: linear-gradient(90deg, #1C5DA8, var(--gr)); }
.result-big.c4::after { background: linear-gradient(90deg, var(--or), #F7C462); }
.result-industry { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.result-big h3 { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.2px; margin-bottom: 22px; line-height: 1.3; color: var(--ink); }
.result-metrics { display: flex; gap: 28px; margin-bottom: 22px; }
.metric-value { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 40px; letter-spacing: -2px; line-height: 1; display: block; }
.metric-value.orange { color: var(--or); }
.metric-value.green  { color: var(--gr); }
.metric-label { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }
.result-quote { font-size: 13px; color: var(--ink2); font-style: italic; border-left: 2px solid var(--rule); padding-left: 14px; line-height: 1.65; }

/* ══════════════════════════
   PRICING
══════════════════════════ */
.pricing-section {
  padding: var(--section) var(--gut);
  max-width: 1200px;
  margin: 0 auto;
}
.pricing-head { text-align: center; max-width: 600px; margin: 0 auto 60px; }
.pricing-head h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -2px;
  color: var(--ink);
}
.pricing-head h2 em { font-style: italic; color: var(--gr); font-weight: 300; }
.pricing-head p { color: var(--muted); font-size: 16px; margin-top: 14px; }

.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan-card {
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  background: var(--white);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,.08); }
.plan-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rule);
  transition: background .3s;
}
.plan-card:hover::after { background: var(--grad-gr); }
.plan-card.featured { background: var(--ink); border-color: var(--ink); }
.plan-card.featured::after { background: var(--grad-or); }
.plan-card.featured:hover::after { background: var(--grad-or); }

.plan-featured-badge {
  position: absolute;
  top: 18px; right: -24px;
  background: var(--or);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 5px 36px;
  transform: rotate(45deg);
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  background: var(--canvas);
  color: var(--muted);
  border: 1px solid var(--rule);
}
.plan-card.featured .plan-badge { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.1); }
.plan-name { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -.5px; color: var(--ink); }
.plan-card.featured .plan-name { color: #fff; }
.plan-price { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 52px; letter-spacing: -3px; color: var(--or); margin: 18px 0 6px; line-height: 1; }
.plan-price span { font-size: 17px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.plan-card.featured .plan-price span { color: rgba(255,255,255,.3); }
.plan-desc { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.55; }
.plan-card.featured .plan-desc { color: rgba(255,255,255,.4); }
.plan-divider { border: none; border-top: 1px solid var(--rule); margin: 22px 0; }
.plan-card.featured .plan-divider { border-color: rgba(255,255,255,.1); }
.plan-feature { display: flex; gap: 10px; margin-bottom: 9px; font-size: 14px; color: var(--ink2); align-items: flex-start; }
.plan-card.featured .plan-feature { color: rgba(255,255,255,.7); }
.plan-feature-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gr-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}
.plan-card.featured .plan-feature-icon { background: rgba(255,255,255,.1); }
.plan-cta {
  display: block;
  margin-top: 26px;
  padding: 14px 24px;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .2s;
}
.plan-cta.outline { border: 1.5px solid var(--rule); color: var(--ink); }
.plan-cta.outline:hover { border-color: var(--gr); color: var(--gr); }
.plan-cta.solid { background: var(--grad-or); color: #fff; box-shadow: 0 4px 16px rgba(217,78,26,.3); }
.plan-cta.solid:hover { box-shadow: 0 8px 28px rgba(217,78,26,.45); transform: translateY(-2px); }

/* ══════════════════════════
   TESTIMONIALS
══════════════════════════ */
.testi-section {
  background: var(--ink);
  /* Top padding zeroed — disc-journey's 120px bottom padding already
     provides the breathing room between the two dark sections. */
  padding: 0 var(--gut) var(--section);
  position: relative;
  overflow: hidden;
}
.testi-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 10% 80%, rgba(28,102,65,.18) 0%, transparent 55%);
}
.testi-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.testi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px;
}
.testi-header h2 { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: clamp(34px,4vw,52px); letter-spacing: -2px; color: #fff; }
.testi-header h2 em { font-style: italic; color: var(--gr2); font-weight: 300; }
.testi-rating-num { font-family: 'Cabinet Grotesk', sans-serif; font-size: 48px; font-weight: 900; color: #fff; letter-spacing: -2px; line-height: 1; display: block; }
.testi-rating-label { font-size: 13px; color: rgba(255,255,255,.3); margin-top: 4px; }

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rad);
  padding: 32px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.testi-card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); transform: translateY(-4px); }
.testi-stars { color: var(--or2); font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; }
.testi-text  { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; font-style: italic; margin-bottom: 24px; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 15px; color: #fff; }
.testi-name { font-weight: 700; font-size: 14px; color: #fff; display: block; }
.testi-role { font-size: 12px; color: rgba(255,255,255,.35); }
.testi-disc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 16px;
}
.disc-D { background: rgba(217,78,26,.2);  color: #f0a07a; }
.disc-S { background: rgba(28,102,65,.3);  color: #6ee0a0; }
.disc-C { background: rgba(28,93,168,.2);  color: #8bbae8; }

/* ══════════════════════════
   FINAL CTA
══════════════════════════ */
.final-cta {
  padding: var(--section) var(--gut);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.cta-blob-1 { width: 500px; height: 500px; background: rgba(217,78,26,.1);  top: -100px;    left: -100px; }
.cta-blob-2 { width: 600px; height: 600px; background: rgba(28,102,65,.1); bottom: -200px; right: -100px; }
.final-cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.final-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gr-lt);
  border: 1px solid rgba(28,102,65,.2);
  color: var(--gr);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.final-cta h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 80px);
  letter-spacing: -3px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 20px;
}
.final-cta h2 em { font-style: italic; color: var(--or); font-weight: 300; }
.final-cta h2 .gw { color: var(--gr); }
.final-cta > .final-cta-inner > p { font-size: 18px; color: var(--muted); margin-bottom: 44px; }
.cta-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.cta-note strong { color: var(--gr); font-weight: 600; }

/* ── HOME RESPONSIVE ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-left { padding: 100px var(--gut) 40px; }
  .hero-right {
    /* Show on mobile so the arc carousel + result cards stack below the hero copy */
    padding: 0 var(--gut) 60px;
    justify-content: flex-start;
  }
  .story-panels { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .dj-step { grid-template-columns: 1fr 60px 1fr; }
  .services-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .services-head p { text-align: left; }
}
@media (max-width: 600px) {
  .hero-left { padding: 90px var(--gut) 32px; }
  .hero h1 { letter-spacing: -1px; }
  .hero-proof { gap: 16px; flex-wrap: wrap; }
  .proof-num { font-size: 28px; }
  /* Stack hero buttons vertically so the primary CTA text wraps to 2 lines, not 3 */
  .hero-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hero .btn-primary {
    padding: 14px 24px;
    line-height: 1.2;
  }
  .services-grid { grid-template-columns: 1fr; }
  .results-head { grid-template-columns: 1fr; }
  .testi-header { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* ── DISC JOURNEY — mobile redesign ──
     Desktop = 3-col grid with badge in centre column.
     Mobile  = each stage becomes a self-contained card with the
               badge as a pill at the top-left of the card. */
  .dj-steps::before { display: none; }
  .dj-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 28px;
    gap: 0;
  }
  .dj-step > div:empty { display: none; }      /* drop the empty placeholder slots */
  .dj-center {
    order: -1;                                  /* always above the content card */
    align-self: flex-start;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    margin-bottom: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 40px;
  }
  .dj-badge {
    width: 34px; height: 34px;
    font-size: 14px;
    /* box-shadow already accent-coloured via .dj-badge.D/.I/.S/.C — keep it */
  }
  .dj-type {
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
    letter-spacing: .12em;
    color: rgba(255,255,255,.7);
  }
  .dj-type br { display: none; }                /* "Decisive Buyer" on one line */
  .dj-content {
    padding: 22px 20px;
    margin: 0;
    width: 100%;
  }
  .dj-content h3 { font-size: 18px; line-height: 1.3; }
  .dj-content p  { font-size: 13.5px; line-height: 1.65; }
  .dj-bullet     { font-size: 12.5px; margin-top: 14px; }
  .dj-step-num   { font-size: 10.5px; }
  .dj-header { margin-bottom: 48px; }
}