/* Modern, light, blue theme */
:root{
  --bg: #f8fbff;
  --bg-grad-1: #f0f7ff;
  --bg-grad-2: #e6f2ff;
  --ink: #0f172a;
  --muted: #64748b;
  --brand: #2563eb;
  --brand-ink: #1d4ed8;
  --brand-light: #dbeafe;
  --ring: #e2e8f0;
  --card: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Responsive font scale */
  --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --font-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --font-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --font-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --font-6xl: clamp(3.75rem, 3rem + 3.75vw, 5rem);
  
  /* Responsive spacing */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 5rem);
  --space-3xl: clamp(4rem, 3.2rem + 4vw, 6.5rem);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  /* iOS Safari fixes for viewport handling */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Prevent iOS Safari from changing viewport on orientation change */
  -webkit-overflow-scrolling: touch;
}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background: linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2) 60%, var(--bg)); line-height: 1.6; font-size: var(--font-base);
  /* iOS Safari fixes */
  -webkit-overflow-scrolling: touch;
  /* Prevent iOS Safari from changing viewport on scroll */
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem, 2vw, 2rem)}

/* Nav */
.nav{background: rgba(255,255,255,0.8); backdrop-filter: saturate(180%) blur(20px); border-bottom:1px solid var(--ring); position:sticky; top:0; z-index:20; box-shadow: var(--shadow-sm); 
  /* iOS Safari fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Prevent navbar from being cut off on iOS */
  position: -webkit-sticky;
  position: sticky;
  /* Handle iOS Safari address bar behavior */
  min-height: 60px;
  /* Ensure proper stacking context */
  isolation: isolate;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding: var(--space-md) clamp(1rem, 2vw, 2rem);}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; transition: transform 0.2s ease;}
.brand:hover .logo-img{transform: scale(1.05);}
.logo-img{width:60px; height:60px; object-fit:cover; object-position: center; transition: transform 0.2s ease;}
.brand-text{display:flex; flex-direction:column; gap:2px; justify-content:center; padding-top: 8px;}
.brand-name{font-family: 'Poppins', sans-serif; font-weight:800; font-size: var(--font-xl); letter-spacing: -0.02em; line-height: 1.1;}
.brand-subtitle{font-family: 'Inter', sans-serif; font-weight:500; font-size: var(--font-xs); color: var(--muted); letter-spacing: 0.02em; line-height: 1.2;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent; cursor:pointer; transition:.2s transform, .2s box-shadow, .2s background; font-size: var(--font-sm); min-height: 44px; /* Touch-friendly minimum */}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-lg);}
.btn-primary:hover{background:var(--brand-ink); transform:translateY(-2px); box-shadow:var(--shadow-xl);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--ring); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}


.nav-right{display:flex; align-items:center; gap:20px}
.nav-phone{color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:6px}

@media (max-width: 768px){
  .nav-inner{padding: var(--space-md) var(--space-lg);}
  .nav-right{gap: var(--space-sm);}
  .nav-phone{font-size: var(--font-sm);}
  .btn{padding: var(--space-sm) var(--space-md); font-size: var(--font-sm); min-height: 44px;}
}

@media (max-width: 640px){
  .container{padding: 0 var(--space-md);}
  .nav-inner{padding: var(--space-sm) var(--space-md);}
  .nav-right{gap: var(--space-xs);}
  .nav-phone{display: none;}
  .btn{padding: var(--space-xs) var(--space-sm); font-size: var(--font-xs); min-height: 44px;}
  .brand-name{font-size: var(--font-lg);}
  .brand-subtitle{font-size: var(--font-xs);}
  .logo-img{width: clamp(45px, 4vw, 50px); height: clamp(45px, 4vw, 50px);}
  
  /* Make the hero CTA button larger on mobile */
  .hero .btn {
    font-size: var(--font-lg);
    padding: var(--space-md) var(--space-lg);
    min-height: 52px;
  }
}

/* Button text responsive behavior */
.btn-text-full{display: inline;}
.btn-text-short{display: none;}

@media (max-width: 480px){
  .btn-text-full{display: none;}
  .btn-text-short{display: inline;}
  .btn{min-height: 48px; /* Larger touch target on very small screens */}
}

