/* Home only, rebuilt to the AXIOM brief (docs/axiom/AXIOM_INDEX_UX_AGENT.md) on 2026-10-22; the previous Home is in
   .scratch/axiom/backup-before-axiom/. Six sections: 01 hero, 02 what Yalla2x is (the owner's reference layout, 2026-10-24),
   03 solutions, 04 technology (likewise), 05 how it works, 06 next step.
   Type (2026-10-22, the owner's scale): every font-size is a site.css token (--t-display 72/56/40, --t-h2 44/36/28,
   --t-h3 36/30/24, --t-h4 28/24/22, --t-h6 20/20/18, --t-lead 18, --t-body 16, --t-small 14, --t-cap 12, by
   breakpoint), headings and the hero title in Space Grotesk 700 (brand guide v8 p.12: Display in Bold, never italic),
   body in Inter 400, tabular figures on every number set, hyphenation off, ranged left, paragraphs at most 65ch.
   Colour: gold #F6C453 and midnight #0B0F14 are the brand guide's two brand tokens (Colour System, v8). The owner had the
   page's blue removed (2026-10-22: "Give our brand guideline to remove this blue color and give the brand guideline color
   yellow"; "Wherever you use the blue, I want our brand gold color"): lines, nodes, rules, glows and fills are --gold,
   --gold-deep or --gold-light; text and edges that need contrast on white are --gold-ink (5.32:1) or ink; tints mix
   --gold-light into white. The hero word is --gold-mark, the wordmark's own gold (2.21:1 on white: the owner's choice).
   Motion: transform and opacity only, no scroll hijacking; every sequence has a finished state that shows without
   JavaScript and under reduced motion. Every class is hm- prefixed, so nothing leaks into the shared components. */

/* Space Grotesk 700 comes from css/fonts.css, linked on every page. */

body[data-page="index"] {
  --hm-midnight: #0b0f14;
  --hm-gold-light: #ffd680;          /* brand guide "Gold Light": the gold button's hover */
  --hm-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --hm-sec: clamp(48px, 4.6vw, 80px);
  --hm-g: clamp(16px, 2vw, 32px);    /* column gap */
}
body[data-page="index"] main { hyphens: none; }
body[data-page="index"] main :is(h1, h2, h3, h4) { font-family: var(--hm-head); font-weight: 700; }
/* the number sets: section numbers, layer and step numbers, the licence line */
body[data-page="index"] main .hm-step__n { font-variant-numeric: tabular-nums; }

/* ---------- shared pieces ---------- */
.hm-sec { padding-block: var(--hm-sec); }
.hm-h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; }
.hm-h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
/* the four layer titles and the five step titles are item titles under their section's h2: H4 (28/24/22), as the
   Before/After card titles, so they do not read as a second row of section headings */
.hm-step .hm-h3 { font-size: var(--t-h4); line-height: 1.2; }
/* running text stops at 48ch: in Inter that is 62-65 characters, the brand guide's line limit (65ch would hold 80+) */
.hm-body { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.hm-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 20px); margin-bottom: clamp(24px, 2.8vw, 44px); }
/* wide screens: the heading on the left, its intro on the right, so a section head takes two lines, not five */
@media (min-width: 1024px) {
  .hm-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hm-g); row-gap: 16px; align-items: start; }
  .hm-head--split > .tag { grid-column: 1 / -1; }
  .hm-head--split > .hm-h2 { grid-column: 1 / 7; }
  .hm-head--split > .hm-body { grid-column: 7 / 13; padding-top: 0.25em; }
}

