/* ==========================================================================
   SwiftTech Mobile LightSpeed Core Engine
   ========================================================================== */

/* Hardware accelerated core defaults */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: #000000 !important;
    color: #ffffff;
    font-family: 'Mulish', sans-serif;
    scroll-behavior: smooth;
}

/* Force dark utility classes */
.bg-black { background-color: #000000 !important; }
.text-white { color: #ffffff !important; }
.text-muted { color: #6c757d !important; }
.font-alt { font-family: 'Kanit', sans-serif; }

/* Navigation settings */
.navbar {
    padding: 1rem 0;
    background-color: rgba(33, 37, 41, 0.95) !important;
    backdrop-filter: blur(10px);
}
.navbar-brand { font-size: 1.8rem; text-decoration: none; }
.nav-link { font-size: 1.1rem; text-decoration: none; transition: opacity 0.2s; }
.nav-link:hover { opacity: 0.8; }

/* Responsive Layout Grid Core */
.container { width: 100%; padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); margin-right: auto; margin-left: auto; max-width: 1320px; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.text-center { text-align: center !important; }

@media (min-width: 992px) {
    .row { display: flex; flex-wrap: wrap; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
}

/* Optimized Masthead Header */
.masthead { padding-top: 10rem; padding-bottom: 5rem; text-align: center; }
.lead { font-size: 1.25rem; font-weight: 300; line-height: 1.6; }

/* Device Mockup Framework - Fixed without heavy canvas loops */
.masthead-device-mockup, .features-device-mockup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.masthead-device-mockup .circle {
    position: absolute;
    width: 80%;
    height: auto;
    fill: #2937f0;
    opacity: 0.15;
}
.device-wrapper { max-width: 280px; width: 100%; position: relative; z-index: 5; }
.screen img, .screen video {
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
    border: 4px solid #222;
}

/* Premium Gradient CTA Section */
.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, #2937f0 0%, #9f1ae2 100%) !important;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .25rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-light:hover { color: #000; background-color: #f8f9fa; }
.btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; font-weight: bold; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1.25rem; border-radius: .3rem; }

/* Clean Minimal Footer Styling */
footer { border-top: 1px solid #111; }
footer a { color: rgba(255,255,255,0.4) !important; text-decoration: none; margin: 0 8px; transition: color 0.15s; }
footer a:hover { color: #ffffff !important; text-decoration: underline !important; }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }