/* ============================================================
   home.css — Boundee sales-presentation home page
   Loads AFTER styles.css. Reuses all design tokens.
   ============================================================ */

/* ---- hero: bold single-stat panel ---- */
.bigstat {
  width: 100%; max-width: 460px; margin-inline: auto;
  background: radial-gradient(120% 120% at 30% 15%, var(--purple-soft) 0%, var(--purple) 45%, var(--purple-deep) 100%);
  color:#fff; border-radius: var(--radius-lg); padding: 56px 48px; text-align:center;
  box-shadow: 0 40px 90px -40px color-mix(in oklab, var(--purple) 80%, transparent);
  position: relative; overflow: hidden;
}
.bigstat::after { content:""; position:absolute; inset:0; background: radial-gradient(60% 50% at 80% 100%, rgba(255,255,255,.12), transparent 70%); pointer-events:none; }
.bigstat__label { font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.bigstat__label b { color:#fff; font-weight: 600; }
.bigstat__before { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: rgba(255,255,255,.72); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(255,255,255,.5); margin-bottom: 6px; }
.bigstat__arrow { display:flex; align-items:center; justify-content:center; gap: 8px; margin: 24px 0 20px; font-family: var(--mono); font-size: 14px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.bigstat__arrow b { color:#fff; font-weight: 700; }
.bigstat__arrow svg { display:block; color: rgba(255,255,255,.9); }
.bigstat__after { font-size: clamp(46px, 6.4vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: .95; color:#fff; }
.bigstat__cap { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.5; }

/* ---- cause → effect (current state / operational impact) ---- */
.cause { margin-top: 60px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.cause__panel { padding: 36px; border-radius: var(--radius-lg); }
.cause__panel--state { background:#fff; border:1px solid var(--line); }
.cause__panel--impact { background: var(--ink); color:#fff; }
.cause__panel h3 { font-family: var(--mono); font-size: 14px; letter-spacing:.16em; text-transform: uppercase; font-weight:500; color: var(--ink-3); margin-bottom: 24px; }
.cause__panel--impact h3 { color: rgba(255,255,255,.55); }
.cause__list { display:flex; flex-direction:column; gap: 16px; }
.cause__li { display:flex; gap: 13px; align-items:flex-start; font-size: 18px; line-height:1.5; color: var(--ink-2); }
.cause__panel--impact .cause__li { color: rgba(255,255,255,.84); }
.cause__li .mk { flex:none; width: 22px; height: 22px; border-radius: 7px; display:grid; place-items:center; margin-top:1px; }
.cause__panel--state .cause__li .mk { background: var(--purple-50); color: var(--accent); }
.cause__panel--impact .cause__li .mk { background: var(--coral-50); color: var(--coral); }
.cause__arrow { display:grid; place-items:center; padding-inline: 18px; color: var(--purple-soft); }
@media (max-width: 880px){
  .cause { grid-template-columns: 1fr; gap: 14px; }
  .cause__arrow { transform: rotate(90deg); padding: 4px; }
}

/* ---- hiring stage table ---- */
.stages { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background:#fff; }
.stages__row { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--line-soft); }
.stages__row:last-child { border-bottom: none; }
.stages__row.is-head { background: var(--tint); padding-block: 14px; }
.stages__row.is-head span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.stages__row.is-bottleneck { background: var(--purple-50); }
.stages__stage { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.stages__tech { font-size: 15px; color: var(--ink-2); }
.stages__row.is-bottleneck .stages__tech { color: var(--accent); font-weight: 500; }
.stages__status { justify-self: start; }
.status-pill { display:inline-flex; align-items:center; gap: 7px; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.status-pill--ok { background: var(--mint-50); color: var(--mint); }
.status-pill--bottleneck { background: var(--purple); color:#fff; }
.stages__foot { margin-top: 22px; font-family: var(--mono); font-size: 14px; color: var(--ink-3); line-height: 1.6; max-width: 80ch; }
@media (max-width: 760px){
  .stages__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .stages__row.is-head { display: none; }
}

/* ---- business value cards ---- */
.values { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.value:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(46,22,131,.35); border-color: var(--purple-200); }
.value.is-lead { background: var(--purple); color:#fff; border-color: var(--purple); }
.value__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--purple-50); color: var(--accent); display:grid; place-items:center; margin-bottom: 22px; }
.value.is-lead .value__ic { background: rgba(255,255,255,.16); color:#fff; }
.value__verb { font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.value.is-lead .value__verb { color: var(--purple-200); }
.value h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 10px; }
.value.is-lead h3 { color:#fff; }
.value p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.value.is-lead p { color: rgba(255,255,255,.82); }
.section--lilac-deep .value { box-shadow: 0 1px 0 rgba(0,0,0,.02); }
@media (max-width: 920px){ .values { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .values { grid-template-columns: 1fr; } }

/* financial impact tags */
.valuetags { margin-top: 22px; display:flex; flex-wrap: wrap; gap: 10px; justify-content:center; }
.valuetag { display:inline-flex; align-items:center; gap: 8px; background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.valuetag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* ---- how it works: 3 role columns ---- */
.rolecols { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.rolecol { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.rolecol__h { display:flex; align-items:center; gap: 12px; margin-bottom: 22px; }
.rolecol__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--purple-50); color: var(--accent); display:grid; place-items:center; flex:none; }
.rolecol__h h3 { font-size: 19px; letter-spacing: -.02em; }
.rolecol ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px; }
.rolecol li { display:flex; gap: 11px; align-items:flex-start; font-size: 15.5px; line-height:1.45; color: var(--ink-2); }
.rolecol li svg { flex:none; margin-top: 2px; color: var(--accent); }
@media (max-width: 880px){ .rolecols { grid-template-columns: 1fr; } }

/* ---- expected impact: central variable + metric grid ---- */
.impactvar { margin-top: 56px; display:flex; flex-direction:column; align-items:center; }
.impactvar__core { background: var(--purple); color:#fff; border-radius: 999px; padding: 16px 30px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; box-shadow: 0 24px 50px -22px var(--purple); display:flex; align-items:center; gap: 12px; }
.impactvar__core .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-200); }
.impactvar__stem { width: 2px; height: 34px; background: linear-gradient(var(--purple), var(--purple-200)); }
.metrics { margin-top: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; width: 100%; }
.metric { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.metric__top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.metric__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.metric__down { display:inline-flex; align-items:center; gap: 5px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--mint); background: var(--mint-50); padding: 4px 10px; border-radius: 999px; }
.metric p { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 920px){ .metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .metrics { grid-template-columns: 1fr; } }

/* ---- pilot success metrics chips (extends .pilot) ---- */
.pilot__metrics { margin-top: 26px; text-align:center; }
.pilot__metrics .lbl { font-family: var(--mono); font-size: 14px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); margin-bottom: 16px; }
.pilot__metrics .chips { display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; }
.pilot__metrics .chips span { background: var(--purple-50); color: var(--accent); border-radius: 999px; padding: 8px 15px; font-size: 16px; font-weight: 600; }

/* range value in plan rows */
.plan__row .v small { font-family: var(--mono); font-weight: 500; color: inherit; opacity: .7; }

/* ---- product teaser (go to product page) ---- */
.product-teaser { background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: 56px; display:grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items:center; overflow:hidden; }
.product-teaser .eyebrow { color: var(--purple-soft); }
.product-teaser h2 { color:#fff; font-size: clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1.1; margin-bottom: 18px; }
.product-teaser p { color: rgba(255,255,255,.78); font-size: 17px; line-height:1.6; max-width: 46ch; margin-bottom: 30px; }
.product-teaser__viz { display:flex; gap: 14px; justify-content:center; }
.product-teaser__viz .tphone { width: 132px; border-radius: 22px; padding: 7px; background:#000; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
.product-teaser__viz .tphone img { width:100%; border-radius: 16px; display:block; }
.product-teaser__viz .tphone:nth-child(2){ margin-top: 28px; }
@media (max-width: 880px){
  .product-teaser { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; text-align:center; }
  .product-teaser p { margin-inline:auto; }
  .product-teaser__cta { justify-content:center; display:flex; }
}

/* nav active state */
.nav__links a.is-active { color: var(--accent); }