/* ============ Tech look: home page, aaa.html, vi/aaa.html (body.tech-page) ============
   Loaded after styles.css. A tech look on top of the site tokens: a grid hero that lights up
   under the pointer, Kovi the mascot, a capability marquee, an animated benefits bento on a dark
   band, a data-flow pipeline and a light beam round the featured price. Every animation stops
   under prefers-reduced-motion and the page reads fine without it. */

.tech-page {
  --font-tech: "Be Vietnam Pro", var(--font-body);
  --grid: rgba(27, 26, 23, 0.06);
  --grid-hot: rgba(201, 126, 0, 0.34);
  --chip-bg: rgba(255, 255, 255, 0.94);
  --ok: #16a34a;
}
[data-theme="dark"] .tech-page {
  --grid: rgba(255, 255, 255, 0.05);
  --grid-hot: rgba(245, 166, 35, 0.38);
  --chip-bg: rgba(22, 23, 22, 0.94);
  --ok: #22c55e;
}
.tech-page h1, .tech-page h2, .tech-page h3, .tech-page .section-title,
.tech-page .price-card h3, .tech-page .audit-band h3 { font-family: var(--font-tech); }
.tech-page .section-title { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.tech-page section { padding: 88px 0; }
.tech-page .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
/* Cards that also lift on hover: only the reveal is staggered, the hover answers at once. */
.tech-page .tile.reveal, .tech-page .uc.reveal, .tech-page .who.reveal { transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s; }
.sec-lead { color: var(--muted); font-size: 1.05rem; max-width: 560px; }

/* Buttons: an arrow chip, and a light sweep across gold buttons on hover. */
.tech-page .btn-gold { position: relative; overflow: hidden; gap: 10px; }
.tech-page .btn-gold::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg);
}
.tech-page .btn-gold:hover::after { animation: btnSweep 0.8s ease; }
@keyframes btnSweep { to { left: 130%; } }
.btn-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: -10px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); font-size: 0.85rem; transition: transform 0.2s; }
/* Icon-only variant (submit buttons): no chip, just the glyph */
.btn-ico:has(svg) { width: auto; height: auto; margin-right: 0; background: none; }
.btn-ico svg { width: 16px; height: 16px; }
.btn:hover .btn-ico { transform: translateX(3px); }

/* ---------- Hero ---------- */
.tech-hero { position: relative; overflow: hidden; padding: 136px 0 64px !important; --mx: 72%; --my: 42%; }
.tech-hero::before, .tech-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; animation: gridDrift 30s linear infinite;
}
.tech-hero::after {
  background-image: linear-gradient(var(--grid-hot) 1px, transparent 1px), linear-gradient(90deg, var(--grid-hot) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 75%);
          mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 75%);
}
@keyframes gridDrift { to { background-position: 48px 48px, 48px 48px; } }
.tech-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--chip-bg);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light);
}
.hero-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.tech-hero h1 { font-family: var(--font-tech); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.04em; margin-bottom: 22px; }
.tech-hero h1 .grad { display: block; background: linear-gradient(90deg, var(--gold-light), var(--gold) 55%, #f5b84a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-hero h1 .nw { white-space: nowrap; }
.hero-lead { color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 500px; margin-bottom: 30px; }
/* Hero lead as a checklist, same gold tick as the price cards (.check-list). */
.hero-points { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.hero-points li { position: relative; padding-left: 26px; color: var(--cream-dim); font-weight: 500; }
.hero-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold-light); font-weight: 700; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; margin-top: 40px; }
.hero-stats div { padding: 0 22px; border-left: 1px solid var(--line); }
.hero-stats div:first-child { padding-left: 0; border-left: 0; }
.hero-stats b { display: block; font-family: var(--font-tech); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.hero-stats span { font-size: 0.8rem; color: var(--muted); }

/* ---------- Kovi on stage: orbits, event chips, speech bubble ---------- */
.kovi-stage { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin-left: auto; }
.kovi-stage::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(245, 166, 35, 0.24), transparent 66%); filter: blur(12px); }
.kovi-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kovi-orbits path { fill: none; stroke: var(--line); stroke-width: 1.2; }
.kovi-orbits circle { fill: var(--gold-light); }
.kovi-orbits text { font: 700 10px var(--font-tech); letter-spacing: 0.28em; fill: var(--muted); }
.kovi-orbits .hot { fill: var(--gold-light); }
.kovi { position: absolute; left: 50%; top: 50%; width: 50%; transform: translate(-50%, -52%); overflow: visible; color: var(--cream); }
.kovi-bubble {
  position: absolute; top: 10%; left: 2%; padding: 9px 14px; border-radius: 14px 14px 14px 4px;
  background: var(--chip-bg); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  font-size: 0.86rem; font-weight: 600; animation: bob 5s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-6px); } }
