/* The owner's UX and IA brief (CLAUDE_HANDOFF_UX_IA.md, 2026-11-02), the parts more than one page shares: Home's four-topic hero,
   the audience routes (Ecosystem), the four priority offerings (Ecosystem, Marketplace). Colours, sizes and
   radii are site.css tokens: warm white, charcoal and brand gold, never blue. Pictures are the site's own or its Unsplash photos
   (records: assets/unsplash/credits.json); the owner's two reference images gave the layout only. Motion: opacity only, none under
   reduced motion. */

/* ---------- Home: the topic row, on the hero's foot like the owner's image of 2026-11-02: a gold line across, the topic showing a solid gold tab on it. One tab slides along the
   line as the topics move (js/ia-hero.js places it). With a script the row comes after the topics on screen, though first in the page's order, so Tab still goes from a label into its topic;
   without one it stays on top as a list of jumps. ---------- */
.ia-hero { --ia-tabs: 59px; --ia-lift: 72px; position: relative; padding-top: var(--hdr); }
.js .ia-hero { display: flex; flex-direction: column; }
.js .ia-hero > .ia-hero-tabs { order: 2; }
.ia-hero-tabs { border-bottom: 3px solid var(--gold-mark); background: var(--bg); }
.ia-hero-tabs__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: end; padding-top: 10px; }
.ia-hero-tabs a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px;
  font-size: var(--t-small); font-weight: 600; line-height: 1.3; color: var(--ink-2);
  transition: color 0.25s var(--ease);
}
.ia-hero-tabs a:hover { color: var(--ink); }
.ia-hero-tabs a span { font-size: var(--t-cap); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-ink); transition: color 0.25s var(--ease); }
.ia-hero-tabs a[aria-selected="true"], .ia-hero-tabs a[aria-selected="true"] span { color: var(--bg); }
.ia-hero-tabs a:focus-visible { outline-offset: -3px; }
.ia-hero-tabs__mark {
  position: absolute; left: 0; top: 0; width: var(--ia-w, 0); height: var(--ia-h, 0); transform: translate(var(--ia-x, 0), var(--ia-y, 0)); border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--gold-mark);
  transition: transform 0.4s var(--ease), width 0.4s var(--ease);
}
html:not(.js) .ia-hero-tabs__mark { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ia-hero-tabs__mark, .ia-hero-tabs a, .ia-hero-tabs a span { transition: none; }
}

