# WordPress root
wp-content/
├── themes/
│   └── astra/                    # Astra parent theme (DO NOT edit)
│   └── astra-child/              # Child theme — ALL custom CSS/PHP here
│       ├── style.css
│       ├── functions.php             # Enqueue scripts, custom hooks
│       └── assets/
│           ├── css/custom.css        # Global overrides
│           └── js/main.js            # Counter anims, scroll effects
├── plugins/
│   ├── elementor/                # Free Elementor
│   ├── elementor-pro/            # Pro — mega menu, forms, motion
│   ├── woocommerce/              # Shop engine
│   ├── rank-math-pro/            # SEO + schema
│   ├── wp-rocket/                # Caching + performance
│   ├── imagify/                  # Image compression
│   ├── wpforms-pro/              # Demo request forms
│   ├── fluent-crm/               # Email automation
│   └── custom-fonts/             # Self-hosted DM Sans
└── uploads/
    └── na-assets/                # Logos, product images (WebP)

:root {
  /* Shadows — use only these 3 levels */
  --shadow-sm: 0 1px 3px rgba(13,27,42,0.06), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-md: 0 4px 16px rgba(13,27,42,0.08), 0 2px 6px rgba(13,27,42,0.05);
  --shadow-lg: 0 12px 40px rgba(13,27,42,0.12), 0 4px 12px rgba(13,27,42,0.07);
  --shadow-card-hover: 0 20px 60px rgba(13,27,42,0.15);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Body Font */
Font Family: DM Sans
Font Size: 15px
Font Weight: 400
Line Height: 1.75

/* Headings — then override per-heading below */
H1: Syne | 60px | 800 | Line Height: 1.1
H2: Syne | 40px | 700 | Line Height: 1.2
H3: Syne | 24px | 700 | Line Height: 1.3
H4: DM Sans | 18px | 600 | Line Height: 1.4
H5: DM Sans | 15px | 600
H6: DM Mono | 12px | 500 | Text Transform: uppercase | Letter Spacing: 0.1em

:root {
  /* === BRAND CORE === */
  --na-navy:        #0D1B2A;  /* Dark sections, footer bg, text on light */
  --na-blue:        #1A3E8C;  /* Primary brand — nav, headings, links */
  --na-blue-mid:    #2563EB;  /* Button hover, active states */
  --na-blue-light:  #EFF6FF;  /* Section backgrounds, card tints */
  --na-sky:         #0EA5E9;  /* Secondary accent — sky blue highlights */

  /* === ACTION / CTA === */
  --na-orange:      #F0842C;  /* Primary CTA buttons — "Explore Now", "Buy" */
  --na-orange-dark: #C96B1A;  /* Button hover darken */
  --na-orange-light:#FFF4EC;  /* Promo banners, announcement bar bg */

  /* === NEUTRALS === */
  --na-white:       #FFFFFF;
  --na-bg:          #F8FAFC;  /* Page background, alt sections */
  --na-bg-2:        #EEF2F7;  /* Card tint, table striping */
  --na-border:      #D1D9E6;  /* All borders, dividers */
  --na-text:        #0D1B2A;  /* Body text on white */
  --na-muted:       #64748B;  /* Secondary text, captions */
  --na-light-text:  #94A3B8;  /* Placeholder, disabled text */

  /* === SEMANTIC === */
  --na-success:     #16A34A;  /* "In Stock", success alerts */
  --na-error:       #DC2626;  /* Error states, "Out of Stock" */
  --na-warning:     #D97706;  /* Low stock, form warnings */
  --na-info:        #0284C7;  /* Info tooltips, notices */
}

/* Elementor Pro Custom Breakpoints */
Desktop:    1200px+    /* Full layout, 4 col grids */
Laptop:     1024px     /* Reduce column counts, slightly smaller type */
Tablet:     768px      /* 2-col becomes 1-col, nav collapses */
Mobile L:   480px      /* Single column, stacked layout */
Mobile S:   360px      /* Smallest breakpoint — hero text tightens */

/* Astra → Customize → Responsive → Breakpoints */
Tablet Breakpoint: 921px  /* When hamburger menu shows */
Mobile Breakpoint: 544px

<?php
// Enqueue parent + child styles
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'astra-parent',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'na-child',
        get_stylesheet_directory_uri() . '/style.css',
        ['astra-parent']
    );
    wp_enqueue_style(
        'na-custom',
        get_stylesheet_directory_uri() . '/assets/css/custom.css',
        ['na-child']
    );
    wp_enqueue_script(
        'na-main',
        get_stylesheet_directory_uri() . '/assets/js/main.js',
        ['jquery'], null, true // true = load in footer
    );
});
?>

/* Site Settings → Global Colors → add 8 named colors (see Section 04) */
/* Site Settings → Global Fonts → set Syne + DM Sans + DM Mono */

/* Settings → General */
Disable Default Colors: YES
Disable Default Fonts:  YES
Load Google Fonts:      Self-Hosted  /* Critical for GDPR + Core Web Vitals */

/* Settings → Advanced */
CSS Print Method: Internal Embedding
Improved Asset Loading: ENABLE         /* Loads only needed CSS per page */
Optimized DOM Output:   ENABLE         /* Reduces DOM nodes by ~40% */
Inline Font Icons:      ENABLE         /* Eliminates font-awesome HTTP request */

/* Settings → Experiment → Enable these */
Container:              STABLE         /* Modern flexbox layout system */
E-Loading Optimization: ENABLE
Editor Top Bar:         ENABLE

/* Popup → Layout */
Position: Center Center
Width: 560px
Height: Auto
Overlay: ✅ (rgba(13,27,42,0.7))
Close Button: ✅ Top Right
Close on ESC: ✅
Close on Overlay: ✅

/* Popup → Display Conditions */
Trigger: On Click → CSS ID or Class
Assign: .na-demo-trigger-nvivo   /* different class per software */

/* Inside Popup — WPForms shortcode */
[wpforms id="42" title="false" description="false"]

/* Button that opens popup */
Add CSS class: na-demo-trigger-nvivo   /* to the "Request Demo" button */

/* WooCommerce → Attributes → Add Attribute */

Name: Calculator Type      Slug: calculator-type
  Terms: Graphing | Scientific | Financial | Basic

Name: Exam Approvals       Slug: exam-approvals
  Terms: IB DP | SAT | ACT | CBSE | AP Exams | GRE | GMAT

Name: Brand                Slug: brand
  Terms: Texas Instruments | HP | Casio

Name: Display Type         Slug: display-type
  Terms: Color | Monochrome | Full Graphics

Name: Memory              Slug: memory
  Terms: 3MB | 7.5MB | 21MB | 154MB+

/* Tag each product with relevant attributes */
/* These become filterable sidebar facets in shop page */

/* Row 1: Product Hero */
[Left 55%]  Product Gallery (Elementor Woo widget, zoom enabled)
[Right 45%] Product Title (Syne H1)
            Exam Approvals (attribute badges — custom PHP or ACF)
            Short Description
            Price (large, DM Mono font)
            Quantity Selector + Add to Cart
            Trust Badges: "Authorized Distributor" | "Official Warranty"
            Share buttons (optional)

/* Row 2: Sticky Add-to-Cart Bar (appears on scroll) */
Product name | Price | [Add to Cart] — fixed to bottom of viewport

/* Row 3: Product Details Tabs */
Tab 1: Overview (full description, feature list)
Tab 2: Technical Specs (table: display, memory, battery, dimensions)
Tab 3: Exam Approvals (logo grid of approved exams)
Tab 4: Downloads (manual PDF, quick start guide)
Tab 5: Reviews (WooCommerce reviews)

/* Row 4: Related Products */
"Customers Also Bought" — WooCommerce Related Products widget
4-column carousel on desktop

/* Sticky Bar CSS */
/* Add to functions.php or custom.css */
.na-sticky-cart {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--na-navy);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.na-sticky-cart.visible { transform: translateY(0); }

/* Trigger: Form Submitted → "XLSTAT Demo Request" */

Step 1:  Add to List → "Software Leads"
Step 2:  Apply Tag → "xlstat-interest"
Step 3:  Send Email → Immediate
         Subject: "Your XLSTAT demo request — next steps"
         Body: Thanks + what to expect + link to brochure PDF

