/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --bg: #05060A;
  --bg-2: #0A0D16;
  --cyan: #00E5FF;
  --violet: #7C3AED;
  --violet-hi: #9D6BFF;
  --green: #00FF9D;
  --red: #FF3B5C;
  --text: #E8ECF4;
  --muted: #9AA3B8;
  --dim: #5F6880;

  --glass: rgba(14, 18, 30, 0.55);
  --glass-strong: rgba(10, 13, 22, 0.78);
  --glass-border: rgba(0, 229, 255, 0.18);
  --glass-hi: rgba(0, 229, 255, 0.45);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --nav-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.is-loading { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.05; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { color: #fff; font-weight: 600; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.sr-only, .skills-list {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--cyan); color: #000; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.gradient-text {
  background: linear-gradient(100deg, var(--cyan) 0%, #7DF9FF 30%, var(--violet-hi) 75%, var(--green) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot--green { background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ==========================================================================
   Layers
   ========================================================================== */
#webgl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.static-bg { position: fixed; inset: 0; z-index: 0; display: none; overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(124, 58, 237, .22), transparent 70%),
    radial-gradient(50% 40% at 20% 70%, rgba(0, 229, 255, .12), transparent 70%),
    var(--bg);
}
.static-bg__grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%;
  background-image:
    linear-gradient(rgba(0, 229, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .22) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg); transform-origin: top;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent);
}
html.no-webgl #webgl { display: none; }
html.no-webgl .static-bg { display: block; }

.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 10, .82) 0%, rgba(5, 6, 10, .55) 32%, rgba(5, 6, 10, 0) 58%),
    linear-gradient(180deg, rgba(5, 6, 10, .55) 0%, transparent 14%, transparent 86%, rgba(5, 6, 10, .6) 100%);
}
main { position: relative; z-index: 2; }
.section { position: relative; min-height: 100vh; pointer-events: none; }
.ui, .ui * { pointer-events: auto; }
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* Regions that sit over 3D content (drive the chart cursor + raycasts) */
.stage { position: absolute; pointer-events: none; }
.stage--hero { right: 0; top: 10%; width: 50%; height: 80%; }
.stage--caps { right: 0; top: 10%; width: 40%; height: 80%; }
.stage--vault { position: relative; min-height: 420px; }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg);
  transition: opacity .6s var(--ease), visibility .6s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 20px; }
.loader__candles { display: flex; gap: 6px; align-items: flex-end; height: 40px; }
.loader__candles i { width: 6px; border-radius: 2px; background: var(--green); box-shadow: 0 0 10px rgba(0, 255, 157, .6);
  animation: candle 1.2s var(--ease) infinite; }
.loader__candles i:nth-child(1) { height: 30%; animation-delay: 0s; }
.loader__candles i:nth-child(2) { height: 45%; animation-delay: .08s; }
.loader__candles i:nth-child(3) { height: 38%; animation-delay: .16s; background: var(--red); box-shadow: 0 0 10px rgba(255, 59, 92, .6); }
.loader__candles i:nth-child(4) { height: 60%; animation-delay: .24s; }
.loader__candles i:nth-child(5) { height: 72%; animation-delay: .32s; }
.loader__candles i:nth-child(6) { height: 66%; animation-delay: .40s; }
.loader__candles i:nth-child(7) { height: 95%; animation-delay: .48s; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
@keyframes candle { 0%, 100% { transform: scaleY(.6); transform-origin: bottom; } 50% { transform: scaleY(1); } }
.loader__bar { width: 200px; height: 2px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--violet-hi)); box-shadow: 0 0 10px var(--cyan); transition: width .3s; }
.loader__text { font-size: 12px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin: 0; }

/* ==========================================================================
   Monogram
   ========================================================================== */
.monogram { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; display: inline-grid; place-items: center; line-height: 1; }
.monogram--sm { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; color: var(--cyan);
  border: 1px solid var(--glass-hi); background: rgba(0, 229, 255, .06); box-shadow: 0 0 16px rgba(0, 229, 255, .25), inset 0 0 12px rgba(0, 229, 255, .12); }
