/* ===== Drive Klean — Hero banner image + Hero section ===== */
/* HERO BACKGROUND IMAGE — sits BEHIND the hero content/copy, not as a separate strip on top */
.hero-bg-image { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg-image img { width:100%; height:100%; object-fit:cover; opacity:0.22; filter:saturate(1.1); }
.hero-bg-image::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,var(--bg) 28%,rgba(16,26,44,0.55) 65%,rgba(16,26,44,0.85)),linear-gradient(0deg,var(--bg),transparent 30%); }

/* HERO */
.hero { position:relative; padding:150px 0 0; overflow:hidden; }
.hero-grid, .wave-divider { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center; padding-bottom:90px; }
.eyebrow { display:inline-block; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--blue-2); border:1px solid var(--line); padding:7px 16px; border-radius:999px; background:rgba(31,160,255,0.06); margin-bottom:22px; }
.hero h1 { font-family:var(--ff-display); font-size:52px; line-height:1.08; font-weight:800; letter-spacing:-0.5px; }
.grad-text { background:linear-gradient(100deg,var(--blue-1),var(--blue-3) 60%,var(--blue-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { margin-top:22px; font-size:17px; line-height:1.7; color:var(--muted); max-width:480px; }
.hero-cta { display:flex; gap:16px; margin-top:34px; }
.hero-trust { display:flex; gap:36px; margin-top:48px; }
.hero-trust div { display:flex; flex-direction:column; }
.hero-trust b { font-family:var(--ff-display); font-size:22px; color:var(--white); }
.hero-trust span { font-size:12.5px; color:var(--muted); margin-top:4px; }
.hero-visual { position:relative; display:flex; justify-content:center; }
.glass-card { background:linear-gradient(160deg,rgba(20,34,52,0.85),rgba(10,18,30,0.85)); border:1px solid var(--line); border-radius:var(--radius); backdrop-filter:blur(16px); box-shadow:0 30px 60px -20px rgba(0,0,0,0.6),var(--shadow-glow); }
/* Quick Booking (hero widget) — header ke color se match: black/dark glass, jaisa header ka hai */
.booking-mini { width:100%; max-width:380px; padding:28px; display:flex; flex-direction:column; gap:14px; background:rgba(6,10,18,0.75); border:1px solid var(--line); backdrop-filter:blur(14px); box-shadow:0 30px 60px -20px rgba(0,0,0,0.6),var(--shadow-glow); }
.booking-mini h4 { font-family:var(--ff-display); font-size:16px; margin-bottom:4px; color:var(--white); }
.booking-mini label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); font-weight:500; }
.booking-mini select, .booking-mini input { background:#0f1b2b; border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:10px; font-size:14px; font-family:var(--ff-body); }
.booking-mini select option { background:#0f1b2b; color:var(--white); }
.booking-mini select:focus, .booking-mini input:focus { outline:2px solid var(--blue-2); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.full { width:100%; justify-content:center; margin-top:6px; }
.droplet-anim { position:absolute; top:-30px; right:10px; width:46px; opacity:.85; animation:dropfall 3.2s ease-in-out infinite; }
@keyframes dropfall { 0%{transform:translateY(-6px);opacity:.4;} 50%{transform:translateY(10px);opacity:1;} 100%{transform:translateY(-6px);opacity:.4;} }
.wave-divider { line-height:0; }
.wave-divider svg { width:100%; height:70px; display:block; }
.wave-divider path { fill:var(--bg-soft); }