/* ─────────────────────────────────────────────────────────────────────────
   THE ETHICAL HACKER — terminal-brutalist landing
   Ralph Echemendia redesign
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --bg:        #0a0b0a;
  --bg-2:      #111312;
  --fg:        #ebe9e4;
  --fg-dim:    #8b8b85;
  --fg-dimmer: #545450;
  --line:      #2a2b29;
  --line-2:    #1a1b1a;
  --accent:    #ff5b1f;
  --accent-2:  #7dff8b;
  --warn:      #ffd23f;
  --danger:    #ff3355;
  --pad-x: clamp(20px, 4vw, 80px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ scroll-behavior:smooth }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings:"ss01","ss02","zero","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

body.tex-grid::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
body.tex-scan::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.018) 0 1px,
    transparent 1px 3px
  );
}
body.tex-noise::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.tex-none::before{content:none}

.amb-glow{
  position:fixed; pointer-events:none; z-index:0;
  width:60vw; height:60vw; left:-20vw; top:-30vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
  filter: blur(20px);
  opacity:.7;
}
.amb-glow.b{
  left:auto; top:auto; right:-25vw; bottom:-30vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 70%);
  opacity:.5;
}

main, header, footer{position:relative; z-index:1}

/* ───────────────────────── shared atoms ───────────────────────── */

.mono{font-family:'JetBrains Mono', monospace}
.up{text-transform:uppercase; letter-spacing:.08em}
.dim{color:var(--fg-dim)}
.dimmer{color:var(--fg-dimmer)}
.acc{color:var(--accent)}
.acc2{color:var(--accent-2)}

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--line); border-radius:2px;
  background:rgba(255,255,255,.02);
  color:var(--fg-dim);
}
.tag.acc{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 50%, transparent); background:color-mix(in oklab, var(--accent) 8%, transparent)}
.tag.acc2{ color:var(--accent-2); border-color:color-mix(in oklab, var(--accent-2) 50%, transparent); background:color-mix(in oklab, var(--accent-2) 8%, transparent)}

.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 8px var(--accent-2)}
.dot.pulse{animation: pulse 1.6s ease-in-out infinite}
@keyframes pulse{
  0%, 100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.4; transform:scale(.75) }
}

.cursor{
  display:inline-block; width:.55em; height:1em; background:var(--accent);
  vertical-align:-.12em; margin-left:.1em;
  animation: blink 1.05s steps(2,end) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

button, .btn{
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  border-radius:2px;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
}
.btn .arrow{ display:inline-block; transition: transform .2s }
.btn:hover .arrow{ transform: translateX(4px) }
.btn.primary{
  background: var(--accent); color:#0a0b0a; border-color: var(--accent);
}
.btn.primary:hover{ background: color-mix(in oklab, var(--accent) 88%, white) }
.btn.ghost:hover{ border-color: var(--fg); background: rgba(255,255,255,.04) }

/* ───────────────────────── nav ───────────────────────── */

.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--pad-x);
  background: rgba(10,11,10,.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  gap:24px;
}
.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-weight:600; letter-spacing:.02em;
  text-decoration:none; color:inherit;
}
.nav-brand img{ height: 38px; width:auto; display:block }
.nav-brand .nav-hat{ height: 32px }
.nav-brand .nav-wordmark{
  display:flex; flex-direction:column; line-height:1.15;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-dim);
}
.nav-brand .nav-wordmark b{
  color:var(--fg); font-weight:600; letter-spacing:.04em;
  font-size:12px;
}

