/* =========================================================
   Dr. Rami Shaheen — 3D Interactive Site
   Design language: neon cyber-quantum · glassmorphism · grain
   ========================================================= */

:root {
  /* Editorial dark palette — warm ink on deep navy with 2 feature colours */
  --bg-0:      #04060f;            /* deep ink navy */
  --bg-1:      #080c1a;
  --bg-2:      #0e1426;
  --bg-elev:   #141b30;

  --ink:       #f4f6fb;            /* warm off-white (not pure) */
  --ink-dim:   #96a3c0;
  --ink-low:   #4b5879;
  --ink-muted: #2d3756;

  --primary:   #2b6cff;            /* refined corporate electric blue */
  --primary-d: #0d3db5;
  --accent:    #00d4ff;            /* electric cyan */
  --accent-s:  #8fe5ff;            /* soft cyan highlight */

  /* Legacy aliases */
  --cy: var(--accent); --mg: var(--primary); --vi: var(--primary); --go: var(--accent);

  --glass:     rgba(244, 246, 251, 0.025);
  --glass-2:   rgba(244, 246, 251, 0.06);
  --stroke:    rgba(244, 246, 251, 0.08);
  --stroke-2:  rgba(43, 108, 255, 0.28);
  --stroke-3:  rgba(244, 246, 251, 0.14);

  --grad-hero: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-soft: linear-gradient(135deg, rgba(43,108,255,0.10), rgba(0,212,255,0.08));
  --grad-gold: var(--grad-hero);

  /* Editorial typography */
  --ff-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-serif:   'Instrument Serif', ui-serif, Georgia, serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

html, body { background: var(--bg-0); }
body { font-family: var(--ff-body); font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-0); color: var(--ink); font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; cursor: none; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
code { font-family: 'Major Mono Display', monospace; color: var(--cy); background: rgba(0,240,255,0.08); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }

::selection { background: var(--cy); color: #000; }

/* ====== PRELOADER ====== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #0a0d1a 0%, #000 80%);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-core {
  position: relative; width: 280px; height: 280px;
  display: grid; place-items: center;
  perspective: 900px;
  transform-style: preserve-3d;
}
.preloader-ring {
  position: absolute; inset: 0;
  animation: spinY 4s cubic-bezier(.4,0,.6,1) infinite;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.5));
}
@keyframes spinY {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
/* Counter-rotating outer halo for depth */
.preloader-core::before {
  content: '';
  position: absolute; inset: -30px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  animation: spinYReverse 8s linear infinite;
  transform-style: preserve-3d;
  pointer-events: none;
}
.preloader-core::after {
  content: '';
  position: absolute; inset: -60px;
  border: 1px solid rgba(43, 108, 255, 0.12);
  border-radius: 50%;
  animation: spinY 12s linear infinite;
  pointer-events: none;
}
@keyframes spinYReverse {
  0%   { transform: rotateY(0deg);   }
  100% { transform: rotateY(-360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader-logo {
  font-family: 'Orbitron'; font-weight: 900; font-size: 4rem;
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 4px;
  display: grid; place-items: center;
  position: relative; z-index: 2;
  /* Counter-rotate so the logo stays facing forward as the ring spins */
  animation: logoCounterY 4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes logoCounterY {
  0%, 100% { transform: rotateY(0deg)   scale(1); opacity: 1; }
  25%      { transform: rotateY(0deg)   scale(0.92); opacity: 0.6; }
  50%      { transform: rotateY(0deg)   scale(1); opacity: 1; }
  75%      { transform: rotateY(0deg)   scale(0.92); opacity: 0.6; }
}
.preloader-img {
  max-width: 220px; max-height: 130px;
  filter: drop-shadow(0 0 18px rgba(0,212,255,0.85))
          drop-shadow(0 0 4px rgba(43,108,255,0.5));
}
.preloader-img + .preloader-fallback { display: none; }
.preloader-img[src=""], .preloader-img[style*="display: none"] ~ .preloader-fallback { display: inline; }
.preloader-text {
  margin-top: 2rem; font-family: 'Major Mono Display';
  letter-spacing: 0.4em; color: var(--ink-dim); font-size: 0.75rem;
}
.preloader-text span { display: inline-block; animation: flick 1.6s infinite; }
.preloader-text span:nth-child(odd) { animation-delay: 0.1s; }
@keyframes flick { 0%,90%,100%{opacity:1;} 45%{opacity:0.3;} }
.preloader-bar { margin-top: 1.5rem; width: 260px; height: 2px; background: var(--glass); border-radius: 2px; overflow: hidden; }
.preloader-bar-fill { height: 100%; width: 0%; background: var(--grad-hero); transition: width 0.4s var(--ease); }
.preloader-meta { margin-top: 0.8rem; font-size: 0.65rem; letter-spacing: 0.4em; color: var(--ink-low); }

/* ====== CURSOR ====== */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  border-radius: 50%; transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot { width: 6px; height: 6px; background: var(--cy); transition: transform 0.08s; }
.cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.55); transition: transform 0.18s var(--ease), width 0.2s, height 0.2s, border-color 0.2s; }
.cursor-ring.grow { width: 70px; height: 70px; border-color: var(--cy); }

/* Cursor label — floats above the cursor with hovered book title */
.cursor-label {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9997;
  transform: translate(-50%, calc(-100% - 38px));
  padding: 8px 16px;
  border: 1px solid rgba(0, 212, 255, 0.55);
  border-radius: 999px;
  background: rgba(4, 6, 15, 0.92);
  backdrop-filter: blur(14px);
  font-family: var(--ff-display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--ink); white-space: nowrap; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(0, 212, 255, 0.35);
  opacity: 0; transform-origin: bottom center;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.cursor-label::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 0;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(4, 6, 15, 0.92);
  border-right: 1px solid rgba(0, 212, 255, 0.55);
  border-bottom: 1px solid rgba(0, 212, 255, 0.55);
}
.cursor-label.show {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 32px));
}
@media (max-width: 900px) { body { cursor: auto; } .cursor-dot,.cursor-ring { display: none; } }

/* ====== GRAIN / SCANLINES ====== */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay;
}
.scanlines {
  position: fixed; inset: 0; z-index: 9989; pointer-events: none; opacity: 0.06;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255,255,255,0.5) 3px, transparent 4px);
}

/* ====== 3D BG CANVAS ====== */
#bg-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }
main, .topbar, .side-nav, .footer { position: relative; z-index: 2; }

/* ====== TOPBAR ====== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 36px;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(5,6,13,0.78), rgba(5,6,13,0));
}
.brand { display: flex; align-items: center; gap: 12px; }
/* ---- BRAND MARK ----
   The mark shows your signature logo (assets/logo.png).
   If the image is missing, the "RS" text falls back automatically
   using the brand gradient chip below. */
.brand-mark {
  position: relative;
  min-width: 80px; height: 64px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Orbitron'; font-weight: 900;
  letter-spacing: 1px;
  transition: filter 0.3s, transform 0.3s var(--ease);
}
.brand-mark .brand-img {
  max-height: 100%; max-width: 280px; height: auto; width: auto;
  display: block;
  /* Light/white signature glows cyan on the dark bg */
  filter: drop-shadow(0 0 14px rgba(0,212,255,0.65))
          drop-shadow(0 0 3px rgba(30,107,255,0.45));
}
.brand:hover .brand-mark { transform: scale(1.04); }
.brand-mark .brand-fallback { display: none; }
.brand-mark.no-img {
  /* If logo image failed to load, show the gradient chip with "RS" text */
  width: 64px; min-width: 64px; height: 64px; border-radius: 14px;
  background: var(--grad-hero); color: #05060d;
  box-shadow: 0 0 28px rgba(0,212,255,0.4);
  font-size: 1.3rem;
}
.brand-mark.no-img .brand-img { display: none; }
.brand-mark.no-img .brand-fallback { display: inline; }

.brand-mark.big { min-width: 88px; height: 56px; }
.brand-mark.big .brand-img { max-width: 220px; }
.brand-mark.big.no-img { width: 54px; min-width: 54px; height: 54px; font-size: 1.1rem; }

.brand:hover .brand-mark { filter: brightness(1.15); }

.brand-text { font-family: 'Orbitron'; font-weight: 600; letter-spacing: 2px; font-size: 0.85rem; }

.topnav { display: flex; gap: 26px; }
.topnav a {
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.2s;
}
.topnav a:hover { color: var(--cy); }

.cta-mini {
  padding: 10px 18px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--stroke-2);
  font-size: 0.8rem; letter-spacing: 0.1em;
  transition: all 0.3s var(--ease);
}
.cta-mini:hover { background: var(--cy); color: #000; border-color: var(--cy); box-shadow: 0 0 28px rgba(0,240,255,0.4); }

@media (max-width: 900px) {
  .topbar { padding: 14px 18px; }
  .topnav { display: none; }
  .brand-text { display: none; }
}

/* ====== SIDE NAV ====== */
.side-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 14px;
}
.side-nav .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s; position: relative;
}
.side-nav .dot::before {
  content: attr(data-label);
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-dim);
  opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity 0.2s;
}
.side-nav .dot:hover::before { opacity: 1; }
.side-nav .dot:hover { border-color: var(--cy); }
.side-nav .dot.active { background: var(--cy); border-color: var(--cy); box-shadow: 0 0 14px var(--cy); }
@media (max-width: 900px) { .side-nav { display: none; } }

/* ====== SECTIONS ====== */
.section {
  position: relative; min-height: 100vh; padding: 120px 8vw;
}
.section-label {
  font-family: 'Major Mono Display'; font-size: 0.75rem; letter-spacing: 0.4em;
  color: var(--ink-dim); margin-bottom: 30px;
  display: flex; align-items: center; gap: 14px;
}
.section-label::before {
  content: ''; display: inline-block; width: 40px; height: 1px; background: var(--cy);
}
.section-title {
  font-family: 'Orbitron'; font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.05; letter-spacing: -0.01em;
}
.section-title.center { text-align: center; }
.section-sub { color: var(--ink-dim); font-size: 1.05rem; margin-top: 16px; max-width: 620px; }
.section-sub.center { text-align: center; margin: 16px auto 50px; }

