/* ============================================
   TOKENS — pastel girly-coder
   ============================================ */
:root{
  /* Color — bold modern light mode, vivid orange signature */
  --bg:            #FAFAF9;
  --bg-soft:       #F2F1EF;
  --surface:       #FFFFFF;
  --surface-tint:  #FFF1EA;
  --border:        #E7E4E0;
  --border-hi:     #FF8C5A;

  --text:          #17151D;
  --text-dim:      #6B6770;
  --text-faint:    #A6A2AB;

  --pink:          #FF5A1F;     /* primary CTA / signature orange */
  --pink-soft:     #FFE0CF;
  --pink-deep:     #D8430C;

  --lav:           #B79CE8;     /* secondary accent */
  --lav-soft:      #E4D4F7;
  --lav-dot:       rgba(23,21,29,0.10); /* single-tone bg grid, replaces multi-color blobs */

  --mint:          #5FCB9A;     /* success / status-online */
  --mint-soft:     #C8F0DC;

  --butter:        #FFD56B;     /* sparkle / highlight, used sparingly */
  --butter-soft:   #FFF0CC;

  --sky:           #8FC7F2;     /* tertiary, used in icons/illustration only */
  --sky-soft:      #DCEEFC;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --gap: 24px;

  /* Spacing scale — single source of truth for section/card rhythm */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;
  --space-5xl: 120px;

  --card: var(--surface);
  --line: var(--border);
  --font-mono: "SFMono-Regular", Consolas, monospace;

  --shadow-sm: 0 2px 8px rgba(255,90,31,0.08);
  --shadow-md: 0 12px 28px -8px rgba(255,90,31,0.18);
  --shadow-lift: 0 18px 40px -12px rgba(255,90,31,0.24);
  --shadow-glow: 0 0 0 1px rgba(255,90,31,0.15), 0 20px 48px -16px rgba(255,90,31,0.32);
  --nav-bg: rgba(255,255,255,0.85);
  --timeline-halo: 0 0 0 8px rgba(255,255,255,0.55);
  --panda-spotlight: radial-gradient(circle at 50% 62%, rgba(255,255,255,0.72) 0 24%, rgba(255,224,207,0.38) 48%, transparent 74%);
  --road: #33333d;
  --road-edge: rgba(255,255,255,0.14);
}

/* ============================================
   RESET / BASE
   ============================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
.section,.hero{ scroll-margin-top:84px; }
@media (max-width:768px){
  .section,.hero{ scroll-margin-top:64px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--pink-soft); color:var(--pink-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--lav);
  outline-offset:3px;
  border-radius:8px;
}

/* ============================================
   UTILITIES
   ============================================ */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
.section{
  padding:110px 0;
  position:relative;
}
@media (max-width:768px){
  .section{ padding:72px 0; }
}

.eyebrow{
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  background:var(--pink-soft);
  padding:6px 16px 6px 12px;
  border-radius:var(--radius-pill);
}

/* Smaller heading scale for a cleaner, less chunky layout */
.section-title{
  font-family:var(--font-display);
  font-size:clamp(32px,4.2vw,48px);
  font-weight:700;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:16px;
}
.section-sub{
  color:var(--text-dim);
  font-size:15px;
  max-width:620px;
  margin-bottom:38px;
}

.connect-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  position:relative;
}
.connect-title::before{
  content:'';
  position:absolute;
  inset:-30px -16px -22px -16px;
  z-index:-1;
  background-image:
    radial-gradient(4px 4px at 4% 14%, #FFC04D 60%, transparent 64%),
    radial-gradient(3px 3px at 94% 8%, #6C8CFF 60%, transparent 64%),
    radial-gradient(3.6px 3.6px at 82% 84%, #5FCB8C 60%, transparent 64%),
    radial-gradient(3px 3px at 10% 86%, #FF8FBE 60%, transparent 64%),
    radial-gradient(2.8px 2.8px at 48% 0%, #4FCBDC 60%, transparent 64%),
    radial-gradient(2.4px 2.4px at 60% 96%, #FFC04D 60%, transparent 64%);
  pointer-events:none;
}
.connect-script{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:1.7em;
  line-height:1;
  color:var(--pink-deep);
  transform:rotate(-5deg) translateY(3px);
  display:inline-block;
}
.connect-badge{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:0.62em;
  letter-spacing:0.01em;
  color:#fff;
  background:linear-gradient(135deg, #FF5A1F 0%, #FF8FBE 100%);
  padding:8px 20px;
  border-radius:14px;
  transform:rotate(-2deg);
  box-shadow:0 14px 26px -12px rgba(255,90,31,0.55);
}
.connect-emoji{
  font-size:0.6em;
  display:inline-block;
  animation:connectEmojiWave 2.6s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes connectEmojiWave{
  0%, 60%, 100%{ transform:rotate(8deg); }
  15%{ transform:rotate(24deg); }
  30%{ transform:rotate(0deg); }
  45%{ transform:rotate(20deg); }
}
.connect-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  box-shadow:0 8px 18px -10px rgba(0,0,0,0.18);
  animation:connectStatusPop 0.5s ease-out 0.15s both;
}
.connect-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5FCB8C;
  box-shadow:0 0 0 0 rgba(95,203,154,0.55);
  animation:connectStatusPulse 1.8s ease-out infinite;
}
@keyframes connectStatusPulse{
  0%{ box-shadow:0 0 0 0 rgba(95,203,154,0.55); }
  70%{ box-shadow:0 0 0 7px rgba(95,203,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(95,203,154,0); }
}
@keyframes connectStatusPop{
  0%{ opacity:0; transform:translateY(6px) scale(0.92); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .connect-emoji{ animation:none; }
  .connect-status-dot{ animation:none; }
  .connect-status{ animation:none; }
}

#contact{ position:relative; overflow:hidden; }
#contact::before{
  content:'';
  position:absolute;
  inset:-20% -10%;
  z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,90,31,0.16) 0, transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(108,140,255,0.16) 0, transparent 34%),
    radial-gradient(circle at 30% 85%, rgba(95,203,154,0.14) 0, transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,143,190,0.16) 0, transparent 32%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,90,31,0.1), rgba(108,140,255,0.1), rgba(95,203,154,0.1), rgba(255,143,190,0.1), rgba(255,90,31,0.1));
  animation:contactGlowDrift 22s ease-in-out infinite;
  pointer-events:none;
}
#contact > .wrap{ position:relative; z-index:1; }
@keyframes contactGlowDrift{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  50%{ transform:translate(-2.5%, 2%) rotate(10deg) scale(1.07); }
}
html[data-theme="dark"] #contact::before{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,90,31,0.22) 0, transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(108,140,255,0.22) 0, transparent 34%),
    radial-gradient(circle at 30% 85%, rgba(95,203,154,0.18) 0, transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,143,190,0.2) 0, transparent 32%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,90,31,0.14), rgba(108,140,255,0.14), rgba(95,203,154,0.14), rgba(255,143,190,0.14), rgba(255,90,31,0.14));
}
#contact::after{
  content:'';
  position:absolute;
  inset:-10% -5%;
  z-index:0;
  background-image:
    radial-gradient(3px 3px at 12% 22%, rgba(255,90,31,0.5), transparent 65%),
    radial-gradient(2.4px 2.4px at 28% 68%, rgba(108,140,255,0.5), transparent 65%),
    radial-gradient(3.4px 3.4px at 46% 12%, rgba(95,203,154,0.5), transparent 65%),
    radial-gradient(2.6px 2.6px at 62% 78%, rgba(255,143,190,0.5), transparent 65%),
    radial-gradient(2.8px 2.8px at 78% 30%, rgba(79,203,220,0.5), transparent 65%),
    radial-gradient(2.2px 2.2px at 88% 60%, rgba(255,192,77,0.5), transparent 65%),
    radial-gradient(3px 3px at 36% 90%, rgba(255,90,31,0.45), transparent 65%),
    radial-gradient(2.4px 2.4px at 95% 88%, rgba(108,140,255,0.45), transparent 65%);
  animation:contactSpecksDrift 16s linear infinite;
  pointer-events:none;
}
@keyframes contactSpecksDrift{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(-6%) rotate(360deg); }
}
/* Honeycomb backdrop behind the Connect cards: hexes are generated in JS
   (not hand-listed, since the original reference's 200+ literal polygon
   points were tuned to its own fixed canvas) and droven by GSAP. */
.connect-hexfield{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.95) 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.95) 0%, transparent 78%);
}
.connect-hex-svg{
  width:100%;
  height:100%;
  display:block;
}
.connect-hex-svg polygon{
  opacity:0;
  transform-origin:center;
}
@media (prefers-reduced-motion: reduce){
  .connect-hex-svg polygon{ opacity:var(--hex-rest-opacity, .12) !important; }
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 3px var(--mint-soft);
  flex-shrink:0;
}

.tag{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.tag.lav{ background:var(--lav-soft); color:#6B4FA0; border-color:#E4D4F7; }
.tag.mint{ background:var(--mint-soft); color:#1F7A52; border-color:#C8F0DC; }

.btn{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  border:2px solid var(--border-hi);
  background:var(--surface);
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.2s ease;
}
.btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:var(--shadow-md);
}
.btn:active{ transform:translateY(-1px) scale(0.99); }
.btn-primary{
  background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  border-color:transparent;
  color:#fff;
}
.btn-primary:hover{
  box-shadow:0 14px 32px -8px rgba(255,90,31,0.5);
}
.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text-dim);
}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.heading-reveal .section-title,
.heading-reveal .section-sub{
  opacity:0;
  translate:0 34px;
  scale:.97;
  filter:blur(8px);
  transition:
    opacity 1.3s var(--lux-ease),
    translate 1.3s var(--lux-ease),
    scale 1.3s var(--lux-ease),
    filter 1.3s var(--lux-ease);
  will-change:opacity, translate, scale, filter;
}
.heading-reveal .section-sub{
  transition-delay:.22s;
}
.heading-reveal.is-visible .section-title,
.heading-reveal.is-visible .section-sub{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  .heading-reveal .section-title,
  .heading-reveal .section-sub{
    opacity:1;
    translate:0 0;
    scale:1;
    filter:blur(0);
  }
}

/* Project + Who Am I card reveal.
   Uses independent translate/scale/filter so the scroll reveal does not
   fight each card's normal :hover transform. */
:root{
  --lux-ease:cubic-bezier(.16,1,.3,1);
  --lux-ease-soft:cubic-bezier(.22,.61,.36,1);
}
.card-reveal{
  opacity:0;
  translate:0 28px;
  scale:.975;
  filter:blur(10px);
  transition:
    opacity .82s var(--lux-ease),
    translate .82s var(--lux-ease),
    scale .82s var(--lux-ease),
    filter .82s var(--lux-ease),
    box-shadow .25s ease,
    border-color .25s ease;
  will-change:opacity, translate, scale, filter;
}
.card-reveal.dir-left{ translate:-42px 24px; }
.card-reveal.dir-right{ translate:42px 24px; }
.card-reveal.is-visible{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  .card-reveal,
  .card-reveal.dir-left,
  .card-reveal.dir-right,
  .card-reveal.is-visible{
    opacity:1;
    translate:0 0;
    scale:1;
    filter:none;
    transition:none;
  }
}

/* floaty sticker animation */
.floaty{
  animation:floatY 5s ease-in-out infinite;
}
.floaty-slow{ animation:floatY 7s ease-in-out infinite; }
.floaty-spin{ animation:floatSpin 9s linear infinite; }
@keyframes floatY{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(-3deg); }
}
@keyframes floatSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .floaty,.floaty-slow,.floaty-spin{ animation:none; }
}

/* ============================================
   AMBIENT BACKGROUND — soft blobs + sparkles
   ============================================ */
.bg-blobs{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-image:
    radial-gradient(circle, var(--lav-dot) 1.6px, transparent 1.6px);
  background-size:30px 30px;
  background-position:0 0;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, black 0%, transparent 75%);
  animation:bgDotsDrift 50s linear infinite;
}
.bg-aurora{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.bg-aurora::before,
.bg-aurora::after{
  content:'';
  position:absolute;
  width:46vmax;
  height:46vmax;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.22;
  will-change:transform;
}
.bg-aurora::before{
  top:-14vmax;
  left:-12vmax;
  background:radial-gradient(circle, rgba(255,90,31,0.9), rgba(255,90,31,0) 70%);
  animation:bgBlobDriftA 26s ease-in-out infinite;
}
.bg-aurora::after{
  bottom:-16vmax;
  right:-12vmax;
  background:radial-gradient(circle, rgba(108,140,255,0.9), rgba(108,140,255,0) 70%);
  animation:bgBlobDriftB 32s ease-in-out infinite;
}
@keyframes bgDotsDrift{
  0%{ background-position:0 0; }
  100%{ background-position:300px 300px; }
}
@keyframes bgBlobDriftA{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vw,8vh) scale(1.15); }
}
@keyframes bgBlobDriftB{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-6vw,-7vh) scale(1.12); }
}
html[data-theme="dark"] .bg-aurora::before,
html[data-theme="dark"] .bg-aurora::after{
  opacity:0.3;
}
@media (prefers-reduced-motion: reduce){
  .bg-blobs{ animation:none; }
  .bg-aurora::before, .bg-aurora::after{ animation:none; }
}

/* ============================================
   LOGO / SYMBOL - cloud circuit IP mark, no box
   ============================================ */
.logo-mark,
.logo-mark-lg{
  display:none;
}

.ip-logo{
  width:50px;
  height:50px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  position:relative;
  overflow:visible;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), filter 0.25s ease;
}
.ip-logo svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 12px 18px rgba(183,156,232,0.20));
}
.ip-logo:hover{
  transform:translateY(-2px) rotate(-2deg) scale(1.06);
  filter:drop-shadow(0 16px 22px rgba(255,90,31,0.24));
}
.ip-logo-lg{
  width:138px;
  height:138px;
  margin-bottom:28px;
}
.ip-logo-sm{
  width:30px;
  height:30px;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--pink-deep);
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-links{
  display:flex;
  gap:30px;
  font-size:15px;
  font-weight:600;
}
.nav-links a{
  color:var(--text-dim);
  transition:color 0.15s ease;
  position:relative;
}
.nav-links a:hover{ color:var(--pink-deep); }
.nav-links a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:3px;
  background:var(--pink);
  border-radius:2px;
  transition:width 0.2s ease, left 0.2s ease;
}
.nav-links a:hover::after{ width:100%; left:0; }

.nav-cta{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-toggle{
  display:none;
  background:var(--pink-soft);
  border:2px solid var(--border-hi);
  border-radius:12px;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  color:var(--pink-deep);
}

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-primary-desktop{ display:none; }
}

.mobile-menu{
  position:fixed;
  top:68px; left:0; right:0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:18px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:99;
  transform:translateY(-14px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.22s ease;
}
.mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-menu a{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--text);
  padding:8px 0;
  border-bottom:1px solid var(--border);
}

/* ============================================
   HERO
   ============================================ */
.hero{
  min-height:96vh;
  display:flex;
  align-items:center;
  padding-top:120px;
  padding-bottom:60px;
  position:relative;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:50px;
  align-items:center;
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:44px; }
}

.hero-kicker{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
  background:var(--surface);
  border:2px solid var(--border);
  padding:8px 18px 8px 12px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
}

.hero-name{
  font-family:var(--font-display);
  font-size:clamp(36px, 5.8vw, 62px);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.04;
  margin-bottom:12px;
  color:var(--text);
}
.hero-name .underline-swoosh{
  position:relative;
  display:inline-block;
  color:var(--pink-deep);
}

.hero-role{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(16px,2vw,20px);
  color:var(--lav);
  margin-bottom:22px;
  min-height:1.6em;
}
.hero-role .typed-cursor{
  display:inline-block;
  width:3px;
  background:var(--pink);
  margin-left:3px;
  border-radius:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-summary{
  font-size:17px;
  color:var(--text-dim);
  max-width:500px;
  margin-bottom:32px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:34px;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Hero visual */
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-photo-frame{
  width:100%;
  max-width:380px;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--pink-soft), var(--lav-soft));
  border:5px solid var(--surface);
  box-shadow:var(--shadow-glow);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero-photo-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--pink-deep);
  text-align:center;
  padding:24px;
}
.hero-photo-placeholder svg{ width:64px;height:64px; opacity:0.7; }
.hero-photo-placeholder span{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  opacity:0.8;
}

.hero-sticker{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow:var(--shadow-md);
}
.sticker-1{
  top:-18px; right:-10px;
  width:74px;height:74px;
  background:var(--butter-soft);
  border:3px solid var(--surface);
}
.sticker-2{
  bottom:10px; left:-26px;
  width:62px;height:62px;
  background:var(--mint-soft);
  border:3px solid var(--surface);
}
.sticker-3{
  bottom:-22px; right:30px;
  width:54px;height:54px;
  background:var(--sky-soft);
  border:3px solid var(--surface);
}
.hero-sticker svg{ width:60%; height:60%; }

@media (max-width:520px){
  .hero-photo-frame{ max-width:280px; }
  .sticker-1,.sticker-2,.sticker-3{ transform:scale(0.8); }
}

.hero-blob-frame{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.hero-blob-frame::before{
  content:'';
  position:absolute;
  inset:5%;
  border-radius:50%;
  background:linear-gradient(160deg, var(--pink), var(--pink-deep));
  box-shadow:var(--shadow-glow);
  z-index:0;
}
.hero-cutout-mask{
  position:absolute;
  inset:5%;
  z-index:1;
  width:90%;
  height:90%;
  border-radius:50%;
  overflow:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.hero-cutout-photo{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  filter:brightness(0.82) contrast(1.08) saturate(1.05);
  display:block;
}
.hero-cutout-vignette{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,16,14,0) 55%, rgba(20,16,14,0.55) 85%, rgba(20,16,14,0.78) 100%);
}
.hero-cutout-fallback{
  position:relative;
  z-index:1;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:#fff;
  text-align:center;
  padding:24px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
}
.hero-cutout-fallback svg{ width:54px; height:54px; opacity:0.85; }

.hero-role-pill{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  font-family:var(--font-display);
  font-weight:700;
  font-size:12.5px;
  color:var(--text);
  z-index:3;
  white-space:nowrap;
}
.hero-role-pill .pill-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pill-1{ top:6%; left:-8%; }
.pill-1 .pill-dot{ background:var(--pink); }
.pill-2{ bottom:10%; right:-10%; }
.pill-2 .pill-dot{ background:var(--mint); }

.hero-hire-badge{
  position:absolute;
  bottom:-2%;
  left:4%;
  width:96px;
  height:96px;
  z-index:3;
  color:var(--text);
  display:block;
  text-decoration:none;
  cursor:pointer;
}
.hero-hire-badge:hover .hire-arrow{
  transform:scale(1.08);
}
.hero-hire-badge .hire-arrow{
  transition:transform .2s ease;
}
.hero-hire-badge .hire-spin{
  width:100%;
  height:100%;
  animation:heroHireSpin 14s linear infinite;
}
.hero-hire-badge .hire-arrow{
  position:absolute;
  inset:0;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  background:var(--pink);
  border-radius:50%;
  color:#fff;
  box-shadow:var(--shadow-md);
}
@keyframes heroHireSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .hero-hire-badge .hire-spin{ animation:none; }
}

@media (max-width:520px){
  .hero-blob-frame{ max-width:280px; }
  .hero-role-pill{ font-size:11px; padding:7px 12px; }
  .pill-1{ left:-4%; }
  .pill-2{ right:-4%; }
  .hero-hire-badge{ width:74px; height:74px; }
  .hero-hire-badge .hire-arrow{ width:24px; height:24px; }
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-wrap{
  border-top:2px dashed var(--border);
  border-bottom:2px dashed var(--border);
  background:var(--bg-soft);
  padding:22px 0;
  overflow:hidden;
}
.marquee-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  color:var(--pink-deep);
  text-align:center;
  margin-bottom:14px;
}
.marquee{
  display:flex;
  width:max-content;
  animation:scroll-left 26s linear infinite;
  gap:40px;
}
@media (prefers-reduced-motion: reduce){
  .marquee{ animation:none; }
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee-item{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  color:var(--text-dim);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:9px;
}
.marquee-item::before{
  content:'✦';
  font-size:12px;
  color:var(--pink);
}

/* ============================================
   ABOUT
   ============================================ */
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:var(--gap);
  align-items:center;
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
}

.about-photo-stack{
  position:relative;
  display:flex;
  justify-content:center;
}
.about-photo-main{
  width:100%;
  max-width:340px;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  border:5px solid var(--surface);
  box-shadow:var(--shadow-lift);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transform:rotate(-3deg);
}
.about-photo-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-faint);
  text-align:center;
  padding:18px;
}
.about-photo-placeholder svg{ width:40px;height:40px; opacity:0.6; }
.about-photo-placeholder span{ font-size:12px; font-weight:600; }

/* ============================================
   PROFILE PHOTOS
   Put these files in assets/photos/:
   hero-main.jpg  -> main hero picture near the intro
   hero-2.jpg     -> Who I am main photo
   ============================================ */
.profile-photo,
.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profile-photo{ border-radius:var(--radius-lg); }
.about-img{ border-radius:inherit; }
.hero-photo-frame,
.about-photo-main{
  overflow:hidden;
}
.photo-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px;
  color:var(--pink-deep);
  font-family:var(--font-display);
  font-weight:700;
  background:linear-gradient(160deg, var(--pink-soft), var(--lav-soft));
}


.about-text p{
  color:var(--text-dim);
  font-size:16.5px;
  margin-bottom:18px;
}
.about-text p:last-child{ margin-bottom:0; }
.about-text strong{ color:var(--pink-deep); font-weight:700; }

.about-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:32px;
}
@media (max-width:600px){
  .about-stats{ grid-template-columns:repeat(2,1fr); }
}
.stat-card{
  padding:20px 16px;
  text-align:center;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.stat-card:hover{ transform:translateY(-4px) rotate(-1deg); }
.stat-num{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  color:var(--pink-deep);
  margin-bottom:4px;
}
.stat-label{
  font-size:12.5px;
  color:var(--text-dim);
  font-weight:600;
}

/* ============================================
   SKILLS (bento + tabs)
   ============================================ */
.skills-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
}
.skill-tab{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  padding:10px 20px;
  border-radius:var(--radius-pill);
  border:2px solid var(--border);
  background:var(--surface);
  color:var(--text-dim);
  transition:all 0.2s ease;
}
.skill-tab:hover{ border-color:var(--border-hi); }
.skill-tab.active{
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-sm);
}

.skills-bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-lg);
}
@media (max-width:900px){
  .skills-bento{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .skills-bento{ grid-template-columns:1fr; }
}
.skill-card{
  padding:var(--space-lg);
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease;
}
.skill-card:hover{
  transform:translateY(-5px) rotate(-1deg);
  box-shadow:var(--shadow-md);
}
.skill-card-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
}
.skill-icon{
  width:38px;height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.skill-icon svg{ width:19px;height:19px; }
.skill-card-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  letter-spacing:-0.02em;
  color:var(--text);
}
.skill-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

