/* =====================================================
   MetaBook Publishing - Main Stylesheet
   ===================================================== */

:root {
  --primary: #1a56db;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
  --secondary: #0f172a;
  --secondary-light: #1e293b;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--gray-800); line-height: 1.6; background: var(--white); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--gray-900); line-height: 1.2; margin-bottom: 0.5em; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
p { margin-bottom: 1em; color: var(--gray-600); }
.section-title { text-align: center; margin-bottom: 1rem; }
.section-subtitle { text-align: center; color: var(--gray-500); font-size: 1.125rem; max-width: 700px; margin: 0 auto 3rem; }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.text-center { text-align: center; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; border-radius: var(--radius-sm); font-weight: 600; font-size: 1rem; transition: all var(--transition); white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 4px 14px rgba(26,86,219,0.4); }
.btn-primary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,86,219,0.5); }
.btn-secondary { background: var(--white); color: var(--primary); border: 2px solid var(--gray-200); }
.btn-secondary:hover { border-color: var(--primary); background: var(--gray-50); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--white); box-shadow: 0 4px 14px rgba(245,158,11,0.4); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.3); }
.btn-outline:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-lg { padding: 18px 40px; font-size: 1.125rem; }
.btn-block { width: 100%; }

/* ---- Header ---- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); transition: all var(--transition); }
.site-header.scrolled { box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }
.logo img { height: 48px; width: auto; display: block; }
.logo-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem; }
.nav-menu { display: flex; gap: 4px; align-items: center; }
.nav-menu a { padding: 8px 16px; color: var(--gray-700); font-weight: 500; font-size: 0.95rem; border-radius: 8px; transition: all var(--transition); }
.nav-menu a:hover { color: var(--primary); background: var(--gray-100); }
.header-cta { margin-left: 16px; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 24px; height: 3px; background: var(--gray-800); border-radius: 2px; transition: all var(--transition); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* ---- Mobile Nav ---- */
.mobile-nav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 999; padding: 24px; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; }
.mobile-nav.active { transform: translateX(0); }
.mobile-nav a { display: block; padding: 16px; font-size: 1.125rem; font-weight: 500; color: var(--gray-800); border-bottom: 1px solid var(--gray-100); }
.mobile-nav a:hover { color: var(--primary); }
.mobile-nav .btn { margin-top: 16px; }

/* ---- Hero ---- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 72px; background: linear-gradient(135deg, var(--gray-900) 0%, var(--secondary-light) 100%); color: var(--white); overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at top right, rgba(26,86,219,0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(245,158,11,0.08) 0%, transparent 50%); }
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 60px 0; }
.hero h1 { color: var(--white); margin-bottom: 1.5rem; }
.hero h1 .highlight { color: var(--accent); }
.hero p { color: rgba(255,255,255,0.8); font-size: 1.25rem; margin-bottom: 2rem; max-width: 600px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 48px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); }
.hero-stat { }
.hero-stat .num { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: var(--accent); }
.hero-stat .label { color: rgba(255,255,255,0.6); font-size: 0.875rem; }

/* ---- Trust Bar ---- */
.trust-bar { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 32px 0; }
.trust-items { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; color: var(--gray-600); font-weight: 500; }
.trust-item .icon { width: 48px; height: 48px; background: var(--white); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--shadow-sm); }

/* ---- Service Cards ---- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.service-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 32px; transition: all var(--transition); position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card .icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--white); margin-bottom: 20px; transition: transform var(--transition); }
.service-card:hover .icon { transform: scale(1.1) rotate(-5deg); }
.service-card h3 { margin-bottom: 12px; }
.service-card p { color: var(--gray-500); margin-bottom: 16px; }
.service-card .link { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition); }
.service-card .link:hover { gap: 12px; }

/* ---- Why Choose ---- */
.why-choose { background: linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color: var(--white); }
.why-choose h2, .why-choose h3 { color: var(--white); }
.why-choose .section-subtitle { color: rgba(255,255,255,0.6); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.why-card { padding: 32px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); transition: all var(--transition); }
.why-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.why-card .icon { width: 56px; height: 56px; background: var(--primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); margin-bottom: 16px; }
.why-card h3 { color: var(--white); margin-bottom: 8px; }
.why-card p { color: rgba(255,255,255,0.6); }

/* ---- Process ---- */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; position: relative; }
.process-step { text-align: center; position: relative; }
.process-step .step-num { width: 72px; height: 72px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(26,86,219,0.3); transition: transform var(--transition); }
.process-step:hover .step-num { transform: scale(1.1); }
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--gray-500); }

/* ---- Pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.pricing-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-lg); padding: 40px 32px; transition: all var(--transition); position: relative; display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.pricing-card.popular { border-color: var(--primary); box-shadow: 0 20px 40px rgba(26,86,219,0.15); }
.pricing-card .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--white); padding: 6px 20px; border-radius: 20px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.pricing-card h3 { margin-bottom: 8px; }
.pricing-card .subtitle { color: var(--gray-500); font-size: 0.95rem; margin-bottom: 20px; }
.pricing-card .price { margin: 20px 0; }
.pricing-card .price .original { text-decoration: line-through; color: var(--gray-400); font-size: 1.25rem; margin-right: 8px; }
.pricing-card .price .sale { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: var(--gray-900); }
.pricing-card .price .currency { font-size: 1.5rem; vertical-align: top; }
.pricing-card .features { margin: 24px 0; flex-grow: 1; }
.pricing-card .features li { padding: 10px 0; padding-left: 28px; position: relative; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); }
.pricing-card .features li::before { content: '\2713'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.pricing-card .btn { margin-top: auto; }

/* ---- Portfolio ---- */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 24px; }
.portfolio-card { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); transition: all var(--transition); cursor: pointer; }
.portfolio-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.portfolio-card .image { height: 240px; background: linear-gradient(135deg, var(--gray-200), var(--gray-300)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.portfolio-card .image .placeholder { font-size: 4rem; color: var(--gray-400); }
.portfolio-card .image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.portfolio-card:hover .image img { transform: scale(1.1); }
.portfolio-card .info { padding: 24px; }
.portfolio-card .info h3 { margin-bottom: 8px; }
.portfolio-card .info .category { color: var(--primary); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.portfolio-card .info p { color: var(--gray-500); font-size: 0.95rem; }
.portfolio-card .results { margin-top: 12px; padding: 8px 16px; background: var(--success); color: var(--white); border-radius: 8px; font-size: 0.875rem; font-weight: 600; display: inline-block; }

/* ---- Testimonials ---- */
.testimonials-section { background: var(--gray-50); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.testimonial-card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); transition: all var(--transition); position: relative; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testimonial-card .quote-mark { font-family: var(--font-heading); font-size: 4rem; color: var(--gray-200); line-height: 1; position: absolute; top: 16px; right: 24px; }
.testimonial-card .rating { color: var(--accent); font-size: 1.25rem; margin-bottom: 16px; letter-spacing: 2px; }
.testimonial-card .text { color: var(--gray-600); font-style: italic; margin-bottom: 20px; position: relative; z-index: 1; }
.testimonial-card .author { display: flex; align-items: center; gap: 16px; }
.testimonial-card .author .avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 1.25rem; }
.testimonial-card .author .name { font-weight: 600; color: var(--gray-900); }
.testimonial-card .author .position { color: var(--gray-500); font-size: 0.875rem; }

/* ---- FAQ ---- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; transition: box-shadow var(--transition); }
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item .question { padding: 20px 24px; font-weight: 600; color: var(--gray-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background var(--transition); }
.faq-item .question:hover { background: var(--gray-50); }
.faq-item .question .toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; transition: all var(--transition); flex-shrink: 0; }
.faq-item.is-open .question .toggle { background: var(--primary); color: var(--white); transform: rotate(45deg); }
.faq-item .answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 24px; }
.faq-item.is-open .answer { max-height: 500px; padding: 0 24px 20px; }
.faq-item .answer p { color: var(--gray-600); }

/* ---- Stats / Counters ---- */
.stats-section { background: var(--primary); color: var(--white); padding: 60px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; text-align: center; }
.stat-item .num { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; color: var(--white); line-height: 1; }
.stat-item .label { color: rgba(255,255,255,0.8); font-size: 1rem; margin-top: 8px; }

/* ---- CTA Section ---- */
.cta-section { background: linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color: var(--white); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(26,86,219,0.15) 0%, transparent 70%); }
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.7); font-size: 1.25rem; max-width: 600px; margin: 0 auto 2rem; }

/* ---- Blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 24px; }
.blog-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.blog-card .image { height: 200px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 3rem; }
.blog-card .image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .info { padding: 24px; }
.blog-card .meta { display: flex; gap: 12px; font-size: 0.875rem; color: var(--gray-500); margin-bottom: 12px; }
.blog-card h3 { margin-bottom: 8px; font-size: 1.25rem; }
.blog-card .excerpt { color: var(--gray-500); font-size: 0.95rem; margin-bottom: 16px; }
.blog-card .read-more { color: var(--primary); font-weight: 600; }

.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.blog-sidebar .widget { background: var(--gray-50); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.blog-sidebar .widget h3 { font-size: 1.125rem; margin-bottom: 16px; }
.blog-sidebar .widget ul li { padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.blog-sidebar .widget ul li:last-child { border-bottom: none; }
.blog-search { position: relative; margin-bottom: 24px; }
.blog-search input { width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); }
.blog-search input:focus { outline: none; border-color: var(--primary); }

/* ---- Blog Post ---- */
.blog-post { max-width: 800px; margin: 0 auto; }
.blog-post .post-header { margin-bottom: 32px; }
.blog-post .post-meta { display: flex; gap: 16px; color: var(--gray-500); font-size: 0.875rem; margin-bottom: 16px; }
.blog-post .post-image { width: 100%; height: 400px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-light)); margin-bottom: 32px; }
.blog-post .post-body h2 { margin-top: 2rem; margin-bottom: 1rem; }
.blog-post .post-body p { margin-bottom: 1.25rem; line-height: 1.8; }
.blog-post .post-body { font-size: 1.125rem; }

