/* =========================================================
   HARZNET — Modern Theme
   Palette: Navy #001f3f / #003366, Cyan accent #00c2ff -> #0066ff
   Font: Poppins
   ========================================================= */

:root{
  --hz-navy:        #001f3f;
  --hz-navy-2:      #012a52;
  --hz-navy-3:      #023b70;
  --hz-cyan:         #00c2ff;
  --hz-blue:         #0066ff;
  --hz-ink:          #0b1b2b;
  --hz-muted:        #c6d5ee;
  --hz-gradient:     linear-gradient(135deg, var(--hz-cyan) 0%, var(--hz-blue) 100%);
  --hz-radius:       18px;
  --hz-shadow:       0 10px 30px rgba(0, 31, 63, .12);
  --hz-shadow-lg:    0 20px 45px rgba(0, 31, 63, .18);
}

body{
  font-family: 'Poppins', sans-serif;
  color: var(--hz-ink);
}

a{ text-decoration:none; }

/* ---------- Preloader ---------- */
#hz-preloader{
  position:fixed; inset:0; z-index:99999;
  background: var(--hz-navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#hz-preloader.hz-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.hz-loader{
  width:52px; height:52px;
  border:4px solid rgba(255,255,255,.15);
  border-top-color: var(--hz-cyan);
  border-radius:50%;
  animation: hz-spin .8s linear infinite;
}
@keyframes hz-spin{ to{ transform:rotate(360deg); } }

/* ---------- Scroll progress ---------- */
#hz-scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: var(--hz-gradient);
  z-index:9999;
  transition: width .1s linear;
}

/* ---------- Navbar ---------- */
.hz-navbar{
  background: rgba(0, 31, 63, .92) !important;
  backdrop-filter: blur(10px);
  padding-top:.75rem; padding-bottom:.75rem;
  position:sticky; top:0; z-index:1030;
  box-shadow: 0 2px 20px rgba(0,0,0,.15);
}
.hz-nav-link{
  color: rgba(255,255,255,.85) !important;
  font-weight:500;
  padding:.5rem 1rem !important;
  transition: color .2s ease;
}
.hz-nav-link:hover, .hz-nav-link:focus{ color:#fff !important; }
.hz-navbar .dropdown-menu{
  background: var(--hz-navy-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.hz-navbar .dropdown-item{ color: rgba(255,255,255,.85); }
.hz-navbar .dropdown-item:hover{ background: rgba(255,255,255,.08); color:#fff; }
.hz-navbar .navbar-toggler{ border-color: rgba(255,255,255,.3); }
.hz-navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Buttons ---------- */
.hz-btn-pill{ border-radius:50px !important; }
.hz-btn-gradient{
  background: var(--hz-gradient);
  border: none;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(0, 102, 255, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hz-btn-gradient:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 102, 255, .45);
  color:#fff;
}

/* ---------- Section helpers ---------- */
.hz-eyebrow{
  display:inline-block;
  padding:.35rem 1rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--hz-blue);
  background: rgba(0, 102, 255, .08);
  border-radius:50px;
}
.hz-section-title{
  font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-top:.5rem;
}
.hz-underline{
  width:64px; height:4px; margin:1rem auto 0;
  background: var(--hz-gradient);
  border-radius:4px;
}
.hz-gradient-text{
  background: var(--hz-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================
   HERO
   ========================================================= */
.hz-hero{
  position:relative;
  background: radial-gradient(circle at 20% 20%, var(--hz-navy-3), var(--hz-navy) 60%);
  color:#fff;
  overflow:hidden;
  padding-top:2.5rem;
  min-height: 640px;
  display:flex;
  align-items:center;
}
.hz-hero-content{ position:relative; z-index:3; }
.hz-hero h1{ font-weight:700; line-height:1.15; }

.hz-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(70px);
  opacity:.45;
  z-index:1;
  pointer-events:none;
}
.hz-blob-1{ width:420px; height:420px; background:var(--hz-cyan); top:-120px; right:-80px; }
.hz-blob-2{ width:340px; height:340px; background:var(--hz-blue); bottom:-140px; left:-100px; }
.hz-blob-3{ width:260px; height:260px; background:#7c3aed; top:40%; right:20%; opacity:.25; }

.hz-hero-particles{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  overflow:hidden;
}
.hz-particle{
  position:absolute;
  bottom:-10px;
  width:4px; height:4px;
  border-radius:50%;
  background: rgba(0, 194, 255, .8);
  animation: hz-float-up linear infinite;
}
@keyframes hz-float-up{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(-620px) translateX(20px); opacity:0; }
}

.hz-badge-pulse{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50px;
  font-size:.85rem;
  color:#fff;
}
.hz-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--hz-cyan);
  box-shadow:0 0 0 0 rgba(0,194,255,.7);
  animation: hz-pulse 1.6s infinite;
  display:inline-block;
}
@keyframes hz-pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,194,255,.55); }
  70%{ box-shadow:0 0 0 10px rgba(0,194,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,194,255,0); }
}

