:root {
  color-scheme: dark;
  --ink: #0b0810;
  --paper: #0b0810;
  --paper-bright: #110d18;
  --line: #392643;
  --signal: #ff58cd;
  --purple: #b487ff;
  --text-main: #f4eff8;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --display: "Geist", "Helvetica Neue", sans-serif;
  --name-font: "Source Sans 3", "Open Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text-main); background: var(--paper); font-family: var(--display); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--purple); }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; padding: 24px 5.4vw; color: #f5f6f1; border-bottom: 1px solid rgb(255 255 255 / 19%); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-family: var(--name-font); font-size: 14px; font-weight: 400; }
.brand-logo { display: block; width: 38px; height: 38px; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 42px); }
.main-nav a, .language-button { color: rgb(245 246 241 / 77%); font-size: 12px; transition: color 160ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.main-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border: 1px solid rgb(180 135 255 / 24%); border-radius: 8px; background: rgb(17 13 24 / 72%); }
.main-nav a:hover, .main-nav a:focus-visible { color: #160d1d; border-color: transparent; background: linear-gradient(110deg, #ff70d5, #bd83ff); box-shadow: 0 0 18px rgb(224 91 255 / 30%); }
.language-button:hover, .language-button.is-active { color: var(--signal); }
.language-switch { display: flex; justify-content: flex-end; gap: 4px; }
.language-button { min-width: 35px; padding: 6px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-family: var(--mono); cursor: pointer; }
.language-button.is-active { border-color: rgb(255 88 205 / 58%); }
.hero { position: relative; display: flex; min-height: 610px; height: min(80svh, 830px); align-items: center; overflow: hidden; color: #f7f3fb; background: var(--ink); isolation: isolate; }
.hero-image, .hero-grid { position: absolute; z-index: -2; inset: 0; }
.hero-image { background-image: linear-gradient(90deg, rgb(11 8 16 / 82%) 0%, rgb(11 8 16 / 58%) 52%, rgb(11 8 16 / 31%) 100%), linear-gradient(0deg, rgb(11 8 16 / 58%), transparent 45%), url("img/hero-bg.jpg"); background-size: cover; background-position: center 47%; transform: scale(1.025); filter: brightness(.78) saturate(.82); animation: hero-settle 1.4s ease-out both; }
.hero-grid { z-index: -1; opacity: .24; background-image: linear-gradient(rgb(245 246 241 / 12%) 1px, transparent 1px), linear-gradient(90deg, rgb(245 246 241 / 12%) 1px, transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(90deg, transparent, #000 35%, #000); }
.hero-copy { display: flex; width: min(760px, 88vw); flex-direction: column; align-items: center; margin: 62px auto 0; text-align: center; animation: reveal 760ms 100ms both; }
.eyebrow { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; line-height: 1.5; }
.hero .eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; color: rgb(247 248 243 / 82%); }
.status-dot { width: 7px; height: 7px; background: var(--signal); box-shadow: 0 0 0 4px rgb(255 88 205 / 17%); }
.hero-logo { display: block; width: 104px; height: 104px; margin-top: 25px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 18px rgb(180 135 255 / 42%)); }
.hero h1 { margin: 4px 0 12px; font-family: var(--name-font); font-size: clamp(35px, 4.65vw, 66px); font-weight: 300; letter-spacing: 0; line-height: .95; white-space: nowrap; }
.hero h1 span { color: var(--purple); }
.hero-statement { margin: 15px 0 0; font-size: clamp(19px, 2.25vw, 29px); font-weight: 500; letter-spacing: -.025em; }
.hero-description { max-width: 520px; margin: 9px auto 0; color: rgb(247 243 251 / 78%); font-size: 15px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 25px; }
.button-primary { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 20px; padding: 0 17px; border-radius: 8px; color: #160d1d; background: linear-gradient(110deg, #ff70d5, #bd83ff); font-size: 13px; font-weight: 600; transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.button-primary:hover { background: linear-gradient(110deg, #c79bff, #ff73d7); box-shadow: 0 0 24px rgb(224 91 255 / 40%); transform: translateY(-2px); }
.button-primary > span:last-child { font-size: 18px; line-height: 1; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #f7f8f3; font-size: 13px; }
.text-link span:last-child { color: var(--purple); font-size: 17px; }
.text-link:hover, .project-link:hover, .all-projects-link:hover { color: var(--signal); }
.hero-index { position: absolute; right: 6vw; bottom: 96px; display: flex; align-items: flex-start; gap: 14px; color: rgb(247 248 243 / 65%); font-family: var(--mono); font-size: 9px; line-height: 1.9; letter-spacing: .06em; }
.index-line { width: 46px; height: 1px; margin-top: 8px; background: var(--signal); }
.scroll-cue { position: absolute; right: 5.4vw; bottom: 23px; left: 5.4vw; display: flex; align-items: center; justify-content: space-between; padding-top: 13px; color: rgb(247 248 243 / 68%); border-top: 1px solid rgb(255 255 255 / 24%); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.scroll-cue span:last-child { color: var(--signal); font-size: 17px; }
.section-pad { padding: 118px 11.5vw; }
.work-section { background: linear-gradient(145deg, #100c16, #120d19 58%, #100b16); }
.section-heading { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: 8vw; margin-bottom: 58px; }
.section-kicker { color: #bbaac8; }
.section-heading h2, .focus-heading h2, .about-layout h2, .contact-layout h2 { margin: 21px 0 0; font-size: clamp(39px, 5.3vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: .99; }
.section-intro { max-width: 380px; margin: 0 0 5px; color: #c4b8ce; font-size: 15px; }
.project-list { border-top: 1px solid var(--line); }
.project { border-bottom: 1px solid var(--line); }
.project-featured { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px, 6vw, 86px); align-items: center; padding: 30px 0 44px; }
.project-visual { position: relative; min-height: 335px; overflow: hidden; color: #f4edf9; background: #100b17; }
.visual-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 17px 19px; color: var(--purple); border-bottom: 1px solid rgb(255 255 255 / 15%); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.terminal-lines { position: relative; z-index: 1; display: grid; gap: 14px; padding: 44px 8% 36px; font-family: var(--mono); font-size: clamp(10px, 1.1vw, 13px); }
.terminal-lines i { color: var(--signal); font-style: normal; }
.terminal-lines b { display: inline-block; width: 30px; color: #94839f; font-weight: 400; }
.terminal-lines em { color: #ff9cdd; font-style: normal; }
.terminal-lines strong { color: var(--purple); font-weight: 400; }
.terminal-muted { color: #a697b2; }
.terminal-prompt { padding-top: 11px; border-top: 1px solid rgb(255 255 255 / 15%); }
.cursor { display: inline-block; width: 7px; height: 13px; margin-left: 5px; vertical-align: -2px; background: var(--purple); animation: blink 1.1s step-end infinite; }
.visual-corner { position: absolute; right: 17px; bottom: 14px; color: #a697b2; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.project-copy { max-width: 470px; }
.project-type { display: flex; gap: 12px; margin: 0 0 12px; color: #bbaac8; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.project-type > span:first-child { color: var(--signal); }
.project h3 { margin: 0; font-size: clamp(30px, 3.2vw, 43px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.project-lede { margin: 15px 0 0; font-size: 17px; font-weight: 500; line-height: 1.4; }
.project-detail { margin: 12px 0 0; color: #b7a9c1; font-size: 13px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 21px; color: #c0b1ca; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; }
.project-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 12px; font-weight: 600; transition: color 160ms ease; }
.project-link span:last-child { color: var(--signal); font-size: 17px; }
.project-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 42px; align-items: center; gap: 20px; padding: 27px 2px; }
.project-number { align-self: start; padding-top: 3px; color: var(--signal); font-family: var(--mono); font-size: 12px; }
.project-row .project-copy { max-width: 720px; }
.project-row .project-type { margin-bottom: 7px; }
.project-row h3 { font-size: clamp(23px, 2.4vw, 31px); }
.project-row .project-lede { max-width: 650px; margin-top: 7px; color: #c4b8ce; font-size: 14px; font-weight: 400; }
.project-row .project-meta { margin-top: 12px; }
.project-arrow { display: grid; width: 39px; height: 39px; place-items: center; color: var(--text-main); border: 1px solid var(--line); border-radius: 8px; font-size: 18px; transition: color 160ms ease, background 160ms ease, border 160ms ease, box-shadow 160ms ease; }
.project-arrow:hover { color: #160d1d; border-color: var(--signal); background: linear-gradient(110deg, #ff70d5, #bd83ff); box-shadow: 0 0 18px rgb(224 91 255 / 34%); }
.all-projects-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--ink); font-size: 12px; font-weight: 600; transition: color 160ms ease; }
.all-projects-link span:last-child { color: var(--signal); font-size: 17px; }
.focus-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10vw; color: #f4eff8; background: linear-gradient(120deg, #0b0810, #100a17 65%, #160d1d); }
.focus-section .section-kicker { color: #c1a9d4; }
.focus-heading h2 { margin-top: 25px; }
.focus-heading > p:last-child { max-width: 380px; margin: 25px 0 0; color: #c4b8ce; font-size: 14px; }
.focus-list { align-self: center; border-top: 1px solid rgb(255 255 255 / 22%); }
.focus-item { display: grid; grid-template-columns: 37px 1fr 20px; align-items: start; gap: 16px; padding: 19px 0; border-bottom: 1px solid rgb(255 255 255 / 22%); }
.focus-index { padding-top: 3px; color: var(--signal); font-family: var(--mono); font-size: 10px; }
.focus-item h3 { margin: 0; font-size: 17px; font-weight: 500; }
.focus-item p { margin: 4px 0 0; color: #c4b8ce; font-family: var(--mono); font-size: 10px; line-height: 1.7; }
.focus-sign { color: var(--purple); font-family: var(--mono); font-size: 16px; }
.about-section { background: #15101c; }
.about-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; align-items: start; }
.about-layout h2 { margin-top: 20px; }
.about-copy { max-width: 500px; padding-top: 7px; color: #d0c5d9; font-size: 15px; }
.about-copy p { margin: 0 0 17px; }
.dark-link { margin-top: 12px; color: var(--text-main); font-weight: 600; }
.dark-link span:last-child { color: var(--signal); }
.contact-section { color: #f5f0fa; background: linear-gradient(115deg, #201128, #17101f 70%, #110d18); }
.contact-section .section-kicker { color: #c3add4; }
.contact-layout { display: grid; grid-template-columns: 1fr .7fr; gap: 10vw; align-items: end; }
.contact-layout h2 { margin-top: 24px; }
.contact-cta { padding-bottom: 7px; }
.contact-cta > p { max-width: 320px; margin: 0 0 21px; color: #d2c4dc; font-size: 15px; }
.contact-location { display: block; margin-top: 27px; color: #c3b3cf; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.contact-location span { color: var(--signal); }
.site-footer { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 5.4vw; color: #e9e2f0; background: #09070d; }
.footer-brand { font-size: 12px; }
.footer-brand .brand-logo { width: 32px; height: 32px; }
.site-footer > span, .back-top { color: #c0b1ca; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.back-top { display: inline-flex; align-items: center; gap: 10px; }
.back-top span:last-child { color: var(--signal); font-size: 15px; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-settle { from { transform: scale(1.07); filter: brightness(.64) saturate(.7); } to { transform: scale(1.025); filter: brightness(.78) saturate(.82); } }
@keyframes blink { 50% { opacity: 0; } }
@media (min-width: 1500px) { .section-pad { padding-right: max(11.5vw, calc((100vw - 1260px) / 2)); padding-left: max(11.5vw, calc((100vw - 1260px) / 2)); } }
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding: 18px 5vw; }
  .main-nav { grid-row: 1; grid-column: 1; justify-content: center; gap: 14px; }
  .language-switch { grid-row: 1; grid-column: 2; }
  .hero { height: 76svh; min-height: 620px; }
  .hero-copy { width: 88vw; }
  .hero-index { right: 5vw; bottom: 89px; }
  .section-pad { padding: 88px 8vw; }
  .project-featured { grid-template-columns: 1fr 1fr; gap: 35px; }
  .project-visual { min-height: 310px; }
  .focus-section { grid-template-columns: .8fr 1.2fr; gap: 6vw; }
  .about-layout, .contact-layout { gap: 7vw; }
}
@media (max-width: 620px) {
  .site-header { padding: 15px 5vw 12px; }
  .brand { gap: 8px; font-size: 12px; }
  .brand-logo { width: 34px; height: 34px; }
  .main-nav { gap: 0; padding-top: 12px; }
  .main-nav a { font-size: 10px; }
  .main-nav a { padding: 6px 6px; font-size: 10px; }
  .language-button { min-width: 31px; padding: 5px; font-size: 10px; }
  .hero { height: 78svh; min-height: 590px; max-height: 760px; }
  .hero-image { background-position: 59% center; }
  .hero-grid { background-size: 52px 52px; }
  .hero-copy { width: 90vw; margin: 42px 0 0 5vw; }
  .hero-logo { width: 80px; height: 80px; margin-top: 18px; }
  .hero h1 { margin-top: 4px; font-size: clamp(31px, 8vw, 44px); }
  .hero-statement { max-width: 340px; margin-top: 25px; font-size: 21px; }
  .hero-description { max-width: 360px; font-size: 13px; }
  .hero-actions { gap: 19px; margin-top: 23px; }
  .button-primary { min-height: 43px; gap: 13px; padding: 0 13px; font-size: 11px; }
  .text-link { gap: 6px; font-size: 11px; }
  .hero-index { display: none; }
  .scroll-cue { right: 5vw; left: 5vw; font-size: 8px; }
  .section-pad { padding: 74px 6vw; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
  .section-heading h2, .focus-heading h2, .about-layout h2, .contact-layout h2 { font-size: clamp(40px, 12vw, 60px); }
  .section-intro { max-width: 440px; font-size: 14px; }
  .project-featured { grid-template-columns: 1fr; gap: 25px; padding: 20px 0 32px; }
  .project-visual { min-height: 270px; }
  .terminal-lines { gap: 12px; padding-top: 35px; }
  .project h3 { font-size: 34px; }
  .project-lede { font-size: 15px; }
  .project-row { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; padding: 22px 0; }
  .project-row h3 { font-size: 23px; }
  .project-row .project-lede { font-size: 12px; }
  .project-meta { gap: 7px 12px; font-size: 8px; }
  .project-arrow { width: 33px; height: 33px; }
  .focus-section { grid-template-columns: 1fr; gap: 35px; }
  .focus-heading > p:last-child { margin-top: 18px; font-size: 13px; }
  .focus-item { grid-template-columns: 28px 1fr 16px; gap: 11px; }
  .focus-item h3 { font-size: 15px; }
  .focus-item p { font-size: 9px; }
  .about-layout, .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .about-copy { padding-top: 0; font-size: 14px; }
  .contact-cta > p { font-size: 14px; }
  .contact-location { margin-top: 21px; font-size: 8px; }
  .site-footer { flex-wrap: wrap; min-height: 100px; gap: 11px 20px; padding: 19px 6vw; }
  .site-footer > span { order: 3; width: 100%; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }