:root{
  --primary:#0B63CE;
  --secondary:#76D84B;
  --dark:#070B12;
  --muted:#6c757d;
  --bg:#f7f9fc;
  --glass: rgba(255,255,255,.08);
  --glassBorder: rgba(255,255,255,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#1f2937;
  background:#fff;
}
a{text-decoration:none}
ul{padding-left:1.1rem}

.navbar{background:var(--dark)}
/* Top contact strip */
.top-contact-strip{
  position:relative;
  overflow:hidden;
  /* Dark glass so phone/email never disappear on light screens */
  background: rgba(6, 12, 24, .58);
  backdrop-filter: saturate(170%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.top-contact-strip::before{
  content:"";
  position:absolute; inset:-120% -60%;
  background:
    radial-gradient(420px 220px at 20% 30%, rgba(10,110,219,.55), transparent 60%),
    radial-gradient(420px 220px at 70% 60%, rgba(107,207,99,.42), transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.0));
  transform: translate3d(-8%, 0, 0) rotate(8deg);
  animation: stripAurora 9s ease-in-out infinite;
  opacity:.85;
  pointer-events:none;
}
@keyframes stripAurora{
  0%,100%{transform: translate3d(-10%, 0, 0) rotate(8deg)}
  50%{transform: translate3d(10%, 0, 0) rotate(8deg)}
}

.top-contact-strip .strip-link{
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.95);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  letter-spacing:.1px;
}
.top-contact-strip .strip-link i,
.top-contact-strip .strip-link svg{
  filter: drop-shadow(0 0 10px rgba(10,110,219,.35));
  opacity:.95;
}
.top-contact-strip .strip-link:hover{color:#fff; text-decoration:underline;}
.top-contact-strip .small{font-size:.92rem}

/* WhatsApp pill animation */
.top-contact-strip .btn-whatsapp,
.top-contact-strip .btn-success{
  position:relative;
  z-index:1;
}
.top-contact-strip .btn-whatsapp::after,
.top-contact-strip .btn-success::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(107,207,99,.55), transparent 60%);
  opacity:.0;
  filter: blur(6px);
  transition: opacity .25s ease;
}
.top-contact-strip .btn-whatsapp:hover::after,
.top-contact-strip .btn-success:hover::after{opacity:.9;}

.nav-blur{
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(11,28,45,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar .nav-link{opacity:.92}
.navbar .nav-link:hover{opacity:1}
.btn-outline-light{border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.6)}
.btn-outline-primary{border-color:rgba(10,110,219,.35)}
.btn-outline-primary:hover{border-color:rgba(10,110,219,.6)}

.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(10,110,219,.22), transparent 60%),
    radial-gradient(1200px 600px at 90% 20%, rgba(107,207,99,.18), transparent 55%),
    var(--dark);
  color:#fff;
  padding:90px 0;
  position:relative;
  overflow:hidden;
}
.hero h1{font-weight:900; letter-spacing:-.7px}
.hero .hero-lead{color:rgba(255,255,255,.88); max-width: 760px}

.hero-3d .hero-bg-grid{
  position:absolute; inset:-40% -20%;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(60deg) rotateZ(-15deg);
  transform-origin:center;
  opacity:.20;
}
.hero-orb{
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  filter: blur(0px);
  opacity:.9;
  mix-blend-mode:screen;
}
.hero-orb-1{
  left:-180px; top:-140px;
  background: radial-gradient(circle at 30% 30%, rgba(10,110,219,.9), rgba(10,110,219,.0) 60%);
  animation: floaty 8s ease-in-out infinite;
}
.hero-orb-2{
  right:-220px; bottom:-220px;
  background: radial-gradient(circle at 30% 30%, rgba(107,207,99,.85), rgba(107,207,99,.0) 65%);
  animation: floaty 10s ease-in-out infinite reverse;
}
@keyframes floaty{
  0%,100%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(0,18px,0)}
}

.card{
  border:1px solid #e9eef5;
  border-radius:18px;
  box-shadow:0 14px 40px rgba(11,28,45,.08);
}
.card-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  color:#fff;
}
.card-glass a{color:inherit}
.hover-lift{transition: transform .22s ease, box-shadow .22s ease}
.hover-lift:hover{transform: translateY(-6px); box-shadow:0 22px 60px rgba(11,28,45,.14)}
.card-link{display:block; color:inherit}
.card-link:hover{color:inherit}

.badge-soft{
  background:rgba(10,110,219,.10);
  color:var(--primary);
  border:1px solid rgba(10,110,219,.18)
}
.btn-primary{background:var(--primary);border:none}
.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{background:var(--secondary);border:none}
.btn-secondary:hover{filter:brightness(.95)}

.section{padding:70px 0}
.section-title{font-weight:900;color:var(--dark);letter-spacing:-.3px}
.small-muted{color:var(--muted)}

.ic-badge{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(10,110,219,.10);
  border:1px solid rgba(10,110,219,.18);
  color:var(--primary);
  font-size:20px;
}
.metric{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  min-width: 180px;
  transition: transform .2s ease, background .2s ease;
}
.metric:hover{transform: translateY(-4px); background: rgba(255,255,255,.09)}
.metric-top{font-size:13px; opacity:.9}
.metric-val{font-weight:700}

.mini-card{
  display:block;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .2s ease, background .2s ease;
}
.mini-card:hover{transform: translateY(-4px); background: rgba(255,255,255,.09)}
.mini-ic{
  width:40px;height:40px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(10,110,219,.14);
  border:1px solid rgba(255,255,255,.14);
  margin-bottom:8px;
}
.mini-title{font-weight:800}
.mini-sub{font-size:13px; opacity:.85}

