/* ===== Tokens ===== */
:root{
  --color-bg:            #05070a;
  --color-border:        rgba(255,255,255,0.10);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-fg:            #f1f5f9;
  --color-fg-muted:      #b8c2d0;
  --color-fg-faint:      #8592a3;
  --color-accent:        #ff6a1a;
  --color-accent-soft:   rgba(255,106,26,0.16);

  /* Frosted glass panel tokens -- one definition, used everywhere */
  --glass-bg:     rgba(8,12,22,0.62);
  --glass-blur:   blur(28px) saturate(170%);
  --glass-border: 1px solid rgba(255,255,255,0.12);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -35px rgba(0,0,0,0.85);

  --font-display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 140px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

html, body{ touch-action:pan-y; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===== Layer -20: cinematic photographic backdrop =====
   Five full-viewport photographs pinned to the viewport and cross-faded
   by scroll position, each drifting slowly (Ken Burns) while it holds.
   A permanent scrim sits on top of the whole stack so body copy keeps
   its contrast no matter which frame is showing. */
.backdrop{
  position:fixed; inset:0; z-index:-20; overflow:hidden; pointer-events:none;
}
.backdrop-slide{
  position:absolute; inset:0; opacity:0; will-change:opacity;
}
.backdrop-slide picture{ display:block; width:100%; height:100%; }
.backdrop-slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); will-change:transform;
  /* Let the photographs run rich -- they are the page, not a texture. */
  filter:saturate(1.08) contrast(1.06);
}
/* Almost nothing: a thin darkening at the very top and bottom edges so the
   fixed nav and the footer keep their footing, plus the faintest corner
   fall-off. Contrast for body copy is handled locally, per text block, by
   .veil below -- never by covering the whole photograph. */
.backdrop-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,7,10,0.62) 0%, rgba(5,7,10,0.10) 14%, rgba(5,7,10,0) 40%, rgba(5,7,10,0) 62%, rgba(5,7,10,0.14) 86%, rgba(5,7,10,0.55) 100%),
    radial-gradient(ellipse 92% 88% at 50% 50%, rgba(5,7,10,0) 55%, rgba(5,7,10,0.30) 100%);
}

/* Layer -10: WebGL canvas (small floating character only) */
#webglCanvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:-10; pointer-events:none;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
img,canvas{ display:block; max-width:100%; }
::selection{ background:var(--color-accent); color:#fff; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:4px; }
.reg{ font-size:0.55em; vertical-align:super; }

/* ===== The veil =====
   Copy sits directly ON the photograph -- no cards, no blur, no boxes.
   Each text block instead casts a soft dark halo that bleeds well past
   its own edges and fades to nothing, so it reads as shadow inside the
   image rather than a panel laid over it. This is what carries contrast
   now that the global scrim is essentially gone. */
.glass-panel{
  position:relative;
  background:transparent; border:0; box-shadow:none; border-radius:0;
}
/* Vertical bleed is kept tight on purpose. Each halo extends past its own
   block, so if two stacked blocks each reached far up and down their halos
   would meet in the gap and read as one dark band across the photograph. */
.glass-panel::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-24px -70px;
  background:radial-gradient(ellipse 74% 92% at 40% 50%,
    rgba(3,5,9,0.95) 0%,
    rgba(3,5,9,0.90) 40%,
    rgba(3,5,9,0.72) 62%,
    rgba(3,5,9,0.30) 82%,
    rgba(3,5,9,0) 96%);
}
/* Safety net: even where a bright patch of photograph sits under the tail
   of a line, the type keeps its edge. Cheap, and invisible over the dark
   centre of the halo. */
