/* ==========================================================================
   VELOX AUTO CARE — custom styles layered on top of Tailwind
   ========================================================================== */

html { scroll-behavior: smooth; }

::selection { background: #f5a524; color: #080b10; }

/* custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0e131b; }
::-webkit-scrollbar-thumb { background: #263140; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #f5a524; }

/* ---------------------------------------------------------------------- */
/* Preloader                                                              */
/* ---------------------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: #080b10;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; }
.preload-logo { text-align: center; }
.preload-img {
  width: 200px; max-width: 60vw; height: auto;
  animation: preloadpulse 1.4s ease-in-out infinite;
}
@keyframes preloadpulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(.97); }
}
.preload-bar {
  width: 160px; height: 3px; background: #1e2733; border-radius: 4px;
  margin: 16px auto 0; overflow: hidden;
}
.preload-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #f5a524, #ffd580);
  animation: fillbar 1.1s ease forwards;
}
@keyframes fillbar { to { width: 100%; } }

/* ---------------------------------------------------------------------- */
/* Background decor: blobs + grid                                        */
/* ---------------------------------------------------------------------- */
.blob {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  filter: blur(120px); opacity: .18;
  animation: blobfloat 16s ease-in-out infinite;
}
.blob-gold { background: #f5a524; }
.blob-cyan { background: #22d3ee; animation-delay: -6s; }
@keyframes blobfloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,30px) scale(.95); }
}
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */
#header.scrolled {
  background: rgba(8,11,16,0.85);
  backdrop-filter: blur(14px);
  border-bottom-color: #1e2733;
}
.nav-link { position: relative; padding-bottom: 4px; transition: color .25s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: linear-gradient(90deg,#f5a524,#22d3ee);
  transition: width .3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

#mobileMenu {
  background: rgb(8, 11, 16);
  backdrop-filter: blur(16px);
  transform: perspective(1600px) rotateY(-90deg);
  transform-origin: right center;
  backface-visibility: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: transform .75s cubic-bezier(.65,0,.35,1), visibility 0s linear .75s;
}
#mobileMenu.open {
  transform: perspective(1600px) rotateY(0deg);
  visibility: visible;
  pointer-events: auto;
  transition: transform .75s cubic-bezier(.65,0,.35,1), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  #mobileMenu { transition: opacity .3s ease, visibility 0s linear .3s; transform: none; }
  #mobileMenu.open { transition: opacity .3s ease; transform: none; }
}
.mobile-link {
  padding: 14px 0; border-bottom: 1px solid #1e2733; color: #cbd5e1;
  transition: color .2s, padding-left .2s;
}
.mobile-link:hover { color: #f5a524; padding-left: 8px; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; font-weight: 600; font-size: .875rem;
  color: #080b10; background: linear-gradient(135deg,#ffd580,#f5a524 55%,#c9820f);
  box-shadow: 0 10px 30px -8px rgba(245,165,36,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(245,165,36,0.7); }
.btn-primary:active { transform: translateY(-1px); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; font-weight: 600; font-size: .875rem;
  color: #fff; border: 1px solid #263140; background: rgba(255,255,255,0.02);
  transition: all .25s ease;
}
.btn-outline:hover { border-color: #f5a524; color: #f5a524; transform: translateY(-3px); }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: #080b10; color: #fff;
  transition: transform .25s ease;
}
.btn-dark:hover { transform: translateY(-3px); }
.btn-dark-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: transparent; color: #080b10; border: 2px solid #080b10;
  transition: all .25s ease;
}
.btn-dark-outline:hover { background: #080b10; color: #fff; transform: translateY(-3px); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */
.gradient-text {
  background: linear-gradient(100deg, #ffd580, #f5a524 35%, #22d3ee 90%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientshift 6s ease-in-out infinite;
}
@keyframes gradientshift {
  0%,100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.animate-ping-slow { animation: pingslow 2.2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes pingslow {
  0% { box-shadow: 0 0 0 0 rgba(245,165,36,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(245,165,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,165,36,0); }
}

.float-anim { animation: floaty 5s ease-in-out infinite; }
.float-anim-slow { animation: floaty 6.5s ease-in-out infinite; animation-delay: -2s; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.glass-card {
  background: rgba(18,25,36,0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}

.quick-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 10px; border-radius: 16px;
  background: #121924; border: 1px solid #1e2733;
  color: #94a3b8; font-size: .75rem; font-weight: 600; text-align: center;
  transition: all .3s ease;
}
.quick-chip i { font-size: 1.25rem; color: #f5a524; transition: transform .3s ease; }
.quick-chip:hover { border-color: #f5a524; color: #fff; transform: translateY(-5px); box-shadow: 0 14px 30px -14px rgba(245,165,36,0.5); }
.quick-chip:hover i { transform: scale(1.15) rotate(-6deg); }

/* ---------------------------------------------------------------------- */
/* Marquee                                                                */
/* ---------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: scrollmarquee 26s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track span {
  position: relative;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: rgba(255,255,255,0.72); white-space: nowrap;
  padding-right: 3.5rem;
  transition: color .3s ease, text-shadow .3s ease;
}
.marquee-track span::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #f5a524; opacity: .6;
}
.marquee-track span:hover {
  color: #f5a524;
  text-shadow: 0 0 18px rgba(245,165,36,0.5);
}
@keyframes scrollmarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* Section eyebrow                                                       */
/* ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #f5a524;
  padding: 6px 16px; border: 1px solid rgba(245,165,36,0.3); border-radius: 999px;
  background: rgba(245,165,36,0.06);
}

/* ---------------------------------------------------------------------- */
/* Service cards                                                         */
/* ---------------------------------------------------------------------- */
.service-card {
  position: relative; padding: 2rem 1.75rem; border-radius: 1.5rem;
  background: linear-gradient(180deg, #121924, #0e131b);
  border: 1px solid #1e2733;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245,165,36,0.4);
  box-shadow: 0 24px 50px -20px rgba(245,165,36,0.25);
}
.service-icon {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(245,165,36,0.18), rgba(34,211,238,0.1));
  color: #f5a524;
  transition: transform .35s ease;
}
.service-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); }
.service-card h3 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: .6rem;
}
.service-card p { font-size: .875rem; color: #94a3b8; line-height: 1.6; margin-bottom: 1.1rem; }
.service-price {
  display: inline-block; font-size: .75rem; font-weight: 700; color: #22d3ee;
  border-top: 1px dashed #1e2733; padding-top: .9rem; width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Section background photos                                             */
/* ---------------------------------------------------------------------- */
.section-photo {
  background-size: cover;
  background-position: center;
}
.section-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,11,16,.88), rgba(10,14,20,.8) 45%, rgba(8,11,16,.92));
  z-index: 0;
}
.section-photo > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* How it works                                                          */
/* ---------------------------------------------------------------------- */
.step-line {
  height: 1px;
  background: repeating-linear-gradient(90deg, #263140 0 8px, transparent 8px 16px);
}
.step-card { text-align: center; position: relative; }
.step-num {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .75rem; color: #f5a524;
  letter-spacing: .1em; margin-bottom: .5rem;
}
.step-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: #121924; border: 1px solid #1e2733; color: #f5a524;
  position: relative; z-index: 10;
  transition: all .35s ease;
}
.step-card:hover .step-icon {
  background: linear-gradient(135deg,#f5a524,#c9820f); color: #080b10;
  transform: scale(1.08); box-shadow: 0 14px 30px -10px rgba(245,165,36,0.5);
}
.step-card h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: .6rem; }
.step-card p { font-size: .875rem; color: #94a3b8; max-width: 280px; margin: 0 auto; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Why / stats                                                           */
/* ---------------------------------------------------------------------- */
.feature-tick {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(34,211,238,0.12); color: #22d3ee;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.stat-card {
  padding: 2rem 1.5rem; border-radius: 1.5rem; text-align: center;
  background: #121924; border: 1px solid #1e2733;
  transition: transform .3s ease, border-color .3s ease;
}
.stat-card:hover { transform: translateY(-6px); border-color: rgba(245,165,36,0.4); }
.stat-num {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.25rem;
  background: linear-gradient(100deg,#ffd580,#f5a524);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .4rem;
}
.stat-card p { font-size: .8rem; color: #94a3b8; }

/* ---------------------------------------------------------------------- */
/* Coverage                                                              */
/* ---------------------------------------------------------------------- */
.area-chip {
  padding: 9px 18px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: #121924; border: 1px solid #1e2733; color: #cbd5e1;
  transition: all .25s ease; cursor: default;
}
.area-chip:hover { border-color: #f5a524; color: #f5a524; transform: translateY(-3px); }

/* ---------------------------------------------------------------------- */
/* Testimonials                                                          */
/* ---------------------------------------------------------------------- */
.testi-slide { min-width: 100%; padding: 0 .5rem; }
.testi-card {
  padding: 2.5rem; border-radius: 1.75rem;
  background: linear-gradient(180deg,#121924,#0e131b);
  border: 1px solid #1e2733; text-align: center;
}
.testi-card p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.8; font-style: italic; margin-bottom: 1.75rem; }
.testi-card .flex { justify-content: center; font-size: 1.1rem; letter-spacing: 2px; }
.testi-user { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testi-user img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #f5a524; object-fit: cover; }
.testi-user h5 { font-family: 'Poppins', sans-serif; color: #fff; font-weight: 600; font-size: .9rem; }
.testi-user span { color: #64748b; font-size: .75rem; }

.testi-nav-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid #1e2733;
  color: #cbd5e1; display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.testi-nav-btn:hover { background: #f5a524; color: #080b10; border-color: #f5a524; }
.testi-dot { width: 8px; height: 8px; border-radius: 50%; background: #263140; transition: all .3s ease; cursor: pointer; }
.testi-dot.active { width: 24px; border-radius: 4px; background: #f5a524; }

/* ---------------------------------------------------------------------- */
/* CTA banner                                                            */
/* ---------------------------------------------------------------------- */
.cta-banner {
  position: relative; overflow: hidden; border-radius: 2rem; padding: 3rem 2.5rem;
  background: linear-gradient(120deg, #ffd580, #f5a524 60%, #ffb84d);
}
.cta-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.4), transparent 55%);
  animation: glowmove 6s ease-in-out infinite alternate;
}
@keyframes glowmove {
  from { transform: translateX(0) translateY(0); }
  to { transform: translateX(-40px) translateY(20px); }
}

/* ---------------------------------------------------------------------- */
/* Interior page banner                                                  */
/* ---------------------------------------------------------------------- */
.page-banner {
  position: relative; padding: 10rem 0 6rem; overflow: hidden;
  background-size: cover; background-position: center;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,11,16,.5), rgba(8,11,16,.85) 65%, #080b10);
  z-index: 0;
}
.page-banner > * { position: relative; z-index: 1; }

.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #94a3b8; }
.breadcrumb a { color: #94a3b8; transition: color .2s; }
.breadcrumb a:hover { color: #f5a524; }
.breadcrumb .sep { color: #374151; }

/* ---------------------------------------------------------------------- */
/* Services page: filter pills + compact service cards                   */
/* ---------------------------------------------------------------------- */
.filter-pill {
  padding: 10px 20px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  color: #94a3b8; background: #121924; border: 1px solid #1e2733;
  transition: all .25s ease;
}
.filter-pill:hover { color: #fff; border-color: rgba(245,165,36,0.4); transform: translateY(-2px); }
.filter-pill.active {
  color: #080b10; border-color: transparent;
  background: linear-gradient(135deg,#ffd580,#f5a524 55%,#c9820f);
  box-shadow: 0 10px 26px -10px rgba(245,165,36,0.55);
}

.service-card-sm {
  display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.6rem;
  border-radius: 1.25rem; background: linear-gradient(180deg, #121924, #0e131b);
  border: 1px solid #1e2733;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .3s ease;
}
.service-card-sm:hover {
  transform: translateY(-6px);
  border-color: rgba(245,165,36,0.4);
  box-shadow: 0 20px 44px -20px rgba(245,165,36,0.25);
}
.service-card-sm.is-hidden { display: none; }
.service-icon-sm {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: linear-gradient(135deg, rgba(245,165,36,0.18), rgba(34,211,238,0.1));
  color: #f5a524;
  transition: transform .35s ease;
}
.service-card-sm:hover .service-icon-sm { transform: rotate(-8deg) scale(1.08); }
.service-card-sm h3 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: .4rem;
}
.service-card-sm p { font-size: .825rem; color: #94a3b8; line-height: 1.55; }

/* ---------------------------------------------------------------------- */
/* Instant quote widget                                                  */
/* ---------------------------------------------------------------------- */
.quote-widget {
  border-radius: 1.75rem; overflow: hidden;
  background: linear-gradient(180deg, #121924, #0e131b);
  border: 1px solid #1e2733;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.65);
}
.quote-tabs {
  display: flex; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid #1e2733;
}
.quote-tabs::-webkit-scrollbar { display: none; }
.quote-tab {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.5rem 1.25rem; min-width: 118px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #64748b; border-right: 1px solid #1e2733;
  transition: background .3s ease, color .3s ease;
}
.quote-tab:last-child { border-right: none; }
.quote-tab-icon {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: #080b10; border: 1px solid #1e2733; color: #f5a524;
  transition: all .3s ease;
}
.quote-tab:hover { color: #cbd5e1; }
.quote-tab.active {
  color: #f5a524;
  background: linear-gradient(180deg, rgba(245,165,36,0.14), rgba(245,165,36,0.05));
}
.quote-tab.active .quote-tab-icon {
  background: linear-gradient(135deg,#ffd580,#f5a524 55%,#c9820f);
  border-color: transparent; color: #080b10;
  box-shadow: 0 10px 24px -8px rgba(245,165,36,0.6);
  transform: scale(1.08);
}

.quote-body { display: grid; }
@media (min-width: 900px) { .quote-body { grid-template-columns: 1fr 1fr; } }

.quote-info {
  padding: 2.75rem; transition: opacity .25s ease, transform .25s ease;
}
.quote-info.is-swapping { opacity: 0; transform: translateY(8px); }
.quote-info-icon {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(245,165,36,0.18), rgba(34,211,238,0.1));
  color: #f5a524;
}
.quote-info h3 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem;
}
.quote-feature-list { display: flex; flex-direction: column; gap: .85rem; }
.quote-feature-list li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .875rem; color: #cbd5e1; line-height: 1.5;
}
.quote-feature-list li i { color: #22d3ee; font-size: .8rem; margin-top: .3rem; }

.quote-form {
  padding: 2.75rem; background: rgba(8,11,16,0.4); border-top: 1px solid #1e2733;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (min-width: 900px) { .quote-form { border-top: none; border-left: 1px solid #1e2733; } }
.quote-input {
  grid-column: span 1; width: 100%; padding: 14px 18px; border-radius: 12px;
  background: #121924; border: 1px solid #1e2733; color: #fff; font-size: .875rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.quote-input::placeholder { color: #64748b; }
.quote-input:focus { outline: none; border-color: #f5a524; box-shadow: 0 0 0 3px rgba(245,165,36,0.15); }
.quote-input-full { grid-column: span 2; }
.quote-submit { grid-column: span 2; margin-top: .5rem; }
.quote-note {
  grid-column: span 2; font-size: .7rem; color: #64748b; display: flex; align-items: center; gap: .4rem; margin-top: -.2rem;
}

.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  color: #fff; background: linear-gradient(135deg, #34e07a, #25D366 60%, #1cad52);
  box-shadow: 0 12px 30px -10px rgba(37,211,102,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(37,211,102,0.7); }
.btn-whatsapp:active { transform: translateY(-1px); }

@media (max-width: 520px) {
  .quote-form { grid-template-columns: 1fr; }
  .quote-input-full, .quote-submit, .quote-note { grid-column: span 1; }
}

/* ---------------------------------------------------------------------- */
/* Team cards                                                            */
/* ---------------------------------------------------------------------- */
.team-card {
  border-radius: 1.5rem; overflow: hidden;
  background: linear-gradient(180deg, #121924, #0e131b);
  border: 1px solid #1e2733;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245,165,36,0.4);
  box-shadow: 0 24px 50px -20px rgba(245,165,36,0.25);
}
.team-photo { position: relative; height: 320px; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-body { padding: 1.5rem 1.5rem 1.75rem; }
.team-role {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: #f5a524; margin-bottom: .55rem;
}
.team-body p { font-size: .85rem; color: #94a3b8; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                */
/* ---------------------------------------------------------------------- */
.footer-title { font-family:'Poppins',sans-serif; color:#fff; font-weight:700; font-size:.95rem; margin-bottom:1.25rem; }
.footer-links { display:flex; flex-direction:column; gap:.75rem; font-size:.875rem; color:#94a3b8; }
.footer-links a { transition: color .2s, padding-left .2s; }
.footer-links a:hover { color:#f5a524; padding-left:4px; }
.social-icon {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #1e2733;
  display: flex; align-items: center; justify-content: center; color: #cbd5e1;
  transition: all .25s ease;
}
.social-icon:hover { background: #f5a524; color: #080b10; border-color: #f5a524; transform: translateY(-3px); }

/* ---------------------------------------------------------------------- */
/* Floating buttons                                                      */
/* ---------------------------------------------------------------------- */
.float-btn {
  position: fixed; right: 24px; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  z-index: 40; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
  transition: transform .3s ease, opacity .3s ease;
}
.float-whatsapp { bottom: 24px; background: #25D366; color: #fff; animation: pulsewa 2.4s ease-in-out infinite; }
.float-whatsapp:hover { transform: scale(1.1); }
@keyframes pulsewa {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5), 0 12px 30px -10px rgba(0,0,0,0.6); }
  50% { box-shadow: 0 0 0 10px rgba(37,211,102,0), 0 12px 30px -10px rgba(0,0,0,0.6); }
}
.float-top {
  bottom: 90px; background: #121924; color: #f5a524; border: 1px solid #1e2733;
  font-size: 1.1rem; opacity: 0; pointer-events: none; transform: translateY(10px);
}
.float-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.float-top:hover { background: #f5a524; color: #080b10; }

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                         */
/* ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .blob, .float-anim, .float-anim-slow, .marquee-track, .cta-glow, .animate-ping-slow, .float-whatsapp { animation: none; }
}