/* ═══════════════════════════════════════════════════════════════
   ALCEA — components
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(244,247,245,.82);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 2rem;
  height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}
.nav.scrolled .nav-inner { height: 66px; }
.nav-inner { transition: height var(--t); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; justify-self: start; }
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand .word { font-family: var(--serif); font-weight: 500; font-size: 1.32rem; letter-spacing: -.01em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: .25rem; justify-self: center; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: .55rem .8rem; border-radius: 8px;
  transition: color var(--t), background var(--t);
}
.nav-links > li > a:hover { color: var(--ink); background: rgba(14,31,29,.04); }
.nav-links .caret { width: 9px; height: 9px; opacity: .5; transition: transform var(--t); }
.nav-links li:hover .caret { transform: rotate(180deg); }

/* mega/dropdown */
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: 520px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14,31,29,.04), 0 18px 44px -12px rgba(14,31,29,.22);
  padding: 1rem; opacity: 0; visibility: hidden;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}
/* hover bridge so the menu doesn't vanish crossing the gap */
.has-menu::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.dropdown::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 13px; height: 13px; background: var(--surface);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px 0 0 0;
}
.nav-links li:hover .dropdown,
.nav-links li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* right-aligned variant — for menus near the right edge (Support) */
.has-menu--right { position: relative; }
.has-menu--right .dropdown { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.has-menu--right .dropdown::before { left: auto; right: 28px; transform: translateX(0) rotate(45deg); }
.nav-links li.has-menu--right:hover .dropdown,
.nav-links li.has-menu--right:focus-within .dropdown { transform: translateX(0) translateY(0); }
.dropdown-head { padding: .15rem .35rem .7rem; }
.dropdown-eyebrow { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
.dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
.dropdown a {
  display: flex; gap: .75rem; align-items: center;
  padding: .6rem .65rem; border-radius: 10px; text-decoration: none;
  transition: background var(--t);
}
.dropdown a:hover { background: var(--paper-2); }
.dropdown .di { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--brass-soft); display: grid; place-items: center; color: var(--brass); transition: background var(--t), color var(--t); }
.dropdown a:hover .di { background: var(--brass); color: #fff; }
.dropdown .di svg { width: 17px; height: 17px; }
.dropdown .dx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dropdown .dt { font-size: .9rem; font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.dropdown .dd { font-size: .76rem; color: var(--ink-3); line-height: 1.35; }
.dropdown-foot {
  display: flex !important; align-items: center; gap: .4rem; justify-content: center;
  margin: .55rem .35rem 0; padding: .7rem !important; border-top: 1px solid var(--line);
  border-radius: 0 !important; font-size: .82rem; font-weight: 600; color: var(--teal-deep);
}
.dropdown-foot:hover { background: transparent !important; }
.dropdown-foot .arr { transition: transform var(--t); }
.dropdown-foot:hover .arr { transform: translateX(4px); }
.nav-cta { justify-self: end; }
.nav-burger { display: none; margin-left: auto; justify-self: end; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; }
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--t); }

/* mobile sheet */
.mobile-sheet { display: none; }
@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-sheet {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: var(--paper); transform: translateY(-100%);
    transition: transform .5s cubic-bezier(.22,.61,.36,1); padding: 6rem 2rem 2rem;
    overflow-y: auto; visibility: hidden;
  }
  .mobile-sheet.open { transform: none; visibility: visible; }
  .mobile-sheet a { display: block; font-family: var(--serif); font-size: 1.6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .mobile-close { position: absolute; top: 1.5rem; right: 1.6rem; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 1.3rem; cursor: pointer; }
  .mobile-sheet .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero { padding-top: 8.5rem; padding-bottom: 4rem; overflow: hidden; position: relative; }
.hero::before {
  content: ''; position: absolute; top: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 62%); pointer-events: none; z-index: 0;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.hero-trust {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.8rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .42rem .9rem .42rem .55rem; background: var(--surface);
}
.hero-trust .seal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--focal-glow); color: var(--focal); font-size: .6rem; font-weight: 700; }
.hero h1 { margin-bottom: 1.5rem; }
.hero-sub { max-width: 46ch; margin-bottom: 2.2rem; }
.hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: .82rem; color: var(--ink-3); margin-top: 1.4rem; display: flex; align-items: center; gap: .5rem; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--focal); box-shadow: 0 0 0 4px var(--focal-glow); }

