/* ============================================================
   TopCheck marketing page — layered on wow-marketing.css.

   Same graphite/ivory world, same type, same buttons. Only the
   TopCheck brand hue (WOW blue as the scan color) and the mock
   inspection surfaces are local. Nothing here restyles shared
   chrome.

   Motion contract (matches the rest of the site): the markup's
   default state is the FINISHED state — fully readable with no
   JS and under prefers-reduced-motion. wow-topcheck.js adds
   .tc-anim to <main> only when motion is allowed; entrance
   offsets and the mock's staged states exist only under that
   class. Normal page scrolling is never touched.
   ============================================================ */

.tc { --tc-blue: #2BA0FF; }  /* aligned to the ShopRouteBoard/TopCheck brand blue */

/* -------- hero -------- */
.tc-hero { position: relative; overflow: hidden; padding-top: 72px; }
.tc-hero-glow {
  position: absolute; top: -220px; right: -160px; width: 640px; height: 640px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(78, 161, 255, .13), transparent 62%);
}
.tc-anim .tc-hero-glow { animation: tcGlow 9s ease-in-out infinite alternate; }
@keyframes tcGlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-50px,36px,0) scale(1.08); } }

.tc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; position: relative; }
.tc-mark { width: 60px; height: 60px; margin-bottom: 20px; filter: drop-shadow(0 8px 20px rgba(78, 161, 255, .20)); }
.tc-mark svg { display: block; width: 100%; height: 100%; }
.tc-hero .mk-h1 { font-size: clamp(34px, 4.6vw, 58px); }
.tc-hero .mk-h1 span { display: block; }
.tc-hero .mk-h1 .dim, .tc .mk-h2 .dim { color: var(--silver); }

.tc-dev { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 26px; }
.tc-dev-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; font-weight: 600;
  color: var(--tc-blue); border: 1px solid rgba(78, 161, 255, .38);
  background: rgba(78, 161, 255, .09); border-radius: 999px; padding: 8px 16px;
}
.tc-dev-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc-blue); }
.tc-anim .tc-dev-badge .dot { animation: tcPulse 2.2s infinite; }
@keyframes tcPulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 161, 255, .5); }
  70% { box-shadow: 0 0 0 9px rgba(78, 161, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 161, 255, 0); }
}
.tc-dev-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--bright); text-transform: uppercase; }

/* Eyebrows sit on the slightly lighter .panel surface in three sections
   here; the shared --faint token is tuned for the graphite ground and
   drops to 4.3:1 on panel. Silver keeps the recessive voice and passes. */
.tc .mk-sec.panel .mk-eyebrow, .tc .mk-sec.panel .tc-sim { color: var(--silver); }

/* the simulated-interface disclosure, used under every mock */
.tc-sim {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 14px 0 0;
}
.tc-sim.center { text-align: center; margin-top: 26px; }
.mk-sec.ivory .tc-sim.ink { color: #6E6A5E; }

/* -------- hero mockup frame -------- */
.tc-frame {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden;
}
.tc-frame-hd {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: var(--panel2); flex-wrap: wrap;
}
.tc-veh { display: block; font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.tc-ro { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--silver); }
.tc-prog { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tc-prog-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--bright); }
.tc-prog-n b { color: var(--tc-blue); }
.tc-prog-bar { width: 128px; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; display: block; }
.tc-prog-bar i { display: block; height: 100%; width: 67%; border-radius: 99px; background: linear-gradient(90deg, var(--tc-blue), var(--green)); }
.tc-anim .tc-prog-bar i { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.22, .8, .3, 1) .5s; }
.tc-anim .tc-hero-mock.in .tc-prog-bar i { transform: scaleX(1); }