/* skill category color rotation */
.skill-card:nth-child(4n+1) .skill-icon{ background:var(--pink-soft); color:var(--pink-deep); }
.skill-card:nth-child(4n+2) .skill-icon{ background:var(--lav-soft); color:#6B4FA0; }
.skill-card:nth-child(4n+3) .skill-icon{ background:var(--mint-soft); color:#1F7A52; }
.skill-card:nth-child(4n+4) .skill-icon{ background:var(--sky-soft); color:#2B6FA8; }


/* ============================================
   TIMELINE - split education + work story
   ============================================ */
.timeline-story{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:10px 0 4px;
}
.timeline-story::before{
  content:'';
  position:absolute;
  top:8px;
  bottom:8px;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, var(--pink-soft), var(--lav-soft), var(--mint-soft), var(--sky-soft));
  box-shadow:var(--timeline-halo);
}
.story-step{
  display:grid;
  grid-template-columns:1fr 88px 1fr;
  gap:22px;
  align-items:center;
  margin:0 0 24px;
  position:relative;
}
.story-step:last-child{ margin-bottom:0; }
.story-dot{
  grid-column:2;
  justify-self:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--border-hi);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:var(--shadow-md);
  z-index:1;
}
.story-year{
  font-family:var(--font-display);
  font-weight:800;
  font-size:13px;
  color:var(--pink-deep);
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:999px;
  padding:7px 14px;
  display:inline-flex;
  width:max-content;
  margin-bottom:10px;
}
.story-card{
  padding:22px 24px;
  position:relative;
  transition:transform 0.24s cubic-bezier(.34,1.56,.64,1), box-shadow 0.24s ease;
}
.story-card:hover{
  transform:translateY(-5px) rotate(-0.4deg);
  box-shadow:var(--shadow-lift);
}
.story-card.left{ grid-column:1; text-align:right; }
.story-card.right{ grid-column:3; text-align:left; }
.story-type{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
  color:#6B4FA0;
  background:var(--lav-soft);
  border-radius:999px;
  padding:5px 12px;
}
.story-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
  margin-bottom:5px;
}
.story-note{
  color:var(--text-dim);
  font-size:14.5px;
}
.story-step.education .story-type{ background:var(--pink-soft); color:var(--pink-deep); }
.story-step.current .story-dot{ border-color:var(--mint); box-shadow:0 0 0 6px var(--mint-soft), var(--shadow-md); }
@media (max-width:780px){
  .timeline-story::before{ left:28px; }
  .story-step{ grid-template-columns:58px 1fr; gap:16px; }
  .story-dot{ grid-column:1; }
  .story-card.left,.story-card.right{ grid-column:2; text-align:left; }
}

/* ----- curvy road + driving car ----- */
.timeline-story.has-road::before{ display:none; }
.timeline-road{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.timeline-road-path{
  fill:none;
  stroke:var(--road);
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.2));
}
.timeline-road-edge{
  fill:none;
  stroke:var(--road-edge);
  stroke-width:19;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.timeline-road-dash{
  fill:none;
  stroke:#ffd966;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:11 15;
  opacity:0.9;
}
.timeline-car{
  position:absolute;
  top:0;
  left:0;
  width:36px;
  height:36px;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s ease;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  will-change:transform;
}
.timeline-car.is-driving{ opacity:1; }
.timeline-car svg{ display:block; width:100%; height:100%; }

.story-step{ position:relative; z-index:1; }
.story-dot{
  position:relative;
  --accent:var(--text-dim);
  color:var(--accent);
  transition:color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.story-dot svg{ width:26px; height:26px; }
.story-dot[data-accent="sky"]{ --accent:#2B6FA8; }
.story-dot[data-accent="mint"]{ --accent:#1F7A52; }
.story-dot[data-accent="lav"]{ --accent:#6B4FA0; }
.story-dot[data-accent="pink"]{ --accent:var(--pink-deep); }
.story-step.current .story-dot{ --accent:var(--mint); }

.story-card{ --accent:var(--pink-deep); }
.story-card[data-accent="sky"]{ --accent:#2B6FA8; }
.story-card[data-accent="mint"]{ --accent:#1F7A52; }
.story-card[data-accent="lav"]{ --accent:#6B4FA0; }
.story-card[data-accent="pink"]{ --accent:var(--pink-deep); }
.story-step.current .story-card{ --accent:var(--mint); }

.story-dot.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--surface), 0 0 26px 7px var(--accent), var(--shadow-md);
  animation:milestonePop 0.55s cubic-bezier(.34,1.56,.64,1);
}
.story-dot.is-active::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--accent);
  opacity:0;
  animation:milestoneRing 0.9s ease-out;
}
.story-card{
  transition:transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease;
}
.story-card.is-active{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--accent), 0 0 36px 4px var(--accent), var(--shadow-lift);
}
@keyframes milestonePop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.26); }
  100%{ transform:scale(1); }
}
@keyframes milestoneRing{
  0%{ opacity:0.85; transform:scale(0.6); }
  100%{ opacity:0; transform:scale(2); }
}
@media (prefers-reduced-motion: reduce){
  .timeline-car{ display:none; }
  .story-dot.is-active{ animation:none; }
  .story-dot.is-active::after{ animation:none; opacity:0; }
}
@media (max-width:780px){
  .timeline-road-path{ stroke-width:11; }
  .timeline-road-edge{ stroke-width:13.5; }
  .timeline-road-dash{ stroke-width:1.8; stroke-dasharray:8 11; }
  .timeline-car{ width:28px; height:28px; }
}

/* ============================================
   SKILL ORB - big background word + glass ribbon cloud
   ============================================ */
.skill-theatre{
  position:relative;
  min-height:620px;
  overflow:hidden;
  padding:34px 28px 42px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #FFFFFF 0%, #FFF7FB 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.skill-theatre::before{
  content:'';
  position:absolute;
  inset:-30%;
  z-index:0;
  background:
    radial-gradient(circle at 20% 18%, rgba(244,209,191,0.78) 0 95px, transparent 98px),
    radial-gradient(circle at 82% 14%, rgba(228,212,247,0.75) 0 108px, transparent 112px),
    radial-gradient(circle at 50% 95%, rgba(200,240,220,0.5) 0 160px, transparent 164px),
    conic-gradient(from 0deg at 50% 50%, rgba(255,90,31,0.16), rgba(205,184,255,0.18), rgba(119,230,179,0.14), rgba(255,90,31,0.16));
  animation:theatreDrift 26s ease-in-out infinite;
  pointer-events:none;
}
.skill-theatre::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 26%, rgba(23,21,29,0.24), transparent 60%),
    radial-gradient(1.1px 1.1px at 32% 62%, rgba(23,21,29,0.18), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 18%, rgba(23,21,29,0.22), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 70%, rgba(23,21,29,0.18), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 38%, rgba(23,21,29,0.22), transparent 60%),
    radial-gradient(1.1px 1.1px at 46% 84%, rgba(23,21,29,0.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(23,21,29,0.2), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(23,21,29,0.16), transparent 60%);
  opacity:0.6;
  animation:theatreTwinkle 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes theatreDrift{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  50%{ transform:translate(-2%, 1.5%) rotate(8deg) scale(1.04); }
}
@keyframes theatreTwinkle{
  0%,100%{ opacity:0.38; }
  50%{ opacity:0.72; }
}
.float-bubbles{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.float-bubble{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,90,31,0.22), rgba(255,90,31,0) 72%);
  filter:blur(1px);
  opacity:0.55;
  animation:floatBubbleDrift ease-in-out infinite;
  pointer-events:auto;
  cursor:pointer;
}
/* Splash ring sits on the same box as the bubble; stays invisible until
   a pop fires, so it adds no extra DOM nodes for the click-to-pop effect. */
.float-bubble::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.85);
  opacity:0;
  transform:scale(0.5);
  pointer-events:none;
}
.float-bubble.is-popping{
  animation:bubbleCollapse 0.28s cubic-bezier(.22,1,.36,1) forwards !important;
  pointer-events:none;
}
.float-bubble.is-popping::after{
  animation:bubbleSplash 0.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bubbleCollapse{
  0%{ transform:scale(1); opacity:0.7; filter:blur(1px); }
  100%{ transform:scale(0); opacity:0; filter:blur(0px); }
}
@keyframes bubbleSplash{
  0%{ transform:scale(0.5); opacity:0.9; }
  100%{ transform:scale(1.9); opacity:0; }
}
.float-bubble.fb1{ width:46px; height:46px; left:6%;  top:14%; animation-duration:13s; }
.float-bubble.fb2{ width:30px; height:30px; left:14%; top:68%; animation-duration:10s; animation-delay:-2s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(108,140,255,0.22), rgba(108,140,255,0) 72%); }
.float-bubble.fb3{ width:64px; height:64px; left:84%; top:10%; animation-duration:16s; animation-delay:-5s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(95,203,154,0.22), rgba(95,203,154,0) 72%); }
.float-bubble.fb4{ width:24px; height:24px; left:90%; top:60%; animation-duration:9s;  animation-delay:-1s; }
.float-bubble.fb5{ width:36px; height:36px; left:48%; top:6%;  animation-duration:12s; animation-delay:-7s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(255,143,190,0.22), rgba(255,143,190,0) 72%); }
.float-bubble.fb6{ width:20px; height:20px; left:6%;  top:88%; animation-duration:11s; animation-delay:-4s; }
.float-bubble.fb7{ width:54px; height:54px; left:80%; top:84%; animation-duration:15s; animation-delay:-9s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(205,184,255,0.22), rgba(205,184,255,0) 72%); }
.float-bubble.fb8{ width:28px; height:28px; left:38%; top:90%; animation-duration:10.5s; animation-delay:-3s; }
.float-bubble.fb9{ width:16px; height:16px; left:24%; top:32%; animation-duration:8s;  animation-delay:-6s; }
.float-bubble.fb10{ width:74px; height:74px; left:58%; top:78%; animation-duration:18s; animation-delay:-10s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(255,90,31,0.18), rgba(255,90,31,0) 72%); }
.float-bubble.fb11{ width:14px; height:14px; left:70%; top:36%; animation-duration:7.5s; animation-delay:-2.5s; }
.float-bubble.fb12{ width:42px; height:42px; left:4%;  top:50%; animation-duration:13.5s; animation-delay:-8s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(108,140,255,0.22), rgba(108,140,255,0) 72%); }
.float-bubble.fb13{ width:80px; height:80px; left:46%; top:42%; animation-duration:20s; animation-delay:-12s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(95,203,154,0.18), rgba(95,203,154,0) 72%); }
.float-bubble.fb14{ width:18px; height:18px; left:92%; top:30%; animation-duration:8.5s; animation-delay:-4.5s; }
.float-bubble.fb15{ width:34px; height:34px; left:62%; top:16%; animation-duration:11.5s; animation-delay:-7.5s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(255,143,190,0.22), rgba(255,143,190,0) 72%); }
.float-bubble.fb16{ width:22px; height:22px; left:16%; top:78%; animation-duration:9.5s; animation-delay:-5.5s; }
.float-bubble.fb17{ width:38px; height:38px; left:30%; top:10%; animation-duration:14s; animation-delay:-3.5s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(255,213,107,0.24), rgba(255,213,107,0) 72%); }
.float-bubble.fb18{ width:26px; height:26px; left:96%; top:46%; animation-duration:10s; animation-delay:-6.5s; }
.float-bubble.fb19{ width:50px; height:50px; left:2%;  top:32%; animation-duration:17s; animation-delay:-1.5s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(108,140,255,0.2), rgba(108,140,255,0) 72%); }
.float-bubble.fb20{ width:18px; height:18px; left:54%; top:94%; animation-duration:8.2s; animation-delay:-4.2s; }
.float-bubble.fb21{ width:60px; height:60px; left:74%; top:54%; animation-duration:19s; animation-delay:-11s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(255,143,190,0.2), rgba(255,143,190,0) 72%); }
.float-bubble.fb22{ width:22px; height:22px; left:40%; top:22%; animation-duration:9.8s; animation-delay:-7.8s; }
.float-bubble.fb23{ width:32px; height:32px; left:88%; top:78%; animation-duration:12.5s; animation-delay:-2.8s; background:radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(circle, rgba(95,203,154,0.22), rgba(95,203,154,0) 72%); }
.float-bubble.fb24{ width:15px; height:15px; left:12%; top:6%;  animation-duration:7.8s; animation-delay:-9.2s; }
@keyframes floatBubbleDrift{
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.45; }
  50%{ transform:translate(14px,-22px) scale(1.12); opacity:0.7; }
}
@media (prefers-reduced-motion: reduce){
  .float-bubble{ animation:none; }
  .float-bubble.is-popping{ animation:none !important; opacity:0; }
  .float-bubble.is-popping::after{ animation:none; opacity:0; }
}
.skill-orb-wrap{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:100%;
  pointer-events:none;
}
.skill-orb{
  position:relative;
  width:min(500px, 82vw);
  height:min(500px, 82vw);
  min-width:280px;
  min-height:280px;
  border-radius:50%;
  overflow:hidden;
  pointer-events:auto;
  clip-path:circle(50% at 50% 50%);
  background:
    radial-gradient(circle at 33% 25%, rgba(255,255,255,0.88) 0 42px, transparent 96px),
    radial-gradient(circle at 62% 66%, rgba(255,90,31,0.16) 0 92px, transparent 178px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35) 0%, rgba(228,212,247,0.28) 48%, rgba(23,21,29,0.18) 100%);
  border:1px solid rgba(23,21,29,0.18);
  box-shadow:
    inset 0 0 38px rgba(255,255,255,0.85),
    inset 0 -24px 50px rgba(183,156,232,0.22),
    0 30px 70px -32px rgba(23,21,29,0.55);
  isolation:isolate;
}
.skill-orb::before{
  content:'';
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.78) 0 18%, rgba(255,255,255,0.18) 46%, transparent 70%);
  filter:blur(18px);
  opacity:0.88;
  z-index:0;
  animation:orbGlow 6s ease-in-out infinite;
}
.skill-orb::after{
  content:'';
  position:absolute;
  top:7%;
  left:18%;
  width:48%;
  height:20%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  transform:rotate(-14deg);
  opacity:0.75;
  z-index:3;
  pointer-events:none;
}
@keyframes orbGlow{
  0%,100%{ transform:scale(1); opacity:0.72; }
  50%{ transform:scale(1.08); opacity:0.95; }
}
.bowl-label{
  position:absolute;
  left:50%;
  top:26px;
  transform:translateX(-50%);
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--pink-deep);
  background:#FFFFFF;
  border:1px solid rgba(255,255,255,0.88);
  border-radius:999px;
  padding:7px 14px;
  box-shadow:0 12px 24px -18px rgba(23,21,29,0.4);
  white-space:nowrap;
}
.skill-cloud{
  position:absolute;
  inset:0;
  z-index:2;
  cursor:grab;
  touch-action:none;
}
.skill-cloud.is-grabbing{ cursor:grabbing; }
.skill-chip{
  --x:0px;
  --y:0px;
  --depth-scale:1;
  --chip-scale:1;
  position:absolute;
  top:50%;
  left:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:max-content;
  padding:calc(8px * var(--chip-scale)) calc(17px * var(--chip-scale));
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.72);
  background:linear-gradient(135deg, #D7E2FF 0%, #6C8CFF 100%);
  color:#17151D;
  font-size:calc(13px * var(--chip-scale));
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  --chip-glow: rgba(108,140,255,0.55);
  box-shadow:0 12px 24px -16px rgba(23,21,29,0.55), 0 0 16px 1px var(--chip-glow);
  cursor:pointer;
  transform:translate(var(--x), var(--y)) translate(-50%, -50%) scale(var(--depth-scale));
  transition:opacity 0.2s ease, filter 0.2s ease, box-shadow 0.22s ease;
  animation:skillChipGlow 2.6s ease-in-out infinite;
  z-index:2;
}
.skill-chip::before{
  content:'✧';
  font-size:calc(12px * var(--chip-scale));
  color:rgba(23,21,29,0.72);
}
.skill-orb.is-dense .skill-chip::before{ display:none; }
.skill-orb.is-dense .skill-chip{ gap:0; }
.skill-chip[data-cat='programming']{ background:linear-gradient(135deg, #D7E2FF 0%, #6C8CFF 100%); --chip-glow:rgba(108,140,255,0.6); }
.skill-chip[data-cat='cloud']{ background:linear-gradient(135deg, #DCEEFC 0%, #8FC7F2 100%); --chip-glow:rgba(143,199,242,0.6); }
.skill-chip[data-cat='data']{ background:linear-gradient(135deg, #C8F0DC 0%, #5FCB9A 100%); --chip-glow:rgba(95,203,154,0.6); }
.skill-chip[data-cat='devops']{ background:linear-gradient(135deg, #FFF0CC 0%, #FFD56B 100%); --chip-glow:rgba(255,213,107,0.65); }
.skill-chip[data-cat='databases']{ background:linear-gradient(135deg, #E4D4F7 0%, #B79CE8 100%); --chip-glow:rgba(183,156,232,0.6); }
.skill-chip[data-cat='sap']{ background:linear-gradient(135deg, #F4D1BF 0%, #FF5A1F 100%); --chip-glow:rgba(255,90,31,0.6); }
.skill-chip[data-cat='tools']{ background:linear-gradient(135deg, #CFF7FA 0%, #4FCBDC 100%); --chip-glow:rgba(79,203,220,0.6); }
.skill-chip[data-cat='os']{ background:linear-gradient(135deg, #FFE3F0 0%, #FF8FBE 100%); --chip-glow:rgba(255,143,190,0.6); }
@keyframes skillChipGlow{
  0%, 100%{ box-shadow:0 12px 24px -16px rgba(23,21,29,0.55), 0 0 14px 1px var(--chip-glow); }
  50%{ box-shadow:0 12px 24px -16px rgba(23,21,29,0.55), 0 0 24px 4px var(--chip-glow); }
}
.skill-chip:hover{
  transform:translate(var(--x), var(--y)) translate(-50%, -50%) scale(calc(var(--depth-scale) * 1.14));
  filter:saturate(1.12);
  box-shadow:0 18px 30px -18px rgba(23,21,29,0.7), 0 0 30px 6px var(--chip-glow);
  animation-play-state:paused;
  z-index:50 !important;
}
@media (prefers-reduced-motion: reduce){
  .skill-chip{ animation:none; }
}
.skill-chip.is-hidden{
  opacity:0;
  pointer-events:none;
  display:none;
}
.skill-chip.bowl-pop{ animation:orbRibbonPop 0.48s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes orbRibbonPop{
  0%{ opacity:0; transform:translate(var(--x), calc(var(--y) + 28px)) translate(-50%, -50%) scale(calc(var(--depth-scale) * 0.7)); }
  100%{ opacity:1; transform:translate(var(--x), var(--y)) translate(-50%, -50%) scale(var(--depth-scale)); }
}
.skill-orb-note{
  position:relative;
  z-index:2;
  margin:18px auto 0;
  max-width:560px;
  text-align:center;
  color:var(--text-dim);
  font-size:14px;
  font-weight:700;
}
.job-tags .tag{ cursor:pointer; transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease; }
.job-tags .tag:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:var(--shadow-sm); }
.job-tags .tag.skill-pop{ animation:tagPulse 0.48s cubic-bezier(.34,1.56,.64,1); }
@keyframes tagPulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.16) rotate(-3deg); }
  100%{ transform:scale(1); }
}
@media (max-width:720px){
  .skill-theatre{ min-height:540px; padding:26px 16px 34px; }
  .skill-orb-wrap{ min-height:410px; }
  .skill-chip{ font-size:11.5px; padding:7px 12px; }
  .bowl-label{ top:18px; font-size:13px; }
}


/* ============================================
   PROJECTS (with filter)
   ============================================ */
.project-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
}
.filter-btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  padding:10px 20px;
  border-radius:var(--radius-pill);
  border:2px solid var(--border);
  background:var(--surface);
  color:var(--text-dim);
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  gap:7px;
}
.filter-btn:hover{ border-color:var(--border-hi); transform:translateY(-2px); }
.filter-btn.active{
  background:linear-gradient(135deg, var(--lav), #9B7FD4);
  color:#fff;
  border-color:transparent;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
}
@media (max-width:860px){
  .project-grid{ grid-template-columns:1fr; }
}

.project-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform 0.25s cubic-bezier(.34,1.4,.64,1), box-shadow 0.25s ease;
}
.project-card.is-hidden{ display:none; }
.project-card:hover{
  transform:translateY(-6px) rotate(-0.6deg);
  box-shadow:var(--shadow-lift);
  border-color:var(--border-hi);
}
.project-thumb{
  height:170px;
  background:linear-gradient(135deg, var(--pink-soft), var(--lav-soft));
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.project-thumb-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--pink-deep);
}
.project-thumb-placeholder svg{ width:38px;height:38px; opacity:0.65; }
.project-thumb-placeholder span{ font-family:var(--font-display); font-weight:600; font-size:12.5px; opacity:0.75; }

.project-body{
  padding:var(--space-lg);
  display:flex;
  flex-direction:column;
  flex:1;
}
.project-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.project-name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}
.project-links{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.icon-link{
  width:34px;height:34px;
  border-radius:11px;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  transition:all 0.2s ease;
}
.icon-link:hover{ color:#fff; border-color:transparent; background:var(--pink); transform:scale(1.08) rotate(-4deg); }
.icon-link svg{ width:15px;height:15px; }

.icon-link.demo-link{
  width:auto;
  padding:0 14px 0 10px;
  gap:6px;
  border-color:var(--pink);
  color:var(--pink-deep);
}
.icon-link.demo-link:hover{ color:#fff; border-color:transparent; background:var(--pink); transform:scale(1.04); }
.icon-link.demo-link .demo-label{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.project-problem{
  color:var(--text-dim);
  font-size:14.5px;
  margin-bottom:16px;
}

.project-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}

.project-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:18px;
  padding-top:16px;
  border-top:2px dashed var(--border);
}
.project-detail-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--text-faint);
  margin-bottom:4px;
}
.project-detail-val{
  font-size:13.5px;
  color:var(--text-dim);
}

.project-outcome{
  margin-top:auto;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:13px 14px;
  border-radius:var(--radius-sm);
  background:var(--mint-soft);
  font-size:13.5px;
  color:#1F7A52;
  font-weight:600;
}
.project-outcome svg{ width:16px;height:16px; flex-shrink:0; margin-top:2px; }

/* ============================================
   EXPERIENCE / TIMELINE
   ============================================ */
.timeline{
  position:relative;
  padding-left:36px;
  border-left:3px dashed var(--border-hi);
}
.timeline-item{
  position:relative;
  padding-bottom:44px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  left:-46px;
  top:4px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--pink);
  display:flex;
  align-items:center;
  justify-content:center;
}
.timeline-dot::after{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background:var(--pink);
}
.timeline-card{
  padding:24px 26px;
  transition:transform 0.2s ease;
}
.timeline-card:hover{ transform:translateX(4px); }
.timeline-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:6px;
}
.timeline-role{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}
.timeline-date{
  font-family:var(--font-display);
  font-weight:600;
  font-size:12.5px;
  color:var(--pink-deep);
  background:var(--pink-soft);
  padding:6px 12px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.timeline-org{
  font-size:14.5px;
  color:var(--text-dim);
  margin-bottom:14px;
  font-weight:600;
}
.timeline-points{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.timeline-points li{
  display:flex;
  gap:10px;
  font-size:14.5px;
  color:var(--text-dim);
}
.timeline-points li::before{
  content:'♡';
  color:var(--pink);
  flex-shrink:0;
}

/* ============================================
   EDUCATION CARDS
   ============================================ */
.edu-grid{ display:flex; flex-direction:column; gap:18px; }
.edu-card{ display:grid; grid-template-columns:120px 1fr; gap:22px; padding:24px; align-items:center; }
@media (max-width:600px){ .edu-card{ grid-template-columns:1fr; text-align:center; } }
.edu-photo{
  width:100px;height:100px; border-radius:var(--radius-md); background:var(--lav-soft);
  display:flex; align-items:center; justify-content:center; color:var(--lav); margin:0 auto;
  border:3px solid var(--surface); box-shadow:var(--shadow-sm);
}
.edu-photo svg{ width:42px;height:42px; }

/* ============================================
   COMPANY / SCHOOL LOGOS
   Add your logo files in: assets/logos/
   Then update the img src values in the Education and Work cards.
   The initials stay visible if the image file is missing.
   ============================================ */
.logo-photo{
  background:rgba(255,255,255,0.76);
  padding:14px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.logo-photo::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(244,209,191,0.65), rgba(228,212,247,0.62));
  z-index:-1;
}
.logo-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  display:block;
  filter:saturate(0.98) contrast(1.02);
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), filter 0.25s ease;
}
.logo-photo:hover img,
.job-card:hover .logo-photo img,
.edu-card:hover .logo-photo img{
  transform:scale(1.08) rotate(-2deg);
  filter:saturate(1.12) contrast(1.05);
}
.logo-fallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(18px,2vw,28px);
  color:var(--pink-deep);
  background:linear-gradient(135deg, var(--pink-soft), var(--lav-soft));
  letter-spacing:0.02em;
}
.edu-photo.logo-photo{
  padding:12px;
}

.edu-degree{ font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:6px; }
.edu-school{ font-size:14.5px; color:var(--text-dim); margin-bottom:6px; }
.edu-meta{ font-family:var(--font-mono); font-size:12px; color:var(--pink-deep); }

/* ============================================
   JOB CARDS (restyled Experience — photo + pull-quote + tags)
   ============================================ */
.job-list{ display:flex; flex-direction:column; gap:26px; }
.job-card{
  overflow:hidden;
  position:relative;
  background:linear-gradient(155deg, var(--surface) 0%, var(--surface-tint) 100%);
  border:1px solid var(--border);
  box-shadow:0 16px 38px -20px rgba(0,0,0,0.18), 0 0 0 1px rgba(216,67,12,0.06), 0 0 26px -4px rgba(216,67,12,0.28);
  transition:transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease;
  animation:jobCardGlow 3.4s ease-in-out infinite;
}
.job-card:nth-child(2){ animation-delay:0.45s; }
.job-card:nth-child(3){ animation-delay:0.9s; }
.job-card:nth-child(4){ animation-delay:1.35s; }
.job-card:nth-child(5){ animation-delay:1.8s; }
@keyframes jobCardGlow{
  0%, 100%{ box-shadow:0 16px 38px -20px rgba(0,0,0,0.18), 0 0 0 1px rgba(216,67,12,0.06), 0 0 22px -6px rgba(216,67,12,0.26); }
  50%{ box-shadow:0 16px 38px -20px rgba(0,0,0,0.18), 0 0 0 1px rgba(183,156,232,0.12), 0 0 36px -2px rgba(183,156,232,0.4); }
}
.job-card::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--pink-deep), var(--lav));
  box-shadow:0 0 14px 1px rgba(216,67,12,0.55);
}
.job-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px -20px rgba(0,0,0,0.24), 0 0 0 1px rgba(216,67,12,0.16), 0 0 40px 0px rgba(216,67,12,0.45);
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .job-card{ animation:none; }
}
.job-top{ display:grid; grid-template-columns:130px 1fr; gap:24px; padding:30px 30px 0 32px; }
@media (max-width:600px){ .job-top{ grid-template-columns:1fr; } }
.job-photo{
  width:110px;height:110px; border-radius:var(--radius-md); background:var(--pink-soft);
  display:flex; align-items:center; justify-content:center; color:var(--pink-deep);
  border:3px solid var(--surface); box-shadow:var(--shadow-sm); margin:0 auto;
}
.job-photo svg{ width:46px;height:46px; }
.job-title-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:4px; }
.job-company{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-0.02em; color:var(--text); }
.job-current-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.02em;
  color:#fff; background:linear-gradient(135deg, var(--pink-deep), #FF8A4D);
  border-radius:999px; padding:3px 11px;
}
.job-current-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.35); }
.job-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:6px; }
.job-role{ color:var(--pink-deep); font-weight:600; }
.job-meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); display:block; margin-bottom:12px; }
.job-context{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  color:var(--lav); background:var(--lav-soft); border-radius:999px;
  padding:5px 12px; margin-bottom:12px;
}
.job-context::before{ content:'✦'; font-size:10px; }
.job-quote{
  margin:0; padding:16px 20px; border-radius:14px; background:var(--surface-tint);
  border-left:4px solid var(--pink-deep); font-family:var(--font-display); font-style:italic;
  font-size:15px; color:var(--text); line-height:1.55;
}
.job-reference{
  font-size:12.5px; color:var(--text-faint); margin-top:8px; margin-bottom:18px;
  font-style:normal;
}
.job-body{ padding:18px 30px 30px 32px; }
.job-desc{ color:var(--text-dim); font-size:14.5px; margin-bottom:16px; }
.job-desc p{ margin-bottom:12px; }
.job-desc p:last-child{ margin-bottom:0; }
.job-tags{ display:flex; flex-wrap:wrap; gap:7px; }

