/* ============================================================
   BluePrint360 — enhancement layer
   Loads after styles.css. Pure additive: new graphics,
   motion, and polish on top of the existing layout.
   Brand: paper #FAF9F7 · ink #12141B · purple #7027D8
   ============================================================ */

:root {
  --bp-purple: #7027d8;
  --bp-violet-deep: #4c12a3;
  --bp-magenta: #b719b8;
  --bp-glow: rgba(112, 39, 216, .16);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 1. Gradient display text ---------- */
.hero h1 em,
.section-intro h2 em, .section-top h2 em, .path-copy h2 em,
.capacity-copy h2 em, .final-cta h2 em, .founder-copy h2 em {
  background: linear-gradient(100deg, var(--bp-magenta) 0%, var(--bp-purple) 55%, var(--bp-violet-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 2. Hero entrance choreography ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    opacity: 0;
    transform: translateY(22px);
    animation: bp-rise .9s var(--ease-out-expo) forwards;
  }
  .hero-copy > *:nth-child(1) { animation-delay: .05s }
  .hero-copy > *:nth-child(2) { animation-delay: .15s }
  .hero-copy > *:nth-child(3) { animation-delay: .25s }
  .hero-copy > *:nth-child(4) { animation-delay: .35s }
  .hero-copy > *:nth-child(5) { animation-delay: .45s }
  .hero-copy > *:nth-child(6) { animation-delay: .55s }
  .hero-copy > *:nth-child(7) { animation-delay: .65s }
  .hero-copy > *:nth-child(8) { animation-delay: .75s }

  /* ambient aurora behind the hero */
  .hero { position: relative; overflow: hidden; }
  .hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 130%;
    background:
      radial-gradient(42% 55% at 24% 30%, rgba(183, 25, 184, .10), transparent 70%),
      radial-gradient(46% 60% at 76% 26%, rgba(112, 39, 216, .13), transparent 70%),
      radial-gradient(38% 48% at 52% 82%, rgba(76, 18, 163, .07), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    animation: bp-drift 18s ease-in-out infinite alternate;
    z-index: 0;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(18, 20, 27, .055) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(65% 62% at 50% 38%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(65% 62% at 50% 38%, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-copy { position: relative; z-index: 1; }

  @keyframes bp-drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
  }
  @keyframes bp-rise {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- 3. Eyebrow pulse dot ---------- */
.eyebrow-dot {
  position: relative;
}
.eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--bp-purple);
  opacity: 0;
  animation: bp-ping 2.6s ease-out infinite;
}
@keyframes bp-ping {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- 4. Buttons: shine sweep + lift ---------- */
.button, .nav-cta {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo), background .25s;
  will-change: transform;
}
.button:hover, .nav-cta:hover {
  transform: translateY(-2px);
}
.button-dark:hover { box-shadow: 0 14px 34px -14px rgba(18, 20, 27, .45); }
.button-light:hover { box-shadow: 0 14px 34px -16px var(--bp-glow), 0 0 0 1px var(--bp-purple); }
.nav-cta:hover { box-shadow: 0 10px 26px -12px rgba(18, 20, 27, .4); }
.button span, .nav-cta span {
  display: inline-block;
  transition: transform .3s var(--ease-out-expo);
}
.button:hover span, .nav-cta:hover span { transform: translateX(4px); }
.button::before {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-22deg);
  transition: left .6s var(--ease-out-expo);
  pointer-events: none;
}
.button:hover::before { left: 130%; }

/* ---------- 5. Scroll-reveal (JS adds .bp-in when visible) ---------- */
.bp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
  transition-delay: var(--bp-delay, 0s);
}
.bp-reveal.bp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 6. Leak cards: spotlight + icon motion ---------- */
.leak-card {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo), border-color .35s;
}
.leak-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--bp-glow), transparent 72%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.leak-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(18, 20, 27, .18), 0 0 0 1px rgba(112, 39, 216, .22);
}
.leak-card:hover::before { opacity: 1; }
.card-graphic i {
  transition: transform .45s var(--ease-out-expo), background .45s;
}
.leak-card:hover .card-graphic i:nth-child(2) { transform: translateX(6px); }
.leak-card:hover .card-graphic i:nth-child(3) { transform: translateX(10px); transition-delay: .05s; }
.leak-card:hover .card-graphic i:nth-child(4) { transform: translateX(14px); transition-delay: .1s; }
.leak-card:hover .card-graphic > span { transform: scale(1.15) rotate(-6deg); }
.card-graphic > span { transition: transform .45s var(--ease-out-expo); display: inline-block; }
.card-link { transition: letter-spacing .3s var(--ease-out-expo), color .3s; }
.leak-card:hover .card-link { color: var(--bp-purple); }