Step 4:  Wait → 2 days
Step 5:  Send Email → Follow-up
         Subject: "Did you know XLSTAT runs inside Excel?"
         Body: Feature highlight + customer case study

Step 6:  Wait → 5 days
Step 7:  Condition → Has opened email?
         YES → Send Email: Trial offer / pricing
         NO  → Send Email: Different angle (video tutorial)

Step 8:  Apply Tag → "xlstat-nurtured"
Step 9:  Notify Sales Team (Internal Email) with lead details

/* CACHE */
Enable Caching: ON
Cache for logged-in users: OFF (important for WooCommerce)
Cache Lifespan: 10 hours
Separate cache for mobile: ON

/* FILE OPTIMIZATION */
Minify CSS: ON
Combine CSS: OFF  ← Critical: combining breaks Elementor
Minify JS: ON
Combine JS: OFF   ← Critical: combining breaks WooCommerce
Load JS Deferred: ON
Excluded JS (do NOT defer):
  "/wp-includes/js/jquery/jquery.min.js"
  "/wp-content/plugins/woocommerce/"
  "/wp-content/plugins/elementor-pro/"
  "/wp-content/plugins/wpforms/"

Delay JS Execution: ON
Excluded from Delay:
  "woocommerce"
  "elementor"
  "wpforms"
  "jquery"

/* MEDIA */
LazyLoad Images: ON
LazyLoad iFrames/Videos: ON
Replace YouTube iframe with preview: ON  ← Huge LCP boost
WebP Compatibility: ON

/* PRELOADING */
Preload Cache: ON
Sitemap-based Preloading: ON → link to Rank Math sitemap
Prefetch DNS: add these domains:
  fonts.googleapis.com
  fonts.gstatic.com
  cdn.jsdelivr.net

/* ADVANCED RULES — Never Cache URLs */
/cart/
/checkout/
/my-account/
/wp-admin/

/* CDN */
Enable CDN: ON (if using Cloudflare)
CDN URL: your Cloudflare zone URL

/* Imagify → Settings */
Optimization Level: Aggressive  ← 60-80% size reduction
Resize Larger Images: ON
Max Width: 1600px
Max Height: 1200px
Convert to WebP: ON
Serve WebP with: <picture> HTML tag  ← More compatible than .htaccess rewrite
Optimize Retina: ON
Bulk Optimize: Run on all existing images after install

/* Expected output for product images */
Calculator PNG 2MB → WebP ~180KB  ← 91% smaller
Hero banner JPG 800KB → WebP ~95KB  ← 88% smaller
Partner logo PNG 200KB → WebP ~18KB  ← 91% smaller

/* General → Titles & Meta → set these templates */

Homepage:
  %sitename% - Authorized TI & Analytics Software Distributor India

Blog Post:
  %title% - %category% | %sitename%

Product:
  Buy %title% | %price% | %sitename%

Product Category:
  %category% Calculators India - Buy Online | %sitename%

Software Page:
  %title% India | Authorized Distributor | %sitename%

Author Archive:
  Posts by %name% | %sitename%

/* Keep all titles under 60 characters */
/* Keep all meta descriptions between 140-160 characters */

/* ─── SECTION 1: ANNOUNCEMENT BAR ────────────────── */
Location: Astra Header Builder → Above Header
Background: #F0842C
Text: "Explore TI-84+ CE Python Edition — Now Available in India"
CTA Text: "Shop Now →"
CTA Link: /product-category/calculators/graphing-calculators/
Height: 40px | Font: DM Sans 13px 500 | Color: #fff
Dismissable: YES (cookie expires 7 days)
Mobile: hide text, show icon + CTA only

/* ─── SECTION 2: MAIN HERO ────────────────────────── */
Elementor Widget: Slides (Pro)
Slides: 3 maximum
Height: 100vh on desktop, 70vh on tablet, 60vh on mobile
Transition: Fade (not slide — cleaner for text-heavy)
Autoplay: OFF (user-controlled)
Navigation: Dots only (no arrows — cleaner, Shiprocket-style)

