/* XRcade.eu */

@font-face { font-family: "Orbitron"; src: url("../assets/fonts/orbitron-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/exo2-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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: "Exo 2"; src: url("../assets/fonts/exo2-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/exo2-vietnamese.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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: "Exo 2"; src: url("../assets/fonts/exo2-cyrillic.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Share Tech Mono"; src: url("../assets/fonts/share-tech-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0a0e17;
  --bg-alt: #0d1320;
  --surface: rgba(20, 30, 48, 0.72);
  --surface-solid: #111a2a;
  --line: rgba(63, 192, 238, 0.18);
  --line-strong: rgba(63, 192, 238, 0.45);
  --text: #eef3f8;
  --muted: #9aa8b8;
  --accent: #3fc0ee;
  --accent-hi: #7fdcff;
  --accent-ink: #04202c;
  --orange: #ff8a3d;
  --green: #2ee59d;
  /* Corner radii (tight set, see issue #9) */
  --r-card: 4px;   /* cards, windows, feature rows, shots, form fields */
  --r-btn: 3px;    /* buttons, filters */
  --r-chip: 3px;   /* chips, status pills */
  --r-lg: 6px;     /* large panels: .way, .gamecard, .hud */
  --chamfer: 10px; /* corner cut on chamfered accents */
  --wrap: 1200px;
  --nav-h: 68px;   /* header row: logo, page links, language, button */
  --nav-sub: 40px; /* second header row with the sections of this page, shown once scrolled */
  --font-head: "Orbitron", "Segoe UI", sans-serif;
  --font-body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchor targets land below the grown header (both rows), which is what shows once the page has scrolled. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--nav-sub) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--font-head); letter-spacing: .01em; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 700; }
h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; letter-spacing: .005em; }
.way h3, .pillar h3, .brandrow h3 { font-family: var(--font-head); letter-spacing: .01em; }
p { margin: 0 0 1em; }
strong { color: #fff; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-btn); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-btn); z-index: 100; }
.skip:focus { inset-inline-start: 8px; }
.accent { color: var(--accent); text-shadow: 0 0 32px rgba(63, 192, 238, .45); }
.eyebrow { font: 400 .82rem/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
.eyebrow::before { content: "// "; opacity: .6; }
.lead { font-size: 1.16rem; color: #c9d4e0; max-width: 56ch; }
.fine { font-size: .8rem; color: var(--muted); }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--lg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 14px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.4em; border-radius: var(--r-btn); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: 600 .98rem/1 var(--font-body); cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; box-shadow: 0 0 0 rgba(63,192,238,0); }
.btn:hover { background: var(--accent-hi); color: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(63, 192, 238, .35); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(63, 192, 238, .1); color: #fff; box-shadow: none; }
.btn--sm { padding: .6em 1em; font-size: .9rem; }
.btn[hidden] { display: none; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 14, 23, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.nav.is-scrolled { border-bottom-color: var(--line-strong); box-shadow: 0 10px 30px -20px rgba(63, 192, 238, .5); }
/* Two rows, one grid: the logo keeps the first column across both of them, so it grows into the
   section row instead of sitting above it. */
.nav__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--nav-h) auto; align-items: center; column-gap: 24px; }
.nav__logo { grid-area: 1 / 1 / 3 / 2; display: flex; align-items: center; }
.nav__logo img { height: 51px; width: auto; }
/* The menu is only a box on narrow screens; on wide ones its children take their own grid cells,
   so the page links can sit in the middle column while the language and the button stay right. */
.nav__menu { display: contents; }
.nav__pages { grid-area: 1 / 2; justify-self: center; display: flex; align-items: center; gap: 6px; }
.nav__actions { grid-area: 1 / 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav__toggle { grid-area: 1 / 3; justify-self: end; }
/* Page links (Platform, Solution) and section links share one look: uppercase, an accent underline that
   grows in on hover and stays, glowing, on the current page or the section in view. */
.nav__page, .nav__sub a { position: relative; display: inline-block; padding: .55em .8em; color: #c9d4e0; font: 600 .82rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.nav__page::after, .nav__sub a::after { content: ""; position: absolute; left: .8em; right: .8em; bottom: .2em; height: 2px; border-radius: var(--r-chip); background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease, box-shadow .25s; }
html[dir="rtl"] .nav__page::after, html[dir="rtl"] .nav__sub a::after { transform-origin: right center; }
.nav__page:hover, .nav__sub a:hover { color: #fff; }
.nav__page:hover::after, .nav__sub a:hover::after { transform: scaleX(1); }
.nav__page[aria-current="page"], .nav__sub a.is-active { color: var(--accent); }
.nav__page[aria-current="page"]::after, .nav__sub a.is-active::after { transform: scaleX(1); box-shadow: 0 0 12px var(--accent); }
.nav__actions > .btn { color: var(--accent-ink); margin-inline-start: 12px; }
.nav__actions > .btn.is-active { box-shadow: 0 0 18px rgba(63, 192, 238, .55); background: var(--accent-hi); }
/* Section row: folded away at the top of the page, slides in once the page is scrolled. No rule
   above it, so it reads as the lower half of one header rather than a second bar. */
.nav__sub { grid-area: 2 / 1 / 3 / 4; max-width: 100%; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease, margin .3s ease; }
.nav.is-scrolled .nav__sub { max-height: var(--nav-sub); opacity: 1; margin-top: -10px; }
/* Centred under the current page link rather than on the header: js/main.js measures that link and
   sets --sub-shift, clamped so the row never leaves the page gutters. */
.nav__sub-inner { display: flex; align-items: flex-start; justify-content: center; gap: 2px; width: max-content; max-width: 100%; margin-inline: auto; height: var(--nav-sub); transform: translateX(var(--sub-shift, 0px)); }
.nav__sub a { padding-block: .3em; font-size: .76rem; }
.nav__sub-home { display: inline-flex; align-items: center; padding-inline: .6em; color: #fff; }
.nav__sub-home .ico { width: 15px; height: 15px; }
.nav__sub-home::after { display: none; } /* an icon needs no underline to say where it goes */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__sub, .nav__page, .nav__page::after, .nav__sub a, .nav__sub a::after { transition: none; }
}

/* Language switcher: a <details> dropdown in the menu, listing every language by its native name */
.lang { position: relative; margin-inline-start: 6px; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: .55em .7em; border: 1px solid var(--line); border-radius: var(--r-btn); color: #c9d4e0; font: .8rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: #fff; border-color: var(--line-strong); }
.lang summary .ico { width: 1.1em; height: 1.1em; color: var(--accent); }
.lang summary .chev { color: var(--muted); transition: transform .25s; }
.lang[open] summary .chev { transform: rotate(180deg); }
.lang__list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; margin: 0; padding: 6px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 2px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), 0 0 40px -20px rgba(63, 192, 238, .5); }
.lang__list a { display: block; padding: 8px 12px; border-radius: var(--r-btn); color: #c9d4e0; font-size: .9rem; white-space: nowrap; text-align: start; transition: background .15s, color .15s; }
.lang__list a:hover { background: rgba(63, 192, 238, .08); color: #fff; }
.lang__list a[aria-current] { color: var(--accent); background: rgba(63, 192, 238, .1); }
.lang__list a[aria-current]::after { content: "\2713"; float: inline-end; opacity: .8; }
.nav__toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: transform .2s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
/* Full-bleed venue photo behind the headline (issue #10). The photo is darkened on the left for the copy and
   fades into the page background at the bottom, where the "See it live" strip overlaps it. */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(640px, 85vh, 900px); padding: clamp(48px, 8vw, 96px) 0 clamp(120px, 14vw, 180px); overflow: hidden; background: var(--bg); }
.hero__photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; filter: saturate(1.2) contrast(1.06); }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(10, 14, 23, .25) 0%, transparent 16%, transparent 66%, var(--bg) 100%),
  linear-gradient(90deg, rgba(10, 14, 23, .92) 0%, rgba(10, 14, 23, .7) 45%, rgba(10, 14, 23, .25) 100%); }
html[dir="rtl"] .hero__shade { background:
  linear-gradient(180deg, rgba(10, 14, 23, .25) 0%, transparent 16%, transparent 66%, var(--bg) 100%),
  linear-gradient(270deg, rgba(10, 14, 23, .92) 0%, rgba(10, 14, 23, .7) 45%, rgba(10, 14, 23, .25) 100%); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; background: radial-gradient(50% 60% at 22% 30%, rgba(63, 192, 238, .2), transparent 70%), radial-gradient(40% 50% at 85% 20%, rgba(255, 138, 61, .13), transparent 70%); pointer-events: none; }
html[dir="rtl"] .hero::before { background: radial-gradient(50% 60% at 78% 30%, rgba(63, 192, 238, .2), transparent 70%), radial-gradient(40% 50% at 15% 20%, rgba(255, 138, 61, .13), transparent 70%); }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 75%); opacity: .25; pointer-events: none; }
.hero__inner { position: relative; width: min(var(--wrap), 100% - 40px); }
.hero__copy { max-width: 620px; }
.hero__copy h1, .hero__copy .lead, .hero__facts { text-shadow: 0 2px 18px rgba(4, 6, 12, .7); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.8rem 0 2.2rem; }
.hero__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: .86rem; color: var(--muted); }
.hero__facts strong { display: block; font: 600 .95rem var(--font-head); color: var(--text); letter-spacing: .03em; }


