/*
 Theme Name: Eldercalling
 Theme URI: https://eldercalling.com
 Author: Eldercalling
 Description: Professional B2B WordPress theme for Eldercalling - wireless communication solutions. Built for healthcare, senior living, and service industry clients worldwide.
 Version: 1.0.0
 Requires at least: 5.8
 Tested up to: 6.4
 Requires PHP: 7.4
 License: GPL v2 or later
 Text Domain: eldercalling
 */

 /* ==========================================
    Eldercalling - B2B WordPress Theme Styles
    Reference: wirelessnursecallsystem.com
    ========================================== */

 :root {
   --primary-dark: #0B1B3D;
   --primary: #0F2B5B;
   --primary-mid: #1A3D7C;
   --accent-blue: #1E5FE8;
   --accent-teal: #0EA5E9;
   --gradient-main: linear-gradient(135deg, #0B1B3D 0%, #0F2B5B 40%, #1E5FE8 100%);
   --gradient-cta: linear-gradient(135deg, #1E5FE8 0%, #0EA5E9 100%);
   --text-dark: #1F2937;
   --text-muted: #6B7280;
   --text-light: #9CA3AF;
   --bg-light: #F8FAFC;
   --bg-card: #FFFFFF;
   --border: #E5E7EB;
   --white: #FFFFFF;
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
   --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
   --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
   --radius: 8px;
   --radius-lg: 12px;
   --transition: all 0.3s ease;
   --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 body {
   font-family: var(--font);
   color: var(--text-dark);
   background: var(--bg-light);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 a { text-decoration: none; color: inherit; }
 ul { list-style: none; }
 img { max-width: 100%; height: auto; display: block; }
 .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
 .section-padding { padding: 100px 0; }

 h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
 .section-title {
   font-size: 2.25rem;
   text-align: center;
   margin-bottom: 16px;
   color: var(--primary-dark);
 }
 .section-subtitle {
   font-size: 1.125rem;
   text-align: center;
   color: var(--text-muted);
   max-width: 600px;
   margin: 0 auto 60px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 32px;
   border-radius: var(--radius);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
   border: none;
   font-family: var(--font);
 }
 .btn-primary {
   background: var(--gradient-cta);
   color: var(--white);
   box-shadow: 0 4px 15px rgba(30, 95, 232, 0.35);
 }
 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 25px rgba(30, 95, 232, 0.45);
 }
 .btn-outline {
   background: transparent;
   color: var(--white);
   border: 2px solid rgba(255,255,255,0.5);
 }
 .btn-outline:hover {
   border-color: var(--white);
   background: rgba(255,255,255,0.1);
 }

 /* ============ HEADER ============ */
 .header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 0 24px;
   transition: var(--transition);
 }
 .header.scrolled {
   background: var(--primary-dark);
   box-shadow: 0 2px 20px rgba(0,0,0,0.3);
 }
 .header-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 80px;
 }
 .logo {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 .logo-icon {
   width: 40px;
   height: 40px;
   background: var(--gradient-cta);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--white);
   font-weight: 800;
 }
 .logo-text {
   font-size: 1.4rem;
   font-weight: 800;
   color: var(--white);
   letter-spacing: -0.5px;
 }
 .logo-text span { color: var(--accent-teal); }

 .nav-menu {
   display: flex;
   align-items: center;
   gap: 36px;
 }
 .nav-menu a {
   color: rgba(255,255,255,0.85);
   font-size: 0.95rem;
   font-weight: 500;
   transition: var(--transition);
   position: relative;
   padding: 4px 0;
 }
 .nav-menu a::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--accent-teal);
   transition: var(--transition);
 }
 .nav-menu a:hover { color: var(--white); }
 .nav-menu a:hover::after { width: 100%; }
 .nav-menu a.current-menu-item { color: var(--white); }
 .nav-menu a.current-menu-item::after { width: 100%; }
 .nav-cta {
   background: var(--gradient-cta) !important;
   padding: 10px 24px !important;
   border-radius: var(--radius);
   font-weight: 600 !important;
 }
 .nav-cta::after { display: none !important; }
 .nav-cta:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 15px rgba(30,95,232,0.4);
 }

 .menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
 }
 .menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--white);
   margin: 5px 0;
   transition: var(--transition);
   border-radius: 2px;
 }
 .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
 .menu-toggle.active span:nth-child(2) { opacity: 0; }
 .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

 .mobile-overlay {
   display: none;
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(0,0,0,0.5);
   z-index: 998;
 }
 .mobile-overlay.active { display: block; }

 .mobile-nav {
   position: fixed;
   top: 0; right: -300px;
   width: 300px;
   height: 100vh;
   background: var(--primary-dark);
   z-index: 999;
   padding: 100px 32px 40px;
   transition: right 0.3s ease;
   overflow-y: auto;
 }
 .mobile-nav.active { right: 0; }
 .mobile-nav a {
   display: block;
   color: rgba(255,255,255,0.8);
   font-size: 1.1rem;
   padding: 14px 0;
   border-bottom: 1px solid rgba(255,255,255,0.08);
   transition: var(--transition);
 }
 .mobile-nav a:hover { color: var(--white); padding-left: 8px; }
 .mobile-nav-close {
   position: absolute;
   top: 24px; right: 24px;
   background: none;
   border: none;
   color: var(--white);
   font-size: 28px;
   cursor: pointer;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .mobile-nav-close:hover { opacity: 0.7; }

 /* ============ HERO ============ */
 .hero {
   min-height: 100vh;
   background: var(--gradient-main);
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
 }
 .hero::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 800px;
   height: 800px;
   background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
   border-radius: 50%;
 }
 .hero::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -10%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(30,95,232,0.1) 0%, transparent 70%);
   border-radius: 50%;
 }
 .hero-content {
   position: relative;
   z-index: 1;
   max-width: 720px;
 }
 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255,255,255,0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255,255,255,0.15);
   padding: 8px 20px;
   border-radius: 50px;
   color: var(--white);
   font-size: 0.9rem;
   font-weight: 500;
   margin-bottom: 28px;
 }
 .hero-badge-dot {
   width: 8px;
   height: 8px;
   background: #22C55E;
   border-radius: 50%;
   animation: pulse-dot 2s infinite;
 }
 @keyframes pulse-dot {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
 .hero h1 {
   font-size: 3.5rem;
   color: var(--white);
   margin-bottom: 20px;
   line-height: 1.15;
 }
 .hero h1 span {
   background: var(--gradient-cta);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 .hero p {
   font-size: 1.2rem;
   color: rgba(255,255,255,0.7);
   line-height: 1.7;
   margin-bottom: 40px;
   max-width: 560px;
 }
 .hero-buttons {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }
 .hero-stats {
   display: flex;
   gap: 48px;
   margin-top: 60px;
   padding-top: 40px;
   border-top: 1px solid rgba(255,255,255,0.1);
 }
 .hero-stat h3 {
   font-size: 2rem;
   color: var(--white);
 }
 .hero-stat p {
   font-size: 0.9rem;
   color: rgba(255,255,255,0.5);
   margin-bottom: 0;
 }

 /* ============ PRODUCTS ============ */
 .products-section { background: var(--white); }
 .product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 32px;
 }
 .product-card {
   background: var(--bg-light);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: var(--transition);
   border: 1px solid var(--border);
 }
 .product-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
   border-color: var(--accent-blue);
 }
 .product-card-image {
   height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px;
   background: linear-gradient(135deg, #F0F4FF 0%, #E8F0FE 100%);
 }
 .product-card-image svg { width: 160px; height: 160px; }
 .product-card-image img { width: 160px; height: 160px; object-fit: contain; }
 .product-card-body { padding: 24px; }
 .product-card h3 {
   font-size: 1.2rem;
   color: var(--primary-dark);
   margin-bottom: 8px;
 }
 .product-card p {
   font-size: 0.95rem;
   color: var(--text-muted);
   line-height: 1.6;
   margin-bottom: 16px;
 }
 .product-card-link {
   color: var(--accent-blue);
   font-weight: 600;
   font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: var(--transition);
 }
 .product-card-link:hover { gap: 10px; }

 /* ============ FEATURES ============ */
 .features-section { background: var(--bg-light); }
 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 32px;
 }
 .feature-card {
   text-align: center;
   padding: 40px 28px;
   background: var(--white);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   transition: var(--transition);
 }
 .feature-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
 }
 .feature-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 20px;
   background: linear-gradient(135deg, #E0E7FF 0%, #DBEAFE 100%);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-blue);
 }
 .feature-card h3 {
   font-size: 1.15rem;
   color: var(--primary-dark);
   margin-bottom: 10px;
 }
 .feature-card p {
   font-size: 0.95rem;
   color: var(--text-muted);
   line-height: 1.6;
 }

 /* ============ ABOUT PREVIEW ============ */
 .about-preview {
   background: var(--primary-dark);
   color: var(--white);
 }
 .about-preview .container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }
 .about-preview h2 {
   font-size: 2.25rem;
   margin-bottom: 20px;
 }
 .about-preview p {
   color: rgba(255,255,255,0.7);
   line-height: 1.7;
   margin-bottom: 28px;
 }
 .about-preview .btn {
   border: 2px solid rgba(255,255,255,0.3);
   color: var(--white);
   background: transparent;
 }
 .about-preview .btn:hover {
   background: rgba(255,255,255,0.1);
   border-color: var(--white);
 }
 .about-visual {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }
 .about-visual-item {
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--radius);
   padding: 28px;
   text-align: center;
   backdrop-filter: blur(10px);
 }
 .about-visual-item h3 {
   font-size: 2rem;
   color: var(--accent-teal);
   margin-bottom: 4px;
 }
 .about-visual-item p {
   font-size: 0.9rem;
   color: rgba(255,255,255,0.6);
   margin-bottom: 0;
 }

 /* ============ CTA ============ */
 .cta-section {
   background: var(--gradient-cta);
   text-align: center;
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }
 .cta-section::before {
   content: '';
   position: absolute;
   top: -100px;
   left: -100px;
   width: 400px;
   height: 400px;
   background: rgba(255,255,255,0.05);
   border-radius: 50%;
 }
 .cta-section h2 {
   font-size: 2.5rem;
   color: var(--white);
   margin-bottom: 16px;
   position: relative;
 }
 .cta-section p {
   color: rgba(255,255,255,0.8);
   font-size: 1.15rem;
   margin-bottom: 36px;
   position: relative;
 }
 .cta-section .btn {
   background: var(--white);
   color: var(--accent-blue);
   font-size: 1.05rem;
   box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 .cta-section .btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(0,0,0,0.2);
 }

 /* ============ FOOTER ============ */
 .footer {
   background: var(--primary-dark);
   color: var(--white);
   padding: 80px 0 0;
 }
 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.5fr;
   gap: 48px;
   margin-bottom: 48px;
 }
 .footer-brand p {
   color: rgba(255,255,255,0.6);
   line-height: 1.7;
   margin-top: 16px;
   font-size: 0.95rem;
 }
 .footer-social {
   display: flex;
   gap: 12px;
   margin-top: 24px;
 }
 .footer-social a {
   width: 40px;
   height: 40px;
   background: rgba(255,255,255,0.08);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255,255,255,0.6);
   transition: var(--transition);
   font-size: 1rem;
 }
 .footer-social a:hover {
   background: var(--accent-blue);
   color: var(--white);
 }
 .footer h4 {
   font-size: 1.1rem;
   margin-bottom: 20px;
   color: var(--white);
 }
 .footer-links a {
   display: block;
   color: rgba(255,255,255,0.6);
   padding: 6px 0;
   font-size: 0.95rem;
   transition: var(--transition);
 }
 .footer-links a:hover {
   color: var(--white);
   padding-left: 4px;
 }
 .footer-contact p {
   color: rgba(255,255,255,0.6);
   font-size: 0.95rem;
   margin-bottom: 8px;
   display: flex;
   align-items: flex-start;
   gap: 10px;
 }
 .footer-contact-icon { min-width: 20px; text-align: center; color: var(--accent-teal); }
 .footer-bottom {
   border-top: 1px solid rgba(255,255,255,0.08);
   padding: 24px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
 }
 .footer-bottom p {
   color: rgba(255,255,255,0.4);
   font-size: 0.85rem;
 }
 .footer-bottom-links { display: flex; gap: 24px; }
 .footer-bottom-links a {
   color: rgba(255,255,255,0.4);
   font-size: 0.85rem;
   transition: var(--transition);
 }
 .footer-bottom-links a:hover { color: var(--white); }

