/* ==========================================================================
   VWM.AI — test.css  (homepage layout redesign, /test/ only)

   Built directly on the site's own Nocturne tokens (Inter, the existing
   dark ground/surface/accent) — no second typeface, no second ink color.
   Structural devices are chosen per content, not repeated everywhere:
   a hairline-divided quadrant for the four parallel problems (not a
   sequence, so no numbering), a real pinned timeline for the three
   chronological process phases, and two distinguished visual languages —
   rounded UI chrome (panels, dashboard mockup) vs. sharp-edged editorial
   photography — instead of one border-radius stamped on everything.

   Motion (test.js, GSAP + ScrollTrigger) is concentrated where it carries
   meaning: the numbers count up once, the process timeline pins and
   reveals in sequence as you scroll, the workflow photos tilt toward the
   pointer, the product mockup idles in a slow 3D loop. Everything renders
   in its finished state with JS off or under prefers-reduced-motion.

   Loaded only on the /test/ page, on top of tokens.css + main.css (reuses
   .container, .fade-rule, .btn, .tag, .card-*, .dashboard-* utilities).
   ========================================================================== */

.t-page { overflow-x: hidden; }

/* Tokens live on <body> (not on main.t-page) so the header and the
   expanded footer — which sit outside <main> — resolve the same values. */
body.t-redesign {
  /* — spacing scale — every top-level section shares the --t-sp-6 top
     rhythm (.t-section, .t-hero, .t-split, .t-cta) rather than each
     picking its own value. */
  --t-sp-1: 8px;
  --t-sp-2: 16px;
  --t-sp-3: 24px;
  --t-sp-4: 40px;
  --t-sp-5: 64px;
  --t-sp-6: 96px;

  /* — corner languages — UI chrome (panels, dashboard mockup) reads as
     rounded; photography reads as sharp-edged/editorial. */
  --t-radius-ui: var(--radius-lg);
  --t-radius-photo: 3px;

  /* — motion tokens — one vocabulary shared by CSS transitions here and
     the GSAP tweens in test.js, so hover feedback, reveals and idle loops
     all speak the same tempo. */
  --t-dur-fast: .18s;     /* hover feedback: tint, lift */
  --t-dur-base: .35s;     /* state changes: glare, spotlight */
  --t-dur-slow: .8s;      /* entrances, count-up */
  --t-ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-tilt-perspective: 1100px;
}

/* — logomark: the five bars light up one after another on a 2.5s loop
   (0.5s per bar), each rising to the pale accent and settling back to
   its own resting fill. Nav and footer marks only; the mockup's tiny
   titlebar mark stays still. — */
body.t-redesign .nav-brand .logo-bar,
body.t-redesign .footer-brand .logo-bar {
  fill: var(--bar);
  animation: t-logo-bar 2.5s ease-in-out infinite;
}
body.t-redesign .nav-brand .logo-bar:nth-child(2), body.t-redesign .footer-brand .logo-bar:nth-child(2) { animation-delay: .5s; }
body.t-redesign .nav-brand .logo-bar:nth-child(3), body.t-redesign .footer-brand .logo-bar:nth-child(3) { animation-delay: 1s; }
body.t-redesign .nav-brand .logo-bar:nth-child(4), body.t-redesign .footer-brand .logo-bar:nth-child(4) { animation-delay: 1.5s; }
body.t-redesign .nav-brand .logo-bar:nth-child(5), body.t-redesign .footer-brand .logo-bar:nth-child(5) { animation-delay: 2s; }
@keyframes t-logo-bar {
  0%, 30%, 100% { fill: var(--bar); }
  8%, 18% { fill: var(--color-accent-300); }
}

/* — wider page: this preview runs the shared .container (1320px in
   main.css) out to 1520px — scoped to this page, header and footer
   included, so the live pages keep their measure. */
body.t-redesign .container { max-width: 1520px; }
.t-page .container { padding-inline: clamp(24px, 5vw, 88px); }

/* — section rhythm: one shared top gap for every top-level section — */
.t-section { padding: var(--t-sp-6) 0 0; }

