/* =====================================================================
   RPS — Rathinam International Public School | Home page styles
   Dark theme • Clash font • logo-derived palette (pink/green/amber/navy)
   Tailwind (Play CDN) handles utilities; this file owns theming,
   ambient background, keyframe animations and bespoke components.
   ===================================================================== */

:root {
    --rps-pink:  #EC008C;
    --rps-green: #3DB54A;
    --rps-amber: #FBB040;
    --rps-navy:  #1B1464;
    --rps-blue:  #2E3192;
    --ink:       #0a0a12;
    --panel:     #12121f;
    --panel-2:   #16162a;
    --line:      rgba(255, 255, 255, 0.08);
    --text-1:    #f4f4fb;
    --text-2:    #a3a3b8;
    /* Section-accent TEXT gradients — single-hue & refined (no multi-colour mix).
       Dark sections use green (light→dark); light sections use yellow (light→dark).
       Pink is reserved for the buttons, not the headline text. */
    --grad-brand:       linear-gradient(100deg, #FDE047 0%, #F0B90A 100%); /* yellow — dark sections  */
    --grad-brand-light: linear-gradient(100deg, #EAB308 0%, #A16207 100%); /* yellow — light sections */
    --grad-btn:         linear-gradient(100deg, #FACC15 0%, #E0A800 100%); /* yellow button fill */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Belt-and-suspenders: never allow horizontal scroll on mobile.
   `clip` prevents the scroll without creating a scroll container
   (so fixed/sticky elements are unaffected). */
html, body { overflow-x: clip; max-width: 100%; }

/* Lenis smooth-scroll required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: "Clash Grotesk", system-ui, sans-serif; }

h1, h2, h3, h4, h5, .font-display { font-family: "Clash Display", sans-serif; }

::selection { background: #EAB308; color: #2a2100; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #08080f; }
::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #EAB308; }

/* ---------------------------------------------------------------------
   Ambient background — fixed dotted grid + drifting colour blobs
   --------------------------------------------------------------------- */
.rps-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(ellipse at top, #141327 0%, var(--ink) 60%);
}
.rps-grid {
    position: absolute;
    inset: -2px;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
}
.rps-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.22;
    animation: blobFloat 22s infinite alternate ease-in-out;
}
.rps-blob--pink  { width: 520px; height: 520px; background: #EAB308;  top: -120px; left: -120px; }
.rps-blob--green { width: 460px; height: 460px; background: var(--rps-green); bottom: -140px; right: -100px; animation-delay: -6s; }
.rps-blob--amber { width: 380px; height: 380px; background: var(--rps-amber); top: 45%; left: 55%; animation-delay: -12s; }

@keyframes blobFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 40px) scale(1.15); }
}

/* ---------------------------------------------------------------------
   Reusable helpers
   --------------------------------------------------------------------- */
.rps-container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }

.brand-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Light sections switch the headline gradient to yellow (use background-image so
   the text-clip set above is preserved). */
.sec-light .brand-text { background-image: var(--grad-brand-light); }
/* Hero "Success" now matches the yellow scheme. */
.brand-hero { background-image: var(--grad-brand); }

/* Primary button — yellow gradient with dark text (readable). Replaces the old
   pink buttons; child SVG inherits the dark colour via currentColor. */
.btn-primary {
    background-image: var(--grad-btn);
    color: #2a2100 !important;
}
.btn-primary:hover { filter: brightness(1.03); }

/* Glass panel */
.glass {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 22px;
}

/* Pill / eyebrow badge */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-1);
}
.eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #EAB308;
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.28);
    animation: heroPulse 2s ease-in-out infinite;
}
.sec-light .eyebrow .dot {
    background: #A16207;
    box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.22);
}

@keyframes heroPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* one-side accent border cards */
.side-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent, var(--rps-pink));
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s, box-shadow 0.35s;
}
.side-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px var(--accent, var(--rps-pink));
}

/* ---------------------------------------------------------------------
   Floating cards
   --------------------------------------------------------------------- */
