/* =====================================================
   Apple Premium Gray + Fire Orange — Theme Override
   Loads AFTER style.css — overrides hard-coded purple/cyan
   values with the refined Apple neutral + fire signature palette.

   CATEGORIES:
   • [Signature Brand] — Fire Orange gradient accent
   • [Apple Neutral]   — Surfaces, layout borders, shadows (no fire)
   • [Deeper Buttons]  — Apple "Buy" deep ink charcoals
   ===================================================== */


/* ===========================
   SECTION-TAG pill [BRAND]
   =========================== */
.section-tag {
    color: #b54200 !important;
    border-color: rgba(255, 106, 0, 0.38) !important;
}
.section-tag::before {
    background: #ff6a00 !important;
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.8) !important;
}

/* ===========================
   GRADIENT TEXT [BRAND]
   =========================== */
.gradient-text {
    filter: drop-shadow(0 3px 18px rgba(255, 106, 0, 0.28)) !important;
}

/* ===========================
   BUTTONS — Apple Buy style, DEEPER (user request)
   =========================== */
.btn-primary {
    background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 55%, #131314 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0c !important;
    animation: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 106, 0, 0.16),    /* tiny fire inner highlight */
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 3px 8px rgba(0, 0, 0, 0.24) !important;
    background-size: auto !important;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px; right: 1px;
    height: 45%;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.btn-primary:hover {
    transform: translateY(-4px) scale(1.01) !important;
    background: linear-gradient(180deg, #343436 0%, #242426 55%, #1a1a1c 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 106, 0, 0.28),
        0 18px 44px rgba(0, 0, 0, 0.52),
        0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

/* Small primary variant */
.btn-primary.btn-small {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 106, 0, 0.16),
        0 8px 20px rgba(0, 0, 0, 0.36),
        0 2px 6px rgba(0, 0, 0, 0.22) !important;
}

/* CTA nav button — same deep ink apple style */
.btn-nav {
    background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0c !important;
    animation: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 106, 0, 0.16),
        0 10px 24px rgba(0, 0, 0, 0.46),
        0 2px 6px rgba(0, 0, 0, 0.22) !important;
    background-size: auto !important;
}
.btn-nav:hover {
    background: linear-gradient(180deg, #363638 0%, #222224 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 106, 0, 0.28),
        0 14px 30px rgba(0, 0, 0, 0.56) !important;
    transform: translateY(-2px) !important;
}

/* Ghost button on dark hero — Apple glass, fire border on hover */
.btn-ghost {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f5f5f7 !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(18px) !important;
}
.btn-ghost::before {
    background: linear-gradient(135deg,
        rgba(255, 106, 0, 0.14),
        rgba(255, 165, 20, 0.18)) !important;
}
.btn-ghost:hover {
    color: #ffffff !important;
    border-color: rgba(255, 106, 0, 0.65) !important;
    box-shadow:
        0 16px 40px -10px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 106, 0, 0.25) !important;
}

/* ===========================
   NAVBAR scrolled [APPLE NEUTRAL]
   =========================== */
.navbar.scrolled {
    background: rgba(10, 10, 12, 0.82) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important;
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
}
.nav-link.active {
    background: rgba(255, 106, 0, 0.14) !important;
    color: #ffffff !important;
}
.nav-link.active::after {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.85) !important;
}