.monogram--lg { font-size: 64px; width: 120px; height: 120px; border-radius: 28px;
  background: linear-gradient(160deg, #fff 0%, #9aa7bd 35%, #e9eef7 55%, #5b6479 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  border: 1px solid rgba(0, 229, 255, .35); box-shadow: 0 0 40px rgba(0, 229, 255, .25), inset 0 0 30px rgba(0, 229, 255, .08);
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, .45)); }
.monogram--chrome { font-size: 34px;
  background: linear-gradient(170deg, #ffffff 0%, #b8c2d6 30%, #f4f7fc 48%, #6c7488 70%, #dfe6f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, .7)) drop-shadow(0 0 22px rgba(0, 229, 255, .35)); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(1100px, calc(100% - 2 * 16px)); height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px 0 14px;
  background: rgba(10, 13, 22, .55); border: 1px solid var(--glass-border); border-radius: 16px;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05); }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__status { font-size: 11px; letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; }
.nav__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); margin-right: 8px; animation: blink 2.4s infinite; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { display: block; padding: 8px 14px; border-radius: 10px; font-size: 14px; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s; position: relative; }
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav__links a.is-active { color: var(--cyan); background: rgba(0, 229, 255, .08); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .25); }
.nav__links a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--glass-border); background: transparent; position: relative; }
.nav__toggle i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
.nav__toggle i:nth-of-type(1) { top: 16px; } .nav__toggle i:nth-of-type(2) { top: 24px; }
.nav__toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-4px) rotate(-45deg); }

/* ==========================================================================
   Buttons, labels
   ========================================================================== */
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.section-title { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 22px; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: #cfd6e4; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s; will-change: transform; }
.btn--primary { color: #031016; background: linear-gradient(100deg, var(--cyan), #6EF3FF 45%, var(--violet-hi));
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .5), 0 8px 30px rgba(0, 229, 255, .25), 0 0 40px rgba(124, 58, 237, .25); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 229, 255, .8), 0 12px 40px rgba(0, 229, 255, .4), 0 0 60px rgba(124, 58, 237, .35); }
.btn--ghost { color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--glass-hi); color: var(--cyan); transform: translateY(-2px); }

.glass, .holo, .exp-card, .card__face, .contact__links a {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 229, 255, .04);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { display: flex; align-items: center; }
.hero__inner { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 60px; }
.hero__copy { max-width: 600px; }
.hero__title { font-size: clamp(44px, 7.4vw, 104px); font-weight: 700; letter-spacing: -0.045em; line-height: .95; margin-bottom: 26px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__sub { font-size: clamp(17px, 1.6vw, 21px); color: #c9d1e0; max-width: 520px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; font-size: 12px; }
.hero__meta dt { color: var(--dim); letter-spacing: .14em; margin-bottom: 4px; }
.hero__meta dd { margin: 0; color: var(--muted); }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 10px; letter-spacing: .3em; color: var(--dim); display: grid; justify-items: center; gap: 10px; }
.scroll-hint span { width: 1px; height: 38px; background: linear-gradient(var(--cyan), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: flex; align-items: center; }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: 120px; padding-bottom: 200px; }
.about__copy { max-width: 560px; }
.about__copy p:not(.eyebrow):not(.lead) { color: var(--muted); }
.holo { border-radius: 22px; padding: 22px; position: relative; overflow: hidden;
  transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); transform-style: preserve-3d;
  animation: float 7s ease-in-out infinite; }
.holo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 229, 255, .035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen; }
.holo::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(140deg, rgba(0, 229, 255, .7), transparent 35%, transparent 65%, rgba(124, 58, 237, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.holo__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); margin-bottom: 14px; }
.holo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 16px; border-radius: 14px; background: rgba(0, 229, 255, .035); border: 1px solid rgba(0, 229, 255, .1); display: grid; gap: 6px; }
.stat__label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat__value { font-family: var(--font-mono); font-weight: 600; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(0, 229, 255, .45); }
.spark { width: 100%; height: 28px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--green); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(0, 255, 157, .7)); stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.6s var(--ease); }
.holo.is-in .spark polyline { stroke-dashoffset: 0; }
.holo__foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 11px; color: var(--green); letter-spacing: .08em; }