.nav-links{ display:flex; gap:28px; font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.nav-links a{ color:var(--fg-dim); text-decoration:none; padding:4px 0; position:relative }
.nav-links a:hover{ color:var(--fg) }
.nav-links a::before{
  content:""; position:absolute; bottom:-15px; left:0; right:0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.nav-links a:hover::before{ transform:scaleX(1) }

.nav-status{ display:flex; align-items:center; gap:10px; color:var(--fg-dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase }

.nav-left{
  display:flex; align-items:center; gap:18px;
}

/* ── language selector ── */
.lang-select{ position:relative }
.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  background: transparent;
  border:1px solid var(--line);
  color: var(--fg-dim);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px; font-weight:600; letter-spacing:.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color .15s, color .15s, background .15s;
}
.lang-btn:hover, .lang-btn.open{
  border-color: var(--accent);
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.lang-btn .lang-code{ font-weight:700; letter-spacing:.08em }
.lang-btn .lang-caret{
  font-size: 9px; opacity:.6;
  transition: transform .15s;
}
.lang-btn.open .lang-caret{ transform: rotate(180deg) }
.lang-btn svg{ color: var(--accent); flex-shrink:0 }

.lang-menu{
  position:absolute; top: calc(100% + 6px); left: 0;
  list-style:none; padding: 4px; margin:0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  min-width: 180px;
  z-index: 60;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
.lang-menu li{ margin:0 }
.lang-menu button{
  width: 100%;
  display:grid; grid-template-columns: 32px 1fr 14px; gap: 8px; align-items:center;
  background:transparent; border:0;
  color: var(--fg-dim);
  padding: 9px 10px;
  font-family: inherit; font-size: 11px; letter-spacing:.06em;
  text-align: left;
  cursor: pointer;
  text-transform: none;
  border-radius: 2px;
  transition: background .12s, color .12s;
}
.lang-menu button:hover{
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--fg);
}
.lang-menu button.active{ color: var(--fg) }
.lang-menu button.active .lc{ color: var(--accent) }
.lang-menu .lc{ font-weight:700; letter-spacing:.12em; text-transform: uppercase; color: var(--fg) }
.lang-menu .ln{ }
.lang-menu .lk{ color: var(--accent); font-size: 10px; justify-self:end }

@media (max-width: 900px){ .nav-links{ display:none } }
@media (max-width: 600px){
  .nav-status{ display:none }
}

/* ───────────────────────── hero ───────────────────────── */

.hero{
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(40px, 5vw, 64px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.hero-meta{
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
  font-size:11px; color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom: 32px;
}
.hero-meta .sep{ color:var(--fg-dimmer) }

.lockup{
  position:relative;
  display:flex; align-items:center; gap: clamp(28px, 5vw, 72px);
  margin: 8px 0 32px;
}
.lockup-logo{
  flex-shrink:0;
  width: clamp(180px, 28vw, 440px);
  height: auto;
  display:block;
  filter: drop-shadow(0 0 36px color-mix(in oklab, var(--accent) 28%, transparent));
}
.lockup-meta{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:18px;
}
.lockup-kicker{
  font-size: 12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent);
  display:flex; align-items:center; gap:10px;
}
.lockup-kicker::before{ content:""; width:24px; height:1px; background: var(--accent) }
.lockup-headline{
  font-size: clamp(40px, 7vw, 104px);
  line-height: .94;
  letter-spacing: -.04em;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.lockup-headline .acc{
  color: var(--accent);
  font-style:italic;
  font-weight:600;
  font-size: .72em;
  display:inline-block;
  margin-top: .12em;
}
.lockup-headline .strike{ position:relative; display:inline-block }
.lockup-headline .strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:48%;
  height: clamp(3px, 0.5vw, 7px);
  background: var(--fg);
  transform: skewY(-2deg);
  mix-blend-mode: difference;
}
.lockup-tags{ display:flex; gap:8px; flex-wrap:wrap; font-size: 10px }

@media (max-width: 800px){
  .lockup{ flex-direction:column; align-items:flex-start; gap:24px }
  .lockup-logo{ width: clamp(160px, 50vw, 260px) }
}

/* layout variants */
.hero.layout-stacked .lockup{
  flex-direction:column; align-items:center; text-align:center; gap: 28px;
}
.hero.layout-stacked .lockup-logo{ width: clamp(220px, 28vw, 380px) }
.hero.layout-stacked .lockup-meta{ align-items:center }
.hero.layout-stacked .lockup-kicker::before{ display:none }

.hero.layout-overlap .lockup{ display:block; position:relative; min-height: 380px }
.hero.layout-overlap .lockup-logo{
  position:absolute; right: 2%; top: 50%; transform: translateY(-50%);
  width: clamp(240px, 36vw, 560px);
  opacity: .14; filter: none; z-index: 0;
}
.hero.layout-overlap .lockup-meta{ position:relative; z-index:1 }
.hero.layout-overlap .lockup-headline{
  font-size: clamp(56px, 11vw, 168px); line-height:.88; letter-spacing:-.05em;
}

.mission{
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--fg);
  max-width: 62ch;
  margin: 0;
}

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px }

/* hero 2-col when book promo is present */
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(8px, 1vw, 18px);
  align-items: start;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px) }
}

/* ── book promo ── */
.book-promo{
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    color-mix(in oklab, var(--bg-2) 85%, transparent);
  padding: clamp(12px, 1.1vw, 18px);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.book-promo::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background: var(--accent);
}
.book-promo-meta{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
  margin-bottom: clamp(10px, 1vw, 14px);
}
.book-promo-meta .lockup-kicker{
  font-size: 11px;
}
.book-promo-meta .tag{ font-size: 10px }

