/* Homepage growth layer: verified proof, commercial starting points and the
   Projectwijzer handoff. Shared header/launcher styles remain externally owned. */
.home-proof,
.home-starts,
.contact-route-teaser {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.home-proof,
.home-starts {
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}

.home-growth-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .68fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.home-growth-heading > p {
  max-width: 37rem;
  margin: 0 0 .25rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.proof-constellation {
  display: grid;
  grid-template-columns: minmax(25rem, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.proof-constellation__nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.proof-node {
  --proof-accent: var(--violet);
  display: flex;
  min-height: 4.75rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(29, 25, 32, .2);
  border-radius: 1rem;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
  background: rgba(255, 250, 242, .7);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.proof-node span { font-size: .95rem; font-weight: 850; }
.proof-node small { margin-top: .2rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.proof-node:hover { border-color: var(--proof-accent); transform: translateY(-2px); }
.proof-node:focus-visible { outline: 3px solid var(--proof-accent); outline-offset: 3px; }
.proof-node[aria-selected="true"] { border-color: var(--proof-accent); background: #fffaf2; box-shadow: inset .28rem 0 var(--proof-accent); }
.proof-node--web { --proof-accent: var(--blue); }
.proof-node--ai { --proof-accent: #7a45d6; }
.proof-node--bedrijf { --proof-accent: #086974; }
.proof-node--help { --proof-accent: #266b59; }
.proof-node--design { --proof-accent: var(--orange); }
.proof-node--shop { --proof-accent: #963859; }
.proof-constellation__core { display: none; }

.proof-constellation__panels {
  min-width: 0;
  border: 1px solid rgba(29, 25, 32, .2);
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fffaf2;
}

.proof-panel {
  --proof-accent: var(--violet);
  display: grid;
  min-height: 31rem;
  grid-template-columns: minmax(0, .92fr) minmax(20rem, 1.08fr);
}
.proof-panel[hidden] { display: none; }

.proof-panel--web { --proof-accent: var(--blue); }
.proof-panel--ai { --proof-accent: #7a45d6; }
.proof-panel--bedrijf { --proof-accent: #086974; }
.proof-panel--help { --proof-accent: #266b59; }
.proof-panel--design { --proof-accent: var(--orange); }
.proof-panel--shop { --proof-accent: #963859; }
.proof-panel > img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; background: #e6ddcf; }
.proof-panel > img.proof-panel__media--diagram { object-fit: contain; background: #10131d; }
.proof-panel__visual { display: grid; min-width: 0; min-height: 22rem; align-content: center; justify-items: center; gap: .65rem; margin: 0; padding: clamp(1rem, 3vw, 2rem); background: #e6ddcf; }
.proof-panel__visual img { display: block; width: min(100%, 38rem); height: auto; max-height: 24rem; object-fit: contain; }
.proof-panel__visual figcaption { color: #5d5861; font-size: .8125rem; line-height: 1.45; letter-spacing: .02em; }
.proof-panel__copy { display: flex; min-width: 0; padding: clamp(1.7rem, 4vw, 3rem); flex-direction: column; justify-content: center; }
.proof-panel__meta { display: flex; gap: .65rem; align-items: center; margin: 0 0 1rem; color: var(--proof-accent); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.proof-panel__meta span { padding: .38rem .55rem; border: 1px solid currentColor; border-radius: 99px; background: rgba(255,255,255,.52); }
.proof-panel h3 { max-width: 100%; margin: 0; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: .98; letter-spacing: -.04em; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; }
.proof-panel__copy > p:not(.proof-panel__meta) { margin: 1.2rem 0 1.7rem; color: var(--muted); line-height: 1.7; }
.proof-panel__copy > a,
.home-growth-text-link,
.commercial-start > a {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 850;
  text-underline-offset: .3rem;
  text-decoration-thickness: .1rem;
}
.proof-panel__copy > a:focus-visible,
.home-growth-text-link:focus-visible,
.commercial-start > a:focus-visible { outline: 3px solid var(--proof-accent, var(--violet)); outline-offset: 3px; border-radius: .2rem; }
.home-growth-text-link { margin-top: 1.4rem; }

/* With JavaScript disabled all evidence remains readable. The constellation is
   only activated after the complete interaction contract is installed. */
.home-proof:not(.is-enhanced) .proof-constellation { grid-template-columns: 1fr; }
.home-proof:not(.is-enhanced) .proof-constellation__panels { display: grid; gap: 1px; border-radius: 0; background: var(--line); }
.home-proof:not(.is-enhanced) .proof-panel { min-height: 0; }

@media (min-width: 1180px) {
  .home-proof.is-enhanced .proof-constellation__nodes {
    position: relative;
    display: block;
    min-height: 31rem;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(91, 70, 206, .08) 0 13%, transparent 13.5%), repeating-radial-gradient(circle at center, transparent 0 24%, rgba(91, 70, 206, .13) 24.2% 24.5%, transparent 24.8% 40%);
  }
  .home-proof.is-enhanced .proof-constellation__nodes::before,
  .home-proof.is-enhanced .proof-constellation__nodes::after {
    position: absolute;
    inset: 50% 6%;
    height: 1px;
    background: rgba(91, 70, 206, .16);
    content: '';
    pointer-events: none;
    transform: rotate(32deg);
  }
  .home-proof.is-enhanced .proof-constellation__nodes::after { transform: rotate(-32deg); }
  .home-proof.is-enhanced .proof-node { position: absolute; z-index: 2; width: 9.4rem; min-height: 4.5rem; }
  .home-proof.is-enhanced .proof-node--web { top: 4%; left: 3%; }
  .home-proof.is-enhanced .proof-node--ai { top: 4%; right: 3%; }
  .home-proof.is-enhanced .proof-node--bedrijf { top: 42%; right: -5%; }
  .home-proof.is-enhanced .proof-node--help { right: 8%; bottom: 3%; }
  .home-proof.is-enhanced .proof-node--design { bottom: 3%; left: 8%; }
  .home-proof.is-enhanced .proof-node--shop { top: 42%; left: -5%; }
  .home-proof.is-enhanced .proof-constellation__core { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 7.5rem; height: 7.5rem; place-content: center; border: 1px solid rgba(91, 70, 206, .28); border-radius: 50%; text-align: center; background: rgba(255, 250, 242, .92); transform: translate(-50%, -50%); }
  .home-proof.is-enhanced .proof-constellation__core strong { font-size: 2rem; line-height: 1; }
  .home-proof.is-enhanced .proof-constellation__core small { max-width: 7ch; margin-top: .3rem; color: var(--muted); font-size: .63rem; line-height: 1.15; text-transform: uppercase; }
}

.commercial-starts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1px;
  background: #cfbeac;
}

.commercial-start {
  --proof-accent: var(--violet);
  display: flex;
  min-height: 24rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  flex-direction: column;
  background: rgba(255, 250, 242, .96);
}
.commercial-start--web { --proof-accent: var(--blue); }
.commercial-start--ai { --proof-accent: #7a45d6; }
.commercial-start--bedrijf { --proof-accent: #086974; }
.commercial-start--help { --proof-accent: #266b59; }
.commercial-start--design { --proof-accent: var(--orange); }
.commercial-start--shop { --proof-accent: #963859; }
.commercial-start__service { margin: 0; color: var(--proof-accent); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.commercial-start h3 { max-width: 15ch; margin: 2.8rem 0 1rem; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.02; letter-spacing: -.035em; }
.commercial-start__price { display: grid; gap: .2rem; margin: 0 0 .9rem; }
.commercial-start__price strong { font-size: 1rem; }
.commercial-start__price span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.commercial-start > p:not(.commercial-start__service, .commercial-start__price) { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.commercial-start__summary { flex: 1; }
.commercial-start > a { margin-top: 1.25rem; }

.contact-route-teaser {
  display: grid;
  margin-bottom: clamp(4.5rem, 8vw, 7rem);
  padding: clamp(1.7rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .9fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  border-radius: 1.5rem;
  color: #f7f7fa;
  background: radial-gradient(circle at 80% 0, rgba(169, 157, 255, .2), transparent 35%), #151521;
}
.contact-route-teaser .section-kicker { color: #a99dff; }
.contact-route-teaser h2 { max-width: 17ch; margin: 0; font-size: clamp(1.8rem, 3.5vw, 3.2rem); line-height: .98; letter-spacing: -.04em; }
.contact-route-teaser p:last-child { max-width: 39rem; margin: 1rem 0 0; color: #b7b7c5; line-height: 1.65; }
.contact-route-teaser__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.contact-route-teaser__steps span { display: grid; min-height: 4.1rem; place-items: center; border: 1px solid #393946; border-radius: .75rem; color: #b7b7c5; font-size: .66rem; font-weight: 700; text-align: center; }
.contact-route-teaser__steps b { color: #fff; font-size: 1rem; }
.contact-route-teaser .hub-button { min-width: 13rem; border-color: #fff; background: #fff; color: #151521; }
.contact-route-teaser .hub-button:hover { border-color: #a99dff; background: #a99dff; }

@media (max-width: 999px) {
  .home-growth-heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .proof-constellation { grid-template-columns: 1fr; }
  .home-proof.is-enhanced .proof-constellation__nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-panel { grid-template-columns: minmax(0, 1fr) minmax(17rem, .9fr); }
  .commercial-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-route-teaser { grid-template-columns: 1fr; }
  .contact-route-teaser .hub-button { width: fit-content; }
}

@media (max-width: 720px) {
  .home-proof,
  .home-starts,
  .contact-route-teaser { width: min(100% - 32px, 1240px); }
  .home-proof,
  .home-starts { padding-block: 4.5rem; }
  .home-proof.is-enhanced .proof-constellation__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-node { min-width: 0; min-height: 4.5rem; padding: .75rem; }
  .proof-panel { min-height: 0; grid-template-columns: 1fr; }
  .proof-panel > img { min-height: 0; aspect-ratio: 4 / 3; }
  .proof-panel__visual { min-height: 0; }
  .proof-panel__copy { min-height: 20rem; }
  .commercial-starts { grid-template-columns: 1fr; }
  .commercial-start { min-height: 21rem; }
  .contact-route-teaser { border-radius: 1.1rem; }
  .contact-route-teaser__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-route-teaser .hub-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-node { transition: none; }
  .proof-node:hover { transform: none; }
}