.ticker-flat { display: none; position: absolute; left: 0; right: 0; bottom: 60px; overflow: hidden; border-block: 1px solid var(--glass-border); background: rgba(0, 229, 255, .03); padding: 12px 0; }
.ticker-flat__track { display: inline-flex; gap: 32px; white-space: nowrap; animation: marquee 40s linear infinite; font-size: 14px; color: var(--cyan); }
.ticker-flat__track .up { color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }
html.no-webgl .ticker-flat { display: block; }

/* ==========================================================================
   Experience
   ========================================================================== */
.experience { padding-top: 140px; }
.exp__intro { min-height: 60vh; display: grid; align-content: center; max-width: 1320px; }
.exp__intro > * { max-width: 560px; }
.block-step { min-height: 115vh; display: flex; align-items: center; }
.exp-card { width: min(540px, 100%); border-radius: 22px; padding: 26px 28px; position: relative;
  opacity: .35; transform: scale(.94) translateY(20px); transform-origin: left center; filter: saturate(.4);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s, border-color .7s, box-shadow .7s; }
.exp-card.is-active { opacity: 1; transform: none; filter: none; border-color: var(--glass-hi);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 229, 255, .25), 0 0 50px rgba(0, 229, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08); }
.exp-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 60% at 0% 0%, rgba(0, 229, 255, .22), transparent 60%); }
.exp-card.is-confirming::before { animation: confirm 1.1s var(--ease); }
@keyframes confirm { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.exp-card__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.exp-card__head h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 2px 0 6px; }
.exp-card__role { color: var(--muted); font-size: 14px; margin: 0; }
.exp-card__block { font-size: 11px; letter-spacing: .14em; color: var(--dim); margin: 0; }
.exp-card .confirm { color: var(--dim); transition: color .4s, text-shadow .4s; }
.exp-card.is-active .confirm { color: var(--green); text-shadow: 0 0 10px rgba(0, 255, 157, .6); }
.exp-card__date { font-size: 12px; color: var(--cyan); letter-spacing: .08em; margin-bottom: 14px; padding: 6px 10px; display: inline-block; border-radius: 8px; background: rgba(0, 229, 255, .07); border: 1px solid rgba(0, 229, 255, .15); }
.exp-card__bullets { display: grid; gap: 10px; margin-bottom: 18px; }
.exp-card__bullets li { position: relative; padding-left: 20px; color: #c3cad8; font-size: 15px; line-height: 1.55; }
.exp-card__bullets li::before { content: "▲"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--green); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 11px; padding: 4px 9px; border-radius: 6px; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }

/* Animated experience icons */
.exp-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(0, 229, 255, .18), rgba(124, 58, 237, .12)); border: 1px solid rgba(0, 229, 255, .3); box-shadow: 0 0 20px rgba(0, 229, 255, .15) inset; }
.exp-icon svg { width: 36px; height: 36px; overflow: visible; }
.exp-icon .stroke { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--cyan)); }
.exp-icon .stroke.thin { stroke-width: 1.3; opacity: .8; }
.exp-icon .stroke.fill { fill: rgba(0, 229, 255, .15); }
.exp-icon .sweep { transform-origin: 24px 23px; animation: spin 2.6s linear infinite; }
.exp-icon .sweep path { fill: rgba(0, 255, 157, .45); }
.exp-icon .nodes circle { fill: var(--violet-hi); filter: drop-shadow(0 0 3px var(--violet-hi)); animation: pulse 2s ease-in-out infinite; }
.exp-icon .nodes circle:nth-child(2n) { animation-delay: .5s; }
.exp-icon .nodes .core { fill: var(--cyan); }
.exp-icon--bolt path { animation: flicker 3s infinite; }
.exp-icon .l1 { animation: lift 2.4s ease-in-out infinite; }
.exp-icon .l3 { stroke: var(--violet-hi); }
.exp-icon .shine { stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.exp-icon .laser { stroke: var(--red); stroke-width: 1.6; filter: drop-shadow(0 0 4px var(--red)); animation: scan 2.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .3; } 96% { opacity: 1; } }
@keyframes lift { 50% { transform: translateY(-2px); } }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } }

/* ==========================================================================
   Skills
   ========================================================================== */
