:root {
  --radius: 0.5rem;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --background: oklch(0.13 0.025 255);
  --foreground: oklch(0.96 0.008 245);
  --card: oklch(0.17 0.028 255);
  --card-foreground: oklch(0.96 0.008 245);
  --popover: oklch(0.17 0.028 255);
  --popover-foreground: oklch(0.96 0.008 245);
  --primary: oklch(0.76 0.145 210);
  --primary-foreground: oklch(0.13 0.025 255);
  --secondary: oklch(0.21 0.035 254);
  --secondary-foreground: oklch(0.92 0.014 245);
  --muted: oklch(0.2 0.025 255);
  --muted-foreground: oklch(0.68 0.025 248);
  --accent: oklch(0.23 0.055 227);
  --accent-foreground: oklch(0.88 0.07 210);
  --destructive: oklch(0.62 0.21 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.3 0.035 250 / 65%);
  --input: oklch(0.29 0.035 250);
  --ring: oklch(0.76 0.145 210);
  --panel: oklch(0.155 0.028 255);
  --panel-strong: oklch(0.19 0.035 252);
  --line: oklch(0.76 0.145 210 / 18%);
  --cyan-soft: oklch(0.76 0.145 210 / 12%);
  --cyan-strong: oklch(0.82 0.13 200);
}

@keyframes fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cursor-pulse { 50% { opacity: .25; } }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }

@layer base {
  *, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; }
  button, input, textarea, select { font: inherit; }
  button { border: 0; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; }
  img, video { max-width: 100%; height: auto; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  ul, ol { list-style: none; }

  html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
  a { color: inherit; text-decoration: none; }
  button, a, input, textarea { outline-color: var(--ring); }
  ::selection { background: var(--primary); color: var(--primary-foreground); }
}

.page-shell { width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto; }
.narrow-shell { width: min(900px, calc(100% - 2.5rem)); }
.section-block { padding-block: 7rem; }
.section-tinted { background: var(--panel); border-block: 1px solid var(--border); }

.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); padding: .7rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(18px); }
.nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: min(1220px, calc(100% - 2rem)); min-height: 4.5rem; margin-inline: auto; }
.brand-mark { display: inline-flex; min-width: 0; align-items: center; gap: .75rem; font-weight: 800; }
.brand-mark > span:first-child { display: grid; width: 2.35rem; height: 2.35rem; flex: none; place-items: center; border: 1px solid var(--line); border-radius: .4rem; background: var(--cyan-soft); color: var(--primary); font-family: var(--font-mono); font-size: .78rem; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-nav, .desktop-connect { display: none; }
.mobile-menu-button { display: inline-flex; }
.mobile-nav { display: grid; gap: .3rem; border-top: 1px solid var(--border); background: var(--background); padding: 1rem 1.25rem 1.25rem; }
.mobile-nav a:not([class]) { border-radius: var(--radius); padding: .75rem; color: var(--muted-foreground); font-size: .9rem; }
.mobile-nav a:hover { color: var(--foreground); background: var(--secondary); }

.hero-section { position: relative; display: grid; min-height: min(92svh, 900px); align-items: center; overflow: hidden; padding: 7.5rem 0 4rem; }
.hero-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-layout { position: relative; display: grid; gap: 3.5rem; align-items: center; }
.hero-copy { animation: fade-in .6s ease-out both; }
.status-pill { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); padding: .45rem .75rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .7rem; }
.status-pill > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px var(--cyan-soft); animation: status-pulse 2s ease-in-out infinite; }
.hero-intro { margin: 2rem 0 .5rem; color: var(--primary); font-family: var(--font-mono); font-size: .85rem; }
.hero-copy h1 { margin: 0; max-width: 800px; font-size: clamp(3rem, 10vw, 6.5rem); line-height: .95; letter-spacing: 0; }
.hero-copy h1 span { color: var(--primary); }
.hero-role { max-width: 670px; margin: 1.5rem 0 0; font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 600; line-height: 1.5; }
.hero-role b { color: var(--primary); }
.hero-quote { max-width: 720px; margin: 1.25rem 0 0; padding: 0; border: 0; color: var(--foreground); font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.35; }
.hero-quote span { display: block; }
.hero-quote span:last-child { color: var(--primary); }
.hero-description { max-width: 660px; margin: 1rem 0 0; color: var(--muted-foreground); line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-actions > * { min-height: 2.8rem; }
.hero-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.75rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; }
.hero-metrics span { display: flex; align-items: baseline; gap: .45rem; }
.hero-metrics strong { color: var(--foreground); font-family: var(--font-sans); font-size: 1.15rem; }
.hero-visual { min-width: 0; animation: fade-in .7s .15s ease-out both; }
.code-workspace { overflow: hidden; border: 1px solid var(--border); border-radius: .65rem; background: color-mix(in oklab, var(--card) 94%, transparent); box-shadow: 0 28px 80px color-mix(in oklab, var(--background) 65%, transparent); }
.workspace-bar, .workspace-status { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--panel-strong); padding: .8rem 1rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .65rem; }
.workspace-bar svg { width: 1rem; color: var(--primary); }
.window-dots { display: flex; gap: .4rem; }
.window-dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted-foreground); opacity: .4; }
.window-dots span:nth-child(2) { background: var(--primary); }
.code-body { display: grid; padding: 1.5rem .8rem; font-family: var(--font-mono); font-size: clamp(.68rem, 2.5vw, .84rem); line-height: 2.05; white-space: nowrap; }
.code-body span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.code-body i { display: inline-block; width: 2rem; color: var(--muted-foreground); font-style: normal; opacity: .5; }
.code-body b { color: var(--primary); font-weight: 500; }
.code-body em { color: var(--cyan-strong); font-style: normal; }
.code-gap { min-height: 1rem; }
.workspace-status { border-top: 1px solid var(--border); border-bottom: 0; }
.workspace-status span { display: flex; align-items: center; gap: .35rem; }
.workspace-status svg { width: .8rem; color: var(--primary); }

