/* 3A Technology Solution — "inside the tower": the page continues the night cinematic.
   A riser of brand-coloured cables runs down the page; every section is a floor it powers. */
:root {
  --night-950: #05070b;
  --night-900: #090c11;
  --night-850: #0c1118;
  --night-800: #101722;
  --night-700: #16202e;
  --line: #1c2838;
  --line-2: #2a3a52;
  --ink: #eef2f7;
  --ink-2: #b8c3d0;
  --ink-3: #8c9aac;
  --brand: #1a92cb;
  --brand-2: #34c6f0;
  --brand-grey: #939393;
  --power: #f5c518;
  --fire: #e5483a;
  --live: #3be37f;
  --amber: #ffb547;
  --label-ink: #06090d;

  --f-display: "Alexandria", "Readex Pro", system-ui, sans-serif;
  --f-body: "Readex Pro", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --riser: clamp(28px, 6vw, 96px);
  --max: 1240px;
  --r: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-color: var(--line-2) var(--night-950); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--night-900); color: var(--ink);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body:lang(en) { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.3; margin: 0; text-wrap: balance; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }
::selection { background: var(--brand-2); color: var(--label-ink); }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night-950); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--night-950); border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[dir="ltr"], bdi { unicode-bidi: isolate; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--label-ink); padding: 10px 16px; font-weight: 600; border-radius: 6px; }
.skip:focus { top: 12px; }

/* ---------- icons + buttons */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ic.arr { transform: scaleX(-1); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s, color .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--brand); color: var(--label-ink); }
.btn-brand:hover { background: var(--brand-2); }
.btn-line { border-color: var(--line-2); background: rgba(12,17,24,.6); }
.btn-line:hover { border-color: var(--brand-2); }
.btn-line .ic { color: var(--live); }
.btn-ghost { color: var(--ink-2); padding-inline: 12px; }
.btn-ghost:hover { color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }

/* ---------- header: transparent over the film, solid once you scroll */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(9,12,17,.86); backdrop-filter: blur(12px) saturate(1.2); border-bottom-color: var(--line); }
.top-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.logo-mark { height: 38px; width: auto; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.2; }
.logo-txt strong { font-family: var(--f-display); font-weight: 800; font-size: .95rem; }
.logo-txt small { color: var(--ink-3); font-size: .78rem; }
.nav ul { display: flex; gap: 2px; }
.nav a { display: block; padding: 8px 12px; text-decoration: none; color: var(--ink-2); border-radius: 999px; font-weight: 500; font-size: .97rem; }
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-size: .92rem; color: var(--ink-2); }
.lang:hover { color: var(--ink); border-color: var(--brand); }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; }

