html, body { height: 100%; }
body { background: radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%); overflow-x: hidden; overflow-y: auto; }

.home-main { padding: 96px 24px 160px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.hero { text-align: center; padding: 48px 24px; }
.hero h1 { font-size: 56px; line-height: 1.1; margin: 0 0 12px; }
.hero p { font-size: 18px; margin: 6px 0; }

.services { padding: 32px 0; }
.services h2 { font-size: 28px; margin: 0 0 16px; }
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.svc-tile { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,0.12); transition: transform .25s ease, box-shadow .25s ease; }
.svc-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.16); }
.svc-img { position: relative; min-height: 260px; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12)); mix-blend-mode: multiply; }
.svc-text { padding: 20px; color: #0f172a; min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.svc-text h3 { margin: 0 0 8px; font-size: 20px; }
.svc-text p { margin: 0; font-size: 16px; }
.theme-sunrise { background: linear-gradient(135deg, #ff956b, #ffd29d); }
.theme-ocean { background: linear-gradient(135deg, #60a5fa, #a78bfa); }
.theme-berry { background: linear-gradient(135deg, #f472b6, #fb7185); }
.theme-mint { background: linear-gradient(135deg, #34d399, #93c5fd); }
.pos-a { grid-column: 1 / span 5; }
.pos-b { grid-column: 6 / span 3; }
.pos-c { grid-column: 9 / span 4; }
.pos-d { grid-column: 1 / span 4; }
.pos-e { grid-column: 5 / span 5; }
.pos-f { grid-column: 10 / span 3; }
.pos-g { grid-column: 1 / span 6; }
.pos-h { grid-column: 7 / span 6; }

.testimonial { text-align: center; padding: 32px 24px; }
.testimonial blockquote { font-size: 20px; margin: 0 0 6px; }
.testimonial p { margin: 0; color: #4b5563; }

.cta { text-align: center; padding: 32px 24px; }
.cta p { margin: 6px 0; }
.cta .cta-link { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, #ff956b, #ffd29d); color: #242424; font-weight: 700; }

.ocean { height: 5%; width: 100%; position: fixed; bottom: 0; left: 0; background: #015871; z-index: 0; pointer-events: none; }
.wave { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg') repeat-x; position: absolute; top: -198px; width: 6400px; height: 198px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); }
.wave:nth-of-type(2) { top: -175px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; opacity: 1; }
@keyframes wave { 0% { margin-left: 0; } 100% { margin-left: -1600px; } }
@keyframes swell { 0%, 100% { transform: translate3d(0,-25px,0); } 50% { transform: translate3d(0,5px,0); } }