/* ============================================================
   FutureAITechX — motion layer (premium interactions)
   Loaded LAST (after style.css / site.css / tools.css / news.css).
   Principles:
   - Transforms + opacity only (compositor-friendly; no layout shifts).
   - Entrance animations are CSS keyframes that start immediately —
     they never depend on JS, and if CSS animations are unavailable
     every element simply shows in its natural state.
   - States that HIDE content (scroll reveals) stay gated behind
     html.js-anim, which js/motion.js adds only when the observer
     exists — no-JS visitors always get the full content.
   - prefers-reduced-motion: the global .01ms override in
     animations.css disarms everything here; extra static fallbacks
     are noted per section.
   ============================================================ */

/* ---------------- 1. Homepage hero — glass panel + 3D blob ---------------- */
.hx { isolation: isolate; }
.hx-scene {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.hx-orb-wrap { position: absolute; inset: 0; will-change: transform; }
.hx-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  will-change: transform;
}
.hx-orb-a {
  width: 640px; height: 480px; left: -8%; top: -32%;
  background: radial-gradient(closest-side, rgba(64, 110, 255, .5), transparent 72%);
  animation: hx-drift 13s ease-in-out infinite alternate;
}
.hx-orb-b {
  width: 560px; height: 500px; right: -10%; bottom: -38%;
  background: radial-gradient(closest-side, rgba(124, 74, 255, .42), transparent 72%);
  animation: hx-drift 16s ease-in-out -5s infinite alternate-reverse;
}
@keyframes hx-drift {
  from { transform: translate3d(0, -14px, 0) scale(1); }
  to   { transform: translate3d(30px, 18px, 0) scale(1.07); }
}
[data-hero-scene] { position: absolute; inset: 0; }

/* The glass panel that carries the whole hero (reference: rounded card on a
   dark gradient stage). Content sits on a translucent navy gradient with a
   hairline border and a soft outer shadow. */
.hx-panel {
  position: relative;
  margin-top: 8px;
  border-radius: 28px;
  border: 1px solid rgba(148, 168, 226, .22);
  background:
    radial-gradient(900px 480px at 88% -20%, rgba(80, 120, 255, .20), transparent 62%),
    radial-gradient(700px 480px at 4% 110%, rgba(124, 74, 255, .26), transparent 60%),
    linear-gradient(168deg, rgba(15, 24, 54, .86), rgba(6, 11, 28, .68));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow:
    0 60px 120px -50px rgba(1, 4, 16, .9),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  padding: 52px 54px 0;
  overflow: hidden;
  animation: hx-panel-in .95s cubic-bezier(.22, .8, .3, 1) backwards;
}
@keyframes hx-panel-in {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.hx .hx-grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 36px; align-items: center;
  padding-bottom: 40px;
}
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-on-navy);
}
.hx-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-on-navy); box-shadow: 0 0 0 4px rgba(141, 176, 255, .18); }
.hx h1 { font-size: clamp(2.4rem, 4.3vw, 3.45rem); line-height: 1.06; letter-spacing: -.035em; margin-top: 18px; font-weight: 800; color: var(--on-navy); }
.hx h1 .hw {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .08em; margin-bottom: -.08em; /* keep descenders (y, g) inside the mask */
  /* Neutralise the generic `.hx h1 span` gradient from site.css (it would
     otherwise match every .hw/.hwi span) — the gradient is re-applied
     per-word on .grad .hwi below. */
  background: none; -webkit-text-fill-color: initial; color: inherit;
}
.hx h1 .hw .hwi {
  display: inline-block;
  animation: hw-in .62s cubic-bezier(.2, .75, .25, 1) backwards;
  animation-delay: calc(220ms + var(--wi, 0) * 55ms);
  will-change: transform, opacity;
}
@keyframes hw-in {
  from { opacity: 0; transform: translateY(.72em) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}
.hx h1 .hw.grad .hwi {
  background: linear-gradient(92deg, #8db0ff 0%, #b9a6ff 55%, #e08bd8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #a8b8ff;
}
.hx-sub { color: var(--on-navy-soft); font-size: 1.1rem; line-height: 1.65; max-width: 540px; margin-top: 20px; }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hx-quick { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 26px; font-size: .88rem; }
.hx-quick span { color: var(--on-navy-faint); }
.hx-quick a { color: var(--on-navy-soft); border-bottom: 1px solid var(--navy-line-strong); padding-bottom: 1px; }
.hx-quick a:hover { color: var(--on-navy); border-color: var(--accent-on-navy); }

/* Entrance sequence — pure CSS, `backwards` fill (content simply shows if
   animations never run). Delays are short to keep the H1 painting early. */
.hx-eyebrow { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .12s backwards; }
.hx-sub     { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .58s backwards; }
.hx-ctas    { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .7s backwards; }
.hx-quick   { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .82s backwards; }
@keyframes hx-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* The 3D iridescent blob stage (right column). */
.hx-blob { position: relative; min-height: 440px; height: 100%; }
.hx-blob-glow {
  position: absolute; inset: 6% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 70, 255, .34), rgba(64, 110, 255, .14) 55%, transparent 75%);
  filter: blur(26px);
}
.hx-blob [data-hero-scene] { z-index: 1; }
.hx-blob .hx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; transition: opacity 1.2s ease .2s;
}
.hx-blob .hx-canvas.on { opacity: 1; }