/* ---------- cinematic hero (kept) */
main { overflow-x: clip; }
.hero-cine { position: relative; display: block; min-height: min(100vh, 960px); padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(72px, 12vh, 140px); overflow: hidden; background: var(--night-900); isolation: isolate; }
.cine { position: absolute; inset: 0; z-index: -3; }
.cine-poster, .cine canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.cine canvas { opacity: 0; transition: opacity 1.4s var(--ease); }
.cine.is-3d canvas { opacity: 1; }
.cine.is-3d .cine-poster { opacity: 0; transition: opacity 1.4s var(--ease); }
[dir="rtl"] .cine canvas { transform: scaleX(-1); }
.cine-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(to right, rgba(9,12,17,.94) 0%, rgba(9,12,17,.78) 34%, rgba(9,12,17,.18) 62%, rgba(9,12,17,0) 80%), linear-gradient(to top, var(--night-900) 0%, rgba(9,12,17,0) 24%), linear-gradient(to bottom, rgba(9,12,17,.7), rgba(9,12,17,0) 18%); }
[dir="rtl"] .cine-shade { background: linear-gradient(to left, rgba(9,12,17,.94) 0%, rgba(9,12,17,.78) 34%, rgba(9,12,17,.18) 62%, rgba(9,12,17,0) 80%), linear-gradient(to top, var(--night-900) 0%, rgba(9,12,17,0) 24%), linear-gradient(to bottom, rgba(9,12,17,.7), rgba(9,12,17,0) 18%); }
.cine-wipe { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cine-wipe::before { content: ""; position: absolute; top: -50%; bottom: -50%; width: 38%; left: -60%; transform: rotate(24deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(26,146,203,0) 20%, rgba(190,225,255,.55) 48%, #fff 50%, rgba(190,225,255,.55) 52%, transparent 80%); }
.cine-wipe.go::before { animation: wipe 1.1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes wipe { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.hero-text { position: relative; max-width: 640px; margin-inline: max(0px, calc((100% - var(--max)) / 2)); }
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.16; letter-spacing: -.025em; }
:lang(ar) .hero h1 { font-size: clamp(2.1rem, 4.1vw, 3.7rem); line-height: 1.32; }
.hero h1 em { font-style: normal; color: var(--brand-2); display: block; }
.lede { margin-top: 24px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: #c9d2dc; max-width: 54ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: var(--ink-3); font-size: .95rem; }
.proof li { display: flex; align-items: center; gap: 10px; }
.proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2); }
html.bare .top, html.bare .hero-text, html.bare .cine-shade, html.bare .dock, html.bare .lift { visibility: hidden; }

/* ---------- the tower: riser down the inline-start edge */
.tower { position: relative; max-width: calc(var(--max) + var(--riser) + 2 * var(--gutter)); margin-inline: auto; padding-inline: calc(var(--gutter) + var(--riser)) var(--gutter); }
.riser { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--gutter); width: 18px; pointer-events: none; }
.cable { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px; opacity: .22; }
.cable.c1 { inset-inline-start: 2px; background: var(--brand); }
.cable.c2 { inset-inline-start: 8px; background: var(--brand-2); }
.cable.c3 { inset-inline-start: 14px; background: #dfefff; opacity: .14; }
.fill { position: absolute; top: 0; inset-inline-start: 0; width: 18px; height: 100%; transform-origin: top; transform: scaleY(var(--p, 0));
  background:
    linear-gradient(var(--brand), var(--brand)) 2px 0 / 2px 100% no-repeat,
    linear-gradient(var(--brand-2), var(--brand-2)) 8px 0 / 2px 100% no-repeat,
    linear-gradient(#dfefff, #dfefff) 14px 0 / 2px 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(52,198,240,.55)); }
[dir="rtl"] .fill { background-position: right 2px top, right 8px top, right 14px top; }
.fill::after { /* the travelling head of the current */
  content: ""; position: absolute; bottom: -2px; inset-inline-start: -3px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(52,198,240,.6) 30%, transparent 70%); transform: scaleY(calc(1 / max(var(--p, 1), .02)));
}

.floor { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.floor + .floor { border-top: 1px solid var(--line); }
.tap { position: absolute; top: calc(clamp(72px, 9vw, 120px) + .95em); inset-inline-start: calc(-1 * var(--riser) + 8px); width: calc(var(--riser) - 18px); height: 2px; pointer-events: none;
  background: var(--line-2); font-size: clamp(2rem, 4.2vw, 3.3rem); }
.tap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to var(--tap-dir, right), var(--brand-2), var(--brand)); transform: scaleX(0); transform-origin: var(--tap-origin, left); transition: transform .8s var(--ease); }
[dir="rtl"] .tap { --tap-dir: left; --tap-origin: right; }
.tap::after { content: ""; position: absolute; top: -4px; inset-inline-end: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--night-900); border: 2px solid var(--line-2); transition: border-color .4s .5s, background-color .4s .5s; }
.floor.live .tap::before { transform: scaleX(1); }
.floor.live .tap::after { border-color: var(--brand-2); background: var(--brand-2); }

.sec-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); letter-spacing: -.02em; line-height: 1.2; }
.sec-head p { color: var(--ink-2); margin-top: 14px; max-width: 62ch; font-size: 1.1rem; }