.section-heading { max-width: 700px; margin-bottom: 3.25rem; }
.section-kicker { color: var(--primary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.section-heading h2 { margin: .65rem 0 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; letter-spacing: 0; }
.section-heading p { margin: 1rem 0 0; color: var(--muted-foreground); line-height: 1.75; }
.about-layout { display: grid; gap: 2.5rem; }
.about-copy { max-width: 680px; }
.about-copy p { margin: 0 0 1.15rem; color: var(--muted-foreground); font-size: 1.02rem; line-height: 1.85; }
.about-copy p:first-child { color: var(--foreground); font-size: 1.12rem; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fact-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1rem; transition: border-color .2s, transform .2s; }
.fact-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.fact-card svg { width: 1.2rem; color: var(--primary); }
.fact-card span { display: block; margin-top: 1rem; color: var(--muted-foreground); font-size: .7rem; text-transform: uppercase; }
.fact-card strong { display: block; margin-top: .35rem; font-size: .86rem; line-height: 1.4; }

.skills-grid { display: grid; gap: 1rem; }
.skill-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1.5rem; transition: transform .2s, border-color .2s; }
.skill-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.card-icon, .achievement-icon { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid var(--line); border-radius: .45rem; background: var(--cyan-soft); color: var(--primary); }
.card-icon svg { width: 1.25rem; }
.skill-card h3 { min-height: 3rem; margin: 1.25rem 0 1rem; font-size: 1rem; line-height: 1.5; }
.skill-list, .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.skill-list span, .tag-list span { border: 1px solid var(--border); border-radius: .35rem; background: var(--secondary); padding: .4rem .6rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .67rem; transition: color .2s, border-color .2s; }
.skill-list span:hover { color: var(--primary); border-color: var(--primary); }

.projects-stack { display: grid; gap: 1.25rem; }
.project-card { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: .65rem; background: var(--card); transition: transform .25s, border-color .25s; }
.project-card:hover { transform: translateY(-5px); border-color: var(--primary); }
.project-art { position: relative; display: grid; min-height: 250px; place-items: center; overflow: hidden; background: var(--panel-strong); border-bottom: 1px solid var(--border); }
.project-art::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; }
.project-number { position: absolute; z-index: 1; top: 1rem; left: 1rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .65rem; }
.project-visual { position: relative; z-index: 1; display: grid; width: min(72%, 260px); aspect-ratio: 1.35; place-items: center; border: 1px solid var(--line); border-radius: .5rem; background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--primary); box-shadow: 14px 14px 0 var(--cyan-soft); }
.project-visual > svg { width: 3rem; height: 3rem; }
.project-visual > div { position: absolute; inset: auto 1rem 1rem; display: flex; gap: .35rem; }
.project-visual > div span, .chat-visual span { display: block; height: .25rem; flex: 1; border-radius: 1rem; background: var(--line); }
.chat-visual { grid-template-columns: 1fr; align-content: center; gap: .65rem; padding-inline: 2rem; }
.chat-visual span { width: 100%; }
.chat-visual span:last-child { width: 65%; }
.analysis-visual > div span:nth-child(2) { background: var(--primary); }
.project-content { position: relative; padding: 1.65rem; }
.project-index { position: absolute; right: 1.25rem; top: 1rem; color: var(--line); font-size: 3.25rem; font-weight: 800; line-height: 1; }
.project-content h3 { position: relative; max-width: 85%; margin: 0; font-size: 1.35rem; line-height: 1.3; }
.project-content > p { min-height: 4.8rem; margin: 1rem 0; color: var(--muted-foreground); line-height: 1.7; }
.project-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.project-content small, .cert-card small { display: block; margin-top: .7rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .6rem; }