body[data-page="index"] main .tag { font-size: var(--t-cap); }
.hm-btn { min-height: 52px; padding-inline: 24px; font-size: var(--t-body); transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease); }
.hm-btn--primary { background: var(--hm-midnight); color: #fff; }
.hm-btn--primary:hover { background: #222c38; }
.hm-btn--line { background: #fff; border-color: var(--line-3); color: var(--ink); }   /* --line-3: a control's edge at 3:1, as .btn--line */
.hm-btn--line:hover { border-color: var(--ink); }
.hm-btn--gold { background: var(--gold); color: var(--hm-midnight); }
.hm-btn--gold:hover { background: var(--hm-gold-light); }
.hm-btn--ghost { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.hm-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ---------- 01 hero ---------- */
/* the hero scan film fills the hero's right side (the owner, 2026-10-22: big, no Pause button, and nothing of the
   picture under the text: "a perfect spacing in between them"). Desktop (1024px up): the hero is a grid of four
   columns: the page's left margin (the .wrap formula), the copy at its own width (each headline line is a block, so the
   column is as wide as "Your business."), a clear gap (--hm-film-gap), and the film stage from there to the right
   edge, from under the header to the hero's foot. The copy never shares a column with the film, so no frame can sit
   under the headline, lead, buttons or film link. The 16:9 frame is cropped to the stage's height (cover) and
   positioned 55% across: both subjects of the loop (the robot-girl and the robot-man) keep their heads at 42-74% of
   the frame width with the crown 9-13% down, so the whole head sits inside the stage, past the left feather
   (--hm-film-feather), inside the right one (--hm-film-edge) and under the top one, with the crown 48px or more below
   the header. On a tall screen for its width (5:4, 4:3, a tablet held upright) the cover crop would cut the head, so
   the film's box is capped at --hm-film-maxh of the stage's width (a container query unit) and centred on the copy's
   line; at 16:9 and 16:10 the cap never bites (measured 1024-2560px wide, 600-1400px tall, in
   .scratch/home-brand/report.md). The film's left, top and bottom feather into the page's white, so there is no
   rectangle. The network SVG stays behind it all on desktop, its nodes kept clear of the copy (index.html);
   below 1024px it is left out. The hero is one screen (capped at 1080px tall). The
   loop's one stop is the OS's reduced-motion setting, where the poster shows (home.js). */
.hm-hero {
  --hm-film-gap: 56px;        /* clear white between the copy's ink and the stage's edge */
  --hm-film-feather: 160px;   /* the stage's left edge fades in over this */
  --hm-film-edge: 48px;       /* and out over this at the right edge */
  --hm-film-pos: 55%;         /* object-position: both heads whole at every width (see the comment above) */
  --hm-film-maxh: 108cqw;     /* the film's box is at most this tall, against the stage's width */
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: stretch;
  grid-template-columns: max(var(--gutter), (100% - var(--max)) / 2) max-content var(--hm-film-gap) minmax(0, 1fr);
  grid-template-rows: var(--hdr) minmax(0, 1fr);
  min-height: min(max(620px, 100svh), 1080px);
}
.hm-hero__copy {
  grid-column: 2; grid-row: 2; align-self: center; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-block: clamp(32px, 6svh, 72px) clamp(48px, 8svh, 96px);
}
.hm-hero__stage { grid-column: 4; grid-row: 2; position: relative; z-index: 1; pointer-events: none; max-width: 1760px; }
.hm-hero__panel {
  position: absolute; inset: 0; overflow: hidden; background: #fff;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) calc(var(--hm-film-feather) / 2), #000 var(--hm-film-feather), #000 calc(100% - var(--hm-film-edge)), transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) calc(var(--hm-film-feather) / 2), #000 var(--hm-film-feather), #000 calc(100% - var(--hm-film-edge)), transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent);
  mask-composite: intersect;
}
.hm-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hm-film-pos) 0; background: #fff; }
@media (min-width: 1024px) {
  .hm-hero__stage { container-type: inline-size; }
  .hm-hero__panel { height: min(100%, var(--hm-film-maxh)); margin-block: auto; }   /* inset 0 + auto margins: centred */
}
/* 1024-1279px: the stage is only about half the scaled frame wide, so the feathers shorten and the frame sits a little
   further left, keeping the nose past the left feather and the back of the head inside the right one; below 1200px,
   where the buttons set the copy's width, the gap is the 48px floor */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hm-hero { --hm-film-feather: 120px; --hm-film-edge: 28px; --hm-film-pos: 58%; --hm-film-maxh: 120cqw; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hm-hero { --hm-film-gap: 48px; }
}
.hm-hero__title { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.04em; }
.hm-line { display: block; width: max-content; }
.hm-hero__title em { font-style: normal; color: var(--gold-mark); }
/* the narrowest phones: "Your peace of mind." (2026-10-24) is one unbreakable line, 352px at 40px: one step down */
@media (max-width: 399px) { .hm-hero__title { font-size: var(--t-h1); } }   /* the wordmark's gold (owner, 2026-10-22) */
.hm-hero__lead { margin-top: clamp(18px, 2vw, 28px); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 38ch; text-wrap: balance; }   /* 38ch: the owner's longer line of 2026-10-24 */
.hm-hero__actions { margin-top: clamp(26px, 3vw, 36px); gap: 12px; }

.hm-hero__media { position: absolute; inset: var(--hdr) 0 0; z-index: 0; pointer-events: none; }
/* the entrance (motion spec M1, B9, 2026-10-22; keyframes in css/motion.css): each headline line rises out of a blur from
   0.12 opacity (so it paints in the first frame), 110ms apart; then the lead, the two buttons and the film link; the
   stage settles from 1.04 (transform only: it is the largest paint) while the film inside keeps its 3% zoom. Readable by
   about 470ms, still by 1.12s. Delays count from first paint; nothing runs under reduced motion. */
.hm-hero__video { animation: hm-zoom 2.6s var(--ease) both; }
@keyframes hm-zoom { from { transform: scale(1.03); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hm-hero__stage { animation: m-settle var(--m-t-xxl) var(--m-ease) backwards; }
  .hm-line { animation: m-line var(--m-t-l) 80ms var(--m-ease) backwards; }
  .hm-line:nth-child(2) { animation-delay: 190ms; }
  .hm-line:nth-child(3) { animation-delay: 300ms; }
  .hm-hero__lead { animation: m-fade var(--m-t-m) 380ms var(--m-ease) backwards; }
  .hm-hero__actions > .btn:nth-child(1) { animation: m-slide var(--m-t-m) 480ms var(--m-ease) backwards; }
  .hm-hero__actions > .btn:nth-child(2) { animation: m-slide var(--m-t-m) 560ms var(--m-ease) backwards; }
}

/* the network: deep-gold lines and nodes, three brand-gold marks, pulses added by home.js; the lines fade in once */
.hm-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-net__lines { stroke: var(--gold-deep); stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; animation: hm-fade 1.4s 0.25s var(--ease) both; }
.hm-net__lines line { vector-effect: non-scaling-stroke; }
.hm-net__nodes { fill: var(--gold-deep); animation: hm-fade 1.4s 0.35s var(--ease) both; }
.hm-net__ring { fill: none; stroke: var(--gold-deep); stroke-width: 1; opacity: 0.7; }
.hm-net__gold { fill: var(--gold); }
.hm-net__pulse { fill: var(--gold-deep); }
.hm-net__pulse--gold { fill: var(--gold); }
@keyframes hm-fade { from { opacity: 0; } }

/* ---------- 02 what is Yalla2x (the owner's reference image, 2026-10-24) ----------
   Left: tag, heading ("connected." in the wordmark gold, as the hero's gold phrase), paragraph, a round gold arrow link;
   under them the dark "Less fragmentation." card with the particle wave fading in from its right. Right: the dark
   picture card (the Unsplash sphere, lifted from near-black) with the six parts of the business on light ribbons
   (an inline SVG; text on curves), a notch at its top-right corner holding the gold arrow tile, and the caption; the
   light 01-03 list card overlaps the picture's left edge. The notch is the page's own white: a square with a rounded
   inner corner and two small fillets (radial gradients) so the card's edges turn smoothly around it. */
.hm-what { --bg: #f6f5f2; background: var(--bg); --hm-what-r: clamp(20px, 2vw, 28px); --hm-notch: clamp(96px, 9.4vw, 138px); --hm-notch-gap: clamp(10px, 1vw, 16px); }
.hm-what__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: var(--hm-g); row-gap: clamp(28px, 3vw, 44px); align-items: start;
}
.hm-what__text { grid-column: 1 / 7; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 20px); }
.hm-what__title { max-width: 15ch; }
.hm-what__title em { font-style: normal; color: var(--gold-mark); }   /* the wordmark's gold (the owner's, as the hero's) */
.hm-what__text .hm-body { max-width: 44ch; }   /* ends before the list card that overlaps the picture */
.hm-what__go { display: inline-flex; align-items: center; gap: 16px; margin-top: 8px; font-weight: 500; }
.hm-what__go-icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--ink);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.hm-what__go-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-what__go:hover .hm-what__go-icon { transform: translateX(4px); background: var(--hm-gold-light); }

.hm-what__frag {
  grid-column: 1 / 7; grid-row: 2; align-self: end; position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(220px, 19vw, 280px); padding: clamp(28px, 3vw, 44px); border-radius: var(--hm-what-r);
  background: var(--hm-midnight); color: var(--on-dark);
}
/* the owner's "THE YALLA2X DIFFERENCE" (2026-10-24): a small gold line over the title */
.hm-what__frag-tag { margin-bottom: 10px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.hm-what__frag-title { font-size: var(--t-h4); line-height: 1.15; letter-spacing: -0.02em; }
.hm-what__frag-list { display: grid; gap: 10px; margin-top: 20px; color: var(--on-dark-2); }
.hm-what__waves {
  position: absolute; z-index: -1; right: -4%; bottom: -6%; width: 78%; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%);
}

.hm-what__side { grid-column: 7 / 13; grid-row: 1 / 3; position: relative; }
.hm-what__media { position: relative; }
.hm-what__frame { position: relative; aspect-ratio: 25 / 26; border-radius: var(--hm-what-r); overflow: hidden; background: #050607; }
/* the owner's sphere image (2026-10-25) fills the frame under the ribbons, shown as it is (no filter) */
.hm-what__frame > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }   /* the wordmark clear above the Sales band */
.hm-what__ribbons { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-rib { fill: none; stroke: #ece9e3; stroke-width: 46; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.hm-rib--gold { stroke: var(--gold); stroke-dasharray: 4 100; stroke-dashoffset: -37; filter: none; }   /* one gold band on the first ribbon */
.hm-rib__text { font-family: var(--hm-head); font-weight: 700; font-size: 25px; letter-spacing: 0.01em; fill: var(--hm-midnight); dominant-baseline: central; }
.hm-what__notch { position: absolute; top: 0; right: 0; width: var(--hm-notch); height: var(--hm-notch); background: var(--bg); border-bottom-left-radius: var(--hm-what-r); }
.hm-what__notch::before, .hm-what__notch::after {
  content: ""; position: absolute; width: var(--hm-what-r); height: var(--hm-what-r);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--hm-what-r) - 0.5px), var(--bg) var(--hm-what-r));
}
.hm-what__notch::before { top: 0; left: calc(-1 * var(--hm-what-r)); }
.hm-what__notch::after { right: 0; bottom: calc(-1 * var(--hm-what-r)); }
.hm-what__arrow {
  position: absolute; top: 0; right: 0; display: grid; place-items: center;
  width: calc(var(--hm-notch) - var(--hm-notch-gap)); aspect-ratio: 1; border-radius: calc(var(--hm-what-r) * 0.8);
  background: var(--gold); color: var(--ink); transition: background-color 0.3s var(--ease);
}
.hm-what__arrow svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.hm-what__arrow:hover { background: var(--hm-gold-light); }
.hm-what__arrow:hover svg { transform: translate(3px, -3px); }
.hm-what__cap { margin-top: 18px; font-size: var(--t-small); color: var(--ink-2); }
.hm-what__list {
  position: absolute; z-index: 2; top: 34%; left: calc(-1 * clamp(120px, 11vw, 190px)); width: clamp(260px, 21vw, 300px);
  padding: 6px 22px; border-radius: 18px; background: rgba(240, 240, 236, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -28px rgba(11, 15, 20, 0.45);
}
.hm-what__list li { display: flex; gap: 28px; align-items: baseline; padding-block: 16px; font-size: var(--t-body); }
.hm-what__list li + li { border-top: 1px solid var(--line-2); }
.hm-what__n { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* the "Global milestone" card (owner, 2026-10-26, from the owner's picture), in the floating card's place */
.hm-what__stat { top: 26%; width: clamp(270px, 22vw, 330px); padding: 22px 26px 20px; background: rgba(248, 247, 243, 0.96); }
.hm-what__stat-top { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-num); }
.hm-what__stat-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--ink); box-shadow: 0 0 0 5px rgba(246, 196, 83, 0.25);
}
.hm-what__stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-what__stat-icon--soft { background: var(--blue-soft); color: var(--gold-ink); box-shadow: none; }
/* owner, 2026-10-26: "Guinness World Record" under the label, a record badge in the brand's own colours: Midnight with the
   brand gold lettering (11.8:1), no orange */
.hm-what__stat-record {
  display: inline-flex; align-items: center; margin-top: 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--dark); color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.28);
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-cap); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.hm-what__stat-num { margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: clamp(48px, 4.4vw, 66px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.hm-what__stat-label { margin-top: 8px; font-size: var(--t-body); color: var(--ink-2); }
.hm-what__stat-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.hm-what__stat-foot strong { display: block; font-weight: 600; color: var(--ink); }
.hm-what__stat-foot > span:last-child > span { display: block; font-size: var(--t-small); color: var(--ink-2); }
/* a narrower desktop: a shorter paragraph, and the list card overlaps the picture less, so the two stay apart */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hm-what__text .hm-body { max-width: 36ch; }
  /* below 1440px the list over the picture would hide ribbons or nip the dark card's corner: it follows the picture */
  .hm-what__list { position: static; width: auto; margin-top: 20px; background: var(--panel); box-shadow: none; }
}
/* tablet and phone: one column (text, the list, the picture, the dark card); the list sits in the flow, not over the
   picture */
@media (max-width: 1023px) {
  .hm-what__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hm-what__text, .hm-what__frag, .hm-what__side { grid-column: 1; grid-row: auto; }
  .hm-what__title { max-width: 20ch; }
  .hm-what__side { display: flex; flex-direction: column; gap: 24px; }
  .hm-what__list { position: static; order: -1; width: auto; max-width: 520px; background: var(--panel); box-shadow: none; }
  .hm-what__media { max-width: 560px; }   /* the picture keeps its shape (the ribbons are drawn for it); it does not grow wider */
  .hm-what__frag { order: 3; }
}
@media (max-width: 767px) {
  .hm-what { --hm-notch: 84px; --hm-notch-gap: 10px; }
}
@media (max-width: 399px) {
  .hm-what { --hm-notch: 64px; --hm-notch-gap: 8px; }   /* clear of "Operations" on 320-360px phones */
  .hm-what__list li { gap: 20px; padding-block: 14px; }
  .hm-what__waves { width: 120%; right: -30%; opacity: 0.7; }
}

/* ---------- 04 technology (the owner's reference image, 2026-10-24) ----------
   A warm light ground (the box picture's own: its corners are #fdf6ed) with a gold glow behind the box; left: the
   widely spaced tag, the heading with "real infrastructure." underlined in gold, three numbered layers whose gold
   leader lines end in dots on the dotted arc, the dark pill button with its gold arrow and its line; right: the box
   in 3D (2026-10-25, below), the dotted arc and two fans of fine gold rays behind it (decorative SVG), the white
   "YALLA2X Box" label and, at the top right, the section's line. Below 1024px: one column, no arc. */
.hm-tk {
  --hm-tk-ground: #fdf6ed;
  position: relative; overflow: hidden;
  background: radial-gradient(42% 58% at 74% 58%, rgba(246, 196, 83, 0.26), rgba(246, 196, 83, 0) 72%), var(--hm-tk-ground);
}
.hm-tk__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--hm-g); align-items: start; }
.hm-tk__text { grid-column: 1 / 7; grid-row: 1 / 3; position: relative; }   /* no z-index: the box picture paints over the arc */
.hm-tk__kicker { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); }
.hm-tk__title { margin-top: 18px; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.04em; }
.hm-tk__mark {
  padding-bottom: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(90deg, var(--gold), var(--gold) 55%, rgba(246, 196, 83, 0)) 0 100% / 100% 4px no-repeat;
}
.hm-tk__list { display: grid; gap: clamp(24px, 2.6vw, 40px); margin-top: clamp(32px, 3.4vw, 52px); }
.hm-tk__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
.hm-tk__n { padding-top: 4px; font-size: var(--t-h6); color: var(--ink-num); font-variant-numeric: tabular-nums; }
.hm-tk__name { display: flex; align-items: center; gap: 24px; font-size: var(--t-h4); line-height: 1.2; }
/* the leader: runs from the name past the column's edge to a dot on the arc; each item reaches a little further or less,
   so the three dots sit on the curve (the middle one is the arc's leftmost point) */