.gradient-text {
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ====== HERO ====== */
.hero-section {
  min-height: 100vh; padding: 140px 8vw 100px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-section.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1100px) {
  .hero-section.split { grid-template-columns: 1fr; }
}
.hero-grid-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.15;
  background-image:
    linear-gradient(rgba(0,240,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.35) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
.hero-content { max-width: 960px; position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px; border: 1px solid var(--stroke-2); border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.3em; color: var(--ink-dim);
  background: var(--glass);
  margin-bottom: 30px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 0 0 var(--cy); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,240,255,0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(0,240,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,240,255,0); }
}

.hero-title {
  font-family: 'Orbitron'; font-weight: 900; font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.92; letter-spacing: -0.03em;
}
.hero-title .title-accent {
  display: block;
}
.hero-title .split-line {
  display: block;
  line-height: 0.95;
  overflow: hidden;
  padding-bottom: 0.12em;
  padding-top: 0.04em;
}
.hero-title .split-line .mchar {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* Subtle chromatic-shift effect (only the two-colour palette) */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%;
  background: transparent; overflow: hidden;
}
.glitch::before { color: var(--primary); transform: translate(-1.5px, 0); opacity: 0.55; mix-blend-mode: screen; }
.glitch::after  { color: var(--accent);  transform: translate( 1.5px, 0); opacity: 0.55; mix-blend-mode: screen; }
@keyframes glitchTop { 2%,64%{transform:translate(-2px,-1px);} 4%,60%{transform:translate(-2px,1px);} 62%{transform:translate(-13px,-1px) skew(-13deg);} }
@keyframes glitchBot { 2%,64%{transform:translate(2px,0);} 4%,60%{transform:translate(-2px,0);} 62%{transform:translate(-22px,5px) skew(21deg);} }

.hero-tagline {
  margin-top: 30px; font-family: 'Major Mono Display'; font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  letter-spacing: 0.18em; color: var(--cy); min-height: 1.4em;
}
.type-caret { animation: blink 1s step-end infinite; color: var(--cy); }
@keyframes blink { 50% { opacity: 0; } }

.hero-lede {
  margin-top: 28px; max-width: 620px; font-size: 1.08rem; line-height: 1.7; color: var(--ink-dim);
}

.hero-ctas { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; font-weight: 500;
  letter-spacing: 0.1em; font-size: 0.88rem;
  transition: all 0.3s var(--ease); cursor: none;
  border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--grad-hero); color: #000; font-weight: 700;
  box-shadow: 0 0 0 0 rgba(0,240,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(168,85,247,0.5), 0 0 40px rgba(0,240,255,0.4); }
.btn-ghost {
  background: var(--glass); color: var(--ink); border: 1px solid var(--stroke-2);
}
.btn-ghost:hover { border-color: var(--cy); color: var(--cy); background: rgba(0,240,255,0.05); }
.btn-full { width: 100%; justify-content: center; }

.hero-stats {
  margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 760px;
}
.hero-stats.six {
  grid-template-columns: repeat(6, 1fr);
  max-width: none;
  gap: 14px;
}
@media (max-width: 1200px) {
  .hero-stats.six { grid-template-columns: repeat(3, 1fr); }
}
.stat {
  padding: 22px; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.stat:hover { border-color: var(--cy); transform: translateY(-3px); }
.stat .num {
  font-family: 'Orbitron'; font-weight: 800; font-size: 2.2rem;
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-dim); margin-top: 4px; }
@media (max-width: 700px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats.six { grid-template-columns: repeat(2, 1fr); }
}

.hero-scroll-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: 'Major Mono Display'; font-size: 0.7rem; letter-spacing: 0.4em; color: var(--ink-dim);
}
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--cy), transparent); animation: scrollLine 2s infinite; }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 50.01%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

.hero-signature {
  position: absolute; bottom: 40px; right: 40px;
  display: flex; gap: 14px; font-family: 'Orbitron'; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.4em;
  color: var(--ink-dim);
}
.hero-signature .dot-sep { color: var(--cy); }
@media (max-width: 900px) { .hero-signature { display: none; } .hero-scroll-hint { display: none; } }

/* ====== ABOUT ====== */
.about-layout {
  display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: center;
  margin-top: 40px;
}
@media (max-width: 1000px) { .about-layout { grid-template-columns: 1fr; gap: 40px; } }

.about-portrait { position: sticky; top: 130px; }
.portrait-frame {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-2); background: linear-gradient(160deg, #0f1226 0%, #050711 100%);
  overflow: hidden; transform-style: preserve-3d;
  transition: transform 0.2s var(--ease);
}
.portrait-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(0,240,255,0.3), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(255,43,214,0.25), transparent 50%);
  animation: orbit 14s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.portrait-holo {
  position: absolute; inset: 20px; border: 1px solid rgba(0,240,255,0.25); border-radius: 12px;
  padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,240,255,0.04), rgba(168,85,247,0.05));
  backdrop-filter: blur(4px);
}
.holo-line {
  height: 1px; background: linear-gradient(90deg, transparent, var(--cy), transparent);
  animation: holoLine 4s ease-in-out infinite;
}
.holo-line:nth-child(2) { animation-delay: 0.5s; }
.holo-line:nth-child(3) { animation-delay: 1s; }
@keyframes holoLine { 0%,100%{opacity:0.3;transform:translateX(-30%);} 50%{opacity:1;transform:translateX(30%);} }
.holo-initials {
  font-family: 'Orbitron'; font-weight: 900; font-size: 6rem; text-align: center;
  background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
  align-self: center;
  filter: drop-shadow(0 0 28px rgba(0,240,255,0.4));
}
.holo-code { font-family: 'Major Mono Display'; font-size: 0.68rem; color: var(--ink-dim); display: flex; flex-direction: column; gap: 4px; }
.holo-code b { color: var(--cy); }
.portrait-caption { text-align: center; margin-top: 14px; font-size: 0.7rem; letter-spacing: 0.4em; color: var(--ink-low); font-family: 'Major Mono Display'; }

.about-text .section-title span { display: block; }
.about-text p { margin-top: 22px; color: var(--ink-dim); line-height: 1.8; font-size: 1.02rem; }
.about-text p b { color: var(--ink); font-weight: 600; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.reveal.in { opacity: 1; transform: none; }

.about-chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 6px 14px; border: 1px solid var(--stroke-2); border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-dim);
  background: var(--glass); transition: all 0.2s;
}
.chip:hover { color: var(--cy); border-color: var(--cy); }

/* ====== EXPERTISE CUBE ====== */
.expertise-section { text-align: center; }
.cube-stage {
  margin-top: 80px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
  perspective: 1600px;
  z-index: 3;
}
.cube-scene {
  width: 460px; height: 460px; position: relative; transform-style: preserve-3d;
}
.cube {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
  transform: rotateX(-18deg) rotateY(0deg);
  cursor: none;
}
.cube-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 32px; text-align: left;
  border: 1px solid var(--stroke-2); border-radius: 16px;
  background: linear-gradient(140deg, rgba(43,108,255,0.10), rgba(0,212,255,0.06));
  backdrop-filter: blur(14px);
  box-shadow: 0 0 60px rgba(0,212,255,0.10) inset;
}
.cube-face h3 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 1.7rem; letter-spacing: -0.025em; line-height: 1.05;
}
.cube-face p  {
  font-size: 1rem; color: var(--ink-dim); line-height: 1.55;
  margin-top: 12px;
}
.face-num {
  font-family: var(--ff-mono); color: var(--accent);
  letter-spacing: 0.3em; font-size: 0.78rem;
}
.cube-face.front  { transform: translateZ(230px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(230px); }
.cube-face.right  { transform: rotateY( 90deg) translateZ(230px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(230px); }
.cube-face.top    { transform: rotateX( 90deg) translateZ(230px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(230px); }

.cube-ui { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cube-readout {
  display: flex; gap: 18px; font-family: 'Major Mono Display'; font-size: 0.72rem; letter-spacing: 0.25em;
  color: var(--ink-dim); padding: 10px 22px; border: 1px solid var(--stroke); border-radius: 8px;
  background: var(--glass);
}
.readout-row span { color: var(--ink-low); margin-right: 8px; }
.readout-row b { color: var(--cy); font-weight: 400; }
.cube-hint { font-size: 0.74rem; color: var(--ink-low); letter-spacing: 0.2em; }

@media (max-width: 600px) {
  .cube-scene { width: 240px; height: 240px; }
  .cube-face.front  { transform: translateZ(120px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(120px); }
  .cube-face.right  { transform: rotateY( 90deg) translateZ(120px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(120px); }
  .cube-face.top    { transform: rotateX( 90deg) translateZ(120px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(120px); }
}

/* ====== BOOKS ====== */
.books-section { text-align: center; }
.books-carousel {
  margin-top: 60px; position: relative; height: 480px;
  display: flex; align-items: center; justify-content: center;
  perspective: 2400px;
}
.books-track {
  position: relative; width: 240px; height: 340px; transform-style: preserve-3d;
  transition: transform 1s var(--ease);
}
.book {
  position: absolute; top: 0; left: 0; width: 240px; height: 340px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--stroke-2);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.85), inset 0 0 30px rgba(0,212,255,0.06);
  cursor: none;
  backface-visibility: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.4s;
  background: linear-gradient(160deg, #0a1430 0%, #050a1c 100%);
}
/* Palette variants — keep strict 2-colour rule, only vary depth */
.book-navy     { background: linear-gradient(160deg, #0a1430, #050a1c); }
.book-indigo   { background: linear-gradient(160deg, #0c1a3d, #060c22); }
.book-teal     { background: linear-gradient(160deg, #052436, #051221); }
.book-royal    { background: linear-gradient(160deg, #0e1f4c, #061028); }
.book-steel    { background: linear-gradient(160deg, #0b1a2e, #040915); }
.book-midnight { background: linear-gradient(160deg, #060e22, #030612); }
.book-azure    { background: linear-gradient(160deg, #082950, #03122a); }

.book::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 2px 0 20px rgba(0,212,255,0.4);
  z-index: 3;
}
.book::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 40%),
              radial-gradient(circle at 80% 110%, rgba(0,212,255,0.18), transparent 45%);
}

/* === FULL-COVER BOOK DESIGN ===
   Each book renders as a real-looking cover with:
     - Themed gradient background per palette
     - Subtle background pattern (per book index)
     - Glowing accent + icon glyph in upper area
     - Massive editorial title that dominates the cover
     - Subtle subtitle and author footer
*/
.book-cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; z-index: 1;
}
.book-cover-fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: 26px 22px 22px 30px; /* more left for spine */
  text-align: left;
  overflow: hidden;
}

/* Background pattern — subtle line/grid texture */
.book-bg-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(0,212,255,0.12) 0%, transparent 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 12px);
}
/* Bigger glow */
.book-bg-glow {
  position: absolute; inset: -50%; pointer-events: none;
  background: radial-gradient(circle at 30% 90%, rgba(43,108,255,0.28), transparent 50%);
  filter: blur(20px);
}

/* Volume badge in upper-right */
.book-vol-badge {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-end;
  padding: 5px 10px;
  border: 1px solid rgba(0,212,255,0.35);
  border-radius: 999px;
  background: rgba(4,6,15,0.55); backdrop-filter: blur(6px);
}
.bvb-num {
  font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--accent);
}
.bvb-divider {
  width: 1px; height: 10px; background: rgba(0,212,255,0.3);
}
.bvb-icon {
  font-size: 0.85rem; color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(0,212,255,0.6));
}

/* Title stack pushed to lower-middle */
.book-cover-stack {
  position: relative; z-index: 2;
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 10px;
}
.book-tag-line {
  font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.32em;
  color: var(--accent); opacity: 0.85;
}
.book-cover-title {
  font-family: var(--ff-display); font-weight: 900;
  font-size: 1.55rem; line-height: 1.0; letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.book-cover-sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: 0.78rem; line-height: 1.3; color: var(--ink-dim);
  letter-spacing: -0.005em;
}

/* Author footer */
.book-cover-foot {
  position: relative; z-index: 2;
  margin-top: 18px; padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.book-author-line {
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.book-author-name {
  font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.32em;
  color: var(--ink); font-weight: 500;
}

/* RTL Arabic books */
.book-cover-stack[dir="rtl"] {
  text-align: right;
}
.book-cover-stack[dir="rtl"] .book-cover-title {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: 0;
  font-size: 1.4rem;
  line-height: 1.3;
}
.book-cover-stack[dir="rtl"] .book-cover-sub {
  font-family: var(--ff-display);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0;
}

/* Per-palette accent overrides — each book feels distinct */
.book-navy     .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(43,108,255,0.32), transparent 50%); }
.book-indigo   .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(76,109,255,0.32), transparent 50%); }
.book-teal     .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(0,180,210,0.30), transparent 50%); }
.book-royal    .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(56,84,255,0.34), transparent 50%); }
.book-steel    .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(95,125,180,0.28), transparent 50%); }
.book-midnight .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(20,40,120,0.34), transparent 50%); }
.book-azure    .book-bg-glow { background: radial-gradient(circle at 30% 90%, rgba(0,140,220,0.32), transparent 50%); }

/* Different background patterns per index for variety */
.book:nth-child(3n)   .book-bg-pattern { background-image:
    radial-gradient(circle at 80% 20%, rgba(0,212,255,0.12) 0%, transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px); }
.book:nth-child(3n+1) .book-bg-pattern { background-image:
    radial-gradient(circle at 75% 15%, rgba(0,212,255,0.10) 0%, transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0 2px, transparent 2px 24px); }
.book:nth-child(3n+2) .book-bg-pattern { background-image:
    radial-gradient(circle at 90% 12%, rgba(0,212,255,0.13) 0%, transparent 40%),
    linear-gradient(180deg, transparent, rgba(43,108,255,0.05));
}

/* Hover bloom */
.book:hover .book-bg-glow { filter: blur(15px); transform: scale(1.1); transition: all 0.6s var(--ease); }
.book:hover .book-cover-title { color: var(--accent-s); transition: color 0.4s var(--ease); }

.books-controls {
  position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 3vw;
}
.book-ctrl {
  pointer-events: auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--stroke-2); background: var(--glass);
  color: var(--ink); font-size: 1.6rem; cursor: none;
  backdrop-filter: blur(10px); transition: all 0.3s;
}
.book-ctrl:hover { background: var(--cy); color: #000; border-color: var(--cy); }

.books-detail {
  margin: 120px auto 0; max-width: 620px; padding: 22px;
  border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px);
  text-align: center; min-height: 120px;
  position: relative; z-index: 5;
}
.detail-title { font-family: 'Orbitron'; font-weight: 700; font-size: 1.3rem; }
.detail-tag { font-family: 'Major Mono Display'; font-size: 0.72rem; color: var(--cy); letter-spacing: 0.3em; margin: 6px 0 10px; }
.detail-desc { color: var(--ink-dim); font-size: 0.98rem; line-height: 1.6; }

