/* Inner-page hero: every page but Home. Layout from the owner's NEXORA reference (2026-10-22 07:20: "i need my all
   hero sections in the inner pages like this uploaded image… and give me the movements by some elements"): a white
   page; on the LEFT a short rule with a small spaced-caps eyebrow, a very large two-line title whose second line is
   set in a contrasting style, a grey paragraph, a dark pill button with an arrow and an outlined pill button with an
   arrow. Picture from the owner's second request (2026-10-22 08:36: "i need all my inner pages hero section image
   needs to be this uploaded image"): assets/figma-final/hero-network-woman.png, a woman-cyborg from the chest up,
   looking up and to the left, her face in the right part of the frame with a gold ring at her ear, blue and gold
   wire cubes, dots and threads on white around her. Shared by all ten inner pages under the ih- prefix.
   Text: each page's own eyebrow, title, line, strap and buttons, word for word (no stamp, cards or notes: this
   layout has none). The title is Space Grotesk 700 (the brand guide's Display weight; site-v4/fonts) at the owner's
   Display size (72/56/40 by breakpoint, from site.css) with its second line in the site's lighter heading grey in
   place of the reference's contrasting serif; everything else stays Inter at the owner's sizes (brand pass 2026-10-22).
   Picture: ONE <picture> rendered by tools/build_site_v4.py ({{inner_hero_media}}, files from
   tools/build_inner_hero_media.py): the full frame (woman-720/1024/1440/1920) with a head-and-shoulders crop
   (woman-phone-800) under 768px. Desktop: it fills the right 60% of the panel from under the fixed header to the
   panel's foot, cover-cropped with its height, placed (object-position, --ih-pic-x) so the whole head is on screen
   and the face sits in the right third of the screen; a soft mask feathers its left edge (transparent to
   --ih-fade-a, opaque from --ih-fade-b, both shares of the picture's width) and its top and bottom into the white, so
   there is no rectangle and nothing of the network reaches the text (the text's ink ends at about 48% of the width
   on every page at 1280-1440px, 51% at 1920px; the picture becomes visible from about 53%). Between 1024 and 1279px
   the lead narrows to 24em, the buttons tighten a little and the picture shifts a touch (--ih-pic-x 50%) so the head
   still fits right of the text; the picture's height is also capped at 60vw so a tall narrow screen does not grow
   the face past the text column, and the panel is capped with it (60vw plus the header), so at 1024x768 the hero is
   690px tall, not the full 768, and the art never floats in white under the picture.
   Movement (the owner's "movements by some elements"): over the network parts of the picture (left and lower
   areas, never the face) five translucent wire cubes and three dots drift slowly, and a pulse runs along two thin
   curves under the figure. All of it is transform and opacity (the pulse moves a dash along its path); the two
   nearer cubes carry a fixed blur for depth. Reduced motion: nothing drifts and the pulses are hidden.
   Layout: one screen tall on a desktop (the fixed header sits over the panel's top); from 1023px down the text comes
   first and the picture sits below it, full width, feathered on every side (16:10 on a tablet, the phone crop's
   own 16:15 on a phone). Page modifiers on <section class="ih">: ih--mid (Blog: an 18-character second line, one
   size down), ih--long (FAQ, Contact: a sentence-long title, each sentence on its own line, two sizes down). */

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

.ih {
  --ih-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ih-blue: #b8860b;                    /* was the picture's blue; now a deep brand gold (owner: no blue on the site) */
  --ih-gold: #d4952a;
  /* the title: the owner's Display step (site.css --t-display: 72px from 1200px, 56px from 768px, 40px below); a
     14-character line ("One ecosystem.", "AI Can Do Next") is about 330px at 40px, so it wraps at its space on a
     320px phone and fits a 390px one */
  --ih-title: var(--t-display);
  --ih-title-max: 10.5em;                /* the title's measure, in its own size */
  /* the picture on a desktop: its left edge as a share of the panel, where its frame sits in it (object-position x;
     the frame is wider than its box, so this picks which part shows), and its left feather as shares of its width */
  --ih-pic-left: 40%;
  --ih-pic-x: 45%;
  --ih-fade-a: 22%;
  --ih-fade-b: 38%;
}
/* Blog: "in plain language." is 18 characters, so one step down (H1: 56/44/32) keeps the title on two lines */
.ih--mid { --ih-title: var(--t-h1); }
/* FAQ, Contact: a sentence-long title, one step down like Blog (H1: 56/44/32), so the page's title is never smaller than
   the closing band's heading (h2.h1). On a desktop the measure is also capped at the width left of the picture's feather
   (the picture starts at 40% of the panel and shows from 22% of its own 60%, so from 53.2vw; 32px gap, 8px slack), so a
   sentence that does not fit on one line wraps (balanced, two lines a sentence) instead of running under the picture */