.hm-tk__lead { position: relative; flex: 1; height: 2px; margin-right: calc(-1 * var(--hm-tk-reach, 0px)); background: var(--gold); }
.hm-tk__lead::after {
  content: ""; position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(246, 196, 83, 0.28);
}
/* the arc is drawn in the list's own box (.hm-tk__layers), so dots and arc move together at every width: the middle
   dot sits on the arc's leftmost point, the other two 28px further out, where a circle of this size passes */
.hm-tk__layers {
  --hm-tk-svg: min(47.4vw, 790px); --hm-tk-mid: calc(var(--hm-g) + 1.8vw);
  --hm-tk-dot-y: calc(50% - 31px);   /* the middle dot sits 31px above the list's middle (measured at 1024-1920) */
  position: relative;
}
.hm-tk__item:nth-child(1), .hm-tk__item:nth-child(3) { --hm-tk-reach: calc(var(--hm-tk-mid) + 28px); }
.hm-tk__item:nth-child(2) { --hm-tk-reach: var(--hm-tk-mid); }
.hm-tk__item p { margin-top: 8px; max-width: 26ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.hm-tk__btn {
  display: inline-flex; align-items: center; gap: 22px; min-height: 64px; margin-top: clamp(36px, 4vw, 56px); padding: 0 34px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--t-h6); font-weight: 600;
  transition: background-color 0.25s var(--ease);
}
.hm-tk__btn svg { width: 16px; height: 16px; color: var(--gold); transition: transform 0.25s var(--ease); }
.hm-tk__btn:hover { background: #2b2b2a; }
.hm-tk__btn:hover svg { transform: translate(3px, -3px); }
/* the two buttons side by side (owner, 2026-10-25), wrapping on a narrow screen; the second outlined */
.hm-tk__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(36px, 4vw, 56px); }
.hm-tk__actions .hm-tk__btn { margin-top: 0; }
.hm-tk__btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hm-tk__btn--line:hover { background: var(--ink); color: #fff; }
.hm-tk__media { grid-column: 7 / 13; grid-row: 2; position: relative; isolation: isolate; margin: clamp(-24px, -1vw, 0px) 0 0; }
/* the arc's circle: centre (400, 300) and radius 290 in a 600-unit box, so its leftmost point is 110/600 of the width in */
.hm-tk__rays {
  position: absolute; width: var(--hm-tk-svg); height: auto; pointer-events: none;
  left: calc(100% + var(--hm-tk-mid) - var(--hm-tk-svg) * 110 / 600);
  top: calc(var(--hm-tk-dot-y, 50%) - var(--hm-tk-svg) / 2);
}
.hm-tk__arc { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 8; }
.hm-tk__ray { fill: none; stroke: var(--gold); stroke-width: 1.3; opacity: 0.85; }
.hm-tk__pill {
  position: absolute; top: 6%; right: 4%; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 16px;
  border-radius: 999px; background: #fff; box-shadow: 0 12px 30px -16px rgba(11, 15, 20, 0.4); font-size: var(--t-small); font-weight: 600;
}
.hm-tk__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
@media (max-width: 1279px) {
}
@media (min-width: 1024px) and (max-width: 1199px) {
}
@media (max-width: 1023px) {
  .hm-tk__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; }
  .hm-tk__text, .hm-tk__media { grid-column: 1; grid-row: auto; }
  .hm-tk__media { margin: 0; }
  .hm-tk__lead, .hm-tk__rays { display: none; }
}
@media (max-width: 767px) {
  .hm-tk__item { grid-template-columns: 40px minmax(0, 1fr); }
  .hm-tk__btn { min-height: 56px; padding: 0 26px; gap: 16px; }
  .hm-tk__pill { top: 2%; right: 2%; padding: 9px 16px 9px 12px; }
}

