/* ===== Home Page Specific Styles ===== */

/* Hero */
.hero-home {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg-img {
  position:absolute; inset:0;
  background:url('images/hero-bg.jpg') center/cover no-repeat,
             linear-gradient(135deg, #0d3a5e 0%, #0073aa 100%);
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(10,25,35,.88) 0%, rgba(0,80,130,.72) 50%, rgba(0,50,80,.55) 100%);
}
.hero-inner { position:relative; z-index:2; }

.hero-badge {
  display:inline-block;
  background:rgba(0,174,239,.2);
  border:1px solid rgba(0,174,239,.45);
  color:#7EE0FF;
  padding:.4rem 1.1rem;
  border-radius:50px;
  font-weight:600;
  font-size:.85rem;
  margin-bottom:1.2rem;
  backdrop-filter:blur(6px);
}
.hero-title {
  font-size:3.8rem;
  font-weight:900;
  color:#fff;
  line-height:1.2;
  margin-bottom:1.2rem;
}
.text-primary-brand { color:#00AEEF; }
.text-accent-brand  { color:#F7941D; }

.hero-sub {
  font-size:1.1rem;
  color:rgba(255,255,255,.82);
  max-width:560px;
  line-height:1.85;
  margin-bottom:2rem;
}
.hero-btns { display:flex; gap:.85rem; flex-wrap:wrap; }

.hero-scroll-cue {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
}
.hero-scroll-cue a {
  display:block; width:26px; height:44px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:14px; position:relative;
}
.hero-scroll-cue span {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; background:#fff; border-radius:50%;
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0%  { opacity:1; top:8px; }
  100%{ opacity:0; top:26px; }
}

/* About teaser */
.about-img-wrap { position:relative; padding:0 1.5rem 2rem 0; }
.about-main-img {
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
.about-float-card {
  position:absolute; bottom:-1rem; right:-1rem;
  background:var(--c-primary);
  color:#fff;
  padding:1rem 1.4rem;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1rem;
}
.about-float-card i { font-size:1.4rem; }

.feature-list { list-style:none; }
.feature-list li {
  padding:.4rem 0;
  font-weight:600;
  color:var(--c-text);
  display:flex; align-items:center; gap:.6rem;
}
.feature-list i { color:var(--c-primary); }

/* Service cards */
.srv-card {
  background:#fff;
  border:1px solid var(--c-border-2);
  border-radius:var(--r-lg);
  padding:2rem 1.6rem;
  height:100%;
  transition:var(--t);
  position:relative; overflow:hidden;
}
.srv-card::after {
  content:'';
  position:absolute; top:0; right:0; left:0;
  height:3px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transform:scaleX(0); transform-origin:right;
  transition:var(--t);
}
.srv-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent; }
.srv-card:hover::after { transform:scaleX(1); }
.srv-icon {
  width:60px; height:60px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.1rem; transition:var(--t);
}
.srv-card:hover .srv-icon { transform:rotate(-5deg) scale(1.08); }
.srv-card h3 { font-size:1.15rem; font-weight:700; color:var(--c-dark); margin-bottom:.5rem; }
.srv-card p  { color:var(--c-text-light); font-size:.9rem; margin-bottom:.8rem; }
.srv-more {
  color:var(--c-primary); font-weight:700; font-size:.88rem;
  display:inline-flex; align-items:center; gap:.3rem;
  transition:var(--t);
}
.srv-more:hover { color:var(--c-accent); gap:.5rem; }

/* Portfolio thumbs */
.port-thumb {
  border-radius:var(--r-md);
  overflow:hidden; position:relative;
  aspect-ratio:1/1; cursor:pointer;
}
.port-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.port-thumb:hover img { transform:scale(1.1); }
.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,70,120,.88) 0%, transparent 60%);
  display:flex; align-items:flex-end; padding:1rem;
  opacity:0; transition:var(--t);
}
.port-thumb:hover .port-overlay { opacity:1; }
.port-overlay span { color:#fff; font-weight:700; font-size:.95rem; }

/* Clients marquee */
.clients-track-wrap {
  overflow:hidden;
  position:relative;
}
.clients-track-wrap::before,
.clients-track-wrap::after {
  content:'';
  position:absolute; top:0; bottom:0;
  width:80px; z-index:2;
}
.clients-track-wrap::before { right:0; background:linear-gradient(to left, var(--c-bg-soft), transparent); }
.clients-track-wrap::after  { left:0;  background:linear-gradient(to right,var(--c-bg-soft), transparent); }

.clients-track {
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite;
}
.clients-track:hover { animation-play-state:paused; }
@keyframes marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.client-logo {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem;
  background:#fff;
  border:1px solid var(--c-border-2);
  border-radius:var(--r-md);
  padding:1.2rem 1.8rem;
  margin: 0 .5rem;
  min-width:160px;
  transition:var(--t);
  cursor:default;
}
.client-logo:hover { box-shadow:var(--shadow-md); border-color:var(--c-primary); }
.client-logo i { font-size:1.8rem; color:var(--c-primary); }
.client-logo span { font-size:.82rem; font-weight:600; color:var(--c-text); white-space:nowrap; }

/* Responsive */
@media(max-width:991px){
  .hero-title { font-size:2.8rem; }
  .about-img-wrap { padding:0; margin-bottom:2rem; }
  .about-float-card { bottom:.5rem; right:.5rem; }
}
@media(max-width:575px){
  .hero-title { font-size:2.1rem; }
  .hero-btns { flex-direction:column; }
  .hero-btns .btn { width:100%; justify-content:center; }
}