/* Wonda AI — guest home page. Left hero copy, right showcase. */

.wonda-home__grid {
    display: grid !important;
    grid-template-columns: 55fr 45fr !important;
    min-height: calc(100vh - var(--site-header-h, 72px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}
body.wonda-home {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* ── Hero half ─────────────────────────────────────────────── */
.wonda-home__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px;
    background: #ffffff;
    order: 1;
}
.wonda-home__hero-inner {
    max-width: 620px;
    width: 100%;
}

.wonda-home__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    background: rgba(255, 0, 126, .08);
    color: #FF007E;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 26px;
}
.wonda-home__badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF007E;
    box-shadow: 0 0 0 3px rgba(255, 0, 126, .18);
    animation: wonda-home-pulse 2s ease-in-out infinite;
}
@keyframes wonda-home-pulse {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%      { opacity: .5; transform: scale(.85); }
}

.wonda-home__title {
    margin: 0 0 22px;
    font-size: 62px;
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.032em;
    color: #1c1c3c;
}
.wonda-home__accent {
    color: #FF007E;
    position: relative;
}

.wonda-home__lead {
    margin: 0 0 34px;
    font-size: 17px;
    line-height: 1.6;
    color: #64748b;
    max-width: 46ch;
}

.wonda-home__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.wonda-home__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    font-family: inherit;
    line-height: 1;
}

.wonda-home__cta--primary {
    background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
    color: #fff !important;
    box-shadow:
        0 10px 24px -10px rgba(255, 0, 126, .45),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}
.wonda-home__cta--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px -10px rgba(255, 0, 126, .55),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}
.wonda-home__cta--primary svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}
.wonda-home__cta--primary:hover svg {
    transform: translateX(3px);
}

.wonda-home__cta--ghost {
    background: #ffffff;
    color: #1c1c3c !important;
    border: 1px solid rgba(28, 28, 60, .12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wonda-home__cta--ghost:hover {
    background: #f8fafc;
    border-color: rgba(28, 28, 60, .22);
}

.wonda-home__trust {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
    letter-spacing: .02em;
}

/* Showcase half sits on the right (order 2) */
.wonda-home__grid > .wonda-authv2__showcase {
    order: 2;
    /* Tighten side padding so the window inside has more room. */
    padding: 40px 30px !important;
}

/* ── Mobile — stack, hero first ───────────────────────────── */
@media (max-width: 860px) {
    .wonda-home__grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .wonda-home__hero {
        padding: 40px 22px 24px;
        order: 1;
    }
    .wonda-home__title { font-size: 36px; line-height: 1.06; }
    .wonda-home__lead  { font-size: 15.5px; margin-bottom: 26px; }
    .wonda-home__ctas  { gap: 10px; margin-bottom: 18px; }
    .wonda-home__cta   { padding: 12px 20px; font-size: 14px; }
    .wonda-home__badge { font-size: 11.5px; margin-bottom: 20px; }

    .wonda-home__grid > .wonda-authv2__showcase {
        order: 2;
        padding: 20px 15px 34px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_MIN
   Minimal, safe. Nothing here changes layout or position.
   ================================================================ */

/* Bigger, bolder hero title. clamp() scales without overflow.
   No padding change, no position change. */
body.wonda-home .wonda-home__title {
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.034em;
    line-height: 1.03;
}

/* Accent word — soft band behind it, no z-index tricks */
body.wonda-home .wonda-home__accent {
    color: #FF007E;
    background-image: linear-gradient(180deg,
        transparent 62%,
        rgba(255, 0, 126, .14) 62%,
        rgba(255, 0, 126, .04) 100%);
    background-repeat: no-repeat;
}

body.wonda-home .wonda-home__lead {
    font-size: 17px;
    line-height: 1.55;
}

/* Decorative wash behind the hero, applied via background-image
   directly on the existing element. No new DOM nodes, no
   positioning, no filters, no animation. Cannot break layout. */
body.wonda-home .wonda-home__hero {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255, 0, 126, .06) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(108, 68, 244, .05) 0%, transparent 44%);
    background-repeat: no-repeat;
}

@media (max-width: 860px) {
    body.wonda-home .wonda-home__title {
        font-size: clamp(32px, 8vw, 44px);
        letter-spacing: -0.03em;
        line-height: 1.06;
    }
    body.wonda-home .wonda-home__lead { font-size: 15.5px; }
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_STATS_RAIL_MIN
   Same marquee, but each rule is defensive:
     - overflow: hidden on the rail
     - track has max-content width
     - everything inside the rail is position: static
     - no will-change on the rail itself (only on the track)
   ================================================================ */

body.wonda-site .wonda-stats-rail {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 28px 0;
    margin: 0;
    background: #ffffff;
    border-top: 1px solid rgba(28, 28, 60, .05);
    border-bottom: 1px solid rgba(28, 28, 60, .06);
    overflow: hidden;
}

body.wonda-site .wonda-stats-rail::before,
body.wonda-site .wonda-stats-rail::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 110px;
    z-index: 2;
    pointer-events: none;
}
body.wonda-site .wonda-stats-rail::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
body.wonda-site .wonda-stats-rail::after {
    right: 0;
    background: linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}

body.wonda-site .wonda-stats-rail__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    transform: translate3d(0, 0, 0);
    animation: wonda-stats-scroll 55s linear infinite;
    will-change: transform;
}
body.wonda-site .wonda-stats-rail:hover .wonda-stats-rail__track {
    animation-play-state: paused;
}

body.wonda-site .wonda-stats-rail__group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    flex-shrink: 0;
}