.book-promo-body{
  display:grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
  gap: clamp(12px, 1.2vw, 18px);
  align-items:flex-start;
}
@media (max-width: 480px){
  .book-promo-body{ grid-template-columns: 1fr; gap: 14px }
}
.book-cover{
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  aspect-ratio: 595 / 720;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 4px 14px color-mix(in oklab, var(--accent) 16%, transparent);
  transition: transform .25s ease;
  justify-self: start;
}
.book-cover:hover{ transform: translateY(-2px) rotate(-.4deg) }

@media (max-width: 480px){
  .book-cover{ max-width: 180px; justify-self: center }
}

.book-promo-text{
  display:flex; flex-direction:column;
  gap: 8px;
  min-width: 0;
}
.book-title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: .04em;
  font-weight: 800;
  line-height: 1;
  color: var(--fg);
}
.book-subtitle{
  margin: 0;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.book-tagline{
  margin: 6px 0 0;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.55;
  color: var(--fg);
  max-width: 30ch;
}
.book-byline{
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
}
.book-cta{
  margin-top: 12px;
  align-self: flex-start;
  font-size: 11px;
  padding: 11px 16px;
}

/* compact */
body.density-compact .hero{ padding-block: clamp(28px,4vw,52px) }
body.density-compact .lockup{ margin: 4px 0 22px }
body.density-compact .lockup-logo{ width: clamp(150px, 22vw, 340px) }
body.density-compact .lockup-headline{ font-size: clamp(36px, 6vw, 84px) }
body.density-compact .hero-cta{ margin-top:20px }
body.density-compact .section-head{ padding-block: clamp(36px,3.5vw,60px) clamp(14px,1.5vw,20px) }

/* ───────────────────────── section head ───────────────────────── */

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  padding: clamp(56px, 6vw, 96px) var(--pad-x) clamp(20px, 2vw, 28px);
}
.section-head > div:first-child{ min-width:0 }
.section-head h2{
  margin:0;
  font-size: clamp(36px, 6vw, 84px);
  font-weight:800; letter-spacing:-.035em; line-height:.92;
  text-transform:uppercase;
}
.section-head.sm h2{
  font-size: clamp(28px, 4.2vw, 56px);
}
.section-head h2 .acc{ color:var(--accent); font-style:italic; font-weight:500 }
.section-head .num{
  color: var(--fg-dimmer);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.section-head-aside{
  font-size:12px; line-height:1.55; max-width: 340px; text-align:right;
  padding-bottom:10px;
}
@media (max-width: 800px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:16px }
  .section-head-aside{ text-align:left }
}

/* ───────────────────────── about ───────────────────────── */

.about{
  padding: 0 var(--pad-x) clamp(40px, 5vw, 80px);
  border-bottom:1px solid var(--line);
}
.about-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items:start;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr }
}

.about-body{ display:flex; flex-direction:column; gap:20px }
.about-body p{
  margin:0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
  color: var(--fg);
  max-width: 64ch;
}
.about-body p.lead{
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  font-weight: 500;
}
.about-body em{
  font-style:normal;
  color: var(--accent);
  font-weight: 500;
}

.about-side{ display:flex; flex-direction:column; gap:20px }

.portrait{
  margin:0;
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  background: var(--bg-2);
  aspect-ratio: 3 / 4;
}
.portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter: contrast(1.05) saturate(.9);
}
.portrait::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  z-index:1;
}
/* corner brackets */
.portrait::after{
  content:""; position:absolute; inset:8px; pointer-events:none;
  border: 1px solid transparent;
  background:
    linear-gradient(to right, var(--accent) 0, var(--accent) 18px, transparent 18px) top left,
    linear-gradient(to bottom, var(--accent) 0, var(--accent) 18px, transparent 18px) top left,
    linear-gradient(to left, var(--accent) 0, var(--accent) 18px, transparent 18px) top right,
    linear-gradient(to bottom, var(--accent) 0, var(--accent) 18px, transparent 18px) top right,
    linear-gradient(to right, var(--accent) 0, var(--accent) 18px, transparent 18px) bottom left,
    linear-gradient(to top, var(--accent) 0, var(--accent) 18px, transparent 18px) bottom left,
    linear-gradient(to left, var(--accent) 0, var(--accent) 18px, transparent 18px) bottom right,
    linear-gradient(to top, var(--accent) 0, var(--accent) 18px, transparent 18px) bottom right;
  background-size: 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px;
  background-repeat:no-repeat;
  z-index:2;
}
.portrait figcaption{
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}