.tc-rows { list-style: none; margin: 0; padding: 4px 0; }
.tc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  gap: 1px 12px; align-items: center; padding: 9px 18px;
  border-bottom: 1px solid var(--line);
}
.tc-row:last-child { border-bottom: none; }
.tc-row-name { font-size: 13.5px; font-weight: 600; color: var(--white); }
.tc-row-meta { grid-row: 2; font-family: var(--mono); font-size: 10.5px; color: var(--silver); letter-spacing: .04em; }
.tc-seg { grid-row: 1 / span 2; display: inline-flex; gap: 5px; }
.tc-seg i {
  width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line2);
  background: var(--panel2); display: inline-block;
}
.tc-seg i.g { --c: var(--green); } .tc-seg i.y { --c: var(--amber); }
.tc-seg i.r { --c: var(--red); } .tc-seg i.n { --c: var(--silver); }
.tc-row[data-state="green"]  .tc-seg i.g,
.tc-row[data-state="yellow"] .tc-seg i.y,
.tc-row[data-state="red"]    .tc-seg i.r,
.tc-row[data-state="none"]   .tc-seg i.n {
  background: color-mix(in srgb, var(--c) 24%, var(--panel2));
  border-color: var(--c);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c) 30%, transparent);
}
.tc-row[data-state="red"] .tc-row-name { color: color-mix(in srgb, var(--red) 60%, var(--white)); }
/* staged activation, motion path only */
.tc-anim .tc-row { opacity: .38; transform: translateX(-6px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1); }
.tc-anim .tc-row.on { opacity: 1; transform: none; }

.tc-frame-ft {
  display: flex; gap: 12px; align-items: center; padding: 13px 18px;
  border-top: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap;
}
.tc-photo-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--tc-blue);
  border: 1px solid rgba(78, 161, 255, .35); background: rgba(78, 161, 255, .08);
  border-radius: 999px; padding: 5px 11px;
}
.tc-photo-chip svg { width: 13px; height: 13px; }
.tc-note { font-size: 12px; color: var(--bright); font-style: italic; min-width: 0; }

/* -------- route board integration -------- */
.tc-int { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 44px; }
.tc-int-board { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.tc-board-hd { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--silver); padding: 2px 4px 12px; }
.tc-live { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.tc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
.tc-anim .tc-live i { animation: tcPulse 2.2s infinite; }
.tc-board-card { border: 1px solid var(--line2); border-radius: 12px; padding: 14px; background: var(--panel2); }
.tc-bc-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--silver); margin-bottom: 6px; }
.tc-bc-pri { color: var(--bright); }
.tc-bc-ro { display: block; font-family: var(--disp); font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.tc-bc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-bc-meta span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--bright);
  border: 1px solid var(--line2); border-radius: 6px; padding: 4px 8px;
}
.tc-insp-chip {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 600;
  border-radius: 9px; padding: 11px 14px; cursor: pointer;
  border: 1px solid; transition: background .45s ease, border-color .45s ease, color .45s ease;
  background: transparent; min-height: var(--tap);
}
.tc-insp-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tc-insp-chip[data-phase="red"]    { color: #FF8A80; border-color: rgba(232, 67, 58, .55);  background: rgba(232, 67, 58, .10); }
.tc-insp-chip[data-phase="yellow"] { color: var(--amber); border-color: rgba(245, 166, 35, .55); background: rgba(245, 166, 35, .10); }
.tc-insp-chip[data-phase="green"]  { color: var(--green); border-color: rgba(41, 196, 106, .55); background: rgba(41, 196, 106, .10); }
.tc-int-hint { font-size: 12.5px; color: var(--silver); margin: 12px 4px 0; }

.tc-int-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc-int-steps li {
  display: grid; grid-template-columns: 14px auto 1fr; gap: 4px 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
  transition: border-color .4s ease, background .4s ease, opacity .4s ease;
  opacity: .55;
}
.tc-int-steps li i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tc-int-steps li[data-phase="red"] i { background: var(--red); }
.tc-int-steps li[data-phase="yellow"] i { background: var(--amber); }
.tc-int-steps li[data-phase="green"] i { background: var(--green); }
.tc-int-steps li b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; }
.tc-int-steps li span { font-size: 13.5px; color: var(--bright); justify-self: start; }
.tc-int-steps li.on { opacity: 1; background: var(--panel); border-color: var(--line2); }
.tc-int-steps li.on[data-phase="red"] { border-color: rgba(232, 67, 58, .5); }
.tc-int-steps li.on[data-phase="yellow"] { border-color: rgba(245, 166, 35, .5); }
.tc-int-steps li.on[data-phase="green"] { border-color: rgba(41, 196, 106, .5); }
/* no-JS / reduced motion: all three steps read as the finished story */
main:not(.tc-anim) .tc-int-steps li { opacity: 1; }

