/*! LoveByPDF - homepage v2 (Round 94)
 * Copyright (c) 2026 LoveByPDF. All rights reserved.
 *
 * Hero with moving colour fields and floating file chips, a filterable grid
 * of every tool, a count-up stats band, a scrolling strip of the 26 template
 * languages and a closing call to action. Colours come from the site's own
 * tokens (style.css), so light, dark and admin themes all follow. Every
 * animation is transform / opacity only and lives inside
 * prefers-reduced-motion: no-preference.
 */

/* ------------------------------------------------------------------ hero */
.hx {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 8px 0 34px; padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 52px);
  border: 1px solid var(--border); border-radius: 28px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
/* Round 97: the hero is now the same calm surface as the rest of the site - the
   page's own card colour with one soft brand-colour glow in a corner. The three
   drifting colour fields (marigold + teal + red mixing into muddy greys/browns),
   the dot grid and the multi-colour headline gradient are gone. Still built from
   theme tokens only, so dark mode, style packs, Admin -> Theme and festival
   themes follow. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .hx {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    background:
      radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
      var(--bg-elevated);
  }
}
.hx-bg, .hx-blob, .hx-grid { display: none; }

/* Round 96: file chips are a little toy. They float above the hero (but never
   over the text, buttons or the picture - home_v2.js places them in free
   space), pop with a burst when clicked or tapped, and come back somewhere
   else a moment later. Each chip's colour is a theme token (--c). */
.hx-toys { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hx-chip {
  --c: var(--accent);
  position: absolute; padding: 6px 11px; border-radius: 9px; font: 700 11px/1 var(--font-mono);
  letter-spacing: .06em; color: var(--c); background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow); opacity: .85; pointer-events: auto; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.hx-chip > b { display: inline-block; font: inherit; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.hx-chip:hover { opacity: 1; box-shadow: var(--glow); }
.hx-chip:hover > b { transform: scale(1.12); }
/* Round 97: every chip the same quiet style - muted text on the card colour */
.hx-chip { color: var(--text-muted); background: var(--card); border-color: var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); opacity: .9; }
.hx-chip:hover { color: var(--accent); }
.hx-chip.c1 { --c: var(--violet); right: 46%; top: 12%; }
.hx-chip.c2 { --c: var(--primary); right: 5%; top: 9%; }
.hx-chip.c3 { --c: var(--cyan); right: 3%; bottom: 16%; }
.hx-chip.c4 { --c: var(--accent-light, var(--cyan)); right: 41%; bottom: 9%; }
.hx-chip.c5 { --c: var(--accent); right: 24%; top: 4%; }
.hx-chip.c6 { --c: var(--violet); right: 47%; top: 52%; }
.hx-chip.is-gone { opacity: 0 !important; pointer-events: none; visibility: hidden; }
/* burst pieces (created by home_v2.js at the click point) */
.hx-ring, .hx-bit, .hx-plus { position: absolute; pointer-events: none; z-index: 3; }
.hx-ring { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--c, var(--accent)); }
.hx-bit { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; background: var(--c, var(--accent)); }
.hx-bit.is-round { border-radius: 50%; }
.hx-plus { font: 800 12px/1 var(--font-mono); color: var(--c, var(--accent)); transform: translate(-50%, -50%); white-space: nowrap; }

.hx-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font: 700 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--tint); border: 1px solid var(--tint-border);
}
.hx-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.hx-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; }
.hx-title { margin: 16px 0 12px; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.hx .hx-title .hx-grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); -webkit-text-fill-color: var(--text); animation: none; }
.hx-sub { margin: 0 0 22px; max-width: 560px; color: var(--text-muted); font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.6; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hx-actions .btn-large { width: auto; margin-top: 0; padding: 14px 22px; display: inline-flex; align-items: center; gap: 9px; }
.hx-arrow { display: inline-block; transition: transform .25s var(--ease, ease); }
.hx-cta:hover .hx-arrow { transform: translateX(4px); }

.hx-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.hx-quick-label { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.hx-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  background: var(--card); border: 1px solid var(--border);
  transition: transform .22s var(--ease, ease), border-color .22s, box-shadow .22s, background .22s;
}
.hx-pill svg { color: var(--accent); }
.hx-pill:hover, .hx-pill:focus-visible { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--glow); background: var(--tint); }