/* pinwheel stage */
.pin-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 540px; margin-left: auto; display: grid; place-items: center; }
.pin-rings { position: absolute; inset: 0; }
.pin-ring { position: absolute; inset: 0; border: 1px solid var(--line-2); border-radius: 50%; }
.pin-ring.r2 { inset: 11%; border-style: dashed; opacity: .7; }
.pin-ring.r3 { inset: 24%; opacity: .5; }
.pinwheel { width: 78%; height: 78%; overflow: visible; cursor: pointer; }
.blade { cursor: pointer; transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1); transform-origin: center; transform-box: fill-box; }
.pinwheel.has-active .blade { opacity: .34; }
.pinwheel.has-active .blade.active { opacity: 1; }
.blade.active { transform: scale(1.07); }
.pin-hub { cursor: default; }
.pin-hub-label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--teal-deep); }
.orbit-dot { fill: var(--focal-bright); }

/* floating readout card */
.pin-readout {
  position: absolute; left: 0; bottom: 4%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1rem 1.15rem; width: 230px;
  transition: opacity var(--t), transform var(--t);
}
.pin-readout .pr-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pin-readout .pr-t { font-family: var(--serif); font-size: 1.18rem; margin: .25rem 0 .3rem; color: var(--ink); }
.pin-readout .pr-d { font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.pin-readout .pr-bar { height: 4px; border-radius: 3px; background: var(--paper-2); margin-top: .8rem; overflow: hidden; }
.pin-readout .pr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-bright), var(--teal-deep)); border-radius: 3px; transition: width .7s cubic-bezier(.22,.61,.36,1); }

/* ── Trust strip ──────────────────────────────────────────────── */
.trust { padding: 3.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust-label { text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2rem; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3.2rem; }
.trust-row img { height: 34px; max-width: 150px; object-fit: contain; opacity: .62; filter: grayscale(1); transition: opacity var(--t), filter var(--t); }
.trust-row img:hover { opacity: 1; filter: none; }
.trust-fallback { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; white-space: nowrap; opacity: .8; }

/* ── Value / stats ────────────────────────────────────────────── */
.value-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.stat { border-top: 2px solid var(--teal); padding-top: 1rem; }
.stat:nth-child(2) { border-top-color: var(--support); }
.stat .n { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--ink); }
.stat .n em { font-style: normal; color: var(--teal-deep); }
.stat:nth-child(2) .n em { color: var(--support); }
.stat .l { font-size: .82rem; color: var(--ink-3); margin-top: .5rem; letter-spacing: .01em; }
/* ── Benefits (positive outcomes with Alcea) ──────────────────── */
.benefits-eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--loud); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem;
}
.benefits-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .55; }
.benefit-list { display: grid; gap: .75rem; list-style: none; }
.benefit {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--support-bright); }
.benefit .bcheck {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; margin-top: 1px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--support-bright), var(--support));
  box-shadow: 0 2px 6px var(--support-glow);
}
.benefit .bcheck svg { width: 17px; height: 17px; }
.benefit h4 { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; margin-bottom: .25rem; }
.benefit p { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }

/* minimal layout variation — borderless, editorial */
html[data-benefits="minimal"] .benefit-list { gap: 0; }
html[data-benefits="minimal"] .benefit {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 1.3rem .2rem;
}
html[data-benefits="minimal"] .benefit:last-child { border-bottom: 0; }
html[data-benefits="minimal"] .benefit:hover { transform: none; box-shadow: none; }
html[data-benefits="minimal"] .benefit .bcheck {
  background: var(--support-glow); color: var(--support); box-shadow: none;
}