Slide 1:
  Background: linear-gradient(135deg, #0D1B2A 0%, #1A3E8C 100%)
  Headline: "India's Premier Analytics & EdTech Distributor"
  Subhead: "Official partner for Texas Instruments, XLSTAT, NVivo, SmartPLS, EViews"
  CTA Primary: "Explore Products" → /products/
  CTA Secondary: "Talk to an Expert" → /contact-us/
  Right side: animated product image (TI calculator + software UI)

Slide 2:
  Background: white, blue accent left border
  Headline: "Software for Every Research Need"
  CTA: "Request Free Trial"

Slide 3:
  Background: #F8FAFC
  Headline: "Professional Development & Training"
  CTA: "Browse Workshops"

/* ─── SECTION 3: CLIENT LOGO MARQUEE ─────────────── */
Background: #fff
Label: "Trusted by 500+ Institutions" (small, centered above)
Implementation: CSS infinite scroll marquee (see Section 19)
Logos: grayscale(100%) by default, filter: none on hover
Speed: 40s infinite loop
Gap between logos: 48px
Height: 80px (logo strip)
Two rows: Row 1 = university/institution logos
           Row 2 = technology partner logos

/* ─── SECTION 4: 4-PILLAR FEATURES ───────────────── */
Background: #F8FAFC
Section Label: "What We Offer" (eyebrow text, orange)
Section H2: "Everything You Need for Analytical Excellence"
Tab Layout:
  Tab 1: "Calculators" — icon + 3 sub-products + screenshot + CTA
  Tab 2: "Analytics Software" — icon + 5 software brands + screenshot + CTA
  Tab 3: "STEM Products" — icon + 3 featured products + screenshot + CTA
  Tab 4: "Services" — icon + 4 service types + team image + CTA
Tab Design: horizontal pills on desktop, accordion on mobile
Active tab: blue background, white text
Inactive: border only, grey text
Screenshot mockup: device frame image, 600×800 max

/* ─── SECTION 5: IMPACT STATS BAR ────────────────── */
Background: #0D1B2A (dark navy)
Color scheme: white text, orange accent numbers
Stats (4 items in a row):
  "500+" — Institutions Served
  "15+" — Years of Excellence
  "6" — Countries
  "5" — Software Brands
Number font: DM Mono 500, 64px, color: #F0842C
Label font: DM Sans 400, 14px, color: rgba(255,255,255,0.6)
Animation: CountUp on scroll-into-view (Elementor Counter widget)
Dividers: 1px vertical rgba(255,255,255,0.1) between items

/* ─── SECTION 6: SEGMENT CARDS ───────────────────── */
Background: #EFF6FF
Section H2: "Who We Serve"
Cards: 4 in a row (desktop), 2×2 (tablet), 1-col (mobile)
Card 1: "Universities & Research Institutes"
  - Products used: NVivo, XLSTAT, SmartPLS, EViews
  - Benefit stat: "Used by 200+ research departments"
Card 2: "K-12 Schools & IB Programmes"
  - Products used: TI Graphing Calculators, TI Innovator
  - Benefit stat: "Approved for IB, SAT, ACT exams"
Card 3: "Corporate Analytics Teams"
  - Products used: XLSTAT, SmartPLS, EViews
  - Benefit stat: "Serving Fortune 500 teams in India"
Card 4: "Professional Training & Coaching"
  - Products used: All software, Training Services
  - Benefit stat: "2000+ professionals trained"
Card hover: lift effect, blue border-left accent

/* ─── SECTION 7: PARTNER LOGOS ───────────────────── */
Background: #fff
Label: "Our Technology Partners"
Partners: Texas Instruments, NVivo (Lumivero), SmartPLS,
          XLSTAT (Addinsoft), EViews (IHS Markit), Citavi (Swiss Academic)
Layout: 6 logos in a single row, centered, 200px wide each
Style: full color always (partner logos, not client logos)
Add: "Authorized Distributor" badge under TI logo

/* ─── SECTION 8: TESTIMONIALS ────────────────────── */
Background: #F8FAFC
Section H2: "Voices of Our Clients"
Widget: Elementor Pro Testimonial Carousel
Each card contains:
  - Quote text (DM Sans 16px italic, max 3 lines)
  - Name + Title + Institution
  - Photo (circular, 64px)
  - YouTube thumbnail with play button (links to YouTube)
Autoplay: 5s, pause on hover
Arrows: yes (left/right), dots: yes

/* ─── SECTION 9: PRESS / RECOGNITION ─────────────── */
Background: #fff
Label: "As Seen In / Recognized By"
Logos: education publications, awards, certifications
Layout: centered row, grayscale, hover = color

/* ─── SECTION 10: BLOG POSTS ─────────────────────── */
Background: #F8FAFC
Section H2: "Stay Informed"
Widget: Elementor Pro Posts (3 columns)
Show per post: Featured image | Category badge | Title | Excerpt | Read time | Author avatar | Date
CTA: "View All Articles →" below grid

/* ─── SECTION 11: NEWSLETTER STRIP ───────────────── */
Background: linear-gradient(135deg, #1A3E8C, #0D1B2A)
Text: "Get product updates, webinar invites & training schedules"
Form: Email input + "Subscribe" button (orange)
Width: 500px centered
Trust note: "No spam. Unsubscribe anytime."

/* ─── SECTION 12: FOOTER ─────────────────────────── */
Background: #0D1B2A
4-column layout:
  Col 1: Logo + tagline + social icons
  Col 2: Company (About, Career, Blog, Contact)
  Col 3: Products (Calculators, Software, STEM, Services)
  Col 4: Contact info + map link + hours
Bottom bar: Copyright | Privacy Policy | Terms | GST number
Footer top border: 1px solid rgba(255,255,255,0.08)

/* Step 1: Astra Pro → Mega Menu */
WordPress Admin → Appearance → Menus
Edit "Primary Navigation"
Hover over "Products" menu item → click "Mega Menu"
Enable: ✅ Enable Mega Menu
Layout: Full Width

/* Step 2: Create Elementor Template for mega menu content */
Elementor → Templates → Add New → Section
Name: "Mega Menu — Products"
Build inside this template:
  Row: 4 columns
  Col 1: CALCULATORS (label) + 3 items with icon+text
  Col 2: SOFTWARE (label) + 5 items with icon+text
  Col 3: STEM (label) + 4 items with icon+text
  Col 4: Featured promo card (latest product / offer)

/* Step 3: Assign template to mega menu */
In Astra Mega Menu settings → select your Elementor template

/* Step 4: Style the mega menu dropdown */
/* Add to child theme custom.css */

.ast-mega-menu-enabled .sub-menu {
  background: #ffffff;
  border-top: 3px solid var(--na-orange);  /* Orange top accent like Shiprocket */
  border-radius: 0 0 12px 12px;
  box-shadow: 0 20px 60px rgba(13,27,42,0.12);
  padding: 24px 0;
}

.mega-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.15s;
  text-decoration: none;
}
.mega-menu-item:hover { background: var(--na-bg); }

.mega-menu-icon {
  width: 40px; height: 40px;
  background: var(--na-blue-light);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mega-menu-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--na-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--na-border);
  margin-bottom: 8px;
}

