/* ============================================================
   OpenCloudBot — Welcome / Landing page
   Sci-fi green hero. Shares the brand palette (mint/emerald green
   + Inter typeface) with the chat page, rendered on a dark canvas
   so the animated green glow reads as "sci-fi".
   ============================================================ */

:root {
    /* Brand greens (consistent with the chat app's mint/green theme) */
    --wp-green:        #2bffa3;   /* neon accent */
    --wp-green-soft:   #59e6a0;
    --wp-green-deep:   #0c7d57;
    --wp-mint:         #dbffe0;   /* matches chat --bg-main */
    --wp-bg:           #03100b;   /* near-black with a green tint */
    --wp-bg-2:         #061b13;
    --wp-text:         #eafff3;
    --wp-text-dim:     #8fb6a4;
    --wp-border:       rgba(120, 255, 190, 0.14);

    --wp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

.welcome-body {
    font-family: var(--wp-font);
    background: var(--wp-bg);
    color: var(--wp-text);
    min-height: 100dvh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* faint ambient green wash on the page background */
    background-image:
        radial-gradient(60% 50% at 50% 0%, rgba(43, 255, 163, 0.08), transparent 70%),
        radial-gradient(40% 40% at 100% 100%, rgba(12, 125, 87, 0.10), transparent 70%);
}

/* ----------------------------------------------------------------
   Top navigation
   ---------------------------------------------------------------- */
.wp-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 2rem;
}

.wp-nav-left {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.wp-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--wp-text);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.wp-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--wp-border), 0 0 14px rgba(43, 255, 163, 0.35);
}

.wp-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.wp-link {
    text-decoration: none;
    color: var(--wp-text-dim);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.18s ease;
}

.wp-link:hover {
    color: var(--wp-text);
}

.wp-nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wp-contact-wrapper {
    position: relative;
}

.wp-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--wp-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wp-border);
    border-radius: 9999px;
    background: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.wp-contact:hover {
    border-color: rgba(43, 255, 163, 0.5);
    background: rgba(43, 255, 163, 0.06);
}

.wp-contact-caret {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.wp-contact-wrapper.open .wp-contact-caret {
    transform: rotate(180deg);
}

/* Dropdown panel revealing the support email */
.wp-contact-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 240px;
    padding: 0.85rem 1rem;
    background: var(--wp-bg-2);
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 18px rgba(43, 255, 163, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 30;
}

.wp-contact-wrapper.open .wp-contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wp-contact-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp-text-dim);
    margin-bottom: 0.4rem;
}

.wp-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--wp-text);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.18s ease;
}

.wp-contact-email:hover {
    color: var(--wp-green);
}

.wp-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--wp-text);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

/* Mobile dropdown (hidden on desktop) */
.wp-mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 2rem 1rem;
    position: relative;
    z-index: 20;
}

.wp-mobile-menu.open {
    display: flex;
}

.wp-mobile-menu .wp-link {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--wp-border);
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.wp-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem 3.5rem;
    gap: 2rem;
}

.wp-hero-frame {
    position: relative;
    width: min(1180px, 100%);
    height: min(64vh, 560px);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--wp-border);
    background: radial-gradient(120% 120% at 50% 50%, var(--wp-bg-2), #020a07 70%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------------
   Animated sci-fi green effect (layered)
   ---------------------------------------------------------------- */
.wp-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Flowing rotating aurora — the main "wormhole" sweep */
.wp-fx-aurora {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(43, 255, 163, 0.0) 20deg,
        rgba(43, 255, 163, 0.55) 70deg,
        rgba(89, 230, 160, 0.15) 120deg,
        transparent 170deg,
        transparent 200deg,
        rgba(12, 125, 87, 0.45) 250deg,
        rgba(43, 255, 163, 0.30) 300deg,
        transparent 340deg
    );
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.8;
    animation: wp-spin 22s linear infinite;
}

/* Drifting glow blobs */
.wp-fx-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
}

.wp-fx-glow-a {
    width: 46%;
    aspect-ratio: 1 / 1;
    left: 18%;
    top: 30%;
    background: radial-gradient(circle, rgba(43, 255, 163, 0.55), transparent 65%);
    animation: wp-drift-a 16s ease-in-out infinite;
}

.wp-fx-glow-b {
    width: 50%;
    aspect-ratio: 1 / 1;
    right: 14%;
    bottom: 22%;
    background: radial-gradient(circle, rgba(12, 200, 130, 0.5), transparent 65%);
    animation: wp-drift-b 19s ease-in-out infinite;
}

/* Bright pulsing core in the very center */
.wp-fx-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(220, 255, 224, 0.9), rgba(43, 255, 163, 0.35) 35%, transparent 70%);
    border-radius: 50%;
    filter: blur(30px);
    animation: wp-pulse 6s ease-in-out infinite;
}

/* Subtle sci-fi grid overlay */
.wp-fx-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(43, 255, 163, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 255, 163, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 75%);
    opacity: 0.5;
}

/* Edge vignette so the glow is pinched toward the centre */
.wp-fx-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(3, 16, 11, 0.85) 85%);
}

/* Hero text overlaid on the effect */
.wp-hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 1rem;
}

.wp-title {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #ffffff;
    text-shadow:
        0 0 24px rgba(43, 255, 163, 0.45),
        0 2px 30px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------
   CTA button
   ---------------------------------------------------------------- */
.wp-cta {
    display: flex;
    justify-content: center;
}

.wp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    color: #04130d;
    padding: 0.9rem 2.4rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--wp-green), var(--wp-green-soft));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 8px 30px rgba(43, 255, 163, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.wp-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 12px 40px rgba(43, 255, 163, 0.5);
}

.wp-btn:active {
    transform: translateY(0);
}

/* ----------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------- */
@keyframes wp-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wp-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.92); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes wp-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(12%, -8%) scale(1.12); }
}

@keyframes wp-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10%, 8%) scale(1.1); }
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.wp-footer {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--wp-border);
    padding: 3.5rem 2rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(6, 27, 19, 0.55));
}

.wp-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.wp-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
}

.wp-footer-brand h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wp-text);
    margin-bottom: 0.9rem;
}

.wp-footer-brand p {
    color: var(--wp-text-dim);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 38ch;
}

.wp-footer-col {
    display: flex;
    flex-direction: column;
}

.wp-footer-col h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp-text);
    margin-bottom: 1.1rem;
}

.wp-footer-link {
    color: var(--wp-text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.35rem 0;
    transition: color 0.18s ease;
    width: fit-content;
}

.wp-footer-link:hover {
    color: var(--wp-green);
}

.wp-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wp-border);
    text-align: center;
    color: var(--wp-text-dim);
    font-size: 0.85rem;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 760px) {
    .wp-nav { padding: 0.9rem 1.1rem; }
    .wp-links { display: none; }
    .wp-contact-wrapper { display: none; }
    .wp-nav-toggle { display: block; }
    .wp-nav-left { gap: 0; }

    .wp-hero { padding: 0.5rem 1.1rem 2.5rem; gap: 1.5rem; }
    .wp-hero-frame { height: min(58vh, 460px); border-radius: 20px; }

    .wp-footer { padding: 2.5rem 1.5rem 1.75rem; }
    .wp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .wp-footer-brand { grid-column: 1 / -1; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .wp-fx-aurora,
    .wp-fx-glow-a,
    .wp-fx-glow-b,
    .wp-fx-core {
        animation: none;
    }
}