/* ==========================================================================
   Nova Group — site stylesheet
   Dark, editorial, five languages: Persian (right to left) and English, French, German and
   Turkish (left to right). Logical properties throughout, so one set of rules serves both
   directions; html[dir="ltr"] addresses the four Latin-script languages together.
   ========================================================================== */

/* The three families are served from this site as variable files. The two Latin ones come in two
   parts: the basic range every Latin-script page needs, and the extended range (Turkish ş, ğ, İ ...),
   which a browser fetches only for a page that uses such a letter. */
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/vazirmatn-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/space-grotesk-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:       #05080e;
  --panel:    rgba(148,170,205,.045);
  --panel-2:  rgba(148,170,205,.085);
  --line:     rgba(148,170,205,.15);
  --line-2:   rgba(148,170,205,.3);

  --text:     #e9eef6;
  --muted:    #98a6ba;
  --dim:      #7886a1;

  --accent:    #3b82f6;
  --accent-hi: #8cbcff;
  --cyan:      #38d5f5;
  --grad:      linear-gradient(115deg, #5b9bff 0%, #6fb6ff 45%, #38d5f5 100%);

  --r:    14px;
  --r-lg: 20px;
  --wrap: 1180px;
  --nav-h: 92px;

  --font-fa:   'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-en:   'Inter', system-ui, -apple-system, sans-serif;
  --font-disp: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
}
html[data-lang="fa"] { --font: var(--font-fa); --font-h: var(--font-fa);   --lh: 1.95; }
html[dir="ltr"] { --font: var(--font-en); --font-h: var(--font-disp); --lh: 1.7; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: var(--lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip, not hidden: hidden would stop position: sticky working */
}
/* one fixed, static wash of colour behind every page */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 560px at -6% 6%, rgba(56,213,245,.08), transparent 60%);
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-h); margin: 0; line-height: 1.25; font-weight: 700; }
html[dir="ltr"] h1, html[dir="ltr"] h2 { letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(59,130,246,.35); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }

/* A page normally holds one language. Where it holds several (the not-found page), only the one being
   read shows. Never force a display value here: these classes sit on headings and paragraphs as well as on spans. */
html:not([data-lang="fa"]) .t-fa, html:not([data-lang="en"]) .t-en, html:not([data-lang="fr"]) .t-fr,
html:not([data-lang="de"]) .t-de, html:not([data-lang="tr"]) .t-tr { display: none !important; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 999;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { inset-block-start: 16px; }
/* read out by a screen reader, not shown */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   shared pieces
   ========================================================================== */
.eyebrow {
  font-size: 13.5px; font-weight: 600; color: var(--accent-hi);
  margin-block-end: 20px;
}
html[dir="ltr"] .eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; }

.idx {
  display: inline-block;
  font-family: var(--font-disp); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; color: var(--accent-hi);
}
html[data-lang="fa"] .idx { font-family: var(--font-fa); letter-spacing: .06em; font-size: 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15.5px; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.btn { transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .25s; }
.btn-primary {
  color: #fff; background: linear-gradient(115deg, #2563eb, #3b82f6 55%, #22b8e6);
  box-shadow: 0 10px 34px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 46px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-ghost { background: rgba(148,170,205,.06); backdrop-filter: blur(8px); }
.btn-ghost:hover { transform: translateY(-2px); }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

.arr {
  flex: none; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
html[dir="rtl"] .arr { transform: scaleX(-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; color: var(--accent-hi);
}
.link-arrow .arr { transition: translate .2s; }
a.link-arrow:hover .arr, a:hover > .proj-main .link-arrow .arr, a:hover > .link-arrow .arr { translate: 4px 0; }
html[dir="rtl"] a.link-arrow:hover .arr,
html[dir="rtl"] a:hover > .proj-main .link-arrow .arr,
html[dir="rtl"] a:hover > .link-arrow .arr { translate: -4px 0; }

.status {
  flex: none; display: inline-block;
  font-size: 12.5px; font-weight: 600; padding: 4px 13px; border-radius: 999px;
  color: var(--accent-hi); background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.32);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* plaintext: a Latin tag such as "C#" keeps its own order inside right-to-left text */
.tags li {
  font-family: var(--font-disp); font-size: 12.5px; color: var(--muted);
  padding: 4px 12px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line);
  unicode-bidi: plaintext;
}
html[data-lang="fa"] .tags li { font-family: var(--font-fa); }

/* ==========================================================================
   navbar
   ========================================================================== */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  border-block-end: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
/* a scrim while the bar is still transparent, so nothing scrolls up raw behind it */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(5,8,14,.94), rgba(5,8,14,.55) 60%, rgba(5,8,14,0));
  transition: opacity .3s;
}
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled {
  background: rgba(5,8,14,.82);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-block-end-color: var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { width: 48px; height: 48px; }
/* the header carries the brand: a larger mark with a soft light behind it, and a larger name */
.nav .logo { gap: 16px; }
.nav .logo-mark { width: 64px; height: 64px; filter: drop-shadow(0 0 18px rgba(63,155,255,.55)); transition: transform .3s, filter .3s; }
.nav .logo:hover .logo-mark { transform: translateY(-2px); filter: drop-shadow(0 0 26px rgba(56,213,245,.8)); }
/* two weights: the name in white, "group" stepped back */
.logo-text { font-weight: 400; color: #9fb1c9; }
.logo-text b { font-weight: 700; color: #fff; }
/* Persian must never be letter-spaced: it breaks the joins between the letters */
html[data-lang="fa"] .logo-text { font-family: var(--font-fa); font-size: 18.5px; }
html[dir="ltr"] .logo-text { font-family: var(--font-disp); font-size: 15px; letter-spacing: .2em; }
html[data-lang="fa"] .nav .logo-text { font-size: 27px; }
html[dir="ltr"] .nav .logo-text { font-size: 21px; letter-spacing: .18em; }
.nav .logo-text { color: #b9c8de; }
.nav .logo-text b { font-weight: 800; }

.nav-links { display: flex; gap: 4px; margin-inline-start: auto; }
.nav-links a {
  position: relative; padding: 10px 16px; border-radius: 9px;
  font-size: 15.5px; color: var(--muted); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--panel); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline: 16px; inset-block-end: 3px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }
/* the language menu: the page's language on the button, every language under it, each with its flag and its own name */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding-inline: 11px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; list-style: none; user-select: none; -webkit-user-select: none;
  transition: border-color .2s, color .2s, background .2s;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover, .lang[open] .lang-btn { border-color: var(--accent-hi); color: var(--accent-hi); }
.lang-face { display: inline-flex; align-items: center; gap: 9px; }
.flag { flex: none; width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.lang-caret { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: transform .2s; }
.lang[open] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 5;
  min-width: 196px; margin: 0; padding: 6px; list-style: none;
  background: rgba(9,14,23,.97); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(56,213,245,.05);
}
.lang[open] .lang-menu { animation: lang-open .2s cubic-bezier(.2,.7,.2,1); }
@keyframes lang-open { from { opacity: 0; transform: translateY(-6px); } }
.lang-menu a, .lang-menu button, .lang-here {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  background: none; border: 0; border-radius: 9px; text-align: start;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--muted); transition: background .15s, color .15s;
}
.lang-menu a[href]:hover, .lang-menu button:hover { background: var(--panel-2); color: var(--text); }
/* each name is set in its own script's font, whatever the page's language */
.lang-menu [lang] span { font-family: var(--font-en); }
.lang-menu [lang="fa"] span, .lang-face[lang="fa"] .lang-name { font-family: var(--font-fa); }
/* the language being read: bright, with a small light at the end of its row */
.lang-menu [aria-current="true"],
html[data-both][data-lang="en"] .lang-menu [data-lang="en"], html[data-both][data-lang="fa"] .lang-menu [data-lang="fa"],
html[data-both][data-lang="fr"] .lang-menu [data-lang="fr"], html[data-both][data-lang="de"] .lang-menu [data-lang="de"],
html[data-both][data-lang="tr"] .lang-menu [data-lang="tr"] { color: var(--text); }
.lang-menu [aria-current="true"]::after,
html[data-both][data-lang="en"] .lang-menu [data-lang="en"]::after, html[data-both][data-lang="fa"] .lang-menu [data-lang="fa"]::after,
html[data-both][data-lang="fr"] .lang-menu [data-lang="fr"]::after, html[data-both][data-lang="de"] .lang-menu [data-lang="de"]::after,
html[data-both][data-lang="tr"] .lang-menu [data-lang="tr"]::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-inline-start: auto; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px rgba(56,213,245,.75);
}
@media (prefers-reduced-motion: reduce) { .lang[open] .lang-menu { animation: none; } .lang-caret { transition: none; } }
/* the brand never gives way to the menu beside it */
.nav .logo { flex: none; }
.nav .logo-text { white-space: nowrap; }
.nav-links a { white-space: nowrap; }
/* where the header is short of room (a tablet, a phone) the flag alone stands on the button; the open menu still names every language */
@media (max-width: 1000px) {
  .lang-btn, .lang-face { gap: 6px; }
  .lang-btn { padding-inline: 9px 7px; }
  .lang-btn .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.burger {
  display: none; width: 44px; height: 40px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 16px; height: 1.8px; background: var(--text); border-radius: 2px; transition: transform .25s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.4px) rotate(-45deg); }

/* ==========================================================================
   home hero
   ========================================================================== */
.hero { position: relative; padding-block: calc(var(--nav-h) + 84px) 0; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,170,205,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,170,205,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 75%);
}
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 72px; align-items: center; }
.hero-grid > * { min-width: 0; }   /* a column may be narrower than its widest unbreakable row */