/* ---------- 7. State visual (today → covered): alive dots + flow ---------- */
.state-dot.red  { animation: bp-blink-red 1.8s ease-in-out infinite; }
.state-dot.green { animation: bp-blink-green 2.4s ease-in-out infinite; }
@keyframes bp-blink-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223, 90, 82, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(223, 90, 82, 0); }
}
@keyframes bp-blink-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 123, 90, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(22, 123, 90, 0); }
}
.signal-row span {
  display: inline-block;
  animation: bp-signal 2.2s ease-in-out infinite;
}
.signal-row span:nth-child(2) { animation-delay: .3s }
.signal-row span:nth-child(3) { animation-delay: .6s }
.signal-row span:nth-child(4) { animation-delay: .9s }
@keyframes bp-signal {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-3px); }
}
.system-chip { transition: border-color .3s, color .3s, transform .3s var(--ease-out-expo); }
.state-before:hover .system-chip { transform: translateY(-2px); }
.flow-list > div { transition: transform .35s var(--ease-out-expo), background .35s; }
.flow-list > div:hover { transform: translateX(5px); }

/* ---------- 8. Trust bar: infinite marquee ---------- */
.trust-bar { overflow: hidden; position: relative; }
.trust-bar .trust-items {
  display: flex;
  gap: 44px;
  white-space: nowrap;
}
.trust-bar .trust-items span {
  flex-shrink: 0;
  position: relative;
  padding-left: 16px;
}
.trust-bar .trust-items span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: linear-gradient(135deg, var(--bp-magenta), var(--bp-purple));
}
@media (prefers-reduced-motion: no-preference) {
  .trust-bar .trust-items {
    animation: bp-marquee 26s linear infinite;
    width: max-content;
  }
  .trust-bar:hover .trust-items { animation-play-state: paused; }
  @keyframes bp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* duplicate the items via JS for seamless loop */
}

/* ---------- 9. Calculator: glowing result + liquid bar ---------- */
.capacity-number strong {
  background: linear-gradient(95deg, var(--bp-magenta), var(--bp-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  transition: filter .3s;
}
.capacity-visual:has(#result.bp-tick) .capacity-number strong { filter: drop-shadow(0 0 14px var(--bp-glow)); }
#capacityFill {
  position: relative;
  background: linear-gradient(90deg, var(--bp-violet-deep), var(--bp-purple) 60%, var(--bp-magenta));
  transition: width .5s var(--ease-out-expo);
  overflow: hidden;
}
#capacityFill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,.14) 0 8px,
    transparent 8px 18px
  );
  animation: bp-stripes 1.4s linear infinite;
}
@keyframes bp-stripes {
  to { background-position: 26px 0; }
}
.model-controls input[type="range"] {
  accent-color: var(--bp-purple);
}
.model-controls input[type="range"]:focus-visible {
  outline: 2px solid var(--bp-purple);
  outline-offset: 3px;
}

/* ---------- 10. Timeline: draw-in line + staggered steps ---------- */
.timeline-line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.4s var(--ease-out-expo) .2s;
}
.bp-in ~ .timeline .timeline-line,
.path-section.bp-in .timeline-line { transform: scaleY(1); }
.time-step {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.time-step:nth-child(2) { transition-delay: .35s }
.time-step:nth-child(3) { transition-delay: .7s }
.time-step:nth-child(4) { transition-delay: 1.05s }
.path-section.bp-in .time-step { opacity: 1; transform: none; }
.time-marker {
  transition: box-shadow .4s, transform .4s var(--ease-out-expo);
}
.time-step:hover .time-marker {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--bp-glow);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-line { transform: scaleY(1); transition: none; }
  .time-step { opacity: 1; transform: none; transition: none; }
}

/* ---------- 11. Founder portrait treatment ---------- */
.founder-photo {
  position: relative;
}
.founder-photo img {
  transition: transform .6s var(--ease-out-expo), filter .6s;
  filter: saturate(.92);
}
.founder-photo:hover img {
  transform: scale(1.025);
  filter: saturate(1.05);
}
.founder-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(18, 20, 27, .55), transparent);
  pointer-events: none;
  z-index: 0;
}
.photo-label { position: relative; z-index: 1; }

/* ---------- 12. Header shadow on scroll ---------- */
.site-header {
  transition: box-shadow .4s, background .4s;
}
.site-header.bp-scrolled {
  box-shadow: 0 10px 30px -18px rgba(18, 20, 27, .25);
}

/* ---------- 13. Footer polish ---------- */
.site-footer a {
  position: relative;
  transition: color .25s;
}
.site-footer a:not(.brand)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out-expo);
}
.site-footer a:not(.brand):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- 14. Selection & scrollbar ---------- */
::selection {
  background: var(--bp-purple);
  color: #fff;
}
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--paper); }
  ::-webkit-scrollbar-thumb {
    background: #cfcbdb;
    border-radius: 8px;
    border: 3px solid var(--paper);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--bp-purple); }
}