/* Location Banner */
.location-banner{background: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%); color: white; padding: 12px 0; position: relative; overflow: hidden;}
.location-banner::before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="rgba(255,255,255,0.1)"><circle cx="10" cy="10" r="2"/><circle cx="30" cy="10" r="2"/><circle cx="50" cy="10" r="2"/><circle cx="70" cy="10" r="2"/><circle cx="90" cy="10" r="2"/></svg>') repeat-x; animation: float 20s linear infinite;}
@keyframes float{0%{transform: translateX(-100px);}100%{transform: translateX(100px);}}
.location-content{display: flex; align-items: center; justify-content: center; gap: 24px; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px;}
.location-icon{font-size: 20px; animation: pulse 2s ease-in-out infinite;}
@keyframes pulse{0%, 100%{transform: scale(1);}50%{transform: scale(1.1);}}
.location-text{display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.location-label{font-size: 16px; font-weight: 500; opacity: 0.9; white-space: nowrap;}
.cities{display: flex; gap: 16px; flex-wrap: wrap;}
.city{background: rgba(255, 255, 255, 0.2); padding: 6px 14px; border-radius: 16px; font-weight: 600; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); transition: all 0.3s ease; color: white; text-decoration: none;}
.city:hover{background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); color: white; text-decoration: none;}
.location-badge{background: rgba(255, 255, 255, 0.2); padding: 6px 14px; border-radius: 16px; font-weight: 600; font-size: 13px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); animation: glow 2s ease-in-out infinite alternate; white-space: nowrap;}
@keyframes glow{from{box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);}to{box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);}}
@media (max-width: 768px){
  .location-banner{padding: 12px 0;}
  .location-content{flex-direction: row; gap: 16px; text-align: center; padding: 0 24px; justify-content: center;}
  .location-text{flex-direction: row; gap: 12px;}
  .cities{gap: 8px;}
  .city{font-size: 14px; padding: 6px 12px;}
  .location-badge{display: none;}
  .location-label{font-size: 14px;}
  .location-icon{display: none;}
}

@media (max-width: 480px){
  .location-banner{padding: 10px 0;}
  .location-content{gap: 12px; padding: 0 20px; justify-content: center;}
  .location-text{gap: 8px;}
  .cities{gap: 6px;}
  .city{font-size: 13px; padding: 5px 10px;}
  .location-badge{display: none;}
  .location-label{display: none;}
  .location-icon{display: none;}
}

@media (max-width: 360px){
  .location-banner{padding: 8px 0;}
  .location-content{gap: 8px; padding: 0 16px; justify-content: center;}
  .location-text{gap: 6px;}
  .cities{gap: 4px;}
  .city{font-size: 12px; padding: 4px 8px;}
  .location-badge{display: none;}
  .location-label{display: none;}
  .location-icon{display: none;}
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  /* This targets iOS Safari specifically */
  .nav {
    /* Ensure navbar stays visible during iOS Safari address bar transitions */
    position: -webkit-sticky;
    position: sticky;
    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Prevent navbar from being affected by iOS Safari's dynamic viewport */
    will-change: transform;
  }
  
  body {
    /* Use the full viewport height on iOS */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Ensure proper scrolling behavior on iOS */
  .hero, .steps, .services, .why-choose-us, .price-calculator, .reviews, .contact {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Navbar scroll behavior for iOS */
  .nav-scrolled {
    /* Ensure navbar stays visible when scrolling */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Force hardware acceleration during scroll */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* Use the dynamic viewport height for iOS */
@supports (-webkit-touch-callout: none) {
  .hero {
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* Hero */
.hero{padding: var(--space-3xl) 0;}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap: var(--space-2xl); align-items:center;}
@media (max-width: 920px){ 
  .hero-inner{grid-template-columns:1fr; gap: var(--space-2xl);} 
  .hero{padding: var(--space-2xl) 0;}
}
@media (max-width: 640px){
  .hero{padding: var(--space-2xl) 0;}
  .hero-inner{gap: var(--space-lg);}
}
.hero-copy h1{font-size: var(--font-6xl); line-height:1.1; margin:0 0 var(--space-md); font-weight:800; letter-spacing: -0.02em;}
.hero-copy .subtitle{font-size: var(--font-3xl); line-height:1.3; margin:0 0 var(--space-lg); font-weight:600; color: var(--muted); letter-spacing: 0.01em;}
.accent{color: var(--brand);}
.lead{font-size: var(--font-xl); color: var(--muted); margin: 0 0 var(--space-xl); line-height:1.6; font-weight: 400;}
@media (max-width: 640px){
  .hero-copy .subtitle{font-size: var(--font-xl); margin: 0 0 var(--space-md);}
  .lead{font-size: var(--font-lg); margin: 0 0 var(--space-lg);}
}
.cta{display:flex; gap: var(--space-md); flex-wrap:wrap}
@media (max-width: 640px){
  .cta{flex-direction: column; gap: var(--space-md);}
  .btn{width: 100%; justify-content: center;}
}

/* Cards */
.card{background:var(--card); border:1px solid var(--ring); border-radius:32px; box-shadow:var(--shadow-xl);}
.hero-visual{padding:0; border: none; background: transparent; box-shadow: none; overflow: hidden;}
.truck-hero{
  width:100%; 
  height:auto; 
  border-radius:24px; 
  display:block; 
  box-shadow: var(--shadow-xl);
  object-fit: contain;
  object-position: center;
  max-height: 500px;
}
@media (max-width: 920px){
  .truck-hero{
    max-height: 400px;
  }
}
@media (max-width: 640px){
  .truck-hero{
    max-height: 300px;
    border-radius: 16px;
  }
}

/* Steps Section */
/* Reviews Section */
.reviews{padding: var(--space-3xl) 0; background: var(--bg);}
.reviews-inner{text-align:center;}
.reviews-header{margin-bottom: var(--space-2xl);}
.reviews-header h2{font-size: var(--font-5xl); margin:0 0 var(--space-md); font-weight:800; letter-spacing: -0.02em;}
.reviews-header .lead{font-size: var(--font-xl); color: var(--muted); margin: 0; line-height:1.6;}
.reviews-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap: var(--space-xl); max-width:1200px; margin:0 auto;}
@media (max-width: 768px){ 
  .reviews{padding: var(--space-2xl) 0;}
  .reviews-grid{grid-template-columns:1fr; gap: var(--space-lg); max-width:400px;}
  .review-card{padding: var(--space-lg) var(--space-lg);}
}
@media (max-width: 640px){
  .reviews{padding: var(--space-2xl) 0;}
}
.review-card{background:var(--card); border:1px solid var(--ring); border-radius:24px; padding: var(--space-xl) var(--space-lg); text-align:left; box-shadow:var(--shadow-lg); transition:transform 0.3s ease, box-shadow 0.3s ease; display:flex; flex-direction:column; height:100%;}
.review-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-xl);}
.review-content{margin-bottom: var(--space-lg); flex-grow:1; display:flex; flex-direction:column;}
.stars{font-size: var(--font-xl); margin-bottom: var(--space-md); display:block;}
.review-text{color:var(--ink); line-height:1.6; margin:0; font-size: var(--font-base); font-style:italic; flex-grow:1;}
.review-author{border-top:1px solid var(--ring); padding-top: var(--space-md); margin-top:auto;}
.author-info{display:flex; flex-direction:column; gap: var(--space-xs);}
.author-name{font-weight:600; color:var(--ink); font-size: var(--font-base);}
.author-location{color:var(--muted); font-size: var(--font-sm); font-weight:500;}

.steps{padding: var(--space-3xl) 0; background: linear-gradient(180deg, var(--bg), var(--bg-grad-1));}
.steps-inner{text-align:center;}
.steps-header{margin-bottom: var(--space-2xl);}
.steps-header h2{font-size: var(--font-5xl); margin:0 0 var(--space-md); font-weight:800; letter-spacing: -0.02em;}
.steps-header .lead{font-size: var(--font-xl); color: var(--muted); margin: 0; line-height:1.6;}
.steps-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap: var(--space-xl); max-width:1200px; margin:0 auto;}
@media (max-width: 768px){ 
  .steps{padding: var(--space-2xl) 0;}
  .steps-grid{grid-template-columns:1fr; gap: var(--space-lg); max-width:400px;}
  .step-card{padding: var(--space-lg) var(--space-lg);}
  .step-card h3{font-size: var(--font-xl);}
  .step-card p{font-size: var(--font-sm);}
}

@media (max-width: 640px){
  .steps{padding: var(--space-2xl) 0;}
  .why-choose-us{padding: var(--space-2xl) 0;}
  .price-calculator{padding: var(--space-2xl) 0;}
}
.step-card{background:var(--card); border:1px solid var(--ring); border-radius:24px; padding: var(--space-xl) var(--space-lg); text-align:center; box-shadow:var(--shadow-lg); transition:transform 0.3s ease, box-shadow 0.3s ease;}
.step-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-xl);}
.step-number{display:inline-flex; align-items:center; justify-content:center; width: clamp(50px, 5vw, 60px); height: clamp(50px, 5vw, 60px); background:var(--brand); color:#fff; font-size: var(--font-2xl); font-weight:800; border-radius:50%; margin:0 auto var(--space-lg); box-shadow:var(--shadow-md);}
.step-card h3{font-size: var(--font-2xl); font-weight:700; margin:0 0 var(--space-md); color:var(--ink);}
.step-card p{color:var(--muted); line-height:1.6; margin:0; font-size: var(--font-base);}

/* Services Section */
.services{padding: var(--space-3xl) 0; background: linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg) 50%, var(--bg-grad-2) 100%); position: relative; overflow: hidden;}
.services-inner{text-align:center; position: relative; z-index: 1;}
.services-header{margin-bottom: var(--space-3xl);}
.services-header h2{font-size: var(--font-6xl); margin:0 0 var(--space-lg); font-weight:800; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--ink) 0%, var(--brand) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.services-header .lead{font-size: var(--font-xl); color: var(--muted); margin: 0; line-height:1.7; font-weight: 400; max-width: 600px; margin: 0 auto;}
.services-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap: var(--space-xl); max-width:1200px; margin:0 auto; justify-items:center;}
@media (max-width: 768px){ 
  .services{padding: var(--space-2xl) 0;}
  .services-grid{grid-template-columns:1fr; gap: var(--space-lg); max-width:500px;}
  .services-header{margin-bottom: var(--space-2xl);}
}
@media (max-width: 640px){
  .services{padding: var(--space-2xl) 0;}
  .services-header{margin-bottom: var(--space-2xl);}
}
.service-card{background: linear-gradient(145deg, var(--card) 0%, rgba(255, 255, 255, 0.8) 100%); border:1px solid var(--ring); border-radius:28px; padding: var(--space-2xl) var(--space-xl); text-align:center; box-shadow: var(--shadow-xl); transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; backdrop-filter: blur(20px); width: 100%; max-width: 500px;}
.service-card::before{content:''; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--brand), var(--brand-ink), var(--brand)); transform:scaleX(0); transition:transform 0.4s ease; transform-origin: left;}
.service-card::after{content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%); opacity:0; transition:opacity 0.4s ease; pointer-events: none;}
.service-icon{font-size: var(--font-5xl); width: clamp(80px, 8vw, 100px); height: clamp(80px, 8vw, 100px); background: linear-gradient(135deg, var(--brand-light) 0%, rgba(37, 99, 235, 0.1) 100%); border-radius:24px; display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-lg); border:3px solid var(--brand-light); transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}
.service-icon::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(135deg, var(--brand), var(--brand-ink)); opacity:0; transition:opacity 0.4s ease;}
.service-icon{position: relative; z-index: 1;}
.service-card h3{font-size: var(--font-3xl); font-weight:800; margin:0 0 var(--space-md); color:var(--ink); letter-spacing: -0.02em;}
.service-description{color:var(--muted); line-height:1.7; margin:0 0 var(--space-lg); font-size: var(--font-lg); font-weight: 400;}
.service-features{list-style:none; padding:0; margin:0; text-align:left; background: linear-gradient(135deg, var(--bg-grad-1) 0%, rgba(37, 99, 235, 0.02) 100%); border-radius:18px; padding: var(--space-lg); border:1px solid var(--ring);}
.service-features li{display:flex; align-items:center; gap: var(--space-md); padding: var(--space-sm) 0; color:var(--muted); font-size: var(--font-base); position:relative; padding-left: var(--space-lg); font-weight: 500; transition: color 0.3s ease;}
.service-features li::before{content:'✓'; position:absolute; left:0; color:var(--brand); font-weight:800; font-size: var(--font-lg); background: var(--brand-light); width: clamp(20px, 2vw, 24px); height: clamp(20px, 2vw, 24px); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;}