/* an address naming a topic (#hero-box) lands with the row that names the topics still in view */
.ia-hero .hm-hero, .ia-panel { scroll-margin-top: var(--ia-tabs); }
/* the first topic is Home's own hero: its first row made room for the header, which the topic row now does */
.ia-hero .hm-hero { grid-template-rows: 0 minmax(0, 1fr); padding-top: 0; }
.ia-hero .hm-hero__media { inset: 0; }
.ia-hero__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; color: var(--gold-ink); }
.ia-hero__more svg { width: 14px; height: 14px; }
.ia-hero__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Home: the other three topics ---------- */
.ia-panel { position: relative; overflow: hidden; background: var(--bg); }
.ia-panel + .ia-panel, .hm-hero + .ia-panel { border-top: 1px solid var(--line); }
.ia-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: clamp(40px, 7svh, 80px); }
.ia-panel__title { margin-top: 18px; font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.04em; }
.ia-panel__title span { display: block; color: var(--gold-mark); }
.ia-panel__lead { max-width: 54ch; margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.ia-panel .actions { margin-top: 28px; gap: 12px; }
/* with a script the four topics share one place, the same size, as tall as the tallest, so moving between them never moves the page below; js/ia-hero.js slides one out as the next
   comes in, and the one leaving stays visible for that 0.45s */
.js .ia-hero__slides { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.js .ia-hero__slides > * { grid-area: 1 / 1; min-width: 0; visibility: hidden; transition: visibility 0s linear 0.45s; }
.js .ia-hero__slides > .is-active { z-index: 1; visibility: visible; transition: visibility 0s; }
.js .hm-hero + .ia-panel, .js .ia-panel + .ia-panel { border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .ia-hero__slides > *, .js .ia-hero__slides > .is-active { transition: none; }
}
/* a short laptop screen: a little less air round the topics, so the row still stands in view */
@media (min-width: 1024px) and (max-height: 720px) {
  .ia-panel__grid { padding-block: 24px; }
}
/* on a desktop the hero stops a little short of the screen's foot (--ia-lift), so the topic row stands in full view (owner, 2026-11-02: "keep in little bit above so that people can see it properly") */
@media (min-width: 1024px) {
  .ia-hero .hm-hero { min-height: min(max(480px, calc(100svh - var(--hdr) - var(--ia-tabs) - var(--ia-lift))), 960px); }
  .js .ia-panel .ia-panel__grid { min-height: min(max(480px, calc(100svh - var(--hdr) - var(--ia-tabs) - var(--ia-lift))), 960px); }
}

/* the number and arrows, like the owner's image of 2026-11-02: a white cell and a brand-gold one, in the site's round language (as the header's Search and Contact us pill). On a desktop
   they sit at the right end of the topic row, over no topic's words or picture at any screen height, moved in only as far as clears the WhatsApp button; narrower they stand between the topics and the row. */
.ia-hero__ctrl-row .wrap { display: flex; justify-content: flex-end; }
html:not(.js) .ia-hero__ctrl-row { display: none; }
.ia-hero__ctrl { display: flex; overflow: hidden; height: 46px; border: 1px solid var(--gold-deep); border-radius: 999px; background: var(--bg); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent); }
.ia-hero__count { display: grid; place-items: center; width: 66px; padding-left: 4px; font-size: var(--t-body); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.ia-hero__arrows { display: flex; padding-right: 4px; background: var(--gold); }
.ia-hero__arrows button { display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; transition: background-color 0.2s var(--ease); }
.ia-hero__arrows button:hover { background: var(--gold-deep); }
.ia-hero__arrows button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.ia-hero__arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  .ia-hero { --ia-ctrl-in: max(0px, calc(84px - (100vw - min(100vw - 2 * var(--gutter), var(--max))) / 2)); }
  .ia-hero__ctrl-row { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; pointer-events: none; }
  .ia-hero__ctrl { margin-right: var(--ia-ctrl-in); pointer-events: auto; }
  .ia-hero-tabs__row { padding-right: calc(var(--ia-ctrl-in) + 176px); }
}
@media (max-width: 1023px) {
  .ia-hero__ctrl-row { padding-block: 0 24px; }
}

/* the four priority offerings as tiles */
.ia-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ia-tile {
  display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 188px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ia-tile:hover { border-color: var(--gold-mark); background: var(--bg); }
.ia-tile strong { margin-top: auto; font-family: var(--font-head); font-size: var(--t-h6); line-height: 1.2; letter-spacing: -0.02em; }
.ia-tile__line { font-size: var(--t-body); line-height: 1.45; color: var(--ink-2); }
.ia-mono {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-sm);
  background: var(--dark); color: var(--on-dark); font-family: var(--font-head); font-size: var(--t-small); font-weight: 700;
}
.ia-mono img { width: 78%; height: 78%; object-fit: contain; }

/* a picture beside the words: the site's own, in the Midnight frame */
.ia-frame { overflow: hidden; border-radius: var(--r-xl); background: var(--dark); }
.ia-frame img { width: 100%; height: 100%; object-fit: cover; }
/* the Yalla2X Box on gold rings, as on its own page */
.ia-boxart { position: relative; display: grid; place-items: center; min-height: 300px; }
.ia-boxart::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(90%, 520px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--gold-mark) 30%, transparent);
  box-shadow: 0 0 0 clamp(32px, 5vw, 72px) color-mix(in srgb, var(--gold-mark) 6%, transparent), 0 0 0 clamp(56px, 9vw, 128px) color-mix(in srgb, var(--gold-mark) 3%, transparent);
}
.ia-boxart img { position: relative; width: 100%; height: auto; }
.ia-models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ia-models li { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-small); font-weight: 600; line-height: 1.3; }