/* ====== VENTURES ====== */
.venture-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.venture-card {
  position: relative; padding: 32px; border-radius: var(--radius-lg);
  border: 1px solid var(--stroke); background: var(--glass);
  backdrop-filter: blur(14px); min-height: 260px;
  transition: transform 0.4s var(--ease), border-color 0.3s;
  overflow: hidden;
}
.venture-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, transparent 60%, rgba(0,240,255,0.2), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.venture-card:hover { transform: translateY(-6px); border-color: var(--cy); }
.venture-card:hover::before { opacity: 1; }
.venture-card.wide { grid-column: span 2; }
@media (max-width: 1000px) {
  .venture-grid { grid-template-columns: repeat(2, 1fr); }
  .venture-card.wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .venture-grid { grid-template-columns: 1fr; }
  .venture-card.wide { grid-column: span 1; }
}
.venture-id { font-family: 'Major Mono Display'; font-size: 0.72rem; color: var(--cy); letter-spacing: 0.3em; }
.venture-card h3 { font-family: 'Orbitron'; font-weight: 800; font-size: 1.55rem; margin-top: 14px; letter-spacing: 0.02em; }
.venture-tag { color: var(--ink-dim); font-size: 0.85rem; margin: 4px 0 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.venture-card p:last-of-type { color: var(--ink-dim); line-height: 1.6; font-size: 0.96rem; }
.venture-line { position: absolute; left: 32px; right: 32px; bottom: 28px; height: 1px;
  background: linear-gradient(90deg, var(--cy), transparent); opacity: 0.5; }

/* ====== TIMELINE — bold centered milestone column ====== */
.timeline {
  position: relative;
  margin: 70px auto 0;
  max-width: 1100px;
  padding: 30px 0 60px;
}
.timeline-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 6%,
    var(--primary) 50%,
    var(--accent) 94%,
    transparent 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.45);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 24px 40px;
  margin-bottom: 4px;
}
.timeline-item.left  { left: 0;   text-align: right; padding-right: 56px; }
.timeline-item.right { left: 50%; text-align: left;  padding-left: 56px; }

/* Milestone dot — pulse + halo + connector */
.tl-dot {
  position: absolute; top: 38px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:
    0 0 0 4px rgba(0, 212, 255, 0.10),
    0 0 0 12px rgba(0, 212, 255, 0.04),
    0 0 24px rgba(0, 212, 255, 0.6);
  z-index: 2;
  animation: tlPulse 3s ease-in-out infinite;
}
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.10), 0 0 0 12px rgba(0, 212, 255, 0.04), 0 0 24px rgba(0, 212, 255, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.20), 0 0 0 18px rgba(0, 212, 255, 0.08), 0 0 36px rgba(0, 212, 255, 0.85); }
}
.timeline-item.left  .tl-dot { right: -10px; }
.timeline-item.right .tl-dot { left:  -10px; }

/* Connector line from line → card */
.timeline-item::before {
  content: ''; position: absolute; top: 47px;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.timeline-item.left::before  { right: 0; background: linear-gradient(270deg, var(--accent), transparent); }
.timeline-item.right::before { left: 0; }
.tl-card {
  padding: 26px 28px;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-lg);
  /* Solid + glass blend so cards pop above the 3D vortex */
  background:
    linear-gradient(160deg, rgba(8, 12, 30, 0.92), rgba(4, 6, 15, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.10), transparent 60%);
  background-blend-mode: normal;
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow:
    0 30px 70px -25px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(43, 108, 255, 0.10),
    inset 0 1px 0 rgba(244, 246, 251, 0.04);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
/* Subtle gradient sheen on the top edge */
.tl-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
.tl-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow:
    0 40px 90px -25px rgba(0, 0, 0, 0.9),
    0 0 0 1px var(--accent),
    0 0 60px rgba(0, 212, 255, 0.25),
    inset 0 1px 0 rgba(244, 246, 251, 0.06);
}
.tl-year {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(43,108,255,0.18), rgba(0,212,255,0.10));
  border: 1px solid rgba(0, 212, 255, 0.35);
  font-family: var(--ff-mono); font-size: 0.7rem;
  color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.tl-card h4 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.12;
  color: var(--ink);
  margin-top: 6px;
}
.tl-card p {
  color: var(--ink-dim); margin-top: 12px; line-height: 1.7;
  font-size: 0.96rem;
}
.tl-card p b { color: var(--accent-s); font-weight: 600; }
.tl-card p em { color: var(--ink); font-style: italic; }

/* Featured (final) card — gradient border + larger */
.timeline-item.featured .tl-card {
  background: linear-gradient(160deg, rgba(43,108,255,0.14), rgba(0,212,255,0.08));
  border-color: var(--stroke-2);
  box-shadow: 0 30px 80px -30px rgba(43,108,255,0.4);
}
.timeline-item.featured .tl-card h4 { font-size: 1.35rem; }
.timeline-item.featured .tl-card .tl-year { color: var(--accent-s); }

/* Brighter dot for milestones */
.tl-dot {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 16px var(--accent), 0 0 0 4px rgba(43,108,255,0.15);
}
.timeline-item.featured .tl-dot {
  width: 18px; height: 18px;
  box-shadow: 0 0 22px var(--accent), 0 0 0 6px rgba(43,108,255,0.25);
}

/* Larger gap between timeline items */
.timeline-item { padding: 30px 30px; }

@media (max-width: 900px) {
  .timeline-line { left: 18px; }
  .timeline-item, .timeline-item.left, .timeline-item.right {
    width: 100%; left: 0; padding-left: 50px; padding-right: 0; text-align: left;
  }
  .timeline-item.left  .tl-dot,
  .timeline-item.right .tl-dot { left: 10px; right: auto; }
  .timeline-item.left::before,
  .timeline-item.right::before { left: 28px; right: auto; background: linear-gradient(90deg, var(--accent), transparent); }
  .tl-card h4 { font-size: 1.2rem; }
}

/* ====== CERTIFICATIONS ====== */
/* === CREDENTIALS GRID — institution-branded cards === */
.cert-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
  position: relative; overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(14px);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  transform-style: preserve-3d;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.cert-card:hover { border-color: var(--stroke-2); transform: translateY(-4px); }

.cert-card h4 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1.25; margin-top: 4px;
}
.cert-card p {
  color: var(--ink-dim); font-size: 0.86rem; line-height: 1.55;
}
.cert-card p em { color: var(--ink); }
.cert-meta {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--stroke);
  font-family: var(--ff-mono); font-size: 0.66rem;
  color: var(--ink-low); letter-spacing: 0.25em; text-transform: uppercase;
}

/* Featured cert card — IAIDL highlight */
.cert-featured {
  background: linear-gradient(160deg, rgba(43,108,255,0.14), rgba(0,212,255,0.07));
  border-color: var(--stroke-2);
}

/* === Inline institution logo (if used) — strictly tiny === */
.cm-logo {
  width: 22px; height: 22px; max-width: 22px; max-height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1) opacity(0.85);
}

/* Animated scan-line sweep across each cert mark on hover */
.cm-scan {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.18), transparent);
  pointer-events: none;
  transition: left 0.7s var(--ease);
}
.cert-mark { position: relative; overflow: hidden; }
.cert-card:hover .cm-scan { left: 140%; }

/* === Institution mark base === */
.cert-mark {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(244,246,251,0.04);
  border: 1px solid var(--stroke);
  font-family: var(--ff-display);
  align-self: flex-start;
  margin-bottom: 4px;
}
.cert-mark .cm-w {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  line-height: 1;
}
.cert-mark i {
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  border-left: 1px solid var(--stroke);
  padding-left: 8px;
  line-height: 1;
}