/* ---- Contact Form ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info-card { background: linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color: var(--white); border-radius: var(--radius-lg); padding: 40px; }
.contact-info-card h3 { color: var(--white); margin-bottom: 24px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-item .icon { width: 48px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.contact-info-item .label { color: rgba(255,255,255,0.5); font-size: 0.875rem; margin-bottom: 4px; }
.contact-info-item .value { color: var(--white); font-weight: 500; }
.contact-form { background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-lg); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--gray-700); }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); transition: border-color var(--transition); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-error { color: var(--error); font-size: 0.875rem; margin-top: 4px; }
.form-success { background: #f0fdf4; color: #166534; padding: 16px; border-radius: var(--radius-sm); margin-bottom: 20px; border: 1px solid #bbf7d0; }

/* ---- Footer ---- */
.site-footer { background: var(--gray-900); color: rgba(255,255,255,0.7); padding: 60px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo { color: var(--white); margin-bottom: 16px; background: var(--white); padding: 6px 10px; border-radius: 8px; width: fit-content; }
.footer-brand .logo img { height: 46px; }
.footer-brand p { color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer-col h4 { color: var(--white); margin-bottom: 16px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: rgba(255,255,255,0.5); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--white); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--white); transition: all var(--transition); }
.footer-social a:hover { background: var(--primary); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; color: rgba(255,255,255,0.4); font-size: 0.875rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); }
.footer-bottom a:hover { color: var(--white); }

/* ---- Popup ---- */
.popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all var(--transition); }
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup-box { background: var(--white); border-radius: var(--radius-lg); max-width: 500px; width: 100%; padding: 40px; position: relative; transform: scale(0.9); transition: transform var(--transition); }
.popup-overlay.active .popup-box { transform: scale(1); }
.popup-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--gray-500); transition: all var(--transition); }
.popup-close:hover { background: var(--gray-200); color: var(--gray-800); }
.popup-box h2 { margin-bottom: 12px; }
.popup-box .popup-desc { color: var(--gray-500); margin-bottom: 24px; }
.popup-box .consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 0.875rem; color: var(--gray-500); }
.popup-box .consent input { margin-top: 3px; }

/* ---- Page Header ---- */
.page-header { background: linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color: var(--white); padding: 140px 0 60px; text-align: center; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(26,86,219,0.15) 0%, transparent 70%); }
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: var(--white); margin-bottom: 1rem; }
.page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; max-width: 700px; margin: 0 auto; }
.breadcrumb { display: flex; gap: 8px; justify-content: center; margin-top: 16px; font-size: 0.875rem; }
.breadcrumb a { color: rgba(255,255,255,0.5); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,0.3); }

/* ---- Error Pages ---- */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color: var(--white); text-align: center; padding: 40px; }
.error-page .error-code { font-family: var(--font-heading); font-size: 8rem; font-weight: 800; color: var(--accent); line-height: 1; }
.error-page h1 { color: var(--white); margin: 1rem 0; }
.error-page p { color: rgba(255,255,255,0.6); font-size: 1.25rem; margin-bottom: 2rem; }

/* ---- Animations ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-scale.active { opacity: 1; transform: scale(1); }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.fade-in { animation: fadeIn 0.6s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide-up { animation: slideUp 0.6s ease forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Responsive ---- */
@media (max-width: 968px) {
  .nav-menu { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }
  .blog-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-stats { gap: 24px; }
  .hero-stat .num { font-size: 2rem; }
}
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .trust-items { flex-direction: column; }
  .stat-item .num { font-size: 2.5rem; }
  .popup-box { padding: 28px; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .float { animation: none; }
}

/* MetaBook brand logo sizing */
@media (max-width: 768px) { .site-header .logo img { height: 42px; } .footer-brand .logo img { height: 42px; } }


/* =====================================================
   MetaBook Premium Motion & 3D Experience
   ===================================================== */
