/* JPJ/PUSPAKOM-inspired automotive theme: navy, road yellow, blue and signal red. */
:root {
  --ink: #071a33;
  --cream: #f3f6fa;
  --paper: #ffffff;
  --lime: #ffc400;
  --green: #0b3970;
  --muted: #647084;
  --line: #d6dce5;
  --orange: #e31e2f;
}

body {
  background: linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%);
}

.site-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 3px solid #ffc400;
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
}

.brand-mark {
  background: #071a33;
  color: #ffc400;
  border: 2px solid #ffc400;
  border-radius: 7px;
  transform: none;
}

.brand > span:last-child > span,
h1 em,
h2 em {
  color: #145ba3;
}

.button-dark {
  background: #071a33;
  box-shadow: inset 0 -3px 0 #145ba3;
}

.button-primary,
.mobile-cta {
  background: #ffc400;
  color: #071a33;
}

.hero-visual {
  background: linear-gradient(145deg, #071a33 0%, #0b3970 62%, #145ba3 100%);
  border-radius: 28px;
  border-bottom: 8px solid #ffc400;
}

.sun {
  background: #ffc400;
  color: #071a33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 800 76px/0.8 Manrope, sans-serif;
  opacity: 0.96;
}

.sun small {
  font: 800 11px Manrope, sans-serif;
  letter-spacing: 4px;
  margin-top: 25px;
}

.road-line {
  background: #101820;
}

.road-line::after {
  background: repeating-linear-gradient(90deg, #ffc400 0 44px, transparent 44px 75px);
}

.car-body {
  fill: #e31e2f;
}

.car-window {
  fill: #a9c7e4;
}

.hub,
.floating-card > span {
  fill: #ffc400;
  background: #ffc400;
}

.marquee {
  background: #071a33;
  border-bottom: 4px solid #e31e2f;
}

.marquee span {
  color: #ffc400;
}

.service-card.featured {
  background: linear-gradient(150deg, #071a33, #0b3970);
  border-color: #145ba3;
  border-bottom: 5px solid #ffc400;
}

.service-icon,
.price-icon {
  background: #e5eef8;
  color: #0b3970;
}

.featured .service-icon {
  background: #ffc400;
  color: #071a33;
}

.pricing {
  background: #dfe8f2;
}

.steps article:nth-child(2) .step-icon {
  background: #ffc400;
}

.booking {
  background: linear-gradient(135deg, #071a33 0%, #0b3970 70%, #145ba3 100%);
  border-top: 7px solid #ffc400;
}

.kicker.light,
.booking h2 em {
  color: #ffc400;
}

.privacy > span {
  border-color: #6d95bf;
  color: #ffc400;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: #145ba3;
  box-shadow: 0 0 0 3px rgba(20, 91, 163, 0.12);
}

.consent input {
  accent-color: #145ba3;
}

footer {
  background: #050f20;
  border-top: 5px solid #e31e2f;
}

.footer-phone {
  color: #ffc400;
}

@media (max-width: 600px) {
  .hero-visual {
    border-radius: 20px;
  }

  .sun {
    font-size: 54px;
  }
}

/* Liquid glass surface system */
html {
  background: #071a33;
}

body {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(255, 196, 0, 0.2), transparent 25%),
    radial-gradient(circle at 92% 34%, rgba(20, 91, 163, 0.3), transparent 30%),
    radial-gradient(circle at 30% 82%, rgba(227, 30, 47, 0.11), transparent 24%),
    linear-gradient(145deg, #eaf0f7 0%, #f7f9fc 48%, #dbe6f1 100%);
  background-attachment: fixed;
}

.site-header {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 2px solid rgba(255, 196, 0, 0.72);
  box-shadow: 0 14px 40px rgba(7, 26, 51, 0.12), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.hero-visual,
.service-card,
.price-list,
.step-icon,
.booking-form,
.car-card,
.floating-card {
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 24px 65px rgba(7, 26, 51, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.hero-visual {
  background: linear-gradient(145deg, rgba(7, 26, 51, 0.88), rgba(20, 91, 163, 0.68));
  overflow: hidden;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 150px;
  left: -80px;
  top: -65px;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(28px);
  pointer-events: none;
}

.car-card,
.floating-card,
.price-list,
.booking-form {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.55));
}

.service-grid {
  gap: 16px;
}

.service-card {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.34));
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 100px;
  left: -48px;
  top: -55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(24px);
  pointer-events: none;
}

.service-card:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46));
  box-shadow: 0 32px 72px rgba(7, 26, 51, 0.2), inset 0 1px 0 #fff;
}

.service-card.featured {
  background: linear-gradient(145deg, rgba(7, 26, 51, 0.88), rgba(20, 91, 163, 0.68));
  border-color: rgba(255, 255, 255, 0.2);
}

.pricing {
  background: rgba(223, 232, 242, 0.68);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.step-icon {
  background: rgba(255, 255, 255, 0.58);
}

.booking {
  background: linear-gradient(135deg, rgba(7, 26, 51, 0.88), rgba(11, 57, 112, 0.72), rgba(20, 91, 163, 0.66));
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.booking-form {
  border-radius: 26px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(7, 26, 51, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.button-primary,
.button-dark,
.button-whatsapp,
.mobile-cta {
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 30px rgba(7, 26, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .service-card,
  .price-list,
  .step-icon,
  .booking-form,
  .car-card,
  .floating-card {
    background: #fff;
  }

  .service-card.featured,
  .hero-visual,
  .booking {
    background: #0b3970;
  }
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }
}