.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.16; margin-block-end: 26px; }
html[data-lang="fa"] .hero h1 { line-height: 1.36; }
.hero h1 em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(96,165,250,.45));
}
.hero-sub { color: var(--muted); font-size: 18px; max-width: 54ch; margin-block-end: 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* drifting colour behind the home hero */
.hero { overflow: clip; }
.orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orbs i { position: absolute; border-radius: 50%; filter: blur(110px); animation: drift 24s ease-in-out infinite; }
.orbs i:nth-child(1) { width: 560px; height: 560px; background: #1d4ed8; opacity: .5;  inset-block-start: -200px; inset-inline-end: -120px; }
.orbs i:nth-child(2) { width: 460px; height: 460px; background: #0891b2; opacity: .3;  inset-block-start: 34%; inset-inline-start: -200px; animation-duration: 30s; animation-direction: reverse; }
.orbs i:nth-child(3) { width: 380px; height: 380px; background: #4f46e5; opacity: .3;  inset-block-end: -120px; inset-inline-start: 40%; animation-duration: 34s; }
@keyframes drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-40px) scale(1.14); } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; margin-block-end: 26px; border-radius: 999px;
  background: rgba(148,170,205,.07); border: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--muted); backdrop-filter: blur(8px);
}
.live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56,213,245,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(56,213,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,213,245,0); }
}

/* ---------- the market-by-order book. Always left-to-right, like a real ladder:
   blue bids below, red asks above, each level a queue of individual orders. ---------- */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ''; position: absolute; inset: -34px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(37,99,235,.4), transparent); filter: blur(34px);
}
html:not(.js) .hero-visual { display: none; }
.hero-visual figcaption { margin-block-start: 14px; text-align: center; font-size: 12.8px; color: var(--dim); }

.mbo {
  --bid: #5b9bff; --ask: #ff7389;
  direction: ltr; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(14,21,36,.94), rgba(7,11,19,.94));
  box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(96,165,250,.08), inset 0 1px 0 rgba(255,255,255,.07);
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4;
}
.mbo-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.mbo-title { color: var(--text); font-weight: 600; letter-spacing: .06em; }
.mbo-title i { font-style: normal; font-weight: 400; color: var(--dim); margin-left: 8px; letter-spacing: .03em; }
.mbo-live { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 10.5px; letter-spacing: .14em; }

/* the path of the mid price; strokes keep their width although the box is stretched */
.mbo-spark { display: block; width: 100%; height: 44px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(91,155,255,.07), transparent); }
.mbo-spark polyline { fill: none; stroke: #7db4ff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mbo-spark path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(125,180,255,.9)); }

.mbo-cols, .mbo-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px 28px; align-items: center; gap: 10px; padding-inline: 16px; }
.mbo-cols { padding-block: 8px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 9.8px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mbo-cols span:nth-child(n+3), .mbo-row .tot, .mbo-row .cnt { text-align: right; }

.mbo-side { padding-block: 5px; }
.mbo-row { position: relative; height: 28px; }
.mbo-row::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 0; width: var(--depth, 0%); }
.mbo-asks .mbo-row::before { background: linear-gradient(90deg, rgba(255,115,137,.13), rgba(255,115,137,0)); }
.mbo-bids .mbo-row::before { background: linear-gradient(90deg, rgba(91,155,255,.16), rgba(91,155,255,0)); }
.mbo-row > * { position: relative; }
.mbo-asks .px { color: var(--ask); }
.mbo-bids .px { color: var(--bid); }
.mbo-row .tot { color: var(--text); }
.mbo-row .cnt { color: var(--dim); }

.mbo-row .q {
  display: flex; gap: 3px; overflow: hidden;
  mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.chip {
  flex: none; display: grid; place-items: center; height: 18px;
  min-width: calc(15px + var(--q) * 1.5px); padding: 0 4px; border-radius: 4px; font-size: 10.5px;
  transition: opacity .1s, transform .1s, background .08s, color .08s;
}
.mbo-bids .chip { color: #d6e6ff; background: rgba(91,155,255,.24); box-shadow: inset 0 0 0 1px rgba(91,155,255,.4); }
.mbo-asks .chip { color: #ffdfe4; background: rgba(255,115,137,.2); box-shadow: inset 0 0 0 1px rgba(255,115,137,.4); }
.chip.is-new { animation: chip-in .3s ease-out; }
.chip.is-hit { background: #fff; color: #06101f; transform: scale(1.14); box-shadow: 0 0 14px rgba(255,255,255,.7); }
.chip.is-out { opacity: 0; transform: scale(.5); }
@keyframes chip-in {
  from { opacity: 0; transform: translateX(12px) scale(.6); box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
  to   { opacity: 1; transform: none; }
}

.mbo-mid {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px;
  border-block: 1px solid var(--line); background: rgba(148,170,205,.06);
  color: var(--dim); font-size: 10.6px; letter-spacing: .06em; text-transform: uppercase;
}
.mbo-mid b { margin-left: 7px; color: var(--text); font-weight: 600; font-size: 12px; transition: color .2s; }
.mbo-mid b.up { color: var(--bid); }
.mbo-mid b.down { color: var(--ask); }

.mbo-tape { display: grid; align-content: start; gap: 3px; min-height: 76px; padding: 9px 16px 11px; border-top: 1px solid var(--line); }
.tp { display: grid; grid-template-columns: 92px 38px 26px 1fr; gap: 8px; font-size: 11px; color: var(--dim); }
.tp b { font-weight: 600; }
.tp.buy b { color: var(--bid); }
.tp.sell b { color: var(--ask); }
.tp span:nth-child(3) { text-align: right; }
.tp:first-child { color: var(--text); }
.tp.is-new { animation: tp-in .45s ease-out; }
@keyframes tp-in { from { opacity: 0; transform: translateY(-6px); background: rgba(255,255,255,.12); } to { opacity: 1; transform: none; } }

/* facts: one row of plain statements, divided by hairlines */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-block-start: 76px; border-block: 1px solid var(--line);
}
.facts li { padding: 26px 26px 28px; border-inline-start: 1px solid var(--line); }
.facts li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts b {
  display: block; margin-block-end: 6px;
  font-family: var(--font-h); font-size: 19px; font-weight: 700; color: var(--text);
}
.facts b:has(bdi), .proj-facts b:has(bdi) { font-family: var(--font-disp); }
.facts li > span { display: block; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* the home page shows the same facts as four glass tiles */
.facts-glass { gap: 14px; border: 0; }
/* :nth-child(n) only adds weight, so these tiles keep their box at every breakpoint */
.facts.facts-glass li:nth-child(n) {
  padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(148,170,205,.09), rgba(148,170,205,.02)); backdrop-filter: blur(10px);
}

/* each tile: what it is about, a plain title, then the abbreviations spelled out */
.facts-glass .fact-label { color: var(--cyan); font-size: 12.5px; font-weight: 600; margin-block-end: 8px; }
html[dir="ltr"] .facts-glass .fact-label { font-family: var(--font-disp); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.facts-glass b { font-size: 17.5px; margin-block-end: 14px; }
.facts-glass p { color: var(--muted); font-size: 14.4px; line-height: 1.85; }
/* a row is one line wherever its caption fits, so the rows sit at even steps; a longer caption wraps rather than being cut off */
.fact-list { display: grid; gap: 10px; }
.fact-list > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 28px; }
.fact-list i {
  font-style: normal; text-align: center; line-height: 26px; border-radius: 6px;
  direction: ltr;   /* Latin badges such as "C#" keep their order in right-to-left text */
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-hi);
  background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.3);
}
.fact-list span { color: var(--muted); font-size: 14px; line-height: 1.45; }
/* four tiles get too narrow for a full row of text below this width */
@media (max-width: 1180px) { .facts.facts-glass { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .facts.facts-glass { grid-template-columns: 1fr; } }

/* ==========================================================================
   effects shared by cards
   ========================================================================== */
/* a spotlight that follows the cursor (main.js feeds --mx / --my), plus a lift */
.glow { position: relative; overflow: hidden; transition: transform .3s, border-color .3s, background .3s, box-shadow .3s; }
.glow > * { position: relative; z-index: 1; }
.glow::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(96,165,250,.2), transparent 62%);
}
.glow:hover { transform: translateY(-5px); border-color: rgba(96,165,250,.55); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 34px rgba(37,99,235,.16); }
.glow:hover::after { opacity: 1; }

/* ==========================================================================
   sections
   ========================================================================== */
.section { padding-block: 92px; }
.section.ruled { border-block-start: 1px solid var(--line); }
.section-tint {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(37,99,235,.07), rgba(37,99,235,0) 70%);
}

.sec-head { max-width: 740px; margin-block-end: 46px; }
.sec-head .eyebrow { margin-block-end: 14px; }
.sec-head h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); margin-block-end: 14px; }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: 16.8px; }
.sec-foot { margin-block-start: 30px; }

/* a label column beside the content column */
.split { display: grid; grid-template-columns: 250px 1fr; gap: 64px; align-items: start; }
.split-side h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin-block-start: 10px; }
.split-side p { color: var(--muted); font-size: 14.8px; margin-block-start: 14px; }
.split-main > * + * { margin-block-start: 30px; }

.prose p { color: var(--muted); font-size: 16.6px; }
.prose p + p { margin-block-start: 20px; }
.prose strong { color: var(--text); font-weight: 600; }

/* the three layers */
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.layers li {
  padding: 26px 24px 28px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
}
.layer-num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-block-end: 18px;
  border-radius: 10px; font-family: var(--font-h); font-size: 15px; font-weight: 700;
  color: var(--cyan); background: rgba(56,213,245,.1); border: 1px solid rgba(56,213,245,.26);
}
.layers h3 { font-size: 16.5px; margin-block-end: 9px; }
.layers p { color: var(--muted); font-size: 14.6px; line-height: 1.85; }