/* -------- templates -------- */
.tc-tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.tc-tpl { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: rgba(255, 255, 255, .02); }
.tc-tpl-ico {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; background: rgba(78, 161, 255, .12); color: var(--tc-blue);
}
.tc-tpl-ico svg { width: 19px; height: 19px; }
.tc-tpl h3 { margin: 0 0 7px; font-size: 16px; font-weight: 700; color: var(--white); }
.tc-tpl p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bright); }

.tc-builder { margin-top: 26px; border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); overflow: hidden; }
.tc-builder-hd {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--silver);
  border-bottom: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap;
}
.tc-chip-soft {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--tc-blue);
  border: 1px solid rgba(78, 161, 255, .35); border-radius: 999px; padding: 3px 10px;
}
.tc-builder-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--white); flex-wrap: wrap;
}
.tc-builder-row.sec { background: rgba(78, 161, 255, .05); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.tc-builder-row.sec b { font-weight: 600; }
.tc-builder-row.add { color: var(--silver); font-size: 12.5px; border-bottom: none; }
.tc-builder-row .tc-chip-soft { margin-left: auto; }
.tc-grip { color: var(--faint); font-size: 11px; letter-spacing: -2px; cursor: default; user-select: none; }
.tc-req { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--silver); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; }
.tc-req.on { color: var(--green); border-color: rgba(41, 196, 106, .45); background: rgba(41, 196, 106, .07); }

/* -------- status language -------- */
.tc-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.tc-state {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px;
  display: grid; gap: 8px; justify-items: start; background: rgba(255, 255, 255, .02);
  transition: border-color .4s ease, transform .4s ease;
}
.tc-state i { width: 30px; height: 30px; border-radius: 10px; border: 1px solid; }
.tc-state.g i { background: color-mix(in srgb, var(--green) 26%, transparent); border-color: var(--green); }
.tc-state.y i { background: color-mix(in srgb, var(--amber) 26%, transparent); border-color: var(--amber); }
.tc-state.r i { background: color-mix(in srgb, var(--red) 26%, transparent); border-color: var(--red); }
.tc-state.n i { background: color-mix(in srgb, var(--silver) 18%, transparent); border-color: var(--silver); }
.tc-state b { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; }
.tc-state.g b { color: var(--green); } .tc-state.y b { color: var(--amber); }
.tc-state.r b { color: #FF8A80; } .tc-state.n b { color: var(--silver); }
.tc-state span { font-size: 13.5px; color: var(--bright); }
.tc-anim .tc-state { opacity: 0; transform: translateY(14px); }
.tc-anim .tc-state.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1); }

/* -------- split layouts -------- */
.tc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.tc-split.rev { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }

/* -------- photos per line -------- */
.tc-photo-card { border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.tc-pc-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tc-pc-hd b { font-family: var(--disp); font-weight: 800; font-size: 16px; }
.tc-pc-state {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 600; color: #FF8A80;
  border: 1px solid rgba(232, 67, 58, .5); background: rgba(232, 67, 58, .1); border-radius: 999px; padding: 5px 12px;
}
.tc-pc-meas {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px;
}
.tc-pc-meas span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--silver); }
.tc-pc-meas span svg { width: 14px; height: 14px; }
.tc-pc-meas b { font-size: 13.5px; color: var(--white); }
.tc-pc-photos { display: flex; gap: 10px; margin-bottom: 14px; }
.tc-pc-photos .ph {
  width: 74px; height: 56px; border-radius: 9px; border: 1px solid var(--line2); position: relative; overflow: hidden;
}
.tc-pc-photos .p1 { background: linear-gradient(135deg, #3A424D, #22272E 60%), radial-gradient(circle at 30% 40%, rgba(232, 67, 58, .35), transparent 50%); background-blend-mode: screen; }
.tc-pc-photos .p2 { background: linear-gradient(160deg, #46403A, #22272E 65%); }
.tc-pc-photos .p1::after, .tc-pc-photos .p2::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 62% 55%, rgba(255, 255, 255, .16), transparent 46%);
}
.tc-pc-photos .add {
  display: flex; align-items: center; justify-content: center; color: var(--tc-blue);
  font-size: 20px; font-weight: 600; border-style: dashed; border-color: rgba(78, 161, 255, .45);
  background: rgba(78, 161, 255, .05);
}
.tc-anim .tc-pc-photos .ph { opacity: 0; transform: scale(.9); }
.tc-anim .tc-photo-card.in .ph { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1); }
.tc-anim .tc-photo-card.in .p2 { transition-delay: .12s; }
.tc-anim .tc-photo-card.in .add { transition-delay: .24s; }
.tc-pc-note { margin: 0; font-size: 13px; font-style: italic; color: var(--bright); }

/* -------- touch-first devices -------- */
.tc-devices { display: grid; grid-template-columns: 1.35fr .7fr 1.6fr; gap: 26px; align-items: end; margin-top: 44px; }
.tc-dev-frame {
  border: 1px solid var(--line2); border-radius: 20px; background: var(--panel);
  padding: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .38); position: relative;
}
.tc-dev-frame.phone { border-radius: 26px; padding: 12px 10px; }
.tc-dev-frame.desktop { border-radius: 14px; }
.tc-dev-tag {
  position: absolute; top: -11px; left: 14px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; color: var(--silver); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.tc-mini { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 7px; }
.tc-mini-hd { height: 10px; border-radius: 5px; background: var(--line2); width: 55%; }
.tc-mini-cols { display: flex; gap: 7px; }
.tc-mini-cols span { flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.tc-mini-row { height: 17px; border-radius: 6px; background: var(--line); position: relative; }
.tc-mini-row::after { content: ""; position: absolute; right: 5px; top: 4px; width: 9px; height: 9px; border-radius: 3.5px; }
.tc-mini-row.g::after { background: var(--green); }
.tc-mini-row.y::after { background: var(--amber); }
.tc-mini-row.r::after { background: var(--red); }

/* -------- damage walk-around -------- */
.tc-car-wrap { position: relative; display: grid; justify-items: center; }
.tc-car { width: min(240px, 62vw); height: auto; }
.tc-car-body { fill: var(--panel2); stroke: var(--line2); stroke-width: 2.5; }
.tc-car-glass { fill: var(--panel); stroke: var(--line2); stroke-width: 1.5; }
.tc-car-wheel { fill: #0A0C0E; stroke: var(--line2); stroke-width: 1.5; }
.tc-pin circle { fill: rgba(232, 67, 58, .18); stroke: var(--red); stroke-width: 2; }
.tc-pin text { fill: #FF8A80; font: 600 12px var(--mono); text-anchor: middle; }
.tc-pin[data-n="3"] circle { fill: rgba(245, 166, 35, .16); stroke: var(--amber); }
.tc-pin[data-n="3"] text { fill: var(--amber); }
.tc-anim .tc-pin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.tc-anim .tc-car.in .tc-pin { opacity: 1; transform: scale(1); transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .3, 1); }
.tc-anim .tc-car.in .tc-pin[data-n="2"] { transition-delay: .35s; }
.tc-anim .tc-car.in .tc-pin[data-n="3"] { transition-delay: .7s; }
.tc-dmg-note {
  position: absolute; left: 0; top: 22%;
  border: 1px solid rgba(232, 67, 58, .5); background: rgba(20, 23, 26, .92);
  border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.tc-dmg-note b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: #FF8A80; }
.tc-dmg-note span { font-size: 12px; color: var(--bright); }
.tc-anim .tc-dmg-note { opacity: 0; transform: translateY(8px); }
.tc-anim .tc-car-wrap.in .tc-dmg-note { opacity: 1; transform: none; transition: opacity .5s ease .5s, transform .5s ease .5s; }
.tc-dmg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tc-dmg-list li { display: flex; align-items: center; gap: 13px; font-size: 14.5px; color: var(--bright); }
.tc-dmg-list i {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 600 11.5px var(--mono); font-style: normal;
}
.tc-dmg-list .d1, .tc-dmg-list .d2 { background: rgba(232, 67, 58, .16); border: 1px solid rgba(232, 67, 58, .55); color: #FF8A80; }
.tc-dmg-list .d3 { background: rgba(245, 166, 35, .14); border: 1px solid rgba(245, 166, 35, .55); color: var(--amber); }

/* -------- hub / departments -------- */
.tc-hub { margin-top: 44px; display: grid; gap: 26px; justify-items: center; }
.tc-hub-core {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .16em; font-weight: 600; color: var(--tc-blue);
  border: 1px solid rgba(78, 161, 255, .45); background: rgba(78, 161, 255, .08);
  border-radius: 999px; padding: 15px 30px;
  box-shadow: 0 14px 40px rgba(78, 161, 255, .12);
}
.tc-hub-core svg { width: 19px; height: 19px; }
.tc-hub-spokes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 780px; }
.tc-hub-spokes span {
  font-size: 13.5px; font-weight: 600; color: var(--white);
  border: 1px solid var(--line2); background: var(--panel); border-radius: 999px; padding: 10px 18px;
}
.tc-anim .tc-hub-spokes span { opacity: 0; transform: translateY(10px); }
.tc-anim .tc-hub.in .tc-hub-spokes span { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1); }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(2) { transition-delay: .07s; }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(3) { transition-delay: .14s; }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(4) { transition-delay: .21s; }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(5) { transition-delay: .28s; }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(6) { transition-delay: .35s; }
.tc-anim .tc-hub.in .tc-hub-spokes span:nth-child(7) { transition-delay: .42s; }

/* -------- future vision -------- */
.tc-next-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.tc-next {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--bright);
  border: 1px dashed var(--line2); border-radius: 999px; padding: 10px 18px;
}

/* -------- analytics -------- */
.tc-an-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.tc-an {
  border: 1px solid var(--ivory-line); border-radius: 16px; padding: 24px; background: #FFFFFF;
  display: grid; gap: 9px;
}
.tc-an .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: #6E6A5E; }
.tc-an .v { font-family: var(--disp); font-weight: 800; font-size: clamp(30px, 3.2vw, 40px); color: var(--ink); line-height: 1; }
.tc-anim .tc-an { opacity: 0; transform: translateY(14px); }
.tc-anim .tc-an-grid.in .tc-an { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1); }
.tc-anim .tc-an-grid.in .tc-an:nth-child(2) { transition-delay: .08s; }
.tc-anim .tc-an-grid.in .tc-an:nth-child(3) { transition-delay: .16s; }
.tc-anim .tc-an-grid.in .tc-an:nth-child(4) { transition-delay: .24s; }
.tc-anim .tc-an-grid.in .tc-an:nth-child(5) { transition-delay: .32s; }
.tc-anim .tc-an-grid.in .tc-an:nth-child(6) { transition-delay: .4s; }

/* -------- final CTA -------- */
.tc-final { position: relative; overflow: hidden; }
.tc-final::before {
  content: ""; position: absolute; left: 50%; bottom: -300px; width: 720px; height: 560px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(78, 161, 255, .1), transparent 60%);
}