.about-card{
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
  padding: 18px;
  border-radius: 2px;
  font-size: 12px;
}
.card-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 14px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.kv{
  display:grid; grid-template-columns: 100px 1fr; gap: 10px 14px;
  margin:0; padding: 8px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}
.kv dt{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-dimmer); padding-top: 2px;
}
.kv dd{ margin:0; font-size:11px; color: var(--fg); line-height: 1.45 }
.card-foot{ margin-top: 12px; font-size:10px; letter-spacing:.14em; text-transform:uppercase }

.about-wide{
  margin: clamp(28px, 4vw, 56px) 0 0;
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  background: var(--bg-2);
  aspect-ratio: 3 / 1.1;
}
.about-wide img{
  position:absolute;
  inset:0;
  width:100%;
  height:140%;
  top:-20%;
  display:block;
  object-fit:cover;
  filter: contrast(1.05) saturate(.9);
  will-change: transform;
  transition: transform .1s linear;
}

/* full-width row below the about-grid: FRAME 02 photo (wide) + file card */
.card-row{
  display:grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: clamp(14px, 1.5vw, 24px);
  align-items:stretch;
  margin-top: clamp(20px, 4vw, 48px);
}
.card-row .about-card{ margin:0 }
.card-row .portrait.frame-2{
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}
.card-row .portrait.frame-2 img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 700px){
  .card-row{ grid-template-columns: 1fr }
  .card-row .portrait.frame-2{ aspect-ratio: 3 / 2; height: auto; min-height:0 }
}
.about-wide::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,10,.55) 0%, transparent 40%, transparent 70%, rgba(10,11,10,.4) 100%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  z-index:1;
}
.about-wide figcaption{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 18px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background: linear-gradient(180deg, transparent, rgba(10,11,10,.85));
}

/* ───────────────────────── credits / marquees ───────────────────────── */

.credits{
  border-bottom:1px solid var(--line);
}
.credit-band{
  border-top:1px solid var(--line);
  background: var(--bg-2);
  overflow:hidden;
}
.credit-band:first-child{ border-top:0 }
.credit-band.alt{ background: transparent }

.marquee{
  display:flex; align-items:center; gap: 24px;
  padding: 18px 0;
  overflow:hidden;
  white-space: nowrap;
  position:relative;
}
.marquee-lbl{
  flex-shrink:0;
  padding: 0 var(--pad-x) 0 var(--pad-x);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent);
  border-right: 1px solid var(--line);
  height: 100%;
  display:flex; align-items:center;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-2);
  box-shadow: 8px 0 24px var(--bg-2);
}
.credit-band.alt .marquee-lbl{
  background: var(--bg);
  box-shadow: 8px 0 24px var(--bg);
}
.marquee-track{
  display:flex; gap: 56px;
  animation: marquee linear infinite;
  will-change: transform;
}
.marquee[data-dir="right"] .marquee-track{ animation-direction: reverse }
@keyframes marquee{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}
.marquee-item{
  font-size: clamp(12px, 1.3vw, 18px);
  font-weight:700; letter-spacing:-.02em; text-transform:uppercase;
  display:flex; align-items:center; gap:20px;
  color: var(--fg);
}
.credit-band.alt .marquee-item{ color: var(--fg) }
.credit-band.alt .marquee-item .marquee-dot{ color: var(--accent-2) }
.marquee-dot{ color: var(--accent); font-size: 14px }

/* speaking list */
.speaking-block{ padding: 0 var(--pad-x) clamp(40px, 5vw, 80px) }
.stage-list{
  list-style:none; padding:0; margin: 0;
  border-top:1px solid var(--line);
}
.stage-list li{
  display:grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  padding: 14px 4px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  transition: background .2s, padding .2s;
  cursor: default;
}
.stage-list li:hover{
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding-left: 16px;
}
.stage-no{ font-size:10px; color:var(--fg-dimmer); letter-spacing:.12em; font-weight:600 }
.stage-v{
  font-size: clamp(13px, 1.25vw, 16px); font-weight: 600; letter-spacing:-.02em;
  color: var(--fg);
}
.stage-list li:hover .stage-v{ color: var(--accent) }
.stage-c{
  font-size:10px; color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase;
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────── numbers ───────────────────────── */

.numbers{
  padding: 0 var(--pad-x) clamp(40px, 5vw, 80px);
  border-bottom:1px solid var(--line);
}
.numbers-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border:1px solid var(--line);
}
@media (max-width: 900px){ .numbers-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px){ .numbers-grid{ grid-template-columns: 1fr } }