/* MIT — red wordmark */
.cm-mit .cm-w {
  background: linear-gradient(90deg, #A31F34, #E5462B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Harvard — crimson */
.cm-harvard .cm-w {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic; font-size: 1.1rem;
  color: #A41030;
  text-shadow: 0 0 12px rgba(164,16,48,0.35);
}

/* Anthropic — warm beige */
.cm-anthropic .cm-w {
  font-family: 'Inter', sans-serif; font-weight: 600;
  color: #D4A574;
  letter-spacing: -0.005em;
}
.cm-anthropic { background: rgba(212,165,116,0.06); border-color: rgba(212,165,116,0.25); }

/* Google — multicolor dots */
.cm-google { gap: 4px; }
.cm-google .cm-w {
  color: #fff;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  margin-left: 4px;
}
.cm-g-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.cm-g-1 { background: #4285F4; }
.cm-g-2 { background: #EA4335; }
.cm-g-3 { background: #FBBC04; }
.cm-g-4 { background: #34A853; }

/* WEF — deep blue */
.cm-wef .cm-w {
  color: #1F4E8C; font-weight: 800;
}
.cm-wef { background: rgba(31,78,140,0.08); border-color: rgba(31,78,140,0.3); }

/* IBM — distinctive bars + bold */
.cm-ibm { gap: 6px; }
.cm-ibm .cm-w {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em;
  color: #0F62FE;
}
.cm-ibm-bars {
  display: inline-block;
  width: 18px; height: 14px;
  background:
    linear-gradient(180deg,
      #0F62FE 0 25%,
      transparent 25% 38%,
      #0F62FE 38% 63%,
      transparent 63% 75%,
      #0F62FE 75% 100%);
}

/* Altair — orange/red */
.cm-altair .cm-w {
  background: linear-gradient(135deg, #ff6900, #f5a623);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* DAMA — geometric */
.cm-dama .cm-w {
  font-family: 'Inter', sans-serif;
  font-weight: 800; letter-spacing: 0.05em;
  color: #00A99D;
}

/* Agentic AI — accent */
.cm-agentic .cm-w {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* University of Helsinki — Nordic blue */
.cm-helsinki { background: rgba(0, 86, 161, 0.10); border-color: rgba(0, 86, 161, 0.35); }
.cm-helsinki .cm-w {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-size: 1.1rem; letter-spacing: -0.01em;
  color: #0056A1;
  text-shadow: 0 0 14px rgba(0, 86, 161, 0.4);
}

/* EFQM — European green-blue gradient */
.cm-efqm { background: rgba(0, 130, 130, 0.08); border-color: rgba(0, 130, 130, 0.35); }
.cm-efqm .cm-w {
  font-family: 'Inter', sans-serif;
  font-weight: 900; letter-spacing: -0.02em; font-size: 1.05rem;
  background: linear-gradient(135deg, #003399 0%, #0099BB 50%, #00B894 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* LIFO® — bold geometric */
.cm-lifo { background: rgba(220, 50, 80, 0.06); border-color: rgba(220, 50, 80, 0.30); }
.cm-lifo .cm-w {
  font-family: 'Inter', sans-serif;
  font-weight: 900; letter-spacing: -0.015em;
  color: #DC3250;
  text-transform: uppercase;
  font-size: 1rem;
}

/* IAIDL — gold + featured */
.cm-iaidl .cm-w {
  background: linear-gradient(135deg, #d4a017, #ffe48a, #d4a017);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 16px rgba(212, 160, 23, 0.3);
}
.cm-iaidl { background: rgba(212,160,23,0.08); border-color: rgba(212,160,23,0.35); }

/* Footnote below grid */
.cert-footnote {
  text-align: center;
  font-family: var(--ff-body);
  font-size: 0.95rem; line-height: 1.65; color: var(--ink-dim);
  max-width: 760px; margin: 40px auto 0;
}
.cert-footnote em { color: var(--ink); }

/* ====== GALLERY ====== */
.gallery-wall {
  margin-top: 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 180px; gap: 14px;
}
.gallery-tile {
  border-radius: var(--radius); overflow: hidden; position: relative;
  border: 1px solid var(--stroke-2); background: linear-gradient(135deg, #0f1226, #1a1040);
  transition: transform 0.4s var(--ease);
}
.gallery-tile:hover { transform: scale(1.02); }
.gallery-tile.tall { grid-row: span 2; }
.gallery-tile.wide { grid-column: span 2; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.04); display: block; }
.gallery-tile { margin: 0; }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 10px;
  background: linear-gradient(to top, rgba(4,8,20,0.9), transparent);
  font-size: 0.78rem; color: var(--ink); letter-spacing: 0.05em;
  font-family: 'Space Grotesk';
  opacity: 0; transition: opacity 0.3s;
}
.gallery-tile:hover .gallery-caption { opacity: 1; }
.gallery-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  font-family: 'Major Mono Display'; font-size: 0.72rem; letter-spacing: 0.3em; color: var(--ink-low);
  background:
    repeating-linear-gradient(45deg, rgba(0,212,255,0.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #0a1430, #060c22);
}
.gp-hint { font-size: 0.6rem; color: var(--ink-low); opacity: 0.6; letter-spacing: 0.25em; }

/* ====== TV & AI INTERVIEWS ====== */
.tv-grid {
  margin-top: 30px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
}
@media (max-width: 900px) { .tv-grid { grid-template-columns: 1fr; } }
.tv-card {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(160deg, rgba(30,107,255,0.05), rgba(0,212,255,0.04));
  backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.tv-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.tv-screen {
  position: relative; aspect-ratio: 16/9; background: #02060f; overflow: hidden;
  border-bottom: 1px solid var(--stroke-2);
}
.tv-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.tv-embed-slot {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,212,255,0.15), transparent 60%),
    linear-gradient(135deg, #0a1430, #030612);
  position: relative;
}
.tv-embed-slot::before {
  content: '◐ loading preview';
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-dim); font-family: 'Major Mono Display'; font-size: 0.7rem; letter-spacing: 0.3em;
}
.tv-screen .media-link {
  display: grid; place-items: center; height: 100%; color: var(--accent);
  font-family: 'Orbitron'; font-weight: 700; letter-spacing: 0.2em;
}
.tv-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(4,8,20,0.75); backdrop-filter: blur(8px);
  color: var(--accent); font-family: 'Major Mono Display'; font-size: 0.68rem; letter-spacing: 0.22em;
  border: 1px solid rgba(0,212,255,0.35); pointer-events: none;
}
.tv-meta { padding: 22px; }
.tv-meta h4 {
  font-family: 'Orbitron'; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em;
}
.tv-channel { color: var(--ink-dim); font-size: 0.88rem; margin-top: 4px; }
.tv-open {
  display: inline-block; margin-top: 14px; font-size: 0.82rem;
  color: var(--accent); border-bottom: 1px solid rgba(0,212,255,0.35);
  padding-bottom: 2px; transition: border-color 0.2s;
}
.tv-open:hover { border-color: var(--accent); }

/* Article / spotify fallback cards inside tv-screen */
.tv-screen .media-link {
  display: grid; place-items: center; height: 100%;
  gap: 10px; padding: 20px; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(30,107,255,0.2), transparent 70%);
  color: var(--ink);
  transition: transform 0.3s;
}
.tv-screen .media-link:hover { transform: scale(1.02); }
.tv-screen .media-link b { font-family: 'Orbitron'; font-size: 1.1rem; letter-spacing: 0.05em; }
.tv-screen .media-link small { color: var(--ink-dim); font-size: 0.82rem; letter-spacing: 0.1em; }
.article-ico, .sp-ico {
  width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--grad-hero); color: #04081a;
  box-shadow: 0 0 30px rgba(0,212,255,0.3);
}
.spotify-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  border: 1px solid var(--stroke-2); border-radius: 12px;
  background: rgba(4,8,20,0.6); backdrop-filter: blur(10px);
  width: 86%;
}
.spotify-card div { text-align: left; }
.article-link { flex-direction: column; }

/* Article card with real OG:image thumbnail */
.article-link.has-thumb {
  position: relative; padding: 0; background: none;
  display: block; overflow: hidden;
}
.thumb-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.05) brightness(0.75);
  transition: transform 0.6s var(--ease), filter 0.3s;
}
.article-link.has-thumb:hover .thumb-bg { transform: scale(1.05); filter: saturate(1.15) brightness(0.85); }
.thumb-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 6px; padding: 18px 22px;
  background: linear-gradient(to top, rgba(4,8,20,0.95) 0%, rgba(4,8,20,0.45) 55%, transparent 100%);
  text-align: left;
}
.thumb-overlay .article-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--grad-hero); color: #04081a;
  box-shadow: 0 0 18px rgba(0,212,255,0.35);
  margin-bottom: 4px;
}
.thumb-overlay b {
  font-family: 'Orbitron'; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink);
}
.thumb-overlay small { color: var(--accent-s); font-size: 0.78rem; letter-spacing: 0.1em; }

/* ====== INSIGHTS ====== */
.insights-grid {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 1000px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .insights-grid { grid-template-columns: 1fr; } }
.post-card {
  padding: 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--stroke); background: var(--glass);
  backdrop-filter: blur(14px); transition: transform 0.4s var(--ease), border-color 0.3s;
  display: flex; flex-direction: column; gap: 14px;
}
.post-card:hover { border-color: var(--cy); transform: translateY(-4px); }
.post-head { display: flex; align-items: center; gap: 12px; }
.post-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad-hero); display: grid; place-items: center;
  font-family: 'Orbitron'; font-weight: 900; color: #000; letter-spacing: 1px;
}
.post-meta b { font-size: 0.92rem; }
.post-meta small { display: block; color: var(--ink-low); font-size: 0.72rem; letter-spacing: 0.1em; }
.post-body { font-size: 0.96rem; line-height: 1.7; color: var(--ink-dim); }
.post-body b { color: var(--ink); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag { font-size: 0.7rem; color: var(--cy); letter-spacing: 0.15em; }
.post-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--stroke);
  font-size: 0.78rem; color: var(--ink-low);
}
.post-foot a { color: var(--cy); }

/* ====== FEED TABS (social platforms) ====== */
.feed-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 auto 24px; max-width: 760px;
}
.feed-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: var(--glass);
  color: var(--ink-dim); font-size: 0.82rem; letter-spacing: 0.1em;
  cursor: none; transition: all 0.3s var(--ease); font-family: 'Space Grotesk';
}
.feed-tab:hover { border-color: var(--cy); color: var(--cy); }
.feed-tab.active { background: var(--grad-hero); color: #000; border-color: transparent; font-weight: 600; }
.ft-ico {
  width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center;
  font-size: 0.68rem; font-weight: 700; background: var(--glass-2);
}
.feed-tab.active .ft-ico { background: rgba(0,0,0,0.2); color: #000; }
.ft-linkedin::before  { content: 'in'; }
.ft-twitter::before   { content: '𝕏'; }
.ft-facebook::before  { content: 'f'; }
.ft-instagram::before { content: '◎'; }
.ft-media::before     { content: '▶'; }
.ft-all::before       { content: '✦'; }

.feed-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px;
  border: 1px dashed var(--stroke-2); border-radius: var(--radius-lg); color: var(--ink-dim);
}
.feed-empty a { color: var(--cy); text-decoration: underline; }

.media-card .media-thumb {
  aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #0f1226, #1a1040);
  border: 1px solid var(--stroke-2);
}
.media-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.media-link {
  display: grid; place-items: center; height: 100%; color: var(--cy); letter-spacing: 0.1em;
  font-family: 'Orbitron'; font-weight: 700;
}

/* ====== BOOKING ====== */
.booking-section { padding-bottom: 160px; }
.booking-shell {
  display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 60px; align-items: start;
  margin-top: 30px;
}
@media (max-width: 1000px) { .booking-shell { grid-template-columns: 1fr; gap: 40px; } }

.booking-options { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.bk-opt {
  display: flex; gap: 14px; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--glass);
  cursor: none; transition: all 0.3s;
}
.bk-opt:hover { border-color: var(--stroke-2); }
.bk-opt.selected { border-color: var(--cy); box-shadow: 0 0 24px rgba(0,240,255,0.2); }
.bk-opt input { accent-color: var(--cy); margin-top: 4px; }
.bk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-top b { font-size: 1.02rem; }
.bk-top .bk-tag {
  font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 212, 255, 0.10); border: 1px solid rgba(0, 212, 255, 0.30);
  white-space: nowrap;
}
.bk-top .bk-tag-gold {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.10);
  border-color: rgba(255, 209, 102, 0.30);
}
.bk-opt-feature {
  background: linear-gradient(160deg, rgba(255, 209, 102, 0.06), rgba(43, 108, 255, 0.04));
  border-color: rgba(255, 209, 102, 0.30) !important;
}
.bk-opt-feature.selected { box-shadow: 0 0 24px rgba(255, 209, 102, 0.15) !important; }
.bk-sub { color: var(--ink-dim); font-size: 0.88rem; margin-top: 4px; }

.booking-perks { margin-top: 28px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.booking-perks li { position: relative; padding-left: 22px; color: var(--ink-dim); font-size: 0.9rem; }
.booking-perks li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border: 1px solid var(--cy); border-right: 0; border-top: 0; transform: rotate(-45deg);
}

.bk-form {
  padding: 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-2); background: linear-gradient(160deg, rgba(0,240,255,0.04), rgba(168,85,247,0.04));
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 22px;
}

.bk-calendar {}
.bk-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bk-cal-title { font-family: 'Orbitron'; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.1em; }
.bk-nav {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--stroke-2);
  background: var(--glass); color: var(--ink); cursor: none; font-size: 1.1rem; transition: all 0.2s;
}
.bk-nav:hover { border-color: var(--cy); color: var(--cy); }