.cert-grid { display: grid; gap: .85rem; }
.cert-card { display: flex; min-height: 260px; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1.25rem; transition: transform .25s var(--motion-ease), border-color .25s ease, box-shadow .25s ease; }
.cert-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 16px 40px rgba(0,0,0,.3); }

.cert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(135deg, #05192D 0%, #0c2d4a 100%);
  border: 1px solid rgba(3, 239, 98, 0.3);
  box-shadow: 0 4px 14px rgba(5, 25, 45, 0.6), inset 0 0 10px rgba(3, 239, 98, 0.05);
  margin-bottom: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover .cert-banner {
  border-color: rgba(3, 239, 98, 0.7);
  box-shadow: 0 6px 18px rgba(5, 25, 45, 0.8), 0 0 14px rgba(3, 239, 98, 0.3);
}

.datacamp-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.datacamp-logo-svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
}

.datacamp-title {
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cert-num {
  color: #03EF62;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.cert-card h3 { margin: 0 0 1.25rem; font-size: 0.98rem; line-height: 1.5; }

.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--border); }
.timeline-item { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; }
.timeline-marker { z-index: 1; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--primary); border-radius: 50%; background: var(--background); color: var(--primary); font-family: var(--font-mono); font-size: .65rem; }
.timeline-card {
  position: relative;
  display: grid;
  gap: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.35rem;
  isolation: isolate;
  --card-percentage: 0%;
  transition: transform 0.45s var(--motion-ease), border-color 0.3s ease, box-shadow 0.45s ease;
}
.timeline-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--cyan-strong) var(--card-percentage, 0%),
    rgba(118, 220, 255, 0.08) var(--card-percentage, 0%)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(70, 220, 255, 0.65));
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.timeline-card:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(70, 220, 255, 0.95));
}
.timeline-card span { color: var(--primary); font-family: var(--font-mono); font-size: .68rem; }
.timeline-card h3 { margin: .45rem 0; font-size: 1.2rem; }
.timeline-card p { margin: 0; color: var(--muted-foreground); }
.timeline-card strong { align-self: center; font-size: .82rem; }

