/* ==========================================================================
   UMERGE — launch-site craft layer
   Depth, texture, motion and type on top of Elementor's structure.
   White canvas · bold UMERGE red · ink black. Sora display, Inter body.
   ========================================================================== */

:root {
    --white:    #FFFFFF;
    --ink:      #0f0f12;   /* a tuned near-black, faintly warm */
    --red:      #E11D2E;
    --red-deep: #B8141F;
    --grey-1:   #F4F4F5;   /* soft section tint */
    --grey-2:   #6B6B70;   /* muted text */
}

/* --- typography: Sora display + Inter body ----------------------------- */
body,
.umerge-body,
p, li, input, button, textarea {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink);
}
h1, h2, h3, h4, h5,
.umerge-display,
.elementor-heading-title {
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* --- texture: a faint grain so white reads as paper, not a flat fill --- */
body {
    background-color: var(--white);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}

/* --- elevation: cards and the phone mockups sit above the page --------- */
.umerge-card,
.elementor-widget-image-box .elementor-image-box-wrapper,
.umerge-shadow {
    box-shadow:
        0 1px 2px rgba(14, 14, 16, 0.05),
        0 14px 32px -14px rgba(14, 14, 16, 0.18);
}

/* feature cards + merch cards lift on hover */
.umerge-lift {
    transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.24s ease;
}
.umerge-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 4px rgba(14, 14, 16, 0.07),
        0 24px 44px -16px rgba(225, 29, 46, 0.26);
}

/* --- the hero red abstract shape --------------------------------------- */
.umerge-blob {
    background-image: radial-gradient(
        circle at 40% 35%,
        var(--red) 0%, var(--red-deep) 60%, #8f0f18 100%
    );
    filter: blur(2px);
}

/* --- buttons: app-store-style red, gradient sheen + press motion ------- */
.umerge-btn,
.elementor-button.umerge-btn {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow: 0 4px 14px -2px rgba(225, 29, 46, 0.45);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.umerge-btn:hover { box-shadow: 0 6px 20px -3px rgba(225, 29, 46, 0.55); }
.umerge-btn:active { transform: translateY(1px); }

/* --- section bands: alternating white / soft-grey with a soft scrim ---- */
.umerge-band-grey {
    background-color: var(--grey-1);
    background-image: linear-gradient(
        180deg, rgba(14,14,16,0.015) 0%, rgba(255,255,255,0) 40%
    );
}

/* --- the red waitlist band: a deep diagonal wash ----------------------- */
.umerge-band-red {
    background-image: linear-gradient(
        150deg, #E11D2E 0%, #C4151F 55%, #9d1018 100%
    );
}

/* --- scroll-reveal: sections fade up as they enter --------------------- */
[data-umerge-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-umerge-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- gentle float on the hero phone mockups ---------------------------- */
@keyframes umerge-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.umerge-float { animation: umerge-float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    [data-umerge-reveal] { opacity: 1; transform: none; transition: none; }
    .umerge-float { animation: none; }
}