.kovi-chip {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px;
  background: var(--chip-bg); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; opacity: 0; animation: chipCycle 10s infinite;
}
.kovi-chip b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 0.7rem; }
.kovi-chip.c1 { top: 24%; right: -2%; }
.kovi-chip.c2 { bottom: 20%; right: 2%; animation-delay: 2.5s; }
.kovi-chip.c3 { bottom: 12%; left: 0; animation-delay: 5s; }
.kovi-chip.c4 { top: 40%; left: -4%; animation-delay: 7.5s; }
@keyframes chipCycle {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  4%, 22% { opacity: 1; transform: none; }
  27%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Kovi's own motion. Eyes follow the pointer through --ex / --ey (main.js). */
.kovi-bot { animation: koviFloat 4.6s ease-in-out infinite; }
@keyframes koviFloat { 50% { transform: translateY(-10px); } }
.kovi-shadow { transform-box: fill-box; transform-origin: center; animation: koviShadow 4.6s ease-in-out infinite; }
@keyframes koviShadow { 50% { transform: scale(0.78); opacity: 0.06; } }
.kovi-eyes { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform 0.18s ease-out; }
.kovi-eye { transform-box: fill-box; transform-origin: center; animation: koviBlink 5.5s infinite; }
@keyframes koviBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
.kovi-gem { animation: koviGem 2.4s ease-in-out infinite; }
@keyframes koviGem { 50% { opacity: 0.55; } }
.kovi-jet { transform-box: fill-box; transform-origin: 50% 0; animation: koviJet 1.1s ease-in-out infinite alternate; }
@keyframes koviJet { to { transform: scaleY(0.7); opacity: 0.55; } }
.kovi-wave { transform-box: view-box; transform-origin: 166px 154px; animation: koviWave 6s ease-in-out infinite; }
@keyframes koviWave {
  0%, 55%, 100% { transform: rotate(0); }
  62%, 72%, 82% { transform: rotate(-150deg); }
  67%, 77% { transform: rotate(-122deg); }
  90% { transform: rotate(0); }
}

/* ---------- Line-by-line reveal: children of [data-lines] come in one after another once the
   block (or an ancestor) is visible. --i is the block's stagger index, --n each line's index (main.js). */
.tech-page [data-lines] > * {
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i, 0) * 90ms + 250ms + var(--n, 0) * 200ms);
}
.tech-page .visible [data-lines] > *, .tech-page [data-lines].visible > * { opacity: 1; transform: none; }
/* Small Kovi (.kovi-mini). Gradients come from the hero Kovi's <defs>; eyes and head turn toward
   the pointer (--ex / --ey / --tilt, main.js). */
.kovi-mini { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 8px 12px rgba(216, 131, 0, 0.22)); }
.kovi-head { transform-box: view-box; transform-origin: 110px 146px; transform: rotate(var(--tilt, 0deg)); transition: transform 0.3s ease-out; }
/* Kovi on the featured price card's top-right corner, giving a thumbs-up every few seconds:
   the right arm swings up and a fist with the thumb up pops out at its end. */
.kovi-perch { position: absolute; top: -61px; right: 24px; width: 86px; pointer-events: none; }
.price-grid:has(.kovi-perch) { margin-top: 69px; }
.kovi-like { transform-box: view-box; transform-origin: 166px 154px; transform: rotate(-16deg); animation: koviLike 5s ease-in-out infinite; }
@keyframes koviLike {
  0%, 40%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(-124deg); }
  54%, 84% { transform: rotate(-115deg); }
  94% { transform: rotate(-16deg); }
}
.kovi-fist { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: koviFist 5s ease-in-out infinite; }
@keyframes koviFist {
  0%, 44%, 90%, 100% { transform: scale(0); }
  52% { transform: scale(1.15); }
  56%, 64%, 72%, 84% { transform: scale(1); }
  60%, 68% { transform: scale(1.14); }
}