/* Floating glass tool chips around the blob — real links to verified
   profiles, gently floating; hidden on small viewports. */
.hx-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px; border-radius: 999px;
  border: 1px solid rgba(148, 168, 226, .32);
  background: linear-gradient(150deg, rgba(20, 34, 74, .78), rgba(8, 15, 36, .62));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(2, 8, 24, .85), inset 0 1px 0 rgba(255, 255, 255, .09);
  color: var(--on-navy); font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  animation: hx-chip-in .9s cubic-bezier(.22, .8, .3, 1) backwards, hx-bob 7s ease-in-out infinite;
  transition: border-color .25s, transform .25s var(--ease);
}
.hx-chip:hover { border-color: rgba(141, 176, 255, .6); transform: translateY(-3px); }
.hx-chip-logo {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; display: inline-grid; place-items: center; flex: 0 0 auto;
}
.hx-chip-logo img { position: absolute; inset: 3px; width: 20px; height: 20px; object-fit: contain; border-radius: 50%; background: #fff; }
.hx-chip-1 { left: 2%; top: 12%; animation-delay: 1.05s, calc(1.05s + 0s); }
.hx-chip-2 { right: 0%; top: 42%; animation-delay: 1.25s, calc(1.25s + 1.4s); }
.hx-chip-3 { left: 7%; bottom: 6%; animation-delay: 1.45s, calc(1.45s + .7s); }
.hx-chip-4 { right: 9%; top: 5%; animation-delay: 1.65s, calc(1.65s + 2s); }

/* Floating glass stat cards around the holographic core — real numbers,
   whole card links, gentle float. Flow into a 2×2 grid on mobile. */
.hx-stat {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px 9px; border-radius: 11px;
  border: 1px solid rgba(148, 168, 226, .3);
  background: linear-gradient(150deg, rgba(20, 34, 74, .78), rgba(8, 15, 36, .64));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 32px -16px rgba(2, 8, 24, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: hx-chip-in .9s cubic-bezier(.22, .8, .3, 1) backwards, hx-bob 7.5s ease-in-out infinite;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.hx-stat:hover {
  border-color: rgba(141, 176, 255, .6);
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -18px rgba(2, 8, 24, .95);
}
.hx-stat b { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hx-stat span { font-size: .63rem; color: var(--on-navy-soft); line-height: 1.25; max-width: 128px; }
.hx-stat-tag {
  font-family: var(--font-head); font-size: .53rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-on-navy); margin-bottom: 2px;
}
.hx-stat-1 { left: -3%; top: 4%; animation-delay: 1.05s, calc(1.05s + 0s); }
.hx-stat-2 { right: -4%; top: 30%; animation-delay: 1.25s, calc(1.25s + 1.4s); }
.hx-stat-3 { right: 3%; bottom: -2%; animation-delay: 1.45s, calc(1.45s + .7s); }
.hx-stat-4 { left: 2%; bottom: 8%; animation-delay: 1.65s, calc(1.65s + 2s); }
@media (max-width: 1180px) {
  .hx-stat-1 { left: 0; } .hx-stat-2 { right: 0; } .hx-stat-3 { right: 0; }
}
@keyframes hx-chip-in {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes hx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (max-width: 1180px) { .hx-chip { display: none; } }

/* Closing call-to-action band. */
.final-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(820px 420px at 16% 0%, rgba(64, 110, 255, .22), transparent 60%),
    radial-gradient(720px 460px at 88% 100%, rgba(124, 74, 255, .24), transparent 62%),
    var(--navy-900);
  border-top: 1px solid var(--navy-line);
  padding: 72px 0 76px;
  color: var(--on-navy);
}
.final-cta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 300px at 50% 55%, rgba(96, 120, 255, .12), transparent 70%);
}
.final-cta .container { position: relative; }
.final-cta-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  border-radius: 26px; border: 1px solid rgba(148, 168, 226, .22);
  background: linear-gradient(168deg, rgba(15, 24, 54, .8), rgba(6, 11, 28, .6));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 50px 110px -50px rgba(1, 4, 16, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  padding: 46px 40px 44px;
}
.final-cta-card h2 {
  color: var(--on-navy); font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -.03em; margin-top: 12px; font-weight: 800;
}
.final-cta-card p { color: var(--on-navy-soft); font-size: 1.05rem; line-height: 1.65; max-width: 560px; margin: 14px auto 0; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
@media (max-width: 640px) { .final-cta-card { padding: 34px 22px 32px; } }

/* ---------------- 14. Site-wide themed scenes (js/scene-kit.js) ---------------- */
/* Mounts sit in the right half of each page hero, behind the copy, fading in
   once the scene is live. Hidden on small viewports and reduced motion —
   those keep the CSS gradient treatment (the lightweight experience). */
.cat-hero, .article-top, .page-hero { position: relative; }
.cat-hero { overflow: hidden; }
.cat-scene, .article-scene, .page-scene {
  position: absolute; top: 0; right: 0; width: 54%; max-width: 640px; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease .25s;
}
.cat-scene .scene-canvas, .article-scene .scene-canvas, .page-scene .scene-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s ease .1s;
}
.cat-scene .scene-canvas.on, .article-scene .scene-canvas.on, .page-scene .scene-canvas.on { opacity: 1; }
.cat-scene.on, .article-scene.on, .page-scene.on { opacity: 1; }
/* Article headers: the scene hugs the edge and stays faint — reading first. */
.article-scene {
  width: 40%; right: -60px; opacity: 0;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 70% 50%, #000 30%, transparent 100%);
}
.article-scene.on { opacity: .5; }
@media (max-width: 900px) {
  .cat-scene, .article-scene, .page-scene { display: none; }
}

/* ---------------- 15. "Trending" band + premium category cards ----------------
   The directory's category chip wall, upgraded to the design system:
   glass band, gradient count in the title, tilt-lift chip cards with
   count badges, scroll-staggered reveals (motion.js staggers .reveal
   siblings automatically). */
.trend-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 260px at 8% 0%, rgba(64, 110, 255, .07), transparent 62%),
    radial-gradient(460px 240px at 96% 100%, rgba(124, 74, 255, .08), transparent 62%),
    var(--card);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
  margin-bottom: 22px;
}
.trend-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.028em; margin-top: 10px; }
.trend-title .trend-shine {
  font-style: normal;
  background: linear-gradient(92deg, var(--accent) 0%, var(--violet, #6b46e5) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.trend-sub { margin-top: 8px; max-width: 560px; }
.trend-head .btn { flex-shrink: 0; }

.trend-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.trend-chips .trend-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 11px 9px 15px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card);
  font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--text);
  transition: transform .2s var(--ease), box-shadow .25s, border-color .25s, background .25s;
  transform-style: preserve-3d;
}
.trend-chips .trend-chip .tc-n {
  font-size: .76rem; font-weight: 700; line-height: 1;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 4px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.trend-chips .trend-chip:hover {
  transform: translateY(-3px);
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(130deg, var(--accent), #7c3aed 70%, #dc2649) border-box;
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 18px 36px -18px rgba(14, 21, 38, .45);
  z-index: 2;
}
.trend-chips .trend-chip:hover .tc-n { background: var(--accent); color: #fff; }
.trend-chips .trend-chip.active {
  border-color: transparent;
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
    linear-gradient(130deg, var(--accent), var(--violet, #6b46e5)) border-box;
  background-origin: border-box; background-clip: padding-box, border-box;
}
.trend-chips .trend-chip.active .tc-label { color: var(--accent-strong, var(--accent)); }
.trend-chips .trend-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------------- 16. AI Tool Finder questionnaire (premium redesign) ----------------
   Applies to the .tfw wizard on /tools (js/tools-finder.js drives the steps;
   this layer is presentation only — all logic, labels and endpoints are the
   existing ones). Loads after site.css, so these overrides win. */
.tool-finder.tfw-host {
  max-width: 1040px; margin: 0 auto 30px;
  padding: 40px 44px 36px;
  border-radius: 22px;
  border: 1px solid rgba(120, 140, 200, .18);
  background:
    radial-gradient(700px 320px at 92% -8%, rgba(124, 74, 255, .08), transparent 60%),
    radial-gradient(560px 300px at 0% 0%, rgba(64, 110, 255, .07), transparent 55%),
    linear-gradient(175deg, #f6f8ff 0%, #eef2fc 55%, #f4f6fd 100%);
  box-shadow: 0 30px 70px -40px rgba(14, 21, 38, .35);
}
.tool-finder.tfw-host > h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.025em; margin: 0;
}
.tfw-intro { margin-top: 10px; max-width: 780px; line-height: 1.65; font-size: .98rem; }

/* Progress: gradient bar + clear step readout. */
.tfw-progress { gap: 14px; margin: 26px 0 22px; }
.tool-finder .tfw-bar {
  flex: 1 1 240px; max-width: 300px; height: 8px;
  background: rgba(64, 110, 255, .12);
  box-shadow: inset 0 1px 2px rgba(14, 21, 38, .08);
}
.tool-finder .tfw-bar-fill {
  background: linear-gradient(90deg, var(--accent) 0%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(64, 110, 255, .45);
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
}
.tfw-progress-label { font-weight: 600; color: var(--text); font-size: .9rem; }

/* Question heading: blue circular step number, no boxy outlines. The step
   legend is focused programmatically on every step change — the ring shows
   only for keyboard users (focus-visible), never after mouse clicks. */
.tfw-step legend {
  display: flex; align-items: center; font-size: 1.14rem; letter-spacing: -.01em;
  padding: 0; margin: 0 0 4px;
}
.tool-finder .tfw-step legend:focus { outline: none; }
.tool-finder .tfw-step legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.tool-finder .tfw-stepnum {
  width: 30px; height: 30px; margin-right: 11px; font-size: .92rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, #6b46e5 100%);
  box-shadow: 0 4px 12px -4px rgba(64, 110, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tfw-hint { margin-left: 41px; color: var(--muted); }

/* Category option cards: 4 / 2 / 1 columns, equal heights, whole card
   clickable via the wrapping label (existing markup). */
.tool-finder .tfw-opts {
  grid-template-columns: repeat(4, 1fr); gap: 12px; margin-left: 41px;
}
.tool-finder .tfw-opts-radios { grid-template-columns: repeat(4, 1fr); }
.tool-finder .tfw-opt {
  height: 100%; box-sizing: border-box; align-items: center;
  gap: 10px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(120, 140, 200, .28); background: #fff;
  font-size: .93rem; line-height: 1.4;
  transition: transform .18s var(--ease), box-shadow .22s, border-color .2s, background .2s;
}
.tool-finder .tfw-opt > span { flex: 1; min-width: 0; }
.tool-finder .tfw-opt:hover {
  transform: translateY(-2px);
  border-color: rgba(64, 110, 255, .55);
  box-shadow: 0 12px 26px -16px rgba(14, 21, 38, .4);
}
.tool-finder .tfw-opt:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(175deg, rgba(64, 110, 255, .1), rgba(124, 74, 255, .07));
  box-shadow: 0 0 0 1px var(--accent), 0 10px 24px -16px rgba(64, 110, 255, .5);
}
.tool-finder .tfw-opt input { width: 17px; height: 17px; flex: 0 0 auto; }
.tool-finder .tfw-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Continue / Back buttons. */
.tool-finder .tfw-actions { margin: 24px 0 0 41px; display: flex; gap: 12px; }
.tool-finder .tfw-actions .btn { border-radius: 12px; }
.tool-finder [data-tfw-next],
.tool-finder [data-tfw-find] {
  background: linear-gradient(135deg, var(--accent) 0%, #5b3ee0 100%);
  box-shadow: 0 12px 26px -12px rgba(64, 110, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tool-finder [data-tfw-next]:hover,
.tool-finder [data-tfw-find]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(64, 110, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .2);
  filter: brightness(1.05);
}
.tool-finder [data-tfw-next]:active,
.tool-finder [data-tfw-find]:active { transform: translateY(0) scale(.98); }
.tool-finder [data-tfw-back] { color: var(--muted); }

/* "How to choose" — separated by the existing divider, better typography. */
.tfw-how-to { margin-top: 30px; border-top: 1px solid rgba(120, 140, 200, .25); padding-top: 24px; }
.tfw-how-to h3 { font-size: 1.15rem; letter-spacing: -.015em; margin: 0; }
.tfw-howto-copy { margin-top: 10px; font-size: .95rem; line-height: 1.75; color: var(--muted); max-width: 900px; }
.tfw-how-to .text-link { font-weight: 600; }
.tfw-how-to .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Responsive: 4 → 2 → 1 columns, comfortable mobile spacing. */
@media (max-width: 1100px) {
  .tool-finder .tfw-opts, .tool-finder .tfw-opts-radios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tool-finder.tfw-host { padding: 28px 24px 30px; }
  .tool-finder .tfw-opts, .tool-finder .tfw-opts-radios { margin-left: 0; }
  .tool-finder .tfw-hint { margin-left: 0; }
  .tool-finder .tfw-actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .tool-finder.tfw-host { padding: 22px 18px 26px; border-radius: 18px; }
  .tool-finder .tfw-opts, .tool-finder .tfw-opts-radios { grid-template-columns: 1fr; }
  .tool-finder .tfw-actions { flex-direction: column-reverse; }
  .tool-finder .tfw-actions .btn { width: 100%; }
  .tool-finder .tfw-progress { flex-wrap: wrap; }
}

/* Page journey layer — fixed 3D particle field floating above the homepage
   content (pointer-events none, low opacity budget so text stays legible). */
.journey-canvas {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease .3s;
}
.journey-canvas.on { opacity: 1; }

/* Publication stats — the reference's bottom metric row, real numbers. */
.hx .hx-stats {
  position: relative;
  border-top: 1px solid var(--navy-line);
  padding: 22px 0 26px;
  animation: hx-up .7s cubic-bezier(.22, .8, .3, 1) .95s backwards;
}
.hx .hx-stats b { color: var(--on-navy); }
.hx .hx-stats span { color: var(--on-navy-faint); }
/* Count-up numerals keep their width while animating (no CLS). */
.trust-row b, [data-countup] { font-variant-numeric: tabular-nums; }

/* Scroll cue at the bottom of the hero. */
.hx-scrollcue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--on-navy-faint); font-family: var(--font-head);
  font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; animation: hx-fade-in .8s ease 1.6s backwards;
}
.hx-scrollcue:hover { color: var(--accent-on-navy); }
.hx-scrollcue-track {
  width: 22px; height: 34px; border: 1.5px solid rgba(143, 156, 187, .55); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 6px;
}
.hx-scrollcue-dot {
  width: 3px; height: 7px; border-radius: 3px; background: var(--accent-on-navy);
  animation: hx-cue 1.9s ease-in-out infinite;
}
@keyframes hx-cue {
  0% { transform: translateY(0); opacity: 1; }
  62% { transform: translateY(11px); opacity: 0; }
  78% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes hx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px), (max-height: 700px) { .hx-scrollcue { display: none; } }

/* Mobile: panel stacks — copy, then the scene, with the stat cards flowing
   into a 2×2 grid beneath it (no absolute positioning on small screens). */
@media (max-width: 900px) {
  .hx { padding: 30px 0 44px; }
  .hx .hx-panel { padding: 30px 22px 0; border-radius: 22px; }
  .hx .hx-grid { grid-template-columns: 1fr; gap: 10px; padding-bottom: 26px; }
  .hx-blob { min-height: 0; height: auto; margin: 0 -6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hx-blob [data-hero-scene] { position: relative; inset: auto; height: 280px; grid-column: 1 / -1; }
  .hx-blob-glow { display: none; }
  .hx-stat { position: static; animation-name: hx-fade-in; padding: 9px 12px; }
  .hx-stat b { font-size: .98rem; }
  .hx-stat span { font-size: .66rem; max-width: none; }
}

/* ---------------- 3. Scroll reveals (upgraded) ----------------
   Hidden state stays behind html.js-anim (added by js/motion.js only
   when IntersectionObserver exists). Per-element stagger comes from
   --rd, assigned by motion.js based on position among siblings. */
html.js-anim .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22, .8, .3, 1), transform .65s cubic-bezier(.22, .8, .3, 1);
  transition-delay: var(--rd, 0s);
}
html.js-anim .reveal.visible { opacity: 1; transform: none; }
html.js-anim .reveal.d1 { transition-delay: calc(var(--rd, 0s) + .07s); }
html.js-anim .reveal.d2 { transition-delay: calc(var(--rd, 0s) + .14s); }
html.js-anim .reveal.d3 { transition-delay: calc(var(--rd, 0s) + .21s); }
/* Softer variant used for wide media blocks. */
html.js-anim .reveal-media { opacity: 0; transform: scale(.975); }
html.js-anim .reveal-media.visible { opacity: 1; transform: none; }

/* Section headers draw their accent rule when they reveal. */
.section-head, .kicker-row { position: relative; }
.section-head h2, .section-head .kicker { position: relative; z-index: 1; }

/* ---------------- 4. Tilt card depth ----------------
   tools.css owns the tilt hover chrome; here we add the layered
   depth (children lifted on Z while the card tilts). */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt] .tool-avatar, [data-tilt] .pop-av,
[data-tilt] .tool-tile-head { transform: translateZ(18px); }
[data-tilt] .tool-tile-foot, [data-tilt] .tool-tile-links { transform: translateZ(8px); }
/* Directory tiles: soften the jump between tilt-on and tilt-off. */
.tool-tile, .pop-logo { transition: transform .22s var(--ease), box-shadow .3s ease, border-color .3s ease; }

/* ---------------- 5. Tools: animated filter transitions ----------------
   js/tools.js flips cards' visibility when filters change; motion.css
   animates cards ENTERING the result set via the .swap class that
   motion.js applies on mutation. */
@keyframes tool-swap-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.tool-tile.swap, .news-card.swap, .a-card.swap { animation: tool-swap-in .5s cubic-bezier(.22, .8, .3, 1) both; animation-delay: calc(var(--rd, 0) * 1ms); }
/* Directory filter chips: smooth fill on the active state. */
.tools-chip, .filter-chip, .quick-chips a { transition: background .25s, color .25s, border-color .25s, transform .18s var(--ease), box-shadow .25s; }
.tools-chip:active, .filter-chip:active { transform: scale(.96); }

/* Tools hero search: focus glow + icon nudge. */
.tools-hero-search { transition: box-shadow .3s ease, border-color .3s ease, transform .3s var(--ease); }
.tools-hero-search:focus-within {
  border-color: rgba(141, 176, 255, .55);
  box-shadow: 0 0 0 4px rgba(64, 110, 255, .14), 0 24px 60px -30px rgba(2, 8, 30, .9);
  transform: translateY(-1px);
}
/* Live result count ticks up with a tiny pop (motion.js toggles .tick). */
@keyframes count-tick { 0% { transform: translateY(4px); opacity: .35; } 100% { transform: none; opacity: 1; } }
.count-tick { animation: count-tick .32s cubic-bezier(.22, .8, .3, 1); display: inline-block; }

/* ---------------- 6. Page hero entrances (tools, news, category, guides) ----------------
   Same contract as the homepage hero: pure CSS, `backwards` fill, short
   delays — content simply shows if animations never run. */
.page-hero .breadcrumbs { animation: hx-up .6s cubic-bezier(.22, .8, .3, 1) .04s backwards; }
.page-hero .kicker { animation: hx-up .6s cubic-bezier(.22, .8, .3, 1) .1s backwards; }
.page-hero h1 { animation: hx-up .7s cubic-bezier(.22, .8, .3, 1) .16s backwards; }
.page-hero .lead { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .28s backwards; }
.page-hero .tools-hero-stats { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .36s backwards; }
.page-hero .tools-hero-search { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .44s backwards; }
.page-hero .tools-hero-cta { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .52s backwards; }
.page-hero .tools-hero-tip { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .6s backwards; }
.page-hero .cat-hero-sub, .page-hero .hero-ctas { animation: hx-up .65s cubic-bezier(.22, .8, .3, 1) .4s backwards; }
/* The WebGL orb inside the tools hero scene fades in with the canvas. */

/* ---------------- 7. News & editorial polish ---------------- */
.story-card, .story-row, .news-card, .hero-mini, .a-card { transition: transform .28s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.story-card:hover, .story-row:hover { transform: translateY(-3px); }
.news-card .a-card-media, .story-row > a:first-child { overflow: hidden; }
.news-card .a-card-media img, .story-row > a:first-child img { transition: transform .6s cubic-bezier(.22, .8, .3, 1); }
.news-card:hover .a-card-media img, .story-row:hover > a:first-child img { transform: scale(1.045); }
/* Featured launch cards get a slow sheen across the media on hover. */
.feat-lead { position: relative; overflow: hidden; }
.feat-lead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 46%, transparent 62%);
  transform: translateX(-120%);
}
.feat-lead:hover::after { transition: transform .9s ease; transform: translateX(120%); }
/* Category nav pills: sliding active state. */
.topic-bar, .cat-nav { gap: 8px; }
.topic-bar [data-topic], .cat-nav a { transition: color .25s, background .25s, border-color .25s, transform .18s var(--ease); }
.topic-bar [data-topic]:active, .cat-nav a:active { transform: scale(.96); }

/* ---------------- 8. Navigation & microinteractions ---------------- */
/* Slide-in hover underline (the active link keeps its persistent bar). */
.main-nav a::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1), opacity .2s;
}
.main-nav a:hover::before, .main-nav a:focus-visible::before { transform: scaleX(1); opacity: .55; }
.main-nav a.active::before { display: none; }
/* Icon buttons: gentle lift + spin for theme toggle. */
.icon-btn { transition: color .2s, background .2s, border-color .2s, transform .18s var(--ease); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }
.theme-btn svg { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.theme-btn:hover svg { transform: rotate(40deg); }
/* Primary buttons: light sheen sweep. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .22) 50%, transparent 66%);
  transform: translateX(-130%) skewX(-8deg);
}
.btn:hover::after { transition: transform .7s ease; transform: translateX(130%) skewX(-8deg); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { transition: transform .18s var(--ease), box-shadow .25s, background .22s, filter .22s; }
.btn-primary:hover { filter: brightness(1.06); }
/* Header brand: subtle lift. */
.brand { transition: opacity .2s; }
.brand:hover { opacity: .92; }
.brand-mark { transition: transform .4s cubic-bezier(.22, .8, .3, 1); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
/* Mobile drawer: links cascade in when opened. */
.mobile-drawer.open .drawer-nav a {
  animation: drawer-link .42s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(60ms + min(var(--di, 0), 12) * 32ms);
}
@keyframes drawer-link {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.mobile-drawer.open .drawer-cta-btn { animation: drawer-link .42s cubic-bezier(.22, .8, .3, 1) .34s both; }
/* Search overlay: results cascade. */
.search-overlay.open .search-panel { animation: panel-in .32s cubic-bezier(.22, .8, .3, 1); }
.search-overlay .search-hit, .search-overlay .s-hit { animation: drawer-link .3s cubic-bezier(.22, .8, .3, 1) both; }
.search-overlay .search-hit:nth-child(2), .search-overlay .s-hit:nth-child(2) { animation-delay: .04s; }
.search-overlay .search-hit:nth-child(3), .search-overlay .s-hit:nth-child(3) { animation-delay: .08s; }
.search-overlay .search-hit:nth-child(4), .search-overlay .s-hit:nth-child(4) { animation-delay: .12s; }
.search-overlay .search-hit:nth-child(5), .search-overlay .s-hit:nth-child(5) { animation-delay: .16s; }

/* ---------------- 9. Section transitions & counters ---------------- */
/* Smooth anchor scrolling (scroll cue, TOC links) — the media query is the
   accessible pattern: disabled automatically under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Count-up numerals keep their width while animating (no CLS). */
.trust-row b, [data-countup] { font-variant-numeric: tabular-nums; }
/* Gradient hairline between dark bands — quiet, premium. */
.hairline-glow {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(141, 176, 255, .4), rgba(185, 166, 255, .4), transparent);
}

/* ---------------- 11. AI Tools Universe (3D orbit) ---------------- */
.tools-orbit {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(64, 110, 255, .20), transparent 62%),
    radial-gradient(700px 420px at 88% 108%, rgba(124, 74, 255, .16), transparent 62%),
    var(--navy-900);
  color: var(--on-navy);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
  padding: 64px 0 56px;
}
.tools-orbit-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 360px at 50% 52%, rgba(90, 120, 255, .12), transparent 70%);
}
.tools-orbit .container { position: relative; }
.orbit-head { text-align: center; max-width: 720px; margin: 0 auto 8px; }
.orbit-head h2 { color: var(--on-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; margin-top: 10px; }
.orbit-head .muted { color: var(--on-navy-soft); }
.orbit-stage {
  position: relative; height: clamp(430px, 58vh, 640px);
  border-radius: var(--radius-lg);
}
.orbit-scene, [data-tools-orbit] { position: absolute; inset: 0; }
.orbit-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; transition: opacity 1s ease .1s;
}
.orbit-canvas.on { opacity: 1; }
.orbit-cta { text-align: center; margin-top: 20px; }
/* Floating info panel (3D mode) */
.orbit-tip {
  position: absolute; left: 50%; top: 12%; z-index: 3; width: 260px;
  transform: translate(-50%, -110%);
  background: linear-gradient(160deg, rgba(16, 32, 74, .92), rgba(7, 17, 42, .94));
  border: 1px solid rgba(141, 176, 255, .38); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(2, 8, 24, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 14px 16px; text-align: left; color: var(--on-navy);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.orbit-tip.on { opacity: 1; }
.orbit-tip b { display: block; font-family: var(--font-head); font-size: 1.02rem; letter-spacing: -.01em; }
.orbit-tip-cat { display: block; font-size: .72rem; color: var(--accent-on-navy); font-weight: 600; margin-top: 3px; }
.orbit-tip p { font-size: .8rem; color: var(--on-navy-soft); margin: 8px 0 0; line-height: 1.45; }
.orbit-tip a { display: inline-block; margin-top: 10px; font-family: var(--font-head); font-weight: 600; font-size: .84rem; color: var(--accent-on-navy); pointer-events: auto; }
.orbit-tip a::after { content: "→"; }
/* No-JS / SEO / screen-reader fallback: real links, always in the DOM.
   Desktop with 3D active → visually hidden but still accessible. */
.orbit-fallback { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; justify-content: center; padding: 8px 4px; }
.orbit-fb-ring h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-faint); margin: 0 0 10px; font-family: var(--font-head); }
.orbit-fb-logos { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.tools-orbit.orbit-3d .orbit-fallback {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Logo chips shared by orbit fallback + marquee */
.showcase-chip {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; display: inline-grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 4px 14px -6px rgba(2, 8, 24, .5), inset 0 0 0 1px rgba(16, 32, 74, .08);
}
.showcase-chip b { font-family: var(--font-head); font-size: .78rem; font-weight: 800; color: var(--navy-700); }
.showcase-chip img { position: absolute; inset: 5px; width: 36px; height: 36px; object-fit: contain; border-radius: 50%; background: #fff; }
.showcase-name { font-size: .8rem; font-weight: 600; }
.orbit-fb-logo {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--navy-line);
  border-radius: 999px; padding: 6px 14px 6px 7px; color: var(--on-navy);
  transition: transform .18s var(--ease), border-color .2s, background .2s;
}
.orbit-fb-logo:hover { transform: translateY(-2px); border-color: rgba(141, 176, 255, .5); background: rgba(255, 255, 255, .09); }

/* ---------------- 12. Logo marquee (cream editorial band) ---------------- */
.mq-band {
  background: #f7f3ea; color: #171d2e;
  border-top: 1px solid rgba(23, 29, 46, .08);
  border-bottom: 1px solid rgba(23, 29, 46, .08);
  padding: 52px 0 44px;
}
.mq-title {
  text-align: center; max-width: 780px; margin: 0 auto 30px;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -.02em; line-height: 1.3;
}
.mq-viewport {
  overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-row { overflow: hidden; }
.mq-row + .mq-row { margin-top: 16px; }
.mq-track { display: flex; width: max-content; animation: mq-scroll var(--mq-dur, 46s) linear infinite; }
.mq-row-rev .mq-track { --mq-dur: 54s; animation-direction: reverse; }
@keyframes mq-scroll { to { transform: translateX(-50%); } }
.mq-set { display: flex; gap: 14px; padding-right: 14px; }
.mq-logo {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid rgba(23, 29, 46, .09); border-radius: 14px;
  padding: 9px 18px 9px 10px; color: #171d2e;
  box-shadow: 0 2px 10px -6px rgba(23, 29, 46, .25);
  transition: transform .2s var(--ease), box-shadow .25s, border-color .25s;
}
.mq-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(23, 29, 46, .45); border-color: rgba(36, 86, 240, .4); }
.mq-logo .showcase-name { font-size: .84rem; white-space: nowrap; }
.mq-foot { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.mq-note { font-size: .78rem; color: #5b6472; }
.mq-toggle {
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  border: 1px solid rgba(23, 29, 46, .22); border-radius: 999px;
  padding: 7px 16px; background: #fff; color: #171d2e; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.mq-toggle:hover { border-color: rgba(36, 86, 240, .5); }
.mq-toggle:active { transform: scale(.96); }
.mq-paused .mq-track, .mq-row:hover .mq-track { animation-play-state: paused; }

/* Mobile: the orbit fallback becomes a swipeable chip carousel (the 3D scene
   is skipped below 760px by js/motion.js). */
@media (max-width: 759px) {
  .orbit-fb-logos { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .orbit-fb-logo { scroll-snap-align: start; }
  .orbit-fb-logos::-webkit-scrollbar { height: 6px; }
  .orbit-stage { height: auto; min-height: 200px; }
}

/* Popular AI tools strip: becomes a swipeable snap carousel when it would
   wrap on narrow screens; snap points keep each logo card aligned. */
@media (max-width: 900px) {
  .pop-strip {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 10px; margin-bottom: -4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .pop-strip .pop-logo { scroll-snap-align: start; flex: 0 0 auto; }
  .pop-strip::-webkit-scrollbar { height: 6px; }
  .pop-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
}

/* ---------------- 13. Reduced motion ----------------
   animations.css already disarms all animations/transitions globally
   under prefers-reduced-motion. These extras guarantee the hero scene
   never flickers and nothing hides content. */
@media (prefers-reduced-motion: reduce) {
  .hx-canvas { display: none; }
  .hx-float, .hx-scrollcue { display: none; }
  .hx h1 .hw .hwi { animation: none; }
  html.js-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .th-grid-floor, .hx-orb { animation: none; }
  .orbit-canvas { display: none; }
  .orbit-fallback { opacity: 1 !important; }
  .mq-track { animation: none; }
  .journey-canvas { display: none; }
  .cat-scene, .article-scene, .page-scene { display: none; }
}