/* ============================================
   EXPERIENCE TABS ("Where I've worked" layout)
   ============================================ */
.exp-tabs{ display:flex; gap:8px; align-items:flex-start; }
.exp-tablist{
  display:flex; flex-direction:column;
  flex:0 0 210px;
  position:relative;
  border-left:2px solid var(--border);
}
.exp-tab{
  all:unset;
  display:block;
  cursor:pointer;
  text-align:left;
  padding:12px 20px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--text-faint);
  border-left:2px solid transparent;
  margin-left:-2px;
  transition:background-color 0.25s ease, color 0.25s ease;
  white-space:nowrap;
}
.exp-tab:hover{ background:var(--surface-tint); color:var(--text); }
.exp-tab.is-active{ color:var(--pink-deep); background:var(--surface-tint); }
.exp-tab:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:-2px; }
.exp-tab-indicator{
  position:absolute; left:-2px; width:2px; height:46px;
  background:var(--pink-deep); border-radius:2px;
  transition:transform 0.3s cubic-bezier(.65,0,.35,1);
  transform:translateY(0);
}
.exp-panels{ flex:1; padding:2px 0 0 32px; min-width:0; }
.exp-panel{ display:flex; flex-direction:column; gap:18px; animation:expPanelIn 0.3s ease; }
.exp-panel[hidden]{ display:none; }
@keyframes expPanelIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }
.exp-top{ display:flex; gap:18px; align-items:center; }
.exp-panel-body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.exp-logo{
  width:140px; aspect-ratio:1/1; flex-shrink:0; border-radius:14px;
  background:rgba(255,255,255,0.85); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.exp-logo img{ width:100%; height:100%; object-fit:contain; padding:18px; display:block; }
.exp-logo--fill img{ object-fit:cover; padding:0; }
.exp-logo-fallback{
  display:none; width:100%; height:100%; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--pink-deep);
  background:linear-gradient(135deg, var(--pink-soft), var(--lav-soft));
}
.exp-role{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--text); margin-bottom:4px; }
.exp-role .exp-at{ color:var(--pink-deep); }
.exp-meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin-bottom:16px; }
.exp-panel .job-quote{ margin-bottom:0; }
.exp-panel .job-quote .job-reference{ display:inline; margin:0 0 0 6px; }
.exp-tags{ display:flex; flex-wrap:wrap; gap:7px; }
@media (max-width:700px){
  .exp-tabs{ flex-direction:column; }
  .exp-tablist{
    flex-direction:row; flex-wrap:wrap;
    border-left:none; border-bottom:2px solid var(--border);
    gap:0;
  }
  .exp-tab{ border-left:none; border-bottom:2px solid transparent; margin-left:0; margin-bottom:-2px; padding:10px 14px; }
  .exp-tab.is-active{ border-bottom-color:var(--pink-deep); }
  .exp-tab-indicator{ display:none; }
  .exp-panels{ padding:24px 0 0; }
  .exp-top{ gap:12px; align-items:flex-start; }
  .exp-logo{ width:64px; height:64px; }
  .exp-logo--fill img{ object-fit:contain; padding:9px; }
}

/* ============================================
   TIMELINE GRAPHIC (milestone track)
   ============================================ */
.milestone-card{ padding:var(--space-xl); overflow:hidden; }
.milestone-track{
  display:flex; align-items:flex-start; justify-content:space-between;
  position:relative; padding:30px 0 10px; overflow-x:auto;
  gap:6px;
}
.milestone-track::before{
  content:''; position:absolute; top:48px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--border-hi) 0 8px, transparent 8px 16px);
}
.milestone-stop{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:108px; position:relative; flex-shrink:0; }
.milestone-dot{
  width:34px;height:34px; border-radius:50%; background:var(--surface); border:3px solid var(--pink-deep);
  display:flex; align-items:center; justify-content:center; font-size:14px; z-index:1;
}
.milestone-year{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.milestone-label{ font-family:var(--font-display); font-weight:600; font-size:13px; text-align:center; color:var(--text); }

/* ============================================
   OTHER WORK OPPORTUNITIES — lighter weight repeated rows
   ============================================ */
.other-work-list{ display:flex; flex-direction:column; gap:14px; }
.other-work-row{ display:flex; align-items:center; gap:18px; padding:18px 22px; flex-wrap:wrap; }
.other-work-icon{
  width:46px;height:46px; border-radius:50%; background:var(--mint-soft); color:#1F7A52;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.other-work-icon svg{ width:20px;height:20px; }
.other-work-text{ flex:1; min-width:200px; }
.other-work-role{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.other-work-org{ font-size:13.5px; color:var(--text-dim); }
.other-work-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); white-space:nowrap; }

/* ============================================
   CERTIFICATIONS / EDUCATION
   ============================================ */
.cert-carousel{
  display:flex;
  align-items:center;
  gap:14px;
}
.cert-carousel--full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.cert-track{
  display:flex;
  gap:var(--space-xl);
  overflow-x:auto;
  padding:4px 0 14px;
  flex:1;
  scrollbar-width:none;
}
.cert-track::-webkit-scrollbar{ display:none; }
.cert-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.cert-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--border);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
}
.cert-dot.is-active{ background:var(--pink-deep); transform:scale(1.35); }
@media (max-width:700px){
  .cert-card{ flex:0 0 80vw; }
}

.cert-card{
  position:relative;
  flex:0 0 300px;
  padding:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  border-radius:var(--radius-md);
  border:none;
  box-shadow:none;
  z-index:0;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, z-index 0.25s ease;
}
.cert-card:hover{ transform:translateY(-5px) rotate(1deg); box-shadow:0 16px 32px -12px rgba(0,0,0,0.45); z-index:2; }
.cert-art{
  position:absolute;
  top:18px;
  right:18px;
  width:118px;
  height:52px;
  opacity:0.92;
  pointer-events:none;
  z-index:0;
}
.cert-diagram{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.cert-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.cert-tech{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.01em;
  padding:4px 9px;
  border-radius:8px;
  background:rgba(0,0,0,0.32);
  color:#fff;
  white-space:nowrap;
}
.cert-tech.cert-tech--light{
  background:rgba(0,0,0,0.05);
  color:#3c4043;
  border:1px solid rgba(0,0,0,0.08);
}
.cert-badge{
  width:46px;height:46px;
  border-radius:14px;
  background:var(--butter-soft);
  color:#B8862E;
  border:2px solid rgba(255,255,255,0.3);
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cert-badge svg{ width:22px;height:22px; }
.cert-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--text);
}
.cert-issuer{
  font-size:13px;
  color:var(--text-faint);
  font-weight:600;
}
.cert-status{
  font-family:var(--font-display);
  font-weight:600;
  font-size:11.5px;
  color:var(--text-faint);
  display:flex;
  align-items:center;
  gap:6px;
}


.cert-card{ color:inherit; text-decoration:none; }
.cert-card .cert-status{ color:var(--pink-deep); }
.cert-card:hover .cert-name{ color:var(--pink-deep); }