/* -------- generic scroll reveal (JS adds .tc-rev to section children) -------- */
.tc-anim .tc-rev { opacity: 0; transform: translateY(18px); }
.tc-anim .tc-rev.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .tc-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .tc-hero-mock { max-width: 560px; }
  .tc-tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-states { grid-template-columns: repeat(2, 1fr); }
  .tc-split, .tc-split.rev { grid-template-columns: 1fr; gap: 44px; }
  .tc-split.rev .tc-car-wrap { order: 2; }
  .tc-int { grid-template-columns: 1fr; gap: 32px; }
  .tc-an-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-devices { grid-template-columns: 1fr 1fr; }
  .tc-dev-frame.desktop { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tc-hero { padding-top: 48px; }
  .tc-tpl-grid { grid-template-columns: 1fr; }
  .tc-states { grid-template-columns: 1fr; }
  .tc-an-grid { grid-template-columns: 1fr; }
  .tc-devices { grid-template-columns: 1fr; gap: 30px; }
  .tc-dev-frame.desktop { grid-column: auto; }
  .tc-row { padding: 9px 14px; }
  .tc-seg i { width: 26px; height: 26px; }
  .tc-frame-hd { padding: 14px; }
  .tc-prog { align-items: flex-start; }
  .tc-dmg-note { position: static; margin-top: 18px; justify-self: start; }
  .tc-builder-row .tc-req { margin-left: 0; flex-basis: 100%; justify-self: start; width: max-content; }
}