/* ── Space Grotesk — Google Fonts fallback (active until Neue Machina files are placed in /fonts/) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

/* ── Neue Machina — self-hosted ── */
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Ultrabold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
img { display: block; }

/* ── Variables ── */
:root {
  --header-h: 120px;
  --page-x: 40px;

  --bg: #ffffff;
  --bg2: #f5f5f5;
  --text: #1e1e1e;
  --gray: #787878;
  --black: #000000;
  --footer-bg: #161819;

  --pill-bg: rgba(255,255,255,0.5);
  --pill-border: #e9e9e9;
  --pill-active-bg: #f7f7f9;
  --pill-active-shadow: 0 4px 12px rgba(0,0,0,0.24);
  --pill-outer-shadow: 0 4px 10px rgba(0,0,0,0.16);

  --nm: 'Neue Machina', 'Space Grotesk', system-ui, sans-serif;
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg: #0a0f1a;
  --bg2: #060c16;
  --text: #f0f0f0;
  --gray: #909090;
  --pill-bg: rgba(52, 55, 65, 0.82);
  --pill-border: rgba(110, 115, 130, 0.22);
  --pill-active-bg: #18191f;
  --pill-active-shadow: 0 2px 8px rgba(0,0,0,0.6);
  --pill-outer-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Base ── */
html { overflow-x: hidden; }
body {
  font-family: var(--sf);
  background: var(--bg);
  color: var(--text);
  transition: background 0.25s, color 0.25s;
}

/* ── Logo ── */
.logo {
  flex: 1 0 0;
  display: inline-flex;
  align-items: center;
  padding: 16px;
  color: var(--text);
}
.logo svg { width: 46px; height: 40px; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
#header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  background: transparent;
  z-index: 900;
  /* Safari: own GPU layer prevents backdrop-filter from triggering full repaints on scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 24px var(--page-x);
}

.header-center {
  flex: 1 0 0;
  display: flex;
  justify-content: center;
}
.header-right {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* Nav pill & control pill — shared container */
.nav-pill,
.pill-group {
  display: flex;
  align-items: center;
  background: var(--pill-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--pill-border);
  border-radius: 24px;
  padding: 16px;
  gap: 16px;
  box-shadow: var(--pill-outer-shadow);
  overflow: hidden;
}

/* Nav links & pill buttons — shared item */
.nav-link,
.pill-btn {
  padding: 10px;
  border-radius: 16px;
  font-family: var(--nm);
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-radius 0.15s;
}
[data-theme="dark"] .nav-link,
[data-theme="dark"] .pill-btn {
  color: #ffffff;
}

/* Active state */
.nav-link.active,
.pill-btn.active {
  background: var(--pill-active-bg);
  color: #000000;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: var(--pill-active-shadow);
}
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .pill-btn.active {
  color: #ffffff;
}

/* ═══════════════════════════════════════
   MOBILE BURGER & NAV
═══════════════════════════════════════ */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-radius: 10px;
  color: var(--text);
  flex-shrink: 0;
  margin-left: auto;
}
.burger svg {
  width: 24px;
  height: 18px;
  color: var(--text);
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* ── Full-screen mobile menu ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1050;
  flex-direction: column;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
  display: flex;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.mob-nav-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px 0;
  min-height: 56px;
  flex-shrink: 0;
}
.mob-close-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 12px;
}