/* home: icon cards with a lit top edge */
.layers-home { gap: 18px; }
.layers-home li { padding: 30px 28px 32px; border-radius: var(--r-lg); background: linear-gradient(165deg, rgba(148,170,205,.09), rgba(148,170,205,.025)); }
.layers-home li::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 28px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(125,180,255,.85), transparent);
}
.layer-ico {
  display: grid; place-items: center; width: 50px; height: 50px; margin-block-end: 20px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(59,130,246,.3), rgba(56,213,245,.12));
  border: 1px solid rgba(96,165,250,.4); box-shadow: 0 8px 26px rgba(37,99,235,.28);
}
.layer-ico svg { width: 24px; height: 24px; fill: none; stroke: #bfdcff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.layer-tag { display: block; margin-block-end: 8px; font-size: 12.5px; font-weight: 600; color: var(--cyan); }
html[dir="ltr"] .layer-tag { font-family: var(--font-disp); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.layers-home h3 { font-size: 18px; margin-block-end: 10px; }
.layers-home p { font-size: 15px; }

.layers-full { grid-template-columns: 1fr; gap: 0; }
.layers-full li {
  display: grid; grid-template-columns: 34px 1fr; gap: 22px;
  padding: 30px 0; background: none; border: 0; border-radius: 0;
  border-block-start: 1px solid var(--line);
}
.layers-full li:first-child { border-block-start: 0; padding-block-start: 0; }
.layers-full li:last-child { padding-block-end: 0; }
.layers-full .layer-num { margin: 0; }
.layers-full h3 { font-size: 18px; }
.layers-full p { font-size: 15.6px; line-height: 1.95; }

/* a path of steps, read in the page's own direction; the last step is the outcome */
/* the path from raw flow to a prediction: four tiles across the text column, joined by moving dashes */
.pipe { --gap: 46px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-block: 26px; }
.pipe > span {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 118px; padding: 18px 12px; text-align: center; border-radius: 16px;
  border: 1px solid var(--line-2);
  background: linear-gradient(165deg, rgba(148,170,205,.1), rgba(148,170,205,.025));
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.pipe > span:hover { transform: translateY(-4px); border-color: rgba(56,213,245,.6); box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 26px rgba(56,213,245,.16); }
.pipe svg { width: 26px; height: 26px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pipe b { max-width: 100%; font-size: 14.6px; font-weight: 600; line-height: 1.6; color: var(--text); overflow-wrap: break-word; }
.pipe bdi { font-family: var(--font-disp); font-size: 12px; letter-spacing: .06em; color: var(--accent-hi); }
/* the connector sits in the gap before each tile: dashes travel toward it and end in an arrowhead */
.pipe > span + span::before {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: calc(-1 * var(--gap) + 7px);
  width: calc(var(--gap) - 18px); height: 2px; margin-block-start: -1px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 12px);
  animation: pipe-flow 1s linear infinite;
}
.pipe > span + span::after {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: -13px;
  width: 8px; height: 8px; margin-block-start: -4px;
  border-block-start: 2px solid var(--cyan); border-inline-end: 2px solid var(--cyan);
  transform: rotate(45deg);
}
html[dir="rtl"] .pipe > span + span::before { animation-name: pipe-flow-rtl; }
html[dir="rtl"] .pipe > span + span::after { transform: rotate(-45deg); }
@keyframes pipe-flow { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes pipe-flow-rtl { from { background-position: 0 0; } to { background-position: -12px 0; } }
.pipe > .is-goal {
  border-color: transparent; background: linear-gradient(135deg, #2563eb, #22b8e6);
  box-shadow: 0 12px 34px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.22);
  animation: pipe-goal 3.2s ease-in-out infinite;
}
.pipe > .is-goal svg { stroke: #fff; }
.pipe > .is-goal b { color: #fff; }
@keyframes pipe-goal { 50% { box-shadow: 0 12px 44px rgba(34,184,230,.7), inset 0 1px 0 rgba(255,255,255,.22); } }
html.sb .pipe > .is-goal { background: url(../img/sb-button.png) center / 100% 100% no-repeat; }
@media (max-width: 860px) {
  .pipe { grid-template-columns: 1fr; --gap: 40px; }
  .pipe > span { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 18px; text-align: start; }
  .pipe > span + span::before {
    inset-block-start: calc(-1 * var(--gap) + 7px); inset-inline-start: 50%; margin: 0 0 0 -1px;
    width: 2px; height: calc(var(--gap) - 18px);
    background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 12px);
    animation-name: pipe-flow-down;
  }
  html[dir="rtl"] .pipe > span + span::before { animation-name: pipe-flow-down; }
  .pipe > span + span::after, html[dir="rtl"] .pipe > span + span::after {
    inset-block-start: -13px; inset-inline-start: 50%; margin: 0 0 0 -4px; transform: rotate(135deg);
  }
  html[dir="rtl"] .pipe > span + span::after { margin: 0 -4px 0 0; transform: rotate(-135deg); }
}
@keyframes pipe-flow-down { from { background-position: 0 0; } to { background-position: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .pipe > span + span::before, .pipe > .is-goal { animation: none; } }

/* the two tracks */
.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.track { padding: 28px 26px 30px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.track-tag {
  display: inline-block; margin-block-end: 14px;
  font-family: var(--font-disp); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan);
}
.track h3 { font-size: 18px; margin-block-end: 7px; }
.track p { color: var(--muted); font-size: 15px; }

/* the track cards carry a small book in the hero book's own language; our orders are amber */
.track { display: flex; flex-direction: column; }
.track p { margin-block-end: 26px; }
.mbo-mini { margin-block-start: auto; box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.mbo-mini .mbo-row { grid-template-columns: 70px minmax(0, 1fr) 30px; height: 27px; }
.mbo-mini .mbo-note { min-height: 37px; align-items: center; }
.mbo-mini .mbo-note b.own { color: #ffd166; }
.mbo-mini .mbo-tape { min-height: 54px; }
.mbo .chip.own { color: #1c1300; font-weight: 700; background: #ffd166; box-shadow: 0 0 0 1px #ffe9ad, 0 0 12px rgba(255,209,102,.75); }
.mbo .chip.own.is-hit { background: #fff; box-shadow: 0 0 16px rgba(255,255,255,.9); }
.tp.own { color: var(--text); }
.tp.own b { color: #ffd166; }
.mbo-legend {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px 11px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 10.2px; letter-spacing: .1em; text-transform: uppercase;
}
.mbo-legend .chip.is-hit { transform: none; }

/* a project, as a single large link */
.proj {
  display: grid; grid-template-columns: 1fr 230px; gap: 40px;
  padding: 34px 36px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .25s, background .25s;
}
.proj:hover { border-color: rgba(59,130,246,.55); background: var(--panel-2); }
.proj-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-block-end: 20px; }
.proj h3 { font-family: var(--font-disp); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.01em; margin-block-end: 8px; }
.proj-sub { color: var(--text); font-size: 16.2px; font-weight: 500; margin-block-end: 12px; }
.proj-desc { color: var(--muted); font-size: 15px; margin-block-end: 24px; }
.proj-facts { display: grid; align-content: center; gap: 22px; padding-inline-start: 36px; border-inline-start: 1px solid var(--line); }
.proj-facts b { display: block; font-family: var(--font-h); font-size: 18px; color: var(--text); }
.proj-facts li > span { display: block; color: var(--muted); font-size: 13.4px; }
.proj-list { display: grid; gap: 18px; }
.list-note { margin-block-start: 26px; color: var(--dim); font-size: 14.4px; }

/* closing band on the home page */
.band {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 42px 44px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: linear-gradient(120deg, rgba(37,99,235,.16), rgba(56,213,245,.06) 60%, rgba(148,170,205,.03));
}
/* a light that travels round the band's edge */
.band { position: relative; border-color: transparent; }
.band::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(110deg, rgba(96,165,250,.25) 0%, rgba(96,165,250,.25) 35%, #8cd9ff 50%, rgba(96,165,250,.25) 65%, rgba(96,165,250,.25) 100%);
  background-size: 300% 100%; animation: sheen 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.band h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-block-end: 10px; }
.band p { color: var(--muted); font-size: 15.6px; max-width: 68ch; }

.callout {
  padding: 26px 28px; border-radius: var(--r);
  background: rgba(37,99,235,.08); border: 1px solid rgba(59,130,246,.28);
  border-inline-start: 3px solid var(--accent);
}
.callout p { color: var(--text); font-size: 16.2px; }

/* team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.member { text-align: center; padding: 32px 18px 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.avatar {
  width: 78px; height: 78px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-disp); font-size: 24px; font-weight: 700; color: #04101f;
  background: var(--grad); box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.avatar-photo { overflow: hidden; background: var(--panel); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 16px; margin-block-end: 6px; }
.member p { color: var(--muted); font-size: 13.6px; line-height: 1.7; }

/* ==========================================================================
   inner pages
   ========================================================================== */
.page-hero { padding-block: calc(var(--nav-h) + 76px) 64px; border-block-end: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); margin-block-end: 20px; }
.page-lead { color: var(--muted); font-size: 18.2px; max-width: 66ch; }
.page-hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.page-mark { flex: none; width: 230px; height: auto; filter: drop-shadow(0 0 40px rgba(63,155,255,.45)); }
.page-hero .facts { margin-block-start: 52px; border-block-end: 0; }
.page-hero:has(.facts) { padding-block-end: 0; }

.crumbs { display: flex; align-items: center; gap: 10px; margin-block-end: 22px; font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--accent-hi); }
.crumbs a:hover { text-decoration: underline; }

/* case study - built from the same glass cards as the home page */
.page-hero { position: relative; overflow: clip; }
.page-hero:has(.facts-glass) { padding-block-end: 60px; }
.cs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-block-start: 28px; }

/* "on this page", as a row of chips under the facts */
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 30px; }
.toc-title { margin-inline-end: 8px; font-size: 13px; color: var(--dim); }
html[dir="ltr"] .toc-title { letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }
.toc a {
  padding: 7px 16px; border-radius: 999px; font-size: 13.8px; color: var(--muted);
  background: rgba(148,170,205,.06); border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s;
}
.toc a:hover { color: var(--text); border-color: var(--line-2); }
.toc a[aria-current] { color: var(--text); border-color: var(--accent); background: rgba(59,130,246,.14); }

.cs-section + .cs-section { margin-block-start: 88px; }
.cs-section h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); margin-block-end: 26px; }
.cs-section h2::before {
  content: ''; display: block; width: 46px; height: 3px; margin-block-end: 20px; border-radius: 3px; background: var(--grad);
}
.cs-section p { color: var(--muted); font-size: 16.6px; }
.cs-section p + p { margin-block-start: 14px; }
.cs-section .detail-lead { color: var(--text); font-size: 20px; line-height: 1.9; }

/* shared by the three kinds of card below */
.steps li, .points li, .phases li {
  padding: 28px 26px 30px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(148,170,205,.09), rgba(148,170,205,.025));
}
.steps strong, .points strong { display: block; color: var(--text); font-size: 17px; margin-block-end: 9px; }
.steps p, .points p, .phases p { font-size: 15px; line-height: 1.9; }

/* the three layers of the approach, lit along the top like the method cards */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block: 28px; }
.steps li::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 26px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(125,180,255,.85), transparent);
}