/* Per-certificate creative themes — the whole card carries the brand treatment */
.cert-card--aws-de{
  background:
    repeating-linear-gradient(45deg, rgba(255,153,0,0.16) 0 8px, transparent 8px 16px),
    linear-gradient(160deg,#0e1d27 0%,#1b3a4b 100%);
  color:#fff;
}
.cert-card--aws-de .cert-badge{ background:#FF9900; color:#16232c; }
.cert-card--aws-de .cert-issuer{ color:rgba(255,255,255,0.7); }

.cert-card--aws-ml{
  background:
    radial-gradient(rgba(255,184,77,0.4) 1.6px, transparent 1.8px) 0 0/16px 16px,
    linear-gradient(160deg,#0e1d27 0%,#1b3a4b 100%);
  color:#fff;
}
.cert-card--aws-ml .cert-badge{ background:#FFB84D; color:#16232c; }
.cert-card--aws-ml .cert-issuer{ color:rgba(255,255,255,0.7); }

.cert-card--google{
  background:linear-gradient(160deg,#ffffff 0%,#f5f8ff 100%);
}
.cert-card--google .cert-badge{ background:#fff; color:#4285F4; border-color:rgba(0,0,0,0.08); }

.cert-card--sap-btp{
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,0.1) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,0.1) 0 2px, transparent 2px 22px),
    linear-gradient(160deg,#003C78 0%,#0A6ED1 100%);
  color:#fff;
}
.cert-card--sap-btp .cert-badge{ background:#0A6ED1; color:#fff; }
.cert-card--sap-btp .cert-issuer{ color:rgba(255,255,255,0.75); }

.cert-card--udemy{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 10px, transparent 10px 24px),
    linear-gradient(160deg,#2D0140 0%,#A435F0 100%);
  color:#fff;
}
.cert-card--udemy .cert-badge{ background:#A435F0; color:#fff; }
.cert-card--udemy .cert-issuer{ color:rgba(255,255,255,0.75); }

.cert-card--algo{
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.25) 2px, transparent 3px),
    radial-gradient(circle at 30% 75%, rgba(255,255,255,0.25) 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.25) 2px, transparent 3px),
    linear-gradient(160deg,#111111 0%,#FF6600 100%);
  color:#fff;
}
.cert-card--algo .cert-badge{ background:#FF6600; color:#111111; }
.cert-card--algo .cert-issuer{ color:rgba(255,255,255,0.75); }

/* .cert-name sets its own color:var(--text), so it doesn't inherit the white
   text color from .cert-card--xxx and needs an explicit override per theme. */
.cert-card--aws-de .cert-name,
.cert-card--aws-ml .cert-name,
.cert-card--sap-btp .cert-name,
.cert-card--udemy .cert-name,
.cert-card--algo .cert-name{
  color:#fff;
}
.cert-card--aws-de:hover .cert-name,
.cert-card--aws-ml:hover .cert-name,
.cert-card--sap-btp:hover .cert-name,
.cert-card--udemy:hover .cert-name,
.cert-card--algo:hover .cert-name{
  color:#FFE7A6;
}

.cert-card--aws-de .cert-status,
.cert-card--aws-ml .cert-status,
.cert-card--sap-btp .cert-status,
.cert-card--udemy .cert-status,
.cert-card--algo .cert-status{
  color:#fff;
}
html[data-theme="dark"] .cert-card--aws-de .cert-status,
html[data-theme="dark"] .cert-card--aws-ml .cert-status,
html[data-theme="dark"] .cert-card--sap-btp .cert-status,
html[data-theme="dark"] .cert-card--udemy .cert-status,
html[data-theme="dark"] .cert-card--algo .cert-status{
  color:var(--pink-deep);
}

/* ============================================
   CREATIVITY HUB
============================================ */

.creativity-hub{
    column-count:4;
    column-gap:18px;
}

.creativity-hub img{
    width:100%;
    height:auto;
    display:block;
    margin-bottom:18px;
    border-radius:22px;
    break-inside:avoid;
    box-shadow:0 12px 32px rgba(0,0,0,.08);
    transition: transform .35s ease, box-shadow .35s ease;
    cursor:pointer;
}
.creativity-hub img:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 48px rgba(0,0,0,.18);
}
@media (max-width:1100px){.creativity-hub{column-count:3;}}
@media (max-width:768px){.creativity-hub{column-count:2;}}
@media (max-width:520px){.creativity-hub{column-count:1;}}
html[data-theme="dark"] .creativity-hub img{box-shadow:0 12px 32px rgba(0,0,0,.35);}

/* ============================================
   CONTACT
   ============================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-card{
  padding:36px;
}
.contact-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.contact-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:2px solid var(--border);
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
}
.contact-row:hover{
  border-color:var(--pink);
  transform:translateX(4px);
  background:var(--bg-soft);
}
.contact-row-icon{
  width:38px;height:38px;
  border-radius:12px;
  background:var(--pink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--pink-deep);
  flex-shrink:0;
}
.contact-row-icon svg{ width:17px;height:17px; }
.contact-row-text{ flex:1; }
.contact-row-label{
  font-size:11px;
  color:var(--text-faint);
  font-weight:700;
  font-family:var(--font-display);
}
.contact-row-val{
  font-size:14.5px;
  color:var(--text);
  font-weight:600;
}

.form-group{ margin-bottom:var(--space-md); }
.form-label{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:8px;
}
.form-input,.form-textarea{
  width:100%;
  background:var(--bg-soft);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--text);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  transition:border-color 0.2s ease;
}
.form-input:focus,.form-textarea:focus{
  border-color:var(--pink);
  outline:none;
}
.form-textarea{ resize:vertical; min-height:110px; }
.form-submit{
  width:100%;
  justify-content:center;
  border:none;
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  border-top:2px dashed var(--border);
  padding:44px 0 32px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  color:var(--pink-deep);
  display:flex;
  align-items:center;
  gap:9px;
}
.footer-links{
  display:flex;
  gap:22px;
}
.footer-links a{
  color:var(--text-faint);
  font-size:13.5px;
  font-weight:600;
  transition:color 0.15s ease;
}
.footer-links a:hover{ color:var(--pink-deep); }
.footer-status{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12.5px;
  color:var(--text-faint);
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

/* back to top */
.to-top{
  position:fixed;
  bottom:28px;
  right:28px;
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  border:3px solid var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  z-index:90;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(0.8);
  transition:opacity 0.2s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow-md);
}
.to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.to-top:hover{ transform:translateY(-3px) scale(1.06); }
.to-top svg{ width:20px;height:20px; }

/* sparkle burst (click confetti) */
.sparkle-pop{
  position:fixed;
  pointer-events:none;
  z-index:200;
  font-size:18px;
  animation:sparklePop 0.7s ease-out forwards;
}
@keyframes sparklePop{
  0%{ opacity:1; transform:translate(0,0) scale(0.4) rotate(0deg); }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(1.1) rotate(180deg); }
}

/* visually-hidden skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--pink);
  color:#fff;
  padding:10px 18px;
  z-index:200;
  border-radius:0 0 12px 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
}
.skip-link:focus{ left:0; }



/* ============================================
   PANDA DESK BUDDY - SVG character, no image/bg
   ============================================ */
.panda-buddy{
  position:fixed;
  right:22px;
  bottom:22px;
  width:128px;
  height:128px;
  z-index:95;
  pointer-events:none;
  transform-origin:50% 100%;
  transform:translateY(0) rotate(var(--panda-tilt, 0deg));
  transition:transform 0.32s cubic-bezier(.34,1.35,.64,1), opacity 0.22s ease;
  --panda-eye-x:0px;
  --panda-eye-y:0px;
  --panda-brow-x:0px;
  --panda-brow-y:0px;
  --panda-left-brow-rot:0deg;
  --panda-right-brow-rot:0deg;
  --panda-tilt:0deg;
}
.panda-buddy svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.panda-buddy .panda-head,
.panda-buddy .panda-body,
.panda-buddy .panda-arm,
.panda-buddy .panda-laptop,
.panda-buddy .panda-pupil,
.panda-buddy .panda-glint,
.panda-buddy .panda-brow,
.panda-buddy .panda-sleep-lid{
  transition:transform 0.26s cubic-bezier(.34,1.25,.64,1), opacity 0.24s ease;
}
.panda-buddy .panda-glint{
  transform:translate(calc(var(--panda-eye-x) * 0.18), calc(var(--panda-eye-y) * 0.18));
  transform-box:fill-box;
  transform-origin:center;
}
.panda-buddy .panda-left-brow{
  transform:translate(var(--panda-brow-x), var(--panda-brow-y)) rotate(var(--panda-left-brow-rot));
  transform-origin:87px 75px;
}
.panda-buddy .panda-right-brow{
  transform:translate(var(--panda-brow-x), var(--panda-brow-y)) rotate(var(--panda-right-brow-rot));
  transform-origin:143px 75px;
}
.panda-buddy .panda-laptop-glow{
  transform-origin:center;
  animation:pandaLaptopPulse 2.4s ease-in-out infinite;
}
.panda-buddy .panda-zzz{
  opacity:0;
  transform:translate(0, 8px) scale(.88);
  transform-origin:center;
  font-family:var(--font-display);
  font-weight:800;
  fill:#9B7FD4;
  filter:drop-shadow(0 3px 8px rgba(155,127,212,.25));
}
.panda-buddy .panda-sleep-lid{
  opacity:0;
}
.panda-buddy.idle{
  transform:translateY(5px) rotate(0deg);
}
.panda-buddy.idle .panda-head{
  transform:translateY(6px) rotate(2deg);
  transform-origin:115px 102px;
}
.panda-buddy.idle .panda-brow{
  opacity:.92;
}
.panda-buddy.sleeping{
  transform:translateY(12px) rotate(-4deg) scale(.96);
}
.panda-buddy.sleeping .panda-head{
  transform:translateY(13px) rotate(-7deg);
  transform-origin:115px 105px;
}
.panda-buddy.sleeping .panda-pupil{
  opacity:0;
}
.panda-buddy.sleeping .panda-brow{
  opacity:.55;
}
.panda-buddy.sleeping .panda-sleep-lid{
  opacity:1;
}
.panda-buddy.sleeping .panda-laptop-glow{
  opacity:.08;
  animation:none;
}
.panda-buddy.sleeping .panda-zzz{
  animation:pandaZzzFloat 1.85s ease-in-out infinite;
}
.to-top{
  bottom:168px;
  right:34px;
}
@keyframes pandaLaptopPulse{
  0%,100%{ opacity:.15; transform:scale(.98); }
  50%{ opacity:.34; transform:scale(1.02); }
}
@keyframes pandaZzzFloat{
  0%{ opacity:0; transform:translate(0, 10px) scale(.84); }
  38%{ opacity:1; }
  100%{ opacity:0; transform:translate(-10px, -20px) scale(1.12); }
}
@media (max-width:768px){
  .panda-buddy{
    width:88px;
    height:88px;
    right:12px;
    bottom:16px;
  }
  .to-top{
    bottom:116px;
    right:18px;
    width:44px;
    height:44px;
  }
}
@media (prefers-reduced-motion: reduce){
  .panda-buddy .panda-laptop-glow,
  .panda-buddy.sleeping .panda-zzz{
    animation:none;
  }
}




/* ============================================
   PORTFOLIO AI BOT - bottom search bar + answer panel
   ============================================ */
.portfolio-ai{
  position:fixed;
  left:50%;
  bottom:22px;
  width:min(720px, calc(100vw - 300px));
  min-width:360px;
  transform:translateX(-50%);
  z-index:94;
  pointer-events:none;
}
.ai-panel,
.ai-composer{
  pointer-events:auto;
}
.ai-panel{
  margin:0 auto 12px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(240,203,184,0.92);
  border-radius:26px;
  box-shadow:0 24px 56px -30px rgba(23,21,29,0.55), var(--shadow-sm);
  backdrop-filter:blur(18px);
  overflow:hidden;
  opacity:0;
  transform:translateY(18px) scale(.98);
  max-height:0;
  transition:opacity .24s ease, transform .28s cubic-bezier(.34,1.35,.64,1), max-height .28s ease;
}
.portfolio-ai.is-open .ai-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  max-height:460px;
}
.ai-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
}
.ai-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--text);
  line-height:1.1;
}
.ai-title small{
  display:block;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  color:var(--text-dim);
  margin-top:3px;
}
.ai-avatar{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--pink), var(--lav));
  color:#fff;
  box-shadow:0 12px 22px -16px rgba(23,21,29,.62);
  flex-shrink:0;
  overflow:hidden;
  position:relative;
  border:2px solid rgba(255,255,255,0.72);
}
.ai-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}
.ai-avatar-fallback{
  width:100%;
  height:100%;
  display:none;
  place-items:center;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg, var(--pink), var(--lav));
}
.ai-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--bg-soft);
  color:var(--text-dim);
  font-size:20px;
  line-height:1;
}
.ai-close:hover{
  color:var(--pink-deep);
  transform:scale(1.05);
}
.ai-messages{
  padding:16px 18px 10px;
  max-height:250px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-behavior:smooth;
}
.ai-message{
  width:fit-content;
  max-width:86%;
  padding:11px 14px;
  border-radius:18px;
  font-size:14px;
  line-height:1.5;
  font-weight:650;
}
.ai-message.bot{
  align-self:flex-start;
  color:var(--text);
  background:var(--surface-tint);
  border:1px solid var(--border);
  border-bottom-left-radius:7px;
}
.ai-message.user{
  align-self:flex-end;
  color:#fff;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  border-bottom-right-radius:7px;
}
.ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 18px 16px;
}
.ai-chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-dim);
  border-radius:999px;
  padding:7px 12px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
}
.ai-chip:hover{
  color:var(--pink-deep);
  border-color:var(--border-hi);
  transform:translateY(-2px);
}
.ai-composer{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px 10px 16px;
  border:1px solid rgba(240,203,184,0.76);
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  box-shadow:0 18px 48px -28px rgba(23,21,29,.65), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
}
.ai-orb{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--pink), var(--lav));
  box-shadow:0 0 0 4px rgba(255,90,31,0.13);
  flex-shrink:0;
  animation:aiPulse 2.6s ease-in-out infinite;
}
.ai-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
}
.ai-input::placeholder{
  color:var(--text-faint);
}
.ai-send{
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--text), var(--pink-deep));
  color:#fff;
  font-size:20px;
  font-weight:900;
  box-shadow:0 12px 22px -14px rgba(23,21,29,.55);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.ai-send:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 16px 28px -15px rgba(23,21,29,.7);
}
@keyframes aiPulse{
  0%,100%{ transform:scale(1); filter:saturate(1); }
  50%{ transform:scale(1.08); filter:saturate(1.18); }
}
html[data-theme="dark"] .ai-panel,
html[data-theme="dark"] .ai-composer{
  background:rgba(20,20,20,0.76);
  border-color:rgba(255,255,255,0.13);
  box-shadow:0 26px 58px -28px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .ai-message.bot,
html[data-theme="dark"] .ai-chip,
html[data-theme="dark"] .ai-close{
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.13);
}
html[data-theme="dark"] .ai-send{
  background:linear-gradient(135deg, #2B2A43, var(--pink-deep));
}
@media (max-width:960px){
  .portfolio-ai{
    width:calc(100vw - 32px);
    min-width:0;
    bottom:112px;
  }
  .portfolio-ai.is-open .ai-panel{
    max-height:430px;
  }
}
@media (max-width:520px){
  .portfolio-ai{
    bottom:108px;
    width:calc(100vw - 22px);
  }
  .ai-panel-head{
    padding:14px 14px 10px;
  }
  .ai-messages{
    max-height:220px;
    padding:14px 14px 8px;
  }
  .ai-message{
    max-width:92%;
    font-size:13.5px;
  }
  .ai-suggestions{
    padding:0 14px 14px;
  }
  .ai-composer{
    gap:8px;
    padding:9px 9px 9px 12px;
  }
  .ai-orb{
    width:28px;
    height:28px;
  }
  .ai-send{
    width:38px;
    height:38px;
  }
}
@media (prefers-reduced-motion: reduce){
  .ai-orb{ animation:none; }
}

/* Alive AI bot extras: blinking orb, question typer, nudges, typing dots */
.portfolio-ai{
  --ai-mood:#FF5A1F;
}
.portfolio-ai.is-awake .ai-composer{
  box-shadow:0 22px 58px -30px rgba(255,90,31,.78), inset 0 1px 0 rgba(255,255,255,.78);
}
.ai-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:800;
  color:var(--text-faint);
}
.ai-status::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px var(--mint-soft);
}
.ai-avatar,
.ai-orb{
  position:relative;
}
.ai-avatar::after{
  content:'';
  position:absolute;
  right:-2px;
  top:-2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--mint);
  border:2px solid var(--surface);
}
.ai-orb{
  overflow:visible;
  background:radial-gradient(circle at 34% 25%, rgba(255,255,255,.9), transparent 22%), linear-gradient(135deg, var(--ai-mood), var(--lav));
  animation:aiPulse 2.6s ease-in-out infinite, aiBob 4.4s ease-in-out infinite;
}
.ai-orb-face{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform-origin:50% 80%;
  animation:aiBlinkFace 5.5s steps(1) infinite;
}
.ai-orb-ping{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:2px solid rgba(255,90,31,.22);
  animation:aiPing 2.1s ease-out infinite;
}
.ai-orb::after{
  content:'?';
  position:absolute;
  right:-7px;
  top:-9px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--butter);
  color:#6B4FA0;
  font-size:11px;
  font-weight:900;
  box-shadow:0 8px 16px -12px rgba(23,21,29,.7);
  animation:aiQuestionBob 3.2s ease-in-out infinite;
}
.ai-live-question{
  flex:1;
  min-width:0;
  color:var(--text-faint);
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:.82;
  transition:opacity .18s ease, transform .18s ease;
}
.ai-input:focus + .ai-live-question,
.ai-input:not(:placeholder-shown) + .ai-live-question{
  opacity:0;
  transform:translateX(6px);
}
.ai-input{
  position:absolute;
  inset:0 58px 0 58px;
  z-index:2;
  opacity:1;
  caret-color:var(--pink-deep);
}
.ai-input::placeholder{
  color:transparent;
}
.ai-composer{
  position:relative;
}
.ai-send{
  position:relative;
  z-index:3;
}
.ai-nudge{
  position:absolute;
  left:22px;
  bottom:72px;
  max-width:min(520px, calc(100vw - 72px));
  padding:9px 13px;
  border-radius:999px 999px 999px 12px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(240,203,184,.9);
  color:var(--text-dim);
  box-shadow:0 18px 38px -28px rgba(23,21,29,.72);
  backdrop-filter:blur(16px);
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:800;
  opacity:0;
  transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity .24s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.ai-nudge.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ai-nudge::after{
  content:'';
  position:absolute;
  left:22px;
  bottom:-6px;
  width:12px;
  height:12px;
  background:inherit;
  border-right:1px solid rgba(240,203,184,.9);
  border-bottom:1px solid rgba(240,203,184,.9);
  transform:rotate(45deg);
}
.ai-message.typing{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:64px;
}
.ai-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
  animation:aiDotBounce .82s ease-in-out infinite;
}
.ai-dot:nth-child(2){ animation-delay:.12s; }
.ai-dot:nth-child(3){ animation-delay:.24s; }
.ai-thinking-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  margin-left:7px;
  border-radius:999px;
  background:var(--pink-soft);
  color:var(--pink-deep);
  font-size:11px;
  font-weight:900;
}
.ai-chip{
  position:relative;
  overflow:hidden;
}
.ai-chip::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-130%);
}
.ai-chip:hover::after{
  animation:aiShimmer .68s ease;
}
@keyframes aiBob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  45%{ transform:translateY(-3px) rotate(-5deg); }
  70%{ transform:translateY(1px) rotate(4deg); }
}
@keyframes aiBlinkFace{
  0%, 92%, 100%{ transform:scaleY(1); }
  94%{ transform:scaleY(.35); }
  96%{ transform:scaleY(1); }
}
@keyframes aiPing{
  0%{ opacity:.76; transform:scale(.72); }
  100%{ opacity:0; transform:scale(1.42); }
}
@keyframes aiQuestionBob{
  0%,100%{ transform:translateY(0) rotate(6deg); }
  50%{ transform:translateY(-4px) rotate(-7deg); }
}
@keyframes aiDotBounce{
  0%,100%{ transform:translateY(0); opacity:.42; }
  50%{ transform:translateY(-4px); opacity:.95; }
}
@keyframes aiShimmer{
  to{ transform:translateX(130%); }
}
html[data-theme="dark"] .ai-nudge{
  background:rgba(20,20,20,.86);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 20px 46px -26px rgba(0,0,0,.92);
}
html[data-theme="dark"] .ai-nudge::after{
  border-color:rgba(255,255,255,.13);
}
html[data-theme="dark"] .ai-avatar::after{
  border-color:#1E1E20;
}
@media (max-width:520px){
  .ai-input{ inset:0 52px 0 52px; }
  .ai-live-question{ font-size:13px; }
  .ai-nudge{ left:12px; bottom:66px; max-width:calc(100vw - 36px); font-size:11.8px; }
}
@media (prefers-reduced-motion: reduce){
  .ai-orb,
  .ai-orb-face,
  .ai-orb-ping,
  .ai-orb::after,
  .ai-dot,
  .ai-chip:hover::after{
    animation:none !important;
  }
}


/* Ask-only assistant: hide the old floating suggestion bubble. */
.ai-nudge{ display:none !important; }

/* ============================================
   THEME TOGGLE + DARK MODE
   ============================================ */
.theme-toggle{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid var(--border);
  background:rgba(255,255,255,0.58);
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover{
  transform:translateY(-2px) rotate(-6deg) scale(1.05);
  border-color:var(--border-hi);
}
.theme-icon{
  position:absolute;
  line-height:1;
  font-size:19px;
  transition:opacity 0.2s ease, transform 0.24s cubic-bezier(.34,1.56,.64,1);
}
.theme-moon{
  opacity:0;
  transform:translateY(14px) rotate(35deg) scale(.72);
}
html[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.16);
  color:var(--butter);
}
html[data-theme="dark"] .theme-sun{
  opacity:0;
  transform:translateY(-14px) rotate(-35deg) scale(.72);
}
html[data-theme="dark"] .theme-moon{
  opacity:1;
  transform:translateY(0) rotate(0deg) scale(1);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121212;
  --bg-soft:#1A1A1C;
  --surface:#1E1E20;
  --surface-tint:#262220;
  --border:#2E2E30;
  --border-hi:#FF7A45;

  --text:#F5F3F0;
  --text-dim:#B7B4B8;
  --text-faint:#86838A;

  --pink:#FF6A33;
  --pink-soft:rgba(255,106,51,0.18);
  --pink-deep:#FF8C5A;

  --lav:#CDB8FF;
  --lav-soft:rgba(205,184,255,0.18);
  --lav-dot:rgba(205,184,255,0.11);

  --mint:#77E6B3;
  --mint-soft:rgba(119,230,179,0.16);

  --butter:#FFE08A;
  --butter-soft:rgba(255,224,138,0.15);

  --sky:#A8D9FF;
  --sky-soft:rgba(168,217,255,0.14);

  --shadow-sm:0 2px 12px rgba(0,0,0,0.36);
  --shadow-md:0 16px 34px -14px rgba(0,0,0,0.62);
  --shadow-lift:0 26px 56px -20px rgba(0,0,0,0.76);
  --shadow-glow:0 0 0 1px rgba(255,106,51,0.18), 0 24px 62px -22px rgba(0,0,0,0.6);
  --nav-bg:rgba(18,18,18,0.84);
  --timeline-halo:0 0 0 8px rgba(18,18,18,0.62);
  --panda-spotlight:radial-gradient(circle at 50% 62%, rgba(255,255,255,0.14) 0 24%, rgba(255,106,51,0.22) 46%, rgba(205,184,255,0.12) 62%, transparent 78%);
  --road:#46464f;
  --road-edge:rgba(255,255,255,0.1);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 18% 10%, rgba(255,90,31,0.12) 0 190px, transparent 360px),
    radial-gradient(circle at 84% 18%, rgba(205,184,255,0.14) 0 220px, transparent 390px),
    radial-gradient(circle at 50% 90%, rgba(119,230,179,0.08) 0 180px, transparent 360px),
    var(--bg);
}
html[data-theme="dark"] .navbar{
  background:rgba(16,16,16,0.82);
  border-bottom-color:rgba(240,203,184,0.14);
  box-shadow:0 18px 42px -30px rgba(0,0,0,.9);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .hero-kicker,
html[data-theme="dark"] .skill-tab,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .story-year,
html[data-theme="dark"] .story-dot{
  background:rgba(30,30,32,0.92);
  backdrop-filter:blur(14px);
}
html[data-theme="dark"] .btn-ghost{
  background:rgba(255,255,255,0.03);
}
html[data-theme="dark"] .tag.lav,
html[data-theme="dark"] .story-type,
html[data-theme="dark"] .skill-card:nth-child(4n+2) .skill-icon{
  color:#E6DCFF;
  border-color:rgba(205,184,255,0.26);
}
html[data-theme="dark"] .tag.mint,
html[data-theme="dark"] .project-outcome,
html[data-theme="dark"] .other-work-icon,
html[data-theme="dark"] .skill-card:nth-child(4n+3) .skill-icon{
  color:#BDF8DB;
  border-color:rgba(119,230,179,0.25);
}
html[data-theme="dark"] .cert-badge{
  color:#FFE7A6;
}
html[data-theme="dark"] .skill-card:nth-child(4n+4) .skill-icon{
  color:#D7EEFF;
}
html[data-theme="dark"] .hero-photo-frame,
html[data-theme="dark"] .about-photo-main{
  border-color:rgba(255,255,255,0.09);
  background:linear-gradient(160deg, rgba(255,90,31,0.20), rgba(205,184,255,0.22));
}
html[data-theme="dark"] .hero-blob-frame::before{
  background:linear-gradient(160deg, rgba(255,90,31,0.88), rgba(216,67,12,0.92));
}
html[data-theme="dark"] .hero-role-pill{
  border-color:rgba(255,255,255,0.12);
}
html[data-theme="dark"] .sticker-1,
html[data-theme="dark"] .sticker-2,
html[data-theme="dark"] .sticker-3,
html[data-theme="dark"] .gallery-item{
  border-color:rgba(255,255,255,0.08);
}
html[data-theme="dark"] .skill-theatre{
  background:linear-gradient(135deg, rgba(30,30,32,0.96) 0%, rgba(22,22,24,0.98) 100%);
}
html[data-theme="dark"] .skill-theatre::before{
  background:
    radial-gradient(circle at 18% 16%, rgba(255,90,31,0.22) 0 106px, transparent 116px),
    radial-gradient(circle at 82% 14%, rgba(205,184,255,0.22) 0 118px, transparent 130px),
    radial-gradient(circle at 50% 94%, rgba(119,230,179,0.14) 0 170px, transparent 185px),
    conic-gradient(from 0deg at 50% 50%, rgba(255,90,31,0.2), rgba(205,184,255,0.22), rgba(119,230,179,0.16), rgba(255,90,31,0.2));
}
html[data-theme="dark"] .skill-theatre::after{
  background-image:
    radial-gradient(1.4px 1.4px at 14% 26%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 32% 62%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.7px 1.7px at 58% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 70%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 38%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 46% 84%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 78%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 24% 42%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 92% 60%, rgba(255,255,255,0.75), transparent 60%);
  opacity:0.85;
}
html[data-theme="dark"] .float-bubble{
  opacity:0.7;
  filter:blur(0.5px) brightness(1.2);
}
html[data-theme="dark"] .skill-orb{
  background:
    radial-gradient(circle at 33% 25%, rgba(255,255,255,0.20) 0 42px, transparent 96px),
    radial-gradient(circle at 62% 66%, rgba(255,90,31,0.18) 0 94px, transparent 178px),
    radial-gradient(circle at 50% 50%, rgba(205,184,255,0.18) 0%, rgba(30,30,32,0.82) 58%, rgba(10,10,11,0.95) 100%);
  border-color:rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 38px rgba(255,255,255,0.09),
    inset 0 -24px 50px rgba(205,184,255,0.14),
    0 30px 70px -32px rgba(0,0,0,0.88);
}
html[data-theme="dark"] .skill-orb::before{
  background:radial-gradient(circle, rgba(255,255,255,0.19) 0 18%, rgba(205,184,255,0.12) 46%, transparent 70%);
}
html[data-theme="dark"] .skill-orb::after{
  background:linear-gradient(180deg, rgba(255,255,255,0.23), rgba(255,255,255,0));
}
html[data-theme="dark"] .bowl-label{
  background:#1E1E20;
  border-color:rgba(255,255,255,0.12);
}
html[data-theme="dark"] .skill-chip{
  border-color:rgba(255,255,255,0.14);
  color:#251A2F;
  box-shadow:0 14px 28px -18px rgba(0,0,0,0.88);
}
html[data-theme="dark"] .skill-chip::before{ color:rgba(37,26,47,0.64); }
html[data-theme="dark"] .job-photo,
html[data-theme="dark"] .to-top{
  border-color:rgba(255,255,255,0.10);
}
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea{
  background:rgba(18,18,18,0.64);
}
html[data-theme="dark"] .panda-buddy{
  filter:drop-shadow(0 20px 26px rgba(0,0,0,0.45));
}
.panda-buddy{
  isolation:isolate;
  overflow:visible;
}
.panda-thought{
  position:absolute;
  left:-18px;
  top:23px;
  min-width:30px;
  height:27px;
  padding:0 7px;
  border-radius:14px 14px 14px 6px;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
  border:2px solid var(--surface);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:900;
  line-height:1;
  box-shadow:0 9px 18px -13px rgba(23,21,29,.55);
  transform:rotate(-8deg) scale(1);
  transform-origin:80% 100%;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, border-color .2s ease;
  z-index:3;
}
.panda-thought::after{
  content:'';
  position:absolute;
  right:-4px;
  bottom:2px;
  width:9px;
  height:9px;
  background:inherit;
  border-right:2px solid var(--surface);
  border-bottom:2px solid var(--surface);
  transform:rotate(-18deg);
  border-radius:0 0 4px 0;
}
.panda-buddy.idle .panda-thought{
  transform:rotate(-10deg) translateY(1px) scale(.95);
}
.panda-buddy.sleeping .panda-thought{
  background:#fff;
  color:var(--pink-deep);
  border-color:rgba(255,255,255,.92);
  transform:rotate(-12deg) translateY(5px) scale(.9);
}
html[data-theme="dark"] .panda-thought{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 22px -18px rgba(0,0,0,.88);
}
@media (max-width:768px){
  .panda-thought{
    left:-13px;
    top:16px;
    min-width:24px;
    height:22px;
    padding:0 5px;
    border-width:2px;
    font-size:11px;
  }
  .panda-thought::after{
    right:-3px;
    width:7px;
    height:7px;
    border-right-width:2px;
    border-bottom-width:2px;
  }
}
.panda-buddy::before{
  content:'';
  position:absolute;
  inset:4% 0 -4%;
  z-index:-1;
  border-radius:999px;
  background:var(--panda-spotlight);
  filter:blur(6px);
  opacity:.95;
}
html[data-theme="dark"] .panda-buddy::before{
  filter:blur(8px);
  opacity:1;
}
@media (max-width:520px){
  .theme-toggle{
    min-width:42px;
    width:42px;
    padding:0;
  }
}




/* ============================================
   SLEEK AI ASSISTANT OVERRIDE - compact glass panel
   ============================================ */
.portfolio-ai{
  left:50%;
  right:auto;
  bottom:30px;
  width:min(790px, calc(100vw - 48px));
  min-width:0;
  height:62px;
  transform:translateX(-50%);
  z-index:130;
  pointer-events:none;
  --ai-glass:rgba(18,18,29,0.68);
  --ai-glass-strong:rgba(24,24,24,0.78);
  --ai-line:rgba(255,255,255,0.13);
  --ai-line-strong:rgba(255,255,255,0.20);
  --ai-white:rgba(255,255,255,0.92);
  --ai-muted:rgba(255,255,255,0.58);
  transition:height .28s cubic-bezier(.34,1.18,.64,1), width .24s ease, bottom .24s ease;
}
.portfolio-ai.is-open{
  height:min(445px, calc(100vh - 132px));
}
.ai-panel,
.ai-composer{
  pointer-events:auto;
}
.ai-panel{
  position:absolute;
  inset:0;
  margin:0;
  height:100%;
  max-height:none;
  opacity:0;
  transform:translateY(12px) scale(.985);
  border-radius:25px;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)), var(--ai-glass);
  border:1px solid var(--ai-line);
  box-shadow:0 34px 84px -42px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(24px) saturate(1.12);
  -webkit-backdrop-filter:blur(24px) saturate(1.12);
  overflow:hidden;
  padding-bottom:62px;
  transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.18,.64,1);
}
.portfolio-ai.is-open .ai-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  max-height:none;
}
.ai-panel::before{
  content:'';
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 78% 35%, rgba(255,90,31,.20), transparent 28%),
    radial-gradient(circle at 63% 55%, rgba(183,156,232,.18), transparent 25%),
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.09), transparent 30%);
  filter:blur(18px);
  opacity:.85;
  pointer-events:none;
}
.ai-panel-head{
  position:relative;
  z-index:2;
  height:58px;
  padding:0 16px 0 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ai-title{
  min-width:0;
  gap:9px;
  font-size:13px;
  font-weight:850;
  color:var(--ai-white);
  line-height:1;
}
.ai-title > span:last-child{
  display:flex;
  align-items:center;
  min-width:0;
  gap:7px;
}
#aiBotName{
  max-width:220px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:inline-block;
}
#aiBotName.is-switching{
  animation:aiNamePop .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes aiNamePop{
  0%{ opacity:.45; transform:translateY(5px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.ai-title small{
  display:none;
}
.ai-status{
  width:7px;
  height:7px;
  min-width:7px;
  margin:0;
  padding:0;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(119,230,179,.12);
  font-size:0;
  line-height:0;
  overflow:hidden;
}
.ai-status::before{
  display:none;
}
.ai-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 18px -14px rgba(0,0,0,.8);
}
.ai-avatar::after{
  display:none;
}
.ai-avatar-fallback{
  font-size:9px;
  border-radius:inherit;
}
.ai-close{
  width:28px;
  height:28px;
  min-width:28px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.ai-close:hover{
  color:#fff;
  background:rgba(255,255,255,.13);
  transform:scale(1.05);
}
.ai-messages{
  position:absolute;
  z-index:2;
  inset:58px 0 62px 0;
  max-height:none;
  padding:104px 22px 18px;
  overflow:auto;
  gap:14px;
  display:flex;
  flex-direction:column;
}
.ai-message{
  font-family:var(--font-body);
  font-size:13.3px;
  line-height:1.68;
  font-weight:650;
}
.ai-message.bot{
  align-self:flex-start;
  width:auto;
  max-width:min(620px, 74%);
  padding:0 0 0 12px;
  border:0;
  border-left:2px solid rgba(255,255,255,.16);
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.92);
}
.ai-message.user{
  align-self:flex-end;
  max-width:min(380px, 60%);
  padding:10px 14px;
  border-radius:18px;
  border:1px solid var(--ai-line-strong);
  background:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ai-message.typing{
  padding:8px 12px;
  border:1px solid var(--ai-line);
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.ai-suggestions{
  position:absolute;
  z-index:3;
  top:78px;
  right:18px;
  left:auto;
  width:min(350px, calc(100% - 36px));
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.ai-chip{
  padding:8px 13px;
  border-radius:999px;
  border:1px solid var(--ai-line-strong);
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.86);
  font-size:11.8px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ai-chip:hover{
  color:#fff;
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.13);
  transform:translateY(-1px);
}
.ai-composer{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  height:62px;
  margin:0;
  padding:0 10px 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  border-radius:0 0 25px 25px;
  background:rgba(5,5,12,.18);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.portfolio-ai:not(.is-open){
  width:min(540px, calc(100vw - 48px));
}
.portfolio-ai:not(.is-open) .ai-composer{
  position:relative;
  height:58px;
  border:1px solid var(--ai-line-strong);
  border-radius:999px;
  background:rgba(18,18,29,.72);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.90), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
}
.ai-orb{
  width:24px;
  height:24px;
  min-width:24px;
  box-shadow:0 0 0 3px rgba(255,90,31,.10);
}
.ai-orb::after{
  right:-5px;
  top:-7px;
  width:15px;
  height:15px;
  font-size:10px;
}
.ai-orb-ping{
  inset:-5px;
  border-color:rgba(255,255,255,.14);
}
.ai-input{
  position:relative;
  inset:auto;
  z-index:2;
  height:100%;
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  padding:0;
  background:transparent;
  color:#fff;
  caret-color:#fff;
  font-size:13px;
  font-weight:700;
}
.ai-live-question{
  position:absolute;
  left:54px;
  right:58px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.48);
  font-size:12.8px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:.9;
}
.ai-input:focus + .ai-live-question,
.ai-input:not(:placeholder-shown) + .ai-live-question{
  opacity:0;
  transform:translateY(-50%) translateX(5px);
}
.ai-send{
  width:34px;
  height:34px;
  min-width:34px;
  font-size:17px;
  background:#fff;
  color:#151520;
  box-shadow:0 14px 24px -17px rgba(0,0,0,.88);
}
.ai-send:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 18px 30px -18px rgba(0,0,0,.95);
}
.ai-thinking-chip{
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
}
.ai-nudge{
  left:14px;
  bottom:74px;
  max-width:min(470px, calc(100vw - 64px));
  background:rgba(18,18,29,.74);
  border:1px solid var(--ai-line);
  color:rgba(255,255,255,.76);
  box-shadow:0 18px 42px -28px rgba(0,0,0,.86);
}
.ai-nudge::after{
  border-color:var(--ai-line);
}
html[data-theme="light"] .portfolio-ai{
  --ai-glass:rgba(255,255,255,.74);
  --ai-glass-strong:rgba(255,255,255,.86);
  --ai-line:rgba(23,21,29,.13);
  --ai-line-strong:rgba(23,21,29,.20);
  --ai-white:var(--text);
  --ai-muted:var(--text-dim);
}
html[data-theme="light"] .ai-panel{
  background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,241,247,.54));
  box-shadow:0 32px 80px -42px rgba(23,21,29,.50), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .ai-panel::before{
  background:
    radial-gradient(circle at 78% 35%, rgba(255,90,31,.22), transparent 28%),
    radial-gradient(circle at 63% 55%, rgba(183,156,232,.20), transparent 25%),
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.45), transparent 30%);
}
html[data-theme="light"] .ai-title,
html[data-theme="light"] .ai-message.bot,
html[data-theme="light"] .ai-input{
  color:var(--text);
}
html[data-theme="light"] .ai-message.bot{
  border-left-color:rgba(23,21,29,.16);
}
html[data-theme="light"] .ai-message.user,
html[data-theme="light"] .ai-chip{
  color:var(--text);
  background:rgba(255,255,255,.62);
}
html[data-theme="light"] .ai-composer,
html[data-theme="light"] .portfolio-ai:not(.is-open) .ai-composer{
  background:rgba(255,255,255,.78);
}
html[data-theme="light"] .ai-live-question{
  color:var(--text-faint);
}
html[data-theme="light"] .ai-send{
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
}
@media (max-width:960px){
  .portfolio-ai{
    bottom:104px;
    width:calc(100vw - 28px);
  }
  .portfolio-ai.is-open{
    height:min(410px, calc(100vh - 150px));
  }
  .portfolio-ai:not(.is-open){
    width:calc(100vw - 28px);
  }
}
@media (max-width:560px){
  .portfolio-ai{
    bottom:98px;
    width:calc(100vw - 22px);
  }
  .portfolio-ai.is-open{
    height:min(390px, calc(100vh - 132px));
  }
  .ai-panel,
  .ai-composer{
    border-radius:22px;
  }
  .ai-composer{
    height:58px;
    border-radius:0 0 22px 22px;
    padding-left:14px;
  }
  .ai-panel{
    padding-bottom:58px;
  }
  .ai-panel-head{
    height:54px;
    padding:0 12px 0 14px;
  }
  #aiBotName{
    max-width:170px;
  }
  .ai-suggestions{
    top:70px;
    right:12px;
    width:calc(100% - 24px);
  }
  .ai-chip{
    padding:7px 10px;
    font-size:11px;
  }
  .ai-messages{
    inset:54px 0 58px 0;
    padding:104px 14px 16px;
  }
  .ai-message.bot,
  .ai-message.user{
    max-width:92%;
  }
  .ai-live-question{
    left:48px;
    right:54px;
    font-size:12.2px;
  }
  .ai-send{
    width:32px;
    height:32px;
    min-width:32px;
  }
}