.mob-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.mob-section-label {
  font-family: var(--nm);
  font-size: 18px;
  font-weight: 700;
  color: #787878;
  line-height: 1;
}
.mob-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-link {
  font-family: var(--nm);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  padding: 10px;
  border-radius: 16px;
  display: block;
}
.mobile-link.active {
  font-weight: 700;
  border-radius: 8px;
  background: #f7f7f9;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.24);
}
[data-theme="dark"] .mob-close-btn {
  color: #ffffff;
}
[data-theme="dark"] .mobile-link.active {
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}
.mob-btn-row {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.mob-choice-btn {
  font-family: var(--nm);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  padding: 10px;
  border-radius: 16px;
}
.mob-choice-btn.active {
  font-weight: 700;
  border-radius: 8px;
  background: #f7f7f9;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.24);
}
[data-theme="dark"] .mob-choice-btn.active {
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}

/* ═══════════════════════════════════════
   SOCIAL SIDEBAR
═══════════════════════════════════════ */
.social-sidebar {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 18px;
  background: var(--bg);
  border: 1.5px solid var(--pill-border);
  border-radius: 999px;
}
[data-theme="dark"] .social-sidebar {
  background: #111111;
  border-color: rgba(255,255,255,0.12);
}
.social-link {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 1;
  transition: opacity 0.15s;
}
.social-link:hover { opacity: 0.7; }
.social-link svg { width: 22px; height: 22px; }

/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
main { padding-top: var(--header-h); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  background: var(--bg);
  padding: 80px var(--page-x) 275px; /* 120px base + 107px min-height compensation + 48px overlap */
  min-height: calc(532px - var(--header-h) + var(--header-h));
  display: flex;
  align-items: flex-start;
  position: relative;
}
.hero-inner { max-width: 1200px; position: relative; z-index: 1; }
.hero-monogram {
  display: none;
  position: absolute;
  left: 0;
  bottom: -5%;
  width: 39%;
  max-width: 680px;
  pointer-events: none;
  user-select: none;
  opacity: 1;
}

.hero-name {
  font-family: var(--nm);
  font-weight: 700;
  font-size: clamp(44px, 5.8vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #253858 0%, #5079be 96%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 0% 0%, #1a3560 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, #1a3560 0%, transparent 55%),
    #03080f;
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse at 0% 0%, #1a3560 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #1a3560 0%, transparent 55%),
    #03080f;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(80px + var(--header-h));
  /* padding-bottom: 275px inherited from base .hero */
}
[data-theme="dark"] .hero-name {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
[data-theme="dark"] .hero-sub {
  color: #ffffff;
  font-weight: 300;
}
[data-theme="dark"] .hero-monogram {
  display: block;
}

.hero-sub {
  font-family: var(--sf);
  font-size: clamp(16px, 2.31vw, 40px);
  color: var(--gray);
  margin-bottom: 48px;
  font-weight: 300;
}
.hero-sub-reg {
  font-weight: 400;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(18px, 1.85vw, 32px);
  padding: clamp(12px, 1vw, 18px) clamp(28px, 2.8vw, 48px);
  border-radius: 20px;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.82; }
[data-theme="dark"] .btn-primary {
  background: #ffffff;
  color: #000000;
  border: none;
}

/* ═══════════════════════════════════════
   DARK BLOCK (About + Experience + Stack)
═══════════════════════════════════════ */
.dark-block {
  position: relative;
  background: #000000;
  overflow: hidden;
  border-radius: 56px;
  margin-top: -48px;
  margin-bottom: -48px;
  z-index: 1;
}

/* ── Dark-block inverts to white in dark mode ── */
[data-theme="dark"] .dark-block {
  background: #ffffff;
}
[data-theme="dark"] .dark-block .glow { display: none; }
[data-theme="dark"] .about-heading { color: #1e1e1e; }
[data-theme="dark"] .about-bio p { color: rgba(30,30,30,0.88); }
[data-theme="dark"] .dark-section-label { color: #1e1e1e; }
[data-theme="dark"] .exp-co { color: #ffffff; }
[data-theme="dark"] .exp-co.dim { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .exp-hline { background: #787878; }
[data-theme="dark"] .exp-dot.big { background: #ffffff; }
[data-theme="dark"] .exp-dot.small { background: #787878; }
[data-theme="dark"] .exp-dot.dim { background: #787878; }
[data-theme="dark"] .exp-ntitle { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .exp-ntitle.main { color: #ffffff; }
[data-theme="dark"] .exp-ndate { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .exp-node-info:not(.dim) .exp-ndate { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .exp-node-info.dim .exp-ntitle { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .exp-node-info.dim .exp-ndate { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .stack-card { background: #f0f0f0; }
[data-theme="dark"] .stack-card::before { color: rgba(0,0,0,0.07); }
[data-theme="dark"] .badge { background: #ffffff; color: #000000; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }

.glow {
  position: absolute;
  width: 900px;
  height: 750px;
  border-radius: 50%;
  background: #0b3b8b;
  filter: blur(220px);
  opacity: 0.65;
  pointer-events: none;
  will-change: transform;
}
.glow-a { top:  -200px; right: -200px; }
.glow-b { top:   900px; left:  -200px; }
.glow-c { bottom: 60px; right: -160px; }

/* ── About me ── */
.about { padding: 80px var(--page-x); }

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-heading {
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(44px, 4.63vw, 80px);
  line-height: 1.05;
  color: #ffffff;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-bio p {
  font-family: var(--sf);
  font-size: clamp(15px, 1.39vw, 24px);
  font-weight: 300;
  line-height: 1.65;
  color: #ffffff;
}

/* ── Experience ── */
.experience {
  padding: 60px var(--page-x) 80px;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  isolation: isolate;
  contain: layout style;
}

.dark-section-label {
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(44px, 4.63vw, 80px);
  color: #ffffff;
  margin-bottom: 48px;
}

.exp-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: calc(-1 * var(--page-x));
  margin-right: calc(-1 * var(--page-x));
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  scroll-padding-left: var(--page-x);
  padding-top: 12px;
  padding-bottom: 56px;
}
.exp-row::-webkit-scrollbar { display: none; }
/* Safari scroll performance */
.exp-row {
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.exp-ati, .exp-iqup, .exp-alabs, .exp-wakeapp {
  border-radius: 24px;
  scroll-snap-align: start;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
}

/* ── ATI Projects card ── */
.exp-ati {
  position: relative;
  flex: 0 0 420px;
  background: #2a1a00;
  padding: 40px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.exp-ati2 { flex-basis: 340px; }
.exp-blob-ati1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,165,0,0.85) 0%, transparent 60%);
  filter: blur(35px);
  left: -100px; bottom: -100px;
}
.exp-blob-ati2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(30,100,255,0.7) 0%, transparent 60%);
  filter: blur(35px);
  right: -60px; top: -60px;
}
.exp-ati-logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 180px;
  width: auto;
  object-fit: contain;
  opacity: 0.13;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

/* ── IQUP card ── */
.exp-iqup {
  position: relative;
  flex: 0 0 300px;
  background: #031525;
  padding: 40px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.exp-blob-iq1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,160,255,0.85) 0%, transparent 60%);
  filter: blur(35px);
  left: -90px; bottom: -90px;
}
.exp-blob-iq2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,220,255,0.65) 0%, transparent 60%);
  filter: blur(35px);
  right: -60px; top: -60px;
}
.exp-iqup-logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 180px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.25;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* ── Alabs card ── */
.exp-alabs {
  position: relative;
  flex: 0 0 640px;
  background: #280008;
  padding: 40px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.exp-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.exp-blob-red {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(220,20,40,0.9) 0%, transparent 60%);
  filter: blur(35px);
  left: -130px; bottom: -120px;
}
.exp-blob-blue {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(180,0,30,0.7) 0%, transparent 60%);
  filter: blur(35px);
  right: -100px; top: -120px;
}
.exp-blob-wk1 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(140,30,220,0.85) 0%, transparent 60%);
  filter: blur(35px);
  left: -80px; bottom: -80px;
}
.exp-blob-wk2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(220,20,90,0.7) 0%, transparent 60%);
  filter: blur(35px);
  right: -60px; top: -60px;
}

.exp-alabs-logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 180px;
  width: auto;
  object-fit: contain;
  opacity: 0.12;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

/* ── Wakeapp card ── */
.exp-wakeapp {
  position: relative;
  flex: 0 0 380px;
  background: #190830;
  padding: 40px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.exp-w-mark {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 180px;
  width: auto;
  user-select: none;
  pointer-events: none;
  display: block;
}

.exp-co {
  font-family: var(--nm);
  font-weight: 700;
  font-size: 40px;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.exp-co.dim { color: rgba(255,255,255,0.45); }

/* Horizontal timeline row */
.exp-timeline {
  display: flex;
  align-items: flex-start;
  position: absolute;
  top: calc(40% - 30px);
  left: 0;
  right: 0;
  z-index: 1;
}
.exp-hline-edge { flex: 1; }
.exp-hline.exp-hline-edge { min-width: 40px; }
.exp-hline.exp-hline-cap { background: transparent; }

.exp-hline {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin-top: 29px;
  min-width: 16px;
}

.exp-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 120px;
  position: relative;
}
/* Fill the gap between dot right edge and node right edge with a line */
.exp-node::after {
  content: '';
  position: absolute;
  top: 29px;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
.exp-node:has(.exp-dot.big)::after { left: 40px; }
.exp-node:has(.exp-dot.small)::after { left: 20px; }

.exp-dot {
  border-radius: 50%;
  flex-shrink: 0;
}
.exp-dot.big {
  width: 40px;
  height: 40px;
  background: #ffffff;
  margin-bottom: 14px;
  margin-top: 10px;
}
.exp-dot.small {
  width: 20px;
  height: 20px;
  background: #787878;
  margin-top: 20px;
  margin-bottom: 14px;
}
.exp-dot.dim { background: #787878; }

.exp-node-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 200px;
}
.exp-ati .exp-node-info { max-width: 340px; }
.exp-node-info.dim .exp-ntitle { color: rgba(255,255,255,0.6); }
.exp-node-info.dim .exp-ndate  { color: rgba(255,255,255,0.4); }

/* No line after WakeApp's last dot */
.exp-wakeapp .exp-node::after { display: none; }

.exp-ntitle {
  font-family: var(--nm);
  font-weight: 700;
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  line-height: 1.2;
}
.exp-ntitle.main {
  font-size: 28px;
  color: #ffffff;
}
.exp-ndate {
  font-family: var(--sf);
  font-size: clamp(10px, 1.04vw, 18px);
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
  font-weight: 400;
}
.exp-node-info:not(.dim) .exp-ndate {
  font-size: clamp(11px, 1.39vw, 24px);
  color: rgba(255,255,255,0.75);
}

/* ── Stack ── */
.stack { padding: 60px var(--page-x) 80px; }

.stack-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.stack-card {
  position: relative;
  background: #1a1a1a;
  border-radius: 24px;
  padding: 40px 40px 40px 176px;
  overflow: hidden;
  min-height: 360px;
  /* Safari: own GPU layer */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.stack-card::before {
  content: attr(data-label);
  position: absolute;
  inset: 0 auto 0 0;
  width: 140px;
  display: flex;
  writing-mode: vertical-rl;
  justify-content: center;
  align-items: center;
  padding-block: 8px;
  padding-inline: 0;
  overflow: visible;
  transform: rotate(180deg);
  font-family: var(--sf);
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 700;
  color: rgba(255,255,255,0.07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
}
.badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   PAGE GLOWS (dark mode only)
═══════════════════════════════════════ */
.page-glow {
  display: none;
  position: absolute;
  width: 900px;
  height: 800px;
  border-radius: 50%;
  background: #0b3b8b;
  filter: blur(240px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .page-glow { display: block; }
/* hero stays clean black in dark mode — no glow */
[data-theme="dark"] .hero-glow-r { display: none; }
.hero-glow-r   { top: -100px; right: -220px; opacity: 0.7; }
.pg-shared-l { top: 0;      left:  -260px; }
.pg-shared-r { bottom: 0;  right: -260px; }

/* ═══════════════════════════════════════
   PROJECTS
═══════════════════════════════════════ */
.projects-contact-wrap {
  background: var(--bg);
  position: relative;
}
.projects {
  padding: 80px var(--page-x);
  position: relative;
}

.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.projects-title {
  font-family: var(--sf);
  font-weight: 500;
  font-size: clamp(44px, 4.63vw, 80px);
  color: var(--text);
}

.btn-outline {
  border: 1.5px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.btn-outline:hover { background: var(--pill-bg); }
[data-theme="dark"] .btn-outline {
  border-color: rgba(255,255,255,0.35);
  color: #ffffff;
}

.projects-rows { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }

.projects-row { display: grid; gap: 24px; }
.row-top    { grid-template-columns: 1.413fr 1fr; }
.row-bottom { grid-template-columns: 1fr 1fr; }
.row-mid    { grid-template-columns: 1.413fr 1fr; }
.row-single { grid-template-columns: 1fr; }

/* ── Project card base ── */
.project-card {
  border-radius: 32px;
  overflow: hidden;
  min-height: 595px;
  position: relative;
  background: #ffffff;
}
[data-theme="dark"] .project-card {
  background: #202020;
}

/* ── Firms-color blob layer ── */
.card-firms-color {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.card-firms-color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* All card-firms-color backgrounds now use Figma SVG images via <img> tag */

/* Brightwater tablet screenshot (landscape iPad 4:3) */
.card-screens-tablet { right: 16px; bottom: 24px; }
.screen-tablet {
  width: 340px;
  height: 255px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.screen-tablet img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Card body (content: title + desc + tags) ── */
.card-body {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card-main-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-name {
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(24px, 2.78vw, 40px);
  line-height: 1.05;
  color: #000000;
}
[data-theme="dark"] .card-name { color: #ffffff; }

.card-desc {
  font-family: var(--sf);
  font-size: clamp(13px, 1.39vw, 20px);
  line-height: 1.45;
  color: #000000;
  opacity: 0.75;
}
[data-theme="dark"] .card-desc { color: #ffffff; opacity: 0.8; }

/* ── Tags ── */
.card-tags { display: flex; flex-wrap: wrap; gap: 9px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 24px;
  padding: 4px 12px;
  font-family: var(--sf);
  font-size: clamp(14px, 1.04vw, 18px);
  font-weight: 300;
  color: #000000;
  height: 38px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(101,45,134,0.08);
}
[data-theme="dark"] .tag {
  background: #000000;
  border-color: #ffffff;
  color: #ffffff;
}

/* Store link tags — look identical to span.tag but are clickable */
a.tag {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.tag:hover {
  opacity: 0.75;
  transform: scale(1.04);
}

.tag-market-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
/* SVG icons are loaded as <img> — CSS vars don't cross that boundary.
   Invert the black stroke to white in dark mode instead. */
[data-theme="dark"] .tag-market-icon {
  filter: brightness(0) invert(1);
}

/* ── Phone screens ── */
.card-screens {
  position: absolute;
  right: 16px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  z-index: 1;
}
.screen-behind {
  width: 235px;
  height: 254px;
  overflow: hidden;
  margin-right: -70px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.screen-front {
  width: 274px;
  height: 325px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
/* Tablet (landscape) used as the behind screen — wider, shorter */
.screen-behind.screen-tablet-behind {
  width: 300px;
  height: 200px;
  margin-right: -90px;
  border-radius: 16px 16px 0 0 !important;
}
.screen-behind.screen-tablet-behind img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.screen-behind.screen-tablet-behind::after {
  border-radius: 16px 16px 0 0 !important;
}
.screen-behind.screen-tablet-behind::before { display: none; }

/* pscreen tablet-behind for projects.html */
.pscreen-behind.pscreen-tablet-behind {
  width: 360px;
  height: 240px;
  margin-right: -110px;
  border-radius: 16px 16px 0 0 !important;
}
.pscreen-behind.pscreen-tablet-behind img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.pscreen-behind.pscreen-tablet-behind::after {
  border-radius: 16px 16px 0 0 !important;
}
.pscreen-behind.pscreen-tablet-behind::before { display: none; }

.screen-behind img,
.screen-front img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── CSS Phone Frame (for raw screenshots without baked-in bezel) ──
   Rounded on top only — bottom is clipped flush by card overflow:hidden  */
.screen-with-frame {
  border-radius: 32px 32px 0 0 !important;
  overflow: hidden;
  position: relative;
}
.screen-with-frame img {
  border-radius: 0;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* Bezel border overlay */
.screen-with-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px 32px 0 0;
  border: 7px solid rgba(22,22,22,0.92);
  border-bottom: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  z-index: 10;
  pointer-events: none;
}
/* Dynamic Island — hidden */
.screen-with-frame::before { content: none; }
.screen-behind.screen-with-frame::before { content: none; }
/* Tablet frame: iPad proportions, no dynamic island */
.screen-tablet.screen-with-frame {
  border-radius: 20px 20px 0 0 !important;
}
.screen-tablet.screen-with-frame::after {
  border-radius: 20px 20px 0 0;
}
.screen-tablet.screen-with-frame::before {
  display: none; display: none; }

/* Same frame rules for projects.html pscreen elements */
.pscreen-with-frame {
  border-radius: 32px 32px 0 0 !important;
  overflow: hidden;
  position: relative;
}
.pscreen-with-frame img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.pscreen-with-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px 32px 0 0;
  border: 7px solid rgba(22,22,22,0.92);
  border-bottom: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  z-index: 10;
  pointer-events: none;
}
.pscreen-with-frame::before { content: none; }
.pscreen-behind.pscreen-with-frame::before { content: none; }
.pscreen-tablet.pscreen-with-frame {
  border-radius: 20px 20px 0 0 !important;
}
.pscreen-tablet.pscreen-with-frame::after {
  border-radius: 20px 20px 0 0;
}
.pscreen-tablet.pscreen-with-frame::before {
  display: none; display: none; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact { padding: 120px var(--page-x); position: relative; }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.contact-heading {
  font-family: var(--sf);
  font-weight: 500;
  font-size: clamp(40px, 4.63vw, 80px);
  color: #1e1e1e;
  margin-bottom: 28px;
  line-height: 1.05;
}
[data-theme="dark"] .contact-heading { color: #ffffff; }

.contact-sub {
  font-family: var(--sf);
  font-size: clamp(16px, 2.31vw, 40px);
  font-weight: 400;
  color: #202020;
  line-height: 1.4;
  margin-bottom: 40px;
}
[data-theme="dark"] .contact-sub { color: rgba(255,255,255,0.75); }

.contact-links {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  color: #1e1e1e;
}
[data-theme="dark"] .contact-links {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #ffffff;
}
.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: opacity 0.15s;
}
.contact-link:hover { opacity: 0.7; }
.contact-link svg {
  width: 24px;
  height: 24px;
}

/* Form */
.form-field { margin-bottom: 16px; }

.form-label {
  display: block;
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 24px);
  color: #787878;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 18px 24px;
  background: #f2f2f2;
  border: 1px solid #787878;
  border-radius: 8px;
  font-family: var(--sf);
  font-size: clamp(15px, 1.39vw, 24px);
  font-weight: 500;
  color: #1e1e1e;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
  appearance: none;
}
.form-input:focus { background: #ebebeb; border-color: #a0a0a0; }
.form-input::placeholder { color: #a0a0a0; }
[data-theme="dark"] .form-label { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .form-input {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
}
[data-theme="dark"] .form-input::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .form-input:focus { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); }

.form-textarea { resize: vertical; min-height: 120px; }

.btn-send {
  width: 100%;
  padding: 18px 32px;
  background: #000000;
  color: #ffffff;
  font-family: var(--nm);
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 24px);
  border-radius: 16px;
  margin-top: 0;
  transition: opacity 0.2s;
}
.btn-send:hover   { opacity: 0.82; }
.btn-send:disabled { opacity: 0.45; cursor: not-allowed; }
[data-theme="dark"] .btn-send { background: #ffffff; color: #000000; }

.form-success {
  display: none;
  margin-top: 16px;
  padding: 16px 20px;
  background: #e6f4ea;
  border-radius: 12px;
  font-size: 18px;
  color: #1e7e34;
  text-align: center;
}
.form-success.show { display: block; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: #161819;
  height: 120px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--page-x);
}

.footer-inner .logo { flex: 0 0 auto; color: #ffffff; }
.footer-nav { display: flex; gap: 48px; }
.footer-link {
  font-size: 18px;
  color: #ffffff;
  transition: color 0.15s;
}
.footer-link:hover { color: #ffffff; }

.footer-langs { display: flex; gap: 24px; align-items: center; }
.footer-lang {
  font-size: 18px;
  color: #ffffff;
  transition: color 0.15s;
}
.footer-lang.active {
  color: #ffffff;
  font-weight: 500;
}
.footer-lang:hover { color: #ffffff; }

/* ═══════════════════════════════════════
   RESPONSIVE — Tablet
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --page-x: 32px; }
  .social-sidebar { display: none; }
  .about-inner    { grid-template-columns: 1fr; gap: 40px; }
  .exp-ati, .exp-iqup, .exp-alabs, .exp-wakeapp { flex: 0 0 300px; min-height: 320px; padding: 28px; }
  .stack-cards    { grid-template-columns: 1fr; }
  .row-top        { grid-template-columns: 1fr; }
  .row-bottom     { grid-template-columns: 1fr; }
  .row-mid        { grid-template-columns: 1fr; }
  .contact-inner  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — Mobile
═══════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --page-x: 16px; --header-h: 96px; }

  /* ── Prevent page-glow blobs (900px) from causing horizontal overflow ── */
  body { overflow-x: hidden; }
  .projects-contact-wrap { overflow: hidden; }

  /* ── Header becomes frosted pill ── */
  #header {
    background: transparent;
    box-shadow: none;
    height: auto;
    padding: 12px 16px;
  }
  #header.scrolled {
    background: transparent;
    box-shadow: none;
  }
  .header-inner {
    background: rgba(255,255,255,0.92);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.16);
    height: 72px;
  }
  [data-theme="dark"] .header-inner {
    background: rgba(34,37,50,0.95);
    border: 1px solid var(--pill-border);
    box-shadow: var(--pill-outer-shadow);
  }
  .header-center,
  .header-right { display: none; }
  .burger { display: flex; }
  [data-theme="dark"] .burger svg { color: #ffffff; }
  .logo { padding: 0; flex: 0 0 auto; }
  .logo svg { width: 30px; height: 26px; }

  /* ── Social sidebar ── */
  .social-sidebar { display: none; }

  /* ── Hero ── */
  .hero { padding: 90px var(--page-x) 80px; }
  .hero-name { font-size: clamp(36px, 9vw, 52px); }

  /* ── Dark-block: reduced overlap for mobile ── */
  .dark-block {
    margin-top: -24px;
    margin-bottom: -24px;
    border-radius: 32px;
  }

  /* ── Dark block sections ── */
  .about { padding: 60px var(--page-x); }
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .experience { padding: 40px var(--page-x) 60px; }
  .stack { padding: 40px var(--page-x) 60px; }
  .stack-cards { grid-template-columns: 1fr; }
  .stack-card { padding: 32px 24px 32px 120px; min-height: auto; }
  .stack-card::before { font-size: 52px; width: 100px; }
  /* ── Experience: vertical timeline stack ── */
  .exp-row {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    margin-left: calc(-1 * var(--page-x));
    margin-right: calc(-1 * var(--page-x));
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }
  .exp-row::before { display: none; }
  .exp-ati, .exp-iqup, .exp-alabs, .exp-wakeapp {
    flex: 1 1 auto;
    min-height: auto;
    padding: 24px;
    scroll-snap-align: none;
    border-radius: 24px;
    isolation: isolate;
  }
  .exp-ati2 { flex-basis: auto; }
  /* Continuous vertical line through each card */
  .exp-ati::before, .exp-iqup::before, .exp-alabs::before, .exp-wakeapp::before {
    content: '';
    position: absolute;
    left: calc(24px + 9px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: #787878;
    pointer-events: none;
  }
  .exp-row > a:first-child::before { top: var(--exp-line-start, 89px); }
  .exp-row > a:last-child::before  { bottom: var(--exp-line-end, 67px); }
  /* Company name to the right of the line */
  .exp-co {
    font-size: 28px;
    padding-left: calc(20px + 14px);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }
  .exp-timeline {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    top: auto; left: auto; right: auto;
    z-index: 1;
  }
  .exp-hline-edge { display: none; }
  .exp-node {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
  .exp-node-info {
    max-width: none;
  }
  .exp-node::after { display: none; }
  /* Normalize dot sizes so both centers align with the vertical line.
     Big dot keeps white color but matches small dot dimensions. */
  .exp-dot.big {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    margin-bottom: 0;
  }
  .exp-dot.small { margin-top: 3px; margin-bottom: 0; }
  .exp-hline {
    width: 1px;
    min-width: 1px;
    height: 24px;
    flex: 0 0 24px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 9px;
    background: transparent;
  }

  /* ── Experience: company logos ── */
  .exp-ati-logo, .exp-iqup-logo, .exp-alabs-logo, .exp-w-mark {
    height: 80px;
    right: 16px;
    bottom: 16px;
  }

  /* ── Projects — horizontal scroll carousel ── */
  .projects { padding: 60px 0 60px var(--page-x); overflow: hidden; }
  .projects-header { padding-right: var(--page-x); margin-bottom: 32px; }
  .projects-rows {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding-right: var(--page-x);
    margin-top: 0;
  }
  .projects-rows::-webkit-scrollbar { display: none; }
  .projects-row { display: contents; }
  .project-card {
    width: min(82vw, 360px);
    min-width: min(82vw, 360px);
    min-height: 480px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Tighten content on small cards */
  .card-body {
    left: 24px;
    right: 24px;
    top: 24px;
    gap: 16px;
  }
  .card-name  { font-size: clamp(20px, 5.5vw, 28px); }
  .card-desc  { font-size: clamp(11px, 3.2vw, 14px); }
  .tag        { font-size: 12px; height: 30px; padding: 2px 10px; }
  .card-screens { display: flex; }
  .screen-behind { width: 130px; height: 140px; margin-right: -55px; }
  .screen-front  { width: 155px; height: 190px; }

  /* ── Contact ── */
  .contact { padding: 60px var(--page-x); }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-links { gap: 8px; }
  .contact-link  { width: 44px; height: 44px; }

  /* ── Footer ── */
  .footer { height: auto; padding: 28px var(--page-x); }
  .footer-inner { flex-direction: column; gap: 20px; align-items: flex-start; }
  .footer-nav { flex-direction: column; gap: 12px; }
  .footer-langs { flex-direction: column; gap: 8px; align-items: flex-start; }
}