:root{
  --primary:#70a9df;
  --primary-dark:#477fac;
  --navy:#101d2d;
  --ink:#172333;
  --muted:#6b7785;
  --surface:#f6f8fb;
  --line:#e6ebf1;
  --white:#fff;
  --shadow:0 18px 50px rgba(16,29,45,.10);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.65}
h1,h2,h3,h4,h5,h6{font-family:"Manrope",sans-serif;letter-spacing:-.025em}
a{text-decoration:none;color:inherit}
.topbar{background:var(--navy);color:#dce6ef;font-size:.82rem;padding:.48rem 0}
.topbar a:hover{color:#fff}
.site-nav{background:rgba(255,255,255,.95);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(16,29,45,.06)}
.navbar-brand{display:flex;align-items:center;height:72px}.navbar-brand img{width:205px;height:58px;object-fit:contain;display:block}
.nav-link{font-weight:600;color:#43505f;padding:.8rem .85rem!important}
.nav-link:hover,.nav-link.active{color:var(--primary-dark)}
.btn-primary{--bs-btn-bg:var(--primary-dark);--bs-btn-border-color:var(--primary-dark);--bs-btn-hover-bg:#376d98;--bs-btn-hover-border-color:#376d98;border-radius:10px;font-weight:700}
.btn-outline-primary{--bs-btn-color:var(--primary-dark);--bs-btn-border-color:var(--primary-dark);--bs-btn-hover-bg:var(--primary-dark);--bs-btn-hover-border-color:var(--primary-dark);border-radius:10px;font-weight:700}
.hero{min-height:calc(100vh - 112px);position:relative;overflow:hidden;display:flex;align-items:center;background:#0d1725}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease,transform 7s ease}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,16,27,.86) 0%,rgba(7,16,27,.62) 45%,rgba(7,16,27,.15) 100%)}
.hero-content{position:relative;z-index:2;color:#fff;max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--primary);margin-bottom:1rem}
.eyebrow:before{content:"";width:30px;height:2px;background:currentColor}
.hero h1{font-size:clamp(2.8rem,6vw,5.8rem);line-height:1.02;font-weight:800;margin-bottom:1.25rem}
.hero p{font-size:1.1rem;color:#e1e9f1;max-width:650px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero .btn-light{border-radius:10px;font-weight:800}
.hero-dots{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.hero-dot{width:32px;height:4px;border:0;background:rgba(255,255,255,.35);border-radius:50px}
.hero-dot.active{background:#fff}
.section{padding:100px 0}
.section-sm{padding:70px 0}
.section-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--primary-dark);font-weight:800}
.section-title{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;line-height:1.08}
.section-lead{color:var(--muted);max-width:720px}
.soft{background:var(--surface)}
.about-image,.service-visual,.contact-card,.process-card,.stat-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.about-image img,.service-visual img{width:100%;height:100%;object-fit:cover}
.about-image{min-height:560px}
.about-copy{padding:1rem 0 1rem 2rem}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat-card{background:#fff;border:1px solid var(--line);padding:1.5rem}
.stat-card strong{display:block;font-family:"Manrope";font-size:2.3rem}
.stat-card span{color:var(--muted);font-size:.9rem}
.service-card{height:100%;border:1px solid var(--line);border-radius:20px;padding:2rem;background:#fff;transition:.35s ease;position:relative;overflow:hidden}
.service-card:before{content:"";position:absolute;inset:auto -30px -50px auto;width:150px;height:150px;background:rgba(112,169,223,.12);border-radius:50%}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(112,169,223,.5)}
.service-icon{width:56px;height:56px;display:grid;place-items:center;background:#edf6fd;color:var(--primary-dark);border-radius:16px;font-size:1.5rem;margin-bottom:1.2rem}
.service-card h4{font-size:1.2rem;font-weight:800}
.service-card p{color:var(--muted);font-size:.93rem}
.service-card .learn{font-weight:800;color:var(--primary-dark)}
.project-card{position:relative;border-radius:20px;overflow:hidden;min-height:410px;background:#111;box-shadow:var(--shadow)}
.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.65s ease}
.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,15,24,.9) 100%)}
.project-card:hover img{transform:scale(1.07)}
.project-content{position:absolute;z-index:2;left:1.5rem;right:1.5rem;bottom:1.4rem;color:#fff}
.project-content .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#cbe5fb;font-weight:800}
.project-content h4{margin:.3rem 0 0;font-size:1.3rem}
.process-card{height:100%;padding:1.7rem;background:#fff;border:1px solid var(--line)}
.step-number{font-family:"Manrope";font-size:2rem;color:var(--primary-dark);font-weight:800}
.cta{background:var(--navy);color:#fff;border-radius:28px;padding:60px}
.cta p{color:#b9c6d3}
.page-hero{padding:100px 0;background:linear-gradient(135deg,#edf6fd,#fff)}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800}
.breadcrumb{font-size:.85rem;color:var(--muted)}
.service-detail img{border-radius:24px;box-shadow:var(--shadow)}
.check-list{list-style:none;padding:0;margin:1.5rem 0}
.check-list li{display:flex;gap:.7rem;margin:.75rem 0;color:#495665}
.check-list i{color:var(--primary-dark)}
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-btn{border:1px solid var(--line);background:#fff;color:#52606e;padding:.55rem .9rem;border-radius:50px;font-weight:700}
.filter-btn.active,.filter-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.contact-card{background:#fff;border:1px solid var(--line);padding:2rem}
.contact-info{display:flex;gap:1rem;margin-bottom:1.5rem}
.contact-info .icon{width:46px;height:46px;min-width:46px;border-radius:13px;background:#edf6fd;color:var(--primary-dark);display:grid;place-items:center}
.form-control,.form-select{border:1px solid #dce3eb;border-radius:12px;padding:.85rem 1rem}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(112,169,223,.15)}
.site-footer{background:#0b1623;color:#b6c2cf;padding:75px 0 25px}
.footer-logo{width:210px;height:62px;object-fit:contain;background:#fff;border-radius:10px;padding:7px}
.site-footer h6{color:#fff;margin-bottom:1rem}
.site-footer a{display:block;margin:.55rem 0;color:#b6c2cf}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
.whatsapp-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#1fbe67;color:#fff;display:grid;place-items:center;font-size:1.5rem;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.page-loader{position:fixed;inset:0;background:#fff;z-index:9999;display:grid;place-items:center;transition:opacity .5s,visibility .5s;pointer-events:auto}.page-loader[style*="visibility: hidden"]{pointer-events:none}
.loader-mark{width:54px;height:54px;border:4px solid #e7edf4;border-top-color:var(--primary-dark);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.admin-shell{background:#f4f7fa;min-height:100vh}
.admin-sidebar{background:#0b1623;color:#fff;min-height:100vh}
.admin-sidebar a{color:#b7c3cf;padding:.7rem .9rem;border-radius:10px;display:block}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.08);color:#fff}
.admin-main{padding:2rem}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.4rem}
.table img{width:80px;height:55px;object-fit:cover;border-radius:8px}
.login-wrap{min-height:100vh;background:linear-gradient(135deg,#edf6fd,#0b1623);display:grid;place-items:center}
.login-card{width:min(440px,92vw);background:#fff;border-radius:24px;padding:2rem;box-shadow:0 30px 80px rgba(0,0,0,.18)}
@media(max-width:991.98px){
  .navbar-brand img{width:175px;height:52px}
  .about-copy{padding:2rem 0 0}
  .about-image{min-height:420px}
  .section{padding:75px 0}
}
@media(max-width:767.98px){
  .topbar{font-size:.74rem}
  .topbar .container{justify-content:center!important}
  .hero{min-height:720px}
  .hero h1{font-size:2.7rem}
  .hero p{font-size:1rem}
  .stat-grid{grid-template-columns:1fr}
  .cta{padding:35px 24px}
  .project-card{min-height:330px}
  .page-hero{padding:70px 0}
}