/* ============================================
   COMPACT AI ASSISTANT OVERRIDE - smaller reference-style panel
   ============================================ */
.portfolio-ai{
  width:min(430px, calc(100vw - 44px)) !important;
  height:54px !important;
  bottom:26px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}
.portfolio-ai.is-open{
  width:min(620px, calc(100vw - 44px)) !important;
  height:min(315px, calc(100vh - 128px)) !important;
}
.ai-panel{
  border-radius:20px !important;
  padding-bottom:54px !important;
  box-shadow:0 26px 64px -38px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.ai-panel-head{
  height:48px !important;
  padding:0 12px 0 14px !important;
  gap:10px !important;
}
.ai-title{
  gap:8px !important;
  font-size:12.2px !important;
}
.ai-title > span:last-child{
  gap:6px !important;
}
#aiBotName{
  max-width:180px !important;
}
.ai-status{
  width:6px !important;
  height:6px !important;
  min-width:6px !important;
  box-shadow:0 0 0 3px rgba(119,230,179,.12) !important;
}
.ai-avatar{
  width:24px !important;
  height:24px !important;
}
.ai-avatar-fallback{
  font-size:8px !important;
}
.ai-close{
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  font-size:16px !important;
}
.ai-messages{
  inset:48px 0 54px 0 !important;
  padding:72px 18px 12px !important;
  gap:10px !important;
}
.ai-message{
  font-size:12.2px !important;
  line-height:1.55 !important;
}
.ai-message.bot{
  max-width:min(390px, 70%) !important;
  padding-left:10px !important;
  border-left-width:2px !important;
}
.ai-message.user{
  max-width:min(280px, 58%) !important;
  padding:8px 12px !important;
  border-radius:15px !important;
}
.ai-message.typing{
  min-width:52px !important;
  padding:7px 10px !important;
}
.ai-suggestions{
  top:60px !important;
  right:14px !important;
  width:min(255px, calc(100% - 28px)) !important;
  gap:6px !important;
}
.ai-suggestions .ai-chip:nth-child(n+2){
  display:none !important;
}
.ai-chip{
  padding:7px 11px !important;
  font-size:11px !important;
}
.ai-composer{
  height:54px !important;
  padding:0 8px 0 14px !important;
  border-radius:0 0 20px 20px !important;
  gap:8px !important;
}
.portfolio-ai:not(.is-open){
  width:min(430px, calc(100vw - 44px)) !important;
}
.portfolio-ai:not(.is-open) .ai-composer{
  height:52px !important;
}
.ai-orb{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
}
.ai-orb::after{
  right:-5px !important;
  top:-7px !important;
  width:14px !important;
  height:14px !important;
  font-size:9px !important;
}
.ai-live-question{
  left:48px !important;
  right:50px !important;
  font-size:12px !important;
}
.ai-input{
  font-size:12.5px !important;
}
.ai-send{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  font-size:15px !important;
}
.ai-nudge{
  bottom:62px !important;
  max-width:min(360px, calc(100vw - 56px)) !important;
  font-size:11.5px !important;
  padding:7px 11px !important;
}
@media (max-width:960px){
  .portfolio-ai{
    bottom:100px !important;
    width:min(430px, calc(100vw - 28px)) !important;
  }
  .portfolio-ai.is-open{
    width:min(560px, calc(100vw - 28px)) !important;
    height:min(300px, calc(100vh - 146px)) !important;
  }
}
@media (max-width:560px){
  .portfolio-ai{
    bottom:94px !important;
    width:calc(100vw - 22px) !important;
  }
  .portfolio-ai.is-open{
    width:calc(100vw - 22px) !important;
    height:min(290px, calc(100vh - 128px)) !important;
  }
  .ai-panel,
  .ai-composer{
    border-radius:18px !important;
  }
  .ai-composer{
    height:52px !important;
    border-radius:0 0 18px 18px !important;
    padding-left:12px !important;
  }
  .ai-panel{
    padding-bottom:52px !important;
  }
  .ai-panel-head{
    height:46px !important;
    padding:0 10px 0 12px !important;
  }
  #aiBotName{
    max-width:155px !important;
  }
  .ai-suggestions{
    top:56px !important;
    right:10px !important;
    width:calc(100% - 20px) !important;
  }
  .ai-messages{
    inset:46px 0 52px 0 !important;
    padding:68px 12px 12px !important;
  }
  .ai-message.bot,
  .ai-message.user{
    max-width:88% !important;
  }
  .ai-live-question{
    left:44px !important;
    right:48px !important;
    font-size:11.6px !important;
  }
}


/* ============================================
   AI INPUT FOCUS FIX - removes the giant purple typing box
   ============================================ */
.ai-input:focus,
.ai-input:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}
.ai-composer:focus-within{
  outline:none !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.portfolio-ai:not(.is-open) .ai-composer:focus-within{
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.90), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html[data-theme="light"] .ai-composer:focus-within{
  border-color:rgba(23,21,29,.16) !important;
}
html[data-theme="light"] .portfolio-ai:not(.is-open) .ai-composer:focus-within{
  border-color:rgba(23,21,29,.22) !important;
}



/* ============================================
   AI BOT SUGGESTION PILL BAR - reference-style typing state
   Shows three helpful questions above the input instead of one bulky panel chip.
   ============================================ */
.portfolio-ai{
  width:min(660px, calc(100vw - 48px)) !important;
  height:112px !important;
  bottom:26px !important;
}
.portfolio-ai.is-open{
  width:min(620px, calc(100vw - 48px)) !important;
  height:min(315px, calc(100vh - 128px)) !important;
}
.portfolio-ai:not(.is-open) .ai-panel{
  display:none !important;
}
.ai-suggestions{
  position:absolute !important;
  z-index:8 !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:66px !important;
  width:auto !important;
  max-width:none !important;
  padding:0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  pointer-events:auto !important;
  opacity:1 !important;
  transform:none !important;
}
.portfolio-ai.is-open .ai-suggestions{
  bottom:64px !important;
  padding:0 18px !important;
}
.ai-suggestions .ai-chip,
.ai-suggestions .ai-chip:nth-child(n+2){
  display:inline-flex !important;
}
.ai-chip{
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:8px 15px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.075) !important;
  color:rgba(255,255,255,.88) !important;
  font-family:var(--font-display) !important;
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 30px -24px rgba(0,0,0,.85) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
.ai-chip:hover,
.ai-chip:focus-visible{
  color:#fff !important;
  border-color:rgba(255,255,255,.36) !important;
  background:rgba(255,255,255,.12) !important;
  transform:translateY(-2px) !important;
}
.portfolio-ai:not(.is-open) .ai-composer{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:56px !important;
  border-radius:999px !important;
  padding:0 9px 0 18px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(18,18,29,.66) !important;
  box-shadow:0 26px 64px -38px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.08) !important;
}
.portfolio-ai.is-open .ai-panel{
  padding-bottom:104px !important;
}
.portfolio-ai.is-open .ai-messages{
  inset:48px 0 106px 0 !important;
  padding:20px 18px 12px !important;
}
.portfolio-ai.is-open .ai-composer{
  height:54px !important;
}
html[data-theme="light"] .ai-chip{
  color:var(--text) !important;
  border-color:rgba(23,21,29,.17) !important;
  background:rgba(255,255,255,.70) !important;
}
html[data-theme="light"] .portfolio-ai:not(.is-open) .ai-composer{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(23,21,29,.18) !important;
}
@media (max-width:720px){
  .portfolio-ai,
  .portfolio-ai:not(.is-open){
    width:calc(100vw - 24px) !important;
    height:110px !important;
    bottom:94px !important;
  }
  .portfolio-ai.is-open{
    width:calc(100vw - 24px) !important;
    height:min(300px, calc(100vh - 128px)) !important;
    bottom:94px !important;
  }
  .ai-suggestions{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    gap:8px !important;
    padding:0 4px !important;
  }
  .ai-suggestions::-webkit-scrollbar{ display:none !important; }
  .ai-chip{
    min-height:32px !important;
    padding:8px 12px !important;
    font-size:11.3px !important;
  }
  .portfolio-ai.is-open .ai-messages{
    inset:46px 0 104px 0 !important;
    padding:18px 12px 10px !important;
  }
}



/* ============================================
   AI BOT CLICK-TO-SHOW GLASS SUGGESTIONS
   Suggestions stay hidden until the chat bar/input is clicked.
   ============================================ */
.portfolio-ai:not(.is-open){
  height:58px !important;
}
.portfolio-ai.is-suggesting:not(.is-open){
  height:114px !important;
}
.ai-suggestions{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) scale(.985) !important;
  transition:opacity .22s ease, transform .26s cubic-bezier(.34,1.25,.64,1), visibility .22s ease !important;
}
.portfolio-ai.is-suggesting .ai-suggestions{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}
.portfolio-ai.is-open:not(.is-suggesting) .ai-suggestions{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.ai-chip{
  border:1px solid rgba(255,255,255,.26) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 18px 42px -28px rgba(0,0,0,.92) !important;
  backdrop-filter:blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18) !important;
}
.ai-chip::before{
  content:'✦';
  margin-right:7px;
  opacity:.9;
  font-size:11px;
}
.portfolio-ai:not(.is-open) .ai-composer{
  bottom:0 !important;
}
.portfolio-ai.is-suggesting:not(.is-open) .ai-composer{
  box-shadow:0 26px 64px -38px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(205,184,255,.18) !important;
}
html[data-theme="light"] .ai-chip{
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.58)) !important;
  border-color:rgba(23,21,29,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 18px 34px -28px rgba(23,21,29,.55) !important;
}
@media (max-width:720px){
  .portfolio-ai:not(.is-open){
    height:58px !important;
  }
  .portfolio-ai.is-suggesting:not(.is-open){
    height:112px !important;
  }
}



/* ============================================
   AI BOT STORY-STYLE MESSAGES
   Cleaner conversation like the reference: user pills on the right,
   bot text on the left, and insight lines quietly separated.
   ============================================ */
.portfolio-ai.is-open .ai-panel{
  background:linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 28px 78px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(26px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.12) !important;
}
.ai-message.bot{
  align-self:flex-start !important;
  max-width:84% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.92) !important;
  font-size:14px !important;
  line-height:1.62 !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
.ai-message.bot .ai-message-paragraph{
  margin:0 0 8px;
}
.ai-message.bot .ai-message-paragraph:last-child{
  margin-bottom:0;
}
.ai-message.bot .ai-message-insight{
  margin-top:7px;
  padding-left:13px;
  border-left:1.5px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.66);
  font-size:13px;
  line-height:1.55;
  font-style:italic;
  font-weight:650;
}
.ai-message.user{
  align-self:flex-end !important;
  max-width:72% !important;
  padding:9px 14px !important;
  border-radius:20px 20px 7px 20px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(255,255,255,.105) !important;
  color:rgba(255,255,255,.94) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -25px rgba(0,0,0,.86) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
.ai-message.typing{
  padding:8px 0 !important;
}
.portfolio-ai.is-open .ai-messages{
  gap:18px !important;
}
html[data-theme="light"] .portfolio-ai.is-open .ai-panel{
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,239,246,.58)) !important;
  border-color:rgba(23,21,29,.14) !important;
  box-shadow:0 28px 62px -34px rgba(23,21,29,.55), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
html[data-theme="light"] .ai-message.bot{
  color:var(--text) !important;
}
html[data-theme="light"] .ai-message.bot .ai-message-insight{
  border-left-color:rgba(23,21,29,.23);
  color:var(--text-dim);
}
html[data-theme="light"] .ai-message.user{
  background:rgba(23,21,29,.07) !important;
  border-color:rgba(23,21,29,.16) !important;
  color:var(--text) !important;
}
@media (max-width:520px){
  .ai-message.bot{ max-width:92% !important; font-size:13.5px !important; }
  .ai-message.user{ max-width:82% !important; }
}


/* ============================================
   CENTERED SECTION HEADINGS
   ============================================ */
.section > .wrap > .reveal:first-child{
  text-align:center;
}
.section > .wrap > .reveal:first-child .section-title,
.section > .wrap > .reveal:first-child .section-sub{
  margin-left:auto;
  margin-right:auto;
}
.section > .wrap > .reveal:first-child .section-sub{
  max-width:680px;
}
#experience .wrap > .reveal > h3{
  text-align:center;
}
#experience .wrap > .reveal[style]{
  text-align:initial;
}
#contact .contact-card > h3,
#contact .contact-card > p:first-of-type{
  text-align:center;
}
.project-top{
  align-items:center;
}
.project-name{
  flex:1;
  text-align:center;
}
@media (max-width:860px){
  .project-top{
    justify-content:center;
  }
}



/* ============================================
   EXTRA COMPACT TYPOGRAPHY PASS
   Makes hero, nav, buttons, and section text smaller.
   ============================================ */
body{
  font-size:14px;
  line-height:1.55;
}
.wrap{
  padding-left:22px;
  padding-right:22px;
}
.section{
  padding:82px 0;
}
.section-title{
  font-size:clamp(27px,3.4vw,38px);
  margin-bottom:10px;
}
.section-sub{
  font-size:13px;
  margin-bottom:30px;
}
.nav-inner{
  padding:10px 24px;
}
.nav-brand{
  font-size:15.5px;
  gap:8px;
}
.nav-links{
  gap:22px;
  font-size:12.5px;
}
.nav-cta{
  gap:10px;
}
.ip-logo{
  width:38px;
  height:38px;
}
.ip-logo-sm{
  width:26px;
  height:26px;
}
.ip-logo-lg{
  width:94px;
  height:94px;
  margin-bottom:20px;
}
.theme-toggle{
  width:38px;
  height:38px;
}
.btn{
  font-size:12.5px;
  padding:10px 21px;
}
.hero{
  min-height:88vh;
  padding-top:96px;
  padding-bottom:46px;
}
.hero-inner{
  gap:42px;
}
.hero-name{
  font-size:clamp(32px,5vw,48px);
  letter-spacing:-0.035em;
  line-height:1.05;
  margin-bottom:8px;
}
.hero-role{
  font-size:clamp(14px,1.7vw,17px);
  margin-bottom:16px;
}
.hero-summary{
  font-size:14px;
  line-height:1.55;
  max-width:455px;
  margin-bottom:24px;
}
.hero-actions{
  margin-bottom:24px;
}
.tag{
  font-size:11.5px;
  padding:5px 12px;
}
.hero-photo-frame{
  max-width:330px;
}
.about-text p{
  font-size:14px;
  line-height:1.58;
}
.story-title,
.timeline-role,
.job-role{
  font-size:16.5px;
}
.project-name{
  font-size:17px;
}
.project-problem,
.job-desc,
.timeline-points li,
.project-detail-val{
  font-size:12.5px;
}
.cert-name{
  font-size:14px;
}
.contact-card{
  padding:30px;
}
.footer-brand{
  font-size:12.5px;
}

@media (max-width:768px){
  body{ font-size:13.5px; }
  .section{ padding:58px 0; }
  .nav-inner{ padding:9px 18px; }
  .hero{ padding-top:72px; min-height:auto; padding-bottom:46px; }
  .ip-logo-lg{ width:76px; height:76px; margin-bottom:12px; }
  .hero-name{ font-size:clamp(30px,9vw,42px); letter-spacing:-0.03em; margin-bottom:6px; }
  .hero-role{ margin-bottom:10px; }
  .hero-summary{ font-size:13.5px; margin-bottom:16px; }
  .hero-actions{ margin-bottom:16px; }
  .section-title{ font-size:clamp(24px,7.5vw,32px); }
}


/* ============================================
   EDUCATION + EXPERIENCE LOGOS - larger image only, no logo box
   ============================================ */
