/*
  Global styles

  I keep theme differences in CSS variables.
  JS only toggles a root class.
*/


/*
  Global defaults
  I keep these at the very top so mobile layout issues (especially horizontal overflow)
  are easy to debug and don't depend on component order.
*/
*{box-sizing:border-box}

/*
  Stop horizontal "wiggle" on mobile.
  body already hides overflow-x, but some browsers still allow sideways scroll unless html is clipped too.
*/
html,body{overflow-x:hidden}

:root{
  --max: 1120px;
  --radius: 18px;
  --border: rgba(255,255,255,0.12);
  --card: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.58);
  --shadow: 0 18px 60px rgba(0,0,0,0.46);
  --ease: cubic-bezier(.2,.8,.2,1);
  --bg0: #070b14;
  --bg1: #0b1220;
  --bg2: #071a22;
  --a: #4dd3ff;
  --b: #b9ff7a;
  --c: #b08cff;
  --focus: 0 0 0 3px rgba(77,211,255,0.28);
  color-scheme: dark;
}
html[data-theme="light"]{
  --border: rgba(15,23,42,0.12);
  --card: rgba(15,23,42,0.05);
  --text: rgba(15,23,42,0.95);
  --muted: rgba(15,23,42,0.72);
  --muted2: rgba(15,23,42,0.58);
  --shadow: 0 22px 60px rgba(2,6,23,0.14);
  --bg0: #f5f7ff;
  --bg1: #eef2ff;
  --bg2: #f6fbff;
  --a: #2563eb;
  --b: #16a34a;
  --c: #7c3aed;
  --focus: 0 0 0 3px rgba(37,99,235,0.20);
  color-scheme: light;
}

html.preload body{
  opacity: 0;
}

body{
  transition: opacity 180ms ease;
}

