/* =============================================
   HOME PAGE CSS
   ============================================= */

/* ---- HERO ---- */
#hero {
  position:relative; height:100vh; min-height:620px;
  display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
}
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
}
.hero-slide.active { opacity:1; }
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(5,16,14,0.92) 0%, rgba(5,16,14,0.65) 55%, rgba(5,16,14,0.4) 100%);
  z-index:1;
}
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(24,197,178,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(24,197,178,0.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-content {
  position:relative; z-index:3;
  padding-top:80px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(24,197,178,0.08); border:1px solid rgba(24,197,178,0.22);
  border-radius:30px; padding:8px 20px;
  font-family:var(--font-ui); font-size:0.8rem; font-weight:600;
  letter-spacing:1.5px; color:var(--teal); text-transform:uppercase;
  margin-bottom:28px;
}
.pulse-dot {
  width:8px; height:8px; border-radius:50%; background:var(--teal);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100%{box-shadow:0 0 0 0 rgba(24,197,178,0.5)}
  50%{box-shadow:0 0 0 7px rgba(24,197,178,0)}
}
.hero-title {
  font-family:var(--font-display); font-size:clamp(3.4rem,8vw,6.5rem);
  line-height:0.97; letter-spacing:2px; text-transform:uppercase;
  color:var(--white); margin-bottom:20px;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.hero-subtitle {
  font-family:var(--font-ui); font-size:1.25rem; font-weight:600;
  letter-spacing:2.5px; color:var(--gold); text-transform:uppercase; margin-bottom:10px;
}
.hero-tagline { font-size:1rem; color:var(--white-dim); margin-bottom:42px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
/* Stats bar */
.hero-stats-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  background:rgba(5,16,14,0.88); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.stats-inner {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap; padding:0;
}
.stat-item {
  display:flex; flex-direction:column; align-items:center;
  padding:22px 50px; position:relative;
}
.stat-item:not(:last-child)::after {
  content:''; position:absolute; right:0; top:25%; height:50%;
  width:1px; background:rgba(24,197,178,0.2);
}
.stat-n {
  font-family:var(--font-display); font-size:2.8rem;
  color:var(--teal); line-height:1;
  text-shadow:0 0 20px rgba(24,197,178,0.35);
}
.stat-plus { font-family:var(--font-display); font-size:2rem; color:var(--teal); }
.stat-lbl {
  font-family:var(--font-ui); font-size:0.72rem;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--white-dim); font-weight:600; margin-top:4px;
}
/* Slide dots */
.hero-dots {
  position:absolute; right:40px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:4;
}
.dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(24,197,178,0.3); border:1px solid rgba(24,197,178,0.4);
  transition:all 0.3s; cursor:pointer;
}
.dot.active { background:var(--teal); height:28px; border-radius:4px; }
/* Scroll hint */
.hero-scroll {
  position:absolute; bottom:90px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3;
}
.scroll-line {
  width:2px; height:48px;
  background:linear-gradient(to bottom,var(--teal),transparent);
  animation:scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0) translateY(20px)}}
.hero-scroll span {
  font-family:var(--font-ui); font-size:0.65rem;
  letter-spacing:4px; color:var(--grey); text-transform:uppercase;
}

/* ---- ABOUT TEASER ---- */
.ha-grid {
  display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:center;
}
.ha-img-wrap {
  position:relative;
}
.ha-img-main {
  width:100%; height:460px; border-radius:var(--radius-lg);
  object-fit:cover; box-shadow:var(--shadow);
}
.ha-img-accent {
  position:absolute; bottom:-30px; right:-30px;
  width:200px; height:200px; border-radius:var(--radius);
  border:4px solid var(--black); box-shadow:var(--shadow);
  object-fit:cover;
}
.ha-badge {
  position:absolute; top:24px; left:24px;
  background:var(--teal); border-radius:var(--radius);
  padding:14px 20px; text-align:center;
  box-shadow:0 8px 24px rgba(24,197,178,0.4);
}
.ha-year { display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--black); line-height:1; }
.ha-lbl  { display:block; font-family:var(--font-ui); font-size:0.65rem; letter-spacing:2px; color:var(--black); font-weight:700; text-transform:uppercase; }
.ha-text p { color:var(--white-dim); font-size:0.97rem; margin-top:20px; line-height:1.8; }
.ha-features {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px;
}
.ha-feat {
  display:flex; align-items:center; gap:12px;
  background:rgba(24,197,178,0.05); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px;
  font-family:var(--font-ui); font-size:0.88rem; font-weight:600;
  color:var(--white-dim); transition:all var(--transition);
}
.ha-feat:hover { background:rgba(24,197,178,0.1); border-color:var(--teal); color:var(--white); }
.ha-feat i { color:var(--teal); font-size:1rem; }