/* — headings — everything in Inter, weight and size carry the hierarchy. — */
.t-h1, .t-h2, .t-cta-title { text-wrap: balance; }
.t-h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(44px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -0.024em;
  margin: 0; color: var(--color-text); max-width: 12ch;
}
/* Every title carries one accented phrase in a slow-moving gradient.
   Inline (not inline-block) so a multi-word phrase can still wrap; each
   line fragment gets its own copy of the gradient.

   The solid accent-300 below is the real declaration, not a token
   fallback: it is the gradient's own resting tone, so a browser that
   cannot clip a background to glyphs still gets the phrase in the right
   color at full strength. The gradient is layered on top only inside
   @supports — without that guard, -webkit-text-fill-color: transparent
   (supported far more widely than background-clip: text) would empty the
   glyphs out in exactly the browsers that cannot refill them. */
.t-h1-accent {
  display: inline; color: var(--color-accent-300);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-h1-accent {
    /* accent-400 is the base tone and the floor, with a highlight that
       travels up to accent-200 and back. The phrase used to dip to
       --color-accent — 5.5:1 on the page ground, against 14.5:1 for the
       white words beside it — for a quarter of every loop, which is what
       read as faded; the floor is now 8.6:1. Pulling every stop up into
       accent-200/100 instead fixed the dimness but cost the phrase its
       colour, so the ramp keeps its centre of gravity on the lavender.
       Starts and ends on the same tone, sized to three widths, so one
       period shifts without a seam. */
    background-image: linear-gradient(90deg,
      var(--color-accent-400) 0%, var(--color-accent-300) 25%, var(--color-accent-400) 50%,
      var(--color-accent-200) 75%, var(--color-accent-400) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: t-h1-flow 9s linear infinite;
  }
}
/* the about heading holds on one line */
.t-h2--one { max-width: none; }
@media (min-width: 700px) { .t-h2--one { white-space: nowrap; } }
@keyframes t-h1-flow { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }
.t-h2 {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 3vw, 40px);
  line-height: 1.16; letter-spacing: -0.014em; margin: 0; color: var(--color-text);
  max-width: 22ch;
}
.t-h2--sm { font-size: clamp(23px, 2.2vw, 28px); }
.t-h2--center { max-width: none; text-align: center; }
.t-lede {
  font-family: var(--font-body); font-size: 16px; line-height: 1.75; margin: var(--t-sp-2) 0 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent); max-width: 56ch;
}
.t-hero-lede { font-size: 17px; line-height: 1.65; max-width: 48ch; margin-top: var(--t-sp-3); }

/* — shared rounded surface panel: the hero body and the closing CTA both
   sit in this — the page's two bookends, deliberately echoing each
   other. — */
.t-panel {
  position: relative;
  border-radius: var(--t-radius-ui);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 55%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--color-bg) 40%, var(--color-surface)) 0%,
      var(--color-surface) 60%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-neutral-800));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 60px -30px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(0, 0, 0, .25);
}

/* — glass panel: translucent surface over whatever sits behind it (the
   hero video), frosted with backdrop-filter, a light inner edge on top. — */
.t-panel--glass {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--color-surface) 58%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 62%, transparent) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 40px 90px -40px rgba(0, 0, 0, .9);
}

/* — moving outline: two soft highlights (one accent, one white) travel
   slowly around the panel edge. The pseudo-element paints a conic
   gradient and is masked to a 1px ring, so only the border carries
   color. It never stops; under reduced motion it holds still. — */
@property --t-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.t-panel--glow::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--t-angle),
    transparent 0deg,
    color-mix(in srgb, var(--color-accent) 75%, transparent) 40deg,
    transparent 95deg,
    transparent 200deg,
    rgba(255, 255, 255, .55) 235deg,
    transparent 290deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: t-ring 14s linear infinite;
}
@keyframes t-ring { to { --t-angle: 360deg; } }

/* — filled accent CTA on this page: the shared outline .btn-primary
   stays outline everywhere else; here the two primary actions get a
   gradient fill and a hover sheen so they carry real weight. — */
