html{ scroll-behavior:smooth }
/* Hero background icons layer */
.hero{ position:relative; }
.hero-inner{ position:relative; z-index:1; }
.hero-bg-icons{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-bg-icons .icon-bg{ position:absolute; width:18px; height:18px; opacity:0.12; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.06)); }
.hero-bg-icons .icon-bg img{ width:100%; height:100%; object-fit:contain; }
/* ...existing code... */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --muted:#6b6b6b;
  --text:#0b0b0b;
  --accent:#000000;
  --accent2: #727c7b;
  --glass: rgba(11,11,11,0.04);
  --radius:12px;
  --container:1100px;
  --gap:24px;
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Use a single solid panel color across the site for exact matching */
  background: var(--panel);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* playful gradient glow background */
.site-bg{
  position: fixed;
  inset: -25vh -25vw;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px) saturate(120%);
  opacity: 0.22;
  transform: translate3d(0,0,0);
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(6,253,212,0.25), transparent 62%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,180,200,0.22), transparent 62%),
    radial-gradient(900px 600px at 35% 80%, rgba(180,220,255,0.22), transparent 62%),
    radial-gradient(900px 600px at 70% 70%, rgba(255,220,160,0.18), transparent 62%);
  animation: bgDrift 18s ease-in-out infinite alternate;
}

@keyframes bgDrift{
  from{ transform: translate3d(0,0,0) scale(1) }
  to{   transform: translate3d(2%, -2%, 0) scale(1.03) }
}

/* layout */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* header */
.site-header{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:30;
  border-bottom: 1px solid rgba(11,11,11,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:var(--gap);
  padding:18px 0;
}
.brand{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  font-size:18px;
  letter-spacing:0.2px;
}
.nav{display:flex;gap:18px;align-items:center}
.nav.open{display:flex}
.nav-link{
  color:var(--muted); text-decoration:none; font-size:14px;
}
.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer}

