/* ==========================================================================
   EdgeRoute Hosting — Public homepage (landing page)
   Loaded by includes/head.tpl ONLY on the portal home page, after custom.css,
   so it can reuse every design token (colours, radii, shadows, gradients) and
   automatically follow the light / dark theme switcher.
   All classes are prefixed .er- to stay out of WHMCS's way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.er-hero { position: relative; }

/* Soft brand glow behind the hero copy (never blocks clicks). */
.er-hero::before,
.er-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
}
.er-hero::before {
    width: 520px; height: 520px;
    top: -140px; left: 50%;
    transform: translateX(-58%);
    background: radial-gradient(circle, rgba(0,163,255,.42), transparent 68%);
}
.er-hero::after {
    width: 420px; height: 420px;
    top: 40px; right: -120px;
    background: radial-gradient(circle, rgba(34,211,238,.30), transparent 70%);
}
html[data-er-theme="light"] .er-hero::before { opacity: .38; }
html[data-er-theme="light"] .er-hero::after  { opacity: .3; }

/* Trust pills under the primary buttons */
.er-hero-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    justify-content: center;
    padding: 0;
    margin: 1.6rem 0 0;
}
.er-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--er-text-3);
}
.er-hero-trust i { color: #00C48C; font-size: .95rem; }

/* Live status pill reused in the hero */
.er-hero-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.25rem;
    padding: .45rem 1rem .45rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--er-border);
    background: var(--er-glass);
    font-size: .78rem;
    font-weight: 600;
    color: var(--er-text-2);
    text-decoration: none !important;
}
.er-hero-status:hover { border-color: var(--er-border-2); color: var(--er-text) !important; }
.er-hero-status .er-status-dot { background: #00C48C; }

.er-hero-metrics { max-width: 1000px; }

/* --------------------------------------------------------------------------
   2. Product cards (driven by the real WHMCS product groups)
   -------------------------------------------------------------------------- */

.er-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.35rem;
}
.er-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.75rem 1.6rem;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
    background: var(--er-glass);
    box-shadow: var(--er-shadow-sm);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.er-product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--er-gradient);
    opacity: 0;
    transition: opacity .3s ease;
}
.er-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,163,255,.42);
    box-shadow: var(--er-glow);
}
.er-product-card:hover::before { opacity: 1; }
.er-product-card .er-product-ico {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: var(--er-gradient-soft);
    border: 1px solid rgba(0,163,255,.24);
    color: var(--er-blue);
    font-size: 1.25rem;
}
.er-product-card h3 {
    margin: 0;
    font-family: var(--er-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--er-text);
}
.er-product-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--er-text-3);
    flex: 1 1 auto;
}
.er-product-card .btn { align-self: flex-start; border-radius: 12px; }
.er-product-card.is-domain { background: var(--er-glass-2); }

/* --------------------------------------------------------------------------
   3. Feature grid ("what is included")
   -------------------------------------------------------------------------- */

.er-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.15rem;
}
.er-feature {
    display: flex;
    gap: 1rem;
    padding: 1.35rem 1.35rem 1.4rem;
    border-radius: var(--er-radius);
    border: 1px solid var(--er-border);
    background: var(--er-glass);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.er-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(0,163,255,.38);
    box-shadow: var(--er-glow);
}
.er-feature .er-feature-ico {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: var(--er-gradient-soft);
    border: 1px solid rgba(0,163,255,.22);
    color: var(--er-blue);
    font-size: 1.1rem;
}
.er-feature h3 {
    margin: 0 0 .35rem;
    font-family: var(--er-font-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--er-text);
}
.er-feature p {
    margin: 0;
    font-size: .855rem;
    line-height: 1.6;
    color: var(--er-text-3);
}

/* Compact "every plan includes" checklist strip */
.er-include-strip {
    margin-top: 1.6rem;
    padding: 1.35rem 1.6rem;
    border-radius: var(--er-radius-lg);
    border: 1px dashed var(--er-border-2);
    background: var(--er-glass-2);
}
.er-include-strip h3 {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--er-text-3);
    text-align: center;
}
.er-include-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem 1.4rem;
    padding: 0;
    margin: 0;
}
.er-include-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .875rem;
    color: var(--er-text-2);
}
.er-include-list li i {
    color: #00C48C;
    margin-top: .2rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. Platform / infrastructure
   -------------------------------------------------------------------------- */

.er-platform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.15rem;
}
.er-platform-item {
    padding: 1.5rem 1.4rem;
    border-radius: var(--er-radius);
    border: 1px solid var(--er-border);
    background: linear-gradient(180deg, var(--er-glass-2), var(--er-glass));
    text-align: center;
}
.er-platform-item i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .7rem;
    background: var(--er-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.er-platform-item strong {
    display: block;
    font-family: var(--er-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--er-text);
    letter-spacing: -0.02em;
}
.er-platform-item span {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--er-text-3);
}

/* --------------------------------------------------------------------------
   5. "Live in three steps"
   -------------------------------------------------------------------------- */

.er-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.35rem;
    counter-reset: er-step;
}
.er-step {
    position: relative;
    padding: 1.9rem 1.5rem 1.6rem;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
    background: var(--er-glass);
}
.er-step-num {
    counter-increment: er-step;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: var(--er-gradient);
    color: #fff;
    font-family: var(--er-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    box-shadow: var(--er-glow);
}
.er-step-num::before { content: counter(er-step); }
.er-step h3 {
    margin: 0 0 .5rem;
    font-family: var(--er-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--er-text);
}
.er-step p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--er-text-3);
}