.t-page .btn-primary, .t-footer .btn-primary {
  color: #fff; border-color: transparent; position: relative; overflow: hidden;
  min-height: 44px; padding: 10px 20px; font-weight: 600;
  background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-700) 100%);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--color-accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform var(--t-dur-fast) var(--t-ease-out), box-shadow var(--t-dur-fast) ease;
}
.t-page .btn-primary::after, .t-footer .btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--t-ease-out);
}
.t-page .btn-primary:hover, .t-footer .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.t-page .btn-primary:hover::after, .t-footer .btn-primary:hover::after { transform: translateX(120%); }
.t-page .btn-ghost { min-height: 44px; padding: 10px 12px; }

/* — hero — */
.t-hero { position: relative; padding: var(--t-sp-5) 0 var(--t-sp-5); overflow: clip; }
.t-hero-bg { position: absolute; inset: -10% 0; z-index: -1; overflow: hidden; }
.t-hero-bg img, .t-hero-bg video {
  /* rendered at half size and scaled back up: the blur runs on a quarter
     of the pixels every frame for the same visual result */
  position: absolute; left: 25%; top: 25%; width: 50%; height: 50%;
  object-fit: cover; object-position: 50% 50%;
  transform: scale(2.4); will-change: transform;
  /* barely softened — the network footage is already abstract; the glass
     panel does the frosting where the copy needs it */
  filter: blur(1.5px) saturate(1.1) brightness(.8);
}
.t-hero-bg::after {
  /* loose radial vignette: the footage stays clearly visible around the
     panel and only fades at the section's edges */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 90% at 50% 45%, transparent 0%, color-mix(in srgb, var(--color-bg) 45%, transparent) 76%, var(--color-bg) 100%),
    linear-gradient(180deg, var(--color-bg) 0%, transparent 16%, transparent 86%, var(--color-bg) 100%);
}

/* — the card follows the reference layout: kicker, then headline left /
   lede + actions right, then a rule and a row of the five workflow tags.
   Measured, not full-bleed: 1080px so the footage frames it on both
   sides. As the page scrolls past, the card lifts and fades (test.js). */
.t-hero-panel { max-width: 1080px; margin: 0 auto; padding: clamp(32px, 3.6vw, 48px) clamp(32px, 4vw, 52px); will-change: transform, opacity; }
.t-hero-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--t-sp-4);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-2);
}
.t-hero-kicker-mark { display: inline-flex; align-items: center; gap: 10px; }
.t-hero-kicker-mark::before { content: ""; width: 7px; height: 7px; background: var(--color-accent); transform: rotate(45deg); border-radius: 1px; }
.t-hero-kicker-mark::after { content: ""; width: 28px; height: 1px; background: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.t-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: var(--t-sp-4) clamp(32px, 4vw, 64px); align-items: end;
}
.t-hero-aside { padding-bottom: 6px; }
.t-hero-aside .t-hero-lede { margin-top: 0; max-width: 44ch; }
.t-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: var(--t-sp-4); }
/* — the five workflow chips: each one lights up in turn on an 8s loop
   (five 1.6s beats, set by nth-child delays), so the row reads as a
   live index of what the page covers. Hovering the row stops the loop
   and the hovered chip takes the same highlight. — */