.glass-panel :is(p, li, h2, h3, h4, span, a, strong, time){
  text-shadow:0 2px 14px rgba(3,5,9,0.9), 0 1px 3px rgba(3,5,9,0.7);
}
@media (max-width:780px){
  .glass-panel::before{
    inset:-16px -28px;
    background:radial-gradient(ellipse 92% 86% at 50% 50%,
      rgba(3,5,9,0.94) 0%,
      rgba(3,5,9,0.86) 40%,
      rgba(3,5,9,0.55) 66%,
      rgba(3,5,9,0) 94%);
  }
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:120;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.skip-link{
  position:fixed; top:-60px; left:12px; z-index:200;
  background:var(--color-accent); color:#05070a; font-weight:700; font-size:0.9rem;
  padding:10px 18px; border-radius:8px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.cursor-dot{
  position:fixed; top:0; left:0; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--color-accent); pointer-events:none; z-index:150;
  opacity:0; transition:opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
}
.cursor-dot.is-visible{ opacity:0.85; }
.cursor-dot.is-active{ width:14px; height:14px; background:var(--color-accent); }
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cursor-dot{ display:none; } }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(5,7,10,0);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled{
  background:rgba(5,7,10,0.68);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--color-border);
}
.nav-inner{
  width:100%; max-width:1180px; margin:0 auto; padding:0 var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
}
.nav-logo{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.02em; }
.nav-logo span{ color:var(--color-accent); }
.nav-links{ display:flex; gap:var(--space-4); }
.nav-links a{
  font-size:0.92rem; color:var(--color-fg-muted); position:relative; padding:6px 2px;
  transition:color .2s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--color-accent);
  transition:right .25s var(--ease);
}
.nav-links a:hover{ color:var(--color-fg); }
.nav-links a:hover::after{ right:0; }
.nav-links a.is-active{ color:var(--color-fg); }
.nav-links a.is-active::after{ right:0; }
.nav-cta{
  font-size:0.88rem; font-weight:600; padding:10px 18px; border:1px solid var(--color-border-strong);
  border-radius:999px; transition:border-color .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
  background:rgba(8,12,22,0.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav-cta:hover{ background:var(--color-accent-soft); border-color:var(--color-accent); }
.nav-toggle{ display:none; }

@media (max-width: 780px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; background:none; border:0; cursor:pointer;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--color-fg); border-radius:2px; }
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--nav-h) + var(--space-4)) var(--space-3) var(--space-6);
  background:transparent;
}
/* Local scrim that hugs the headline only, so the name stays punchy while
   the rest of the photograph keeps its light. Vertical on mobile (copy is
   centred), swept in from the left on desktop (copy is left-aligned). */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,10,0.55) 0%, rgba(5,7,10,0.30) 60%, rgba(5,7,10,0) 100%);
}
@media (min-width: 780px){
  .hero::before{
    background:linear-gradient(100deg, rgba(5,7,10,0.80) 0%, rgba(5,7,10,0.45) 42%, rgba(5,7,10,0) 72%);
  }
}
.hero-content{ position:relative; z-index:2; max-width:820px; }

@media (min-width: 780px){
  .hero-content{ max-width:640px; margin-left:0; margin-right:auto; text-align:left; }
  .hero-actions{ justify-content:flex-start; }
  .hero-stats{ justify-content:flex-start; }
  .hero-content, .hero-stats{ margin-left:clamp(24px, 6vw, 96px); }
}
.hero-eyebrow{
  font-size:0.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent);
  font-weight:700; margin-bottom:var(--space-3);
  text-shadow:0 2px 20px rgba(0,0,0,0.6);
}
.hero-title{
  font-size:clamp(2.8rem, 8.5vw, 6rem); line-height:1.0; font-weight:700; letter-spacing:-0.03em;
  text-shadow:0 4px 40px rgba(0,0,0,0.7);
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-role{
  margin-top:var(--space-3); font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--color-fg); font-weight:400;
  text-shadow:0 2px 24px rgba(0,0,0,0.7);
}
.hero-quote{
  margin-top:var(--space-2); font-style:italic; color:var(--color-fg-muted); font-size:1.05rem;
  text-shadow:0 2px 18px rgba(0,0,0,0.7);
}
.hero-actions{
  margin-top:var(--space-5); display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:999px;
  font-weight:600; font-size:0.95rem; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--color-accent); color:#05070a; box-shadow:0 12px 30px -12px rgba(255,106,26,0.6); }
