:root { --bg:#020b14; --panel:#06111c; --panel-soft:#091724; --ink:#f0ebe2; --muted:#a4a6a7; --line:#34404e; --cyan:#1de4ec; --green:#54d984; --coral:#ff725b; --content-width:1360px; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { min-width:1100px; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 64% 8%,#0a1a29 0,transparent 36%),var(--bg); font:16px/1.5 var(--mono); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.eyebrow,.role,.section-heading h2,.stack-groups h3,.terminal-tabs span:first-child,.terminal-tabs b { color:var(--cyan); }
main { width:min(100%,var(--content-width)); margin:0 auto; padding:0 44px; }
.section { min-height:100vh; scroll-margin-top:24px; padding-top:72px; }
.hero { min-height:100vh; display:flex; flex-direction:column; }
.hero-intro { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:stretch; gap:40px; margin:32px 30px 0; max-width:1160px; }
.hero-copy { min-width:0; }
.eyebrow { margin:0 0 30px; font-size:22px; }
h1 { margin:0; font:clamp(64px,6vw,104px)/.95 Impact,"Arial Narrow",sans-serif; letter-spacing:.015em; white-space:nowrap; }
.hero h1 { font-size:clamp(60px,5vw,88px); }
.online-indicator { position:relative; display:inline-block; flex:0 0 auto; width:15px; height:15px; border-radius:50%; background:var(--green); box-shadow:0 0 12px #54d98499; }
.online-indicator::after { position:absolute; inset:-1px; content:""; border:2px solid var(--green); border-radius:inherit; animation:online-pulse 2s ease-out infinite; }
@keyframes online-pulse { 0% { opacity:.85; transform:scale(.7); } 75%,100% { opacity:0; transform:scale(2.3); } }
@media (prefers-reduced-motion:reduce) { .online-indicator::after { opacity:.35; animation:none; transform:scale(1.45); } }
.role { margin:28px 0 18px; font-size:clamp(24px,2.2vw,35px); letter-spacing:.09em; }
.availability { display:inline-flex; width:max-content; align-items:center; gap:14px; margin:0 0 26px; padding:9px 14px; color:var(--green); border:1px solid var(--green); border-radius:4px; background:#54d9840a; box-shadow:inset 0 0 0 1px #54d98412,0 0 18px #54d9840d; font-size:16px; letter-spacing:.03em; }
.pitch { max-width:765px; margin:0; color:#eee9e1; font-size:20px; line-height:2.25; }
.hero-video-frame { position:relative; min-height:0; isolation:isolate; opacity:0; transition:opacity .7s ease; }
.hero-video-frame:has(.is-ready) { opacity:1; }

.hero-poster,.hero-video { opacity:0; }
.hero-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.hero-video { position:relative; display:block; width:100%; height:100%; min-height:100%; object-fit:cover; background:transparent; }
.hero-poster.is-ready,.hero-video.is-ready { opacity:1; }
.hero-video-frame:has(.hero-video.is-ready) .hero-poster { opacity:0; }
@media (prefers-reduced-motion:reduce) { .hero-video-frame { transition:none; } }
.hero-actions { display:flex; gap:16px; margin:38px 30px 0; }
.hero-button { display:inline-flex; min-height:54px; align-items:center; gap:12px; padding:0 20px; color:var(--ink); border:1px solid #67717b; background:#06111c; font-size:17px; transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.hero-button .ti { font-size:22px; line-height:1; }.hero-button:hover { transform:translateY(-3px); color:var(--cyan); border-color:var(--cyan); box-shadow:0 12px 24px #0005; }.hero-button.is-primary { color:var(--cyan); border-color:var(--cyan); background:#1de4ec0d; box-shadow:inset 0 0 0 1px #1de4ec22,0 0 18px #1de4ec14; }
.section-teaser { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 30px; margin-top:auto; padding:24px 0; color:var(--cyan); font-size:25px; border-bottom:1px solid var(--line); }
.section-teaser span:last-child { font-size:30px; }
.section-heading { display:flex; align-items:center; gap:24px; margin-bottom:50px; scroll-margin-top:24px; }
.section-heading::after { flex:1; height:2px; content:""; background:var(--cyan); }
.section-heading h2 { margin:0; font-size:31px; font-weight:500; }
.experience-section { min-height:1120px; }
.timeline { position:relative; width:1100px; height:970px; max-width:100%; margin:0 auto; }
.git-graph { position:absolute; inset:0; width:1100px; height:100%; overflow:visible; pointer-events:none; }
.graph-main,.graph-contract { fill:none; stroke-width:3; vector-effect:non-scaling-stroke; }
.graph-main { stroke:var(--cyan); }
.graph-contract { stroke:var(--coral); }
.graph-nodes circle { fill:var(--bg); stroke:var(--cyan); stroke-width:3; }
.branch-label { position:absolute; top:54px; left:22px; color:var(--cyan); padding:4px 8px; border:1px solid var(--cyan); border-radius:4px; background:var(--panel); }
.job-card { position:absolute; width:430px; min-height:180px; padding:28px 32px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(145deg,#0b1723,#06111d); box-shadow:0 18px 34px #0004; }
.job-card p { margin:0; }
.job-code { color:var(--cyan); font-size:19px; }
.job-meta { margin:10px 0 21px !important; color:#66717a; font-size:13px; }
.job-card > p:last-child { max-width:340px; color:#ddd8d1; font-size:14px; line-height:1.55; }
.work-one { top:80px; left:140px; }.work-two { top:310px; left:140px; }.work-three { top:540px; left:140px; }.contract-card { top:650px; left:650px; }
.job-title { display:flex; align-items:center; gap:18px; }.job-title span { padding:2px 8px; color:var(--coral); border:1px solid var(--coral); border-radius:4px; font-size:13px; }
.stack-section { min-height:900px; }
.terminal-window { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(130deg,#07131f,#030b14); box-shadow:0 20px 50px #0005; }
.window-bar { display:flex; gap:14px; padding:28px; border-bottom:1px solid #172532; }.window-bar i { width:23px; height:23px; border-radius:50%; background:#ff5d51; }.window-bar i:nth-child(2){background:#ffd253}.window-bar i:nth-child(3){background:#32d65d}
.command { margin:70px 48px 54px; font-size:clamp(19px,2vw,30px); white-space:nowrap; }.command span { color:var(--cyan); margin-right:12px; }
.stack-groups { display:grid; grid-template-columns:1.25fr 1.2fr 1fr .8fr; gap:36px; min-height:385px; padding:0 48px 55px; }
.stack-groups h3 { margin:0 0 18px; font-size:25px; font-weight:500; }.stack-groups ul { position:relative; display:grid; gap:22px; margin:0; padding:0; list-style:none; font-size:22px; }.stack-groups ul::before { position:absolute; content:""; top:0; left:0; height:.7em; border-left:2px solid #7b858d; }.stack-groups li { position:relative; padding-left:76px; font-size:22px; background:linear-gradient(#7b858d,#7b858d) 0 .7em/49px 2px no-repeat; }.stack-groups li::before { position:absolute; z-index:1; content:""; width:12px; height:12px; left:42px; top:.42em; border-radius:50%; background:var(--green); box-shadow:0 0 16px #54d98466; }.stack-groups li:not(:last-child)::after { position:absolute; content:""; top:.7em; bottom:calc(-22px - .7em); left:0; border-left:2px solid #7b858d; }
.terminal-tabs { display:flex; gap:48px; padding:22px 36px; color:#a6a6aa; font-size:20px; border-top:1px solid var(--line); }.terminal-tabs span:first-child { position:relative; }.terminal-tabs span:first-child::after { position:absolute; content:""; height:4px; left:-15px; right:-15px; bottom:-22px; background:var(--cyan); }.terminal-tabs b { font-weight:400; }
.contacts-section { min-height:0; padding-bottom:64px; }
.contacts-grid { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:26px; }
.contact-card { position:relative; display:flex; min-height:320px; align-items:center; justify-content:center; flex-direction:column; gap:36px; padding:25px; color:#f1ebe3; border:1px solid #67717b; border-radius:10px; background:linear-gradient(145deg,#07131f,#030b14); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.contact-card:hover { transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 16px 30px #0005; }
.external { position:absolute; top:17px; right:18px; display:grid; width:28px; height:28px; place-items:center; color:var(--ink); font-size:29px; line-height:1; }.contact-card > span:last-child,.email-main > span:last-child { font-size:21px; }
.contact-icon { width:105px; height:105px; fill:none; stroke:#eee7dd; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-icon.ti { display:grid; place-items:center; color:#eee7dd; font-size:100px; line-height:1; }
.email-card { display:block; padding:0; }.email-main { position:relative; display:flex; height:256px; align-items:center; justify-content:flex-start; flex-direction:column; gap:38px; padding:78px 25px 12px; }.email-main .external { top:17px; right:18px; }.email-main .contact-icon { width:96px; height:96px; }.email-main .contact-icon.ti { font-size:100px; }
.copy-email { display:flex; align-items:center; justify-content:center; gap:10px; width:calc(100% - 28px); margin:0 14px 14px; padding:12px; color:var(--ink); cursor:pointer; background:transparent; border:1px solid #9aa0a4; border-radius:9px; transition:border-color .2s ease,color .2s ease; }.copy-email:hover,.copy-email.is-copied { color:var(--cyan); border-color:var(--cyan); }.copy-email span { font-size:20px; }

@media (max-width:1099px) {
  html { min-width:0; }
  body { overflow-x:hidden; }
  main { width:100%; padding:0 clamp(36px,9vw,70px); }
  .section { min-height:0; padding-top:56px; }

  .hero { min-height:100svh; padding-top:0; }
  .hero-intro { display:grid; grid-template-columns:minmax(0,1fr) clamp(205px,29vw,224px); column-gap:24px; row-gap:0; margin:clamp(52px,8.85vw,68px) 0 0; max-width:none; }
  .hero-copy { display:contents; }
  .eyebrow { grid-column:1; grid-row:1; align-self:end; margin:58px 0 28px; font-size:20px; }
  .hero h1 { grid-column:1; grid-row:2; font-size:clamp(58px,8.85vw,68px); }
  .role { grid-column:1; grid-row:3; margin:36px 0 18px; font-size:clamp(21px,3.1vw,24px); letter-spacing:.04em; }
  .availability { grid-column:1; grid-row:4; margin:0; padding:8px 12px; font-size:14px; }
  .hero-video-frame { grid-column:2; grid-row:1 / 5; height:414px; min-height:0; }
  .hero-video { height:100%; min-height:0; object-fit:cover; }
  .pitch { grid-column:1 / -1; grid-row:5; max-width:none; margin:50px 0 0; font-size:15.5px; line-height:3; }
  .hero-actions { margin:36px 0 0; }
  .section-teaser { margin-right:0; margin-left:0; }

  .section-heading { gap:18px; margin-bottom:28px; }
  .section-heading h2 { font-size:25px; }
  .section-heading::after { height:1px; }
  .experience-section { min-height:0; }
  .timeline { width:100%; height:auto; margin:0; }
  .git-graph { width:100%; height:100%; }
  .branch-label { top:0; left:18px; padding:2px 6px; font-size:13px; }
  .job-card { left:96px; width:min(460px,calc(100% - 96px)); min-height:0; padding:22px 24px; }
  .job-code { font-size:17px; }
  .job-meta { margin:7px 0 14px !important; font-size:12px; }
  .job-card > p:last-child { max-width:none; font-size:13px; }
  .contract-card { border-color:var(--coral); }
  .graph-nodes circle:last-child { stroke:var(--coral); }

  .stack-section { min-height:0; }
  .terminal-window { border-radius:9px; }
  .window-bar { gap:9px; padding:18px; }
  .window-bar i { width:13px; height:13px; }
  .command { margin:28px 24px 24px; font-size:14px; white-space:normal; }
  .stack-groups { grid-template-columns:1.25fr 1.2fr 1fr .9fr; gap:14px; min-height:0; padding:0 24px 24px; }
  .stack-groups h3 { margin-bottom:12px; font-size:13px; }
  .stack-groups ul { gap:10px; font-size:12px; }
  .stack-groups li { padding-left:32px; font-size:12px; background-size:22px 1px; }
  .stack-groups li::before { left:19px; width:7px; height:7px; }
  .stack-groups li:not(:last-child)::after { bottom:calc(-10px - .7em); border-left-width:1px; }
  .stack-groups ul::before { border-left-width:1px; }
  .terminal-tabs { gap:28px; padding:10px 16px; font-size:12px; }
  .terminal-tabs span:first-child::after { right:-8px; bottom:-10px; left:-8px; height:2px; }

  .contacts-section { padding-bottom:36px; }
  .contacts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
  .contact-card { min-height:70px; align-items:center; justify-content:flex-start; flex-direction:row; gap:16px; padding:12px 18px; border-radius:6px; }
  .contact-card > span:last-child,.email-main > span:last-child { font-size:14px; }
  .contact-icon,.email-main .contact-icon { width:42px; height:42px; }
  .contact-icon.ti,.email-main .contact-icon.ti { font-size:42px; }
  .external,.email-main .external { top:9px; right:10px; width:18px; height:18px; font-size:18px; }
  .email-card { grid-column:1 / -1; display:flex; align-items:center; }
  .email-main { height:auto; flex:1; align-items:center; justify-content:flex-start; flex-direction:row; gap:16px; padding:12px 18px; }
  .copy-email { width:auto; margin:10px 16px 10px 8px; padding:9px 14px; font-size:12px; }
  .copy-email span { font-size:12px; }
}

@media (max-width:640px) {
  main { padding:0 20px; }
  .section { padding-top:34px; }

  .hero { min-height:100svh; padding-top:0; }
  .hero-intro { grid-template-columns:minmax(0,1fr); margin:25px 18px 0; }
  .eyebrow { grid-column:1; grid-row:1; margin:0 0 6px; font-size:16px; line-height:24px; }
  .hero h1 { grid-column:1; grid-row:2; font-size:44px; line-height:.93; }
  .role { grid-column:1; grid-row:3; margin:12px 0 8px; font-size:16px; line-height:1.5; letter-spacing:.06em; }
  .availability { grid-column:1; grid-row:4; gap:9px; margin:0; padding:5px 9px; font-size:11px; line-height:17px; }
  .online-indicator { width:12px; height:12px; }
  .hero-video-frame { grid-column:1; grid-row:5; width:min(220px,100%); height:344px; margin:8px auto 0; }
  .pitch { grid-column:1; grid-row:6; margin:5px 0 0; font-size:11px; line-height:2.15; }
  .hero-actions { gap:8px; margin:10px 18px 0; }
  .hero-button { flex:1; min-height:36px; justify-content:center; gap:8px; padding:0 9px; font-size:12px; }
  .hero-button .ti { font-size:18px; }
  .section-teaser { margin-right:18px; margin-left:18px; padding:15px 0 12px; font-size:15px; }
  .section-teaser span:last-child { font-size:20px; }

  .section-heading { gap:14px; margin-bottom:18px; }
  .section-heading h2 { font-size:20px; }
  .timeline { min-height:0; }
  .branch-label { left:4px; font-size:12px; }
  .job-card { left:70px; width:calc(100% - 70px); padding:16px 18px; border-radius:6px; }
  .job-code { font-size:14px; }
  .job-meta { margin:6px 0 12px !important; font-size:10px; }
  .job-card > p:last-child { font-size:11px; line-height:1.55; }
  .job-title { gap:9px; }
  .job-title span { padding:1px 5px; font-size:10px; }
  .contract-card { border-color:var(--line); }

  .terminal-window { border-radius:8px; }
  .window-bar { gap:8px; padding:15px 18px; }
  .window-bar i { width:12px; height:12px; }
  .command { margin:24px 20px 22px; font-size:13px; line-height:1.5; }
  .stack-groups { grid-template-columns:1fr; gap:27px; padding:0 20px 30px; }
  .stack-groups h3 { margin-bottom:10px; font-size:13px; }
  .stack-groups ul { gap:12px; }
  .stack-groups li { padding-left:38px; font-size:13px; background-size:28px 1px; }
  .stack-groups li::before { left:25px; width:7px; height:7px; }
  .stack-groups li:not(:last-child)::after { bottom:calc(-12px - .7em); }
  .terminal-tabs { gap:23px; padding:10px 16px; font-size:11px; }

  .contacts-grid { gap:14px; }
  .contact-card { min-height:238px; justify-content:center; flex-direction:column; gap:30px; padding:20px 12px; }
  .contact-icon,.email-main .contact-icon { width:62px; height:62px; }
  .contact-icon.ti,.email-main .contact-icon.ti { font-size:62px; }
  .contact-card > span:last-child,.email-main > span:last-child { font-size:14px; }
  .email-card { display:block; min-height:218px; }
  .email-main { height:145px; justify-content:center; flex-direction:column; gap:20px; padding:25px 12px 8px; }
  .copy-email { width:min(180px,calc(100% - 28px)); margin:10px auto 14px; padding:10px; font-size:12px; }
}

@media (max-width:375px) {
  .hero h1 { font-size:42px; }
  .hero-video-frame { height:318px; margin-top:5px; }
  .pitch { line-height:1.85; }
}