*{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{margin:0;min-height:100%;background:#020817;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:white}
body{overflow-x:hidden;background:radial-gradient(circle at 70% 18%,rgba(0,104,255,.20),transparent 32%),radial-gradient(circle at 10% 80%,rgba(46,167,255,.10),transparent 28%),#020817}

.hero-shell{width:100%;overflow-x:auto;overflow-y:hidden;padding:24px clamp(12px,2vw,34px) 12px}
.hero{position:relative;width:min(94vw,1920px);aspect-ratio:1536/1024;margin:0 auto;overflow:hidden;border-radius:28px;background:#020817;box-shadow:0 0 65px rgba(0,104,255,.14)}
.reference{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

.hotspots a,.hero-actions a{position:absolute;z-index:20;display:block;text-decoration:none;color:transparent;border-radius:18px}
.logo{left:2.4%;top:3.3%;width:16.5%;height:5.5%}
.nav{height:3.2%;top:4.8%;font-size:0}
.product{left:23.4%;width:5.7%}
.solutions{left:30.1%;width:6.5%}
.usecases{left:37.4%;width:7.9%}
.pricing{left:45.5%;width:5.1%}
.about{left:51.7%;width:4.5%}
.login{left:77.8%;width:4.4%}
.top-cta{right:3.1%;top:3.4%;width:13.1%;height:4.8%}
.primary-cta{left:2.7%;top:50.5%;width:13.3%;height:5.1%}
.secondary-cta{left:17.4%;top:50.5%;width:13.6%;height:5.1%}
.top-cta:hover,.primary-cta:hover,.secondary-cta:hover,.nav:hover{outline:1px solid rgba(55,153,255,.7);box-shadow:0 0 25px rgba(0,145,255,.32)}

.route-overlay{position:absolute;inset:0;z-index:6;pointer-events:none}
.travel{fill:none;stroke:#75d9ff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:10 17;filter:drop-shadow(0 0 10px #2ea7ff);animation:routeFlow 3.2s linear infinite}
.travel.soft{stroke:rgba(110,210,255,.42);stroke-width:1.2;animation-duration:4.8s}

.country,.phone-hub,.live-card{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:999px}
.country{z-index:23;width:4.2%;height:4.2%;transform:translate(-50%,-50%)}
.country::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%}
.country:hover::before,.country.active::before{width:18px;height:18px;transform:translate(-50%,-50%);background:#e7f9ff;box-shadow:0 0 0 10px rgba(46,167,255,.20),0 0 0 22px rgba(46,167,255,.08),0 0 38px #2ea7ff,0 0 80px #0068ff;animation:countryPulse 2.2s ease-in-out infinite}

.usa{left:43.55%;top:34.20%}
.uk{left:60.72%;top:27.05%}
.uae{left:74.02%;top:35.82%}
.pakistan{left:79.58%;top:38.20%}
.singapore{left:86.72%;top:46.98%}
.australia{left:92.52%;top:59.82%}

.phone-hub{z-index:23;left:60.7%;top:48.7%;width:7.8%;height:11.7%;transform:translate(-50%,-50%)}
.phone-hub::before{content:"";position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 0 18px rgba(46,167,255,.12),0 0 0 40px rgba(46,167,255,.06),0 0 100px rgba(46,167,255,.65);animation:hubPulse 3.8s ease-in-out infinite}

.live-card{z-index:24;color:transparent;border-radius:10px;transition:.22s ease}
.live-card.active{box-shadow:inset 0 0 0 2px rgba(125,211,252,.9),0 0 24px rgba(46,167,255,.24);transform:none}
.live-card:hover{box-shadow:inset 0 0 0 2px rgba(125,211,252,.75),0 0 22px rgba(46,167,255,.20);transform:none}
.card-uk{left:37.38%;top:69.7%;width:9.85%;height:7.45%}
.card-usa{left:48.15%;top:69.7%;width:9.95%;height:7.45%}
.card-uae{left:59.35%;top:69.7%;width:9.45%;height:7.45%}
.card-pakistan{left:69.35%;top:69.7%;width:9.45%;height:7.45%}
.card-singapore{left:79.75%;top:69.7%;width:9.15%;height:7.45%}
.card-australia{left:89.75%;top:69.7%;width:9.35%;height:7.45%}

/* Real-time local clock overlays next to the existing Live text in the image cards.
   Time-only overlay prevents duplicate “Live” text and keeps everything inside each card. */
.clock{
  position:absolute;
  z-index:30;
  display:block;
  width:3.9%;
  color:#7dd3fc;
  font-weight:900;
  font-size:clamp(7px,.58vw,12px);
  line-height:1;
  text-align:right;
  pointer-events:none;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(2,8,23,.95),0 0 10px rgba(46,167,255,.34);
}
.clock .pulse,
.clock b{display:none}
.clock em{font-style:normal;color:#7dd3fc}
.clock-uk{left:42.45%;top:75.18%}
.clock-usa{left:53.05%;top:75.18%}
.clock-uae{left:64.00%;top:75.18%}
.clock-pakistan{left:74.24%;top:75.18%}
.clock-singapore{left:84.55%;top:75.18%}
.clock-australia{left:94.65%;top:75.18%}

.tooltip{position:absolute;z-index:40;min-width:215px;padding:13px 15px;border-radius:14px;background:rgba(2,8,23,.94);border:1px solid rgba(89,199,255,.48);box-shadow:0 0 35px rgba(46,167,255,.28);pointer-events:none;opacity:0;transform:translate(-50%,-125%);transition:.15s ease}
.tooltip.show{opacity:1}
.tooltip strong{display:block;color:#7dd3fc;margin-bottom:5px;font-size:14px}
.tooltip span{display:block;color:#e0f2fe;font-size:13px;line-height:1.4}

.timeline{width:min(1484px,calc(100% - 40px));margin:32px auto 0}
.timeline-card{position:relative;overflow:hidden;border-radius:31px;border:1px solid rgba(46,167,255,.22);background:radial-gradient(circle at 50% 0%,rgba(46,167,255,.18),transparent 43%),linear-gradient(180deg,rgba(46,167,255,.055),rgba(3,9,28,.78));box-shadow:0 0 55px rgba(0,104,255,.14),inset 0 0 40px rgba(46,167,255,.035);padding:46px 38px;text-align:center}
.eyebrow{position:relative;z-index:2;display:inline-flex;padding:10px 16px;border-radius:999px;border:1px solid rgba(46,167,255,.42);background:rgba(0,104,255,.12);color:#7dd3fc;font-size:13px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.timeline h2{position:relative;z-index:2;margin:18px 0 0;font-size:clamp(34px,4.2vw,58px);letter-spacing:-1.8px;line-height:1.08}
.timeline-subtitle{position:relative;z-index:2;margin:16px auto 0;max-width:900px;color:#c7d7f5;font-size:18px;line-height:1.6}
.timeline-divider{position:relative;margin:40px auto 52px;width:88%;height:2px;background:linear-gradient(90deg,transparent,#2ea7ff,transparent);box-shadow:0 0 22px rgba(46,167,255,.75)}
.timeline-divider span{position:absolute;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);background:#7dd3fc;box-shadow:0 0 0 10px rgba(46,167,255,.10),0 0 25px rgba(46,167,255,.95)}
.timeline-divider span:nth-child(1){left:12%}
.timeline-divider span:nth-child(2){left:50%}
.timeline-divider span:nth-child(3){left:88%}
.timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.timeline-grid article{padding:34px 22px;border-radius:22px;border:1px solid rgba(46,167,255,.22);background:radial-gradient(circle at top,rgba(46,167,255,.14),transparent 48%),rgba(2,6,23,.52);box-shadow:inset 0 0 28px rgba(46,167,255,.035);transition:.3s ease}
.timeline-grid article:hover{transform:translateY(-7px);border-color:rgba(125,211,252,.65);box-shadow:0 0 32px rgba(46,167,255,.18)}
.timeline-grid small{color:#7dd3fc;text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:900}
.timeline-grid strong{display:block;margin-top:12px;color:white;font-size:28px}
.timeline-grid p{margin:12px auto 0;max-width:520px;color:#b9c9e9;font-size:15px;line-height:1.6}

.footer{width:min(1484px,calc(100% - 40px));margin:32px auto 0;padding-bottom:34px}
.footer-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(46,167,255,.22);border-radius:28px;background:linear-gradient(180deg,rgba(46,167,255,.055),rgba(3,9,28,.72));padding:24px 28px;box-shadow:0 0 45px rgba(0,104,255,.10);transition:.25s ease}
.footer-card:hover{transform:translateY(-4px);border-color:rgba(125,211,252,.55);box-shadow:0 0 32px rgba(46,167,255,.16)}
.footer-card strong{display:block;font-size:24px}
.footer-card span{display:block;color:#7dd3fc;margin-top:6px}
.footer-card p{margin:0;color:#c7d7f5}
.footer-card b{color:white}
.footer-card a{color:white;text-decoration:none;font-weight:900;padding:13px 18px;border-radius:14px;background:linear-gradient(135deg,#2ea7ff,#0068ff);box-shadow:0 0 24px rgba(0,104,255,.35)}

@keyframes routeFlow{to{stroke-dashoffset:-210}}
@keyframes countryPulse{0%,100%{opacity:.85;scale:.9}50%{opacity:1;scale:1.15}}
@keyframes hubPulse{0%,100%{transform:scale(.96);opacity:.8}50%{transform:scale(1.05);opacity:1}}

@media (max-width:1000px){
  .hero-shell{overflow-x:auto;padding:12px 10px}
  .hero{width:100%;min-width:880px}
  .timeline-grid{grid-template-columns:1fr}
  .timeline-card{padding:34px 18px}
  .timeline-divider{display:none}
  .footer-card{flex-direction:column;text-align:center}
}

/* Stability/performance fixes */
.reference{display:block;contain:paint;backface-visibility:hidden}
.hero,.route-overlay,.country,.phone-hub,.live-card{touch-action:manipulation}
.travel{filter:none;will-change:stroke-dashoffset}
.country::before,.phone-hub::before{will-change:transform,opacity}
.tooltip{will-change:transform,opacity,left,top}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* Stability fix: keep the footer lightweight.
   The previous glowing/transform hover styles could trigger expensive full-page repaints
   after anchor-button clicks on some browsers/devices. */
.footer{contain:layout paint;content-visibility:auto;contain-intrinsic-size:120px}
.footer-card{box-shadow:none;transition:none;transform:none;will-change:auto;background:rgba(3,9,28,.72)}
.footer-card:hover{transform:none;box-shadow:none;border-color:rgba(46,167,255,.22)}
.footer-card a{box-shadow:none;transition:none}
.timeline{content-visibility:auto;contain-intrinsic-size:520px}
.timeline-card,.timeline-grid article{box-shadow:none;transition:none;will-change:auto}
.timeline-grid article:hover{transform:none;box-shadow:none}