.hx-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 12.5px; color: var(--text-muted); }
.hx-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hx-trust svg { color: var(--cyan); }

.hx-visual { position: relative; perspective: 1000px; }
.hx-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s var(--ease, ease); }
.hx-tilt .hero-doc { margin: 0; }
.hx-tilt .hero-doc-card {
  border-radius: 22px; border: 1px solid var(--border); background: var(--card);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.hx-tilt .hero-doc-caption { text-align: center; margin-top: 14px; }

/* ------------------------------------------------------------ tools grid */
.tx { margin: 0 0 40px; }
.tx-head { text-align: center; max-width: 720px; margin: 0 auto 20px; }
.tx-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tx-head h2 { margin: 10px 0 8px; font-size: clamp(26px, 3.4vw, 38px); }
.tx-sub { margin: 0; color: var(--text-muted); }
.tx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.tx-chip {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tx-chip:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.tx-chip.is-on { background: var(--primary); color: var(--bg-elevated); border-color: var(--primary); }
.tx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tx-item[hidden] { display: none; }
.tx-card {
  --c: var(--accent); --c-bg: var(--tint);
  position: relative; height: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px;
  border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--text);
  text-decoration: none; overflow: hidden;
  transition: transform .28s var(--ease, ease), box-shadow .28s var(--ease, ease), border-color .28s;
}
.tx-card::before {   /* a soft colour wash that slides in on hover */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 0% 0%, var(--c-bg), transparent 60%); opacity: 0; transition: opacity .3s;
}
.tx-card > * { position: relative; z-index: 1; }
.tx-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--c); background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.tx-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tx-text strong { font-size: 15px; line-height: 1.3; }
.tx-text span { font-size: 12.8px; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tx-go { margin-left: auto; align-self: center; color: var(--c); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.tx-card:hover, .tx-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: var(--shadow-lg); }
.tx-card:hover::before, .tx-card:focus-visible::before { opacity: 1; }
.tx-card:hover .tx-icon, .tx-card:focus-visible .tx-icon { transform: scale(1.1) rotate(-6deg); }
.tx-card:hover .tx-go, .tx-card:focus-visible .tx-go { opacity: 1; transform: none; }
.tx-card:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.tx-convert   { --c: #C55A11; --c-bg: rgba(226, 150, 60, .14); }
.tx-organize  { --c: #2F8F7A; --c-bg: rgba(47, 143, 122, .13); }
.tx-secure    { --c: #A83B2C; --c-bg: rgba(168, 59, 44, .11); }
.tx-smart     { --c: #6A4BB5; --c-bg: rgba(106, 75, 181, .12); }
.tx-india     { --c: #A9711E; --c-bg: rgba(198, 138, 44, .15); }
.tx-documents { --c: #2E5395; --c-bg: rgba(46, 83, 149, .12); }
:root[data-theme="dark"] .tx-convert { --c: #EFAE5C; }
:root[data-theme="dark"] .tx-organize { --c: #45B39E; }
:root[data-theme="dark"] .tx-secure { --c: #E2685C; }
:root[data-theme="dark"] .tx-smart { --c: #A58BEA; }
:root[data-theme="dark"] .tx-india { --c: #E8B85C; }
:root[data-theme="dark"] .tx-documents { --c: #7FA2E3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tx-convert { --c: #EFAE5C; }
  :root:not([data-theme="light"]) .tx-organize { --c: #45B39E; }
  :root:not([data-theme="light"]) .tx-secure { --c: #E2685C; }
  :root:not([data-theme="light"]) .tx-smart { --c: #A58BEA; }
  :root:not([data-theme="light"]) .tx-india { --c: #E8B85C; }
  :root:not([data-theme="light"]) .tx-documents { --c: #7FA2E3; }
}

/* ----------------------------------------------------------- stats band */
.sx {
  position: relative; margin: 0 0 44px; padding: 26px clamp(16px, 3vw, 34px); border-radius: 22px; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center;
  color: #F7F1E6; background: linear-gradient(135deg, #241F33 0%, #2E2440 55%, #3A2A2E 100%);
  box-shadow: var(--shadow-lg);
}
.sx::before {   /* a light sweep across the band */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10), transparent); transform: skewX(-18deg);
}
.sx-item { position: relative; display: flex; flex-direction: column; gap: 6px; }
.sx-item + .sx-item::before { content: ""; position: absolute; left: -8px; top: 12%; bottom: 12%; width: 1px; background: rgba(255, 255, 255, .14); }
.sx-item b { font: 800 clamp(28px, 3.6vw, 42px)/1 var(--font-heading); letter-spacing: -.03em;
  background: linear-gradient(90deg, #F2C14E, #EFAE5C 50%, #7FD1BE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-item span { font-size: 13px; color: rgba(247, 241, 230, .78); }

/* ------------------------------------------------------ languages strip */
.lx { margin: 40px 0 44px; text-align: center; }
.lx-head h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); }
.lx-head p { margin: 0 auto 20px; max-width: 640px; color: var(--text-muted); }
.lx-row { 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); }
.lx-track { display: flex; gap: 10px; width: max-content; }
.lx-tag {
  flex: 0 0 auto; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s, color .2s;
}
.lx-tag:hover, .lx-tag:focus-visible { transform: translateY(-2px); border-color: var(--border-strong); background: var(--tint); color: var(--ink); }
.lx-cta { margin: 18px 0 0; }
.lx-cta .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ final CTA */
.fx { margin: 0 0 44px; }
.fx-card {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(30px, 5vw, 56px) clamp(18px, 4vw, 48px); border-radius: 26px;
  color: #F7F1E6; background: linear-gradient(140deg, #241F33, #3A2633 60%, #5A3420);
}
.fx-glow { position: absolute; z-index: -1; width: 560px; height: 560px; left: 50%; top: 50%; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 174, 92, .38), rgba(239, 174, 92, 0) 65%); }
.fx-card h2 { margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 40px); color: #FFF8EC; }
.fx-card p { margin: 0 auto 22px; max-width: 560px; color: rgba(247, 241, 230, .8); }
.fx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fx-actions .btn-large { width: auto; margin-top: 0; padding: 14px 24px; display: inline-flex; align-items: center; gap: 9px; }
.fx-actions .btn-primary { box-shadow: 4px 4px 0 0 #0E0C16; }
.fx-ghost { color: #FFF8EC !important; border-color: rgba(255, 255, 255, .35) !important; }
.fx-ghost:hover { background: rgba(255, 255, 255, .08) !important; border-color: #FFF8EC !important; }

/* phones: the first 8 tools, then a button for the rest (43 cards is a lot of thumb-scrolling) */
.tx-more { display: none; margin: 16px auto 0; }
@media (max-width: 560px) {
  .tx-collapsed .tx-item:nth-child(n+9) { display: none; }
  .tx-collapsed + .tx-more { display: flex; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hx-inner { grid-template-columns: 1fr; }
  .hx-visual { max-width: 520px; margin: 6px auto 0; width: 100%; }
  .hx-chip { padding: 5px 9px; font-size: 10px; }
  .sx { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .sx-item:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .hx { border-radius: 20px; margin-top: 0; }
  .hx-actions .btn-large { width: 100%; justify-content: center; }
  .tx-grid { grid-template-columns: 1fr; }
  .tx-go { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .hx-chip { animation: hxFloat 7s ease-in-out infinite; }
  .hx-chip.c2 { animation-duration: 8.5s; animation-delay: -2s; }
  .hx-chip.c3 { animation-duration: 6.5s; animation-delay: -4s; }
  .hx-chip.c4 { animation-duration: 9s; animation-delay: -1s; }
  .hx-chip.c5 { animation-duration: 7.8s; animation-delay: -3s; }
  .hx-chip.c6 { animation-duration: 8.2s; animation-delay: -5s; }
  .hx-chip.is-popping { animation: hxChipPop .32s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hx-chip.is-back { animation: hxChipBack .6s cubic-bezier(.34, 1.56, .64, 1) both, hxFloat 7s ease-in-out .6s infinite; }
  .hx-ring { animation: hxRing .55s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hx-bit { animation: hxBit .7s cubic-bezier(.15, .7, .3, 1) forwards; }
  .hx-plus { animation: hxPlus .9s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hx-pulse::after { animation: hxPing 2s cubic-bezier(0, 0, .2, 1) infinite; }
  .hx-copy > * { animation: hxRise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hx-copy > :nth-child(2) { animation-delay: .06s; }
  .hx-copy > :nth-child(3) { animation-delay: .12s; }
  .hx-copy > :nth-child(4) { animation-delay: .18s; }
  .hx-copy > :nth-child(5) { animation-delay: .24s; }
  .hx-copy > :nth-child(6) { animation-delay: .30s; }
  .hx-pill { animation: hxPop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }
  .hx-visual { animation: hxIn .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hx-tilt .hero-doc-card { animation: hxBob 6s ease-in-out infinite; }

  .tx-anim .tx-item { opacity: 0; transform: translateY(18px) scale(.98); }
  .tx-anim .tx-item.is-in { opacity: 1; transform: none;
    transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(min(var(--d, 0), 12) * 45ms); }
  .tx-anim .tx-item.is-filtering { animation: txPop .38s cubic-bezier(.2, .7, .2, 1) both; }

  .sx::before { animation: sxSweep 6s ease-in-out infinite; }
  .lx-track { animation: lxScroll 46s linear infinite; }
  .lx-rev .lx-track { animation-direction: reverse; animation-duration: 52s; }
  .lx-row:hover .lx-track, .lx-row:focus-within .lx-track { animation-play-state: paused; }
  .fx-glow { animation: fxGlow 10s ease-in-out infinite alternate; }
}
@keyframes hxDrift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes hxDrift2 { to { transform: translate(-90px, 110px) scale(.9); } }
@keyframes hxDrift3 { to { transform: translate(-140px, -60px) scale(1.2); } }
@keyframes hxFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes hxShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hxPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes hxRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hxPop { from { opacity: 0; transform: scale(.8) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hxIn { from { opacity: 0; transform: translateX(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hxChipPop { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-4deg); opacity: 1; } 100% { transform: scale(.2) rotate(8deg); opacity: 0; } }
@keyframes hxChipBack { 0% { transform: scale(0) rotate(-14deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: .85; } }
@keyframes hxRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(4.2); opacity: 0; border-width: .5px; } }
@keyframes hxBit { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 180deg)) scale(.3); opacity: 0; } }
@keyframes hxPlus { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -90%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@keyframes txPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sxSweep { 0% { left: -45%; } 60%, 100% { left: 120%; } }
@keyframes lxScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
@keyframes fxGlow { from { transform: translate(-30%, -10%) scale(.9); } to { transform: translate(30%, 10%) scale(1.15); } }

/* print: the decoration is noise on paper */
@media print { .hx-bg, .hx-toys, .lx, .fx { display: none !important; } }


/* ======================================================================
   Round 97b - open hero (no box)
   The headline no longer sits inside a bordered card: the hero is part of the
   page itself. One soft glow behind the picture, a slowly turning ring, the
   PDF -> Word picture floating free, an accent stroke that draws itself under
   the headline and a light sweep across the main button.
   SEO / speed: the H1 and the text under it are real text that is visible
   from the first paint - they only slide in (transform), never fade in from
   invisible, so Google's LCP is not delayed; every animation is transform /
   opacity on decoration only (no layout shift), and all of it switches off
   under "reduce motion".
   ====================================================================== */
.hx, .hx { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.hx { overflow: visible; overflow-x: clip; margin: 0 0 30px; padding: clamp(26px, 5vw, 64px) 0 clamp(18px, 3vw, 36px); }
.hx-toys { overflow: hidden; }
.hx-title { position: relative; padding-bottom: 18px; margin-bottom: 14px; }
.hx-title::after {           /* accent stroke under the headline */
  content: ""; position: absolute; left: 2px; bottom: 0; width: 96px; height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  transform-origin: left center;
}
.hx-visual { isolation: isolate; }
.hx-halo {                   /* the one soft glow - fades to nothing, so there is no edge anywhere */
  position: absolute; z-index: -1; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 55%, transparent 72%);
}
.hx-orbit {                  /* a thin ring with one small dot travelling round it */
  position: absolute; z-index: -1; left: 50%; top: 46%; width: 86%; aspect-ratio: 1; margin: 0; pointer-events: none;
  translate: -50% -50%; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 30%, transparent);
}
.hx-orbit > i { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
/* the picture itself: no card around it */
.hx-tilt .hero-doc-card, .hx-tilt .hero-doc-card--gif {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; transform: none;
}
.hx-tilt .hero-anim { filter: drop-shadow(0 18px 28px rgba(33, 29, 44, .10)); }
.hx-tilt .hero-doc-caption { max-width: 400px; margin: 10px auto 0; }
/* main button: a light sweep now and then */
.hx-cta { position: relative; overflow: hidden; }
.hx-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); opacity: 0; }
@media (max-width: 900px) {
  .hx { padding-top: 18px; }
  .hx-halo { width: 100%; } .hx-orbit { width: 78%; }
}
@media (prefers-reduced-motion: no-preference) {
  /* text: slides in, stays fully visible (no opacity fade - keeps LCP fast) */
  .hx-copy > .hx-title, .hx-copy > .hx-sub { animation: hxSlide .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hx-copy > .hx-sub { animation-delay: .08s; }
  .hx-title::after { animation: hxStroke 1s cubic-bezier(.6, 0, .2, 1) .35s both; }
  .hx-halo { animation: hxHalo 7s ease-in-out infinite; }
  .hx-orbit { animation: hxOrbit 28s linear infinite; }
  .hx-tilt .hero-doc-card { animation: hxBob 6s ease-in-out infinite; }
  .hx-cta::after { animation: hxSweep 5.5s ease-in-out 1.6s infinite; }
}
@keyframes hxSlide { from { transform: translateY(14px); } to { transform: none; } }
@keyframes hxStroke { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hxHalo { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes hxOrbit { to { rotate: 360deg; } }
@keyframes hxSweep { 0% { left: -60%; opacity: 0; } 8% { opacity: 1; } 22% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }
@media print { .hx-halo, .hx-orbit { display: none !important; } }


/* ======================================================================
   Round 97c - the hero picture as one matched set
   PDF and result cards are the same size and sit on the same line, so the
   whole scene floats together (the PDF used to bob and tilt on its own and
   looked out of line with the Word card). The glow and the ring are centred
   on the picture itself, not on the column with the caption under it.
   ====================================================================== */
.hx-tilt .hero-doc-card { position: relative; overflow: visible !important; }
.hx-tilt .hero-doc-card .hx-halo, .hx-tilt .hero-doc-card .hx-orbit { top: 50%; }
.hx-tilt .hero-doc-card .hx-halo { width: 104%; }
.hx-tilt .hero-doc-card .hx-orbit { width: 80%; }
.hero-anim { position: relative; z-index: 1; overflow: visible; }
.hero-anim .ha-doc { animation: none !important; }
.hero-anim .ha-scene { transform-box: view-box; transform-origin: center; }
.hx-tilt .hero-doc-card { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .ha-scene { animation: haScene 6s ease-in-out infinite; }
}
@keyframes haScene { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }


/* ======================================================================
   Round 97e - hero picture: the whole toolkit
   A PDF in the middle, the main tools around it. Every second the next tool
   lights up (lifts, gets an accent ring) and a pulse runs to it along its
   link. Transform / opacity / stroke only; still under reduced motion.
   ====================================================================== */
.hero-suite { max-width: 470px; }
.hero-suite .hs-link { stroke: color-mix(in srgb, var(--accent) 40%, #D8CFBF); stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .7; }
.hero-suite .hs-tile-bg { fill: #fff; stroke: rgba(36, 31, 51, .08); stroke-width: 1; }
.hero-suite .hs-tile { transform-box: fill-box; transform-origin: center; }
.hero-suite .hs-center { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hero-suite .hs-tile { animation: hsLit 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
  .hero-suite .hs-tile .hs-tile-bg { animation: hsRing 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
  .hero-suite .hs-link { animation: hsPulse 8s linear infinite; animation-delay: calc(var(--i) * 1s - .35s); }
  .hero-suite .hs-center { animation: hsCenter 4s ease-in-out infinite; }
  .hero-suite .hs-heart { transform-box: fill-box; transform-origin: center; animation: hsBeat 2s ease-in-out infinite; }
  .hero-suite .hs-ln { transform-box: fill-box; transform-origin: left center; animation: hsType 4s ease-in-out infinite; }
  .hero-suite .hs-ln:nth-of-type(2) { animation-delay: .2s; } .hero-suite .hs-ln:nth-of-type(3) { animation-delay: .4s; }
  .hero-suite .hs-ln:nth-of-type(4) { animation-delay: .6s; }
}
@keyframes hsLit { 0%, 14%, 100% { transform: none; } 3%, 10% { transform: translateY(-3px) scale(1.07); } }
@keyframes hsRing { 0%, 14%, 100% { stroke: rgba(36, 31, 51, .08); stroke-width: 1; } 3%, 10% { stroke: var(--accent); stroke-width: 2; } }
@keyframes hsPulse { 0% { opacity: .7; stroke-dashoffset: 0; } 2% { opacity: 1; } 6% { stroke: var(--accent); opacity: 1; stroke-dashoffset: -24; } 12%, 100% { opacity: .7; stroke-dashoffset: -24; } }
@keyframes hsCenter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hsBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(.98); } 45% { transform: scale(1.08); } }
@keyframes hsType { 0%, 100% { transform: scaleX(1); } 40% { transform: scaleX(.55); } 70% { transform: scaleX(1); } }
.hx-tilt .hero-doc-card .hx-orbit { width: 64%; }
.hx-tilt .hero-doc-card .hx-halo { width: 92%; }

/* Round 97g: the travelling dot runs on the SAME oval as the tools (drawn inside the picture), not on a separate
   circle behind it; tool tiles are sized to their labels so "Compress" never spills out; the glow only fades
   (no "scale" / "translate" properties, which some browsers ignore). */
.hero-suite .hs-track { fill: none; stroke: color-mix(in srgb, var(--accent) 28%, transparent); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.hero-suite .hs-dot { fill: var(--accent); offset-rotate: 0deg; offset-distance: 0%; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .hero-suite .hs-dot { animation: hsOrbitDot 16s linear infinite; }
  .hx-halo { animation: hxHaloFade 7s ease-in-out infinite !important; }
}
@keyframes hsOrbitDot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes hxHaloFade { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.hx-orbit { display: none !important; }
@supports not (offset-path: path("M0 0")) { .hero-suite .hs-dot { display: none; } }
/* Round 97g: no 3D tilt on the hero picture - turning it in 3D toward the mouse made the browser redraw the labels
   as a blurred image while the pointer was over it. The picture keeps its own (flat) animations. */
.hx-tilt, .hx-tilt[data-tilt] { transform: none !important; transform-style: flat !important; transition: none !important; }
.hx-visual { perspective: none !important; }
.hero-doc:hover .hero-doc-card, .hx-tilt .hero-doc-card { transform: none !important; }
.hero-suite { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
/* Round 97g: links keep their soft colour between pulses (the pulse colour used to stay on) */
.hero-suite { --hs-link-c: #E3D6C0; }
.hero-suite .hs-link { stroke: var(--hs-link-c); }
@media (prefers-reduced-motion: no-preference) {
  .hero-suite .hs-link { animation: hsPulse2 8s linear infinite; animation-delay: calc(var(--i) * 1s - .35s); }
}
@keyframes hsPulse2 {
  0% { stroke: var(--hs-link-c); opacity: .75; stroke-dashoffset: 0; }
  3% { stroke: var(--accent); opacity: 1; }
  9% { stroke: var(--accent); opacity: 1; stroke-dashoffset: -24; }
  13%, 100% { stroke: var(--hs-link-c); opacity: .75; stroke-dashoffset: -24; }
}