@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#02070d;--panel:#07121d;--line:#153044;--cyan:#00d9ff;--blue:#168bff;--text:#eaf7ff;--muted:#8ca4b7}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,12,22,.97) 0,rgba(0,12,22,.88) 14%,rgba(2,7,13,.35) 55%,rgba(2,7,13,.8) 100%),url('/hero-bg.png') center/cover no-repeat;z-index:-4;filter:saturate(1.05)}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 65% 40%,rgba(0,200,255,.1),transparent 35%),linear-gradient(180deg,transparent 60%,#02070d 100%);z-index:-3;pointer-events:none}
.noise{position:fixed;inset:0;opacity:.035;z-index:20;pointer-events:none;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='.5'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}.topbar{height:76px;position:fixed;top:0;left:230px;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid rgba(38,91,120,.35);background:rgba(2,7,13,.72);backdrop-filter:blur(18px);z-index:10}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em}.brand-mark{color:var(--cyan);font-size:22px;font-weight:900}.topbar nav{display:flex;gap:30px}.topbar nav a{font-size:13px;color:#c4d3df;transition:.2s}.topbar nav a:hover,.topbar nav .active{color:var(--cyan)}
.status{display:flex;align-items:center;gap:10px;color:#67f08a;font-size:12px;font-weight:700;letter-spacing:.08em}.status i{position:relative;width:9px;height:9px;border-radius:50%;background:#20ef5c;box-shadow:0 0 9px #20ef5c;animation:onlineCore 1.2s ease-in-out infinite}.status i:before,.status i:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(32,239,92,.35);animation:onlineOrbit 2s ease-out infinite}.status i:after{animation-delay:1s}.status span{position:relative;animation:onlineGlow 2.2s ease-in-out infinite}.status small{color:#7590a3;margin-left:5px}@keyframes onlineCore{0%,100%{transform:scale(.85);opacity:.85}50%{transform:scale(1.18);opacity:1}}@keyframes onlineOrbit{0%{transform:scale(.55);opacity:.75}75%,100%{transform:scale(2);opacity:0}}@keyframes onlineGlow{0%,100%{opacity:.82;text-shadow:0 0 0 rgba(32,239,92,0)}50%{opacity:1;text-shadow:0 0 12px rgba(32,239,92,.55)}}
.side-panel{position:fixed;left:0;top:0;bottom:0;width:230px;background:rgba(1,8,15,.92);border-right:1px solid var(--line);padding:100px 20px 26px;z-index:11;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#1b465d transparent}.side-title{font-size:18px;letter-spacing:.22em;color:#66e8ff;margin-bottom:25px;font-weight:800;text-shadow:0 0 18px rgba(0,217,255,.22);position:relative}
.side-title:after{content:"";display:block;width:42px;height:2px;margin-top:9px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 10px rgba(0,217,255,.45)}.side-nav{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}.side-nav a{display:flex;align-items:center;gap:13px;padding:11px 7px;color:#a8bfce;font-size:15px;line-height:1.25;border-radius:8px;transition:.2s}.side-nav a:hover{background:rgba(0,210,255,.07);color:var(--cyan);transform:translateX(3px)}.side-brand{position:static;left:auto;right:auto;bottom:auto;margin-top:16px;padding:18px 0 0;border-top:1px solid #183142;flex:0 0 auto}
.side-quote{color:#d5e5ee;font-size:15px;line-height:1.65;font-weight:500}
.side-slogans{display:flex;flex-direction:column;gap:7px;margin-top:15px;padding-left:2px}
.side-slogans span{font-family:"Space Grotesk",sans-serif;font-size:10px;line-height:1.35;letter-spacing:.06em;color:#7f9aab;font-weight:600;transition:color .25s ease,text-shadow .25s ease,transform .25s ease}
.side-slogans span:first-child{color:#b8d7e5}
.side-slogans span:hover{color:var(--cyan);text-shadow:0 0 14px rgba(0,217,255,.2);transform:translateX(3px)}
.signature{margin-top:19px}
.signature-name{font-family:"Brush Script MT","Segoe Script",cursive;font-size:31px;font-style:italic;color:#dcebf3;transform:rotate(-5deg);display:inline-block}
.signature-line{width:92px;height:1px;background:linear-gradient(90deg,#00d9ff,transparent);margin-top:2px}
main{margin-left:230px}.hero{min-height:790px;padding:145px 4.5vw 70px;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.34em;color:#a7c6d8;margin-bottom:18px}.hero h1{font-family:"Space Grotesk";font-size:clamp(52px,5.4vw,84px);line-height:.98;margin:0 0 22px;letter-spacing:-.055em}.hero h1 span{display:block}.hero h1 strong{display:block;color:var(--cyan);text-shadow:0 0 28px rgba(0,217,255,.25)}.hero h2{font-size:27px;margin:0 0 13px}.hero p{max-width:680px;color:#9eb3c2;line-height:1.75;font-size:14px}.actions{display:flex;gap:14px;margin:28px 0}.btn{display:inline-flex;align-items:center;gap:15px;padding:13px 20px;border:1px solid #1d7196;border-radius:8px;font-size:13px}.btn.primary{background:linear-gradient(90deg,#00bde9,#168bff);color:#00131b;border:0;font-weight:800}.btn.ghost{color:#d8eff9}.stats{display:flex;gap:36px;margin-top:38px}.stats b{font-family:"Space Grotesk";font-size:28px;display:block;color:#fff}.stats span{font-size:10px;color:#7892a4}.code-stage{perspective:1200px;min-height:480px;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
.code-screen{width:min(680px,100%);background:rgba(1,9,16,.9);border:1px solid #1c6b8c;border-radius:16px;box-shadow:0 35px 90px rgba(0,0,0,.65),0 0 55px rgba(0,200,255,.13),inset 0 0 40px rgba(0,180,255,.035);overflow:hidden;transform:rotateY(-7deg) rotateX(3deg) translateZ(0);transform-style:preserve-3d;will-change:transform;position:relative}
.code-head{height:42px;border-bottom:1px solid #17374a;display:flex;align-items:center;gap:7px;padding:0 15px;color:#527386;font-size:11px}.code-head span:nth-child(1){color:#ff5f57}.code-head span:nth-child(2){color:#febc2e}.code-head span:nth-child(3){color:#28c840}.code-head label{margin-left:10px;color:#b4cedd}.code-head em{margin-left:auto;color:#3cf078;font-style:normal;display:flex;align-items:center;gap:6px}.code-head em i{width:7px;height:7px;background:#28ef72;border-radius:50%;box-shadow:0 0 12px #28ef72}.code-screen pre{margin:0;padding:30px;font:15px/1.9 "SFMono-Regular",Consolas,monospace;color:#d8e7ef;min-height:360px}.kw{color:#c586ff}.fn{color:#4dd8ff}.str{color:#9be36c}.comment{color:#567c8c}
.section{padding:95px 5vw;border-top:1px solid rgba(26,62,80,.7);background:linear-gradient(180deg,rgba(2,9,15,.68),rgba(2,8,13,.92))}.section-label{font-size:10px;letter-spacing:.3em;color:var(--cyan);margin-bottom:20px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.section h3{font:600 38px/1.05 "Space Grotesk";margin:0}.about-grid p,.section-head p{color:#8da5b5;line-height:1.8;font-size:14px}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:30px}.section-head p{max-width:430px;margin:0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service{padding:23px;background:rgba(6,18,29,.78);border:1px solid #173348;border-radius:10px;min-height:150px;transition:.25s}.service:hover{border-color:#1ebfe7;transform:translateY(-4px);box-shadow:0 10px 35px rgba(0,180,255,.08)}.service .icon{font-size:22px;color:var(--cyan);margin-bottom:18px}.service h4{margin:0 0 10px;font-size:18px;line-height:1.25}.service p{margin:0;color:#7892a4;font-size:13px;line-height:1.65}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.project{min-height:210px;border:1px solid #173348;border-radius:10px;padding:20px;background:linear-gradient(145deg,rgba(8,24,38,.95),rgba(2,9,15,.95));display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}.project:before{content:"</>";position:absolute;right:16px;top:12px;color:#164762;font:700 34px monospace}.project h4{margin:0 0 7px;font-size:15px}.project p{margin:0;color:#7791a2;font-size:11px;line-height:1.6}.tag{display:inline-block;margin-top:13px;color:var(--cyan);font-size:9px;border:1px solid #17637f;padding:5px 8px;border-radius:20px;width:max-content}.contact{padding-bottom:70px}.contact-card{border:1px solid #194b65;border-radius:14px;padding:42px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,rgba(0,180,255,.06),rgba(3,11,18,.8))}.contact-card h3{font-size:44px}.contact-card p{color:#819bad}.contact-actions{display:flex;flex-direction:column;gap:14px;align-items:end}.whatsapp-copy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.whatsapp-copy strong{font-size:16px;color:#e7fbff}.whatsapp-copy span{font-size:15px;font-weight:700;color:#d8f8e4;max-width:310px;line-height:1.5}.whatsapp-copy small{font-size:12px;color:#7892a4}.contact-btn{padding:15px 24px;border-radius:8px;font-weight:700;font-size:13px}.whatsapp{background:#18d467;color:#001b0b}.socials{display:flex;gap:9px}.socials a{width:46px;height:46px;border:1px solid #1a465e;border-radius:7px;display:grid;place-items:center;color:#9fb6c4;font-size:11px;transition:transform .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}.socials a svg{width:27px;height:27px;display:block;fill:currentColor}.socials a:nth-child(1){color:#E1306C;border-color:rgba(225,48,108,.45)}.socials a:nth-child(2){color:#FF0000;border-color:rgba(255,0,0,.45)}.socials a:nth-child(3){color:#25F4EE;border-color:rgba(37,244,238,.45)}.socials a:nth-child(4){color:#f5f5f5;border-color:rgba(245,245,245,.35)}.socials a:nth-child(5){color:#0A66C2;border-color:rgba(10,102,194,.45)}.socials a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px) scale(1.06);box-shadow:0 0 16px rgba(0,217,255,.18)}footer{margin-left:230px;padding:24px 5vw;border-top:1px solid #102938;color:#718b9b;font-size:11px;display:flex;gap:10px;align-items:center}footer span{color:var(--cyan);font-weight:900}footer a{margin-left:auto;color:#486678}
@media(max-width:1050px){.side-panel{width:190px}.topbar{left:190px}.topbar nav{gap:15px}.topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}main,footer{margin-left:190px}.service-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.code-screen{max-width:800px}}
@media(max-width:700px){.side-panel{display:none}.topbar{left:0;height:65px;padding:0 20px}.topbar nav{display:none}.status small{display:none}main,footer{margin-left:0}.hero{padding:115px 22px 55px}.hero h1{font-size:48px}.stats{gap:18px;flex-wrap:wrap}.section{padding:70px 22px}.about-grid,.contact-card{grid-template-columns:1fr;display:grid;gap:28px}.service-grid,.project-grid{grid-template-columns:1fr}.service h4{font-size:19px}.service p{font-size:14px}.side-title{font-size:18px}.contact-card h3{font-size:34px}.contact-actions{align-items:start}}

.code-reflection{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.035) 40%,transparent 55%);transform:translateZ(25px);opacity:.8}
.caret{display:inline-block;width:8px;height:18px;background:#00d9ff;box-shadow:0 0 10px #00d9ff;vertical-align:-3px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.code-screen{transition:box-shadow .25s ease}