/* ── Solutions explorer ───────────────────────────────────────── */
.sol-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; margin-top: 3.5rem; align-items: start; }
.sol-list { display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 92px; }
.sol-tab {
  display: flex; align-items: center; gap: .85rem; text-align: left;
  padding: .95rem 1.1rem; border-radius: var(--radius); border: 1px solid transparent;
  background: transparent; cursor: pointer; font-family: var(--sans); width: 100%;
  transition: background var(--t), border-color var(--t);
}
.sol-tab:hover { background: var(--surface); }
.sol-tab.active { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.sol-tab .si { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink-2); transition: var(--t); }
.sol-tab.active .si { background: var(--teal-deep); color: #fff; }
.sol-tab .sn { font-weight: 600; font-size: .98rem; color: var(--ink); }
.sol-tab .sc { font-size: .76rem; color: var(--ink-3); }
.sol-tab .si svg { width: 19px; height: 19px; }

.sol-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.8rem); box-shadow: var(--shadow); min-height: 420px; position: relative; overflow: hidden; }
.sol-panel::before { content: ''; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle at top right, var(--teal-glow), transparent 70%); pointer-events: none; }
.sol-content { position: relative; }
.sol-content .tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--support); }
.sol-content h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: .8rem 0 .9rem; }
.sol-content .sol-lede { font-size: 1.08rem; color: var(--ink-2); max-width: 52ch; line-height: 1.6; }
.sol-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; margin: 1.8rem 0; }
.sol-feat { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.sol-feat .ck { color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.sol-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.sol-chip { font-family: var(--mono); font-size: .72rem; padding: .35rem .75rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.fade-swap { animation: fadeSwap .5s cubic-bezier(.22,.61,.36,1); }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Platform features ────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3.5rem; }
.feat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t); position: relative; }
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.feat-card .fi { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-glow); color: var(--teal-deep); display: grid; place-items: center; margin-bottom: 1.2rem; }
.feat-card .fi svg { width: 23px; height: 23px; }
.feat-card h4 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .5rem; }
.feat-card p { font-size: .9rem; color: var(--ink-2); }
.feat-card.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.feat-card.wide .fi { background: var(--support-glow); color: var(--support); }
.feat-card.full { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; background: linear-gradient(100deg, var(--surface) 58%, var(--teal-glow)); }
.feat-card.full .fc-body { max-width: 52ch; position: relative; z-index: 1; }
.feat-card.full .fc-points { list-style: none; display: grid; gap: .9rem; position: relative; z-index: 1; }
.feat-card.full .fc-points li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.feat-card.full .fc-points svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--teal-deep); }
@media (max-width: 720px) {
  .feat-card.full { grid-template-columns: 1fr; gap: 1.6rem; }
}
/* tighten the seam between the platform features and the stats band */
#platform { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
#proofband { padding-top: clamp(3rem, 5vw, 4.5rem); }

/* animated workflow diagram (abstract, not product) */
.flow { position: relative; }
.flow svg { width: 100%; height: auto; overflow: visible; }
.flow .track { fill: none; stroke: var(--line-2); stroke-width: 2; }
.flow .prog { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.flow .node circle { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; }
.flow .node.done circle { fill: var(--teal-deep); stroke: var(--teal-deep); }
.flow .node.active circle { stroke: var(--teal); }
.flow .node text { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; fill: var(--ink-3); text-transform: uppercase; }
.flow .pulse { fill: var(--teal-bright); }

/* ── Kibali ───────────────────────────────────────────────────── */
.kibali-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.kibali-badge { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--support-bright); border: 1px solid var(--support); border-radius: 999px; padding: .4rem .85rem; }
.kibali-name { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; margin: 1.2rem 0 1rem; letter-spacing: -.02em; }
.kibali-name b { color: var(--teal-bright); font-weight: 400; }
.kibali-points { margin-top: 2rem; display: grid; gap: 1.4rem; }
.kpt { display: flex; gap: .9rem; align-items: flex-start; }
.kpt .ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: var(--teal-bright); }
.kpt .ic svg { width: 17px; height: 17px; }
.kpt .ic { color: var(--support-bright); }
.kpt h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: .2rem; }
.kpt p { font-size: .88rem; color: rgba(255,255,255,.6); }
.kibali-panel { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 2rem; }
.kibali-panel .kp-title { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.5rem; }
.kfw { margin-bottom: 1.15rem; }
.kfw-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.kfw-name { font-size: .9rem; color: rgba(255,255,255,.85); font-weight: 500; }
.kfw-pct { font-family: var(--mono); font-size: .78rem; color: var(--support-bright); }
.kfw-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.kfw-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--support), var(--support-bright)); width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }

/* ── Proof of concept ─────────────────────────────────────────── */
.poc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; counter-reset: poc; }
.poc-step { position: relative; padding-top: 2.5rem; }
.poc-step::before { counter-increment: poc; content: counter(poc, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--teal-deep); letter-spacing: .1em; position: absolute; top: 0; left: 0; }
.poc-step::after { content: ''; position: absolute; top: 7px; left: 2.6rem; right: 0; height: 1px; background: var(--line); }
.poc-step:last-child::after { display: none; }
.poc-step h4 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .55rem; }
.poc-step p { font-size: .92rem; color: var(--ink-2); }

/* ── Case studies ─────────────────────────────────────────────── */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3.5rem; }
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case-card .ct { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 1rem; }
.case-card h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .6rem; }
.case-card .cp { font-size: .88rem; color: var(--ink-2); flex: 1; }
.case-card .cr { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--ink); font-weight: 500; }
.case-card .cr .ck { color: var(--teal); flex-shrink: 0; margin-top: 3px; }