:root { --motion-fast: 180ms; --motion: 420ms; --motion-slow: 800ms; --ink: #0b1730; --blue2: #38bdf8; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 10000; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.site-header { transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
.site-header .logo img { transition: transform .35s ease; }
.site-header .logo:hover img { transform: scale(1.035); }
.logo { text-decoration: none; }

/* Page-opening transition */
.page-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center; background: rgba(7,16,35,.0); opacity: 0; transition: opacity .18s ease; }
.page-transition.active { opacity: 1; background: rgba(7,16,35,.98); pointer-events: all; }
.transition-book { width: min(72vw, 760px); height: min(55vh, 470px); position: relative; perspective: 1400px; filter: drop-shadow(0 35px 55px rgba(0,0,0,.35)); }
.transition-page { position: absolute; top: 4%; width: 48%; height: 92%; background: linear-gradient(135deg,#fff,#e9eef8); border: 1px solid rgba(255,255,255,.6); transform-origin: center; box-shadow: inset 0 0 30px rgba(20,45,90,.08); }
.transition-left { left: 2%; border-radius: 10px 2px 2px 10px; transform: rotateY(0deg); }
.transition-right { right: 2%; border-radius: 2px 10px 10px 2px; transform: rotateY(0deg); }
.page-transition.active .transition-left { animation: bookOpenLeft .75s cubic-bezier(.2,.75,.2,1) forwards; }
.page-transition.active .transition-right { animation: bookOpenRight .75s cubic-bezier(.2,.75,.2,1) forwards; }
.transition-spine { position:absolute; left:50%; top:4%; width:3px; height:92%; background: rgba(11,23,48,.16); transform: translateX(-50%); }
.transition-mark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:800 80px/1 Georgia,serif; color:#1260e8; opacity:.08; }
@keyframes bookOpenLeft { from { transform: rotateY(0); } to { transform: rotateY(-105deg); } }
@keyframes bookOpenRight { from { transform: rotateY(0); } to { transform: rotateY(105deg); } }
body.page-enter { animation: pageEnter .55s ease both; }
@keyframes pageEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Hero */
.hero-3d { min-height: 760px; isolation: isolate; background: radial-gradient(circle at 75% 35%, rgba(24,112,255,.20), transparent 34%), linear-gradient(135deg,#071329 0%,#101d37 55%,#132d58 100%); }
.hero-layout { min-height: 760px; display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 35px; position:relative; z-index:3; }
.hero-content { max-width: 700px; padding: 90px 0 70px; }
.hero .eyebrow { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:800; margin-bottom:20px; }
.hero .eyebrow span { width:34px; height:2px; background:var(--accent); display:inline-block; }
.hero h1 { font-size:clamp(3rem,5vw,5.25rem); line-height:1.02; letter-spacing:-.045em; text-shadow:0 12px 45px rgba(0,0,0,.22); }
.hero p { font-size:1.1rem; line-height:1.8; max-width:650px; }
.hero-buttons .btn { box-shadow:0 14px 35px rgba(0,0,0,.16); }
.hero-buttons .btn span { display:inline-block; transition:transform .25s; }
.hero-buttons .btn:hover span { transform:translateX(4px); }
.hero-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(to bottom,black,transparent); z-index:0; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(2px); z-index:1; pointer-events:none; }
.hero-orb-one { width:380px; height:380px; right:12%; top:8%; background:radial-gradient(circle,rgba(56,189,248,.18),transparent 68%); }
.hero-orb-two { width:280px; height:280px; left:-100px; bottom:5%; background:radial-gradient(circle,rgba(245,158,11,.12),transparent 68%); }
.hero-particle { position:absolute; width:8px; height:8px; border-radius:50%; background:#7dd3fc; opacity:.65; z-index:2; animation:floatParticle 5s ease-in-out infinite; }
.particle-1{right:38%;top:18%}.particle-2{right:7%;bottom:25%;width:5px;height:5px;animation-delay:1s}.particle-3{left:47%;bottom:15%;width:6px;height:6px;animation-delay:2s}
@keyframes floatParticle { 50% { transform:translate3d(0,-18px,0) scale(1.3); opacity:.95; } }
.hero-visual { min-height:610px; display:grid; place-items:center; perspective:1400px; transform-style:preserve-3d; }
.book-scene { width:520px; height:560px; position:relative; transform-style:preserve-3d; transition:transform .25s ease-out; }
.hero-glow { position:absolute; width:420px;height:420px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.22),transparent 65%); filter:blur(12px); }
.book-shadow { position:absolute; width:380px;height:75px; left:70px; bottom:35px; background:rgba(0,0,0,.5); filter:blur(28px); border-radius:50%; transform:rotate(-8deg); }
.book-3d { position:absolute; transform-style:preserve-3d; }
.book-main { width:270px;height:370px; left:120px;top:85px; transform:rotateY(-22deg) rotateX(5deg) rotateZ(-2deg); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.hero-visual:hover .book-main { transform:rotateY(-12deg) rotateX(3deg) rotateZ(-1deg) translateY(-8px); }
.book-cover { width:100%;height:100%; position:absolute; z-index:3; border-radius:4px 8px 8px 4px; padding:42px 30px; display:flex; flex-direction:column; justify-content:center; color:white; background:linear-gradient(145deg,#102d67,#0d72e7); box-shadow:inset 12px 0 25px rgba(0,0,0,.16), 12px 18px 35px rgba(0,0,0,.25); overflow:hidden; }
.book-cover:before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.25); border-radius:3px; }
.book-cover .cover-kicker,.book-cover small { position:relative; z-index:1; letter-spacing:.22em; text-transform:uppercase; font-size:10px; opacity:.78; }
.book-cover strong { position:relative; z-index:1; font:800 36px/1.03 'Playfair Display',serif; margin:18px 0; letter-spacing:.02em; }
.cover-line { width:58px;height:3px;background:#fbbf24;position:relative;z-index:1;margin-bottom:20px; }
.book-pages { position:absolute; width:100%; height:94%; top:3%; right:-18px; background:repeating-linear-gradient(to bottom,#fff 0 2px,#e5e7eb 2px 4px); transform:translateZ(-10px) rotateY(0deg); border-radius:0 7px 7px 0; box-shadow:4px 4px 12px rgba(0,0,0,.18); }
.book-back { position:absolute; width:100%;height:100%;background:#092352;transform:translateZ(-22px);border-radius:6px; }
.book-small { width:150px;height:220px; opacity:.96; }
.book-small .book-cover { padding:22px 18px; }
.book-small .book-cover strong { font-size:21px; margin:10px 0; }
.book-small-one { left:330px;top:245px;transform:rotateY(-30deg) rotateZ(9deg) translateZ(-10px); }
.book-small-two { left:15px;top:275px;transform:rotateY(22deg) rotateZ(-12deg) translateZ(-20px); }
.cover-blue { background:linear-gradient(145deg,#082c58,#0ea5e9); }
.cover-light { background:linear-gradient(145deg,#f8fafc,#cbd5e1); color:#10233f; }
.floating-card { position:absolute; z-index:8; padding:13px 16px; display:flex;align-items:center;gap:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.10); backdrop-filter:blur(14px); border-radius:14px; color:#fff; box-shadow:0 20px 50px rgba(0,0,0,.22); font-size:11px; line-height:1.35; }
.floating-card b { width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(56,189,248,.2);color:#7dd3fc; }
.floating-card-one { top:105px; right:0; animation:floatCard 5s ease-in-out infinite; }
.floating-card-two { bottom:95px; left:0; animation:floatCard 5s 1.3s ease-in-out infinite; }
@keyframes floatCard { 50% { transform:translateY(-9px); } }
.hero-bottom-fade { position:absolute;left:0;right:0;bottom:-1px;height:150px;background:linear-gradient(to bottom,transparent,var(--white));z-index:2;pointer-events:none; }

/* Featured books */
.featured-books-section { background:linear-gradient(180deg,#fff 0%,#f5f8fc 100%); overflow:hidden; }
.section-kicker { text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.18em; color:var(--primary); margin-bottom:10px; }
.text-gradient { background:linear-gradient(90deg,#1260e8,#06a8e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.featured-books-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px; }
.featured-book-card { background:#fff;border:1px solid #e4eaf2;border-radius:22px;overflow:hidden;box-shadow:0 12px 40px rgba(10,31,66,.07); transition:transform .3s,box-shadow .3s; transform-style:preserve-3d; }
.featured-book-card:hover { box-shadow:0 22px 65px rgba(10,31,66,.13); }
.book-stage { height:330px; display:grid;place-items:center;background:radial-gradient(circle at center,#eef6ff,transparent 65%);position:relative; }
.book-stage:after { content:"";position:absolute;width:180px;height:28px;bottom:38px;border-radius:50%;background:rgba(10,30,60,.16);filter:blur(14px); }
.showcase-book { width:155px;height:220px;border-radius:3px 8px 8px 3px;position:relative;z-index:1;box-shadow:15px 25px 35px rgba(8,25,50,.22);transform:rotateY(-23deg) rotateZ(-2deg);padding:28px 20px;display:flex;flex-direction:column;justify-content:space-between;color:white;overflow:hidden;transition:transform .4s; }
.featured-book-card:hover .showcase-book { transform:rotateY(-13deg) rotateZ(-1deg) translateY(-10px); }
.showcase-book:before { content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.3); }
.showcase-book span { position:relative;font:800 22px/1.05 'Playfair Display',serif;letter-spacing:.02em; }
.showcase-book small { position:relative;font-size:8px;letter-spacing:.12em;text-transform:uppercase;opacity:.75; }
.showcase-navy{background:linear-gradient(145deg,#081c3d,#1559c8)} .showcase-blue{background:linear-gradient(145deg,#075985,#06a8e9)} .showcase-gold{background:linear-gradient(145deg,#272b35,#8c6415)}
.book-card-info { padding:24px 25px 27px; }
.book-card-info > span { font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:800; }
.book-card-info h3 { margin:7px 0 8px; }
.book-card-info p { margin:0;color:var(--gray-500);font-size:.94rem; }

/* Existing components get depth */
.service-card,.why-card,.pricing-card,.portfolio-card,.testimonial-card,.blog-card,.process-step { transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.service-card:hover,.why-card:hover,.pricing-card:hover,.portfolio-card:hover,.testimonial-card:hover,.blog-card:hover { transform:translateY(-7px); box-shadow:0 20px 45px rgba(15,35,70,.10); }
.process-step:hover { transform:translateY(-4px); }
.btn { position:relative; overflow:hidden; }
.btn:after { content:""; position:absolute; inset:0; transform:translateX(-110%) skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:transform .6s; }
.btn:hover:after { transform:translateX(110%) skewX(-18deg); }

@media (max-width: 1000px) {
  .hero-layout { grid-template-columns:1fr; padding-top:60px; }
  .hero-content { text-align:center; margin:auto; padding-bottom:10px; }
  .hero .eyebrow,.hero-buttons,.hero-stats { justify-content:center; }
  .hero p { margin-left:auto;margin-right:auto; }
  .hero-visual { min-height:560px; }
  .featured-books-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .hero-3d,.hero-layout { min-height:unset; }
  .hero-content { padding:110px 0 20px; }
  .hero h1 { font-size:2.65rem; }
  .hero p { font-size:1rem; }
  .hero-stats { gap:20px; }
  .hero-stat .num { font-size:1.8rem; }
  .hero-visual { min-height:430px; transform:scale(.78); margin:-35px 0; }
  .book-scene { transform:scale(.9); }
  .floating-card { display:none; }
  .featured-books-grid { grid-template-columns:1fr; }
  .book-stage { height:300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .page-transition { display:none !important; }
}


/* =====================================================
   MetaBook Visual Showcase + Motion Pack
   ===================================================== */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;mix-blend-mode:screen;filter:saturate(1.15) contrast(1.08);z-index:0;pointer-events:none}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,31,.96) 0%,rgba(7,19,41,.78) 48%,rgba(5,15,34,.40) 100%),linear-gradient(0deg,rgba(4,13,31,.62),transparent 45%);z-index:1;pointer-events:none}
.hero-3d .hero-layout{z-index:4}
.hero-3d .hero-orb,.hero-3d .hero-grid,.hero-3d .hero-particle{z-index:2}
.book-stage{perspective:1200px}
.showcase-image{padding:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important;transform:rotateY(-22deg) rotateZ(-2deg);}
.showcase-image img{width:100%;height:100%;object-fit:cover;border-radius:4px 8px 8px 4px;box-shadow:16px 25px 38px rgba(8,25,50,.28);display:block}
.featured-book-card:hover .showcase-image{transform:rotateY(-12deg) rotateZ(-1deg) translateY(-10px) scale(1.02)}
.cover-gallery-section{background:linear-gradient(180deg,#f6f9fd 0%,#fff 100%);position:relative;overflow:hidden}
.cover-gallery-section:before{content:"";position:absolute;width:520px;height:520px;right:-220px;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(30,104,219,.10),transparent 68%);pointer-events:none}
.cover-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px;position:relative;z-index:1}
.cover-gallery-card{background:#fff;border:1px solid #e2e9f2;border-radius:22px;overflow:hidden;box-shadow:0 14px 45px rgba(10,31,66,.08);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.cover-gallery-card:hover{box-shadow:0 28px 70px rgba(10,31,66,.16)}
.cover-gallery-image{height:390px;padding:22px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#eef6ff,transparent 68%)}
.cover-gallery-image img{height:100%;width:auto;max-width:72%;object-fit:contain;border-radius:5px;box-shadow:18px 25px 40px rgba(5,22,48,.22);transform:rotateY(-14deg) rotateZ(-1.5deg);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s}
.cover-gallery-card:hover .cover-gallery-image img{transform:rotateY(-4deg) rotateZ(0) translateY(-10px) scale(1.035);filter:saturate(1.08)}
.cover-gallery-info{padding:21px 24px 24px}
.cover-gallery-info>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-weight:800}
.cover-gallery-info h3{margin:7px 0 10px;font-size:1.3rem}
.cover-gallery-info a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--gray-700);font-size:.9rem}
.cover-gallery-info a b{color:var(--primary);transition:transform .25s}
.cover-gallery-info a:hover b{transform:translateX(5px)}
.portfolio-cover-showcase{background:#fff}
.portfolio-gallery-grid{margin-bottom:20px}
/* richer hover light */
.service-card,.why-card,.pricing-card,.portfolio-card,.testimonial-card,.blog-card,.process-step,.cover-gallery-card{will-change:transform}
.reveal-stagger>*{transition-delay:calc(var(--i,0) * 70ms)}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:transparent;z-index:10001;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#1a56db,#f59e0b);box-shadow:0 0 14px rgba(56,189,248,.35)}
.cursor-glow{position:fixed;width:180px;height:180px;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(56,189,248,.11),transparent 68%);mix-blend-mode:screen;opacity:0;transition:opacity .2s}
@media (max-width:1000px){.cover-gallery-grid{grid-template-columns:1fr 1fr}.cover-gallery-image{height:350px}}
@media (max-width:680px){.hero-video{opacity:.18}.cover-gallery-grid{grid-template-columns:1fr}.cover-gallery-image{height:360px}.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}.cursor-glow{display:none}.cover-gallery-image img,.showcase-image{transform:none!important}}

/* =====================================================
   MOBILE RESPONSIVE PATCH - MetaBook
   ===================================================== */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.container { width: 100%; max-width: 1200px; }

/* Prevent long text, URLs and controls from forcing page width */
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th, label {
  overflow-wrap: anywhere;
}
input, textarea, select, button { max-width: 100%; }
video, iframe { max-width: 100%; }

/* Better mobile header */
@media (max-width: 968px) {
  .header-inner { height: 64px; padding: 0 16px; }
  .site-header .logo img { height: 40px; max-width: 190px; }
  .mobile-nav { top: 64px; padding: 16px; }
  .mobile-nav .btn { width: 100%; }

  .hero-layout { width: 100%; padding-left: 0; padding-right: 0; }
  .hero-content { width: 100%; }
  .hero-visual { width: 100%; max-width: 100%; }
  .book-scene { max-width: 100%; margin-left: auto; margin-right: auto; }

  .services-grid,
  .why-grid,
  .process-steps,
  .pricing-grid,
  .portfolio-grid,
  .testimonials-grid,
  .blog-grid,
  .stats-grid { width: 100%; }
}

@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding: 44px 0; }

  h1 { font-size: clamp(2rem, 10vw, 2.65rem); }
  h2 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  h3 { font-size: 1.4rem; }

  .section-subtitle { font-size: .98rem; margin-bottom: 2rem; }

  .header-inner { padding: 0 14px; }
  .site-header .logo { min-width: 0; }
  .site-header .logo img { height: 38px; max-width: 175px; }

  .hero-layout { gap: 0; padding-top: 20px; }
  .hero-content { padding: 92px 0 16px; }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.55rem); line-height: 1.1; }
  .hero p { font-size: .98rem; line-height: 1.65; }
  .hero-buttons { gap: 10px; width: 100%; }
  .hero-buttons .btn { width: 100%; padding: 13px 18px; }
  .hero-stats { justify-content: center; gap: 12px; }
  .hero-stat { min-width: 82px; }
  .hero-stat .num { font-size: 1.55rem; }

  .hero-visual {
    min-height: 340px;
    height: 340px;
    transform: none;
    margin: 0;
    overflow: hidden;
  }
  .book-scene {
    width: min(92vw, 420px);
    height: 340px;
    transform: scale(.72);
    transform-origin: center center;
    margin: -10px auto 0;
  }

  .featured-books-grid,
  .cover-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
  .cover-gallery-image { height: 330px; }
  .cover-gallery-image img { max-width: 68%; }

  .portfolio-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .portfolio-card .image { height: auto; min-height: 220px; }
  .blog-layout { gap: 24px; }
  .blog-post .post-image { height: auto; min-height: 220px; }

  .contact-grid { gap: 28px; }
  .footer-grid { gap: 24px; }

  .popup-box { width: calc(100% - 24px); max-height: calc(100vh - 24px); overflow-y: auto; padding: 24px 18px; }

  /* Avoid transformed 3D elements creating horizontal overflow */
  .showcase-image { transform: none; }
  .cover-gallery-image img { transform: none; }
}

@media (max-width: 380px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .site-header .logo img { max-width: 150px; }
  .hero-content { padding-top: 88px; }
  .hero h1 { font-size: 2rem; }
  .hero-visual { height: 300px; min-height: 300px; }
  .book-scene { transform: scale(.62); margin-top: -28px; }
}

/* =====================================================
   Services Page Hero + SMM Lead Form
   ===================================================== */
.services-hero { position:relative; background:linear-gradient(135deg, var(--gray-900), var(--secondary-light)); color:#fff; padding:150px 0 70px; overflow:hidden; }
.services-hero:before { content:""; position:absolute; width:520px; height:520px; right:-160px; top:-120px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.28), transparent 68%); pointer-events:none; }
.services-hero-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1; }
.services-hero-content .eyebrow { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:800; margin-bottom:18px; }
.services-hero-content .eyebrow span { width:34px; height:2px; background:var(--accent); display:inline-block; }
.services-hero-content h1 { color:#fff; margin-bottom:16px; }
.services-hero-content p { color:rgba(255,255,255,.78); font-size:1.05rem; max-width:520px; margin-bottom:20px; }
.services-hero-content .breadcrumb { color:rgba(255,255,255,.6); }
.services-hero-content .breadcrumb a { color:rgba(255,255,255,.85); }

.services-hero-form { background:#fff; color:#182230; border-radius:var(--radius-lg); padding:36px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.services-hero-form h3 { color:#0f172a; margin-bottom:8px; font-size:1.4rem; }
.services-hero-form .form-sub { color:#475569; font-size:.92rem; margin-bottom:20px; line-height:1.5; }
.services-hero-form .form-note { color:#8b98ad; font-size:.78rem; text-align:center; margin-top:12px; }
.services-hero-form .form-group { margin-bottom:14px; }
.services-hero-form .consent { display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; font-size:.85rem; color:#475569; }
.services-hero-form .consent input { margin-top:3px; }

html[data-theme="dark"] .services-hero-form { background:#142238; color:#eef4fb; box-shadow:0 30px 80px rgba(0,0,0,.55); }
html[data-theme="dark"] .services-hero-form h3 { color:#f8fafc; }
html[data-theme="dark"] .services-hero-form .form-sub,
html[data-theme="dark"] .services-hero-form .consent { color:#c7d2e1; }
html[data-theme="dark"] .services-hero-form .form-note { color:#8b98ad; }

@media (max-width:1000px) {
  .services-hero-layout { grid-template-columns:1fr; }
  .services-hero-content { text-align:center; }
  .services-hero-content p { margin-left:auto; margin-right:auto; }
  .services-hero-content .breadcrumb { justify-content:center; display:flex; gap:6px; }
}
@media (max-width:640px) {
  .services-hero { padding:120px 0 48px; }
  .services-hero-form { padding:26px 20px; }
  .services-hero-form input,
  .services-hero-form textarea,
  .services-hero-form select { min-height:48px; font-size:16px; }
}

/* Tables become horizontally scrollable instead of breaking the page */
.data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table table { min-width: 640px; }


/* =====================================================
   MetaBook Visual Refresh — Premium Light/Dark System
   ===================================================== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
  --secondary: #0b1220;
  --secondary-light: #17233b;
  --accent: #c9a227;
  --accent-dark: #a88316;
  --gray-50: #f7f7f3;
  --gray-100: #eef0f4;
  --gray-200: #dfe3ea;
  --gray-300: #c8ced8;
  --gray-400: #929baa;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #0b1220;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f7f3;
  --surface-elevated: #ffffff;
  --text: #182230;
  --border: #e1e5eb;
  --shadow-premium: 0 20px 60px rgba(11,18,32,.09);
  --transition: .28s cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"] {
  --surface: #0b1220;
  --surface-soft: #101a2d;
  --surface-elevated: #152139;
  --text: #f3f5f8;
  --gray-50: #101a2d;
  --gray-100: #152139;
  --gray-200: #25334b;
  --gray-300: #34435c;
  --gray-400: #8e9bb0;
  --gray-500: #a8b3c4;
  --gray-600: #c0c9d6;
  --gray-700: #d5dbe4;
  --gray-800: #e7ebf1;
  --gray-900: #f5f7fa;
  --white: #f8fafc;
  --border: #25334b;
  --shadow-premium: 0 24px 70px rgba(0,0,0,.28);
}

body { background: var(--surface); color: var(--text); transition: background .35s ease, color .35s ease; }
.site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom-color: var(--border); }
.nav-menu a { color: var(--gray-700); }
.nav-menu a:hover { color: var(--primary-light); background: var(--gray-100); }
.logo { color: var(--primary); }

.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.theme-toggle { width:42px; height:42px; border:1px solid var(--border); border-radius:12px; display:grid; place-items:center; position:relative; color:var(--gray-700); background:var(--surface-elevated); box-shadow:0 4px 14px rgba(11,18,32,.06); transition:transform var(--transition), background var(--transition), border-color var(--transition); }
.theme-toggle:hover { transform:translateY(-2px); border-color:var(--primary); }
.theme-icon { position:absolute; font-size:18px; line-height:1; transition:opacity .2s ease, transform .25s ease; }
.theme-moon { opacity:0; transform:rotate(-25deg) scale(.7); }
html[data-theme="dark"] .theme-sun { opacity:0; transform:rotate(25deg) scale(.7); }
html[data-theme="dark"] .theme-moon { opacity:1; transform:none; }

/* Consistent surfaces across both themes */
.trust-bar, .testimonials-section, .blog-sidebar .widget { background:var(--surface-soft); border-color:var(--border); }
.service-card, .pricing-card, .portfolio-card, .testimonial-card, .blog-card, .featured-book-card, .cover-gallery-card, .process-step { background:var(--surface-elevated); border-color:var(--border); box-shadow:var(--shadow-premium); }
.service-card p, .portfolio-card .info p, .testimonial-card .text, .blog-card .excerpt { color:var(--gray-500); }
.faq-item { border-color:var(--border); }
.faq-item .question:hover { background:var(--surface-soft); }
.faq-item .question .toggle { background:var(--gray-100); }
.form-group input, .form-group textarea, .form-group select { background:var(--surface-elevated); color:var(--gray-800); border-color:var(--border); }

/* More restrained premium motion */
.reveal, .reveal-left, .reveal-right, .reveal-scale { transition-duration:.72s; transition-timing-function:cubic-bezier(.22,.61,.36,1); }
.service-card:hover, .pricing-card:hover, .portfolio-card:hover, .testimonial-card:hover, .blog-card:hover { transform:translateY(-5px); }
.featured-book-card:hover, .cover-gallery-card:hover { box-shadow:0 28px 80px rgba(11,18,32,.14); }
.float { animation:float 5.5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.hero-particle { animation-duration:7s; opacity:.45; }
.scroll-progress span { background:linear-gradient(90deg,var(--primary-light),var(--primary),var(--accent)); }

/* Dark mode hero / special sections */
html[data-theme="dark"] .hero-3d { background:radial-gradient(circle at 75% 35%,rgba(37,99,235,.22),transparent 34%),linear-gradient(135deg,#050a14,#0b1425 58%,#122343); }
html[data-theme="dark"] .why-choose { background:linear-gradient(135deg,#070c16,#111d34); }
html[data-theme="dark"] .cta-section { background:linear-gradient(135deg,#070c16,#122343); }
html[data-theme="dark"] .featured-book-card,
html[data-theme="dark"] .cover-gallery-card,
html[data-theme="dark"] .portfolio-cover-showcase { background:var(--surface-elevated); }
html[data-theme="dark"] .showcase-image { background:#0f192c; }
html[data-theme="dark"] .cover-gallery-image { background:linear-gradient(145deg,#0f192c,#17253d); }
html[data-theme="dark"] .section-title .text-gradient { background:linear-gradient(90deg,#7dd3fc,#60a5fa,#e6c85c); -webkit-background-clip:text; background-clip:text; }

/* Reduce effects on touch devices */
@media (pointer:coarse) {
  .cursor-glow { display:none !important; }
  .service-card:hover, .pricing-card:hover, .portfolio-card:hover, .testimonial-card:hover, .blog-card:hover { transform:none; }
  .btn:hover { transform:none; }
}

@media (max-width:968px) {
  .header-actions { gap:7px; }
  .theme-toggle { width:40px; height:40px; }
  .header-cta { display:none; }
}
@media (max-width:640px) {
  .container { padding-left:18px; padding-right:18px; }
  .section { padding:58px 0; }
  .hero-content { padding:72px 0 40px; }
  .hero h1 { font-size:clamp(2.45rem,12vw,3.6rem); }
  .hero p { font-size:1rem; line-height:1.7; }
  .hero-stats { justify-content:space-between; gap:12px; }
  .hero-stat .num { font-size:1.8rem; }
  .hero-stat .label { font-size:.72rem; }
  .section-subtitle { font-size:1rem; margin-bottom:2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-icon, .theme-toggle, .reveal, .reveal-left, .reveal-right, .reveal-scale { transition:none !important; }
}

/* =====================================================
   MetaBook Theme Stability + Alternating Sections + Mobile v2
   ===================================================== */
:root {
  --page-light: #f8fafc;
  --page-light-2: #ffffff;
  --page-dark: #0a1220;
  --page-dark-2: #101d31;
  --ink-light: #0f172a;
  --muted-light: #475569;
  --ink-dark: #f8fafc;
  --muted-dark: #c4cfdd;
  --line-light: #dbe4ef;
  --line-dark: #273750;
}

/* Theme-safe base typography. Never rely on old gray values in dark mode. */
body { background: var(--page-light); color: var(--ink-light); }
body, main, .page-content { min-width: 0; }
main { overflow: clip; }
.section-theme-light { background: linear-gradient(180deg,var(--page-light-2),var(--page-light)) !important; color: var(--ink-light); }
.section-theme-light h1,.section-theme-light h2,.section-theme-light h3,.section-theme-light h4,.section-theme-light h5,.section-theme-light h6 { color: var(--ink-light); }
.section-theme-light p,.section-theme-light li,.section-theme-light .section-subtitle { color: var(--muted-light); }
.section-theme-light .section-kicker { color: var(--primary); }
.section-theme-light .service-card,.section-theme-light .pricing-card,.section-theme-light .portfolio-card,.section-theme-light .testimonial-card,.section-theme-light .blog-card,.section-theme-light .process-step,.section-theme-light .featured-book-card,.section-theme-light .cover-gallery-card { background:#fff; border-color:var(--line-light); }

.section-theme-dark { background: linear-gradient(135deg,var(--page-dark),var(--page-dark-2)) !important; color:var(--ink-dark); }
.section-theme-dark h1,.section-theme-dark h2,.section-theme-dark h3,.section-theme-dark h4,.section-theme-dark h5,.section-theme-dark h6 { color:var(--ink-dark); }
.section-theme-dark p,.section-theme-dark li,.section-theme-dark .section-subtitle { color:var(--muted-dark); }
.section-theme-dark .section-kicker { color:#7dd3fc; }

/* "What Authors Say" / any other "forced dark" section: its background
   already turns light again in light mode, but nothing was flipping its
   heading/subtitle text back to dark, so it stayed white-on-light (and
   unreadable) whenever the site was in light mode. Fix that here. */
html[data-theme="light"] .section-theme-dark:not(.why-choose) > .container > .section-title { color:var(--ink-light) !important; }
html[data-theme="light"] .section-theme-dark:not(.why-choose) > .container > .section-subtitle { color:var(--muted-light) !important; }
.section-theme-dark .service-card,.section-theme-dark .pricing-card,.section-theme-dark .portfolio-card,.section-theme-dark .testimonial-card,.section-theme-dark .blog-card,.section-theme-dark .process-step,.section-theme-dark .featured-book-card,.section-theme-dark .cover-gallery-card { background:#111d31; border-color:var(--line-dark); color:var(--ink-dark); }
.section-theme-dark .service-card p,.section-theme-dark .portfolio-card .info p,.section-theme-dark .testimonial-card .text,.section-theme-dark .blog-card .excerpt,.section-theme-dark .book-card-info p { color:#c4cfdd; }
.section-theme-dark .service-card h3,.section-theme-dark .portfolio-card h3,.section-theme-dark .testimonial-card h3,.section-theme-dark .blog-card h3,.section-theme-dark .book-card-info h3 { color:#f8fafc; }
.section-theme-dark a:not(.btn) { color:#9bdcff; }
.section-theme-dark .cover-gallery-image { background:radial-gradient(circle at 50% 35%,#1b2d49,transparent 68%) !important; }
.section-theme-dark .cover-gallery-info>span { color:#7dd3fc; }
.section-theme-dark .cover-gallery-info a { color:#e5edf7; }
.section-theme-dark .faq-item { border-color:var(--line-dark); }
.section-theme-dark .faq-item .question { color:#f8fafc; }
.section-theme-dark .faq-item .answer { color:#c4cfdd; }
.section-theme-dark .faq-item .question:hover { background:rgba(255,255,255,.04); }

/* Featured Packages: this card grid is intentionally dark in BOTH themes.
   These inner elements had hardcoded gray-scale colors that went unreadable
   against the permanently-dark card in light mode ("details" text). Force
   a light, theme-independent palette so it stays readable in both themes. */
.section-theme-dark .pricing-card .subtitle,
.section-theme-dark .pricing-card .features li { color:#c7d2e1 !important; }
.section-theme-dark .pricing-card .features li::before { color:#4ade80 !important; }
.section-theme-dark .pricing-card .price .sale { color:#ffffff !important; }
.section-theme-dark .pricing-card .price .original { color:#8b98ad !important; }
.section-theme-dark .pricing-card .price .currency { color:#c7d2e1 !important; }

/* Recent Work / FAQ / any other "forced light" section: the section itself
   now follows the global dark-mode background, so its own heading and
   subtitle text must follow the global dark-mode (white) palette too —
   otherwise the text is invisible against the dark background. The card
   elements below stay pinned to a light card look on purpose. */
html[data-theme="dark"] .section-theme-light:not(.featured-books-section) > .container > .section-title { color:var(--ink-dark) !important; }
html[data-theme="dark"] .section-theme-light:not(.featured-books-section) > .container > .section-subtitle { color:var(--muted-dark) !important; }
html[data-theme="dark"] .section-theme-light .portfolio-card,
html[data-theme="dark"] .section-theme-light .service-card,
html[data-theme="dark"] .section-theme-light .testimonial-card,
html[data-theme="dark"] .section-theme-light .blog-card,
html[data-theme="dark"] .section-theme-light .featured-book-card,
html[data-theme="dark"] .section-theme-light .cover-gallery-card { background:#fff !important; color:#0f172a !important; }
html[data-theme="dark"] .section-theme-light .portfolio-card .info p,
html[data-theme="dark"] .section-theme-light .service-card p,
html[data-theme="dark"] .section-theme-light .testimonial-card .text,
html[data-theme="dark"] .section-theme-light .blog-card .excerpt { color:#475569 !important; }
html[data-theme="dark"] .section-theme-light .portfolio-card h3,
html[data-theme="dark"] .section-theme-light .service-card h3,
html[data-theme="dark"] .section-theme-light .testimonial-card h3,
html[data-theme="dark"] .section-theme-light .blog-card h3 { color:#0f172a !important; }

/* Explicitly override hard-coded light backgrounds in the showcase. */
html[data-theme="dark"] .featured-books-section,
html[data-theme="dark"] .cover-gallery-section,
html[data-theme="dark"] .trust-bar,
html[data-theme="dark"] .testimonials-section { color:var(--ink-dark); }
html[data-theme="dark"] .featured-books-section { background:linear-gradient(180deg,#fff,#f8fafc) !important; color:var(--ink-light); }
html[data-theme="dark"] .featured-books-section h1,html[data-theme="dark"] .featured-books-section h2,html[data-theme="dark"] .featured-books-section h3 { color:var(--ink-light); }
html[data-theme="dark"] .featured-books-section p,html[data-theme="dark"] .featured-books-section .section-subtitle { color:var(--muted-light); }

/* Header remains readable in both modes. */
.site-header { background:rgba(255,255,255,.94); border-bottom-color:#dbe4ef; }
html[data-theme="dark"] .site-header { background:rgba(7,14,27,.94); border-bottom-color:#273750; }
html[data-theme="dark"] .logo { color:#9bdcff; }
html[data-theme="dark"] .nav-menu a { color:#dce6f2; }
html[data-theme="dark"] .nav-menu a:hover { color:#9bdcff; background:rgba(255,255,255,.06); }
html[data-theme="dark"] .hamburger span { background:#e7eef7; }
html[data-theme="dark"] .theme-toggle { color:#f8fafc; background:#111d31; border-color:#33445e; }
html[data-theme="dark"] .mobile-nav { background:#091321; border-top:1px solid #273750; }
html[data-theme="dark"] .mobile-nav a { color:#e7eef7; border-bottom-color:#273750; }

/* Forms / inputs: readable text, placeholders and focus in either theme. */
input,textarea,select { min-width:0; }
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select { background:#101b2d !important; color:#f5f7fa !important; border-color:#34455f !important; }
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder { color:#91a0b5 !important; }
html[data-theme="dark"] label { color:#e5edf7; }

/* Tables and wide admin/frontend content can scroll instead of breaking the viewport. */
.table-responsive,.table-wrap,.data-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { max-width:100%; }

/* Mobile layout hardening */
@media (max-width: 968px) {
  .header-inner { gap:8px; }
  .header-actions { flex:0 0 auto; }
  .nav-menu { display:none !important; }
  .hamburger { display:flex !important; }
  .hero-layout { grid-template-columns:1fr !important; }
  .hero-visual { max-width:100%; overflow:hidden; }
  .featured-books-grid,.cover-gallery-grid,.services-grid,.why-grid,.process-steps,.pricing-grid,.portfolio-grid,.testimonials-grid,.blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .container { padding-left:16px; padding-right:16px; }
  .section { padding:52px 0; }
  .header-inner { height:64px; padding:0 12px; }
  .site-header .logo img { height:36px; max-width:155px; object-fit:contain; }
  .theme-toggle { width:38px; height:38px; flex:0 0 38px; }
  .hamburger { padding:7px; }
  .mobile-nav { top:64px; padding:12px 16px 28px; }
  .mobile-nav a { padding:14px 10px; font-size:1rem; }
  .hero { min-height:auto; padding-top:64px; }
  .hero-content { padding:74px 0 18px !important; }
  .hero h1 { font-size:clamp(2rem,9.5vw,2.55rem); }
  .hero-buttons .btn { width:100%; }
  .hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
  .hero-stat { min-width:0; text-align:center; }
  .hero-stat .num { font-size:1.45rem; }
  .hero-stat .label { font-size:.68rem; }
  .hero-visual { height:320px; min-height:320px; }
  .book-scene { width:100%; max-width:390px; height:320px; transform:scale(.64); }
  .featured-books-grid,.cover-gallery-grid,.services-grid,.why-grid,.process-steps,.pricing-grid,.portfolio-grid,.testimonials-grid,.blog-grid,.footer-grid { grid-template-columns:1fr !important; }
  .cover-gallery-image { height:300px !important; }
  .cover-gallery-image img { max-width:62%; }
  .service-card,.pricing-card,.portfolio-card,.testimonial-card,.blog-card,.process-step,.featured-book-card,.cover-gallery-card { padding:22px; }
  .section-title { line-height:1.15; }
  .section-subtitle { max-width:100%; }
  .form-row { grid-template-columns:1fr !important; }
  .contact-grid,.blog-layout { grid-template-columns:1fr !important; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .cta-section { padding:56px 0; }
}
@media (max-width:380px) {
  .header-inner { padding:0 9px; }
  .site-header .logo img { max-width:135px; }
  .hero-content { padding-top:68px !important; }
  .hero h1 { font-size:1.9rem; }
  .hero-stats { grid-template-columns:1fr; }
  .hero-visual { height:280px; min-height:280px; }
  .book-scene { height:280px; transform:scale(.55); }
}


/* =====================================================
   MetaBook Final Popup + Responsive Hardening v3
   ===================================================== */
.popup-box,
.popup-box h1,.popup-box h2,.popup-box h3,.popup-box h4,.popup-box h5,.popup-box h6,
.popup-box p,.popup-box label,.popup-box .consent,
.popup-box input,.popup-box textarea,.popup-box select { text-rendering: optimizeLegibility; }

.popup-box { color: #182230; background:#ffffff; border:1px solid #e1e5eb; box-shadow:0 30px 90px rgba(0,0,0,.25); }
.popup-box h2 { color:#0f172a !important; }
.popup-box .popup-desc { color:#475569 !important; }
.popup-box .consent { color:#475569 !important; }
.popup-box .form-group label { color:#344054 !important; }
.popup-box input,.popup-box textarea,.popup-box select {
  background:#fff !important; color:#182230 !important; border-color:#dbe4ef !important;
}
.popup-box input::placeholder,.popup-box textarea::placeholder { color:#64748b !important; opacity:1; }
.popup-box select option { background:#fff; color:#182230; }
.popup-box .popup-close { background:#eef0f4; color:#344054; }
.popup-box .popup-close:hover { background:#dfe3ea; color:#0f172a; }

html[data-theme="dark"] .popup-overlay { background:rgba(2,6,15,.78); }
html[data-theme="dark"] .popup-box {
  background:#101b2d !important; color:#f8fafc !important;
  border-color:#30415c !important; box-shadow:0 30px 100px rgba(0,0,0,.55);
}
html[data-theme="dark"] .popup-box h2,
html[data-theme="dark"] .popup-box h3,
html[data-theme="dark"] .popup-box h4,
html[data-theme="dark"] .popup-box label { color:#f8fafc !important; }
html[data-theme="dark"] .popup-box .popup-desc,
html[data-theme="dark"] .popup-box .consent { color:#c7d2e1 !important; }
html[data-theme="dark"] .popup-box input,
html[data-theme="dark"] .popup-box textarea,
html[data-theme="dark"] .popup-box select {
  background:#0b1526 !important; color:#f8fafc !important; border-color:#3a4c68 !important;
  -webkit-text-fill-color:#f8fafc !important;
}
html[data-theme="dark"] .popup-box input::placeholder,
html[data-theme="dark"] .popup-box textarea::placeholder { color:#9eacc0 !important; -webkit-text-fill-color:#9eacc0 !important; }
html[data-theme="dark"] .popup-box select option { background:#0b1526 !important; color:#f8fafc !important; }
html[data-theme="dark"] .popup-box .popup-close { background:#1c2a40 !important; color:#f8fafc !important; }
html[data-theme="dark"] .popup-box .popup-close:hover { background:#293a54 !important; }
html[data-theme="dark"] .popup-box .form-success { background:#123524 !important; color:#bbf7d0 !important; border-color:#286044 !important; }

/* Popup must remain readable regardless of the section/theme behind it. */
.popup-overlay .form-group { min-width:0; }
.popup-overlay .btn { min-height:48px; }
@media (max-width:640px) {
  .popup-overlay { padding:12px; align-items:flex-start; padding-top:max(12px, env(safe-area-inset-top)); padding-bottom:max(12px, env(safe-area-inset-bottom)); overflow-y:auto; }
  .popup-box { width:min(100%, 520px); max-height:calc(100dvh - 24px); margin:auto; padding:24px 18px 20px; overflow-y:auto; border-radius:16px; }
  .popup-box h2 { font-size:clamp(1.55rem,7vw,2rem); padding-right:30px; }
  .popup-box .popup-desc { font-size:.95rem; line-height:1.55; }
  .popup-box .form-group { margin-bottom:14px; }
  .popup-box input,.popup-box textarea,.popup-box select { min-height:48px; font-size:16px; }
  .popup-box textarea { min-height:100px; }
  .popup-box .consent { font-size:.82rem; line-height:1.45; }
}

/* General mobile overflow fixes */
@media (max-width:680px) {
  html,body { width:100%; max-width:100%; overflow-x:hidden; }
  .container { width:100%; max-width:100%; }
  .hero-layout,.contact-grid,.blog-layout,.form-row { min-width:0; }
  .hero-buttons { width:100%; }
  .hero-buttons .btn { max-width:100%; }
  .table-responsive,.table-wrap,.data-table,.data-table-wrap { max-width:100vw; }
  .section-theme-dark, .section-theme-light { overflow:hidden; }
}


/* =====================================================
   MetaBook FINAL HEADER / LOGO STABILITY PATCH
   One logo element only; JS swaps its raster source per theme.
   ===================================================== */
.logo {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  text-decoration: none;
  line-height: 0;
}
.logo img,
.site-header .logo img,
.footer-brand .logo img {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: 44px !important;
  max-width: 185px !important;
  object-fit: contain;
}
.logo .logo-dark { display: none !important; }
.site-header .header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header .nav-menu {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  flex-wrap: nowrap;
}
.site-header .nav-menu a { white-space: nowrap; }
.site-header .header-actions { flex: 0 0 auto; }

/* Never let old theme-logo rules create a second image or collapse navigation. */
html[data-theme="dark"] .site-header .logo img,
html[data-theme="light"] .site-header .logo img,
html[data-theme="dark"] .footer-brand .logo img,
html[data-theme="light"] .footer-brand .logo img {
  display: block !important;
}

@media (max-width: 1100px) {
  .site-header .header-inner { gap: 10px; padding-left: 18px; padding-right: 18px; }
  .site-header .nav-menu a { padding-left: 9px; padding-right: 9px; font-size: .88rem; }
  .logo img { max-width: 165px !important; height: 40px !important; }
}

@media (max-width: 900px) {
  .site-header .nav-menu,
  .site-header .header-cta { display: none !important; }
  .site-header .hamburger { display: flex !important; flex: 0 0 auto; }
  .site-header .header-inner { height: 64px; padding: 0 14px; }
  .site-header .logo { margin-right: auto; }
  .site-header .logo img { height: 38px !important; max-width: 150px !important; }
  .mobile-nav { top: 64px !important; }
}

@media (max-width: 480px) {
  .site-header .header-inner { padding: 0 10px; gap: 6px; }
  .site-header .logo img { height: 34px !important; max-width: 132px !important; }
  .theme-toggle { width: 36px; height: 36px; padding: 6px; }
  .hamburger { padding: 7px !important; }
  .hamburger span { width: 22px !important; height: 2.5px !important; }
  .mobile-nav { padding: 10px 14px 24px !important; }
}

/* Footer keeps the same single-logo behavior without the old white wrapper. */
.footer-brand .logo {
  display: inline-flex;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
}
.footer-brand .logo img { max-width: 190px !important; height: 46px !important; }
html[data-theme="dark"] .footer-brand .logo img,
html[data-theme="light"] .footer-brand .logo img { opacity: 1; }


/* =====================================================
   MetaBook LOGO + FOOTER FINAL CONTRAST FIX
   Keep the existing single inline SVG logo. Do not use
   raster swapping here; explicit SVG fills work on both themes.
   ===================================================== */
.metabook-brand { display:inline-flex !important; align-items:center; line-height:1; }
.metabook-logo {
  display:block;
  width:260px !important;
  height:auto !important;
  max-width:none !important;
  overflow:visible;
}
.metabook-logo-word { fill:#10213d; }
.metabook-logo-book { fill:#2563eb; }
.metabook-logo-tag { fill:#64748b; }
.metabook-logo-mark { transform-origin:50px 48px; animation: metabookLogoFloat 4.8s ease-in-out infinite; }
.metabook-spark { transform-origin:50px 28px; animation: metabookLogoSpark 2.8s ease-in-out infinite; }
@keyframes metabookLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes metabookLogoSpark { 0%,100%{opacity:.65;transform:scale(.9) rotate(0)} 50%{opacity:1;transform:scale(1.12) rotate(10deg)} }

/* Footer must stay intentionally dark in BOTH theme modes. */
.site-footer {
  background:#0b1220 !important;
  color:#cbd5e1 !important;
  border-top:1px solid #24334a;
}
.site-footer .footer-brand .logo { background:transparent !important; }
.site-footer .footer-brand p { color:#b7c3d4 !important; }
.site-footer .footer-col h4 { color:#ffffff !important; }
.site-footer .footer-col ul li a { color:#c4cfdd !important; }
.site-footer .footer-col ul li a:hover { color:#ffffff !important; }
.site-footer .footer-col ul li { color:#c4cfdd !important; }
.site-footer .footer-bottom { border-top-color:#26364e !important; }
.site-footer .footer-bottom p { color:#9eacc0 !important; }
.site-footer .footer-social a { color:#e7eef7 !important; border-color:#34455f !important; background:#111d31 !important; }
.site-footer .footer-social a:hover { color:#ffffff !important; background:#1b2b44 !important; border-color:#4c78c9 !important; }

/* SVG logo text in dark theme. */
html[data-theme="dark"] .site-header .metabook-logo-word,
html[data-theme="dark"] .site-header .metabook-logo-tag { fill:#f8fafc !important; }
html[data-theme="dark"] .site-header .metabook-logo-book { fill:#60a5fa !important; }
html[data-theme="dark"] .site-footer .metabook-logo-word { fill:#ffffff !important; }
html[data-theme="dark"] .site-footer .metabook-logo-book { fill:#60a5fa !important; }
html[data-theme="dark"] .site-footer .metabook-logo-tag { fill:#b8c5d8 !important; }

/* The footer logo sits on a dark surface, so never apply the old white badge. */
.footer-brand .logo { padding:0 !important; margin-bottom:16px; }
.footer-brand .metabook-logo { width:270px !important; }

@media (max-width:900px) {
  .site-header .metabook-logo { width:235px !important; }
}
@media (max-width:640px) {
  .site-header .metabook-logo { width:205px !important; }
  .footer-brand .metabook-logo { width:230px !important; }
}
@media (max-width:420px) {
  .site-header .metabook-logo { width:180px !important; }
  .footer-brand .metabook-logo { width:215px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .metabook-logo-mark,.metabook-spark { animation:none !important; }
}

/* =====================================================
   MetaBook Universal Theme Contrast + Logo Motion v4
   ===================================================== */
html[data-theme="dark"] body {
  background:#080f1c !important;
  color:#eef4fb !important;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .page-content { background:#080f1c; color:#eef4fb; }

/* Every normal content section gets a predictable dark surface. */
html[data-theme="dark"] main > .section,
html[data-theme="dark"] main .section:not(.hero):not(.why-choose):not(.cta-section) {
  background:#0b1424 !important;
  color:#eef4fb !important;
}
html[data-theme="dark"] main > .section:nth-of-type(even),
html[data-theme="dark"] main .section:nth-of-type(even):not(.hero):not(.why-choose):not(.cta-section) {
  background:#101c30 !important;
}
html[data-theme="light"] main > .section:nth-of-type(even):not(.hero):not(.why-choose):not(.cta-section) {
  background:#f7f9fc !important;
}
html[data-theme="light"] main > .section:nth-of-type(odd):not(.hero):not(.why-choose):not(.cta-section) {
  background:#ffffff !important;
}

/* Page headers / generic sections */
html[data-theme="dark"] .page-header {
  background:linear-gradient(135deg,#08111f,#12213a) !important;
  color:#f8fbff !important;
}
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .page-header .breadcrumb,
html[data-theme="dark"] .page-header .breadcrumb a { color:#f8fbff !important; }
html[data-theme="dark"] .page-header .breadcrumb a { color:#8fd8ff !important; }

/* Strong, predictable typography in dark mode. */
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main h5,
html[data-theme="dark"] main h6 { color:#f8fbff !important; }
html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] main td,
html[data-theme="dark"] main th,
html[data-theme="dark"] main label,
html[data-theme="dark"] main small,
html[data-theme="dark"] main blockquote,
html[data-theme="dark"] main .section-subtitle,
html[data-theme="dark"] main .description,
html[data-theme="dark"] main .excerpt,
html[data-theme="dark"] main .meta,
html[data-theme="dark"] main .text-muted { color:#cbd7e5 !important; }
html[data-theme="dark"] main strong,
html[data-theme="dark"] main b { color:#f2f7fc !important; }
html[data-theme="dark"] main a:not(.btn) { color:#8fd8ff; }
html[data-theme="dark"] main a:not(.btn):hover { color:#ffffff; }

/* Inline legacy text colors must not defeat dark mode. */
html[data-theme="dark"] main li[style*="color"],
html[data-theme="dark"] main p[style*="color"],
html[data-theme="dark"] main span[style*="color"],
html[data-theme="dark"] main div[style*="color"] { color:#cbd7e5 !important; }
/* Preserve icon/accent colors where the element is explicitly an icon. */
html[data-theme="dark"] main .icon,
html[data-theme="dark"] main .badge,
html[data-theme="dark"] main .price,
html[data-theme="dark"] main .price * { color:inherit !important; }

/* Cards, panels, accordions, tables and forms */
html[data-theme="dark"] main .service-card,
html[data-theme="dark"] main .pricing-card,
html[data-theme="dark"] main .portfolio-card,
html[data-theme="dark"] main .testimonial-card,
html[data-theme="dark"] main .blog-card,
html[data-theme="dark"] main .process-step,
html[data-theme="dark"] main .featured-book-card,
html[data-theme="dark"] main .cover-gallery-card,
html[data-theme="dark"] main .faq-item,
html[data-theme="dark"] main .contact-form,
html[data-theme="dark"] main .contact-info,
html[data-theme="dark"] main .widget,
html[data-theme="dark"] main .package-card,
html[data-theme="dark"] main .package-detail,
html[data-theme="dark"] main .data-table-wrap {
  background:#142238 !important;
  border-color:#31445f !important;
  color:#eef4fb !important;
}
html[data-theme="dark"] main .service-card p,
html[data-theme="dark"] main .portfolio-card p,
html[data-theme="dark"] main .testimonial-card p,
html[data-theme="dark"] main .blog-card p,
html[data-theme="dark"] main .process-step p,
html[data-theme="dark"] main .package-card p { color:#cbd7e5 !important; }
html[data-theme="dark"] main .faq-item .question,
html[data-theme="dark"] main .faq-item .answer { color:#eef4fb !important; }
html[data-theme="dark"] main .faq-item .answer { color:#cbd7e5 !important; }
html[data-theme="dark"] main table { color:#e8f0f8 !important; }
html[data-theme="dark"] main th { background:#1a2a43 !important; color:#ffffff !important; }
html[data-theme="dark"] main td { border-color:#31445f !important; color:#cbd7e5 !important; }
html[data-theme="dark"] main input,
html[data-theme="dark"] main textarea,
html[data-theme="dark"] main select {
  background:#0b1628 !important;
  color:#f8fbff !important;
  border-color:#405673 !important;
  -webkit-text-fill-color:#f8fbff !important;
}
html[data-theme="dark"] main input::placeholder,
html[data-theme="dark"] main textarea::placeholder { color:#9fb0c4 !important; -webkit-text-fill-color:#9fb0c4 !important; opacity:1; }
html[data-theme="dark"] main select option { background:#0b1628 !important; color:#f8fbff !important; }

/* Footer: force a complete, high-contrast palette independent of theme variables. */
.site-footer,
html[data-theme="dark"] .site-footer {
  background:#060d18 !important;
  color:#d9e4f0 !important;
  border-top:1px solid #263a55 !important;
}
html[data-theme="dark"] .site-footer h1,
html[data-theme="dark"] .site-footer h2,
html[data-theme="dark"] .site-footer h3,
html[data-theme="dark"] .site-footer h4,
html[data-theme="dark"] .site-footer h5,
html[data-theme="dark"] .site-footer h6 { color:#ffffff !important; }
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer li { color:#c3d0df !important; }
html[data-theme="dark"] .site-footer a { color:#cfe7ff !important; }
html[data-theme="dark"] .site-footer a:hover { color:#ffffff !important; }
html[data-theme="dark"] .site-footer .footer-bottom { border-top:1px solid #263a55 !important; }
html[data-theme="dark"] .site-footer .footer-bottom p { color:#9fb0c4 !important; }

/* Animated logo: visible motion in header and footer, with no layout movement. */
.metabook-logo {
  transform-origin:center;
  transform-box:fill-box;
  animation: metabookLogoBreathe 4s ease-in-out infinite;
  will-change:transform,filter;
}
.metabook-logo-mark {
  transform-box:fill-box;
  transform-origin:center;
  animation: metabookMarkFloat 3.2s ease-in-out infinite;
  will-change:transform;
}
.metabook-spark {
  transform-box:fill-box;
  transform-origin:center;
  animation: metabookSparkPulse 2s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes metabookLogoBreathe {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-1.5px) scale(1.018); }
}
@keyframes metabookMarkFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-4px) rotate(-1.5deg); }
}
@keyframes metabookSparkPulse {
  0%,100% { opacity:.55; transform:scale(.82) rotate(-8deg); }
  50% { opacity:1; transform:scale(1.22) rotate(10deg); }
}
html[data-theme="dark"] .site-header .metabook-logo-word { fill:#ffffff !important; }
html[data-theme="dark"] .site-header .metabook-logo-tag { fill:#b9c9dc !important; }
html[data-theme="dark"] .site-footer .metabook-logo-word { fill:#ffffff !important; }
html[data-theme="dark"] .site-footer .metabook-logo-tag { fill:#b9c9dc !important; }
html[data-theme="dark"] .metabook-logo-book { fill:#60a5fa !important; }

/* Make logo genuinely larger while retaining mobile safety. */
.site-header .metabook-logo { width:300px !important; max-width:calc(100vw - 210px) !important; }
.site-footer .metabook-logo { width:300px !important; }
@media (max-width:900px) {
  .site-header .metabook-logo { width:245px !important; max-width:calc(100vw - 145px) !important; }
}
@media (max-width:640px) {
  .site-header .metabook-logo { width:215px !important; max-width:calc(100vw - 105px) !important; }
  .site-footer .metabook-logo { width:245px !important; }
}
@media (max-width:420px) {
  .site-header .metabook-logo { width:190px !important; max-width:calc(100vw - 92px) !important; }
  .site-footer .metabook-logo { width:225px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .metabook-logo,.metabook-logo-mark,.metabook-spark { animation:none !important; }
}


/* =====================================================
   CONTACT PAGE — FINAL LIGHT/DARK CONTRAST + MOBILE FIX
   ===================================================== */
.contact-section { background:#f7f9fc !important; }
.contact-section .contact-grid { align-items:stretch; }
.contact-info-card {
  background:linear-gradient(145deg,#0b1730 0%,#173b72 100%) !important;
  color:#f8fbff !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 45px rgba(10,28,55,.16);
}
.contact-info-card h3,
.contact-info-card .value { color:#ffffff !important; }
.contact-info-card .contact-info-intro { color:#d7e4f2 !important; margin-bottom:32px; }
.contact-info-item .label { color:#9fc0e5 !important; }
.contact-info-item .icon { color:#ffffff !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.12); }
.contact-form {
  background:#ffffff !important;
  color:#172033 !important;
  border:1px solid #e4e9f1 !important;
}
.contact-form .contact-form-title { color:#0f1b32 !important; margin-bottom:24px; }
.contact-form .form-group label { color:#334155 !important; }
.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
  background:#ffffff !important;
  color:#172033 !important;
  border:2px solid #d9e1ec !important;
  -webkit-text-fill-color:#172033 !important;
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder { color:#7a8798 !important; opacity:1 !important; -webkit-text-fill-color:#7a8798 !important; }
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus,
.contact-form .form-group select:focus { border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

html[data-theme="dark"] .contact-section { background:#0b1424 !important; }
html[data-theme="dark"] .contact-info-card {
  background:linear-gradient(145deg,#0a1629 0%,#123b70 100%) !important;
  color:#f8fbff !important;
  border-color:#29466b !important;
}
html[data-theme="dark"] .contact-info-card h3,
html[data-theme="dark"] .contact-info-card .value { color:#ffffff !important; }
html[data-theme="dark"] .contact-info-card .contact-info-intro { color:#d6e4f3 !important; }
html[data-theme="dark"] .contact-info-item .label { color:#a9c8e8 !important; }
html[data-theme="dark"] .contact-info-item .icon { color:#ffffff !important; background:rgba(96,165,250,.16) !important; border-color:#31557e !important; }
html[data-theme="dark"] .contact-form {
  background:#121f33 !important;
  color:#eef5fc !important;
  border-color:#2e4665 !important;
  box-shadow:0 20px 55px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .contact-form .contact-form-title { color:#ffffff !important; }
html[data-theme="dark"] .contact-form .form-group label { color:#dce8f5 !important; }
html[data-theme="dark"] .contact-form .form-group input,
html[data-theme="dark"] .contact-form .form-group textarea,
html[data-theme="dark"] .contact-form .form-group select {
  background:#0a1628 !important;
  color:#f8fbff !important;
  border-color:#405b7b !important;
  -webkit-text-fill-color:#f8fbff !important;
}
html[data-theme="dark"] .contact-form .form-group input::placeholder,
html[data-theme="dark"] .contact-form .form-group textarea::placeholder { color:#9eb1c8 !important; opacity:1 !important; -webkit-text-fill-color:#9eb1c8 !important; }
html[data-theme="dark"] .contact-form .form-group input:focus,
html[data-theme="dark"] .contact-form .form-group textarea:focus,
html[data-theme="dark"] .contact-form .form-group select:focus { border-color:#60a5fa !important; box-shadow:0 0 0 3px rgba(96,165,250,.15) !important; }
html[data-theme="dark"] .contact-form .form-message,
html[data-theme="dark"] .contact-form .form-error { color:#ffd1d1 !important; }
html[data-theme="dark"] .contact-form .form-success { color:#c9f7d5 !important; background:#103522 !important; border-color:#2d7048 !important; }

@media (max-width:768px) {
  .contact-section { padding-left:0; padding-right:0; }
  .contact-section .contact-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .contact-info-card, .contact-form { padding:28px 22px !important; }
}
@media (max-width:420px) {
  .contact-info-card, .contact-form { padding:22px 17px !important; border-radius:16px !important; }
  .contact-info-item { gap:11px; }
  .contact-info-item .icon { width:42px; height:42px; }
  .contact-form .form-group input,
  .contact-form .form-group textarea,
  .contact-form .form-group select { padding:11px 13px !important; }
}