/* ---------- Capability marquee ---------- */
.cap-band { overflow: hidden; padding: 18px 0; background: #0d0d0d; color: #f8f7f4; border-block: 1px solid rgba(255, 255, 255, 0.06); }
.cap-track { display: inline-flex; gap: 28px; white-space: nowrap; animation: marquee 34s linear infinite; font-family: var(--font-tech); font-weight: 600; font-size: 1rem; }
.cap-track span:nth-child(even) { color: #f5a623; }
.cap-band:hover .cap-track { animation-play-state: paused; }

/* ---------- Dark band (benefits) ---------- */
.band-dark {
  --cream: #f8f7f4; --cream-dim: #ded8ce; --muted: #a9a296; --line: rgba(255, 255, 255, 0.09);
  --panel: #161716; --surface: rgba(255, 255, 255, 0.04); --gold-light: #f5a623; --gold: #d88300;
  background: radial-gradient(800px 420px at 85% 0%, rgba(216, 131, 0, 0.14), transparent 60%), #0d0d0d;
  color: var(--cream);
}
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }

/* A small Kovi flies back and forth in the free space beside the benefits title, turning at each end. */
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 40px; }
.band-head .section-title { margin-bottom: 0; }
.fly-lane { flex: 1 1 220px; height: 80px; container-type: inline-size; }
.fly-kovi { width: 64px; animation: flyX 11s ease-in-out infinite; }
.fly-kovi img { display: block; width: 64px; height: auto; animation: flyTurn 11s ease-in-out infinite, flyBob 1.8s ease-in-out infinite; }
@keyframes flyX { 0% { transform: none; } 45%, 50% { transform: translateX(calc(100cqw - 64px)); } 95%, 100% { transform: none; } }
@keyframes flyTurn {
  0% { scale: 1 1; rotate: 0deg; }
  8%, 37% { scale: 1 1; rotate: 8deg; }
  45%, 46% { scale: 1 1; rotate: 0deg; }
  49%, 50% { scale: -1 1; rotate: 0deg; }
  58%, 87% { scale: -1 1; rotate: -8deg; }
  95%, 96% { scale: -1 1; rotate: 0deg; }
  99%, 100% { scale: 1 1; rotate: 0deg; }
}
@keyframes flyBob { 50% { translate: 0 -6px; } }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 26px 26px 22px;
  border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.25s, translate 0.25s;
}
.tile:hover { border-color: rgba(245, 166, 35, 0.45); translate: 0 -3px; }
.tile-wide { grid-column: span 2; }
.tile-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.3); font-size: 1.15rem; }
.tile h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.tile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tile-head .tile-ico { flex: none; margin: 0; }
.tile-head h3 { margin: 0; line-height: 1.3; }
.tile > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.tile-viz { margin-top: auto; }