.btn-primary:hover{ background:#ff8038; }
.btn-ghost{
  border:1px solid var(--color-border-strong); color:var(--color-fg);
  background:rgba(8,12,22,0.45);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn-ghost:hover{ border-color:var(--color-accent); background:var(--color-accent-soft); }

.hero-stats{
  position:relative; z-index:2; margin-top:var(--space-7);
  display:flex; gap:var(--space-2); flex-wrap:wrap; justify-content:center;
}
.stat{
  text-align:center; min-width:150px; padding:var(--space-3) var(--space-3);
  background:linear-gradient(165deg, rgba(3,5,9,0.72) 0%, rgba(3,5,9,0.52) 100%);
  border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-md);
}
.stat-num{
  display:block; font-family:var(--font-display); font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700; color:var(--color-fg);
}
.stat-label{
  display:block; margin-top:4px; font-size:0.74rem; color:var(--color-fg-faint);
  text-transform:uppercase; letter-spacing:.07em;
}

.scroll-cue{
  position:absolute; bottom:var(--space-3); left:50%; transform:translateX(-50%); z-index:2;
  width:22px; height:36px; border:1px solid var(--color-border-strong); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:4px; margin-left:-2px;
  background:var(--color-accent); border-radius:50%;
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:0; transform:translateY(14px); }
}

/* ===== Sections: fully transparent so the photography carries through ===== */
.section{
  position:relative; padding:var(--space-8) var(--space-3);
  background:transparent;
}
.section-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.section-head{ position:relative; max-width:680px; margin-bottom:var(--space-6); }
/* Headings that sit on bare photograph (not already inside a veiled block)
   get their own soft halo, so a title never lands on a bright sky and
   loses its edge. */
.section-inner > .section-head::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-56px -80px -40px -80px;
  background:radial-gradient(ellipse 68% 100% at 34% 50%,
    rgba(3,5,9,0.88) 0%,
    rgba(3,5,9,0.70) 44%,
    rgba(3,5,9,0.32) 70%,
    rgba(3,5,9,0) 92%);
}
/* Section headings sit on bare photograph, so they carry their own
   contrast: a tight double shadow rather than a plate behind them. */
.kicker{
  font-size:0.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent);
  font-weight:700; margin-bottom:var(--space-1);
  text-shadow:0 2px 10px rgba(3,5,9,0.95), 0 1px 3px rgba(3,5,9,0.9);
}
.section-head h2{
  font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.1; letter-spacing:-0.03em; font-weight:700;
  text-shadow:0 4px 24px rgba(3,5,9,0.92), 0 2px 6px rgba(3,5,9,0.8);
}

/* About */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.35fr; gap:var(--space-6); align-items:start; }
/* The portrait sits above the copy's halo -- without this the halo bleeds
   left across the frame and dims a third of his face. */
.about-photo{
  position:relative; z-index:2;
  border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:900/971;
  box-shadow:0 50px 90px -40px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.14);
}
.about-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,0.22), inset 0 -70px 70px -50px rgba(5,7,10,0.55);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-copy{ padding:var(--space-5); }
/* Keep the copy's halo off the portrait: pull its left edge in tight and
   let it bleed generously to the right instead. */
