/* =========================================================
   CORE.CSS - THEME ENGINE & GOOGLE STYLE FOUNDATION
   (V4.12 - Global Light/Dark Sync Integrated)
   ========================================================= */

:root { 
    --bg-main: #ffffff; 
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-heavy: rgba(255, 255, 255, 0.95);
    --border-glass: #e5e7eb;
    --text-main: #111827; 
    --text-muted: #4b5563; 
    --primary: #059669; /* Emerald Green for trust */
    --primary-glow: rgba(5, 150, 105, 0.2);
    --secondary: #d97706; /* Corporate Gold */
    --tertiary: #7c3aed; /* Purple */
    --accent: #2563eb; /* Corporate Blue */
    --danger: #dc2626; /* Red */
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', 'Helvetica Neue', -apple-system, sans-serif; scroll-behavior: smooth; }
body { 
    background-color: var(--bg-main); color: var(--text-main); line-height: 1.6; overflow-x: hidden; width: 100%; 
    background-image: radial-gradient(circle at 15% 50%, rgba(37, 99, 235, 0.03) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(5, 150, 105, 0.03) 0%, transparent 50%);
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
}
a { text-decoration: none; color: var(--text-muted); transition: 0.3s; cursor: pointer; }
a:hover { color: var(--accent); }

/* --- TOP NAVIGATION (HEADER) --- */
nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 4%; background: var(--bg-glass-heavy); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-glass); position: fixed; width: 100%; top: 0; z-index: 2000; gap: 40px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: background-color 0.3s ease, border-color 0.3s ease;}
.logo-container { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 0; margin-right: auto; padding-right: 60px; }
.official-logo { height: 35px; width: auto; object-fit: contain; }

.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-links-main { display: flex; gap: 25px; border-right: 1px solid var(--border-glass); padding-right: 25px; transition: border-color 0.3s ease;}
.nav-links-main a { font-size: 0.85rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.nav-links-main a:hover { color: var(--text-main); }
.nav-links-legal { display: flex; gap: 15px; align-items: center; border-right: 1px solid var(--border-glass); padding-right: 25px; transition: border-color 0.3s ease;}
.nav-links-legal a { color: #6b7280; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}
.nav-links-legal a:hover { color: var(--text-main); }
.nav-login { color: var(--text-main); font-size: 0.85rem; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; cursor: pointer; background: transparent; border: none; transition: 0.3s; }
.nav-login:hover { color: var(--accent); }
.nav-cta { background: #111827; border: none; color: #ffffff; padding: 10px 24px; border-radius: 6px; font-weight: 800; text-transform: uppercase; cursor: pointer; font-size: 0.85rem; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); background: var(--accent); }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 2001; }
.mobile-menu-btn span { width: 25px; height: 3px; background: var(--text-main); border-radius: 2px; transition: 0.3s; }

/* --- FOOTER --- */
footer { padding: 60px 5% 30px; background: #f8f9fa; border-top: 1px solid var(--border-glass); text-align: center; display: flex; flex-direction: column; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease;}
.footer-logo { height: 45px; width: auto; object-fit: contain; margin-bottom: 20px; opacity: 0.7; transition: 0.3s; cursor: pointer; }
.footer-logo:hover { opacity: 1; }
.footer-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 20px; flex-wrap: wrap;}
.footer-links a { color: #4b5563; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; cursor: pointer; transition: 0.3s;}
.footer-links a:hover { color: var(--accent); }
.copyright { color: #6b7280 !important; }

/* --- GLOBAL NOTIFICATIONS (TOAST) --- */
.toast-notification { position: fixed; bottom: -150px; left: 20px; background: #111827; color: #fff; padding: 18px 30px; border-radius: 8px; z-index: 10000000; font-weight: 900; font-size: 1rem; display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 15px 40px rgba(0,0,0,0.2); text-transform: uppercase; letter-spacing: 1px;}
.toast-notification.show { bottom: 30px; opacity: 1; pointer-events: auto; }
.toast-notification.error { background: var(--danger); color: #fff; }

/* --- CORE RESPONSIVENESS (MOBILE/TABLET) --- */
@media (max-width: 1050px) {
    .mobile-menu-btn { display: flex; }
    .nav-right { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--bg-main); flex-direction: column; align-items: flex-start; padding: 80px 40px; border-left: 1px solid var(--border-glass); transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease; box-shadow: -20px 0 60px rgba(0,0,0,0.1);}
    .nav-right.active { right: 0; }
    .nav-links-main, .nav-links-legal { flex-direction: column; border-right: none; border-bottom: 1px solid var(--border-glass); padding-right: 0; padding-bottom: 20px; width: 100%; align-items: flex-start; }
    .nav-links-main a, .nav-links-legal a { font-size: 1.1rem; padding: 10px 0; display: block; width: 100%;}
    .nav-login { font-size: 1.1rem; padding: 10px 0; text-align: left; }
    .nav-cta { width: 100%; text-align: center; margin-top: 15px; padding: 15px;}
}
@media (max-width: 700px) {
    nav { padding: 15px 5%; }
    .logo-container { padding-right: 0; max-width: 75%; }
    .official-logo { max-width: 100%; height: auto; }
    .mobile-menu-btn { z-index: 3000; position: relative; }
    .footer-logo { height: auto; max-width: 80%; margin-bottom: 25px; }
}

/* =========================================================
   DARK THEME ENGINE (GLOBAL ECOSYSTEM SYNC)
   ========================================================= */

body[data-theme="dark"] {
    --bg-main: #05070d;
    --bg-glass: rgba(17, 24, 39, 0.95);
    --border-glass: #1f2937;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Forces dark mode on main shell and Navbar */
body[data-theme="dark"] .hero, 
body[data-theme="dark"] .modal-content, 
body[data-theme="dark"] .main-footer,
body[data-theme="dark"] .hero-prompt-box,
body[data-theme="dark"] nav,
body[data-theme="dark"] .nav-right {
    background: var(--bg-main) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-main) !important;
}

body[data-theme="dark"] .showcase-grid, 
body[data-theme="dark"] .pricing-section {
    background: #0b0f19 !important;
    border-color: var(--border-glass) !important;
}

/* Shapes Product Cards and Pricing Table */
body[data-theme="dark"] .case-card, 
body[data-theme="dark"] .case-content, 
body[data-theme="dark"] .price-card {
    background: #111827 !important;
    border-color: var(--border-glass) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* White Scale and Typography */
body[data-theme="dark"] h1, 
body[data-theme="dark"] h2, 
body[data-theme="dark"] h3, 
body[data-theme="dark"] .p-price, 
body[data-theme="dark"] .legal-title,
body[data-theme="dark"] .nav-links-main a,
body[data-theme="dark"] .nav-links-legal a { 
    color: var(--text-main) !important; 
}

/* Secondary Texts */
body[data-theme="dark"] p, 
body[data-theme="dark"] .p-desc,
body[data-theme="dark"] .hero-trust-metrics span { 
    color: var(--text-muted) !important; 
}

/* Text Fields Treatment */
body[data-theme="dark"] .hero-prompt-box input,
body[data-theme="dark"] .auth-form input,
body[data-theme="dark"] .auth-form textarea {
    color: var(--text-main) !important;
    background: #1f2937 !important;
    border-color: var(--border-glass) !important;
}

body[data-theme="dark"] .footer-legal-links a { color: var(--text-muted) !important; }
body[data-theme="dark"] .footer-legal-links a:hover { color: var(--accent) !important; }