.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

/* the road ahead: four cards, the current one lit */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.phase-mark {
  display: inline-block; margin-block-end: 14px; padding: 3px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(148,170,205,.08); border: 1px solid var(--line);
}
.phases li.is-done .phase-mark { color: var(--accent-hi); background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.34); }
.phases li.is-now { border-color: rgba(56,213,245,.5); box-shadow: 0 0 40px rgba(56,213,245,.12); }
.phases li.is-now .phase-mark { color: #04121a; background: var(--cyan); border-color: transparent; }
.phases li.is-now p { color: var(--text); }

/* ---------- screenshots of the real platform, in a window frame ---------- */
.shots { margin-block-start: 32px; }
.shots-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block-end: 20px; }
.shots-tabs button {
  position: relative; overflow: hidden; text-align: start; padding: 15px 18px 17px; border-radius: var(--r);
  color: var(--muted); border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(148,170,205,.09), rgba(148,170,205,.025));
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.shots-tabs button:hover { transform: translateY(-2px); border-color: var(--line-2); }
.shots-tabs b { display: block; font-size: 15.6px; color: var(--text); margin-block-end: 3px; }
.shots-tabs button > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); direction: ltr; unicode-bidi: plaintext; display: block; }
.shots-tabs button[aria-selected="true"] {
  border-color: rgba(96,165,250,.75); background: rgba(59,130,246,.15); box-shadow: 0 0 34px rgba(37,99,235,.22);
}
/* while the views advance by themselves, the current tab fills along its bottom edge */
.shots-tabs button::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: 0; height: 2px; width: 0; background: var(--grad); }
.shots.is-auto .shots-tabs button[aria-selected="true"]::after { animation: shot-fill 6s linear forwards; }
@keyframes shot-fill { to { width: 100%; } }

.shot-frame {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); background: #0b0f18;
  box-shadow: 0 44px 110px rgba(0,0,0,.62), 0 0 90px rgba(37,99,235,.2), inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out;
}
.shot-bar { direction: ltr; display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(148,170,205,.06); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3950; }
.shot-name { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.shot-zoom { margin-left: auto; width: 30px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: none; border: 1px solid var(--line); color: var(--muted); transition: color .2s, border-color .2s; }
.shot-zoom:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.shot-zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.shot-stage { position: relative; aspect-ratio: 1400 / 742; background: #0d111a; cursor: zoom-in; }
.shot-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02); transition: opacity .55s ease, transform .8s ease;
}
.shot-stage img.is-on { opacity: 1; transform: none; }
/* a soft light across the glass */
.shot-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 28%, transparent 72%, rgba(96,165,250,.06) 100%);
}
.shot-frame figcaption { padding: 16px 20px 18px; border-top: 1px solid var(--line); background: rgba(148,170,205,.04); }
.cs-section .shot-cap { display: none; margin: 0; font-size: 14.8px; color: var(--muted); }
.cs-section .shot-cap.is-on { display: block; animation: cap-in .45s ease-out; }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; cursor: zoom-out;
  background: rgba(3,5,10,.93); backdrop-filter: blur(8px); animation: lb-in .2s ease-out;
}
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,.8); }
.lightbox-close {
  position: absolute; inset-block-start: 18px; inset-inline-end: 22px; width: 44px; height: 44px; border-radius: 50%;
  font-size: 24px; line-height: 1; color: var(--text); background: rgba(148,170,205,.12); border: 1px solid var(--line-2);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.cs-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* "back" points the other way from every other arrow */
.link-back .arr { transform: scaleX(-1); }
html[dir="rtl"] .link-back .arr { transform: none; }
html[dir="ltr"] a.link-back:hover .arr { translate: -4px 0; }
html[dir="rtl"] a.link-back:hover .arr { translate: 4px 0; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 28px; align-items: center; }
.contact-card {
  display: grid; gap: 10px; padding: 30px 32px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line); transition: border-color .25s, background .25s;
}
.contact-card:hover { border-color: rgba(59,130,246,.55); background: var(--panel-2); }
.contact-label { font-family: var(--font-disp); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.contact-card strong { direction: ltr; text-align: start; font-family: var(--font-disp); font-size: 18px; overflow-wrap: anywhere; margin-block-end: 8px; }
html[dir="rtl"] .contact-card strong { text-align: right; }
.contact-note p { color: var(--dim); font-size: 15px; }

/* ==========================================================================
   footer
   ========================================================================== */
.footer { border-block-start: 1px solid var(--line); padding-block: 60px 34px; background: rgba(5,8,14,.6); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.footer-brand p { color: var(--muted); font-size: 14.6px; max-width: 40ch; margin-block-start: 16px; }
.footer-col { display: grid; align-content: start; gap: 9px; }
.footer-col h2 { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--dim); margin-block-end: 6px; }
html[dir="ltr"] .footer-col h2 { letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }
.footer-col a { justify-self: start; color: var(--muted); font-size: 14.8px; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-legal { margin-block-start: 44px; padding-block-start: 24px; border-block-start: 1px solid var(--line); color: var(--dim); font-size: 13.2px; max-width: 92ch; }
.footer-bottom { margin-block-start: 14px; color: var(--dim); font-size: 13.2px; }

/* back to top: a glass disc whose rim fills as the page is read */
.to-top {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 90;
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan) 0, var(--accent) calc(var(--p, 0) * 1%), rgba(148,170,205,.16) 0);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 26px rgba(59,130,246,.2);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s, box-shadow .3s;
}
.to-top::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #1b2c4d, #0a111e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.to-top svg {
  position: relative; width: 21px; height: 21px; fill: none; stroke: var(--accent-hi);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s, stroke .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 36px rgba(56,213,245,.45); }
.to-top:hover svg { stroke: #fff; transform: translateY(-2px); }
.to-top:active { transform: translateY(-1px) scale(.96); }

/* ==========================================================================
   running prose is justified, so line ends sit under each other. Headings,
   labels and one-line snippets are left alone — it only helps text that wraps.
   ========================================================================== */
.prose p, .hero-sub, .page-lead, .split-side p, .layers p, .track p, .proj-desc,
.sec-head p:not(.eyebrow), .band p, .callout p, .cs-section p, .footer-legal {
  text-align: justify; text-justify: inter-word;
}

/* ==========================================================================
   reveal on scroll — only when the script is running, so the page is never
   blank without it
   ========================================================================== */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: 1fr; }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .toc-title { display: none; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li { padding-inline-start: 22px; }
  .facts li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .facts li:nth-child(n+3) { border-block-start: 1px solid var(--line); }
  .proj { grid-template-columns: 1fr; gap: 28px; }
  .proj-facts { grid-template-columns: repeat(3, 1fr); padding: 24px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --nav-h: 68px; }

  .burger { display: flex; }
  .nav-inner { gap: 14px; }
  .nav-actions { margin-inline-start: auto; }
  .logo-mark { width: 42px; height: 42px; }
  .nav .logo-mark { width: 48px; height: 48px; }
  html[data-lang="fa"] .nav .logo-text { font-size: 21px; }
  html[dir="ltr"] .nav .logo-text { font-size: 15px; letter-spacing: .13em; }
  .nav-links {
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    flex-direction: column; gap: 2px; margin: 0; padding: 12px 20px 20px;
    background: var(--bg); border-block-end: 1px solid var(--line);
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path .3s ease, opacity .25s;
  }
  .nav-links.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a[aria-current="page"]::after { inset-inline: 14px auto; width: 22px; }

  .hero { padding-block-start: calc(var(--nav-h) + 52px); }
  .hero-sub { font-size: 16.6px; }
  .facts { margin-block-start: 56px; }
  .section { padding-block: 66px; }
  .page-hero { padding-block: calc(var(--nav-h) + 48px) 48px; }
  .page-lead { font-size: 16.6px; }
  .page-mark { width: 150px; }
  .page-hero-grid { gap: 20px; }

  .layers, .tracks, .team, .points { grid-template-columns: 1fr; }
  .cs-section + .cs-section { margin-block-start: 64px; }
  .layers-full li { gap: 16px; }
  .proj { padding: 26px 22px; }
  .shots-tabs { grid-template-columns: 1fr; gap: 8px; }
  .shots-tabs button { padding: 12px 16px 14px; }
  .shot-frame figcaption { padding: 14px 16px 16px; }
  .proj-facts { grid-template-columns: 1fr; gap: 16px; }
  .band { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 24px; }
  .cs-section .detail-lead { font-size: 17.4px; }
  .steps li, .points li, .phases li { padding: 24px 22px 26px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .to-top { inset-block-end: 16px; inset-inline-end: 16px; }
}

@media (max-width: 460px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .mbo-cols, .mbo-row { grid-template-columns: 70px minmax(0, 1fr) 30px; padding-inline: 12px; }
  .mbo-cols span:last-child, .mbo-row .cnt, .mbo-title i { display: none; }
  .tp { grid-template-columns: 86px 36px 24px 1fr; }
  .facts, .phases { grid-template-columns: 1fr; }
  .facts li, .facts li:nth-child(odd) { border-inline-start: 0; padding-inline: 0; }
  .facts li + li { border-block-start: 1px solid var(--line); }
  .page-mark { display: none; }
  html[dir="ltr"] .logo-text { font-size: 13px; letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .to-top, .hero-visual { display: none; }
  body { background: #fff; color: #111; }
  body::before { display: none; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* downloadable simulator reports on a project page */
.reports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-block: 28px 18px; }
.reports > li {
  padding: 30px 28px; border-radius: var(--r-lg); border: 1px solid rgba(56,213,245,.3);
  background: linear-gradient(165deg, rgba(56,213,245,.1), rgba(59,130,246,.05) 55%, rgba(148,170,205,.025));
}
.report-head { display: flex; align-items: baseline; gap: 14px; margin-block-end: 22px; }
.report-head b { font-family: var(--font-disp); font-size: 2.3rem; line-height: 1; color: var(--text); }
.report-head > span { color: var(--cyan); font-size: 14.5px; font-weight: 600; }
.report-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; margin-block-end: 26px; }
.report-facts b { display: block; font-family: var(--font-h); font-size: 16.5px; color: var(--text); }
.report-facts li > span { display: block; color: var(--muted); font-size: 13.2px; line-height: 1.7; }
.report-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.report-actions .arr-down { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-section .report-size { margin-block-start: 16px; color: var(--dim); font-size: 13px; text-align: start; }
.cs-section .report-note { color: var(--dim); font-size: 14.2px; }
@media (max-width: 820px) { .reports { grid-template-columns: 1fr; } }

/* a report that has not been published yet */
.reports > .report-soon {
  display: flex; flex-direction: column; align-items: flex-start;
  border-style: dashed; border-color: var(--line-2); background: rgba(148,170,205,.03);
}
.report-soon .report-head b { color: var(--muted); }
.report-soon .report-head > span { color: var(--dim); }
.cs-section .report-wait { flex: 1; color: var(--dim); font-size: 15px; text-align: start; margin-block-end: 22px; }

/* email addresses: under each team member, and as cards on the contact page */
.member-mail {
  display: inline-block; margin-block-start: 12px; direction: ltr;
  font-family: var(--font-disp); font-size: 13px; color: var(--accent-hi); overflow-wrap: anywhere;
}
.member-mail:hover { color: var(--text); }
.contact-mails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.contact-mails .contact-label { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 14px; }
@media (max-width: 900px) { .contact-mails { grid-template-columns: 1fr; } }
.contact-mails .contact-main { grid-column: 1 / -1; border-color: rgba(56,213,245,.3); }
.contact-mails .contact-main strong { font-size: 24px; }

/* the closing band as a single slogan */
.band-slogan {
  flex-direction: column; justify-content: center; text-align: center; gap: 30px;
  padding: 68px 32px 62px; overflow: hidden;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(59,130,246,.26), transparent 70%),
    linear-gradient(120deg, rgba(37,99,235,.14), rgba(56,213,245,.07) 60%, rgba(148,170,205,.03));
}
.band-slogan h2 {
  margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.3rem); line-height: 1.35; letter-spacing: -.01em; color: var(--text);
}
.band-slogan h2 em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(96,165,250,.45));
}
html[lang="fa"] .band-slogan h2 { letter-spacing: 0; }
@media (max-width: 760px) { .band-slogan { align-items: center; padding: 46px 22px 42px; } }
.report-head { flex-wrap: wrap; }