@media (max-width: 768px){
  .service-card{padding: var(--space-2xl) var(--space-lg); border-radius: 24px;}
  .service-card h3{font-size: var(--font-3xl);}
  .service-card p{font-size: var(--font-lg);}
  .service-icon{font-size: var(--font-5xl); width: clamp(80px, 8vw, 100px); height: clamp(80px, 8vw, 100px); border-radius: 24px;}
  .service-features{padding: var(--space-lg); border-radius: 16px;}
  .service-features li{font-size: var(--font-sm); padding: var(--space-sm) 0; padding-left: var(--space-lg);}
  .service-features li::before{width: clamp(18px, 2vw, 20px); height: clamp(18px, 2vw, 20px); font-size: var(--font-base);}
}

@media (max-width: 640px){
  .service-card{padding: var(--space-xl) var(--space-lg); border-radius: 20px;}
  .service-card h3{font-size: var(--font-2xl);}
  .service-card p{font-size: var(--font-base);}
  .service-icon{font-size: var(--font-4xl); width: clamp(70px, 7vw, 80px); height: clamp(70px, 7vw, 80px); border-radius: 20px;}
  .service-features{padding: var(--space-md); border-radius: 12px;}
  .service-features li{font-size: var(--font-sm); padding: var(--space-xs) 0; padding-left: var(--space-lg);}
  .service-features li::before{width: clamp(16px, 2vw, 18px); height: clamp(16px, 2vw, 18px); font-size: var(--font-sm);}
}

/* Why Choose Us Section */
.why-choose-us{padding: var(--space-3xl) 0; background: linear-gradient(180deg, var(--bg-grad-1), var(--bg));}
.why-choose-us-inner{text-align:center;}
.why-choose-us-header{margin-bottom: var(--space-2xl);}
.why-choose-us-header h2{font-size: var(--font-5xl); margin:0 0 var(--space-md); font-weight:800; letter-spacing: -0.02em;}
.why-choose-us-header .lead{font-size: var(--font-xl); color: var(--muted); margin: 0; line-height:1.6;}
.benefits-list{display:flex; flex-direction:column; gap: var(--space-lg); max-width:800px; margin:0 auto;}
.benefit-item{background: linear-gradient(135deg, var(--card) 0%, rgba(37, 99, 235, 0.02) 100%); border:1px solid var(--ring); border-radius:20px; padding:0; overflow:hidden; box-shadow:var(--shadow-md); transition:all 0.3s ease; position:relative;}
.benefit-item::before{content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(180deg, var(--brand), var(--brand-ink));}
.benefit-item:hover{transform:translateX(8px); box-shadow:var(--shadow-lg); border-color:var(--brand-light);}
.benefit-content{padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-2xl); display:flex; flex-direction:column; gap: var(--space-md);}
.benefit-header{display:flex; align-items:center; gap: var(--space-md);}
.benefit-badge{font-size: var(--font-3xl); width: clamp(48px, 5vw, 56px); height: clamp(48px, 5vw, 56px); background:var(--brand-light); border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:2px solid var(--brand-light);}
.benefit-item h3{font-size: var(--font-2xl); font-weight:700; margin:0; color:var(--ink);}
.benefit-item p{color:var(--muted); line-height:1.6; margin:0; font-size: var(--font-base);}
@media (max-width: 768px){ 
  .benefits-list{gap: var(--space-md); max-width:100%;}
  .benefit-content{padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);}
  .benefit-header{gap: var(--space-md);}
  .benefit-badge{width: clamp(44px, 4vw, 48px); height: clamp(44px, 4vw, 48px); font-size: var(--font-2xl);}
  .benefit-item h3{font-size: var(--font-xl);}
  .benefit-item p{font-size: var(--font-sm);}
}

/* Why Choose Us CTA - Small Version */
.why-choose-us-cta-small{text-align:center; margin-top: var(--space-xl); padding: var(--space-lg) 0; border-top: 1px solid var(--ring);}
.cta-content-small{display: flex; flex-direction: column; align-items: center; gap: var(--space-md);}
.why-choose-us-cta-small h4{font-size: var(--font-xl); font-weight:600; margin:0; color:var(--ink); letter-spacing: -0.01em;}

/* Larger font size for "Contáctanos ahora" button */
.why-choose-us-cta-small .btn{
  font-size: var(--font-lg);
  padding: var(--space-md) var(--space-xl);
  font-weight: 700;
}

@media (max-width: 768px){
  .why-choose-us-cta-small{margin-top: var(--space-lg);}
  .cta-content-small{gap: var(--space-sm);}
  .why-choose-us-cta-small h4{font-size: var(--font-lg);}
}

@media (max-width: 640px){
  .why-choose-us-cta-small{margin-top: var(--space-lg);}
  .why-choose-us-cta-small h4{font-size: var(--font-base);}
}


.contact-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.contact-actions .btn{
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-lg);
  font-weight: 700;
  border-radius: 16px;
  min-width: 200px;
  min-height: 48px; /* Touch-friendly */
}

.phone-link{
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-xl);
  transition: color 0.3s ease;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: transparent;
  min-height: 48px; /* Touch-friendly */
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-link:hover{
  color: var(--brand-ink);
  border-color: var(--brand-ink);
  background: var(--brand-light);
}