.floating-card { animation: floatSlow 4s ease-in-out infinite; will-change: transform; }
.float-1 { animation-delay: 0s; }
.float-2 { animation-delay: 0.6s; }
.float-3 { animation-delay: 1.2s; }
.float-4 { animation-delay: 1.8s; }
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ---------------------------------------------------------------------
   Marquee (scrolling ticker)
   --------------------------------------------------------------------- */
.marquee { display: flex; overflow: hidden; user-select: none; gap: 0; }
.marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 3rem;
    min-width: 100%;
    padding-right: 3rem;
    animation: marqueeScroll var(--mq-speed, 32s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Gallery marquee rows — tighter gaps, fixed height, mixed widths */
.marquee__track.gallery-row { gap: 1rem; align-items: stretch; padding-right: 1rem; }
.gallery-item {
    height: 210px;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px -18px rgba(10, 10, 22, 0.55);
    background: #e7e9f6;
}
.gallery-item img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 768px) {
    .marquee__track.gallery-row { gap: 0.65rem; padding-right: 0.65rem; }
    .gallery-item { height: 150px; border-radius: 12px; }
}
@media (max-width: 480px) {
    .gallery-item { height: 126px; }
}

/* ---------------------------------------------------------------------
   Rising-line accent (borrowed idea from global — vertical light beam)
   --------------------------------------------------------------------- */
.rising-wrap { position: relative; width: 12px; margin: 0 auto; }
.rising-line {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 1px; height: 100%; overflow: hidden;
    background: linear-gradient(to top, rgba(236,0,140,0.5), rgba(236,0,140,0.05));
}
.rising-line::before {
    content: ""; position: absolute; left: -1px; right: -1px; bottom: -40%;
    height: 40%;
    background: linear-gradient(to top, rgba(236,0,140,0.95), rgba(236,0,140,0));
    filter: blur(0.5px);
    animation: riseUp 2.8s ease-in-out infinite;
}
@keyframes riseUp {
    0% { bottom: -40%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { bottom: 100%; opacity: 0; }
}

/* ---------------------------------------------------------------------
   Hover-reveal card (Why-choose / stages)
   --------------------------------------------------------------------- */
.reveal-card .reveal-desc {
    max-height: 0; opacity: 0; transform: translateY(8px); overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}
.reveal-card:hover .reveal-desc,
.reveal-card:focus-within .reveal-desc {
    max-height: 220px; opacity: 1; transform: translateY(0);
}

/* ---------------------------------------------------------------------
   Activity cards (co-curriculars) — clean, senior-school grid
   --------------------------------------------------------------------- */
.activity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
    min-height: 122px;
    padding: 1.35rem 0.8rem;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.activity-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 18px 32px -20px var(--accent);
}
.activity-ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    transition: transform 0.35s ease;
}
.activity-card:hover .activity-ico { transform: scale(1.08); }
.activity-ico svg { width: 24px; height: 24px; }
.activity-name { font-size: 0.86rem; font-weight: 600; color: var(--text-1); letter-spacing: 0.01em; }

/* ---------------------------------------------------------------------
   Stat counter
   --------------------------------------------------------------------- */
.stat-num { font-family: "Clash Display", sans-serif; font-weight: 600; line-height: 1; }

/* ---------------------------------------------------------------------
   Section heading utility
   --------------------------------------------------------------------- */
.sec-title {
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-1);
}

/* ---------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------- */
/* Header: TRANSPARENT over the hero banner, turns solid WHITE once the hero
   is scrolled past (JS toggles .scrolled at the hero's height). */
#rps-nav {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, padding 0.35s ease;
}
#rps-nav.scrolled {
    background: #ffffff;
    border-bottom: 1px solid rgba(27, 20, 100, 0.07);
    box-shadow: 0 4px 18px -8px rgba(10, 10, 22, 0.30);
}
/* subtle top scrim keeps white text/logo legible over bright banner areas */
#rps-nav:not(.scrolled)::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
    pointer-events: none;
}
/* Transparent state → white desktop links / phone / burger */
#rps-nav:not(.scrolled) .desk-menu a,
#rps-nav:not(.scrolled) a[href^="tel"] { color: #ffffff; }
#rps-nav:not(.scrolled) .desk-menu a:hover,
#rps-nav:not(.scrolled) a[href^="tel"]:hover { color: #FDE047; }
#rps-nav:not(.scrolled) .nav-link::after { background: #FDE047; }
#rps-nav:not(.scrolled) #rps-burger {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
/* Mobile/tablet: nav is ALWAYS solid white (never transparent) so the logo reads. */
@media (max-width: 1023px) {
    #rps-nav, #rps-nav.scrolled {
        background: #ffffff;
        border-bottom: 1px solid rgba(27, 20, 100, 0.08);
        box-shadow: 0 2px 12px -6px rgba(10, 10, 22, 0.22);
    }
    #rps-nav:not(.scrolled)::before { display: none; }
    #rps-nav:not(.scrolled) #rps-burger {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #1e293b;
    }
}
.nav-link { position: relative; }
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: #A16207; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.nav-dropdown { visibility: hidden; opacity: 0; transform: translateY(6px); transition: all 0.2s ease; }
.nav-group:hover .nav-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Swiper tweaks
   --------------------------------------------------------------------- */
.swiper-button-next, .swiper-button-prev { color: #fff; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 20px; font-weight: 700; }
.swiper-pagination-bullet { background: #fff; opacity: 0.4; }
.swiper-pagination-bullet-active { background: #EAB308; opacity: 1; width: 22px; border-radius: 6px; }

/* hero slider dark overlay (closing hero before footer) */
.hero-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(10,10,18,0.92) 0%, rgba(10,10,18,0.72) 40%, rgba(10,10,18,0.4) 100%);
}

/* Hero height: full viewport cover on desktop, a shorter banner on mobile
   (so wide banners aren't cropped into a tall strip and content follows below). */
.hero-cover { height: 100svh; min-height: 520px; }
@media (max-width: 1023px) {
    /* Phone/tablet: a clean 16:9 landscape banner that sits BELOW the solid nav. */
    .hero-cover {
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 0;
        margin-top: var(--nav-h, 72px);
    }
}

/* Top hero image slider — cinematic vignette + top/bottom fades.
   Darkens the edges, keeps the white nav & scroll cue legible, and blends
   the bottom into the dark page so the next section transition feels smooth. */
.hero-slider .swiper-slide { overflow: hidden; }
.hero-vignette {
    background:
        radial-gradient(ellipse 115% 90% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.22) 74%, rgba(0,0,0,0.5) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 52%, rgba(10,10,18,0.55) 84%, rgba(10,10,18,0.95) 100%);
}
/* Slightly larger, tappable pagination dots for the hero */
.hero-dots .swiper-pagination-bullet { width: 9px; height: 9px; opacity: 0.55; }
.hero-dots .swiper-pagination-bullet-active { width: 26px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.rps-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    color: var(--text-1);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
}
.rps-input:focus { border-color: #E0A800; background: rgba(255, 255, 255, 0.06); }
.rps-input::placeholder { color: var(--text-2); }
select.rps-input option { background: #14142a; color: #fff; }

/* ---------------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------------- */
.reveal-up { opacity: 0; transform: translateY(38px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }
.reveal-up.in { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Tabs (stages)
   --------------------------------------------------------------------- */
.stage-tab {
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.stage-tab:hover { color: var(--text-1); border-color: rgba(255, 255, 255, 0.2); }
.stage-tab.tab-active {
    color: #2a2100;
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: 0 8px 22px -10px rgba(224, 168, 0, 0.7);
}

/* Tab panels — fade + slide + subtle scale the incoming panel in on switch */
.stage-panel { display: none; }
.stage-panel.active { display: block; animation: tabIn 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes tabIn {
    from { opacity: 0; transform: translateY(20px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stage feature ticks — "live" pulsing ring (staggered like a wave) */
.stage-tick { animation: tickPulse 2s ease-in-out infinite; }
@keyframes tickPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.45); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0);   transform: scale(1.08); }
}
ul li:nth-child(2) .stage-tick { animation-delay: 0.4s; }
ul li:nth-child(3) .stage-tick { animation-delay: 0.8s; }
ul li:nth-child(4) .stage-tick { animation-delay: 1.2s; }

/* Gallery continuous flow: linear timing so autoplay glides like a marquee. */
.gallery-swiper .swiper-wrapper { transition-timing-function: linear !important; }

/* =====================================================================
   LIGHT SECTIONS — alternating theme for readability
   Add class "sec-light" to any <section> to flip it to a light palette.
   Every bespoke component (glass, side-card, hex, tabs, inputs, eyebrow)
   plus the common white-alpha utilities are re-mapped to ink-on-light.
   ===================================================================== */
.sec-light {
    position: relative;
    background: linear-gradient(180deg, #f6f7fd 0%, #eceefa 100%);
    color: #2a2a3d;
    isolation: isolate;
}
/* subtle dotted grid echoing the dark sections' texture */
.sec-light::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(27, 20, 100, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 100%);
}

/* text — exclude coloured buttons/pills so their white text survives */
.sec-light .sec-title { color: #16162a !important; }
.sec-light .text-white:not([class*="gradient"]):not([class*="bg-rps"]) { color: #16162a !important; }
.sec-light .text-slate-200 { color: #2a2a3d !important; }
.sec-light .text-slate-300,
.sec-light .text-slate-300\/90 { color: #454560 !important; }
.sec-light .text-slate-400 { color: #57576f !important; }
.sec-light .text-slate-500 { color: #8686a0 !important; }

/* eyebrow pill */
.sec-light .eyebrow {
    background: rgba(27, 20, 100, 0.05);
    border-color: rgba(27, 20, 100, 0.12);
    color: #16162a;
}

/* glass panels */
.sec-light .glass {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(27, 20, 100, 0.10);
    box-shadow: 0 12px 34px -20px rgba(27, 20, 100, 0.45);
}

/* one-side accent cards */
.sec-light .side-card {
    background: #ffffff;
    border-color: rgba(27, 20, 100, 0.08);
    box-shadow: 0 10px 26px -20px rgba(27, 20, 100, 0.5);
}

/* hexagons */
.sec-light .activity-card { background: #ffffff; border-color: rgba(27, 20, 100, 0.09); }
.sec-light .activity-name { color: #24243a; }

/* stage tabs (active tab keeps its brand gradient) */
.sec-light .stage-tab {
    background: rgba(27, 20, 100, 0.04);
    border-color: rgba(27, 20, 100, 0.12);
    color: #57576f;
}
.sec-light .stage-tab:hover { color: #16162a; border-color: rgba(27, 20, 100, 0.25); }

/* inputs */
.sec-light .rps-input {
    background: #ffffff;
    border-color: rgba(27, 20, 100, 0.15);
    color: #16162a;
}
.sec-light .rps-input::placeholder { color: #9090a6; }
.sec-light select.rps-input option { background: #fff; color: #16162a; }

/* generic white-alpha utilities → ink-alpha on light */
.sec-light .bg-white\/5 { background-color: rgba(27, 20, 100, 0.04) !important; }
.sec-light .bg-white\/\[0\.03\] { background-color: rgba(27, 20, 100, 0.03) !important; }
.sec-light .bg-white\/\[0\.02\] { background-color: rgba(27, 20, 100, 0.025) !important; }
.sec-light .border-white\/5 { border-color: rgba(27, 20, 100, 0.08) !important; }
.sec-light .border-white\/10 { border-color: rgba(27, 20, 100, 0.10) !important; }
.sec-light .border-white\/15 { border-color: rgba(27, 20, 100, 0.12) !important; }

/* dark image-placeholder gradients → neutral light on light sections */
.sec-light [class*="from-rps-panel"],
.sec-light [class*="from-rps-navy"] {
    background-image: none !important;
    background-color: #e7e9f6 !important;
}

/* swiper controls readable on light */
.sec-light .swiper-pagination-bullet { background: #1b1464; }
.sec-light .swiper-button-next, .sec-light .swiper-button-prev { color: #1b1464; }

/* =====================================================================
   Scroll-to-top button — sits just ABOVE the WhatsApp launcher (right).
   Self-contained so it never depends on a (possibly cached) Tailwind class.
   ===================================================================== */
.scroll-top {
    position: fixed;
    right: 30px;          /* centres the 48px button under the 60px WA launcher */
    bottom: 112px;        /* 24px WA offset + 60px launcher + comfortable gap */
    z-index: 940;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--grad-btn); color: #2a2100;
    box-shadow: 0 10px 24px rgba(224, 168, 0, 0.45);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { transform: translateY(0) scale(1.1); }

/* =====================================================================
   WhatsApp chat widget
   ===================================================================== */
.wa-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 950; }

.wa-launcher {
    position: relative;
    width: 60px; height: 60px;
    border: none; border-radius: 50%;
    background: #25D366; color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    animation: waFloat 3s ease-in-out infinite;
    transition: transform 0.25s ease;
}
.wa-launcher:hover { transform: scale(1.08); }
.wa-launcher svg { width: 34px; height: 34px; position: relative; z-index: 1; }
.wa-launcher-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; z-index: 0;
    animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
    0%   { transform: scale(1); opacity: 0.55; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
@keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.wa-popup {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 330px;
    max-width: calc(100vw - 3rem);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform-origin: bottom right;
    animation: waOpen 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wa-popup.wa-hidden { display: none; }

@keyframes waOpen {
    from { opacity: 0; transform: scale(0.85) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wa-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px;
    background: linear-gradient(135deg, #29b95a, #128C7E);
    color: #fff;
}
.wa-title { display: flex; align-items: center; gap: 10px; }
.wa-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: grid; place-items: center;
}
.wa-avatar svg { width: 22px; height: 22px; }
.wa-headtext { display: flex; flex-direction: column; line-height: 1.2; }
.wa-name { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 0.98rem; }
.wa-status { font-size: 0.68rem; opacity: 0.85; }
.wa-close {
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); color: #fff;
    display: grid; place-items: center; cursor: pointer;
    transition: background 0.2s ease;
}
.wa-close:hover { background: rgba(255, 255, 255, 0.35); }

.wa-body {
    min-height: 150px;
    padding: 18px 14px 16px;
    background-color: #e6ddd4;
    background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
    background-size: 18px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.wa-msg {
    align-self: flex-start;
    max-width: 86%;
    padding: 9px 12px;
    border-radius: 2px 12px 12px 12px;
    background: #fff; color: #1f2a30;
    font-size: 0.85rem; line-height: 1.45;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: scale(0.6) translateY(8px);
}
.wa-msg strong { color: #075E54; font-weight: 600; }
/* Final visible state set directly (not only via animation) so messages still
   appear for users with "reduce motion" enabled; the animation is entrance flair. */
.wa-msg.show { opacity: 1; transform: none; animation: waMsgPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes waMsgPop {
    0%   { opacity: 0; transform: scale(0.6) translateY(8px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* typing indicator */
.wa-typing {
    align-self: flex-start;
    display: none;
    gap: 4px; padding: 11px 12px;
    background: #fff; border-radius: 2px 12px 12px 12px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
}
.wa-typing.show { display: flex; }
.wa-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #9aa5ab;
    animation: waTyping 1s infinite ease-in-out;
}
.wa-typing span:nth-child(2) { animation-delay: 0.2s; }
.wa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes waTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.wa-footer { padding: 12px 14px; background: #f7f7f7; }
.wa-openchat {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px; border-radius: 11px;
    background: #25D366; color: #fff; text-decoration: none;
    font-weight: 600; font-size: 0.9rem;
    box-shadow: 0 8px 18px -8px rgba(37, 211, 102, 0.7);
    transition: background 0.2s ease, transform 0.2s ease;
}
.wa-openchat:hover { background: #1eb257; transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Mobile refinements
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Tighter vertical rhythm on small screens (utilities set 6rem/4rem). */
    section.py-24 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
    section.py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    /* Eyebrow pills wrap instead of overflowing their container. */
    .eyebrow { flex-wrap: wrap; row-gap: 0.15rem; }
    /* Slightly smaller ambient blobs so they don't wash out mobile text. */
    .rps-blob { opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}