html.ui-transition body,
html.ui-transition .card,
html.ui-transition .frame,
html.ui-transition .btn,
html.ui-transition .chip,
html.ui-transition .pill,
html.ui-transition .tag,
html.ui-transition .modal{
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Light mode readability: give cards a clearer surface so text doesn't get lost */
html[data-theme="light"] .card{
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.12);
}
html[data-theme="light"] .card .muted,
html[data-theme="light"] .card p,
html[data-theme="light"] .card li,
html[data-theme="light"] .card small{
  color: rgba(15,23,42,0.78);
}
html[data-theme="light"] .tag,
html[data-theme="light"] .pill,
html[data-theme="light"] .chip{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.10);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h, 76px) + 16px); }
body{
  margin: 0;
  padding-top: var(--topbar-h, 76px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1100px 700px at 70% -10%, rgba(77,211,255,0.16), transparent 55%),
    radial-gradient(900px 680px at 10% 0%, rgba(176,140,255,0.12), transparent 55%),
    radial-gradient(900px 720px at 40% 120%, rgba(185,255,122,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
}

/* When overlays are open, lock the page scroll (especially on mobile). */
body.noScroll{
  overflow: hidden;
  touch-action: none;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; height: auto; }
button{ font: inherit; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.skip{
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  border-radius: 14px;
  z-index: 10000;
}
.skip:focus{ left: 16px; top: 16px; outline: none; box-shadow: var(--focus); }

.bg{ position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.blob{
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.65;
  transform: translateZ(0);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 55%),
              linear-gradient(135deg, rgba(77,211,255,0.85), rgba(176,140,255,0.65), rgba(185,255,122,0.55));
  mix-blend-mode: screen;
  animation: blobFloat 18s var(--ease) infinite;
}
html[data-theme="light"] .blob{ mix-blend-mode: multiply; opacity: 0.75; }
.blob.a{ left: -250px; top: -220px; animation-delay: 0s; }
.blob.b{ right: -260px; top: 60px; width: 620px; height: 620px; animation-delay: 2s; }
.blob.c{ left: 10%; bottom: -280px; width: 700px; height: 700px; opacity: 0.52; animation-delay: 4s; }

@keyframes blobFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-14px,0) scale(1.05); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

.noise{
  position: absolute;
  inset: 0;
  /*
  Subtle noise overlay
  This is an inline SVG that generates fractal noise.
  It breaks up flat gradients so the background looks less digital.
  Keeping it inline avoids an extra network request.
*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: 0.11;
  mix-blend-mode: overlay;
}

.header,
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(7,11,20,0.92), rgba(7,11,20,0.62));
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
html[data-theme="light"] .header,
html[data-theme="light"] .topbar{
  background: linear-gradient(180deg, rgba(245,247,255,0.90), rgba(245,247,255,0.65));
}
.headerRow,
.topbarRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.brand,
.topbarBrand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
}
.logo{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(77,211,255,0.95), rgba(185,255,122,0.90));
  box-shadow: 0 14px 40px rgba(77,211,255,0.18);
  position: relative;
  overflow: hidden;
}
.logo::after{
  content: "";
  position: absolute;
  inset: -45%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.60), transparent 60%);
  transform: rotate(14deg);
}
.brandText{ display: flex; flex-direction: column; gap: 1px; }
.brandText strong{ font-size: 14px; letter-spacing: 0.2px; }
.brandText span{ font-size: 12px; color: var(--muted2); }

.navDesktop{ display: none; gap: 18px; align-items: center; justify-content: center; flex: 1; }
.navLink{
  color: var(--muted);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
}
.navLink:hover{ background: rgba(255,255,255,0.08); color: var(--text); transform: translateY(-1px); }

.actions,
.topbarRight{ display: flex; align-items: center; gap: 10px; }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
  user-select: none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); }
.btn:focus{ outline: none; box-shadow: var(--focus); }
.btn.primary{
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(77,211,255,0.95), rgba(176,140,255,0.80), rgba(185,255,122,0.78));
  color: rgba(4,10,20,0.92);
  font-weight: 700;
}
html[data-theme="light"] .btn.primary{ color: rgba(255,255,255,0.95); }
.btn.ghost{ background: transparent; }
.btn.icon{ width: 44px; padding: 10px; }

.hamburger{ width: 18px; height: 2px; background: currentColor; position: relative; border-radius: 99px; }
.hamburger::before, .hamburger::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
  transform-origin: center;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

/* When the sheet is open we turn the hamburger into an X */
.menuBtn.isOpen .hamburger{ background: transparent; }
.menuBtn.isOpen .hamburger::before{
  top: 0;
  transform: rotate(45deg);
}
.menuBtn.isOpen .hamburger::after{
  top: 0;
  transform: rotate(-45deg);
}

.mobileSheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Stay below the topbar so the menu button (dots / X) remains clickable */
  top: var(--topbar-h, 56px);
  /* Menu must sit above all effects (spotlight, particles, etc.) */
  z-index: 9500;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  /* Center the panel vertically so it feels like a modal window */
  align-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
html[data-theme="light"] .mobileSheet{ background: rgba(15,23,42,0.12); }
.mobileSheet.open{ opacity: 1; pointer-events: auto; }
.mobilePanel{
  width: min(360px, 92vw);
  /* Small transition so this reads as a modal window, not a dropdown */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  box-shadow: var(--shadow);
  padding: 14px;
  max-height: calc(100vh - var(--topbar-h, 56px) - 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobileSheet.open .mobilePanel{ opacity: 1; transform: translateY(0) scale(1); }

/* Mobile menu links are a proper vertical list (avoids accidental overlap/wrapping). */
.mobileLinks{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}
.mobileLinks a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.mobileLinks a:active{ transform: scale(0.99); }

/*
  Mobile menu layout
  I keep this intentionally simple: a header row (title + close) and then a clean link list.
*/
.mobileHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.mobileHeaderTitle{ font-weight: 700; font-size: 14px; opacity: 0.85; }
.mobileLink{ display: block; padding: 12px 12px; border-radius: 14px; color: var(--text); }
.mobileLink:hover{ background: rgba(255,255,255,0.08); }
.mobileMeta{ display: grid; gap: 10px; margin-top: 12px; }

/* When the mobile menu is shown as a modal, I want it to look like the other dialogs. */
#menuModal .mobileLinks{ margin: 12px 0 0; }
#menuModal{ inset: var(--topbar-h, 56px) 0 0 0; }
#menuModal .mobileLinks a{ background: var(--cardBg); border: 1px solid var(--cardBorder); }
#menuModal .mobileLink:hover{ background: rgba(255,255,255,0.06); }
#menuModal .mobileMeta{ margin-top: 14px; }

.hero{ padding: 44px 0 22px; position: relative; z-index: 1; }
.heroGrid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: center;
}
.heroLeft{ padding-right: 12px; }
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 12px;
}
.heroTitle{
  margin: 12px 0 10px;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  min-height: 1.1em;
}
.heroTitle .btSpan{
  display: inline-block;
  will-change: transform, filter, opacity;
}
.heroSub{ margin: 0; color: var(--muted); max-width: 70ch; font-size: 15px; }
.heroCtas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }

.chips{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 16px; }
.chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 12px;
}

.card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateZ(0);
}
.pad{ padding: 18px; }

