html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: #FDF9F2;
color: #2D3142;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Fredoka', sans-serif; }
::selection { background: #FF6B6B; color: white; }
/* A11y Skip Link */
.skip-link {
position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
background: #FF6B6B; color: white; padding: 12px 24px;
font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
z-index: 10000; transition: top 0.3s ease; border-radius: 99px;
}
.skip-link:focus { top: 20px; outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid #FF6B6B; outline-offset: 4px; border-radius: 8px;
}
/* Custom Cursor */
.cursor-dot {
width: 24px; height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23FF6B6B' d='M83.4,72a24.1,24.1,0,0,1-30.8,11.5A24,24,0,0,1,64.2,40.1,24.1,24.1,0,0,1,95,28.6,24,24,0,0,1,83.4,72ZM203.4,40.1a24,24,0,0,0-30.8,11.5A24.1,24.1,0,0,0,161,83.5a24,24,0,0,0,30.8-11.5A24.1,24.1,0,0,0,203.4,40.1ZM144,48a24,24,0,1,0-24-24A24,24,0,0,0,144,48ZM240,104a24,24,0,1,0-24-24A24,24,0,0,0,240,104ZM212.8,129.8a36.6,36.6,0,0,0-15-5.9,13.5,13.5,0,0,0-2.3-1c-22.9-6.3-43-1.6-67.5-1.6s-44.6-4.7-67.5,1.6a13.5,13.5,0,0,0-2.3,1,36.6,36.6,0,0,0-15,5.9A36,36,0,0,0,28,159.2c0,37.2,30.5,60.1,61,64a66.4,66.4,0,0,0,39,1.7A66.4,66.4,0,0,0,167,223.2c30.5-3.9,61-26.8,61-64A36,36,0,0,0,212.8,129.8Z'/%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat; background-position: center;
position: fixed; pointer-events: none; z-index: 10000;
transition: transform 0.05s ease;
transform-origin: center center;
}
/* Canvas for floating tennis balls / paws */
#playCanvas {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 1; opacity: 0.7;
}
/* Noise overlay */
.noise-overlay::after {
content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 9998; opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* Graphic blobs */
.blob-bg {
position: absolute; border-radius: 50%; filter: blur(80px);
z-index: 0; opacity: 0.5; pointer-events: none;
}
/* Buttons */
.btn-primary {
background: #FF6B6B; color: white; padding: 18px 36px; border-radius: 100px;
font-weight: 700; font-size: 1rem; letter-spacing: 0.05em;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
border: 2px solid #FF6B6B; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}
.btn-primary:hover {
background: #e55a5a; border-color: #e55a5a; transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(255, 107, 107, 0.3);
}
.btn-outline {
border: 2px solid #2D3142; color: #2D3142; padding: 18px 36px; border-radius: 100px;
font-weight: 700; font-size: 1rem; letter-spacing: 0.05em;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
background: transparent;
}
.btn-outline:hover {
background: #2D3142; color: #FDF9F2; transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(45, 49, 66, 0.15);
}
/* Cards */
.service-card {
background: #ffffff; border-radius: 32px; padding: 40px;
border: 2px solid #F5EBE1; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative; overflow: hidden;
}
.service-card:hover {
transform: translateY(-8px); border-color: #FFD6D6;
box-shadow: 0 24px 48px -12px rgba(255, 107, 107, 0.12);
}
.pricing-card {
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card:hover { transform: translateY(-10px); }
/* FAQ */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-answer.open { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-item { transition: all 0.3s ease; border: 2px solid #F5EBE1; }
.faq-item:hover { border-color: #FF6B6B !important; }
/* Sliders */
.testimonial-slider { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.testimonial-slider::-webkit-scrollbar { display: none; }
.testimonial-slider > div { scroll-snap-align: center; }
.mobile-nav { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-nav.open { transform: translateX(0); }
/* Hero clip pattern */
.hero-pattern {
background-image: radial-gradient(#FFD6D6 2px, transparent 2px);
background-size: 30px 30px; opacity: 0.4;
}
@media (max-width: 768px) {
.cursor-dot { display: none !important;
pointer-events: none;
}
#playCanvas { display: none !important;
pointer-events: none;
}
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
#playCanvas { display: none !important;
pointer-events: none;
}
}