@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('brand.css');
/* Tari Electra - BULLETPROOF CSS - Maximum Specificity Override */


/* ============================================
   PAGE-SHELL SPACING - BULLETPROOF
   ============================================ */

html body .page-shell,
body html .page-shell,
.page-shell.page-shell,
html body header nav.page-shell {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

@media (min-width: 768px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1024px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
}

@media (min-width: 1280px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* ============================================
   SECTION SPACING - PROFESSIONAL & CONSISTENT
   ============================================ */

/* Base section rules - full-width sections, content centering via .page-shell */
main > section,
section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    display: block;
}

/* Section padding class - DRAMATIC and VISIBLE spacing between sections */
.section-padding {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 640px) {
    .section-padding {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }
}

@media (min-width: 1280px) {
    .section-padding {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* Force spacing between ALL sections */
main > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main > section + section {
    margin-top: 0 !important;
}

/* Ensure spacing BETWEEN sections - no margin collapse */
main > section + section {
    margin-top: 0 !important;
}

/* Last section bottom spacing */
main > section:last-child {
    padding-bottom: 5rem !important;
}

@media (min-width: 640px) {
    main > section:last-child {
        padding-bottom: 6rem !important;
    }
}

@media (min-width: 768px) {
    main > section:last-child {
        padding-bottom: 7rem !important;
    }
}

@media (min-width: 1024px) {
    main > section:last-child {
        padding-bottom: 8rem !important;
    }
}

@media (min-width: 1280px) {
    main > section:last-child {
        padding-bottom: 10rem !important;
    }
}

/* Hero sections - first section can have less bottom padding */
main > section:first-child.section-padding {
    padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
    main > section:first-child.section-padding {
        padding-bottom: 3.5rem !important;
    }
}

@media (min-width: 1024px) {
    main > section:first-child.section-padding {
        padding-bottom: 4rem !important;
    }
}

/* Additional spacing classes for fine-tuning */
.section-spacing-sm {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .section-spacing-sm {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

.section-spacing-lg {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

@media (min-width: 768px) {
    .section-spacing-lg {
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }
}

@media (min-width: 1024px) {
    .section-spacing-lg {
        padding-top: 12rem !important;
        padding-bottom: 12rem !important;
    }
}

/* ============================================
   ENTERPRISE TYPOGRAPHY SYSTEM
   ============================================ */

/* Typography Scale - Enterprise Grade */
h1, .h1 {
    font-size: 4rem !important; /* 64px */
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.05em !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h2, .h2 {
    font-size: 3rem !important; /* 48px */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h3, .h3 {
    font-size: 2rem !important; /* 32px */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body, p, .body {
    font-size: 1rem !important; /* 16px */
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
}

.micro-label, .text-micro {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

@media (max-width: 1024px) {
    h1, .h1 {
        font-size: 3rem !important; /* 48px on tablet */
    }
    h2, .h2 {
        font-size: 2.5rem !important; /* 40px on tablet */
    }
    h3, .h3 {
        font-size: 1.75rem !important; /* 28px on tablet */
    }
}

@media (max-width: 640px) {
    h1, .h1 {
        font-size: 2.5rem !important; /* 40px on mobile */
    }
    h2, .h2 {
        font-size: 2rem !important; /* 32px on mobile */
    }
    h3, .h3 {
        font-size: 1.5rem !important; /* 24px on mobile */
    }
}

/* ============================================
   ENTERPRISE GRID SYSTEM
   ============================================ */

/* 12-column desktop grid */
.enterprise-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 2rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 8rem !important; /* 128px max container padding */
}

@media (max-width: 1280px) {
    .enterprise-grid {
        padding: 0 4rem !important;
    }
}

@media (max-width: 1024px) {
    .enterprise-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        padding: 0 3rem !important;
    }
}

@media (max-width: 768px) {
    .enterprise-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 4-column mobile */
        padding: 0 2rem !important;
        gap: 1.5rem !important;
    }
}

/* Grid column spans */
.col-span-1 { grid-column: span 1 !important; }
.col-span-2 { grid-column: span 2 !important; }
.col-span-3 { grid-column: span 3 !important; }
.col-span-4 { grid-column: span 4 !important; }
.col-span-6 { grid-column: span 6 !important; }
.col-span-8 { grid-column: span 8 !important; }
.col-span-12 { grid-column: span 12 !important; }

@media (max-width: 768px) {
    .col-span-1,
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-6,
    .col-span-8,
    .col-span-12 {
        grid-column: span 4 !important; /* Full width on mobile */
    }
}

/* ============================================
   GLASS MORPHISM CARDS
   ============================================ */

.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0.75rem !important; /* 12px soft rounded corners */
    box-shadow: 0 8px 32px 0 rgba(11, 95, 42, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 12px 48px 0 rgba(11, 95, 42, 0.15) !important;
    transform: translateY(-4px) !important;
}

/* Enterprise card with subtle shadow */
.enterprise-card {
    background: #FFFFFF !important;
    border-radius: 0.75rem !important; /* 12px */
    box-shadow: 0 4px 6px -1px rgba(11, 95, 42, 0.1), 0 2px 4px -1px rgba(11, 95, 42, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(11, 95, 42, 0.1) !important;
}

.enterprise-card:hover {
    box-shadow: 0 20px 25px -5px rgba(11, 95, 42, 0.15), 0 10px 10px -5px rgba(11, 95, 42, 0.1) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(11, 95, 42, 0.2) !important;
}

/* ============================================
   OVERFLOW PROTECTION
   ============================================ */

/* Only restrict overflow at the outermost levels.
   Applying overflow-x: hidden to every div breaks dropdown menus
   and z-index stacking contexts. */
html, body {
    width: 100%;
}

/* overflow-x guard lives on a child wrapper so position:sticky on #main-header is not broken */
.site-overflow-guard {
    overflow-x: hidden;
    width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in-on-scroll {
    animation: fadeIn 0.6s ease-out forwards;
}

.stagger-item {
    animation: fadeIn 0.6s ease-out forwards;
}

.scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

/* ============================================
   UTILITIES
   ============================================ */

.industrial-grid {
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ============================================
   ADMIN PANEL SPECIFIC
   ============================================ */

body.admin-page main,
body.admin-page .admin-content {
    padding: 2rem !important;
}

@media (min-width: 768px) {
    body.admin-page main,
    body.admin-page .admin-content {
        padding: 2.5rem !important;
    }
}

@media (min-width: 1024px) {
    body.admin-page main,
    body.admin-page .admin-content {
        padding: 3rem !important;
    }
}

/* ============================================
   MOBILE MENU — OVERLAY + SLIDE-IN PANEL
   ============================================ */

/* Overlay backdrop */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 27, 0.55);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-in panel */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 340px);
    background: #fff;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 4.5rem;
    box-shadow: -4px 0 24px rgba(14, 20, 27, 0.15);
    pointer-events: none;
}
.mobile-menu-panel.active {
    transform: translateX(0);
    pointer-events: auto;
}

/* Nav links inside panel */
.mobile-menu-panel .nav-links {
    display: flex;
    flex-direction: column;
}
.mobile-menu-panel .nav-links > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0E141B;
    border-bottom: 1px solid rgba(11, 95, 42, 0.07);
    transition: color 0.15s, background-color 0.15s, border-left 0.15s;
    text-decoration: none;
}
.mobile-menu-panel .nav-links > a:hover {
    color: #0B5F2A;
    background: rgba(11, 95, 42, 0.04);
}
.mobile-menu-panel .nav-links > a.active {
    color: #0B5F2A;
    border-left: 3px solid #0B5F2A;
    padding-left: calc(1.5rem - 3px);
    background: rgba(11, 95, 42, 0.04);
}

/* Hide mobile menu elements on desktop entirely */
@media (min-width: 768px) {
    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* Hide desktop nav on mobile */
@media (max-width: 767px) {
    .desktop-nav,
    .desktop-auth {
        display: none !important;
    }
}

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

@media (max-width: 639px) {
    .section-padding {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}