.service-areas{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.areas-label{
  font-size: var(--font-base);
  color: var(--muted);
  font-weight: 500;
}

.cities-list{
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.city-tag{
  background: var(--brand-light);
  color: var(--brand-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 600;
  border: 1px solid var(--brand-light);
  transition: all 0.3s ease;
}

.city-tag:hover{
  background: var(--brand);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}



/* Footer */
.footer{border-top:1px solid var(--ring); background:rgba(255,255,255,.8); backdrop-filter: saturate(180%) blur(10px);}
.footer-inner{padding:32px 0; text-align:center; color:var(--muted);}
.footer-content{display:flex; flex-direction:column; gap: var(--space-lg); align-items:center;}
.footer-links{text-align:center;}
.footer-links h4{font-size: var(--font-lg); font-weight:600; margin:0 0 var(--space-md); color:var(--ink);}
.footer-cities{display:flex; flex-wrap:wrap; gap: var(--space-md); justify-content:center; max-width:600px;}
.footer-cities a{color:var(--muted); text-decoration:none; font-size: var(--font-sm); font-weight:500; padding: var(--space-xs) var(--space-sm); border-radius:8px; transition:all 0.3s ease; border:1px solid transparent;}
.footer-cities a:hover{color:var(--brand); background:var(--brand-light); border-color:var(--brand-light); transform:translateY(-1px);}
.footer-copyright{margin-top: var(--space-md);}
.footer-copyright p{font-size: var(--font-sm); margin:0;}
.footer-copyright a{color:var(--brand); text-decoration:none; transition:color 0.3s ease;}
.footer-copyright a:hover{color:var(--brand-ink);}

@media (max-width: 768px){
  .footer-cities{gap: var(--space-sm);}
  .footer-cities a{font-size: var(--font-xs); padding: var(--space-xs);}
  .footer-links h4{font-size: var(--font-base);}
}

/* Price Calculator */
.price-calculator{padding: var(--space-3xl) 0; background: linear-gradient(180deg, var(--bg-grad-1), var(--bg));}
.calculator-header{text-align:center; margin-bottom: var(--space-2xl);}
.calculator-header h2{font-size: var(--font-5xl); margin:0 0 var(--space-md); font-weight:800; letter-spacing: -0.02em;}
.calculator-header .lead{font-size: var(--font-xl); color: var(--muted); margin: 0; line-height:1.6;}

.calculator-container{display:grid; grid-template-columns:1.2fr 0.8fr; gap: var(--space-2xl); align-items:start; max-width:1400px; margin:0 auto;}
@media (max-width: 1024px){ .calculator-container{grid-template-columns:1fr; gap: var(--space-2xl);} }
@media (max-width: 640px){ .calculator-container{gap: var(--space-lg);} }

.calculator-form{display:flex; flex-direction:column; gap: var(--space-2xl);}
.form-section{background:var(--card); border:1px solid var(--ring); border-radius:24px; padding: var(--space-lg); box-shadow:var(--shadow-lg);}
.form-section h3{font-size: var(--font-2xl); font-weight:700; margin:0 0 var(--space-lg); color:var(--ink); display:flex; align-items:center; gap: var(--space-sm);}

@media (max-width: 640px){
  .calculator-form{gap: var(--space-lg);}
  .form-section{padding: var(--space-lg); border-radius: 16px;}
  .form-section h3{font-size: var(--font-xl); margin: 0 0 var(--space-md);}
}

@media (max-width: 480px){
  .calculator-form{gap: var(--space-lg);}
  .form-section{padding: var(--space-md); border-radius: 12px;}
  .form-section h3{font-size: var(--font-lg); margin: 0 0 var(--space-md);}
}

@media (max-width: 360px){
  .calculator-form{gap: var(--space-md);}
  .form-section{padding: var(--space-sm); border-radius: 10px;}
  .form-section h3{font-size: var(--font-base); margin: 0 0 var(--space-sm);}
}

/* Room Selector */
.room-selector{display:grid; gap: var(--space-md);}
.room-option{display:flex; align-items:center; gap: var(--space-md); padding: var(--space-md); border:2px solid var(--ring); border-radius:16px; cursor:pointer; transition:all 0.3s ease; background:#fff; position:relative; overflow:hidden; min-height: 60px; /* Touch-friendly */}
.room-option::before{content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--brand); transform:scaleY(0); transition:transform 0.3s ease;}
.room-option:hover{border-color:var(--brand-light); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.room-option.selected{border-color:var(--brand); background:var(--brand-light); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.room-option.selected::before{transform:scaleY(1);}
.room-icon{font-size: var(--font-3xl); width: clamp(48px, 5vw, 56px); height: clamp(48px, 5vw, 56px); background:var(--brand-light); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.3s ease;}
.room-option.selected .room-icon{background:var(--brand); color:#fff;}
.room-info{flex:1; display:flex; flex-direction:column; gap: var(--space-xs);}
.room-name{font-size: var(--font-lg); font-weight:600; color:var(--ink);}
.room-desc{font-size: var(--font-sm); color:var(--muted);}
.room-price{font-size: var(--font-xl); font-weight:700; color:var(--brand);}

@media (max-width: 640px){
  .room-selector{gap: var(--space-md);}
  .room-option{padding: var(--space-lg); gap: var(--space-lg); min-height: 72px;}
  .room-icon{font-size: var(--font-3xl); width: clamp(56px, 6vw, 64px); height: clamp(56px, 6vw, 64px);}
  .room-name{font-size: var(--font-lg);}
  .room-desc{font-size: var(--font-sm);}
  .room-price{font-size: var(--font-xl);}
}

@media (max-width: 480px){
  .room-selector{gap: var(--space-sm);}
  .room-option{padding: var(--space-md); gap: var(--space-md); border-radius: 14px; min-height: 64px;}
  .room-icon{font-size: var(--font-2xl); width: clamp(48px, 5vw, 52px); height: clamp(48px, 5vw, 52px); border-radius: 10px;}
  .room-name{font-size: var(--font-base);}
  .room-desc{font-size: var(--font-sm);}
  .room-price{font-size: var(--font-lg);}
}

@media (max-width: 360px){
  .room-selector{gap: var(--space-sm);}
  .room-option{padding: var(--space-sm); gap: var(--space-sm); border-radius: 12px; min-height: 56px;}
  .room-icon{font-size: var(--font-xl); width: clamp(40px, 4vw, 44px); height: clamp(40px, 4vw, 44px); border-radius: 8px;}
  .room-name{font-size: var(--font-sm);}
  .room-desc{font-size: var(--font-xs);}
  .room-price{font-size: var(--font-base);}
}



/* Calculator Result */
.calculator-result{position:sticky; top: var(--space-3xl);}
.result-card{background:var(--card); border:1px solid var(--ring); border-radius:24px; padding: var(--space-lg); box-shadow:var(--shadow-xl); position:relative; overflow:hidden;}
.result-card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--brand), var(--brand-ink));}
.result-header{margin-bottom: var(--space-lg); text-align:center;}
.result-header h3{font-size: var(--font-xl); font-weight:600; margin:0 0 var(--space-md); color:var(--ink);}
.result-price{display:flex; flex-direction:column; align-items:center; gap: var(--space-xs);}
.price-amount{font-size: var(--font-5xl); font-weight:800; color:var(--brand); line-height:1; transition:all 0.3s ease;}
.price-note{font-size: var(--font-sm); color:var(--muted); font-weight:500;}

.result-breakdown{background:var(--bg-grad-1); border-radius:12px; padding: var(--space-md); margin-bottom: var(--space-lg); border:1px solid var(--ring);}
.breakdown-item{display:flex; justify-content:space-between; align-items:center; padding: var(--space-xs) 0; border-bottom:1px solid var(--ring);}
.breakdown-item:last-child{border-bottom:none; font-weight:600; color:var(--ink);}
.breakdown-item span:first-child{color:var(--muted); font-size: var(--font-sm);}
.breakdown-item span:last-child{font-weight:600; color:var(--ink);}
.breakdown-item.discount span:last-child{color:var(--success);}
.breakdown-item.total{border-top:2px solid var(--brand); margin-top: var(--space-xs); padding-top: var(--space-sm); font-size: var(--font-base);}
.breakdown-item.total span:last-child{color:var(--brand); font-size: var(--font-lg);}

.result-actions{display:flex; flex-direction:column; gap: var(--space-sm); margin-bottom: var(--space-md);}
.result-actions .btn{
  font-size: var(--font-lg);
  padding: var(--space-md) var(--space-lg);
  font-weight: 700;
}
.result-note{background:var(--brand-light); border-radius:12px; padding: var(--space-md); border:1px solid var(--brand-light);}
.result-note p{margin:0; font-size: var(--font-sm); color:var(--brand-ink); line-height:1.5;}

/* Animations */
@keyframes priceUpdate{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}
.price-amount.updating{animation:priceUpdate 0.3s ease;}

/* WhatsApp Floating Action Button */
.wa-fab{position:fixed; right:24px; bottom:24px; background:#25D366; color:#fff; font-weight:800; text-decoration:none; padding:16px 20px; border-radius:999px; box-shadow:var(--shadow-xl); transition:transform 0.2s ease, box-shadow 0.2s ease; display:flex; align-items:center; gap:8px; z-index:9999;}
.wa-fab:hover{filter:brightness(0.95); transform:translateY(-2px); box-shadow:0 20px 40px rgba(0,0,0,.2);}
.wa-fab svg{flex-shrink:0;}

/* Contact */
.contact{padding: var(--space-3xl) 0; text-align: center;}
.contact-content{display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; max-width: 1200px; margin: 0 auto;}
.contact-visual{display: flex; justify-content: center; align-items: center;}
.house-image{width: 100%; max-width: 400px; height: auto; border-radius: 24px; box-shadow: var(--shadow-xl); object-fit: contain;}
.contact-text{text-align: left;}
.contact h2{font-size: var(--font-5xl); margin:0 0 var(--space-lg); font-weight:800; letter-spacing: -0.02em;}
.contact-subtitle{font-size: var(--font-xl); margin-bottom: var(--space-md); line-height:1.6; color: var(--muted);}
.effortless-reminder{font-size: var(--font-base); margin-bottom: var(--space-2xl); line-height:1.6; color: var(--brand); font-weight:600; font-style:italic;}

.contact-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.contact-actions .btn{
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-lg);
  font-weight: 700;
  border-radius: 16px;
  min-width: 200px;
  min-height: 48px; /* Touch-friendly */
}

.phone-link{
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-xl);
  transition: color 0.3s ease;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: transparent;
  min-height: 48px; /* Touch-friendly */
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-link:hover{
  color: var(--brand-ink);
  border-color: var(--brand-ink);
  background: var(--brand-light);
}

.service-areas{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.areas-label{
  font-size: var(--font-base);
  color: var(--muted);
  font-weight: 500;
}

.cities-list{
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.city-tag{
  background: var(--brand-light);
  color: var(--brand-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 600;
  border: 1px solid var(--brand-light);
  transition: all 0.3s ease;
}

.city-tag:hover{
  background: var(--brand);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 920px){
  .contact-content{
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
  }
  .contact-text{
    text-align: center;
  }
  .contact-actions{
    justify-content: center;
  }
  .service-areas{
    justify-content: center;
  }
}

@media (max-width: 640px){ 
  .contact{padding: var(--space-2xl) 0;}
  .contact-content{
    gap: var(--space-lg);
  }
  .house-image{
    max-width: 300px;
    border-radius: 16px;
  }
  .contact-subtitle{
    font-size: var(--font-lg);
    margin-bottom: var(--space-xl);
  }
  .contact-actions{
    flex-direction: column;
    gap: var(--space-md);
  }
  .contact-actions .btn{
    min-width: auto;
    width: 100%;
    min-height: 48px;
  }
  .phone-link{
    width: 100%;
    text-align: center;
    min-height: 48px;
  }
  .service-areas{
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* City Services Section */
.city-services{padding:80px 0; background:var(--bg-grad-1);}
.city-services-inner{max-width:1200px; margin:0 auto; padding:0 32px;}
.city-services-header{text-align:center; margin-bottom:60px;}
.city-services-header h2{font-size:2.5rem; font-weight:800; margin-bottom:16px; color:var(--ink);}
.city-services-header .lead{font-size:1.2rem; color:var(--muted); max-width:600px; margin:0 auto;}

.cities-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:32px; margin-top:40px;}
.city-card{background:var(--card); padding:32px; border-radius:16px; box-shadow:var(--shadow-md); border:1px solid var(--ring); transition:.2s transform, .2s box-shadow;}
.city-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-xl);}
.city-card h3{font-size:1.5rem; font-weight:700; margin-bottom:16px; color:var(--brand);}
.city-card p{color:var(--muted); margin-bottom:20px; line-height:1.6;}
.city-features{list-style:none; padding:0; margin:0;}
.city-features li{padding:8px 0; color:var(--ink); position:relative; padding-left:20px;}
.city-features li:before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:bold;}

@media (max-width: 768px){
  .contact{padding:60px 0;}
  .contact-content{grid-template-columns:1fr; gap:40px; text-align:center;}
  .contact-text h2{font-size:2rem;}
  .contact-subtitle{font-size:1.1rem;}
  .guarantee{grid-template-columns:1fr; gap:12px;}
  .guarantee-item{justify-content:center;}
  .cities-list{justify-content:center;}
  
  .city-services{padding:60px 0;}
  .city-services-inner{padding:0 24px;}
  .city-services-header h2{font-size:2rem;}
  .city-services-header .lead{font-size:1.1rem;}
  .cities-grid{grid-template-columns:1fr; gap:24px;}
  .city-card{padding:24px;}
}