.bk-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: 'Major Mono Display'; font-size: 0.72rem; color: var(--ink-low);
  text-align: center; padding: 8px 0; letter-spacing: 0.2em;
}
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-day {
  aspect-ratio: 1; display: grid; place-items: center; cursor: none;
  border: 1px solid transparent; border-radius: 8px; font-size: 0.85rem;
  transition: all 0.2s; position: relative;
  background: transparent;
  color: var(--ink);
  font-family: 'Space Grotesk';
  appearance: none; -webkit-appearance: none;
}
.bk-day:hover:not(.disabled):not(.muted) { border-color: var(--cy); color: var(--cy); }
.bk-day.muted { color: var(--ink-low); opacity: 0.4; cursor: default; }
.bk-day.disabled { color: var(--ink-low); opacity: 0.2; cursor: default; text-decoration: line-through; }
.bk-day.today { border-color: var(--stroke-2); }
.bk-day.selected { background: var(--cy); color: #000; border-color: var(--cy); font-weight: 700; }

.bk-slots-title {
  font-size: 0.78rem; letter-spacing: 0.2em; color: var(--ink-dim); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.bk-slots-title small { color: var(--ink-low); font-weight: 400; letter-spacing: 0.1em; text-transform: none; }

.bk-slots-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  min-height: 44px;
}
@media (max-width: 600px) { .bk-slots-grid { grid-template-columns: repeat(3, 1fr); } }
.bk-slot {
  padding: 10px; border-radius: 8px; border: 1px solid var(--stroke-2);
  background: var(--glass); cursor: none; font-size: 0.88rem; font-family: 'Space Grotesk';
  color: var(--ink); transition: all 0.2s;
}
.bk-slot:hover:not(:disabled) { border-color: var(--cy); color: var(--cy); }
.bk-slot.selected { background: var(--cy); color: #000; border-color: var(--cy); font-weight: 700; }
.bk-slot:disabled { opacity: 0.3; cursor: default; }
.bk-slot-empty {
  grid-column: span 4; text-align: center; padding: 16px; color: var(--ink-low);
  font-family: 'Major Mono Display'; font-size: 0.72rem; letter-spacing: 0.2em;
  border: 1px dashed var(--stroke-2); border-radius: 8px;
}

.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-fields label { display: flex; flex-direction: column; gap: 6px; }
.bk-fields label.full { grid-column: span 2; }
.bk-fields span { font-size: 0.74rem; letter-spacing: 0.2em; color: var(--ink-dim); text-transform: uppercase; }
.bk-fields input, .bk-fields textarea {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--stroke-2); background: rgba(5,6,13,0.6); color: var(--ink);
  font-family: 'Space Grotesk'; font-size: 0.95rem; outline: none; transition: border-color 0.2s;
  resize: vertical;
}
.bk-fields input:focus, .bk-fields textarea:focus { border-color: var(--cy); }

.bk-status { text-align: center; font-size: 0.88rem; color: var(--ink-dim); min-height: 1.4em; }
.bk-status.err { color: var(--mg); }
.bk-status.ok  { color: var(--cy); }

/* ====== MODAL ====== */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  background: rgba(5,6,13,0.8); backdrop-filter: blur(8px);
}
.modal[aria-hidden="false"] { display: grid; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-card {
  max-width: 440px; width: 92%; padding: 40px; text-align: center;
  border-radius: var(--radius-lg); border: 1px solid var(--cy);
  background: linear-gradient(160deg, #0a0d1a, #12152a);
  box-shadow: 0 0 80px rgba(0,240,255,0.3);
}
.modal-check svg { width: 72px; height: 72px; margin-bottom: 16px; }
.modal-card h3 { font-family: 'Orbitron'; font-size: 1.5rem; margin-bottom: 8px; }
.modal-card p  { color: var(--ink-dim); margin-bottom: 22px; line-height: 1.6; }

/* ====== FOOTER ====== */
.footer {
  padding: 60px 8vw 40px;
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, transparent, rgba(0,240,255,0.02));
}
.footer-inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: center;
}
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr; text-align: center; } }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand b { font-family: 'Orbitron'; letter-spacing: 0.1em; }
.footer-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.footer-links a { font-size: 0.88rem; color: var(--ink-dim); transition: color 0.2s; }
.footer-links a:hover { color: var(--cy); }
.footer-copy { font-size: 0.78rem; text-align: right; }
@media (max-width: 800px) { .footer-copy { text-align: center; } }
.muted { color: var(--ink-low); }

/* ====================================================
   EDITORIAL TYPOGRAPHY OVERRIDES
   Replaces the earlier Orbitron-heavy system with a refined
   Inter + Instrument Serif hierarchy.
   ==================================================== */

/* Body + sans usage */
body, p, a, button, input, textarea, select,
.btn, .chip, .topnav a, .cta-mini,
.hero-lede, .hero-eyebrow, .section-sub,
.about-text p, .about-chips .chip,
.cube-face p, .detail-desc, .venture-tag, .venture-card p,
.tl-card p, .cert-card p, .post-body, .bk-sub,
.bk-top b, .booking-perks li, .tv-channel,
.footer-links a, .footer-copy {
  font-family: var(--ff-body);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Major display (hero, section titles) — Inter Black, tight kerning */
.hero-title,
.section-title,
.cube-face h3,
.venture-card h3,
.tl-card h4,
.cert-card h4,
.detail-title,
.post-meta b,
.book-title,
.tv-meta h4,
.preloader-logo,
.brand-text,
.bk-cal-title,
.modal-card h3,
.login-card h1,
.pane-form h2,
.pane-list h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* Editorial italics cue — use Instrument Serif italic for emphasis tokens */
.serif-italic, .hero-title em, .section-title em,
.hero-lede em, .about-text em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Mono for meta/labels */
.section-label, .face-num, .venture-id, .tl-year, .book-tag, .book-num,
.holo-code, .portrait-caption, .hero-signature, .hero-eyebrow,
.hero-scroll-hint, .section-ticker, .preloader-text, .preloader-meta,
.cube-readout, .cube-hint, .book-ctrl,
.bk-cal-dow, .bk-slots-title, .bk-fields span,
.post-tag, .cert-medal + h4 + p,
.post-foot, .bk-status,
.feed-tab, .tv-tag, .post-head small {
  font-family: var(--ff-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Brand text in topbar — Inter semibold, tracking */
.brand-text {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

/* Specialised sizes */
.section-title { font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.0; }
.hero-title { font-size: clamp(3.5rem, 11vw, 10rem); letter-spacing: -0.045em; line-height: 0.92; }
.hero-lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--ink-dim); }
.hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; }

/* ====================================================
   21st.dev PROMAX MOTION LAYER
   ==================================================== */

/* Scroll progress bar at top of viewport */
.mprogress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left;
  z-index: 99; pointer-events: none;
  box-shadow: 0 0 14px var(--accent);
}

/* Cursor spotlight */
.mspot {
  position: fixed; top: 0; left: 0; width: 500px; height: 500px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  transform: translate(-9999px, -9999px);
  background: radial-gradient(circle, rgba(0,212,255,0.10), rgba(30,107,255,0.06) 30%, transparent 60%);
  mix-blend-mode: screen; opacity: 0.9;
  margin-left: -250px; margin-top: -250px;
}
@media (max-width: 900px) { .mspot { display: none; } }

/* Floating section ticker (always-on-screen chip) */
.section-ticker {
  position: fixed; left: 28px; bottom: 28px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: rgba(4,8,20,0.75);
  backdrop-filter: blur(14px);
  font-family: 'Major Mono Display'; font-size: 0.7rem; letter-spacing: 0.25em;
  color: var(--ink-dim);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.section-ticker.visible { opacity: 1; transform: translateY(0); }
.section-ticker .tk-num {
  color: var(--accent);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 0.85rem; font-weight: 700;
}
.section-ticker .tk-label { color: var(--ink); }
@media (max-width: 700px) { .section-ticker { left: 12px; bottom: 12px; } }

/* Split char base style */
.mchar {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

/* Magnetic button enhancement — inner glow shifts on hover */
.magnetic { transition: box-shadow 0.4s var(--ease); }
.magnetic:hover { box-shadow: 0 30px 60px -15px rgba(30,107,255,0.55), 0 0 60px rgba(0,212,255,0.35); }

/* 3D Tilt cards: shadow deepens when tilted */
.tilt-card {
  transform-style: preserve-3d;
  transition: box-shadow 0.4s var(--ease);
}
.tilt-card:hover { box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 60px rgba(0,212,255,0.12); }

/* Marquee */
.marquee { width: 100%; overflow: hidden; display: flex; }
.marquee-inner { display: inline-flex; flex-shrink: 0; gap: 60px; padding-right: 60px; }

/* Reveal-on-scroll hints */
[data-reveal] { will-change: transform, opacity, filter; }

/* Shimmer gradient text (title accent) — applied to parent AND each split char */
.gradient-shine,
.gradient-shine .mchar {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--accent) 25%,
    #ffffff 50%,
    var(--accent) 75%,
    var(--primary) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shineMove 8s linear infinite;
}
@keyframes shineMove { to { background-position: -300% 0; } }

/* Bento grid helper */
.bento { display: grid; gap: 18px; }

/* Glass card refinement */
.glass {
  background: linear-gradient(160deg, rgba(30,107,255,0.06), rgba(0,212,255,0.04));
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-lg);
}

/* Animated gradient border */
.gborder { position: relative; }
.gborder::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: borderShift 6s linear infinite;
  opacity: 0.7;
}
@keyframes borderShift {
  to { background-position: 200% 0; }
}

/* ====================================================
   EDITORIAL COMPONENT LIBRARY (Phase 2)
   ==================================================== */

/* Ghost number — huge outlined numeral behind content */
.ghost-number {
  position: absolute;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(10rem, 24vw, 28rem);
  line-height: 0.85;
  letter-spacing: -0.08em;
  -webkit-text-stroke: 1px rgba(43, 108, 255, 0.22);
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.7;
}

/* Editorial meta row */
.meta-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--ink-low); text-transform: uppercase;
  padding: 16px 0 14px; border-bottom: 1px solid var(--stroke);
  margin-bottom: 40px;
}
.meta-row span { display: inline-flex; align-items: center; gap: 8px; }
.meta-row span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.meta-row .meta-label { color: var(--ink-low); }
.meta-row .meta-val { color: var(--ink); font-weight: 500; letter-spacing: 0.12em; }