/* ---------- 04 the Yalla2X Box in 3D (owner, 2026-10-25): the approved WebGL box (js/home-box3d.js loads js/box3d.js)
   over the still picture of its start pose, which shows until the first 3D frame and wherever WebGL is missing.
   --w is the earlier CSS box's lid width: the stage keeps that box's height, so the section's layout is unchanged;
   --b3d-p is the box's width on screen at its start pose (the earlier box's measured width: 1.415 --w). The view is the
   canvas's area, centred on the box and big enough for every turn and tilt (on a wide screen a square: every pose fits
   in 1.09 x the start width); --b3d-fill is the start pose's share of its width (js/box3d.js reads it to fit the camera,
   the still picture takes that share). As the earlier box
   was drawn, the box sits 5% of --w below the stage's middle (--b3d-y), so the figure, its label and the section stay
   exactly where they were (js/home.js centres the box itself on the arc). The canvas is
   transparent; the ground and glow are the section's own; the soft shadow under the box is CSS. Vertical swipes and
   the wheel scroll the page (touch-action: pan-y pinch-zoom; no wheel listener). --b3d-tilt is how far the box tilts
   (degrees each way; js/box3d.js reads it): the approved viewer's 70 where the box has the room, 20 in one column,
   where the box sits between the buttons and the section's edge (70 would need 0.54 of its width above its middle,
   and there is 0.48 before the buttons). */