@media (max-width: 1023px) {
  .ia-panel__grid { grid-template-columns: minmax(0, 1fr); padding-block: 32px 40px; }
}
@media (max-width: 767px) {
  .ia-hero { --ia-tabs: 112px; }
  .ia-hero-tabs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-block: 8px; }
  .ia-hero-tabs a { min-height: 46px; padding: 8px 12px; }
  .ia-hero-tabs__mark { border-radius: var(--r-sm); }
  .ia-hero .hm-hero__copy { padding-top: 24px; }
  /* the topics share one height, so the longest sets it for all: on a phone the product tiles and the Box picture keep it close to the others */
  .ia-tile { min-height: 0; gap: 8px; padding: 14px; }
  .ia-tile strong { font-size: var(--t-kicker); }
  .ia-tile__line { font-size: var(--t-cap); }
  .ia-mono { width: 44px; height: 44px; }
  .ia-boxart { min-height: 200px; }
  /* the number and arrows on the left: the WhatsApp button keeps the right */
  .ia-hero__ctrl-row .wrap { justify-content: flex-start; }
}

/* ---------- Ecosystem: the audience routes ---------- */
.ia-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px); }
.ia-path {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38%; min-height: 380px; overflow: hidden;
  border-radius: var(--r-lg); background: var(--panel); isolation: isolate;
}
.ia-path--dark { background: var(--dark); color: var(--on-dark); }
.ia-path__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.2vw, 32px); }
.ia-path__who { padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.ia-path h3 { font-size: var(--t-h4); line-height: 1.12; letter-spacing: -0.03em; }
.ia-path h3 span { display: block; color: var(--gold-ink); }
.ia-path--dark h3 span { color: var(--gold); }
.ia-path p:not(.ia-path__who) { font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); }
.ia-path--dark p:not(.ia-path__who) { color: var(--on-dark-2); }
.ia-path__links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.ia-path__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--t-small); font-weight: 700; color: var(--gold-ink); }
.ia-path__links svg { flex: none; width: 14px; height: 14px; }
.ia-path__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ia-path--dark .ia-path__links a { color: var(--gold); }
.ia-path--dark :focus-visible { outline-color: var(--gold); }
/* the photo runs to the card's right edge, its left side cut on a slant, as in the owner's layout reference */
.ia-path__art { position: relative; min-height: 100%; clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); }
.ia-path__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1199px) {
  .ia-path-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-path { min-height: 280px; grid-template-columns: minmax(0, 1fr) 34%; }
}
@media (max-width: 479px) {
  .ia-path { grid-template-columns: minmax(0, 1fr) 26%; }
}

/* ---------- Ecosystem and Marketplace: the four priority offerings ---------- */
.ia-priority__title { font-size: var(--t-h4); line-height: 1.15; }
.ia-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(20px, 2vw, 28px); }
.ia-offer {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
  transition: border-color 0.2s var(--ease);
}
.ia-offer:hover { border-color: var(--gold-mark); }
.ia-offer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ia-offer__name { font-family: var(--font-head); font-size: var(--t-h6); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ia-offer__desc { font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); }
.ia-offer .link { margin-top: auto; padding-top: 8px; }
@media (max-width: 1199px) {
  .ia-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .ia-offers { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the header's menus (the brief, 2026-11-02): the priority offerings carry a gold square, the Company menu's longer list two columns ---------- */
.mega__link--priority strong::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: middle; background: var(--gold-mark); }
@media (min-width: 1366px) {
  .mega--company .mega__group ul { columns: 2; column-gap: 24px; }
  .mega--company .mega__group li { break-inside: avoid; }
}
/* the footer's legal row: its two longer labels (Privacy Policy, Terms & Conditions) need a third row at the narrowest phones */
@media (max-width: 359px) {
  .ftr__bottom nav { grid-template-columns: repeat(2, max-content); }
}