/* Payroll: steps up with each hire, goes down with automation. Drawn when the tile appears. */
.viz-cost svg { display: block; width: 100%; height: auto; }
.viz-cost .ax { stroke: var(--line); }
.viz-cost .l-hire { fill: none; stroke: #8a8378; stroke-width: 2.5; stroke-dasharray: 1; }
.viz-cost .l-ai { fill: none; stroke: #f5a623; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.viz-legend i { display: inline-block; width: 18px; height: 3px; margin-right: 8px; border-radius: 2px; vertical-align: middle; background: #8a8378; }
.viz-legend span { white-space: nowrap; }
.viz-legend .ai { color: #f5a623; }
.viz-legend .ai i { background: #f5a623; }
.tile.visible .viz-cost .l-hire, .tile.visible .viz-cost .l-ai { animation: draw 1.6s ease 0.3s both; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* Quality: each task gets its tick, one by one; an unclear one goes to a person. */
.viz-checks { display: grid; gap: 8px; }
.chk { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.85rem; color: var(--cream-dim); }
.chk b { font-size: 0.76rem; font-weight: 700; color: #22c55e; white-space: nowrap; }
.chk.flag b { color: #f5a623; }
.tile.visible .chk b { animation: pop 0.4s ease both; animation-delay: calc(0.5s + var(--n, 0) * 0.35s); }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } }

/* Output: a week of tasks done grows in. */
.viz-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; border-bottom: 1px solid var(--line); }
.viz-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #f5a623, rgba(216, 131, 0, 0.3)); transform-origin: bottom; }
.tile.visible .viz-bars i { animation: grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.3s + var(--n, 0) * 0.08s); }
@keyframes grow { from { transform: scaleY(0); } }
.viz-cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: var(--muted); }

/* Delegation: you ask once, Kovi types, then replies. */
.viz-chat { display: grid; gap: 10px; }
.msg-me { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(255, 255, 255, 0.08); font-size: 0.9rem; }
.msg-ai { display: flex; align-items: flex-end; gap: 10px; }
.msg-ai svg { flex: none; width: 32px; height: 32px; }
.msg-ai .bub { position: relative; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(245, 166, 35, 0.14); border: 1px solid rgba(245, 166, 35, 0.35); font-size: 0.9rem; }
.typing { position: absolute; left: 14px; top: 50%; display: inline-flex; gap: 4px; transform: translateY(-50%); opacity: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cream-dim); animation: typingDot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot { 50% { opacity: 0.3; transform: translateY(-3px); } }
.tile.visible .typing { animation: typingShow 1.8s ease 0.3s both; }
@keyframes typingShow { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.tile.visible .reply { animation: replyIn 0.5s ease 2s both; }
@keyframes replyIn { from { opacity: 0; filter: blur(4px); } }

/* Control: Kovi prepares the action, the decision waits for your click. */
.apr { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.apr-q { font-size: 0.9rem; font-weight: 600; color: var(--cream); }
.apr-sub { margin: 2px 0 12px; font-size: 0.76rem; color: var(--muted); }
.apr-btns { display: flex; gap: 8px; }
.apr-btns span { flex: 1; padding: 8px 0; border-radius: 999px; border: 1px solid var(--line); text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--cream-dim); }
.apr-btns .yes { border-color: transparent; background: linear-gradient(135deg, #f5a623, #d88300); color: #fff; }
.tile.visible .apr { animation: aprIn 0.6s ease 0.4s both; }
.tile.visible .apr-btns .yes { animation: aprPulse 2.4s ease-in-out 1.2s infinite; }
@keyframes aprIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes aprPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); } }

/* ---------- Use cases ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.uc { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: inherit; transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.25s, translate 0.25s, box-shadow 0.25s; }
.uc:hover { border-color: rgba(216, 131, 0, 0.5); translate: 0 -3px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08); }
/* Each card has its own Kovi, dressed for that job (assets/kovi/*.svg, animated inside the SVG). */
.uc-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.uc-ico img { width: 54px; height: 54px; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.uc:hover .uc-ico img, .who:hover .uc-ico img { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.uc h3 { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.uc small { font-size: 0.8rem; color: var(--muted); }
.uc small b { color: var(--gold-light); font-weight: 600; }

/* ---------- Who needs us: one card per kind of business, with the jobs Kovi takes over there ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.who { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.25s, translate 0.25s, box-shadow 0.25s; }
.who:hover { border-color: rgba(216, 131, 0, 0.5); translate: 0 -3px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08); }
.who .tile-head h3 { margin: 0; }
.who h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.who p { color: var(--muted); font-size: 0.93rem; margin-bottom: 18px; }
.who-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.who-tags span { padding: 4px 11px; border-radius: 999px; background: rgba(216, 131, 0, 0.1); border: 1px solid rgba(216, 131, 0, 0.22); color: var(--gold-light); font-size: 0.76rem; font-weight: 600; }
.who-note { margin-top: 32px; text-align: center; color: var(--muted); }
.who-note a { margin-left: 4px; font-weight: 600; color: var(--gold-light); white-space: nowrap; }
.who-note a:hover { text-decoration: underline; }

/* ---------- Pipeline: data flows from audit to operate ---------- */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.pipeline::before, .pipeline::after { content: ""; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px; }
.pipeline::before { background: var(--line); }
.pipeline::after { background: linear-gradient(90deg, transparent, var(--gold-light), transparent) 0 0 / 30% 100% no-repeat; animation: flowX 2.6s linear infinite; }
@keyframes flowX { from { background-position: -45% 0; } to { background-position: 145% 0; } }
@keyframes flowY { from { background-position: 0 -45%; } to { background-position: 0 145%; } }
.pipe { position: relative; z-index: 1; text-align: center; }
.pipe-dot { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; border: 2px solid var(--gold-light); background: var(--panel); color: var(--gold-light); font-family: var(--font-tech); font-weight: 800; box-shadow: 0 0 0 6px var(--bg-soft); }
.pipe h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.pipe p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Delivery ride: Kovi rides a scooter along a road under the steps, stopping under 1 → 4.
   Stops are the grid's column centres (4 columns, 20px gaps); each step lights up on arrival
   and the wheels turn only while it drives, all on one 9s timeline that starts when the lane appears. */
.ride-lane { position: relative; height: 84px; margin-top: 22px; overflow: hidden; container-type: inline-size; }
/* The road: light grey with white edge lines and a white dashed centre line, fading out at both ends. */
.ride-lane::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-radius: 4px;
  background: linear-gradient(90deg, #fff 0 55%, transparent 0) 0 50% / 26px 2.5px repeat-x, linear-gradient(180deg, #ebe8e2, #dfdbd4);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -1.5px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
[data-theme="dark"] .ride-lane::before { background: linear-gradient(90deg, #fff 0 55%, transparent 0) 0 50% / 26px 2.5px repeat-x, linear-gradient(180deg, #9a968f, #8a867f); }
.ride {
  --r: 100px; --s1: calc((100cqw - 60px) / 8); --s2: calc((100cqw - 60px) * 3 / 8 + 20px);
  --s3: calc((100cqw - 60px) * 5 / 8 + 40px); --s4: calc((100cqw - 60px) * 7 / 8 + 60px);
  position: absolute; left: 0; bottom: 6px; width: var(--r); height: auto; transform: translateX(calc(var(--s1) - var(--r) / 2));
}
.ride [fill="url(#rd-frame)"] { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.6; }
.rd-wheel { transform-box: fill-box; transform-origin: center; }
.ride-lane.visible .ride { animation: rideX 9s ease-in-out infinite; }
.ride-lane.visible .rd-wheel { animation: rideSpin 9s ease-in-out infinite; }
.rd-body { animation: rdBob 0.18s ease-in-out infinite alternate; }
.rd-kovi { animation: rdBob 0.9s ease-in-out infinite alternate; }
.rd-eye { transform-box: fill-box; transform-origin: center; animation: rdBlink 4.8s infinite; }
.rd-ant { transform-origin: 45px 2px; animation: rdAnt 0.9s ease-in-out infinite alternate; }
.rd-puff { transform-box: fill-box; transform-origin: center; animation: rdPuff 1.3s ease-out infinite; }
.rd-puff.p2 { animation-delay: 0.65s; }
.rd-beam { animation: rdBeam 2.4s ease-in-out infinite; }
@keyframes rideX {
  0% { transform: translateX(calc(var(--s1) - var(--r) / 2 - 60px)); opacity: 0; }
  5%, 13% { transform: translateX(calc(var(--s1) - var(--r) / 2)); opacity: 1; }
  27%, 35% { transform: translateX(calc(var(--s2) - var(--r) / 2)); }
  49%, 57% { transform: translateX(calc(var(--s3) - var(--r) / 2)); }
  71%, 85% { transform: translateX(calc(var(--s4) - var(--r) / 2)); opacity: 1; }
  93%, 100% { transform: translateX(calc(var(--s4) + 60px - var(--r) / 2)); opacity: 0; }
}
@keyframes rideSpin {
  0% { transform: rotate(0deg); }
  5%, 13% { transform: rotate(360deg); }
  27%, 35% { transform: rotate(1800deg); }
  49%, 57% { transform: rotate(3240deg); }
  71%, 85% { transform: rotate(4680deg); }
  93%, 100% { transform: rotate(5040deg); }
}
@keyframes rdBob { to { transform: translateY(-0.8px); } }
@keyframes rdBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes rdAnt { to { transform: rotate(-12deg); } }
@keyframes rdPuff { 0% { transform: none; opacity: 0.7; } 100% { transform: translate(-9px, -4px) scale(2); opacity: 0; } }
@keyframes rdBeam { 50% { opacity: 0.55; } }
.process:has(.ride-lane.visible) .pipe:nth-child(1) .pipe-dot { animation: dotLit1 9s ease infinite; }
.process:has(.ride-lane.visible) .pipe:nth-child(2) .pipe-dot { animation: dotLit2 9s ease infinite; }
.process:has(.ride-lane.visible) .pipe:nth-child(3) .pipe-dot { animation: dotLit3 9s ease infinite; }
.process:has(.ride-lane.visible) .pipe:nth-child(4) .pipe-dot { animation: dotLit4 9s ease infinite; }
@keyframes dotLit1 { 0%, 4%, 94%, 100% { background: var(--panel); color: var(--gold-light); } 6% { background: var(--gold-light); color: #fff; transform: scale(1.15); } 9%, 91% { background: var(--gold-light); color: #fff; transform: none; } }
@keyframes dotLit2 { 0%, 26%, 94%, 100% { background: var(--panel); color: var(--gold-light); } 28% { background: var(--gold-light); color: #fff; transform: scale(1.15); } 31%, 91% { background: var(--gold-light); color: #fff; transform: none; } }
@keyframes dotLit3 { 0%, 48%, 94%, 100% { background: var(--panel); color: var(--gold-light); } 50% { background: var(--gold-light); color: #fff; transform: scale(1.15); } 53%, 91% { background: var(--gold-light); color: #fff; transform: none; } }
@keyframes dotLit4 { 0%, 70%, 94%, 100% { background: var(--panel); color: var(--gold-light); } 72% { background: var(--gold-light); color: #fff; transform: scale(1.15); } 75%, 91% { background: var(--gold-light); color: #fff; transform: none; } }

/* ---------- Pricing: a light beam runs round the featured card ---------- */
.tech-page .price-card { padding: 30px 28px; }
.tech-page .price-amount { font-family: var(--font-tech); font-weight: 800; letter-spacing: -0.03em; }
/* A struck-through old price, e.g. the audit that is now free */
.tech-page .price-amount s, .tech-page .ladder-price s { margin-right: 4px; font-size: 0.55em; font-weight: 600; color: var(--muted); text-decoration-thickness: 2px; }
.tech-page .ladder-price s { font-size: 0.7em; }
.tech-page .price-card .check-list { margin: 18px 0 24px; }
.tech-page .price-card.featured, .tech-page .svc-card.featured { isolation: isolate; }
.tech-page .price-card.featured::before, .tech-page .svc-card.featured::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--beam-a, 0deg), transparent 0 68%, #f5a623 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 5s linear infinite;
}
@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam-a: 360deg; } }

/* ---------- Home page ---------- */
.tech-hero .hero-stats b.word { font-size: 1.08rem; }
.logo-strip { margin-top: 22px; }
.tech-page .partners { padding: 56px 0; }
.tech-page .logo-badge { border-radius: 999px; padding: 9px 20px; font-family: var(--font-tech); font-size: 0.92rem; }

/* Featured AAA on the dark band: benefits on the left, the package ladder on the right. */
.feat-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.feat-list { list-style: none; margin: 28px 0 32px; display: grid; gap: 10px; }
.feat-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.feat-list .tile-ico { flex: none; margin: 0; width: 36px; height: 36px; font-size: 1rem; }
.feat-list b { display: block; font-size: 0.98rem; }
.feat-list span { font-size: 0.86rem; color: var(--muted); }
.band-dark .ladder { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); border-color: rgba(245, 166, 35, 0.3); }
.ladder-note { margin-top: 10px; font-size: 0.9rem; font-style: italic; color: var(--cream-dim); }
.tech-page .ladder-price { font-family: var(--font-tech); font-weight: 800; letter-spacing: -0.02em; }
.band-dark .ladder-price { color: #f5a623; }
.feat-grid .section-title .gold { display: block; }
/* On a plain section the ring that cuts the pipeline line takes the plain background. */
section:not(.process) .pipe-dot { box-shadow: 0 0 0 6px var(--bg); }

/* Three pillars as tech cards; the AI one carries the beam. */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.25s, translate 0.25s, box-shadow 0.25s;
}
.tech-page .svc-card.reveal { transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s; }
.svc-card:hover { border-color: rgba(216, 131, 0, 0.5); translate: 0 -4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.svc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.svc-top .tile-ico { margin: 0; }
.svc-num { font-family: var(--font-tech); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--muted); }
.svc-card h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.svc-tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 12px; }
.svc-card > p:not(.svc-tag) { color: var(--muted); font-size: 0.93rem; margin-bottom: 16px; }
.svc-list { list-style: none; margin-bottom: 20px; }
.svc-list li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--cream-dim); }
.svc-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold-light); }
.svc-link { margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--gold-light); }
.svc-link:hover { text-decoration: underline; }

/* AI + people: the rules on the left, a live run log on the right. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rules { display: grid; gap: 10px; margin-top: 28px; }
.rule { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 0.92rem; color: var(--muted); }
.rule b { color: var(--gold-light); font-family: var(--font-tech); }
.log-card {
  --cream: #f8f7f4; --cream-dim: #ded8ce; --muted: #a9a296; --line: rgba(255, 255, 255, 0.09); --surface: rgba(255, 255, 255, 0.04);
  padding: 22px; border-radius: 22px; background: #0d0d0d; color: var(--cream); border: 1px solid rgba(245, 166, 35, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.log-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 0.82rem; color: var(--muted); }
.log-head svg { width: 26px; height: 26px; }
.log-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #22c55e; font-weight: 700; }
.log-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: ping 2s infinite; }
.log-card.visible .chk b { animation: pop 0.4s ease both; animation-delay: calc(0.5s + var(--n, 0) * 0.45s); }
.pipe-cta { margin-top: 44px; text-align: center; }

@media (max-width: 920px) {
  .feat-grid, .duo { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rule { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .tech-hero { padding-top: 116px !important; }
  .tech-hero .container { grid-template-columns: 1fr; }
  .kovi-stage { max-width: 400px; margin: 8px auto 0; }
  .bento { grid-template-columns: 1fr; }
  .tile-wide { grid-column: auto; }
  .uc-grid, .who-grid { grid-template-columns: 1fr 1fr; }
  /* Cards stack here: leave room for Kovi's head above the featured one */
  .price-grid:has(.kovi-perch) { row-gap: 60px; }
}
@media (max-width: 720px) {
  .tech-page section { padding: 64px 0; }
  .hero-stats div { padding: 0 14px; }
  .uc-grid, .who-grid { grid-template-columns: 1fr; }
  .uc { padding: 14px 16px; gap: 12px; }
  .who { padding: 20px; }
  .uc-ico, .uc-ico img { width: 46px; height: 46px; }
  .fly-lane { height: 64px; }
  /* Steps stack vertically here, so the four stops just spread evenly across the road. */
  .ride { --r: 80px; --s1: calc(var(--r) / 2); --s4: calc(100cqw - var(--r) / 2); --s2: calc(var(--s1) + (var(--s4) - var(--s1)) / 3); --s3: calc(var(--s1) + (var(--s4) - var(--s1)) * 2 / 3); }
  .ride-lane { height: 70px; margin-top: 18px; }
  .ride-lane::before { height: 15px; }
  .ride { bottom: 5px; }
  .band-head + .bento { margin-top: 16px; }
  .pipeline { grid-template-columns: 1fr; gap: 24px; }
  .pipeline::before, .pipeline::after { top: 22px; bottom: 22px; left: 22px; right: auto; width: 2px; height: auto; }
  .pipeline::after { background: linear-gradient(180deg, transparent, var(--gold-light), transparent) 0 0 / 100% 30% no-repeat; animation-name: flowY; }
  .pipe { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; align-items: center; text-align: left; }
  .pipe-dot { grid-row: span 2; margin: 0; }
  .kovi-chip { font-size: 0.74rem; padding: 7px 10px; }
  .kovi-perch { top: -49px; right: 18px; width: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-page *, .tech-page *::before, .tech-page *::after { animation: none !important; }
  .kovi-chip.c1 { opacity: 1; }
  .kovi-like { transform: rotate(-115deg); }
  .kovi-fist { transform: none; }
  .tech-page [data-lines] > * { opacity: 1; transform: none; transition: none; }
}