/* ---- FEATURED FLEET ---- */
.feat-fleet-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.feat-card {
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); transition:all var(--transition);
  background:var(--dark2);
}
.feat-card:hover {
  transform:translateY(-10px);
  border-color:rgba(24,197,178,0.35);
  box-shadow:0 20px 50px rgba(0,0,0,0.5), var(--shadow-teal);
}
.feat-card-img { position:relative; overflow:hidden; height:220px; }
.feat-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.feat-card:hover .feat-card-img img { transform:scale(1.08); }
.feat-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,16,14,0.9) 0%, rgba(5,16,14,0.1) 60%);
}
.feat-count {
  position:absolute; top:14px; right:14px;
  font-family:var(--font-display); font-size:2.2rem;
  color:rgba(24,197,178,0.6); line-height:1;
  text-shadow:0 0 20px rgba(24,197,178,0.3);
}
.feat-card-body { padding:22px 22px 26px; }
.feat-card-body h3 {
  font-family:var(--font-ui); font-size:1.1rem; font-weight:700;
  color:var(--white); margin-bottom:8px;
}
.feat-card-body p { font-size:0.85rem; color:var(--white-dim); line-height:1.65; margin-bottom:16px; }
.feat-link {
  font-family:var(--font-ui); font-size:0.82rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:6px;
  transition:gap var(--transition);
}
.feat-link:hover { gap:12px; }

/* ---- SERVICES STRIP ---- */
.svc-strip {
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.svc-item {
  text-align:center; padding:36px 20px;
  background:rgba(24,197,178,0.03); border:1px solid var(--border);
  border-radius:var(--radius-lg); transition:all var(--transition);
}
.svc-item:hover {
  background:rgba(24,197,178,0.08); border-color:var(--teal);
  transform:translateY(-6px); box-shadow:var(--shadow-teal);
}
.svc-icon {
  width:62px; height:62px; margin:0 auto 18px;
  background:rgba(24,197,178,0.08); border:1px solid rgba(24,197,178,0.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.svc-item:hover .svc-icon { background:var(--teal); border-color:var(--teal); }
.svc-icon i { font-size:1.4rem; color:var(--teal); transition:color var(--transition); }
.svc-item:hover .svc-icon i { color:var(--black); }
.svc-item h3 { font-family:var(--font-ui); font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:10px; }
.svc-item p  { font-size:0.83rem; color:var(--white-dim); line-height:1.6; }

/* ---- WHY SECTION ---- */
.why-grid-home {
  display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:center;
}
.why-right { display:flex; flex-direction:column; gap:0; }
.why-item {
  display:flex; align-items:flex-start; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--border);
  transition:all var(--transition);
}
.why-item:first-child { border-top:1px solid var(--border); }
.why-item:hover { padding-left:8px; }
.why-num {
  font-family:var(--font-display); font-size:3rem;
  color:rgba(24,197,178,0.12); line-height:1;
  flex-shrink:0; min-width:50px;
  transition:color var(--transition);
}
.why-item:hover .why-num { color:rgba(24,197,178,0.25); }
.why-item h3 { font-family:var(--font-ui); font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.why-item p  { font-size:0.88rem; color:var(--white-dim); line-height:1.65; }

/* ---- CTA BANNER ---- */
.cta-banner {
  position:relative; padding:110px 0; overflow:hidden;
}
.cta-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(0.22);
}
.cta-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(5,16,14,0.7), rgba(14,122,108,0.3));
}
.cta-content { position:relative; z-index:2; text-align:center; }
.cta-title {
  font-family:var(--font-display); font-size:clamp(2.2rem,5vw,4rem);
  letter-spacing:2px; text-transform:uppercase; color:var(--white);
  margin-bottom:18px;
}
.cta-content p { font-size:1.05rem; color:var(--white-dim); margin-bottom:36px; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- RESPONSIVE ---- */
@media(max-width:1100px) {
  .feat-fleet-grid { grid-template-columns:repeat(2,1fr); }
  .svc-strip { grid-template-columns:repeat(3,1fr); }
  .why-grid-home { grid-template-columns:1fr; gap:50px; }
  .ha-grid { grid-template-columns:1fr; gap:60px; }
  .ha-img-accent { width:150px; height:150px; right:-10px; }
}
@media(max-width:768px) {
  .hero-title { font-size:clamp(2.8rem,12vw,4rem); }
  .stats-inner { gap:0; }
  .stat-item { padding:16px 24px; }
  .stat-item:not(:last-child)::after { display:none; }
  .feat-fleet-grid { grid-template-columns:1fr 1fr; }
  .svc-strip { grid-template-columns:1fr 1fr; }
  .hero-dots { display:none; }
}
@media(max-width:480px) {
  .feat-fleet-grid { grid-template-columns:1fr; }
  .svc-strip { grid-template-columns:1fr; }
  .ha-img-accent { display:none; }
  .hero-btns .btn { width:100%; justify-content:center; }
}