/* ---------- 1b. Hero: centered, uncrowded, FULL-WIDTH aurora ---------- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-left: 28px;
  padding-right: 28px;
}
/* aurora must span the whole viewport, not just the 1180px column */
@media (min-width: 1180px) {
  .hero { margin: 0 calc((1180px - 100vw) / 2); }
}

/* ---------- 1c. Chaos field: messy apps → structured flow ---------- */
.chaos-field {
  position: relative;
  height: 230px;
  margin: 8px 0 18px;
}
.app-chip {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r));
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 6px 18px -10px rgba(18,20,27,.28);
  animation: bp-wobble 4s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  white-space: nowrap;
  z-index: 1;
}
.app-chip img { width: 17px; height: 17px; object-fit: contain; }
.owner-chip {
  border-color: var(--bp-purple);
  box-shadow: 0 0 0 5px rgba(112,39,216,.14), 0 6px 18px -10px rgba(18,20,27,.3);
  color: var(--bp-violet-deep);
}
.owner-chip img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(.2);
}
@keyframes bp-wobble {
  from { translate: 0 0; }
  to   { translate: 3px -4px; }
}
.chaos-threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.chaos-threads path {
  fill: none;
  stroke: rgba(223,90,82,.45);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  animation: bp-thread 1.6s linear infinite;
}
@keyframes bp-thread {
  to { stroke-dashoffset: -20; }
}
@media (prefers-reduced-motion: reduce) {
  .app-chip, .chaos-threads path { animation: none; }
}

/* ---------- 1d. Orbit field: AI core with structured app satellites ---------- */
.orbit-field {
  position: relative;
  height: 230px;
  margin: 8px 0 18px;
}
.orbit-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbit-rings circle {
  stroke: rgba(22, 123, 90, .28);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
.ai-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bp-magenta), var(--bp-violet-deep));
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 10px rgba(112,39,216,.12), 0 0 34px rgba(183,25,184,.4);
  animation: bp-core-pulse 3s ease-in-out infinite;
  z-index: 2;
}
.ai-core b { font-size: 21px; letter-spacing: -.02em; }
.ai-core small { font-size: 7.5px; opacity: .85; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
@keyframes bp-core-pulse {
  0%, 100% { box-shadow: 0 0 0 9px rgba(112,39,216,.11), 0 0 26px rgba(183,25,184,.32); }
  50%      { box-shadow: 0 0 0 15px rgba(112,39,216,.05), 0 0 44px rgba(183,25,184,.5); }
}
.sat {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px -8px rgba(18,20,27,.3);
  z-index: 1;
  animation: bp-orbit-spin 30s linear infinite;
  transform-origin: 0 0;
}
.sat img { width: 20px; height: 20px; object-fit: contain; }
/* counter-rotate the icons so logos stay upright while orbiting */
.sat img { animation: bp-orbit-counter 30s linear infinite; }
@keyframes bp-orbit-spin {
  from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
  to   { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc((var(--a) + 360deg) * -1)); }
}
@keyframes bp-orbit-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.sat-a { --a: -90deg; --r: 58px; animation-delay: 0s; }
.sat-b { --a: -30deg; --r: 98px; animation-delay: -5s; }
.sat-c { --a: 30deg;  --r: 58px; animation-delay: -10s; }
.sat-d { --a: 90deg;  --r: 98px; animation-delay: -15s; }
.sat-e { --a: 150deg; --r: 58px; animation-delay: -20s; }
.sat-f { --a: 210deg; --r: 98px; animation-delay: -25s; }
@media (prefers-reduced-motion: reduce) {
  .ai-core, .sat, .sat img { animation: none !important; }
}

