/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  --white:     #ffffff;
  --white-70:  rgba(255,255,255,0.70);
  --white-30:  rgba(255,255,255,0.30);
  --white-12:  rgba(255,255,255,0.12);
  --accent:    rgba(100,175,255,0.90);
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Base ── */
html, body {
  width: 100%;
  background: #000;
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
  cursor: none;
}

/* Smooth-scroll to #about from the CTA; gentle snap to each full-height slide. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

a { color: inherit; text-decoration: none; }

/* ── Custom Cursor ── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: rgba(130,195,255,0.95);
  transition: width .15s, height .15s, opacity .15s;
}

.cursor-ring {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(100,175,255,0.45);
  transition: width .2s, height .2s, opacity .2s;
}

/* Touch / no-hover devices (phones, tablets) have no pointer to track — hide the
   custom cursor entirely and restore the native cursor. PCs with a mouse keep it. */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none; }
  html, body,
  .rec-btn, .cpu-btn, .dot, .gplus-logo-link { cursor: auto; }
}

/* ── WebGL Canvas ── */
#bh-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Hero ── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* name stays vertically centred (nav removed) */
  pointer-events: none;
  scroll-snap-align: start;
}

/* ── Nav ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* links sit right; brand is a separate fixed element */
  padding: 2rem 3rem;
  pointer-events: all;
}

/* Brand (يزيد فارس) — fixed top-right, hidden over the hero, surfaces after it.
   The fade + de-blur + slight rise reads as if it was sitting under the
   black hole and rises into view once you scroll past it. */
.brand {
  position: fixed;
  top: 1.7rem;
  right: 2.4rem;
  z-index: 50;
  font-family: 'Tajawal', var(--font);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .94);
  direction: rtl;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(7px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease, color .3s ease;
  text-shadow: 0 0 22px rgba(120, 185, 255, .30);
}
.brand.is-shown {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
}
.brand:hover { color: #cfe6ff; }

@media (max-width: 540px) {
  .brand { top: 1.2rem; right: 1.3rem; }
}

.nav-brand {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white-70);
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-30);
  transition: color .25s;
}

.nav-links a:hover { color: var(--white-70); }

/* ── Hero Center ── */
.hero-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  transform: translateY(-3vh);
  pointer-events: none;
  user-select: none;
}

/* Soft scrim behind the NAME so it stays legible over the bright disk.
   (The CTAs below rely on the WebGL lens bending light around them instead.) */
.hero-center::before {
  content: "";
  position: absolute;
  left: 50%; top: 38%;
  width: min(680px, 90vw);
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 44%, rgba(0,0,0,0) 72%);
  z-index: -1;
  pointer-events: none;
}

.hero-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25em;            /* reserve the line so layout never jumps */
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 200;
  letter-spacing: .015em;
  white-space: pre;              /* preserve the apostrophe/spacing */
  color: rgba(255,255,255,.92);
  text-shadow:
    0 2px 28px rgba(0,0,0,.55),
    0 0  50px rgba(100,165,255,.25),
    0 0 120px rgba(100,165,255,.10);
}

.type-text { white-space: pre; }

/* Blinking caret — solid while typing, blinks once finished */
.caret {
  display: inline-block;
  width: clamp(2px, .045em, 4px);
  height: 1.04em;
  margin-left: .09em;
  transform: translateY(.05em);
  background: rgba(130,195,255,.95);
  box-shadow: 0 0 14px rgba(120,185,255,.85);
  animation: caret-blink 1.05s steps(1) infinite;
}
.hero-name.is-typing .caret { animation: none; opacity: 1; }