/* project cards: a box at the foot of the card, lit when a simulator report can be downloaded */
.proj-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; }
.proj-foot .link-arrow { margin-inline-start: auto; }
.proj-report {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px;
  font-size: 14.2px; font-weight: 600; color: var(--dim);
  border: 1px dashed var(--line-2); background: rgba(148,170,205,.03); opacity: .55;
}
.proj-report svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proj-report.is-on {
  opacity: 1; color: #eaffff; border: 1px solid rgba(56,213,245,.6);
  background: linear-gradient(120deg, rgba(56,213,245,.26), rgba(59,130,246,.2));
  box-shadow: 0 0 0 1px rgba(56,213,245,.12), 0 10px 34px rgba(56,213,245,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.proj-report.is-on svg { color: var(--cyan); }
@media (max-width: 480px) {
  .nav .logo-mark { width: 42px; height: 42px; }
  html[data-lang="fa"] .nav .logo-text { font-size: 19px; }
  html[dir="ltr"] .nav .logo-text { font-size: 13px; }
}

/* footer: one glass panel for brand, links and contact, then the rights line */
.footer { border-block-start: 0; padding-block: 70px 34px; background: transparent; }
.footer-panel {
  position: relative; overflow: hidden; grid-template-columns: 1.6fr .8fr 1.2fr; gap: 56px;
  padding: 46px 48px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(59,130,246,.2), transparent 62%),
    linear-gradient(160deg, rgba(148,170,205,.08), rgba(148,170,205,.02));
  box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
html[dir="ltr"] .footer-panel {
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(59,130,246,.2), transparent 62%),
    linear-gradient(160deg, rgba(148,170,205,.08), rgba(148,170,205,.02));
}
.footer-panel::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,180,255,.9), rgba(56,213,245,.9), transparent);
}
.footer-brand .logo { gap: 16px; }
.footer-brand .logo-mark { width: 60px; height: 60px; filter: drop-shadow(0 0 18px rgba(63,155,255,.5)); }
html[data-lang="fa"] .footer-brand .logo-text { font-size: 25px; }
html[dir="ltr"] .footer-brand .logo-text { font-size: 19px; letter-spacing: .18em; }
.footer-brand .logo-text b { font-weight: 800; }
.footer-brand p { margin-block-start: 20px; font-size: 15.4px; line-height: 1.95; max-width: 36ch; }
.footer-col { gap: 4px; }
.footer-col h2 { margin-block-end: 12px; color: var(--cyan); font-size: 13px; }
.footer-col > a:not(.footer-mail):not(.footer-cta) {
  position: relative; padding-block: 7px; padding-inline-start: 18px; font-size: 15.4px;
  transition: color .2s, padding .25s;
}
.footer-col > a:not(.footer-mail):not(.footer-cta)::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 50%; width: 8px; height: 1.5px;
  background: var(--line-2); transition: width .25s, background .25s;
}
.footer-col > a:not(.footer-mail):not(.footer-cta):hover { color: #fff; padding-inline-start: 24px; }
.footer-col > a:not(.footer-mail):not(.footer-cta):hover::before { width: 14px; background: var(--cyan); }
.footer-mail {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid rgba(56,213,245,.35); background: rgba(56,213,245,.07); color: var(--text);
  font-family: var(--font-disp); font-size: 15px; direction: ltr;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.footer-mail svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-mail:hover { border-color: var(--cyan); background: rgba(56,213,245,.13); box-shadow: 0 0 26px rgba(56,213,245,.2); color: #fff; }
.footer-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-block-start: 16px;
  color: var(--accent-hi); font-size: 14.8px; font-weight: 600;
}
.footer-cta .arr { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
html[dir="rtl"] .footer-cta .arr { transform: scaleX(-1); }
.footer-cta:hover { color: #fff; }
html[dir="ltr"] .footer-cta:hover .arr { transform: translateX(4px); }
html[dir="rtl"] .footer-cta:hover .arr { transform: scaleX(-1) translateX(4px); }
.footer-bottom { margin-block-start: 26px; text-align: center; color: var(--dim); font-size: 13.4px; line-height: 1.9; }
@media (max-width: 900px) { .footer-panel { gap: 36px; padding: 34px 28px; } .footer-panel::before { inset-inline: 28px; } }

/* the page is dark by design: stop browsers' automatic dark modes from recolouring it */
:root { color-scheme: dark; }

/* ---------------------------------------------------------------
   Phones and tablets only. Nothing below applies above 1020px.
   --------------------------------------------------------------- */
@media (max-width: 1020px) {
  .footer-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* footer: one column, links in two, the address as a full-width button */
  .footer { padding-block: 44px 92px; }
  .footer-panel { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px; }
  .footer-panel::before { inset-inline: 22px; }
  .footer-brand .logo-mark { width: 50px; height: 50px; }
  html[data-lang="fa"] .footer-brand .logo-text { font-size: 22px; }
  html[dir="ltr"] .footer-brand .logo-text { font-size: 16px; }
  .footer-brand p { margin-block-start: 14px; max-width: none; }
  .footer-col:not(.footer-contact) { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .footer-col h2 { grid-column: 1 / -1; }
  .footer-col > a { white-space: nowrap; }
  .footer-col .footer-mail { justify-self: stretch; justify-content: center; padding: 14px 12px; font-size: 14.5px; }
  .footer-bottom { font-size: 12.6px; padding-inline: 6px; }

  /* project cards: tighter, the report box full width, facts as a compact table */
  .proj { gap: 20px; padding: 24px 20px; }
  .proj h3 { font-size: 1.55rem; }
  .proj-sub { font-size: 15.2px; }
  .proj-desc { margin-block-end: 20px; }
  .proj-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .proj-report { justify-content: center; padding: 13px 14px; }
  .proj-foot .link-arrow { margin-inline-start: 0; align-self: flex-start; }
  .proj-facts { gap: 0; padding-block-start: 4px; }
  .proj-facts li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-block: 12px; border-block-end: 1px solid var(--line);
  }
  .proj-facts li:last-child { border-block-end: 0; padding-block-end: 0; }
  .proj-facts b { flex: none; font-size: 15.5px; }
  .proj-facts li > span { text-align: end; font-size: 12.8px; }

  /* report cards on the project pages */
  .reports > li { padding: 24px 20px; }
  .report-head b { font-size: 2rem; }
  .report-facts { gap: 16px 14px; }
  .report-actions .btn { flex: 1 1 100%; justify-content: center; }
  .contact-mails .contact-main strong { font-size: 19px; }

  /* back to top: smaller and tucked into the corner */
  .to-top { width: 46px; height: 46px; inset-block-end: 14px; inset-inline-end: 14px; }
  .to-top svg { width: 18px; height: 18px; }
}

/* some phone browsers only leave a page alone if it answers the dark-mode query itself */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } html { background: #05080e; } }

/* Samsung Internet's dark mode darkens bright backgrounds and gradient text: give it flat equivalents */
html.sb a[data-href] { cursor: pointer; }
html.sb .hero h1 em, html.sb .band-slogan h2 em {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #6cc6ff; filter: none;
}
/* it leaves raster images alone, so the two blue surfaces are painted from PNGs there */
html.sb .btn-primary { background: url(../img/sb-button.png) center / 100% 100% no-repeat; }
html.sb .proj-report.is-on { background: url(../img/sb-report.png) center / 100% 100% no-repeat; }

/* a link inside a paragraph of a project page */
.cs-section p a { color: var(--accent-hi); border-block-end: 1px solid rgba(140,188,255,.4); transition: color .2s, border-color .2s; }
.cs-section p a:hover { color: #fff; border-color: #fff; }

/* ==========================================================================
   Upgrade layer: type scale, motion between and within pages, navigation aids.
   Nothing here changes a word of content.
   ========================================================================== */
:root { --o-start: left; }
html[dir="rtl"] { --o-start: right; }

/* ---------- a larger, tighter type scale and more air ---------- */
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
.sec-head { margin-block-end: 58px; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3.05rem); }
.cs-section h2 { font-size: clamp(1.9rem, 3.7vw, 2.8rem); }
html[dir="ltr"] .hero h1, html[dir="ltr"] .page-hero h1 { letter-spacing: -.035em; }
html[dir="ltr"] .sec-head h2, html[dir="ltr"] .cs-section h2 { letter-spacing: -.03em; }
.section { padding-block: 116px; }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.sec-head .eyebrow::before { content: ''; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.facts-glass b, .proj-facts b, .report-facts b { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .section { padding-block: 76px; } .sec-head { margin-block-end: 40px; } }

/* ---------- a fine grain over the page, so flat colour has some depth ---------- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the opening: the mark, a line, then the page (first visit only) ---------- */
/* Two layers. The veil only fades. The mark and the name sit together in one block that only
   grows and fades. Nothing but transform and opacity is animated, so the browser runs the whole
   thing on the graphics card and it stays smooth even while the page is still loading. */
html.intro::after {
  content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none; background: #05080e;
  animation: intro-veil 3.3s linear forwards;
}
html.intro::before {
  content: 'NOVA GROUP'; position: fixed; z-index: 2001; pointer-events: none;
  top: 50%; left: 50%; width: 320px; margin: -170px 0 0 -160px; padding: 218px 0 20px; text-align: center;
  font-family: var(--font-disp); font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: .26em; text-indent: .26em; color: #fff;
  background:
    url(../img/nova-mark-512.png) center 0 / 192px 192px no-repeat,
    linear-gradient(90deg, transparent, #38d5f5, transparent) center 100% / 170px 2px no-repeat;
  transform-origin: 50% 42%;
  animation: intro-mark 3.3s forwards;
}
html[data-lang="fa"].intro::before { content: 'نوا گروپ'; font-family: var(--font-fa); font-size: 30px; letter-spacing: 0; text-indent: 0; }
@keyframes intro-veil {
  0%, 76% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes intro-mark {
  0% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  12% { opacity: 1; }
  76% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: scale(1.08); }
}

/* ---------- moving between pages: the old one fades, the new one rises in ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .2s ease both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2,.8,.2,1) both; }
.nav { view-transition-name: site-nav; }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@supports not (view-transition-name: none) {
  html.js main { animation: vt-in .5s cubic-bezier(.2,.8,.2,1) both; }
  html.js.is-returning main { animation: none; }
}
/* a change of language is the same page again, not a new one: it takes the old page's place at once, with no fade
   (early.js skips the transition; these rules cover a browser that would still run one) */
html.is-returning::view-transition-old(root), html.is-returning::view-transition-new(root),
html.is-returning::view-transition-group(*) { animation: none; }
html.is-returning::view-transition-old(*) { display: none; }

/* ---------- the big headings rise from behind an edge ---------- */
/* the clip sits on the text inside, not on the heading: a heading clipped to nothing is never seen as "in view" */
html.js .hero h1.reveal, html.js .page-hero h1.reveal { opacity: 1; transform: none; }
html.js .hero h1.reveal > span, html.js .page-hero h1.reveal > span {
  display: block; transform: translateY(.4em); clip-path: inset(0 -5% 100% -5%);
  transition: clip-path 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: inherit;
}
html.js .hero h1.reveal.is-in > span, html.js .page-hero h1.reveal.is-in > span { transform: none; clip-path: inset(-15% -5% -20% -5%); }

/* ---------- links: an underline that draws itself ---------- */
.nav-links a::after {
  content: ''; position: absolute; inset-inline: 16px; inset-block-end: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transform: scaleX(0); transform-origin: var(--o-start); transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.link-arrow > span {
  padding-block-end: 2px; background: linear-gradient(currentColor, currentColor) no-repeat;
  background-position: var(--o-start) 100%; background-size: 0 1px; transition: background-size .32s cubic-bezier(.2,.8,.2,1);
}
a.link-arrow:hover > span, a:hover .link-arrow > span { background-size: 100% 1px; }

/* ---------- home: the three layers as a stack, the foundation at the bottom ----------
   Each layer is a slab; a higher one is a little narrower and sits on the one beneath. They are written
   in reading order (foundation first) and laid out bottom-up. When the stack comes into view the
   foundation rises into place and the other two land on it in turn (main.js adds .is-stacked). */
@media (min-width: 861px) {
  .layers-home { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
  .layers-home li {
    display: grid; grid-template-columns: 58px minmax(210px, 290px) minmax(0, 1fr); column-gap: 26px;
    grid-template-areas: "ico tag text" "ico title text"; align-items: center;
    width: 100%; padding: 22px 32px 24px; border-radius: 18px; border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(148,170,205,.115), rgba(148,170,205,.03));
    box-shadow: 0 20px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 0 rgba(3,6,12,.5);
  }
  .layers-home li:nth-child(2) { width: 91%; border-color: rgba(96,165,250,.38); }
  .layers-home li:nth-child(3) {
    width: 82%; border-color: rgba(56,213,245,.5);
    box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 0 44px rgba(56,213,245,.1), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -4px 0 rgba(3,6,12,.5);
  }
  .layers-home .layer-ico { grid-area: ico; width: 58px; height: 58px; margin: 0; border-radius: 17px; transition: transform .3s, box-shadow .3s, border-color .3s; }
  .layers-home .layer-ico svg { width: 27px; height: 27px; }
  .layers-home .layer-tag { grid-area: tag; align-self: end; margin: 0; }
  .layers-home h3 { grid-area: title; align-self: start; margin: 4px 0 0; font-size: 19px; }
  .layers-home p { grid-area: text; }
  .layers-home li.glow:hover { transform: translateY(-4px); }
  .layers-home li:hover .layer-ico { border-color: var(--cyan); box-shadow: 0 12px 34px rgba(56,213,245,.35); }

  html.js .layers-home:not(.is-stacked) > li { opacity: 0; }
  html.js .layers-home:not(.is-stacked) > li:nth-child(1) { transform: translateY(44px); }
  html.js .layers-home:not(.is-stacked) > li:nth-child(n+2) { transform: translateY(-58px) scale(.97); }
  html.js .layers-home.is-stacked > li { opacity: 1; transform: none; transition: opacity .4s ease, transform .8s cubic-bezier(.3,1.4,.5,1), border-color .3s, box-shadow .3s; }
  html.js .layers-home.is-stacked:not(.is-settled) > li:nth-child(2) { transition-delay: .34s; }
  html.js .layers-home.is-stacked:not(.is-settled) > li:nth-child(3) { transition-delay: .68s; }
  html.js .layers-home.is-settled > li { transition: transform .3s, border-color .3s, box-shadow .3s; }
  html.js .layers-home.is-settled > li.glow:hover { transform: translateY(-4px); }
}

/* ---------- project cards: a mark of their own ---------- */
.proj-glyph {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  border: 1px solid var(--line-2); background: rgba(148,170,205,.05);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.proj-glyph svg { width: 23px; height: 23px; fill: none; stroke: var(--accent-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.proj:hover .proj-glyph { border-color: rgba(56,213,245,.6); background: rgba(56,213,245,.08); box-shadow: 0 0 24px rgba(56,213,245,.22); }
.proj:hover .proj-glyph svg { stroke: var(--cyan); }

/* ---------- project pages: the section links follow the reader ---------- */
.tocbar {
  position: fixed; inset-inline: 0; inset-block-start: var(--nav-h); z-index: 90;
  background: rgba(5,8,14,.88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-block-end: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .28s, transform .35s cubic-bezier(.2,.8,.2,1), visibility .28s;
}
.tocbar.is-on { opacity: 1; visibility: visible; transform: none; }
.tocbar .toc { margin: 0; padding-block: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tocbar .toc::-webkit-scrollbar { display: none; }
.tocbar .toc a { flex: none; }
.tocbar-fill {
  position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan)); transform: scaleX(0); transform-origin: var(--o-start);
}
html:has(.tocbar) { scroll-padding-top: calc(var(--nav-h) + 78px); }

/* ---------- project pages: the project before and the one after ---------- */
.projnav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-block-end: 40px; }
.projnav-card {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 30px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel);
}
.projnav-card.is-next { align-items: flex-end; text-align: end; }
.projnav-dir { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.6px; }
.projnav-card.is-prev .arr { transform: scaleX(-1); }
html[dir="rtl"] .projnav-card.is-prev .arr { transform: none; }
.projnav-card b { font-family: var(--font-h); font-size: clamp(1.2rem, 2.3vw, 1.6rem); font-weight: 700; color: var(--text); transition: color .25s; }
.projnav-card:hover b { color: var(--cyan); }
@media (max-width: 760px) { .projnav { grid-template-columns: 1fr; } .projnav-card.is-next { align-items: flex-start; text-align: start; } }

/* ---------- not found ---------- */
.lost { min-height: 78vh; display: grid; align-items: center; border-block-end: 0; }
.lost-code {
  font-family: var(--font-disp); font-size: clamp(5rem, 18vw, 11rem); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-block-end: 18px;
}
html.sb .lost-code { background: none; color: #6cc6ff; }
.lost .hero-cta { margin-block-start: 34px; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.js .hero h1.reveal > span, html.js .page-hero h1.reveal > span { clip-path: none; transform: none; }
}
@media print { .tocbar, .projnav, body::after { display: none; } }

/* English captions in the fact tiles run longer than the Persian ones: set them a touch smaller so none is cut */
html[dir="ltr"] .facts-glass .fact-list span { font-size: 13px; letter-spacing: -.012em; }

/* between phone and tablet widths two tiles side by side are too narrow for their captions */
@media (max-width: 640px) { .facts.facts-glass { grid-template-columns: 1fr; } }

/* section headings may use the full width; only the paragraph under them stays narrow.
   When a heading must break, the lines are balanced instead of leaving one word alone. */
.sec-head { max-width: none; }
.sec-head p:not(.eyebrow) { max-width: 740px; }
.sec-head h2, .hero h1, .page-hero h1, .cs-section h2, .band-slogan h2 { text-wrap: balance; }

/* phones narrower than 350px: the order book tightens so every figure still fits */
@media (max-width: 350px) {
  .mbo-head, .mbo-mid, .mbo-tape { padding-inline: 10px; }
  .mbo-mid { gap: 6px; font-size: 9.6px; letter-spacing: .02em; }
  .mbo-mid b { margin-left: 4px; font-size: 11px; }
  .mbo-cols, .mbo-row { grid-template-columns: 62px minmax(0, 1fr) 24px; gap: 8px; padding-inline: 10px; }
  .tp { grid-template-columns: 80px 34px 22px 1fr; gap: 6px; }
}

/* ---------- arriving from the same page in the other language: the reader is put back where they were,
   so nothing plays its entrance a second time ---------- */
html.is-returning .reveal, html.is-returning .reveal > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
html.is-returning .phases li::before { transition: none; }

/* ---------- touch screens: small links and buttons answer to a fingertip, not just to their own outline.
   The hit area grows; nothing on the page moves, and a desktop with a mouse is not affected. ---------- */
@media (pointer: coarse) {
  .crumbs a, .member-mail, a.link-arrow, .shot-zoom, .cs-section p a { position: relative; }
  .crumbs a::after, .member-mail::after, a.link-arrow::after, .shot-zoom::after, .cs-section p a::after {
    content: ''; position: absolute; inset: -10px -6px;
  }
}

/* ---------- justified lines may break a long word rather than open wide gaps: on phones in every Latin-script
   language, and in German at every width, where one compound can be as long as a line ---------- */
html[lang="de"] :is(.prose p, .hero-sub, .page-lead, .split-side p, .layers p, .track p, .proj-desc, .sec-head p:not(.eyebrow), .band p, .callout p, .cs-section p) {
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
/* and where a browser has no dictionary for it, a word longer than its line breaks rather than running out of its box */
html[lang="de"] :is(p, li, h2, h3, figcaption, .shot-cap) { overflow-wrap: break-word; }
@media (max-width: 760px) {
  html[dir="ltr"] :is(.prose p, .hero-sub, .page-lead, .split-side p, .layers p, .track p, .proj-desc, .sec-head p:not(.eyebrow), .cs-section p) {
    -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3;
  }
}

/* ==========================================================================
   Effects layer 2
   ========================================================================== */
:root { --o-end: right; }
html[dir="rtl"] { --o-end: left; }
/* Persian inside a display heading (a project's name on its card) stays in the site's Persian face */
html[data-lang="fa"] { --font-disp: 'Space Grotesk', 'Inter', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif; }

/* ---------- a project's name travels from its card to the heading of its page, and back ---------- */
.proj h3 > span { display: inline-block; }
.page-hero:has(.crumbs) h1 > span { width: fit-content; max-width: 100%; view-transition-name: proj-title; }
html.from-card .page-hero h1.reveal > span { transform: none; clip-path: none; transition: none; }
::view-transition-group(proj-title) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ---------- the road ahead: a bar along the top of each stage fills, in order, up to today ---------- */
.phases li::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 1;
  background:
    linear-gradient(to var(--o-end), var(--accent), var(--cyan)) var(--o-start) 0 / 0% 100% no-repeat,
    rgba(148,170,205,.13);
  transition: background-size .75s cubic-bezier(.3,.7,.2,1);
}
.phases li:nth-child(2)::before { transition-delay: .5s; }
.phases li:nth-child(3)::before { transition-delay: 1s; }
.phases li:nth-child(4)::before { transition-delay: 1.5s; }
html:not(.js) .phases li.is-done::before, .phases li.is-done.is-in::before { background-size: 100% 100%, auto; }
html:not(.js) .phases li.is-now::before, .phases li.is-now.is-in::before { background-size: 58% 100%, auto; }
/* today's stage breathes, and its label carries a live dot */
.phases li.is-now.is-in { animation: phase-now 3s ease-in-out 1.6s infinite; }
@keyframes phase-now { 50% { box-shadow: 0 0 54px rgba(56,213,245,.3); border-color: rgba(56,213,245,.85); } }
.phases li.is-now .phase-mark { display: inline-flex; align-items: center; gap: 8px; }
.phases li.is-now .phase-mark::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #04121a;
  animation: phase-dot 1.8s ease-out infinite;
}
@keyframes phase-dot { 0% { box-shadow: 0 0 0 0 rgba(4,18,26,.55); } 100% { box-shadow: 0 0 0 9px rgba(4,18,26,0); } }

/* ---------- home hero: an order ticket under the simulated book ----------
   Type, delay, size and price; two buttons; then what happened, in a sentence and in four figures,
   the visitor's waiting orders, and the position that results. */
.mbo-try {
  display: grid; gap: 10px; margin-block-start: 12px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(14,21,36,.9), rgba(7,11,19,.9));
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.tk-row { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; }
.tk-row + .tk-row { grid-template-columns: 1fr 1fr; }
.tk-seg, .tk-step {
  display: flex; align-items: center; min-width: 0; height: 42px; padding: 3px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(148,170,205,.06);
}
.tk-cap { flex: none; padding-inline: 10px 4px; font-size: 12.4px; color: var(--dim); white-space: nowrap; }
html[dir="ltr"] .tk-cap { font-family: var(--font-disp); font-size: 11.2px; letter-spacing: .1em; text-transform: uppercase; }
.tk-seg button {
  flex: 1; min-width: 0; height: 100%; padding: 0 6px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: 13.2px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s;
}
.tk-seg button:hover { color: var(--text); }
.tk-seg button[aria-pressed="true"] { color: #fff; background: rgba(59,130,246,.3); box-shadow: inset 0 0 0 1px rgba(96,165,250,.6); }
/* figures read left to right in both languages; the label stays on the side the line starts on */
.tk-ctl { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; direction: ltr; }
.tk-ctl button { height: 100%; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--accent-hi); font-size: 19px; line-height: 1; transition: background .2s; }
.tk-ctl button:hover { background: rgba(59,130,246,.2); }
.tk-ctl input, .tk-ctl output {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; text-align: center;
  font-family: var(--font-mono); font-size: 14.6px; font-variant-numeric: tabular-nums; color: var(--text);
}
html[data-lang="fa"] .tk-ctl input, html[data-lang="fa"] .tk-ctl output { font-family: var(--font-fa); font-size: 15.4px; }
.tk-ctl input:focus { outline: none; }
.tk-step:focus-within { border-color: var(--accent-hi); }
/* a market order has no price of its own */
.mbo-try:not(.is-limit) .tk-price { opacity: .55; }
.mbo-try:not(.is-limit) .tk-price button { visibility: hidden; }
.mbo-try:not(.is-limit) .tk-price output { font-family: inherit; font-size: 13px; color: var(--muted); }

.mbo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbo-btn {
  display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 54px; padding: 7px 12px; border-radius: 12px;
  backdrop-filter: blur(8px); transition: background .2s, border-color .2s, box-shadow .25s, transform .2s, opacity .2s;
}
.mbo-btn b { font-size: 15.4px; font-weight: 700; line-height: 1.4; }
.mbo-btn small { font-size: 11.8px; line-height: 1.5; opacity: .82; }
.mbo-btn.is-buy  { color: #a9ccff; border: 1px solid rgba(91,155,255,.55); background: rgba(91,155,255,.1); }
.mbo-btn.is-sell { color: #ffb3bf; border: 1px solid rgba(255,115,137,.5); background: rgba(255,115,137,.08); }
.mbo-btn.is-buy:hover  { border-color: #7db4ff; background: rgba(91,155,255,.18); box-shadow: 0 0 26px rgba(91,155,255,.28); transform: translateY(-2px); }
.mbo-btn.is-sell:hover { border-color: #ff8fa1; background: rgba(255,115,137,.15); box-shadow: 0 0 26px rgba(255,115,137,.24); transform: translateY(-2px); }
.mbo-btn:active { transform: translateY(0) scale(.98); }
.mbo-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* two lines are held for the sentence, so the ticket does not jump when a result is written in */
.mbo-say { min-height: 3.5em; margin-block-start: 2px; text-align: center; font-size: 13.6px; line-height: 1.75; color: var(--muted); }
.mbo-say.is-told { color: var(--text); animation: cap-in .45s ease-out; }
.mbo-say bdi { color: #ffd166; font-weight: 600; }
/* an order on its way: a line that runs for as long as the delay */
.mbo-say.is-flying::after {
  content: ''; display: block; width: 150px; height: 2px; margin: 9px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan)); transform-origin: var(--o-start); animation: tk-fly var(--wait, 1s) linear forwards;
}
@keyframes tk-fly { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tk-stats[hidden], .tk-work[hidden], .tk-pos[hidden] { display: none; }
.tk-stats > div { padding: 8px 4px 9px; border-radius: 10px; border: 1px solid var(--line); background: rgba(148,170,205,.05); text-align: center; }
.tk-stats span { display: block; font-size: 11.2px; line-height: 1.6; color: var(--dim); }
.tk-stats b { display: block; margin-block-start: 2px; font-family: var(--font-mono); font-size: 13.4px; font-weight: 600; color: var(--text); direction: ltr; }
html[data-lang="fa"] .tk-stats b { font-family: var(--font-fa); font-size: 14.4px; }

.tk-work { display: grid; gap: 6px; }
.tk-work li {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 6px 4px 12px; border-radius: 10px;
  border: 1px solid rgba(255,209,102,.4); background: rgba(255,209,102,.06); font-size: 12.8px; color: var(--muted);
}
html[dir="rtl"] .tk-work li { padding: 4px 12px 4px 6px; }
.tk-work b { flex: none; font-size: 12.4px; }
.tk-work b.is-buy { color: #a9ccff; }
.tk-work b.is-sell { color: #ffb3bf; }
html[dir="ltr"] .tk-work b { text-transform: uppercase; letter-spacing: .06em; }
.tk-what { color: var(--text); font-weight: 600; white-space: nowrap; }
.tk-ahead { color: #ffd166; white-space: nowrap; }
.tk-done { margin-inline-start: auto; white-space: nowrap; }
.tk-work button {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--line-2); background: none;
  color: var(--muted); font-size: 17px; line-height: 1; transition: color .2s, border-color .2s;
}
.tk-work button:hover { color: #ffb3bf; border-color: #ff8fa1; }

.tk-pos { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--line); font-size: 12.8px; line-height: 1.7; color: var(--muted); }
.tk-pos bdi { color: var(--text); font-weight: 600; }
.tk-reset { flex: none; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 12.4px; transition: color .2s, border-color .2s; }
.tk-reset:hover { color: var(--text); border-color: var(--accent-hi); }

/* the visitor's prints on the tape and waiting orders in the book are amber, like our own orders in the two track books */
.mbo .chip.is-mine { background: #ffd166; color: #1c1300; transform: scale(1.14); box-shadow: 0 0 16px rgba(255,209,102,.85); }
.hero-visual figcaption { margin-block-start: 12px; }

/* the book and its ticket are taller than the words beside them: both start at the top, and the words stay in view */
@media (min-width: 1021px) {
  .hero-grid { align-items: start; }
  .hero-copy { position: sticky; inset-block-start: calc(var(--nav-h) + 26px); padding-block-start: 30px; }
}
@media (max-width: 760px) {
  .mbo-say { min-height: 5.25em; }
  .tk-stats { grid-template-columns: 1fr 1fr; }
  .tk-work li { flex-wrap: wrap; gap: 4px 10px; padding-block: 8px; }
  .tk-pos { flex-wrap: wrap; }
}
/* beside the words on a mid-sized screen the ticket is narrow: the price gets the wider share and both get slimmer buttons */
@media (min-width: 1021px) and (max-width: 1240px) {
  .tk-row + .tk-row { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: 8px; }
  .tk-step .tk-cap { padding-inline: 8px 2px; }
  .tk-ctl { grid-template-columns: 26px minmax(0, 1fr) 26px; }
}
/* on a phone every control has a row of its own */
@media (max-width: 460px) {
  .tk-row, .tk-row + .tk-row { grid-template-columns: 1fr; }
}

/* ---------- home, the closing line: marks drift in scattered and leave in steady streams ---------- */
.band-slogan .flow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.band-slogan > :not(.flow) { position: relative; z-index: 1; }

/* ---------- a project screenshot at full size: zoom with the wheel, two fingers or a double tap; drag to move ---------- */
.lightbox { display: block; padding: 0; cursor: default; overscroll-behavior: contain; }
.lightbox.is-closing { opacity: 0; transition: opacity .2s; }
.lightbox-view { position: absolute; inset: 56px 16px 84px; display: grid; place-items: center; touch-action: none; cursor: zoom-out; }
.lightbox-view img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: var(--ar, auto);
  border-radius: 10px; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,.8);
  cursor: zoom-in; user-select: none; -webkit-user-drag: none; will-change: transform; transform-origin: 50% 50%;
}
.lightbox-view img.is-zoomed { cursor: grab; }
.lightbox-view img.is-held { cursor: grabbing; }
.lightbox-view img.is-eased { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lightbox-nav {
  position: absolute; inset-block-start: 50%; z-index: 2; width: 46px; height: 46px; margin-block-start: -37px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--text); background: rgba(148,170,205,.12); border: 1px solid var(--line-2);
  transition: background .2s, border-color .2s;
}
.lightbox-nav:hover { background: rgba(59,130,246,.3); border-color: var(--accent-hi); }
.lightbox-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-nav.is-prev { inset-inline-start: 18px; }
.lightbox-nav.is-next { inset-inline-end: 18px; }
html[dir="ltr"] .lightbox-nav.is-prev svg, html[dir="rtl"] .lightbox-nav.is-next svg { transform: scaleX(-1); }
.lightbox-close { z-index: 3; inset-block-start: 8px; inset-inline-end: 14px; width: 42px; height: 42px; }
.lightbox-bar {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 12px 22px 14px; background: linear-gradient(to top, rgba(3,5,10,.92), rgba(3,5,10,0));
}
.lightbox-count { flex: none; font-family: var(--font-disp); font-size: 13px; letter-spacing: .08em; color: var(--accent-hi); direction: ltr; }
.lightbox-cap { flex: 1; min-width: 0; font-size: 14.2px; line-height: 1.7; color: var(--muted); }
.lightbox-hint { flex: none; font-size: 12.4px; color: var(--dim); transition: opacity .6s; }
.lightbox-hint.is-gone { opacity: 0; }
@media (max-width: 760px) {
  .lightbox-view { inset: 54px 0 118px; }
  .lightbox-view img { border-radius: 0; border-inline: 0; }
  .lightbox-nav { inset-block-start: auto; inset-block-end: 12px; margin: 0; width: 42px; height: 42px; z-index: 3; }
  .lightbox-nav.is-prev { inset-inline-start: 12px; }
  .lightbox-nav.is-next { inset-inline-end: 12px; }
  .lightbox-bar { flex-direction: column; align-items: stretch; gap: 4px; min-height: 110px; padding: 10px 64px 12px; text-align: center; }
  .lightbox-cap { font-size: 12.8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lightbox-hint { order: -1; color: var(--accent-hi); }
}

/* ==========================================================================
   Effects layer 3
   ========================================================================== */
/* ---------- project pages: the hero tile's figure is the tile's headline; a bright line fills in under it ---------- */
.page-hero .facts-glass b {
  position: relative; display: block; align-self: flex-start;
  font-family: var(--font-disp); font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
  padding-block-end: 12px; margin-block-end: 16px;
  background: linear-gradient(100deg, #8fc2ff 0%, #5b9bff 40%, #38d6f5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-lang="fa"] .page-hero .facts-glass b { font-family: inherit; font-size: 23px; letter-spacing: 0; }
html:is([lang="fr"], [lang="de"], [lang="tr"]) .page-hero .facts-glass b { font-size: 20px; }
.page-hero .facts-glass b::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6, #38d6f5 70%, rgba(56,214,245,0));
  box-shadow: 0 0 10px rgba(56,214,245,.55);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .25s;
}
html[dir="rtl"] .page-hero .facts-glass b::after { transform-origin: right; background: linear-gradient(270deg, #3b82f6, #38d6f5 70%, rgba(56,214,245,0)); }
html:not(.js) .page-hero .facts-glass b::after, .page-hero .facts-glass li.is-in b::after,
html.is-returning .page-hero .facts-glass b::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .page-hero .facts-glass b::after { transform: none; transition: none; } }
/* Samsung Internet's dark mode darkens gradient text: plain bright blue there */
html.sb .page-hero .facts-glass b { background: none; color: #6cc6ff; }
@media (max-width: 460px) { .page-hero .facts-glass b { font-size: 21px; } html[data-lang="fa"] .page-hero .facts-glass b { font-size: 20px; } html:is([lang="fr"], [lang="de"], [lang="tr"]) .page-hero .facts-glass b { font-size: 20px; } }

/* ---------- the two track books share a trade: the taker's order crosses to the maker's quote ---------- */
.cross-chip {
  position: fixed; inset: 0 auto auto 0; z-index: 80; pointer-events: none;
  min-width: 26px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #1c1300; background: #ffd166;
  box-shadow: 0 0 0 1px #ffe9ad, 0 0 18px rgba(255,209,102,.9), 0 0 44px rgba(255,209,102,.45);
  offset-rotate: 0deg; offset-anchor: 50% 50%;
}
.cross-hit {
  position: fixed; z-index: 80; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid #ffd166; animation: cross-hit .5s ease-out forwards;
}
@keyframes cross-hit { to { transform: scale(4.2); opacity: 0; } }

/* ---------- moving along the menu: the new page comes in from the side it lies on, and the line under
   the menu slides from the old item to the new one ---------- */
:root { --vt-x: 30px; }
html[dir="rtl"] { --vt-x: -30px; }
html.vt-fwd::view-transition-old(root)  { animation: vt-out-fwd .24s ease both; }
html.vt-fwd::view-transition-new(root)  { animation: vt-in-fwd .5s cubic-bezier(.2,.8,.2,1) both; }
html.vt-back::view-transition-old(root) { animation: vt-out-back .24s ease both; }
html.vt-back::view-transition-new(root) { animation: vt-in-back .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-in-fwd   { from { opacity: 0; transform: translateX(var(--vt-x)); } }
@keyframes vt-out-fwd  { to   { opacity: 0; transform: translateX(calc(var(--vt-x) * -.5)); } }
@keyframes vt-in-back  { from { opacity: 0; transform: translateX(calc(var(--vt-x) * -1)); } }
@keyframes vt-out-back { to   { opacity: 0; transform: translateX(calc(var(--vt-x) * .5)); } }
/* on a phone the menu is folded away, so only a wide screen has a line to slide */
@media (min-width: 761px) {
  .nav-links a[aria-current="page"]::after { view-transition-name: nav-line; }
}
::view-transition-group(nav-line) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3,.9,.3,1); }