*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:#06070b;color:#fff;overflow-x:hidden}a{text-decoration:none}
body:before{content:"";position:fixed;width:600px;height:600px;left:-250px;top:-250px;background:#245cff;opacity:.14;filter:blur(150px);border-radius:50%;pointer-events:none;z-index:-1}
body:after{content:"";position:fixed;width:550px;height:550px;right:-250px;bottom:-250px;background:#9b35ff;opacity:.12;filter:blur(150px);border-radius:50%;pointer-events:none;z-index:-1}
nav{position:absolute;top:0;left:0;width:100%;padding:25px 7%;display:flex;justify-content:space-between;align-items:center;z-index:10}.logo{font-size:21px;font-weight:800;letter-spacing:-1px}.logo span{color:#5e7cff}.nav-links{display:flex;gap:30px}.nav-links a{color:#9ca0ae;font-size:14px;transition:.3s}.nav-links a:hover{color:#fff}
.hero{min-height:100vh;padding:140px 7% 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;position:relative}.eyebrow{color:#6685ff;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}.hero h1{font-size:clamp(45px,6vw,78px);line-height:.98;letter-spacing:-4px;max-width:750px;margin-bottom:28px}.hero h1 span{background:linear-gradient(90deg,#fff,#4f8cff,#b14cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-description{color:#9296a6;font-size:17px;line-height:1.8;max-width:570px;margin-bottom:35px}
.buttons{display:flex;gap:15px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:10px;font-size:13px;font-weight:700;transition:.3s ease}.work-button{color:#fff;border:1px solid #5368ff;background:rgba(67,84,255,.04);box-shadow:0 0 20px rgba(74,87,255,.08)}.work-button:hover{transform:translateY(-3px);background:rgba(67,84,255,.13);box-shadow:0 0 30px rgba(74,87,255,.2)}.whatsapp-button{color:#fff;background:#20c866;gap:10px;box-shadow:0 0 30px rgba(32,200,102,.25)}.whatsapp-button:hover{transform:translateY(-3px);background:#24d970;box-shadow:0 0 45px rgba(32,200,102,.4)}.whatsapp-icon{width:21px;height:21px}
.visual{perspective:1000px}.monitor{position:relative;padding:10px;background:#11131a;border:1px solid #2c3040;border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 80px rgba(77,68,255,.15);transform:rotateY(-5deg) rotateX(2deg)}.screen{min-height:400px;padding:25px;border-radius:11px;background:radial-gradient(circle at 70% 20%,rgba(118,70,255,.3),transparent 30%),radial-gradient(circle at 20% 70%,rgba(36,105,255,.2),transparent 35%),#080a10}.browser-bar{display:flex;gap:7px;margin-bottom:28px}.browser-dot{width:9px;height:9px;border-radius:50%;background:#454958}.dashboard-title{width:75%;height:20px;border-radius:5px;background:linear-gradient(90deg,#5477ff,#a64fff);margin-bottom:13px}.dashboard-line{width:50%;height:9px;background:#292d3b;border-radius:5px;margin-bottom:9px}.dashboard-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:25px}.dashboard-card{height:110px;border-radius:10px;border:1px solid #292d3b;background:linear-gradient(135deg,rgba(75,95,255,.17),rgba(161,70,255,.1))}.monitor-stand{width:100px;height:45px;margin:auto;background:#161820;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}.monitor-base{width:170px;height:8px;margin:auto;border-radius:50%;background:#252834}
.work{padding:100px 7%;background:#090b10;border-top:1px solid #171a23}.section-heading{margin-bottom:45px}.section-heading h2{font-size:clamp(32px,4vw,52px);letter-spacing:-2px;margin-bottom:12px}.section-heading p{color:#777c8b;line-height:1.7}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project{overflow:hidden;border:1px solid #242834;border-radius:16px;background:#101219;transition:.35s ease}.project:hover{transform:translateY(-8px);border-color:#566cff;box-shadow:0 25px 60px rgba(60,70,255,.12)}.project-image{height:190px;position:relative;overflow:hidden;background:radial-gradient(circle at 25% 30%,rgba(77,109,255,.45),transparent 35%),radial-gradient(circle at 75% 70%,rgba(162,67,255,.4),transparent 35%),#141720}.project-image:after{content:"";position:absolute;inset:25px;border-radius:10px;border:1px solid rgba(110,130,255,.25);background:linear-gradient(135deg,rgba(75,90,255,.13),rgba(150,70,255,.12))}.project-content{padding:20px}.project h3{font-size:17px;margin-bottom:7px}.project p{color:#777c8b;font-size:13px}
.grad-text{background:linear-gradient(90deg,#4d83ff,#b04cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about{padding:100px 7%;background:#06070b}
.services{padding:100px 7%;background:#090b10;border-top:1px solid #171a23}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cta{padding:120px 7%;text-align:center}.cta h2{font-size:clamp(35px,5vw,60px);letter-spacing:-3px;margin-bottom:20px}.cta p{max-width:600px;margin:0 auto 32px;color:#888d9c;line-height:1.7}
footer{padding:30px 7%;border-top:1px solid #1b1e27;color:#626674;text-align:center;font-size:13px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:130px}.visual{max-width:700px;width:100%;margin:auto}.projects{grid-template-columns:1fr 1fr}.services-grid{grid-template-columns:1fr}}
@media(max-width:600px){nav{padding:22px 6%}.nav-links{display:none}.hero{padding:120px 6% 70px}.hero h1{font-size:43px;letter-spacing:-2.5px}.hero-description{font-size:15px}.buttons{flex-direction:column}.button{width:100%}.screen{min-height:300px}.projects{grid-template-columns:1fr}.work{padding:75px 6%}.about{padding:75px 6%}.services{padding:75px 6%}.cta{padding:85px 6%}}

/* ===== Work / Portfolio gallery page ===== */
.page-header{padding:160px 7% 60px;text-align:center}
.page-header .eyebrow{justify-content:center;display:flex}
.page-header h1{font-size:clamp(36px,5vw,58px);letter-spacing:-3px;margin-bottom:16px}
.page-header p{color:#9296a6;max-width:560px;margin:0 auto;line-height:1.8}
.back-link{display:inline-block;margin-bottom:18px;color:#6685ff;font-size:13px;font-weight:600}
.back-link:hover{color:#8fa4ff}
.gallery{padding:20px 7% 120px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1100px;margin:0 auto}
.media-card{border:1px solid #242834;border-radius:16px;overflow:hidden;background:#101219}
.media-placeholder{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed #333749;margin:14px;border-radius:12px;background:radial-gradient(circle at 30% 30%,rgba(77,109,255,.12),transparent 40%),radial-gradient(circle at 70% 70%,rgba(162,67,255,.1),transparent 40%)}
.media-icon{width:40px;height:40px;opacity:.5}
.media-label{color:#6d7286;font-size:13px;text-align:center}
.media-card .project-content{padding:0 20px 20px}
.media-card h3{font-size:16px;margin-bottom:5px}
.media-card p{color:#777c8b;font-size:13px}
.view-all-link{display:inline-block;margin-top:22px;color:#6685ff;font-size:14px;font-weight:600}
.view-all-link:hover{color:#8fa4ff}
@media(max-width:700px){.gallery{grid-template-columns:1fr}.page-header{padding:130px 6% 45px}}