.hz-stat{ text-align:left; }
.hz-stat-num{ font-size:1.7rem; font-weight:700; color:#fff; }
.hz-stat small{ color: var(--hz-muted); }

.hz-scroll-cue{
  position:absolute;
  left:50%; bottom:24px; transform:translateX(-50%);
  z-index:3;
  color: rgba(255,255,255,.75);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.hz-mouse{
  width:24px; height:38px;
  border:2px solid rgba(255,255,255,.6);
  border-radius:14px;
  position:relative;
}
.hz-mouse::before{
  content:"";
  position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px;
  background: var(--hz-cyan);
  border-radius:2px;
  animation: hz-scroll-dot 1.6s infinite;
}
@keyframes hz-scroll-dot{
  0%{ opacity:1; top:6px; }
  100%{ opacity:0; top:20px; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.hz-about-card{
  background:#fff;
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow: var(--hz-shadow);
}
.hz-about-card i{
  font-size:1.4rem;
  color: var(--hz-blue);
  flex-shrink:0;
  margin-top:.15rem;
}

/* =========================================================
   PROMO
   ========================================================= */
.hz-promo{
  position:relative;
  background: linear-gradient(120deg, var(--hz-navy) 0%, var(--hz-navy-3) 60%, #013a63 100%);
  overflow:hidden;
}
.hz-promo::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 0%, rgba(0,194,255,.25), transparent 55%);
  pointer-events:none;
}
.hz-speed-badge{
  display:inline-block;
  padding:.6rem 1.4rem;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50px;
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.hz-service-card{
  background:#fff;
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow);
  border:1px solid rgba(0,31,63,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hz-service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--hz-shadow-lg);
}
.hz-service-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background: rgba(0,102,255,.08);
  color: var(--hz-blue);
  font-size:1.5rem;
}
.hz-service-link{
  color: var(--hz-blue);
  font-weight:600;
  font-size:.92rem;
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.5rem;
}
.hz-service-link i{ transition: transform .2s ease; }
.hz-service-link:hover i{ transform: translateX(4px); }
.hz-service-link:hover{ color: var(--hz-navy); }

/* =========================================================
   KEUNGGULAN / ADVANTAGES
   ========================================================= */
.hz-adv-icon{
  width:70px; height:70px; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--hz-gradient);
  color:#fff;
  font-size:1.8rem;
  box-shadow: 0 10px 24px rgba(0,102,255,.3);
}

/* =========================================================
   TESTIMONI
   ========================================================= */
.hz-testi-card{
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow);
  padding:2.5rem 2rem 2rem;
  position:relative;
}
.hz-quote{
  font-size:2rem;
  color: rgba(0,102,255,.18);
  position:absolute;
  top:1.1rem; left:1.4rem;
}
.hz-testi-avatar{
  width:56px; height:56px;
  margin:0 auto 1rem;
  border-radius:50%;
  background: var(--hz-gradient);
  color:#fff;
  font-weight:700;
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,102,255,.3);
}
.hz-carousel-dots{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:1.5rem;
}
.hz-carousel-dots button{
  width:10px; height:10px;
  border-radius:50%;
  border:none;
  background: rgba(0,31,63,.15);
  padding:0;
  transition: background .2s ease, transform .2s ease;
}
.hz-carousel-dots button.active{
  background: var(--hz-gradient);
  transform: scale(1.2);
}

/* =========================================================
   PARTNER MARQUEE
   ========================================================= */
.hz-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hz-marquee-track{
  display:flex;
  align-items:center;
  gap:2.5rem;
  width:max-content;
  animation: hz-marquee-scroll 28s linear infinite;
}
.hz-marquee:hover .hz-marquee-track{ animation-play-state: paused; }
@keyframes hz-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.hz-logo-box{
  flex: 0 0 auto;
  width:150px; height:64px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:.75rem 1rem;
}
.hz-logo-box img{ filter:grayscale(0) brightness(1.05); }

/* =========================================================
   CONTACT
   ========================================================= */
.hz-contact-input{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  border-radius:10px !important;
}
.hz-contact-input::placeholder{ color: rgba(255,255,255,.5); }
.hz-contact-input:focus{
  background: rgba(255,255,255,.1) !important;
  border-color: var(--hz-cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(0,194,255,.15) !important;
  color:#fff !important;
}
.hz-contact-info-item{
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:1.3rem;
}
.hz-contact-info-item i{
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(255,255,255,.08);
  color: var(--hz-cyan);
  font-size:1.1rem;
}

/* =========================================================
   FOOTER EXTRAS
   ========================================================= */
.hz-hours-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  text-align:center;
}

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.hz-float-btn{
  position:fixed;
  right:24px;
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--hz-navy);
  color:#fff;
  border:none;
  box-shadow: var(--hz-shadow-lg);
  z-index:1000;
  cursor:pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.hz-float-btn:hover{ transform: translateY(-3px); color:#fff; }

.hz-wa-float{
  bottom:96px;
  background:#25D366;
  width:auto;
  padding:0 1.1rem 0 .7rem;
  gap:.5rem;
  font-weight:600;
  font-size:.9rem;
  color:#fff !important;
}

#hz-backtotop{
  bottom:24px;
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
}
#hz-backtotop.hz-show{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767.98px){
  .hz-hero{ min-height:auto; padding-bottom:3rem; }
  .hz-stat{ text-align:center; }
  .hz-wa-float{ padding:0; width:56px; }
  .hz-wa-float span, .hz-wa-float{ font-size:0; }
  .hz-wa-float img{ margin:0 auto; }
  .hz-logo-box{ width:120px; height:54px; }
}

@media (prefers-reduced-motion: reduce){
  .hz-marquee-track, .hz-dot, .hz-particle, .hz-mouse::before{ animation:none !important; }
}