/* Marquee strip — infinite horizontal phrase/logo scroller */
.marquee-strip {
  position: relative; overflow: hidden;
  padding: 28px 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, transparent, rgba(43,108,255,0.03), transparent);
  margin: 60px 0 100px;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeScroll 36s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-strip .marquee-inner {
  display: inline-flex; align-items: center; gap: 60px;
  padding-right: 60px; flex-shrink: 0;
  font-family: var(--ff-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.035em; color: var(--ink);
  white-space: nowrap;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-strip .mq-accent {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  font-style: italic;
  font-family: var(--ff-serif);
  font-weight: 400;
}
.marquee-strip .mq-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  box-shadow: 0 0 18px var(--accent);
  flex-shrink: 0;
}
.marquee-strip::before,
.marquee-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 140px;
  z-index: 2; pointer-events: none;
}
.marquee-strip::before { left: 0;  background: linear-gradient(90deg, var(--bg-0), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }

/* Stats band — full-width animated metric strip */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 60px 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
@media (max-width: 800px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stats-band .metric {
  padding: 36px 24px; position: relative;
  border-right: 1px solid var(--stroke);
  transition: background 0.4s var(--ease);
}
.stats-band .metric:last-child { border-right: 0; }
.stats-band .metric:hover { background: rgba(43,108,255,0.03); }
.stats-band .metric-num {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1; letter-spacing: -0.04em;
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats-band .metric-label {
  font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.22em;
  color: var(--ink-low); text-transform: uppercase; margin-top: 12px;
}
.stats-band .metric-note {
  font-family: var(--ff-body); font-size: 0.82rem;
  color: var(--ink-dim); margin-top: 6px; line-height: 1.4;
}

/* Bento grid — asymmetric tiles (for expertise/services) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
  margin-top: 56px;
}
@media (max-width: 1000px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bento-grid { grid-template-columns: 1fr; } }

.bento-tile {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(14px);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px;
}
.bento-tile:hover { border-color: var(--stroke-2); transform: translateY(-3px); }
.bento-tile h3 { font-size: 1.3rem; margin-bottom: 8px; }
.bento-tile p { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.55; }
.bento-tile .bt-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(43,108,255,0.15), rgba(0,212,255,0.08));
  border: 1px solid var(--stroke-2);
  margin-bottom: 16px;
  color: var(--accent); font-size: 1.1rem;
}
.bento-tile .bt-num {
  font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.22em;
  color: var(--ink-low); margin-bottom: auto;
}
.bento-tile.span-2 { grid-column: span 2; }
.bento-tile.row-2  { grid-row: span 2; }
.bento-tile.feature {
  background: linear-gradient(160deg, rgba(43,108,255,0.12), rgba(0,212,255,0.06));
  border-color: var(--stroke-2);
}
@media (max-width: 600px) {
  .bento-tile.span-2, .bento-tile.row-2 { grid-column: span 1; grid-row: span 1; }
}

/* Editorial portrait block */
.editorial-portrait {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8);
}
.editorial-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: contrast(1.05) saturate(1.05);
  transition: transform 1.2s var(--ease);
}
.editorial-portrait:hover img { transform: scale(1.04); }
.editorial-portrait::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(4,6,15,0.4) 100%),
    linear-gradient(135deg, rgba(43,108,255,0.08), transparent 45%);
  pointer-events: none;
}
.portrait-badge {
  position: absolute; bottom: 18px; left: 18px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(4,6,15,0.7); backdrop-filter: blur(10px);
  border: 1px solid var(--stroke-3);
  font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.22em;
  color: var(--ink);
}

/* Hero split-screen layout enhancement */
.hero-section.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1100px) {
  .hero-section.split { grid-template-columns: 1fr; }
  .hero-right { display: none; }
}
.hero-right {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center;
  padding: 80px 0;
}
/* === HERO CREDENTIAL BOX (replaces portrait) === */
.hero-credbox {
  position: relative;
  width: 100%; max-width: 460px;
  margin: 0 0 0 auto;
  padding: 26px 22px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-2);
  background:
    radial-gradient(circle at 80% 0%, rgba(0,212,255,0.12), transparent 55%),
    linear-gradient(160deg, rgba(8,12,30,0.90), rgba(4,6,15,0.96));
  backdrop-filter: blur(18px);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.85),
    0 0 80px rgba(43,108,255,0.18),
    inset 0 1px 0 rgba(244,246,251,0.06);
  overflow: hidden;
}
.hero-credbox::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(43,108,255,0.4), transparent 40%, rgba(0,212,255,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.7;
}
.hero-credbox::after {
  content: ''; position: absolute; left: -50%; top: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(0,212,255,0.06) 60deg,
    transparent 120deg);
  animation: hcbSweep 12s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes hcbSweep { to { transform: rotate(360deg); } }
.hero-credbox > * { position: relative; z-index: 1; }

.hcb-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke); }
.hcb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 0.62rem;
  letter-spacing: 0.28em; color: var(--accent);
}
.hcb-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s infinite;
}
.hcb-title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -0.02em;
  margin-top: 6px; line-height: 1.2;
  color: var(--ink);
}
.hcb-title em { color: var(--accent-s); }