.ih--long { --ih-title: var(--t-h1); --ih-title-max: min(21em, calc(53.2vw - max(var(--gutter), (100vw - var(--max)) / 2) - 40px)); }   /* the text starts at the gutter, or at the 1680px column's edge on a wider screen */

/* ---------- the panel: edge to edge, one screen tall, the fixed header over its top ---------- */
/* one screen tall, capped at 1000px; on a desktop also capped at the picture's own cap (60vw plus the header, see
   .ih__pic), so on a tall narrow screen (5:4, 4:3, a portrait window) the panel ends where the picture ends and
   the cubes and curves, placed in shares of the panel, stay over the picture instead of a white strip under it */
.ih__panel {
  position: relative; isolation: isolate; overflow: hidden; background: #fff;
  display: flex; align-items: center;
  min-height: min(clamp(560px, 100svh, 1000px), calc(60vw + var(--hdr)));
}

/* ---------- text: the page's own eyebrow, title, strap, line and buttons, left, vertically centred ---------- */
/* the top padding clears the fixed header; the larger bottom padding lifts the block a little above the panel's
   centre, where the reference holds its text */
.ih__text { position: relative; z-index: 2; padding-top: calc(var(--hdr) + 32px); padding-bottom: calc(var(--hdr) + 56px); }
.ih__eyebrow {
  display: flex; align-items: center; gap: 22px; margin: 0 0 clamp(22px, 2.6vw, 36px);
  font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2);   /* 12px: #555553 on white is 7.5:1 */
}
/* owner, 2026-10-25: no line before the label */
.ih__title {
  max-width: var(--ih-title-max); margin: 0;
  font-family: var(--ih-head); font-weight: 700; font-size: var(--ih-title); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: pretty;
}
/* the second line: the contrasting style (the reference's serif) is the site's lighter heading grey here */
.ih__line2 { display: block; color: var(--gold-mark); }   /* owner, 2026-10-25: the heading's second line in the brand gold (was grey) */
.ih--long .ih__title { line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }   /* balance: no "say so." stranded on its own line */
/* the strap under the title (Marketplace's kicker; Research's capitals) */
.ih__strap { max-width: 30em; margin: clamp(14px, 1.6vw, 22px) 0 0; font-size: var(--t-lead); line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.ih__strap--caps { font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ih__lead {
  max-width: 29em; margin: clamp(18px, 2vw, 28px) 0 0;   /* 29em at 18px is 522px: under the brand's 65-character line */
  font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); text-wrap: pretty;
}
.ih__actions { margin-top: clamp(26px, 2.8vw, 40px); gap: 14px; }
.ih__actions .btn { min-height: 54px; padding: 0 26px; font-size: var(--t-body); gap: 0.7em; }

/* ---------- the art: the picture under its mask, two curves with a pulse, drifting cubes and dots ---------- */
.ih__net { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* the picture's box: from under the header to the panel's foot, the right 60%; its height is capped at 60vw so a
   tall narrow screen (5:4, or a portrait desktop window) does not scale the head up past the text column. The two
   masks multiply (intersect): the left feather (eased: thin, then quicker, then full) and a top and bottom feather */
.ih__pic {
  position: absolute; top: var(--hdr); right: 0; left: var(--ih-pic-left); z-index: 0;
  height: min(calc(100% - var(--hdr)), 60vw);
  -webkit-mask-image:
    linear-gradient(90deg, transparent var(--ih-fade-a),
      rgba(0, 0, 0, 0.22) calc(var(--ih-fade-a) + (var(--ih-fade-b) - var(--ih-fade-a)) * 0.4),
      rgba(0, 0, 0, 0.72) calc(var(--ih-fade-a) + (var(--ih-fade-b) - var(--ih-fade-a)) * 0.78),
      #000 var(--ih-fade-b)),
    linear-gradient(180deg, transparent, #000 6%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent var(--ih-fade-a),
      rgba(0, 0, 0, 0.22) calc(var(--ih-fade-a) + (var(--ih-fade-b) - var(--ih-fade-a)) * 0.4),
      rgba(0, 0, 0, 0.72) calc(var(--ih-fade-a) + (var(--ih-fade-b) - var(--ih-fade-a)) * 0.78),
      #000 var(--ih-fade-b)),
    linear-gradient(180deg, transparent, #000 6%, #000 84%, transparent);
  mask-composite: intersect;
}
/* the frame fills its box by height (it is wider than the box), the top kept whole: on the rare screen where the
   box is wider than the frame's shape, the crop then comes off the bottom, never the head */
.ih__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ih-pic-x) 0; background: #fff; }

/* the curves: drawn in a 1000 x 600 box stretched over the panel, so each runs under the figure from the panel's
   lower middle to its right edge whatever the screen (both stay below 70% of the height: under the face, over the
   shoulders and the network); the stroke does not scale with the box. The pulse is a 60/1000 dash sliding along the
   same path (pathLength="1000" on the pulse paths normalises the dash units) under a wider, fainter glow dash */
.ih__curve {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible;
  /* the curves rise out of the panel's foot: the same bottom feather as the picture, so no line is cut flat */
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent);
}
.ih__curve path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ih__curve-line { stroke: var(--ih-gold); stroke-width: 1; stroke-opacity: 0.45; }
.ih__curve-line--blue { stroke: var(--ih-blue); stroke-opacity: 0.3; }
.ih__curve-glow, .ih__curve-pulse { stroke: var(--ih-gold); stroke-dasharray: 60 940; stroke-dashoffset: 1000; animation: ih-pulse 14s linear infinite; }
.ih__curve-glow { stroke-width: 7; stroke-opacity: 0.18; }
.ih__curve-pulse { stroke-width: 2; stroke-opacity: 0.9; }
.ih__curve-pulse--blue { stroke: var(--ih-blue); animation-delay: -7s; animation-duration: 18s; }
@keyframes ih-pulse { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* the curves, cubes and dots sit in one wrapper (tools/build_site_v4.py), placed like the other layers of .ih__net; it is a
   stacking context while it fades in (motion spec B6), so it carries the children's z-index itself to stay over the picture */
.ih__deco { position: absolute; inset: 0; z-index: 2; }

/* the cubes: translucent wire cubes in the picture's blue and gold, placed left of the face or under it; each has
   its own slow drift (transform only, a few pixels), a negative delay so none starts from rest together, and the
   nearer ones a fixed blur for depth */
.ih-bit { position: absolute; z-index: 2; aspect-ratio: 1; color: var(--ih-blue); opacity: 0.8; will-change: transform; }
.ih-bit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ih-bit path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ih-bit path:first-child { fill: currentColor; fill-opacity: 0.12; }
.ih-bit--gold { color: var(--ih-gold); }
.ih-bit--near { filter: blur(1.2px); opacity: 0.7; }
.ih-bit--nearer { filter: blur(2.4px); opacity: 0.6; }
.ih-bit--1 { left: 57%; top: 72%; width: 40px; animation: ih-drift-a 34s ease-in-out -6s infinite; }
.ih-bit--2 { left: 64%; top: 87%; width: 26px; animation: ih-drift-b 30s ease-in-out -14s infinite; }
.ih-bit--3 { left: 91%; top: 76%; width: 72px; animation: ih-drift-c 40s ease-in-out -9s infinite; }
.ih-bit--4 { left: 72%; top: 11%; width: 30px; animation: ih-drift-b 36s ease-in-out -20s infinite; }   /* over the network above the head */
.ih-bit--5 { left: 56%; top: 56%; width: 20px; animation: ih-drift-a 28s ease-in-out -3s infinite; }
/* the dots: small glowing points that drift and breathe (opacity) */
.ih-dot { position: absolute; z-index: 2; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--ih-blue); box-shadow: 0 0 14px 4px rgba(184, 134, 11, 0.25); will-change: transform, opacity; }
.ih-dot--gold { background: var(--ih-gold); box-shadow: 0 0 14px 4px rgba(212, 149, 42, 0.25); }
.ih-dot--1 { left: 61%; top: 80%; animation: ih-breathe 11s ease-in-out -2s infinite; }
.ih-dot--2 { left: 84%; top: 93%; width: 7px; animation: ih-breathe 13s ease-in-out -7s infinite; }
.ih-dot--3 { left: 60%; top: 86%; width: 9px; animation: ih-breathe 12s ease-in-out -4s infinite; }
@keyframes ih-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(10px, -14px, 0) rotate(5deg); } }
@keyframes ih-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-12px, -9px, 0) rotate(-4deg); } }
@keyframes ih-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8px, 12px, 0) scale(1.04); } }
@keyframes ih-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.3; } 50% { transform: translate3d(-6px, -10px, 0) scale(1.08); opacity: 0.8; } }

/* the entrance (motion spec M1, B9; keyframes in css/motion.css): the title line rises out of a blur from 0.12, its second
   line settles ~110ms behind it (transform only: it shares the h1's fade and blur), then the lead and the buttons; the
   picture settles from 1.04 (transform only, it is the largest paint); the decoration fades in once, its own drifts
   untouched. Readable by about 470ms, still by 1.1s. Delays count from first paint; nothing runs under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ih__eyebrow { animation: m-fade var(--m-t-m) var(--m-ease) backwards; }
  .ih__title { animation: m-line var(--m-t-l) 80ms var(--m-ease) backwards; }
  .ih__title .ih__line2 { animation: m-lag var(--m-t-l) 190ms var(--m-ease) backwards; }
  .ih__strap { animation: m-fade var(--m-t-m) 300ms var(--m-ease) backwards; }
  .ih__lead { animation: m-fade var(--m-t-m) 380ms var(--m-ease) backwards; }
  .ih__actions > :nth-child(1) { animation: m-slide var(--m-t-m) 480ms var(--m-ease) backwards; }
  .ih__actions > :nth-child(2) { animation: m-slide var(--m-t-m) 560ms var(--m-ease) backwards; }
  .ih__pic { animation: m-settle var(--m-t-xxl) var(--m-ease) backwards; }
  .ih__deco { animation: m-appear 600ms 400ms var(--m-ease) backwards; }
}

@media (prefers-reduced-motion: reduce) {
  .ih-bit, .ih-dot, .ih__curve-glow, .ih__curve-pulse { animation: none; }
  .ih__curve-glow, .ih__curve-pulse { display: none; }
}

/* ---------- responsive ---------- */
/* a narrower desktop (1024-1279px): the lead gives up a little measure and the frame slides a touch so the whole
   head still sits right of the text with the feather between them */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ih { --ih-pic-x: 50%; --ih-fade-a: 22%; --ih-fade-b: 36%; }
  .ih__lead { max-width: 24em; }
  .ih__actions .btn { min-height: 50px; padding: 0 20px; }   /* two buttons side by side end before the picture */
}
/* tablet and phone: the text first, full width, then the picture below it in its own box, feathered on every side;
   the frame is centred, so the head is whole; the two cubes that sat left of the face on a desktop move to the
   picture's left edge, clear of the face */