.mega-menu-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--na-navy);
  display: block;
}

.mega-menu-item-desc {
  font-size: 12px;
  color: var(--na-muted);
  margin-top: 2px;
}

/* ─── HERO ───────────────────────────────────────── */
Layout: 60/40 split (text left, screenshot right)
Left:
  Brand logo (software logo, 140px wide)
  H1: "NVivo — Qualitative Data Analysis Software"
  Subhead: "Official Authorized Distributor for India, Nepal, Sri Lanka"
  Feature pills: ["Windows & Mac", "Academic License", "Free Trial Available"]
  CTA Primary: "Request Free Trial" (orange, triggers popup)
  CTA Secondary: "Download Brochure" (outline)
Right:
  Software UI screenshot (device frame, drop shadow)
  Small trust badge: "Authorized Reseller Since 2014"
Background: white or blue tint (#EFF6FF)

/* ─── FEATURE GRID ───────────────────────────────── */
Section H2: "What NVivo Can Do For Your Research"
6-icon grid (3×2):
  ✓ Qualitative Data Coding
  ✓ Mixed Methods Research
  ✓ Interview & Survey Analysis
  ✓ Social Media Analysis
  ✓ Literature Reviews
  ✓ Team Collaboration
Each: 56px icon + H4 + 2 lines description

/* ─── USE CASE TABS (Shiprocket pattern) ─────────── */
Label: "Who Uses NVivo?"
Tabs: Academic Researchers | PhD Students | Corporate HR | Government Policy
Each tab:
  Left: description + benefit list
  Right: screenshot or user type illustration
  Bottom: "Products used" tag chips

/* ─── PRICING TABLE ──────────────────────────────── */
3 tiers: Student | Academic | Enterprise
Each tier:
  Name + price (or "Contact for pricing" for Enterprise)
  Feature checklist (what's included/excluded)
  CTA button
Highlight middle card (Academic) with blue border + "Most Popular" badge

/* ─── INLINE LEAD FORM ───────────────────────────── */
Background: #0D1B2A (dark section)
H2: "Get NVivo for Your Institution"
Left: WPForms form (Name, Email, Phone, Industry, Experience, Interest)
Right: What happens next (3-step process) + contact details
This mirrors Shiprocket's "EViews Form" modal but as an inline section

/* ─── CASE STUDY CARDS ───────────────────────────── */
3 cards: University logo + brief outcome quote + "Read Case Study →"

/* ─── FAQ SECTION ────────────────────────────────── */
8-10 questions specific to the software
Use Elementor Accordion widget
FAQPage schema applied via Rank Math custom schema field

/* Partner / client logos — grey by default, color on hover */
.na-partner-logo img {
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}
.na-partner-logo:hover img {
  filter: grayscale(0%) opacity(1);
}

/* Auto-scrolling client logo row */
.na-marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.na-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  animation: marquee-scroll 40s linear infinite;
}

.na-marquee-track:hover { animation-play-state: paused; }

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Duplicate the logos in HTML so it loops seamlessly */
/* .na-marquee-track contains logos × 2 (original + clone) */

/* Transparent on load → white on scroll */
.ast-header-wrap.ast-header-scrolled {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(13,27,42,0.08);
  transition: all 0.3s ease;
}

/* Homepage hero — transparent header overlay */
.home .ast-header-wrap {
  background: transparent !important;
  transition: background 0.3s ease;
}
.home .ast-header-wrap .site-title a,
.home .ast-header-wrap .main-header-menu > li > a {
  color: #ffffff !important;
}
.home .ast-header-wrap.ast-header-scrolled .main-header-menu > li > a {
  color: var(--na-navy) !important;
}

/* Applied to all product cards, feature cards, service cards */
.na-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.na-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* WooCommerce product cards */
.woocommerce ul.products li.product {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: var(--radius-lg);
  border: 1px solid var(--na-border);
  padding: 16px;
  background: #fff;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--na-blue);
}

/* Show exam approval badges on product cards */
.na-exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Mono', monospace;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  margin: 2px;
}
.na-exam-badge.ib    { border-color: #1A3E8C; color: #1A3E8C; background: #EFF6FF; }
.na-exam-badge.sat   { border-color: #16A34A; color: #16A34A; background: #F0FDF4; }
.na-exam-badge.cbse  { border-color: #D97706; color: #D97706; background: #FFFBEB; }
.na-exam-badge.ap    { border-color: #7C3AED; color: #7C3AED; background: #F5F3FF; }
.na-exam-badge.act   { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }

/**
 * Numerical Analytics — Custom JS
 * All vanilla JS — no external dependencies beyond jQuery (already loaded)
 */

document.addEventListener('DOMContentLoaded', function() {

  /* ─ 1. STICKY HEADER ─────────────────────────────── */
  const header = document.querySelector('.ast-header-wrap');
  let lastScroll = 0;

  window.addEventListener('scroll', function() {
    const currentScroll = window.scrollY;
    if (currentScroll > 80) {
      header?.classList.add('ast-header-scrolled');
    } else {
      header?.classList.remove('ast-header-scrolled');
    }
    lastScroll = currentScroll;
  });

  /* ─ 2. SCROLL-TRIGGERED FADE IN ──────────────────── */
  /* Add class="na-fade-up" to any Elementor section/widget */
  const fadeElements = document.querySelectorAll('.na-fade-up');
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  fadeElements.forEach(function(el) {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(el);
  });

  /* ─ 3. STAT COUNTER ANIMATION ────────────────────── */
  /* Applied to elements with data-count="500" data-suffix="+" */
  function animateCounter(el, target, suffix, duration) {
    let start = 0;
    const step = target / (duration / 16);
    const timer = setInterval(function() {
      start = Math.min(start + step, target);
      el.textContent = Math.floor(start) + (suffix || '');
      if (start >= target) clearInterval(timer);
    }, 16);
  }

  const counterObs = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting && !entry.target.dataset.counted) {
        entry.target.dataset.counted = 'true';
        animateCounter(
          entry.target,
          parseInt(entry.target.dataset.count),
          entry.target.dataset.suffix,
          2000
        );
      }
    });
  }, { threshold: 0.5 });

  document.querySelectorAll('[data-count]').forEach(el => counterObs.observe(el));

  /* ─ 4. STICKY ADD-TO-CART BAR ────────────────────── */
  const stickyCart = document.querySelector('.na-sticky-cart');
  if (stickyCart) {
    const addToCartBtn = document.querySelector('.single_add_to_cart_button');
    const triggerObs = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (!entry.isIntersecting) {
          stickyCart.classList.add('visible');
        } else {
          stickyCart.classList.remove('visible');
        }
      });
    });
    if (addToCartBtn) triggerObs.observe(addToCartBtn);
  }

  /* ─ 5. ANNOUNCEMENT BAR DISMISS ──────────────────── */
  const dismissBtn = document.querySelector('.na-announcement-close');
  const annBar = document.querySelector('.na-announcement-bar');
  if (dismissBtn && annBar) {
    if (localStorage.getItem('na-ann-dismissed')) {
      annBar.style.display = 'none';
    }
    dismissBtn.addEventListener('click', function() {
      annBar.style.display = 'none';
      localStorage.setItem('na-ann-dismissed', '1');
    });
  }

});  // end DOMContentLoaded

