:root {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f8f8fc;
  background: #10111c;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --bg: #10111c;
  --surface: #171927;
  --surface-2: #1d1f30;
  --surface-3: #222537;
  --text: #f8f8fc;
  --muted: #aaaaba;
  --quiet: #747688;
  --line: rgba(226, 229, 248, .13);
  --green: #d7fb83;
  --green-strong: #c8f56b;
  --purple: #b5a5ff;
  --purple-deep: #695ac9;
  --footer-bg: #10111c;
  --serif: Georgia, 'Times New Roman', serif;
  --display: 'Manrope', 'DM Sans', system-ui, sans-serif;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f8f8f4;
  --surface: #fff;
  --surface-2: #f0efe9;
  --surface-3: #e9e7e2;
  --text: #1a1c29;
  --muted: #545966;
  --quiet: #7d808b;
  --line: rgba(30, 35, 50, .14);
  --green: #d4f587;
  --green-strong: #bedf62;
  --purple: #7363ca;
  --purple-deep: #6a59be;
  --footer-bg: #151625;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--text); transition: background .25s, color .25s; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
::selection { background: var(--green); color: #121425; }
svg { display: block; }
.container { width: min(100% - 112px, 1320px); margin-inline: auto; }
.app { position: relative; overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; background: var(--green); color: #151728; border-radius: 8px; padding: 12px 16px; }
.skip-link:focus { top: 15px; }
.scroll-progress { position: fixed; z-index: 101; height: 3px; top: 0; left: 0; background: var(--green); transition: width .1s; }
.section-pad { padding: 130px 0; }
.section-label { display: inline-flex; gap: 13px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .19em; white-space: nowrap; }
.section-label-index { color: var(--purple); font-family: var(--display); font-size: 11px; }
.section-label-light { color: #b6b4c7; }
.section-label-light .section-label-index { color: var(--green); }

/* NAVIGATION */
.site-header { height: 91px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); z-index: 100; position: sticky; top: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.wordmark { display: inline-flex; gap: 13px; align-items: center; flex: 0 0 auto; }
.wordmark-icon { font-family: var(--display); width: 41px; height: 41px; background: var(--green); border-radius: 13px; color: #171827; display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -.16em; padding-right: 6px; line-height: 1; }
.wordmark-icon span { color: #8671ce; }
.wordmark-text { font-size: 13px; font-weight: 800; letter-spacing: .065em; line-height: 1.15; font-family: var(--display); }
.wordmark-descriptor { display: block; font-family: 'DM Sans', sans-serif; font-size: 8px; color: var(--quiet); font-weight: 700; letter-spacing: .14em; padding-top: 5px; }
.nav-links { display: flex; gap: clamp(17px, 2.45vw, 37px); align-items: center; margin-left: auto; margin-right: 22px; }
.nav-links > a:not(.mobile-resume) { position: relative; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .2s; padding-block: 34px; }
.nav-links > a:not(.mobile-resume):hover, .nav-links > a.nav-active { color: var(--text); }
.nav-links > a:not(.mobile-resume)::after { position: absolute; bottom: 25px; content: ''; height: 3px; border-radius: 3px; left: 0; right: 100%; background: var(--green); transition: right .25s; }
.nav-links > a.nav-active::after, .nav-links > a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.theme-toggle, .menu-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text); border-radius: 50%; background: transparent; transition: transform .25s, background .25s; }
.theme-toggle:hover { transform: rotate(20deg); background: var(--surface-2); }
.header-cta { display: inline-flex; align-items: center; gap: 14px; background: var(--green); color: #121425; border-radius: 9px; font-weight: 800; font-size: 12px; padding: 13px 18px; transition: transform .2s, background .2s; }
.header-cta:hover { transform: translateY(-2px); background: #e6ffa9; }
.menu-toggle, .mobile-resume { display: none; }

/* HERO */
.hero { position: relative; background: radial-gradient(ellipse at 70% 45%, rgba(99, 85, 181, .17), transparent 43%), var(--bg); min-height: 749px; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(90deg, transparent 99.5%, var(--text) 100%); background-size: 97px 100%; mask-image: linear-gradient(to bottom, transparent, black 20%, transparent 85%); }
.hero-container { padding: 65px 0 34px; display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: min(4vw, 70px); min-height: 674px; }
.hero-copy { position: relative; z-index: 4; padding-top: 4px; }
.hero-status { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(215,251,131,.3); color: var(--green); background: rgba(215,251,131,.045); font-size: 9px; font-weight: 800; letter-spacing: .095em; padding: 11px 13px; border-radius: 100px; max-width: 100%; }
:root[data-theme='light'] .hero-status { color: #4a6027; background: rgba(155,198,76,.14); }
.status-dot, .live-indicator { width: 7px; height: 7px; display: inline-block; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(216, 251, 131, .12); flex: 0 0 auto; }
.hero-overline { margin: 38px 0 16px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .19em; }
.overline-spark { color: var(--green); font-size: 16px; margin-left: 4px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(53px, 5.4vw, 91px); line-height: 1.095; letter-spacing: -.075em; margin: 0; white-space: nowrap; }
.headline-outline { color: transparent; -webkit-text-stroke: 1.6px var(--text); }
.headline-accent { color: var(--green); }
:root[data-theme='light'] .headline-accent { color: #6c9140; }
.headline-dot { color: var(--purple); }
.hero-description { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 475px; margin: 26px 0 29px; }
.hero-description strong { color: var(--text); font-weight: 700; }
.hero-buttons { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 52px; padding: 15px 22px; border-radius: 10px; font-size: 12px; font-weight: 800; border: 1px solid transparent; transition: transform .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--green); color: #171927; }
.btn-primary:hover { background: #e6ffa8; }
.btn-ghost { color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--purple); background: var(--surface); }
.hero-socials { display: flex; align-items: center; gap: 16px; margin-top: 48px; color: var(--muted); }
.hero-socials > span:first-child { color: var(--quiet); font-size: 9px; letter-spacing: .17em; font-weight: 800; }
.hero-socials a { transition: transform .2s, color .2s; }
.hero-socials a:hover { transform: translateY(-2px); color: var(--green); }
.social-separator { width: 1px; height: 19px; background: var(--line); margin-inline: 5px; }
.hero-socials > span:last-child { font-size: 11px; display: flex; align-items: center; gap: 6px; }
.hero-baseline { height: 75px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.scroll-cue { display: inline-flex; align-items: center; gap: 11px; transition: color .2s; }
.scroll-cue:hover { color: var(--text); }
.scroll-icon { width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.hero-index { color: var(--purple); }
/* HERO ART */
.hero-art { width: 100%; max-width: 630px; height: 564px; position: relative; margin-left: auto; isolation: isolate; }
.hero-art-grid { position: absolute; inset: 15px; border-radius: 50%; border: 1px dashed rgba(185,169,255,.19); transform: rotate(19deg); }
.hero-art-grid::after { content: ''; inset: 45px; border-radius: 50%; border: 1px solid rgba(185,169,255,.13); position: absolute; }
.art-glow { position: absolute; filter: blur(65px); opacity: .36; border-radius: 50%; z-index: -1; }
.art-glow-one { width: 280px; height: 280px; background: #8575f6; left: 55px; top: 80px; }
.art-glow-two { width: 210px; height: 210px; background: #a8e465; right: 15px; bottom: 45px; opacity: .2; }
.hero-main-card { position: absolute; width: 83%; height: 385px; left: 11%; top: 83px; transform: rotate(-7deg); border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #aaa0f6 0%, #998be2 56%, #7872cc 100%); box-shadow: 0 32px 0 -10px #24253b, 0 42px 70px rgba(4,4,12,.37); padding: 25px 31px; z-index: 3; color: #1d1c3b; }
.hero-main-card::before { content: ''; position: absolute; right: -145px; bottom: -156px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, #d3cafa 0 10%, transparent 11% 17%, rgba(228,223,255,.38) 18% 19%, transparent 20% 33%, rgba(227,219,255,.3) 34% 34.5%, transparent 35% 48%, rgba(232,225,255,.36) 48.5% 49%, transparent 49%); }
.hero-main-card::after { content: '✳'; position: absolute; right: 29px; top: 85px; font-size: 68px; color: #d6ff8f; animation: slow-spin 18s linear infinite; }
.main-card-top, .hero-card-bottom, .hero-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 13px; position: relative; z-index: 1; }
.main-card-top { font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.main-card-top span:first-child { display: flex; gap: 9px; align-items: center; }
.tiny-orb { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #1d1c3b; }
.hero-card-title { font-family: var(--display); font-size: clamp(32px, 3vw, 53px); font-weight: 800; line-height: 1.15; letter-spacing: -.065em; position: relative; z-index: 1; margin-top: 69px; }
.hero-card-title > span:first-child { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hero-card-serif { font-family: var(--serif); font-style: italic; letter-spacing: -.075em; font-weight: 500; }
.hero-card-bottom { justify-content: flex-start; gap: 7px; margin-top: 37px; }
.art-pill { display: flex; gap: 7px; align-items: center; padding: 9px 11px; border-radius: 100px; font-size: 8px; border: 1px solid rgba(37,31,70,.35); font-weight: 800; letter-spacing: .05em; }
.pill-marker { width: 5px; height: 5px; background: #d7ff8d; border: 1px solid #2c2858; border-radius: 100%; }
.hero-card-foot { margin-top: 32px; border-top: 1px solid rgba(42,34,88,.24); padding-top: 13px; font-size: 10px; font-weight: 600; }
.art-sticker { position: absolute; z-index: 5; display: flex; align-items: center; box-shadow: 0 16px 34px rgba(0,0,0,.25); font-weight: 800; }
.sticker-design { top: 40px; right: 0; padding: 14px 16px; border-radius: 13px; background: var(--green); color: #171927; font-size: 12px; gap: 8px; transform: rotate(9deg); animation: floaty 5s ease-in-out infinite; }
.sticker-circle { display: grid; place-items: center; border: 1px solid #4c6339; border-radius: 50%; width: 22px; height: 22px; margin-left: 10px; }
.sticker-code { bottom: 55px; left: 0; gap: 11px; font-size: 11px; line-height: 1.45; padding: 17px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: #202137; color: #fff; transform: rotate(6deg); animation: floaty 6s ease-in-out infinite reverse; }
.sticker-code > svg:first-child { color: var(--green); }
.sticker-code > svg:last-child { color: #aaa8cc; margin-left: 8px; }
.hero-art-number { position: absolute; right: 0; bottom: 2px; color: var(--purple); font-family: var(--display); font-size: 54px; font-weight: 800; letter-spacing: -.11em; opacity: .55; }
.hero-art-number span { font-size: 14px; vertical-align: top; position: relative; top: 9px; letter-spacing: 0; }
.orbit { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(215,251,131,.1); }
.orbit-one { top: 135px; left: 14px; }
.orbit-two { bottom: 110px; right: 30px; }
@keyframes floaty { 50% { translate: 0 -9px; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }

/* TICKER */
.marquee { overflow: hidden; background: var(--green); color: #222435; height: 95px; display: flex; align-items: center; }
.marquee-track { display: flex; width: max-content; animation: slide-marquee 35s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.marquee-group span { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.075em; }
.marquee-group .marquee-star { color: #927cd8; font-size: 43px; line-height: 1; }
@keyframes slide-marquee { to { transform: translateX(-33.3333%); } }

/* INTRO */
.intro-section { background: var(--bg); }
.intro-grid { display: grid; grid-template-columns: 27% 1fr; gap: 7%; }
.intro-side { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.intro-side-art { width: 208px; height: 208px; position: relative; display: grid; place-items: center; color: var(--green); margin-left: 30px; transform: rotate(-7deg); }
.intro-side-art svg { width: 100%; animation: slow-spin 38s linear infinite; }
.intro-side-art span { position: absolute; font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; color: #1c2230; letter-spacing: -.02em; }
.intro-main h2 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.26; margin: -12px 0 33px; letter-spacing: -.065em; max-width: 940px; }
.text-purple { color: var(--purple); }
.text-underline { text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.text-green { color: var(--green); font-family: var(--serif); font-style: italic; font-weight: 500; }
:root[data-theme='light'] .text-green { color: #7c9e44; }
.intro-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; border-top: 1px solid var(--line); padding-top: 28px; }
.intro-columns p { font-size: 14px; line-height: 1.95; color: var(--muted); margin: 0; }
.intro-columns strong { color: var(--text); }
.text-link { display: inline-flex; gap: 11px; align-items: center; color: var(--text); font-weight: 800; font-size: 12px; margin-top: 29px; border-bottom: 1px solid var(--green); padding-bottom: 8px; }
.text-link svg { transition: transform .2s; }
.text-link:hover svg { transform: translate(3px,-3px); }

/* WORK */
.work-section { background: var(--surface); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-heading h2 { font-family: var(--display); font-size: clamp(43px, 5.3vw, 77px); font-weight: 800; letter-spacing: -.08em; margin: 26px 0 0; line-height: 1.1; }
.section-heading h2 em { color: var(--purple); font-family: var(--serif); font-weight: 400; }
.heading-asterisk { display: inline-block; color: var(--green); font-size: .55em; vertical-align: top; position: relative; top: -6px; left: 7px; }
.heading-aside { display: flex; gap: 37px; align-items: flex-end; }
.heading-aside p { max-width: 250px; font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.work-count { font-family: var(--display); font-size: 39px; font-weight: 800; line-height: 1; letter-spacing: -.065em; color: var(--green); }
:root[data-theme='light'] .work-count { color: #74903e; }
.work-count span { display: block; margin-top: 8px; color: var(--quiet); font-size: 8px; letter-spacing: .16em; }
.project-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 47px 0 26px; border-top: 1px solid var(--line); padding-top: 23px; }
.project-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.project-filters button { border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 100px; padding: 10px 18px; font-size: 11px; font-weight: 800; transition: background .2s, color .2s; }
.project-filters button:hover { color: var(--text); border-color: var(--purple); }
.project-filters button.filter-active { background: var(--green); border-color: var(--green); color: #151725; }
.toolbar-hint { display: flex; align-items: center; gap: 8px; color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 29px; }
.project-card { border: 1px solid var(--line); background: var(--bg); border-radius: 17px; overflow: hidden; min-width: 0; transition: transform .32s, border-color .32s, box-shadow .32s; }
.project-card:hover { transform: translateY(-6px); border-color: rgba(181,165,255,.5); box-shadow: 0 22px 55px rgba(0,0,0,.09); }
.project-image { height: 286px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.project-featured .project-image { height: 355px; }
.project-counter { position: absolute; top: 19px; right: 21px; z-index: 10; padding: 8px 12px; background: rgba(14,15,24,.72); border: 1px solid rgba(255,255,255,.23); color: #fff; border-radius: 100px; font-size: 9px; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(8px); }
.project-card-body { padding: 28px 29px 25px; }
.project-type { display: flex; align-items: center; gap: 11px; color: var(--quiet); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.project-type span:first-child { color: var(--purple); }
.project-type-line { width: 17px; height: 1px; background: var(--quiet); }
.project-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.project-heading-row h3 { font-family: var(--display); font-size: clamp(22px, 2.1vw, 29px); letter-spacing: -.05em; line-height: 1.2; margin: 0; }
.project-arrow { background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; width: 43px; height: 43px; display: grid; place-items: center; flex-shrink: 0; transition: background .22s, transform .22s; }
.project-arrow:hover { background: var(--green); color: #202129; transform: rotate(45deg); }
.project-subtitle { margin: 8px 0 0; color: var(--purple); font-weight: 800; font-size: 12px; }
.project-description { color: var(--muted); font-size: 12.5px; line-height: 1.85; max-width: 510px; min-height: 67px; margin: 14px 0 21px; }
.project-footer { border-top: 1px solid var(--line); padding-top: 18px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.project-tags span { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 5px; padding: 7px 10px; font-size: 9px; font-weight: 700; }
.all-work { margin-top: 39px; display: flex; align-items: center; justify-content: center; gap: 25px; flex-wrap: wrap; }
.all-work > span { color: var(--muted); font-size: 12px; }
.btn-outline { border-color: var(--line); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--surface-2); border-color: var(--purple); }

/* PROJECT VISUAL ARTWORK (vector/CSS illustrations; no stock imagery) */
.visual-inner { width: 100%; height: 100%; position: relative; display: grid; place-items: center; }
.mood-scene { background: radial-gradient(ellipse at 80% 15%, #863df0 0, transparent 45%), linear-gradient(125deg, #221b64 0%, #121431 80%); }
.mood-scene::before, .traffic-scene::before, .movies-scene::before { content: ''; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; transform: translate(50%,40%); }
.music-window { width: 76%; max-width: 470px; min-height: 278px; background: rgba(13,12,36,.96); border: 1px solid rgba(235,215,255,.14); border-radius: 12px; color: white; box-shadow: 20px 30px 45px rgba(0,0,0,.29); position: relative; transform: rotate(-5deg) translateY(8px); overflow: hidden; }
.project-featured .music-window { min-height: 300px; }
.music-top { padding: 16px 18px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 10px; font-weight: 800; }
.music-mark { background: #d6f992; color: #12122b; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; }
.music-top-dots { margin-left: auto; color: #9289ba; font-size: 12px; letter-spacing: 3px; }
.music-content { padding: 19px 26px; }
.music-eyebrow { font-size: 8px; letter-spacing: .18em; color: #b7a8fd; font-weight: 700; }
.music-title { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.07em; margin-top: 5px; }
.music-subtitle { font-size: 10px; color: #aca7c7; margin-top: 2px; }
.album-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.album { aspect-ratio: 1.17; border-radius: 6px; display: flex; align-items: flex-end; padding: 10px; color: #fff; font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.album-a { background: linear-gradient(140deg,rgba(255,255,255,.25),transparent), radial-gradient(circle at 70% 32%,#f5d8c2 0 13%,transparent 14%), linear-gradient(25deg,#aa577a,#f3a9b0); }
.album-b { background: radial-gradient(circle at 65% 26%,#f0bf89 0 12%,transparent 13%), linear-gradient(155deg,#371f77,#927ad0 50%,#d5588f); }
.album-c { background: radial-gradient(circle at 30% 30%,#ffe39f 0 19%,transparent 20%), linear-gradient(140deg,#8baaa1,#346270); }
.player { display: flex; align-items: center; gap: 13px; color: #d7ff9b; margin-top: 18px; }
.player span { color: #8d8aa8; font-size: 9px; }
.player-progress { height: 3px; background: #494364; flex: 1; border-radius: 6px; }
.player-progress i { display: block; width: 43%; height: 100%; background: #d6fa89; border-radius: inherit; }
.visual-float { position: absolute; background: #dfaaed; border-radius: 13px; box-shadow: 0 14px 22px rgba(0,0,0,.25); color: #351f53; width: 54px; height: 54px; display: grid; place-items: center; }
.music-note { right: 9%; top: 9%; transform: rotate(17deg); }
.traffic-scene { background: radial-gradient(circle at 75% 35%, #244b5e, transparent 50%), linear-gradient(125deg,#0c253a,#0b1728); color: white; }
.traffic-glow { position: absolute; width: 280px; height: 280px; background: #1a6f79; filter: blur(92px); opacity: .6; }
.traffic-panel { position: relative; z-index: 1; width: 77%; max-width: 450px; height: 270px; border: 1px solid rgba(102, 231, 214, .3); background: rgba(9,21,35,.88); border-radius: 12px; padding: 18px 19px; transform: rotate(4deg); box-shadow: 0 26px 45px rgba(0,0,0,.25); }
.project-featured .traffic-panel { height: 297px; }
.traffic-panel-head { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .1em; color: #b9f8e6; font-weight: 800; }
.traffic-panel-head .live-indicator { background: #6eebbf; box-shadow: 0 0 0 4px rgba(105,233,187,.12); }
.traffic-model { color: #83a6ad; margin-left: auto; }
.traffic-detection { height: 178px; display: grid; place-items: center; position: relative; margin: 14px auto 0; width: 65%; background: radial-gradient(circle,rgba(76,166,168,.17), transparent 70%), repeating-linear-gradient(0deg, transparent,transparent 18px, rgba(143,232,224,.04) 19px), repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(143,232,224,.04) 19px); }
.road-sign { width: 139px; height: 139px; border-radius: 50%; background: #fafafa; border: 15px solid #fb6268; display: grid; place-items: center; box-shadow: 0 16px 35px rgba(0,0,0,.4); transform: rotate(-4deg); }
.road-sign span { font-family: var(--display); font-weight: 900; color: #172338; font-size: 64px; letter-spacing: -.09em; padding-right: 8px; }
.detection-corner { position: absolute; width: 24px; height: 24px; border-color: #83ffe3; border-style: solid; }
.tl { left: 0; top: 0; border-width: 2px 0 0 2px; } .tr { right: 0; top: 0; border-width: 2px 2px 0 0; } .bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.detection-footer { display: flex; justify-content: space-between; align-items: center; color: #9bb1bb; font-size: 9px; margin-top: 8px; }
.recognised { color: #78eac1; letter-spacing: .08em; font-size: 8px; font-weight: 800; }
.recognised span { font-size: 12px; }
.visual-coordinate { position: absolute; left: 26px; bottom: 19px; font-size: 9px; color: #7da6af; letter-spacing: .12em; }
.research-scene { background: linear-gradient(135deg,#302149,#14172c); }
.research-scene::after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: #b69bff; filter: blur(100px); opacity: .27; top: -25px; right: -45px; }
.research-card { width: 83%; max-width: 480px; height: 235px; padding: 20px 22px; position: relative; z-index: 1; background: #1b2035; border: 1px solid rgba(255,255,255,.11); box-shadow: 25px 25px 50px rgba(0,0,0,.28); color: white; border-radius: 11px; transform: rotate(-4deg); }
.research-head { display: flex; align-items: center; justify-content: space-between; color: #aaa6c5; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.research-tag { color: #d5f98a; }
.graph-title { font-size: 15px; font-weight: 800; line-height: 1.3; margin-top: 14px; }
.research-chart { width: 100%; height: 118px; color: white; margin-top: -3px; }
.research-legend { display: flex; gap: 14px; font-size: 8px; color: #c4c1d5; }
.research-legend > span { display: flex; align-items: center; gap: 6px; }
.research-legend i { display: block; border-radius: 50%; width: 6px; height: 6px; }
.legend-green { background: #c8fa7c; }.legend-purple { background: #a899fa; }
.movies-scene { background: radial-gradient(circle at 15% 95%, #ba4e67, transparent 38%), linear-gradient(125deg,#482b4e,#221b39); }
.movie-frame { width: 81%; max-width: 480px; height: 258px; border-radius: 11px; padding: 17px 20px; background: #191829; color: white; transform: rotate(3deg); box-shadow: 10px 22px 30px rgba(0,0,0,.3); overflow: hidden; }
.movie-top { display: flex; justify-content: space-between; color: #ebdae9; font-size: 11px; font-weight: 800; }
.movie-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.movie-header { margin-top: 14px; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.movie-genre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.movie-genre span { font-size: 7px; color: #c4b6c7; border: 1px solid #4a4154; border-radius: 50px; padding: 4px 7px; }
.movie-genre span:first-child { background: #c5d9ae; color: #161523; border-color: #c5d9ae; }
.movie-posters { display: flex; gap: 11px; margin-top: 10px; }
.movie-poster { height: 123px; flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 4px; font-size: 14px; line-height: 1.03; font-family: var(--display); font-weight: 800; }
.movie-poster i { font-size: 9px; font-style: normal; opacity: .7; }
.poster-one { background: radial-gradient(circle at 70% 19%, #f6bead, transparent 39%), linear-gradient(70deg, #a03b66, #412e50); }
.poster-two { background: linear-gradient(155deg,#749c97,#162e46 60%,#10192e); }
.poster-three { background: radial-gradient(circle at 35% 30%,#fcc892,transparent 34%),linear-gradient(90deg,#bd7a78,#514e88); }
.frontend-scene { background: radial-gradient(circle at 90% 10%,#fe8f9b,transparent 40%),linear-gradient(140deg,#c9b4f3,#8c7fdb); }
.frontend-browser { width: 80%; max-width: 450px; height: 245px; border: 1px solid rgba(255,255,255,.65); border-radius: 12px; color: #202044; background: #faf7ff; overflow: hidden; box-shadow: 15px 22px 34px rgba(38,26,87,.23); transform: rotate(-5deg); }
.frontend-bar { height: 33px; background: #ebe8f4; border-bottom: 1px solid #dbd7e5; display: flex; justify-content: space-between; padding: 9px 13px; align-items: center; color: #9992a9; font-size: 8px; }
.window-dots { display: flex; gap: 4px; }.window-dots i { width: 6px; height: 6px; background: #b7afd0; border-radius: 50%; }.window-dots i:first-child { background: #f19399; }.window-dots i:nth-child(2){background:#edd187;}
.frontend-content { position: relative; height: 210px; padding: 30px 30px; }
.frontend-blob { position: absolute; right: -22px; top: 10px; width: 180px; height: 180px; border-radius: 39% 61% 52% 48% / 48% 40% 60% 52%; background: #c4fa89; transform: rotate(-22deg); display: grid; place-items: center; }
.frontend-blob span { font-family: var(--display); font-weight: 900; font-size: 76px; color: #3b3676; letter-spacing: -.14em; transform: rotate(20deg); }
.frontend-copy { font-family: var(--display); position: relative; z-index: 1; font-size: 32px; letter-spacing: -.08em; font-weight: 900; line-height: 1.12; }
.frontend-copy em { font-family: var(--serif); color: #8c6bcc; font-weight: 400; }
.frontend-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 19px; font-size: 8px; font-weight: 900; letter-spacing: .09em; border-bottom: 1px solid #b9abd5; padding-bottom: 5px; position: relative; z-index: 1; }
.frontend-floating { position: absolute; top: 25px; right: 7%; border-radius: 12px; padding: 15px; background: #20203b; color: #e8e0ff; box-shadow: 0 14px 25px rgba(38,26,87,.2); transform: rotate(12deg); }
.showroom-scene { background: radial-gradient(circle at 20% 100%,#6594a6,transparent 43%),linear-gradient(135deg,#1c283e,#0d1729); }
.showroom-card { width: 83%; max-width: 465px; height: 245px; border: 1px solid #5b7d9e; border-radius: 12px; background: radial-gradient(circle at 55% 65%, #28415d, #14273a); box-shadow: 12px 20px 45px rgba(0,0,0,.32); color: #f2f6fa; transform: rotate(-3deg); padding: 20px 24px; }
.showroom-top { display: flex; align-items: center; gap: 5px; font-weight: 900; font-size: 10px; letter-spacing: .045em; }.showroom-top span { color: #a0e6cc; }.showroom-top svg { margin-left: auto; color: #9fb7c8; }
.car-outline { width: 92%; max-width: 340px; margin: 20px auto 0; color: #b3ecdb; filter: drop-shadow(0 9px 10px rgba(64,196,190,.12)); }
.car-outline svg { width: 100%; height: 121px; }
.showroom-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; font-size: 8px; letter-spacing: .11em; color: #91a5b8; font-weight: 800; }
.showroom-bottom div { display: flex; align-items: center; gap: 7px; color: #c8f1e0; }

/* APPROACH */
.approach-section { position: relative; background: #24253b; padding: 118px 0 128px; overflow: hidden; color: white; }
.approach-section::before { position: absolute; content: ''; inset: 0; pointer-events: none; background: radial-gradient(circle at 87% 30%, rgba(141,116,238,.23), transparent 35%); }
.approach-content { position: relative; z-index: 1; }
.approach-head { display: grid; grid-template-columns: 25% 1fr; gap: 5%; align-items: start; }
.approach-head h2 { font-family: var(--display); font-size: clamp(43px,5.4vw,77px); line-height: 1.1; letter-spacing: -.078em; margin: -5px 0 51px; }
.approach-head h2 span { color: var(--green); font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.06em; }
.approach-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.approach-card { background: rgba(255,255,255,.035); border: 1px solid rgba(245,242,255,.13); border-radius: 13px; padding: 29px; min-height: 310px; position: relative; overflow: hidden; transition: background .25s, transform .25s; }
.approach-card:hover { background: rgba(255,255,255,.07); transform: translateY(-5px); }
.approach-number { font-size: 10px; font-weight: 800; color: #b1acc7; letter-spacing: .13em; }
.approach-icon { width: 54px; height: 54px; background: var(--green); color: #292b38; border-radius: 14px; display: grid; place-items: center; margin: 27px 0 22px; }
.approach-card:nth-child(2) .approach-icon { background: #b9aaff; }
.approach-card:nth-child(3) .approach-icon { background: #e5cde8; }
.approach-card h3 { font-family: var(--display); font-size: 21px; letter-spacing: -.045em; margin: 0 0 12px; }
.approach-card p { color: #c0bed1; line-height: 1.8; font-size: 12px; margin: 0; padding-right: 12px; }
.approach-end-arrow { position: absolute; top: 25px; right: 24px; color: #a1a0be; }
.approach-background-star { position: absolute; font-size: 570px; line-height: 1; color: rgba(255,255,255,.018); top: -190px; right: -130px; pointer-events: none; }

/* EXPERIENCE */
.experience-heading > p, .skills-heading > p { font-size: 13px; color: var(--muted); line-height: 1.8; max-width: 315px; margin: 0 0 8px; }
.experience-list { margin-top: 54px; border-top: 1px solid var(--line); }
.experience-row { display: grid; grid-template-columns: 70px minmax(0,1.5fr) minmax(125px,.55fr) 130px; align-items: start; gap: 25px; border-bottom: 1px solid var(--line); padding: 29px 0; transition: padding .25s; }
.experience-row:hover { padding-left: 10px; }
.experience-number { font-size: 12px; font-weight: 800; color: var(--purple); padding-top: 5px; }
.experience-role h3 { font-family: var(--display); letter-spacing: -.045em; font-size: 20px; margin: 0 0 8px; line-height: 1.3; }
.experience-role > span { color: var(--purple); font-size: 12px; font-weight: 800; }
.experience-role > p { font-size: 11.5px; line-height: 1.7; color: var(--quiet); margin: 9px 0 0; max-width: 520px; }
.experience-date { color: var(--muted); font-size: 12px; margin-top: 4px; }
.experience-industry { text-align: right; }
.experience-industry > span { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 8px 11px; color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.experience-more { margin: 35px auto 0; display: flex; align-items: center; gap: 13px; color: var(--text); background: transparent; border: none; border-bottom: 1px solid var(--purple); padding: 0 0 12px; font-weight: 800; font-size: 12px; }
.experience-more span { color: var(--purple); transition: transform .22s; }.experience-more .rotate-arrow { transform: rotate(180deg); }

/* SKILLS */
.skills-section { background: var(--surface); }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 49px; }
.capability-card { min-height: 420px; padding: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; transition: transform .25s; }
.capability-card:hover { transform: translateY(-4px); }
.capability-top { display: flex; justify-content: space-between; align-items: center; color: var(--purple); }
.capability-top span { font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.capability-card h3 { font-size: 24px; font-family: var(--display); letter-spacing: -.055em; line-height: 1.3; margin: 39px 0 10px; }
.capability-card > p { font-size: 12px; line-height: 1.85; color: var(--muted); max-width: 290px; margin: 0 0 20px; }
.capability-tags { display: flex; align-content: flex-start; flex-wrap: wrap; gap: 7px; }
.capability-tags span { border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 10px; padding: 9px 10px; }
.capability-bottom { margin-top: auto; padding-top: 23px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.capability-bottom svg { color: var(--green); }
:root[data-theme='light'] .capability-bottom svg { color: #73913b; }
.learning-section { margin-top: 93px; }
.learning-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.learning-header > div { display: flex; align-items: center; gap: 10px; color: var(--purple); }
.learning-header h3 { margin: 0; color: var(--text); font-size: 23px; font-family: var(--display); letter-spacing: -.04em; }
.learning-header > span { font-size: 9px; font-weight: 800; color: var(--quiet); letter-spacing: .14em; }
.education-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; padding: 30px 0 39px; }
.education-period { color: var(--purple); font-size: 11px; font-weight: 800; }
.education-item h4 { font-size: 19px; margin: 14px 0 5px; font-family: var(--display); letter-spacing: -.035em; }
.education-item p { color: var(--text); font-size: 12px; margin: 0 0 7px; }
.education-item > span { color: var(--quiet); font-size: 11px; }
.cert-section { border-top: 1px solid var(--line); padding-top: 26px; display: grid; grid-template-columns: 260px 1fr; gap: 35px; }
.cert-title { display: flex; align-items: flex-start; gap: 9px; color: var(--purple); }
.cert-title span { font-weight: 800; color: var(--muted); font-size: 10px; letter-spacing: .11em; padding-top: 3px; }
.cert-list { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-list > span { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 10px 13px; font-size: 10px; }
.small-spark { color: var(--purple); }

/* CONTACT / FOOTER */
.contact-section { padding: 112px 0 73px; background: #b3a3f4; color: #24213d; position: relative; }
.contact-section::before { content: ''; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: radial-gradient(circle,#312c5a 1px,transparent 1px); background-size: 25px 25px; mask-image: linear-gradient(90deg,black,transparent 65%); }
.contact-container { position: relative; z-index: 1; }
.contact-top { display: flex; justify-content: space-between; align-items: center; }
.contact-top .section-label-light, .contact-top .section-label-index { color: #3c326b; }
.contact-top > span { font-size: 10px; font-weight: 800; letter-spacing: .09em; display: flex; align-items: center; gap: 10px; }
.contact-top .status-dot { background: #dbffa6; box-shadow: 0 0 0 5px rgba(219,255,166,.24); }
.contact-main { position: relative; display: grid; grid-template-columns: 1.6fr .55fr; align-items: end; gap: 50px; padding: 60px 0 76px; }
.contact-main h2 { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(64px, 8.1vw, 123px); font-weight: 800; line-height: 1.07; letter-spacing: -.09em; margin: 0; }
.contact-main h2 em { font-family: var(--serif); font-weight: 400; }
.contact-main h2 > span { color: #f5f4fa; }
.contact-aside { padding-bottom: 20px; }
.contact-aside p { font-size: 15px; line-height: 1.85; font-weight: 500; max-width: 260px; }
.contact-big-arrow { width: 85px; height: 85px; border: 1px solid #443963; border-radius: 50%; display: grid; place-items: center; margin-top: 22px; transition: transform .25s, background .25s; }
.contact-big-arrow:hover { background: var(--green); transform: rotate(45deg); }
.contact-star { position: absolute; right: 19%; top: 40px; color: var(--green); width: 110px; transform: rotate(-8deg); }
.contact-star svg { width: 100%; }
.contact-bottom { display: flex; justify-content: space-between; gap: 40px; padding-top: 30px; border-top: 1px solid rgba(51,42,83,.3); }
.contact-email-wrap, .contact-social-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.contact-email-wrap > span, .contact-social-wrap > span { font-size: 9px; letter-spacing: .16em; font-weight: 800; color: #554977; margin-bottom: 11px; }
.contact-email { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: clamp(17px,2.2vw,29px); letter-spacing: -.045em; }
.contact-email:hover { text-decoration: underline; text-underline-offset: 7px; }
.copy-email { background: none; border: none; padding: 11px 0 0; color: #463a6a; display: flex; gap: 7px; align-items: center; font-size: 11px; font-weight: 800; }
.copy-email:hover { color: #1e163c; }
.contact-social-wrap { min-width: 210px; }
.contact-social { font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0; border-bottom: 1px solid rgba(51,42,83,.18); }
.contact-social:hover { color: #5a379b; }
.footer { background: var(--footer-bg); color: #a0a0b6; }
.footer-inner { min-height: 101px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-mark { font-family: var(--display); font-weight: 800; font-size: 33px; line-height: 1; color: white; letter-spacing: -.16em; padding-right: 6px; }
.footer-mark span { color: var(--green); }
.footer-inner > span { font-size: 11px; }
.footer-right { display: flex; gap: 35px; align-items: center; font-size: 10px; }
.footer-right a { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.footer-right a:hover { text-decoration: underline; }

/* TABLET */
@media (max-width: 1190px) {
  .container { width: min(100% - 76px, 1320px); }
  .nav-links { gap: 18px; }
  .hero h1 { font-size: clamp(53px, 6vw, 77px); }
  .hero-container { grid-template-columns: 1.03fr .95fr; gap: 10px; }
  .hero-art { height: 500px; }
  .hero-main-card { height: 347px; top: 79px; }
  .hero-card-title { margin-top: 54px; }
  .hero-card-bottom { margin-top: 27px; }
  .hero-card-foot { margin-top: 24px; }
  .sticker-design { right: -4%; }
  .approach-head { grid-template-columns: 22% 1fr; }
  .intro-side-art { width: 160px; height: 160px; }
  .cert-section { grid-template-columns: 220px 1fr; }
}
@media (max-width: 940px) {
  .container { width: min(100% - 52px, 1320px); }
  .site-header { height: 76px; }
  .nav-links { display: none; position: absolute; top: 75px; right: 0; left: 0; margin: 0; padding: 13px 26px 24px; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
  .nav-links.nav-open { display: flex; }
  .nav-links > a:not(.mobile-resume) { padding: 13px 10px; }
  .nav-links > a:not(.mobile-resume)::after { display: none; }
  .nav-links .mobile-resume { display: flex; justify-content: space-between; background: var(--green); color: #151725; padding: 15px; margin-top: 10px; font-weight: 800; border-radius: 8px; font-size: 12px; }
  .menu-toggle { display: grid; }
  .hero-container { grid-template-columns: 1fr; padding-top: 65px; padding-bottom: 65px; gap: 42px; }
  .hero { min-height: 0; }
  .hero h1 { font-size: clamp(61px,8vw,98px); }
  .hero-description { max-width: 570px; }
  .hero-socials { margin-top: 33px; }
  .hero-art { max-width: 540px; margin: auto; height: 490px; }
  .hero-baseline > span:nth-child(2) { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-side { flex-direction: row; align-items: center; }
  .intro-side-art { width: 89px; height: 89px; margin: 0; }
  .intro-side-art span { font-size: 7px; }
  .intro-main h2 { margin-top: 0; }
  .heading-aside { display: none; }
  .approach-head { grid-template-columns: 1fr; gap: 22px; }
  .approach-cards { grid-template-columns: 1fr 1fr 1fr; }
  .approach-card { padding: 22px; min-height: 330px; }
  .approach-card h3 { font-size: 18px; }
  .experience-row { grid-template-columns: 45px minmax(0,1fr) 150px; gap: 15px; }
  .experience-industry { display: none; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-card { min-height: 390px; }
  .capability-card:last-child { grid-column: span 2; min-height: 320px; }
  .contact-main { grid-template-columns: 1fr; gap: 0; }
  .contact-main h2 { font-size: clamp(73px,10vw,115px); }
  .contact-aside { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
  .contact-aside p { max-width: 440px; }
  .contact-star { right: 6%; }
}
@media (max-width: 670px) {
  html { scroll-padding-top: 73px; }
  .container { width: min(100% - 36px, 1320px); }
  .section-pad { padding: 82px 0; }
  .header-cta { display: none; }
  .wordmark-text { font-size: 12px; }
  .wordmark-descriptor { font-size: 7px; }
  .header-actions { gap: 9px; }
  .theme-toggle,.menu-toggle { width: 36px; height: 36px; }
  .hero-container { padding-top: 42px; gap: 32px; padding-bottom: 40px; }
  .hero-status { font-size: 8px; padding: 9px 10px; gap: 7px; }
  .hero-overline { margin: 28px 0 15px; font-size: 9px; }
  .hero h1 { font-size: clamp(49px,10.3vw,69px); letter-spacing: -.07em; }
  .headline-outline { -webkit-text-stroke-width: 1.1px; }
  .hero-description { font-size: 13px; margin-top: 23px; margin-bottom: 25px; }
  .btn { padding: 13px 18px; min-height: 48px; }
  .hero-socials { flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .hero-art { height: 373px; max-width: 420px; }
  .hero-main-card { top: 44px; left: 9%; width: 84%; height: 284px; padding: 19px; border-radius: 15px; }
  .main-card-top { font-size: 7px; }
  .hero-card-title { font-size: clamp(30px,7vw,43px); margin-top: 49px; }
  .hero-main-card::after { font-size: 45px; right: 15px; top: 73px; }
  .hero-card-bottom { margin-top: 20px; gap: 5px; }
  .art-pill { padding: 7px 8px; font-size: 7px; gap: 4px; }
  .hero-card-foot { margin-top: 19px; padding-top: 9px; font-size: 9px; }
  .sticker-design { top: 16px; right: 0; padding: 9px; font-size: 9px; }
  .sticker-design > svg { width: 13px; }
  .sticker-circle { width: 18px; height: 18px; margin-left: 2px; }
  .sticker-code { bottom: 30px; left: 0; padding: 11px; font-size: 9px; }
  .hero-art-number { bottom: 6px; font-size: 39px; }
  .hero-baseline { height: 64px; font-size: 8px; }
  .marquee { height: 72px; }
  .marquee-group { gap: 19px; padding-right: 19px; }.marquee-group span { font-size: 25px; }.marquee-group .marquee-star { font-size: 31px; }
  .intro-side-art { width: 65px; height: 65px; }
  .intro-main h2 { font-size: clamp(31px,7.5vw,49px); line-height: 1.28; }
  .intro-columns { grid-template-columns: 1fr; gap: 16px; }.intro-columns p { font-size: 13px; }
  .section-heading h2 { font-size: clamp(42px, 9vw, 62px); }
  .project-toolbar { margin-top: 28px; }.toolbar-hint { display: none; }
  .project-filters button { padding: 9px 13px; font-size: 10px; }
  .projects-grid { grid-template-columns: 1fr; gap: 17px; }
  .project-image, .project-featured .project-image { height: 285px; }
  .project-card-body { padding: 23px 21px; }
  .project-heading-row h3 { font-size: 23px; }
  .project-description { min-height: 0; }
  .project-arrow { width: 39px; height: 39px; }
  .all-work { flex-direction: column; gap: 15px; }
  .approach-section { padding: 79px 0 86px; }
  .approach-head h2 { font-size: clamp(39px,8.5vw,60px); margin: 0 0 31px; }
  .approach-cards { grid-template-columns: 1fr; gap: 12px; }
  .approach-card { min-height: 0; padding: 23px; }
  .approach-icon { margin: 23px 0 18px; }
  .experience-heading, .skills-heading { flex-direction: column; align-items: start; gap: 16px; }
  .experience-heading > p, .skills-heading > p { max-width: 100%; }
  .experience-list { margin-top: 34px; }
  .experience-row { grid-template-columns: 33px 1fr; gap: 14px; padding: 23px 0; }
  .experience-role h3 { font-size: 17px; }.experience-date { grid-column: 2; grid-row: 2; margin-top: -8px; font-size: 10px; }
  .capability-grid { grid-template-columns: 1fr; margin-top: 30px; gap: 12px; }
  .capability-card, .capability-card:last-child { grid-column: auto; min-height: 0; padding: 25px; }
  .capability-card h3 { margin-top: 25px; }
  .capability-bottom { margin-top: 30px; }
  .learning-section { margin-top: 58px; }
  .education-grid { grid-template-columns: 1fr; gap: 28px; }
  .cert-section { grid-template-columns: 1fr; gap: 18px; }
  .contact-section { padding-top: 79px; padding-bottom: 54px; }
  .contact-top > span { font-size: 8px; }
  .contact-main { padding: 50px 0 50px; }
  .contact-main h2 { font-size: clamp(52px,11.1vw,74px); }
  .contact-star { width: 61px; top: 11px; right: 5%; }
  .contact-aside { gap: 14px; }
  .contact-aside p { font-size: 13px; }.contact-big-arrow { width: 58px; height: 58px; flex-shrink: 0; }.contact-big-arrow svg { width: 25px; }
  .contact-bottom { flex-direction: column; gap: 27px; }
  .contact-email { font-size: clamp(18px, 5.3vw, 27px); overflow-wrap: anywhere; }
  .contact-social-wrap { width: 100%; }
  .footer-inner { flex-wrap: wrap; gap: 14px; padding: 24px 0; }
  .footer-inner > span { order: 3; width: 100%; font-size: 9px; }.footer-right { gap: 13px; font-size: 9px; }
}
@media (max-width: 390px) {
  .hero h1 { font-size: clamp(43px,10.7vw,52px); }
  .hero-art { height: 327px; }
  .hero-main-card { height: 253px; padding: 16px; }
  .hero-card-title { margin-top: 42px; font-size: 29px; }
  .hero-card-bottom { margin-top: 17px; }
  .hero-card-foot { margin-top: 16px; }
  .hero-main-card::after { font-size: 37px; }
  .sticker-code { bottom: 13px; }
  .project-image, .project-featured .project-image { height: 245px; }
  .music-window,.traffic-panel,.movie-frame,.frontend-browser,.showroom-card { width: 85%; }
  .traffic-panel { height: 227px; }.traffic-detection { height: 140px; }.road-sign { width: 115px; height: 115px; }.road-sign span { font-size: 54px; }
  .movie-poster { padding: 7px; font-size: 11px; }
  .frontend-copy { font-size: 25px; }
  .showroom-card { height: 215px; }.car-outline { margin-top: 9px; }
  .contact-main h2 { font-size: 49px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Preserve native hide semantics when dynamic filters set the hidden attribute. */
[hidden] { display: none !important; }
/* Intentional decorative shapes extend beyond the viewport; no horizontal scroll. */
html, body { max-width: 100%; overflow-x: clip; }