/* the view reaches past the figure: clip (where supported) rather than hidden, so focusing the box can never scroll
   the section's content inside the section */
.hm-tk { overflow: clip; }
.hm-tk__media { --w: clamp(240px, 29vw, 440px); --b3d-p: calc(var(--w) * 1.415); --b3d-y: calc(50% + var(--w) * 0.05); }
.hm-b3d { position: relative; width: 100%; height: calc(var(--w) * 1.02); border-radius: 24px; touch-action: pan-y pinch-zoom; }
.hm-b3d:focus-visible { outline-offset: 6px; border-radius: 24px; }   /* the site's gold ring, for the keyboard only */
.hm-b3d__view {
  --b3d-fill: 0.86; --b3d-tilt: 70;
  position: absolute; left: 50%; top: var(--b3d-y);
  width: calc(var(--b3d-p) / var(--b3d-fill)); height: calc(var(--b3d-p) / var(--b3d-fill));
  transform: translate(-50%, -50%); pointer-events: none;
}
@media (max-width: 1023px) {
  /* one column: the box tilts 20 deg each way, so every pose fits in 1.06 x 0.85 of its width; the canvas is 1.1 x 0.88
     of it, which keeps it inside the section (8px from the screen's edges at 390px) and clear of the buttons above */
  .hm-b3d__view { --b3d-fill: 0.909; --b3d-tilt: 20; height: calc(var(--b3d-p) * 0.88); }
}
/* the still picture: centred without a transform, and kept out of the motion engine's zoom-settle (motion.css scales a
   [data-motion="scale"] figure's images from 1.08), which the canvas cannot share: the two must stay pixel-aligned */
.hm-b3d__poster {
  position: absolute; inset: 0; margin: auto; width: calc(100% * var(--b3d-fill)); max-width: none; height: auto;
  user-select: none;
}
.m-on [data-motion="scale"]:not(.m-in) .hm-b3d__poster { transform: none; }
.hm-b3d__shadow {
  position: absolute; left: 50%; top: calc(50% + var(--b3d-p) * 0.1); width: calc(var(--b3d-p) * 0.96); height: calc(var(--b3d-p) * 0.32);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 70, 40, 0.3), rgba(90, 70, 40, 0));
}
.hm-b3d__canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: auto;
  cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s var(--ease);
}
.hm-b3d__canvas.is-grabbing { cursor: grabbing; }
/* the first 3D frame is on screen: it fades in over the identical still, which then goes. Not live (still loading, or
   the GPU dropped the WebGL context and js/home-box3d.js took is-live away): the still shows, and nothing says "grab" */
.hm-b3d.is-live .hm-b3d__canvas { opacity: 1; }
.hm-b3d.is-live .hm-b3d__poster { visibility: hidden; transition: visibility 0s linear 0.3s; }
.hm-b3d:not(.is-live) .hm-b3d__canvas { cursor: default; }
/* the hint by the box (owner: "a small hand or some motion"): shown with the 3D box, the hand swipes twice (4 s, the
   first swing in step with the box's self-turn), and the first drag or key press fades it for good. It sits outside the
   flow, so it moves nothing, and lets the pointer through to the box. From 1024px it is centred under the box's lowest
   corner (0.125 of the box's width right of its middle, 0.28 below it): 9-40px under the start pose, and clear of the
   lower ray fan on the left (review round 1: centred under the box's middle it touched the fan at 1024-1279px). */
