:root { --ink:#eae9e2; --muted:#aaa99f; --bg:#0b0c10; --surface:#13151c; --line:rgba(234,233,226,.15); --acid:#c8fa45; --orange:#ff7148; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--sans); font-size:16px; line-height:1.55; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-999px; top:12px; z-index:100; background:var(--acid); color:#111; padding:8px 12px; }.skip-link:focus { left:12px; }
.section-shell { max-width:1360px; margin:0 auto; padding-left:44px; padding-right:44px; }
.topbar { height:80px; max-width:1360px; margin:auto; padding:0 44px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font:500 23px var(--mono); letter-spacing:-2px; }.brand span { color:var(--acid); }.topbar nav { display:flex; gap:29px; margin-left:80px; }.topbar nav a,.topbar-contact { color:var(--muted); font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.06em; transition:color .2s; }.topbar nav a:hover,.topbar-contact:hover { color:var(--acid); }.topbar-contact span { color:var(--acid); font-size:16px; }
.hero { min-height:720px; position:relative; padding-top:106px; display:grid; grid-template-columns:minmax(0,1fr) 325px; gap:64px; overflow:hidden; }.hero-grid { position:absolute; inset:0 -50vw 0 45%; z-index:-1; opacity:.38; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,black 23%); }
.eyebrow { color:var(--acid); font:500 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; margin:0 0 25px; }.status-dot { display:inline-block; height:8px;width:8px;background:var(--acid);border-radius:50%;margin-right:8px;box-shadow:0 0 14px var(--acid); }.full-name { color:var(--ink);font:500 11px var(--mono);letter-spacing:.12em;margin:0 0 14px; }.hero h1 { font-size:clamp(46px,6vw,84px); max-width:790px; letter-spacing:-.075em; line-height:.99; margin:0; font-weight:700; }.hero h1 em,.section-intro h2 em,.section-heading h2 em,.stack-intro h2 em { color:var(--acid); font-style:normal; }.hero-text { max-width:555px;color:#c7c6bf;font-size:17px;line-height:1.7;margin:30px 0 31px; }.hero-actions { display:flex;gap:12px; }.button { display:inline-flex;align-items:center;gap:22px;padding:14px 18px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--acid);color:#10110b; }.button-ghost { border:1px solid var(--line); }.button-ghost:hover { background:var(--surface); }
.hero-card { align-self:center;background:var(--surface);border:1px solid var(--line);padding:18px 22px 23px;transform:rotate(2.5deg);box-shadow:20px 20px 0 rgba(200,250,69,.1); }.card-topline,.project-meta,.job-heading { display:flex;justify-content:space-between;gap:12px;color:var(--muted);font:500 10px var(--mono);letter-spacing:.07em; }.role-mark { width:56px;height:56px;margin:38px 0 29px;display:grid;place-items:center;color:var(--acid);border:1px solid var(--acid);border-radius:50%;font:500 18px var(--mono); }.hero-card h2 { margin:0;font-size:29px;line-height:1.05;letter-spacing:-.06em; }.hero-card p { color:var(--muted);margin:10px 0 20px;font-size:13px; }.card-tags,.pills { display:flex;gap:7px;flex-wrap:wrap; }.card-tags span,.pills span { color:#bdbdb5;border:1px solid rgba(234,233,226,.2);padding:4px 6px;font:500 9px var(--mono);text-transform:uppercase; }.hero-footer { grid-column:1/-1;align-self:end;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:20px 0;font:400 10px var(--mono);letter-spacing:.045em;color:var(--muted); }.hero-footer strong { color:var(--ink);font-weight:400; }.hero-footer a:hover { color:var(--acid); }
.proof { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.proof-item { padding:31px 22px;border-right:1px solid var(--line);display:flex;gap:16px;align-items:center; }.proof-item:first-child { padding-left:0; }.proof-item:last-child { border:0; }.proof-item strong { color:var(--acid);font-size:37px;letter-spacing:-.06em;line-height:1; }.proof-item span,.proof-item a { color:var(--muted);font:400 10px/1.55 var(--mono);text-transform:uppercase; }.proof-link a { color:var(--ink); }.proof-link a span { color:var(--acid);font-size:18px; }
.experience { padding-top:152px;padding-bottom:135px; }.section-intro { display:grid;grid-template-columns:1fr 2fr;gap:30px;max-width:1050px;margin-bottom:76px; }.section-intro h2,.section-heading h2,.stack-intro h2,.about h2 { font-size:clamp(32px,4vw,55px);line-height:1.08;letter-spacing:-.065em;margin:0; }.job { display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid var(--line);padding:30px 0 35px;max-width:1050px;margin-left:auto; }.job:last-child { border-bottom:1px solid var(--line); }.job-identity { display:grid;justify-items:start;align-content:start;gap:20px;min-width:0; }.company-logo { width:208px;max-width:100%;height:112px;border:1px solid rgba(234,233,226,.2);border-radius:12px;background:#f5f8fa;display:flex;align-items:center;justify-content:center;padding:22px; }.company-logo img { display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain; }.company-logo-inatel { background:#102a43; }.job-index { color:var(--orange);font:500 12px var(--mono); }.job-heading { align-items:center; }.job-heading p { margin:0;color:var(--ink); }.job-heading p span,.job-heading time { color:var(--muted); }.job h3 { font-size:26px;letter-spacing:-.045em;margin:18px 0 10px; }.job-summary { margin:0;color:#c1c0ba;max-width:635px; }.job-points { padding:0;margin:23px 0 0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:14px; }.job-points li { position:relative;padding-left:17px; }.job-points li::before { content:"→";color:var(--acid);position:absolute;left:0; }
.work { padding-top:128px;padding-bottom:140px;background:#101116;max-width:none;padding-left:max(44px,calc((100vw - 1272px)/2));padding-right:max(44px,calc((100vw - 1272px)/2)); }.section-heading { display:flex;justify-content:space-between;gap:70px;align-items:end;margin-bottom:65px; }.section-heading>p { max-width:365px;color:var(--muted);margin:0;font-size:14px; }.projects-grid { display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:16px; }.project-card { min-width:0;background:#181a22;border:1px solid var(--line);display:flex;flex-direction:column; }.project-visual { min-height:247px;position:relative;overflow:hidden; }.inatel-visual { background:#3839ce; padding:28px; }.window { height:165px;background:#161749;border:1px solid rgba(255,255,255,.3);padding:17px;position:relative; }.window>span { width:6px;height:6px;border-radius:50%;background:#efefef;display:inline-block;margin-right:4px;opacity:.75; }.chart-bars { display:flex;align-items:end;gap:8px;position:absolute;bottom:20px;left:22px;right:22px;height:89px; }.chart-bars i { display:block;width:16%;background:#c8fa45; }.chart-bars i:nth-child(1){height:25%}.chart-bars i:nth-child(2){height:55%}.chart-bars i:nth-child(3){height:43%}.chart-bars i:nth-child(4){height:78%}.chart-bars i:nth-child(5){height:64%}.chart-line { border-top:2px solid #ff7148;transform:skewY(-12deg);position:absolute;left:22px;right:22px;bottom:73px; }.inventory-chip { position:absolute;right:16px;bottom:13px;background:var(--acid);color:#12120d;padding:9px 12px;font:10px/1.25 var(--mono);transform:rotate(-3deg); }.inventory-chip b { font-size:15px; }.pet-visual { background:#d85234;color:#1b0b08;padding:27px; }.pet-visual>span { font:800 64px/.73 var(--sans);letter-spacing:-.1em;text-transform:lowercase;position:relative;z-index:1; }.paw { color:#ffe0d0;position:absolute;right:28px;bottom:18px;font-size:115px;line-height:1;transform:rotate(-17deg); }.pulse { width:194px;height:194px;border:1px solid rgba(255,224,208,.7);border-radius:50%;position:absolute;right:-29px;bottom:-45px; }.code-visual { background:#1e242a;padding:29px;display:flex;flex-direction:column;gap:12px; }.code-visual .line { height:8px;background:#66737d;display:block;opacity:.65; }.line-1 {width:70%}.line-2 {width:43%}.line-3 {width:81%}.line-4 {width:57%}.code-visual code { color:var(--acid);font:14px var(--mono);margin-top:auto; }.project-content { padding:21px;display:flex;flex-direction:column;flex-grow:1; }.project-content h3 { font-size:27px;letter-spacing:-.055em;margin:22px 0 8px; }.project-content>p { font-size:14px;color:var(--muted);margin:0 0 20px; }.project-links { display:flex;gap:20px;margin-top:auto;padding-top:27px; }.project-links a,.text-link { font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--acid);padding-bottom:3px; }.project-links a span,.text-link span { color:var(--acid);font-size:15px; }
.stack { padding-top:145px;padding-bottom:150px;display:grid;grid-template-columns:1fr 2fr;gap:75px; }.stack-list { border-top:1px solid var(--line); }.stack-row { display:grid;grid-template-columns:45px 1fr 1.4fr;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:24px 0; }.stack-row>span { color:var(--orange);font:10px var(--mono); }.stack-row h3 { font-size:16px;margin:0;letter-spacing:-.025em; }.stack-row p { color:var(--muted);font:12px/1.5 var(--mono);margin:0; }
.about { min-height:550px;padding-top:105px;padding-bottom:105px;background:var(--acid);color:#10110d;max-width:none;padding-left:max(44px,calc((100vw - 1272px)/2));padding-right:max(44px,calc((100vw - 1272px)/2));display:grid;grid-template-columns:1fr 2fr;gap:75px; }.about .eyebrow { color:#10110d; }.about-copy { max-width:700px; }.about-copy h2 { margin-bottom:27px; }.about-copy>p:not(.eyebrow) { max-width:630px;font-size:17px;line-height:1.75;margin:0 0 27px; }.about .text-link { border-color:#10110d; }.about .text-link span { color:#10110d; }
.footer { padding-top:85px;padding-bottom:25px; }.footer>div:first-child>a { display:inline-block;font-size:clamp(29px,4vw,57px);letter-spacing:-.065em;font-weight:700;border-bottom:2px solid var(--acid);padding-bottom:6px; }.footer>div:first-child>a span { color:var(--acid); }.footer-email { color:var(--muted);font:12px var(--mono);margin:13px 0 0; }.footer-email a { border-bottom:1px solid var(--muted); }.footer-bottom { border-top:1px solid var(--line);margin-top:95px;padding-top:20px;display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:.06em; }.footer-bottom a:hover { color:var(--acid); }
a:focus-visible { outline:2px solid var(--acid);outline-offset:5px; }
.about a:focus-visible { outline-color:#10110d; }
.hero-actions,.project-links { flex-wrap:wrap; }
@media(max-width:850px){ .section-shell,.topbar{padding-left:22px;padding-right:22px}.topbar{height:auto;min-height:80px;flex-wrap:wrap;row-gap:4px;padding-top:14px;padding-bottom:8px}.topbar nav{display:flex;order:3;flex-basis:100%;margin-left:0;justify-content:space-between;gap:8px}.topbar nav a{display:inline-flex;align-items:center;min-height:44px;font-size:11px}.topbar-contact{font-size:9px}.hero{padding-top:75px;grid-template-columns:1fr;gap:34px;min-height:auto}.hero-card{width:min(325px,100%);justify-self:end;margin-right:14px}.hero-footer{display:none}.proof{grid-template-columns:1fr 1fr}.proof-item{padding:21px 8px}.proof-item:nth-child(2){border-right:0}.proof-item:nth-child(3){padding-left:0}.proof-item strong{font-size:29px}.experience,.stack{padding-top:90px;padding-bottom:90px}.section-intro,.stack,.about{grid-template-columns:1fr;gap:30px}.section-intro{margin-bottom:45px}.job{grid-template-columns:1fr;gap:17px}.company-logo{width:176px;height:96px;padding:18px}.job-identity{gap:16px}.job-heading{display:block}.job-heading time{display:block;margin-top:5px}.section-heading{display:block}.section-heading>p{margin-top:22px}.work{padding-top:90px;padding-bottom:90px;padding-left:22px;padding-right:22px}.projects-grid{grid-template-columns:1fr}.project-visual{min-height:210px}.stack-row{grid-template-columns:28px 1fr;gap:8px}.stack-row p{grid-column:2}.about{padding:76px 22px;min-height:auto}.footer{padding-top:70px}.footer-bottom{margin-top:70px;gap:14px;flex-wrap:wrap}.footer-bottom a{width:100%;margin-top:8px}.hero h1{font-size:clamp(45px,12vw,68px)} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none} }