.portraitCard{ padding: 14px; }
.portrait{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.16);
}
.portrait img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(1.06) contrast(1.03); }

.stats{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.stat{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
}
.stat strong{ display:block; font-size: 13px; }
.stat span{ display:block; margin-top: 2px; font-size: 12px; color: var(--muted2); }

.section{ padding: 64px 0; scroll-margin-top: calc(var(--topbar-h, 76px) + 16px); }
.sectionHead{ display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.h2{ margin: 0; font-size: 24px; letter-spacing: -0.01em; }
.h3{ margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.sub{ margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.p{ margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.grid{ display: grid; gap: 16px; }
.grid.two{ grid-template-columns: 1.15fr 0.85fr; }
.grid.cards3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cards2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kpis{ display: grid; gap: 12px; margin-top: 2px; }
.kpi{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
}
.kpi strong{ display:block; font-size: 13px; }
.kpi span{ display:block; margin-top: 4px; font-size: 12px; color: var(--muted2); }

.projectMedia{ border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.14); }
.projectMedia img{ width: 100%; height: 210px; object-fit: cover; }
.tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  padding: 6px 10px;
  border-radius: 999px;
}
.projectBtns{ display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.skillList{ display: grid; gap: 10px; margin-top: 12px; }
.skill{
  display: flex;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  align-items: flex-start;
}
.dot{ width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--c)); margin-top: 5px; flex: 0 0 auto; }

.timeline{ display: grid; gap: 12px; margin-top: 6px; }
.tlItem{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
}
.when{ color: var(--muted2); font-size: 12px; }

.direct{ display: grid; gap: 12px; margin-top: 10px; }
.directItem{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  padding: 12px 12px;
}
.directItem strong{ display:block; font-size: 13px; }
.directItem a{ display:block; color: var(--muted); margin-top: 4px; }

.form{ display: grid; gap: 10px; margin-top: 12px; }
.input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  padding: 12px 12px;
  color: var(--text);
  font-size: 14px;
}
.input:focus{ outline: none; box-shadow: var(--focus); }

.footer{ padding: 22px 0 34px; border-top: 1px solid var(--border); color: var(--muted2); font-size: 12px; }
.footerRow{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footerLinks{ display: flex; gap: 12px; flex-wrap: wrap; }
.footerLinks a{ padding: 6px 8px; border-radius: 12px; color: var(--muted2); }
.footerLinks a:hover{ background: rgba(255,255,255,0.08); color: var(--text); }

.reveal{
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  filter: blur(4px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  backdrop-filter: blur(10px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  z-index: 9999;
  min-width: 64px;
  text-align: center;
}
html[data-theme="light"] .toast{ background: rgba(255,255,255,0.70); color: rgba(15,23,42,0.92); }
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 980px){
  .navDesktop{ display: flex; }
  .btn.icon{ display: none; }
  .mobileSheet{ display: none; }
}
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .heroLeft{ padding-right: 0; }
  .grid.two{ grid-template-columns: 1fr; }
  .grid.cards3{ grid-template-columns: 1fr; }
  .grid.cards2{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
  .projectMedia img{ height: 220px; }
  .tlItem{ grid-template-columns: 1fr; }
  .container{ width: min(var(--max), calc(100% - 28px)); }
}

@media (max-width: 640px){
  /* Make the big card boxes go edge to edge */
  .container{ width: 100%; }

  /* Keep text elements readable (slight inset), without affecting the cards */
  .headerRow,
  .heroGrid,
  .sectionHead,
  .footerInner{ padding-left: 14px; padding-right: 14px; }

  /* Hero copy should not hug the screen edge */
  .heroLeft{ padding-left: 16px; padding-right: 16px; }

  /* Mobile: remove the carousel arrow controls completely (swipe and drag still work) */
  .galleryControls{ display: none !important; }
}
@media (max-width: 420px){
  .heroTitle{ font-size: 36px; }
  .btn{ width: 100%; }
  .heroCtas{ align-items: stretch; }

  /* Carousel nav should not turn into a vertical button stack */
  .galleryControls{ display: flex; gap: 10px; margin-right: 10px; }
  .galleryControls .btn{ width: auto; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .blob{ animation: none; }
  .btn{ transition: none; }
  .reveal{ transition: none; }
}


/* Projects circular gallery */
.galleryBlock{ margin-top: 6px; }
.galleryTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.galleryHint{ color: var(--muted2); font-size: 12px; }
.circularWrap{
  transform-style: preserve-3d;

  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.circular-gallery{
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
.circular-gallery:active{ cursor: grabbing; }
.cgStage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.cgItem{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 78vw);
  height: 260px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.38);
  user-select: none;
  will-change: transform, opacity, filter;
}
.cgInner{
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.cgThumb{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(77,211,255,0.20), transparent 60%),
    radial-gradient(900px 260px at 90% 20%, rgba(176,140,255,0.16), transparent 60%),
    radial-gradient(900px 260px at 50% 120%, rgba(185,255,122,0.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.cgThumb::after{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.26), transparent 55%);
  transform: rotate(16deg);
  opacity: 0.9;
}
.cgMeta{
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
}
.cgTitle{ font-size: 14px; margin: 0; letter-spacing: -0.01em; }
.cgDesc{ margin: 6px 0 0; font-size: 12px; color: var(--muted2); }
.cgPillRow{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cgPill{
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  padding: 5px 9px;
  border-radius: 999px;
}

.cgFocus{
  outline: none;
}
.cgFocus:focus-visible{
  box-shadow: var(--focus);
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.modal.open{ display: block; }
.modalBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .modalBackdrop{ background: rgba(15,23,42,0.14); }
.modalPanel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 28px));
  max-height: min(86vh, 920px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  box-shadow: var(--shadow);
}
.modalHead{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(7,11,20,0.72), rgba(7,11,20,0.28));
  backdrop-filter: blur(16px);
}
html[data-theme="light"] .modalHead{
  background: linear-gradient(180deg, rgba(245,247,255,0.92), rgba(245,247,255,0.66));
}
.modalKicker{ font-size: 12px; color: var(--muted2); }
.modalTitle{ margin: 6px 0 0; font-size: 22px; letter-spacing: -0.01em; }

/* Keep the close button fixed in the top right corner of the modal header */
#modalClose{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#modalClose:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

#modalClose:focus-visible{
  outline: 2px solid rgba(132, 0, 255, 0.65);
  outline-offset: 2px;
}


html[data-theme="light"] #modalClose{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.14);
}

html[data-theme="light"] #modalClose:hover{
  background: rgba(15,23,42,0.10);
  border-color: rgba(15,23,42,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.xIcon{
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}
.xIcon::before, .xIcon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
  transform-origin: center;
}
.xIcon::before{ transform: translate(-50%, -50%) rotate(45deg); }
.xIcon::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.modalBody{ padding: 16px 18px 20px; }
.modalMedia{
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(0,0,0,0.14);
}
.mediaPlaceholder{
  height: 260px;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(77,211,255,0.22), transparent 60%),
    radial-gradient(900px 260px at 90% 10%, rgba(176,140,255,0.18), transparent 60%),
    radial-gradient(900px 260px at 50% 120%, rgba(185,255,122,0.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.modalCols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.modalCard{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  padding: 14px 14px;
}
.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.list li{ margin: 6px 0; }
.modalBtns{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tiny{ margin: 10px 0 0; font-size: 12px; color: var(--muted2); }

@media (max-width: 980px){
  .cgItem{ height: 250px; }
  .modalCols{ grid-template-columns: 1fr; }
  .mediaPlaceholder{ height: 220px; }
}

/* Journey clickable items */
.tlBtn{ text-align: left; width: 100%; cursor: pointer; background: transparent; }
.tlBtn .more{
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted2);
  border: 1px solid var(--border);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.tlBtn:hover .more{ filter: brightness(1.1); }

.chipBreak{display:none;}

/* Particles background */
.particles-container{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.particles-container canvas{
  width: 100%;
  height: 100%;
  display: block;
}
/* Ensure hero content is above particles */
#hero{ position: relative; }
#hero .container{ position: relative; z-index: 1; }

/* Global particles background */
.particles-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  filter: saturate(1.2) contrast(1.05);
}
.particles-bg canvas{
  width: 100%;
  height: 100%;
  display: block;
}
/* Subtle layered gradient behind particles */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(0, 200, 255, 0.12), transparent 60%),
    radial-gradient(900px 700px at 80% 25%, rgba(140, 90, 255, 0.10), transparent 55%),
    radial-gradient(1100px 900px at 60% 90%, rgba(0, 255, 180, 0.08), transparent 60%);
  pointer-events: none;
}

/* Contact grid single column when form is removed */
#contactGrid.single{
  grid-template-columns: 1fr;
  max-width: 820px;
}

.heroIdentity{ margin-top: 14px; display: grid; gap: 6px; }
.heroPerson{ font-size: 18px; letter-spacing: 0.02em; opacity: 0.92; }
.heroRole{ font-size: 13px; opacity: 0.68; letter-spacing: 0.08em; text-transform: uppercase; }
.chips{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px 12px; margin-top:16px; }
.chip{ width:100%; justify-content:center; text-align:center; }
@media (max-width:700px){ .chips{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 700px){ .chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Magic Bento */
/* Performance notes: uses CSS vars for glow, particles are absolute, spotlight is fixed and composited. */
:root{
  --bento-glow-color: 132, 0, 255;
  --bento-border: rgba(255,255,255,0.10);
  --bento-bg: rgba(8, 10, 18, 0.32);
}
.bento-section{
  position: relative;
  user-select: none;
}
.global-spotlight{
  position: fixed;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(var(--bento-glow-color), 0.15) 0%,
    rgba(var(--bento-glow-color), 0.08) 15%,
    rgba(var(--bento-glow-color), 0.04) 25%,
    rgba(var(--bento-glow-color), 0.02) 40%,
    rgba(var(--bento-glow-color), 0.01) 65%,
    transparent 70%
  );
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform, opacity, left, top;
}
.magic-bento-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--bento-border);
  background: var(--bento-bg);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 280px;
}
.magic-bento-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.32);
  border-color: rgba(255,255,255,0.16);
}
.magic-bento-card::after{
  content: "";
  position: absolute;
  inset: 0;
  padding: 6px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--bento-glow-color), calc(var(--glow-intensity) * 0.80)) 0%,
    rgba(var(--bento-glow-color), calc(var(--glow-intensity) * 0.38)) 30%,
    transparent 60%
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}
.magic-bento-card > *{
  position: relative;
  z-index: 2;
}

/* Click ripple */
.magic-bento-ripple{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle,
    rgba(var(--bento-glow-color), 0.40) 0%,
    rgba(var(--bento-glow-color), 0.20) 30%,
    transparent 70%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  animation: bentoRipple 700ms ease-out forwards;
}
@keyframes bentoRipple{
  to{ transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Particles */
.bento-particle{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--bento-glow-color), 1);
  box-shadow: 0 0 8px rgba(var(--bento-glow-color), 0.65);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translate3d(0,0,0) scale(0.6);
  animation: bentoParticleIn 260ms ease-out forwards, bentoParticleFloat 2600ms ease-in-out infinite alternate;
}
@keyframes bentoParticleIn{
  to{ opacity: 0.85; transform: translate3d(0,0,0) scale(1); }
}
@keyframes bentoParticleFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
}
@media (max-width: 768px){
  .global-spotlight{ display:none; }
}

.bento-particle{
  opacity: 0;
}
.bento-particles-on .bento-particle{
  opacity: 0.85;
}
.global-spotlight{
  left: 0;
  top: 0;
}

.magic-bento-card{
  contain: layout paint;
  will-change: transform;
}


/* Flip cards used in "Skills" section */
.flipGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .flipGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .flipGrid{ grid-template-columns: 1fr; }
}

