:root{
  --font-main:"Manrope","Inter",system-ui,-apple-system,sans-serif;
  --color-text:#333;
  --color-muted:#444;
  --dp-primary:#2563eb;
  --dp-primary-hover:#1d4ed8;
  --dp-glass-bg:rgba(255,255,255,.65);
  --dp-glass-border:rgba(255,255,255,.4);
  --dp-muted:#9ca3af;
  --dp-hover:rgba(37,99,235,.08);
  --dp-today:rgba(37,99,235,.12);
  --dp-range:rgba(37,99,235,.06);
  --dp-radius:1rem;
  --dp-shadow:0 20px 50px rgba(0,0,0,.15);
  --dp-blur:18px;
  --dp-transition:all .18s ease;
}
.hero-head{max-width:1100px;margin:0 auto 80px}
#teaser-2.hero{padding:120px 0 100px;position:relative;text-align:center}
.hero-head h1{font-size:clamp(54px,5vw,88px);font-weight:630;line-height:1.04;letter-spacing:-.035em;margin-bottom:36px;padding-bottom:.06em;color:var(--color-text);text-wrap:balance;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.hero-head h2{font-size:clamp(18px,1.2vw,21px);font-weight:430;line-height:1.75;letter-spacing:.015em;color:var(--color-muted);max-width:680px;margin:0 auto;text-wrap:balance}
.hero-head h1,.hero-head h2{opacity:0;transform:translateY(18px);animation:heroFade 1.6s cubic-bezier(.22,1,.36,1) forwards}
.hero-head h2{animation-delay:.35s}
@keyframes heroFade{to{opacity:1;transform:translateY(0)}}
.hero-booking-wrapper{display:flex;justify-content:center}
.hero-booking-card{padding:40px;width:100%;max-width:900px;margin-bottom:200px}
.hero-rental-details{border-top:1px solid #eee;padding-top:20px}
.hero-benefits{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;font-size:14px;color:#555}
.hero-benefits span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-benefits img{width:18px;height:18px}
.hero-booking-form .form-control,.hero-booking-form .form-select{height:58px;padding:0 10px;cursor:pointer;font-size:16px;font-weight:500;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;line-height:58px}
.hero-booking-form .form-select{text-align-last:center;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.hero-booking-form .form-control:focus,.hero-booking-form .form-select:focus{border-color:#B22424;box-shadow:0 0 0 4px rgba(178,36,36,.08);background:#fff}
.hero-booking-form .row{display:flex;flex-wrap:wrap;row-gap:12px}
.datepicker{direction:ltr;font-size:.875rem}
.datepicker.dropdown-menu{position:absolute;z-index:1080;min-width:300px;padding:.75rem;background:var(--dp-glass-bg);backdrop-filter:blur(var(--dp-blur));-webkit-backdrop-filter:blur(var(--dp-blur));border:1px solid var(--dp-glass-border);border-radius:12px;box-shadow:var(--dp-shadow);line-height:1.8;display:none}
.datepicker table{width:100%;margin:0;border-collapse:separate;user-select:none}
.datepicker th,.datepicker td{width:40px;height:36px;padding:4px 6px;text-align:center;border:none;border-radius:.75rem;line-height:1.4;transition:var(--dp-transition)}
.datepicker thead th{font-weight:600;cursor:pointer;border-radius:.75rem}
.datepicker thead th:hover{background:var(--dp-hover)}
.datepicker th.datepicker-switch{width:150px;font-weight:600;letter-spacing:.02em}
.datepicker .prev,.datepicker .next{font-size:1.4rem;font-weight:600;cursor:pointer;border-radius:.75rem}
.datepicker .prev:hover,.datepicker .next:hover{background:var(--dp-hover)}
.datepicker td.day:hover,.datepicker td span:hover{background:var(--dp-hover);cursor:pointer}
.datepicker .old,.datepicker .new,.datepicker .disabled{color:var(--dp-muted);cursor:not-allowed}
.datepicker .today{background:var(--dp-today);font-weight:600}
.datepicker .active,.datepicker .selected{background:var(--dp-primary);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.35)}
.datepicker .active:hover,.datepicker .selected:hover{background:var(--dp-primary-hover)}
.datepicker .range{background:var(--dp-range);border-radius:0}
.datepicker td span{display:block;float:left;width:25%;height:52px;line-height:52px;border-radius:.75rem;transition:var(--dp-transition)}
.datepicker>div{display:none}
.datepicker.days .datepicker-days,.datepicker.months .datepicker-months,.datepicker.years .datepicker-years{display:block}
@media (max-width:992px){
.hero{padding:0;text-align:center}
.hero-booking-form .row{display:flex;flex-wrap:wrap;row-gap:12px}
.hero-booking-form .col-md-6{padding-left:4px;padding-right:4px}
.hero-booking-form .col-md-6:nth-child(1),.hero-booking-form .col-md-6:nth-child(3){flex:0 0 70%;max-width:70%}
.hero-booking-form .col-md-6:nth-child(2),.hero-booking-form .col-md-6:nth-child(4){flex:0 0 30%;max-width:30%}
.hero-booking-form .form-control,.hero-booking-form .form-select{height:52px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#f7f7f8;font-size:1rem;box-shadow:none}
.hero-booking-form .form-control:focus,.hero-booking-form .form-select:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.hero-booking-form .form-select{padding-right:12px;text-align:center;background-image:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.datepicker.dropdown-menu{left:50%!important;transform:translateX(-50%);min-width:320px;max-width:420px;width:90vw;padding:1rem;border-radius:1.75rem}
.datepicker th,.datepicker td{width:14.28%;height:44px;padding:6px 4px;font-size:1.05rem}
.datepicker th.datepicker-switch{width:auto;font-size:1.1rem}
.datepicker .prev,.datepicker .next{font-size:1.6rem}
.datepicker td span{width:25%;height:70px;line-height:70px;font-size:1.05rem}
}
@media (max-width:768px){
.hero-head{margin:0 auto 35px}
#teaser-2.hero{padding:45px 0 0 0}
.hero-booking-form .col-md-6:nth-child(1),.hero-booking-form .col-md-6:nth-child(3){flex:0 0 72%;max-width:72%}
.hero-booking-form .col-md-6:nth-child(2),.hero-booking-form .col-md-6:nth-child(4){flex:0 0 28%;max-width:28%}
.hero-booking-form .form-control,.hero-booking-form .form-select{height:54px;line-height:1.4;font-size:1.05rem;border-radius:12px}
.datepicker.dropdown-menu{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%);width:94vw;max-width:420px;padding:1.25rem;border-radius:2rem}
.datepicker th,.datepicker td{width:14.28%;height:50px;padding:6px 2px;font-size:1.15rem}
.datepicker th.datepicker-switch{font-size:1.2rem;font-weight:600}
.datepicker .prev,.datepicker .next{font-size:1.8rem}
.datepicker td span{width:25%;height:78px;line-height:78px;font-size:1.15rem}
.hero-head h1{font-size:32px}
.hero-booking-card{padding:28px}
}