/* ============================================================
   GYLA — Landing Page
   A distinct visual register from the product UI: marketing-led,
   built around the platform's real mechanic (a leadership path:
   Learn → Practice → Lead → Certify) rather than generic SaaS
   template patterns.
   ============================================================ */

:root {
    --gyla-ink:        #0E1422;
    --gyla-ink-soft:    #3C4257;
    --gyla-brand:      #101DC7;
    --gyla-brand-deep: #0A1494;
    --gyla-brand-bright:#3B4CFF;
    --gyla-paper:      #FAF8F4;
    --gyla-paper-dim:  #F1EEE6;
    --gyla-gold:       #E8A23D;
    --gyla-gold-deep:  #C97F1E;
    --gyla-mist:       #E7E9F7;
    --gyla-line:       rgba(14,20,34,.10);
}

.lp-body {
    background: var(--gyla-paper);
    color: var(--gyla-ink);
}

.lp-display {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* ── Nav override for landing context ───────────────────────────────────── */
.lp-nav {
    background: var(--gyla-paper) !important;
    border-bottom: 1px solid var(--gyla-line) !important;
}
.lp-nav .navbar-brand { color: var(--gyla-ink) !important; }
.lp-nav .nav-link { color: var(--gyla-ink-soft) !important; }
.lp-nav .nav-link:hover { color: var(--gyla-brand) !important; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 4rem;
    background: var(--gyla-paper);
}
.lp-hero::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(16,29,199,.10) 0%, rgba(16,29,199,0) 70%);
    pointer-events: none;
}
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gyla-brand);
    background: var(--gyla-mist);
    border-radius: 999px;
    padding: .4rem .9rem;
}
.lp-eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gyla-gold);
    flex-shrink: 0;
}
.lp-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--gyla-ink);
    margin: 1.1rem 0 1.25rem;
}
.lp-hero h1 .accent { color: var(--gyla-brand); }
.lp-hero .lead-copy {
    font-size: 1.1rem;
    color: var(--gyla-ink-soft);
    max-width: 38ch;
    line-height: 1.6;
}
.lp-btn-primary {
    background: var(--gyla-ink);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: .85rem 1.6rem;
    border-radius: .65rem;
    transition: transform .15s ease, background .15s ease;
}
.lp-btn-primary:hover { background: var(--gyla-brand); color: #fff; transform: translateY(-1px); }
.lp-btn-ghost {
    background: transparent;
    color: var(--gyla-ink);
    border: 1.5px solid var(--gyla-line);
    font-weight: 600;
    padding: .85rem 1.6rem;
    border-radius: .65rem;
    transition: border-color .15s ease, transform .15s ease;
}
.lp-btn-ghost:hover { border-color: var(--gyla-ink); color: var(--gyla-ink); transform: translateY(-1px); }

/* Hero stat rail */
.lp-stat-rail {
    display: flex;
    gap: 2.25rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--gyla-line);
}
.lp-stat-rail .num {
    font-family: 'Sora', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--gyla-ink);
    line-height: 1;
}
.lp-stat-rail .label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--gyla-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .3rem;
}

/* Hero visual: a stacked "progress card" rather than an emoji box */
.lp-hero-card {
    background: var(--gyla-ink);
    border-radius: 1.5rem;
    padding: 2rem;
    color: #fff;
    position: relative;
    box-shadow: 0 30px 60px -20px rgba(14,20,34,.35);
}
.lp-hero-card .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.lp-hero-card .xp-pill {
    background: rgba(232,162,61,.18);
    color: var(--gyla-gold);
    font-weight: 700;
    font-size: .78rem;
    padding: .35rem .75rem;
    border-radius: 999px;
}
.lp-hero-card .module-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-hero-card .module-row:last-child { border-bottom: none; }
.lp-hero-card .module-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .7rem;
}
.lp-hero-card .module-check.done { background: var(--gyla-gold); color: var(--gyla-ink); }
.lp-hero-card .module-check.active { border: 2px solid var(--gyla-brand-bright); }
.lp-hero-card .module-check.pending { border: 2px solid rgba(255,255,255,.25); }
.lp-hero-card .module-label { font-size: .85rem; color: rgba(255,255,255,.92); flex-grow: 1; }
.lp-hero-card .module-label.dim { color: rgba(255,255,255,.45); }
.lp-floating-badge {
    position: absolute;
    background: #fff;
    color: var(--gyla-ink);
    border-radius: 1rem;
    padding: .65rem 1rem;
    box-shadow: 0 14px 30px -10px rgba(14,20,34,.25);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Section scaffolding ─────────────────────────────────────────────────── */
.lp-section { padding: 5rem 0; }
.lp-section-dim { background: var(--gyla-paper-dim); }
.lp-kicker {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gyla-brand);
    margin-bottom: .6rem;
}
.lp-section h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    color: var(--gyla-ink);
    letter-spacing: -.01em;
}