.hcb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hcb-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 14px 8px;
  border: 1px solid var(--stroke);
  background: rgba(244,246,251,0.025);
  border-radius: 10px;
  min-height: 72px;
  transition: all 0.4s var(--ease);
  text-align: center;
}
.hcb-cell:hover {
  border-color: var(--accent);
  background: rgba(0,212,255,0.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(0,212,255,0.4);
}
.hcb-cell .hcb-w {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 0.95rem; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1;
}
.hcb-cell i {
  font-style: normal;
  font-family: var(--ff-mono); font-size: 0.56rem;
  letter-spacing: 0.18em; color: var(--ink-dim);
  text-transform: uppercase; line-height: 1.3;
  margin-top: 4px;
}

/* Brand-tinted wordmarks */
.hcb-mit       .hcb-w { background: linear-gradient(90deg, #A31F34, #E5462B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hcb-harvard   .hcb-w { color: #A41030; font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic; font-size: 1.1rem; }
.hcb-tedx      .hcb-w { color: #E62B1E; font-style: italic; font-size: 1.1rem; }
.hcb-tedx      .hcb-w sup { font-size: 0.55em; vertical-align: super; }
.hcb-anthropic .hcb-w { color: #D4A574; }
.hcb-google    .hcb-w { background: linear-gradient(90deg, #4285F4 0%, #EA4335 33%, #FBBC04 66%, #34A853 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hcb-stanford  .hcb-w { color: #8C1515; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1rem; }
.hcb-coventry  .hcb-w { color: #1AA0E2; }
.hcb-wef       .hcb-w { color: #1F4E8C; }
.hcb-iaidl     .hcb-w { background: linear-gradient(135deg, #d4a017, #ffe48a, #d4a017); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hcb-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--stroke);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.22em;
  color: var(--ink-dim); text-transform: uppercase;
}
.hcb-foot b { color: var(--accent); font-weight: 500; }

/* Legacy class kept so older selectors don't break */
.hero-portrait {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 3/4;
  margin-left: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.8),
              0 0 80px rgba(43,108,255,0.12);
}
.hero-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}
.hero-portrait::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(4,6,15,0.75) 100%),
    linear-gradient(135deg, transparent 60%, rgba(43,108,255,0.15));
}
.hero-portrait-caption {
  position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2;
  font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.22em;
  color: var(--ink-dim); text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.hero-portrait-caption b { color: var(--accent); font-weight: 500; }

/* Section title editorial — large serif italic accent inline */
.section-title .accent-serif {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Upgrade section label with dot-line pattern */
.section-label {
  font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.28em;
  color: var(--ink-dim); margin-bottom: 32px;
  display: flex; align-items: center; gap: 14px; text-transform: uppercase;
  position: relative; z-index: 1;
}
.section-label::before {
  content: ''; width: 32px; height: 1px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* Refine venture cards into editorial layout */
.venture-card {
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--stroke);
  min-height: 280px;
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.venture-card::before { display: none; }
.venture-card:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.venture-card h3 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 1.8rem; letter-spacing: -0.025em; margin-top: 18px;
}
.venture-card .venture-id {
  font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.28em;
  color: var(--accent); text-transform: uppercase;
}
.venture-card .venture-tag {
  font-family: var(--ff-mono); color: var(--ink-dim);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 6px 0 14px;
}

/* Featured venture card — larger typography */
.venture-card.wide {
  background: linear-gradient(160deg, rgba(43,108,255,0.12) 0%, rgba(0,212,255,0.06) 100%);
  min-height: 320px;
}
.venture-card.wide h3 { font-size: 2.4rem; }

/* Refine hero stats → editorial metric cards */
.hero-stats .stat {
  padding: 24px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.hero-stats .stat:hover { border-color: var(--stroke-2); transform: translateY(-3px); }
.hero-stats .num {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 2.6rem; letter-spacing: -0.04em;
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.hero-stats.six .num { font-size: clamp(1.8rem, 2.2vw, 2.4rem); }
.hero-stats .lbl {
  font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.22em;
  color: var(--ink-dim); text-transform: uppercase; margin-top: 6px;
}
.hero-stats.six .lbl { font-size: 0.6rem; letter-spacing: 0.2em; }
.hero-stats.six .stat { padding: 18px 16px; }

/* ====================================================
   SOCIAL CONNECT BAND — premium animated outro
   ==================================================== */
.social-band {
  position: relative;
  padding: 100px 8vw 60px;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(43,108,255,0.04), transparent);
  border-top: 1px solid var(--stroke);
}
.social-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.7rem; letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 12px;
}
.social-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.social-blurb {
  color: var(--ink-dim); font-size: 1rem; line-height: 1.55;
  max-width: 540px; margin: 14px auto 50px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .social-grid { grid-template-columns: 1fr; } }

.social-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(160deg, rgba(244,246,251,0.025), rgba(43,108,255,0.04));
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
  text-align: left;
  text-decoration: none; color: var(--ink);
}
.social-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--sc-glow, radial-gradient(circle at 80% 0%, rgba(43,108,255,0.18), transparent 55%));
  opacity: 0; transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.social-card::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.social-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--sc-color, var(--accent));
  box-shadow: 0 25px 60px -25px rgba(0,0,0,0.7),
              0 0 40px var(--sc-shadow, rgba(0,212,255,0.25));
}
.social-card:hover::before { opacity: 1; }
.social-card:hover::after  { left: 140%; }

.sc-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(244, 246, 251, 0.04);
  border: 1px solid var(--stroke-3);
  color: var(--sc-color, var(--ink-dim));
  flex-shrink: 0;
  transition: all 0.4s var(--ease);
}
.sc-icon svg { width: 26px; height: 26px; transition: transform 0.4s var(--ease); }
.social-card:hover .sc-icon {
  background: var(--sc-color, var(--accent));
  border-color: transparent;
  color: #fff;
  transform: rotate(-4deg) scale(1.1);
  box-shadow: 0 10px 24px var(--sc-shadow, rgba(0,212,255,0.4));
}
.social-card:hover .sc-icon svg { transform: scale(1.05); }

.sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sc-platform {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--ink);
}
.sc-handle {
  font-family: var(--ff-mono); font-size: 0.75rem;
  color: var(--ink-dim); letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-cta {
  font-family: var(--ff-mono); font-size: 0.7rem;
  color: var(--sc-color, var(--accent));
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 6px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}
.social-card:hover .sc-cta { opacity: 1; transform: translateY(0); }

/* Brand colors per platform */
.sc-linkedin  { --sc-color: #0A66C2; --sc-shadow: rgba(10,102,194,0.35); --sc-glow: radial-gradient(circle at 80% 0%, rgba(10,102,194,0.25), transparent 55%); }
.sc-twitter   { --sc-color: #ffffff; --sc-shadow: rgba(255,255,255,0.25); --sc-glow: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.10), transparent 55%); }
.sc-instagram { --sc-color: #E1306C; --sc-shadow: rgba(225,48,108,0.40); --sc-glow: radial-gradient(circle at 80% 0%, rgba(225,48,108,0.20), rgba(248,168,53,0.10) 40%, transparent 65%); }
.sc-facebook  { --sc-color: #1877F2; --sc-shadow: rgba(24,119,242,0.35); --sc-glow: radial-gradient(circle at 80% 0%, rgba(24,119,242,0.22), transparent 55%); }
.sc-youtube   { --sc-color: #FF0000; --sc-shadow: rgba(255,0,0,0.32); --sc-glow: radial-gradient(circle at 80% 0%, rgba(255,0,0,0.18), transparent 55%); }
.sc-website   { --sc-color: var(--accent); --sc-shadow: rgba(0,212,255,0.35); --sc-glow: radial-gradient(circle at 80% 0%, rgba(0,212,255,0.20), transparent 55%); }

/* Pulse the Instagram icon with gradient since it's signature */
.sc-instagram .sc-icon { background-image: none; }
.social-card.sc-instagram:hover .sc-icon {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* === Venture footnote — premium callout === */
.venture-footnote {
  margin: 60px auto 0;
  max-width: 920px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-2);
  background:
    linear-gradient(135deg, rgba(43,108,255,0.10) 0%, rgba(0,212,255,0.05) 100%),
    rgba(4, 8, 20, 0.5);
  backdrop-filter: blur(18px);
  position: relative; z-index: 2;
  box-shadow: 0 30px 80px -30px rgba(43,108,255,0.35),
              0 0 60px rgba(0,212,255,0.06) inset;
}
.venture-footnote .vfn-mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 300;
  font-size: 2.2rem; line-height: 1;
  color: #04081a;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,212,255,0.45);
  flex-shrink: 0;
}
.venture-footnote .vfn-eyebrow {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.7rem; letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.venture-footnote .vfn-body p {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.venture-footnote em {
  color: var(--accent-s);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
}
@media (max-width: 700px) {
  .venture-footnote {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px;
  }
  .venture-footnote .vfn-mark { margin: 0 auto; }
}

/* ====================================================
   PRESS STRIP — "Featured In" with brand wordmarks.
   Grayscale at rest, brand color on hover. Marquee scrolls.
   ==================================================== */
.press-section {
  position: relative;
  padding: 80px 8vw 40px;
  margin-top: -40px;
  /* Subtle dark vignette so the headline is always legible over the 3D bg */
  background:
    radial-gradient(ellipse at 50% 50%, rgba(4,6,15,0.65) 0%, rgba(4,6,15,0.35) 50%, transparent 90%);
}
.press-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(4,6,15,0.5) 35%, rgba(4,6,15,0.5) 65%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.press-section > * { position: relative; z-index: 1; }

.press-eyebrow {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.7rem; letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 16px;
  position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
}
.press-eyebrow::before, .press-eyebrow::after {
  content: ''; position: absolute; top: 50%;
  width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--stroke-2), transparent);
}
.press-eyebrow::before { right: calc(100% + 14px); }
.press-eyebrow::after  { left:  calc(100% + 14px); transform: scaleX(-1); }

.press-title {
  text-align: center;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3; letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 880px; margin: 0 auto 50px;
  text-shadow: 0 2px 24px rgba(4, 6, 15, 0.95);
  position: relative; z-index: 2;
}
.press-title .accent-serif {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}

.press-strip {
  position: relative;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding: 30px 0;
  background: linear-gradient(180deg, transparent, rgba(43,108,255,0.03), transparent);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.press-track {
  display: flex;
  width: max-content;
  animation: pressScroll 28s linear infinite;
}
.press-strip:hover .press-track { animation-play-state: paused; }
.press-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding-right: clamp(40px, 5vw, 80px);
  flex-shrink: 0;
}
@keyframes pressScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.press-logo {
  display: inline-flex; align-items: center;
  height: 36px; line-height: 1;
  padding: 6px 12px; border-radius: 8px;
  filter: grayscale(1) brightness(1.3) opacity(0.55);
  transition: filter 0.4s var(--ease), transform 0.3s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.press-logo:hover {
  filter: grayscale(0) brightness(1) opacity(1);
  transform: scale(1.05);
}

/* Bloomberg — bold black serif/condensed sans */
.logo-bloomberg span {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 1.5rem; letter-spacing: -0.04em;
  color: #FA8334;
}

/* CEO Magazine */
.logo-ceo {
  flex-direction: column; align-items: center; gap: 1px;
}
.logo-ceo span {
  font-family: var(--ff-serif);
  font-weight: 400; font-style: italic; font-size: 1.7rem; letter-spacing: -0.01em;
  color: #C2A878;
  line-height: 1;
}
.logo-ceo i {
  font-family: var(--ff-mono); font-style: normal;
  font-size: 0.5rem; letter-spacing: 0.4em; color: var(--ink-dim);
}

/* Forbes */
.logo-forbes span {
  font-family: 'Instrument Serif', serif;
  font-weight: 700; font-style: normal;
  font-size: 1.8rem; letter-spacing: -0.04em;
  color: #ffffff;
}

/* Reuters */
.logo-reuters {
  gap: 8px;
}
.logo-reuters .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #FA6400; display: inline-block;
}
.logo-reuters span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em;
  color: #ffffff;
}

/* CNBC */
.logo-cnbc {
  gap: 8px;
}
.logo-cnbc .peacock {
  width: 18px; height: 18px; flex-shrink: 0;
  background:
    conic-gradient(from 0deg,
      #ffce00 0deg 60deg,
      #ff7a00 60deg 120deg,
      #ff2c2c 120deg 180deg,
      #c01dff 180deg 240deg,
      #1f7eff 240deg 300deg,
      #00b85e 300deg 360deg);
  border-radius: 50%;
  position: relative;
}
.logo-cnbc .peacock::after {
  content: ''; position: absolute; inset: 35%;
  background: var(--bg-0); border-radius: 50%;
}
.logo-cnbc span {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 1.45rem; letter-spacing: -0.02em;
  color: #ffffff;
}

/* Sky News */
.logo-sky {
  gap: 6px;
}
.logo-sky .sky-box {
  background: #C8102E;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 900; font-size: 1rem; letter-spacing: -0.02em;
  padding: 6px 9px; border-radius: 4px;
  line-height: 1;
}
.logo-sky span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  color: #ffffff; text-transform: lowercase;
}

/* Entrepreneur */
.logo-entrepreneur span {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic; font-size: 1.6rem; letter-spacing: -0.01em;
  color: #ffffff;
}

/* CNN — bold red blocky */
.logo-cnn span {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 1.7rem; letter-spacing: -0.04em;
  color: #CC0000;
  background: #fff;
  padding: 4px 10px; border-radius: 4px;
  font-style: italic;
  -webkit-text-stroke: 0.5px #CC0000;
}

/* Al Jazeera — golden flame style */
.logo-aljazeera .aj-en {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic;
  font-size: 1.7rem; letter-spacing: -0.01em;
  background: linear-gradient(135deg, #d4a017 0%, #f0c040 50%, #d4a017 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(212, 160, 23, 0.25);
}

/* Al Arabiya — orange with bar */
.logo-alarabiya {
  gap: 8px;
}
.logo-alarabiya .aar-bar {
  width: 4px; height: 26px;
  background: linear-gradient(180deg, #f5a623, #d97700);
  border-radius: 2px;
  display: inline-block;
}
.logo-alarabiya span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em;
  color: #f5a623;
}

/* AlAraby TV — distinctive A monogram */
.logo-alaraby {
  gap: 8px;
}
.logo-alaraby .alaraby-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-style: normal;
  font-size: 1rem; color: #fff;
  background: #B0163E;
  border-radius: 4px;
  line-height: 1;
}
.logo-alaraby span {
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em;
  color: #ffffff;
}

/* Al Mamlaka — clean modern */
.logo-mamlaka {
  gap: 8px;
}
.logo-mamlaka .mam-mark {
  width: 22px; height: 22px;
  background:
    linear-gradient(45deg, transparent 45%, #d4a017 45%, #d4a017 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #d4a017 45%, #d4a017 55%, transparent 55%),
    #2a2a2a;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.logo-mamlaka .mam-mark::after {
  content: ''; position: absolute; inset: 4px;
  border: 1.5px solid #d4a017; border-radius: 50%;
}
.logo-mamlaka span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em;
  color: #d4a017;
}

/* Jordan TV / JRTV — Jordan flag colors */
.logo-jrtv {
  gap: 8px;
}
.logo-jrtv .jrtv-flag {
  width: 22px; height: 22px;
  display: inline-block;
  background:
    linear-gradient(0deg,
      #007A3D 0%, #007A3D 33.3%,
      #ffffff 33.3%, #ffffff 66.6%,
      #000000 66.6%, #000000 100%);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}
.logo-jrtv .jrtv-flag::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 11px;
  border-color: transparent transparent transparent #CE1126;
}
.logo-jrtv span {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
  color: #ffffff;
}

/* Roya TV — bold blue + tv badge */
.logo-roya {
  gap: 4px; align-items: baseline;
}
.logo-roya .roya-en {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 1.5rem; letter-spacing: -0.05em;
  color: #1AA0E2;
  text-transform: lowercase;
}
.logo-roya .roya-tv {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.05em;
  color: #fff;
  background: #1AA0E2;
  padding: 3px 6px; border-radius: 3px;
  text-transform: uppercase;
  line-height: 1;
}

/* Sky News Arabia — Sky red box + bold sans + Arabia */
.logo-skyarabia { gap: 6px; }
.logo-skyarabia .sky-box {
  background: #C8102E; color: #fff;
  font-family: 'Inter', sans-serif; font-style: normal;
  font-weight: 900; font-size: 1rem; letter-spacing: -0.02em;
  padding: 6px 9px; border-radius: 4px; line-height: 1;
}
.logo-skyarabia span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.005em;
  color: #ffffff; text-transform: lowercase;
}

/* Asharq Bloomberg — Arabic + tag */
.logo-asharq {
  flex-direction: column; align-items: flex-start; gap: 1px;
}
.logo-asharq .asharq-mark {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-size: 1.35rem;
  color: #FA8334; line-height: 1;
}
.logo-asharq .asharq-tag {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.18em;
  color: #FA8334; text-transform: uppercase;
}

/* Dubai TV — Dubai Media Inc. style */
.logo-dubai { gap: 8px; }
.logo-dubai .dubai-mark {
  width: 24px; height: 24px;
  background:
    radial-gradient(circle at 30% 30%, #00bfff, #003e7e);
  border-radius: 50%;
  position: relative; display: inline-block;
}
.logo-dubai .dubai-mark::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1px; background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff;
}
.logo-dubai span {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em;
  color: #ffffff;
}

/* MBC — bold red gradient lowercase */
.logo-mbc .mbc-mark {
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-style: normal; font-size: 1.7rem; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ff5252, #c40000);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
  text-transform: lowercase;
}

/* Al Hurra — distinctive H mark */
.logo-alhurra { gap: 8px; }
.logo-alhurra .hurra-mark {
  width: 26px; height: 26px;
  display: inline-block; position: relative;
  background: linear-gradient(135deg, #00aaff, #0066cc);
  border-radius: 4px;
}
.logo-alhurra .hurra-mark::before {
  content: 'H'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900; font-size: 0.95rem; color: #fff;
  font-style: normal;
}
.logo-alhurra span {
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.005em;
  color: #00aaff;
}

.press-blurb {
  text-align: center;
  font-family: var(--ff-body);
  font-size: 0.95rem; line-height: 1.65; color: var(--ink-dim);
  max-width: 720px; margin: 36px auto 0;
}
.press-blurb em { color: var(--ink); }

@media (max-width: 700px) {
  .press-section { padding: 60px 6vw 30px; }
  .press-title { font-size: 1.1rem; margin-bottom: 30px; }
  .press-row { gap: 32px; padding-right: 32px; }
  .press-logo { height: 28px; }
}

/* ====================================================
   FLIPPING CLASSY BOARD — "Dr. Rami · In Motion"
   3D card-flip wall. Hover to flip front→back; click to lock.
   Ambient auto-flip rotates one card every 2.5s.
   ==================================================== */
.flipboard-section { padding-bottom: 140px; }

.flipboard {
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  perspective: 2400px;
  max-width: 1600px;
}
@media (max-width: 1400px) { .flipboard { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .flipboard { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .flipboard { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .flipboard { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.fb-card {
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  perspective: 2400px;
  opacity: 0;
  transform: translateY(40px);
  animation: fbReveal 1s var(--ease-out) forwards;
  will-change: transform, opacity;
}
@keyframes fbReveal {
  to { opacity: 1; transform: translateY(0); }
}

.fb-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-out);
  border-radius: var(--radius-lg);
}

/* Hover or click flips the card */
.fb-card:hover .fb-inner,
.fb-card.flipped .fb-inner,
.fb-card.auto-flipped .fb-inner {
  transform: rotateY(180deg);
}

/* Re-anchor card lift on hover */
.fb-card:hover {
  z-index: 5;
  transform: translateY(-6px) scale(1.02);
}

.fb-front, .fb-back {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--stroke-2);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6),
              0 0 30px rgba(43,108,255,0.06);
}

/* ----- FRONT ----- */
.fb-front {
  background: linear-gradient(160deg, #0a1430, #06091c);
}
.fb-front img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 1s var(--ease);
  display: block;
}
.fb-card:hover .fb-front img {
  transform: scale(1.06);
}
.fb-front-tag {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(4, 6, 15, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--stroke-3);
  border-radius: 999px;
  z-index: 2;
  font-family: var(--ff-mono);
  font-size: 0.66rem; letter-spacing: 0.22em; color: var(--ink);
}
.fb-corner {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.fb-front .fb-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%),
    linear-gradient(0deg, rgba(4,6,15,0.45) 0%, transparent 40%),
    radial-gradient(circle at 20% 8%, rgba(43,108,255,0.15), transparent 40%);
}
.fb-front.fb-noimg::before {
  content: 'DR. RAMI SHAHEEN';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--ff-mono); color: var(--ink-low);
  font-size: 0.7rem; letter-spacing: 0.3em;
}

/* ----- BACK ----- */
.fb-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(43,108,255,0.18), transparent 55%),
    linear-gradient(160deg, #061029 0%, #03060f 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 20px;
  text-align: left;
}
.fb-back::before {
  content: ''; position: absolute; inset: 1px; border-radius: inherit;
  border: 1px solid rgba(43,108,255,0.25); pointer-events: none;
}
.fb-back-num {
  font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.3em;
  color: var(--accent);
}
.fb-back-title {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.08rem;
  color: var(--ink); line-height: 1.25; letter-spacing: -0.015em;
  margin: 12px 0;
}
.fb-back-meta {
  font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.32em;
  color: var(--ink-dim); padding-top: 12px;
  border-top: 1px solid rgba(43,108,255,0.15);
}
.fb-back-decoration {
  display: flex; gap: 6px; margin-top: 10px;
}
.fb-back-decoration span {
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.6;
}
.fb-back-decoration span:nth-child(2) { width: 14px; }
.fb-back-decoration span:nth-child(3) { width: 6px; }
.fb-back-foot {
  font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.3em;
  color: var(--ink-low); text-align: right;
}

/* Auto-flipped accent — adds a glowing border ping */
.fb-card.auto-flipped .fb-inner::after {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--accent);
  box-shadow: 0 0 26px rgba(0, 212, 255, 0.45);
  animation: fbPing 2.5s ease-out;
  pointer-events: none;
}
@keyframes fbPing {
  0%   { opacity: 0.7; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* ====================================================
   TOP-BAR DUAL CTA (Ask for Bio + Book Session)
   ==================================================== */
.topbar-ctas { display: flex; gap: 10px; align-items: center; }
.cta-bio {
  background: linear-gradient(135deg, rgba(43,108,255,0.15), rgba(0,212,255,0.10));
  border-color: rgba(0,212,255,0.4);
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.cta-bio:hover {
  background: var(--grad-hero);
  color: #04081a;
  border-color: transparent;
}

.cta-ai {
  background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(43,108,255,0.10));
  border-color: rgba(43,108,255,0.5);
  color: var(--accent-s);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cta-ai::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% 200%;
  animation: aiBorder 4s linear infinite;
  z-index: -1; opacity: 0.4;
}
@keyframes aiBorder {
  to { background-position: 200% 0; }
}
.cta-ai:hover {
  background: var(--grad-hero);
  color: #04081a;
  border-color: transparent;
}

/* AI avatar variant */
.ai-avatar {
  background: linear-gradient(135deg, var(--accent), var(--primary)) !important;
}
@media (max-width: 900px) {
  /* Hide only the Book-a-Session anchor — keep modal CTAs visible */
  .topbar-ctas a.cta-mini { display: none; }
  .topbar-ctas .cta-mini { padding: 8px 12px; font-size: 0.72rem; }
}
@media (max-width: 600px) {
  .topbar-ctas .cta-mini { padding: 7px 10px; font-size: 0.66rem; }
  .topbar-ctas .cta-mini svg { display: none; }
}

/* ====================================================
   BIO-BOT MODAL — chat-style profile writer
   ==================================================== */
.biobot-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  padding: 5vh 5vw;
  background: rgba(2, 4, 10, 0.85);
  backdrop-filter: blur(8px);
}
.biobot-modal[aria-hidden="false"] { display: grid; animation: fadeIn 0.35s; }

.biobot-shell {
  width: 100%; max-width: 720px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(8,12,30,0.96), rgba(4,6,15,0.98));
  border: 1px solid rgba(0,212,255,0.35);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.85),
              0 0 80px rgba(43,108,255,0.18);
}

.biobot-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(160deg, rgba(43,108,255,0.10), transparent);
}
.biobot-avatar {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--grad-hero);
  border-radius: 12px;
  color: #04081a;
  flex-shrink: 0;
}
.biobot-avatar svg { width: 26px; height: 26px; }
.biobot-pulse {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #00ff88; box-shadow: 0 0 0 2px var(--bg-0);
  animation: bbPulse 2s ease-in-out infinite;
}
@keyframes bbPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 0 rgba(0,255,136,0.6); }
  50%      { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 8px rgba(0,255,136,0); }
}