@media (min-width:861px){
  .about-copy.glass-panel::before{ inset:-46px -80px -46px -16px; }
}
.about-copy .section-head{ margin-bottom:var(--space-4); }
.about-body p{ color:var(--color-fg-muted); margin-bottom:var(--space-3); font-size:1.05rem; }
.about-body strong{ color:var(--color-fg); font-weight:600; }
.about-meta{ margin-top:var(--space-4); border-top:1px solid var(--color-border); padding-top:var(--space-3); }
.meta-row{
  display:flex; justify-content:space-between; gap:var(--space-2); padding:10px 0;
  border-bottom:1px solid var(--color-border); font-size:0.92rem;
}
.meta-row:last-child{ border-bottom:0; }
.meta-label{ color:var(--color-fg-faint); }
.meta-value{ color:var(--color-fg); text-align:right; }
@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:320px; margin:0 auto; }
  .about-copy{ padding:var(--space-4) var(--space-3); }
}

/* Credentials — glass bento grid */
.card-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto);
  gap:var(--space-3);
}
.tilt-card{ perspective:800px; }
.tilt-card:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.tilt-card:nth-child(5){ grid-column:span 2; }
/* Credential cells keep a card shape (the bento grid needs the rhythm) but
   drop the blur entirely -- a soft dark wash with a hairline edge, so the
   photograph still reads straight through the gaps between them. */
.tilt-card-inner{
  height:100%; padding:var(--space-4) var(--space-3); display:flex; flex-direction:column;
  background:linear-gradient(165deg, rgba(3,5,9,0.80) 0%, rgba(3,5,9,0.64) 100%);
  border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -35px rgba(0,0,0,0.9);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.tilt-card-inner:hover{
  border-color:rgba(255,106,26,0.5);
  background:linear-gradient(165deg, rgba(3,5,9,0.84) 0%, rgba(28,10,2,0.66) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px -25px rgba(255,106,26,0.32);
}
.tilt-card:nth-child(1) .tilt-card-inner{ justify-content:center; }
.tilt-card:nth-child(1) .card-icon{ width:56px; height:56px; }
.tilt-card:nth-child(1) .card-icon svg{ width:26px; height:26px; }
.tilt-card:nth-child(1) h3{ font-size:1.4rem; }
.tilt-card:nth-child(1) p{ font-size:0.98rem; }
.card-icon{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--color-accent-soft); color:var(--color-accent); margin-bottom:var(--space-2);
}
.card-icon svg{ width:22px; height:22px; }
.tilt-card h3{ font-size:1.05rem; margin-bottom:6px; }
.card-tag{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--color-accent-soft); color:var(--color-accent); font-size:0.62rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; vertical-align:middle;
}
.tilt-card p{ font-size:0.88rem; color:var(--color-fg-muted); }
@media (max-width: 900px){
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .tilt-card:nth-child(1), .tilt-card:nth-child(5){ grid-column:span 2; grid-row:span 1; }
}
@media (max-width: 520px){
  .card-grid{ grid-template-columns:1fr; }
  .tilt-card:nth-child(1), .tilt-card:nth-child(5){ grid-column:span 1; }
}

/* Experience — timeline of glass panels */
.timeline{ position:relative; padding-left:var(--space-4); }
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--color-border-strong);
}
.timeline-item{ position:relative; padding-bottom:var(--space-6); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  position:absolute; z-index:2; left:-33px; top:22px; width:11px; height:11px; border-radius:50%;
  background:var(--color-accent); box-shadow:0 0 0 4px rgba(255,106,26,0.2);
}
.timeline-body{ padding:var(--space-4); }
.timeline-date{ font-size:0.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--color-accent); margin-bottom:6px; font-weight:600; }
.timeline-body h3{ font-size:1.3rem; margin-bottom:8px; }
.timeline-body p{ color:var(--color-fg-muted); max-width:760px; margin-bottom:10px; }
.timeline-body p:last-child{ margin-bottom:0; }
.timeline-sub{ font-style:italic; color:var(--color-fg-faint); font-size:0.92rem; }
.timeline-note{ padding-top:10px; margin-top:4px; border-top:1px solid var(--color-border); font-style:italic; }
.timeline-body ul{ max-width:760px; margin:10px 0; padding:0; list-style:none; }
.timeline-body li{
  position:relative; padding-left:18px; margin-bottom:9px; color:var(--color-fg-muted); line-height:1.6;
}
.timeline-body li:last-child{ margin-bottom:0; }
.timeline-body li::before{
  content:''; position:absolute; left:0; top:10px; width:5px; height:5px;
  background:var(--color-accent); border-radius:1px;
}
.timeline-body li strong{ color:var(--color-fg); font-weight:600; }

