:root{
  --bg:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text:#12263f;
  --muted:#607086;
  --line:#d9e1eb;
  --blue:#123f73;
  --blue-2:#1f5da5;
  --blue-soft:#eaf1fa;
  --green:#2d9f4b;
  --orange:#d98b1e;
  --red:#cf4f49;
  --shadow:0 18px 40px rgba(19, 40, 67, 0.08);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(31,93,165,.06), transparent 28%),
    linear-gradient(180deg,#f8fafc 0%, var(--bg) 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 26px}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(217,225,235,.8);
}
.header-inner{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-icon{
  width:58px;
  height:58px;
  color:var(--blue-2);
}
.brand-icon svg{width:100%;height:100%}
.brand-text{
  font-size:2rem;
  color:#334966;
  letter-spacing:-0.03em;

}
.brand-text strong{
  color:var(--blue);
  font-weight:800;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.mini-icon{
  width:34px;
  height:34px;
  color:#36506d;
}
.mini-icon svg{width:100%;height:100%}
.header-btn{
  background:var(--blue);
  color:#fff;
  border-radius:12px;
  padding:16px 24px;
  font-weight:700;
  box-shadow:var(--shadow);
}

.page{
  padding:34px 0 110px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.04fr;
  gap:30px;
  align-items:start;
}
.trust-panel,.booking-panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(217,225,235,.75);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.trust-panel{
  padding:34px;
}
.booking-panel{
  padding:30px;
}
.eyebrow,.section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue-2);
  font-weight:700;
  font-size:.92rem;
}
.trust-panel h1{
  font-size:1.8rem;
  line-height:1.02;
  letter-spacing:-0.045em;
  margin:18px 0 14px;
  color:#163355;
}
.subline{
  margin:0;
  color:var(--muted);
  font-size:1.1rem;
  line-height:1.6;
  max-width:52ch;
}
.facts{
  list-style:none;
  padding:0;
  margin:26px 0;
  display:grid;
  gap:14px;
}
.facts li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.12rem;
  color:#304964;
}
.facts span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue-2);
  font-weight:800;
}
.price-box{
  display:flex;
  align-items:center;
  gap:18px;
  background:linear-gradient(180deg,#f8fbff,#eef4fb);
  border:1px solid #d9e5f4;
  border-radius:18px;
  padding:18px 20px;
}
.price{
  font-size:2.2rem;
  font-weight:400;
  color:var(--blue);
  letter-spacing:-0.04em;
}
.price-copy{
  color:#445f7b;
  font-size:1rem;
}
.cta-row{
  display:flex;
  gap:14px;
  margin:24px 0 18px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  border-radius:12px;
  font-weight:800;
  border:none;
  cursor:pointer;
  padding:0 22px;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 24px rgba(45,159,75,.18);
}
.btn-secondary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 24px rgba(18,63,115,.16);
}
.assurance{
  color:#6a7b90;
  font-size:.96rem;
  line-height:1.5;
  border-top:1px solid var(--line);
  padding-top:16px;
}

.booking-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.booking-head h2{
  margin:10px 0 0;
  font-size:2.2rem;
  letter-spacing:-0.04em;
  color:#1a3557;
}
.location-badge{
  background:#f7f9fc;
  border:1px solid var(--line);
  color:#3f5874;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}
.day-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.day-card{
  background:#fff;
  border:1px solid #e3eaf2;
  border-radius:16px;
  padding:18px 16px;
  cursor:pointer;
  min-height:122px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.day-card:hover{transform:translateY(-1px)}
.day-card.active{
  border-color:#cddcf0;
  box-shadow:0 12px 26px rgba(31,93,165,.11);
}
.day-title{
  font-size:1.35rem;
  font-weight:800;
  color:#27405d;
}
.day-status{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#fff;
  font-weight:800;
  font-size:.98rem;
  padding:0 10px;
}
.day-status.green{background:var(--green)}
.day-status.orange{background:var(--orange)}
.day-status.red{background:var(--red)}

.time-label{
  margin:22px 0 12px;
  font-size:1rem;
  color:#607086;
  font-weight:700;
}
.time-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.time-btn{
  min-height:58px;
  border-radius:12px;
  border:1px solid #dde6f0;
  background:#fff;
  color:#33506f;
  font-size:1.02rem;
  font-weight:700;
  cursor:pointer;
}
.time-btn.available:hover{border-color:#c7d8eb}
.time-btn.selected{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.time-btn.unavailable{
  background:#909dab;
  border-color:#909dab;
  color:#fff;
  cursor:not-allowed;
}
.selection-box{
  margin:16px 0 14px;
  background:var(--surface-2);
  border:1px solid #e4ebf3;
  border-radius:14px;
  padding:14px 16px;
  color:#4f647d;
  min-height:54px;
  display:flex;
  align-items:center;
}
.btn-cta{
  width:100%;
  background:linear-gradient(180deg,#1f5da5,#123f73);
  color:#fff;
  min-height:66px;
  box-shadow:0 14px 26px rgba(18,63,115,.16);
}
.micro-note{
  margin-top:12px;
  color:#ff0000;
  font-size:.9rem;
}
.premium-visual{
  margin-top:22px;
  border-radius:18px;
  padding:18px;
  background:linear-gradient(180deg,#f9fbfd,#eef3f8);
  border:1px solid #e0e8f1;
}
.badge-strip{
  font-size:.9rem;
  color:#5f7185;
  font-weight:700;
  margin-bottom:14px;
}
.plate{
  width:100%;
  max-width:330px;
  height:78px;
  border-radius:14px;
  background:#fff;
  border:3px solid #1e2731;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#111;
  position:relative;
  box-shadow:0 12px 22px rgba(0,0,0,.08);
}
.plate::before{
  content:"D";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:48px;
  background:#1f5da5;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  font-weight:700;
}
.plate span{
  margin-left:18px;
}

.mobile-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:none;
  gap:10px;
  z-index:50;
}
.mobile-bar .btn{
  flex:1;
  min-width:0;
  min-height:54px;
}

@media (max-width: 980px){
  .hero-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .container{padding:0 16px}
  .header-inner{
    min-height:78px;
  }
  .brand-text{
    font-size:1.45rem;
  }
  .brand-icon{
    width:46px;
    height:46px;
  }
  .mini-icon{
    display:none;
  }
  .header-btn{
    padding:12px 16px;
    font-size:.95rem;
  }
  .page{
    padding:18px 0 94px;
  }
  .trust-panel,.booking-panel{
    padding:20px;
    border-radius:18px;
  }
  .trust-panel h1{
    font-size:2rem;
  }
  .subline{
    font-size:1rem;
  }
  .price-box{
    align-items:flex-start;
    flex-direction:column;
  }
  .cta-row{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
  .booking-head{
    flex-direction:column;
    margin-bottom:12px;
  }
  .booking-head h2{
    font-size:1.55rem;
  }
  .day-grid{
    grid-template-columns:1fr;
  }
  .time-grid{
    grid-template-columns:1fr;
  }
  .mobile-bar{
    display:flex;
  }
}