/*
 * LG200 Launch Landing Page
 * Gradient bg (cover), DP World logo TL, LG200 wordmark bottom-left.
 * Form sits directly on the bg (no overlay/card), centred + nudged up.
 */

:root {
    --lg-green: #00e68c;
    --lg-ink: #1b1747;
    --lg-white: #ffffff;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body.lg200-landing {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.lg200-landing {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lg-white);
    background: #2a2566 url('../images/bg.png') center center / cover no-repeat;
    background-attachment: fixed;
}

/* Full-viewport stage — everything fits on one screen, no scroll. */
.lg-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 60px);
}

/* DP World logo — top left */
.lg-dpworld {
    position: absolute;
    top: clamp(20px, 4vh, 48px);
    left: clamp(20px, 4vw, 56px);
    width: clamp(100px, 11vw, 160px);
    z-index: 3;
}
.lg-dpworld svg, .lg-dpworld img { width: 100%; height: auto; display: block; }

/* LG200 wordmark — bottom left, smaller; overlay behind the form */
.lg-wordmark {
    position: absolute;
    left: clamp(20px, 4vw, 56px);
    bottom: clamp(20px, 4vh, 44px);
    width: clamp(180px, 22vw, 340px);
    aspect-ratio: 538.2 / 128;   /* matches SVG viewBox so the box can't collapse */
    line-height: 0;
    z-index: 3;
    pointer-events: none;
}
.lg-wordmark svg,
.lg-wordmark img {
    display: block;
    width: 100%;
    height: 100%;
}
/* Make the brand outline read clearly against the gradient */
.lg-wordmark svg path[style*="stroke"] {
    stroke-width: 3px !important;
}
.lg-wordmark svg { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }

/* Centre form — centred, lifted slightly so it clears the bottom logo */
.lg-card {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    transform: translateY(-6vh); /* small lift, stays visually centred */
}

.lg-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lg-green);
    margin: 0 0 8px;
}

.lg-title {
    font-family: 'Pilat Wide', 'Pilat', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.05;
    margin: 0 0 6px;
    color: var(--lg-white);
}

.lg-subtitle {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.78);
}

/* Form fields */
.lg-form { display: flex; flex-direction: column; gap: 10px; }

.lg-field input {
    width: 100%;
    padding: 11px 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--lg-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.lg-field input::placeholder { color: rgba(255, 255, 255, 0.6); }
.lg-field input:focus {
    border-color: var(--lg-green);
    background: rgba(255, 255, 255, 0.12);
}

.lg-submit {
    margin-top: 4px;
    padding: 12px 18px;
    font-family: 'Pilat', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--lg-ink);
    background: var(--lg-green);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.lg-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 230, 140, 0.3); }
.lg-submit:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.lg-error {
    color: #ff8a9b;
    font-size: 13px;
    margin: 2px 0 0;
    min-height: 16px;
}

/* Thank-you state */
.lg-thanks {
    display: none;
}
.lg-thanks .lg-thanks-title {
    font-family: 'Pilat Wide', 'Pilat', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.1;
    margin: 0;
    color: var(--lg-white);
}
.lg-thanks .lg-thanks-sub {
    font-family: 'Manrope', sans-serif;
    color: var(--lg-green);
    font-weight: 600;
    margin: 12px 0 0;
}

/* Submitted state: swap form for thank-you */
.lg-card.is-submitted .lg-form-wrap { display: none; }
.lg-card.is-submitted .lg-thanks { display: block; }

/* Small screens */
@media (max-width: 600px) {
    .lg-wordmark { width: min(72vw, 300px); opacity: 0.9; bottom: 14px; }
    .lg-dpworld { width: 110px; }
    .lg-card { max-width: 100%; transform: translateY(-4vh); }
}

/* Short viewports — keep it all on one screen */
@media (max-height: 680px) {
    .lg-card { transform: translateY(-4vh); }
    .lg-wordmark { width: clamp(180px, 24vw, 300px); }
    .lg-subtitle { margin-bottom: 14px; }
    .lg-form { gap: 8px; }
}