/* ============================================================
   EPX Design System — Teal accent update (May 2026)
   File: wwwroot/css/landing-teal.css
   Usage: add <link rel="stylesheet" href="~/css/landing-teal.css"
               asp-append-version="true" /> to Index.cshtml
          AFTER the existing landing.css link — cascade overrides.

   Every selector below maps directly to a class used in Index.cshtml.
============================================================ */

/* ── 1. CSS variable additions ────────────────────────────── */
:root {
    --teal: #00D4AA;
    --teal-dark: #00c49c; /* hover state  */
    --teal-glow: rgba(0,212,170,.35);
    --teal-glow-soft: rgba(0,212,170,.12);
    --teal-border: rgba(0,212,170,.30);
    --teal-dim: rgba(0,212,170,.10);
    --teal-light: #5eecd8; /* replaces blue-light on dark bg */
}

/* ── 2. Navbar brand "X" ──────────────────────────────────── */
/* <a class="nav-brand">EPITOME<span>X</span></a>            */
.nav-brand span {
    color: var(--teal);
}

/* ── 3. Nav CTA button "Portal login →" ──────────────────── */
/* <a class="nav-cta" ...>                                    */
.nav-cta {
    background: var(--teal) !important;
    color: #000 !important; /* teal needs dark text */
    border-color: var(--teal) !important;
}

    .nav-cta:hover {
        background: var(--teal-dark) !important;
        opacity: 1 !important;
    }

/* ── 4. Hero h1 accent span ───────────────────────────────── */
/* <h1>Physical Truth in<br /><span>Global Logistics.</span> */
.hero h1 span {
    color: var(--teal);
}

/* ── 5. Hero tag badge ────────────────────────────────────── */
/* <div class="hero-tag">EPX Terminal Network — Live</div>   */
.hero-tag {
    background: var(--teal-dim);
    border-color: var(--teal-border);
    color: var(--teal-light);
}

/* ── 6. Hero radial glow (::before pseudo) ────────────────── */
.hero::before {
    background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(0,212,170,.12) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,212,170,.06) 0%, transparent 60%);
}

/* ── 7. Primary CTA button "Explore services" / "Login" ──── */
/* <a class="btn-primary-epx">                                */
.btn-primary-epx {
    background: var(--teal);
    color: #000;
    border-color: var(--teal);
    box-shadow: 0 0 24px var(--teal-glow);
}

    .btn-primary-epx:hover {
        background: var(--teal-dark);
        border-color: var(--teal-dark);
        box-shadow: 0 0 32px rgba(0,212,170,.5);
        color: #000;
    }

/* ── 8. Ghost button "Operator login" / "Get in touch" ────── */
/* <a class="btn-ghost-epx">                                  */
.btn-ghost-epx {
    border-color: var(--teal-border);
    color: var(--teal-light);
}

    .btn-ghost-epx:hover {
        border-color: rgba(0,212,170,.6);
        background: var(--teal-dim);
        color: #fff;
    }

/* ── 9. Stats strip values ────────────────────────────────── */
/* <div class="stat-value">99<span>.4%</span></div>           */
.stat-value,
.stat-value span {
    color: var(--teal);
}

/* ── 10. How-it-works step numbers ────────────────────────── */
/* <div class="step-num">STEP 01</div>                        */
.step-num {
    color: var(--teal);
    border-color: var(--teal-border);
    background: var(--teal-dim);
}

.step:hover {
    border-color: rgba(0,212,170,.2);
}

/* ── 11. Service card icons ───────────────────────────────── */
/* <div class="service-icon"><i class="bi bi-..."></i></div>  */
.service-icon {
    background: var(--teal-dim);
    color: var(--teal);
}

.service-card:hover {
    border-color: rgba(0,212,170,.2);
    box-shadow: 0 0 32px rgba(0,212,170,.07);
}

/* ── 12. Section labels ───────────────────────────────────── */
/* <div class="section-label">Process</div>                   */
.section-label {
    color: var(--teal);
    border-color: var(--teal-border);
    background: var(--teal-dim);
}

/* ── 13. Terms list check icons ───────────────────────────── */
/* <i class="bi bi-check2-circle"></i>                        */
.terms-list li i {
    color: var(--teal);
}

/* ── 14. Terminal block key colour ────────────────────────── */
/* <span class="t-key">network</span>                         */
.t-key {
    color: var(--teal-light);
}

/* ── 15. CTA section background glow ─────────────────────── */
.cta-section {
    background: radial-gradient( ellipse 60% 60% at 50% 50%, rgba(0,212,170,.08) 0%, transparent 70% );
}

/* ── 16. Footer brand "X" ─────────────────────────────────── */
/* <div class="footer-brand">EPITOME<span>X</span></div>      */
.footer-brand span {
    color: var(--teal);
}

/* ── 17. Nav link hover ────────────────────────────────────── */
.nav-links a:hover {
    color: var(--teal);
}

.footer-links a:hover {
    color: var(--teal);
}

/* ── 18. Focus ring ───────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}