.edu-card{
  grid-template-columns:150px 1fr;
  align-items:center;
}
.job-top{
  grid-template-columns:180px 1fr;
  align-items:center;
  gap:28px;
}
.edu-photo,
.job-photo,
.logo-photo,
.edu-photo.logo-photo{
  width:132px;
  height:132px;
  padding:0 !important;
  margin:0 auto;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible;
}
.job-photo.logo-photo{
  width:164px;
  height:164px;
}
.logo-photo::before{
  display:none !important;
}
.logo-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0 !important;
  filter:saturate(1.02) contrast(1.04);
}
.logo-photo:hover img,
.job-card:hover .logo-photo img,
.edu-card:hover .logo-photo img{
  transform:scale(1.06);
  filter:saturate(1.1) contrast(1.05);
}
.logo-fallback{
  background:transparent !important;
  border-radius:0 !important;
  color:var(--pink-deep);
  font-size:30px;
}

/* Logos that ship with their own solid/branded background (e.g. Jabil, Dreamscape)
   get a rounded, blended tile instead of a flat edge-to-edge square. */
.job-photo.logo-photo-fill,
.edu-photo.logo-photo-fill{
  border-radius:var(--radius-md) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow-sm) !important;
  background:var(--surface) !important;
}
.job-photo.logo-photo-fill img{
  border-radius:var(--radius-md) !important;
  object-fit:cover !important;
}

@media (max-width:600px){
  .edu-card,
  .job-top{
    grid-template-columns:1fr;
    text-align:center;
  }
  .edu-photo,
  .job-photo,
  .logo-photo,
  .edu-photo.logo-photo,
  .job-photo.logo-photo{
    width:112px;
    height:112px;
  }
}


/* ============================================
   HEART HEALTH PROJECT MINI SHOWCASE
   Compact animated project image section from the full Heart Health showcase.
   ============================================ */
.heart-health-thumb{
  height:250px;
  padding:0;
  border-bottom:1px solid var(--border);
  overflow:hidden;
  align-items:stretch;
  justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(226,75,74,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(183,156,232,.26), transparent 34%),
    linear-gradient(135deg, #fff8f8 0%, #fff6ef 48%, #f6efff 100%);
}
.heart-mini-showcase{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--font-body);
  color:var(--text);
}
.heart-mini-glow{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 24% 36%, rgba(226,75,74,.22), transparent 24%),
    radial-gradient(circle at 76% 58%, rgba(95,203,154,.18), transparent 24%),
    radial-gradient(circle at 62% 18%, rgba(143,199,242,.18), transparent 26%);
  filter:blur(10px);
  animation:hhGlowDrift 8s ease-in-out infinite;
  z-index:-1;
}
.heart-mini-topline{
  position:absolute;
  top:14px;
  left:16px;
  right:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  z-index:4;
}
.heart-mini-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:6px 11px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid rgba(226,75,74,.18);
  color:#A32D2D;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:800;
  box-shadow:0 12px 22px -18px rgba(23,21,29,.48);
}
.heart-mini-chip.alert{
  background:#FBE6E6;
  border-color:rgba(226,75,74,.28);
}
.heart-mini-scene{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:52px 24px 24px;
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .42s ease, transform .48s cubic-bezier(.34,1.3,.64,1);
}
.heart-mini-scene.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}
.heart-pulse-mini{
  position:relative;
  width:74px;
  height:74px;
  flex-shrink:0;
}
.heart-pulse-mini > span{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(226,75,74,.68);
  animation:hhRipple 2s ease-out infinite;
}
.heart-pulse-mini > span:nth-child(2){ animation-delay:.55s; }
.heart-pulse-mini > span:nth-child(3){ animation-delay:1.1s; }
.heart-core-mini{
  position:absolute;
  inset:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#FCEBEB;
  border:1.5px solid #E24B4A;
  color:#E24B4A;
  box-shadow:0 14px 30px -18px rgba(226,75,74,.75);
}
.heart-core-mini svg{ width:25px; height:25px; }
.heart-mini-copy{
  position:relative;
  z-index:2;
  max-width:430px;
  text-align:center;
}
.heart-mini-copy strong{
  display:block;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.1;
  color:#A32D2D;
  margin-bottom:4px;
}
.heart-mini-copy span{
  display:block;
  color:var(--text-dim);
  font-size:12.4px;
  font-weight:700;
  line-height:1.45;
}
.heart-ecg-mini{
  width:min(86%, 410px);
  height:52px;
  overflow:visible;
}
.heart-ecg-mini polyline{
  fill:none;
  stroke:#E24B4A;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:720;
  stroke-dashoffset:720;
  animation:hhDrawEcg 2.4s ease forwards infinite;
}
.patient-spark-grid{
  width:min(430px, 92%);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.patient-spark-grid span{
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(55,138,221,.18);
  color:#0C447C;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:800;
  box-shadow:0 12px 20px -18px rgba(23,21,29,.50);
  animation:hhPatientPop 2.4s ease-in-out infinite;
}
.patient-spark-grid span:nth-child(2n){ animation-delay:.12s; }
.patient-spark-grid span:nth-child(3n){ animation-delay:.24s; }
.patient-spark-grid em{
  font-style:normal;
  font-size:15px;
  color:var(--text);
  line-height:1;
  margin-top:3px;
}
.patient-spark-grid .warn{
  border-color:rgba(226,75,74,.30);
  background:rgba(252,235,235,.82);
  color:#A32D2D;
}
.pipeline-orbit{
  width:min(480px, 96%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.pipeline-orbit span{
  min-width:52px;
  padding:10px 8px;
  border-radius:14px;
  text-align:center;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(183,156,232,.28);
  color:#534AB7;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:900;
  box-shadow:0 14px 24px -20px rgba(23,21,29,.6);
}
.pipeline-orbit i{
  position:relative;
  width:18px;
  height:2px;
  border-radius:999px;
  background:rgba(226,75,74,.32);
  flex:0 0 18px;
  overflow:hidden;
}
.pipeline-orbit i::after{
  content:'';
  position:absolute;
  inset:0;
  width:40%;
  border-radius:inherit;
  background:#E24B4A;
  animation:hhFlow 1.4s linear infinite;
}
.mini-bars{
  width:min(330px, 82%);
  height:54px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
}
.mini-bars b{
  width:24px;
  border-radius:6px 6px 2px 2px;
  background:#E1F5EE;
  border:1px solid #1D9E75;
  animation:hhBars 1.6s ease-in-out infinite;
}
.mini-bars b:nth-child(1){ height:22px; animation-delay:.05s; }
.mini-bars b:nth-child(2){ height:38px; animation-delay:.12s; }
.mini-bars b:nth-child(3){ height:29px; animation-delay:.19s; }
.mini-bars b:nth-child(4){ height:48px; background:#FAEEDA; border-color:#BA7517; animation-delay:.26s; }
.mini-bars b:nth-child(5){ height:34px; animation-delay:.33s; }
.mini-bars b:nth-child(6){ height:44px; background:#FAEEDA; border-color:#BA7517; animation-delay:.40s; }
.mini-bars b:nth-child(7){ height:25px; animation-delay:.47s; }
.risk-alert-card{
  width:min(390px, 86%);
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,248,248,.86);
  border:1.5px solid rgba(226,75,74,.55);
  box-shadow:0 20px 34px -24px rgba(226,75,74,.65);
  animation:hhAlertPulse 2s ease-in-out infinite;
}
.risk-alert-card div{
  display:flex;
  align-items:center;
  gap:9px;
  color:#A32D2D;
  font-family:var(--font-display);
  font-size:15px;
}
.blink-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#E24B4A;
  box-shadow:0 0 0 5px rgba(226,75,74,.12);
  animation:hhBlink 1s ease-in-out infinite;
}
.risk-alert-card p{
  margin:9px 0 4px;
  color:var(--text-dim);
  font-size:12.8px;
  font-weight:750;
}
.risk-alert-card p b{ color:#A32D2D; }
.risk-alert-card small{
  color:#1D9E75;
  font-size:11px;
  font-weight:800;
}
.heart-mini-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:5;
}
.heart-mini-dots span{
  width:18px;
  height:4px;
  border-radius:999px;
  background:rgba(163,45,45,.20);
  transition:width .25s ease, background .25s ease;
  cursor:pointer;
  padding:6px 0;
  margin:-6px 0;
  background-clip:content-box;
  border:none;
}
.heart-mini-dots span.active{
  width:30px;
  background:#E24B4A;
}
.heart-mini-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  background:rgba(23,21,29,0.16);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  z-index:5;
  transition:opacity 0.2s ease, background 0.2s ease;
}
.heart-mini-arrow svg{ width:14px; height:14px; }
.heart-mini-arrow.prev{ left:10px; }
.heart-mini-arrow.next{ right:10px; }
.heart-mini-showcase:hover .heart-mini-arrow,
.heart-mini-arrow:focus-visible{
  opacity:0.55;
}
.heart-mini-arrow:hover{
  opacity:0.9 !important;
  background:rgba(23,21,29,0.32);
}
html[data-theme="dark"] .heart-health-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(226,75,74,.20), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(205,184,255,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #1E1E20 52%, #241C35 100%);
}
html[data-theme="dark"] .heart-mini-chip,
html[data-theme="dark"] .patient-spark-grid span,
html[data-theme="dark"] .pipeline-orbit span,
html[data-theme="dark"] .risk-alert-card{
  background:#1E1E20;
  border-color:rgba(255,255,255,.13);
  color:var(--text);
}
html[data-theme="dark"] .heart-mini-copy strong{ color:#FF9A91; }
html[data-theme="dark"] .heart-core-mini{ background:rgba(226,75,74,.18); }
html[data-theme="dark"] .risk-alert-card p{ color:var(--text-dim); }
@keyframes hhGlowDrift{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(2%, -2%, 0) rotate(4deg); }
}
@keyframes hhRipple{
  0%{ transform:scale(.76); opacity:.88; }
  100%{ transform:scale(1.85); opacity:0; }
}
@keyframes hhDrawEcg{
  0%{ stroke-dashoffset:720; opacity:.3; }
  50%,85%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:.25; }
}
@keyframes hhPatientPop{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.03); }
}
@keyframes hhFlow{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(260%); }
}
@keyframes hhBars{
  0%,100%{ transform:scaleY(.78); transform-origin:bottom; }
  50%{ transform:scaleY(1); transform-origin:bottom; }
}
@keyframes hhAlertPulse{
  0%,100%{ box-shadow:0 20px 34px -24px rgba(226,75,74,.65), 0 0 0 0 rgba(226,75,74,0); }
  50%{ box-shadow:0 20px 34px -24px rgba(226,75,74,.65), 0 0 0 8px rgba(226,75,74,.09); }
}
@keyframes hhBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
@media (max-width:600px){
  .heart-health-thumb{ height:230px; }
  .heart-mini-scene{ padding-left:16px; padding-right:16px; }
  .pipeline-orbit{ gap:5px; }
  .pipeline-orbit span{ min-width:45px; font-size:10.5px; }
  .pipeline-orbit i{ width:10px; flex-basis:10px; }
  .patient-spark-grid{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .patient-spark-grid span{ min-height:44px; }
  .heart-mini-copy strong{ font-size:16px; }
  .heart-mini-copy span{ font-size:11.7px; }
}
@media (prefers-reduced-motion: reduce){
  .heart-mini-glow,
  .heart-pulse-mini > span,
  .heart-ecg-mini polyline,
  .patient-spark-grid span,
  .pipeline-orbit i::after,
  .mini-bars b,
  .risk-alert-card,
  .blink-dot{
    animation:none !important;
  }
}

/* ============================================
   DB / SQL / VIZ MINI SHOWCASES
   Same animated showcase mechanic as Heart Health, recolored per project.
   ============================================ */
.db-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(21,101,192,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(95,203,154,.20), transparent 34%),
    linear-gradient(135deg, #f5f9ff 0%, #f3fbf7 48%, #eef6ff 100%);
}
.sql-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(67,56,202,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(255,213,107,.22), transparent 34%),
    linear-gradient(135deg, #f5f5ff 0%, #fff9ee 48%, #f0efff 100%);
}
.viz-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(15,157,120,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(143,199,242,.22), transparent 34%),
    linear-gradient(135deg, #f3fffa 0%, #f1f9ff 48%, #eefcf6 100%);
}
.book-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(180,83,9,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(124,58,237,.16), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #fdf6e9 48%, #f7f0ff 100%);
}
.cv-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(14,116,144,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(226,75,74,.16), transparent 34%),
    linear-gradient(135deg, #f0fbfd 0%, #eef8fb 48%, #fff4f0 100%);
}
.pet-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(190,24,93,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(255,213,107,.20), transparent 34%),
    linear-gradient(135deg, #fff5f9 0%, #fff8ef 48%, #fdf0f5 100%);
}
.itam-thumb{
  height:250px; padding:0; border-bottom:1px solid var(--border);
  overflow:hidden; align-items:stretch; justify-content:stretch;
  background:
    radial-gradient(circle at 18% 18%, rgba(109,40,217,.18), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(245,158,11,.16), transparent 34%),
    linear-gradient(135deg, #f8f5ff 0%, #fdf8f0 48%, #f5f0ff 100%);
}

.db-thumb .heart-mini-chip{ color:#0C4A8C; border-color:rgba(21,101,192,.22); }
.db-thumb .heart-pulse-mini > span{ border-color:rgba(21,101,192,.62); }
.db-thumb .heart-core-mini{ background:#E8F1FC; border-color:#1565C0; color:#1565C0; box-shadow:0 14px 30px -18px rgba(21,101,192,.7); }
.db-thumb .heart-mini-copy strong{ color:#0C4A8C; }
.db-thumb .heart-ecg-mini polyline{ stroke:#1565C0; }
.db-thumb .patient-spark-grid span{ border-color:rgba(21,101,192,.20); color:#0C4A8C; }
.db-thumb .patient-spark-grid .warn{ border-color:rgba(15,157,120,.32); background:rgba(229,250,240,.85); color:#0F7A56; }
.db-thumb .pipeline-orbit span{ color:#1565C0; border-color:rgba(21,101,192,.26); }
.db-thumb .pipeline-orbit i::after{ background:#1565C0; }
.db-thumb .risk-alert-card{ background:rgba(245,250,255,.88); border-color:rgba(21,101,192,.45); box-shadow:0 20px 34px -24px rgba(21,101,192,.55); }
.db-thumb .risk-alert-card div{ color:#0C4A8C; }
.db-thumb .blink-dot{ background:#1565C0; box-shadow:0 0 0 5px rgba(21,101,192,.12); }
.db-thumb .risk-alert-card p b{ color:#0C4A8C; }
.db-thumb .risk-alert-card small{ color:#0F9D78; }
.db-thumb .heart-mini-dots span.active{ background:#1565C0; }

.sql-thumb .heart-mini-chip{ color:#3B2F9A; border-color:rgba(67,56,202,.22); }
.sql-thumb .heart-pulse-mini > span{ border-color:rgba(67,56,202,.62); }
.sql-thumb .heart-core-mini{ background:#ECEBFC; border-color:#4338CA; color:#4338CA; box-shadow:0 14px 30px -18px rgba(67,56,202,.7); }
.sql-thumb .heart-mini-copy strong{ color:#3B2F9A; }
.sql-thumb .heart-ecg-mini polyline{ stroke:#4338CA; }
.sql-thumb .patient-spark-grid span{ border-color:rgba(67,56,202,.20); color:#3B2F9A; }
.sql-thumb .patient-spark-grid .warn{ border-color:rgba(186,117,23,.34); background:rgba(250,238,218,.88); color:#9A6112; }
.sql-thumb .pipeline-orbit span{ color:#4338CA; border-color:rgba(67,56,202,.26); }
.sql-thumb .pipeline-orbit i::after{ background:#4338CA; }
.sql-thumb .risk-alert-card{ background:rgba(245,245,255,.88); border-color:rgba(67,56,202,.45); box-shadow:0 20px 34px -24px rgba(67,56,202,.55); }
.sql-thumb .risk-alert-card div{ color:#3B2F9A; }
.sql-thumb .blink-dot{ background:#4338CA; box-shadow:0 0 0 5px rgba(67,56,202,.12); }
.sql-thumb .risk-alert-card p b{ color:#3B2F9A; }
.sql-thumb .risk-alert-card small{ color:#BA7517; }
.sql-thumb .heart-mini-dots span.active{ background:#4338CA; }

.viz-thumb .heart-mini-chip{ color:#0F7A56; border-color:rgba(15,157,120,.22); }
.viz-thumb .heart-pulse-mini > span{ border-color:rgba(15,157,120,.62); }
.viz-thumb .heart-core-mini{ background:#E5FAF1; border-color:#0F9D78; color:#0F9D78; box-shadow:0 14px 30px -18px rgba(15,157,120,.7); }
.viz-thumb .heart-mini-copy strong{ color:#0F7A56; }
.viz-thumb .heart-ecg-mini polyline{ stroke:#0F9D78; }
.viz-thumb .patient-spark-grid span{ border-color:rgba(15,157,120,.20); color:#0F7A56; }
.viz-thumb .patient-spark-grid .warn{ border-color:rgba(55,138,221,.32); background:rgba(229,244,253,.88); color:#0C447C; }
.viz-thumb .pipeline-orbit span{ color:#0F9D78; border-color:rgba(15,157,120,.26); }
.viz-thumb .pipeline-orbit i::after{ background:#0F9D78; }
.viz-thumb .risk-alert-card{ background:rgba(243,255,250,.88); border-color:rgba(15,157,120,.45); box-shadow:0 20px 34px -24px rgba(15,157,120,.55); }
.viz-thumb .risk-alert-card div{ color:#0F7A56; }
.viz-thumb .blink-dot{ background:#0F9D78; box-shadow:0 0 0 5px rgba(15,157,120,.12); }
.viz-thumb .risk-alert-card p b{ color:#0F7A56; }
.viz-thumb .risk-alert-card small{ color:#1565C0; }
.viz-thumb .heart-mini-dots span.active{ background:#0F9D78; }

.book-thumb .heart-mini-chip{ color:#92400E; border-color:rgba(180,83,9,.22); }
.book-thumb .heart-mini-copy strong{ color:#92400E; }
.book-thumb .heart-mini-dots span.active{ background:#B45309; }
.cv-thumb .heart-mini-chip{ color:#0E7490; border-color:rgba(14,116,144,.22); }
.cv-thumb .heart-mini-copy strong{ color:#0E6E86; }
.cv-thumb .heart-mini-dots span.active{ background:#0E7490; }
.pet-thumb .heart-mini-chip{ color:#9D174D; border-color:rgba(190,24,93,.22); }
.pet-thumb .heart-mini-copy strong{ color:#9D174D; }
.pet-thumb .heart-mini-dots span.active{ background:#BE185D; }
.itam-thumb .heart-mini-chip{ color:#5B21B6; border-color:rgba(109,40,217,.22); }
.itam-thumb .heart-mini-copy strong{ color:#5B21B6; }
.itam-thumb .heart-mini-dots span.active{ background:#6D28D9; }

html[data-theme="dark"] .db-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(21,101,192,.22), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(119,230,179,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #1A2230 52%, #16241F 100%);
}
html[data-theme="dark"] .sql-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(99,90,255,.22), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(255,224,138,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #211C30 52%, #2A2418 100%);
}
html[data-theme="dark"] .viz-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(15,157,120,.24), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(168,217,255,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #16241F 52%, #182530 100%);
}
html[data-theme="dark"] .db-thumb .heart-core-mini{ background:rgba(21,101,192,.20); }
html[data-theme="dark"] .sql-thumb .heart-core-mini{ background:rgba(67,56,202,.22); }
html[data-theme="dark"] .viz-thumb .heart-core-mini{ background:rgba(15,157,120,.20); }
html[data-theme="dark"] .db-thumb .heart-mini-copy strong{ color:#7EB8FF; }
html[data-theme="dark"] .sql-thumb .heart-mini-copy strong{ color:#B8AEFF; }
html[data-theme="dark"] .viz-thumb .heart-mini-copy strong{ color:#6FE0BC; }
html[data-theme="dark"] .book-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(217,119,6,.22), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(167,139,250,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #2A2014 52%, #221A2E 100%);
}
html[data-theme="dark"] .cv-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(34,211,238,.20), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(248,113,113,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #16282C 52%, #2A1A18 100%);
}
html[data-theme="dark"] .pet-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(236,72,153,.22), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(255,224,138,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #2A1A22 52%, #2A2418 100%);
}
html[data-theme="dark"] .book-thumb .heart-mini-copy strong{ color:#F2C879; }
html[data-theme="dark"] .cv-thumb .heart-mini-copy strong{ color:#67E8F9; }
html[data-theme="dark"] .pet-thumb .heart-mini-copy strong{ color:#F472B6; }
html[data-theme="dark"] .itam-thumb{
  background:
    radial-gradient(circle at 18% 18%, rgba(139,92,246,.22), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(251,191,36,.18), transparent 34%),
    linear-gradient(135deg, #1A1A1C 0%, #241A30 52%, #2A2418 100%);
}
html[data-theme="dark"] .itam-thumb .heart-mini-copy strong{ color:#C4B5FD; }
@media (max-width:600px){
  .db-thumb, .sql-thumb, .viz-thumb, .book-thumb, .cv-thumb, .pet-thumb, .itam-thumb{ height:230px; }
}

/* unique first-slide visuals per project (DB / SQL / Dashboard) */
.crud-badges-mini{
  display:flex;
  gap:10px;
}
.crud-badges-mini span{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  background:#E8F1FC;
  border:1.5px solid rgba(21,101,192,.35);
  color:#1565C0;
  animation:crudLight 3.2s ease-in-out infinite;
}
.crud-badges-mini span:nth-child(1){ animation-delay:0s; }
.crud-badges-mini span:nth-child(2){ animation-delay:.5s; }
.crud-badges-mini span:nth-child(3){ animation-delay:1s; }
.crud-badges-mini span:nth-child(4){ animation-delay:1.5s; }
@keyframes crudLight{
  0%,76%,100%{ box-shadow:none; transform:scale(1); background:#E8F1FC; color:#1565C0; }
  8%,18%{ box-shadow:0 0 0 6px rgba(21,101,192,.18); transform:scale(1.08); background:#1565C0; color:#fff; }
}
html[data-theme="dark"] .crud-badges-mini span{ background:rgba(21,101,192,.18); color:#7EB8FF; border-color:rgba(21,101,192,.4); }
html[data-theme="dark"] .crud-badges-mini span{ animation-name:crudLightDark; }
@keyframes crudLightDark{
  0%,76%,100%{ box-shadow:none; transform:scale(1); background:rgba(21,101,192,.18); color:#7EB8FF; }
  8%,18%{ box-shadow:0 0 0 6px rgba(21,101,192,.28); transform:scale(1.08); background:#1565C0; color:#fff; }
}

.erd-mini{
  position:relative;
  width:170px;
  height:88px;
}
.erd-mini svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.erd-mini svg line{
  stroke:#4338CA;
  stroke-width:1.6;
  stroke-dasharray:6 5;
  animation:erdFlow 1.4s linear infinite;
}
@keyframes erdFlow{ to{ stroke-dashoffset:-22; } }
.erd-node{
  position:absolute;
  padding:6px 11px;
  border-radius:10px;
  background:#ECEBFC;
  border:1.5px solid #4338CA;
  color:#3B2F9A;
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 10px 18px -14px rgba(67,56,202,.5);
}
.erd-node.top{ top:0; left:50%; transform:translateX(-50%); }
.erd-node.left{ bottom:0; left:0; }
.erd-node.right{ bottom:0; right:0; }
html[data-theme="dark"] .erd-node{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.18); color:var(--text); }

.trend-bars-mini{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:60px;
}
.trend-bars-mini b{
  width:16px;
  border-radius:5px 5px 2px 2px;
  background:#E5FAF1;
  border:1px solid #0F9D78;
  animation:hhBars 1.8s ease-in-out infinite;
}
.trend-bars-mini b:nth-child(1){ height:24px; animation-delay:0s; }
.trend-bars-mini b:nth-child(2){ height:38px; animation-delay:.15s; }
.trend-bars-mini b:nth-child(3){ height:30px; animation-delay:.3s; }
.trend-bars-mini b:nth-child(4){ height:50px; animation-delay:.45s; }
.trend-bars-mini b:nth-child(5){ height:42px; animation-delay:.6s; }
.trend-badge-mini{
  position:absolute;
  top:-16px;
  right:-6px;
  background:#0F9D78;
  color:#fff;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  box-shadow:0 8px 16px -10px rgba(15,157,120,.6);
}
html[data-theme="dark"] .trend-bars-mini b{ background:rgba(15,157,120,.18); border-color:#0F9D78; }

/* DB CRUD: scene 2 mock table, scene 3 architecture stack, scene 4 terminal */
.db-table-mini{
  width:min(260px,88%);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(21,101,192,.2);
  box-shadow:0 12px 22px -18px rgba(23,21,29,.4);
  font-family:var(--font-display);
}
.db-table-mini > div{
  display:grid;
  grid-template-columns:1fr .55fr .85fr;
  gap:6px;
  padding:7px 12px;
  font-size:10.5px;
  font-weight:700;
  color:#0C4A8C;
}
.db-table-mini > div:first-child{
  background:rgba(21,101,192,.14);
  font-weight:800;
  font-size:9.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.db-table-mini > div:not(:first-child){
  border-top:1px solid rgba(21,101,192,.1);
  animation:dbRowScan 3.6s ease-in-out infinite;
}
.db-table-mini > div:nth-child(2){ animation-delay:0s; }
.db-table-mini > div:nth-child(3){ animation-delay:.8s; }
.db-table-mini > div:nth-child(4){ animation-delay:1.6s; }
.db-table-mini > div:nth-child(5){ animation-delay:2.4s; }
@keyframes dbRowScan{
  0%,10%,100%{ background:transparent; }
  4%{ background:rgba(21,101,192,.18); }
}
html[data-theme="dark"] .db-thumb .db-table-mini{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.13); }
html[data-theme="dark"] .db-thumb .db-table-mini > div{ color:var(--text); }
html[data-theme="dark"] .db-thumb .db-table-mini > div:first-child{ background:rgba(21,101,192,.22); color:#7EB8FF; }

.stack-layers-mini{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:min(210px,82%);
}
.stack-layers-mini div{
  padding:6px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(21,101,192,.24);
  color:#0C4A8C;
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:800;
  text-align:center;
  opacity:.55;
  animation:stackRise 3.6s ease-in-out infinite;
}
.stack-layers-mini div:nth-child(1){ animation-delay:0s; }
.stack-layers-mini div:nth-child(2){ animation-delay:.35s; }
.stack-layers-mini div:nth-child(3){ animation-delay:.7s; }
@keyframes stackRise{
  0%,18%,100%{ opacity:.55; transform:translateY(0); background:rgba(255,255,255,.75); color:#0C4A8C; border-color:rgba(21,101,192,.24); }
  9%{ opacity:1; transform:translateY(-3px); background:#1565C0; color:#fff; border-color:#1565C0; }
}
html[data-theme="dark"] .db-thumb .stack-layers-mini div{ background:rgba(30,30,32,.7); color:var(--text); border-color:rgba(21,101,192,.3); }

.terminal-mini{
  width:min(300px,88%);
  border-radius:14px;
  overflow:hidden;
  background:#15171C;
  border:1px solid rgba(21,101,192,.4);
  box-shadow:0 18px 30px -20px rgba(0,0,0,.55);
}
.terminal-mini-bar{
  display:flex;
  gap:5px;
  padding:7px 10px;
  background:rgba(255,255,255,.05);
}
.terminal-mini-bar span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); }
.terminal-mini-bar span:nth-child(1){ background:#FF5F57; }
.terminal-mini-bar span:nth-child(2){ background:#FEBC2E; }
.terminal-mini-bar span:nth-child(3){ background:#28C840; }
.terminal-mini-line{
  padding:4px 12px;
  font-family:ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:10.5px;
  color:#7EB8FF;
}
.terminal-mini-line.out{ color:#9BE6B4; }
.term-cursor{
  display:inline-block;
  width:6px; height:11px;
  background:#9BE6B4;
  margin-left:4px;
  vertical-align:middle;
  animation:hhBlink .9s steps(1) infinite;
}

/* SQL warehouse: scene 2 schema list, scene 3 phase checklist, scene 4 audit feed */
.schema-list-mini{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:min(230px,84%);
}
.schema-list-mini div{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(67,56,202,.22);
  color:#3B2F9A;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  animation:hhPatientPop 2.6s ease-in-out infinite;
}
.schema-list-mini div:nth-child(2n){ animation-delay:.15s; }
.schema-list-mini div:nth-child(3n){ animation-delay:.3s; }
.schema-list-mini .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  padding:2px 6px;
  border-radius:6px;
  background:#4338CA;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.schema-list-mini .badge.trig{ background:#BA7517; }
html[data-theme="dark"] .sql-thumb .schema-list-mini div{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.13); }

.phase-checklist-mini{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(240px,86%);
}
.phase-checklist-mini div{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  color:#3B2F9A;
}
.phase-checklist-mini i{
  width:16px; height:16px;
  border-radius:50%;
  border:1.5px solid rgba(67,56,202,.4);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-style:normal;
  color:transparent;
}
.phase-checklist-mini i::before{ content:'✓'; }
.phase-checklist-mini div:nth-child(1) i{ animation:phaseCheck 3.6s ease-in-out infinite; }
.phase-checklist-mini div:nth-child(2) i{ animation:phaseCheck 3.6s ease-in-out infinite; animation-delay:.7s; }
.phase-checklist-mini div:nth-child(3) i{ animation:phaseCheck 3.6s ease-in-out infinite; animation-delay:1.4s; }
.phase-checklist-mini div:nth-child(4) i{ animation:phaseCheck 3.6s ease-in-out infinite; animation-delay:2.1s; }
@keyframes phaseCheck{
  0%,18%{ background:transparent; border-color:rgba(67,56,202,.4); color:transparent; }
  22%,90%{ background:#4338CA; border-color:#4338CA; color:#fff; }
  95%,100%{ background:transparent; border-color:rgba(67,56,202,.4); color:transparent; }
}
html[data-theme="dark"] .sql-thumb .phase-checklist-mini div{ color:var(--text); }

.audit-feed-mini{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:min(280px,88%);
}
.audit-feed-mini div{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(67,56,202,.2);
  font-family:var(--font-display);
  font-size:10.5px;
  animation:auditSlide 3s ease-in-out infinite;
}
.audit-feed-mini div:nth-child(1){ animation-delay:0s; }
.audit-feed-mini div:nth-child(2){ animation-delay:.5s; }
.audit-feed-mini div:nth-child(3){ animation-delay:1s; }
.audit-feed-mini b{ color:#4338CA; font-weight:900; min-width:46px; }
.audit-feed-mini span{ color:#3B2F9A; font-weight:700; flex:1; }
.audit-feed-mini i{ color:var(--text-faint); font-style:normal; font-size:9.5px; }
@keyframes auditSlide{
  0%,100%{ opacity:.55; transform:translateX(0); }
  50%{ opacity:1; transform:translateX(3px); }
}
html[data-theme="dark"] .sql-thumb .audit-feed-mini div{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.13); }
html[data-theme="dark"] .sql-thumb .audit-feed-mini span{ color:#B8AEFF; }

/* Heart Disease Dashboard: scene 2 donut, scene 3 scatter plot, scene 4 insight spotlight */
.donut-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.donut-mini{ position:relative; width:96px; height:96px; }
.donut-ring{
  width:100%; height:100%;
  border-radius:50%;
  background:conic-gradient(#0F9D78 0deg 194deg, rgba(143,199,242,.55) 194deg 360deg);
  animation:donutSpin 10s linear infinite;
}
.donut-mini::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
}
.donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:16px;
  color:#0F7A56;
  z-index:1;
}
.donut-center small{ font-size:8.5px; font-weight:700; color:var(--text-dim); }
@keyframes donutSpin{ to{ transform:rotate(360deg); } }
.donut-legend{ display:flex; gap:14px; }
.donut-legend span{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:var(--text-dim); }
.donut-legend i{ width:8px; height:8px; border-radius:50%; background:#0F9D78; }
.donut-legend i.alt{ background:rgba(143,199,242,.8); }
html[data-theme="dark"] .viz-thumb .donut-mini::after{ background:rgba(30,30,32,.85); }
html[data-theme="dark"] .viz-thumb .donut-center{ color:#6FE0BC; }

.scatter-mini{
  position:relative;
  width:min(260px,88%);
  height:90px;
  border-left:1.5px solid rgba(15,157,120,.3);
  border-bottom:1.5px solid rgba(15,157,120,.3);
}
.scatter-mini i{
  position:absolute;
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(143,199,242,.8);
  transform:translate(-50%,-50%);
  animation:hhPatientPop 2.6s ease-in-out infinite;
}
.scatter-mini i:nth-child(2n){ animation-delay:.2s; }
.scatter-mini i:nth-child(3n){ animation-delay:.4s; }
.scatter-mini i.hot{
  background:#0F9D78;
  width:9px; height:9px;
  box-shadow:0 0 0 4px rgba(15,157,120,.18);
}

.insight-spotlight-mini{
  display:flex;
  align-items:center;
  gap:14px;
  width:min(320px,90%);
}
.insight-marker{ position:relative; width:44px; height:44px; flex-shrink:0; }
.insight-marker span{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(15,157,120,.6);
  animation:hhRipple 2s ease-out infinite;
}
.insight-marker span:nth-child(2){ animation-delay:.5s; }
.insight-marker span:nth-child(3){ animation-delay:1s; }
.insight-marker::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:#0F9D78;
  box-shadow:0 0 0 4px rgba(15,157,120,.18);
}
.insight-bubble{
  flex:1;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(243,255,250,.88);
  border:1.5px solid rgba(15,157,120,.4);
  box-shadow:0 16px 28px -20px rgba(15,157,120,.5);
}
.insight-bubble strong{
  display:block;
  font-family:var(--font-display);
  font-size:13px;
  color:#0F7A56;
  margin-bottom:3px;
}
.insight-bubble small{ color:var(--text-dim); font-size:10.5px; font-weight:700; }
html[data-theme="dark"] .viz-thumb .insight-bubble{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] .viz-thumb .insight-bubble strong{ color:#6FE0BC; }

/* Book Recommendation System: scene1 rated book stack, scene2 sparse matrix, scene3 reading clusters, scene4 age regression */
.book-stack-mini{ display:flex; align-items:flex-end; gap:10px; }
.book-spine{ width:36px; border-radius:8px 8px 4px 4px; background:#FDE9C8; border:1px solid rgba(180,83,9,.35); color:#92400E; font-family:var(--font-display); font-weight:800; font-size:10px; display:flex; align-items:flex-start; justify-content:center; padding-top:8px; opacity:.55; transform:translateY(5px); animation:bookRise 3.2s ease-in-out infinite; }
.book-spine.s1{ height:80px; animation-delay:0s; }
.book-spine.s2{ height:64px; animation-delay:.3s; }
.book-spine.s3{ height:50px; animation-delay:.6s; }
@keyframes bookRise{ 0%,16%,100%{ opacity:.55; transform:translateY(5px); background:#FDE9C8; color:#92400E; } 8%{ opacity:1; transform:translateY(0); background:#B45309; color:#fff; } }
html[data-theme="dark"] .book-thumb .book-spine{ background:rgba(180,83,9,.22); color:#F2C879; border-color:rgba(245,158,11,.35); }

.matrix-mini{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; width:min(200px,82%); }
.matrix-mini span{ width:100%; aspect-ratio:1; border-radius:4px; background:rgba(180,83,9,.10); border:1px solid rgba(180,83,9,.16); }
.matrix-mini span.on{ background:#B45309; animation:hhPatientPop 2.6s ease-in-out infinite; }
html[data-theme="dark"] .book-thumb .matrix-mini span{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }

.cluster-scatter-mini{ position:relative; width:min(240px,86%); height:88px; }
.cluster-scatter-mini i{ position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); animation:hhPatientPop 2.6s ease-in-out infinite; }
.cluster-scatter-mini i.c1{ background:#B45309; }
.cluster-scatter-mini i.c2{ background:#7C3AED; }
.cluster-scatter-mini i.c3{ background:#0E7490; }

.regress-mini{ position:relative; width:min(240px,86%); height:78px; border-left:1.5px solid rgba(180,83,9,.3); border-bottom:1.5px solid rgba(180,83,9,.3); }
.regress-mini svg{ position:absolute; inset:0; width:100%; height:100%; }
.regress-mini .trendline{ fill:none; stroke:#B45309; stroke-width:2; stroke-dasharray:5 4; animation:erdFlow 1.6s linear infinite; }
.regress-mini circle{ fill:#92400E; }
.regress-callout{ position:absolute; top:-2px; right:2px; background:#B45309; color:#fff; font-family:var(--font-display); font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:999px; }

/* Computer Vision Projects: scene1 accuracy badge, scene2 plate scan, scene3 alert notify, scene4 dual stats */
.cv-badge-mini{ position:relative; width:96px; height:96px; border-radius:50%; background:radial-gradient(circle, rgba(14,116,144,.14), transparent 70%); display:flex; align-items:center; justify-content:center; }
.cv-badge-mini::before{ content:''; position:absolute; inset:0; border-radius:50%; border:3px solid rgba(14,116,144,.25); }
.cv-badge-mini::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(14,116,144,.4); animation:hhRipple 2.2s ease-out infinite; }
.cv-badge-mini b{ font-family:var(--font-display); font-size:18px; font-weight:900; color:#0E7490; z-index:1; }

.plate-scan-mini{ position:relative; width:min(220px,84%); padding:14px 18px; border-radius:12px; background:#1B2A2E; border:2px solid #0E7490; box-shadow:0 14px 26px -18px rgba(14,116,144,.6); overflow:hidden; }
.plate-scan-mini span{ font-family:ui-monospace, Menlo, monospace; font-size:18px; font-weight:800; color:#A5F3FC; letter-spacing:2px; }
.plate-scan-mini i{ position:absolute; left:0; top:0; width:100%; height:6px; background:linear-gradient(90deg, transparent, rgba(34,211,238,.9), transparent); animation:hhFlow 1.8s linear infinite; }

.notify-stack-mini{ display:flex; flex-direction:column; gap:8px; width:min(230px,84%); }
.notify-stack-mini div{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:rgba(255,255,255,.78); border:1px solid rgba(14,116,144,.24); color:#0E6E86; font-family:var(--font-display); font-size:11.5px; font-weight:700; animation:hhPatientPop 2.6s ease-in-out infinite; }
.notify-stack-mini div:nth-child(1){ animation-delay:0s; }
.notify-stack-mini div:nth-child(2){ animation-delay:.4s; }
html[data-theme="dark"] .cv-thumb .notify-stack-mini div{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.13); }

.stat-duo-mini{ display:flex; gap:14px; }
.stat-duo-mini div{ padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(14,116,144,.24); text-align:center; box-shadow:0 12px 22px -18px rgba(23,21,29,.4); }
.stat-duo-mini b{ display:block; font-family:var(--font-display); font-size:18px; font-weight:900; color:#0E7490; }
.stat-duo-mini small{ font-size:9.5px; font-weight:700; color:var(--text-dim); }
html[data-theme="dark"] .cv-thumb .stat-duo-mini div{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.13); }

/* Pet Inventory Lab: scene1 key pair, scene2 pet records, scene3 export flow, scene4 terminal (reused) */
.key-pair-mini{ display:flex; align-items:center; gap:14px; }
.key-pair-mini div{ padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.78); border:1.5px solid rgba(190,24,93,.3); text-align:center; font-family:var(--font-display); }
.key-pair-mini b{ display:block; font-size:9px; font-weight:800; color:#BE185D; letter-spacing:.05em; text-transform:uppercase; }
.key-pair-mini span{ font-size:12.5px; font-weight:800; color:#9D174D; }
.key-pair-mini i{ width:26px; height:2px; background:repeating-linear-gradient(90deg, #BE185D 0 6px, transparent 6px 10px); flex-shrink:0; animation:erdFlow 1.4s linear infinite; }
html[data-theme="dark"] .pet-thumb .key-pair-mini div{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.15); }

.pet-card-mini{ display:flex; flex-direction:column; gap:7px; width:min(220px,84%); }
.pet-card-mini div{ display:flex; align-items:center; gap:9px; padding:7px 13px; border-radius:10px; background:rgba(255,255,255,.78); border:1px solid rgba(190,24,93,.22); color:#9D174D; font-family:var(--font-display); font-size:11.5px; font-weight:700; animation:hhPatientPop 2.6s ease-in-out infinite; }
html[data-theme="dark"] .pet-thumb .pet-card-mini div{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.13); }

.export-flow-mini{ display:flex; align-items:center; gap:12px; }
.export-flow-mini div{ padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.78); border:1.5px solid rgba(190,24,93,.28); font-family:var(--font-display); font-weight:800; font-size:11.5px; color:#9D174D; }
.export-flow-mini i{ width:30px; height:2px; background:linear-gradient(90deg, #BE185D, rgba(190,24,93,.2)); position:relative; flex-shrink:0; }
.export-flow-mini i::after{ content:'\203A'; position:absolute; right:-8px; top:-9px; color:#BE185D; font-weight:900; animation:hhBlink 1.2s ease-in-out infinite; }
html[data-theme="dark"] .pet-thumb .export-flow-mini div{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.15); }
.pet-thumb .terminal-mini{ border-color:rgba(190,24,93,.4); }
.pet-thumb .terminal-mini-line{ color:#F9A8D4; }

/* Centralized ITAM: scene1 asset tag, scene2 workflow steps, scene3 RBAC, scene4 stockroom stats */
.asset-tag-mini{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:12px; background:rgba(255,255,255,.78); border:1.5px solid rgba(109,40,217,.3); box-shadow:0 14px 26px -18px rgba(109,40,217,.5); }
.asset-tag-mini .barcode{ display:flex; gap:2px; align-items:center; }
.asset-tag-mini .barcode span{ width:3px; height:28px; background:#6D28D9; }
.asset-tag-mini .barcode span:nth-child(2n){ height:20px; }
.asset-tag-mini b{ display:block; font-family:var(--font-display); font-size:13px; font-weight:800; color:#5B21B6; }
.asset-tag-mini small{ display:block; font-size:9.5px; font-weight:700; color:var(--text-dim); }
html[data-theme="dark"] .itam-thumb .asset-tag-mini{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.15); }

.workflow-steps-mini{ display:flex; align-items:center; gap:6px; }
.workflow-steps-mini span{ padding:7px 11px; border-radius:8px; background:rgba(255,255,255,.78); border:1px solid rgba(109,40,217,.26); color:#5B21B6; font-family:var(--font-display); font-size:10px; font-weight:800; animation:stepGlow 4s ease-in-out infinite; }
.workflow-steps-mini span:nth-child(1){ animation-delay:0s; }
.workflow-steps-mini span:nth-child(3){ animation-delay:.9s; }
.workflow-steps-mini span:nth-child(5){ animation-delay:1.8s; }
.workflow-steps-mini span:nth-child(7){ animation-delay:2.7s; }
.workflow-steps-mini i{ width:14px; height:1.5px; background:rgba(109,40,217,.3); flex-shrink:0; }
@keyframes stepGlow{ 0%,18%,100%{ opacity:.55; background:rgba(255,255,255,.78); color:#5B21B6; border-color:rgba(109,40,217,.26); } 9%{ opacity:1; background:#6D28D9; color:#fff; border-color:#6D28D9; } }
html[data-theme="dark"] .itam-thumb .workflow-steps-mini span{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.13); }

.rbac-mini{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.rbac-lock{ position:relative; width:48px; height:48px; border-radius:50%; background:rgba(109,40,217,.12); display:flex; align-items:center; justify-content:center; }
.rbac-lock::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(109,40,217,.35); animation:hhRipple 2.2s ease-out infinite; }
.rbac-lock svg{ width:20px; height:20px; color:#6D28D9; }
.rbac-roles{ display:flex; gap:8px; }
.rbac-roles span{ padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(109,40,217,.24); color:#5B21B6; font-family:var(--font-display); font-size:9.5px; font-weight:800; }
html[data-theme="dark"] .itam-thumb .rbac-roles span{ background:rgba(30,30,32,.78); color:var(--text); border-color:rgba(255,255,255,.13); }

.stockroom-mini{ display:flex; gap:14px; }
.stockroom-mini div{ padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(109,40,217,.24); text-align:center; box-shadow:0 12px 22px -18px rgba(23,21,29,.4); }
.stockroom-mini b{ display:block; font-family:var(--font-display); font-size:18px; font-weight:900; color:#6D28D9; }
.stockroom-mini small{ font-size:9.5px; font-weight:700; color:var(--text-dim); }
html[data-theme="dark"] .itam-thumb .stockroom-mini div{ background:rgba(30,30,32,.78); border-color:rgba(255,255,255,.13); }

@media (prefers-reduced-motion: reduce){
  .db-table-mini > div,
  .stack-layers-mini div,
  .term-cursor,
  .schema-list-mini div,
  .phase-checklist-mini i,
  .audit-feed-mini div,
  .donut-ring,
  .scatter-mini i,
  .insight-marker span,
  .book-spine,
  .matrix-mini span.on,
  .cluster-scatter-mini i,
  .regress-mini .trendline,
  .cv-badge-mini::after,
  .plate-scan-mini i,
  .notify-stack-mini div,
  .key-pair-mini i,
  .pet-card-mini div,
  .export-flow-mini i::after,
  .workflow-steps-mini span,
  .rbac-lock::after{
    animation:none !important;
  }
}

/* ============================================
   PANDA / AI WIDGET VISIBILITY GUARDS
   ============================================ */
.panda-buddy.nav-hide{
  opacity:0 !important;
  transform:translateY(14px) !important;
  pointer-events:none !important;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.portfolio-ai.nav-hide,
.portfolio-ai.ai-hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(18px) !important;
  transition:opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================
   SPACING RHYTHM — final pass
   Consolidates section/card/hero spacing onto the
   --space-* scale. Earlier passes above set font
   sizes etc. and are left alone; only the box-model
   spacing values are reasserted here so every
   section follows one consistent rhythm.
   ============================================ */
.section{
  padding:var(--space-4xl) 0;
}
.section-title{
  margin-bottom:var(--space-md);
}
.section-sub{
  margin-bottom:var(--space-xl);
}
.hero{
  min-height:90vh;
  padding-top:110px;
  padding-bottom:var(--space-3xl);
}
.hero-inner{
  gap:var(--space-2xl);
}
.contact-card{
  padding:var(--space-xl);
}
.job-top{
  gap:var(--space-lg);
  padding:var(--space-xl) var(--space-xl) 0;
}
.job-body{
  padding:var(--space-lg) var(--space-xl) var(--space-xl);
}

@media (max-width:900px){
  .hero-inner{ gap:var(--space-xl); }
}

@media (max-width:768px){
  .section{ padding:var(--space-3xl) 0; }
  .hero{
    min-height:auto;
    padding-top:104px;
    padding-bottom:var(--space-3xl);
  }
  /* Panda + back-to-top + AI composer all compete for the
     bottom-right corner on small screens; drop the panda and
     lift back-to-top clear of the AI composer pill. */
  .panda-buddy{
    display:none;
  }
  .to-top{
    bottom:176px;
    right:18px;
  }
}

@media (max-width:600px){
  .contact-card,
  .skill-card,
  .project-body,
  .timeline-card,
  .milestone-card{
    padding:20px;
  }
  .job-top{
    grid-template-columns:1fr;
    padding:var(--space-lg) var(--space-lg) 0;
  }
  .job-body{
    padding:var(--space-md) var(--space-lg) var(--space-lg);
  }
}

/* ============================================
   CUSTOM CURSOR
   Replaces the default pointer with a small orange
   dot + trailing ring on fine-pointer devices only.
   Disabled on touch/coarse pointers and when the
   visitor prefers reduced motion.
   ============================================ */
body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor input,
body.custom-cursor textarea,
body.custom-cursor [role="button"]{
  cursor:none;
}
.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%, -50%);
  will-change:transform;
}
.cursor-dot{
  width:7px;
  height:7px;
  background:var(--pink);
}
.cursor-ring{
  width:32px;
  height:32px;
  border:1.5px solid var(--pink);
  opacity:.5;
  transition:width .18s ease, height .18s ease, opacity .18s ease, background .18s ease;
}
.cursor-ring.is-hover{
  width:46px;
  height:46px;
  opacity:.9;
  background:rgba(255, 90, 31, .1);
}

@media (hover:none), (pointer:coarse){
  .cursor-dot,
  .cursor-ring{
    display:none !important;
  }
}

/* ============================================
   LUXURY LOAD + SMOOTH REVEAL POLISH
============================================ */

/* Navbar drops in on load, same beat as the hero. */
.navbar{
  opacity:0;
  transform:translateY(-14px);
  filter:blur(8px);
  transition:opacity .72s cubic-bezier(.16,.84,.44,1) .04s, transform .72s cubic-bezier(.16,.84,.44,1) .04s, filter .72s cubic-bezier(.16,.84,.44,1) .04s;
}
body.is-ready .navbar{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Cards with mousemove-driven 3D tilt write their own inline `transform`
   per frame (JS), so they need 3D context + a transition for the snap-back
   on mouseleave; will-change keeps the tilt from looking choppy. */
.lux-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .25s cubic-bezier(.16,.84,.44,1);
}

/* Hero entrance: each child fades/lifts/clears-blur in on page load
   (not scroll-triggered, since the hero is already in view). Hidden by
   default so there's no flash of the final state before JS runs. */
.hero-luxury{
  opacity:0;
  transform:translateY(18px) scale(.98);
  filter:blur(6px);
  transition:
    opacity .9s cubic-bezier(.16,.84,.44,1) var(--stagger, 0ms),
    transform .9s cubic-bezier(.16,.84,.44,1) var(--stagger, 0ms),
    filter .9s cubic-bezier(.16,.84,.44,1) var(--stagger, 0ms);
  will-change:opacity, transform, filter;
}
body.is-ready .hero-luxury{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* Hero photo: soft blur + scale-in that clears once the image has
   actually loaded, layered independently of the .hero-luxury fade above. */
.hero-cutout-photo{
  opacity:0;
  transform:scale(1.06);
  filter:brightness(0.82) contrast(1.08) saturate(1.05) blur(14px);
  transition:
    opacity .7s ease,
    transform 1s cubic-bezier(.16,.84,.44,1),
    filter 1s cubic-bezier(.16,.84,.44,1);
}
.hero-cutout-photo.is-loaded{
  opacity:1;
  transform:scale(1);
  filter:brightness(0.82) contrast(1.08) saturate(1.05) blur(0);
}

/* One-time diagonal light sheen across the portrait once it's loaded. */
.hero-cutout-mask::after{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.34) 50%, transparent 65%);
  transform:translateX(-135%) rotate(8deg);
  opacity:0;
}
.hero-cutout-mask.lux-image-ready::after{
  animation:luxPortraitSheen 1.2s cubic-bezier(.16,.84,.44,1) .25s both;
}
@keyframes luxPortraitSheen{
  0%{ opacity:0; transform:translateX(-135%) rotate(8deg); }
  22%{ opacity:.9; }
  100%{ opacity:0; transform:translateX(135%) rotate(8deg); }
}

/* Premium hover lift for cards that didn't already define their own
   hover transform (project/cert/stat cards keep their existing hover). */
.edu-card,
.contact-card,
.story-card{
  transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s cubic-bezier(.16,.84,.44,1);
}
.edu-card:hover,
.contact-card:hover,
.story-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
}

/* Glass shine sweep on hover for certification cards (already establishes
   position:relative + overflow:hidden, so the sweep clips cleanly without
   touching its existing hover transform). */
.cert-card{
  position:relative;
}
.cert-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 45%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
  z-index:3;
}
.cert-card:hover::after{
  transform:translateX(120%);
}

/* Subtle glass shine sweep on hover for project cards and Who Am I stat
   tiles. Both cards keep their existing hover lift/rotate behavior. */
.project-card,
.stat-card{
  position:relative;
  overflow:hidden;
}
.project-card::after,
.stat-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%);
  transform:translateX(-145%);
  transition:transform .95s var(--lux-ease-soft);
  mix-blend-mode:soft-light;
  z-index:3;
}
.project-card:hover::after,
.stat-card:hover::after{
  transform:translateX(145%);
}

@media (prefers-reduced-motion: reduce){
  .hero-luxury{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .hero-cutout-photo{
    opacity:1; transform:none; transition:none;
    filter:brightness(0.82) contrast(1.08) saturate(1.05);
  }
  .cert-card::after,
  .project-card::after,
  .stat-card::after{
    display:none;
  }
  .navbar{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .hero-cutout-mask.lux-image-ready::after{
    display:none;
  }
  .lux-tilt{
    transform:none !important;
  }
}


/* ============================================
   PAGE HERO — compact intro banner for subpages
   (projects.html, creativity.html). Reuses the same
   eyebrow/section-title/section-sub language as the
   rest of the site, just shorter than the homepage hero.
============================================ */
.page-hero{
  padding:150px 0 50px;
  text-align:center;
}
.page-hero .wrap{
  max-width:760px;
}
.page-hero .eyebrow{
  justify-content:center;
}
.page-hero .section-title{
  margin-bottom:14px;
}
.page-hero .section-sub{
  margin:0 auto;
  max-width:560px;
}
@media (max-width:768px){
  .page-hero{ padding:120px 0 36px; }
}

/* ============================================
   FINAL PROJECT + WHO AM I REVEAL OVERRIDE
   Keep this near the end so .project-card and .stat-card transitions
   cannot override the scroll reveal animation.
   ============================================ */
.project-card.card-reveal,
.stat-card.card-reveal{
  opacity:0;
  translate:0 30px;
  scale:.975;
  filter:blur(10px);
  transition-property:opacity, translate, scale, filter, transform, box-shadow, border-color;
  transition-duration:1.15s, 1.15s, 1.15s, 1.15s, .25s, .25s, .25s;
  transition-timing-function:var(--lux-ease), var(--lux-ease), var(--lux-ease), var(--lux-ease), cubic-bezier(.34,1.4,.64,1), ease, ease;
  transition-delay:var(--reveal-delay, 0s), var(--reveal-delay, 0s), var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s;
  will-change:opacity, translate, scale, filter, transform;
}
.project-card.card-reveal.dir-left,
.stat-card.card-reveal.dir-left{
  translate:-64px 28px;
}
.project-card.card-reveal.dir-right,
.stat-card.card-reveal.dir-right{
  translate:64px 28px;
}
.project-card.card-reveal.is-visible,
.stat-card.card-reveal.is-visible{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:blur(0);
}
.project-card.card-reveal:hover{
  transform:translateY(-6px) rotate(-0.6deg);
  box-shadow:var(--shadow-lift);
  border-color:var(--border-hi);
}
.stat-card.card-reveal:hover{
  transform:translateY(-4px) rotate(-1deg);
}
@media (prefers-reduced-motion: reduce){
  .project-card.card-reveal,
  .project-card.card-reveal.dir-left,
  .project-card.card-reveal.dir-right,
  .project-card.card-reveal.is-visible,
  .stat-card.card-reveal,
  .stat-card.card-reveal.dir-left,
  .stat-card.card-reveal.dir-right,
  .stat-card.card-reveal.is-visible{
    opacity:1;
    translate:0 0;
    scale:1;
    filter:none;
    transition:none;
  }
}


/* ============================================
   PROJECTS PAGE FULL PARTICLE BACKGROUND
   Soft canvas network inspired by the Heart Health showcase background.
   ============================================ */
body.projects-page{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(226,75,74,0.19) 0, transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(183,156,232,0.25) 0, transparent 30%),
    radial-gradient(circle at 48% 88%, rgba(95,203,154,0.17) 0, transparent 32%),
    var(--bg);
}
body.projects-page::before{
  content:'';
  position:fixed;
  inset:-16%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,90,31,0.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(143,199,242,0.2), transparent 30%),
    radial-gradient(circle at 64% 78%, rgba(183,156,232,0.19), transparent 32%);
  filter:blur(18px);
  opacity:.95;
}
.projects-page-particles{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:.92;
}
body.projects-page .navbar{
  z-index:100;
}
body.projects-page main,
body.projects-page .footer{
  position:relative;
  z-index:1;
}
body.projects-page .section,
body.projects-page .footer{
  background:transparent;
}
html[data-theme="dark"] body.projects-page{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,106,51,0.21) 0, transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(205,184,255,0.2) 0, transparent 30%),
    radial-gradient(circle at 48% 88%, rgba(119,230,179,0.14) 0, transparent 34%),
    var(--bg);
}
html[data-theme="dark"] body.projects-page::before{
  background:
    radial-gradient(circle at 20% 22%, rgba(255,106,51,0.21), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(168,217,255,0.17), transparent 30%),
    radial-gradient(circle at 64% 78%, rgba(205,184,255,0.19), transparent 32%);
  opacity:1;
}
html[data-theme="dark"] .projects-page-particles{
  opacity:.85;
}
@media (prefers-reduced-motion: reduce){
  .projects-page-particles{
    opacity:.35;
  }
  body.projects-page::before{
    filter:blur(20px);
  }
}


/* ============================================
   CREATIVITY PAGE TOP — SLEEK & MINIMAL CURSOR BANNER
   ============================================ */
.creativity-drip{
  position:relative;
  width:100%;
  height:190px;
  margin-top:66px;
  background:#0E0E10;
  overflow:hidden;
  cursor:none;
}
.sleek-canvas{
  display:block;
  width:100%;
  height:100%;
}
.sleek-rule{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.12);
  transform:translateY(-50%);
  pointer-events:none;
}
.sleek-phrase{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  margin:0;
  padding:0 24px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  letter-spacing:.01em;
  color:rgba(255,255,255,.82);
  pointer-events:none;
  white-space:normal;
}
.sleek-punct{ color:rgba(255,255,255,.45); }
.sleek-initial{
  color:#FF5A1F;
  font-weight:700;
  text-shadow:0 0 12px rgba(255,90,31,.85), 0 0 28px rgba(255,90,31,.45);
  animation:sleekGlowPulse 2.6s ease-in-out infinite;
}
@keyframes sleekGlowPulse{
  0%, 100%{ text-shadow:0 0 12px rgba(255,90,31,.85), 0 0 28px rgba(255,90,31,.45); }
  50%{ text-shadow:0 0 18px rgba(255,90,31,1), 0 0 40px rgba(255,90,31,.65); }
}
@media (max-width:680px){
  .creativity-drip{ margin-top:61px; height:150px; }
  .sleek-phrase{ font-size:16px; padding:0 18px; }
}
@media (prefers-reduced-motion: reduce){
  .sleek-initial{ animation:none; }
}


/* ============================================
   PROJECTS PAGE HEADING — ORANGE TILE
   ============================================ */
.title-tile{
  display:inline-block;
  padding:10px 28px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color:#fff;
  box-shadow:0 10px 30px rgba(216,67,12,.35);
}
html[data-theme="dark"] .title-tile{
  box-shadow:0 10px 34px rgba(255,90,31,.4);
}
@media (max-width:680px){
  .title-tile{ padding:8px 18px; }
}

/* ============================================
   RESUME ROLE-PICKER MODAL
   ============================================ */
.resume-modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(23,21,29,0.52);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.resume-modal-overlay[hidden]{ display:flex; }
.resume-modal-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}
.resume-modal{
  width:min(380px, 100%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -24px rgba(23,21,29,0.45), var(--shadow-md);
  padding:28px 26px 26px;
  position:relative;
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:opacity .22s ease, transform .26s cubic-bezier(.34,1.35,.64,1);
}
.resume-modal-overlay.is-visible .resume-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.resume-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--text-dim);
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.resume-modal-close:hover{ color:var(--text); }
.resume-modal h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px;
  padding-right:24px;
}
.resume-modal-sub{
  font-size:13.5px;
  color:var(--text-dim);
  margin:0 0 18px;
  line-height:1.5;
}
.resume-modal-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.resume-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-soft);
  cursor:pointer;
  text-align:left;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.resume-option:hover,
.resume-option:focus-visible{
  border-color:var(--border-hi);
  background:var(--surface-tint);
  transform:translateY(-1px);
}
.resume-option-tag{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:11px;
  color:#fff;
  background:linear-gradient(135deg, var(--pink), var(--lav));
}
.resume-option-text{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  color:var(--text);
}
html[data-theme="dark"] .resume-modal{
  background:#1c1b22;
  border-color:rgba(255,255,255,0.12);
}
html[data-theme="dark"] .resume-modal-close{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
html[data-theme="dark"] .resume-option{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
}
html[data-theme="dark"] .resume-option:hover,
html[data-theme="dark"] .resume-option:focus-visible{
  background:rgba(255,90,31,0.10);
  border-color:var(--pink);
}

/* ============================================
   FINAL 100% ZOOM VISUAL TUNING
   Makes the site at browser 100% feel like the preferred 90% zoom view.
   ============================================ */
@media (min-width:901px){
  :root{
    --maxw:1062px;
    --gap:22px;
    --space-md:14px;
    --space-lg:22px;
    --space-xl:29px;
    --space-2xl:43px;
    --space-3xl:65px;
    --space-4xl:86px;
    --space-5xl:108px;
  }

  body{
    font-size:12.6px !important;
    line-height:1.54 !important;
  }

  .wrap,
  .nav-inner{
    max-width:1062px !important;
  }

  .wrap{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .section{
    padding-top:86px !important;
    padding-bottom:86px !important;
  }

  .section-title{
    font-size:clamp(24px,3.05vw,34px) !important;
    margin-bottom:10px !important;
  }

  .section-sub{
    font-size:11.8px !important;
    margin-bottom:27px !important;
    max-width:558px !important;
  }

  .eyebrow{
    font-size:12px !important;
    padding:5px 14px 5px 11px !important;
    margin-bottom:12px !important;
  }

  /* Navbar also shrinks slightly so 100% browser zoom matches the 90% view. */
  .nav-inner{
    padding:9px 22px !important;
  }

  .nav-brand{
    font-size:14px !important;
    gap:7px !important;
  }

  .nav-links{
    gap:20px !important;
    font-size:11.3px !important;
  }

  .nav-cta{
    gap:9px !important;
  }

  .ip-logo{
    width:34px !important;
    height:34px !important;
  }

  .ip-logo-sm{
    width:23px !important;
    height:23px !important;
  }

  .ip-logo-lg{
    width:85px !important;
    height:85px !important;
    margin-bottom:18px !important;
  }

  .theme-toggle{
    width:34px !important;
    height:34px !important;
  }

  .theme-icon{
    font-size:17px !important;
  }

  .btn,
  button.btn,
  a.btn{
    font-size:11.2px !important;
    padding:9px 19px !important;
    gap:8px !important;
  }

  .btn svg{
    width:13.5px !important;
    height:13.5px !important;
  }

  /* Hero: same layout, just 90% visual density. */
  .hero{
    min-height:81vh !important;
    padding-top:88px !important;
    padding-bottom:42px !important;
  }

  .hero-inner{
    gap:38px !important;
  }

  .hero-name{
    font-size:clamp(29px,4.5vw,43px) !important;
    line-height:1.05 !important;
    margin-bottom:7px !important;
  }

  .hero-role{
    font-size:clamp(12.6px,1.53vw,15.3px) !important;
    margin-bottom:14px !important;
  }

  .hero-summary{
    font-size:12.6px !important;
    line-height:1.55 !important;
    max-width:410px !important;
    margin-bottom:22px !important;
  }

  .hero-actions{
    gap:10px !important;
    margin-bottom:22px !important;
  }

  .hero-meta{
    gap:9px !important;
  }

  .tag{
    font-size:10.4px !important;
    padding:4.5px 11px !important;
  }

  .status-dot,
  .tag .status-dot{
    width:8px !important;
    height:8px !important;
  }

  .hero-blob-frame{
    max-width:360px !important;
  }

  .hero-photo-frame{
    max-width:297px !important;
  }

  .hero-role-pill{
    font-size:11.2px !important;
    padding:8px 14px !important;
    gap:6px !important;
  }

  .hero-role-pill .pill-dot{
    width:7px !important;
    height:7px !important;
  }

  .hero-hire-badge{
    width:86px !important;
    height:86px !important;
  }

  .hero-hire-badge .hire-arrow{
    width:27px !important;
    height:27px !important;
  }

  /* Body content, cards, and lists follow the same 90% scale. */
  .about-text p,
  .job-desc,
  .project-problem,
  .timeline-points li,
  .project-detail-val,
  .cert-desc,
  .contact-card p,
  .footer-brand{
    font-size:11.8px !important;
    line-height:1.56 !important;
  }

  .story-title,
  .timeline-role,
  .job-role,
  .project-name{
    font-size:14.8px !important;
  }

  .edu-degree,
  .exp-role{
    font-size:15.3px !important;
  }

  .edu-school,
  .job-meta,
  .exp-meta,
  .project-detail-label{
    font-size:11.2px !important;
  }

  .contact-card,
  .skill-card,
  .project-body,
  .timeline-card,
  .milestone-card{
    padding:26px !important;
  }

  .job-top{
    gap:22px !important;
    padding:29px 29px 0 !important;
  }

  .job-body{
    padding:22px 29px 29px !important;
  }

  .edu-card{
    grid-template-columns:135px 1fr !important;
  }

  .job-top{
    grid-template-columns:162px 1fr !important;
  }

  .edu-photo,
  .job-photo,
  .logo-photo,
  .edu-photo.logo-photo{
    width:119px !important;
    height:119px !important;
  }

  .job-photo.logo-photo{
    width:148px !important;
    height:148px !important;
  }

  .panda-buddy{
    width:74px !important;
    height:74px !important;
    right:20px !important;
    bottom:22px !important;
  }

  .to-top{
    width:43px !important;
    height:43px !important;
    right:28px !important;
    bottom:151px !important;
  }
}

@media (min-width:901px) and (max-height:760px){
  .hero{
    min-height:76vh !important;
    padding-top:82px !important;
  }
  .ip-logo-lg{
    width:78px !important;
    height:78px !important;
    margin-bottom:14px !important;
  }
  .hero-blob-frame{
    max-width:338px !important;
  }
}

/* ============================================
   PANDA BUDDY RESTORE
   Keep the 100% zoom layout, but return the panda buddy
   to the previous compact assistant version.
   ============================================ */
@media (min-width:901px){
  .panda-buddy{
    width:78px !important;
    height:78px !important;
    right:14px !important;
    bottom:84px !important;
    z-index:70 !important;
    opacity:.82 !important;
  }
  .panda-buddy::before{
    opacity:.95 !important;
    filter:blur(6px) !important;
  }
}

/* ============================================
   CREATIVITY BANNER SPACING FIX
   Pulls the "a girl with excitement" banner closer to the navbar
   and removes the oversized empty band above it.
   ============================================ */
.creativity-drip{
  margin-top:46px !important;
  height:200px !important;
}
.sleek-phrase{
  top:50% !important;
  font-size:20px !important;
}
@media (max-width:680px){
  .creativity-drip{
    margin-top:42px !important;
    height:112px !important;
  }
  .sleek-phrase{
    font-size:15px !important;
  }
}

/* ============================================
   PANDA BUDDY — restore original size (final)
   Beats the "PANDA BUDDY RESTORE" 78px block above:
   mascot stays at its original dimensions on all screens.
   ============================================ */
.panda-buddy{
  width:128px !important;
  height:128px !important;
  right:22px !important;
  bottom:22px !important;
  display:block !important;
  opacity:1 !important;
}
@media (max-width:768px){
  .panda-buddy{
    width:88px !important;
    height:88px !important;
    right:12px !important;
    bottom:16px !important;
  }
}

/* ============================================
   LIGHT MODE — warm cream page background
   Swaps the near-white page background for a soft
   peach-tinted gradient using the existing orange
   accent tokens, instead of plain white.
   ============================================ */
html[data-theme="light"] body{
  background:linear-gradient(180deg, #FFF6EF 0%, #FFEFE3 45%, #FFF6EF 100%) !important;
}

/* ============================================
   MOBILE — clear "Cloud Engineer" pill from the
   fixed AI assistant bar at the bottom of the hero
   ============================================ */
@media (max-width:768px){
  .pill-1{ top:-4% !important; }
}

/* ============================================
   MOBILE — swap vertical order of Panda Buddy and
   the AI assistant bar: panda sits higher, the
   question/chat bar sits lower near the screen edge.
   ============================================ */
@media (max-width:768px){
  .panda-buddy{
    bottom:144px !important;
    right:12px !important;
  }
  .portfolio-ai,
  .portfolio-ai:not(.is-open),
  .portfolio-ai.is-open{
    bottom:16px !important;
  }
}

/* ============================================
   CONTACT FORM TOAST
   Replaces the native browser alert() (which shows
   the site's domain) with an in-page notification.
   ============================================ */
.contact-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%) translateY(16px);
  max-width:min(420px, calc(100vw - 32px));
  padding:14px 20px;
  border-radius:14px;
  font-family:var(--font-body, inherit);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  color:#fff;
  background:#1d1d1d;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity .25s ease, transform .25s ease;
}
.contact-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.contact-toast--success{
  background:#1f7a3e;
}
.contact-toast--error{
  background:#a8341f;
}