/* Global Styles - Typography, Colors, Layout Containers, Spacing */

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

/* Block Google Fonts import from main CSS */
@import url('data:text/css;charset=utf-8,');

* {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: lowercase !important;
    box-sizing: border-box !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-title, .section-title h2,
.solution-card h3, .industry-header h3,
.footer-section h3, .footer-section h4,
.cta-content h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    text-transform: lowercase !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Body text */
body, p, span, div, a, li, td, th,
.hero-subtitle, .section-title p,
.solution-card p, .industry-description,
.footer-description, .contact-info p {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    text-transform: lowercase !important;
}

p {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Buttons and navigation */
button, .btn, .btn-primary, .btn-secondary, .btn-outline,
.nav-links li a, .navbar-brand, .logo,
.footer-links a, .footer-social a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

/* Forms */
input, textarea, select, label,
.contact-form label, .contact-form input,
.contact-form textarea {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

/* ============================================
   COLOR SYSTEM
   ============================================ */

:root {
    --bg-primary: #080808;
    --bg-surface: #111111;
    --text-primary: #ffffff;
    --text-secondary: #bbbbbb;
    --border-subtle: #191919;
    
    /* Override all existing color variables */
    --primary-color: #ffffff !important;
    --primary-light: #ffffff !important;
    --primary-dark: #ffffff !important;
    --accent-color: #ffffff !important;
    --surface: #111111 !important;
    --surface-elevated: #111111 !important;
    --background: #080808 !important;
    --border-color: #191919 !important;
    --text-primary-old: #ffffff !important;
    --text-secondary-old: #bbbbbb !important;
    --text-muted: #bbbbbb !important;
    --divider: #191919 !important;
}

/* Global background */
html, body {
    background: #080808 !important;
    background-color: #080808 !important;
    color: #ffffff !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title h2,
.solution-card h3, .industry-header h3,
.footer-section h3, .cta-content h3,
.logo, .navbar-brand,
button, .btn, .btn-primary, .btn-secondary, .btn-outline {
    color: #ffffff !important;
}

p, span, div, a, li,
.hero-subtitle, .section-title p,
.solution-card p, .industry-description,
.footer-description, .contact-info p,
.nav-links li a, .footer-links a {
    color: #ffffff !important;
}

/* Secondary text */
.stat-label, .highlight-label,
.industry-applications h4,
.footer-bottom p, .footer-section ul li a {
    color: #bbbbbb !important;
}

/* Backgrounds */
.container, .section,
.navbar, .navbar-scrolled,
.solution-card, .industry-card,
.contact-modal, .footer,
.hero, .hero-content,
.technology-highlights, .industries-cta {
    background: #111111 !important;
    background-color: #111111 !important;
}

/* Hero background */
.hero, .hero-background, .bg-pattern {
    background: #080808 !important;
    background-color: #080808 !important;
}

/* Borders */
.solution-card, .industry-card,
.contact-modal, input, textarea,
.technology-highlights, .industries-cta,
.navbar, .footer-bottom {
    border-color: #191919 !important;
    border: 1px solid #191919 !important;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

body > #root,
body > #root > * {
    width: 100% !important;
}

.hero .container,
.container,
section .container,
.section .container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    width: 100% !important;
}

@media (min-width: 1280px) {
    .hero .container,
    .container,
    section .container,
    .section .container {
        max-width: 1400px !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* Prevent full-width elements from breaking container */
.hero,
.section,
.how-it-works,
.industries,
.footer {
    max-width: 100% !important;
}

/* ============================================
   SPACING RULES
   ============================================ */

/* Standardize section padding */
.hero,
.how-it-works,
.industries,
section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

/* Standardize container padding */
.container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Standardize card padding */
.solution-card,
.industry-card,
.contact-modal {
    padding: 2rem !important;
}

/* Remove inconsistent spacing utilities */
.mb-1, .mb-2, .mb-3, .mb-4, .mb-5, .mb-6, .mb-8, .mb-10, .mb-12 {
    margin-bottom: 1.5rem !important;
}

.mt-1, .mt-2, .mt-3, .mt-4, .mt-5, .mt-6, .mt-8, .mt-10, .mt-12 {
    margin-top: 1.5rem !important;
}

.py-8, .py-12, .py-16, .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

h1, h2, h3, h4, h5, h6,
p, div, span, a, li,
.hero-title, .hero-subtitle,
.section-title, .section-title h2, .section-title p,
.solution-card, .solution-card h3, .solution-card p,
.industry-card, .industry-header h3, .industry-description,
.footer-section, .footer-description,
.cta-content, .cta-content h3, .cta-content p {
    text-align: left !important;
}

.text-center {
    text-align: left !important;
}

/* ============================================
   OVERFLOW & CLIPPING PREVENTION
   ============================================ */

p, h1, h2, h3, h4, h5, h6,
.hero-title, .hero-subtitle,
.solution-card, .industry-card,
.section-title {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* ============================================
   SHADOWS & DEPTH
   ============================================ */

* {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.solution-card, .industry-card, .contact-modal,
.navbar-scrolled, .hero-video-container {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* ============================================
   BORDER RADIUS
   ============================================ */

*, *::before, *::after {
    border-radius: 0 !important;
}

button, .btn, .btn-primary, .btn-secondary, .btn-outline,
.solution-card, .industry-card, .contact-modal,
input, textarea, .hero-video-container,
.technology-highlights, .industries-cta {
    border-radius: 0 !important;
}

/* ============================================
   INTERACTIONS & MOTION
   ============================================ */

* {
    transition: all 150ms ease-out !important;
    animation: none !important;
}

@keyframes float {
    0%, 100% { transform: none !important; }
    50% { transform: none !important; }
}

.bg-pattern {
    animation: none !important;
}

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

@media (max-width: 768px) {
    .container,
    .hero .container,
    section .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .container,
    .hero .container,
    section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}