/*
 * elevate_landing.css — Luxury landing page for ElevateVN
 * Synced to ow_static on every Cloud Run redeploy (no Docker rebuild needed).
 * Template changes (index.html) take effect after Docker rebuild.
 */

/* ── Reset landing shell ── */
.elv-landing {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    color: #1a1a2e;
    overflow-x: hidden;
}

/* ── Navigation ── */
.elv-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 68px;
    background: transparent;
    transition: background 0.3s, box-shadow 0.3s;
}
.elv-nav.scrolled {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
    backdrop-filter: blur(12px);
}
.elv-nav-logo img { height: 36px; display: block; }
.elv-nav-logo-text {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-decoration: none;
}
.elv-nav.scrolled .elv-nav-logo-text { color: #7C3AED; }
.elv-nav-links { display: flex; align-items: center; gap: 24px; }
.elv-nav-signin {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 8px 20px;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 24px;
    transition: all 0.2s;
}
.elv-nav-signin:hover {
    background: rgba(255,255,255,0.15);
    border-color: #ffffff;
    color: #ffffff;
    text-decoration: none;
}
.elv-nav.scrolled .elv-nav-signin {
    color: #7C3AED;
    border-color: #DDD6FE;
    background: #F5F3FF;
}

/* ── Hero ── */
.elv-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.elv-hero-bg {
    position: absolute;
    inset: 0;
    background-color: #1a0a35; /* shows while video loads */
    background-image: url(/ow_userfiles/landing-hero.jpg); /* static fallback */
    background-size: cover;
    background-position: center top;
    overflow: hidden;
}

/* Video background — fills the hero, object-fit:cover like background-size:cover */
.elv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Subtle slowdown makes it feel more cinematic */
    animation: elv-video-scale 0.8s ease forwards;
}
@keyframes elv-video-scale {
    from { transform: scale(1.04); opacity: 0.6; }
    to   { transform: scale(1);    opacity: 1; }
}

/* On very slow connections / reduced-motion preference: hide video, show image */
@media (prefers-reduced-motion: reduce) {
    .elv-hero-video { display: none; }
}

/* Mobile: video still works but reduce file size concern with poster fallback */
@media (max-width: 600px) {
    .elv-hero-video { object-position: center center; }
}
.elv-hero-overlay {
    position: absolute;
    inset: 0;
    /* Complements warm sunset imagery without fighting the colors */
    background: linear-gradient(
        to bottom,
        rgba(5, 10, 30, 0.55) 0%,       /* dark navy top → text readable */
        rgba(5, 10, 30, 0.25) 45%,       /* near-transparent middle → image shines */
        rgba(5, 10, 30, 0.70) 100%       /* darker bottom → join form readable */
    );
}
.elv-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 0 24px;
    margin-top: 68px;
}
.elv-hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #C4B5FD;
    margin-bottom: 20px;
}
.elv-hero-headline {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 20px;
    letter-spacing: -1.5px;
}
.elv-hero-headline em {
    font-style: normal;
    /* Warm gold accent that complements sunset imagery */
    background: linear-gradient(90deg, #FCD34D, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.elv-hero-sub {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    margin: 0 0 40px;
    font-weight: 400;
}

/* ── Join form in hero ── */
.elv-hero-join {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 480px;
    margin: 0 auto;
}
.elv-hero-join .ow_customindex-join { color: #ffffff; }
.elv-hero-join .ow_qs_field { margin-bottom: 14px; }
.elv-hero-join .ow_qs_label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 5px;
    text-align: left;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.elv-hero-join input[type="text"],
.elv-hero-join input[type="email"],
.elv-hero-join select {
    width: 100%;
    height: 46px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    color: #ffffff;
    font-size: 15px;
    padding: 0 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}
.elv-hero-join input::placeholder { color: rgba(255,255,255,0.45); }
.elv-hero-join input:focus,
.elv-hero-join select:focus {
    outline: none;
    background: rgba(255,255,255,0.18);
    border-color: rgba(196,181,253,0.7);
}
.elv-hero-join select option { color: #1a1a2e; background: #fff; }
.elv-hero-join .ow_qs_btn { margin-top: 6px; }
.elv-hero-join input[type="submit"],
.elv-hero-join .ow_submit {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 4px 20px rgba(124,58,237,0.45);
}
.elv-hero-join input[type="submit"]:hover,
.elv-hero-join .ow_submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.55);
}
.elv-join-label {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
    font-weight: 500;
}

/* ── Stats bar ── */
.elv-stats {
    background: #ffffff;
    border-bottom: 1px solid #F0F0F5;
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    gap: 60px;
}
.elv-stat { text-align: center; }
.elv-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #7C3AED;
    display: block;
}
.elv-stat-label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}

/* ── Features ── */
.elv-features {
    background: #FAFAFA;
    padding: 80px 40px;
}
.elv-features-headline {
    text-align: center;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 56px;
    letter-spacing: -0.5px;
}
.elv-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1040px;
    margin: 0 auto;
}
.elv-feature {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.elv-feature:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.elv-feature-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    color: #7C3AED;
}
.elv-feature h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}
.elv-feature p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.65;
    margin: 0;
}