.biobot-id { flex: 1; min-width: 0; }
.biobot-id h3 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ink);
}
.biobot-id small {
  display: block; margin-top: 2px;
  font-family: var(--ff-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; color: var(--ink-dim);
}
.biobot-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--stroke-2);
  background: rgba(244,246,251,0.04);
  color: var(--ink); font-size: 1.4rem; line-height: 1;
  cursor: pointer; transition: all 0.2s;
}
.biobot-close:hover {
  background: rgba(255,82,82,0.15); border-color: rgba(255,82,82,0.5);
  color: #ff8888;
}

.biobot-thread {
  flex: 1; overflow-y: auto;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.bb-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-family: var(--ff-body);
  font-size: 0.95rem; line-height: 1.55;
  color: var(--ink);
  word-wrap: break-word;
}
.bb-bot {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(43,108,255,0.12), rgba(0,212,255,0.06));
  border: 1px solid rgba(43,108,255,0.25);
  border-bottom-left-radius: 4px;
}
.bb-user {
  align-self: flex-end;
  background: var(--grad-hero); color: #04081a; font-weight: 500;
  border-bottom-right-radius: 4px;
}
.bb-caret { color: var(--accent); animation: blink 0.9s step-end infinite; }
.bb-bio { max-width: 100%; padding: 18px; background: rgba(4,6,15,0.6); border: 1px solid var(--stroke-2); }
.bb-pre {
  margin: 0; padding: 0;
  font-family: var(--ff-mono); font-size: 0.78rem; line-height: 1.55;
  color: var(--ink); white-space: pre-wrap; word-wrap: break-word;
}

.biobot-input {
  border-top: 1px solid var(--stroke);
  padding: 14px 18px;
  background: rgba(4,6,15,0.6);
}
.biobot-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.bb-quick {
  padding: 6px 12px;
  border: 1px solid var(--stroke-2);
  background: rgba(43,108,255,0.06);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  cursor: pointer; transition: all 0.2s;
}
.bb-quick:hover { background: var(--accent); color: #04081a; border-color: transparent; }
#biobotForm {
  display: flex; gap: 8px; align-items: center;
}
#biobotInput {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--stroke-2);
  background: rgba(4,6,15,0.6);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--ff-body); font-size: 0.95rem;
  outline: none;
}
#biobotInput:focus { border-color: var(--accent); }
.biobot-send {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 0;
  background: var(--grad-hero);
  color: #04081a; cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.2s;
}
.biobot-send:hover { transform: translateX(2px); }

.biobot-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--stroke);
  background: rgba(4,6,15,0.6);
}

/* ====================================================
   CLIENTS · SUCCESS STORIES
   ==================================================== */
.clients-section { padding-bottom: 80px; }
.clients-featured {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 50px auto 60px;
  max-width: 1100px;
}
@media (max-width: 900px) { .clients-featured { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .clients-featured { grid-template-columns: repeat(2, 1fr); } }

.cf-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 20px 14px;
  border: 1px solid var(--stroke-2);
  background: rgba(244,246,251,0.03);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  min-height: 86px;
  transition: all 0.4s var(--ease);
}
.cf-card:hover {
  border-color: var(--accent);
  background: rgba(0,212,255,0.06);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(0,212,255,0.4);
}
.cf-card .cf-w {
  font-family: var(--ff-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: 1.1rem;
  color: var(--ink);
}
.cf-card i {
  font-style: normal;
  font-family: var(--ff-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; color: var(--ink-dim);
  text-transform: uppercase;
}

/* Brand-tinted hero clients */
.cf-tesla     .cf-w { color: #E31937; }
.cf-google    .cf-w { background: linear-gradient(90deg, #4285F4 0%, #EA4335 33%, #FBBC04 66%, #34A853 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-baykar    .cf-w { color: #C8102E; letter-spacing: 0.05em; }
.cf-svic      .cf-w { color: #00A6FF; }
.cf-mds       .cf-w { color: #00B5E2; }
.cf-incorta   .cf-w { color: #6E45E2; }
.cf-tedx      .cf-w { color: #E62B1E; font-style: italic; }
.cf-nvidia    .cf-w { color: #76B900; }
.cf-oracle    .cf-w { color: #C74634; }
.cf-stanford  .cf-w { color: #8C1515; font-family: 'Instrument Serif', serif; font-size: 1.3rem; }

/* Categorised client strips */
.clients-block { margin: 30px auto; max-width: 1200px; }
.cb-label {
  font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.32em;
  color: var(--accent); text-transform: uppercase;
  margin: 0 0 14px 4px;
  padding-left: 20px;
  position: relative;
}
.cb-label::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.cb-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  background: rgba(244,246,251,0.02);
  border-radius: 12px;
}
.cb-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--stroke-2);
  background: rgba(43,108,255,0.05);
  border-radius: 999px;
  font-family: var(--ff-display); font-weight: 500;
  font-size: 0.82rem; letter-spacing: -0.005em;
  color: var(--ink);
  transition: all 0.25s var(--ease);
}
.cb-chip:hover {
  background: var(--grad-hero); color: #04081a;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0,212,255,0.5);
}

.clients-disclaimer {
  text-align: center;
  margin: 50px auto 0; max-width: 760px;
  font-family: var(--ff-body); font-size: 0.95rem; line-height: 1.6;
  color: var(--ink-dim);
  padding: 22px 28px;
  border: 1px dashed var(--stroke-2);
  border-radius: 14px;
  background: rgba(4,6,15,0.4);
}
.cd-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad-hero);
  color: #04081a;
  font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.25em;
  font-weight: 700;
  margin-right: 10px;
  vertical-align: middle;
}
.clients-disclaimer em { color: var(--ink); }

/* TEDx cert mark */
.cm-tedx { background: rgba(230, 43, 30, 0.10); border-color: rgba(230, 43, 30, 0.35); }
.cm-tedx-x {
  font-family: 'Inter', sans-serif; font-weight: 900;
  color: #E62B1E;
}
.cm-tedx-x sup {
  font-size: 0.55em; color: #E62B1E;
  vertical-align: super; margin-left: -1px;
  letter-spacing: -0.05em;
}
.cert-featured-tedx {
  background: linear-gradient(160deg, rgba(230, 43, 30, 0.10), rgba(43, 108, 255, 0.04));
  border-color: rgba(230, 43, 30, 0.30);
}

/* ====== MOTION REDUCE ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}