:root { --ink: #10130f; --paper: #f4f3ed; --muted: #777b70; --line: rgba(16,19,15,.16); --acid: #d9f44a; --blue: #bdd9ff; --orange: #ff7958; --mono: "DM Mono", monospace; --sans: "Manrope", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.site-header { padding: 24px 0; }
.nav, .footer { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -.06em; }
.logo-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--paper); background: var(--ink); font-size: 13px; letter-spacing: -.1em; }
.logo-dot { color: var(--orange); }
.nav-menu { display: flex; align-items: center; gap: 34px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.nav-menu a:not(.nav-cta) { color: #61655b; transition: color .2s ease; }
.nav-menu a:not(.nav-cta):hover { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--ink); border-radius: 100px; transition: background .2s ease, color .2s ease; }
.nav-cta:hover { color: var(--paper); background: var(--ink); }
.nav-cta span, .text-link span, .button span, .contact-email span { font-size: 16px; line-height: 0; }
.menu-toggle { display: none; }
.hero { display: grid; grid-template-columns: 1.03fr .97fr; min-height: 640px; align-items: center; gap: 50px; padding: 70px 0 95px; }
.eyebrow { margin: 0 0 24px; color: #6c7065; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8abb37; box-shadow: 0 0 0 4px rgba(138,187,55,.12); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 24px; font-size: clamp(3.7rem, 7vw, 6.7rem); line-height: .94; letter-spacing: -.09em; font-weight: 800; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-text { max-width: 440px; color: #5f6359; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 35px; }
.button { display: inline-flex; gap: 25px; align-items: center; padding: 16px 19px; font-size: 12px; font-weight: 700; border-radius: 3px; }
.button-primary { background: var(--ink); color: var(--paper); transition: transform .2s ease, background .2s ease; }
.button-primary:hover { transform: translateY(-3px); background: #252a21; }
.text-link { display: inline-flex; gap: 12px; align-items: center; width: fit-content; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.text-link:hover span { transform: translate(3px, -3px); }
.text-link span { transition: transform .2s ease; }
.hero-art { position: relative; height: 470px; }
.hero-art:before { position: absolute; content: ""; width: 340px; height: 340px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--acid); filter: blur(0); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(16,19,15,.28); border-radius: 50%; transform: translate(-50%,-50%) rotate(-26deg); }
.orbit-one { width: 540px; height: 180px; }
.orbit-two { width: 490px; height: 310px; transform: translate(-50%,-50%) rotate(54deg); }
.art-card { position: absolute; border: 1px solid var(--ink); border-radius: 3px; }
.art-card-back { width: 330px; height: 260px; top: 130px; left: calc(50% - 100px); background: var(--blue); transform: rotate(8deg); }
.art-card-main { z-index: 2; width: 350px; height: 272px; top: 112px; left: calc(50% - 175px); padding: 17px 19px; background: #1b2119; color: #d5dfca; box-shadow: 14px 15px 0 rgba(16,19,15,.12); transform: rotate(-7deg); }
.window-bar { display: flex; align-items: center; gap: 5px; padding-bottom: 15px; color: #737b70; border-bottom: 1px solid rgba(213,223,202,.18); font: 10px var(--mono); }
.window-bar span { width: 6px; height: 6px; border-radius: 50%; background: #61705a; }.window-bar span:nth-child(2) { background: #8b996c; }.window-bar span:nth-child(3) { background: #d9f44a; }.window-bar small { margin-left: 8px; font-size: 9px; }
.code-lines { display: grid; gap: 9px; padding-top: 19px; font: 12px/1 var(--mono); }.code-lines span { white-space: pre; }.code-lines i { display: inline-block; width: 27px; color: #59665a; font-style: normal; font-size: 9px; }.code-lines b { color: var(--orange); font-weight: 400; }.code-lines mark { color: var(--acid); background: transparent; }.code-lines strong { color: var(--acid); font-weight: 400; }.cursor-line { animation: blink 1.1s infinite; }
.art-chip { position: absolute; bottom: 17px; right: 19px; color: var(--ink); background: var(--acid); padding: 7px 9px; font: 9px var(--mono); }
.floating-label { position: absolute; z-index: 3; padding: 7px 9px; border: 1px solid var(--ink); background: var(--paper); font: 9px var(--mono); text-transform: uppercase; }.label-top { top: 80px; right: 12px; }.label-bottom { bottom: 77px; left: 18px; color: var(--paper); border-color: var(--ink); background: var(--ink); transform: rotate(-7deg); }
@keyframes blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: .2; } }
.ticker { overflow: hidden; padding: 17px 0; color: var(--paper); background: var(--ink); white-space: nowrap; }.ticker-track { display: flex; width: max-content; align-items: center; gap: 27px; animation: ticker 28s linear infinite; font: 11px var(--mono); letter-spacing: .08em; }.ticker b { color: var(--acid); font-size: 14px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.section { padding-top: 150px; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 62px; }.section-heading h2, .about h2, .contact h2 { font-size: clamp(3.1rem, 5vw, 5.2rem); }.section-heading .eyebrow { margin-bottom: 19px; }.section-intro { width: 290px; margin-bottom: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.project-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 52px 28px; }.project-card { display: block; }.project-large { grid-row: span 2; }.project-visual { position: relative; display: grid; place-items: center; min-height: 370px; overflow: hidden; border: 1px solid var(--ink); }.project-large .project-visual { min-height: 590px; }.visual-tag { position: absolute; left: 16px; bottom: 15px; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.visual-senda { background: #dfded5; }.senda-window { width: 62%; min-width: 260px; padding: 22px; color: var(--ink); border: 1px solid var(--ink); background: #f5f4ea; box-shadow: 12px 12px 0 var(--orange); transform: rotate(-4deg); }.mini-nav { display: flex; justify-content: space-between; padding-bottom: 42px; font: 11px var(--mono); text-transform: uppercase; }.mini-nav span { color: var(--orange); letter-spacing: 2px; }.senda-title { font-size: 28px; line-height: .95; letter-spacing: -.07em; }.senda-title strong { color: var(--orange); font-weight: 700; }.senda-chart { display: flex; align-items: end; gap: 6px; height: 115px; margin-top: 38px; border-bottom: 1px solid var(--ink); }.senda-chart i { display: block; width: 100%; background: var(--acid); border-top: 2px solid var(--ink); }.senda-chart i:nth-child(1) { height: 36%; }.senda-chart i:nth-child(2) { height: 47%; }.senda-chart i:nth-child(3) { height: 43%; }.senda-chart i:nth-child(4) { height: 65%; }.senda-chart i:nth-child(5) { height: 60%; }.senda-chart i:nth-child(6) { height: 82%; }.senda-chart i:nth-child(7) { height: 100%; background: var(--orange); }.senda-window small { display: block; margin-top: 10px; font: 10px var(--mono); }.visual-lumen { background: var(--blue); }.lumen-circle { width: 185px; height: 185px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--ink); font-size: 85px; font-weight: 800; letter-spacing: -.15em; }.lumen-copy { position: absolute; left: 17px; top: 17px; font-size: 14px; line-height: 1.05; letter-spacing: -.06em; }.lumen-copy em { color: var(--orange); font-style: normal; }.visual-nido { background: var(--orange); }.nido-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 70%; border: 1px solid var(--ink); background: var(--paper); }.nido-grid span { min-height: 60px; padding: 11px; border: 1px solid var(--ink); font: 11px var(--mono); }.nido-grid span:first-child { min-height: 110px; font: 60px var(--sans); font-weight: 800; letter-spacing: -.12em; }.nido-grid span:nth-child(2) { font-size: 17px; }.nido-grid span:last-child { color: var(--orange); text-align: right; font-size: 22px; }.project-info { display: flex; align-items: start; justify-content: space-between; padding: 18px 0 0; }.project-info h3 { margin-bottom: 6px; font-size: 22px; letter-spacing: -.07em; }.project-info p { max-width: 320px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.arrow { font-size: 25px; transition: transform .2s ease; }.project-card:hover .arrow { transform: translate(4px,-4px); }
.about { display: grid; grid-template-columns: 1fr 1.75fr; gap: 70px; align-items: start; padding-top: 190px; }.about-stamp { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid var(--ink); border-radius: 50%; color: var(--orange); font: 11px/1.1 var(--mono); text-align: center; transform: rotate(12deg); }.about-stamp strong { display: block; color: var(--ink); font: 800 27px var(--sans); letter-spacing: -.08em; }.about-content { max-width: 740px; }.about-content p:not(.eyebrow) { max-width: 590px; color: var(--muted); font-size: 15px; line-height: 1.7; }.about-content .text-link { margin-top: 18px; }
.services { padding-top: 180px; }.services-heading { margin-bottom: 30px; }.service-list { border-top: 1px solid var(--line); }.service-item { display: grid; grid-template-columns: 70px 1fr 1fr 30px; gap: 20px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }.service-number { color: var(--orange); font: 11px var(--mono); }.service-item h3 { margin: 0; font-size: 21px; letter-spacing: -.06em; }.service-item p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.service-icon { font-size: 24px; text-align: right; }
.contact { padding-top: 180px; padding-bottom: 130px; }.contact-inner { position: relative; overflow: hidden; padding: 85px 90px 70px; background: var(--acid); }.contact-inner:after { position: absolute; content: ""; width: 410px; height: 410px; right: -120px; top: -190px; border: 1px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 35px rgba(16,19,15,.08), 0 0 0 70px rgba(16,19,15,.05); }.contact h2 { position: relative; z-index: 1; margin-bottom: 24px; }.contact h2 em { color: var(--orange); }.contact-inner > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 380px; color: #4e5a38; font-size: 14px; line-height: 1.6; }.contact-email { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 20px; margin-top: 25px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 500 19px var(--mono); }.contact-meta { position: relative; z-index: 1; display: flex; gap: 28px; margin-top: 80px; color: #626d4b; font: 10px var(--mono); text-transform: uppercase; }
.footer { padding: 25px 0 35px; border-top: 1px solid var(--line); font-size: 11px; }.footer > p { margin: 0; color: var(--muted); font: 10px var(--mono); }.socials { display: flex; gap: 18px; font: 10px var(--mono); text-transform: uppercase; }.socials a { border-bottom: 1px solid var(--line); }.socials a:hover { border-color: var(--ink); }.copyright { opacity: .65; }
@media (max-width: 800px) { .container { width: min(100% - 40px, 600px); }.site-header { padding-top: 20px; }.menu-toggle { display: flex; position: relative; z-index: 5; flex-direction: column; gap: 5px; padding: 9px 0 9px 9px; border: 0; background: none; }.menu-toggle span:not(.sr-only) { width: 24px; height: 1px; background: var(--ink); transition: transform .2s ease; }.nav-menu { display: none; position: absolute; z-index: 4; top: 0; right: 0; left: 0; flex-direction: column; align-items: flex-start; gap: 23px; padding: 87px 20px 27px; background: var(--paper); box-shadow: 0 10px 20px rgba(16,19,15,.08); }.nav-menu.is-open { display: flex; }.hero { display: block; min-height: 0; padding: 75px 0 80px; }.hero-copy { position: relative; z-index: 2; }.hero-art { height: 370px; margin-top: 30px; transform: scale(.82); transform-origin: center top; }.section { padding-top: 100px; }.section-heading { display: block; margin-bottom: 42px; }.section-intro { width: auto; max-width: 360px; margin-top: 25px; }.project-grid { display: block; }.project-card { margin-bottom: 50px; }.project-large .project-visual, .project-visual { min-height: 400px; }.about { display: block; padding-top: 100px; }.about-stamp { margin: 0 0 55px 20px; }.services { padding-top: 100px; }.service-item { grid-template-columns: 40px 1fr 25px; gap: 10px; }.service-item p { grid-column: 2 / 3; }.service-icon { grid-column: 3; grid-row: 1 / span 2; }.contact { padding-top: 100px; padding-bottom: 90px; }.contact-inner { padding: 55px 28px 42px; }.contact-inner:after { width: 270px; height: 270px; right: -150px; top: -80px; }.contact-meta { flex-direction: column; gap: 9px; margin-top: 55px; }.footer { flex-wrap: wrap; gap: 23px 0; }.footer > p:first-of-type { order: 3; width: 100%; }.socials { order: 2; }.copyright { order: 4; width: 100%; } }
@media (max-width: 430px) { h1 { font-size: 3.35rem; }.hero-text { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }.hero-art { margin-right: -35px; margin-left: -35px; transform: scale(.7); height: 310px; }.section-heading h2, .about h2, .contact h2 { font-size: 3rem; }.project-large .project-visual, .project-visual { min-height: 340px; }.senda-window { min-width: 220px; padding: 15px; }.senda-title { font-size: 23px; }.contact-email { font-size: 15px; }.socials { gap: 10px; } }