.t-hero-foot {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin-top: var(--t-sp-5); padding-top: var(--t-sp-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.t-hero-foot a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500; text-decoration: none; letter-spacing: .01em;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: color var(--t-dur-fast) ease, background-color var(--t-dur-fast) ease, border-color var(--t-dur-fast) ease, box-shadow var(--t-dur-fast) ease;
  animation: t-chip-cycle 8s ease-in-out infinite;
}
.t-hero-foot a:nth-child(2) { animation-delay: 1.6s; }
.t-hero-foot a:nth-child(3) { animation-delay: 3.2s; }
.t-hero-foot a:nth-child(4) { animation-delay: 4.8s; }
.t-hero-foot a:nth-child(5) { animation-delay: 6.4s; }
.t-hero-foot a span { color: var(--color-accent); font-weight: 700; }
.t-hero-foot:hover a { animation: none; }
.t-hero-foot a:hover, .t-hero-foot a:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
@keyframes t-chip-cycle {
  0%, 24%, 100% {
    color: color-mix(in srgb, var(--color-text) 76%, transparent);
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 transparent;
  }
  5%, 17% {
    color: #fff;
    background-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}
@media (max-width: 900px) {
  .t-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .t-hero-aside { padding-bottom: 0; }
  .t-hero { padding: var(--t-sp-5) 0 var(--t-sp-4); }
}

/* — plain photo frame: sharp-edged, deliberately distinct from the
   rounded UI panels above. — */
.t-photo-frame {
  position: relative; border-radius: var(--t-radius-photo); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-divider));
}
/* The photos ship as <picture> (WebP + JPEG). Without this the inline
   <picture> box sits between the frame and the image, and the image's
   height: 100% resolves against an auto-height parent instead of the
   frame's aspect ratio. display:block + 100% is used rather than
   display:contents so the frame does not depend on that support. */
.t-photo-frame picture { display: block; width: 100%; height: 100%; }
.t-photo-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--t-ease-out);
}
.t-photo-frame::after {
  /* a foot of the page's own indigo so photos sit in the ground instead
     of floating as bright rectangles */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-section) 55%, transparent) 100%);
}
.t-workflow:hover .t-photo-frame img { transform: scale(1.06); }
.t-photo-frame--wide { aspect-ratio: 16 / 10; }

/* — tinted zone bands: stats and testimonials share the same indigo
   "proof" gradient — a paired rhythm device. — */
.t-zone { background: linear-gradient(115deg, color-mix(in srgb, var(--color-section-glow) 55%, var(--color-section)) 0%, var(--color-section) 55%); }

/* — live zone: the stats band's gradient drifts continuously. Two
   layers: an oversized multi-stop gradient that pans, and two soft
   accent glows that orbit on a longer period, so the motion never
   visibly repeats. Static under reduced motion. — */
.t-zone--live {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(115deg,
      var(--color-accent-700) 0%,
      var(--color-section) 30%,
      var(--color-section-glow) 55%,
      var(--color-section) 78%,
      color-mix(in srgb, var(--color-accent-700) 60%, var(--color-section)) 100%);
  background-size: 300% 300%;
  animation: t-gradient-pan 14s var(--t-ease-inout) infinite alternate;
}
.t-zone--live::before,
.t-zone--live::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  filter: blur(70px); opacity: .85; will-change: transform;
}
.t-zone--live::before {
  left: -18%; top: -40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 75%, transparent) 0%, transparent 60%);
  animation: t-orbit-a 22s var(--t-ease-inout) infinite alternate;
}
.t-zone--live::after {
  right: -22%; bottom: -55%;
  background: radial-gradient(circle, var(--color-section-ghost) 0%, transparent 60%);
  animation: t-orbit-b 28s var(--t-ease-inout) infinite alternate;
}
@keyframes t-gradient-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes t-orbit-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28vw, 30%) scale(1.25); }
}
@keyframes t-orbit-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-30vw, -40%) scale(.9); }
}

/* — stats band — each figure is a small stage: a breathing accent glow
   behind the numeral, a bar that draws to the figure's value after the
   count-up (test.js), a pointer spotlight and a lift on hover. — */
.t-stats-band { padding: var(--t-sp-6) 0; }
.t-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--t-sp-4) var(--t-sp-3); }
.t-stat {
  position: relative; isolation: isolate; padding: var(--t-sp-3) var(--t-sp-3) var(--t-sp-3) 0;
  --mx: 50%; --my: 50%;
  transition: transform var(--t-dur-base) var(--t-ease-out);
}
.t-stat:hover { transform: translateY(-3px); }
.t-stat::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none; opacity: 0;
  border-radius: var(--t-radius-ui);
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255,255,255,.09), transparent 62%);
  transition: opacity var(--t-dur-base) ease;
}
.t-stat:hover::before { opacity: 1; }
.t-stat-glow {
  position: absolute; z-index: -1; left: -30px; top: -18px; width: 180px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 70%, transparent) 0%, transparent 65%);
  filter: blur(26px); opacity: .5; pointer-events: none;
  animation: t-breathe 7s var(--t-ease-inout) infinite alternate;
}
.t-stat:nth-child(2) .t-stat-glow { animation-delay: -1.8s; }
.t-stat:nth-child(3) .t-stat-glow { animation-delay: -3.6s; }
.t-stat:nth-child(4) .t-stat-glow { animation-delay: -5.4s; }
@keyframes t-breathe {
  from { opacity: .35; transform: scale(.9) translate(0, 0); }
  to   { opacity: .7;  transform: scale(1.15) translate(14px, 6px); }
}
.t-stat-bar {
  display: block; height: 3px; width: 100%; max-width: 168px; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, #fff 0%, var(--color-accent-300) 40%, var(--color-accent) 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 65%, transparent);
  transform-origin: left; transform: scaleX(1);
}
.t-stat-num {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 4vw, 60px);
  line-height: 1; margin: 0; font-feature-settings: 'tnum' 1;
  color: #fff;
  display: inline-block;
}
/* gradient ink: white into the accent's pale tint, so the numbers read as
   lit rather than flat. Guarded like .t-h1-accent — the plain white above
   is what a browser without glyph-clipped backgrounds keeps. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-stat-num {
    background-image: linear-gradient(180deg, #fff 30%, var(--color-accent-300) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.t-stat-label {
  font-size: 12.5px; letter-spacing: .02em;
  color: color-mix(in srgb, #fff 72%, transparent); margin: var(--t-sp-1) 0 0;
}

/* — problem quadrant: four PARALLEL issues, not a sequence — hairline
   dividers instead of numbered rows. Each cell carries a pointer-tracked
   spotlight (test.js sets --mx/--my) and its mark stretches into a rule
   on hover, so the grid answers the cursor without becoming a card. — */
.t-quadrant {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: var(--t-sp-4); border-top: 1px solid var(--color-divider);
}
.t-problem {
  position: relative; overflow: hidden;
  padding: var(--t-sp-4) var(--t-sp-4) var(--t-sp-4) 0; border-bottom: 1px solid var(--color-divider);
  --mx: 50%; --my: 50%;
}
.t-problem::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 62%);
  transition: opacity var(--t-dur-base) ease;
}
.t-problem:hover::before { opacity: 1; }
.t-quadrant .t-problem:nth-child(odd) { border-right: 1px solid var(--color-divider); padding-right: var(--t-sp-4); }
.t-quadrant .t-problem:nth-child(even) { padding-left: var(--t-sp-4); }
.t-problem-mark {
  display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent);
  transform: rotate(45deg); transform-origin: 0 50%; margin: 0 0 var(--t-sp-2) 2px;
  transition: transform var(--t-dur-base) var(--t-ease-out);
}
/* transform-only (no width animation): the mark unrotates and stretches
   into a short rule on the compositor thread */
.t-problem:hover .t-problem-mark { transform: rotate(0deg) scaleX(5) scaleY(.4); }
.t-problem-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text); margin: 0 0 8px; position: relative; }
.t-problem-body { font-size: 15px; line-height: 1.72; margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); position: relative; }
@media (max-width: 700px) {
  .t-quadrant { grid-template-columns: 1fr; }
  .t-quadrant .t-problem { padding: var(--t-sp-3) 0 !important; border-right: none !important; }
}

/* — workflow grid: the five things we automate, each grounded in a real
   photograph with its own caption (3-up, then 2-up). Each card is a tilt
   target (test.js): the photo face rotates toward the pointer and a
   glare sweeps across it, so the grid reads as physical, not flat. — */
