/* ═══════════════════════════════════════════════
   ROWERRENT B2B — DYNAMIC ENHANCEMENTS v1.0
   ═══════════════════════════════════════════════ */

/* ── Custom properties override / extend ── */
:root {
  --blue-glow:    rgba(42, 110, 187, 0.35);
  --blue-glow-sm: rgba(42, 110, 187, 0.15);
  --green-accent: #22c55e;
  --amber-accent: #f59e0b;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════
   1. ENHANCED SCROLL REVEAL
   ══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--transition-smooth),
              transform .7s var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Alternate directions */
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: translateY(16px) scale(0.96); }
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible { transform: translateX(0) translateY(0) scale(1); }

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .28s; }
.reveal-delay-4 { transition-delay: .38s; }

/* ══════════════════════════════════════════
   2. NAVBAR — Active indicator + underline
   ══════════════════════════════════════════ */
nav {
  transition: background .3s, box-shadow .3s, height .3s;
}
nav.scrolled {
  background: rgba(10, 14, 34, 0.98) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.4);
  height: 64px;
}
.nav-btn {
  position: relative;
  overflow: hidden;
  transition: background .25s, border-color .25s, transform .2s, box-shadow .25s !important;
}
.nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%);
  transition: transform .3s var(--transition-smooth);
}
.nav-btn:hover::before { transform: translateX(0); }
.nav-btn:hover {
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   3. HERO SLIDER — Ken Burns + text entrance
   ══════════════════════════════════════════ */

/* Smoother slide transition with fade */
.slide {
  animation: none;
  transition: opacity .5s ease;
}
.slide:not(.active) { opacity: 0; pointer-events: none; }
.slide.active { opacity: 1; }

/* Ken Burns enhanced */
.slide .slide-bg {
  transform: scale(1.08);
  transition: transform 8s ease !important;
}
.slide.active .slide-bg {
  transform: scale(1) !important;
}

/* Slide content entrance animation */
.slide.active .slide-eyebrow {
  animation: slideUp .6s var(--transition-spring) .15s both;
}
.slide.active h1 {
  animation: slideUp .7s var(--transition-spring) .25s both;
}
.slide.active .slide-sub {
  animation: slideUp .6s var(--transition-spring) .4s both;
}
.slide.active .slide-btn {
  animation: slideUp .6s var(--transition-spring) .55s both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Enhanced slide button */
.slide-btn {
  position: relative;
  overflow: hidden;
  gap: 8px;
  transition: transform .25s var(--transition-spring), background .2s, box-shadow .25s !important;
}
.slide-btn::after {
  content: '→';
  font-size: 16px;
  transform: translateX(0);
  transition: transform .25s var(--transition-spring);
  display: inline-block;
}
.slide-btn:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transform: translateY(-3px) !important;
}
.slide-btn:hover::after {
  transform: translateX(4px);
}

/* Gradient progress bar under slider */
.slider-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(42,110,187,0.3) 100%);
  transform-origin: left;
  animation: sliderProgress 6s linear infinite;
  z-index: 20;
}
@keyframes sliderProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Enhanced arrows */
.sl-arr {
  transition: background .2s, transform .2s var(--transition-spring), opacity .2s !important;
}
.sl-arr:hover {
  transform: translateY(-50%) scale(1.12) !important;
  background: rgba(255,255,255,0.28) !important;
}

/* ══════════════════════════════════════════
   4. STATBAR — Gradient + animated border
   ══════════════════════════════════════════ */
.statbar {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fafaf8 100%);
  overflow: hidden;
}
.statbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(42,110,187,0.04) 25%,
    rgba(42,110,187,0.04) 75%,
    transparent 100%);
  pointer-events: none;
}
.statitem {
  transition: background .25s, transform .25s;
  cursor: default;
}
.statitem:hover {
  background: rgba(42,110,187,0.04);
}
.statitem:hover .statnum {
  color: var(--blue);
}
.statnum {
  transition: color .3s;
}

/* ══════════════════════════════════════════
   5. WHY CARDS — dark navy hover + shimmer
   ══════════════════════════════════════════ */
.why-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: var(--white);
  transition: background .35s, border-color .35s, transform .4s var(--transition-spring), box-shadow .4s !important;
}
/* shimmer sweep on hover */
.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(255,255,255,0.03) 35%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.03) 65%,
    transparent 100%);
  background-size: 250% 250%;
  background-position: 0% 0%;
  opacity: 0;
  transition: opacity .3s, background-position .7s ease;
  pointer-events: none;
  z-index: 1;
}
.why-card:hover::before {
  opacity: 1;
  background-position: 100% 100%;
}
.why-card::after { display: none; }

.why-card:hover {
  background: #0f1c38 !important;
  border-color: #0f1c38 !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 56px rgba(15,28,56,0.22), 0 4px 16px rgba(0,0,0,0.1) !important;
}
.why-card:hover h3 { color: #fff; }
.why-card:hover p  { color: rgba(255,255,255,0.6); }
.why-card h3, .why-card p { transition: color .3s; }

/* Icon on hover */
.why-icon {
  transition: background .3s, transform .35s var(--transition-spring);
  position: relative; z-index: 2;
}
.why-card:hover .why-icon {
  background: rgba(255,255,255,0.12);
  transform: scale(1.08) rotate(-3deg);
  box-shadow: none;
}
.why-card:hover .why-icon svg { stroke: #fff !important; }
.why-icon svg { transition: stroke .3s; }

/* ══════════════════════════════════════════
   6. STEPS — dark cards, no hover override needed
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   7. REVIEW CARDS — Elevated + star rating
   ══════════════════════════════════════════ */
.rcard {
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .4s var(--transition-spring), box-shadow .4s !important;
}
.rcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #5b9fe8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--transition-smooth);
}
.rcard:hover::before { transform: scaleX(1); }
.rcard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05) !important;
  border-color: rgba(42,110,187,0.2) !important;
}
/* Avatar glow on hover */
.rcard:hover .ravatar {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}
.ravatar {
  transition: background .3s, border-color .3s, color .3s;
}
/* Star rating display */
.rcard-stars {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}
.rcard-stars svg {
  width: 13px;
  height: 13px;
  fill: var(--amber-accent);
}