.skills { display: flex; align-items: center; }
.graph-stage { position: absolute; right: 0; top: 8%; width: 62%; height: 84%; pointer-events: auto; touch-action: pan-y; cursor: grab; }
.graph-stage.is-dragging { cursor: grabbing; }
.skills__inner { padding-top: 120px; padding-bottom: 120px; }
.skills__copy { max-width: 420px; }
.legend { display: grid; gap: 4px; margin-top: 8px; }
.legend li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--muted); cursor: default; transition: background .2s, color .2s; border: 1px solid transparent; }
.legend li:hover, .legend li.is-hot { background: rgba(255, 255, 255, .04); color: var(--text); border-color: rgba(255, 255, 255, .06); }
.legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
html.no-webgl .skills-list { position: static !important; width: auto; height: auto; margin: 20px 0 0; overflow: visible; clip: auto; white-space: normal; }
html.no-webgl .graph-stage, html.no-webgl .skills__hint { display: none; }
.skills-list h3 { font-size: 15px; margin: 14px 0 6px; color: var(--cyan); }
.skills-list ul { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-list li { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-family: var(--font-mono); }

.graph-labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.graph-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 6px; color: #fff; background: rgba(5, 6, 10, .72); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 35%, transparent); opacity: 0; transition: opacity .25s; will-change: transform; }
.graph-label--cluster { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--c); }
.graph-label.is-on { opacity: 1; }

/* ==========================================================================
   Capabilities
   ========================================================================== */
.caps { display: flex; align-items: center; }
.caps__inner { padding-top: 130px; padding-bottom: 130px; }
.caps__head { max-width: 620px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.card { perspective: 1000px; min-height: 240px; }
.card__btn { all: unset; display: block; width: 100%; height: 100%; min-height: 240px; position: relative; cursor: pointer; transform-style: preserve-3d; border-radius: 18px; }
.card__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.card.is-flipped .card__inner { transform: rotateY(180deg); }
.card__face { position: absolute; inset: 0; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.card__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 229, 255, .16), transparent 60%); opacity: 0; transition: opacity .3s; }
.card:hover .card__face::after { opacity: 1; }
.card__back { transform: rotateY(180deg); background: rgba(12, 10, 26, .82); border-color: rgba(157, 107, 255, .35); }
.card__idx { font-size: 11px; color: var(--dim); letter-spacing: .14em; display: flex; justify-content: space-between; }
.card__icon { width: 44px; height: 44px; margin: 18px 0 16px; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(0, 229, 255, .7)); }
.card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card__title { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; font-size: 20px; margin-bottom: 8px; color: var(--text); }
.card__metric { margin-top: auto; font-size: 12px; color: var(--green); letter-spacing: .06em; }
.card__back .card__title { font-size: 16px; color: var(--violet-hi); margin-bottom: 10px; }
.card__text { display: block; font-size: 13.5px; color: #cbd2e1; line-height: 1.55; margin-bottom: 10px; }
.card__back .mono { font-size: 11px; color: var(--muted); margin-top: auto; }
.card__hint { font-size: 10.5px; color: var(--dim); letter-spacing: .1em; margin-top: 10px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: flex; flex-direction: column; justify-content: center; }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 120px; padding-bottom: 60px; flex: 1; }
.contact__copy { max-width: 580px; }
.contact__title { font-size: clamp(38px, 5.4vw, 76px); }
.contact__links { display: grid; gap: 10px; margin: 26px 0 30px; }
.contact__links a { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; font-size: 15px; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.contact__links a:hover { border-color: var(--glass-hi); transform: translateX(6px); box-shadow: 0 0 30px rgba(0, 229, 255, .15); }
.contact__links .k { font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.contact__links .arr { color: var(--cyan); }
.footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, .05); }
.footer p { margin: 0; font-size: 12px; color: var(--dim); }

/* ==========================================================================
   Cursor
   ========================================================================== */