/* --------------------------------------------------------------------------
   6. Benefits / "why us"
   -------------------------------------------------------------------------- */

.er-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.35rem;
}
.er-benefit {
    position: relative;
    padding: 1.9rem 1.6rem;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
    background:
        radial-gradient(420px 160px at 0% 0%, rgba(0,163,255,.14), transparent 70%),
        var(--er-glass);
    overflow: hidden;
}
.er-benefit .er-benefit-ico {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: var(--er-surface-3);
    border: 1px solid var(--er-border-2);
    color: var(--er-blue);
    font-size: 1.3rem;
    margin-bottom: 1.05rem;
}
.er-benefit h3 {
    margin: 0 0 .6rem;
    font-family: var(--er-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--er-text);
}
.er-benefit p {
    margin: 0 0 1rem;
    font-size: .885rem;
    line-height: 1.65;
    color: var(--er-text-3);
}
.er-benefit .er-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}
.er-benefit .er-benefit-list li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .84rem;
    color: var(--er-text-2);
}
.er-benefit .er-benefit-list i { color: var(--er-blue); margin-top: .2rem; }

/* --------------------------------------------------------------------------
   7. FAQ (native <details>, no JS required)
   -------------------------------------------------------------------------- */

.er-faq {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: .75rem;
}
.er-faq details {
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    background: var(--er-glass);
    overflow: hidden;
    transition: border-color .25s ease;
}
.er-faq details[open] { border-color: rgba(0,163,255,.38); }
.er-faq summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    color: var(--er-text);
    list-style: none;
}
.er-faq summary::-webkit-details-marker { display: none; }
/* Caret is a real <i> in the markup - no icon-font family guessing in CSS. */
.er-faq summary .er-faq-caret {
    margin-left: auto;
    font-size: .7rem;
    color: var(--er-text-3);
    transition: transform .25s ease;
}
.er-faq details[open] summary .er-faq-caret { transform: rotate(180deg); color: var(--er-blue); }
.er-faq summary:hover { color: var(--er-blue); }
.er-faq .er-faq-body {
    padding: 0 1.25rem 1.25rem;
    font-size: .885rem;
    line-height: 1.7;
    color: var(--er-text-2);
}
.er-faq .er-faq-body a { color: var(--er-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Closing call to action
   -------------------------------------------------------------------------- */

.er-cta-band {
    position: relative;
    margin: 3.5rem 0 1rem;
    padding: 3rem 2rem;
    border-radius: var(--er-radius-xl);
    border: 1px solid var(--er-border-2);
    background:
        radial-gradient(700px 260px at 15% 0%, rgba(0,163,255,.24), transparent 70%),
        radial-gradient(600px 240px at 90% 100%, rgba(34,211,238,.18), transparent 72%),
        var(--er-surface-2);
    text-align: center;
    overflow: hidden;
}
.er-cta-band h2 {
    margin: 0 0 .85rem;
    font-family: var(--er-font-display);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--er-text);
}
.er-cta-band p {
    max-width: 60ch;
    margin: 0 auto 1.85rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--er-text-2);
}
.er-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}
.er-cta-actions .btn { padding: .85rem 1.75rem; font-size: .95rem; border-radius: 13px; }
.er-cta-note {
    margin: 1.5rem auto 0;
    font-size: .8rem;
    color: var(--er-text-3);
}

/* --------------------------------------------------------------------------
   9. Guest sign-in card (replaces the account shortcuts for visitors)
   -------------------------------------------------------------------------- */

.er-signin-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem 2.1rem;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
    background: var(--er-glass);
}
.er-signin-card h3 {
    margin: 0 0 .6rem;
    font-family: var(--er-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--er-text);
}
.er-signin-card p { margin: 0 0 1.25rem; font-size: .9rem; color: var(--er-text-3); }
.er-signin-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.er-signin-actions .btn { border-radius: 12px; }
.er-signin-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}
.er-signin-list li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--er-text-2);
}
.er-signin-list i { color: var(--er-blue); margin-top: .2rem; }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .er-signin-card { grid-template-columns: 1fr; gap: 1.5rem; }
    .er-cta-band { padding: 2.5rem 1.5rem; }
}

@media (max-width: 575.98px) {
    .er-hero { padding: 2.75rem 0 2rem; }
    .er-hero::before { width: 360px; height: 360px; top: -110px; }
    .er-hero::after { display: none; }
    .er-hero-actions .btn { width: 100%; }
    .er-hero-trust { flex-direction: column; align-items: center; gap: .5rem; }
    .er-hero-metrics { margin-top: 2.25rem; gap: .7rem; }
    .er-metric { padding: 1rem .85rem; }
    .er-metric-value { font-size: 1.35rem; }
    .er-section { padding: 2.5rem 0 .75rem; }
    .er-section-head { margin-bottom: 1.75rem; }
    .er-feature { padding: 1.15rem; }
    .er-benefit { padding: 1.5rem 1.25rem; }
    .er-step { padding: 1.5rem 1.25rem 1.35rem; }
    .er-include-strip { padding: 1.15rem 1.15rem; }
    .er-faq summary { padding: .95rem 1rem; font-size: .9rem; }
    .er-faq .er-faq-body { padding: 0 1rem 1.05rem; }
    .er-cta-actions .btn { width: 100%; }
    .er-signin-card { padding: 1.5rem 1.25rem; }
}