/* ============ PAGE HERO ============ */
 
 /* ============ CATEGORY FILTER ============ */
 .category-filter { text-align: center; margin-bottom: 50px; }
 .category-filter a {
   display: inline-block;
   padding: 10px 24px;
   border-radius: 30px;
   font-size: 0.95rem;
   font-weight: 500;
   transition: var(--transition);
   margin: 0 6px 10px;
   background: var(--bg-light);
   color: var(--text-muted);
   border: 1px solid var(--border);
 }
 .category-filter a:hover {
   transform: translateY(-2px);
   border-color: var(--accent-blue);
   color: var(--accent-blue);
 }
 .category-filter a.cat-active {
   background: var(--accent-blue);
   color: var(--white);
   border-color: var(--accent-blue);
   box-shadow: 0 2px 8px rgba(30,95,232,0.25);
 }
 
 .page-hero {
   background: var(--gradient-main);
   padding: 180px 0 100px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 .page-hero::before {
   content: '';
   position: absolute;
   top: -30%;
   right: -10%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%);
   border-radius: 50%;
 }
 .page-hero h1 {
   font-size: 2.75rem;
   color: var(--white);
   margin-bottom: 16px;
   position: relative;
 }
 .page-hero p {
   font-size: 1.1rem;
   color: rgba(255,255,255,0.65);
   max-width: 550px;
   margin: 0 auto;
   position: relative;
 }
 .breadcrumb {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-bottom: 20px;
   position: relative;
   font-size: 0.9rem;
 }
 .breadcrumb a {
   color: rgba(255,255,255,0.5);
   transition: var(--transition);
 }
 .breadcrumb a:hover { color: var(--white); }
 .breadcrumb span { color: var(--accent-teal); }

 /* ============ PRODUCT DETAIL ============ */
 .products-page-section { background: var(--bg-light); padding: 80px 0; }
 .products-page-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 36px;
 }
 .product-detail-card {
   background: var(--white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--border);
   transition: var(--transition);
 }
 .product-detail-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-3px);
 }
 .product-detail-image {
   height: 280px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #F0F4FF 0%, #E8F0FE 100%);
   padding: 40px;
 }
 .product-detail-image img { width: 200px; height: 200px; object-fit: contain; }
 .product-detail-body { padding: 32px; }
 .product-detail-body h2 {
   font-size: 1.5rem;
   color: var(--primary-dark);
   margin-bottom: 12px;
 }
 .product-detail-body > p {
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 20px;
 }
 .product-features { margin-bottom: 20px; }
 .product-features h4 {
   font-size: 1rem;
   color: var(--primary-dark);
   margin-bottom: 10px;
 }
 .product-features li {
   padding: 6px 0;
   color: var(--text-muted);
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 10px;
 }
 .product-features li::before {
   content: '✓';
   color: var(--accent-blue);
   font-weight: 700;
 }
 .product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
 .product-tag {
   background: #EFF6FF;
   color: var(--accent-blue);
   padding: 4px 14px;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 500;
 }

 /* ============ ABOUT ============ */
 .about-content { padding: 80px 0; background: var(--white); }
 .about-content-inner { max-width: 800px; margin: 0 auto; }
 .about-content h2 {
   font-size: 1.75rem;
   color: var(--primary-dark);
   margin: 40px 0 16px;
 }
 .about-content h2:first-child { margin-top: 0; }
 .about-content p {
   color: var(--text-muted);
   line-height: 1.8;
   margin-bottom: 16px;
   font-size: 1.05rem;
 }
 .values-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 24px;
   margin-top: 32px;
 }
 .value-card {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 28px;
   text-align: center;
   transition: var(--transition);
 }
 .value-card:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-sm); }
 .value-card h4 { color: var(--primary-dark); margin-bottom: 8px; }
 .value-card p { font-size: 0.95rem; margin-bottom: 0; }

 /* ============ CONTACT ============ */
 .contact-section { padding: 80px 0; background: var(--white); }
 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 60px;
 }
 .contact-info h2 {
   font-size: 1.75rem;
   color: var(--primary-dark);
   margin-bottom: 16px;
 }
 .contact-info > p {
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 32px;
 }
 .contact-method {
   display: flex;
   gap: 16px;
   margin-bottom: 24px;
 }
 .contact-method-icon {
   width: 48px;
   height: 48px;
   min-width: 48px;
   background: #EFF6FF;
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-blue);
   font-size: 1.2rem;
 }
 .contact-method h4 { font-size: 1rem; color: var(--primary-dark); margin-bottom: 4px; }
 .contact-method p { color: var(--text-muted); font-size: 0.95rem; }

 .contact-form-inner {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 40px;
 }
 .contact-form-inner h3 {
   font-size: 1.3rem;
   color: var(--primary-dark);
   margin-bottom: 24px;
 }
 .form-group { margin-bottom: 20px; }
 .form-group label {
   display: block;
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 6px;
 }
 .form-group input,
 .form-group textarea,
 .form-group select {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   font-size: 1rem;
   font-family: var(--font);
   transition: var(--transition);
   background: var(--white);
   color: var(--text-dark);
 }
 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
   outline: none;
   border-color: var(--accent-blue);
   box-shadow: 0 0 0 3px rgba(30,95,232,0.1);
 }
 .form-group textarea { resize: vertical; min-height: 120px; }
 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .contact-form-inner .btn { width: 100%; justify-content: center; padding: 16px; font-size: 1.05rem; }

 /* ============ FAQ ============ */
 .faq-section { padding: 80px 0; background: var(--white); }
 .faq-list { max-width: 800px; margin: 0 auto; }
 .faq-item {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   margin-bottom: 12px;
   overflow: hidden;
   transition: var(--transition);
 }
 .faq-item:hover { border-color: var(--accent-blue); }
 .faq-item.active { border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(30,95,232,0.08); }
 .faq-question {
   width: 100%;
   padding: 20px 24px;
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--text-dark);
   font-family: var(--font);
   text-align: left;
   transition: var(--transition);
 }
 .faq-question:hover { color: var(--accent-blue); }
 .faq-item.active .faq-question { color: var(--accent-blue); }
 .faq-arrow {
   transition: var(--transition);
   flex-shrink: 0;
   font-size: 0.8rem;
   color: var(--text-muted);
 }
 .faq-item.active .faq-arrow { transform: rotate(180deg); color: var(--accent-blue); }
 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease, padding 0.3s ease;
   padding: 0 24px;
 }
 .faq-item.active .faq-answer {
   max-height: 300px;
   padding: 0 24px 24px;
 }
 .faq-answer p {
   color: var(--text-muted);
   line-height: 1.7;
   font-size: 0.95rem;
 }
 .faq-answer .entry-content p { color: var(--text-muted); line-height: 1.7; }

 /* ============ RESPONSIVE ============ */
 @media (max-width: 1024px) {
   .about-preview .container { grid-template-columns: 1fr; text-align: center; }
   .footer-grid { grid-template-columns: 1fr 1fr; }
   .footer-brand { grid-column: 1 / -1; }
   .contact-grid { grid-template-columns: 1fr; }
 }
 @media (max-width: 768px) {
   .nav-menu { display: none; }
   .menu-toggle { display: block; }
   .hero h1 { font-size: 2.25rem; }
   .hero p { font-size: 1rem; }
   .hero-stats { flex-wrap: wrap; gap: 24px; }
   .hero-stats > div { flex: 1; min-width: 120px; }
   .section-title { font-size: 1.75rem; }
   .section-padding { padding: 60px 0; }
   .cta-section h2 { font-size: 1.75rem; }
   .page-hero h1 { font-size: 2rem; }
   .page-hero { padding: 140px 0 60px; }
   .about-visual { grid-template-columns: 1fr; }
   .form-row { grid-template-columns: 1fr; }
 }
 @media (max-width: 480px) {
   .hero-buttons { flex-direction: column; }
   .hero-buttons .btn { width: 100%; justify-content: center; }
   .footer-grid { grid-template-columns: 1fr; }
   .product-grid { grid-template-columns: 1fr; }
   .features-grid { grid-template-columns: 1fr; }
   .products-page-grid { grid-template-columns: 1fr; }
   .values-grid { grid-template-columns: 1fr; }
   .container { padding: 0 16px; }
 }

 /* ============ ANIMATIONS ============ */
 .fade-in {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;
 }
 .fade-in.visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* ============ SINGLE PRODUCT ============ */
 .single-product-section { padding: 80px 0; background: var(--bg-light); }
 .single-product-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start;
 }
 .single-product-image {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 400px;
 }
 .single-product-image img { max-width: 80%; max-height: 350px; object-fit: contain; }
 .single-product-info h1 {
   font-size: 2rem;
   color: var(--primary-dark);
   margin-bottom: 20px;
 }
 .single-product-info .entry-content {
   color: var(--text-muted);
   line-height: 1.8;
   font-size: 1.05rem;
 }
 .single-product-info .entry-content p { margin-bottom: 16px; }
 .wp-block-button { margin-top: 24px; }

 /* ============ 404 ============ */
 .error404-section {
   padding: 120px 0;
   text-align: center;
   background: var(--bg-light);
 }
 .error404-section h1 { font-size: 6rem; color: var(--accent-blue); margin-bottom: 16px; }
 .error404-section p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 32px; }

 /* ============ WORDPRESS ADMIN BAR OFFSET ============ */
 .admin-bar .header { top: 32px; }
 @media screen and (max-width: 782px) {
   .admin-bar .header { top: 46px; }
 }
 .admin-bar .page-hero { padding-top: 212px; }
 .admin-bar .hero { padding-top: 32px; }
 @media screen and (max-width: 782px) {
   .admin-bar .page-hero { padding-top: 186px; }
 }

 /* ============ SINGLE FAQ ============ */
 .single-faq-section { padding: 80px 0; background: var(--white); }
 .single-faq-section .container { max-width: 800px; }
 .single-faq-section h1 { font-size: 2rem; color: var(--primary-dark); margin-bottom: 24px; }
 .single-faq-section .entry-content { color: var(--text-muted); line-height: 1.8; font-size: 1.05rem; }
 .single-faq-section .entry-content p { margin-bottom: 16px; }

 /* ============ GLOBAL WP ADJUSTMENTS ============ */
 .wp-block-image { margin: 0; }
 .aligncenter { text-align: center; }
 .screen-reader-text { display: none; }
 .wp-block-button__link { text-decoration: none; }