@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');
:root{--bg:#070a12;--panel:#0d111c;--line:rgba(255,255,255,.12);--text:#f6f7fb;--muted:#98a2b3;--acid:#b8ff42;--cyan:#55e6ff;--purple:#8b5cf6;--orange:#ff6b35;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;width:100%;max-width:100%;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}
main,section,article,.section-shell,.about-grid>*,.services-grid>*,.work-heading>*,.project>*{min-width:0}
body.loaded .loader{clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 1.05s cubic-bezier(.77,0,.18,1),visibility 0s 1.05s}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.spotlight{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(85,230,255,.07),transparent 68%);pointer-events:none;z-index:0;transform:translate(-50%,-50%)}
a{color:inherit;text-decoration:none}
.loader{position:fixed;z-index:100;inset:0;background:#070a12;display:grid;place-items:center;clip-path:inset(0);transition:clip-path 1.05s cubic-bezier(.77,0,.18,1)}
.loader:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(184,255,66,.09),transparent 30%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,55px 55px,55px 55px;animation:loaderPulse 1.4s ease-in-out infinite}
.loader-mark{font:800 clamp(3rem,8vw,7rem)/1 Syne;position:relative;animation:loaderMark .9s cubic-bezier(.16,1,.3,1) both}
.loader-mark span,.brand-symbol span{color:var(--acid)}
.loader-meta{position:absolute;left:10%;right:10%;bottom:17%;display:flex;justify-content:space-between;font:500 9px DM Mono;color:#747e8b;letter-spacing:.16em}
.loader-line{position:absolute;left:10%;right:10%;bottom:13%;height:2px;background:#202536}
.loader-line i{display:block;height:100%;background:var(--acid);animation:load 1.15s ease both}
@keyframes load{from{width:0}
to{width:100%}
}
@keyframes loaderMark{from{opacity:0;transform:scale(.72) rotate(-7deg);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes loaderPulse{50%{opacity:.55;transform:scale(1.025)}}
.site-header{height:96px;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:14px;width:max-content}
.brand-symbol{font:800 27px/1 Syne;letter-spacing:-.12em}
.brand-copy{font:600 10px/1.1 DM Mono;text-transform:uppercase;letter-spacing:.12em;color:#b6bdca}
.site-header nav{display:flex;gap:34px}
.site-header nav a{font:500 12px DM Mono;text-transform:uppercase;letter-spacing:.08em;color:#c4cad5;position:relative}
.site-header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--acid);transition:.3s}
.site-header nav a:hover:after{right:0}
.header-cta{justify-self:end;border:1px solid var(--line);border-radius:99px;padding:12px 18px;font:500 12px DM Mono;display:flex;align-items:center;gap:10px}
.header-cta i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px var(--acid)}
.section-shell{padding-left:var(--pad);padding-right:var(--pad);position:relative;z-index:1}
main{display:flex;flex-direction:column}.hero{order:0}.marquee{order:1}.about{order:2}.services{order:3}.work{order:4}.process{order:5}.contact{order:6}article[hidden]{display:none!important}
.hero{min-height:calc(100vh - 96px);padding-top:clamp(55px,8vh,100px);padding-bottom:44px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.availability{font:500 11px DM Mono;text-transform:uppercase;letter-spacing:.11em;display:flex;gap:11px;align-items:center;color:#c9d0db}
.availability span{width:8px;height:8px;background:var(--acid);border-radius:50%;box-shadow:0 0 18px var(--acid)}
.hero-title{margin:34px 0 24px;font:800 clamp(3.7rem,7.45vw,8.9rem)/.82 Syne;letter-spacing:-.07em;text-transform:uppercase;max-width:100%}
.hero-title .line{display:flex;align-items:flex-start;gap:15px;overflow:hidden}
.hero-title i{font-style:normal;display:block;transform:translateY(125%) skewY(7deg);filter:blur(7px)}
body.loaded .hero-title i{animation:titleIn 1.05s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.52s}
body.loaded .hero-title .line:nth-child(2) i{animation-delay:.64s}
body.loaded .hero-title .line:nth-child(3) i{animation-delay:.76s}
body.loaded .hero-title .line:nth-child(4) i{animation-delay:.88s}
.hero-title b{font:500 9px DM Mono;letter-spacing:0;color:var(--muted)}
.hero-title .accent{color:var(--acid);padding-left:9vw}
.hero-title .outline{-webkit-text-stroke:1px rgba(255,255,255,.7);color:transparent;padding-left:18vw}
@keyframes titleIn{to{transform:translateY(0) skewY(0);filter:blur(0)}
}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding-left:36vw}
.hero-bottom p{margin:0;max-width:480px;font-size:clamp(16px,1.4vw,21px);line-height:1.55;color:#b0b8c6}
.hero-actions{display:flex;align-items:center;gap:25px}
.primary{padding:17px 22px;background:var(--acid);color:#080b12;font-weight:800;border-radius:3px;display:flex;gap:35px;align-items:center}
.text-link{font-size:13px;border-bottom:1px solid #727887;padding:12px 0}
.scroll-cue{position:absolute;bottom:45px;left:var(--pad);display:flex;gap:10px;align-items:center;writing-mode:vertical-rl;font:500 9px DM Mono;letter-spacing:.2em}
.scroll-cue i{height:54px;width:1px;background:linear-gradient(var(--text),transparent)}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}
.orbit-one{width:46vw;height:46vw;right:-12vw;top:5vh;animation:spin 20s linear infinite}
.orbit-one:before{content:"";position:absolute;width:11px;height:11px;background:var(--cyan);border-radius:50%;top:49%;left:-6px;box-shadow:0 0 25px var(--cyan)}
.orbit-two{width:22vw;height:22vw;right:0;top:27vh;animation:spin 12s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}
}
.marquee{background:var(--acid);color:#090d12;transform:rotate(-1.5deg) scale(1.03);overflow:hidden;padding:16px 0}
.marquee div{width:max-content;display:flex;gap:30px;align-items:center;animation:marquee 22s linear infinite;font:800 17px Syne;letter-spacing:.04em}
.marquee i{font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}
}
.section-label{font:500 11px DM Mono;text-transform:uppercase;letter-spacing:.17em;color:#b7bec9;display:flex;align-items:center;gap:15px}
.section-label span{color:var(--acid)}
.about{padding-top:170px;padding-bottom:180px}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;margin-top:70px}
.about-title p{font:500 11px DM Mono;letter-spacing:.14em;color:var(--cyan)}
.about-title h2,.work-heading h2,.services-title h2{font:700 clamp(2.8rem,5.7vw,6.4rem)/.98 Syne;letter-spacing:-.055em;margin:25px 0}
.about-title em,.work-heading em,.services-title em,.contact h2 em{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.62);font-style:normal}
.about-copy{padding-top:65px}
.about-copy>p{font-size:clamp(16px,1.4vw,20px);color:#aab2c0;line-height:1.7}
.about-copy strong{color:var(--text)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:55px;padding-top:30px;gap:15px}
.facts b{font:700 clamp(1.7rem,3vw,3rem) Syne;display:block}
.facts span{font:10px DM Mono;color:var(--muted);line-height:1.4;display:block;margin-top:8px}
.work{padding-top:120px;padding-bottom:150px;background:linear-gradient(180deg,#090d16,#070a12)}
.work-heading{display:flex;align-items:end;justify-content:space-between;margin:50px 0 80px;gap:50px}
.work-heading h2{margin:0}
.work-heading p{max-width:430px;color:var(--muted);font-size:17px;line-height:1.7}
.project{min-height:680px;border-top:1px solid var(--line);display:grid;grid-template-columns:.37fr .63fr;gap:5vw;padding:55px 0 90px}
.project-info{display:flex;flex-direction:column}
.project-top{display:flex;justify-content:space-between;align-items:center}
.project-index{font:500 11px DM Mono;color:var(--muted)}
.status{font:500 9px DM Mono;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:8px 10px}
.status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px}
.status.live:before{background:var(--acid);box-shadow:0 0 10px var(--acid)}
.status.build:before{background:var(--orange)}
.project h3{font:700 clamp(3rem,5.8vw,6rem)/.92 Syne;letter-spacing:-.055em;margin:65px 0 30px}
.project-info>p{color:#9ea7b5;font-size:16px;line-height:1.7;max-width:460px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 45px}
.tags span{font:500 9px DM Mono;text-transform:uppercase;border:1px solid var(--line);padding:8px 10px}
.project-link{margin-top:auto;width:max-content;font:600 13px DM Mono;border-bottom:1px solid #7b8491;padding:12px 0;display:flex;gap:28px}
.project-link.muted{color:#687181}
.project-stage{min-height:540px;border-radius:3px;position:relative;display:grid;place-items:center;overflow:hidden;perspective:1200px}
.project-qorex .project-stage{background:radial-gradient(circle at 80% 20%,#6b4eff 0,transparent 33%),linear-gradient(145deg,#11132a,#342191)}
.device{width:82%;height:72%;background:#fff;border:7px solid #111520;border-radius:14px;box-shadow:0 45px 80px rgba(0,0,0,.45);transform:rotateY(-8deg) rotateX(3deg);overflow:hidden}
.browser-bar{height:27px;background:#e8eaf0;display:flex;align-items:center;gap:5px;padding:0 9px}
.browser-bar i{width:6px;height:6px;border-radius:50%;background:#aeb4c0}
.browser-bar small{color:#777f8c;font:7px DM Mono;margin:auto}
.qorex-ui{height:calc(100% - 27px);background:#fff;color:#141625;padding:18px}
.q-nav{display:flex;justify-content:space-between;font:8px DM Mono}
.q-nav b{font:800 14px Syne;color:#4d2ad8}
.q-copy{padding-top:10%;width:65%}
.q-copy small{font:6px DM Mono;color:#6c48f2}
.q-copy strong{display:block;font:700 clamp(18px,2.5vw,37px)/1 Syne;margin:9px 0}
.q-copy button{background:#5a36e8;color:#fff;border:0;padding:8px;font-size:7px}
.q-products{display:flex;gap:8px;margin-top:9%}
.q-products i{height:55px;background:#edf0f5;flex:1;border-radius:4px}
.float-note{position:absolute;background:var(--acid);color:#10130d;padding:13px 15px;font:8px DM Mono;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:float 4s ease-in-out infinite}
.float-note b{font-size:12px}
.note-one{top:13%;right:4%}
.note-two{bottom:12%;left:4%;background:#fff}
.note-three{top:18%;right:10%;background:#ffb8dc}
.project-calma .project-stage{background:radial-gradient(circle at 25% 30%,rgba(255,166,212,.9),transparent 28%),linear-gradient(145deg,#493e71,#17132a)}
.phone{height:84%;aspect-ratio:.52;border:8px solid #12131a;border-radius:38px;background:#f7f2fc;padding:11px;box-shadow:0 45px 80px rgba(0,0,0,.5);transform:rotate(-4deg)}
.phone-top{width:35%;height:14px;background:#12131a;border-radius:0 0 12px 12px;margin:-11px auto 5px}
.calma-ui{color:#3d3650;padding:5px}
.calma-head{display:flex;justify-content:space-between;font:700 10px Syne}
.calma-head span span{color:#bd6ea0}
.calma-ui>p{text-align:center;font:600 11px Syne;margin-top:24px}
.breath{width:125px;height:125px;margin:18px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 15%,#e8bedd 16%,#d999c9 52%,#bc6fa5 53%,#eacde3 55%);box-shadow:0 0 35px rgba(190,94,159,.32);animation:breathe 5s ease-in-out infinite}
.breath div{text-align:center}
.breath strong{display:block;font:600 11px Syne}
.breath small{font:500 18px DM Mono}
.calma-controls{display:flex;align-items:center;justify-content:center;gap:15px}
.calma-controls b{width:34px;height:34px;background:#55456d;color:white;border-radius:50%;display:grid;place-items:center;font-size:9px}
.calma-controls i{width:8px;height:8px;border:1px solid #958aa4;border-radius:50%}
.calma-card{background:white;border-radius:10px;margin-top:20px;padding:12px;box-shadow:0 8px 20px rgba(84,62,105,.1)}
.calma-card span{font-size:7px}
.calma-card b{display:block;font:700 12px Syne}
@keyframes breathe{50%{transform:scale(1.1)}
}
@keyframes float{50%{transform:translateY(-12px)}
}
.project-inventory .project-stage{background:radial-gradient(circle at 70% 10%,rgba(85,230,255,.2),transparent 35%),#0b121a}
.dash{width:88%;height:76%;background:#f6f8fb;border-radius:12px;color:#15202b;display:flex;overflow:hidden;box-shadow:0 45px 80px rgba(0,0,0,.4);transform:rotateY(-5deg)}
.dash-side{width:14%;background:#0f1922;color:#fff;padding:20px 15px;display:flex;flex-direction:column;gap:24px}
.dash-side b{font:700 16px Syne}
.dash-side b span{color:var(--cyan)}
.dash-side i{height:7px;border-radius:9px;background:#35424d}
.dash-main{flex:1;padding:25px}
.dash-title{display:flex;justify-content:space-between}
.dash-title small{font:6px DM Mono;color:#84909b}
.dash-title strong{display:block;font:700 22px Syne}
.dash-title button{font:7px DM Mono;color:#fff;background:#147d91;border:0;border-radius:4px;padding:0 10px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.metrics div{background:#fff;border:1px solid #e5e9ee;border-radius:7px;padding:12px}
.metrics small,.chart span{font:7px DM Mono;color:#7c8792}
.metrics b{display:block;font:700 18px Syne;margin:8px 0}
.metrics span{font-size:6px;color:#14815c}
.chart{height:42%;background:#fff;border:1px solid #e5e9ee;border-radius:7px;margin-top:10px;padding:12px;color:#16899f}
.chart svg{width:100%;height:80%}
.services{padding-top:150px;padding-bottom:170px}
.services-grid{display:grid;grid-template-columns:.42fr .58fr;gap:7vw;margin-top:60px}
.services-title h2{position:sticky;top:130px;margin-top:0}
.services-title>p{max-width:460px;color:var(--muted);font-size:16px;line-height:1.7;margin:30px 0 0}
.service-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:40px 1fr 1fr 25px;gap:20px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:.3s}
.service-row:hover{padding-left:14px;color:var(--acid)}
.service-row>span{font:9px DM Mono;color:#77808e}
.service-row h3{font:600 19px Syne;margin:0}
.service-row p{font-size:13px;line-height:1.5;color:#8f99a8}
.service-row i{font-style:normal}
.service-note{margin-top:24px;border:1px solid var(--line);background:linear-gradient(105deg,rgba(184,255,66,.08),rgba(85,230,255,.03));padding:24px;display:grid;grid-template-columns:140px 1fr;gap:24px}.service-note span{font:500 9px DM Mono;color:var(--acid);letter-spacing:.12em;text-transform:uppercase}.service-note p{margin:0;color:#a3adba;font-size:13px;line-height:1.6}
.contact{min-height:90vh;padding-top:140px;padding-bottom:90px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;overflow:hidden}
.contact-kicker{font:500 11px DM Mono;letter-spacing:.2em;color:var(--acid)}
.contact h2{font:700 clamp(3.5rem,9vw,9rem)/.9 Syne;letter-spacing:-.07em;margin:35px 0}
.contact>p{max-width:600px;color:#a0a9b6;font-size:17px;line-height:1.7}
.contact-button{width:min(560px,95%);display:flex;justify-content:space-between;align-items:center;background:var(--acid);color:#090d12;padding:22px 25px;margin-top:45px;font-weight:800}
.contact-button i{font-style:normal;font-size:22px}
.contact-data{display:flex;gap:35px;margin-top:50px;font:500 11px DM Mono;color:#acb4bf}
.contact-orb{position:absolute;width:60vw;height:60vw;border:1px solid rgba(184,255,66,.16);border-radius:50%;animation:spin 30s linear infinite;pointer-events:none}
.contact-orb:before,.contact-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(85,230,255,.1);inset:12%}
.contact-orb:after{inset:28%}
footer{min-height:120px;padding:30px var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto auto;gap:45px;align-items:center;font:10px DM Mono;color:#9099a6}
footer p{margin:0}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.magnetic{transition:transform .25s ease}
@media(max-width:900px){.site-header{grid-template-columns:1fr 1fr;height:78px}
.site-header nav{display:none}
.hero{min-height:calc(100svh - 78px)}
.hero-title{line-height:.87}
.hero-title .accent{padding-left:0}
.hero-title .outline{padding-left:8vw}
.hero-bottom{padding-left:15vw;grid-template-columns:1fr}
.scroll-cue{display:none}
.about-grid,.services-grid{grid-template-columns:1fr}
.about-copy{padding-top:0}
.project{grid-template-columns:1fr;min-height:0}
.project-info{min-height:450px}
.project-stage{min-height:480px}
.work-heading{align-items:start;flex-direction:column}
.services-title h2{position:static}
.service-row{grid-template-columns:30px 1fr 25px}
.service-row p{display:none}
.contact-data{flex-direction:column;gap:12px}
footer{grid-template-columns:auto 1fr;gap:20px}
footer>a:last-child{justify-self:end}
}
@media(max-width:560px){.brand-copy{display:none}
.header-cta{padding:11px 13px}
.hero-title{font-size:14vw}
.hero-title b{display:none}
.hero-bottom{padding-left:0}
.hero-actions{align-items:flex-start;flex-direction:column}
.facts{grid-template-columns:1fr 1fr}
.project{padding-top:35px}
.project h3{margin-top:45px}
.project-info{min-height:410px}
.project-stage{min-height:390px}
.device{width:92%;height:67%}
.phone{height:85%}
.dash{width:95%;height:70%}
.dash-side{display:none}
.dash-main{padding:14px}
.metrics div{padding:8px}
.metrics b{font-size:12px}
.contact{min-height:80vh}
footer{grid-template-columns:1fr}
footer>a:last-child{justify-self:start}
.spotlight{display:none}
}

/* Professional interaction layer */
.site-header .brand,.site-header nav,.site-header .header-cta,.availability,.hero-meta,.hero-bottom,.hero-terminal,.hero-title b{opacity:0}
body.loaded .site-header .brand{animation:dropIn .75s .18s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .site-header nav{animation:dropIn .75s .3s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .site-header .header-cta{animation:dropIn .75s .4s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .availability{animation:softIn .75s .38s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .hero-meta{animation:softIn .75s .5s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .hero-bottom{animation:softIn .85s 1.04s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .hero-terminal{animation:terminalIn .9s 1.18s cubic-bezier(.16,1,.3,1) forwards}
body.loaded .hero-title b{animation:softIn .6s 1.15s ease forwards}
.hero:after{content:"";position:absolute;z-index:-1;top:0;bottom:0;width:28%;left:-32%;background:linear-gradient(90deg,transparent,rgba(85,230,255,.035),transparent);transform:skewX(-12deg)}
body.loaded .hero:after{animation:scanHero 2.2s 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.hero-orbit{opacity:0;filter:blur(8px)}body.loaded .hero-orbit{opacity:1;filter:blur(0);transition:opacity 1.2s 1.05s,filter 1.2s 1.05s}
@keyframes dropIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes softIn{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes terminalIn{from{opacity:0;transform:translateY(30px) rotate(2deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes scanHero{to{left:115%}}
.scroll-progress{position:fixed;z-index:80;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.04)}
.scroll-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--acid),var(--cyan));box-shadow:0 0 14px var(--acid)}
.site-header{position:sticky;top:0;background:rgba(7,10,18,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:height .3s,background .3s}
.site-header.scrolled{height:76px;background:rgba(7,10,18,.9)}
.menu-toggle{display:none;justify-self:end;width:43px;height:43px;border:1px solid var(--line);border-radius:50%;background:transparent;padding:0;position:relative}
.menu-toggle span{position:absolute;width:17px;height:1px;background:#fff;left:12px;transition:.3s}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:24px}.menu-toggle.open span:first-child{top:20px;transform:rotate(45deg)}.menu-toggle.open span:last-child{top:20px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;z-index:9;inset:78px 0 0;background:#090d15;padding:55px var(--pad);display:flex;flex-direction:column;transform:translateY(-110%);opacity:0;transition:.55s cubic-bezier(.77,0,.18,1);pointer-events:none}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}.mobile-menu a{font:700 clamp(2rem,10vw,4rem) Syne;letter-spacing:-.05em;padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.mobile-menu a span{font:10px DM Mono;color:var(--acid);letter-spacing:0}
.hero-meta{position:absolute;right:var(--pad);top:60px;display:flex;gap:24px;font:500 9px DM Mono;color:#687282;letter-spacing:.12em}
.hero-terminal{position:absolute;right:var(--pad);top:112px;width:min(355px,27vw);border:1px solid var(--line);background:rgba(11,16,26,.72);backdrop-filter:blur(12px);box-shadow:0 22px 65px rgba(0,0,0,.22)}
.hero-terminal>div{height:32px;border-bottom:1px solid var(--line);padding:0 11px;display:flex;align-items:center;gap:6px}.hero-terminal i{width:6px;height:6px;border-radius:50%;background:#4a5260}.hero-terminal>div span{margin-left:auto;font:8px DM Mono;color:#697382}.hero-terminal p{margin:0;padding:18px;font:10px DM Mono;color:#aab3bf}.hero-terminal p b{color:var(--acid);margin-right:7px}.caret{color:var(--acid);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.project-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2px 0 28px}.project-facts span{padding:13px 8px;font:8px DM Mono;color:#6f7886;text-transform:uppercase;border-right:1px solid var(--line)}.project-facts span:last-child{border-right:0}.project-facts b{display:block;font:600 15px Syne;color:#e8ebf0;margin-bottom:4px}
.project-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-120%);transition:1s;pointer-events:none}.project:hover .project-stage:after{transform:translateX(120%)}
.device,.phone,.dash{transition:transform .8s cubic-bezier(.16,1,.3,1)}.project:hover .device{transform:rotateY(-2deg) rotateX(1deg) scale(1.025)}.project:hover .phone{transform:rotate(0) scale(1.025)}.project:hover .dash{transform:rotateY(0) scale(1.02)}
.process{padding-top:150px;padding-bottom:160px;background:#0a0e17}.process-head{display:grid;grid-template-columns:1fr .45fr;align-items:end;gap:7vw;margin:60px 0 75px}.process-head h2{font:700 clamp(2.8rem,5.7vw,6.4rem)/.98 Syne;letter-spacing:-.055em;margin:0}.process-head h2 em{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.62);font-style:normal}.process-head p{font-size:16px;line-height:1.7;color:var(--muted)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.process-grid article{min-height:290px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px;display:flex;flex-direction:column;position:relative;transition:.35s}.process-grid article:hover{background:var(--acid);color:#0a0e12;transform:translateY(-7px)}.process-grid article>span{font:10px DM Mono;color:#6f7886}.process-grid article>i{position:absolute;right:24px;top:20px;font-style:normal}.process-grid h3{font:600 25px Syne;margin:auto 0 12px}.process-grid p{font-size:13px;line-height:1.6;color:#8d96a5;margin:0}.process-grid article:hover p,.process-grid article:hover>span{color:#29301f}
.tech-stack{margin-top:65px;display:flex;justify-content:space-between;align-items:center;gap:30px}.tech-stack>span{font:9px DM Mono;color:#727c89;letter-spacing:.14em}.tech-stack>div{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.tech-stack b{font:500 11px DM Mono;border:1px solid var(--line);border-radius:99px;padding:11px 16px;color:#c7cdd6}
.site-header nav a.active{color:var(--text)}.site-header nav a.active:after{right:0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loader{display:none}.reveal{opacity:1;transform:none}}
@media(max-width:900px){.site-header{position:sticky;grid-template-columns:1fr auto auto;gap:12px}.menu-toggle{display:block}.hero-meta{top:32px}.hero-terminal{display:none}.process-head{grid-template-columns:1fr}.process-grid{grid-template-columns:repeat(2,1fr)}.tech-stack{align-items:flex-start;flex-direction:column}.tech-stack>div{justify-content:flex-start}}
@media(max-width:560px){.site-header{grid-template-columns:1fr auto}.header-cta{display:none}.hero-meta{position:relative;right:auto;top:auto;margin-top:17px;justify-content:space-between}.hero-meta span:nth-child(2){display:none}.process-grid{grid-template-columns:1fr}.process-grid article{min-height:220px}.project-info{min-height:490px}.project-facts b{font-size:13px}.project-facts span{font-size:7px}.marquee{padding:12px 0}}
@media(max-width:560px){.service-note{grid-template-columns:1fr;gap:10px}.services-title>p{font-size:15px}.service-row h3{font-size:17px}}

/* Small-screen composition: preserve the large editorial type without clipping. */
@media(max-width:640px){
:root{--pad:clamp(16px,5.5vw,22px)}
.site-header{height:76px;grid-template-columns:1fr auto}
.header-cta{display:none}
.hero{min-height:auto;padding-top:64px;padding-bottom:72px;justify-content:flex-start}
.availability{max-width:100%;gap:9px;white-space:nowrap;font-size:clamp(8px,2.45vw,10px);letter-spacing:.08em}
.availability span{width:7px;height:7px;flex:0 0 auto}
.hero-meta{position:relative;right:auto;top:auto;width:100%;margin-top:18px;justify-content:space-between;gap:12px;font-size:8px}
.hero-meta span:nth-child(2){display:none}
.hero-title{width:100%;max-width:100%;margin:32px 0 36px;font-size:clamp(2.15rem,11.45vw,3.1rem);line-height:.88;letter-spacing:-.065em}
.hero-title .line{width:100%;max-width:100%;gap:0}
.hero-title i{max-width:100%;padding-right:.08em;white-space:nowrap}
.hero-title .line:nth-child(3) i{font-size:.92em}
.hero-title .accent,.hero-title .outline{padding-left:0}
.hero-title .outline{padding-left:5vw}
.hero-bottom{width:100%;padding-left:0;gap:28px}
.hero-bottom p{max-width:none;font-size:16px;line-height:1.6}
.hero-actions{width:100%;gap:18px;align-items:flex-start;flex-direction:column}
.primary{width:100%;justify-content:space-between;gap:16px;padding:16px 18px}
.about{padding-top:105px;padding-bottom:115px}
.about-grid{margin-top:44px;gap:36px}
.about-title h2,.work-heading h2,.services-title h2,.process-head h2{max-width:100%;font-size:clamp(2rem,9.6vw,2.8rem);line-height:1;letter-spacing:-.045em}
.about-copy>p,.work-heading p,.project-info>p,.process-head p,.contact>p{max-width:100%;font-size:16px}
.facts{margin-top:38px;padding-top:24px}
.work{padding-top:95px;padding-bottom:110px}
.work-heading{margin:40px 0 48px;gap:24px}
.project{gap:34px;padding:32px 0 68px;overflow:hidden}
.project-info{min-height:0}
.project-top{gap:10px;align-items:flex-start}
.status{padding:7px 9px;white-space:nowrap;font-size:8px;letter-spacing:.07em}
.project h3{max-width:100%;margin:34px 0 22px;font-size:clamp(2.15rem,10.4vw,2.8rem);line-height:.94;letter-spacing:-.045em}
.project-info>p{line-height:1.65}
.tags{margin:18px 0 28px}
.project-facts{margin-bottom:24px}
.project-stage{min-height:360px}
.services{padding-top:105px;padding-bottom:115px}
.services-grid{margin-top:44px;gap:42px}
.service-row{grid-template-columns:26px minmax(0,1fr) 20px;gap:12px;padding:26px 0}
.service-row h3{min-width:0;font-size:17px;line-height:1.3}
.service-note{grid-template-columns:1fr;gap:10px;padding:20px}
.process{padding-top:105px;padding-bottom:115px}
.process-head{margin:44px 0 48px;gap:24px}
.tech-stack{margin-top:48px}
.contact{min-height:auto;padding-top:112px;padding-bottom:90px}
.contact-kicker{font-size:10px;letter-spacing:.16em}
.contact h2{width:100%;max-width:100%;margin:28px 0;font-size:clamp(2.15rem,10.2vw,3rem);line-height:.95;letter-spacing:-.05em}
.contact>p{line-height:1.65}
.contact-button{width:100%;max-width:560px;margin-top:36px;padding:18px;gap:16px}
.contact-data{width:100%;font-size:10px;overflow-wrap:anywhere}
.contact-orb{width:115vw;height:115vw}
footer{padding-top:34px;padding-bottom:34px;gap:16px}
footer p,footer span,footer a{max-width:100%}
}

@media(max-width:380px){
:root{--pad:16px}
.brand-symbol{font-size:25px}
.availability{font-size:8px;letter-spacing:.06em}
.hero-meta{font-size:7px}
.hero-title{font-size:clamp(2rem,11.2vw,2.65rem)}
.hero-title .outline{padding-left:0}
.project-top{flex-wrap:wrap}
.project h3{font-size:clamp(2rem,10.5vw,2.5rem)}
.project-stage{min-height:330px}
.phone{height:82%}
.contact h2{font-size:clamp(2rem,10.4vw,2.5rem)}
.contact-button{font-size:15px}
}