/* =========================================================================
   STAIN SOLUTIONS — "Splash Lab"
   Playful, water-and-bubbles cleaning aesthetic in brand blue.
   Shared stylesheet (loaded on every page). Homepage gets extra decor
   injected by js/main.js (guarded to pages with .stains-grid).
   Motion is GPU-only (transform/opacity) and respects reduced-motion.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Brand blue, deepened + freshened */
    --ink:        #07193f;   /* deepest navy — text / dark sections   */
    --navy:       #0b2a6b;
    --blue-700:   #1745c9;
    --blue:       #2f6bff;   /* primary brand blue                    */
    --blue-400:   #5b9bff;
    --cyan:       #1fd3f0;   /* fresh water accent                    */
    --aqua:       #8df3ea;   /* foam / mint highlight                 */
    --sky:        #cfe6ff;
    --foam:       #eef6ff;   /* light page background                 */
    --foam-2:     #e1eeff;
    --white:      #ffffff;
    --sun:        #ffd23e;   /* warm pop — used sparingly on CTA/badge */

    --ink-soft:   rgba(7, 25, 63, .62);
    --ink-faint:  rgba(7, 25, 63, .42);

    /* Soft, blue-tinted elevation */
    --shadow-sm:  0 2px 6px rgba(15, 50, 120, .08);
    --shadow:     0 14px 30px -12px rgba(15, 50, 120, .28);
    --shadow-lg:  0 30px 60px -20px rgba(15, 50, 120, .40);
    --ring:       0 0 0 1px rgba(47, 107, 255, .12);

    --r-sm: 12px;
    --r:    20px;
    --r-lg: 28px;
    --r-xl: 36px;

    --ease: cubic-bezier(.22, .68, 0, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    --maxw: 1320px;

    /* ---- Legacy aliases ----
       stain-detail.css and app.css still reference the original variable
       names. Map them onto the new palette so those pages keep working and
       inherit the refreshed blue look. */
    --primary-color:   var(--blue);
    --secondary-color: var(--blue-700);
    --accent-color:    var(--sun);
    --text-dark:       var(--ink);
    --text-light:      var(--ink-soft);
    --bg-light:        var(--foam);
    --bg-white:        #ffffff;
    --border-color:    rgba(47, 107, 255, .14);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(220,235,255,.85) 0%, rgba(220,235,255,0) 55%),
        radial-gradient(1000px 620px at 100% 0%, rgba(215,243,255,.9) 0%, rgba(215,243,255,0) 50%),
        linear-gradient(180deg, var(--foam) 0%, #f6fbff 40%, var(--foam) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* keep real content above the injected bubble field */
header, main, .coming-soon-banner, .about-section, footer { position: relative; z-index: 1; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, .tagline { font-family: 'Fredoka', 'Outfit', sans-serif; }

/* =========================================================================
   Decorative bubble field (injected on homepage by main.js)
   ========================================================================= */
.bubble-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bubble {
    position: absolute;
    bottom: -120px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 70% 75%, rgba(31,211,240,.30), rgba(47,107,255,.10));
    box-shadow: inset 0 0 12px rgba(255,255,255,.5);
    opacity: 0;
    animation: rise linear infinite;
    will-change: transform, opacity;
}
@keyframes rise {
    0%   { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
    10%  { opacity: .55; }
    50%  { transform: translateY(-52vh) translateX(18px) scale(1); }
    90%  { opacity: .5; }
    100% { transform: translateY(-108vh) translateX(-12px) scale(1.05); opacity: 0; }
}

/* =========================================================================
   Language selector — glassy pill
   ========================================================================= */
.language-selector {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1000;
}
#langSelect {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--bounce), box-shadow .3s var(--ease);
}
#langSelect:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow);
}

/* =========================================================================
   Header / Hero
   ========================================================================= */