/* ── Signature element: The Leadership Path ─────────────────────────────── */
.lp-path {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
}
.lp-path::before {
    content: '';
    position: absolute;
    top: 28px; left: 6%; right: 6%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--gyla-line) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.lp-path-step {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: left;
}
.lp-path-node {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gyla-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gyla-brand);
    margin-bottom: 1.1rem;
    transition: border-color .2s ease, transform .2s ease;
}
.lp-path-step:hover .lp-path-node {
    border-color: var(--gyla-brand);
    transform: translateY(-3px);
}
.lp-path-step .stage-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gyla-gold-deep);
    margin-bottom: .35rem;
}
.lp-path-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gyla-ink);
    margin-bottom: .4rem;
}
.lp-path-step p {
    font-size: .88rem;
    color: var(--gyla-ink-soft);
    line-height: 1.55;
    max-width: 22ch;
}

@media (max-width: 991.98px) {
    .lp-path { flex-direction: column; gap: 2rem; }
    .lp-path::before { display: none; }
}

/* ── Course cards (landing variant) ─────────────────────────────────────── */
.lp-course-card {
    background: #fff;
    border: 1px solid var(--gyla-line);
    border-radius: 1.1rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    display: block;
    height: 100%;
}
.lp-course-card:hover {
    transform: translateY(-4px);
    border-color: var(--gyla-brand);
    box-shadow: 0 20px 40px -16px rgba(14,20,34,.18);
}
.lp-course-card .thumb-fallback {
    aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
    background: var(--gyla-mist);
    color: var(--gyla-brand);
    font-size: 1.8rem;
}
.lp-course-card .thumb {
    aspect-ratio: 16/10;
    width: 100%;
    object-fit: cover;
}
.lp-course-card .body { padding: 1.1rem 1.2rem; }
.lp-course-card .cat {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gyla-gold-deep);
}
.lp-course-card h3 {
    font-size: .98rem;
    font-weight: 700;
    color: var(--gyla-ink);
    margin: .35rem 0;
    line-height: 1.35;
}
.lp-course-card .meta {
    font-size: .78rem;
    color: var(--gyla-ink-soft);
}
.lp-course-card .foot {
    border-top: 1px solid var(--gyla-line);
    padding: .8rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .78rem;
}

/* ── Testimonial band ────────────────────────────────────────────────────── */
.lp-testimonial-band {
    background: var(--gyla-ink);
    color: #fff;
}
.lp-testimonial-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.1rem;
    padding: 1.6rem;
    height: 100%;
}
.lp-testimonial-card .stars { color: var(--gyla-gold); letter-spacing: .1em; }
.lp-testimonial-card p.quote {
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.lp-cta {
    background: linear-gradient(135deg, var(--gyla-brand-deep) 0%, var(--gyla-brand) 100%);
    border-radius: 1.75rem;
    padding: 3.5rem 2.5rem;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lp-cta::after {
    content: '';
    position: absolute;
    bottom: -40%; left: -10%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(232,162,61,.25) 0%, transparent 70%);
}
.lp-cta h2 { color: #fff; }
.lp-cta p { color: rgba(255,255,255,.78); }

/* ── Footer override ─────────────────────────────────────────────────────── */
.lp-footer { background: var(--gyla-ink); }