.achievement-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; overflow: hidden; border: 1px solid var(--primary); border-radius: .65rem; background: var(--cyan-soft); padding: 1.5rem; }
.achievement-icon { background: var(--background); }
.achievement-card span { color: var(--primary); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; }
.achievement-card h2 { margin: .35rem 0; font-size: 1.25rem; }
.achievement-card p { margin: 0; color: var(--muted-foreground); }
.achievement-spark { display: none; position: absolute; right: 1.5rem; top: 1.5rem; color: var(--primary); opacity: .25; }
.exploring-wrap { margin-top: 6rem; }
.exploring-grid { display: grid; gap: .75rem; }
.explore-card { display: flex; align-items: center; gap: .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1rem; transition: color .2s, border-color .2s; }
.explore-card:hover { color: var(--primary); border-color: var(--primary); }
.explore-card svg { width: 1.15rem; color: var(--primary); }
.explore-card span { font-size: .82rem; font-weight: 600; }
.explore-mantra { margin: 2.5rem 0 0; color: var(--muted-foreground); font-family: var(--font-mono); text-align: center; }

.philosophy-section { padding-block: 8rem; border-block: 1px solid var(--border); background: var(--background); text-align: center; }
.philosophy-section blockquote { margin: 1rem 0; font-size: clamp(2.3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1.05; }
.philosophy-section blockquote span { color: var(--primary); }
.philosophy-section p { max-width: 720px; margin: 1.5rem auto 0; color: var(--muted-foreground); line-height: 1.8; }

.contact-section { background: var(--panel); }
.contact-layout { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: .65rem; background: var(--card); }
.contact-details, .contact-form { padding: 1.5rem; }
.contact-details { border-bottom: 1px solid var(--border); background: var(--panel-strong); }
.contact-details h3 { margin: 0; font-size: 1.25rem; }
.contact-details > p { margin: .75rem 0 2rem; color: var(--muted-foreground); line-height: 1.7; }
.contact-details > a, .contact-line { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .7rem; margin-top: .8rem; padding: .65rem; border-radius: var(--radius); color: var(--muted-foreground); transition: background .2s, color .2s; }
.contact-details > a:hover { background: var(--cyan-soft); color: var(--foreground); }
.contact-details svg { width: 1.1rem; color: var(--primary); }
.contact-details span { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; }
.contact-details small { display: block; margin-bottom: .15rem; color: var(--muted-foreground); font-size: .62rem; text-transform: uppercase; }
.contact-form { display: grid; gap: 1.1rem; }
.contact-form label { display: block; margin-bottom: .45rem; font-size: .78rem; font-weight: 600; }
.contact-form input, .contact-form textarea { background: var(--panel); }
.form-note { margin: 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.5; }

footer { border-top: 1px solid var(--border); background: var(--background); }
.footer-main { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
.footer-main p { margin: .8rem 0 0; max-width: 22rem; color: var(--muted-foreground); font-size: .78rem; line-height: 1.6; }
.footer-main h3 { margin: 0 0 .8rem; font-size: .72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.footer-links { display: grid; align-content: start; gap: .55rem; }
.footer-links h3 { margin-bottom: .35rem; }
.footer-links a { width: fit-content; color: var(--muted-foreground); font-size: .78rem; transition: color .2s; }
.footer-links a:hover { color: var(--primary); }
.footer-contact { display: grid; align-content: start; gap: .35rem; }
.footer-contact > a, .footer-contact .contact-line { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: .7rem; margin: 0; padding: .45rem 0; color: var(--muted-foreground); }
.footer-contact > a:hover { color: var(--foreground); }
.footer-contact svg { width: 1rem; color: var(--primary); }
.footer-contact span { min-width: 0; overflow-wrap: anywhere; font-size: .74rem; }
.footer-contact small { display: block; margin-bottom: .1rem; color: var(--muted-foreground); font-size: .6rem; text-transform: uppercase; }
.footer-bottom { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--border); padding-block: 1.2rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: .6rem; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 640px) {
  .page-shell { width: min(1160px, calc(100% - 4rem)); }
  .narrow-shell { width: min(900px, calc(100% - 4rem)); }
  .section-block { padding-block: 8rem; }
  .skills-grid, .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-card { grid-template-columns: minmax(0, 1fr) auto; }
  .achievement-card { padding: 2rem; }
  .achievement-spark { display: block; }
  .exploring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-details, .contact-form { padding: 2rem; }
  .footer-main { grid-template-columns: minmax(0, 1.35fr) minmax(140px, .65fr) minmax(260px, 1fr); align-items: start; gap: 3rem; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 900px) {
  .nav-shell { display: flex; }
  .brand-mark { margin-right: auto; }
  .desktop-nav { display: flex; align-items: center; gap: 1.4rem; }
  .desktop-nav a { color: var(--muted-foreground); font-size: .72rem; transition: color .2s; }
  .desktop-nav a:hover { color: var(--primary); }
  .desktop-connect { display: inline-flex; margin-left: .5rem; }
  .mobile-menu-button, .mobile-nav { display: none; }
  .hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 4rem; }
  .about-layout { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); align-items: start; }
  .skills-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .project-card:nth-child(even) .project-art { order: 2; border-right: 0; border-left: 1px solid var(--border); }
  .project-art { min-height: 380px; border-right: 1px solid var(--border); border-bottom: 0; }
  .project-content { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
  .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exploring-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .contact-details { border-right: 1px solid var(--border); border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; border-radius:calc(var(--radius) - 2px); font-size:.875rem; font-weight:500; cursor:pointer; transition:background-color .2s,color .2s,border-color .2s,opacity .2s; outline-color:var(--ring); border:0; font-family:inherit; text-decoration:none; }
.btn svg { width:1rem; height:1rem; flex:none; }
.btn-default { background:var(--primary); color:var(--primary-foreground); box-shadow:0 1px 2px color-mix(in oklab,var(--background) 25%,transparent); }
.btn-default:hover { background:color-mix(in oklab,var(--primary) 90%,black); }
.btn-outline { border:1px solid var(--input); background:var(--background); color:var(--foreground); box-shadow:0 1px 2px color-mix(in oklab,var(--background) 25%,transparent); }
.btn-outline:hover { background:var(--accent); color:var(--accent-foreground); }
.btn-ghost { background:transparent; color:var(--foreground); }
.btn-ghost:hover { background:var(--accent); color:var(--accent-foreground); }
.btn-sm { height:2rem; border-radius:var(--radius); padding:.5rem .75rem; font-size:.75rem; }
.btn-lg { height:2.5rem; border-radius:var(--radius); padding:.5rem 2rem; }
.btn-icon { width:2.25rem; height:2.25rem; padding:0; }
.btn-disabled { pointer-events:none; opacity:.5; cursor:not-allowed; }

:root { --motion-ease: cubic-bezier(.22,1,.36,1); }

html { scroll-behavior: smooth; }

.hero-section { perspective: 1200px; overflow: hidden; isolation: isolate; }
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .14;
  background: var(--primary);
  animation: ambientFloat 11s ease-in-out infinite alternate;
}
.hero-section::before { left: -8rem; top: 8rem; }
.hero-section::after { right: -9rem; bottom: 3rem; animation-delay: -4s; }

.hero-grid {
  transform: perspective(900px) rotateX(58deg) scale(1.45);
  transform-origin: center top;
  animation: gridDrift 18s linear infinite;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.8) 55%, transparent 100%);
}