/* ---------- lobby directory (clients) */
.directory { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  background: var(--night-850); }
.dir-col { padding: clamp(18px, 2.6vw, 32px); }
.dir-col + .dir-col { border-inline-start: 1px solid var(--line-2); }
.dir-col h3 { font-family: var(--f-body); font-weight: 500; font-size: .9rem; color: var(--brand-2); margin-bottom: 10px; }
.dir-col li { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding-block: 8px; border-bottom: 1px solid rgba(255,255,255,.05); transition: color .25s; }
.dn { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.dd { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.dt { font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
.dir-col li:hover .dn { color: var(--brand-2); }
.dir-col li:hover .dd { border-color: var(--brand); }
.more { margin-top: 14px; color: var(--ink-3); font-size: .95rem; }

/* ---------- services: building section, floors light up */
.stack { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--night-850); }
.level { --cord: var(--brand); position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 32px; align-items: start; padding: 26px clamp(18px, 2.6vw, 32px); outline-offset: -3px; }
.level + .level { border-top: 1px solid var(--line-2); }
.level[data-cord="yellow"] { --cord: var(--power); }
.level[data-cord="red"] { --cord: var(--fire); }
.level[data-cord="aqua"] { --cord: var(--brand-2); }
.level[data-cord="green"] { --cord: var(--live); }
.level::before { /* interior light */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: linear-gradient(to var(--glow-dir, right), color-mix(in srgb, var(--cord) 14%, transparent), transparent 70%);
}
[dir="rtl"] .level { --glow-dir: left; }
.level::after { /* the floor slab lights from the riser side */
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: var(--cord); transform: scaleX(0); transform-origin: var(--tap-origin, left); transition: transform .6s var(--ease); z-index: 1;
}
[dir="rtl"] .level::after { --tap-origin: right; }
.lvl-no { font-family: var(--f-mono); font-size: .85rem; color: var(--ink-3); padding-top: 6px; transition: color .3s; }
.lvl-head h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.lvl-head p { color: var(--ink-2); margin-top: 6px; max-width: 46ch; }
.rooms { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.rooms li { font-size: .9rem; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-2); background: rgba(255,255,255,.02);
  transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s; transition-delay: calc(var(--i) * 60ms); }
.level:hover::before, .level:focus-within::before, .level.lit::before { opacity: 1; }
.level:hover::after, .level.lit::after { transform: scaleX(1); }
.level:hover .lvl-no, .level.lit .lvl-no { color: var(--cord); }
.level:hover .rooms li, .level.lit .rooms li { border-color: color-mix(in srgb, var(--cord) 55%, transparent); color: var(--ink); background: color-mix(in srgb, var(--cord) 10%, transparent); }

/* readouts (lift-display digits) */
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.meters li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--night-850); }
.seg { direction: ltr; display: inline-flex; gap: 3px; padding: 8px 10px; background: #03050a; border-radius: 6px; box-shadow: inset 0 0 0 1px #0f2433; }
.seg svg { width: 18px; height: 31px; }
.seg svg .s { fill: #0c2230; transition: fill .12s; }
.seg svg .s.on { fill: var(--brand-2); }
.m-label { color: var(--ink-2); font-size: .93rem; line-height: 1.35; }

/* ---------- projects: light-trail timeline */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 500; font-size: .95rem; transition: all .2s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--label-ink); }
.count { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); margin-bottom: 26px; }
.trail { position: relative; padding-inline-start: 44px; }
.trail::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 12px; width: 2px; background: linear-gradient(var(--brand-2), var(--brand) 60%, var(--line-2)); border-radius: 2px; }
.yr { position: relative; margin: 28px 0 14px; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; color: var(--ink); }
.yr:first-child { margin-top: 0; }
.yr::before { content: ""; position: absolute; inset-inline-start: -39px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--night-900); border: 3px solid var(--brand-2); }
.yr[hidden], .stop[hidden] { display: none; }
.stop { position: relative; margin-bottom: 12px; }
.node { position: absolute; inset-inline-start: -36px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand)); }
.node::after { content: ""; position: absolute; top: 3px; inset-inline-start: 8px; width: 22px; height: 2px; background: linear-gradient(to var(--tap-dir, right), var(--c, var(--brand)), transparent); }
[dir="rtl"] .node::after { --tap-dir: left; }
.stop[data-c="data"] { --c: var(--brand-2); }
.stop[data-c="lv"] { --c: var(--brand); }
.stop[data-c="sec"] { --c: var(--power); }
.stop[data-c="fire"] { --c: var(--fire); }
.stop[data-c="pa"] { --c: var(--amber); }
.stop[data-c="mt"] { --c: var(--live); }
.card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; grid-template-areas: "hd hd hd" "t sc pe" "si sc pe" "si un pe"; gap: 4px 28px;
  padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--night-850); transition: border-color .25s, background-color .25s, transform .25s var(--ease); }