/* Mobile nav panel [APPLE DARK] */
@media (max-width: 880px) {
    .nav-menu.mobile-open {
        background:
            linear-gradient(rgba(10, 10, 12, 0.97), rgba(8, 8, 10, 0.99)) padding-box,
            linear-gradient(135deg, #ff3b00, #ff6a00, #ffa514) border-box !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid transparent !important;
        backdrop-filter: blur(24px) saturate(1.4) !important;
    }
}

/* ===========================
   LOGO-MARK [BRAND Fire Signature]
   (CSS wrapper frame + firePulse dot)
   =========================== */
.logo-mark {
    background:
        radial-gradient(circle at 30% 30%,
          rgba(255, 165, 20, 0.26) 0%,
          rgba(255, 106, 0, 0.42) 45%,
          rgba(255, 59, 0, 0.22) 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.65) !important;
    box-shadow:
        inset 0 0 16px rgba(255, 138, 0, 0.32),
        0 6px 22px rgba(255, 106, 0, 0.38) !important;
}
.logo-mark::before {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}
/* CSS fire-pulse dot in the corner of the mark (backup to SVG inner animate) */
.logo-mark::after {
    background: #ff6a00 !important;
    box-shadow:
        0 0 8px #ff6a00,
        0 0 18px rgba(255, 106, 0, 0.95) !important;
}
@keyframes firePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow:
            0 0 8px #ff6a00,
            0 0 18px rgba(255, 106, 0, 0.95);
    }
    50% {
        transform: scale(1.6);
        opacity: 0.9;
        box-shadow:
            0 0 12px #fffbe0,
            0 0 26px #ff8a00,
            0 0 44px rgba(255, 59, 0, 0.85);
    }
}

/* Logo wordmark [APPLE SILVER + fire accent dot] */
.logo-main {
    background: linear-gradient(135deg,
        #ffffff 0%,
        #e8e8ed 45%,
        #d2d2d7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.logo-sub {
    color: #ffa514 !important;
    letter-spacing: 0.34em !important;
}
.logo-accent {
    color: #ff6a00 !important;
    -webkit-text-fill-color: #ff6a00 !important;
}

/* ===========================
   HERO section [APPLE DARK PREMIUM]
   =========================== */
/* Grid overlay lines — warm, very subtle (no purple) */
.hero-bg::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) !important;
}
/* Scan sweep band — warm fire ember */
.hero-bg::after {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 138, 0, 0.10) 50%,
        transparent 100%) !important;
}

/* Hero badge [BRAND fire tint] */
.hero-badge {
    color: #ffb340 !important;
    background: linear-gradient(135deg,
        rgba(255, 106, 0, 0.10) 0%,
        rgba(255, 165, 20, 0.12) 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.36) !important;
    backdrop-filter: blur(10px) !important;
}
.hero-badge::before {
    background: #ff6a00 !important;
    box-shadow: 0 0 9px rgba(255, 106, 0, 0.9) !important;
}

/* Hero title: use Apple white/graphite gradient on dark surface,
   gradient-text spans are already fire via variables */
.hero-title {
    color: #ffffff !important;
}
.hero-subtitle {
    color: rgba(232, 232, 237, 0.78) !important;
}

