/* Bluemetrix WordPress theme -- homepage-only styles.
   Ported from index.html's inline <style> block, minus anything already in theme.css sitewide
   (.field-dark, .noise, .btn-primary, .btn-outline, .shadow-card/-hover, [data-reveal], nav/menu
   classes). Unused leftover classes from the static source's copy-pasted boilerplate (.rise*,
   .flow-line, .node-pulse -- confirmed via grep against index.html's actual markup, see build
   notes) were dropped rather than ported, since nothing on this page ever applies them. */

.shadow-float { box-shadow: 0 8px 20px rgba(24,26,27,.35), 0 40px 80px -24px rgba(1,100,255,.45); }

.btn-dark { background:#181A1B; color:#fff; transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(24,26,27,.4); }
.btn-dark:focus-visible { outline: 2px solid #181A1B; outline-offset: 3px; }

.btn-outline-ink { background:transparent; color:#181A1B; border:1.5px solid rgba(24,26,27,.25); transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), background-color .2s ease, border-color .2s ease; }
.btn-outline-ink:hover { background:rgba(24,26,27,.05); border-color:#181A1B; transform: translateY(-2px); }
.btn-outline-ink:focus-visible { outline: 2px solid #181A1B; outline-offset: 3px; }

.btn-white-solid { display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#0164FF; border-radius:12px; transition: border-radius .3s cubic-bezier(0.22,1,0.36,1), transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease; }
.btn-white-solid:hover { border-radius:8px; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }
.btn-white-solid:active { transform: translateY(0); }
.btn-white-solid:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Explicit light fill for the hero secondary button -- the hero section itself is bg-white, so a
   literal #fff fill has zero contrast there; a very light warm-neutral fill (approved brand
   token) plus a soft shadow keeps it reading as a distinct white button. */
.btn-white-outline-ink { background:#FBFAF8; color:#181A1B; border:1px solid #181A1B; box-shadow: 0 1px 2px rgba(24,26,27,.04), 0 8px 18px -10px rgba(24,26,27,.14); transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), background-color .2s ease, box-shadow .25s ease; }
.btn-white-outline-ink:hover { background:#FBFAF8; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(24,26,27,.06), 0 14px 28px -12px rgba(24,26,27,.2); }
.btn-white-outline-ink:focus-visible { outline: 2px solid #181A1B; outline-offset: 3px; }

.card-hover { transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-4px); }

@keyframes hp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Hero product visual: Discover -> Tokenize -> Provision -> Evidence ============ */
.stage-pill { position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:999px; background:#fff; border:1.5px solid #D8D6C8; color:#8B93A1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; max-width:200px; transition: max-width .5s cubic-bezier(0.22,1,0.36,1), padding .5s cubic-bezier(0.22,1,0.36,1), gap .5s cubic-bezier(0.22,1,0.36,1), background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease; }
.stage-pill[data-state="upcoming"] { max-width:26px; padding:0; gap:0; justify-content:center; }
.stage-pill[data-state="active"] { height:30px; background:#0164FF; border-color:#0164FF; color:#fff; box-shadow:0 4px 14px -4px rgba(1,100,255,.5); }
.stage-pill[data-state="completed"] { height:30px; background:#0164FF; border-color:#0164FF; color:#fff; }
.stage-pill svg { width:10px; height:10px; color:#C7CBD1; flex-shrink:0; transition: color .3s ease; }
.stage-pill[data-state="active"] svg, .stage-pill[data-state="completed"] svg { color:#fff; }
.stage-pill svg.pulse { animation: hp-starPulse 1s ease-in-out 1; }
@keyframes hp-starPulse { 0%,100% { transform:scale(1); } 45% { transform:scale(1.4); } }
.stage-label { max-width:120px; opacity:1; transition: opacity .3s ease .15s, max-width .4s ease; }
.stage-pill[data-state="upcoming"] .stage-label { max-width:0; opacity:0; transition: opacity .15s ease, max-width .3s ease; }

.hero-line-svg { position:absolute; left:0; top:0; width:100%; height:80px; overflow:visible; }
.hero-line-svg path { stroke:rgba(1,100,255,.24); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; }
.hero-line-svg path.hero-line-active { stroke:#0164FF; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; }
.hero-marker { position:absolute; transform:translateY(-50%); z-index:3; }
.hero-visual { height:320px; }
.hero-rail { display:none; }
@media (max-width: 1023px) {
  .hero-visual { height:auto !important; display:flex; flex-direction:column; padding:6px 20px 0 20px; }
  .hero-line-svg { display:none; }
  .hero-rail { display:block; position:absolute; left:34px; top:0; bottom:0; width:1.5px; background:rgba(1,100,255,.24); }
  .hero-rail-fill { position:absolute; left:0; top:0; width:100%; height:0; background:#0164FF; }
  .hero-marker { position:relative !important; left:auto !important; top:auto !important; transform:none !important; height:30px; display:flex; align-items:center; margin-left:1px; }
  .hero-box { position:relative !important; left:auto !important; top:auto !important; width:auto !important; max-width:360px; margin:12px 0 30px 44px; }
  .hm-1 { order:1; } .hm-2 { order:2; } .hm-3 { order:3; } .hm-4 { order:4; } .hm-5 { order:5; } .hm-6 { order:6; } .hm-7 { order:7; } .hm-8 { order:8; }
}

/* ============ Mobile/tablet compact hero flow (replaces the desktop hero-visual below 1024px,
   see template-homepage.php for why this is a separate layout rather than a media-query patch) ============ */
.hvm { display: none; } /* reverted: compact mobile hero parked, not live -- see template-homepage.php comment */
.hvm-strip { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 28px; }
.hvm-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.hvm-dot { width: 30px; height: 30px; border-radius: 999px; background: #0164FF; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px -4px rgba(1,100,255,.5); flex-shrink: 0; }
.hvm-dot svg { width: 12px; height: 12px; }
.hvm-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6470; white-space: nowrap; }
.hvm-line { flex: 1 1 auto; height: 1.5px; background: rgba(1,100,255,.24); margin-top: 14px; min-width: 8px; }
.hvm-previews { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.hvm-preview { border-left: 2px solid #0164FF; padding-left: 14px; }
.hvm-preview-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0164FF; margin-bottom: 4px; }
.hvm-preview-text { font-size: 13.5px; line-height: 1.5; color: #33363A; }
.hero-box { position:absolute; width:270px; top:112px; }
.stage-signal { position:absolute; width:7px; height:7px; margin-top:-3.5px; margin-left:-3.5px; border-radius:50%; background:#0164FF; box-shadow:0 0 0 4px rgba(1,100,255,.14), 0 0 10px 2px rgba(1,100,255,.5); opacity:0; z-index:4; transition: opacity .3s ease; }
.stage-signal.is-visible { opacity:1; }
.stage-signal.is-parked { opacity:1; animation: hp-signalBreathe 1.8s ease-in-out infinite; }
@keyframes hp-signalBreathe { 0%,100% { box-shadow:0 0 0 4px rgba(1,100,255,.14), 0 0 10px 2px rgba(1,100,255,.5); } 50% { box-shadow:0 0 0 7px rgba(1,100,255,.1), 0 0 14px 4px rgba(1,100,255,.65); } }

.stage-box { opacity:0; transform:translateY(10px) scale(.97); transition: opacity .45s cubic-bezier(0.22,1,0.36,1), transform .45s cubic-bezier(0.22,1,0.36,1); pointer-events:none; }
.stage-box[data-state="active"] { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.stage-box[data-state="completed"] { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.stage-box .card { background:#fff; border:1px solid #181A1B; border-radius:16px; box-shadow: 0 1px 2px rgba(24,26,27,.04), 0 8px 20px -10px rgba(24,26,27,.08); padding:16px; }

.token-row { display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:7px; border-radius:14px; background:#fff; border:1px solid #181A1B; transition: background-color .3s ease, border-color .3s ease; }
.token-row:last-child { margin-bottom:0; }
.token-row.is-scanning { background:#F7F6F2; border-color:#DAD7CB; }
.token-row.is-focus { background:#F4F8FF; border-color:#CFE2FF; }
.token-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid #D8D6C8; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(0.34,1.56,0.64,1); }
.token-dot svg { width:8px; height:8px; opacity:0; transition: opacity .2s ease; }
.token-dot.is-tokenized { background:#0164FF; border-color:#0164FF; transform:scale(1.08); }
.token-dot.is-tokenized svg { opacity:1; }
.token-label { font-size:10.5px; color:#8B93A1; flex:1; white-space:nowrap; }
.token-value { font-size:11px; font-weight:600; color:#33363A; transition: color .25s ease; white-space:nowrap; }
.token-value.is-tokenized { color:#0164FF; }
.token-value.morph { animation: hp-valueMorph .3s ease; }
@keyframes hp-valueMorph { 0% { opacity:.25; transform:translateY(-2px); } 100% { opacity:1; transform:translateY(0); } }

.provision-row { display:flex; align-items:center; gap:10px; padding:7px 2px; }
.provision-row svg { width:15px; height:15px; color:#D8D6C8; transition: color .3s ease; }
.provision-row span { font-size:12px; color:#C7CBD1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; transition: color .3s ease; }
.provision-row.is-active svg, .provision-row.is-active span, .provision-row.is-pulse svg, .provision-row.is-pulse span { color:#0164FF; }
.provision-row.is-dev.is-active span { color:#181A1B; font-weight:700; }

.evidence-ring { width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: conic-gradient(#0164FF calc(var(--pct, 0) * 1%), #EDF4FF 0); flex-shrink:0; transition: transform .3s ease; }
.evidence-ring.pulse { animation: hp-starPulse .6s ease-in-out 1; }
.evidence-ring-inner { width:66px; height:66px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.evidence-ring-inner .ring-pct { font-size:16px; font-weight:800; color:#181A1B; line-height:1.1; margin:0; }
.evidence-ring-inner .ring-label { font-size:8.5px; color:#8B93A1; margin:1px 0 0; }
.evidence-metric-card { opacity:0; transform:translateX(8px); transition: opacity .4s ease, transform .4s ease; background:#F7F9FC; border-radius:9px; padding:6px 10px; }
.evidence-metric-card.is-shown { opacity:1; transform:translateX(0); }
.evidence-metric-card p:first-child { font-size:9px; color:#8B93A1; margin:0; }
.evidence-metric-card p:last-child { font-size:13px; font-weight:700; color:#181A1B; margin:0; }

#discoverArrow { transition: box-shadow .3s ease, transform .3s ease; }
#discoverArrow.nudge { transform:translateX(2px); box-shadow: 0 0 0 5px rgba(1,100,255,.18); }

@media (prefers-reduced-motion: reduce) { .stage-signal { display:none !important; } }

/* Marquee */
.marquee-wrap { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; align-items:center; width:max-content; gap:3.5rem; animation: hp-marqueeL 26s linear infinite; will-change: transform; }
.marquee-track-slow { animation-duration: 40s; }
.marquee-logo { opacity:1; flex-shrink:0; object-fit:contain; }
@keyframes hp-marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1023px) { .hide-mobile { display: none; } }

/* Scroll-linked product story */
.story-path-bg { stroke:#DDDAD0; stroke-width:1.4; fill:none; }
.story-path-active { stroke:#0164FF; stroke-width:2; fill:none; stroke-dasharray:1; stroke-dashoffset:1; }
.story-reveal { opacity:0; transform:translateY(24px); transition: opacity .6s cubic-bezier(0.22,1,0.36,1), transform .6s cubic-bezier(0.22,1,0.36,1); }
.story-reveal.in-view { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .story-reveal { opacity:1; transform:none; } }

.story-label-anchor { position:absolute; left:0; top:0; z-index:2; }
.story-waypoint { position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; background:#F3F0EC; padding:5px 24px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#B0B4BB; }
.story-waypoint-dot { width:5px; height:5px; border-radius:50%; background:#C7CBD1; flex-shrink:0; }
.story-waypoint.is-active { color:#181A1B; }
.story-waypoint.is-active .story-waypoint-dot { background:#0164FF; }

.story-rail-m { position:absolute; left:20px; top:0; bottom:0; width:1.5px; background:rgba(1,100,255,.22); }
.story-rail-m-fill { position:absolute; left:0; top:0; width:100%; height:0; background:#0164FF; }
.story-node-m { position:absolute; left:20px; top:8px; width:11px; height:11px; border-radius:999px; background:#F5F3ED; border:2px solid #E4E1D7; z-index:1; }

.story-pill { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:60px; padding:0 32px; width:fit-content; border-radius:9999px; background:#F5F3ED; color:#8B93A1; border:1px solid #E4E1D7; font-size:17px; font-weight:600; line-height:1.2; letter-spacing:-0.01em; margin-bottom:22px; }
.story-pill.is-active { background:#0164FF; color:#fff; border-color:#0164FF; }
.story-pill-icon { width:17px; height:17px; flex-shrink:0; }

.story-desc { font-size:14px; font-weight:400; line-height:1.55; color:#B6BAC1; opacity:.18; transform:translateY(6px); margin-bottom:18px; margin-inline:auto; text-align:center; }
.story-desc.is-active { opacity:1; color:#5B6470; transform:translateY(0); }

.story-ui-card { background:#fff; border:1px solid #E4E1D7; border-radius:20px; box-shadow: 0 1px 2px rgba(24,26,27,.04), 0 10px 24px -12px rgba(24,26,27,.10); padding:22px 24px; opacity:.8; transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease; min-height:230px; min-width:0; width:100%; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.story-ui-card.is-active { opacity:1; border-color:#CFE2FF; box-shadow: 0 6px 20px -6px rgba(1,100,255,.22), 0 1px 2px rgba(24,26,27,.05); }
.story-ui-card--image { padding:0; min-height:0; border:none; border-radius:0; box-shadow:none; background:transparent; }
.story-ui-card--image.is-active { box-shadow:none; }
.story-ui-card--image img { display:block; width:100%; height:auto; }

.story-cta-part { opacity:.3; transform:translateY(10px); }
.story-cta-part.is-active { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .story-cta-part { opacity:1; transform:none; } }

/* Data wall */
.datawall-rows-inner { will-change: transform; animation: hp-dataWallDrift 75s linear infinite; }
@keyframes hp-dataWallDrift { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .datawall-rows-inner { animation:none; } }

.datawall-row { position:relative; display:flex; align-items:center; gap:14px; padding:11px 0; }
.datawall-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.3); white-space:nowrap; flex-shrink:0; }
.datawall-connector { flex:1; height:1px; min-width:24px; background:rgba(255,255,255,.09); }
.datawall-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(1,100,255,.14); border:1px solid rgba(1,100,255,.25); border-radius:999px; padding:5px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10px; font-weight:700; letter-spacing:.08em; color:#fff; white-space:nowrap; flex-shrink:0; opacity:.5; transition: opacity .8s ease, border-color .8s ease; }
.datawall-pill svg { width:8px; height:8px; flex-shrink:0; color:#5B9CFF; }
#dataWall.is-active .datawall-pill { opacity:1; border-color:rgba(1,100,255,.55); }
.datawall-row-shimmer .datawall-connector { position:relative; background:rgba(255,255,255,.09); overflow:hidden; }
.datawall-row-shimmer .datawall-connector::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(1,100,255,.85), transparent); background-size:220% 100%; animation: hp-dataWallShimmer 6s ease-in-out infinite; }
@keyframes hp-dataWallShimmer { 0% { background-position:220% 0; } 100% { background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce) { .datawall-row-shimmer .datawall-connector::after { animation:none; } }

/* Problem narrative: dark "blocked paths" diagram + blue "tokenized" rows */
.prob-panel { display:flex; flex-direction:column; justify-content:center; min-height:320px; }
@media (max-width:639px) { .prob-panel { min-height:0; } }
.prob-diagram-wrap { aspect-ratio:640/220; }
@media (min-width:640px) { .prob-diagram-wrap { aspect-ratio:auto; height:200px; } }
.prob-icon-node { position:absolute; width:30px; height:30px; border-radius:9999px; background:#1e2128; border:1px solid #4a4e56; color:#9ba0a8; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); }
.prob-tag { position:absolute; transform:translateX(-50%); font-size:11px; line-height:1.3; color:#ff8a80; background:#2a1c1e; border:1px solid rgba(255,90,82,.4); border-radius:6px; padding:3px 9px; white-space:nowrap; }
.prob-dot { position:absolute; width:8px; height:8px; border-radius:9999px; background:#16181d; border:1px solid #4a4e56; transform:translate(-50%,-50%); }
.prob-line { stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1); }
.prob-dark-box.is-revealed .prob-line { stroke-dashoffset:0; }
.prob-x { position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); }
.prob-dark-box.is-revealed .prob-x { animation: hp-probXPulse .6s ease-out both; }
@keyframes hp-probXPulse { 0% { transform:translate(-50%,-50%) scale(1); } 40% { transform:translate(-50%,-50%) scale(1.22); } 100% { transform:translate(-50%,-50%) scale(1); } }

.prob-src-icon { width:28px; height:28px; border-radius:9999px; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.prob-row-line { flex:1 1 auto; min-width:14px; height:1px; background:rgba(255,255,255,.45); }
.prob-chip { display:inline-flex; align-items:center; gap:5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:6px; padding:4px 10px; flex-shrink:0; white-space:nowrap; opacity:0; transform:translateX(-18px); transition: opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--rd, 0ms); }
.prob-blue-box.is-revealed .prob-chip { opacity:1; transform:translateX(0); }
.prob-check-group { display:flex; align-items:center; gap:8px; min-width:150px; flex-shrink:0; }
.prob-check { width:24px; height:24px; border-radius:9999px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:0; transition: opacity .4s ease; transition-delay: calc(var(--rd, 0ms) + 280ms); }
.prob-check-label { font-size:13px; color:#fff; opacity:0; transition: opacity .4s ease; transition-delay: calc(var(--rd, 0ms) + 280ms); }
.prob-blue-box.is-revealed .prob-check, .prob-blue-box.is-revealed .prob-check-label { opacity:1; }

@media (max-width:480px) {
  .prob-tag { font-size:10px; padding:2px 7px; }
  .prob-chip-text { display:none; }
  .prob-chip { padding:4px 7px; }
  .prob-row-line { min-width:6px; }
  .prob-check-group { min-width:120px; }
}
@media (prefers-reduced-motion: reduce) {
  .prob-line { transition:none !important; stroke-dashoffset:0 !important; }
  .prob-dark-box.is-revealed .prob-x { animation:none !important; }
  .prob-chip { transition:none !important; opacity:1 !important; transform:none !important; }
  .prob-check, .prob-check-label { transition:none !important; opacity:1 !important; }
}