/* aitytech.com HOME PAGE ONLY (loaded after site.css by index.html; every rule is scoped to body.home).
   Concept: a typhoon seen through a factory inspection camera. Palette and type follow zeniflow.app:
   deep navy, teal / cyan / periwinkle gradient, Quicksand. One scan line, one flowing ribbon (flow.css).
   The Tailwind markup below the hero is kept; this file re-colours it through the shared --c-* tokens
   (so the light/dark toggle still works) and adds the storytelling: numbered chapters, scroll reveal,
   a scroll-linked hero, and a pinned horizontal product track.
   Scroll state comes from js/home-motion.js as CSS variables (--hp-p hero, --hp-tp products).
   Everything animated has a prefers-reduced-motion fallback, and nothing is hidden unless JS ran
   (html.hp-js is added by home-motion.js). Contrast is checked by scripts/contrast-check.js. */

/* Quicksand (SIL OFL 1.1), self-hosted: the font zeniflow.app uses for headings and UI text */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/quicksand-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/quicksand-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/quicksand-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 97%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
body.home {
  --hp-font: 'Quicksand', 'Quicksand Fallback', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', system-ui, sans-serif;
  --c-bg: #061326; --c-bg-alt: #0a1c36; --c-card: #0e2542; --c-card-2: #153158; --c-card-3: #1f416f; --c-pop: #0e2542;
  --c-ink: #eef4ff; --c-ink-2: #c7d5ea; --c-ink-3: #9fb4d0; --c-ink-4: #8fa6c4;
  --c-link: #6fdcf5; --c-link-hover: #9fe8f9; --c-blue: #94b2ff; --c-cyan: #7bc6df;
  --c-line: rgba(190, 215, 255, 0.13); --c-line-soft: rgba(190, 215, 255, 0.06); --c-line-strong: rgba(190, 215, 255, 0.24);
  --c-tint: rgba(50, 201, 243, 0.14); --c-nav-bg: rgba(6, 19, 38, 0.82); --c-focus: #6fdcf5; --c-shadow: rgba(0, 8, 24, 0.6);
  --hp-accent: #32c9f3; --hp-accent-ink: #051b43; --hp-defect: #ff7a86; --hp-defect-ink: #051b43;
  --hp-grad: linear-gradient(135deg, #74dff8 0%, #94b2ff 100%);
  --hp-text-grad: linear-gradient(100deg, #74dff8 0%, #94b2ff 100%);
  --hp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-theme="light"] body.home {
  --c-bg: #f4f7fb; --c-bg-alt: #e9f0f8; --c-card: #e1eaf5; --c-card-2: #d3dfee; --c-card-3: #c3d3e8; --c-pop: #ffffff;
  --c-ink: #051b43; --c-ink-2: #243b5e; --c-ink-3: #3c5372; --c-ink-4: #4a6283;
  --c-link: #095e89; --c-link-hover: #074a6d; --c-blue: #09349b; --c-cyan: #07485d;
  --c-line: rgba(5, 27, 67, 0.14); --c-line-soft: rgba(5, 27, 67, 0.08); --c-line-strong: rgba(5, 27, 67, 0.24);
  --c-tint: rgba(2, 177, 238, 0.12); --c-nav-bg: rgba(244, 247, 251, 0.88); --c-focus: #095e89; --c-shadow: rgba(5, 27, 67, 0.16);
  --hp-accent: #0095d4; --hp-defect: #c4283a; --hp-defect-ink: #ffffff;
  --hp-text-grad: linear-gradient(100deg, #0677ae 0%, #0650ed 100%);
}

/* ---------- type: Quicksand for everything on this page (nav and footer included) ---------- */
body.home, body.home .sc-nav, body.home .sc-footer, body.home button, body.home input, body.home select, body.home textarea { font-family: var(--hp-font); font-weight: 500; }
body.home h1, body.home h2, body.home h3, body.home h4, body.home .sc-brand-name, body.home .sc-fname, body.home .font-heading { font-family: var(--hp-font); font-weight: 700; }

/* ---------- brand colour overrides for the Tailwind markup ---------- */
html body.home .gradient-bg, html body.home .sc-cta, html body.home .bg-primary-purple, html body.home .bg-primary-blue, html body.home .bg-primary-cyan {
  background: var(--hp-grad); color: var(--hp-accent-ink); font-weight: 700;
}
html body.home .gradient-bg:hover, html body.home .sc-cta:hover { opacity: 1; filter: brightness(1.07); }
html body.home .gradient-text {
  background: var(--hp-text-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.home .scroll-progress { background: var(--hp-grad); }
body.home .bg-primary-purple\/20, body.home .bg-primary-blue\/20, body.home .bg-primary-cyan\/20,
body.home .hover\:bg-primary-purple\/20:hover, body.home .hover\:bg-primary-blue\/20:hover, body.home .hover\:bg-primary-cyan\/20:hover { background-color: var(--c-tint); }
body.home .hover\:border-primary-purple\/30:hover, body.home .hover\:border-primary-blue\/30:hover, body.home .hover\:border-primary-cyan\/30:hover,
body.home .focus\:border-primary-purple:focus { border-color: var(--hp-accent); }
body.home .from-primary-purple\/20 { --tw-gradient-from: var(--c-tint); }
body.home .via-primary-blue\/20, body.home .to-primary-cyan\/20 { --tw-gradient-stops: var(--c-tint), var(--c-tint); }

/* ---------- cards: flat, hairline, lift on hover (no scale) ---------- */
body.home .gradient-border {
  position: relative; border: 1px solid var(--c-line); border-radius: 1.25rem; background: var(--c-card);
  transition: transform 0.35s var(--hp-ease), border-color 0.25s, box-shadow 0.25s;
}
body.home .gradient-border::before { content: none; }
body.home .gradient-border:hover { transform: translateY(-4px) !important; border-color: var(--hp-accent); box-shadow: 0 22px 44px -22px var(--c-shadow); }
body.home .group { transition: transform 0.3s var(--hp-ease), border-color 0.25s; }
body.home .group:hover { transform: translateY(-3px); }

/* ---------- flow ribbon shows through: sections translucent, cards stay solid ---------- */
/* specificity must beat site.css "html[data-base=dark] .bg-dark-800" (0,2,1) */
html[data-base] body.home main > section[class] { background-color: transparent; }
html[data-base] body.home main > section[class]:nth-of-type(even) { background-color: color-mix(in srgb, var(--c-bg-alt) 42%, transparent); }

/* ---------- chapters: numbered section headings, left aligned ---------- */
body.home main { counter-reset: hp-ch; }
body.home main > section:not(.hp-hero) { counter-increment: hp-ch; border-top: 1px solid var(--c-line-soft); }
body.home main > section:not(.hp-hero) h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
body.home main > section:not(.hp-hero) h2::before {
  content: counter(hp-ch, decimal-leading-zero); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
  font: 600 0.8125rem/1 var(--hp-font); letter-spacing: 0.22em; color: var(--c-link);
}
body.home main > section:not(.hp-hero) h2::after { content: none; }
body.home main section .text-center.mb-16 { text-align: left; }
body.home main section .text-center.mb-16 > p { max-width: 44rem; margin-inline: 0; }

/* tech stack: two columns with hairline rows instead of one long column */
body.home #tech-stack .space-y-12 > div { border-top: 1px solid var(--c-line); padding-top: 1.25rem; }
body.home #tech-stack .space-y-12 h3 { margin-bottom: 1rem; }
@media (min-width: 900px) {
  body.home #tech-stack .space-y-12 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  body.home #tech-stack .space-y-12 > * { margin-top: 0; }
}

/* ---------- hero ---------- */
.hp-hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 6.5rem 0 4rem; overflow: clip; isolation: isolate; }
.hp-hero::before { /* blueprint grid, fades out toward the left */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--c-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 15%, transparent 72%);
}
.hp-hero__inner { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 640px) { .hp-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .hp-hero__inner { padding: 0 2rem; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 3rem; } }
.hp-hero__copy { transform: translate3d(0, calc(var(--hp-p, 0) * -44px), 0); opacity: calc(1 - var(--hp-p, 0) * 0.9); will-change: transform, opacity; }
.hp-h1 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(2.75rem, 6.4vw, 5.25rem); color: var(--c-ink); }
.hp-h1__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.875rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: var(--c-link); }
.hp-h1__brand::before { content: ''; width: 2.25rem; height: 2px; background: var(--hp-accent); }
.hp-h1__accent { display: block; padding-bottom: 0.08em; word-break: keep-all; text-wrap: balance; }
html[lang="ja"] .hp-h1 { font-size: clamp(2.25rem, 4.9vw, 4.25rem); }
.hp-h1__line { display: block; margin-top: 1.1rem; font-size: clamp(1.25rem, 2.3vw, 1.875rem); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: var(--c-ink-2); text-wrap: balance; }
.hp-lead { margin: 1.5rem 0 0; max-width: 38rem; font-size: clamp(1rem, 1.35vw, 1.1875rem); line-height: 1.7; color: var(--c-ink-3); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.hp-chip { padding: 0.5rem 0.9rem; font-size: 0.8125rem; line-height: 1.2; color: var(--c-ink-2); background: var(--c-card); border: 1px solid var(--c-line); border-radius: 999px; }
.hp-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hp-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.5rem; font-weight: 600; font-size: 1rem; line-height: 1.2; border-radius: 0.75rem; text-decoration: none; border: 1px solid transparent; transition: transform 0.25s var(--hp-ease), background 0.2s, border-color 0.2s, filter 0.2s; }
.hp-btn--primary { background: var(--hp-grad); color: var(--hp-accent-ink); }
.hp-btn--primary::after { content: '\2192' / ''; transition: transform 0.25s var(--hp-ease); }
.hp-btn--primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.hp-btn--primary:hover::after { transform: translateX(4px); }
.hp-btn--ghost { color: var(--c-ink); border-color: var(--c-line-strong); background: transparent; }
.hp-btn--ghost:hover { border-color: var(--hp-accent); transform: translateY(-2px); }

/* hero stage: typhoon + inspection viewport */
.hp-stage { position: relative; width: min(100%, 34rem); aspect-ratio: 1; margin: 0 auto; transform: scale(calc(1 + var(--hp-p, 0) * 0.22)); will-change: transform; }
.hp-stage::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: radial-gradient(closest-side, var(--c-tint), transparent 72%); }
.hp-typhoon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hp-typhoon__scroll { transform-origin: 260px 260px; transform: rotate(calc(var(--hp-p, 0) * 150deg)); }
.hp-typhoon__spin { transform-origin: 260px 260px; animation: hp-rot 90s linear infinite; }
.hp-typhoon path { fill: none; stroke: var(--hp-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: var(--o, 0.6); }
.hp-typhoon path:nth-child(odd) { stroke-width: 3; }
.hp-typhoon__ring { fill: none; stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 2 7; }
.hp-scan { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 4 / 3; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--c-bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--c-line-strong); border-radius: 0.875rem; overflow: hidden; }
.hp-scan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-scan__part { fill: var(--c-card-2); stroke: var(--c-line-strong); stroke-width: 1.5; }
.hp-scan__hole { fill: var(--c-bg); stroke: var(--c-line-strong); stroke-width: 1.5; }
.hp-scan__weld { fill: none; stroke: var(--c-ink-3); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 5; opacity: 0.8; }
.hp-scan__c { position: absolute; width: 1.1rem; height: 1.1rem; border: 0 solid var(--hp-accent); }
.hp-scan__c--tl { top: 0.5rem; left: 0.5rem; border-width: 2px 0 0 2px; } .hp-scan__c--tr { top: 0.5rem; right: 0.5rem; border-width: 2px 2px 0 0; }
.hp-scan__c--bl { bottom: 0.5rem; left: 0.5rem; border-width: 0 0 2px 2px; } .hp-scan__c--br { bottom: 0.5rem; right: 0.5rem; border-width: 0 2px 2px 0; }
.hp-scan__line { position: absolute; left: 0; right: 0; top: 4%; height: 2px; background: var(--hp-accent); box-shadow: 0 0 18px 3px var(--hp-accent); animation: hp-sweep 5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.hp-scan__box { position: absolute; border: 1.5px solid var(--hp-defect); border-radius: 3px; opacity: 0; }
.hp-scan__box i { position: absolute; left: -1.5px; bottom: 100%; padding: 0.15rem 0.4rem; font: 600 0.625rem/1 var(--hp-font); letter-spacing: 0.06em; font-style: normal; white-space: nowrap; background: var(--hp-defect); color: var(--hp-defect-ink); }
.hp-scan__box--1 { left: 22%; top: 46%; width: 11%; height: 12%; animation: hp-ng1 5s infinite; }
.hp-scan__box--2 { left: 53%; top: 60%; width: 9%; height: 10%; animation: hp-ng2 5s infinite; }
.hp-scan__box--3 { left: 71%; top: 38%; width: 8%; height: 9%; animation: hp-ng3 5s infinite; }
.hp-scan__meta { position: absolute; left: 0.9rem; bottom: 0.7rem; font: 500 0.625rem/1 var(--hp-font); letter-spacing: 0.14em; color: var(--c-ink-3); }

@keyframes hp-rot { to { transform: rotate(360deg); } }
@keyframes hp-sweep { 0% { top: 4%; opacity: 1; } 82% { top: 96%; opacity: 1; } 100% { top: 96%; opacity: 0; } }
@keyframes hp-ng1 { 0%, 26% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hp-ng2 { 0%, 50% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hp-ng3 { 0%, 38% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hp-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes hp-slide { from { transform: translate3d(0, 18px, 0); } to { transform: none; } }

/* load-in (h1 only slides: it is the LCP element, so it is never faded) */
html.hp-js .hp-h1 { animation: hp-slide 0.7s var(--hp-ease) both; }
html.hp-js .hp-hero__copy > :not(.hp-h1) { animation: hp-rise 0.8s var(--hp-ease) both; animation-delay: calc(var(--n, 1) * 90ms + 120ms); }
.hp-hero__copy > :nth-child(2) { --n: 1; } .hp-hero__copy > :nth-child(3) { --n: 2; } .hp-hero__copy > :nth-child(4) { --n: 3; }

/* ---------- scroll reveal (only when JS ran; failsafe = JS never adds hp-js) ---------- */
html.hp-js .hp-rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.7s ease, transform 0.8s var(--hp-ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.hp-js .hp-rv.is-in { opacity: 1; transform: none; }

/* ---------- products: swipe track on small screens, pinned horizontal track on desktop ---------- */
.hp-tprog { display: none; }
@media (max-width: 1023.98px) {
  #products .hp-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem 0.25rem 1.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #products .hp-track > * { flex: 0 0 min(86vw, 24rem); scroll-snap-align: start; }
}
#products.hp-pin-on { padding: 0; }
#products.hp-pin-on > .hp-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; margin: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 1rem; padding: 5.25rem max(2rem, calc((100vw - 80rem) / 2 + 2rem)) 1.25rem; }
#products.hp-pin-on > .hp-sticky > .text-center { margin-bottom: 0; }
#products.hp-pin-on h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
#products.hp-pin-on h2::before { margin-bottom: 0.5rem; }
#products.hp-pin-on .text-center > p { margin-top: 0.25rem; font-size: 1rem; }
#products.hp-pin-on .hp-track { display: flex; align-items: stretch; gap: 1.25rem; width: max-content; will-change: transform; flex: 1 1 auto; min-height: 0; }
#products.hp-pin-on .hp-track > * { flex: 0 0 clamp(21rem, 29vw, 27rem); }
/* compact cards so the tallest one fits a ~740px-high window; CTA row sits at the card bottom */
#products.hp-pin-on .hp-track > .gradient-border { padding: 1.25rem; }
#products.hp-pin-on .hp-track > .gradient-border > .space-y-6 { display: flex; flex-direction: column; height: 100%; }
#products.hp-pin-on .hp-track .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem; }
#products.hp-pin-on .hp-track .space-y-6 > :last-child { margin-top: auto !important; padding-top: 0.75rem; }
#products.hp-pin-on .hp-track h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
#products.hp-pin-on .hp-track p { font-size: 0.9375rem; line-height: 1.55; }
#products.hp-pin-on .hp-track .grid > div { padding: 0.4rem 0.5rem; font-size: 0.8125rem; }
#products.hp-pin-on .hp-track a.rounded-lg { padding-top: 0.625rem; padding-bottom: 0.625rem; }
#products .hp-track a.rounded-lg { display: flex; align-items: center; justify-content: center; text-align: center; }
#products.hp-pin-on .hp-tprog { display: block; height: 2px; background: var(--c-line); border-radius: 2px; overflow: hidden; }
#products.hp-pin-on .hp-tprog i { display: block; height: 100%; background: var(--hp-accent); transform-origin: 0 50%; transform: scaleX(var(--hp-tp, 0)); }

/* ---------- reduced motion: no loops, no scroll-linking, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-typhoon__spin, .hp-scan__line, .hp-scan__box { animation: none; }
  .hp-scan__box { opacity: 1; } .hp-scan__line { top: 50%; }
  .hp-hero__copy, .hp-stage, .hp-typhoon__scroll { transform: none; opacity: 1; }
  html.hp-js .hp-h1, html.hp-js .hp-hero__copy > :not(.hp-h1) { animation: none; }
  html.hp-js .hp-rv { opacity: 1; transform: none; transition: none; }
  body.home .gradient-border, body.home .group, .hp-btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- glass: cards are translucent so the flow ribbon stays visible behind them ---------- */
html[data-base] body.home .gradient-border,
html[data-base] body.home main .group.bg-dark-700 {
  background-color: color-mix(in srgb, var(--c-card) 52%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  border-color: var(--c-line-strong);
}
html[data-base] body.home .gradient-border:hover { background-color: color-mix(in srgb, var(--c-card) 66%, transparent); }
html[data-base] body.home #contact .gradient-border { background-color: color-mix(in srgb, var(--c-card) 70%, transparent); }
@supports not (backdrop-filter: blur(1px)) {
  html[data-base] body.home .gradient-border, html[data-base] body.home main .group.bg-dark-700 { background-color: var(--c-card); }
}

/* ---------- drawn product / solution illustrations (SVG, no images) ---------- */
body.home .pv { display: block; width: 100%; height: 132px; margin-bottom: 1.25rem; overflow: hidden; color: var(--c-ink-2); border: 1px solid var(--c-line); border-radius: 0.9rem; background: var(--pv-bg, linear-gradient(135deg, var(--c-tint), transparent)); }
body.home .pv svg { display: block; width: 100%; height: 100%; }
body.home .pv--ak { --pv-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(28, 189, 243, 0.08)); }
body.home .pv--pai, body.home .pv--insp, body.home .pv--app, body.home .pv--dx { --pv-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.03)); }
body.home .pv--dr { --pv-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(28, 189, 243, 0.07)); }
body.home .pv--yo { --pv-bg: #f2f8fa; border-color: transparent; }
body.home .pv--sk { --pv-bg: linear-gradient(135deg, rgba(14, 185, 242, 0.2), rgba(30, 58, 138, 0.14)); }
body.home .pv--zn { --pv-bg: linear-gradient(135deg, rgba(127, 155, 255, 0.22), rgba(116, 223, 248, 0.06)); }
/* pinned product track: the illustration uses whatever height the window has left, and is dropped on short windows */
#products.hp-pin-on .hp-track .pv { height: clamp(0px, calc(100svh - 690px), 132px); margin-bottom: 0; }
@media (max-height: 799px) { #products.hp-pin-on .hp-track .pv { display: none; } }

/* typhoon motif: every chapter number carries a small typhoon mark, and section edges fade like a gust */
body.home main > section:not(.hp-hero) h2::before { padding-left: 2.1rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22m0%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22270.5%22%20y1%3D%22218.7%22%20x2%3D%22346.7%22%20y2%3D%22434.2%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23A78BFA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233B82F6%22%20stop-opacity%3D%22.9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m1%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22281%22%20y1%3D%22287.2%22%20x2%3D%2256.3%22%20y2%3D%22245.4%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233B82F6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322D3EE%22%20stop-opacity%3D%22.9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m2%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22216.5%22%20y1%3D%22262.1%22%20x2%3D%22365%22%20y2%3D%2288.3%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2322D3EE%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A78BFA%22%20stop-opacity%3D%22.9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%22218%22%20fill%3D%22none%22%20stroke%3D%22%2338BDF8%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%22170%22%20fill%3D%22none%22%20stroke%3D%22%23818CF8%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M278.5%20198.2L284%20199.3L289.1%20199.4L294.2%20199.6L299.1%20200.1L304.1%20200.9L309%20201.9L313.9%20203.3L318.7%20204.9L323.5%20206.9L328.1%20209.2L332.7%20211.8L337.2%20214.6L341.6%20217.8L345.8%20221.3L349.8%20225L353.7%20229.1L357.4%20233.3L360.9%20237.9L364.1%20242.7L367.2%20247.7L370%20252.9L372.5%20258.4L374.8%20264L376.8%20269.8L378.5%20275.8L379.9%20281.9L381%20288.2L381.7%20294.6L382.2%20301.1L382.3%20307.7L382.2%20314.4L381.6%20321.1L380.7%20327.8L379.5%20334.6L378%20341.4L376.1%20348.2L373.8%20354.9L371.2%20361.6L368.3%20368.2L365%20374.8L361.3%20381.2L357.4%20387.5L353.1%20393.8L348.4%20399.8L343.5%20405.7L338.2%20411.4L332.6%20416.9L326.8%20422.2L320.6%20427.3L314.1%20432.2L307.4%20436.8L300.4%20441.1L293.2%20445.1L285.7%20448.9L278.1%20452.4L270.1%20455.5L269.9%20451.5L277.5%20447.8L285%20443.8L292.1%20439.5L298.9%20434.9L305.5%20430L311.7%20424.9L317.7%20419.6L323.3%20414.1L328.5%20408.3L333.5%20402.4L338%20396.4L342.2%20390.2L346.1%20383.8L349.6%20377.4L352.7%20370.9L355.4%20364.3L357.8%20357.7L359.8%20351.1L361.4%20344.5L362.6%20337.8L363.5%20331.3L364%20324.7L364.2%20318.3L364%20311.9L363.4%20305.7L362.5%20299.6L361.3%20293.6L359.7%20287.9L357.9%20282.3L355.7%20276.9L353.3%20271.7L350.6%20266.8L347.6%20262.2L344.4%20257.8L341%20253.7L337.3%20249.9L333.5%20246.4L329.5%20243.3L325.3%20240.5L321%20238.1L316.7%20236L312.2%20234.3L307.7%20232.9L303.1%20232L298.5%20231.5L294%20231.4L289.5%20231.6L285%20232.4L280.7%20233.5L276.5%20235.1L272.5%20237.1L268.6%20239.7L265%20242.7L261.6%20246.4L258.6%20250.8L255.3%20257.9Z%22%20fill%3D%22url(%23m0)%22%2F%3E%3Cpath%20d%3D%22M294.8%20304.3L291.1%20308.6L288.4%20313L285.7%20317.2L282.8%20321.3L279.7%20325.2L276.3%20328.9L272.7%20332.5L268.9%20335.8L264.8%20339L260.5%20341.9L255.9%20344.6L251.2%20347L246.3%20349.2L241.2%20351.1L235.9%20352.7L230.5%20354.1L224.9%20355.1L219.3%20355.9L213.5%20356.3L207.6%20356.4L201.7%20356.2L195.7%20355.7L189.7%20354.9L183.7%20353.7L177.6%20352.1L171.6%20350.3L165.6%20348.1L159.7%20345.6L153.8%20342.7L148.1%20339.6L142.4%20336.1L136.8%20332.3L131.4%20328.1L126.2%20323.7L121.1%20318.9L116.2%20313.9L111.5%20308.6L107%20303L102.7%20297.1L98.7%20291L94.9%20284.6L91.4%20278L88.2%20271.2L85.2%20264.1L82.6%20256.9L80.3%20249.5L78.3%20241.9L76.7%20234.2L75.3%20226.3L74.4%20218.3L73.7%20210.1L73.5%20201.9L73.6%20193.7L74.1%20185.3L74.9%20176.9L76.2%20168.5L79.8%20170.3L79.1%20178.8L78.9%20187.2L79.1%20195.5L79.6%20203.8L80.5%20211.9L81.8%20219.8L83.5%20227.6L85.5%20235.2L87.8%20242.6L90.4%20249.9L93.4%20256.8L96.7%20263.6L100.2%20270.1L104.1%20276.3L108.1%20282.3L112.5%20287.9L117%20293.3L121.8%20298.3L126.7%20303L131.8%20307.4L137.1%20311.5L142.5%20315.2L148%20318.5L153.6%20321.5L159.3%20324.2L165%20326.4L170.8%20328.4L176.5%20329.9L182.3%20331.1L188%20331.9L193.7%20332.4L199.3%20332.5L204.9%20332.2L210.3%20331.7L215.5%20330.7L220.6%20329.5L225.5%20327.9L230.3%20326L234.8%20323.8L239%20321.3L243%20318.5L246.7%20315.5L250.1%20312.3L253.2%20308.8L256%20305.1L258.4%20301.2L260.4%20297.2L262%20293L263.1%20288.6L263.9%20284.2L264.1%20279.7L263.8%20275.1L263%20270.4L261.5%20265.7L259.2%20260.8L254.7%20254.4Z%22%20fill%3D%22url(%23m1)%22%2F%3E%3Cpath%20d%3D%22M194.7%20265.4L192.9%20260.1L190.4%20255.6L188.1%20251.1L186%20246.6L184.2%20241.9L182.7%20237.1L181.4%20232.2L180.4%20227.2L179.7%20222.1L179.4%20216.9L179.3%20211.7L179.6%20206.3L180.2%20201L181.1%20195.6L182.3%20190.2L183.8%20184.9L185.7%20179.5L187.9%20174.2L190.4%20169L193.2%20163.9L196.4%20158.8L199.8%20153.9L203.5%20149.1L207.6%20144.5L211.9%20140L216.5%20135.8L221.4%20131.7L226.6%20127.8L232%20124.1L237.6%20120.7L243.5%20117.6L249.5%20114.7L255.8%20112.1L262.3%20109.7L269%20107.7L275.8%20105.9L282.7%20104.5L289.8%20103.4L297.1%20102.7L304.4%20102.3L311.8%20102.2L319.2%20102.4L326.8%20103.1L334.3%20104.1L341.9%20105.4L349.5%20107.1L357.1%20109.2L364.6%20111.6L372.1%20114.4L379.5%20117.6L386.8%20121.1L394.1%20125L401.2%20129.2L408.2%20133.8L415%20138.7L421.7%20144L418.4%20146.2L411.3%20141.4L404.1%20137L396.8%20133L389.4%20129.4L382%20126.1L374.4%20123.3L366.9%20120.8L359.3%20118.7L351.7%20117L344.1%20115.7L336.6%20114.8L329.1%20114.2L321.7%20114.1L314.4%20114.3L307.2%20114.8L300.1%20115.7L293.2%20117L286.5%20118.6L279.9%20120.5L273.6%20122.7L267.4%20125.3L261.5%20128.1L255.9%20131.2L250.5%20134.5L245.3%20138.1L240.5%20142L235.9%20146L231.7%20150.2L227.8%20154.6L224.2%20159.2L221%20163.9L218.1%20168.7L215.5%20173.6L213.4%20178.6L211.5%20183.6L210.1%20188.6L209%20193.7L208.3%20198.7L207.9%20203.7L207.9%20208.6L208.3%20213.5L209.1%20218.2L210.2%20222.8L211.7%20227.2L213.5%20231.4L215.7%20235.4L218.2%20239.2L221%20242.7L224.2%20245.9L227.6%20248.7L231.4%20251.2L235.5%20253.2L240%20254.9L244.8%20255.9L250.2%20256.4L258%20255.7Z%22%20fill%3D%22url(%23m2)%22%2F%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2226%22%20fill%3D%22%230A0F1E%22%2F%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2211%22%20fill%3D%22%23E6FBFF%22%2F%3E%3C%2Fsvg%3E") no-repeat left center / 1.55rem 1.55rem; min-height: 1.55rem; }
body.home main > section:not(.hp-hero) { border-top: 0; background-image: linear-gradient(90deg, transparent, var(--c-line) 20%, var(--c-line) 80%, transparent); background-size: 100% 1px; background-repeat: no-repeat; background-position: top; }