:root {
  --bg: #061515;
  --panel: #0b2425;
  --panel-light: #103032;
  --aqua: #54f3d0;
  --cyan: #38cce1;
  --violet: #c0a5ff;
  --text: #effaf8;
  --muted: #b1cac6;
  --line: #285253;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Inter", "Arial", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; color: var(--text); background: var(--bg); font: 18px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--bg); background: var(--aqua); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
canvas, svg { display: block; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--aqua); outline-offset: 6px; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.name-period, .brand-dot { color: var(--aqua); }
.eyebrow { font: 13px/1.6 var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--aqua); display: flex; align-items: center; gap: 12px; }
.status-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 15px #54f3d066; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 16px; padding: 12px 20px; color: var(--bg); background: var(--aqua); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 30; background: #061515ed; backdrop-filter: blur(18px); border-bottom: 2px solid #224342; }
.header-inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { font: 600 38px/1 var(--mono); letter-spacing: -4px; }
.brand-slash { color: var(--aqua); margin-inline: 2px; }
.navigation { display: flex; gap: 32px; align-items: center; margin-left: auto; }
.navigation a { position: relative; font-size: 16px; color: var(--muted); padding-block: 12px; }
.navigation a:hover, .navigation a[aria-current] { color: var(--aqua); }
.navigation a[aria-current]::after { content: ""; position: absolute; left: 0; bottom: 3px; height: 3px; width: 24px; background: var(--aqua); }
.header-actions { display: flex; align-items: center; gap: 28px; }
.language-switch { display: flex; gap: 3px; font: 14px var(--mono); }
.language-switch a { padding: 7px 9px; border-radius: 4px; color: var(--muted); }
.language-switch a[aria-current] { background: #54f3d01c; color: var(--aqua); }
.header-contact { display: flex; align-items: center; gap: 20px; padding: 10px 17px; font-size: 15px; border: 2px solid var(--line); border-radius: 6px; }
.header-contact:hover { border-color: var(--aqua); }
.header-contact > span { color: var(--aqua); font-size: 23px; }
.menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 78% 45%, #0e42404f, transparent 58%); border-bottom: 2px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#54f3d005 2px, transparent 2px), linear-gradient(90deg, #54f3d005 2px, transparent 2px); background-size: 90px 90px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 15px; min-height: 800px; padding-block: 78px 95px; }
.hero-copy { z-index: 2; min-width: 0; }
.hero-copy > .eyebrow { margin-bottom: 28px; }
h1 { font-size: clamp(76px, 8.9vw, 130px); line-height: .98; font-weight: 600; letter-spacing: -7px; }
.decrypt-line { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; }
.decrypt-base { display: inline-block; }
.decrypt-output { position: absolute; inset: 0; white-space: nowrap; pointer-events: none; }
[data-decrypting] .decrypt-base { opacity: 0; }
.decrypt-locked { color: var(--text); }
.decrypt-noise { color: var(--aqua); font-family: var(--mono); font-weight: 400; text-shadow: 0 0 18px #54f3d044; }
.hero-statement { font-size: 29px; line-height: 1.4; letter-spacing: -.6px; margin-top: 29px; }
.hero-statement > span { color: var(--aqua); }
.hero-intro { max-width: 470px; font-size: 19px; line-height: 1.65; color: var(--muted); margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 31px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 57px; gap: 25px; padding: 13px 23px; border: 2px solid transparent; border-radius: 7px; font-size: 16px; font-weight: 600; transition: transform 200ms, box-shadow 200ms, background 200ms; }
.button > span { font-size: 24px; line-height: 1; }
.button-primary { color: #032723; background: var(--aqua); box-shadow: 4px 4px 0 #237d70; }
.button-primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #237d70, 0 0 30px #54f3d01c; }
.button-outline { color: var(--text); border-color: #396666; background: #0a202099; }
.button-outline:hover { border-color: var(--aqua); background: #123832; }
.hero-location { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-top: 32px; }
.hero-location > span { color: var(--aqua); font-size: 22px; }
.hero-art { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; }
.node-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-core { position: absolute; inset: 34% 23%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #082726ed; border: 3px solid var(--aqua); border-radius: 20px; box-shadow: 0 0 60px #54f3d019, inset 0 0 35px #54f3d00c; transform: rotate(-5deg); }
.network-core strong { font: 500 clamp(30px, 4vw, 58px)/1 var(--mono); letter-spacing: -4px; }
.network-core strong > span { color: var(--aqua); animation: cursor-blink 1.2s steps(1) infinite; }
.core-bracket { font: 45px var(--mono); color: var(--aqua); opacity: .65; }
.orbit { position: absolute; width: 67%; height: 67%; left: 16.5%; top: 16.5%; border: 2px dashed #54f3d038; border-radius: 50%; animation: orbit-spin 55s linear infinite; }
.orbit::after { content: ""; position: absolute; top: 12%; left: 13%; height: 12px; width: 12px; background: var(--aqua); border-radius: 50%; box-shadow: 0 0 20px #54f3d0; }
.orbit-two { inset: 6%; width: 88%; height: 88%; border-color: #38cce125; border-style: solid; animation-duration: 72s; animation-direction: reverse; }
.orbit-two::after { background: var(--cyan); box-shadow: 0 0 20px #38cce1; height: 9px; width: 9px; }
.network-badge { position: absolute; z-index: 2; padding: 12px 16px; border: 2px solid #39857a; background: #0d2e2ee6; border-radius: 8px; font: 14px var(--mono); color: var(--aqua); box-shadow: 0 8px 20px #0003; animation: badge-float 6s ease-in-out infinite; }
.badge-build { top: 19%; left: 5%; transform: rotate(-6deg); }
.badge-security { bottom: 20%; right: 0; animation-delay: -3s; }
.network-caption { display: flex; gap: 10px; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; font: 13px/1.6 var(--mono); text-align: center; color: var(--muted); }
.motion-toggle { position: absolute; right: 0; bottom: 22px; display: flex; align-items: center; gap: 9px; padding: 8px 0; color: var(--muted); background: transparent; border: 0; font-size: 13px; }
.motion-toggle:hover { color: var(--aqua); }
.motion-toggle > span:first-child { color: var(--aqua); font: 17px var(--mono); }

.section { padding-block: 105px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 45px; }
.section-number { display: block; font: 15px var(--mono); color: var(--aqua); margin-bottom: 20px; }
h2 { font-size: clamp(43px, 4.7vw, 67px); font-weight: 500; line-height: 1.1; letter-spacing: -2.7px; }
h2 > span { color: var(--aqua); }
.section-heading > p { max-width: 330px; font-size: 19px; color: var(--muted); padding-bottom: 4px; }
h3 { font-size: 30px; font-weight: 500; letter-spacing: -.7px; line-height: 1.25; }
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.security-card { position: relative; padding: 36px; background: var(--panel); border: 2px solid var(--line); border-radius: 15px; overflow: hidden; }
.security-card::before { content: ""; position: absolute; width: 60px; height: 4px; background: var(--aqua); top: 0; left: 36px; }
.security-card:hover { border-color: #45958a; }
.security-card h3 { margin-top: 21px; }
.security-card > p:not(.eyebrow) { font-size: 18px; color: var(--muted); margin-top: 17px; line-height: 1.7; }
.security-card > .eyebrow { font-size: 13px; }
.attack-diagram { width: 100%; height: 124px; margin-block: 10px 17px; }
.signal-track { stroke: #366d69; stroke-width: 3; }
.signal-flow { stroke: var(--aqua); stroke-width: 3; stroke-dasharray: 14 100; animation: signal-travel 7s linear infinite; }
.attack-station rect { fill: #103b37; stroke: #54b4a1; stroke-width: 2; }
.attack-station text { fill: var(--aqua); font: 18px var(--mono); }
.attack-station:last-child rect { stroke: var(--aqua); }
.text-link { display: inline-flex; align-items: center; gap: 15px; color: var(--aqua); font-size: 16px; font-weight: 500; line-height: 1.6; }
.text-link > span { font-size: 24px; transition: transform 200ms; }
.text-link:hover > span { transform: translate(3px, -3px); }
.disclosure { border-top: 2px solid #254b49; margin-top: 25px; }
.disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; color: #d4e8e3; font-size: 15px; padding-top: 16px; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary > span { color: var(--aqua); font: 24px var(--mono); }
.disclosure[open] summary > span { transform: rotate(45deg); }
.disclosure > div { padding-top: 18px; color: var(--muted); font-size: 17px; }
.disclosure .text-link { margin-top: 15px; }
.talk-art { height: 124px; display: flex; align-items: center; justify-content: center; margin-block: 10px 17px; }
.archive-art { display: flex; align-items: center; justify-content: center; height: 66px; width: 69px; border: 2px solid var(--aqua); background: #123b35; border-radius: 8px; color: var(--aqua); font: 20px var(--mono); transform: rotate(-9deg); animation: archive-hover 5s ease-in-out infinite; }
.transfer-line { position: relative; height: 3px; width: 55px; background: #397c70; overflow: hidden; }
.transfer-line::after { content: ""; position: absolute; height: 3px; width: 18px; background: var(--aqua); animation: transfer 2s linear infinite; }
.process-art { display: flex; align-items: center; gap: 10px; font: 15px var(--mono); border: 2px solid #397c70; background: #082523; border-radius: 8px; padding: 13px; }
.process-art > i { height: 16px; width: 7px; background: var(--aqua); animation: cursor-blink 1.2s steps(1) infinite; }
.labs-heading { display: flex; align-items: center; justify-content: space-between; margin-block: 55px 25px; }
.labs-heading h3 { font-size: 27px; }
.labs-heading > span { font-size: 32px; color: var(--aqua); }
.hacklabs { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.lab-result { display: flex; align-items: center; gap: 28px; padding: 30px; border: 2px solid var(--line); border-radius: 12px; min-width: 0; background: linear-gradient(120deg, #0d3533, #0a2020); transition: border-color 200ms, transform 200ms; }
.lab-result:hover { border-color: var(--aqua); transform: translateY(-4px); }
.rank { font: 500 74px/1 var(--mono); color: var(--aqua); letter-spacing: -6px; white-space: nowrap; }
.rank > span { font-size: 25px; letter-spacing: -3px; }
.lab-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lab-copy strong { font-size: 22px; font-weight: 500; }
.lab-copy > span { font-size: 18px; }
.lab-copy small { font-size: 14px; color: var(--muted); }
.lab-arrow { margin-left: auto; font-size: 30px; color: var(--aqua); }
.learning { display: grid; grid-template-columns: 1fr auto; gap: 15px 30px; padding: 35px; margin-top: 30px; border: 2px solid var(--line); border-radius: 12px; }
.learning h3 { margin-top: 12px; }
.learning p:not(.eyebrow) { color: var(--muted); font-size: 18px; max-width: 690px; margin-top: 15px; }
.learning .text-link { margin-top: 18px; }
.learning-symbol { align-self: center; font: 72px var(--mono); letter-spacing: -10px; color: #387e73; padding-right: 10px; }
.learning > .disclosure { grid-column: 1 / -1; margin-top: 8px; }

.engineering-section { background: #0a1f20; border-block: 2px solid var(--line); }
.featured-project { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; padding: 40px; border: 2px solid #38897a; border-radius: 16px; background: #0d2b2a; }
.project-copy { min-width: 0; }
.project-copy > .eyebrow { font-size: 12px; letter-spacing: .5px; }
.featured-project h3 { font-size: 36px; margin-top: 22px; max-width: 580px; }
.project-copy > p:not(.eyebrow) { color: var(--muted); margin-top: 22px; font-size: 18px; }
.project-copy > p.project-role { font-size: 17px; color: #d0ece4; border-left: 3px solid var(--aqua); padding-left: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.tags li { font: 14px var(--mono); color: #c6e6df; padding: 7px 11px; border: 2px solid #32635b; border-radius: 5px; }
.architecture { position: relative; align-self: center; width: 100%; aspect-ratio: 420/360; min-width: 0; }
.architecture > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.architecture-hub { position: absolute; display: flex; align-items: center; justify-content: center; inset: 37% 37%; border-radius: 14px; background: #164e44; border: 3px solid var(--aqua); font: 27px var(--mono); color: var(--aqua); z-index: 2; }
.architecture-step { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 12px; align-items: center; font-size: 15px; }
.architecture-dot { width: 18px; height: 18px; border: 3px solid var(--aqua); border-radius: 50%; background: #0b2c28; box-shadow: 0 0 0 7px #54f3d00c; animation: node-pulse 3s ease-in-out infinite; }
.step-0 { left: 6%; top: 17%; }
.step-1 { right: 0; top: 17%; }
.step-2 { left: 12%; bottom: 4%; }
.step-3 { right: 4%; bottom: 4%; }
.step-1 .architecture-dot { animation-delay: -.8s; }
.step-2 .architecture-dot { animation-delay: -1.6s; }
.step-3 .architecture-dot { animation-delay: -2.4s; }
.architecture-orbit { position: absolute; border: 2px dashed #54f3d020; border-radius: 50%; inset: 13% 18%; animation: orbit-spin 40s linear infinite; }
.project-list { margin-top: 20px; }
.project-row { display: flex; align-items: flex-start; gap: 27px; padding: 32px 5px; border-bottom: 2px solid #285050; }
.project-row h3 { font-size: 26px; }
.project-row p { color: var(--muted); font-size: 18px; margin-top: 13px; max-width: 850px; }
.project-number { color: var(--aqua); font: 20px var(--mono); padding-top: 5px; }
.projects-more { margin-top: 25px; display: flex; justify-content: flex-end; }
.awards { margin-top: 60px; padding: 36px; border: 2px solid #429d89; border-radius: 15px; background: #12352f; }
.award-heading { display: flex; gap: 24px; align-items: flex-start; }
.award-emblem { font-size: 55px; line-height: 1.3; color: var(--aqua); animation: award-turn 20s linear infinite; }
.award-heading h3 { font-size: 30px; margin-top: 13px; }
.award-heading p:not(.eyebrow) { font-size: 17px; color: var(--muted); margin-top: 13px; }
.award-results { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; padding-top: 27px; border-top: 2px solid #387666; }
.award-results a { display: flex; flex-direction: column; gap: 8px; }
.award-results strong { font-size: 38px; font-weight: 500; letter-spacing: -1px; }
.award-results strong > span { font-size: 26px; color: var(--aqua); }
.award-results a:hover strong { color: var(--aqua); }
.award-results a > span { font-size: 17px; color: var(--muted); }

.about-section { display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; align-items: center; }
.about-section .section-heading { margin-bottom: 25px; }
.about-text { font-size: 20px; color: var(--muted); max-width: 630px; }
.about-section .text-link { margin-top: 25px; }
.about-mark { position: relative; text-align: center; font: 500 65px var(--mono); letter-spacing: -6px; padding-block: 65px; }
.about-mark > span { color: var(--aqua); padding-inline: 7px; }
.about-mark small { display: block; font: 16px var(--mono); letter-spacing: 1px; color: var(--muted); margin-top: 15px; }
.cursor { animation: cursor-blink 1.2s steps(1) infinite; color: var(--aqua); }
.contact-section { position: relative; overflow: hidden; background: #124039; border-block: 2px solid #398977; }
.contact-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 70px; }
.contact-inner .eyebrow { margin-bottom: 25px; }
.contact-inner h2 { font-size: 56px; }
.contact-inner .button { flex-shrink: 0; }
.contact-decoration { position: absolute; right: -30px; top: -160px; color: #54f3d008; font: 550px/1 var(--sans); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-block: 32px; font-size: 15px; }
.site-footer > span > span { font-family: var(--mono); color: var(--aqua); }
.site-footer > a { display: flex; align-items: center; gap: 20px; color: var(--muted); }
.site-footer > a > span { color: var(--aqua); font-size: 26px; }
.not-found { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 60px; }
.not-found > .eyebrow { margin-bottom: 25px; }
.not-found h1 { font-size: clamp(50px, 7vw, 100px); line-height: 1.1; letter-spacing: -3px; }
.not-found > p:not(.eyebrow) { margin-top: 25px; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 25px/1 var(--mono); letter-spacing: -1px; }
.brand img { display: block; width: 50px; height: 50px; }
.network-core { inset: 37% 26%; }
.orbit-one { border-radius: 47% 53% 45% 55% / 58% 44% 56% 42%; border-style: solid; animation: neural-breathe 10s ease-in-out infinite; }
.orbit-two { border-style: dashed; border-radius: 54% 46% 57% 43% / 42% 59% 41% 58%; animation: neural-breathe 13s ease-in-out infinite reverse; }
.orbit::after { width: 7px; height: 7px; }
.project-group-title { margin-top: 55px; font-size: 29px; }
.project-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 27px; }
.project-row { border: 2px solid var(--line); border-radius: 12px; padding: 28px; gap: 20px; background: #0c2929; }
.project-row > div { min-width: 0; }
.project-row h3 { font-size: 25px; }
.project-row p { font-size: 17px; }
.project-row .tags { margin-top: 20px; gap: 7px; }
.project-row .tags li { font-size: 13px; padding: 6px 8px; }
.personal-projects { margin-top: 75px; }
.personal-projects > h3 { font-size: 34px; }
.personal-intro { font-size: 18px; color: var(--muted); margin-top: 15px; max-width: 630px; }
.personal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.personal-card { min-width: 0; padding: 28px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); }
.personal-card h4 { font-size: 25px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; margin: 20px 0 0; }
.personal-card > p { color: var(--muted); font-size: 17px; margin-top: 16px; }
.personal-card .tags { gap: 7px; margin-top: 22px; }
.personal-card .tags li { font-size: 13px; padding: 6px 8px; }
.project-sketch { width: 100%; height: 130px; overflow: visible; }
.project-sketch path, .project-sketch rect { stroke: #54b4a5; stroke-width: 2; stroke-linejoin: round; }
.project-sketch circle { fill: #103b37; stroke: var(--aqua); stroke-width: 2; }
.sketch-network path:nth-child(2) { stroke: var(--aqua); stroke-dasharray: 280; animation: monitor-trace 5s ease-in-out infinite; }
.vision-target { animation: vision-scan 5s ease-in-out infinite; }
.skills-section { border-bottom: 2px solid #224b47; }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.skill-card { min-width: 0; padding: 31px; border-left: 3px solid #408e7f; border-radius: 0 12px 12px 0; background: linear-gradient(120deg, #0c2a27, #081b1b); }
.skill-symbol { display: flex; align-items: center; justify-content: center; height: 48px; width: 55px; margin-bottom: 22px; color: var(--aqua); font: 23px var(--mono); border: 2px solid #2e655a; border-radius: 8px; }
.skill-card h3 { font-size: 28px; }
.skill-card > p { font-size: 18px; color: var(--muted); margin-top: 17px; }
.skill-card .tags { gap: 8px; margin-top: 23px; }
.skill-card .tags li { font: 14px/1.5 var(--sans); padding: 6px 9px; }
.about-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 45px; letter-spacing: -2px; }
.about-mark > img { height: 180px; width: 180px; filter: drop-shadow(0 0 30px #54f3d015); }
.about-mark > small { margin-top: 0; }
.badge-security { border-color: #8065af; color: var(--violet); background: #201f38e8; }
.talk-card { background: linear-gradient(145deg, #201c33, #101e29); border-color: #655780; }
.talk-card::before { background: var(--violet); }
.talk-card > .eyebrow, .talk-card .text-link, .talk-card .text-link > span { color: var(--violet); }
.talk-card .disclosure { border-color: #514568; }
.talk-card .archive-art { border-color: var(--violet); background: #302744; color: var(--violet); }
.talk-card .process-art { border-color: #796299; background: #1a2030; }
.talk-card .process-art > i { background: var(--violet); }
.talk-card .transfer-line { background: #675282; }
.talk-card .transfer-line::after { background: var(--violet); }
.skill-card:nth-child(3) { border-left-color: var(--violet); background: linear-gradient(120deg, #211e35, #0e1c22); }
.skill-card:nth-child(3) .skill-symbol { color: var(--violet); border-color: #66517f; }
.skill-card:nth-child(3) .tags li { border-color: #5d4c76; color: #d6c7f4; }
.personal-card:first-child { border-color: #574b70; }
.personal-card:first-child .project-sketch path, .personal-card:first-child .project-sketch rect { stroke: var(--violet); }
.sketch-store rect { stroke-dasharray: 9 5; animation: signal-travel 28s linear infinite; }
.revealed { animation: rise-in 650ms ease both; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes badge-float { 50% { translate: 0 -12px; } }
@keyframes archive-hover { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes signal-travel { to { stroke-dashoffset: -456; } }
@keyframes cursor-blink { 0%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes transfer { from { left: -18px; } to { left: 100%; } }
@keyframes node-pulse { 50% { box-shadow: 0 0 0 12px #54f3d010, 0 0 24px #54f3d055; } }
@keyframes award-turn { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes rise-in { from { opacity: .5; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes neural-breathe { 50% { transform: scale(.94) rotate(4deg); opacity: .6; } }
@keyframes monitor-trace { 0% { stroke-dashoffset: 280; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes vision-scan { 50% { transform: translateY(13px); } }
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state: paused !important; }
[data-motion="paused"] [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .header-inner { gap: 25px; }
  .navigation { gap: 22px; }
  .header-actions { gap: 18px; }
  .header-contact { display: none; }
  .hero-grid { min-height: 740px; gap: 0; }
  h1 { font-size: 100px; letter-spacing: -6px; }
  .hero-intro { font-size: 18px; }
  .hero-statement { font-size: 26px; }
  .hero-copy > .eyebrow { font-size: 12px; }
  .network-core { inset-inline: 21%; gap: 6px; }
  .network-core strong { font-size: 44px; }
  .core-bracket { font-size: 30px; }
  .network-badge { font-size: 12px; padding: 10px 12px; }
  .network-caption { font-size: 12px; padding-inline: 10px; }
  .section-heading > p { max-width: 280px; font-size: 18px; }
  .security-card { padding: 28px; }
  .security-card > p:not(.eyebrow) { font-size: 17px; }
  .security-card > .eyebrow { font-size: 12px; }
  .lab-result { padding: 25px; gap: 20px; }
  .rank { font-size: 60px; }
  .lab-copy strong { font-size: 20px; }
  .featured-project { padding: 32px; gap: 20px; }
  .featured-project h3 { font-size: 32px; }
  .architecture-step { font-size: 13px; }
  .architecture-hub { font-size: 22px; }
  .contact-inner h2 { font-size: 48px; }
  .contact-inner .button { font-size: 15px; gap: 18px; }
  .about-mark { font-size: 52px; }
  .brand { font-size: 23px; }
  .project-row { padding: 25px; }
  .project-row h3 { font-size: 24px; }
  .personal-card { padding: 23px; }
  .personal-card h4 { font-size: 23px; }
}

@media (max-width: 850px) and (min-width: 761px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  h1 { font-size: 82px; letter-spacing: -5px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { font-size: 14px; gap: 14px; padding-inline: 16px; }
  .hero-statement { font-size: 24px; }
  .network-caption { bottom: -30px; }
  .network-badge { font-size: 11px; }
  .network-core strong { font-size: 34px; letter-spacing: -3px; }
  .network-core { gap: 4px; }
  .core-bracket { font-size: 24px; }
  .security-card { padding: 24px; }
  .security-card h3 { font-size: 27px; }
  .archive-art { height: 58px; width: 57px; font-size: 17px; }
  .transfer-line { width: 32px; }
  .process-art { padding: 10px; font-size: 12px; gap: 7px; }
  .lab-result { flex-wrap: wrap; }
  .rank { font-size: 56px; }
  .lab-arrow { display: none; }
  .featured-project { grid-template-columns: 1fr; }
  .architecture { width: 80%; justify-self: center; }
  .about-section { gap: 30px; }
  .about-mark { font-size: 42px; }
  .contact-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
  .project-row { flex-direction: column; gap: 16px; }
  .personal-grid { grid-template-columns: 1fr; }
  .personal-card { display: grid; grid-template-columns: 180px 1fr; gap: 0 25px; }
  .personal-card .project-sketch { grid-row: 1 / 4; align-self: center; }
  .personal-card h4 { margin-top: 0; }
  .personal-card .tags { grid-column: 2; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .container { width: calc(100% - 40px); }
  .header-inner { height: 74px; position: relative; gap: 20px; }
  .brand { font-size: 24px; gap: 7px; }
  .brand img { width: 43px; height: 43px; }
  .header-actions { margin-left: auto; }
  .language-switch { font-size: 14px; }
  .language-switch a { padding: 7px; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; gap: 7px; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); }
  .menu-toggle > span { width: 19px; height: 2px; background: var(--aqua); transition: transform 200ms; }
  .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .navigation { position: absolute; top: 73px; left: -20px; right: -20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 15px 25px 25px; background: #0a2525; border-bottom: 2px solid var(--aqua); }
  .navigation.is-open { display: flex; }
  .navigation a { font-size: 18px; padding-block: 12px; }
  .navigation a[aria-current]::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding-block: 50px 80px; gap: 20px; min-height: 0; }
  .hero-copy > .eyebrow { font-size: 12px; letter-spacing: .6px; margin-bottom: 28px; }
  h1 { font-size: clamp(70px, 16.4vw, 110px); letter-spacing: -5px; }
  .hero-statement { font-size: 26px; margin-top: 25px; }
  .hero-intro { font-size: 18px; margin-top: 19px; max-width: 450px; }
  .hero-actions { gap: 12px; margin-top: 27px; }
  .button { font-size: 15px; padding-inline: 18px; gap: 18px; min-height: 55px; }
  .hero-location { font-size: 14px; margin-top: 25px; }
  .hero-art { max-width: 460px; justify-self: center; margin-top: 0; }
  .network-core { inset: 34% 23%; }
  .network-core strong { font-size: 44px; }
  .core-bracket { font-size: 32px; }
  .network-badge { font-size: 12px; padding: 10px 12px; }
  .network-caption { font-size: 12px; }
  .motion-toggle { right: 0; bottom: 16px; font-size: 13px; }
  .section { padding-block: 65px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
  .section-number { font-size: 14px; margin-bottom: 18px; }
  h2 { font-size: 43px; letter-spacing: -1.8px; }
  .section-heading > p { font-size: 18px; max-width: 450px; }
  h3 { font-size: 28px; }
  .security-grid { grid-template-columns: 1fr; gap: 20px; }
  .security-card { padding: 27px 24px; border-radius: 12px; }
  .security-card::before { left: 24px; }
  .security-card h3 { font-size: 29px; margin-top: 18px; }
  .security-card > p:not(.eyebrow) { font-size: 17px; line-height: 1.7; }
  .security-card > .eyebrow { font-size: 12px; }
  .attack-diagram { height: 105px; margin-block: 8px 15px; }
  .talk-art { height: 115px; }
  .archive-art { height: 58px; width: 60px; font-size: 18px; }
  .process-art { font-size: 13px; padding: 10px; gap: 7px; }
  .transfer-line { width: 35px; }
  .text-link { font-size: 16px; }
  .disclosure { margin-top: 22px; }
  .disclosure summary { font-size: 15px; }
  .disclosure > div { font-size: 17px; }
  .labs-heading { margin-top: 40px; gap: 20px; }
  .labs-heading h3 { font-size: 24px; }
  .hacklabs { grid-template-columns: 1fr; gap: 15px; }
  .lab-result { padding: 25px; gap: 25px; }
  .rank { font-size: 67px; }
  .lab-copy strong { font-size: 22px; }
  .lab-copy > span { font-size: 18px; }
  .lab-copy small { font-size: 14px; }
  .learning { padding: 26px 24px; grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  .learning .eyebrow { font-size: 12px; }
  .learning h3 { font-size: 28px; }
  .learning p:not(.eyebrow) { font-size: 17px; }
  .learning-symbol { display: none; }
  .learning > .disclosure { margin-top: 25px; }
  .featured-project { grid-template-columns: 1fr; padding: 28px 24px 12px; gap: 10px; }
  .project-copy > .eyebrow { font-size: 12px; line-height: 1.8; }
  .featured-project h3 { font-size: 31px; }
  .project-copy > p:not(.eyebrow) { font-size: 17px; }
  .project-copy > p.project-role { font-size: 16px; }
  .tags { gap: 8px; }
  .tags li { font-size: 13px; padding: 6px 9px; }
  .architecture { max-width: 420px; justify-self: center; }
  .architecture-step { font-size: 13px; }
  .architecture-hub { font-size: 22px; border-radius: 11px; }
  .project-row { gap: 18px; padding-block: 28px; }
  .project-number { font-size: 17px; }
  .project-row h3 { font-size: 25px; }
  .project-row p { font-size: 17px; }
  .project-list { grid-template-columns: 1fr; gap: 18px; }
  .project-group-title { font-size: 26px; margin-top: 40px; }
  .project-row { padding: 25px 22px; gap: 17px; }
  .personal-projects { margin-top: 50px; }
  .personal-projects > h3 { font-size: 30px; }
  .personal-intro { font-size: 17px; }
  .personal-grid { grid-template-columns: 1fr; gap: 18px; }
  .personal-card { padding: 27px; }
  .personal-card h4 { font-size: 26px; }
  .project-sketch { height: 125px; }
  .skill-grid { grid-template-columns: 1fr; gap: 22px; }
  .skill-card { padding: 27px 24px; }
  .skill-card h3 { font-size: 27px; }
  .skill-card > p { font-size: 17px; }
  .skill-card .tags li { font-size: 14px; }
  .projects-more { justify-content: flex-start; }
  .awards { padding: 27px 24px; margin-top: 40px; }
  .award-heading { gap: 15px; }
  .award-emblem { font-size: 35px; }
  .award-heading h3 { font-size: 26px; }
  .award-heading .eyebrow { font-size: 12px; }
  .award-heading p:not(.eyebrow) { font-size: 16px; }
  .award-results { gap: 20px; }
  .award-results strong { font-size: 29px; }
  .award-results strong > span { font-size: 21px; }
  .award-results a > span { font-size: 15px; }
  .about-section { grid-template-columns: 1fr; gap: 25px; }
  .about-text { font-size: 19px; }
  .about-mark { font-size: 55px; padding-block: 30px; }
  .about-mark small { font-size: 15px; }
  .contact-inner { flex-direction: column; align-items: flex-start; padding-block: 50px; gap: 30px; }
  .contact-inner h2 { font-size: 43px; }
  .contact-inner .eyebrow { font-size: 13px; margin-bottom: 20px; }
  .contact-inner .button { font-size: 16px; }
  .contact-decoration { font-size: 430px; right: -70px; top: -80px; }
  .site-footer { font-size: 13px; gap: 20px; padding-block: 25px; }
  .site-footer > a { gap: 10px; font-size: 13px; }
  .not-found h1 { font-size: 52px; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  h1 { font-size: 68px; letter-spacing: -4.5px; }
  .hero-statement { font-size: 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { font-size: 14px; padding-inline: 12px; gap: 12px; }
  .network-core strong { font-size: 36px; }
  .core-bracket { font-size: 25px; }
  .network-caption { font-size: 12px; }
  h2 { font-size: 38px; }
  .lab-result { gap: 18px; padding: 23px 20px; }
  .rank { font-size: 58px; }
  .lab-copy strong { font-size: 20px; }
  .lab-arrow { display: none; }
  .security-card, .learning, .featured-project, .awards { padding-inline: 20px; }
  .security-card h3 { font-size: 27px; }
  .process-art { font-size: 12px; gap: 5px; padding: 9px; }
  .transfer-line { width: 25px; }
  .award-results { grid-template-columns: 1fr; gap: 24px; }
  .award-results strong { font-size: 34px; }
  .award-heading { display: block; }
  .award-emblem { display: none; }
  .architecture-step { font-size: 12px; }
  .about-mark { font-size: 45px; }
  .contact-inner h2 { font-size: 38px; }
  .site-footer { align-items: flex-start; }
  .site-footer > span { max-width: 155px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-toggle { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; color: #111; font-size: 12px; }
  .site-header, .hero-art, .motion-toggle, .talk-art, .attack-diagram, .architecture, .about-mark, .contact-decoration { display: none; }
  .container { width: 100%; }
  .hero-grid, .section, .contact-inner { padding-block: 25px; min-height: 0; }
  .hero-grid, .featured-project, .about-section { display: block; }
  h1 { font-size: 65px; }
  h2 { font-size: 35px; }
  .hero, .security-card, .featured-project, .engineering-section, .awards, .contact-section { background: #fff; }
  .security-card, .featured-project, .awards { break-inside: avoid; }
  p, .hero-intro, .hero-statement, .project-copy > p, .about-text, .eyebrow, h2 > span, .text-link { color: #222 !important; }
  .section-heading { margin-bottom: 20px; }
  .button { box-shadow: none; }
  .disclosure { display: none; }
  * { animation: none !important; }
}