/* ── Member showcase ── */
.elv-members {
    padding: 80px 40px;
    background: #ffffff;
    text-align: center;
}
.elv-members h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.elv-members-sub {
    font-size: 16px;
    color: #6B7280;
    margin: 0 0 48px;
}
.elv-members .ow_user_list_wrap { max-width: 900px; margin: 0 auto; }

/* ── CTA section ── */
.elv-cta {
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #9333EA 100%);
    padding: 80px 40px;
    text-align: center;
}
.elv-cta h2 {
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.elv-cta p {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 36px;
}
.elv-cta-btn {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 44px;
    background: #ffffff;
    color: #7C3AED;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    letter-spacing: 0.02em;
}
.elv-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    text-decoration: none;
    color: #6D28D9;
}

/* ── Footer ── */
.elv-footer {
    background: #0f0520;
    color: rgba(255,255,255,0.6);
    padding: 40px;
}
/*
   3-column grid: logo (1fr) | nav (auto, centered) | copyright (1fr right-aligned).
   The 1fr/1fr outer columns are EQUAL width, so the centered nav has the same
   amount of breathing room on each side regardless of how long the logo or
   copyright text is. The previous `justify-content: space-between` made the
   nav drift left because the logo string is shorter than the copyright string.
*/
.elv-footer-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.elv-footer-inner > .elv-footer-logo { justify-self: start; }
.elv-footer-inner > .elv-footer-nav  { justify-self: center; }
.elv-footer-inner > .elv-footer-copy,
.elv-footer-inner > .ow_copyright    { justify-self: end; text-align: right; }
.elv-footer-logo {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}
.elv-footer .ow_copyright { font-size: 13px; color: rgba(255,255,255,0.45); }

/* Footer nav (Terms / Privacy / etc).
   The links are now emitted explicitly from the landing template along with
   a dedicated <span class="elv-footer-sep">|</span>, so we can control the
   exact whitespace on either side of the pipe. No more reliance on the
   SkaDate {$bottom_menu} template's literal "| " text node whose surrounding
   whitespace varied per browser. */
.elv-footer-nav {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}
.elv-footer-nav a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 0 12px;       /* equal breathing room on both sides of every link */
    white-space: nowrap;
    transition: color .15s ease;
}
.elv-footer-nav a:hover { color: #ffffff; }
.elv-footer-nav a:first-child { padding-left: 0; }
.elv-footer-nav a:last-child  { padding-right: 0; }
.elv-footer-nav .elv-footer-sep {
    color: rgba(255,255,255,0.25);
    user-select: none;
    pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .elv-nav { padding: 0 20px; }
    .elv-features { padding: 56px 20px; }
    .elv-features-grid { grid-template-columns: 1fr; gap: 16px; }
    .elv-members { padding: 56px 20px; }
    .elv-cta { padding: 56px 20px; }
    .elv-stats { padding: 20px; gap: 32px; flex-wrap: wrap; }
    .elv-hero-join { padding: 20px; }
    /* On narrow viewports collapse to a single centered column. */
    .elv-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px;
    }
    .elv-footer-inner > .elv-footer-logo,
    .elv-footer-inner > .elv-footer-nav,
    .elv-footer-inner > .elv-footer-copy,
    .elv-footer-inner > .ow_copyright { justify-self: center; text-align: center; }
}
@media (max-width: 600px) {
    .elv-hero-headline { font-size: 36px; }
    .elv-features-grid { grid-template-columns: 1fr; }
    .elv-hero-content { margin-top: 80px; }
}

/* ============================================================
   ElevateVN — supplemental styles for the active-plugin landing page.
   The original elevate_landing.css was scoped to the customindex plugin
   layout (which used inline CMP forms). This block adds the missing
   pieces for the simpler hero-CTA layout shipped from elevate_admin_tools.
   ============================================================ */
.elv-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: #FFFFFF;
    color: #7C3AED;
    letter-spacing: 0.01em;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.elv-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.elv-nav.scrolled .elv-nav-cta { background: #7C3AED; color: #ffffff; }
.elv-nav.scrolled .elv-nav-cta:hover { background: #6D28D9; }

.elv-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}
.elv-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: #ffffff;
    color: #5B21B6;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    transition: transform .15s ease, box-shadow .15s ease;
    letter-spacing: 0.01em;
}
.elv-hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.elv-hero-cta-secondary {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.elv-hero-cta-secondary:hover { color: #ffffff; border-bottom-color: rgba(255,255,255,0.6); }

.elv-footer-copy { font-size: 12px; opacity: 0.7; }

/* Mobile-ish tweaks for narrower viewports. */
@media (max-width: 600px) {
    .elv-hero-cta-primary { padding: 14px 28px; font-size: 15px; }
    .elv-nav { padding: 0 16px; }
    .elv-nav-links { gap: 12px; }
    .elv-nav-cta { padding: 8px 14px; font-size: 13px; }
}