@keyframes caret-blink {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* ── Hero CTAs ── */
.hero-cta {
  display: flex;
  gap: 1.9rem;
  margin-top: 2.3rem;
  pointer-events: all;
  opacity: 0;
  /* fade only — no movement, so the WebGL light-lens stays locked to the labels */
  transition: opacity 1s ease;
}
.hero-cta.is-visible { opacity: 1; }

/* Text-only labels in the same blue as the typing caret — no enclosure.
   The black-hole renderer bends the disk light around them (see blackhole.js). */
.cta {
  position: relative;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(130,195,255,.92);
  padding: .5rem .7rem;
  text-shadow: 0 0 18px rgba(110,180,255,.45), 0 2px 16px rgba(0,0,0,.5);
  transition: color .3s, text-shadow .3s, transform .3s, letter-spacing .3s;
}
.cta:hover,
.cta:focus-visible {
  outline: none;
  color: #d8ecff;
  text-shadow: 0 0 26px rgba(140,200,255,.7), 0 2px 16px rgba(0,0,0,.5);
  letter-spacing: .2em;
  transform: translateY(-2px);
}

@media (max-width: 540px) {
  .hero-cta { flex-direction: column; align-items: center; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .hero-cta { transition: none; }
}

/* ── Scroll Cue ── */
.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  pointer-events: none;
}

.scroll-cue span {
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--white-12);
}

.scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--white-12), transparent);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: .25; transform: scaleY(.6) translateY(-4px); }
  50%       { opacity: .9;  transform: scaleY(1)  translateY(0); }
}

/* ── Sections ── */
main {
  position: relative;
  background: #050407;          /* deep space behind the slides */
  z-index: 1;                   /* sit above the fixed black-hole canvas */
}

/* About — black "slide": centred date + title, paragraph left, photo right */
.about {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vh, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: #000;
  scroll-snap-align: start;
}

.about-slide {
  width: min(1000px, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.6rem);
}

/* Centred header */
.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}
.about-date {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #e79bff;                          /* space pink/purple */
}
.about-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: #e79bff;                          /* space pink/purple */
  text-shadow: 0 0 40px rgba(190, 110, 255, .25);
}

/* Paragraph (left) + photo (right) */
.about-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.about-text { flex: 0 1 480px; }
.about-body {
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(130, 195, 255, 0.95);        /* same blue as the hero CTAs */
}
/* highlighted orgs — same pink as the date/title */
.about-body .hl {
  color: #e79bff;
  font-weight: 500;
}

.about-photo {
  flex: 0 0 auto;
  width: clamp(240px, 34%, 360px);
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1530, #0d0a18);  /* placeholder until photo loads */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .12);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;     /* favour the face on crop */
  display: block;
}

@media (max-width: 760px) {
  .about-row { flex-direction: column; }
  .about-photo { order: -1; width: min(280px, 72%); }
}

/* ════════════════════════════════════════════════════════════════════════
   Research slide — SDAIA actuarial ML (space-pink theme)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --pink:      #e79bff;
  --pink-soft: rgba(231, 155, 255, .55);
  --pink-glow: rgba(190, 110, 255, .25);
  /* ── Research slide palette: PINK field · BLUE accent · WHITE + dark ink ──
     Text that sits directly on the pink uses a deep navy ink for contrast;
     the dark glass cards carry the blue + white we use elsewhere. */
  --rs-ink:       #15173a;                   /* deep navy: body text on pink   */
  --rs-ink-dim:   rgba(21, 23, 58, .74);
  --rs-ink-faint: rgba(21, 23, 58, .52);
  --rs-line:      rgba(21, 23, 58, .22);
  --rs-blue:      #1d3f7c;                    /* deep blue: labels/fills on pink*/
  --rs-blue-lt:   rgba(130, 195, 255, .96);   /* light blue: text on dark cards */
}

.research {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 9vh, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--pink);          /* solid pink field */
  scroll-snap-align: start;
}

.research-slide {
  width: min(1040px, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

/* Centred header — mirrors the about slide, pink accent */
.research-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
}
.research-date {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rs-blue);                 /* blue label on pink */
}
.research-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: #fff;                            /* white display title */
  text-shadow: 0 2px 30px rgba(40, 12, 48, .35);
}
.research-sub {
  max-width: 46ch;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--rs-ink-dim);
}

.research-body {
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--rs-ink);                   /* deep navy on pink */
}
.research-body .hl { color: var(--rs-blue); font-weight: 600; }

.research-note {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--rs-ink-faint);
}
.research-note em { color: var(--rs-ink-dim); font-style: normal; }

/* ── Demo shell ── */
.rec { display: flex; flex-direction: column; gap: 1.4rem; }