.stat{
  background: var(--bg);
  padding: clamp(20px, 2.5vw, 36px);
  display:flex; flex-direction:column; gap:8px;
  position:relative;
  min-height: 220px;
  transition: background .25s;
}
.stat:hover{ background: var(--bg-2) }
.stat-no{
  font-size:11px; color: var(--accent); letter-spacing:.18em; font-weight:600;
}
.stat-n{
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-top: auto;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stat-lbl{
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 8px;
  line-height: 1.3;
}
.stat-aside{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
  margin-top: 4px;
}

/* ───────────────────────── contact ───────────────────────── */

.contact{
  padding: 0 var(--pad-x) clamp(56px, 6vw, 96px);
  border-bottom:1px solid var(--line);
}
.contact-card{
  border:1px solid var(--line);
  background:
    radial-gradient(60% 80% at 80% 20%, color-mix(in oklab, var(--accent) 12%, transparent), transparent),
    var(--bg-2);
  padding: clamp(28px, 3.5vw, 56px);
  border-radius:2px;
  display:flex; flex-direction:column; gap: 20px;
  position:relative;
  overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background: var(--accent);
}
.contact-line{
  display:flex; align-items:baseline; gap: 18px;
  font-size: 12px; letter-spacing:.02em;
  flex-wrap:wrap;
}
.contact-line .dim{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; min-width: 60px }
.contact-line.big{
  padding-top: 16px; border-top: 1px dashed var(--line);
  margin-top: 4px;
}
.email{
  font-size: clamp(18px, 2.8vw, 36px);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -.01em;
  word-break: break-all;
  transition: color .15s;
}
.email.small{
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0;
}
.email:hover{ color: color-mix(in oklab, var(--accent) 70%, white) }
.copy-btn{
  font-size:10px; padding: 8px 14px;
  background:transparent;
  color: var(--fg-dim);
  border:1px solid var(--line);
  letter-spacing: .14em;
  margin-left:auto;
}
.copy-btn:hover{ border-color: var(--accent-2); color: var(--accent-2) }
.contact-cta{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  padding-top: 12px; border-top: 1px dashed var(--line);
}

/* ───────────────────────── footer ───────────────────────── */

.foot{
  padding: clamp(56px, 6vw, 80px) var(--pad-x) 28px;
  position:relative;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent);
}
.foot-top{
  display:flex; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
  margin-bottom: 48px;
}
.foot-wm{
  font-weight:800; font-size: clamp(54px, 10.2vw, 170px);
  line-height: .82; letter-spacing:-.045em;
  margin:0; text-transform:uppercase;
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg) 30%, transparent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;
}
.foot-aside{
  display:flex; flex-direction:column; gap:8px;
  min-width: 240px;
  align-self:flex-end;
  padding-bottom: 16px;
}
.foot-aside .lbl{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dimmer) }
.foot-aside h5{ margin:0; font-size:12px; font-weight:500; color:var(--fg); letter-spacing:-.01em }

.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap: 14px;
  padding-top: 22px;
  border-top:1px solid var(--line);
  font-size:11px; color:var(--fg-dim); letter-spacing:.06em;
}
.foot-bottom .socials{ display:flex; gap:10px }
.foot-bottom .socials a{
  width:32px; height:32px; border:1px solid var(--line);
  color:var(--fg-dim); text-decoration:none;
  display:grid; place-items:center; border-radius:2px;
  transition: border-color .15s, color .15s, background .15s;
}
.foot-bottom .socials a:hover{
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in oklab, var(--accent) 8%, transparent);
}
.foot-bottom .socials svg{ width:14px; height:14px }
.foot-bottom .secure{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--accent-2);
}

::selection{ background: var(--accent); color: #0a0b0a }

/* ───────────────────────── RTL (Arabic) ───────────────────────── */
[dir="rtl"] body{ direction: rtl }
[dir="rtl"] .section-head-aside{ text-align: left }
@media (max-width: 800px){
  [dir="rtl"] .section-head-aside{ text-align: right }
}
/* keep code-ish / terminal strings reading left-to-right */
[dir="rtl"] .hero-meta,
[dir="rtl"] .mission .dimmer,
[dir="rtl"] .card-foot,
[dir="rtl"] .nav-status,
[dir="rtl"] .stat-aside,
[dir="rtl"] .stage-c,
[dir="rtl"] .foot-bottom .secure{
  direction: ltr;
  unicode-bidi: isolate;
}
/* lang dropdown opens from the correct edge */
[dir="rtl"] .lang-menu{ right: auto; left: 0 }
/* marquees keep their LTR scroll (brand names are latin) */
[dir="rtl"] .marquee{ direction: ltr }
/* file card key/value grid: keep dt/dd order but align right */
[dir="rtl"] .kv dt{ text-align: right }