/* Tweaks on top of Bootstrap 5 (loaded first in layout.php). */
html, body { overflow-x: hidden; }
.card.shadow-sm:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08) !important; }

/* ---- fiery brand accents ---- */
:root {
    --fire1: #ff7a00;
    --fire2: #ffab1a;
    --ink: #0b0b10;
    --ink2: #14141c;
    --panel: #181821;
    --line: #2a2a36;
}
.brand-gradient {
    background: linear-gradient(90deg, #ff7a00, #ffc02e);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: .4px; font-size: 1.3rem;
    text-shadow: 0 0 18px rgba(255, 138, 0, .35);
}

/* ---- dark navbar + footer (site-wide) ---- */
.site-nav {
    background: #0c0c12;
    border-bottom: 1px solid rgba(255, 138, 0, .25);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.site-nav .nav-link { color: #c9ccd6; font-weight: 500; }
.site-nav .nav-link:hover { color: #fff; }
.site-foot {
    background: #0a0a0f; color: #8a8f9c;
    border-top: 1px solid rgba(255, 138, 0, .18);
}
.btn-outline-secondary { border-color: #3a3a46; color: #d6d9e2; }
.btn-outline-secondary:hover { background: #26262f; color: #fff; border-color: #4a4a58; }

/* ---------------- Landing (full-bleed dark) ---------------- */
.landing {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -1.5rem;    /* cancel <main> py-4 top */
    margin-bottom: -1.5rem; /* cancel <main> py-4 bottom */
    background: var(--ink);
    color: #e7e8ee;
}

.hl {
    background: linear-gradient(90deg, #ff7a00, #ffc02e);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    border-bottom: 3px solid var(--fire1);
    padding-bottom: 2px;
}

.landing-hero {
    position: relative; overflow: hidden;
    padding: 90px 0 100px;
    background:
        radial-gradient(900px 600px at 80% 40%, rgba(255, 122, 0, .22), transparent 55%),
        radial-gradient(700px 500px at 10% 10%, rgba(255, 60, 0, .10), transparent 55%),
        linear-gradient(180deg, #0c0c12, #121017 60%, #0b0b10);
}
.hero-pill {
    display: inline-block; background: rgba(255, 138, 0, .12);
    color: #ffb84d; border: 1px solid rgba(255, 138, 0, .3);
    padding: .5em 1.1em; border-radius: 999px; font-size: .82rem; font-weight: 600;
    margin-bottom: 18px;
}
.hero-title {
    font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 800;
    line-height: 1.08; color: #fff; margin-bottom: 1rem;
}
.hero-lead { color: #a9adbb; font-size: 1.08rem; max-width: 540px; margin: 0 0 1.8rem; }

.btn-fire {
    background: linear-gradient(90deg, #ff6a00, #ffb01a);
    color: #1a1205; border: none; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 13px 30px; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(255, 122, 0, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-fire:hover { color: #1a1205; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 122, 0, .6); }
.btn-fire.btn-sm { padding: 7px 18px; text-transform: none; letter-spacing: 0; box-shadow: 0 6px 16px rgba(255, 122, 0, .4); }
.btn-fire-ghost {
    background: transparent; color: #ffb84d; border: 1px solid rgba(255, 138, 0, .45);
    font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    padding: 13px 26px; border-radius: 12px;
}
.btn-fire-ghost:hover { color: #fff; border-color: #ff7a00; background: rgba(255, 122, 0, .1); }

.compat-label { color: #7e8390; font-size: .85rem; margin-right: 8px; }
.compat-chip {
    display: inline-block; background: #17171f; border: 1px solid #2c2c38;
    color: #c6cad4; font-size: .78rem; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; margin: 3px;
}

/* ambient glows */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; }
.glow-1 { width: 380px; height: 380px; background: rgba(255, 122, 0, .3); top: -40px; right: 12%; animation: drift 18s ease-in-out infinite; }
.glow-2 { width: 300px; height: 300px; background: rgba(255, 40, 0, .18); bottom: -60px; left: 8%; animation: drift 24s ease-in-out infinite reverse; }

/* glowing emblem */
.emblem-wrap { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.emblem-ring {
    position: absolute; width: 330px; height: 330px; border-radius: 50%;
    background: conic-gradient(from 0deg, #ff7a00, #ffd24a, #ff3d00, #ff7a00);
    filter: blur(6px); opacity: .55; animation: spin 14s linear infinite;
}
.emblem {
    position: relative; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #241a10, #0c0b10 70%);
    border: 2px solid rgba(255, 170, 40, .5);
    box-shadow: 0 0 60px rgba(255, 122, 0, .55), inset 0 0 40px rgba(255, 122, 0, .25);
    display: flex; align-items: center; justify-content: center;
}
.emblem-screen {
    width: 190px; height: 120px; border-radius: 12px; background: #050507;
    border: 3px solid #2a2a34; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 0 24px rgba(255, 122, 0, .4);
}
.emblem-lock { font-size: 1.6rem; }
.emblem-word { color: #ffb84d; font-weight: 800; font-size: .8rem; letter-spacing: 2px; }

.spark {
    position: absolute; font-size: 1.5rem;
    background: #15151d; width: 50px; height: 50px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #2c2c38; box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.spark-1 { top: 6%; left: 8%; }
.spark-2 { bottom: 8%; right: 10%; }

.float-slow { animation: float 7s ease-in-out infinite; }
.float-fast { animation: float 4.5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -22px) scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* sections */
.section-title { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.section-sub { color: #9a9fac; }

.feature-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.feature-card:hover {
    transform: translateY(-4px); border-color: rgba(255, 138, 0, .45);
    box-shadow: 0 16px 40px rgba(255, 122, 0, .14);
}
.feature-icon {
    width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    background: linear-gradient(135deg, #ff6a00, #ffb01a);
    box-shadow: 0 8px 20px rgba(255, 122, 0, .35);
}
.feature-text { color: #a4a9b5; font-size: .9rem; }

.how-band {
    background:
        radial-gradient(700px 400px at 50% 0%, rgba(255, 122, 0, .18), transparent 60%),
        linear-gradient(180deg, #111017, #0c0c12);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.step-num {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px;
    background: linear-gradient(135deg, #ff6a00, #ffb01a); color: #1a1205;
    font-weight: 800; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(255, 122, 0, .4);
}
.step-text { color: #a4a9b5; font-size: .92rem; max-width: 280px; margin: 0 auto; }

.cta-card {
    background: radial-gradient(600px 300px at 50% 0%, rgba(255, 122, 0, .18), transparent 60%), #14141c;
    border: 1px solid rgba(255, 138, 0, .3); border-radius: 20px; padding: 46px 20px;
    box-shadow: 0 0 60px rgba(255, 122, 0, .12);
}

@media (max-width: 991px) {
    .emblem-wrap { margin-top: 44px; }
    .landing-hero { padding: 60px 0 70px; }
}