.rec-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.rec-btn {
  appearance: none;
  background: linear-gradient(180deg, #2b539e, #1d3f7c);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 1.8rem;
  border-radius: 999px;
  cursor: none;
  box-shadow: 0 10px 30px rgba(21, 23, 58, .35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s, box-shadow .35s, filter .25s;
}
.rec-btn:hover:not(:disabled),
.rec-btn:focus-visible:not(:disabled) {
  outline: none;
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 16px 44px rgba(21, 23, 58, .45), inset 0 1px 0 rgba(255,255,255,.25);
}
.rec-btn:disabled { opacity: .55; }

.rec-status {
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--rs-ink-dim);
}

/* ── Policyholder profile chips ── */
.rec-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.rec-profile:empty { display: none; }
.rec-profile-head {
  width: 100%;
  text-align: center;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rs-blue);
  margin-bottom: .2rem;
}
.rec-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(21, 23, 58, .22);
  background: rgba(255, 255, 255, .28);
  font-size: .8rem;
  color: var(--rs-ink);
}
.rec-chip-k {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rs-ink-faint);
}

/* ── Results ── */
.rec-results { display: flex; flex-direction: column; gap: 1.5rem; }

.rec-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.rec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.3rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(130, 195, 255, .16);
  background: linear-gradient(160deg, #131634, #0d1027);   /* deep navy glass */
  box-shadow: 0 18px 44px rgba(21, 23, 58, .4);
  overflow: hidden;
}
.rec-card--best {
  border-color: var(--pink-soft);                          /* pink ties to field */
  background: linear-gradient(160deg, #1a1d44, #101230);
  box-shadow: 0 24px 64px rgba(190, 110, 255, .4), inset 0 0 40px rgba(231, 155, 255, .07);
}
.rec-card-tag {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.rec-card--best .rec-card-tag { color: var(--pink); }
.rec-card-metal {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .02em;
  color: #fff;
}
.rec-card-meta { font-size: .78rem; color: rgba(255, 255, 255, .68); }

.rec-card-score { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; }
.rec-score-num {
  font-size: 2.1rem;
  font-weight: 200;
  color: var(--rs-blue-lt);                                /* light blue data */
}
.rec-card--best .rec-score-num { color: #fff; text-shadow: 0 0 26px var(--pink-glow); }
.rec-score-unit {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.rec-card-benefits { margin-top: .5rem; }
.rec-card-benefits > span {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.rec-card-benefits ul {
  list-style: none;
  margin-top: .45rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.rec-card-benefits li {
  font-size: .82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
  padding-left: .9rem;
  position: relative;
}
.rec-card-benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rs-blue-lt);
}

/* ── Value callout (on the pink field) ── */
.rec-lift {
  text-align: center;
  font-size: clamp(.92rem, 1.4vw, 1.08rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--rs-ink-dim);
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--rs-line);
  border-bottom: 1px solid var(--rs-line);
}
.rec-lift strong { color: var(--rs-blue); font-weight: 700; }

/* ── Ranked bars (all sampled plans) ── */
.rec-bars { display: flex; flex-direction: column; gap: .4rem; }
.rec-bar {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
}
.rec-bar-label { color: var(--rs-ink-dim); text-align: right; white-space: nowrap; }
.rec-bar-fill {
  height: 8px;
  border-radius: 6px;
  background: rgba(21, 23, 58, .30);                       /* ink on pink */
  width: var(--w);
  animation: rec-grow .65s cubic-bezier(.2,.7,.2,1) both;
}
.rec-bar.is-best  .rec-bar-fill {
  background: linear-gradient(90deg, #2b539e, #6db0ff);    /* blue highlight */
  box-shadow: 0 0 16px rgba(45, 110, 200, .55);
}
.rec-bar.is-worst .rec-bar-fill { background: rgba(21, 23, 58, .15); }
.rec-bar-val { color: var(--rs-ink-dim); font-variant-numeric: tabular-nums; }
.rec-bar.is-best .rec-bar-val { color: var(--rs-blue); font-weight: 600; }

@keyframes rec-grow { from { width: 0; } to { width: var(--w); } }

@media (max-width: 680px) {
  .rec-spotlight { grid-template-columns: 1fr; }
  .rec-bar { grid-template-columns: 92px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-bar-fill { animation: none; }
  .rec-btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Experience slide — Gaming+ (backdrop mirrors gamingplus.gg)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --gp-crimson: #ec0144;
  --gp-magenta: #cb01b6;
  --gp-gold:    #f5c76a;
}

.gplus {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 9vh, 7rem) clamp(1.2rem, 5vw, 4rem);
  scroll-snap-align: start;
  /* crimson/magenta/gold glows + line grid + dot grid over near-black */
  background-color: #0a0a13;
  background-image:
    radial-gradient(900px circle at 18% 2%,   rgba(236,1,68,0.20),   transparent 60%),
    radial-gradient(820px circle at 86% 16%,  rgba(203,1,182,0.18),  transparent 60%),
    radial-gradient(760px circle at 50% 118%, rgba(245,199,106,0.12),transparent 70%),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0),
    linear-gradient(180deg, #05060b 0%, #0b0b16 45%, #0a0a13 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 120px 100%, 4px 4px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}
/* bottom vignette to ground the slide */
.gplus::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(1200px circle at 50% 125%, rgba(0,0,0,0.85), transparent 58%);
}

/* ── Drifting crimson / purple stage lights ── */
.gplus-fx {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.gplus-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  mix-blend-mode: screen;     /* additive glow over the near-black field */
  opacity: .55;
  will-change: transform;
}
.gplus-orb--red {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(236,1,68,0.90), rgba(236,1,68,0) 68%);
  animation: gp-drift-red 26s ease-in-out infinite;
}
.gplus-orb--purple {
  width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  bottom: -14%; right: -10%;
  background: radial-gradient(circle, rgba(203,1,182,0.85), rgba(203,1,182,0) 68%);
  animation: gp-drift-purple 32s ease-in-out infinite;
}
.gplus-orb--pink {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  top: 30%; left: 42%;
  background: radial-gradient(circle, rgba(255,36,145,0.60), rgba(255,36,145,0) 70%);
  animation: gp-drift-pink 29s ease-in-out infinite;
}
@keyframes gp-drift-red {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(22vw, 16vh) scale(1.18); }
  66%      { transform: translate(8vw, 34vh)  scale(0.95); }
}
@keyframes gp-drift-purple {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-26vw, -12vh) scale(1.20); }
  70%      { transform: translate(-10vw, -30vh) scale(0.90); }
}
@keyframes gp-drift-pink {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18vw, 12vh) scale(1.25); }
}