.cursor { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
.cursor__cross { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; will-change: transform; transition: width .2s, height .2s, margin .2s; }
.cursor__cross::before, .cursor__cross::after { content: ""; position: absolute; background: var(--cyan); box-shadow: 0 0 6px var(--cyan), 0 0 12px rgba(0, 229, 255, .6); }
.cursor__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  -webkit-mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(#000 0 38%, transparent 38% 62%, #000 62%); }
.cursor__cross::after { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px;
  -webkit-mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62%); }
.cursor.is-link .cursor__cross { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.cursor__guide { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s; will-change: transform; }
.cursor__guide--x { width: 100vw; height: 1px; background: repeating-linear-gradient(90deg, rgba(0, 229, 255, .35) 0 4px, transparent 4px 8px); }
.cursor__guide--y { height: 100vh; width: 1px; background: repeating-linear-gradient(180deg, rgba(0, 229, 255, .35) 0 4px, transparent 4px 8px); }
.cursor__tag { position: absolute; left: 0; top: 0; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 229, 255, .14); color: var(--cyan); border: 1px solid rgba(0, 229, 255, .35); opacity: 0; transition: opacity .25s; white-space: nowrap; will-change: transform; }
.cursor.is-chart .cursor__guide, .cursor.is-chart .cursor__tag { opacity: 1; }

/* ==========================================================================
   Scroll progress "price line"
   ========================================================================== */
.price-line { position: fixed; right: 0; top: 0; bottom: 0; width: 46px; z-index: 40; pointer-events: none; }
.price-line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.price-line__track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.price-line__path { fill: none; stroke: var(--green); stroke-width: 1.5; filter: drop-shadow(0 0 3px var(--green)) drop-shadow(0 0 8px rgba(0, 255, 157, .5)); }
.price-line__head { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green), 0 0 20px var(--green); will-change: transform; }
.price-line__head span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--green); background: rgba(5, 6, 10, .8); border: 1px solid rgba(0, 255, 157, .35); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

/* ==========================================================================
   Reveal defaults (GSAP sets final state; this avoids flash when JS runs)
   ========================================================================== */
html.js .reveal { opacity: 0; }
html.no-gsap .reveal { opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .scrim { background: linear-gradient(180deg, rgba(5, 6, 10, .4) 0%, rgba(5, 6, 10, 0) 25%, rgba(5, 6, 10, .55) 55%, rgba(5, 6, 10, .92) 100%); }
  .nav { top: 10px; padding: 0 8px 0 10px; }
  .nav__status { display: none; }
  .nav__toggle { display: block; }
  .nav nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; }
  .nav__links { flex-direction: column; padding: 8px; border-radius: 14px; background: rgba(10, 13, 22, .92); border: 1px solid var(--glass-border); backdrop-filter: blur(16px);
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 12px 14px; font-size: 16px; }

  .hero { align-items: flex-end; }
  .hero__inner { padding-bottom: 90px; }
  .hero__title { font-size: clamp(42px, 12vw, 64px); }
  .hero__meta { display: none; }
  .stage--hero { top: 8%; width: 100%; height: 45%; }
  .scroll-hint { display: none; }

  .about__inner { grid-template-columns: 1fr; padding-bottom: 240px; }
  .holo { transform: none; }

  .block-step { align-items: flex-end; min-height: 120vh; padding-bottom: 8vh; }
  .exp-card { background: var(--glass-strong); padding: 20px; transform-origin: center bottom; }
  .exp-card__bullets li { font-size: 14px; }

  .graph-stage { top: 6%; width: 100%; height: 52%; }
  .skills { align-items: flex-end; }
  .skills__inner { padding-bottom: 60px; }
  .legend { grid-template-columns: 1fr 1fr; }
  .legend li { padding: 6px 8px; font-size: 13px; }

  .stage--caps { display: none; }
  .cards { max-width: none; }

  .contact__inner { grid-template-columns: 1fr; padding-top: 48vh; }
  .section-title, .hero__title, .lead, .hero__sub, .contact__copy .muted { text-shadow: 0 2px 24px rgba(5, 6, 10, .9); }
  .gradient-text { text-shadow: none; }
  .stage--vault { display: none; }
  .price-line { width: 26px; }
  .price-line__head span { display: none; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .card, .card__btn { min-height: 210px; }
  .contact__links a { grid-template-columns: 1fr auto; }
  .contact__links .k { grid-column: 1 / -1; }
  .contact__links a span:nth-child(2) { font-size: 14px; overflow-wrap: anywhere; }
  .holo__grid { gap: 8px; }
  .stat { padding: 12px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .exp-card { transform: none !important; transition: opacity .6s, border-color .6s, box-shadow .6s, filter .6s; }
  .card__inner { transition: transform .01ms; }
  .card.is-flipped .card__front { visibility: hidden; }
  .holo { animation: none; }
}