@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{--ink:#071a31;--blue:#0b5cff;--cyan:#18c6e9;--muted:#617188;--light:#f4f8fc;--line:#dfe7f0;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.6;background:#fff;overflow-x:hidden}
img{max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
.container{width:min(1180px,92%);margin:0 auto}

/* Header */
.topbar{background:#061528;color:#b9c7d8;font-size:12px}
.topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between}
.topbar a{color:#fff}.sep{margin:0 9px;color:#61758d}
.header{height:82px;background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid #e7edf4;box-shadow:0 2px 14px rgba(7,26,49,.05)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font:600 20px "Space Grotesk",sans-serif}
.brand img{width:44px;height:44px;display:block}
.brand b{color:var(--blue)}
.nav{height:100%;display:flex;align-items:center;gap:2px}
.nav>a,.dropdown>button{height:100%;display:flex;align-items:center;padding:0 9px;border:0;background:none;color:#27384e;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.nav>a:hover,.nav>a.active,.dropdown>button:hover{color:var(--blue)}
.dropdown{position:relative;height:100%}
.dropdown>button span{margin-left:4px;font-size:14px}
.dropdown-menu{position:absolute;top:82px;left:0;width:250px;background:#fff;border-top:3px solid var(--blue);box-shadow:0 15px 35px rgba(7,26,49,.14);padding:8px;display:none}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 12px;font-size:12px;font-weight:600}
.dropdown-menu a:hover{background:#f2f6fb;color:var(--blue)}
.menu-toggle{display:none;border:0;background:none;font-size:27px;color:var(--ink);cursor:pointer}

/* Hero */
.hero{height:650px;background:#061a31;position:relative;overflow:hidden}
.hero-slider,.slide{height:100%}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease}
.slide.active{opacity:1;visibility:visible}
.slide:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(24,198,233,.22),transparent 28%),linear-gradient(105deg,#061a31 15%,rgba(6,26,49,.88) 52%,rgba(6,26,49,.38))}
.slide:nth-child(2):before{background:radial-gradient(circle at 80% 45%,rgba(11,92,255,.3),transparent 30%),linear-gradient(105deg,#061a31 15%,rgba(6,26,49,.86) 52%,rgba(6,26,49,.35))}
.slide:nth-child(3):before{background:radial-gradient(circle at 76% 42%,rgba(105,75,255,.28),transparent 30%),linear-gradient(105deg,#061a31 15%,rgba(6,26,49,.86) 52%,rgba(6,26,49,.35))}
.hero-content{height:100%;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;padding-bottom:20px}
.eyebrow,.section-label{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--cyan);margin-bottom:14px}
.hero h1{font:700 clamp(42px,5.5vw,70px)/1.04 "Space Grotesk",sans-serif;letter-spacing:-2px;max-width:850px}
.hero h1 span{color:#6de1f4}
.hero p{max-width:650px;margin:24px 0 30px;color:#c5d2e1;font-size:16px}
.hero-actions{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:5px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;border:0}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(11,92,255,.3)}
.btn.ghost{border:1px solid rgba(255,255,255,.35);color:#fff}.btn.ghost:hover{background:#fff;color:var(--ink)}
.slider-controls{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);width:min(1180px,92%);z-index:5;display:flex;align-items:center;gap:12px}
.slider-controls button{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.15);color:#fff;cursor:pointer}
.dots{display:flex;gap:7px}.dots .dot{width:28px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.3)}.dots .dot.active{background:#fff}

/* Sections */
.section{padding:100px 0}
.light{background:var(--light)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:start}
.two-col h2,.section-heading h2,.infra-heading h2,.career-box h2,.contact h2{font:700 clamp(30px,4vw,48px)/1.12 "Space Grotesk",sans-serif;letter-spacing:-1.2px}
.two-col p{color:var(--muted);font-size:14px;margin-bottom:18px}
.text-link{color:var(--blue);font-size:13px;font-weight:800}
.section-heading{max-width:760px;margin-bottom:45px}
.section-heading>p{color:var(--muted);margin-top:15px;font-size:14px}

/* Services */
.cards{display:grid;gap:18px}
.six{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);padding:30px;min-height:235px;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(7,26,49,.08)}
.icon{font:700 14px "Space Grotesk";color:var(--blue);margin-bottom:30px}
.card h3,.solution h3{font:700 20px/1.25 "Space Grotesk",sans-serif;margin-bottom:12px}
.card p,.solution p{font-size:13px;color:var(--muted)}

/* Solutions */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.solution{position:relative;background:#fff;border:1px solid var(--line);overflow:hidden;padding:0 25px 28px}
.solution-number{position:absolute;right:17px;top:17px;z-index:2;color:#a0adbc;font-size:11px;font-weight:800}
.solution-art{height:185px;margin:0 -25px 24px;overflow:hidden;background:#071a31}
.solution-art.image-art{padding:0}
.solution-art.image-art img{display:block;width:100%;height:100%;object-fit:cover}
.solution a{display:inline-block;margin-top:17px;color:var(--blue);font-size:13px;font-weight:800}

/* Infrastructure */
.dark{background:#061a31;color:#fff}
.infra-visual{width:100%;height:290px;margin:0 0 50px;border:1px solid rgba(255,255,255,.14);overflow:hidden}
.infra-visual img{display:block;width:100%;height:100%;object-fit:cover}
.infra-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;margin-bottom:48px}
.infra-heading p{color:#b8c7d7;font-size:14px}
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid rgba(255,255,255,.15);border-top:1px solid rgba(255,255,255,.15)}
.infra-item{min-height:145px;padding:25px;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.infra-item strong{display:block;font:600 18px "Space Grotesk";margin-bottom:8px}.infra-item span{font-size:12px;color:#adbdce}

/* Why + stats */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.why-grid>div{border-top:2px solid var(--blue);padding-top:18px}.why-grid span{font-size:11px;color:var(--blue);font-weight:800}
.why-grid h3{font:600 18px "Space Grotesk";margin:18px 0 8px}.why-grid p{font-size:12px;color:var(--muted)}
.stats{background:var(--blue);color:#fff;padding:45px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stats strong{display:block;font:700 38px "Space Grotesk"}.stats span{font-size:11px;opacity:.9}

/* Misc sections */
.centered{text-align:center}.centered>p{max-width:650px;margin:0 auto;color:var(--muted);font-size:14px}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery-grid div{height:100px;background:#e6eef7;display:flex;align-items:center;justify-content:center;color:#617188;font-weight:700;font-size:12px}
.partner-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}.partner-row span{padding:11px 23px;border:1px solid var(--line);font-size:12px;font-weight:700}
.client-placeholder{max-width:750px;margin:30px auto 0;padding:32px;border:1px dashed #aab9c8;color:#718095;font-size:12px}
.careers{background:#eef6ff}.career-box{display:flex;align-items:center;justify-content:space-between;gap:40px}.career-box p{max-width:650px;color:var(--muted);margin-top:14px;font-size:14px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact h2{margin-bottom:17px}.contact>div>p{max-width:560px;color:#b9c8d8;font-size:14px}
.contact-info{display:grid;gap:16px;margin-top:10px}.contact-info span{display:block;color:#6e849b;text-transform:uppercase;font-size:9px;letter-spacing:1.5px}.contact-info a,.contact-info strong{color:#fff;font-size:13px}
.social-links{display:flex;gap:9px;margin:28px 0 22px}.social-links a{width:37px;height:37px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}.social-links a:hover{background:var(--blue);border-color:var(--blue)}
.contact-form{background:#fff;color:var(--ink);padding:30px}
.contact-form label{display:block;font-size:11px;font-weight:800;margin-bottom:15px}.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #d8e1eb;padding:11px;margin-top:6px;outline:none;font-size:13px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue)}
.form-note{font-size:10px;color:#748397;margin-top:10px}

/* Footer */
.footer{background:#03101f;color:#90a2b7}.footer-top{padding:38px 0;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-brand{color:#fff}.footer-top p{font-size:11px;max-width:500px}.footer-bottom{display:flex;justify-content:space-between;padding:18px 0;font-size:10px}

/* Responsive */
@media(max-width:1100px){
 .nav{display:none}.menu-toggle{display:block}
 .nav.open{position:absolute;top:82px;left:0;right:0;height:auto;display:block;background:#fff;padding:10px 4%;box-shadow:0 15px 30px rgba(7,26,49,.12)}
 .nav.open>a,.nav.open .dropdown>button{width:100%;height:auto;padding:12px;text-align:left;display:flex}
 .dropdown{height:auto}.dropdown-menu{position:static;width:100%;display:block;box-shadow:none;border:0;padding:0 12px}
 .dropdown-menu a{padding:7px 12px}
}
@media(max-width:850px){
 .two-col,.infra-heading,.contact-grid{grid-template-columns:1fr;gap:35px}
 .six,.solution-grid{grid-template-columns:repeat(2,1fr)}
 .infra-grid{grid-template-columns:repeat(2,1fr)}
 .why-grid{grid-template-columns:repeat(2,1fr)}
 .career-box{display:block}.career-box .btn{margin-top:25px}
}
@media(max-width:600px){
 .topbar-inner>span{display:none}.topbar-inner{justify-content:flex-end}
 .hero{height:590px}.hero h1{font-size:42px;letter-spacing:-1.5px}.hero p{font-size:14px}
 .hero-actions{flex-direction:column}.hero-actions .btn{width:max-content}
 .section{padding:72px 0}.six,.solution-grid,.infra-grid,.why-grid,.stats-grid{grid-template-columns:1fr}
 .solution-art{height:175px}.infra-visual{height:205px}
 .gallery-grid{grid-template-columns:1fr}.footer-top,.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
}

/* Real visual imagery */
.slide.hero-ai:before{background:linear-gradient(105deg,rgba(4,20,38,.82) 10%,rgba(4,20,38,.42) 55%,rgba(4,20,38,.15)),url("ai-solutions.jpg") center/cover no-repeat}
.slide.hero-infra:before{background:linear-gradient(105deg,rgba(4,20,38,.88) 10%,rgba(4,20,38,.48) 58%,rgba(4,20,38,.18)),url("infrastructure.jpg") center/cover no-repeat}
.slide.hero-digital:before{background:linear-gradient(105deg,rgba(4,20,38,.88) 10%,rgba(4,20,38,.45) 58%,rgba(4,20,38,.18)),url("digital-transformation.jpg") center/cover no-repeat}
.solution-art.image-art{height:210px}
.solution-art.image-art img{object-position:center}
.infra-visual{height:320px}
@media(max-width:600px){.solution-art.image-art{height:185px}.infra-visual{height:220px}}

.form-status{min-height:20px;margin-top:10px;font-size:12px;font-weight:600}
.form-status.success{color:#138a54}
.form-status.error{color:#c23b3b}
.contact-form button:disabled{opacity:.65;cursor:not-allowed}
.contact-form code{font-size:10px}
