/* HAWAII PARADISE THEME - loaded last to lock the tropical palette */
:root {
    --hw-ocean: #06bfd0;
    --hw-ocean-deep: #063b53;
    --hw-lagoon: #42f2d0;
    --hw-coral: #ff6f61;
    --hw-hibiscus: #ff3f78;
    --hw-sun: #ffca62;
    --hw-sand: #fff1cf;
    --hw-ink: #032633;
}

body {
    background:
        radial-gradient(circle at 10% 0%, rgba(66,242,208,.16), transparent 32rem),
        radial-gradient(circle at 90% 15%, rgba(255,111,97,.13), transparent 28rem),
        #031e2a;
    color: #eafffb;
}

.neon-site { background: linear-gradient(180deg, #052f41 0, #031a25 55%, #02141c 100%); }
.hero-header { min-height: clamp(430px, 57vw, 520px); background: #042735; }
.hero-image.slide-one { background-image: url('../images/hero-hawaii-sunset.png') !important; }
.hero-image.slide-two { background-image: url('../images/hero-hawaii-night.png') !important; }
.hero-image.slide-three { background-image: url('../images/hero-hawaii-day.png') !important; }
.hero-image { filter: saturate(1.14) contrast(1.04); }
.hero-image::after {
    background:
        linear-gradient(90deg, rgba(1,24,34,.45), transparent 25%, transparent 75%, rgba(1,24,34,.42)),
        linear-gradient(0deg, rgba(1,20,29,.78), transparent 42%, rgba(1,20,29,.16));
}
.hero-glow {
    background: radial-gradient(ellipse at 50% 58%, rgba(31,231,217,.23), transparent 38%);
    animation: lagoonGlow 5s ease-in-out infinite;
}

.hero-copy { text-shadow: 0 3px 24px rgba(0,24,34,.95); }
.hero-copy p { color: #fff6db !important; letter-spacing: .34em; }
.hero-copy h1 strong {
    background: linear-gradient(180deg, #fff 5%, #fff4c5 40%, #57f5dc 68%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 5px 12px rgba(0,32,42,.9)) drop-shadow(0 0 18px rgba(76,243,220,.4));
}
.hero-crown { color: var(--hw-hibiscus) !important; text-shadow: 0 0 15px rgba(255,63,120,.8); }
.hero-line { color: #fff5d7 !important; }
.hero-line i { background: linear-gradient(90deg, transparent, var(--hw-sun), transparent) !important; }

.main-nav {
    background: rgba(3,38,51,.92) !important;
    border-color: rgba(87,245,220,.28) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
}
.nav-brand i, .nav-brand span { color: var(--hw-lagoon) !important; }
.nav-links button { color: #dffcf6 !important; }
.nav-links button:hover, .nav-links button.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(6,191,208,.24), rgba(255,63,120,.18)) !important;
    box-shadow: inset 0 -2px var(--hw-lagoon), 0 0 22px rgba(6,191,208,.14);
}
.login-button, .quick-login {
    border-color: rgba(255,236,180,.7) !important;
    color: #063344 !important;
    background: linear-gradient(135deg, #fff3b3, #ffbd58 45%, #ff8068) !important;
    box-shadow: 0 8px 25px rgba(255,126,98,.3) !important;
}
.menu-trigger { border-color: rgba(87,245,220,.5) !important; color: #fff !important; background: rgba(3,49,65,.72) !important; }

.intro-section { background: transparent !important; }
.section-title span { color: var(--hw-lagoon) !important; }
.section-title h2 { color: #fff !important; }
.section-title h2::after { background: linear-gradient(90deg, var(--hw-lagoon), var(--hw-coral), transparent) !important; }
.section-title p { color: #aee2df !important; }
.provider-card {
    background: linear-gradient(160deg, rgba(8,66,79,.94), rgba(3,31,43,.98)) !important;
    border-color: rgba(87,245,220,.24) !important;
    box-shadow: 0 14px 35px rgba(0,11,18,.42) !important;
}
.provider-card::before { background: linear-gradient(100deg, transparent, rgba(87,245,220,.22), transparent) !important; }
.provider-card:hover {
    border-color: rgba(255,111,97,.8) !important;
    box-shadow: 0 18px 42px rgba(0,11,18,.55), 0 0 25px rgba(6,191,208,.18) !important;
}
.provider-card .play-button, .provider-card button {
    background: linear-gradient(135deg, var(--hw-ocean), #21dcc2) !important;
    border-color: rgba(255,255,255,.34) !important;
}
.service-strip { background: linear-gradient(90deg, #063d50, #07576a 50%, #063d50) !important; border-color: rgba(87,245,220,.2) !important; }
.service-grid i { color: var(--hw-sun) !important; }

.splash-arrow { border-color: rgba(255,255,255,.45) !important; background: rgba(2,40,52,.55) !important; }
.splash-arrow:hover { background: var(--hw-coral) !important; border-color: #fff !important; }
.splash-dots button { background: rgba(255,255,255,.5) !important; }
.splash-dots button.active { background: var(--hw-lagoon) !important; box-shadow: 0 0 15px var(--hw-lagoon); }

.tropical-motion { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.palm-leaf, .tropical-flower, .sun-glint, .wave-light { position:absolute; display:block; }
.palm-leaf { font-size:clamp(54px,8vw,120px); opacity:0; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)); animation:tropicalSway 12s ease-in-out infinite; }
.leaf-one { left:-1%; top:14%; transform-origin:left center; }
.leaf-two { right:2%; top:17%; animation-delay:5.5s; transform-origin:right center; }
.tropical-flower { color:var(--hw-hibiscus); font-size:clamp(28px,4vw,58px); opacity:0; text-shadow:0 0 15px rgba(255,63,120,.65); animation:flowerDrift 10s ease-in-out infinite; }
.flower-one { left:12%; top:30%; }
.flower-two { right:13%; top:34%; animation-delay:3.3s; color:#fff1c9; }
.flower-three { left:22%; bottom:19%; animation-delay:6.6s; color:var(--hw-coral); }
.sun-glint { color:#fff5c9; font-size:clamp(16px,2.2vw,32px); opacity:0; animation:islandSpark 4s ease-in-out infinite; }
.glint-one { left:28%; top:30%; }.glint-two { right:27%; top:24%; animation-delay:1.4s; }.glint-three { right:18%; bottom:26%; animation-delay:2.7s; }
.wave-light { left:18%; right:18%; bottom:14%; height:18px; border-top:2px solid rgba(112,255,235,.42); border-radius:50%; filter:blur(.2px); opacity:0; animation:waveShimmer 5s ease-out infinite; }
.wave-two { bottom:10%; animation-delay:2.5s; }

@keyframes lagoonGlow { 50% { opacity:.72; transform:scale(1.08); } }
@keyframes tropicalSway { 0%,20%,100%{opacity:0;transform:translateY(25px) rotate(-9deg) scale(.85)} 32%,72%{opacity:.82} 52%{transform:translateY(0) rotate(5deg) scale(1)} 85%{opacity:0;transform:translateY(-18px) rotate(9deg) scale(.94)} }
@keyframes flowerDrift { 0%,18%,100%{opacity:0;transform:translateY(45px) rotate(0) scale(.55)} 32%,70%{opacity:.9} 58%{transform:translateY(-8px) rotate(150deg) scale(1)} 85%{opacity:0;transform:translateY(-55px) rotate(260deg) scale(.7)} }
@keyframes islandSpark { 0%,100%{opacity:0;transform:scale(.2) rotate(0)} 45%{opacity:1;transform:scale(1.15) rotate(90deg)} 70%{opacity:.35;transform:scale(.7) rotate(160deg)} }
@keyframes waveShimmer { 0%{opacity:0;transform:scaleX(.45) translateY(8px)} 45%{opacity:.8} 100%{opacity:0;transform:scaleX(1.15) translateY(-15px)} }

@media (max-width: 767.98px) {
    .hero-header { min-height: 470px; }
    .hero-image { background-position:center center !important; }
    .hero-copy p { letter-spacing:.16em; font-size:.72rem; }
    .palm-leaf { font-size:58px; }
    .flower-three, .leaf-two, .wave-two { display:none; }
    .section-title p { display:block !important; font-size:.82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tropical-motion *, .hero-glow { animation:none !important; }
    .tropical-motion { display:none; }
}