/* -------- New navbar (from external project) -------- */
.menu {
  height: 100vh;
  width: 100%;
  background-color: #000;
  position: fixed;
  display: none;
  z-index: 60;
  top:0;left:0;
}
.position--menu { display: grid; align-items: center; height: 100%; }
.nav--menu--links { display: grid; justify-items: center; align-items: center; gap: 20px; margin: 0 auto; }
.nav--menu--links a { font-size:32px; text-decoration:none; color:#fff; font-weight:500; letter-spacing:-0.5px; transition:0.15s; padding:6px 12px; border-radius:12px }
.nav--menu--links a:hover{ background:#fff;color:#000 }
.menu.show--menu{ display:block; animation: slideIn .35s ease forwards }
.menu.hide--menu{ display:block; animation: slideOut .28s ease forwards }

/* top navbar (full-width, matches frosted footer) */
.nav--container{ display:flex; position:sticky; top:0; width:100%; z-index:70; pointer-events:auto; margin-top:0; background:transparent; transition: box-shadow .22s ease, background .22s ease }
.nav--container nav{ margin:0 auto; display:flex; justify-content:space-between; align-items:center; border-radius:0; padding:12px 20px; box-shadow:none; flex-basis:var(--container); background:transparent }
.nav--container.scrolled{ background: rgba(255,255,255,0.92); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 24px rgba(11,11,11,0.08); border-bottom: 1px solid rgba(11,11,11,0.06) }
.nav--logo{ font-weight:700; font-size:1.5rem; color:var(--text) }
.nav--links{ display:flex; align-items:center; gap:12px }
.nav--a{ color:var(--text); text-decoration:none; padding:8px 12px; border-radius:999px; border:1px solid rgba(11,11,11,0.06); transition: background .18s ease, color .18s ease, box-shadow .18s ease }
.nav--a:hover{ background:#000;color:#fff; box-shadow: 0 6px 16px rgba(11,11,11,0.06) }
.nav--burger{ display:none; background:transparent; border:0; color:var(--text); font-size:20px; cursor:pointer }

@media (max-width:900px){
  .nav--container nav{ padding:8px 14px; flex-basis:calc(100% - 48px) }
  .nav--link-group{ display:none }
  .nav--burger{ display:inline-block }
}

@keyframes slideIn{ from{transform:translateY(-6%);opacity:0} to{transform:none;opacity:1} }
@keyframes slideOut{ from{transform:none;opacity:1} to{transform:translateY(-6%);opacity:0} }

/* hero */
.hero{
  padding:64px 0;
}
.hero-inner{
  display:flex;
  flex-direction:column; /* stack hero-copy above hero-card */
  gap:24px;
  align-items:stretch; /* ensure full-width card */
}
.hero-copy{
  width:100%;
  min-width:0;
  text-align:center;
  margin: 24px 0 24px 0;
}
.hero h1{font-size:36px;margin:0 0 8px;font-weight:700}
.lead{color:var(--muted);margin:0 auto 14px;max-width:60ch}
.cta-row{display:flex;gap:12px;margin-top:8px;justify-content:center}
.hero-card{
  width:100%;
  max-width:none;
  background:linear-gradient(180deg,#ffffff,#fafafa);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.04);
  border:1px solid rgba(11,11,11,0.04);
  align-self:stretch;
  margin-top:0;
  opacity:0;
  transform: translateY(8px);
  animation: fadeInUp 700ms cubic-bezier(.2,.9,.2,1) 120ms both;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* code sample */
.code-sample{
  margin:0;
  background:#0b0b0b;
  padding:16px;
  border-radius:8px;
  color:#e6e6e6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:13px;
  overflow:auto;
  white-space:pre-wrap;
  min-height:140px;
  position:relative;
}

/* Prevent hero console from expanding during typing */
#console{ height: 400px; overflow:auto; }

.code-sample .cursor{
  display:inline-block;
  margin-left:0;
  width:1ch;
  height:1em;
  background:#e6e6e6;
  border-radius:0;
  transform: translateY(2px);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink{50%{opacity:0} }
.tok-key{ color:#cbd5d9; font-weight:600 }
.tok-func{ color:#ffffff; font-weight:700 }
.tok-str{ color:#06fdd4 }
.tok-type{ color:#bfcad0; font-weight:600 }
.meta{display:flex;gap:8px;margin-top:12px;color:var(--muted);font-size:13px}
.meta-item{background:transparent;padding:6px 8px;border-radius:999px;border:1px solid rgba(11,11,11,0.04)}

/* Matrix mode */
.code-sample.matrix-mode{ background:#000 !important; color:#0f0; overflow:hidden }
.code-sample.matrix-mode .term-io{ opacity:0; position:absolute; inset:0; }
.code-sample .matrix-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; display:block }
.code-sample .matrix-hint{ position:absolute; left:8px; bottom:8px; z-index:3; color:rgba(0,255,102,0.7); font-size:12px; pointer-events:none }

/* Interactive console inside hero code sample */
.code-sample .term-prompt{ display:flex; align-items:center; gap:4px }
.code-sample .term-io{ margin-top:6px }
.code-sample .term-line{ line-height:1.5 }
.code-sample .prompt{ color:#cbd5d9; font-weight:600 }
.code-sample .term-input{
  background: transparent;
  border: 0;
  outline: none;
  color: #e6e6e6;
  font: inherit;
  width: 1ch;
  min-width: 1ch;
  caret-color: transparent;
  padding: 0;
  flex: 0 0 auto;
}
.code-sample .term-input::placeholder{ color: rgba(230,230,230,0.45) }

/* projects */
.section-title{font-size:20px;margin:0 0 16px}
/* Experience header: larger and centered */
.experience > .section-title,
.experience .section-title{
  font-size:28px;
  font-weight:700;
  text-align:center;
  margin:0 0 24px;
  letter-spacing:0.2px;
}
.projects{padding:36px 0; margin-top:28px}
/* Showcase (fun, interactive carousel) */
.showcase .section-title{
  font-size:28px; font-weight:700; text-align:center; margin:0 0 16px; letter-spacing:0.2px;
}
.showcase-wrap{ position:relative }
.showcase-track{
  display:flex; gap:16px; overflow:hidden; padding:8px 4px 16px; flex-wrap: nowrap; width:100%;
}
.showcase-strip{ display:flex; gap:16px; will-change: transform; align-items:flex-start }
.showcase-track.marquee{ overflow:hidden; animation: marquee var(--marquee-duration, 40s) linear infinite }
@keyframes marquee{
  from{ transform: translateX(0) }
  to{   transform: translateX(calc(-1 * var(--marquee-distance, 600px))) }
}
.showcase-track:focus{ outline: none }
.showcase-track::-webkit-scrollbar{ height:10px }
.showcase-track::-webkit-scrollbar-thumb{ background: rgba(11,11,11,0.08); border-radius:999px }

.project-card{
  flex: 0 0 auto; min-width: 320px; max-width: 360px; scroll-snap-align: center;
  background: linear-gradient(120deg, rgba(255,255,255,0.995) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1.5px solid rgba(120,120,180,0.13);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 8px rgba(60,60,120,0.06);
  transition: transform .28s ease, box-shadow .28s ease, background .36s ease, color .36s ease, border-color .36s ease;
  transform-style: preserve-3d;
}
.project-card:hover{
  background: #0b0b0b;
  color: #ffffff;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 36px rgba(11,11,11,0.07);
}
/* ensure child elements invert appropriately */
.project-card:hover .card-title{ color:#ffffff }
.project-card:hover .card-desc{ color: rgba(255,255,255,0.85) }
.project-card:hover .badge{ color:#ffffff; border-color: rgba(255,255,255,0.24) }
.project-card:hover .btn-primary{ background:#ffffff; color:#000000; filter:none }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.card-title{ margin:0; font-size:18px; font-weight:700 }
.badge{ background:transparent; padding:6px 8px; border-radius:999px; font-size:12px; color:var(--muted); border:1px solid rgba(11,11,11,0.06) }
.card-desc{ color:var(--muted); margin:8px 0 10px; font-size:14px }
.more summary{ cursor:pointer; font-weight:600; }
.more summary.btn{ display:inline-block; margin:4px 0; color:#fff; transition: background .2s ease, box-shadow .2s ease, transform .2s ease }
.more summary.btn::after{ content:"\25BE"; /* down chevron */ display:inline-block; margin-left:8px; transition: transform .25s ease }
.more.expanded summary.btn::after{ transform: rotate(180deg) }
.more summary::-webkit-details-marker{ display:none }
.more summary::marker{ content:"" }
.more[open] summary{ opacity:0.95 }
.more .more-body{ max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, transform .45s ease; will-change:max-height, opacity, transform }
.points{ margin:8px 0 0; padding-left:18px }
.points li{ font-size:14px; margin-bottom:6px }
.actions{ margin-top:10px; display:flex; justify-content:flex-end }

.showcase-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px; border:1px solid rgba(11,11,11,0.08);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 8px 18px rgba(11,11,11,0.06);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.showcase-arrow.prev{ left:-4px }
.showcase-arrow.next{ right:-4px }

/* Hide arrows when auto-scroll is enabled to prevent manual control */
.showcase-arrow{ display:none }

@media (max-width:1000px){
  .project-card{ min-width: 280px; max-width: 320px }
}
@media (max-width:640px){
  .showcase-arrow{ display:none }
}

/* footer (frosted to match portfolio) */
.site-footer{
  border-top: 1px solid rgba(11,11,11,0.06);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 -10px 24px rgba(11,11,11,0.05);
  padding: 16px 0;
  margin-top: 48px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:var(--muted);
}
.footer-nav a{
  color:var(--text);
  text-decoration:none;
  margin-left:12px;
  padding:8px 12px;
  border:1px solid rgba(11,11,11,0.06);
  border-radius:999px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.footer-nav a:hover{
  background: #000;
  color: #fff;
  box-shadow: 0 6px 16px rgba(11,11,11,0.06);
}

/* buttons */
.btn{
  display:inline-block;
  padding:5px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  color:white;
  border:1px solid rgba(11,11,11,0.06);
  box-shadow: 0 10px 20px rgba(11,11,11,0.06);
}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{
  background:transparent;color:var(--text);border:1px solid rgba(11,11,11,0.06)
}

/* experience */
.experience{ padding:40px 0; }
.experience .container{ max-width:var(--container); }
.exp-item{
  /* stronger translucent frosted-glass */
  background: linear-gradient(120deg, rgba(255,255,255,0.995) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1.5px solid rgba(120,120,180,0.13);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 8px 0 rgba(60,60,120,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border 0.2s;
}
.exp-item:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(11,11,11,0.07); }
.exp-header{ display:flex;flex-direction:column;gap:4px;align-items:flex-start }
.exp-left{ display:flex;flex-direction:column;gap:0 }

.role{ margin:0 }

/* inline company + dates */
.company-row{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:2px;
}
.company-name{
  color:var(--accent2);
  font-weight:700;
  letter-spacing:0.2px;
  font-size:14px;
}
.company-dates{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  opacity:0.95;
}
/* compact role and list content */
.exp-item .role{ font-size:18px; }
.exp-item .exp-meta{ font-size:13px; margin-top:6px; }
.exp-item ul{ margin:8px 0 0; padding-left:18px; }
.exp-item li{ font-size:14px; margin-bottom:6px; }

/* align header horizontally on wide screens but keep company under role */
@media(min-width:1000px){
  .exp-header{ flex-direction:row; justify-content:space-between; align-items:center }
  .experience .container{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .exp-item{ margin-bottom:0; }
  .exp-left{max-width:calc(100% - 140px)}
}
@media (max-width:1000px){
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column}
  .hero-card{order:2}
}
@media (max-width:640px){
  .nav{display:none;position:absolute;right:20px;top:64px;background:var(--panel);padding:12px;border-radius:8px;flex-direction:column}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block}
  .projects-grid{grid-template-columns:1fr}
  .header-inner{gap:12px}
  .hero h1{font-size:24px}
  /* Stack hero meta items as rows on mobile */
  .meta{ flex-direction:column; align-items:stretch }
  .meta-item{ width:100%; text-align:center }
  /* Footer: stack buttons neatly on mobile */
  .footer-inner{ flex-direction:column; align-items:stretch; text-align:center }
  .footer-nav{ display:grid; grid-template-columns:1fr; gap:10px; justify-content:stretch }
  .footer-nav a{ margin-left:0; width:100% }
}

/* When full-screen menu is open, make burger icon white to match */
body.menu-open .nav--burger{ color:#fff }