/* ---------- 15b. Path section: gradient headline must read on purple ---------- */
.path-copy h2 em,
.path-copy h2 em * {
  background: linear-gradient(100deg, #ffd6fb 0%, #f2a8ff 55%, #d78cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.path-copy .eyebrow { color: rgba(255,255,255,.75); }
.time-marker {
  background: linear-gradient(135deg, var(--bp-magenta), var(--bp-violet-deep));
}

/* ---------- 16. Header brand logo bigger ---------- */
.brand img { width: 34px; height: 34px; }
.brand { font-size: 19px; }

.final-cta {
  position: relative;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(520px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bp-purple), var(--bp-magenta), transparent);
}


/* ---- Proof section: stats + verified testimonials ---- */
.proof-section{border-top:1px solid var(--line);padding-top:120px;padding-bottom:120px}
.proof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.proof-stat{background:white;border:1px solid var(--line);padding:22px;transition:border-color .3s,transform .35s var(--ease-out-expo)}
.proof-stat:hover{border-color:var(--purple);transform:translateY(-4px)}
.proof-stat strong{display:block;font-size:38px;letter-spacing:-.06em;font-weight:600;line-height:1;background:linear-gradient(95deg,var(--bp-magenta),var(--bp-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.proof-stat span{display:block;font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.quote-card{background:white;border:1px solid var(--line);padding:24px;margin:0;display:flex;flex-direction:column;gap:18px;transition:border-color .3s,box-shadow .35s var(--ease-out-expo),transform .35s var(--ease-out-expo)}
.quote-card:hover{border-color:rgba(112,39,216,.35);box-shadow:0 18px 40px -22px rgba(18,20,27,.16);transform:translateY(-4px)}
.quote-card blockquote{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink)}
.quote-card blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;color:var(--bp-purple);margin-bottom:12px}
.quote-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.quote-card figcaption b{color:var(--ink);font-size:13px}
.stars{color:#c9a227;font-size:12px;letter-spacing:3px;margin-bottom:6px}
@media(max-width:900px){.proof-stats{grid-template-columns:repeat(2,1fr)}.quote-grid{grid-template-columns:1fr}}

/* ---- Line section: the doctrine (dark ink band) ---- */
.line-section{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-top:130px;padding-bottom:130px}
.line-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 60% at 78% 30%,rgba(183,25,184,.14),transparent 70%),radial-gradient(40% 52% at 18% 75%,rgba(112,39,216,.12),transparent 70%)}
.line-copy{position:relative;z-index:1}
.line-section .eyebrow{color:#a7a0b8}
.line-section h2{font-size:clamp(42px,5vw,65px);line-height:.98;letter-spacing:-.075em;margin:0 0 30px;font-weight:600;max-width:860px}
.line-section h2 em{font-style:normal;background:linear-gradient(100deg,#ffd6fb 0%,#f2a8ff 55%,#d78cff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.line-body{color:#b9b6c4;font-size:17px;line-height:1.62;max-width:580px;margin:0 0 30px}
.line-kicker{font:500 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#71d0ad;margin:0}

/* ---- Progression: scattered tools -> coordinated -> business-wide AI ---- */
.progression-section{border-top:1px solid var(--line);padding-top:120px;padding-bottom:140px}
.progression-grid{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch}
.progression-card{border:1px solid var(--line);background:white;padding:22px;display:flex;flex-direction:column;min-height:360px}
.progression-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.progression-dot{width:7px;height:7px;border-radius:50%;background:#c9c8ce}
.prog-title{font:500 11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.progression-visual{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0}
.progression-card>p{font-size:13px;color:var(--muted);margin:0}
.prog-arrow{display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:20px}

/* ---- v6: process-step card headings ---- */
.progression-head{gap:12px}
.prog-dot,.prog-title{display:none}
.prog-step{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 11px 'DM Mono',monospace;color:#fff;background:linear-gradient(135deg,var(--bp-magenta),var(--bp-violet-deep));box-shadow:0 0 0 4px rgba(112,39,216,.10)}
.prog-head-text b{display:block;font-size:17px;letter-spacing:-.03em;font-weight:700;color:var(--ink);line-height:1.2}
.prog-head-text small{display:block;font-size:11px;color:var(--muted);margin-top:1px}

/* ---- v7: slim Coverage System band (timeline removed) ---- */
.path-section.path-slim{display:block;text-align:center;padding-top:92px;padding-bottom:98px}
.path-slim .path-copy{padding-right:0;max-width:640px;margin:0 auto}
.path-slim .path-copy>p:not(.eyebrow){margin-left:auto;margin-right:auto}
.path-slim .button{margin-top:4px}

/* ---- v8: GROWTH BUDGET — full-bleed statement section ---- */
.growth-band{height:1px;background:linear-gradient(90deg,transparent,rgba(112,39,216,.5),rgba(183,25,184,.5),transparent)}
.growth-section{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-top:110px;padding-bottom:115px}
.growth-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(44% 58% at 80% 22%,rgba(237,2,226,.13),transparent 70%),radial-gradient(42% 55% at 14% 78%,rgba(112,39,216,.16),transparent 70%)}
.growth-section .section-pad{position:relative;z-index:1}
.growth-section .eyebrow{color:#a7a0b8}
.growth-section h2{font-size:clamp(44px,5.4vw,72px);line-height:.98;letter-spacing:-.07em;margin:0 0 24px;font-weight:600;max-width:900px}
.growth-section h2 em{font-style:normal;background:linear-gradient(100deg,#ffd6fb 0%,#f2a8ff 50%,#d78cff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.growth-sub{color:#b9b6c4;font-size:16px;line-height:1.6;max-width:520px;margin:0 0 44px}
.gv-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.gv-cell{--gc:#ED02E2;position:relative;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:20px 16px 18px;transition:border-color .3s,transform .35s var(--ease-out-expo),background .3s}
.gv-cell:hover{border-color:var(--gc);background:rgba(255,255,255,.07);transform:translateY(-5px)}
.gv-pct{position:absolute;top:12px;right:12px;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;color:#a7a0b8;border:1px solid rgba(255,255,255,.18);padding:3px 6px;border-radius:999px;font-style:normal}
.gv-cell strong{display:block;font-size:clamp(28px,2.7vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--gc);font-variant-numeric:tabular-nums;text-shadow:0 0 24px color-mix(in srgb,var(--gc) 45%,transparent)}
.gv-cell b{display:block;font-size:13.5px;margin-top:12px;letter-spacing:-.01em}
.gv-cell span{display:block;font-size:11px;color:#a7a6ae;margin-top:5px;line-height:1.5}
@media(max-width:1000px){.gv-row{grid-template-columns:repeat(3,1fr)}.gv-cell:nth-child(4),.gv-cell:nth-child(5){}}
@media(max-width:700px){.gv-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gv-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  .gv-cell{opacity:0;transform:translateY(24px)}
  .growth-section.bp-in .gv-cell{opacity:1;transform:none;transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo),border-color .3s,background .3s}
  .growth-section.bp-in .gv-cell:nth-child(2){transition-delay:.08s}.growth-section.bp-in .gv-cell:nth-child(3){transition-delay:.16s}.growth-section.bp-in .gv-cell:nth-child(4){transition-delay:.24s}.growth-section.bp-in .gv-cell:nth-child(5){transition-delay:.32s}
}

/* ---- v9: mobile polish ---- */
html,body{overflow-x:clip}
@media(max-width:900px){
  /* stack section headers above their sub-notes instead of squeezing side-by-side */
  .section-top{display:block;margin-bottom:34px}
  .section-note{margin-top:14px;max-width:460px;font-size:13.5px}
  .diag-metrics{grid-template-columns:repeat(2,1fr)}
  .diag-metrics>div:last-child{grid-column:1/-1}
  .gv-row{gap:9px}
}
@media(max-width:820px){
  .hero-actions{flex-wrap:wrap;gap:16px}
  .proof-stat strong{font-size:32px}
  .leaks-section{padding-top:88px;padding-bottom:96px}
  .diag-section,.proof-section{padding-top:84px;padding-bottom:92px}
  .split-section{padding-top:80px;padding-bottom:84px}
  .state-card{min-height:0}
}
@media(max-width:600px){
  .gv-pct{position:static;display:inline-block;margin-bottom:10px}
  .gv-cell strong{font-size:30px}
}
@media(max-width:520px){
  .eyebrow{margin-bottom:16px}
  .section-note{max-width:none}
  .proof-stats{grid-template-columns:1fr 1fr;gap:9px}
  .proof-stat{padding:14px 12px}
  .proof-stat strong{font-size:27px}
  .quote-card{padding:18px 16px}
  .diag-grid{display:block}
  .diag-controls{border-right:0;border-bottom:1px solid var(--line)}
  .diag-pills{flex-direction:column}
  .diag-pill{display:flex;justify-content:space-between;text-align:left;padding:9px 11px;font-size:10px}
  .diag-pill br{display:none}
  .diag-hero{padding:15px 14px}
  .diag-hero strong{font-size:36px}
  .diag-metrics{grid-template-columns:1fr 1fr}
  .diag-chrome{padding:11px 14px}
  /* shrink the scatter spread so chips stay inside the card */
  .chaos-field{height:196px}
  .app-chip{font-size:11px;padding:6px 9px;transform:translate(calc(-50% + var(--dx)*.68),calc(-50% + var(--dy)*.68)) rotate(var(--r))}
  .owner-chip img{width:18px;height:18px}
  .hub-field{height:210px}
  .stack-connectors{height:12px}
  .gv-row{grid-template-columns:1fr 1fr;gap:9px}
  .gv-cell{padding:14px 12px}
  .gv-cell span{font-size:10.5px}
  .growth-section{padding-top:78px;padding-bottom:82px}
  .growth-sub{margin-bottom:30px}
  .line-section{padding-top:84px;padding-bottom:86px}
  .final-cta{padding-top:88px;padding-bottom:92px}
}

/* Card 1: scattered tool chips */
.scatter-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:280px}
.tool-chip{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px dashed var(--line);background:white;padding:12px 14px;font:10px 'DM Mono',monospace;color:var(--muted);transform:rotate(var(--r)) translateY(var(--dy))}
.tool-chip b{font-size:17px;font-weight:400;color:#9a99a1;line-height:1}

/* Card 2: aligned checklist */
.align-list{display:flex;flex-direction:column;gap:9px;width:100%}
.align-row{display:flex;align-items:center;gap:10px;border:1px solid #e2ddd0;background:#f7f5ef;padding:12px 14px;font-size:13px;font-weight:500}
.align-row b{color:var(--green);font-weight:600;line-height:1}

/* Card 3: hub + departments */
.hub-wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.hub-core{width:74px;height:74px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font:500 10px 'DM Mono',monospace;letter-spacing:.1em;box-shadow:0 0 0 11px rgba(112,39,216,.12)}
.dept-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px;width:100%;max-width:260px}
.dept-tags span{border:1px solid #e0d4f4;background:var(--violet);color:var(--purple);font:500 9px 'DM Mono',monospace;letter-spacing:.06em;text-align:center;padding:7px 4px}
.progression-card.card-final{background:#f6f1fc;border-color:#dccdf3}
.card-final .prog-title,.card-final .progression-dot{color:var(--purple)}
@media(max-width:900px){.progression-grid{grid-template-columns:1fr}.prog-arrow{transform:rotate(90deg);padding:14px 0}}

/* ---- v2 graphics: mess field (card 1) ---- */
.mess-field{position:relative;width:100%;height:255px}
.mess-chip{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:6px;background:white;border:1px solid var(--line);padding:9px 11px;font:10px 'DM Mono',monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap;box-shadow:0 5px 14px -10px rgba(18,20,27,.28);transform:rotate(var(--r));animation:bp-wobble 4.5s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.mess-chip b{font-size:15px;font-weight:400;color:#9a99a1;line-height:1}
.mess-chip.faded{opacity:.5}
.mess-chip.dead{border-style:dashed;box-shadow:none;color:#b3b2ba}
.mess-chip.dept{border-color:#eedbd9;background:#fbf6f5;color:#bf6a5f;font-weight:600}
@media(max-width:520px){.mess-field{height:215px}.mess-chip{padding:7px 8px;font-size:9px}.mess-chip b{font-size:13px}}

/* ---- v2 graphics: AI hub field (card 3) ---- */
.hub-field{position:relative;width:100%;max-width:310px;height:255px;margin:0 auto}
.hub-links{position:absolute;inset:0;width:100%;height:100%}
.hub-links path{fill:none;stroke:rgba(112,39,216,.45);stroke-width:1.5;stroke-dasharray:4 6;animation:bp-thread 1.4s linear infinite}
.hub-core-ai{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--bp-magenta),var(--bp-violet-deep));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;animation:bp-core-pulse 3s ease-in-out infinite}
.hub-core-ai b{font-size:22px;letter-spacing:-.02em;line-height:1}
.hub-core-ai small{font-size:7.5px;opacity:.85;margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.hub-core-ai::before,.hub-core-ai::after{content:"";position:absolute;left:50%;top:50%;width:110px;height:110px;border-radius:50%;border:1px solid rgba(183,25,184,.5);opacity:0;animation:bp-sonar 3.2s ease-out infinite;z-index:-1}
.hub-core-ai::after{animation-delay:1.6s}
@keyframes bp-sonar{0%{transform:translate(-50%,-50%) scale(.7);opacity:.85}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.hub-tag{position:absolute;z-index:1;background:white;border:1px solid #e0d4f4;color:var(--purple);font:500 9px 'DM Mono',monospace;letter-spacing:.06em;text-align:center;padding:7px 9px;animation:bp-wobble 5s ease-in-out infinite alternate;animation-delay:var(--d,0s);box-shadow:0 4px 12px -9px rgba(18,20,27,.25)}
.t-sales{left:0;top:4%;--d:0s}
.t-ops{right:0;top:4%;--d:.7s}
.t-finance{right:0;top:46%;--d:1.4s}
.t-people{right:5%;bottom:5%;--d:2.1s}
.t-delivery{left:5%;bottom:5%;--d:2.8s}
.t-admin{left:0;top:46%;--d:3.5s}
@media(max-width:520px){.hub-field{height:225px}.hub-tag{padding:6px 7px;font-size:8px}}

/* ---- v2 graphics: sonar rings on the covered-business AI core ---- */
.state-after .ai-core::before,.state-after .ai-core::after{content:"";position:absolute;left:50%;top:50%;width:86px;height:86px;border-radius:50%;border:1px solid rgba(22,123,90,.45);opacity:0;animation:bp-sonar-green 3.4s ease-out infinite;pointer-events:none}
.state-after .ai-core::after{animation-delay:1.7s}
@keyframes bp-sonar-green{0%{transform:translate(-50%,-50%) scale(.7);opacity:.8}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.sat-check{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:600;box-shadow:0 0 0 3px #fff;animation:bp-orbit-counter 30s linear infinite}
.sat-a .sat-check{animation-delay:0s}.sat-b .sat-check{animation-delay:-5s}.sat-c .sat-check{animation-delay:-10s}.sat-d .sat-check{animation-delay:-15s}.sat-e .sat-check{animation-delay:-20s}.sat-f .sat-check{animation-delay:-25s}

/* ---- v2 graphics: stalled-work ticket pile (the business today) ---- */
.ticket-stack{position:absolute;left:4%;bottom:-8px;z-index:2}
.ticket-stack span{display:block;width:max-content;background:#fff;border:1px solid #eadfdc;color:#a94b42;font:500 8px 'DM Mono',monospace;letter-spacing:.08em;padding:5px 8px;margin-top:-1px;box-shadow:0 4px 10px -8px rgba(18,20,27,.35)}
.ticket-stack span:nth-child(1){transform:rotate(-4deg)}
.ticket-stack span:nth-child(2){transform:translateX(10px) rotate(3deg)}
.ticket-stack span:nth-child(3){transform:translateX(4px) rotate(-2deg)}
.ticket-stack b{display:inline-block;margin-top:7px;background:var(--red);color:#fff;font:500 8px 'DM Mono',monospace;letter-spacing:.08em;padding:4px 8px;border-radius:999px;animation:bp-badge-blink 2.2s ease-in-out infinite}
@keyframes bp-badge-blink{0%,100%{box-shadow:0 0 0 0 rgba(223,90,82,.45)}50%{box-shadow:0 0 0 6px rgba(223,90,82,0)}}

/* ---- v2 graphics: nudging arrows between states ---- */
@media(prefers-reduced-motion:no-preference){
  .state-arrow,.prog-arrow{animation:bp-nudge 2.4s ease-in-out infinite}
  @keyframes bp-nudge{0%,100%{translate:0 0}50%{translate:6px 0}}
}

/* ---- v2 graphics: reduced-motion kill switch ---- */
@media(prefers-reduced-motion:reduce){
  .mess-chip,.hub-tag,.hub-links path,.hub-core-ai,.ticket-stack b,.state-arrow,.prog-arrow{animation:none!important}
  .hub-core-ai::before,.hub-core-ai::after,.state-after .ai-core::before,.state-after .ai-core::after{display:none}
}

/* ---- v3: Diagnostic Engine (light-theme port of calc-v2) ---- */
.diag-section{border-top:1px solid var(--line);padding-top:120px;padding-bottom:130px}
.diag-window{background:white;border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(18,20,27,.18)}
.diag-chrome{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
.diag-dots{display:flex;gap:6px}
.diag-dots i{width:9px;height:9px;border-radius:50%;background:#e8a7a1}
.diag-dots i:nth-child(2){background:#ecd39a}
.diag-dots i:last-child{background:#a8dcc3}
.diag-chrome-title{font:500 11px 'DM Mono',monospace;color:#777}
.diag-chrome-title b{color:var(--ink);font-weight:600}
.diag-live{margin-left:auto;display:flex;align-items:center;gap:7px;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--green)}
.diag-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:bp-blink-green 2s ease-in-out infinite}
.diag-grid{display:grid;grid-template-columns:42% 58%}
.diag-controls{border-right:1px solid var(--line);padding:22px}
.diag-presets>span{font:500 9px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#888}
.diag-preset-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 20px}
.diag-preset{cursor:pointer;background:#faf9f7;border:1px solid var(--line);padding:8px 10px;font-size:12px;font-weight:600;color:var(--ink);transition:border-color .25s,transform .25s var(--ease-out-expo)}
.diag-preset:hover{border-color:var(--purple);transform:translateY(-2px)}
.diag-field{display:block;margin-bottom:18px}
.diag-field>span:first-child{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);margin-bottom:6px}
.diag-field b{color:var(--ink);font-weight:600}
.diag-field output{font:600 13px 'DM Mono',monospace;color:var(--purple)}
.diag-pills{display:flex;gap:7px}
.diag-pill{flex:1;cursor:pointer;background:white;border:1px solid var(--line);padding:9px 6px;font:500 10px/1.4 'DM Mono',monospace;color:var(--muted);transition:border-color .25s,color .25s,background .25s}
.diag-pill:hover{border-color:var(--purple)}
.diag-pill.active{border-color:var(--purple);color:var(--purple);background:#f6f1fc}
.diag-hint{font:10px 'DM Mono',monospace;color:#999;margin:2px 0 0}
.diag-dash{padding:22px;display:flex;flex-direction:column;gap:16px}
.diag-hero{background:linear-gradient(135deg,#fbf8ff,#f5eefc);border:1px solid #e6dbf5;padding:20px}
.diag-hero small{display:block;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#888}
.diag-hero strong{display:block;font-size:clamp(38px,4vw,54px);letter-spacing:-.06em;font-weight:600;margin:8px 0 6px;line-height:1;background:linear-gradient(95deg,var(--bp-magenta),var(--bp-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-variant-numeric:tabular-nums;transition:filter .3s}
.diag-window:has(#dResult.bp-tick) .diag-hero strong{filter:drop-shadow(0 0 14px var(--bp-glow))}
.diag-hero span{font:10px 'DM Mono',monospace;color:#999}
.diag-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.diag-metrics>div{border:1px solid var(--line);padding:12px}
.diag-metrics span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:5px}
.diag-metrics b{font:600 15px 'DM Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.diag-stuck small{display:block;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;color:#888;margin-bottom:7px}
.diag-bar{display:flex;height:12px;background:#efedf3;overflow:hidden}
.diag-bar i{height:100%;transition:width .5s var(--ease-out-expo)}
.diag-stuck-leg{display:block;font:9.5px 'DM Mono',monospace;color:#999;margin-top:7px;letter-spacing:.02em}
.diag-cta{align-self:flex-start;margin-top:2px}
@media(max-width:900px){.diag-grid{grid-template-columns:1fr}.diag-controls{border-right:0;border-bottom:1px solid var(--line)}.diag-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.diag-metrics{grid-template-columns:1fr}.diag-chrome-title{display:none}.diag-live{margin-left:auto}}

/* ---- v3: founder authority strip ---- */
.founder-strip{display:flex;align-items:center;gap:26px;padding-top:60px;padding-bottom:60px;border-top:1px solid var(--line)}
.founder-strip img{width:76px;height:76px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex-shrink:0;transition:filter .4s,transform .4s var(--ease-out-expo)}
.founder-strip:hover img{filter:grayscale(0);transform:scale(1.05)}
.strip-copy{flex:1}
.strip-copy .eyebrow{margin-bottom:8px}
.strip-copy p:not(.eyebrow){margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:600px}
.strip-copy strong{color:var(--ink)}
@media(max-width:700px){.founder-strip{flex-direction:column;text-align:center;gap:14px}.strip-copy p:not(.eyebrow){margin:0 auto}}

/* ---- v4: covered business = fortified find/repair/cover stack ---- */
.stack-field{margin:8px 0 18px;display:flex;flex-direction:column}
.layer-tools{border:1px solid var(--line);background:#fff;padding:9px 10px 10px}
.layer-tools>small{display:block;font:500 9px 'DM Mono',monospace;letter-spacing:.08em;color:#888;margin-bottom:7px}
.tool-row{display:flex;gap:6px}
.tool-row span{flex:1;height:32px;display:grid;place-items:center;background:#f6f1fc;border:1px solid #e0d4f4;color:var(--purple);font:600 9px 'DM Mono',monospace;letter-spacing:.07em;transition:border-color .3s,background .3s}
.tool-row span:hover{border-color:var(--purple);background:#efe6fb}
.stack-connectors{position:relative;display:flex;justify-content:space-between;padding:0 26px;height:14px}
.stack-connectors i{width:2px;height:100%;background:repeating-linear-gradient(180deg,rgba(112,39,216,.5) 0 3px,transparent 3px 6px);animation:bp-flow-down 1s linear infinite}
@keyframes bp-flow-down{to{background-position:0 6px}}
.leak-drip{position:absolute;left:21%;top:-2px;width:7px;height:10px;border-radius:50%/62% 62% 38% 38%;background:var(--red);opacity:0;animation:bp-drip 2.8s ease-in infinite}
@keyframes bp-drip{0%{transform:translateY(0);opacity:0}18%{opacity:1}78%{transform:translateY(13px);opacity:1}100%{transform:translateY(15px);opacity:0}}
.leak-fixed{position:absolute;right:10%;top:50%;transform:translateY(-50%);font:600 8px 'DM Mono',monospace;letter-spacing:.08em;color:var(--green);border:1px solid rgba(22,123,90,.4);background:#f2faf5;padding:2px 6px;border-radius:999px;animation:bp-badge-blink 2.8s ease-in-out infinite}
.layer-ai{position:relative;overflow:hidden;text-align:center;color:#fff;padding:12px 10px 11px;background:linear-gradient(135deg,var(--bp-magenta),var(--bp-violet-deep));animation:bp-core-pulse 3.2s ease-in-out infinite}
.layer-ai::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.10) 0 8px,transparent 8px 18px);animation:bp-stripes 1.6s linear infinite}
.layer-ai b,.layer-ai .ai-steps{position:relative;z-index:1}
.layer-ai b{display:block;font-size:12px;letter-spacing:.07em}
.ai-steps{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:7px}
.ai-steps span{font:500 8px 'DM Mono',monospace;letter-spacing:.05em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:3px 7px;border-radius:999px;white-space:nowrap}
.layer-human{text-align:center;background:var(--ink);color:#fff;padding:11px 10px;border-top:3px solid #66d1a6;border-radius:0 0 2px 2px}
.layer-human b{display:block;font-size:11.5px;letter-spacing:.07em}
.layer-human small{display:block;font-size:9.5px;color:#a7a6ae;margin-top:3px}
@media(max-width:520px){.tool-row{flex-wrap:wrap}.tool-row span{flex:1 1 28%;height:28px}.stack-connectors{padding:0 20%}}
@media(prefers-reduced-motion:reduce){.stack-connectors i,.leak-drip,.leak-fixed,.layer-ai,.layer-ai::after{animation:none!important}}

/* ---- v5: equal-height state cards ---- */
.state-visual{align-items:stretch}
.state-card{display:flex;flex-direction:column}
.state-card>p{margin-top:auto;padding-top:20px}
.stack-field{margin:auto 0 4px}