/* ══════════════════════════════════════════
   8. FAQ — Enhanced interactions
   ══════════════════════════════════════════ */
.faq-item {
  transition: background .2s;
}
.faq-q {
  transition: color .2s, padding-left .2s !important;
}
.faq-q.open {
  color: var(--black);
  padding-left: 4px;
}
.faq-q:hover {
  padding-left: 4px !important;
}
.faq-icon {
  transition: all .3s var(--transition-spring) !important;
}
.faq-q.open .faq-icon {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 4px 12px var(--blue-glow-sm);
  transform: scale(1.08);
}

/* ══════════════════════════════════════════
   9. FORM — Floating label + focus glow
   ══════════════════════════════════════════ */
.form-dark {
  position: relative;
  overflow: hidden;
}
/* Subtle animated background gradient */
.form-dark::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse,
    rgba(42,110,187,0.12) 0%,
    transparent 70%);
  animation: floatGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.form-dark::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse,
    rgba(42,110,187,0.08) 0%,
    transparent 70%);
  animation: floatGlow 10s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes floatGlow {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3%, 5%) scale(1.05); }
}

/* Input focus — stays dark, subtle blue ring */
.form-dark input:focus,
.form-dark select:focus,
.form-dark textarea:focus {
  border-color: rgba(42,110,187,0.7) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 3px rgba(42,110,187,0.12) !important;
  outline: none;
}
/* Neutral hover state for inputs — no colour change */
.form-dark input:hover,
.form-dark select:hover,
.form-dark textarea:hover {
  border-color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Submit button */
.sbtn {
  position: relative;
  overflow: hidden;
  transition: background .25s, transform .25s var(--transition-spring), box-shadow .25s !important;
}
.sbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(42,110,187,0.1) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s var(--transition-smooth);
}
.sbtn:hover::before { transform: translateX(100%); }
.sbtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
}

/* ══════════════════════════════════════════
   10. PARTNERS MARQUEE — Fade + hover
   ══════════════════════════════════════════ */
.partner-img {
  transition: filter .3s, transform .35s var(--transition-spring), opacity .3s !important;
  filter: grayscale(20%) !important;
}
.partner-img:hover {
  filter: grayscale(0%) !important;
  transform: scale(1.1) translateY(-3px) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   12. FLOATING BACKGROUND SHAPES
   ══════════════════════════════════════════ */
.sec-white {
  position: relative;
  overflow: hidden;
}
.sec-white::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(42,110,187,0.05) 0%,
    transparent 70%);
  animation: pulseShape 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseShape {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%       { transform: scale(1.2) translate(-10px, 10px); }
}

/* ══════════════════════════════════════════
   13. EYEBROW PILL — Hover micro
   ══════════════════════════════════════════ */
.eyebrow {
  transition: background .25s, border-color .25s, transform .25s var(--transition-spring);
  cursor: default;
}
.eyebrow:hover {
  background: var(--blue-light);
  border-color: rgba(42,110,187,0.3);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   14. MAP — City dots pulse
   ══════════════════════════════════════════ */
.map-img-wrap {
  position: relative;
}
.map-img {
  transition: filter .3s, transform .5s var(--transition-smooth);
}
.map-img-wrap:hover .map-img {
  filter: contrast(1.05) saturate(1.1);
}

/* ══════════════════════════════════════════
   15. FOOTER SOCIAL — Color on hover
   ══════════════════════════════════════════ */
.fsoc {
  transition: background .25s, transform .3s var(--transition-spring), box-shadow .25s !important;
}
.fsoc:hover {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

/* ══════════════════════════════════════════
   16. LOADING / PAGE ENTRANCE
   ══════════════════════════════════════════ */
body {
  animation: pageFadeIn .4s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════
   17. CUSTOM SCROLLBAR
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue), #5b9fe8);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ══════════════════════════════════════════
   18. SELECTION COLOR
   ══════════════════════════════════════════ */
::selection {
  background: rgba(42,110,187,0.2);
  color: var(--black);
}

/* ══════════════════════════════════════════
   19. SMOOTH ANCHOR PADDING
   ══════════════════════════════════════════ */
[id] { scroll-margin-top: 80px; }

/* ══════════════════════════════════════════
   20. SECTION DIVIDERS — Subtle wave
   ══════════════════════════════════════════ */
.statbar {
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

/* Animate the check icons */
.chk {
  transition: transform .3s var(--transition-spring), box-shadow .3s;
}
.check-list li:hover .chk {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 4px 12px rgba(42,110,187,0.3);
}
.check-list li {
  transition: color .2s, padding-left .2s var(--transition-spring);
  cursor: default;
}
.check-list li:hover {
  color: var(--black);
}

/* ══════════════════════════════════════════
   22. CITY PILLS — mobile responsive
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .city-list { gap: 6px; }
  .city-pill { font-size: 13px; padding: 8px 14px; }
}
.why-list li {
  transition: color .2s, padding-left .2s;
}
.why-list li:hover {
  color: rgba(255,255,255,0.85);
  padding-left: 6px;
}
.wli {
  transition: transform .3s var(--transition-spring);
}
.why-list li:hover .wli {
  transform: scale(1.5);
}