/* ── Testimonials ─────────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3.5rem; }
.testi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; }
.testi.feature { grid-row: span 2; background: var(--deep); border-color: var(--deep); justify-content: space-between; }
.testi .quote { font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; color: var(--ink); font-style: italic; }
.testi.feature .quote { color: #fff; font-size: 1.4rem; line-height: 1.42; }
.testi .who { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; }
.testi .av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--serif); font-size: .95rem; color: #fff; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); }
.testi .nm { font-weight: 600; font-size: .9rem; color: var(--ink); }
.testi.feature .nm { color: #fff; }
.testi .rl { font-size: .78rem; color: var(--ink-3); }
.testi.feature .rl { color: rgba(255,255,255,.55); }
.testi.feature .stars { color: var(--focal-bright); letter-spacing: .15em; margin-bottom: 1rem; font-size: .85rem; }

/* ── About ────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.founders { display: grid; gap: 1.1rem; margin-top: 2rem; }
.founder { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.founder .fav { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; color: #fff; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); }
.founder .fphoto { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: center top; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--paper-2); }
.founder .ftitle { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.founder .fname { font-family: var(--serif); font-size: 1.2rem; margin: .15rem 0 .35rem; }
.founder .fbio { font-size: .85rem; color: var(--ink-2); line-height: 1.55; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; }
.value { padding: 1.4rem; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.value .vi { color: var(--teal-deep); margin-bottom: .7rem; }
.values .value:nth-child(even) .vi { color: var(--support); }
.value .vi svg { width: 22px; height: 22px; }
.value h4 { font-family: var(--sans); font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.value p { font-size: .82rem; color: var(--ink-2); }

/* ── CTA banner ───────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; }
.cta-inner { background: linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 55%, #11403a 100%); border-radius: var(--radius-lg); padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4.5rem); text-align: center; position: relative; overflow: hidden; }
.cta-inner::before { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(63,193,168,.18), transparent 60%); }
.cta-inner h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); position: relative; }
.cta-inner p { color: rgba(255,255,255,.65); font-size: 1.1rem; max-width: 50ch; margin: 1rem auto 2.3rem; position: relative; }
.cta-inner .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── Contact / form ───────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; margin-top: 3.5rem; }
.contact-items { display: grid; gap: 1.4rem; margin-top: 2rem; }
.citem { display: flex; gap: 1rem; align-items: flex-start; }
.citem .ci { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: var(--teal-glow); color: var(--teal-deep); display: grid; place-items: center; }
.citem .ci svg { width: 19px; height: 19px; }
.citem .cl { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.citem .cv { font-size: 1rem; color: var(--ink); margin-top: .15rem; }
.citem .cv a { color: var(--teal-deep); text-decoration: none; }
.citem .cv a:hover { text-decoration: underline; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem); box-shadow: var(--shadow); }
.form h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1.5rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fgroup { margin-bottom: 1.1rem; }
.fgroup label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.fgroup input, .fgroup select, .fgroup textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: .95rem; color: var(--ink); background: var(--paper); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow); background: var(--surface); }
.fgroup textarea { resize: vertical; min-height: 96px; }
.form .btn { width: 100%; justify-content: center; margin-top: .3rem; }

/* ── Form validation + submit states ──────────────────────────── */
.fgroup.invalid input, .fgroup.invalid select, .fgroup.invalid textarea { border-color: var(--err); background: var(--err-soft); }
.fgroup.invalid input:focus, .fgroup.invalid select:focus, .fgroup.invalid textarea:focus { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.ferr { display: none; font-size: .76rem; color: var(--err); margin-top: .4rem; font-weight: 500; }
.fgroup.invalid .ferr { display: block; }
.btn.is-loading { pointer-events: none; opacity: .9; }
.btn.is-loading .arr { display: none; }
.btn .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: btnspin .6s linear infinite; vertical-align: -2px; }
@keyframes btnspin { to { transform: rotate(360deg); } }
.form-success { text-align: center; padding: 1.4rem .5rem; }
.form-success .sc-ic { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1.2rem; display: grid; place-items: center; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); color: #fff; }
.form-success h3 { font-family: var(--serif); font-size: 1.55rem; margin-bottom: .55rem; }
.form-success p { color: var(--ink-2); max-width: 36ch; margin: 0 auto; font-size: .95rem; line-height: 1.6; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer { background: var(--deep); color: rgba(255,255,255,.55); padding: 5rem 0 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .word { font-family: var(--serif); font-size: 1.4rem; color: #fff; display: flex; align-items: center; gap: .6rem; }
.footer-brand .word b { color: var(--teal-bright); font-weight: 400; }
.footer-brand p { font-size: .87rem; line-height: 1.6; max-width: 30ch; margin-top: 1rem; }
.footer-col h5 { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; display: grid; gap: .6rem; }
.footer-col a { font-size: .88rem; color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--t); }
.footer-col a:hover { color: var(--teal-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; font-size: .8rem; flex-wrap: wrap; gap: 1rem; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: rgba(255,255,255,.6); text-decoration: none; transition: var(--t); }
.footer-social a:hover { background: var(--teal-deep); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pin-stage { max-width: 420px; margin: 0 auto; order: -1; }
  .value-grid, .kibali-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sol-layout { grid-template-columns: 1fr; }
  .sol-list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: .5rem; }
  .sol-tab { flex-shrink: 0; }
  .feat-grid, .poc-grid, .case-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
  .feat-card.wide { grid-column: span 2; }
  .testi.feature { grid-row: auto; grid-column: span 2; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 1.3rem; }
  .feat-grid, .poc-grid, .case-grid, .testi-grid, .values, .frow, .sol-feats { grid-template-columns: 1fr; }
  .feat-card.wide { grid-column: span 1; grid-template-columns: 1fr; }
  .testi.feature { grid-column: span 1; }
  .stat-row { grid-template-columns: 1fr; gap: 1rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .pin-readout { width: 190px; }
}

/* ══════════════════════════════════════════════════════════════
   "MAKE IT POP" — toggleable flourishes (driven by Tweaks)
   ══════════════════════════════════════════════════════════════ */

/* ── Brand-mark motif (decorative watermark) ──────────────────── */
.brand-motif { color: var(--teal); pointer-events: none; }
html[data-motif="off"] .brand-motif { display: none; }

/* ── Hero flourish: faint mark behind copy + accent marker ────── */
.hero-copy { position: relative; }
.hero-mark {
  position: absolute; width: 440px; height: 440px; max-width: 72vw;
  top: 50%; left: -24%; transform: translateY(-50%);
  opacity: .06; z-index: -1; pointer-events: none;
}
html[data-heromark="off"] .hero-mark { display: none; }

/* ── By-the-numbers band ──────────────────────────────────────── */
.proofband { position: relative; overflow: hidden; }
html[data-proofbar="off"] #proofband { display: none; }
.proofband .brand-motif { position: absolute; right: -70px; top: -60px; width: 320px; height: 320px; opacity: .05; }
html[data-motif="bold"] .proofband .brand-motif { opacity: .09; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 2.5rem; margin-top: 2.5rem; }
.proof-item { border-top: 2px solid var(--line); padding-top: 1.3rem; }
.proof-item:nth-child(2n) { border-top-color: var(--support); }
.proof-item .pn { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.proof-item:nth-child(2n) .pn { color: var(--support); }
.proof-item .pl { font-size: .92rem; color: var(--ink-3); margin-top: .85rem; max-width: 22ch; }
@media (max-width: 1000px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (max-width: 480px) { .proof-grid { grid-template-columns: 1fr; } }

/* ── Color-blocked Proof-of-concept section ───────────────────── */
html[data-block="clay"] #poc { background: linear-gradient(155deg, var(--accent-deep), var(--accent)); }
html[data-block="teal"] #poc { background: linear-gradient(155deg, var(--deep) 0%, var(--deep-2) 55%, #11403a 100%); }
html[data-block="clay"] #poc, html[data-block="teal"] #poc { color: rgba(255,255,255,.78); }
html[data-block="clay"] #poc .eyebrow, html[data-block="teal"] #poc .eyebrow { color: rgba(255,255,255,.92); }
html[data-block="clay"] #poc .eyebrow::before, html[data-block="teal"] #poc .eyebrow::before { background: rgba(255,255,255,.55); }
html[data-block="clay"] #poc h2, html[data-block="teal"] #poc h2 { color: #fff; }
html[data-block="clay"] #poc .lede, html[data-block="teal"] #poc .lede { color: rgba(255,255,255,.74); }
html[data-block="clay"] #poc .poc-step h4, html[data-block="teal"] #poc .poc-step h4 { color: #fff; }
html[data-block="clay"] #poc .poc-step p, html[data-block="teal"] #poc .poc-step p { color: rgba(255,255,255,.72); }
html[data-block="clay"] #poc .poc-step::before, html[data-block="teal"] #poc .poc-step::before { color: rgba(255,255,255,.88); }
html[data-block="clay"] #poc .poc-step::after, html[data-block="teal"] #poc .poc-step::after { background: rgba(255,255,255,.25); }

/* ── CTA motif ────────────────────────────────────────────────── */
.cta-inner .brand-motif { position: absolute; right: -40px; bottom: -70px; width: 340px; height: 340px; opacity: .1; }
html[data-motif="bold"] .cta-inner .brand-motif { opacity: .18; }