.hero-3d-scene{
  position:relative;
  height:140px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  background: radial-gradient(240px 120px at 60% 30%, rgba(255,255,255,.10), rgba(255,255,255,.0) 70%);
  overflow:hidden;
  perspective: 900px;
}
.cube{
  position:absolute;
  left:50%;
  top:52%;
  width:80px;height:80px;
  transform-style:preserve-3d;
  transform: translate(-50%,-50%) rotateX(-18deg) rotateY(35deg);
  animation: spin 8s linear infinite;
}
@keyframes spin{
  0%{transform: translate(-50%,-50%) rotateX(-18deg) rotateY(0deg)}
  100%{transform: translate(-50%,-50%) rotateX(-18deg) rotateY(360deg)}
}
.cube .face{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(10,110,219,.65), rgba(107,207,99,.55));
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.cube .front{transform: translateZ(40px)}
.cube .back{transform: rotateY(180deg) translateZ(40px)}
.cube .right{transform: rotateY(90deg) translateZ(40px)}
.cube .left{transform: rotateY(-90deg) translateZ(40px)}
.cube .top{transform: rotateX(90deg) translateZ(40px)}
.cube .bottom{transform: rotateX(-90deg) translateZ(40px)}

.ring{
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  left:50%; top:50%;
  transform: translate(-50%,-50%) rotateX(70deg);
  animation: ring 6.5s ease-in-out infinite;
}
.ring-1{opacity:.55}
.ring-2{width:220px;height:220px;opacity:.35; animation-duration: 8.5s}
@keyframes ring{
  0%,100%{transform: translate(-50%,-50%) rotateX(70deg) rotateZ(0deg)}
  50%{transform: translate(-50%,-50%) rotateX(70deg) rotateZ(180deg)}
}

.timeline{display:flex; flex-direction:column; gap:12px}
.timeline-step{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e9eef5;
  background:#fff;
  transition: transform .2s ease, box-shadow .2s ease;
  color:inherit;
}
.timeline-step:hover{transform: translateY(-4px); box-shadow:0 16px 40px rgba(11,28,45,.10); color:inherit}
.step-no{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,110,219,.10);
  border:1px solid rgba(10,110,219,.18);
  color:var(--primary);
  font-weight:900;
  flex: 0 0 auto;
}

.check-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e9eef5;
  background:#fff;
  color:inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.check-card:hover{transform: translateY(-4px); box-shadow:0 16px 40px rgba(11,28,45,.10); color:inherit}
.check-card i{color:var(--secondary); font-size:18px}

.product-tile{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e9eef5;
  background:#fff;
  color:inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-tile:hover{transform: translateY(-4px); box-shadow:0 16px 40px rgba(11,28,45,.10); color:inherit}
.tile-ic{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(107,207,99,.12);
  border:1px solid rgba(107,207,99,.22);
  color: #2f8e2a;
  font-size:20px;
}

.quote{
  display:flex; gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid #e9eef5;
  background:#fff;
}
.quote-mark{
  font-size:34px;
  line-height:1;
  color:rgba(10,110,219,.6);
  font-weight:900;
}

.page-hero{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(10,110,219,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 30%, rgba(107,207,99,.14), transparent 60%),
    var(--dark);
  color:#fff;
  padding:54px 0;
}
.hero-sub{color:rgba(255,255,255,.85); max-width: 880px}

.service-block{
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.service-icon{
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,110,219,.10);
  border:1px solid rgba(10,110,219,.18);
  color:var(--primary);
  font-size:24px;
  flex: 0 0 auto;
}

.tech-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(10,110,219,.18);
  background:rgba(10,110,219,.06);
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  transition: transform .2s ease, background .2s ease;
}
.tech-pill:hover{transform: translateY(-3px); background:rgba(10,110,219,.10); color:var(--primary)}

.highlight{
  border:1px solid rgba(107,207,99,.35);
  box-shadow:0 18px 60px rgba(107,207,99,.12);
}

.cta-band{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(900px 420px at 80% 50%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(10,110,219,1), rgba(107,207,99,1));
  color:#fff;
  padding:54px 0;
}
.cta-muted{color:rgba(255,255,255,.92)}

.accordion-button{font-weight:700}
.accordion-button:focus{box-shadow:none}
.accordion-item{
  border:1px solid #e9eef5;
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(11,28,45,.06);
}
.accordion-item + .accordion-item{margin-top:12px}
.accordion-button{background:#fff}
.accordion-body{background:#fff}

.info-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e9eef5;
  background:#fff;
  color:inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-row:hover{transform: translateY(-4px); box-shadow:0 16px 40px rgba(11,28,45,.10); color:inherit}
.info-row i{color:var(--primary); font-size:18px}
.map-frame{width:100%; height:260px; border:0; border-radius:18px}

.footer{background:var(--dark);color:#fff}
.footer a{color:rgba(255,255,255,.85)}
.footer a:hover{color:#fff}
.footer-muted{color:rgba(255,255,255,.80)}
.footer-hr{border-top:1px solid rgba(255,255,255,.15) !important}
.pill-link{
  display:inline-flex; align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  transition: transform .2s ease, background .2s ease;
}
.pill-link:hover{transform: translateY(-3px); background: rgba(255,255,255,.09); color:#fff}

hr.soft{border:0;border-top:1px solid #e9eef5;margin:24px 0}

@media (max-width: 991px){
  .service-block{flex-direction:column}
  .hero{padding:70px 0}
}