@font-face { font-family: 'Tomato Grotesk'; src: url('../assets/fonts/tomato-grotesk-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.book-demo-page { background: #f5f3f1; }
.booking-main { width: min(1040px, calc(100% - 56px)); margin: 16px auto 32px; overflow: hidden; border-radius: 24px 24px 0 0; }
.booking-banner { position: relative; width: 100%; height: 90px; overflow: hidden; border-radius: 16px 16px 0 0; background: #572077; }
.booking-banner-title { position: relative; z-index: 1; margin: 0; padding: 22px 250px 0 34px; color: #fff; font: 600 clamp(25px, 3.3vw, 34px)/1.15 'Tomato Grotesk', Inter, sans-serif; letter-spacing: -.025em; animation: booking-title-in .8s cubic-bezier(.22,1,.36,1) both; }
.booking-banner-ducks { position: absolute; inset: 0 0 auto auto; width: 310px; height: 90px; pointer-events: none; }
.booking-duck { position: absolute; width: 110px; height: 90px; animation: booking-duck-in 1s cubic-bezier(.22,1,.36,1) both; }
.booking-duck img { position: absolute; display: block; max-width: none; }
.booking-duck--pink { left: 0; top: 0; }
.booking-duck--pink .booking-duck-body { width: 72.571px; height: 75.252px; left: 1.016px; top: 28.746px; transform: scaleX(-1); }
.booking-duck--pink .booking-duck-beak { width: 20.947px; height: 15.821px; left: 60.12px; top: 45.981px; transform: scaleX(-1); }
.booking-duck--pink .booking-duck-hat { left: 18.912px; top: 20px; transform-origin: 70% 85%; animation: booking-hat-nod 1.1s ease-in-out .42s both; }
.booking-duck--pink .booking-duck-foot { left: 58.736px; top: 65.502px; transform: scaleX(-1); transform-origin: center; animation: booking-pink-wave 1.05s ease-in-out .52s both; }
.booking-duck--yellow { left: 123px; top: 0; animation-delay: .16s; }
.booking-duck--yellow .booking-duck-body { width: 81.124px; height: 84.121px; left: 19px; top: 20px; }
.booking-duck--yellow .booking-duck-beak { width: 23.416px; height: 17.685px; left: 11px; top: 39px; }
.booking-duck--yellow .booking-duck-foot { left: 1px; top: 61px; transform-origin: 82% 65%; animation: booking-yellow-wave 1.05s ease-in-out .68s both; }
.booking-panel { width: 100%; min-width: 0; background: linear-gradient(to bottom, #fff calc(100% - 80px), #f5f3f1 calc(100% - 80px)); }
.booking-calendar { width: 100%; min-height: 570px; }
.booking-calendar iframe { display: block; border-radius: 0; mix-blend-mode: multiply; }
@keyframes booking-title-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes booking-duck-in { 0% { opacity: 0; transform: translateY(34px) rotate(-3deg); } 62% { opacity: 1; transform: translateY(-3px) rotate(1deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes booking-pink-wave { 0%, 100% { rotate: 0deg; } 25%, 65% { rotate: 10deg; } 45%, 85% { rotate: -4deg; } }
@keyframes booking-yellow-wave { 0%, 100% { rotate: 0deg; } 25%, 65% { rotate: -10deg; } 45%, 85% { rotate: 4deg; } }
@keyframes booking-hat-nod { 0%, 100% { transform: rotate(0); } 38% { transform: rotate(-5deg); } 72% { transform: rotate(2deg); } }
@media (max-width: 767.98px) { .booking-main { width: calc(100% - 32px); margin: 12px 16px 32px; } .booking-banner { height: 76px; } .booking-banner-title { padding: 18px 135px 0 20px; font-size: clamp(19px, 4.3vw, 27px); } .booking-banner-ducks { right: -85px; transform: scale(.78); transform-origin: top right; } }
@media (max-width: 480px) { .booking-banner-title { padding-right: 105px; font-size: clamp(17px, 4.7vw, 22px); } .booking-banner-ducks { right: -115px; transform: scale(.68); } }
@media (prefers-reduced-motion: reduce) { .booking-banner-title, .booking-duck, .booking-duck--pink .booking-duck-hat, .booking-duck--pink .booking-duck-foot, .booking-duck--yellow .booking-duck-foot { animation: none; } .booking-duck--pink .booking-duck-foot { transform: scaleX(-1); } }