header {
    background:
        radial-gradient(900px 480px at 80% -20%, rgba(31,211,240,.55), rgba(31,211,240,0) 60%),
        radial-gradient(700px 420px at 8% 120%, rgba(141,243,234,.40), rgba(141,243,234,0) 55%),
        linear-gradient(160deg, #0a2a78 0%, var(--blue) 52%, #2aa9f0 100%);
    color: #fff;
    padding: 64px 20px 130px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
/* soft light blobs inside the hero */
header::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(closest-side, rgba(255,255,255,.18), transparent) 18% 30% / 220px 220px no-repeat,
        radial-gradient(closest-side, rgba(255,255,255,.14), transparent) 82% 18% / 300px 300px no-repeat,
        radial-gradient(closest-side, rgba(141,243,234,.22), transparent) 60% 70% / 260px 260px no-repeat;
    z-index: -1;
    animation: drift 18s var(--ease) infinite alternate;
}
@keyframes drift {
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-22px, 14px, 0); }
}
/* wavy bottom edge melting into the foam page */
header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 90px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23eef6ff' d='M0,40 C180,90 320,90 540,55 C760,20 900,20 1120,52 C1280,75 1380,72 1440,55 L1440,90 L0,90 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    z-index: 2;
    pointer-events: none;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.logo-link { display: block; transition: transform .4s var(--bounce); }
.logo-link:hover { transform: scale(1.06) rotate(-4deg); }
.logo {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    object-position: center;
    transform: scale(1.15);
    box-shadow: 0 14px 34px rgba(3, 18, 56, .42), 0 0 0 8px rgba(255,255,255,.16);
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: scale(1.15) translateY(0); }
    50%      { transform: scale(1.15) translateY(-12px); }
}
.header-text { text-align: left; }

header h1 {
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.5px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #ffffff 30%, #d6ecff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 30px rgba(3, 18, 56, .25);
}
.tagline {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    max-width: 30ch;
}

/* nav — glass pills */
nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .98rem;
    padding: 11px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .3s var(--bounce), background .3s var(--ease), box-shadow .3s var(--ease);
}
nav a:hover {
    background: #fff;
    color: var(--blue-700);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(3, 18, 56, .5);
}

/* =========================================================================
   App promo — floating pill (overrides per-page inline gold styles)
   ========================================================================= */
.coming-soon-banner {
    background: transparent !important;
    box-shadow: none;
    padding: 0 20px;
    margin-top: -42px;          /* lift onto the wave */
    text-align: center;
}
.coming-soon-banner .container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: auto;
    max-width: min(92vw, 760px);
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    font-weight: 500;
    background: linear-gradient(100deg, var(--blue-700), var(--blue) 55%, var(--cyan));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.25);
    animation: pillpop .7s var(--bounce) both;
}
@keyframes pillpop {
    from { transform: translateY(14px) scale(.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.coming-soon-banner .badge,
.coming-soon-banner .badge[style] {
    background: var(--sun) !important;
    color: var(--ink) !important;
    padding: 5px 13px;
    border-radius: 999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    box-shadow: 0 3px 10px rgba(255, 180, 0, .45);
    animation: wiggle 2.6s ease-in-out infinite;
}
@keyframes wiggle {
    0%, 92%, 100% { transform: rotate(0); }
    94%  { transform: rotate(-7deg); }
    97%  { transform: rotate(6deg); }
}
.cta-link {
    color: var(--blue-700);
    background: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    transition: transform .3s var(--bounce), box-shadow .3s var(--ease);
}
.cta-link:hover {
    transform: translateX(3px) scale(1.04);
    box-shadow: 0 8px 18px -6px rgba(3, 18, 56, .5);
}

/* =========================================================================
   Main / intro
   ========================================================================= */
main { padding: 56px 20px 30px; }

.intro {
    text-align: center;
    margin-bottom: 52px;
}
.intro h2 {
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -.4px;
    color: var(--ink);
    margin-bottom: 18px;
}
/* hand-drawn squiggle under the heading */
.intro h2::after {
    content: "";
    position: absolute;
    left: 4%; right: 4%;
    bottom: -14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C40,2 60,12 100,7 C140,2 160,12 198,6' fill='none' stroke='%231fd3f0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.intro p {
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================================
   Stains grid + cards
   ========================================================================= */
.stains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}

.stain-card {
    position: relative;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-lg);
    padding: 24px 18px 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--shadow-sm), var(--ring);
    transition: transform .4s var(--bounce), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* glossy sweep that runs across on hover */
.stain-card::before {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--ease);
    pointer-events: none;
}
.stain-card:hover {
    transform: translateY(-10px) scale(1.015);
    border-color: rgba(47, 107, 255, .35);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(47,107,255,.18);
}
.stain-card:hover::before { left: 130%; }

.stain-image {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 24px -8px rgba(15, 50, 120, .35), 0 0 0 6px rgba(47, 107, 255, .08);
    transition: transform .45s var(--bounce), box-shadow .45s var(--ease);
}
/* shiny water highlight on the bubble */
.stain-image::after {
    content: "";
    position: absolute;
    top: 10%; left: 16%;
    width: 34%; height: 24%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
    transform: rotate(-18deg);
    pointer-events: none;
}
.stain-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.stain-card:hover .stain-image {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 18px 34px -10px rgba(15, 50, 120, .5), 0 0 0 7px rgba(31, 211, 240, .22);
}
.stain-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
    transition: color .3s var(--ease);
}
.stain-card:hover h3 { color: var(--blue-700); }

/* Scroll-reveal (progressive enhancement: only active when JS adds .js) */
.js .stain-card {
    opacity: 0;
    transform: translateY(26px) scale(.95);
}
.js .stain-card.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--ease), transform .65s var(--bounce);
}

/* Legacy per-stain gradient fallbacks (kept for detail pages) */
.blood-stain { background: radial-gradient(circle, #ff4444 0%, #8b0000 100%); }
.coffee-stain { background: radial-gradient(circle, #6f4e37 0%, #3d2817 100%); }
.wine-stain { background: radial-gradient(circle, #722f37 0%, #2d0e11 100%); }
.oil-stain { background: radial-gradient(circle, #ffd700 0%, #b8860b 100%); }
.ink-stain { background: radial-gradient(circle, #1e3a8a 0%, #000080 100%); }
.soda-stain { background: radial-gradient(circle, #a0522d 0%, #654321 100%); }
.chocolate-stain { background: radial-gradient(circle, #3d2817 0%, #1a0f0a 100%); }
.tomato-stain { background: radial-gradient(circle, #ff6347 0%, #8b2500 100%); }
.berry-stain { background: radial-gradient(circle, #8b008b 0%, #4b0082 100%); }
.sweat-stain { background: radial-gradient(circle, #f5f5dc 0%, #d3d3d3 100%); }
.grass-stain { background: radial-gradient(circle, #7cfc00 0%, #228b22 100%); }
.makeup-stain { background: radial-gradient(circle, #ff69b4 0%, #c71585 100%); }
.urine-stain { background: radial-gradient(circle, #ffff99 0%, #cccc66 100%); }
.beer-stain { background: radial-gradient(circle, #f4a460 0%, #d2691e 100%); }
.glue-stain { background: radial-gradient(circle, #ffffff 0%, #e0e0e0 100%); }
.paint-stain { background: radial-gradient(circle, #87ceeb 0%, #4682b4 100%); }
.dirt-stain { background: radial-gradient(circle, #8b7355 0%, #5c4033 100%); }
.mold-stain { background: radial-gradient(circle, #556b2f 0%, #2f4f2f 100%); }
.vomit-stain { background: radial-gradient(circle, #9acd32 0%, #6b8e23 100%); }
.juice-stain { background: radial-gradient(circle, #ff8c00 0%, #ff4500 100%); }
.wax-stain { background: radial-gradient(circle, #fffacd 0%, #fafad2 100%); }
.rust-stain { background: radial-gradient(circle, #b7410e 0%, #8b3103 100%); }
.milk-stain { background: radial-gradient(circle, #fffef0 0%, #f5f5dc 100%); }
.egg-stain { background: radial-gradient(circle, #ffff66 0%, #ffcc00 100%); }

/* =========================================================================
   About
   ========================================================================= */
.about-section {
    max-width: var(--maxw);
    margin: 40px auto 70px;
    padding: 56px 40px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff, #f4f9ff);
    border: 1px solid rgba(47, 107, 255, .1);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}
.about-section h2 {
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 16px;
    color: var(--ink);
}
.about-section p {
    font-size: 1.08rem;
    color: var(--ink-soft);
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.85;
}

/* =========================================================================
   Footer
   ========================================================================= */
footer {
    position: relative;
    background: linear-gradient(180deg, var(--navy), var(--ink));
    color: #fff;
    padding: 70px 20px 44px;
    text-align: center;
    overflow: hidden;
}
footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%230b2a6b' d='M0,30 C220,60 360,0 600,26 C840,52 980,6 1440,30 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
footer img { transition: transform .3s var(--bounce); }
footer a:hover img { transform: translateY(-3px) scale(1.04); }
footer p { color: rgba(255, 255, 255, .72); }
.footer-links {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 12px 26px;
    flex-wrap: wrap;
}
.footer-links a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-weight: 500;
    transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer-links a:hover { color: var(--aqua); transform: translateY(-2px); }

/* =========================================================================
   AdSense containers
   ========================================================================= */
.adsense-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.adsense-container.top    { margin-top: 0; padding-top: 30px; }
.adsense-container.middle { margin: 50px auto; }
.adsense-container.bottom { margin-bottom: 0; padding-bottom: 40px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
    header { padding: 40px 18px 68px; }
    header::after { height: 54px; }
    .header-content { gap: 14px; margin-bottom: 12px; }
    .header-text { text-align: center; }
    .logo { width: 84px; height: 84px; }
    .tagline { max-width: none; }
    nav { gap: 8px; margin-top: 18px; }
    nav a { padding: 9px 16px; font-size: .9rem; }
    .coming-soon-banner { margin-top: -28px; }
    .stains-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
    }
    .stain-image { width: 104px; height: 104px; }
    .about-section { padding: 40px 22px; margin: 30px auto 50px; }
    .adsense-container { margin: 30px auto; padding: 0 10px; }
    .adsense-container.middle { margin: 40px auto; }
}

@media (max-width: 480px) {
    .stains-grid { grid-template-columns: repeat(2, 1fr); }
    .language-selector { top: 12px; right: 12px; }
    #langSelect { padding: 8px 12px; font-size: 13px; }
}

/* =========================================================================
   Contact page — enhances the per-page inline <style> (body-prefixed to
   win on specificity without editing the 7 localized contact.html files)
   ========================================================================= */
body .contact-card {
    position: relative;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm), var(--ring);
    overflow: hidden;
    transition: transform .4s var(--bounce), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
body .contact-card::after {
    content: "";
    position: absolute;
    top: -28%; left: -18%;
    width: 70%; height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
    pointer-events: none;
}
body .contact-card:hover {
    transform: translateY(-7px);
    border-color: rgba(47, 107, 255, .35);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(31,211,240,.3);
}
body .contact-card .icon { transition: transform .4s var(--bounce); display: inline-block; }
body .contact-card:hover .icon { transform: scale(1.15) rotate(-7deg); }
body .contact-card a { color: var(--blue-700); }

body .email-cta {
    background: linear-gradient(180deg, #ffffff, #f3f9ff);
    border: 1px solid rgba(47, 107, 255, .12);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}
body .email-button {
    background: linear-gradient(120deg, var(--blue), var(--cyan));
    border-radius: 999px;
    box-shadow: 0 10px 24px -8px rgba(47, 107, 255, .55);
    transition: transform .3s var(--bounce), box-shadow .3s var(--ease);
}
body .email-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 30px -10px rgba(47, 107, 255, .7);
}

/* =========================================================================
   App page — bounce the App Store download buttons
   ========================================================================= */
.download-link, footer a > img { display: inline-block; }
.download-link img { transition: transform .35s var(--bounce); }
.download-link:hover img { transform: translateY(-4px) scale(1.05); }

/* =========================================================================
   Reduced motion — calm everything down
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .bubble-field { display: none; }
    .js .stain-card { opacity: 1; transform: none; }
}