@keyframes wonda-stats-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

body.wonda-site .wonda-stat-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    min-width: 190px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(28, 28, 60, .08);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    flex-shrink: 0;
    box-sizing: border-box;
}

body.wonda-site .wonda-stat-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 0, 126, .10), rgba(255, 0, 126, .04));
    color: #FF007E;
    flex-shrink: 0;
}
body.wonda-site .wonda-stat-block__icon svg { width: 15px; height: 15px; display: block; }

body.wonda-site .wonda-stat-block__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

body.wonda-site .wonda-stat-block__value {
    font-size: 18px;
    font-weight: 800;
    color: #1c1c3c;
    letter-spacing: -0.022em;
    line-height: 1;
    white-space: nowrap;
}
body.wonda-site .wonda-stat-block__value small {
    font-size: 12px;
    font-weight: 700;
    color: #FF007E;
    margin-left: 1px;
}

body.wonda-site .wonda-stat-block__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    white-space: nowrap;
}

@media (max-width: 860px) {
    body.wonda-site .wonda-stats-rail { padding: 20px 0; }
    body.wonda-site .wonda-stats-rail::before,
    body.wonda-site .wonda-stats-rail::after { width: 48px; }
    body.wonda-site .wonda-stat-block { min-width: 164px; padding: 10px 14px; gap: 10px; }
    body.wonda-site .wonda-stat-block__value { font-size: 16px; }
    body.wonda-site .wonda-stat-block__value small { font-size: 11px; }
    body.wonda-site .wonda-stat-block__label { font-size: 9px; }
    body.wonda-site .wonda-stat-block__icon { width: 28px; height: 28px; border-radius: 8px; }
    body.wonda-site .wonda-stat-block__icon svg { width: 13px; height: 13px; }
    body.wonda-site .wonda-stats-rail__track { animation-duration: 40s; }
}