.hm-b3d__hint {
  position: absolute; left: calc(50% + var(--b3d-p) * 0.125);
  top: calc(var(--b3d-y) + var(--b3d-p) * 0.286 + clamp(6px, 2.4vw, 40px)); z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 24px -16px rgba(11, 15, 20, 0.45);
  font-size: var(--t-small); font-weight: 500; line-height: 1.3; color: var(--ink-2); white-space: nowrap;
  transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
}
.hm-b3d__hint.is-shown { opacity: 1; }
/* its words: "Drag to rotate · Click to open" ("Tap" on a touch screen); two lines on a phone (below) */
.hm-b3d__words { display: inline-flex; gap: 0.35em; }
.hm-b3d__coarse { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hm-b3d__fine { display: none; }
  .hm-b3d__coarse { display: inline; }
}
.hm-b3d__hint.is-done { opacity: 0; }
.hm-b3d__icon { display: block; flex: none; overflow: visible; }
.hm-b3d__arrows { fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-b3d__palm { fill: #fff; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.hm-b3d__creases { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.hm-b3d__hand { transform-box: fill-box; transform-origin: 50% 100%; }
.hm-b3d__hint.is-swiping .hm-b3d__hand { animation: hm-b3d-swipe 2s cubic-bezier(0.37, 0, 0.63, 1) 2; }
@keyframes hm-b3d-swipe {
  0%, 100% { transform: none; }
  25% { transform: translateX(3px) rotate(9deg); }
  75% { transform: translateX(-3px) rotate(-9deg); }
}
/* one column (review round 1: under the box the hint hung 9-10px from the section's lower edge, on the seam with 'How
   it works'): on the label's row at the column's left, the label's mirror, vertically centred on it (the hint is 32px
   tall here; the label is 46.4px at 6% of the figure's height from 768px, 40.4px at 2% below). Under the box there is
   no room: its lowest point over the self-turn is 0.284 of its width below its middle, and 24px from the section's edge
   leaves less than the hint's height. Below 540px the box's top corner (the highest point over the whole self-turn:
   0.158 of --w under the figure's top, 38px on a phone) rises into the label's row under the hint's right end, so the
   hint goes up to the figure's top edge: 6px or more over that corner at rest and through the self-turn. Below 340px
   the label takes that row, and the hint goes to the figure's foot (bottom: -15px: 25px inside the section). */
@media (max-width: 1023px) {
  .hm-b3d__hint { left: 0; top: calc(6% + 7.2px); padding-block: 4px; transform: none; }
}
@media (max-width: 767px) {
  .hm-b3d__hint { top: calc(2% + 4.2px); }
}
@media (max-width: 539px) {
  .hm-b3d__hint { top: 0; }
}
/* 340-539px: on one line the hint (252px) ran into the label on its row; two lines keep it at the column's left (below
   340px it sits alone at the figure's foot, where one line fits and two would reach the box) */
@media (min-width: 340px) and (max-width: 539px) {
  .hm-b3d__words { flex-direction: column; gap: 0; line-height: 1.15; }
  .hm-b3d__sep { display: none; }
}
@media (max-width: 339px) {
  .hm-b3d__hint { top: auto; bottom: -15px; }
}

/* ---------- 04 the box opened (owner, 2026-10-26: a click opens it "from bottom to top where every layer needs to be
   clearly visible and labelled properly"; focus mode, the owner's choice). js/home-box3d.js shows the stage (it covers
   the whole section), moves the box's canvas onto it and adds .is-open to the section: the text, the label pill, the
   hint and the shadow fade while the box opens in the middle; the labels and their gold lines are placed by the script
   every frame (translate3d, opacity). Closing reverses it; the text comes back once the box is back in its place. */
.hm-tk { position: relative; }
.hm-tk__text, .hm-tk__pill, .hm-b3d__shadow { transition: opacity 0.45s var(--ease), visibility 0s linear 0s; }
.hm-tk.is-open .hm-tk__text, .hm-tk.is-open .hm-tk__pill, .hm-tk.is-open .hm-b3d__shadow, .hm-tk.is-open .hm-b3d__hint {
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.hm-b3d-stage {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.hm-tk.is-open .hm-b3d-stage { opacity: 1; pointer-events: auto; }
.hm-b3d-stage .hm-b3d__canvas { opacity: 1; cursor: grab; }
.hm-b3d-stage .hm-b3d__canvas.is-grabbing { cursor: grabbing; }
.hm-b3d-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hm-b3d-lines path { fill: none; stroke: var(--gold-deep); stroke-width: 1.25; }
.hm-b3d-lines circle { fill: var(--gold); stroke: #fff; stroke-width: 1.5; }
.hm-b3d-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hm-b3d-label {
  position: absolute; left: 0; top: 0; width: max-content; max-width: clamp(150px, 17vw, 250px);
  padding: 10px 14px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 30px -20px rgba(11, 15, 20, 0.5), 0 0 0 1px rgba(232, 168, 56, 0.28);
  opacity: 0; will-change: transform, opacity;
}
.hm-b3d-label b {
  display: block; font-family: var(--font-head); font-size: var(--t-body); font-weight: 700; line-height: 1.25; color: var(--ink);
}
.hm-b3d-label span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.hm-b3d-close {
  position: absolute; top: clamp(16px, 3vw, 40px); right: var(--gutter); z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 20px; border: 0; border-radius: 999px;
  background: var(--dark); color: #fff; font: 600 var(--t-small) / 1 var(--font); cursor: pointer;
}
.hm-b3d-close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hm-b3d-close:hover { background: #000; }
.hm-b3d-lines text { font: 700 11px/1 var(--font); fill: var(--ink); text-anchor: middle; }
/* a narrow stage (js/home-box3d.js adds .is-list under 700px): a numbered gold marker on each part and the labels,
   numbered the same, as a two-column list at the foot of the screen (the script sets its top) */
.hm-b3d-stage.is-list .hm-b3d-labels {
  inset: auto var(--gutter) auto var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  counter-reset: part;
}
.hm-b3d-stage.is-list .hm-b3d-label {
  position: relative; max-width: none; width: auto; padding: 8px 10px 9px 34px; border-radius: 12px; transform: none;
  counter-increment: part;
}
.hm-b3d-stage.is-list .hm-b3d-label::before {
  content: counter(part); position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font: 700 11px/18px var(--font); text-align: center;
}
.hm-b3d-stage.is-list .hm-b3d-lines circle { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.hm-b3d-stage.is-list .hm-b3d-label b { font-size: 13px; }
.hm-b3d-stage.is-list .hm-b3d-label span { font-size: 11px; }

/* ---------- 05 how it works (owner, 2026-10-24: no Replay, it plays by itself, a better layout) ----------
   five step cards under one gold rail. Each time the section comes into view (home.js), the steps light up in turn,
   0.8s each: the rail fills to the step, its marker turns gold and its card turns Midnight and lifts; the run ends with
   every marker lit and the cards light again. Four seconds in all, so it needs no pause control (WCAG 2.2.2). Without
   the script and under reduced motion: the finished state. */
.hm-steps { position: relative; --dot: 18px; --rail-top: 56px; padding-top: var(--rail-top); }
.hm-steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
/* the rail runs from the first marker's centre to the last one's (each marker sits at its card's left edge) */
.hm-steps__rail {
  position: absolute; top: calc(var(--rail-top) + var(--dot) / 2 - 1px); left: calc(var(--dot) / 2);
  right: calc(20% - 0.8 * clamp(12px, 1.4vw, 20px) - var(--dot) / 2); height: 2px; background: var(--line-2); border-radius: 2px;
}
.hm-steps__fill {
  position: absolute; inset: 0; background: var(--gold); border-radius: inherit; transform-origin: left;
  transform: scaleX(var(--hm-fill, 1)); transition: transform 0.8s var(--ease);
}
.hm-step { position: relative; display: flex; flex-direction: column; gap: 18px; }
.hm-step__dot {
  width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--hm-midnight);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--gold); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hm-step__card {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.hm-step__n { font-size: var(--t-small); font-weight: 600; color: var(--ink-num); transition: color 0.45s var(--ease); }
.hm-step__card > p:last-child { font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); transition: color 0.45s var(--ease); }
.hm-step__card .hm-h3 { transition: color 0.45s var(--ease); }
/* the loop from Improve back to Understand over the rail, its arrowhead into Understand, and the dot that runs it */
.hm-steps__loop {
  position: absolute; top: 2px; left: calc(var(--dot) / 2); width: calc(80% + 0.8 * clamp(12px, 1.4vw, 20px)); height: calc(var(--rail-top) - 8px);
  overflow: visible; fill: none; stroke: var(--gold-deep); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.7;
}
.hm-steps__loop path { vector-effect: non-scaling-stroke; }
.hm-steps__head {
  position: absolute; top: calc(var(--rail-top) - 14px); left: calc(var(--dot) / 2 - 5px); width: 0; height: 0;
  border-top: 7px solid var(--gold-deep); border-inline: 5px solid transparent;
}
.hm-steps__runner {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0;
  background: var(--gold); box-shadow: 0 0 0 5px rgba(246, 196, 83, 0.28); pointer-events: none;
}
.hm-steps__runner.is-on { opacity: 1; }
/* the step being shown */
.hm-step.is-on .hm-step__card {
  background: var(--hm-midnight); border-color: var(--hm-midnight); transform: translateY(-6px);
  box-shadow: 0 22px 44px -24px rgba(11, 13, 16, 0.55);
}
.hm-step.is-on .hm-step__card .hm-h3 { color: #fff; }
.hm-step.is-on .hm-step__n { color: var(--gold); }
.hm-step.is-on .hm-step__card > p:last-child { color: var(--on-dark-2); }
/* waiting and running: the markers not reached yet are empty */
.hm-steps.is-ready .hm-step:not(.is-lit) .hm-step__dot { background: #fff; box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line-2); }

/* ---------- 06 next step: the page's one dark panel ---------- */
/* the same dark as the footer right below it, with the footer's own inset as the gap, so the two read as one pair */
.hm-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--dark); padding-block: clamp(44px, 4.4vw, 76px); margin-bottom: clamp(8px, 1vw, 16px); }
/* the network keeps to the right 38% (drawn whole inside its box); the copy keeps to the left 56%, so they never meet;
   below 1024px there is no room beside the copy and the network is left out */
.hm-cta__net { position: absolute; z-index: -1; top: 0; right: 0; width: min(38%, 560px); height: 100%; }
.hm-cta__lines { stroke: var(--gold); stroke-width: 1; opacity: 0.45; }
.hm-cta__lines line { vector-effect: non-scaling-stroke; }
.hm-cta__nodes circle { fill: var(--gold-light); }
.hm-cta__nodes rect { fill: var(--gold); }
/* the network film (2026-10-24) takes the network's place once its first frame is up (home.js adds .is-film): flush
   right, the panel's full height, at most 55% wide (50% below 1280px), so the copy keeps to the film's faded left edge.
   When it is narrower than 16:9 it is cropped at the right, where the panel's own edge cuts it, never at the left,
   where cropping cut the fade into a hard line of halved spheres (seen at 1440, 2026-10-24) */
.hm-cta__film { position: absolute; z-index: -1; top: 0; right: 0; width: auto; height: 100%; aspect-ratio: 16 / 9; max-width: 55%; object-fit: cover; object-position: left center; opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.hm-cta__net { transition: opacity 0.6s var(--ease); }
.hm-cta.is-film .hm-cta__film { opacity: 1; }
.hm-cta.is-film .hm-cta__net { opacity: 0; }
.hm-cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.8vw, 24px); }
.hm-cta__title { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.03em; max-width: 18ch; color: #fff; }
.hm-cta__text { max-width: 48ch; font-size: var(--t-lead); line-height: 1.55; color: #b9bcc0; }
.hm-cta__actions { gap: 12px; margin-top: 8px; }

/* ---------- responsive ---------- */
@media (min-width: 1024px) {
  .hm-cta__inner > * { max-width: min(56%, 640px); }
  .hm-cta__title { max-width: min(18ch, 56%, 640px); }
  .hm-cta__text { max-width: min(48ch, 56%, 640px); }
}
@media (max-width: 1279px) {
  .hm-cta__film { max-width: 50%; }
}
@media (max-width: 1023px) {
  /* tablet and phone: the copy first, then the film edge to edge under it with a clear gap (28px, plus its top
     feather), taller than 16:9 (4:3 here, square on a phone) and cropped to her head and shoulders; its foot feathers
     into the white before section 02 */
  .hm-hero { display: block; min-height: 0; padding-top: var(--hdr); }
  .hm-hero__copy { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: clamp(28px, 5vw, 48px) 0; }
  .hm-hero__lead { max-width: 34ch; }
  .hm-hero__stage { margin-top: 28px; max-width: none; }
  /* the network would run across the stacked copy (lines through the headline, the owner's overlap again), so
     below 1024px it is left out, as the closing panel's network is */
  .hm-hero__media { display: none; }
  .hm-hero__panel {
    position: relative; inset: auto; aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 90%, transparent);
  }
  .hm-hero__video { object-position: 56% 50%; }
  .hm-cta__net, .hm-cta__film { display: none; }
  /* the rail turns vertical: each step's marker at its card's left, a piece of rail down to the next marker, filled
     in gold as the run passes it */
  .hm-steps__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hm-step { display: grid; grid-template-columns: calc(var(--dot) + 14px) minmax(0, 1fr); align-items: start; gap: 0; }
  .hm-step__dot { margin-top: 22px; }
  .hm-steps__rail, .hm-steps__loop, .hm-steps__head, .hm-steps__runner { display: none; }
  .hm-steps { padding-top: 0; }
  .hm-step::before, .hm-step::after {
    content: ""; position: absolute; left: calc(var(--dot) / 2 - 1px); top: calc(22px + var(--dot) + 8px); bottom: -36px; width: 2px;
    border-radius: 2px; background: var(--line-2);
  }
  .hm-step::after { background: var(--gold); transform-origin: top; transition: transform 0.8s var(--ease); }
  .hm-step:last-child::before, .hm-step:last-child::after { content: none; }
  .hm-steps.is-ready .hm-step:not(.is-past)::after { transform: scaleY(0); }
  .hm-step.is-on .hm-step__card { transform: none; }
}
@media (max-width: 767px) {
  body[data-page="index"] { --hm-sec: 40px; }
  .hm-head { margin-bottom: 20px; }
  .hm-body { line-height: 1.55; }
  /* the film link stays in the copy, above the film: nothing of the picture under any text (the owner, 2026-10-22) */
  .hm-hero__panel { aspect-ratio: 1 / 1; }
  .hm-hero__video { object-position: 58% 50%; }
  .hm-cta { padding-block: 40px; }
}
@media (max-width: 479px) {
  /* the hero's two actions share a row when they fit; the closing panel's are stacked */
  .hm-hero__actions .btn { flex: 1 1 auto; padding-inline: 16px; }
  .hm-cta__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-b3d__canvas, .hm-b3d__hint { transition: none; }
  .hm-b3d.is-live .hm-b3d__poster { transition: none; }
  .hm-b3d__hint.is-swiping .hm-b3d__hand { animation: none; }
  .hm-tk__text, .hm-tk__pill, .hm-b3d__shadow, .hm-b3d-stage { transition: none; }
  .hm-hero__stage, .hm-hero__video, .hm-line, .hm-hero__lead, .hm-hero__actions, .hm-net__lines, .hm-net__nodes { animation: none; }
}