.hero-copy > * { animation: heroRise .8s var(--motion-ease) both; }
.hero-copy .status-pill { animation-delay: .08s; }
.hero-copy .hero-intro { animation-delay: .16s; }
.hero-copy h1 { animation-delay: .24s; }
.hero-copy .hero-role { animation-delay: .32s; }
.hero-copy .hero-quote { animation-delay: .40s; }
.hero-copy .hero-description { animation-delay: .48s; }
.hero-copy .hero-actions { animation-delay: .56s; }
.hero-copy .hero-metrics { animation-delay: .64s; }

.hero-visual { transform-style: preserve-3d; }
.hero-portrait,
.code-workspace { transform-style: preserve-3d; will-change: transform; }
.hero-portrait {
  position: relative;
  overflow: hidden;
  border-radius: 0.65rem;
  animation: portraitFloat 5.5s ease-in-out infinite;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--primary) 10%, transparent);
  isolation: isolate;
  --reveal-x: 50%;
  --reveal-y: 50%;
  --reveal-radius-x: 0px;
  --reveal-radius-y: 0px;
  cursor: pointer;
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: inherit;
  pointer-events: none;
  background: oklch(0.11 0.02 255);
  -webkit-mask-image: radial-gradient(
    ellipse var(--reveal-radius-x, 0px) var(--reveal-radius-y, 0px) at var(--reveal-x, 50%) var(--reveal-y, 50%),
    transparent 0%,
    transparent 50%,
    black 100%
  );
  mask-image: radial-gradient(
    ellipse var(--reveal-radius-x, 0px) var(--reveal-radius-y, 0px) at var(--reveal-x, 50%) var(--reveal-y, 50%),
    transparent 0%,
    transparent 50%,
    black 100%
  );
  filter: url(#organic-mask-displace);
  z-index: 5;
}
.code-workspace {
  box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--primary) 7%, transparent);
}
.code-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--primary) 8%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: screenSweep 7s ease-in-out infinite;
}

