*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    background: #040a19;
}

/* ── Page shell ───────────────────────────────────────────── */
.page {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Background ───────────────────────────────────────────── */
.bg-photo {
    position: absolute;
    inset: 0;
    background-image: url('/images/login_background/bg-1.jpeg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}
/* Simple 3-stop gradient — no complexity theater */
.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(4, 10, 25, 0.90) 0%,
        rgba(4, 10, 25, 0.60) 52%,
        rgba(4, 10, 25, 0.18) 100%
    );
    z-index: 1;
}

/* ── Nav ──────────────────────────────────────────────────── */
/*
 * Masthead approach: the logo sits in a full-height white band
 * flush to the left edge — like an institutional newspaper header.
 * Reads as deliberate identity, not a workaround for white-bg logo.
 */
.lp-nav {
    position: relative;
    z-index: 10;
    height: 70px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-shrink: 0;
}

.lp-brand {
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 28px;
    flex-shrink: 0;
    text-decoration: none;
}
.lp-brand img {
    height: 46px;
    width: auto;
    display: block;
}

.lp-nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
}
.nav-hint {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.58);
    margin-right: 4px;
}

/* ── Nav separator — one structural line, not decoration ──── */
.nav-rule {
    position: relative;
    z-index: 9;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}
.btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.btn-navy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid #1f4e79;
    border-radius: 5px;
    background: #1f4e79;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease;
    white-space: nowrap;
}
.btn-navy:hover {
    background: #2a6094;
    color: #fff;
}

/* Hero-scale buttons */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}
.btn-hero:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

/* ── Hero body ────────────────────────────────────────────── */
.hero-body {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 52px 52px 80px;
}

/* Entire content block fades in as one unit — no per-element stagger */
.hero-content {
    max-width: 530px;
    opacity: 0;
    animation: blockFade 0.55s ease 0.08s forwards;
}
@keyframes blockFade {
    to { opacity: 1; }
}

/*
 * Typography contrast is the craft signal here:
 * 11px wide-tracked uppercase pre-title vs. 92px ultra-tight headline.
 * Neither would be the "default" AI generates.
 */
.pre-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.50);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main-title {
    font-size: clamp(52px, 7.8vw, 92px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
    line-height: 1.0;
    margin-bottom: 24px;
}

.body-copy {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.63);
    max-width: 450px;
    margin-bottom: 36px;
}

.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* ── Download card ────────────────────────────────────────── */
/*
 * Brand red (#D62027) appears exactly once — as a 3px left border
 * on this card. Asymmetric radius: flat on the accented side.
 * Discipline: one use of the accent color signals intention, not noise.
 */
.dl-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 3px solid #D62027;
    border-radius: 0 6px 6px 0;
    background: transparent;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
    max-width: 390px;
}
.dl-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.38);
    border-left-color: #D62027;
    color: inherit;
}

.dl-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dl-icon i { font-size: 20px; color: #fff; }

.dl-text { display: flex; flex-direction: column; gap: 3px; }
.dl-text strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.dl-text small  { font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }

/* ── Footer ───────────────────────────────────────────────── */
.lp-footer {
    position: relative;
    z-index: 10;
    padding: 14px 52px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 10, 25, 0.72);
    flex-shrink: 0;
}
.lp-footer p {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.32);
    margin: 0;
}

/* ── Language switcher ────────────────────────────────────── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}
.lang-switcher a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}
.lang-switcher a:hover,
.lang-switcher a.active {
    color: #fff;
}
.lang-sep {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .lp-nav-auth { padding: 0 16px; gap: 8px; }
    .nav-hint { display: none; }
    .lp-brand img { height: 38px; }
    .lp-brand { padding: 0 18px; }
    .hero-body { padding: 36px 24px 68px; }
    .hero-btns { flex-direction: column; }
    .btn-hero { justify-content: center; }
    .dl-card { max-width: 100%; }
    .lp-footer { padding: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content { opacity: 1; animation: none; }
}