/* =========================
GLOBAL SITE STYLING
========================= */

body {
    background: #050000;
    color: #ffeaea;
    font-family: "Oswald", "Segoe UI", sans-serif;
    letter-spacing: 0.5px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,0,0,0.15), transparent 70%);
    pointer-events: none;
}

/* =========================
TYPOGRAPHY
========================= */

h1, h2, h3, h4 {
    text-transform: uppercase;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
}

.hero-title {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 900;
    text-align: center;
    text-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000;
}

.hero-highlight {
    color: #ff2b2b;
}

/* =========================
NAVBAR
========================= */

.navbar {
    background: #0a0a12;
    border-bottom: 3px solid #ff0000;
}

.navbar-brand {
    font-weight: 900;
    color: #ffffff !important;
}

.navbar-brand span {
    color: #ff0000;
}

.nav-link {
    color: #ccc !important;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-link:hover {
    color: #ff0000 !important;
}

/* =========================
ALERT BANNER
========================= */

.alert-bar {
    background: #ff2b2b;
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 12px;
    letter-spacing: 1px;
}

/* =========================
BUTTONS
========================= */

.btn-primary {
    background: linear-gradient(45deg, #ff0000, #ff4444);
    border: none;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 40px;
    padding: 10px 20px;
    box-shadow: 0 0 15px rgba(255,0,0,0.8);
}

.btn-primary:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255,0,0,1);
}

/* =========================
CARDS (PROCESS / FEATURES)
========================= */

.card {
    background: #0c0c14;
    border: 2px solid rgba(255,0,0,0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 0 20px rgba(255,0,0,0.2);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(255,0,0,0.6);
}

.card-number {
    font-size: 2.5rem;
    color: rgba(255,0,0,0.5);
    font-weight: 900;
}

/* =========================
FEATURE BLOCKS (BIG CTA BOXES)
========================= */

.cta-box {
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    font-weight: 800;
    transition: 0.3s;
}

.cta-red {
    background: #ff2b2b;
    color: #fff;
}

.cta-yellow {
    background: #e6a400;
    color: #000;
}

.cta-white {
    background: #eaeaea;
    color: #000;
}

.cta-box:hover {
    transform: scale(1.05);
}

/* =========================
METRIC SECTION
========================= */

.metric {
    text-align: center;
    font-weight: 800;
}

.metric h3 {
    color: #ff2b2b;
}

/* =========================
IMAGES
========================= */

img {
    border-radius: 10px;
}

/* =========================
FORMS
========================= */

.form-control {
    background: #120000;
    border: 2px solid #ff0000;
    color: #fff;
}

.form-control:focus {
    box-shadow: 0 0 10px #ff0000;
}

/* =========================
FOOTER
========================= */

footer {
    background: #000;
    border-top: 3px solid #ff0000;
    padding: 30px;
    text-align: center;
    color: #aaa;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
}