.stop:hover .card { border-color: color-mix(in srgb, var(--c, var(--brand)) 50%, var(--line-2)); background: var(--night-800); }
.card header { grid-area: hd; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ptag { font-family: var(--f-mono); font-size: .76rem; color: var(--c, var(--brand)); border: 1px solid currentColor; padding: 2px 8px; border-radius: 4px; }
.card h3 { grid-area: t; font-size: 1.15rem; line-height: 1.4; }
.site { grid-area: si; color: var(--ink-3); font-size: .93rem; }
.scope { grid-area: sc; color: var(--ink-2); font-size: .98rem; }
.period { grid-area: pe; font-size: .92rem; white-space: nowrap; color: var(--ink); align-self: start; }
.units { grid-area: un; margin-top: 6px; }
.units summary { cursor: pointer; color: var(--brand-2); font-size: .92rem; width: fit-content; }
.units ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.units li { font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: var(--night-700); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-3); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.status.on { color: var(--amber); }
.status.on .dot { background: var(--amber); animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.trail.snap .stop:not([hidden]) { animation: snap .24s steps(3, end); }
@keyframes snap { from { transform: translateY(-6px); opacity: .4; } }

/* ---------- process: one pull along a cable */
.pull { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 34px; }
.pull::before { content: ""; position: absolute; top: 9px; inset-inline: 0; height: 2px; background: var(--line-2); }
.pull::after { content: ""; position: absolute; top: 4px; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--brand-2); opacity: 0; }
.pull.is-on::after { animation: run 3.4s var(--ease) infinite; }
@keyframes run { 0% { inset-inline-start: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { inset-inline-start: calc(100% - 12px); opacity: 0; } }
.pnode { position: absolute; top: -32px; inset-inline-start: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--night-900); border: 3px solid var(--line-2); transition: border-color .4s, background-color .4s; transition-delay: calc(var(--i) * 300ms); }
.pull li { position: relative; }
.pull.is-on .pnode { border-color: var(--brand-2); background: var(--brand-2); }
.pull h3 { font-size: 1.4rem; }
.pull p { color: var(--ink-2); margin-top: 6px; max-width: 30ch; }
.brands { margin-top: clamp(56px, 8vw, 96px); }
.brands-h { font-size: 1.35rem; margin-bottom: 18px; }
.bgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bgroup { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--night-850); }
.bgroup h3 { font-family: var(--f-body); font-weight: 500; font-size: .85rem; color: var(--ink-3); margin-bottom: 10px; }
.bgroup li { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.75; }

/* ---------- team: building access badges */
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; perspective: 1200px; }
.badge { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; }
.badge-in {
  position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #142235, #0c1320 55%, #0a0f18); border: 1px solid #22344d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); transform-style: preserve-3d;
}
.badge.tilting .badge-in { transition: transform .08s linear; }
.badge-in::after { /* sheen that follows the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(140,210,255,.16), transparent 45%);
}
.badge:hover .badge-in::after { opacity: 1; }
.badge-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.badge-top img { height: 26px; width: auto; }
.slot { width: 56px; height: 8px; border-radius: 4px; background: #05080d; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.nfc { width: 22px; height: 22px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
[dir="rtl"] .badge:not([dir="ltr"]) .nfc { transform: scaleX(-1); }
.badge-photo { margin: 0 18px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 4.2; background: #0a0f16; }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.05) brightness(.92); transition: filter .5s var(--ease); }
.badge:hover .badge-photo img { filter: grayscale(.15) contrast(1.05) brightness(1); }
.badge-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.badge h3 { font-size: 1.3rem; }
.role { color: var(--brand-2); font-weight: 500; font-size: .95rem; }
.bio { color: var(--ink-2); font-size: .95rem; margin-top: 8px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; transition: border-color .2s, color .2s; }
.act:hover { border-color: var(--brand-2); color: var(--ink); }
.chipset { position: absolute; top: 74px; inset-inline-end: 30px; width: 34px; height: 26px; border-radius: 5px; opacity: .9;
  background: linear-gradient(135deg, #c9a75a, #8e7232); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); z-index: 1; }
.chipset::before { content: ""; position: absolute; inset: 6px 4px; border-top: 1px solid rgba(0,0,0,.35); border-bottom: 1px solid rgba(0,0,0,.35); }

/* ---------- FAQ */
.faq-list { max-width: 900px; border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--brand-2); }
.plus { transition: transform .3s var(--ease); color: var(--ink-3); }
.faq-list details[open] .plus { transform: rotate(45deg); color: var(--brand-2); }
.faq-list details p { color: var(--ink-2); padding-bottom: 24px; max-width: 70ch; }

/* ---------- contact (roof) */
.contact-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.order { position: relative; padding: clamp(24px, 3.4vw, 44px); border-radius: 18px; border: 1px solid #22344d; background: linear-gradient(160deg, #10203a, #0b1424 60%); overflow: hidden; }
.order::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(to right, transparent, var(--brand-2), var(--brand), transparent); }
.order h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.order > p { margin-top: 10px; color: var(--ink-2); max-width: 52ch; }
#rfq { margin-top: 28px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; font-weight: 500; color: var(--ink); }
.f-wide { grid-column: 1 / -1; }
.f em { color: #ff8a7e; font-style: normal; }
.f small { color: var(--ink-3); font-weight: 400; }
.f input, .f select, .f textarea { min-height: 48px; padding: 10px 14px; border: 1px solid #2a3d59; border-radius: 10px; background: #070d17; color: var(--ink); font-size: 1rem; caret-color: var(--brand-2); }
.f select option { background: #070d17; }
.f textarea { min-height: 96px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--brand-2); outline-offset: 0; border-color: var(--brand-2); }
.f input[aria-invalid="true"] { border-color: #ff8a7e; }
.f input::placeholder, .f textarea::placeholder { color: #7d8b9c; }
[dir="rtl"] .f input[dir="ltr"] { text-align: right; }
#rfq .btn { margin-top: 22px; width: 100%; }
.err { background: #2a1214; border: 1px solid #ff8a7e; color: #ffd6d1; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .95rem; }
.err ul { list-style: disc; padding-inline-start: 20px; margin-top: 4px; }
.direct h3 { font-family: var(--f-body); font-weight: 500; font-size: .9rem; color: var(--brand-2); margin-bottom: 10px; }
.direct h3 + ul { margin-bottom: 32px; }
.lines a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; min-height: 56px; }
.lines li:first-child a { border-top: 1px solid var(--line); }
.lines .ic { color: var(--brand-2); width: 22px; height: 22px; }
.lines li:first-child .ic { color: var(--live); }
.lines strong { display: block; font-weight: 600; line-height: 1.4; }
.lines small { color: var(--ink-3); font-size: .85rem; }
.lines .num { font-family: var(--f-mono); font-size: .84rem; color: var(--ink-2); overflow-wrap: anywhere; text-align: end; }
.lines a:hover .num { color: var(--brand-2); }
.places li { display: flex; gap: 12px; padding: 8px 0; color: var(--ink-2); font-size: .95rem; }
.places .ic { color: var(--ink-3); margin-top: .3em; }
.places strong { display: block; color: var(--ink); font-weight: 600; }

/* ---------- lift display (floor indicator) */
.lift { position: fixed; z-index: 40; bottom: 24px; inset-inline-end: 24px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; gap: 0 12px;
  padding: 10px 16px 10px 14px; border-radius: 14px; background: rgba(5,8,13,.88); border: 1px solid #1d3047; backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.lift.on { opacity: 1; transform: none; }
.lift-k { grid-column: 1; grid-row: 1; font-size: .7rem; color: var(--ink-3); }
.lift-no { grid-column: 1; grid-row: 2; font-family: var(--f-mono); font-size: 1.7rem; line-height: 1; color: var(--brand-2); min-width: 2ch; }
.lift-arrow { grid-column: 2; grid-row: 1; width: 0; height: 0; border-inline: 5px solid transparent; border-bottom: 7px solid var(--brand-2); transition: transform .3s; }
.lift.down .lift-arrow { transform: rotate(180deg); }
.lift-name { grid-column: 2; grid-row: 2; font-weight: 600; font-size: .92rem; max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- footer skyline */
.foot { position: relative; background: var(--night-950); padding: 0 var(--gutter) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.skyline { width: 100%; height: 150px; fill: #0c1420; margin-top: -1px; }
.skyline .w { fill: #3a5a80; }
.skyline .w.c { fill: #e8c891; opacity: .8; }
.foot-in { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; padding-top: 28px; }
.foot-logo { height: 84px; width: auto; margin-bottom: 12px; }
.foot-brand p { color: var(--ink-3); font-size: .95rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; align-content: start; }
.foot-nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; }
.foot-nav .lang { min-height: 0; padding: 0; border: 0; }
.foot-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .88rem; }
.credit a { color: var(--ink); font-weight: 600; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }

.dock { display: none; }

/* reveal: content visible by default, JS adds motion */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- responsive */
@media (max-width: 1080px) {
  .level { grid-template-columns: 48px minmax(0, 1fr); }
  .rooms { grid-column: 2; }
  .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hd hd" "t pe" "si si" "sc sc" "un un"; }
  .badges { grid-template-columns: 1fr 1fr; }
  .badge:last-child { grid-column: 1 / -1; max-width: 50%; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .nav.open { display: block; position: fixed; inset: 68px 0 auto 0; background: var(--night-850); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; }
  .nav.open ul { flex-direction: column; }
  .nav.open a { padding: 14px 8px; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .top:has(.nav.open) { background: var(--night-850); }
  .hero-cine { min-height: 0; padding-bottom: clamp(220px, 52vw, 380px); }
  .cine-shade, [dir="rtl"] .cine-shade { background: linear-gradient(to bottom, rgba(9,12,17,.9) 0%, rgba(9,12,17,.75) 55%, rgba(9,12,17,.1) 80%, var(--night-900) 100%); }
  .directory { grid-template-columns: 1fr; }
  .dir-col + .dir-col { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .meters { grid-template-columns: 1fr 1fr; }
  .pull { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .pull::before, .pull::after { display: none; }
  .pnode { top: -24px; }
  .contact-in { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-nav { justify-content: flex-start; }
  .lift { display: none; }
}
@media (max-width: 640px) {
  :root { --riser: 22px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .hide-sm { display: none; }
  .logo-txt { display: none; }
  .ctas .btn { flex: 1 1 auto; }
  .ctas .btn-ghost { flex-basis: 100%; }
  .riser { inset-inline-start: 8px; width: 12px; }
  .cable.c3, .fill { width: 12px; }
  .cable.c3 { display: none; }
  .tap { display: none; }
  .level { grid-template-columns: 1fr; padding: 22px 18px; }
  .lvl-no { display: none; }
  .rooms { grid-column: 1; }
  .meters li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trail { padding-inline-start: 30px; }
  .trail::before { inset-inline-start: 6px; }
  .yr::before { inset-inline-start: -31px; }
  .node { inset-inline-start: -28px; }
  .node::after { width: 14px; }
  .card { grid-template-columns: 1fr; grid-template-areas: "hd" "t" "si" "sc" "un" "pe"; padding: 16px; }
  .bgrid { grid-template-columns: 1fr 1fr; }
  .badges { grid-template-columns: 1fr; }
  .badge:last-child { max-width: none; }
  .fields { grid-template-columns: 1fr; }
  .lines a { grid-template-columns: auto 1fr; }
  .lines .num { grid-column: 2; text-align: start; }
  .dock { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--night-850); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; text-decoration: none; font-weight: 600; font-size: .95rem; }
  .dock a + a { border-inline-start: 1px solid var(--line); }
  .dock a:first-child .ic { color: var(--live); }
  .dock .dock-q { background: var(--brand); color: var(--label-ink); }
}