:root{--bg:#050505;--fg:#e8e6df;--dim:#6b6a66;--ph:#c8ff4d;--line:#1c1c1a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:300 15px/1.6 "JetBrains Mono",monospace;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff05 2px 3px);z-index:5}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
header,main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.dim{color:var(--dim)}
header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:28px 6vw;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
header a{color:var(--dim);transition:color .3s}header a:hover{color:var(--ph)}
.logo{font-weight:600}
.cursor{font-style:normal;color:var(--ph);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

section{padding:0 6vw}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:56px;max-width:1100px}
h1{font-weight:300;font-size:clamp(32px,6vw,76px);line-height:1.08;letter-spacing:-.03em;min-height:2.2em}
h1::after{content:"▍";color:var(--ph);animation:blink 1s steps(1) infinite}

form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.row{display:flex;border-bottom:1px solid var(--dim);transition:border-color .3s}
.row:focus-within{border-color:var(--ph)}
input,textarea,select,button{font:inherit;color:var(--fg);background:none;border:0;outline:0}
input,textarea,select{padding:12px 0;width:100%}
.contact input,.contact textarea,.contact select{border-bottom:1px solid var(--line);transition:border-color .3s}
.contact input:focus,.contact textarea:focus,.contact select:focus{border-color:var(--ph)}
select option{background:var(--bg)}
textarea{resize:none}
::placeholder{color:var(--dim)}
button{cursor:pointer;color:var(--ph);text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:12px 0 12px 16px;align-self:flex-start;transition:letter-spacing .3s}
button:hover{letter-spacing:.35em}
button:disabled{opacity:.4;cursor:wait}
.contact button{padding-left:0}
.check{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--dim);cursor:pointer}
.check input{width:auto;accent-color:var(--ph)}
.msg{font-size:12px;min-height:1.2em;color:var(--ph)}
.msg.err{color:#ff6b5b}
.hp{position:absolute;left:-9999px}
label.dim{font-size:12px}

.lines{padding-top:20vh;padding-bottom:20vh;display:grid;gap:12vh;max-width:1100px}
.lines article{display:grid;grid-template-columns:60px 1fr;align-items:baseline;row-gap:4px}
.lines span{color:var(--ph);font-size:12px}
.lines h2{font-weight:300;font-size:clamp(28px,4.5vw,56px);letter-spacing:-.02em}
.lines p{grid-column:2;color:var(--dim)}

.contact{min-height:90vh;display:flex;flex-direction:column;justify-content:center;gap:40px}
.contact h2{font-weight:300;font-size:clamp(28px,4.5vw,56px)}

footer{display:flex;justify-content:space-between;padding:28px 6vw;font-size:11px;letter-spacing:.15em;text-transform:uppercase}

.reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1.2s cubic-bezier(.2,.7,0,1),transform 1.2s cubic-bezier(.2,.7,0,1),filter 1.2s}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}}