.t-workflow-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t-sp-4) var(--t-sp-4);
  margin-top: var(--t-sp-4);
}
.t-workflow-title { font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; color: var(--color-text); margin: var(--t-sp-3) 0 8px; }
.t-workflow-body { font-size: 14.5px; line-height: 1.7; margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); }
@media (max-width: 900px) { .t-workflow-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .t-workflow-grid { grid-template-columns: 1fr; } }

/* — tilt utilities (shared by workflow cards and the product mockup) —
   the wrapper supplies perspective; the face is what test.js rotates;
   the glare is a highlight that follows the pointer across the face. */
.t-tilt { perspective: var(--t-tilt-perspective); }
.t-tilt-face {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transition: box-shadow var(--t-dur-base) ease;
}
.t-tilt:hover .t-tilt-face { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }
.t-tilt-glare {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  --gx: 50%; --gy: 50%;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .22), transparent 58%);
  mix-blend-mode: screen; transition: opacity var(--t-dur-base) ease;
}
.t-tilt:hover .t-tilt-glare { opacity: 1; }

/* — timeline: three CHRONOLOGICAL phases. On desktop the section pins
   while the rule draws across and each phase settles in as you scroll
   (test.js); on touch/narrow screens it is a plain vertical list. — */
.t-process { padding-bottom: var(--t-sp-5); }
.t-process-pin { position: relative; }
.t-timeline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t-sp-4) var(--t-sp-4);
  margin-top: var(--t-sp-5); position: relative;
}
.t-timeline-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 35%, transparent));
  transform-origin: left; transform: scaleX(1);
}
.t-phase { position: relative; padding-top: var(--t-sp-3); }
.t-phase::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--color-accent); }
.t-phase-num { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-accent); margin: 0 0 10px; font-feature-settings: 'tnum' 1; }
.t-phase-when { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-top: 4px; }
.t-phase-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; margin: 0 0 8px; color: var(--color-text); }
.t-phase-body { font-size: 15px; line-height: 1.75; margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); }
.t-process-link { margin-top: var(--t-sp-5); }
@media (max-width: 800px) {
  .t-timeline { grid-template-columns: 1fr; gap: var(--t-sp-4); }
  .t-timeline-rule { display: none; }
  .t-phase { padding-top: 0; padding-left: var(--t-sp-3); border-left: 1px solid var(--color-divider); }
  .t-phase::before { top: 6px; left: -1px; width: 3px; height: 20px; }
}

/* — split (implement section): text + product mockup. The mockup idles
   in a slow 3D loop (test.js) inside a perspective stage. — */
.t-split {
  display: grid; grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
  gap: var(--t-sp-4) clamp(32px, 6vw, 100px); align-items: center;
  padding: var(--t-sp-6) 0 var(--t-sp-6);
}
.t-tilt-stage { perspective: var(--t-tilt-perspective); }
.t-tilt-loop { transform-style: preserve-3d; will-change: transform; }
@media (max-width: 900px) { .t-split { grid-template-columns: 1fr; padding-bottom: var(--t-sp-5); } }

/* — testimonials: three centered quotes in the tinted zone — */
.t-testimonials { padding: var(--t-sp-6) 0; }
.t-quote-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t-sp-4);
  margin-top: var(--t-sp-5);
}
.t-quote {
  margin: 0; text-align: center; padding: var(--t-sp-4) var(--t-sp-3) var(--t-sp-4);
  border-radius: var(--t-radius-ui);
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  position: relative; transform-origin: 50% 100%;
}
.t-quote-mark {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 64px; line-height: .6;
  margin: 0 0 var(--t-sp-2); color: var(--color-accent-300);
}
.t-quote blockquote {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -0.005em;
  margin: 0 auto; color: #fff; max-width: 34ch;
}
.t-quote figcaption {
  font-size: 13px; line-height: 1.5; margin: var(--t-sp-3) 0 0; color: #fff;
  font-weight: 600;
}
.t-quote figcaption span { font-weight: 400; color: color-mix(in srgb, #fff 62%, transparent); }
@media (max-width: 900px) { .t-quote-grid { grid-template-columns: 1fr; gap: var(--t-sp-2); } }

/* — about: credentials as the shared .tag-outline component — */
.t-credentials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--t-sp-3); }

/* — centered sections (about, closing panel): every block inside is
   centered on the same axis, with measure kept by max-widths — */
.t-centered { text-align: center; }
.t-centered .t-h2, .t-centered .t-cta-title, .t-centered .t-lede { margin-left: auto; margin-right: auto; }
.t-centered .t-h2:not(.t-h2--one) { max-width: 24ch; }
.t-centered .t-credentials, .t-centered .t-hero-actions { justify-content: center; }

/* — CTA: mirrors .t-panel, same rounded surface as the hero — */
.t-cta { padding: var(--t-sp-6) 0 var(--t-sp-5); }
.t-cta-panel { padding: clamp(36px, 5vw, 64px); }
.t-cta-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -0.014em; margin: 0; color: var(--color-text); max-width: 24ch; }

/* — footer (expanded on this page only; footer.php guards the markup) — */
.t-footer { display: block; padding: var(--t-sp-6) 0 var(--t-sp-5); }
.t-footer-grid {
  display: grid; grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap: var(--t-sp-5) var(--t-sp-5);
}
.t-footer-brand-col .btn { margin-top: var(--t-sp-4); }
.t-footer-blurb { font-size: 14.5px; line-height: 1.7; max-width: 34ch; margin: var(--t-sp-3) 0 0; color: color-mix(in srgb, var(--color-text) 66%, transparent); }
/* gap drops 14px → 10px as the links gain 4px of hit height below, so the
   row pitch — and the column's visual rhythm — is unchanged. */
.t-footer-col { display: flex; flex-direction: column; gap: 10px; }
.t-footer-heading { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; margin: 0 0 10px; color: var(--color-text); }
.t-footer-col a {
  font-size: 14.5px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 70%, transparent);
  text-decoration: none; transition: color var(--t-dur-fast) ease;
  display: flex; align-items: center; min-height: 24px;  /* WCAG 2.2 target size */
}
.t-footer-col a:hover { color: var(--color-accent); }
.t-footer-note { font-size: 13px; line-height: 1.5; margin: 10px 0 0; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.t-footer-bottom {
  display: flex; justify-content: space-between; gap: var(--t-sp-2) var(--t-sp-4); flex-wrap: wrap;
  margin-top: var(--t-sp-6); padding-top: var(--t-sp-4); border-top: 1px solid var(--color-divider);
}
@media (max-width: 900px) { .t-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--t-sp-5) var(--t-sp-4); } }
@media (max-width: 560px) { .t-footer-grid { grid-template-columns: 1fr; gap: var(--t-sp-5); } .t-footer { padding-top: var(--t-sp-5); } }

/* — dashboard-card text-size floor —
   The mockup itself is main.css's shared component (also used on the live
   Services page); scoped here only to bring its 10–10.5px labels up to the
   11px functional-text floor on this page. */
.t-page .dashboard-tile-label,
.t-page .dashboard-chart-label,
.t-page .dashboard-table-head,
.t-page .dashboard-tile-delta { font-size: 11px; }

/* — dashboard-card glow removal — same shared-component scoping. — */
.t-page .dashboard-bar--accent,
.t-page .dashboard-bar-fill--accent,
.t-page .dashboard-note-dot { box-shadow: none; }

/* — reduced motion: every continuous or pointer-driven effect stops;
   scroll-driven states render finished (test.js also skips its tweens). */
@media (prefers-reduced-motion: reduce) {
  .t-zone--live, .t-zone--live::before, .t-zone--live::after, .t-panel--glow::before, .t-stat-glow,
  .t-h1-accent, .t-hero-foot a, .logo-bar { animation: none; }
  .t-hero-foot a { transition: none; }
  .t-stat { transition: none; }
  .t-photo-frame img, .t-page .btn-primary::after { transition: none; }
  .t-tilt-face, .t-tilt-loop { transform: none !important; }
  .t-tilt-glare, .t-problem::before { display: none; }
  .t-problem-mark { transition: none; }
}