:root {
  --pikod-ink: #151521;
  --pikod-blue: #243a58;
}
.site-header { backdrop-filter: blur(16px); }
body .site-hero {
  color: #fff;
  padding-block: clamp(5rem, 12vw, 10rem);
  background: radial-gradient(ellipse at 85% 12%, #a66dec38, transparent 55%),
    linear-gradient(90deg, #141222 8%, #141222ed 40%, #14122246),
    #141222;
}
.site-hero h1 { color: #fff; font-size: clamp(3.5rem, 10vw, 8rem); letter-spacing: -.075em; }
.site-hero .hero-copy, .site-hero .location { color: #edf3fb; }
.site-hero .hero-copy { max-width: 38ch; }
body .site-button.primary { background: var(--pikod-blue); color: white; }
body .service-grid article {
  background: linear-gradient(150deg, #fff, #f3f6fa);
  border: 1px solid #dfe6ee;
  border-radius: 18px;
  box-shadow: 0 8px 22px #2620440a;
}
body .site-section h2 { color: var(--pikod-ink); letter-spacing: -.035em; }
.booking-design { background: #f5f3fa; }
.booking-design .header {
  padding: 28px 22px;
  border-radius: 20px;
  color: white;
  background: radial-gradient(ellipse at 95% 10%, #ae6cff52, transparent 55%),
    linear-gradient(90deg, #161224, #161224bc 62%, #16122469),
    #211a3c;
}
.booking-design .header .sub { color: #edf3fb; }
.booking-design .card { border-radius: 18px; box-shadow: 0 8px 24px #2016330c; }
@keyframes pikod-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .site-hero > .site-shell, .booking-design .header, .booking-design .tabs {
    animation: pikod-enter .55s ease-out both;
  }
  .booking-design .tabs { animation-delay: .1s; }
}
@media (max-width: 600px) {
  body .site-hero {
    background: linear-gradient(90deg, #141222f5, #14122280),
      #141222;
  }
}
body { background-color: #f5f7fa; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: radial-gradient(125px circle at var(--pointer-x, -400px) var(--pointer-y, -400px), #e6efff12, transparent);
}
body .site-hero, .booking-design .header {
  background: radial-gradient(ellipse at 80% 20%, #e8f1ff38, transparent 48%),
    radial-gradient(ellipse at 100% 0%, #6f263b55, transparent 42%),
    radial-gradient(ellipse at 92% 100%, #25456785, transparent 58%),
    linear-gradient(130deg, #080b12 25%, #16283f);
}
body .site-header, body .site-actions, .booking-design .tabs {
  background: linear-gradient(145deg, #ffffffeb, #e7edf5b5);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: inset 0 1px 1px white, 0 10px 34px #21183e16;
}
body .service-grid article, .booking-design .card {
  background: linear-gradient(145deg, #fffffffa, #eaf0f7be);
  box-shadow: inset 0 1px 1px white, 0 10px 28px #21183e10;
}
body .site-button, .booking-design .btn {
  border-radius: 999px;
  box-shadow: inset 0 1px 1px #ffffff5c, 0 5px 16px #21183e24;
}
@media (prefers-reduced-motion: no-preference) {
  .glass-enter { animation: pikod-enter .65s cubic-bezier(.2,.7,.2,1) both; }
  .service-grid article, .site-button, .booking-design .btn { transition: translate .2s ease, box-shadow .2s ease; }
  .site-button:active, .booking-design .btn:active { translate: 0 1px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-grid article:hover, .site-button:hover { translate: 0 -3px; box-shadow: 0 14px 32px #21183e26; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-hero > .site-shell { animation: none; }
  .site-hero .location, .site-hero h1, .site-hero .hero-copy,
  .site-hero .hero-actions, .site-hero .site-button {
    animation: pikod-enter .58s cubic-bezier(.2,.75,.25,1) both;
  }
  .site-hero h1 { animation-delay: 55ms; }
  .site-hero .hero-copy { animation-delay: 120ms; }
  .site-hero .hero-actions, .site-hero .site-button { animation-delay: 175ms; }
  .service-grid article:nth-child(3n+2) { animation-delay: 55ms; }
  .service-grid article:nth-child(3n) { animation-delay: 110ms; }

  :is(.site-button, .site-actions a, .booking-design button) {
    transition: scale .22s cubic-bezier(.2,.8,.25,1), filter .18s ease, box-shadow .2s ease;
    touch-action: manipulation;
  }
  :is(.site-button, .site-actions a, .booking-design button):active:not(:disabled) {
    scale: .96;
    filter: brightness(1.13);
    transition-duration: .085s;
  }
  .booking-design .slots-wrap .slot-enter {
    animation: pikod-enter .28s ease-out both;
  }
}

body .site-hero {
  background: radial-gradient(ellipse at 94% 0%, #66283b58, transparent 42%),
    linear-gradient(90deg, #080b12 20%, #101e31f2 44%, #101e3175);
}
.booking-design .header {
  background: radial-gradient(ellipse at 100% 0%, #6826396b, transparent 60%),
    linear-gradient(90deg, #0a111ef7, #152641a8);
}
@media (max-width: 600px) {
  body .site-hero { background-position: center, center, 53% 65%; }
}