@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080e19;--panel:#101927;--text:#f2f5fa;--muted:#a5b2c5;--accent:#5de1ff;--line:#243144;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.6}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}h1,h2{letter-spacing:-.055em;line-height:1.1}h2{font-size:clamp(34px,4vw,50px);font-weight:800}h2 span{color:var(--muted)}h3{line-height:1.35}::selection{background:var(--accent);color:var(--bg)}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}
.skip{position:fixed;top:-100px;left:20px;background:var(--accent);color:var(--bg);padding:10px 20px;z-index:100}.skip:focus{top:10px}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--accent);z-index:50;transform-origin:left;transform:scaleX(0)}
.header{max-width:var(--max);margin:auto;height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:24px;border-bottom:1px solid #ffffff0b}.brand{font-family:Manrope,sans-serif;font-size:29px;font-weight:800;letter-spacing:-2px;white-space:nowrap}.brand span{color:var(--accent)}.brand small{font-size:11px;letter-spacing:2px;margin-left:8px;vertical-align:middle}.header nav{display:flex;gap:34px;font-size:14px;color:var(--muted)}.header nav a{transition:color .2s}.header nav a:hover{color:var(--accent)}.nav-contact{font-size:13px;border:1px solid var(--line);padding:10px 17px;border-radius:8px;transition:border-color .2s}.nav-contact:hover{border-color:var(--accent)}
.hero{max-width:var(--max);margin:auto;padding:76px 28px 78px;display:grid;grid-template-columns:1fr 1.13fr;gap:40px;align-items:center;position:relative}.hero::before{content:'';position:absolute;right:0;top:0;width:58%;height:100%;background:radial-gradient(ellipse,#103b5025,transparent 70%);z-index:-1}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent);margin-bottom:22px;line-height:1.7}.line{display:inline-block;vertical-align:middle;width:20px;height:1px;background:var(--accent);margin-right:8px}h1{font-size:clamp(43px,4.45vw,65px);font-weight:800}h1 span{color:var(--accent)}.lead{color:var(--muted);font-size:16px;line-height:1.8;margin:26px 0 30px;max-width:435px}.actions{display:flex;gap:14px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;padding:14px 20px;border-radius:8px;font-size:13px;font-weight:700;min-height:48px;transition:transform .2s,background .2s,box-shadow .2s}.button:hover{transform:translateY(-3px)}.primary{background:var(--accent);color:#07131d;box-shadow:0 8px 30px #5de1ff14}.primary:hover{background:#95ebff;box-shadow:0 12px 32px #5de1ff25}.subtle{background:#ffffff06;border:1px solid var(--line)}.subtle:hover{background:#ffffff0d}.intro-foot{margin-top:30px;color:#8494aa;font-size:11px;max-width:420px}.studio-wrap{min-width:0;animation:enter 1s .15s both}.intro{animation:enter .9s both}.studio{position:relative;border-radius:22px;isolation:isolate;border:1px solid #ffffff16;box-shadow:0 25px 80px #0006;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;will-change:transform}.studio>img{border-radius:22px;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.studio::after{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:22px;border:1px solid #5de1ff33;box-shadow:inset 0 0 40px #5de1ff08;animation:studio-glow 5s ease-in-out infinite}.hotspot{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;background:#081423c9;border:1px solid #67defb77;border-radius:30px;padding:6px 11px 6px 6px;backdrop-filter:blur(10px);box-shadow:0 4px 14px #0005;transition:transform .2s,background .2s}.hotspot>span{display:grid;place-items:center;background:var(--accent);color:#081423;width:24px;height:24px;border-radius:50%;font-size:20px;line-height:1;position:relative}.hotspot>span::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid #5de1ff55;animation:pulse 2.7s infinite}.hotspot b{font-size:10px;font-weight:600;white-space:nowrap}.hotspot:hover{background:#102a3fe8;transform:translateY(-3px)}.code-spot{top:27%;left:4%}.mobile-spot{bottom:19%;left:17%}.web-spot{top:42%;right:3%}.scene-caption{display:flex;justify-content:space-between;gap:12px;padding:18px 4px 0;font-size:9px;letter-spacing:.8px;color:var(--muted)}.scene-caption i,.status i{width:5px;height:5px;border-radius:50%;background:#73f3c0;display:inline-block;margin-right:7px}
.section{max-width:var(--max);margin:auto;padding:76px 28px;border-top:1px solid #ffffff0c}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-head>p{color:var(--muted);font-size:14px;line-height:1.8;max-width:360px}.section-head .eyebrow{margin-bottom:15px}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project{min-width:0;background:#0e1724;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s,transform .3s}.project:hover{border-color:#496078;transform:translateY(-5px)}.project-preview{display:block;width:100%;padding:0;background:#101823;position:relative;overflow:hidden;text-align:left}.browser-bar{display:flex;align-items:center;gap:10px;color:#d0d7e1;font-size:9px;height:34px;padding:0 12px;background:#172334;border-bottom:1px solid #ffffff0d}.browser-dots{font-size:20px;line-height:1;letter-spacing:2px;color:#74849b}.preview-label{margin-left:auto;letter-spacing:1px;font-size:8px;color:#9eacbd}.project-preview>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.65,.3,1)}.project-preview:hover>img{transform:scale(1.035)}.preview-overlay{position:absolute;bottom:12px;left:50%;transform:translate(-50%,8px);white-space:nowrap;font-size:11px;padding:7px 14px;border-radius:20px;background:#081423e8;border:1px solid #5de1ff44;opacity:0;transition:transform .2s,opacity .2s}.project-preview:hover .preview-overlay,.project-preview:focus-visible .preview-overlay{opacity:1;transform:translate(-50%,0)}.project-copy{padding:22px}.project-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-bottom:13px;font-size:8px;letter-spacing:1px;color:var(--muted)}.status{letter-spacing:0;color:#a1d6c2;font-size:9px}.status.developing{color:#e8c58f}.status.developing i{background:#e8c58f}.project h3{font-size:25px;letter-spacing:-1px;margin-bottom:12px}.project-copy>p{font-size:13px;color:var(--muted);min-height:84px;line-height:1.8}.feature-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 22px}.feature-list li{font-size:9px;color:#c1cedf;border:1px solid var(--line);padding:4px 8px;border-radius:5px}.project-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:17px;font-size:10px}.text-link{padding:0;background:transparent;color:var(--accent);font-size:12px;font-weight:600;display:inline-block;border-bottom:1px solid transparent;transition:border-color .2s}.text-link:hover{border-bottom-color:var(--accent)}.project-actions .text-link{font-size:11px}.project-actions>a{color:#ccd8e6;transition:color .2s}.project-actions>a:hover{color:var(--accent)}.project-actions>span{color:#8d9ab0;font-size:9px}.project-note{margin-top:30px;padding:24px 28px;background:linear-gradient(90deg,#5de1ff0b,#5de1ff02);border:1px solid #5de1ff1d;border-radius:12px;display:flex;align-items:center;gap:22px}.note-mark{color:var(--accent);font-size:28px}.project-note p{font-size:13px;color:var(--muted)}.project-note strong{color:#d6e4ef;font-weight:500}.project-note a{margin-left:auto;white-space:nowrap}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.service{background:#0e1724;border:1px solid var(--line);border-radius:12px;padding:24px;text-align:left;position:relative;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}.service:hover{transform:translateY(-5px);border-color:#5de1ff77}.service-number{font-size:10px;letter-spacing:2px;color:#77889f;position:absolute;top:26px;right:24px}.service-symbol{font-size:30px;color:var(--accent);font-family:monospace;line-height:1.4;margin-bottom:26px}.service h3{font-size:18px;letter-spacing:-.5px;margin-bottom:14px}.service p{color:var(--muted);font-size:13px;line-height:1.8}.service-bottom{font-size:9px;color:#8192a9;display:block;margin-top:24px;margin-bottom:18px}.service-more{font-size:10px;color:var(--accent);margin-top:auto;border-top:1px solid var(--line);padding-top:15px}.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.process li{padding-top:25px;border-top:1px solid var(--line)}.process li>span{font-family:Manrope,sans-serif;font-size:28px;color:var(--accent);font-weight:800}.process h3{font-size:19px;margin:15px 0 10px;letter-spacing:-.5px}.process p{font-size:14px;color:var(--muted);line-height:1.8;max-width:320px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:55px 80px}.about-copy>p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:18px}.about-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:24px}.technical{grid-column:1/-1;padding:32px;border:1px solid var(--line);background:#0c1521;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}.technical .eyebrow{font-size:9px;margin-bottom:12px}.technical h3{font-size:23px;letter-spacing:-.7px;margin-bottom:12px}.technical p{color:var(--muted);font-size:13px;max-width:430px}.stack-bar{display:flex;flex-wrap:wrap;align-content:center;gap:10px}.stack-bar button{background:#172334;border:1px solid #2e3d52;border-radius:7px;padding:10px 16px;font-size:12px;color:#d4dfed;transition:color .2s,border-color .2s}.stack-bar button:hover{color:var(--accent);border-color:var(--accent)}.code-projects{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--muted)}.code-projects summary{cursor:pointer;max-width:max-content;min-height:32px}.repo-links{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:16px 0}.repo-links a{padding:17px;border:1px solid var(--line);border-radius:8px;transition:border-color .2s}.repo-links a:hover{border-color:var(--accent)}.repo-links strong{display:block;color:#e4edf7;font-weight:500;font-size:12px}.repo-links span{font-size:10px;display:block;margin-top:6px}.recruiter{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}.recruiter strong{color:var(--accent);font-weight:500;margin-right:7px}
.contact{text-align:center;padding:90px 28px;background:radial-gradient(ellipse at 50% 50%,#0f273933,transparent 65%)}.contact h2{font-size:clamp(38px,5vw,64px)}.contact h2 em{font-style:normal;color:var(--accent)}.contact-lead{font-size:14px;color:var(--muted);max-width:520px;margin:25px auto 30px}.contact .actions{justify-content:center}.contact-info{display:flex;justify-content:center;gap:25px;margin-top:28px;font-size:12px;color:var(--muted)}.contact-info a:hover{color:var(--accent)}footer{border-top:1px solid #ffffff0c;max-width:var(--max);margin:auto;padding:30px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer>.brand{font-size:24px}footer>span{font-size:10px;color:var(--muted)}footer>div{display:flex;align-items:center;gap:22px;font-size:10px;color:var(--muted)}.motion-toggle{background:transparent;padding:7px 0;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.motion-toggle:hover{color:var(--accent)}
dialog{position:fixed;background:#111d2d;border:1px solid #394b63;color:var(--text);border-radius:18px;padding:42px;width:min(580px,calc(100% - 32px));max-height:85dvh;overflow:auto;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#030a14d9;backdrop-filter:blur(7px)}dialog[open]{animation:dialog-in .25s ease-out}body:has(dialog[open]){overflow:hidden}.close{position:absolute;right:15px;top:13px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff08;font-size:25px;font-weight:400;color:#c7d3e1}.close:hover{background:#ffffff17}.close:focus-visible{outline-offset:2px}dialog h2{font-size:35px;margin-bottom:20px;letter-spacing:-1.5px}#dialog-description{font-size:15px;color:#b6c4d6;line-height:1.8}.dialog-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}.dialog-tags span{font-size:10px;padding:5px 10px;border:1px solid #34485f;border-radius:5px;color:#bbd1e3}#dialog-examples{border-top:1px solid var(--line);margin:22px 0;padding-top:20px}#dialog-examples h3{font-size:14px;margin-bottom:10px}#dialog-examples ul{color:#afbdd0;font-size:13px;padding-left:18px;line-height:1.9}#dialog-examples p{color:#afbdd0;font-size:13px;line-height:1.8}.project-dialog{width:min(1080px,calc(100% - 36px));padding:35px;max-height:90dvh}.case-heading{padding-right:35px;margin-bottom:25px}.case-heading .eyebrow{margin-bottom:10px}.case-heading h2{margin-bottom:12px}.case-heading>p:last-child{font-size:14px;max-width:680px;color:#b6c4d6}.case-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:30px}.gallery{min-width:0}.gallery-controls{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}.gallery-controls button{padding:8px 13px;border:1px solid var(--line);border-radius:7px;font-size:11px;background:#101928;color:var(--muted)}.gallery-controls button[aria-pressed=true]{background:#5de1ff13;color:var(--accent);border-color:#5de1ff88}.gallery-controls a{font-size:10px;color:#b6c4d6;margin-left:auto;text-decoration:underline;text-underline-offset:4px}.gallery-stage{margin:0;background:#08111e;border:1px solid var(--line);border-radius:10px;padding:12px;min-height:300px}.gallery-stage img{width:100%;height:auto;max-height:435px;object-fit:contain;object-position:top;animation:image-in .3s}.gallery-stage.mobile img{max-height:490px;width:auto;max-width:100%;margin:auto;border-radius:8px}.gallery-stage figcaption{font-size:10px;color:var(--muted);line-height:1.7;margin-top:12px}.case-copy .eyebrow{margin-bottom:12px;font-size:9px}.case-copy>ul{padding-left:18px;font-size:13px;color:#b6c4d6;line-height:1.8;margin:0 0 20px}.case-copy>ul li{margin-bottom:8px}.case-copy h3{font-size:15px;margin-bottom:9px}.case-copy>p{font-size:13px;color:#b6c4d6;line-height:1.8}.case-copy .case-note{font-size:11px;border-top:1px solid var(--line);padding-top:15px;margin-bottom:20px;color:#90a2b9}.case-copy .button{font-size:12px}
.reveal{opacity:1;transform:none}.motion-enabled .reveal:not(.is-visible){opacity:0;transform:translateY(22px)}.motion-enabled .reveal{transition:opacity .7s,transform .7s,border-color .3s}.projects .reveal:nth-child(2),.services .reveal:nth-child(2),.process .reveal:nth-child(2){transition-delay:.08s}.projects .reveal:nth-child(3),.services .reveal:nth-child(3),.process .reveal:nth-child(3){transition-delay:.16s}.services .reveal:nth-child(4){transition-delay:.24s}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{transform:scale(.85);opacity:.3}50%{transform:scale(1.2);opacity:1}}@keyframes studio-glow{0%,100%{border-color:#5de1ff22;box-shadow:inset 0 0 40px #5de1ff04}50%{border-color:#5de1ff66;box-shadow:inset 0 0 40px #5de1ff14}}@keyframes dialog-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes image-in{from{opacity:.35}to{opacity:1}}
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html:has(body.reduced-motion){scroll-behavior:auto}body.reduced-motion .reveal{opacity:1!important;transform:none!important}body.reduced-motion .studio{transform:none!important}body.reduced-motion .project:hover,body.reduced-motion .service:hover,body.reduced-motion .button:hover{transform:none}body.reduced-motion .project-preview:hover>img{transform:none}
@media(max-width:1050px){.hero{grid-template-columns:1fr 1fr;gap:25px;padding-top:55px;padding-bottom:55px}h1{font-size:45px}.lead{font-size:14px}.hero .button{padding:12px 15px;font-size:11px}.eyebrow{font-size:9px;letter-spacing:1.5px}.hotspot b{font-size:9px}.scene-caption{font-size:8px}.project-copy{padding:18px}.projects{gap:16px}.project-meta{font-size:7px}.project-copy>p{font-size:12px;min-height:100px}.project-actions{align-items:flex-start;flex-direction:column;gap:9px}.services{grid-template-columns:repeat(2,1fr)}.service h3{font-size:20px}.service-bottom{margin-top:20px}.about{gap:40px}.case-layout{grid-template-columns:1.3fr 1fr}}
@media(max-width:760px){.header{height:83px;padding:0 22px}.header nav{gap:18px;font-size:12px}.nav-contact{display:none}.hero{grid-template-columns:1fr;padding:45px 22px 48px;gap:36px}.intro{max-width:540px}h1{font-size:clamp(41px,7vw,57px)}.lead{max-width:500px;font-size:15px;margin:22px 0 26px}.intro-foot{margin-top:22px}.studio-wrap{max-width:610px;width:100%}.hero .button{font-size:12px;padding:13px 18px}.hotspot b{font-size:10px}.scene-caption{font-size:9px}.section{padding:52px 22px}.section-head{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:28px}.section-head>p{font-size:13px}.projects{grid-template-columns:1fr;gap:25px}.project-preview>img{aspect-ratio:16/9}.project-copy{padding:25px}.project h3{font-size:28px}.project-meta{font-size:9px}.status{font-size:10px}.project-copy>p{min-height:0;max-width:550px;font-size:14px}.feature-list li{font-size:10px}.project-actions{flex-direction:row;align-items:center;font-size:12px}.project-actions .text-link{font-size:12px}.browser-bar{height:36px;font-size:10px}.preview-label{font-size:9px}.project-note{padding:22px;flex-wrap:wrap;gap:15px}.project-note a{margin-left:43px}.services{gap:15px}.service{padding:23px}.service p{font-size:12px}.service h3{font-size:18px}.service-symbol{margin-bottom:20px}.service-more{font-size:9px}.process{grid-template-columns:1fr;gap:25px}.process li{display:grid;grid-template-columns:35px 1fr;gap:0 20px;padding-top:20px}.process li>span{grid-row:span 2;font-size:25px}.process h3{margin:3px 0 9px}.process p{max-width:none}.about{grid-template-columns:1fr;gap:28px}.technical{grid-template-columns:1fr;padding:25px;margin-top:10px;gap:24px}.stack-bar button{font-size:11px;padding:9px 14px}.repo-links{grid-template-columns:1fr}.recruiter{line-height:1.8}.contact{padding:65px 22px}.contact h2{font-size:43px}.contact-info{flex-direction:column;gap:10px}footer{padding:25px 22px;flex-wrap:wrap}footer>span{font-size:9px}footer>div{width:100%;justify-content:space-between}.project-dialog{padding:25px;max-height:92dvh}.case-layout{grid-template-columns:1fr;gap:25px}.gallery-stage{min-height:0}.gallery-stage img{max-height:380px}.gallery-stage.mobile img{max-height:430px}.case-copy .button{width:100%}dialog{padding:32px 25px}dialog h2{font-size:30px}}
@media(max-width:450px){.header nav{gap:13px;font-size:10px}.brand{font-size:25px}.brand small{font-size:9px;letter-spacing:1px;margin-left:6px}.hero .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:40px}.lead{font-size:14px}.actions{gap:10px}.hero .button{font-size:11px;padding:12px 15px}.hotspot{padding:5px 8px 5px 5px;gap:5px}.hotspot>span{width:20px;height:20px;font-size:17px}.hotspot b{font-size:8px}.scene-caption{font-size:7px;letter-spacing:.4px}.services{grid-template-columns:1fr}.service h3{font-size:20px}.service p{font-size:14px}.service-symbol{margin-bottom:20px}.service-more{font-size:11px}.service-bottom{font-size:10px}.project-copy{padding:22px}.project-meta{font-size:8px}.status{font-size:9px}.project-note p{font-size:12px}.project-note a{margin-left:0;width:100%}.note-mark{display:none}.contact h2{font-size:35px}.contact .actions{flex-direction:column;max-width:320px;margin:auto}.case-heading{padding-right:25px}.project-dialog{width:calc(100% - 20px);padding:22px 18px}.gallery-controls a{font-size:9px}.gallery-controls button{font-size:10px;padding:8px 10px}.technical .eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}.studio{transform:none!important}.project:hover,.service:hover,.button:hover{transform:none}.project-preview:hover>img{transform:none}}