@media (prefers-reduced-motion: reduce) {
    body.wonda-site .wonda-stats-rail__track { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_HERO_FADE
   The hero's right edge fades to pure white so it merges
   seamlessly with the showcase column next to it. Uses a
   pseudo-element on the existing .wonda-home__hero, which
   already has position: relative + overflow: hidden.
   ================================================================ */

body.wonda-home .wonda-home__hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(80px, 14%, 220px);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0)    0%,
        rgba(255, 255, 255, .30) 35%,
        rgba(255, 255, 255, .72) 68%,
        rgba(255, 255, 255, .94) 88%,
        #ffffff                  100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Text sits above the fade */
body.wonda-home .wonda-home__hero-inner {
    position: relative;
    z-index: 1;
}

/* On mobile the columns stack — the fade would sit at the right
   edge of a full-width block and look wrong. Turn it off. */
@media (max-width: 860px) {
    body.wonda-home .wonda-home__hero::after {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_HERO_BLUE_FIX
   The hero previously had two unbounded radial gradients. The
   second one (violet at 88% 82%) grew to the furthest corner of
   the element, so on a tall hero it tinted the bottom edge with
   a soft blue-violet wash.

   Fix:
     · Bound both radials with explicit pixel sizes
     · Move both radials to the top half of the hero
     · Soften the violet so it reads warm, not cool
   ================================================================ */

body.wonda-home .wonda-home__hero {
    background-color: #ffffff;
    background-image:
        /* Pink, top-left, bounded 600 px */
        radial-gradient(600px 600px at 10% 22%,
            rgba(255, 0, 126, .055) 0%,
            rgba(255, 0, 126, .015) 45%,
            transparent 100%),
        /* Warm rose, top-right, bounded 520 px — reads warm not blue */
        radial-gradient(520px 520px at 92% 26%,
            rgba(255, 60, 140, .040) 0%,
            rgba(255, 60, 140, .012) 50%,
            transparent 100%);
    background-repeat: no-repeat;
    background-position: top left, top right;
    background-size: auto, auto;
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_HTML_BLUE_FIX
   The <html> element still has `background: #f8fafc` from app.css
   (a faint blue-grey). On the home page it can peek through in a
   sliver beneath the body. Force it white.
   Uses :has() so it only touches the home page — the dashboard
   keeps its own canvas gradient.
   ================================================================ */

html:has(body.wonda-home) {
    background: #ffffff;
}

/* Fallback for browsers without :has() — harmless if unused. */
body.wonda-home {
    background-color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_HERO_ONE_WASH
   Single radial gradient anchored at the top-left corner.
   Fades to fully transparent well before the bottom or right
   edge, so the rest of the hero is pure #ffffff.

   Ellipse geometry: 1100px wide × 900px tall, centre at (0,0).
   Gradient reaches zero alpha at 72% of the ellipse radius,
   which lands at roughly (790px, 650px) from the corner —
   before the bottom-left corner (~78% radius) and before the
   bottom-right corner (~110% radius).
   ================================================================ */

body.wonda-home .wonda-home__hero {
    background-color: #ffffff;
    background-image: radial-gradient(
        1100px 900px at 0% 0%,
        rgba(255, 0, 126, .085) 0%,
        rgba(255, 0, 126, .048) 22%,
        rgba(255, 0, 126, .014) 46%,
        rgba(255, 0, 126, 0)    72%
    );
    background-repeat: no-repeat;
    background-position: top left;
}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_TIGHT_GAP
   Kill the empty space between the hero copy and the widget.
   ================================================================ */

/* Cap the whole cluster. On a 2200px screen the layout stays the
   same as on a 1600px one, centred, instead of stretching thin. */
/* Grid max-width disabled — was capping the showcase column. */

/* Hero: more padding on the left, less on the right so text moves
   toward the centre-line. */
body.wonda-home .wonda-home__hero {
    padding: 56px 40px 56px 72px;
}

/* Text block gets wider so it fills more of its column */
body.wonda-home .wonda-home__hero-inner {
    max-width: 700px;
}

/* Showcase: widget hugs the left edge of its column instead of
   floating in the middle. Padding asymmetric for balance. */
/* Showcase override removed — the animation column is off-limits. */

@media (max-width: 1024px) {
    body.wonda-home .wonda-home__hero { padding: 48px 32px 48px 48px; }

}

/* Mobile already stacks — leave it alone */
@media (max-width: 860px) {
    body.wonda-home .wonda-home__grid { max-width: none; }
    body.wonda-home .wonda-home__hero { padding: 40px 22px 26px; }

}


/* ═══════════════════════════════════════════════════════════════
   WONDA_HOME_GAP_HERO_ONLY
   Re-applies only the hero-side breathing changes. The showcase
   column (animation side) is untouched.
   ================================================================ */

body.wonda-home .wonda-home__hero {
    /* More padding on the left, less on the right so the copy
       moves toward the centre. Symmetric top/bottom. */
    padding: 56px 40px 56px 72px;
}

body.wonda-home .wonda-home__hero-inner {
    /* Wider text block — uses the space instead of floating in it. */
    max-width: 700px;
}

@media (max-width: 1024px) {
    body.wonda-home .wonda-home__hero {
        padding: 48px 32px 48px 48px;
    }
}

@media (max-width: 860px) {
    body.wonda-home .wonda-home__hero {
        padding: 40px 22px 26px;
    }
}