:root{--blue:#0877ed;--dark:#041b37;--dark2:#062b55;--text:#162033;--muted:#657184;--line:#e4eaf1;--soft:#f5f8fc;--green:#40aa21;--pink:#eb167c}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);line-height:1.55;background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

/* HEADER */
header{height:72px;background:#fff;border-bottom:1px solid #e9edf2;position:sticky;top:0;z-index:1000}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:190px;height:53px;object-fit:contain}
.menu{display:flex;align-items:center;gap:29px;height:100%;font-size:13px;font-weight:600}
.menu a{height:100%;display:flex;align-items:center;position:relative;white-space:nowrap}
.menu a:hover,.menu a.active{color:var(--blue)}
.menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:13px;height:2px;background:var(--blue)}
.menu .cta{height:auto;padding:11px 18px;border-radius:7px;background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(8,119,237,.2)}
.menu .cta:hover{background:#066bd4;color:#fff}
.menu .cta:after{display:none}
.mobile{display:none;border:0;background:none;font-size:27px;color:#172033}

/* BUTTONS / SECTION HEADERS */
.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#149cff}
.section-title{font-size:29px;line-height:1.2;margin:3px 0 24px}
.buttons{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:7px;font-size:13px;font-weight:700;border:0}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#066bd4}
.btn-outline{border:1px solid #dbe8f8;color:#fff;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-outline-dark{border:1px solid #c8d6e6;color:var(--text);background:transparent}
.btn-outline-dark:hover{background:var(--soft)}

/* HERO (HOME) */
.hero{background:linear-gradient(115deg,#03182f 0%,#062b56 100%);color:#fff;overflow:hidden;position:relative}
.hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle,#4f8fd3 1px,transparent 1.4px);background-size:26px 26px}
.hero:after{content:"";position:absolute;right:-8%;top:-30%;width:58%;height:155%;background:rgba(0,120,255,.12);transform:skewX(-25deg)}
.hero-inner{height:410px;display:grid;grid-template-columns:55% 45%;align-items:center;position:relative;z-index:1}
.hero-copy{padding-top:5px}
.hero h1{font-size:43px;line-height:1.08;letter-spacing:-1px;margin:7px 0 13px;font-weight:800}
.hero h1 span{color:#0877ff}
.hero p{font-size:14px;line-height:1.65;color:#d7e5f6;max-width:590px;margin-bottom:22px}
.hero-visual{height:100%;position:relative;display:flex;align-items:center;justify-content:flex-end;padding-left:10px}
.hero-photo{width:100%;height:auto;max-height:390px;object-fit:contain;object-position:center right}

/* PAGE HERO (INNER PAGES) */
.page-hero{background:linear-gradient(115deg,#03182f 0%,#062b56 100%);color:#fff;overflow:hidden;position:relative;padding:56px 0}
.page-hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle,#4f8fd3 1px,transparent 1.4px);background-size:26px 26px}
.page-hero:after{content:"";position:absolute;right:-8%;top:-30%;width:58%;height:155%;background:rgba(0,120,255,.12);transform:skewX(-25deg)}
.page-hero-inner{position:relative;z-index:1}
.page-hero h1{font-size:36px;font-weight:800;margin:7px 0 10px;letter-spacing:-.5px}
.page-hero p{font-size:14px;color:#d7e5f6;max-width:640px}
.breadcrumb{font-size:12px;color:#a9c3de;font-weight:600;margin-top:14px}
.breadcrumb a{color:#7fc0ff}
.breadcrumb a:hover{text-decoration:underline}

/* SERVICES */
section{padding:52px 0}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:21px 13px 17px;text-align:center;box-shadow:0 5px 18px rgba(9,35,70,.035);transition:.2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(9,35,70,.1)}
.service-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;background:#eaf3ff;color:#0872e8;font-size:23px;font-weight:800}
.service-card:nth-child(2) .service-icon{background:#edf9e8;color:#46a721}
.service-card:nth-child(3) .service-icon{background:#ffe8f2;color:#e8197f}
.service-card:nth-child(4) .service-icon{background:#fff0dc;color:#eb8c00}
.service-card:nth-child(5) .service-icon{background:#f0ebff;color:#7345c8}
.service-card:nth-child(6) .service-icon{background:#e5f8fb;color:#0b8797}
.service-card h3{font-size:14px;line-height:1.25;margin-bottom:8px}
.service-card p{font-size:11px;line-height:1.55;color:var(--muted);min-height:54px}
.learn{display:inline-block;color:var(--blue);font-size:11px;font-weight:700;margin-top:10px}
.learn:hover{text-decoration:underline}

/* TECHNOLOGY */
.tech{background:#f3f7fc;padding:20px 0}
.tech-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tech-item{text-align:center;font-size:11px;font-weight:600;color:#344054;min-width:58px}
.tech-logo{height:33px;display:grid;place-items:center;font-size:22px;font-weight:900}
.php{color:#777bb4}.ci{color:#ef5b35}.mysql{color:#00758f}.js{color:#e7bd00}.jq{color:#0769ad}.html{color:#e44d26}.css{color:#1572b6}.aws{color:#ff9900}.shop{color:#78a941}.wp{color:#21759b}.woo{color:#96588a}.open{color:#e76b00}

/* ABOUT (HOME PREVIEW) */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about h2{font-size:29px;line-height:1.2;margin:4px 0 12px}
.about h2 span{color:var(--blue)}
.about p{font-size:13px;color:#5f6b7a;line-height:1.55;margin-bottom:13px}
.checks{display:grid;gap:5px;margin-bottom:17px}
.check{font-size:12px;font-weight:600}
.check:before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#27a52c;color:#fff;font-size:10px;margin-right:7px}
.about-card{min-height:235px;border-radius:12px;background:linear-gradient(145deg,#03172f,#062b56);padding:25px 34px;text-align:center;color:#fff;overflow:hidden;position:relative}
.about-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#4f8fd3 1px,transparent 1.4px);background-size:25px 25px;opacity:.17}
.about-card>*{position:relative;z-index:1}
.about-logo{width:290px;height:80px;object-fit:contain;margin:0 auto 13px}
.about-card p{max-width:390px;color:#dbe7f6;font-size:12px;margin:0 auto 18px}
.play{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:700}
.play-btn{width:39px;height:39px;border-radius:50%;background:#fff;color:#076de7;display:grid;place-items:center}

/* STATS */
.stats{margin-top:25px;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(9,35,70,.06);display:grid;grid-template-columns:repeat(4,1fr);padding:13px 0;background:#fff}
.stat{display:flex;align-items:center;justify-content:center;gap:10px;border-right:1px solid var(--line);min-height:65px}
.stat:last-child{border:0}
.stat-icon{width:43px;height:43px;min-width:43px;flex:0 0 43px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0877ed}
.stat-icon svg{margin:10px; display:block;width:22px;height:22px;fill:none!important;stroke:#fff!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat:nth-child(2) .stat-icon{background:#43ad20}
.stat:nth-child(3) .stat-icon{background:#ed197f}
.stat:nth-child(4) .stat-icon{background:#ff9400}
.stat strong{font-size:22px;display:block;line-height:1}
.stat span{font-size:10px;color:#687487;display:block;margin-top:4px}

/* VALUES / WHY CHOOSE US (ABOUT PAGE) */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.value-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 18px;box-shadow:0 5px 18px rgba(9,35,70,.035)}
.value-card .service-icon{margin:0 0 13px}
.value-card h3{font-size:14px;margin-bottom:8px}
.value-card p{font-size:12px;color:var(--muted);line-height:1.55}

.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mv-card{border:1px solid var(--line);border-radius:12px;padding:26px}
.mv-card h3{font-size:18px;margin-bottom:10px;color:var(--dark2)}
.mv-card p{font-size:13px;color:var(--muted)}

/* SERVICE DETAIL SECTIONS */
.service-detail{border-top:1px solid var(--line);padding:44px 0}
.service-detail:first-of-type{border-top:0}
.service-detail-grid{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start}
.service-detail-head h2{font-size:22px;margin:12px 0 8px}
.service-detail-head p{font-size:12.5px;color:var(--muted)}
.service-detail-body p{font-size:13.5px;color:#4a5668;margin-bottom:14px;line-height:1.7}
.tag-list{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:11px;font-weight:700;padding:6px 11px;border:1px solid var(--line);border-radius:20px;background:var(--soft);color:#2a3a52}

/* PORTFOLIO / PROJECTS */
.projects{background:#f7f9fc}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.project{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.project h3{font-size:19px;margin-bottom:7px}
.project p{font-size:12px;color:var(--muted)}
.case-study{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;margin-bottom:22px;box-shadow:0 5px 18px rgba(9,35,70,.035)}
.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.case-head h3{font-size:20px;color:var(--dark2)}
.case-meta{font-size:11px;font-weight:700;color:var(--blue);background:#eaf3ff;padding:6px 11px;border-radius:20px;white-space:nowrap}
.case-role{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:12px}
.case-study p{font-size:13px;color:#4a5668;line-height:1.7;margin-bottom:14px}

/* CONTACT */
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.contact-info-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;text-align:center;box-shadow:0 5px 18px rgba(9,35,70,.035)}
.contact-info-card .service-icon{margin:0 auto 13px}
.contact-info-card h3{font-size:14px;margin-bottom:8px}
.contact-info-card p,.contact-info-card a{font-size:12.5px;color:var(--muted);display:block}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:0 6px 18px rgba(9,35,70,.06)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;color:var(--dark2)}
.field input,.field textarea{border:1px solid var(--line);border-radius:7px;padding:11px 13px;font-size:13px;font-family:inherit;color:var(--text);background:var(--soft)}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
.field textarea{resize:vertical;min-height:130px}
.field-error{font-size:11.5px;line-height:14px;min-height:14px;color:#b3261e;font-weight:600}
.field.has-error label{color:#b3261e}
.field.has-error input,.field.has-error textarea{border-color:#e2554e;background:#fff6f5}
.honeypot{position:absolute;left:-9999px;top:-9999px}
.alert{display:flex;align-items:flex-start;gap:12px;border-radius:8px;padding:13px 16px;font-size:12.5px;font-weight:600;margin-bottom:18px}
.alert-icon{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;margin-top:1px}
.alert-success{background:#eafaf0;color:#1c7a41;border:1px solid #b8ecc8}
.alert-success .alert-icon{background:#1c7a41}
.alert-error{background:#fdecec;color:#b3261e;border:1px solid #f6c4c1}
.alert-error .alert-icon{background:#b3261e}
.alert-body{flex:1}
.alert ul{margin:6px 0 0 16px;list-style:disc;font-weight:500}
.map-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--line);height:340px}
.map-wrap iframe{width:100%;height:100%;border:0}

/* PROJECTS / CTA / FOOTER */
.cta{background:#031b37;color:#fff;padding:29px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta h2{font-size:24px}
.cta p{font-size:12px;color:#b9cce2}
footer{background:#04152b;color:#fff;border-top:1px solid #163a60;padding-top:30px}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1.35fr 1.05fr 1.25fr;gap:24px;padding-bottom:24px}
.footer-logo{width:175px;height:49px;object-fit:contain;margin-bottom:8px}
.footer p,.footer-grid li,.footer-grid a{font-size:10.5px;color:#adbed2}
.footer-grid h3{font-size:12px;margin-bottom:9px;color:#fff}
.footer-grid ul{display:grid;gap:5px}
.social{display:flex;gap:7px;margin-top:11px}
.social a{width:28px;height:28px;border:1px solid #365574;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.copyright{border-top:1px solid #173755;padding:9px 0;display:flex;justify-content:space-between;color:#8ea2b9;font-size:10px}
.link-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.link-btn:hover{text-decoration:underline}

/* LEGAL MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(4,21,43,.65);z-index:2000;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal-box{position:relative;background:#fff;border-radius:12px;width:100%;max-width:720px;max-height:85vh;overflow-y:auto;padding:34px 32px 30px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.modal-close:hover{background:var(--soft);color:var(--text)}
.modal-content h2{font-size:22px;color:var(--dark2);margin-bottom:4px}
.modal-updated{font-size:11px;color:var(--muted);margin-bottom:18px}
.modal-content h3{font-size:14px;color:var(--dark2);margin:20px 0 8px}
.modal-content p{font-size:13px;color:#4a5668;line-height:1.7;margin-bottom:10px}
.modal-content ul{margin:0 0 12px 18px;list-style:disc}
.modal-content li{font-size:13px;color:#4a5668;line-height:1.7;margin-bottom:4px}
.modal-content a{color:var(--blue);text-decoration:underline}
body.modal-open{overflow:hidden}

/* RESPONSIVE */
@media(max-width:1050px){
 .service-grid{grid-template-columns:repeat(3,1fr)}
 .footer-grid{grid-template-columns:repeat(3,1fr)}
 .value-grid{grid-template-columns:repeat(2,1fr)}
 .contact-info-grid{grid-template-columns:1fr}
 .service-detail-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
 header{height:68px}
 .brand img{width:165px;height:48px}
 .mobile{display:block}
 .menu{display:none;position:absolute;top:68px;left:14px;right:14px;height:auto;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);border:1px solid var(--line);border-radius:8px;padding:7px 15px;flex-direction:column;align-items:stretch;gap:0}
 .menu.open{display:flex}
 .menu a{height:42px}
 .menu a.active:after{bottom:5px}
 .menu .cta{height:auto;justify-content:center;margin:6px 0}
 .hero-inner{height:auto;min-height:530px;grid-template-columns:1fr}
 .hero-copy{padding:48px 0 175px}
 .hero h1{font-size:38px}
 .hero-visual{display:none}
 .about-grid{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
 .stat:nth-child(2){border-right:0}
 .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
 .project-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .cta-inner{gap:15px;flex-direction:column;align-items:flex-start}
 .mv-grid{grid-template-columns:1fr}
 .contact-grid{grid-template-columns:1fr}
 .form-row{grid-template-columns:1fr}
}
@media(max-width:520px){
 .container{width:calc(100% - 28px)}
 .brand img{width:155px;height:45px}
 .hero-copy{padding:40px 0 170px}
 .hero h1{font-size:32px}
 .hero p{font-size:13px}
 .service-grid{grid-template-columns:1fr}
 .tech-row{justify-content:center}
 .about-logo{width:220px}
 .stats{grid-template-columns:1fr}
 .stat{border-right:0!important;border-bottom:1px solid var(--line)!important}
 .stat:last-child{border-bottom:0!important}
 .footer-grid{grid-template-columns:1fr}
 .copyright{flex-direction:column;gap:5px}
 .value-grid{grid-template-columns:1fr}
 .page-hero h1{font-size:28px}
 .g-recaptcha{transform:scale(.87);transform-origin:0 0}
 .modal-box{padding:26px 20px 22px;max-height:90vh}
 .modal-content h2{font-size:19px}
}