@media (max-width: 1023px) {
  /* the title sizes step down with the tokens themselves (56px from 768px, 40px below; one and two steps down for ih--mid and ih--long) */
  .ih--long { --ih-title-max: 21em; }   /* the text is full width here: no picture to its right */
  .ih__panel { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }   /* stretch: the art box has no content width of its own */
  .ih__text { padding-top: calc(var(--hdr) + 36px); padding-bottom: 0; }
  .ih__net { order: 1; position: relative; inset: auto; aspect-ratio: 16 / 10; margin-top: 24px; }   /* after the text */
  .ih__pic {
    inset: 0; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent);
  }
  .ih__pic img { object-position: 50% 0; }
  .ih__curve { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
  .ih-bit--3 { width: 56px; }
  .ih-bit--4 { left: 8%; top: 22%; }
  .ih-bit--5 { left: 12%; top: 64%; }
}
@media (max-width: 767px) {
  .ih__net { aspect-ratio: 800 / 751; margin-top: 16px; }   /* the phone crop's own shape: the head and shoulders, whole */
  .ih__pic img { object-position: 50% 50%; }
  .ih-bit--1 { width: 32px; }
  .ih-bit--3 { width: 44px; }
}
@media (max-width: 479px) {
  .ih__actions .btn { flex: 1 1 100%; }
}
/* a short desktop screen (1366x657, 1280x720): the text block keeps clear of the header and the fold */
@media (min-width: 1024px) and (max-height: 720px) {
  .ih__text { padding-top: calc(var(--hdr) + 16px); padding-bottom: calc(var(--hdr) + 24px); }
  .ih__eyebrow { margin-bottom: 18px; }
  .ih__actions { margin-top: 24px; }
}