/* Zero00Trust: one dark world. A fixed starfield and a travelling planet sit behind every section;
   content floats over them on glass. Palette from the brand sheet: cyan #22D3EE, navy #0B1220, chrome silver. */
:root {
  --bg: #04070f;
  --navy: #0b1220;
  --glass: rgba(9, 16, 31, .74);
  --glass-strong: rgba(11, 20, 38, .9);
  --line: rgba(130, 175, 225, .15);
  --line-2: rgba(130, 175, 225, .3);
  --fg: #e8eef7;
  --muted: #8fa0b8;
  --silver: #c3cad6;
  --cyan: #22d3ee;
  --cyan-2: #0ea5e9;
  --cyan-soft: rgba(34, 211, 238, .1);
  --glow: rgba(34, 211, 238, .38);
  --red: #e5263b;
  --red-soft: rgba(229, 38, 59, .14);
  --amber: #f5a524;
  --ok: #34d399; --warn: #fbbf24; --bad: #fb7185;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e2e8f0 36%, #8b95a7 52%, #c8cfda 70%, #f5f8fc 100%);
  --f-display: "Saira", "Tajawal", "Arial Narrow", sans-serif;
  --f-body: "Titillium Web", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, Menlo, monospace;
  --radius: 14px;
  --wrap: 1240px;
  --header-h: 72px;
  color-scheme: dark;
}
[dir="rtl"] { --f-display: "Tajawal", "Saira", sans-serif; --f-body: "IBM Plex Sans Arabic", "Titillium Web", system-ui, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--cyan); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; position: relative; z-index: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Space layers ---------- */
.space { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }   /* planet.js sets the exact pixel size */
#stars { z-index: 0; }
#planet { z-index: 1; }
.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rain { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(34, 211, 238, .05) 46px 47px);
  mask-image: linear-gradient(180deg, #000, transparent 75%); }

/* ---------- Type ---------- */
.display { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: .015em; }
[dir="rtl"] .display { font-stretch: 100%; font-weight: 900; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cyan { color: var(--cyan); text-shadow: 0 0 30px var(--glow); }
/* Extruded metal: stacked hard shadows give the display type depth, like the wordmark in the logo. */
.display.chrome { filter: drop-shadow(0 1px 0 #7b8597) drop-shadow(0 1px 0 #4a5364) drop-shadow(0 1px 0 #2b3240) drop-shadow(0 1px 0 #1a202b) drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.display .cyan { text-shadow: 0 1px 0 #0fa3bf, 0 2px 0 #0b7f96, 0 3px 0 #08606f, 0 4px 0 #064452, 0 0 34px var(--glow), 0 16px 24px rgba(0, 0, 0, .5); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 10px var(--glow); }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-family: var(--f-body); font-weight: 600; font-size: .85rem; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.sec { padding-block: clamp(80px, 11vw, 140px); position: relative; counter-increment: file; }
main { counter-reset: file; }
.sec-head > .eyebrow::after { content: "FILE " counter(file, decimal-leading-zero); margin-inline-start: 6px; padding: 3px 7px; border: 1px solid rgba(229, 38, 59, .55); color: #ff6b7d; border-radius: 3px; font-size: .66rem; letter-spacing: .14em; transform: rotate(-2deg); }
.sec-head { display: grid; gap: 16px; margin-bottom: 48px; max-width: 760px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Buttons ---------- */
.btn { --b: var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 1px solid var(--b);
  background: rgba(255, 255, 255, .03); color: var(--fg); font: 600 .97rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.btn:hover { --b: var(--cyan); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, #4fe3f6, var(--cyan) 45%, var(--cyan-2)); color: #021018; --b: transparent; box-shadow: 0 10px 34px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-primary:hover { box-shadow: 0 14px 40px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Glass ---------- */
.glass { background: linear-gradient(180deg, rgba(14, 25, 47, .78), rgba(7, 13, 26, .84)); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .85); }
.hud { position: relative; }
.hud::before, .hud::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--cyan); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.hud::before { top: -1px; inset-inline-start: -1px; border-inline-end: 0; border-bottom: 0; border-start-start-radius: 6px; transform: translate(-4px, -4px); }
.hud::after { bottom: -1px; inset-inline-end: -1px; border-inline-start: 0; border-top: 0; border-end-end-radius: 6px; transform: translate(4px, 4px); }
.hud:hover::before, .hud:hover::after, .hud:focus-within::before, .hud:focus-within::after { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.top { position: fixed; top: 0; inset-inline: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(4, 8, 17, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.top .bar { max-width: 1400px; margin-inline: auto; padding-inline: 20px; height: var(--header-h); display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .35)); }
.brand-word { height: 22px; width: auto; mix-blend-mode: screen; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { color: var(--silver); text-decoration: none; font-weight: 600; font-size: .92rem; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover, .nav a.on { color: var(--fg); background: rgba(255, 255, 255, .05); }
.nav a.on { box-shadow: inset 0 -2px 0 var(--cyan); border-radius: 6px; }
.tools { display: flex; align-items: center; gap: 10px; }
.chip-btn { background: transparent; border: 1px solid var(--line-2); color: var(--fg); border-radius: 999px; padding: 8px 12px; font: 600 .82rem/1 var(--f-body); cursor: pointer; }
.chip-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.menu-btn { display: none; }
@media (max-width: 1100px) {
  .nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 12px auto; flex-direction: column; padding: 12px; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(16px); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; }
  .menu-btn { display: inline-flex; }
  .tools { margin-inline-start: auto; }
}
@media (max-width: 520px) { .brand-word { display: none; } .tools .btn-sm { padding: 9px 12px; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px)); padding-bottom: 40px; overflow: hidden; }
/* The emblem sits under the planet layer so the live globe fills its lens; copy and dock sit above it. */
.hero > .wrap { z-index: auto; }
.hero-copy, .dock { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; min-height: min(640px, calc(100svh - 300px)); }
.hero-copy { display: grid; gap: 22px; align-content: center; padding-block: 20px; }
.hero h1 { font-size: clamp(2.1rem, 4.3vw, 4rem); line-height: 1.02; }
.hero h1 span { display: block; }
.hero .lede { font-size: 1.12rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.stat { padding: 16px 14px 0 0; }
[dir="rtl"] .stat { padding: 16px 0 0 14px; }
.stat b { display: block; font: 700 2rem/1 var(--f-display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.planet-slot { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: end; }
.hero .planet-slot { margin-top: -28px; }
/* the planet behind the slot can be touched: drag to turn the Earth, hover or tap to zoom the magnifier */
[data-slot] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
[data-slot].dragging { cursor: grabbing; }
.slot-tag { position: absolute; bottom: -18px; inset-inline: 0; text-align: center; font: 500 .8rem/1 var(--f-mono); letter-spacing: .34em; color: var(--silver); text-transform: uppercase; }
[dir="rtl"] .slot-tag { letter-spacing: 0; font-family: var(--f-body); font-size: .95rem; }
.slot-tag b { color: var(--cyan); font-weight: 500; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero .planet-slot { order: -1; justify-self: center; max-width: 420px; width: 92%; margin-top: 4px; }
  .slot-tag { letter-spacing: .2em; font-size: .72rem; bottom: -10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(n+3) { padding-top: 14px; }
}

/* ---------- Booking dock ---------- */
.dock { margin-top: 26px; padding: 22px; display: grid; gap: 18px; border-color: color-mix(in srgb, var(--cyan) 30%, transparent); box-shadow: 0 0 0 1px rgba(34, 211, 238, .06), 0 0 80px -30px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .06); }
.dock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dock-head h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.dock-head p { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.steps-ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps-ol li { counter-increment: st; display: flex; align-items: center; gap: 8px; font: 500 .78rem/1 var(--f-mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .steps-ol li { letter-spacing: 0; font-family: var(--f-body); }
.steps-ol li::before { content: counter(st); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--fg); font-weight: 600; }
.steps-ol li + li::after { content: none; }
.steps-ol li:not(:last-child) { padding-inline-end: 10px; border-inline-end: 1px solid var(--line); }
.dock-body { display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(330px, 1.25fr) auto; gap: 14px; align-items: end; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.seg button { background: transparent; border: 0; color: var(--muted); font: 600 .9rem/1 var(--f-body); padding: 11px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--navy); }
.field { display: grid; gap: 6px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 0; }
[dir="rtl"] .field { letter-spacing: 0; font-family: var(--f-body); font-size: .82rem; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--f-body); color: var(--fg); background: rgba(2, 6, 14, .7); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; width: 100%; letter-spacing: 0; text-transform: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] .field select { background-position: 20px 52%, 15px 52%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.field textarea { min-height: 110px; resize: vertical; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.facts div { padding: 9px 14px; min-width: 0; }
.facts div + div { border-inline-start: 1px solid var(--line); }
.facts dt { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .facts dt { letter-spacing: 0; font-family: var(--f-body); font-size: .78rem; }
.facts dd { margin: 4px 0 0; font-weight: 600; font-size: .93rem; line-height: 1.25; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; }
[dir="rtl"] .pill { letter-spacing: 0; font-family: var(--f-body); }
.pill.free { color: var(--ok); } .pill.paid { color: var(--cyan); }
.dock-actions { display: flex; gap: 10px; }
/* PayPal: the brand's gold, kept quiet next to the main button */
.btn-pay { --b: rgba(255, 196, 57, .55); color: #ffd56b; background: rgba(255, 196, 57, .07); }
.btn-pay:hover { --b: #ffc439; background: rgba(255, 196, 57, .14); box-shadow: 0 10px 30px -14px rgba(255, 196, 57, .55); }
.btn-pay svg, .dlg-pay svg { width: 18px; height: 18px; flex: none; }
.btn-icon { padding: 11px; }
.btn-icon svg { width: 18px; height: 18px; }
.svc-btns { display: inline-flex; gap: 8px; align-items: center; }
.dock-note { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 14px; }
.dock-note svg { width: 16px; height: 16px; flex: none; color: var(--cyan); }
.pay-marks { margin-inline-start: auto; display: flex; gap: 8px; }
.pay-marks span { font: 600 .7rem/1 var(--f-mono); color: var(--silver); border: 1px solid var(--line); padding: 5px 8px; border-radius: 6px; }
@media (max-width: 1500px) { .dock-body { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); } .dock-actions { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 1100px) { .dock-body { grid-template-columns: 1fr 1fr; } .dock-body .seg { grid-column: 1 / -1; justify-self: start; } .dock-actions { justify-content: flex-end; } }
@media (max-width: 640px) { .dock { padding: 16px; } .dock-body { grid-template-columns: 1fr; } .facts dd { white-space: normal; } .dock-actions { flex-direction: column; } .dock-actions .btn { width: 100%; } .pay-marks { display: none; } .seg { width: 100%; } .seg button { flex: 1; padding-inline: 8px; } }

/* ---------- Services ---------- */
.svc-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.svc-top p { color: var(--muted); max-width: 62ch; }
.free-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 18px; border-color: rgba(52, 211, 153, .35); background: linear-gradient(100deg, rgba(52, 211, 153, .1), transparent 55%), var(--glass); }
.free-strip .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(52, 211, 153, .12); color: var(--ok); }
.free-strip .ic svg { width: 24px; height: 24px; }
.free-strip h3 { font-size: 1.12rem; font-family: var(--f-body); font-weight: 700; }
.free-strip p { color: var(--muted); font-size: .93rem; }
@media (max-width: 680px) { .free-strip { grid-template-columns: auto 1fr; } .free-strip .btn { grid-column: 1 / -1; } }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 24px; }
.svc-grid { grid-auto-flow: dense; }
.svc.featured.f-2 { grid-column: span 2; }
.svc.custom { border-style: dashed; border-color: var(--line-2); background: repeating-linear-gradient(135deg, rgba(34, 211, 238, .03) 0 12px, transparent 12px 24px), rgba(7, 13, 26, .6); align-content: center; grid-template-rows: auto auto auto; }
.svc.custom.s-2 { grid-column: span 2; }
.svc.featured h3 { font-size: 1.45rem; }
.svc.featured { border-color: rgba(34, 211, 238, .4); background: radial-gradient(120% 140% at 100% 0%, rgba(34, 211, 238, .14), transparent 55%), linear-gradient(180deg, rgba(14, 25, 47, .82), rgba(7, 13, 26, .88)); }
[dir="rtl"] .svc.featured { background: radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, .14), transparent 55%), linear-gradient(180deg, rgba(14, 25, 47, .82), rgba(7, 13, 26, .88)); }
.svc-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(34, 211, 238, .25); }
.svc-icon svg { width: 26px; height: 26px; }
.svc-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.svc h3 { font-size: 1.2rem; font-family: var(--f-body); font-weight: 700; line-height: 1.25; }
.svc .sum { color: var(--muted); font-size: .96rem; margin-top: 6px; }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .93rem; align-content: start; }
.svc li { display: flex; gap: 10px; }
.svc li::before { content: ""; width: 6px; height: 6px; margin-top: .62em; flex: none; border: 1px solid var(--cyan); transform: rotate(45deg); }
.svc.featured ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.svc-foot .meta { display: grid; gap: 2px; }
.svc-foot .meta b { font-family: var(--f-display); font-stretch: 112%; font-size: 1.1rem; }
.svc-foot .meta small { color: var(--muted); font-size: .8rem; }
.flag { font: 600 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #021018; background: var(--cyan); padding: 6px 8px; border-radius: 4px; white-space: nowrap; }
[dir="rtl"] .flag { letter-spacing: 0; font-family: var(--f-body); font-size: .75rem; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc.custom.s-2 { grid-column: span 2; } }
@media (max-width: 680px) { .svc-grid { grid-template-columns: 1fr; } .svc.featured.f-2, .svc.custom.s-2 { grid-column: auto; } .svc.featured ul { grid-template-columns: 1fr; } }

/* ---------- Policy engine ---------- */
.engine-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.engine-grid > * { min-width: 0; }
.signals { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.signals div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.signals b { font: 500 .72rem/1.7 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
[dir="rtl"] .signals b { letter-spacing: 0; font-family: var(--f-body); font-size: .9rem; }
.signals span { color: var(--muted); }
.console { font-family: var(--f-mono); font-size: .8rem; overflow: hidden; transform: perspective(1500px) rotateY(-7deg) rotateX(3deg); box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 0 70px -20px var(--glow), 0 50px 90px -50px #000; }
[dir="rtl"] .console { transform: perspective(1500px) rotateY(7deg) rotateX(3deg); }
.console-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); direction: ltr; }
.console-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }
.console-bar .count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 0; padding: 6px 0; height: 340px; overflow: hidden; direction: ltr; text-align: left; }
.req { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 16px; border-bottom: 1px dashed var(--line); animation: slide .45s ease both; }
.req .who { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req .sig { grid-column: 1 / -1; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.req .sig i { font-style: normal; }
.ok-t { color: var(--ok); } .no-t { color: var(--bad); } .wa-t { color: var(--warn); }
.verdict { font-weight: 500; padding: 3px 8px; border-radius: 4px; font-size: .72rem; letter-spacing: .08em; align-self: start; }
.v-allow { color: var(--ok); background: rgba(52, 211, 153, .12); } .v-step { color: var(--warn); background: rgba(251, 191, 36, .12); } .v-deny { color: var(--bad); background: rgba(251, 113, 133, .12); }
.console-foot { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; direction: ltr; font-variant-numeric: tabular-nums; }
@keyframes slide { from { opacity: .2; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) { .engine-grid { grid-template-columns: 1fr; } .console, [dir="rtl"] .console { transform: none; } }

/* ---------- Approach ---------- */
.steps-title { margin: 64px 0 20px; font-size: 1.3rem; font-family: var(--f-body); font-weight: 700; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.step { border-top: 2px solid; border-image: linear-gradient(90deg, var(--cyan), transparent) 1; padding-top: 18px; display: grid; gap: 8px; }
[dir="rtl"] .step { border-image: linear-gradient(270deg, var(--cyan), transparent) 1; }
.step::before { counter-increment: s; content: "0" counter(s); font: 600 .82rem/1 var(--f-mono); color: var(--cyan); }
.step h4 { font-size: 1.1rem; font-family: var(--f-body); font-weight: 700; }
.step p { color: var(--muted); font-size: .94rem; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Case files ---------- */
.files { padding-top: 0; }
.files-hero { position: relative; min-height: 520px; display: grid; align-items: end; padding-block: 140px 56px; margin-bottom: 40px; isolation: isolate; }
.files-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/case-room.webp") center 35% / cover no-repeat; opacity: .55; }
.files-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(4, 7, 15, .35) 30%, rgba(4, 7, 15, .55) 60%, var(--bg) 100%), linear-gradient(90deg, rgba(4, 7, 15, .85), transparent 65%); }
[dir="rtl"] .files-hero::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(4, 7, 15, .35) 30%, rgba(4, 7, 15, .55) 60%, var(--bg) 100%), linear-gradient(270deg, rgba(4, 7, 15, .85), transparent 65%); }
.files-hero .sec-head { margin-bottom: 0; }
.platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.plat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .9rem; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.plat svg { width: 18px; height: 18px; }
.plat:hover { border-color: var(--cyan); }
.featured-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
.story { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px; position: relative; overflow: hidden; }
.story.big { padding: 30px; border-color: rgba(229, 38, 59, .4); background: radial-gradient(130% 120% at 0% 0%, rgba(229, 38, 59, .14), transparent 55%), linear-gradient(180deg, rgba(14, 22, 40, .85), rgba(7, 12, 24, .9)); }
.story.big .story-title { font-size: 1.6rem; }
.story.big .teaser { font-size: 1.05rem; -webkit-line-clamp: 4; }
.story-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stamp { white-space: nowrap; flex: none; font: 700 .8rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .1em; padding: 6px 9px; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-2deg); direction: ltr; }
.stamp.case { color: var(--red); } .stamp.doc { color: var(--cyan); }
.story .tag { font: 500 .7rem/1.3 var(--f-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; text-align: end; }
[dir="rtl"] .story .tag { letter-spacing: 0; font-family: var(--f-body); font-size: .8rem; }
.story-title { font-size: 1.18rem; font-family: var(--f-body); font-weight: 700; line-height: 1.3; }
.teaser { color: var(--silver); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.teaser::before { content: "“"; color: var(--cyan); font-weight: 700; }
.teaser::after { content: "”"; color: var(--cyan); font-weight: 700; }
[dir="rtl"] .teaser::before { content: "«"; } [dir="rtl"] .teaser::after { content: "»"; }
.watch { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.watch small { color: var(--muted); font-size: .78rem; margin-inline-end: auto; }
.watch a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); transition: border-color .2s, color .2s, box-shadow .2s; position: relative; }
.watch a svg { width: 17px; height: 17px; }
.watch a:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 18px -4px var(--glow); }
.watch a.direct::after { content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg); }
.story-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: rgba(0, 0, 0, .3); border: 1px solid var(--line); color: var(--muted); font: 500 .78rem/1 var(--f-mono); padding: 8px 11px; border-radius: 999px; cursor: pointer; }
[dir="rtl"] .chips button { font-family: var(--f-body); font-size: .85rem; }
.chips button[aria-pressed="true"] { border-color: var(--red); color: var(--fg); background: var(--red-soft); }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.more-row { display: flex; justify-content: center; margin-top: 24px; }
.disclaimer { margin-top: 30px; font-size: .8rem; color: var(--muted); max-width: 90ch; }
@media (max-width: 1000px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .story-grid, .featured-row { grid-template-columns: 1fr; } .files-hero { min-height: 420px; padding-top: 100px; } }

/* ---------- Readiness ---------- */
.assess { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; }
.qs { display: grid; gap: 10px; }
.qrow { padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border-radius: 12px; }
.qrow small { display: block; font: 500 .68rem/1.4 var(--f-mono); color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
[dir="rtl"] .qrow small { letter-spacing: 0; font-family: var(--f-body); font-size: .8rem; }
.qseg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.qseg button { background: transparent; border: 0; color: var(--muted); font: 600 .84rem/1 var(--f-body); padding: 9px 13px; cursor: pointer; }
.qseg button + button { border-inline-start: 1px solid var(--line); }
.qseg button[aria-pressed="true"] { background: var(--cyan-soft); color: var(--cyan); }
.score { position: sticky; top: calc(var(--header-h) + 20px); padding: 26px; display: grid; gap: 16px; }
.score .big { font: 700 4.4rem/1 var(--f-display); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.score .big small { font-size: 1.3rem; color: var(--muted); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter i { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.meter i.on { background: var(--cyan); box-shadow: 0 0 12px -2px var(--glow); }
.meter-l { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font: 500 .66rem/1.2 var(--f-mono); color: var(--muted); }
[dir="rtl"] .meter-l { font-family: var(--f-body); font-size: .74rem; }
.meter-l .on { color: var(--cyan); }
.score h3 { font-size: 1.5rem; font-family: var(--f-body); font-weight: 700; }
.score p { color: var(--muted); font-size: .95rem; }
.score ol { margin: 8px 0 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: .93rem; }
.score .note { font-size: .78rem; color: var(--muted); }
@media (max-width: 980px) { .assess { grid-template-columns: 1fr; } .score { position: static; } }
@media (max-width: 600px) { .qrow { grid-template-columns: 1fr; } }

/* ---------- Experience ---------- */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.result { padding: 26px; display: grid; gap: 10px; align-content: start; }
.result .metric { font: 700 2.8rem/1 var(--f-display); font-stretch: 112%; }
.result .sector { font: 500 .7rem/1.3 var(--f-mono); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .result .sector { letter-spacing: 0; font-family: var(--f-body); font-size: .82rem; }
.result h3 { font-size: 1.12rem; font-family: var(--f-body); font-weight: 700; }
.result p { color: var(--muted); font-size: .94rem; }
.ticker { margin-top: 48px; overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; gap: 46px; width: max-content; animation: tick 40s linear infinite; }
[dir="rtl"] .ticker-track { animation-direction: reverse; }
.ticker span { font: 600 1.1rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); white-space: nowrap; display: flex; align-items: center; gap: 46px; }
.ticker span::after { content: ""; width: 6px; height: 6px; background: var(--cyan); transform: rotate(45deg); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (max-width: 1000px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .results { grid-template-columns: 1fr; } }

/* ---------- Projects & achievements ---------- */
.proj-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.proj { flex: 1 1 300px; padding: 24px; display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; isolation: isolate; }
/* blueprint grid that lights up toward the corner */
.proj::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); }
[dir="rtl"] .proj::after { mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); }
.proj-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.proj-ic { width: 52px; height: 52px; display: grid; place-items: center; color: var(--cyan); border-radius: 14px; border: 1px solid rgba(34, 211, 238, .3);
  background: radial-gradient(circle at 30% 25%, rgba(34, 211, 238, .28), rgba(34, 211, 238, .05) 70%); box-shadow: 0 0 26px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: perspective(300px) rotateX(12deg) rotateY(-14deg); transition: transform .3s; }
.proj:hover .proj-ic { transform: perspective(300px) rotateX(0) rotateY(0) translateZ(10px); }
.proj-ic svg { width: 27px; height: 27px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6)); }
.proj-id { font: 500 .7rem/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.proj-id::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.proj .sector { font: 500 .7rem/1.3 var(--f-mono); color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .proj .sector { letter-spacing: 0; font-family: var(--f-body); font-size: .84rem; }
.proj h3 { font-size: 1.16rem; font-family: var(--f-body); font-weight: 700; line-height: 1.3; }
.proj p { color: var(--muted); font-size: .94rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
[dir="rtl"] .tags { justify-content: flex-end; }
.tags li { font: 500 .7rem/1 var(--f-mono); color: var(--silver); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.proj-more { margin-top: 18px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.proj-more p { color: var(--silver); max-width: 70ch; }
@media (max-width: 640px) { .proj { flex-basis: 100%; } .proj-more .btn { width: 100%; } }

/* ---------- Soft light on words (class added by site.js; --sx/--sy follow the pointer) ---------- */
.shine { --sx: -9999px; --sy: -9999px; --tc: var(--fg); --glint: radial-gradient(160px circle at var(--sx) var(--sy), rgba(255, 255, 255, .96), rgba(150, 240, 255, .62) 34%, rgba(34, 211, 238, 0) 72%);
  color: transparent; background-image: var(--glint), linear-gradient(var(--tc), var(--tc)); -webkit-background-clip: text; background-clip: text; }
.shine.chrome { --glint: radial-gradient(190px circle at var(--sx) var(--sy), rgba(215, 252, 255, 1), rgba(34, 211, 238, .8) 38%, rgba(34, 211, 238, 0) 74%); background-image: var(--glint), var(--chrome); }
.shine.cyan { --tc: var(--cyan); text-shadow: none; filter: drop-shadow(0 1px 0 #0fa3bf) drop-shadow(0 1px 0 #0b7f96) drop-shadow(0 1px 0 #08606f) drop-shadow(0 1px 0 #064452) drop-shadow(0 0 22px rgba(34, 211, 238, .45)); }
.eyebrow.shine::before { border-color: var(--cyan); }
.nav a.shine { --tc: var(--silver); }
.nav a.shine:hover, .nav a.shine.on { --tc: var(--fg); }

/* ---------- About ---------- */
.about-grid h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-role { color: var(--cyan); font-weight: 600; margin: 10px 0 20px; }
.bio { display: grid; gap: 16px; color: var(--silver); }
.creds { display: grid; border-top: 1px solid var(--line); }
.cred { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cred b { font: 700 1.05rem/1.2 var(--f-display); font-stretch: 112%; color: var(--cyan); }
.cred span { color: var(--muted); font-size: .93rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.channels { display: grid; gap: 10px; margin-top: 28px; }
.channel { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; }
.channel .ci { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--cyan-soft); color: var(--cyan); }
.channel .ci svg { width: 20px; height: 20px; }
.channel small { display: block; font: 500 .68rem/1.3 var(--f-mono); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .channel small { letter-spacing: 0; font-family: var(--f-body); font-size: .78rem; }
.channel .v { font-weight: 600; overflow-wrap: anywhere; direction: ltr; unicode-bidi: plaintext; color: var(--fg); text-decoration: none; }
.form { padding: 26px; display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .93rem; }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.form-msg { font-size: .95rem; }
.form-msg.ok { color: var(--ok); } .form-msg.err { color: var(--bad); } .form-msg.warn { color: var(--warn); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.out { white-space: pre-wrap; font: 400 .85rem/1.55 var(--f-mono); padding: 14px; border: 1px dashed var(--cyan); border-radius: 10px; background: var(--cyan-soft); direction: ltr; text-align: left; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- Request dialog ---------- */
dialog.req-dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; color: var(--fg); border: 1px solid var(--line-2); border-radius: 18px; background: var(--glass-strong); box-shadow: 0 0 0 1px rgba(34, 211, 238, .08), 0 0 120px -30px var(--glow), 0 40px 120px -20px #000; }
dialog.req-dlg::backdrop { background: rgba(2, 5, 12, .72); backdrop-filter: blur(6px); }
.dlg-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 24px 26px 0; }
.dlg-head h2 { font-size: 1.5rem; }
.dlg-head p { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.dlg-close { background: transparent; border: 1px solid var(--line-2); color: var(--fg); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: none; font-size: 1rem; }
.dlg-close:hover { border-color: var(--cyan); color: var(--cyan); }
.dlg-svc { margin: 18px 26px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; background: rgba(0, 0, 0, .25); }
.dlg-svc .svc-icon { width: 40px; height: 40px; }
.dlg-svc b { display: block; }
.dlg-svc small { color: var(--muted); }
.dlg-pay { margin: 10px 26px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 196, 57, .4); background: rgba(255, 196, 57, .06); display: flex; gap: 10px; align-items: center; color: var(--silver); text-decoration: none; font-size: .92rem; }
.dlg-pay svg { color: #ffc439; }
.dlg-pay b { margin-inline-start: auto; color: #ffd56b; white-space: nowrap; }
.dlg-pay:hover { border-color: #ffc439; }
dialog .form { padding: 18px 26px 26px; background: none; border: 0; box-shadow: none; backdrop-filter: none; }

/* ---------- Footer ---------- */
footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); }
.foot { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.foot-brand { display: grid; gap: 10px; }
.foot-brand img { height: 26px; width: auto; mix-blend-mode: screen; }
.foot small { color: var(--muted); }
.foot .motto { font: 500 .78rem/1 var(--f-mono); letter-spacing: .2em; color: var(--cyan); text-transform: uppercase; }
[dir="rtl"] .foot .motto { letter-spacing: 0; font-family: var(--f-body); font-size: .9rem; }
.socials { display: flex; gap: 8px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); }
.socials a:hover { border-color: var(--cyan); color: var(--cyan); }
.socials svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; } }

/* ---------- Reveal ---------- */
.rv { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .rv.pending { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv.pending { opacity: 1; transform: none; }
}
.row2:has(> [hidden]) { grid-template-columns: 1fr; }

/* ---------- 3D tilt ---------- */
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; transform-style: preserve-3d; will-change: transform; }
.tilt.hovering { transition: transform .08s linear, box-shadow .35s, border-color .35s; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 40px -16px var(--glow); border-color: rgba(34, 211, 238, .35); }
.tilt::selection { background: var(--cyan-soft); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .09), transparent 45%); }
.tilt.hovering .glare { opacity: 1; }
.tilt > *:not(.glare) { transform: translateZ(18px); }

/* ---------- Eight layers: a physical stack of plates (click to pull one out) ---------- */
.layer-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; }
.tower-wrap { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.tower-hint { display: inline-flex; align-items: center; gap: 10px; font: 500 .76rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
[dir="rtl"] .tower-hint { letter-spacing: 0; font-family: var(--f-body); font-size: .9rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 var(--glow); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } }
.tower { --w: 250px; --t: 16px; --gap: 44px; width: 100%; height: 580px; display: grid; place-items: center; perspective: 2000px; perspective-origin: 50% 30%; overflow: hidden; }
.tower-3d { position: relative; width: var(--w); height: var(--w); transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(-42deg) translateZ(calc(var(--n) * var(--gap) * -.42)); }
.tower-floor { position: absolute; inset: -40px; border-radius: 50%; transform: translateZ(-30px); background: radial-gradient(closest-side, rgba(34, 211, 238, .35), rgba(34, 211, 238, .06) 60%, transparent); filter: blur(6px); }
.slab { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; transform-style: preserve-3d;
  transform: translateZ(calc((var(--n) - 1 - var(--i)) * var(--gap))); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.slab:hover { transform: translateZ(calc((var(--n) - 1 - var(--i)) * var(--gap) + 10px)); }
.slab.on { transform: translateZ(calc((var(--n) - 1 - var(--i)) * var(--gap) + 14px)) translate(-30px, 30px); }
.slab:focus-visible { outline: none; }
.slab:focus-visible .top { outline: 2px solid var(--cyan); outline-offset: 4px; }
.slab .face { position: absolute; display: block; transition: filter .4s, background .4s, border-color .4s, box-shadow .4s; }
/* top: brushed glass over a circuit grid */
.slab .top { inset: 0; transform: translateZ(var(--t)); border-radius: 6px; border: 1px solid rgba(140, 205, 240, .38); overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(120, 190, 235, .3), transparent 55%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(0deg, rgba(34, 211, 238, .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(34, 211, 238, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, #1a2c47, #0b1528 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 30px rgba(0, 0, 0, .45); }
.slab .top b { position: absolute; top: 14px; inset-inline-end: 16px; font: 800 1.5rem/1 var(--f-display); font-stretch: 112%; color: rgba(205, 245, 255, .85); text-shadow: 0 0 12px rgba(34, 211, 238, .5); }
.slab .top i { position: absolute; bottom: 14px; inset-inline-start: 16px; font: 600 .82rem/1.1 var(--f-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); max-width: 80%; }
[dir="rtl"] .slab .top i { letter-spacing: 0; font-family: var(--f-body); font-size: .95rem; }
.slab .chip { position: absolute; top: 18px; inset-inline-start: 18px; width: 46px; height: 46px; border-radius: 6px; border: 1px solid rgba(34, 211, 238, .45);
  background: repeating-linear-gradient(90deg, rgba(34, 211, 238, .45) 0 2px, transparent 2px 7px) top -6px left 6px / calc(100% - 12px) 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(34, 211, 238, .45) 0 2px, transparent 2px 7px) bottom -6px left 6px / calc(100% - 12px) 6px no-repeat, linear-gradient(135deg, #12304a, #07121f); box-shadow: 0 0 14px rgba(34, 211, 238, .25); }
.slab .leds { position: absolute; bottom: 16px; inset-inline-end: 16px; display: flex; gap: 5px; }
.slab .leds em { width: 6px; height: 6px; border-radius: 50%; background: #20456a; }
/* edges: brushed metal thickness with a label on the side facing you (only the two edges the view can see are drawn) */
.slab .s { width: var(--w); height: var(--t); left: 0; top: calc(50% - var(--t) / 2); }
.slab .w { width: var(--t); height: var(--w); top: 0; left: calc(50% - var(--t) / 2); }
.slab .s { transform: translateY(calc(var(--w) / 2)) translateZ(calc(var(--t) / 2)) rotateX(-90deg); background: linear-gradient(180deg, #8d99ab, #4a5566 45%, #262f3c); display: flex; align-items: center; gap: 8px; padding-inline: 12px;
  font: 600 .58rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(10, 18, 30, .85); white-space: nowrap; overflow: hidden; }
.slab .s b { color: #052430; }
.slab .w { transform: translateX(calc(var(--w) / -2)) translateZ(calc(var(--t) / 2)) rotateY(-90deg); background: linear-gradient(90deg, #262f3c, #6d798b 55%, #3a4453); }
.tower.has-on .slab:not(.on) .face { filter: brightness(.62) saturate(.7); }
.slab:hover .face { filter: none !important; }
.slab.on .top { border-color: var(--cyan); background: radial-gradient(120% 90% at 0% 0%, rgba(120, 240, 255, .45), transparent 55%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
    linear-gradient(0deg, rgba(34, 211, 238, .14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(34, 211, 238, .14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, #14506b, #0a1c33 70%);
  box-shadow: 0 0 46px rgba(34, 211, 238, .55), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 40px rgba(34, 211, 238, .25); }
.slab.on .top b, .slab.on .top i { color: #fff; }
.slab.on .s { background: linear-gradient(180deg, #b9f3ff, #3fb8d2 45%, #13667a); }
.slab.on .leds em { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.2s infinite; }
.slab.on .leds em:nth-child(2) { animation-delay: .2s; } .slab.on .leds em:nth-child(3) { animation-delay: .4s; }
/* the detail panel */
.layer-panel { padding: 28px; display: grid; gap: 18px; min-width: 0; border-color: rgba(34, 211, 238, .35); }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-idx { font: 500 .8rem/1 var(--f-mono); color: var(--muted); letter-spacing: .12em; }
.lp-idx b { font: 800 1.9rem/1 var(--f-display); font-stretch: 112%; color: var(--cyan); letter-spacing: 0; text-shadow: 0 0 18px var(--glow); }
.lp-nav { display: flex; gap: 8px; }
.lp-nav .chip-btn { width: 40px; height: 40px; padding: 0; font-size: 1.05rem; }
.lp-body { display: grid; gap: 12px; }
.lp-body.swap { animation: lpIn .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes lpIn { from { opacity: 0; transform: translateY(10px); } }
.lp-body .q { font: 500 .85rem/1.4 var(--f-mono); color: var(--cyan); }
[dir="rtl"] .lp-body .q { font-family: var(--f-body); font-size: 1rem; }
.lp-body h3 { font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
[dir="rtl"] .lp-body h3 { font-stretch: 100%; text-transform: none; }
.lp-body > p { color: var(--silver); font-size: 1.02rem; }
.lp-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-block small { font: 500 .68rem/1 var(--f-mono); color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
[dir="rtl"] .lp-block small { letter-spacing: 0; font-family: var(--f-body); font-size: .8rem; }
.lp-ex p { color: var(--fg); font-size: .96rem; padding: 12px 14px; border-radius: 10px; background: rgba(34, 211, 238, .06); border-inline-start: 3px solid var(--cyan); }
.lp-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-dots button { width: 26px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: var(--line-2); cursor: pointer; transition: background .3s, width .3s; }
.lp-dots button.on { width: 44px; background: var(--cyan); box-shadow: 0 0 10px var(--glow); }
@media (max-width: 1000px) { .layer-lab { grid-template-columns: 1fr; gap: 12px; } .tower { height: 470px; --w: 210px; --gap: 36px; } }
@media (max-width: 520px) { .tower { height: 400px; --w: 170px; --gap: 30px; --t: 13px; } .slab .top b { font-size: 1.15rem; } .slab .top i { font-size: .68rem; } .slab .chip { width: 34px; height: 34px; } .layer-panel { padding: 20px; } }

/* ---------- Books ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 22px; }
.book { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(90% 120% at 0% 50%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 60%), var(--glass); }
.book.featured { grid-column: 1 / -1; grid-template-columns: 210px minmax(0, 1fr); }
.book-3d { perspective: 900px; display: grid; place-items: center; padding-block: 10px; }
.book-obj { position: relative; width: 150px; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.book.featured .book-obj { width: 180px; }
.book:hover .book-obj { transform: rotateY(-6deg) rotateX(2deg) translateZ(14px); }
.book-front { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; overflow: hidden; transform: translateZ(12px); box-shadow: 0 24px 40px -14px #000, 0 0 30px -10px var(--tint); background: #0b1528; }
.book-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 10%, rgba(255, 255, 255, .12) 12%, transparent 30%); }
.book-spine { position: absolute; top: 0; left: 0; width: 24px; height: 100%; transform-origin: left; transform: rotateY(90deg) translateX(-12px); background: linear-gradient(90deg, #070d18, color-mix(in srgb, var(--tint) 50%, #0b1528)); }
.book-pages { position: absolute; top: 3px; right: 0; width: 22px; height: calc(100% - 6px); transform-origin: right; transform: rotateY(90deg) translateX(10px); background: repeating-linear-gradient(90deg, #e9edf2 0 1px, #c8cfd8 1px 2px); }
.gen-cover { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 14px; background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 60%), linear-gradient(160deg, #13223b, #050a14); }
.gen-cover small { font: 600 .55rem/1 var(--f-mono); letter-spacing: .2em; color: var(--tint); }
.gen-cover b { font: 800 1.05rem/1.15 var(--f-display); color: #fff; }
.gen-cover i { font: 500 .62rem/1 var(--f-mono); font-style: normal; color: var(--silver); }
.book-info { display: grid; gap: 8px; min-width: 0; }
.book-info .sector { font: 500 .7rem/1.3 var(--f-mono); color: var(--tint); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .book-info .sector { letter-spacing: 0; font-family: var(--f-body); font-size: .84rem; }
.book-info h3 { font-size: 1.3rem; font-family: var(--f-body); font-weight: 700; line-height: 1.25; }
.book-sub { color: var(--silver); }
.book-desc { color: var(--muted); font-size: .94rem; }
.book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.book-price { font: 700 1.15rem/1 var(--f-display); font-stretch: 112%; }
@media (max-width: 600px) { .book, .book.featured { grid-template-columns: 1fr; text-align: start; } .book-3d { justify-self: center; } }

/* ---------- Case-file details ---------- */
.count-badge { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid rgba(229, 38, 59, .45); border-radius: 999px; background: rgba(229, 38, 59, .08); color: var(--silver); font-weight: 600; width: max-content; }
[dir="rtl"] .count-badge { padding: 8px 8px 8px 16px; }
.count-badge b { font: 700 1.1rem/1 var(--f-display); font-stretch: 112%; color: #fff; background: var(--red); padding: 7px 10px; border-radius: 999px; box-shadow: 0 0 20px rgba(229, 38, 59, .5); }
.teaser-wrap { position: relative; }
.redact { position: absolute; inset: 0; display: grid; align-content: start; gap: .32em; padding-top: .18em; pointer-events: none; }
.redact i { display: block; height: 1.15em; background: #000; border-radius: 2px; transform-origin: left; transition: transform .7s cubic-bezier(.7, 0, .2, 1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
[dir="rtl"] .redact i { transform-origin: right; }
.redact i:nth-child(2) { width: 88%; transition-delay: .12s; } .redact i:nth-child(3) { width: 64%; transition-delay: .24s; }
.declassified .redact i { transform: scaleX(0); }
.redact i::after { content: "CLASSIFIED"; display: block; font: 600 .55rem/1.15rem var(--f-mono); letter-spacing: .3em; color: rgba(229, 38, 59, .7); padding-inline-start: 8px; }

/* ---------- Projects & achievements ---------- */
.proj-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.proj { flex: 1 1 300px; padding: 24px; display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; isolation: isolate; }
/* blueprint grid that lights up toward the corner */
.proj::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); }
[dir="rtl"] .proj::after { mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); }
.proj-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.proj-ic { width: 52px; height: 52px; display: grid; place-items: center; color: var(--cyan); border-radius: 14px; border: 1px solid rgba(34, 211, 238, .3);
  background: radial-gradient(circle at 30% 25%, rgba(34, 211, 238, .28), rgba(34, 211, 238, .05) 70%); box-shadow: 0 0 26px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: perspective(300px) rotateX(12deg) rotateY(-14deg); transition: transform .3s; }
.proj:hover .proj-ic { transform: perspective(300px) rotateX(0) rotateY(0) translateZ(10px); }
.proj-ic svg { width: 27px; height: 27px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6)); }
.proj-id { font: 500 .7rem/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.proj-id::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.proj .sector { font: 500 .7rem/1.3 var(--f-mono); color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .proj .sector { letter-spacing: 0; font-family: var(--f-body); font-size: .84rem; }
.proj h3 { font-size: 1.16rem; font-family: var(--f-body); font-weight: 700; line-height: 1.3; }
.proj p { color: var(--muted); font-size: .94rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
[dir="rtl"] .tags { justify-content: flex-end; }
.tags li { font: 500 .7rem/1 var(--f-mono); color: var(--silver); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.proj-more { margin-top: 18px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.proj-more p { color: var(--silver); max-width: 70ch; }
@media (max-width: 640px) { .proj { flex-basis: 100%; } .proj-more .btn { width: 100%; } }

/* ---------- Soft light on words (class added by site.js; --sx/--sy follow the pointer) ---------- */
.shine { --sx: -9999px; --sy: -9999px; --tc: var(--fg); --glint: radial-gradient(160px circle at var(--sx) var(--sy), rgba(255, 255, 255, .96), rgba(150, 240, 255, .62) 34%, rgba(34, 211, 238, 0) 72%);
  color: transparent; background-image: var(--glint), linear-gradient(var(--tc), var(--tc)); -webkit-background-clip: text; background-clip: text; }
.shine.chrome { --glint: radial-gradient(190px circle at var(--sx) var(--sy), rgba(215, 252, 255, 1), rgba(34, 211, 238, .8) 38%, rgba(34, 211, 238, 0) 74%); background-image: var(--glint), var(--chrome); }
.shine.cyan { --tc: var(--cyan); text-shadow: none; filter: drop-shadow(0 1px 0 #0fa3bf) drop-shadow(0 1px 0 #0b7f96) drop-shadow(0 1px 0 #08606f) drop-shadow(0 1px 0 #064452) drop-shadow(0 0 22px rgba(34, 211, 238, .45)); }
.eyebrow.shine::before { border-color: var(--cyan); }
.nav a.shine { --tc: var(--silver); }
.nav a.shine:hover, .nav a.shine.on { --tc: var(--fg); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.about-slot { justify-self: center; max-width: 520px; }
.about-grid .creds { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-slot { max-width: 320px; order: -1; } }
@media (max-width: 560px) { .about-grid .creds { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .redact { display: none; } .tilt { transform: none !important; } }

/* Department colours on case files */
.story { --dc: var(--red); }
.story .stamp.case { color: var(--dc); }
.story .tag { color: color-mix(in srgb, var(--dc) 70%, var(--muted)); }
.story.glass { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--dc) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .9); }
[dir="rtl"] .story.glass { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--dc) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.story.big { border-color: color-mix(in srgb, var(--dc) 45%, transparent); background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--dc) 16%, transparent), transparent 55%), linear-gradient(180deg, rgba(14, 22, 40, .85), rgba(7, 12, 24, .9)); }
.chips button[data-dept]:not([data-dept="ALL"]) { --dc: var(--red); }
.chips button[data-dept]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dc, var(--fg)); margin-inline-end: 7px; vertical-align: 1px; }
.chips button[data-dept="ALL"]::before { background: linear-gradient(90deg, #22D3EE, #F59E0B, #EF4444); }
.chips button[aria-pressed="true"] { border-color: var(--dc, var(--red)); background: color-mix(in srgb, var(--dc, var(--red)) 14%, transparent); }

/* =====================================================================
   Polish layer: depth, tactile controls, terminal HUD, ink stamps, touch
   ===================================================================== */

/* HUD corners glow when they appear */
.hud:hover::before, .hud:hover::after, .hud:focus-within::before, .hud:focus-within::after { filter: drop-shadow(0 0 4px rgba(34, 211, 238, .9)) drop-shadow(0 0 10px rgba(34, 211, 238, .45)); }

/* Buttons: a quick light sweep on hover, a little tracking, a specular top on the primary */
.btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .02em; }
[dir="rtl"] .btn { letter-spacing: 0; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .06) 54%, transparent 66%);
  transform: translateX(-130%); transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); }
.btn-primary { background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #4fe3f6, var(--cyan) 45%, var(--cyan-2));
  box-shadow: 0 10px 34px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(2, 40, 58, .28); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover { box-shadow: 0 14px 40px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(2, 40, 58, .28); }
.btn-primary::after { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 48%, transparent 64%); }
.btn-pay::after { background: linear-gradient(105deg, transparent 32%, rgba(255, 214, 120, .35) 48%, transparent 64%); }
.btn:active { transform: translateY(1px); }

/* Booking panel: a glowing telemetry rule along the top edge and a tick scale above the title */
.dock { position: relative; }
.dock::before { content: ""; position: absolute; top: -1px; inset-inline: 7%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .9) 30%, #e8fbff 50%, rgba(34, 211, 238, .9) 70%, transparent); box-shadow: 0 0 14px 1px rgba(34, 211, 238, .55); }
.dock::after { content: ""; position: absolute; top: 9px; inset-inline-start: 22px; width: 96px; height: 5px; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(90deg, rgba(34, 211, 238, .8) 0 1px, transparent 1px 6px); mask-image: linear-gradient(90deg, #000, transparent); -webkit-mask-image: linear-gradient(90deg, #000, transparent); }
[dir="rtl"] .dock::after { mask-image: linear-gradient(270deg, #000, transparent); -webkit-mask-image: linear-gradient(270deg, #000, transparent); }

/* Audience switch: a recessed track with keys that press in */
.seg { background: linear-gradient(180deg, #02050b, #0a1222); border-color: rgba(130, 175, 225, .12); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(255, 255, 255, .06); }
.seg button { transition: color .2s, background .2s, box-shadow .2s, transform .1s; }
.seg button:not([aria-pressed="true"]):hover { color: var(--fg); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, #ffffff, #d5dde8 55%, #b9c4d3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 8px -2px rgba(0, 0, 0, .85), 0 0 16px -5px var(--glow); }
.seg button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }

/* Display type: tighter, and layered shadows so the chrome reads crisply on the dark ground */
[dir="ltr"] .display.chrome { letter-spacing: .004em; line-height: 1.02; }
.display.chrome { filter: drop-shadow(0 1px 0 #8c97a9) drop-shadow(0 1px 0 #4a5364) drop-shadow(0 1px 0 #2b3240) drop-shadow(0 1px 0 #161b25)
  drop-shadow(0 0 1px rgba(255, 255, 255, .25)) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)) drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }

/* Policy engine: CRT scanlines over the terminal and a live status light */
.console { position: relative; }
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  background: linear-gradient(rgba(255, 255, 255, .025) 50%, rgba(0, 0, 0, .2) 50%); background-size: 100% 4px; }
.console::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, .45)); }
.console-bar .dot { animation: liveDot 1.8s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7), 0 0 8px rgba(52, 211, 153, .9); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0), 0 0 8px rgba(52, 211, 153, .9); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0), 0 0 8px rgba(52, 211, 153, .9); } }

/* Verdicts as recessed LED readouts */
.verdict { font-family: var(--f-mono); font-weight: 600; letter-spacing: .16em; padding: 4px 9px 3px; border: 1px solid; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04); }
.v-allow { color: #6ee7b7; border-color: #10b981; background: rgba(16, 185, 129, .15); text-shadow: 0 0 6px rgba(16, 185, 129, .9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 0 10px rgba(16, 185, 129, .25); }
.v-step { color: #fcd34d; border-color: #f59e0b; background: rgba(245, 158, 11, .15); text-shadow: 0 0 6px rgba(245, 158, 11, .9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 0 10px rgba(245, 158, 11, .25); }
.v-deny { color: #fca5a5; border-color: #ef4444; background: rgba(239, 68, 68, .15); text-shadow: 0 0 6px rgba(239, 68, 68, .95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 0 12px rgba(239, 68, 68, .3); }

/* Case files: worn ink stamps and a lift with accent lines in the department colour */
.stamp.case { border-width: 2px; outline: 1px solid currentColor; outline-offset: 2px; text-shadow: 0 0 1px currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 140px 70px; mask-size: 140px 70px; }
.story { transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.story:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--dc) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--dc), inset 0 1px 0 color-mix(in srgb, var(--dc) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--dc) 30%, transparent),
    0 26px 50px -24px color-mix(in srgb, var(--dc) 55%, transparent), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.story:hover .stamp.case { text-shadow: 0 0 8px var(--dc); }
.story:hover .watch { border-top-color: color-mix(in srgb, var(--dc) 40%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .story:hover { translate: none; } .btn::after { display: none; } .console-bar .dot { animation: none; } }

/* Touch targets on phones and tablets */
@media (max-width: 768px) {
  .dock-body { gap: 12px; }
  .dock .seg button, .dock-actions .btn, .dock .field select, .dock .field input, .btn { min-height: 44px; }
  .seg button { padding-block: 13px; }
  .lp-nav .chip-btn, .chip-btn { min-height: 44px; min-width: 44px; }
}

/* Scrollbars and selection in the obsidian / cyan palette */
html { scrollbar-color: #1b4a62 #04070f; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #04070f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1b4a62, #0e2a3d); border: 2px solid #04070f; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #22d3ee, #0e7490); }
::selection { background: rgba(34, 211, 238, .25); color: #fff; }

/* Chrome headings: room above and below so Arabic dots and marks are never clipped by background-clip: text */
.display.chrome { padding-block: 4px; }

/* Policy engine: verdict filters and a breach drill */
.console-bar { flex-wrap: wrap; row-gap: 10px; }
.console-tools { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cfilter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: #02050b; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); border: 1px solid rgba(130, 175, 225, .1); }
.cfilter button { font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); background: transparent; border: 0; padding: 7px 9px; border-radius: 4px; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.cfilter button:hover { color: var(--fg); }
.cfilter button[aria-pressed="true"] { color: #e8fbff; background: rgba(34, 211, 238, .14); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .45), 0 0 10px -2px rgba(34, 211, 238, .5); }
.cfilter button[data-f="ALLOW"][aria-pressed="true"] { color: #6ee7b7; background: rgba(16, 185, 129, .15); box-shadow: inset 0 0 0 1px #10b981; }
.cfilter button[data-f="STEP-UP"][aria-pressed="true"] { color: #fcd34d; background: rgba(245, 158, 11, .15); box-shadow: inset 0 0 0 1px #f59e0b; }
.cfilter button[data-f="DENY"][aria-pressed="true"] { color: #fca5a5; background: rgba(239, 68, 68, .15); box-shadow: inset 0 0 0 1px #ef4444; }
.breach-btn { font: 700 .68rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; cursor: pointer; padding: 8px 12px; border-radius: 5px;
  border: 1px solid #ef4444; background: linear-gradient(180deg, #dc2626, #991b1b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 16px -4px rgba(239, 68, 68, .8); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
[dir="rtl"] .breach-btn { letter-spacing: 0; font-family: var(--f-body); font-size: .8rem; }
.breach-btn:hover { background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 22px -2px rgba(239, 68, 68, .9); }
.breach-btn:active { transform: translateY(1px); }
.feed[data-filter="ALLOW"] .req:not([data-v="ALLOW"]), .feed[data-filter="STEP-UP"] .req:not([data-v="STEP-UP"]), .feed[data-filter="DENY"] .req:not([data-v="DENY"]) { display: none; }
.req.breach { background: linear-gradient(90deg, rgba(239, 68, 68, .2), rgba(239, 68, 68, .04) 60%, transparent); box-shadow: inset 3px 0 0 #ef4444; animation: breachIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.req.breach .who { color: #fecaca; }
.req.breach .verdict { animation: ledAlarm .5s steps(2, jump-none) 4; }
@keyframes breachIn { 0% { opacity: 0; transform: translateX(-14px); background-color: rgba(239, 68, 68, .45); } 100% { opacity: 1; transform: none; } }
@keyframes ledAlarm { 0% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), 0 0 0 rgba(239, 68, 68, 0); } 100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), 0 0 16px 2px rgba(239, 68, 68, .9); background: rgba(239, 68, 68, .45); } }
.console.alarm { animation: consoleAlarm 1.2s ease-out; }
@keyframes consoleAlarm { 0%, 40% { box-shadow: 0 0 0 1px #ef4444, 0 0 60px -10px rgba(239, 68, 68, .9), 0 50px 90px -50px rgba(0, 0, 0, .9); } 100% { box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 0 70px -20px var(--glow), 0 50px 90px -50px rgba(0, 0, 0, .9); } }

/* Readiness: the executive brief button and its fallback text */
.brief-btn { justify-self: start; }
#briefOut { margin: 0; max-height: 260px; overflow: auto; font-size: .78rem; direction: inherit; text-align: start; unicode-bidi: plaintext; }
@media (prefers-reduced-motion: reduce) { .req.breach, .req.breach .verdict, .console.alarm { animation: none; } }

/* Boot sequence: a short terminal handshake before the page appears (once per visit; hidden after 4s even without JS) */
#boot-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: #000;
  transition: opacity .4s ease, visibility .4s; animation: bootFailsafe 0s 4s forwards; }
#boot-screen.out { opacity: 0; visibility: hidden; }
.no-boot #boot-screen { display: none; }
.boot-log { margin: 0; width: min(560px, 100%); min-height: 5.7em; font: 500 clamp(.78rem, 2.6vw, 1rem)/1.9 var(--f-mono); color: var(--cyan);
  text-shadow: 0 0 12px rgba(34, 211, 238, .55); white-space: pre-wrap; direction: ltr; text-align: left; }
.boot-log .ok { color: #10b981; text-shadow: 0 0 14px rgba(16, 185, 129, .65); }
.boot-log .cur { display: inline-block; width: .6em; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; background: currentColor; box-shadow: 0 0 10px var(--cyan); animation: bootCursor .7s steps(1) infinite; }
html.booting { overflow: hidden; }
html.boot-in .top { animation: bootIn .9s cubic-bezier(.2, .8, .2, 1) backwards; }
html.boot-in .hero-copy { animation: bootIn 1s .08s cubic-bezier(.2, .8, .2, 1) backwards; }
html.boot-in .hero .dock { animation: bootIn 1s .18s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes bootIn { from { opacity: 0; transform: scale(1.04); } }
@keyframes bootCursor { 50% { opacity: 0; } }
@keyframes bootFailsafe { to { opacity: 0; visibility: hidden; } }

/* Lenis smooth scroll: its own easing replaces the CSS one; panels marked data-lenis-prevent keep native scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Magnetic primary buttons: `translate` composes with the hover/press `transform`, so the lift still works */
.btn-primary { translate: var(--mx, 0px) var(--my, 0px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, translate .4s cubic-bezier(.175, .885, .32, 1.275); }
.btn-primary.magnet { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, translate .12s ease-out; }

/* Cyber cursor (mouse only, added by site.js): the native cursor is hidden except over form fields, dialogs and Calendly */
html.cc:not(.cc-native), html.cc:not(.cc-native) body, html.cc:not(.cc-native) body * { cursor: none !important; }
.cc-dot, .cc-ring { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; }
.cc-dot { width: 4px; height: 4px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan), 0 0 1px #fff; transition: opacity .2s; }
.cc-ring { width: 24px; height: 24px; border: 1px solid rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .06);
  box-shadow: 0 0 14px -3px rgba(34, 211, 238, .5), inset 0 0 8px -3px rgba(34, 211, 238, .5); transition: opacity .2s, border-color .2s, background-color .2s; }
.cc-ring.hot { border-color: rgba(255, 255, 255, .9); background: rgba(34, 211, 238, .1); box-shadow: 0 0 16px -2px rgba(34, 211, 238, .9), inset 0 0 8px -3px rgba(34, 211, 238, .6); }
html.cc-on:not(.cc-native) .cc-dot, html.cc-on:not(.cc-native) .cc-ring { opacity: 1; }
html.cc-on:not(.cc-native) .cc-ring:not(.hot) { opacity: .6; }   /* resting ring is quieter; locking onto a target brings it to full */
.cc-ring { transition: opacity .25s, border-color .2s, background-color .2s, box-shadow .2s; }
@media print { .cc-dot, .cc-ring { display: none; } }

/* Console sound switch, beside "Simulate breach" */
.sfx-btn { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); cursor: pointer;
  padding: 7px 10px; border-radius: 5px; border: 1px solid rgba(130, 175, 225, .14); background: #02050b; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); transition: color .2s, border-color .2s, box-shadow .2s; }
.sfx-btn svg { width: 14px; height: 14px; }
.sfx-btn:hover { color: var(--fg); }
.sfx-btn[aria-pressed="true"] { color: #e8fbff; border-color: rgba(34, 211, 238, .45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 10px -3px rgba(34, 211, 238, .6); }
.sfx-btn[aria-pressed="true"] .x, .sfx-btn[aria-pressed="false"] .w { display: none; }

/* Phones: the console's controls sit in two tidy rows (filters across the full width, then sound and breach),
   and filter chips scroll sideways in one line instead of wrapping into scattered rows */
@media (max-width: 640px) {
  .console-tools { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  .console-tools .cfilter { grid-column: 1 / -1; display: flex; }
  .console-tools .cfilter button { flex: 1; padding-inline: 4px; }
  .console-tools .sfx-btn { margin: 0; justify-content: center; }
  .console-tools .breach-btn { width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; white-space: nowrap; }
}