/* Hero particles [BRAND fire sparks] */
.hero-particles span {
    background: #ff6a00 !important;
    box-shadow: 0 0 8px #ff6a00, 0 0 18px rgba(255, 106, 0, 0.85) !important;
}
.hero-particles span:nth-child(1) { background: #ff8a00 !important; box-shadow: 0 0 7px #ff8a00, 0 0 15px rgba(255, 138, 0, 0.85) !important; }
.hero-particles span:nth-child(2) { background: #ffa514 !important; box-shadow: 0 0 8px #ffa514, 0 0 18px rgba(255, 165, 20, 0.85) !important; }
.hero-particles span:nth-child(3) { background: #ff3b00 !important; box-shadow: 0 0 9px #ff3b00, 0 0 20px rgba(255, 59, 0, 0.85) !important; }
.hero-particles span:nth-child(4) { background: #ffbd4a !important; box-shadow: 0 0 7px #ffbd4a, 0 0 15px rgba(255, 189, 74, 0.8) !important; }
.hero-particles span:nth-child(5) { background: #ff6a00 !important; box-shadow: 0 0 6px #ff6a00, 0 0 13px rgba(255, 106, 0, 0.85) !important; }
.hero-particles span:nth-child(6) { background: #ff8a00 !important; box-shadow: 0 0 8px #ff8a00, 0 0 18px rgba(255, 138, 0, 0.85) !important; }

/* Hero aurora blobs → warm fire ember (no purple) */
.hero::before {
    background:
        radial-gradient(circle at center,
          rgba(255, 138, 0, 0.18) 0%,
          rgba(255, 106, 0, 0.12) 35%,
          transparent 70%) !important;
}
.hero::after {
    background:
        radial-gradient(circle at center,
          rgba(255, 59, 0, 0.16) 0%,
          rgba(255, 106, 0, 0.09) 40%,
          transparent 72%) !important;
}

/* Premium stats glass panel [APPLE DARK + fire border] */
.hero-stats {
    background:
        linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) padding-box,
        linear-gradient(135deg, #ff3b00 0%, #ff6a00 50%, #ffa514 100%) border-box !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    box-shadow:
        0 22px 64px -24px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.hero-stats::before {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}
.hero-stat {
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.hero-stat .stat-num {
    background: linear-gradient(180deg, #ffffff 0%, #d2d2d7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.hero-stat .stat-label {
    color: rgba(201, 201, 206, 0.82) !important;
}

/* Scroll-down indicator [BRAND fire] */
.mouse {
    border: 1.5px solid rgba(255, 106, 0, 0.55) !important;
    box-shadow: inset 0 0 10px rgba(255, 106, 0, 0.22) !important;
}
.wheel {
    background: linear-gradient(180deg, #ff3b00, #ffa514) !important;
    box-shadow: 0 0 6px rgba(255, 106, 0, 0.8) !important;
}

/* ===========================
   ABOUT section [APPLE GRAY surfaces]
   =========================== */
.about {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 106, 0, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255, 165, 20, 0.04) 0%, transparent 40%),
        linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
}
.about-list li {
    color: #1d1d1f !important;
}
.check {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 55%,
        #ffa514 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.42) !important;
}

/* ===========================
   PRODUCTS section [APPLE GRAY]
   =========================== */
.products {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 106, 0, 0.04) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
}
.product-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}
.product-card:hover {
    box-shadow: 0 28px 64px -18px rgba(0, 0, 0, 0.22) !important;
}
.product-card::before {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}
.product-tags li {
    color: #8b3d00 !important;
    background: linear-gradient(135deg,
        rgba(255, 165, 20, 0.10) 0%,
        rgba(255, 106, 0, 0.13) 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.22) !important;
}
.product-card:hover .product-tags li {
    background: linear-gradient(135deg,
        rgba(255, 165, 20, 0.18) 0%,
        rgba(255, 106, 0, 0.22) 100%) !important;
    color: #703100 !important;
    transform: translateY(-1px) !important;
}

/* Products CTA [APPLE DARK + fire accents] */
.products-cta {
    background: linear-gradient(180deg,
        #0a0a0c 0%,
        #111214 50%,
        #0a0a0c 100%) !important;
}
.products-cta::before {
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 106, 0, 0.30), transparent 45%),
        radial-gradient(circle at 82% 50%, rgba(255, 165, 20, 0.24), transparent 45%) !important;
}
.products-cta::after {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}
.products-cta p {
    color: rgba(232, 232, 237, 0.92) !important;
}

/* ===========================
   ADVANTAGES section [APPLE DARK premium]
   =========================== */
.advantages::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
}
.advantages::after {
    background: radial-gradient(circle at center,
                rgba(255, 106, 0, 0.16) 0%,
                rgba(255, 165, 20, 0.06) 35%,
                transparent 70%) !important;
}
.adv-card {
    background:
        linear-gradient(150deg,
          rgba(255, 255, 255, 0.042) 0%,
          rgba(255, 255, 255, 0.015) 100%) padding-box,
        linear-gradient(135deg, rgba(255,165,20,0.5), rgba(255,106,0,0.5), rgba(255,59,0,0.5)) border-box !important;
    backdrop-filter: blur(16px) !important;
}
.adv-card::before {
    background: radial-gradient(circle,
                rgba(255, 106, 0, 0.22) 0%,
                transparent 70%) !important;
}
.adv-card:hover {
    box-shadow:
        0 22px 60px -20px rgba(0, 0, 0, 0.65),
        0 0 48px -20px rgba(255, 106, 0, 0.28) !important;
}
/* Adv icon [BRAND fire gradient inside glass] */
.adv-icon {
    background:
        radial-gradient(circle at 30% 30%,
          rgba(255, 165, 20, 0.32) 0%,
          rgba(255, 106, 0, 0.42) 50%,
          rgba(255, 59, 0, 0.20) 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.5) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0 18px rgba(255, 138, 0, 0.28),
        0 10px 28px rgba(255, 106, 0, 0.42) !important;
}
.adv-icon::after {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}

/* ===========================
   PROCESS [APPLE GRAY]
   =========================== */
.process-item {
    background: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.process-item:hover {
    background: #ffffff !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-6px) !important;
    border-color: transparent !important;
}
.process-item::before {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
}
.process-arrow {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ===========================
   CONTACT [APPLE GRAY]
   =========================== */
.contact {
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 138, 0, 0.05) 0%, transparent 40%),
        #f5f5f7 !important;
}
/* Contact info tiles */
.contact-list li {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
.contact-list li:hover {
    transform: translateX(6px) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 106, 0, 0.18) !important;
    border-color: transparent !important;
}
.ci-icon {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 55%,
        #ffa514 100%) !important;
    color: #0a0a0c !important;
    box-shadow:
        0 8px 22px rgba(255, 106, 0, 0.42),
        0 0 30px -6px rgba(255, 165, 20, 0.32) !important;
}

/* Contact form [Apple premium white card + fire top line] */
.contact-form {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.10) !important;
}
.contact-form::before {
    background: linear-gradient(90deg,
        #ff3b00 0%,
        #ff6a00 40%,
        #ffa514 70%,
        #ff3b00 100%) !important;
    background-size: 200% 100% !important;
    animation: gradientShift 8s linear infinite !important;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: #f5f5f7 !important;
    border: 1.5px solid rgba(0, 0, 0, 0.10) !important;
    color: #1d1d1f !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #ff6a00 !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(255, 106, 0, 0.14),
        0 0 18px -4px rgba(255, 106, 0, 0.28) !important;
}

/* ===========================
   FOOTER [APPLE DARK + fire divider]
   =========================== */
.footer {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 106, 0, 0.16) 0%, transparent 52%),
        linear-gradient(180deg, #0e0f11 0%, #060608 100%) !important;
}
.footer::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 59, 0, 0.7) 25%,
        rgba(255, 106, 0, 0.8) 50%,
        rgba(255, 165, 20, 0.7) 75%,
        transparent 100%) !important;
}
.footer-col a:hover {
    color: #ff8a00 !important;
}
.footer-col a:hover::after {
    background: linear-gradient(135deg,
        #ff3b00, #ff6a00, #ffa514) !important;
}
.footer-tagline {
    background: linear-gradient(135deg,
        #ff3b00 0%,
        #ff6a00 50%,
        #ffa514 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ===========================
   BACK TO TOP [APPLE deep ink]
   =========================== */
.back-top {
    background: linear-gradient(180deg,
        #2c2c2e 0%,
        #1d1d1f 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0c !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 106, 0, 0.15),
        0 12px 28px rgba(0, 0, 0, 0.46),
        0 2px 6px rgba(0, 0, 0, 0.22) !important;
    animation: none !important;
    background-size: auto !important;
}
.back-top:hover {
    background: linear-gradient(180deg,
        #363638 0%,
        #222224 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 106, 0, 0.28),
        0 16px 36px rgba(0, 0, 0, 0.56) !important;
    transform: translateY(-5px) scale(1.05) !important;
}

/* ===========================
   FORM states
   =========================== */
.form-note.success {
    color: #8b3d00 !important;
    background: rgba(255, 165, 20, 0.16) !important;
    border: 1px solid rgba(255, 106, 0, 0.3) !important;
}

/* ===========================
   MOBILE tweaks [Responsive fire borders]
   =========================== */
@media (max-width: 880px) {
    .hero-stat {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    .hero-stat:nth-child(1),
    .hero-stat:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    .footer-grid {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}