/* "See it live" strip: the first thing below the hero, so the hero owns the first screen */
/* Cancels its own top padding when jumped to, so the eyebrow lands under the header instead of a
   screenful of air. */
.live { position: relative; z-index: 2; scroll-margin-top: calc(-1 * clamp(64px, 9vw, 120px)); }
/* The section lines up with every other one; the clip sits centred in a card of its own. */
.live__card { display: flex; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); }
.live__media { width: min(860px, 100%); }

.hud { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #05080e; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -20px rgba(63, 192, 238, .35); }
.hud__bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font: .74rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: rgba(63, 192, 238, .05); }
.hud__tag { margin-inline-start: auto; color: var(--accent); }
.hud video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
/* Chapter bar under the video: a seekable progress track, then LOBBY > GAME > SCORE */
.chapters { margin: 0; border-top: 1px solid var(--line); }
.chapters__track { position: relative; height: 3px; background: var(--line); cursor: pointer; touch-action: none; }
.chapters__track::before { content: ""; position: absolute; inset: -8px 0; } /* a taller hit area than the 3px line */
.chapters__fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none; }
.chapters__tick { position: absolute; top: -2px; width: 2px; height: 7px; margin-inline-start: -1px; background: var(--line-strong); pointer-events: none; }
.chapters__list { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 14px; }
.chapters__btn { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: start; cursor: pointer; transition: color .2s; }
.chapters__btn:focus-visible { outline-offset: 6px; }
.chapters__label { display: inline-block; position: relative; padding-bottom: 5px; font: .78rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.chapters__label::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: var(--r-chip); background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease, box-shadow .25s; }
html[dir="rtl"] .chapters__label::after { transform-origin: right center; }
.chapters__btn:hover .chapters__label { color: var(--text); }
.chapters__btn.is-active .chapters__label { color: var(--accent); }
.chapters__btn.is-active .chapters__label::after { transform: scaleX(1); box-shadow: 0 0 12px var(--accent); }
.chapters__text { display: block; margin-top: 4px; font: .74rem/1.4 var(--font-body); color: var(--muted); }
.chapters__arrow { width: 1rem; height: 1rem; margin-top: 1px; color: var(--line-strong); }
html[dir="rtl"] .chapters__arrow { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .chapters__btn, .chapters__label, .chapters__label::after { transition: none; }
}
@media (max-width: 600px) {
  .chapters__list { gap: 6px; padding: 10px 12px 12px; }
  .chapters__label { font-size: .7rem; letter-spacing: .1em; }
  .chapters__text { font-size: .68rem; line-height: 1.35; }
  .chapters__arrow { width: .85rem; height: .85rem; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dot--live { background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* Sections */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: 0 0 clamp(40px, 6vw, 72px); }
.section--first { padding-top: clamp(40px, 6vw, 76px); } /* opens a page, so it needs less air above */
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head p:last-child { color: #c9d4e0; font-size: 1.06rem; margin-bottom: 0; }

.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.card p:last-child { margin-bottom: 0; }
.card p { color: #c0ccd9; font-size: .97rem; }
.chip { display: inline-block; margin-top: 14px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); font: .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.chip--solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.ticks { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: .6em; }
.ticks li { position: relative; padding-inline-start: 1.7em; color: #c0ccd9; font-size: .97rem; text-align: start; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .42em; width: .95em; height: .55em; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) scale(.8); transform-origin: left center; }
html[dir="rtl"] .ticks li::before { inset-inline-start: .3em; transform-origin: center; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pillar { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px 30px; }
.pillar__ico { display: block; width: 36px; height: 36px; color: var(--accent); }
/* The sequence number stays as a faint watermark in the top corner (issue #19) */
.pillar__n { position: absolute; top: 12px; inset-inline-end: 18px; font: 700 3rem var(--font-head); line-height: 1; color: rgba(63, 192, 238, .12); pointer-events: none; user-select: none; }
.pillar h3 { margin-top: 18px; font-size: 1.15rem; }
.pillar p { color: var(--muted); font-size: .97rem; margin: 0; }

/* Architecture (issue #18)
   Three layouts, all wired with 1px pseudo-element connectors (logical insets, so RTL mirrors for free):
   wide   (>= 1000px): hall card left, a 90px connector column, the five targets stacked right.
                       A vertical bus runs down the middle of the column from the first to the last target's
                       centre; a stub joins the hall card to it and one stub per target leaves it.
   medium (640-999px): hall card full width, a drop from its bottom centre to a horizontal bus, and the five
                       targets in one compact row, each hanging from the bus.
   narrow (< 640px):   hall card, then a tree: one vertical bus down the left, a short stub into each target. */
.arch { --arch-gap: 12px; --arch-fan: 90px; --arch-bus: 14px; --arch-drop: 28px; display: grid; grid-template-columns: minmax(0, 1fr) var(--arch-fan) minmax(0, 1fr); align-items: center; }
.arch > .card--cloud { grid-column: 1 / -1; }
.arch > .card--hall { grid-area: 3 / 1; }
.arch > .arch__fan { grid-area: 3 / 2; }
.arch > .arch__targets { grid-area: 3 / 3; }
.arch .card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.arch .card__head .ico--lg, .arch .card__head h3 { margin: 0; }
.arch .card__head h3 { color: var(--accent); }
/* Two equal columns, so the dashed line lands exactly between the two arrows however long the
   labels are (centring the pair instead would push their seam off by half the length difference). */
.arch__link { grid-area: 2 / 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 14px 0; font: .74rem var(--font-mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; position: relative; }
.arch__link::before { content: ""; position: absolute; inset-inline-start: 50%; top: 0; bottom: 0; border-inline-start: 1px dashed var(--line-strong); }
/* No background here: the labels sit clear of the line, and a filled box starting on the line
   would paint over the dashes (the spans come after the pseudo-element). */
.arch__link span { position: relative; }
.arch__link span:first-child { justify-self: end; padding-inline-end: 14px; }
.arch__link span:last-child { justify-self: start; padding-inline-start: 14px; }
.card--cloud { border-color: rgba(255, 138, 61, .35); }
.card--cloud .ico--lg, .card--cloud .chip, .arch .card--cloud .card__head h3 { color: var(--orange); }
.card--cloud .chip { border-color: rgba(255, 138, 61, .45); }
.card--hall { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-color: var(--line-strong); box-shadow: 0 0 60px -20px rgba(63, 192, 238, .5); }
/* A glimpse of the dashboard in the height the target column lends this card. It only ever takes
   space that is already there: flex-shrink with min-height 0 keeps it from making the card taller. */
.card__shot { position: relative; flex: 1 1 0; min-height: 0; align-self: stretch; margin: 18px 0 0; overflow: hidden; border: 1px solid var(--line); border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); border-bottom: 0; }
/* Wider than the frame on purpose: at 1:1 the whole dashboard shrinks to a smudge, so it is shown
   at about half size and the cut edges are dissolved rather than sliced. */
.card__shot img { width: 168%; max-width: none; height: 100%; object-fit: cover; object-position: left top; }
.card__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(to bottom, transparent 30%, rgba(13, 19, 32, .95) 96%),
    linear-gradient(to right, transparent 55%, rgba(13, 19, 32, .92) 97%);
  mask-image: linear-gradient(to bottom, transparent 28%, #000 85%), linear-gradient(to right, transparent 52%, #000 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 85%), linear-gradient(to right, transparent 52%, #000 92%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
  pointer-events: none;
}
/* The dashboard in the picture is mirrored too, so the kept corner and the fade swap sides. */
html[dir="rtl"] .card__shot img { object-position: right top; }
html[dir="rtl"] .card__shot::after {
  background: linear-gradient(to bottom, transparent 30%, rgba(13, 19, 32, .95) 96%),
    linear-gradient(to left, transparent 55%, rgba(13, 19, 32, .92) 97%);
  mask-image: linear-gradient(to bottom, transparent 28%, #000 85%), linear-gradient(to left, transparent 52%, #000 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 85%), linear-gradient(to left, transparent 52%, #000 92%);
}
/* Connector column: the stub from the hall card's edge to the bus */
.arch__fan { align-self: stretch; min-height: 300px; position: relative; }
.arch__fan::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 50%; height: 1px; background: var(--line-strong); }
.arch__targets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--arch-gap); position: relative; }
.arch__targets li { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
/* ::before is the stub from the bus into the target (with an accent dot at the target edge), ::after the bus segment
   this target owns: from the previous target's bottom edge (across the gap) to its own bottom edge, trimmed to the
   centre line on the first and last target so the bus starts and ends exactly on a stub. */
.arch__targets li::before { content: ""; position: absolute; inset-inline-start: calc(var(--arch-fan) / -2); top: calc(50% - 2px); width: calc(var(--arch-fan) / 2); height: 5px; pointer-events: none;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat, radial-gradient(circle, var(--accent) 45%, transparent 55%) 100% 50% / 5px 5px no-repeat; }
html[dir="rtl"] .arch__targets li::before { background-position: 100% 50%, 0 50%; }
.arch__targets li::after { content: ""; position: absolute; inset-inline-start: calc(var(--arch-fan) / -2); top: calc(-1 * var(--arch-gap)); bottom: 0; width: 1px; background: var(--line-strong); pointer-events: none; }
.arch__targets li:first-child::after { top: 50%; }
.arch__targets li:last-child::after { bottom: 50%; }
.arch__targets .ico { width: 26px; height: 26px; color: var(--accent); }
.arch__targets strong { display: block; font-size: .98rem; }
.arch__targets span { font-size: .86rem; color: var(--muted); }

/* Two ways */
.ways { display: grid; gap: 28px; }
.way { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.way--dash { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
.way h3 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; margin-bottom: .2em; }
.way h3 .ico { color: var(--accent); width: 28px; height: 28px; }
.way__tag { font: .78rem var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.way__media { display: flex; justify-content: center; }
.phone { width: min(250px, 70%); border-radius: calc(var(--r-lg) + 10px); padding: 10px; background: #1a2232; border: 1px solid #2c3a52; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 50px -15px rgba(63,192,238,.4); }
.phone img { border-radius: var(--r-lg); aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }

.window { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid #2c3a52; background: #fff; box-shadow: 0 30px 70px -25px rgba(0,0,0,.8), 0 0 50px -20px rgba(63,192,238,.35); width: 100%; }
.window--dark { background: #05080e; }
.window__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #151d2c; border-bottom: 1px solid #2c3a52; }
.window__bar i { width: 9px; height: 9px; border-radius: 50%; background: #34435c; }
.window__bar span { margin-inline-start: 8px; font: .7rem var(--font-mono); letter-spacing: .1em; color: var(--muted); }
.window img { width: 100%; }

/* Features */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter { background: transparent; border: 1px solid var(--line); color: #c9d4e0; border-radius: var(--r-btn); padding: .5em 1.05em; font: 500 .88rem var(--font-body); cursor: pointer; transition: all .15s; }
.filter:hover { border-color: var(--line-strong); color: #fff; }
.filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.filter--util { margin-inline-start: auto; border-style: dashed; }
.features { display: grid; gap: 10px; }
.feature { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.feature[hidden] { display: none; }
.feature[open] { border-color: var(--line-strong); box-shadow: 0 0 50px -25px rgba(63, 192, 238, .6); }
.feature summary { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 300px) minmax(0, 1fr) 22px; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; }
.feature summary::-webkit-details-marker { display: none; }
.feature summary > .ico:first-child { width: 24px; height: 24px; color: var(--accent); }
.feature__t { font: 600 1rem var(--font-head); letter-spacing: .02em; }
.feature__s { color: var(--muted); font-size: .95rem; }
.chev { color: var(--muted); transition: transform .25s; }
.feature[open] .chev { transform: rotate(180deg); color: var(--accent); }
.feature__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-block: 6px 28px; padding-inline: 66px 22px; }
.feature__body--single { grid-template-columns: minmax(0, 78ch); display: block; max-width: calc(78ch + 88px); }
.feature__body p { color: #c9d4e0; }
.feature[open] .feature__body { animation: reveal .3s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }

/* Your brand: a branded venue headset on the left, the copy on the right */
.brandrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.brandrow__photo { margin: 0; }
.brandrow__photo picture { display: block; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -30px rgba(63, 192, 238, .45); }
.brandrow__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.brandrow__photo figcaption { margin-top: 12px; font-size: .8rem; color: var(--muted); }
.brandrow__copy > p { color: #c9d4e0; }
.brandrow h3 { margin-top: 1.6em; font-size: 1.15rem; }

/* Cloud */
.status { display: inline-flex; align-items: center; gap: 8px; font: .76rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status--features { color: var(--accent); }
/* One card, so the nine lines read as two columns rather than one long list. */
.cloudcard__list { display: block; columns: 2; column-gap: 44px; margin-top: 1.2em; } /* block, or the .ticks grid wins */
.cloudcard__list li { break-inside: avoid; margin-bottom: .75em; }
.cloudcard__more { margin: 1.4em 0 0; padding-top: 1.2em; border-top: 1px solid var(--line); font: .95rem var(--font-mono); letter-spacing: .04em; color: var(--accent); }

/* Games */
/* Games: a card per title, so the library can grow without redrawing the section. */
.gamegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.gamecard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); }
.gamecard__art { position: relative; aspect-ratio: 16 / 9; background: #05080e; }
.gamecard__art img { width: 100%; height: 100%; object-fit: cover; }
.gamecard__body { flex: 1; padding: clamp(20px, 2.4vw, 28px); }
.gamecard__body h3 { margin-bottom: .15em; }
.gamecard__by { margin-bottom: .9em; font: .8rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gamecard__body > p { color: #c9d4e0; font-size: .97rem; }
.gamecard__chip { position: absolute; inset-inline-end: 14px; top: 14px; margin: 0; }
#games .fine { margin-top: 18px; }

/* Getting started */
.kb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps { list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; border-top: 1px dashed var(--line-strong); }
.steps li { position: relative; padding-inline-end: 24px; }
.steps span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); color: var(--accent); font: 700 1rem var(--font-head); margin-bottom: 16px; box-shadow: 0 0 24px -6px var(--accent); position: relative; }
.steps p { color: var(--muted); font-size: .95rem; margin: 0; }

/* Contact */
.section--cta { background: radial-gradient(60% 80% at 15% 0%, rgba(63, 192, 238, .16), transparent 70%), radial-gradient(50% 70% at 100% 100%, rgba(255, 138, 61, .1), transparent 70%), var(--bg-alt); border-top: 1px solid var(--line); }
html[dir="rtl"] .section--cta { background: radial-gradient(60% 80% at 85% 0%, rgba(63, 192, 238, .16), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(255, 138, 61, .1), transparent 70%), var(--bg-alt); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact__copy p { color: #c9d4e0; }
.contact__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0; }
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: .86rem; font-weight: 500; color: #c9d4e0; }
.opt { color: var(--muted); font-weight: 400; font-size: .78rem; }
.form input, .form select, .form textarea { width: 100%; background: rgba(5, 8, 14, .7); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: .78em .9em; color: var(--text); font: 400 1rem var(--font-body); transition: border-color .15s, box-shadow .15s; }
.form select option { background: var(--surface-solid); }
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 192, 238, .2); }
.form .invalid { border-color: #ff6b6b; }
.form .btn { justify-self: start; }
.hp { position: absolute !important; inset-inline-start: -9999px; }
.form__status { margin: 0; font-size: .92rem; min-height: 1.4em; }
/* The button is disabled while a message is on its way. */
.form .btn:disabled { opacity: .45; cursor: not-allowed; }
.form .btn:disabled:hover { background: var(--accent); transform: none; box-shadow: none; }
.form__status.ok { color: var(--green); }
.form__status.err { color: #ff8f8f; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 36px 0; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.footer__inner > img { height: 28px; width: auto; }
.footer__inner > p { margin: 0; color: var(--muted); font-size: .9rem; }
.footer nav { display: flex; gap: 20px; margin-inline-start: auto; font-size: .9rem; }
.footer nav a { color: #c9d4e0; }
.footer .fine { width: 100%; }

/* Chamfered accents: a corner cut top-right and bottom-left on the hero HUD, the Hall Manager card and primary buttons.
   clip-path also clips box-shadow and the border along the cut, so these elements drop their outer glow and
   redraw the cut edge with a pseudo-element. */
.hud, .card--hall, .btn:not(.btn--ghost) {
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  box-shadow: none;
}
.btn--sm { --chamfer: 7px; }
.btn:not(.btn--ghost):hover { box-shadow: none; }
.btn:not(.btn--ghost):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -5px; }
.hud, .card--hall { position: relative; --cut: var(--line-strong); }
.hud::after, .card--hall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--cut) calc(50% - 1px), var(--cut) calc(50% + 1px), transparent calc(50% + 1px)) top right / var(--chamfer) var(--chamfer) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--cut) calc(50% - 1px), var(--cut) calc(50% + 1px), transparent calc(50% + 1px)) bottom left / var(--chamfer) var(--chamfer) no-repeat;
}
.card--hall:hover { --cut: var(--accent); }

/* Hover light-up on every card-like box (issue #19): the border turns accent, an outer glow settles in, and a
   diagonal sweep flashes once over the box. The sweep is an ::after overlay, so it is left off the boxes that
   already use ::after (the chamfered Hall Manager card, the architecture targets with their bus segments); the
   chamfered card also skips the glow, which clip-path would cut away anyway. */
.pillar, .card:not(.form), .feature, .way, .arch__targets li { transition: border-color .2s, box-shadow .2s; }
.pillar:hover, .card:not(.form):hover, .feature:hover, .way:hover, .arch__targets li:hover { border-color: var(--accent); }
.pillar:hover, .card:not(.form):not(.card--hall):hover, .feature:hover, .way:hover, .arch__targets li:hover { box-shadow: 0 0 28px -8px rgba(63, 192, 238, .65); }
.pillar::after, .card:not(.form):not(.card--hall)::after, .feature::after, .way::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(63, 192, 238, .10) 50%, transparent 70%);
}
.pillar:hover::after, .card:not(.form):not(.card--hall):hover::after, .feature:hover::after, .way:hover::after { animation: card-flash .6s ease-out; }
@keyframes card-flash { from { opacity: 1; } to { opacity: 0; } }

/* RTL: arrows point the way the text reads */
html[dir="rtl"] .ico--arrow { transform: scaleX(-1); }

/* Reveal on scroll */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1000px) {
  .contact, .brandrow { grid-template-columns: 1fr; }
  .way, .way--dash { grid-template-columns: 1fr; }
  .way--dash .way__media { order: -1; }
  .kb { grid-template-columns: repeat(2, 1fr); }
  .feature summary { grid-template-columns: 28px minmax(0, 1fr) 22px; }
  .feature__s { grid-column: 2; grid-row: 2; margin-top: -10px; }
  .feature summary .chev { grid-column: 3; grid-row: 1; }
  .feature__body { grid-template-columns: 1fr; padding-inline-start: 22px; }
}
@media (max-width: 800px) {
  .hero { min-height: 0; padding: 56px 0 56px; }
  .hero__photo img { object-position: 60% 55%; }
  .hero__shade { background: linear-gradient(180deg, transparent 70%, var(--bg) 100%), rgba(10, 14, 23, .8); }
}
@media (max-width: 860px) {
  html { scroll-padding-top: calc(var(--nav-h) + 16px); }
  .nav__toggle { display: block; }
  .nav__menu { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line-strong); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); padding: 8px 20px 20px; display: none; }
  .nav__menu.open { display: flex; }
  /* Menu rows: the two page links, then (moved here by js/main.js) the sections of this page, indented */
  .nav__page, .nav__menu .nav__sub a { display: block; padding: 14px 12px; border-bottom: 1px solid var(--line); border-inline-start: 2px solid transparent; font-size: .9rem; transition: color .2s, border-color .2s, background .2s; }
  .nav__page::after, .nav__menu .nav__sub a::after { display: none; }
  .nav__page:hover, .nav__menu .nav__sub a:hover { background: rgba(63, 192, 238, .06); }
  .nav__page[aria-current="page"], .nav__menu .nav__sub a.is-active { color: var(--accent); border-inline-start-color: var(--accent); background: rgba(63, 192, 238, .08); box-shadow: inset 12px 0 18px -14px var(--accent); }
  html[dir="rtl"] .nav__page[aria-current="page"], html[dir="rtl"] .nav__menu .nav__sub a.is-active { box-shadow: inset -12px 0 18px -14px var(--accent); }
  .nav__menu .nav__sub { grid-area: auto; justify-self: stretch; max-height: none; opacity: 1; overflow: visible; margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--line-strong); transition: none; }
  .nav__menu .nav__sub-inner { display: block; width: auto; height: auto; }
  .nav__menu .nav__sub a { margin: 0; padding-inline-start: 28px; font-size: .82rem; letter-spacing: .08em; color: var(--muted); }
  .nav__logo img { height: 42px; } /* the wordmark is wide; leave room for the hamburger */
  .nav__actions > .btn { margin: 16px 0 0; justify-content: center; }
  /* Language switcher inside the mobile menu: a full-width row with the list inline underneath */
  .lang { margin: 0; border-bottom: 1px solid var(--line); }
  .lang summary { display: flex; padding: 14px 12px; border: 0; border-radius: 0; }
  .lang summary .chev { margin-inline-start: auto; }
  .lang__list { position: static; padding: 0 0 10px; border: 0; box-shadow: none; background: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .pillars, .kb, .form__row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { inset-inline: 22px auto; top: 22px; bottom: 22px; border-top: 0; border-inline-start: 1px dashed var(--line-strong); }
  .steps li { padding: 0; padding-inline-start: 64px; }
  .steps span { position: absolute; inset-inline-start: 0; top: 0; }
  .filter--util { margin-inline-start: 0; }
  /* Too narrow for two columns: stack the labels, and here the line does run behind them, so they
     take the page colour back to break it around the text. */
  .arch__link { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .arch__link span:first-child, .arch__link span:last-child { justify-self: center; padding-inline: 8px; background: var(--bg); }
  .footer nav { margin-inline-start: 0; width: 100%; flex-wrap: wrap; }
}

/* Architecture, medium: hall card on top, one row of five compact targets hanging from a horizontal bus */
@media (max-width: 999px) {
  .arch { grid-template-columns: 1fr; gap: 0; }
  .arch > .card--hall, .arch > .arch__fan, .arch > .arch__targets, .arch__link { grid-area: auto; }
  .card__shot { display: none; } /* the card is no longer stretched, so there is no spare height */
  .arch__fan { min-height: 0; height: var(--arch-drop); }
  .arch__fan::before { inset-inline-start: 50%; top: 0; width: 1px; height: 100%; }
  .arch__targets { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: var(--arch-drop); }
  /* the bus: from the centre of the first column to the centre of the last */
  .arch__targets::before { content: ""; position: absolute; top: 0; inset-inline: calc((100% - 4 * var(--arch-gap)) / 10); height: 1px; background: var(--line-strong); }
  .arch__targets li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 10px; padding: 16px 10px; }
  .arch__targets li::before { inset-inline-start: calc(50% - 2px); top: calc(-1 * var(--arch-drop)); width: 5px; height: var(--arch-drop);
    background: linear-gradient(90deg, var(--line-strong), var(--line-strong)) 50% 0 / 1px 100% no-repeat, radial-gradient(circle, var(--accent) 45%, transparent 55%) 50% 100% / 5px 5px no-repeat; }
  html[dir="rtl"] .arch__targets li::before { background-position: 50% 0, 50% 100%; }
  .arch__targets li::after { content: none; }
  .arch__targets strong { font-size: .88rem; line-height: 1.25; }
  .arch__targets span { display: block; font-size: .76rem; line-height: 1.3; }
}

/* Architecture, narrow: a tree with the bus down the left */
@media (max-width: 639px) {
  .arch__fan::before { inset-inline-start: var(--arch-bus); }
  .arch__targets { grid-template-columns: 1fr; padding-top: 0; padding-inline-start: calc(var(--arch-bus) + 26px); }
  .arch__targets::before { content: none; }
  .arch__targets li { flex-direction: row; justify-content: flex-start; text-align: start; gap: 16px; padding: 14px 18px; }
  .arch__targets li::before { inset-inline-start: -26px; top: calc(50% - 2px); width: 26px; height: 5px;
    background: linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat, radial-gradient(circle, var(--accent) 45%, transparent 55%) 100% 50% / 5px 5px no-repeat; }
  html[dir="rtl"] .arch__targets li::before { background-position: 100% 50%, 0 50%; }
  .arch__targets li::after { content: ""; inset-inline-start: -26px; top: calc(-1 * var(--arch-gap)); bottom: 0; }
  .arch__targets li:first-child::after { top: 0; }
  .arch__targets li:last-child::after { bottom: 50%; }
  .arch__targets strong { font-size: .98rem; line-height: 1.15; }
  .arch__targets span { font-size: .86rem; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}