.gplus-inner {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 3.6rem);
}

/* Centred intro paragraph at the top of the slide */
.gplus-intro {
  max-width: 72ch;
  text-align: center;
  font-size: clamp(.92rem, 1.4vw, 1.1rem);
  line-height: 1.85;
  color: var(--white-70);
}

/* logo (left) + role progression (right) */
.gplus-body {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* ── Left: logo + link ── */
.gplus-left { display: flex; flex-direction: column; gap: 1.2rem; }
.gplus-logo-link { pointer-events: auto; align-self: flex-start; cursor: none; }
.gplus-logo {
  width: clamp(190px, 24vw, 300px);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(236,1,68,0.35));
  transition: filter .3s, transform .3s;
}
.gplus-logo-link:hover .gplus-logo {
  filter: drop-shadow(0 8px 42px rgba(236,1,68,0.6));
  transform: translateY(-2px);
}
.gplus-tag {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--white-70);
  max-width: 26ch;
}
.gplus-link {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gp-crimson);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(236,1,68,0.4);
  transition: color .25s, border-color .25s;
}
.gplus-link:hover { color: #ff4d80; border-color: #ff4d80; }

/* ── Right: role progression ── */
.gplus-eyebrow {
  display: block;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gp-gold);
  margin-bottom: 1.6rem;
}
.gplus-roles {
  list-style: none;
  position: relative;
  display: flex; flex-direction: column;
  gap: 1.7rem;
}
/* vertical progression line through the step markers */
.gplus-roles::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--gp-crimson), var(--gp-magenta), transparent);
  opacity: .55;
}
.gplus-role { position: relative; padding-left: 2.6rem; }
.gplus-role-step {
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 30% 30%, rgba(236,1,68,0.95), rgba(203,1,182,0.9));
  box-shadow: 0 0 0 4px #0a0a13, 0 0 18px rgba(236,1,68,0.5);   /* mask the line + glow */
}
.gplus-role-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: #fff;
  margin-bottom: .3rem;
}
.gplus-role-text {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--white-70);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .gplus-body { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gplus-logo { transition: none; }
  .gplus-orb { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Project slide — 16-bit RISC CPU (green bit-signal theme)
   Shares the vertical-line + dot grid with Gaming+ for a smooth transition.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --cpu-green:  #39f58c;
  --cpu-green-dim: rgba(57, 245, 140, .22);
  --cpu-ink:    #0a0f0d;
}

.cpu {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 7vh, 6rem) clamp(1.2rem, 5vw, 4rem);
  scroll-snap-align: start;
  /* vertical guide lines (120px — aligned with the Gaming+ slide above) + dots */
  background-color: #060a08;
  background-image:
    linear-gradient(90deg, rgba(57,245,140,0.06) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(57,245,140,0.05) 1px, transparent 0),
    radial-gradient(1000px circle at 50% -10%, rgba(57,245,140,0.10), transparent 60%),
    linear-gradient(180deg, #05070b 0%, #070d0b 50%, #04070a 100%);
  background-size: 120px 100%, 4px 4px, 100% 100%, 100% 100%;
}
.cpu::after {   /* bottom vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(1200px circle at 50% 125%, rgba(0,0,0,0.85), transparent 58%);
}

/* ── Cross-slide bit-signals ──────────────────────────────────────────────
   A dim crimson/magenta light appears low in the Gaming+ slide and exits its
   bottom edge; on the same 120px column, half a cycle later, the bright green
   CPU signal enters the top — so the light reads as crossing the seam and
   changing colour. Both share one period + per-column delay (set in cpu.js). */
.cpu-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cpu-signal, .gplus-signal {
  position: absolute; top: 0; width: 2px; height: 132px;
  opacity: 0; will-change: transform, opacity;
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.gplus-signal {   /* Gaming+ palette, dimmer */
  background: linear-gradient(to bottom, transparent, rgba(236,1,68,.5) 55%, rgba(203,1,182,.12));
  filter: drop-shadow(0 0 4px rgba(236,1,68,.4));
  animation-name: gp-cross;
}
.cpu-signal {     /* bright green */
  background: linear-gradient(to bottom, transparent, var(--cpu-green) 70%, rgba(57,245,140,0));
  filter: drop-shadow(0 0 5px var(--cpu-green));
  animation-name: cpu-cross;
}
@keyframes gp-cross {        /* appears low in Gaming+, reaches its bottom edge at 50% */
  0%   { transform: translateY(-4vh);  opacity: 0; }
  30%  { transform: translateY(46vh);  opacity: 0; }
  38%  { opacity: .6; }
  50%  { transform: translateY(100vh); opacity: .6; }   /* exactly the seam */
  50.01%, 100% { transform: translateY(-4vh); opacity: 0; }
}
@keyframes cpu-cross {       /* enters CPU's top edge at 50% (the seam), then descends */
  0%, 49%  { transform: translateY(-2vh);  opacity: 0; }
  50%  { transform: translateY(0vh);   opacity: .95; }   /* exactly the seam */
  92%  { opacity: 1; }
  100% { transform: translateY(102vh); opacity: 0; }
}

.cpu-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}

/* ── Left: datapath + program ── */
.cpu-left { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.cpu-stage {
  border: 1px solid var(--cpu-green-dim);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10,20,16,.75), rgba(6,10,9,.8));
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 50px rgba(57,245,140,.04);
  padding: .8rem;
}
#cpu-datapath { width: 100%; height: auto; display: block; }

/* datapath blocks */
.block-box {
  fill: rgba(14, 26, 21, .9);
  stroke: rgba(57,245,140,.35);
  stroke-width: 1.4;
  transition: stroke .25s, filter .25s;
}
.block-label {
  fill: #bfeede; font-size: 10px; font-weight: 500;
  font-family: var(--font); letter-spacing: .02em;
}
.cpu-block.active .block-box {
  stroke: var(--cpu-green);
  filter: drop-shadow(0 0 7px rgba(57,245,140,.7));
}
.cpu-block.active .block-label { fill: #eafff4; }

/* datapath wires */
.wire-base { stroke: rgba(57,245,140,.16); stroke-width: 1.6; transition: stroke .2s; }
.cpu-wire.live .wire-base { stroke: rgba(57,245,140,.4); }
.wire-pulse {
  stroke: var(--cpu-green); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 12 88; stroke-dashoffset: 100; opacity: 0;
  filter: drop-shadow(0 0 4px var(--cpu-green));
}
.cpu-wire.live .wire-pulse { opacity: 1; animation: cpu-flow .85s linear infinite; }
@keyframes cpu-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ── Lower: assembly + registers/controls ── */
.cpu-lower {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
}
.cpu-asm {
  border: 1px solid var(--cpu-green-dim);
  border-radius: 12px;
  background: rgba(6, 12, 10, .75);
  overflow: hidden;
}
.cpu-asm-head {
  font-family: var(--font); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(57,245,140,.7);
  padding: .5rem .8rem; border-bottom: 1px solid var(--cpu-green-dim);
}
.cpu-asm-list {
  list-style: none; margin: 0; padding: .4rem;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: .72rem; line-height: 1.25;
  max-height: 230px; overflow: auto;
}
.cpu-asm-line {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .16rem .5rem; border-left: 2px solid transparent; border-radius: 3px;
  white-space: pre;
}
.asm-addr { color: rgba(255,255,255,.28); }
.asm-code { color: #d7f7e6; }
.asm-cmt  { color: rgba(57,245,140,.45); }
.cpu-asm-line.current {
  background: rgba(57,245,140,.14);
  border-left-color: var(--cpu-green);
}
.cpu-asm-line.current .asm-code { color: #eafff4; text-shadow: 0 0 12px rgba(57,245,140,.6); }

.cpu-side { display: flex; flex-direction: column; gap: .8rem; }
.cpu-enc {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .5rem .6rem; border-radius: 8px;
  background: rgba(57,245,140,.06); border: 1px solid rgba(57,245,140,.16);
  font-family: 'Courier New', monospace;
}
.enc-fields { font-size: .74rem; letter-spacing: .08em; color: var(--cpu-green); }
.enc-fields.enc-idle { color: rgba(255,255,255,.3); letter-spacing: .2em; }
.enc-hex { font-size: .62rem; color: rgba(255,255,255,.5); }
.cpu-regs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
}
.cpu-reg {
  display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
  padding: .28rem .5rem; border-radius: 6px;
  background: rgba(57,245,140,.05); border: 1px solid rgba(57,245,140,.12);
  font-family: 'Courier New', monospace; font-size: .72rem;
  transition: background .2s, border-color .2s;
}
.cpu-reg .reg-name { color: rgba(57,245,140,.7); }
.cpu-reg .reg-val  { color: #eafff4; font-weight: 700; }
.cpu-reg.cpu-reg--pc { grid-column: span 3; background: rgba(57,245,140,.08); }
.cpu-reg.changed {
  background: rgba(57,245,140,.25);
  border-color: var(--cpu-green);
  box-shadow: 0 0 14px rgba(57,245,140,.4);
}

/* data memory — fills with the Fibonacci values as sw runs */
.cpu-mem { display: flex; flex-direction: column; gap: .35rem; }
.cpu-mem-head {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(57,245,140,.7);
}
.cpu-memgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.cpu-memcell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: .3rem .2rem; border-radius: 6px;
  background: rgba(57,245,140,.04); border: 1px solid rgba(57,245,140,.1);
  font-family: 'Courier New', monospace;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.cpu-memcell .mem-idx { font-size: .5rem; letter-spacing: .04em; color: rgba(255,255,255,.3); }
.cpu-memcell .mem-v   { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.22); }
.cpu-memcell.filled { border-color: rgba(57,245,140,.32); background: rgba(57,245,140,.08); }
.cpu-memcell.filled .mem-v { color: #eafff4; }
.cpu-memcell.changed {
  border-color: var(--cpu-green);
  background: rgba(57,245,140,.22);
  box-shadow: 0 0 14px rgba(57,245,140,.45);
}

.cpu-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.cpu-btn {
  appearance: none; cursor: none;
  font-family: var(--font); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 999px;
  color: var(--cpu-ink); background: var(--cpu-green); border: 1px solid var(--cpu-green);
  box-shadow: 0 0 18px rgba(57,245,140,.35);
  transition: transform .2s, box-shadow .25s, background .2s, color .2s;
}
.cpu-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(57,245,140,.5); }
.cpu-btn--ghost {
  color: var(--cpu-green); background: transparent; box-shadow: none;
}
.cpu-btn--ghost:hover { background: rgba(57,245,140,.12); box-shadow: none; }
.cpu-status { font-size: .68rem; letter-spacing: .04em; color: rgba(255,255,255,.55); }

/* ── Right: prose ── */
.cpu-right { display: flex; flex-direction: column; gap: .9rem; }
.cpu-eyebrow {
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cpu-green);
}
.cpu-title {
  font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 300; letter-spacing: .03em;
  color: #fff; text-shadow: 0 0 40px rgba(57,245,140,.3);
}
.cpu-body {
  max-width: 50ch; font-size: clamp(.98rem, 1.4vw, 1.12rem);
  line-height: 1.8; color: var(--white-70);
}

@media (max-width: 900px) {
  .cpu-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cpu-lower { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cpu-wire.live .wire-pulse { animation: none; opacity: 1; stroke-dashoffset: 50; }
  .cpu-btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Research & Recognition — compact recap (baby-blue accent, starfield bg)
   ════════════════════════════════════════════════════════════════════════ */
:root { --rr-blue: #8fc3ff; }

/* Recognition + Contact sit on ONE continuous sky — a single gradient + one
   starfield spanning both, so there's no seam between them. */
.sky {
  position: relative;
  background:
    radial-gradient(1200px circle at 22% 12%, rgba(46,60,130,0.12), transparent 42%),
    radial-gradient(1100px circle at 80% 40%, rgba(95,42,116,0.11), transparent 40%),
    radial-gradient(1000px circle at 36% 82%, rgba(60,80,150,0.10), transparent 42%),
    linear-gradient(180deg, #04040c 0%, #05040f 40%, #050513 62%, #030309 100%);
}
.sky-stars {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}

/* Falling stars — the CPU slide's green bit-lights hand off at the seam and
   continue down the sky as pale shooting stars (same 120px columns + cadence). */
.sky-fall {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* Stars fall in every column, but fade out vertically as they approach the
     two text bands (Recognition ~9–41%, Contact ~64–86% of the sky) — visible at
     the CPU crossover (top), in the open gap between the slides, and at the
     bottom, gone where the text is. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 4%, transparent 9%, transparent 42%,
    #000 49%, #000 57%, transparent 63%, transparent 87%, #000 93%, #000 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 4%, transparent 9%, transparent 42%,
    #000 49%, #000 57%, transparent 63%, transparent 87%, #000 93%, #000 100%);
}
.sky-fall-star {
  position: absolute; top: 0; width: 2px; height: 92px;
  background: linear-gradient(to bottom, rgba(150,200,255,0), rgba(184,216,255,.95));
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(165,205,255,.8));
  opacity: 0; will-change: transform, opacity;
  animation-name: sky-fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes sky-fall {
  0%   { transform: translateY(-4vh);  opacity: 0; }
  3%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(205vh); opacity: 0; }
}

.rr {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 9vh, 7rem) clamp(1.2rem, 5vw, 4rem);
  scroll-snap-align: start;
  background: transparent;          /* the shared .sky shows through */
}

/* small twinkling starfield (populated by js/stars.js) */
.rr-stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rr-star {
  position: absolute; border-radius: 50%; background: #fff;
  animation-name: rr-twinkle; animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.rr-star.bright { box-shadow: 0 0 3px rgba(255,255,255,.6); }
@keyframes rr-twinkle {
  0%, 100% { opacity: var(--o, .7); }
  50%      { opacity: calc(var(--o, .7) * 0.3); }
}
.no-twinkle .rr-star { animation: none; }

.rr-inner {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.2rem);
}
.rr-head { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
.rr-eyebrow {
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--rr-blue);
}
.rr-title {
  font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 300; letter-spacing: .03em;
  color: #fff; text-shadow: 0 0 40px rgba(120,185,255,.28);
}

.rr-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

/* research experience card */
.rr-exp {
  border: 1px solid rgba(130,195,255,.18);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(16,22,40,.5), rgba(8,10,18,.55));
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  display: flex; flex-direction: column; gap: .35rem;
}
.rr-exp-role { font-size: 1.2rem; font-weight: 500; color: #fff; }
.rr-exp-org  { font-size: .85rem; color: rgba(130,195,255,.92); }
.rr-exp-date {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white-30);
}
.rr-exp-points { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.rr-exp-points li {
  position: relative; padding-left: 1.1rem;
  font-size: .9rem; line-height: 1.6; color: var(--white-70);
}
.rr-exp-points li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(130,195,255,.9); box-shadow: 0 0 8px rgba(120,185,255,.5);
}

/* honors list */
.rr-honors { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.rr-honor {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
.rr-honor:last-child { padding-bottom: 0; border-bottom: none; }
.rr-year {
  flex: 0 0 auto; min-width: 3.1rem; text-align: center; margin-top: .12rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  color: var(--rr-blue); background: rgba(130,195,255,.1);
  border: 1px solid rgba(130,195,255,.3); border-radius: 999px; padding: .26rem .5rem;
}
.rr-honor-body h3 { font-size: .95rem; font-weight: 500; color: #fff; margin-bottom: .22rem; }
.rr-honor-body p  { font-size: .82rem; line-height: 1.55; color: var(--white-70); }

@media (max-width: 820px) {
  .rr-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Left section indicator (dot-nav)
   ════════════════════════════════════════════════════════════════════════ */
.dotnav {
  position: fixed;
  left: clamp(14px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.dotnav.is-visible { opacity: 1; pointer-events: auto; }

.dot {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: none;
  --c: rgba(255,255,255,.6);
}
.dot-circle {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  background: transparent;
  transition: width .3s, height .3s, background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.dot:hover .dot-circle { border-color: var(--c); transform: scale(1.25); }
.dot.active .dot-circle {
  width: 13px; height: 13px;
  background: var(--c);
  border-color: var(--c);
  box-shadow: 0 0 12px var(--c), 0 0 4px var(--c);
}
/* label — only the active dot's name shows */
.dot-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  text-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent);
}
.dot.active .dot-label { opacity: 1; transform: none; }

@media (max-width: 600px) { .dotnav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dotnav, .dot-circle, .dot-label { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Contact slide — starfield close, blue accent
   ════════════════════════════════════════════════════════════════════════ */
.contact {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 9vh, 7rem) clamp(1.2rem, 5vw, 4rem);
  scroll-snap-align: start;
  background: transparent;          /* the shared .sky shows through */
}
.contact-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
}
.contact-eyebrow {
  font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: #8fc3ff;
}
.contact-title {
  font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 200; letter-spacing: .01em;
  color: #fff; text-shadow: 0 0 50px rgba(120,185,255,.25);
}
.contact-sub {
  max-width: 44ch; font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.7; color: var(--white-70);
}
.contact-email {
  margin-top: .6rem;
  font-size: clamp(1.15rem, 2.8vw, 1.8rem); font-weight: 300; letter-spacing: .01em;
  color: #dbeaff;
  text-shadow: 0 0 22px rgba(120,185,255,.3);
  transition: color .3s, text-shadow .3s;
}
.contact-email:hover { color: #fff; text-shadow: 0 0 32px rgba(140,200,255,.65); }
.contact-links { display: flex; gap: 1.7rem; margin-top: .9rem; }
.contact-links a {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white-30);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.contact-links a:hover { color: #8fc3ff; border-bottom-color: rgba(130,195,255,.5); }
.contact-foot {
  margin-top: 2.4rem;
  font-family: 'Tajawal', var(--font);
  font-size: .72rem; letter-spacing: .06em; color: var(--white-30);
}