.flipCard{
  width:100%;
  min-height: 150px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(6,0,16,0.55);
  color: inherit;
  padding: 0;
  cursor: pointer;
  perspective: 1000px;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .flipCard{
  border-color: rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
}

.flipCard:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(132,0,255,0.35);
}

.flipInner{
  display:block;
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.flipCard.isRevealed .flipInner{
  transform: rotateY(180deg);
}

.flipFace{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 16px 16px 14px;
  border-radius: 18px;
  backface-visibility: hidden;
}

/* Light theme: keep the flip interaction, but make the content readable */
html[data-theme="light"] .flipCard{
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.14);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

html[data-theme="light"] .flipFace{
  background: rgba(255,255,255,0.98);
  color: var(--text);
}

.flipFront{
  background:
    radial-gradient(600px circle at 50% 35%,
      rgba(132,0,255,0.18) 0%,
      rgba(132,0,255,0.08) 28%,
      rgba(255,255,255,0.03) 55%,
      transparent 70%),
    rgba(6,0,16,0.75);
}

html[data-theme="light"] .flipFront{
  background:
    radial-gradient(600px circle at 50% 35%,
      rgba(132,0,255,0.14) 0%,
      rgba(132,0,255,0.06) 32%,
      rgba(15,23,42,0.02) 60%,
      transparent 72%),
    rgba(255,255,255,0.98);
}

.flipBack{
  transform: rotateY(180deg);
  background:
    radial-gradient(600px circle at 30% 20%,
      rgba(77,211,255,0.14) 0%,
      rgba(176,140,255,0.10) 30%,
      transparent 65%),
    rgba(6,0,16,0.85);
}

html[data-theme="light"] .flipBack{
  background:
    radial-gradient(600px circle at 30% 20%,
      rgba(77,211,255,0.12) 0%,
      rgba(132,0,255,0.08) 30%,
      transparent 68%),
    rgba(255,255,255,0.98);
}

.flipMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.flipLabel{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.flipNr{
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.flipHint{
  font-size: 13px;
  line-height: 1.2;
  opacity: 0.8;
}

.flipTitle{
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
}

.flipText{
  display:block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.9;
}

/*
  Mobile tweaks
  The goal: no horizontal scroll, everything aligned to the screen width, and a top bar that doesn't overflow.
*/
@media (max-width: 700px){
  /* Full-bleed layout for the page container */
  .container{
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Top bar should match the rest of the layout (full width, wrapping controls) */
  .header,
  .topbar{
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9000;
  }

  html{ scroll-padding-top: var(--topbar-h, 72px); }
  body{ padding-top: var(--topbar-h, 72px); }

  .headerRow,
  .topbarRow{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: calc(14px + env(safe-area-inset-top));
    flex-wrap: nowrap; /* keep controls on one line, let the brand shrink instead */
    gap: 10px;
  }

  .actions,
  .topbarRight{
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Let the brand shrink cleanly instead of pushing controls off-screen */
  .brand{
    min-width: 0;
    flex: 1 1 auto;
  }
  .brandText{
    min-width: 0;
  }
  .brandText strong{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* In super narrow viewports, the CTA can truncate instead of causing overflow */
  #contactCta{
    max-width: 44vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Long labels (email / URLs) should wrap instead of pushing the layout sideways */
  html, body{ overflow-x: hidden; }

  .pill,
  .badge{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Buttons should not wrap text by default on mobile (wrap is what usually creates weird overflows) */
  .btn{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The mobile menu itself should never create extra width */
  .mobileSheet{ padding: 0; }
  .mobilePanel{ width: 100%; max-width: none; border-radius: 0; }
}

/* Mobile menu: slide in panel (mobile only) */
#menuModal{
  z-index: 9600;
}

/* Stronger backdrop so underlying content never competes visually */
#menuModal .modalBackdrop{
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

#menuModal .menuModalPanel{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(420px, 88vw);
  max-height: 100%;
  height: 100%;
  transform: translateX(110%);
  transition: transform 240ms var(--ease);
  border-radius: 22px 0 0 22px;
  background: rgba(7,11,20,0.98);
  border-left: 1px solid var(--border);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

html[data-theme="light"] #menuModal .menuModalPanel{
  background: rgba(245,247,255,0.98);
}

#menuModal.shown .modalBackdrop{ opacity: 1; }
#menuModal.shown .menuModalPanel{ transform: translateX(0); }

/* Safe area padding for notched devices */
#menuModal .modalHead{
  padding-top: calc(18px + env(safe-area-inset-top));
}
#menuModal .menuModalPanel{
  padding-bottom: env(safe-area-inset-bottom);
}

/* Menu close button styling (only if not already styled elsewhere) */
.iconBtn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
}
.iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.iconBtn:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

@media (prefers-reduced-motion: reduce){
  #menuModal .modalBackdrop,
  #menuModal .menuModalPanel{
    transition: none;
  }
}