/* Cloudflare → SSL/TLS */
Mode: Full (Strict)
Always Use HTTPS: ON
HSTS: Enable (max-age 12 months)

/* Cloudflare → Speed */
Auto Minify: CSS ✅ | JS ✅ | HTML ✅
Brotli Compression: ON
Rocket Loader: OFF  ← Breaks Elementor JS — keep this OFF

/* Cloudflare → Caching */
Caching Level: Standard
Browser Cache TTL: 4 hours
Edge Cache TTL: 1 day

/* Cloudflare → Page Rules */
Rule 1: numerical-analytics.com/wp-admin/*
  Cache Level: Bypass

Rule 2: numerical-analytics.com/wp-login.php
  Cache Level: Bypass

Rule 3: numerical-analytics.com/checkout/*
  Cache Level: Bypass

Rule 4: numerical-analytics.com/*
  Cache Level: Cache Everything
  Edge Cache TTL: 8 hours

@media (max-width: 768px) {

  /* Hero — reduce to 65vh, stack vertically */
  .elementor-widget-slides .elementor-slides {
    min-height: 65vh !important;
  }
  .hero-content { text-align: center; padding: 0 20px; }
  .hero-cta-group { flex-direction: column; gap: 12px; }
  .hero-cta-group .elementor-button { width: 100%; text-align: center; }

  /* Stats bar — 2×2 grid on mobile */
  .na-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
  .na-stats-row .na-stat-item { padding: 24px 16px; }
  .na-stat-number { font-size: 44px !important; }

  /* Feature tabs → accordion */
  .elementor-widget-tabs .elementor-tab-title { display: block; }

  /* Product grid — 2 columns on tablet, 1 on mobile */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }

  /* Nav — full-screen slide-in on mobile */
  .ast-mobile-menu-trigger { padding: 10px; }

  /* Product image — full width */
  .woocommerce div.product div.images { width: 100%; float: none; }
  .woocommerce div.product div.summary { width: 100%; float: none; margin-top: 24px; }

  /* Hide announcement bar text on tiny screens */
  .na-announcement-bar .ann-text { display: none; }
}