/* Projects */
.project-card{ padding:var(--space-5); max-width:820px; transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
.project-card:hover{
  border-color:rgba(255,106,26,0.4);
  box-shadow:0 30px 60px -25px rgba(255,106,26,0.28);
}
.project-card-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:var(--space-2);
}
.project-card-head h3{ font-size:1.45rem; }
.project-tag{ font-size:0.78rem; color:var(--color-fg-faint); }
.project-card > p{ color:var(--color-fg-muted); margin-bottom:var(--space-3); font-size:1.02rem; }
.tech-pills{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.tech-pills li{
  padding:6px 14px; border-radius:999px; border:1px solid var(--color-border-strong);
  font-size:0.82rem; color:var(--color-fg-muted); background:rgba(255,255,255,0.04);
}

/* Skills */
.skills-groups{ display:flex; flex-direction:column; gap:var(--space-5); }
.skill-group{ padding:var(--space-4); }
/* Pills carry their own fill and border, so these blocks need far less
   halo than prose does -- keep it light or the column reads as banding. */
.skill-group.glass-panel::before{
  inset:-15px -50px;
  background:radial-gradient(ellipse 72% 96% at 40% 50%,
    rgba(3,5,9,0.74) 0%,
    rgba(3,5,9,0.56) 48%,
    rgba(3,5,9,0.20) 74%,
    rgba(3,5,9,0) 94%);
}
.skill-group h4{
  font-size:0.85rem; color:var(--color-accent); text-transform:uppercase; letter-spacing:.09em;
  margin-bottom:var(--space-2); padding-bottom:10px; border-bottom:1px solid var(--color-border);
  font-weight:700;
}
.pill-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.pill-list li{
  padding:8px 16px; border-radius:999px; border:1px solid var(--color-border-strong);
  font-size:0.88rem; color:var(--color-fg); background:rgba(255,255,255,0.04);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.pill-list li:hover{ border-color:var(--color-accent); background:var(--color-accent-soft); }

/* Contact */
.contact{ padding-bottom:var(--space-8); }
.contact-inner{
  position:relative; overflow:hidden;
  padding:var(--space-7) var(--space-4); text-align:center;
}
.contact-content{ position:relative; z-index:1; }
.contact-content h2{ font-size:clamp(1.8rem,3.8vw,2.8rem); margin:var(--space-2) auto var(--space-3); max-width:680px; line-height:1.2; }
.contact-summary{ max-width:520px; margin:0 auto var(--space-4); color:var(--color-fg-muted); }
.contact-email{
  display:inline-block; font-family:var(--font-display); font-size:clamp(1.2rem,3vw,1.7rem);
  font-weight:600; color:var(--color-accent); border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.contact-email:hover{ border-color:var(--color-accent); }
.contact-links{ margin-top:var(--space-3); display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }
.contact-links a{ font-size:0.92rem; color:var(--color-fg-muted); border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.contact-links a:hover{ color:var(--color-fg); border-color:var(--color-fg-muted); }
.contact-loc{ margin-top:var(--space-3); color:var(--color-fg-faint); font-size:0.9rem; }

/* Footer */
.footer{ border-top:1px solid var(--color-border); padding:var(--space-3); background:rgba(5,7,10,0.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.footer-inner{
  max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.82rem; color:var(--color-fg-faint);
}

/* ===== Reveal-on-scroll base states (GSAP controls the animate-in) ===== */
.reveal, .reveal-up, .tilt-card{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .tilt-card{ opacity:1 !important; transform:none !important; }
  .backdrop-slide[data-slide="hero"]{ opacity:1 !important; }
}