.status-pill { transition: transform .35s var(--motion-ease), box-shadow .35s ease, border-color .35s ease; }
.status-pill:hover { transform: translateY(-3px); box-shadow: 0 12px 35px color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }

.btn { position: relative; overflow: hidden; transform: translateZ(0); }
.btn::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -35%;
  width: 24%;
  transform: rotate(20deg) translateX(-180%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: transform .7s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: rotate(20deg) translateX(650%); }

.skill-card,
.project-card,
.cert-card,
.fact-card,
.explore-card,
.achievement-card,
.timeline-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .45s var(--motion-ease), border-color .3s ease, box-shadow .45s ease, background .3s ease;
}
.skill-card:hover,
.project-card:hover,
.cert-card:hover,
.fact-card:hover,
.explore-card:hover,
.achievement-card:hover,
.timeline-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
}

.card-icon,
.project-index,
.cert-top,
.achievement-icon,
.timeline-marker { transform: translateZ(24px); }
.skill-card h3,
.skill-card .skill-list,
.project-content > *,
.cert-card > *,
.fact-card > *,
.explore-card > *,
.achievement-card > *,
.timeline-card > * { transform: translateZ(12px); }

.reveal { transition: opacity .7s ease, transform .7s var(--motion-ease); }
.reveal.is-visible { transform: translateY(0) rotateX(0); }

.section-heading h2 { text-shadow: 0 0 30px color-mix(in srgb, var(--primary) 0%, transparent); transition: text-shadow .5s ease; }
.section-heading:hover h2 { text-shadow: 0 0 30px color-mix(in srgb, var(--primary) 18%, transparent); }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(24px) translateZ(-30px); }
  to { opacity: 1; transform: translateY(0) translateZ(0); }
}
@keyframes ambientFloat {
  from { transform: translate3d(-12px, 8px, 0) scale(.92); }
  to { transform: translate3d(22px, -20px, 0) scale(1.08); }
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to { background-position: 0 80px; }
}
@keyframes portraitFloat {
  0%,100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-8px) rotateZ(.35deg); }
}
@keyframes screenSweep {
  0%, 55% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(520%); }
}

@media (max-width: 899px) {
  .hero-section::before, .hero-section::after { opacity: .09; }
  .hero-grid { transform: perspective(700px) rotateX(58deg) scale(1.8); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section::before, .hero-section::after, .hero-grid, .hero-portrait, .code-workspace::after,
  .hero-copy > * { animation: none !important; }
  .btn, .skill-card, .project-card, .cert-card, .fact-card, .explore-card, .achievement-card, .timeline-card { transform: none !important; }
}

.desktop-nav a.is-active { color: var(--primary); }
.mobile-nav a.is-active { color: var(--primary); }
.mobile-nav[hidden] {
  display: none !important;
}

.education-result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
}

.education-result > strong {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.percentage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--cyan-soft);
  border: 1px solid rgba(118, 220, 255, 0.35);
  color: var(--cyan-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(70, 220, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-card:hover .percentage-badge {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(70, 220, 255, 0.45);
}

@media (max-width: 700px) {
  .education-result {
    width: 100%;
    align-items: flex-start;
    margin-top: 0.5rem;
  }
  .education-result > strong {
    align-self: flex-start;
  }
}