/**
 * SPLWorks Agency — Design System
 * Child Theme: spl-child
 *
 * Primary: #1B2D6B (Navy Blue — logo)
 * Accent:  #D4A017 (Gold — phong thuỷ Cung Khôn)
 * Mode:    Dark (Navy-based, NOT pure black)
 *
 * @package SPLWorks
 */

/*
 * Theme Name: SPLWorks
 * Author: Linh Nguyen — SPLWorks
 * Author URI: https://splworks.com
 * Description: SPLWorks Agency — Thiết kế Website, SEO, Ads, Theme Marketplace.
 * Requires PHP: 8.1
 * Version: 1.0.0
 * Template: spl
 * Text Domain: splworks
 * License: MIT
 * Domain Path: /languages
 *
 * WordPress Theme, Copyright 2026 SPLWorks.
 */

:root {
    /* Brand */
    --color-primary:       #1B2D6B;
    --color-primary-dark:  #142252;
    --color-primary-light: #2A44A0;
    --color-accent:        #D4A017;
    --color-accent-dark:   #A67C10;
    --color-accent-light:  #EFC132;

    /* Dark UI surfaces — Navy-tinted */
    --color-dark:          #0F1A3A;
    --color-dark-2:        #162044;
    --color-dark-3:        #1D2A55;
    --color-border:        #2A3B6E;

    /* Text */
    --color-text:          #E8ECF8;
    --color-text-muted:    #A0B0D0;
    --color-text-subtle:   #7888AA;
    --color-heading:       #FFFFFF;

    /* Component aliases (mapped from above) */
    --bg-body:    var(--color-dark);
    --bg-surface: var(--color-dark-2);
    --bg-card:    var(--color-dark-3);
    --cl-text:    var(--color-text);
    --cl-muted:   var(--color-text-muted);
    --cl-heading: var(--color-heading);
    --bd-color:   var(--color-border);

    /* Semantic */
    --color-success:  #22C55E;
    --color-warning:  #F59E0B;
    --color-error:    #EF4444;

    /* Typography */
    --font-header:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(16px, 5vw, 48px);
    --section-py:    clamp(60px, 8vw, 100px);

    /* Radius */
    --radius-sm: 8px; --radius-md: 12px;
    --radius-lg: 16px; --radius-xl: 24px;

    /* Shadows */
    --shadow-card:  0 4px 24px rgba(15,26,58,0.5);
    --shadow-glow:  0 0 24px rgba(212,160,23,0.15);

    /* Transitions */
    --transition:      all 0.3s ease;
    --transition-fast: all 0.18s ease;
}

/* ── Light Mode: remap all tokens ──────────────────── */
body.splw-light {
    color-scheme: light;

    --color-background:  #F7F9FC;
    --color-surface:     #FFFFFF;
    --color-surface-2:   #F2F6FB;
    --color-dark:        #F7F9FC;
    --color-dark-2:      #EEF3FA;
    --color-dark-3:      #E5EBF5;
    --color-border:      #D6DFEE;

    --color-text:        #1D2C58;
    --color-text-muted:  #445476;
    --color-text-subtle: #72809A;
    --color-heading:     #0A1535;

    --color-accent:      #A67C10;
    --color-accent-dark: #7A5B0C;
    --color-accent-light:#C89010;

    --bg-body:    #F7F9FC;
    --bg-surface: #F2F6FB;
    --bg-card:    #FFFFFF;
    --cl-text:    #1D2C58;
    --cl-muted:   #445476;
    --cl-heading: #0A1535;
    --bd-color:   #D6DFEE;

    --shadow-card: 0 4px 24px rgba(27,45,107,0.08);
    --shadow-glow: 0 0 24px rgba(166,124,16,0.12);

    background-color: #F7F9FC;
    color: #1D2C58;
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-dark);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; transition: color 0.2s; }

/* ============================================================
   3. Container
   ============================================================ */
.splw-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.splw-container--narrow  { max-width: 800px; }
.splw-container--wide    { max-width: 1400px; }

/* ============================================================
   4. Section Wrappers
   ============================================================ */
.splw-section {
    padding-block: var(--section-py);
}
.splw-section--sm { padding-block: clamp(40px, 5vw, 64px); }
.splw-section--dark   { background: var(--color-dark); }
.splw-section--dark-2 { background: var(--color-dark-2); }
.splw-section--navy   { background: var(--color-primary); }

/* ============================================================
   5. Section Header
   ============================================================ */
.splw-section-header        { margin-bottom: 52px; }
.splw-section-header--center{ text-align: center; }

.splw-section-label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px;
    background: rgba(212,160,23,0.1);
    border: 1px solid rgba(212,160,23,0.2);
    border-radius: 9999px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.splw-section-title {
    font-family: var(--font-header);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-heading);
    margin: 0 0 16px;
}
.splw-section-title span {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light, #EFC132));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.splw-section-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.7;
    margin: 0;
}
.splw-section-header--center .splw-section-subtitle { margin-inline: auto; }

/* ── Light mode: Tailwind semantic color token overrides ── */
/* Tailwind v4 uses @theme CSS vars — override them on body.splw-light */
body.splw-light {
    /* Tailwind color tokens → remap */
    --color-background:  #F4F7FF;
    --color-surface:     #EAF0FF;
    --color-surface-2:   #DDE6FF;
    --color-border:      #BCC8E8;
    --color-body:        #1E2D5E;
    --color-muted:       #4A5A8A;
    --color-subtle:      #7888AA;
    --color-heading:     #0A1535;
    /* accent stays readable on light */
    --color-accent:      #A67C10;
    --color-accent-light:#C89010;
    --color-accent-dark: #7A5B0C;
}

/* Tailwind utility classes */
body.splw-light .bg-background  { background-color: #F7F9FC !important; }
body.splw-light .bg-surface     { background-color: #F2F6FB !important; }
body.splw-light .bg-surface-2,
body.splw-light [class*="bg-surface-2"] { background-color: #E9EEF7 !important; }
body.splw-light .border-border  { border-color: #D6DFEE !important; }
body.splw-light .text-heading   { color: #0A1535 !important; }
body.splw-light .text-muted     { color: #445476 !important; }
body.splw-light .text-subtle    { color: #72809A !important; }
body.splw-light .text-accent    { color: #A67C10 !important; }
body.splw-light .text-accent-light { color: #C89010 !important; }

/* bg-gradient-to-br from-surface-2 to-surface */
body.splw-light [class*="from-surface"] { --tw-gradient-from: #DDE6FF !important; }
body.splw-light [class*="to-surface"]   { --tw-gradient-to: #EAF0FF !important; }
body.splw-light [class*="from-primary/15"] { --tw-gradient-from: rgba(27,45,107,0.08) !important; }
body.splw-light [class*="from-accent/15"]  { --tw-gradient-from: rgba(166,124,16,0.08) !important; }

/* Text utilities for body/list text */
body.splw-light .text-text { color: #1D2C58 !important; }
body.splw-light [class*="text-text/80"] { color: rgba(29,44,88,0.8) !important; }
body.splw-light [class*="text-muted"] { color: #445476 !important; }

/* Pricing featured card */
body.splw-light [class*="from-surface-2"][class*="to-[#162033]"] {
    background: linear-gradient(135deg, #DDE6FF, #EAF0FF) !important;
}
body.splw-light [class*="text-background"] { color: #0A1535 !important; }

/* ── Light Mode: Component-level contrast fixes ────────── */

/* Footer — darker text for readability */
body.splw-light .splw-footer {
    background: #E4EAF8 !important;
    color: #2D3A5C;
}
body.splw-light .splw-footer a {
    color: #3A4B78 !important;
}
body.splw-light .splw-footer a:hover {
    color: #A67C10 !important;
}
body.splw-light .splw-footer h3,
body.splw-light .splw-footer h4 {
    color: #0A1535 !important;
}
body.splw-light .splw-footer p,
body.splw-light .splw-footer li {
    color: #3A4B78 !important;
}
body.splw-light .splw-footer .splw-footer-contact-link {
    color: #3A4B78 !important;
}
body.splw-light .splw-footer .splw-footer-contact-link:hover {
    color: #A67C10 !important;
}
/* Footer bottom bar */
body.splw-light .splw-footer [class*="border-t"] {
    border-color: #BCC8E8 !important;
}
body.splw-light .splw-footer [class*="text-subtle"],
body.splw-light .splw-footer [class*="text-muted"] {
    color: #4A5A8A !important;
}

/* Stats counter — label text too light */
body.splw-light .splw-stat-card p {
    color: #3A4B78 !important;
}
body.splw-light .splw-stat-card .counter {
    background: linear-gradient(135deg, #7A5B0C, #A67C10) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.splw-light .splw-stat-card [class*="text-accent"] {
    color: #A67C10 !important;
}
body.splw-light .splw-stat-card:hover {
    border-color: rgba(166,124,16,0.3) !important;
    box-shadow: 0 8px 32px rgba(27,45,107,0.12);
}

/* Process steps — description text */
body.splw-light .splw-section--dark-2 [class*="text-muted"] {
    color: #3A4B78 !important;
}
body.splw-light .splw-section--dark-2 [class*="text-heading"] {
    color: #0A1535 !important;
}
body.splw-light .splw-section--dark-2 [class*="text-accent"] {
    color: #A67C10 !important;
}
/* Process number circle */
body.splw-light [class*="from-primary"][class*="to-primary-light"] {
    background: linear-gradient(135deg, #DDE6FF, #EAF0FF) !important;
}
body.splw-light [class*="border-accent/30"] {
    border-color: rgba(166,124,16,0.3) !important;
}
/* Process connector line */
body.splw-light .splw-process-connector {
    background: linear-gradient(to right, rgba(166,124,16,0.3), rgba(166,124,16,0.08)) !important;
}

/* Service cards — description, title, tag text */
body.splw-light .splw-svc-card {
    background: #fff !important;
    border-color: #C5D0EE !important;
}
body.splw-light .splw-svc-card:hover {
    border-color: rgba(166,124,16,0.35) !important;
    box-shadow: 0 12px 36px rgba(27,45,107,0.1);
}
body.splw-light .splw-svc-card h3 {
    color: #0A1535 !important;
}
body.splw-light .splw-svc-card p {
    color: #3A4B78 !important;
}

/* Testimonials — role/position text nearly invisible */
body.splw-light .splw-testi [class*="text-subtle"],
body.splw-light .splw-testi [class*="text-muted"] {
    color: #4A5A8A !important;
}
body.splw-light .splw-testi blockquote,
body.splw-light .splw-testi [class*="text-text"] {
    color: #1E2D5E !important;
}

/* Blog cards */
body.splw-light .splw-blog-card__date { color: #4A5A8A !important; }
body.splw-light .splw-blog-card__excerpt { color: #3A4B78 !important; }
body.splw-light .splw-blog-card__link { color: #A67C10 !important; }

/* Blog hero */
body.splw-light .splw-blog-hero {
    background: linear-gradient(160deg, #EAF0FF, #F4F7FF) !important;
    border-color: #BCC8E8 !important;
}
body.splw-light .splw-blog-hero h1 { color: #0A1535 !important; }
body.splw-light .splw-blog-hero p { color: #4A5A8A !important; }

/* FAQ Accordion */
body.splw-light .splw-faq [class*="text-muted"],
body.splw-light .splw-faq [class*="text-text"] {
    color: #1E2D5E !important;
}

/* Header scroll state in light mode */
body.splw-light #splw-header.is-scrolled {
    background: rgba(244,247,255,0.97) !important;
    box-shadow: 0 2px 16px rgba(27,45,107,0.1) !important;
}

/* Outline button in light mode */
body.splw-light .splw-btn--outline {
    color: #A67C10 !important;
    border-color: rgba(166,124,16,0.3) !important;
}
body.splw-light .splw-btn--outline:hover {
    background: rgba(166,124,16,0.08) !important;
    border-color: #A67C10 !important;
}

/* Badge light mode */
body.splw-light .splw-badge--primary {
    background: rgba(27,45,107,0.08) !important;
    color: #1B2D6B !important;
    border-color: rgba(27,45,107,0.2) !important;
}

/* ============================================================
   6. Buttons
   ============================================================ */
.splw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-header);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
}

/* Accent (Gold) */
.splw-btn--accent {
    background: linear-gradient(135deg, #D4A017, #EFC132);
    color: #0F1A3A;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(212,160,23,0.25);
}
.splw-btn--accent:hover {
    background: linear-gradient(135deg, #EFC132, #D4A017);
    box-shadow: 0 6px 24px rgba(212,160,23,0.4);
    transform: translateY(-2px);
    color: #0F1A3A;
}

/* Primary (Navy) */
.splw-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.splw-btn--primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    color: #fff;
}

/* Outline */
.splw-btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.splw-btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
}
body.splw-light .splw-btn--outline {
    background: rgba(255,255,255,0.82);
    color: var(--color-primary);
    border-color: #BCC8E8;
}
body.splw-light .splw-btn--outline:hover {
    background: #FFFFFF;
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

/* Ghost (Navy glass) */
.splw-btn--ghost {
    background: rgba(27,45,107,0.3);
    color: #fff;
    border-color: rgba(27,45,107,0.5);
    backdrop-filter: blur(8px);
}
.splw-btn--ghost:hover {
    background: rgba(27,45,107,0.5);
    border-color: rgba(42,68,160,0.6);
    transform: translateY(-2px);
    color: #fff;
}
.splw-btn:focus-visible,
.splw-filter-btn:focus-visible {
    outline: 3px solid rgba(212,160,23,0.28);
    outline-offset: 2px;
}

/* Sizes */
.splw-btn--sm  { padding: 7px 16px; font-size: 13px; }
.splw-btn--lg  { padding: 14px 30px; font-size: 16px; border-radius: var(--radius-lg); }
.splw-btn--xl  { padding: 16px 36px; font-size: 17px; border-radius: var(--radius-lg); }

/* ============================================================
   7. Badges
   ============================================================ */
.splw-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.splw-badge--primary {
    background: rgba(27,45,107,0.4);
    color: #93C5FD;
    border: 1px solid rgba(27,45,107,0.6);
}
.splw-badge--accent {
    background: rgba(212,160,23,0.12);
    color: #D4A017;
    border: 1px solid rgba(212,160,23,0.25);
}
.splw-badge--success {
    background: rgba(34,197,94,0.1);
    color: #22C55E;
    border: 1px solid rgba(34,197,94,0.2);
}

/* ============================================================
   8. Flexible Page wrapper
   ============================================================ */
.splw-flexible-page { overflow-x: hidden; }

/* ============================================================
   9. Scrollbar — Navy-tinted
   ============================================================ */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-dark); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ============================================================
   10. Selection
   ============================================================ */
::selection {
    background: rgba(212,160,23,0.25);
    color: #fff;
}

/* ============================================================
   11. Hide/Fix floating scroll-top icon (theme default)
   ============================================================ */
/* The theme scroll-top button — hide on hero, style globally */
[data-fx-scroll-top] {
    /* Let it sit at bottom-right, not floating mid-page */
    position: fixed !important;
    bottom: 32px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 900;
}

/* ============================================================
   12. Light mode — base overrides
   ============================================================ */
body.splw-light {
    color-scheme: light;
}
body.splw-light ::selection {
    background: rgba(27,45,107,0.2);
    color: #0A1535;
}
body.splw-light ::-webkit-scrollbar-track { background: #EAF0FF; }
body.splw-light ::-webkit-scrollbar-thumb { background: #7888AA; }
body.splw-light ::-webkit-scrollbar-thumb:hover { background: #A67C10; }

/* Sections that use Tailwind bg-background / bg-surface */
body.splw-light .bg-background { background: #F7F9FC !important; }
body.splw-light .bg-surface    { background: #F2F6FB !important; }
body.splw-light .border-border { border-color: #D6DFEE !important; }

/* Text utilities */
body.splw-light .text-heading  { color: #0A1535 !important; }
body.splw-light .text-muted    { color: #445476 !important; }
body.splw-light .text-subtle   { color: #72809A !important; }

/* Section label pill */
body.splw-light .splw-section-label {
    background: rgba(212,160,23,0.1) !important;
    border-color: rgba(212,160,23,0.3) !important;
    color: #A67C10 !important;
}

/* CTA band stays navy even in light mode */
body.splw-light .splw-section--accent {
    background: #1B2D6B !important;
}
body.splw-light .splw-section--accent * { color: #fff !important; }

/* ============================================================
   13. Light mode — Contact Form inputs
   ============================================================ */
body.splw-light #contact-form-main input,
body.splw-light #contact-form-main select,
body.splw-light #contact-form-main textarea {
    background-color: #FFFFFF !important;
    border-color:     #C5D0EE !important;
    color:            #1E2D5E !important;
}
body.splw-light #contact-form-main input::placeholder,
body.splw-light #contact-form-main textarea::placeholder {
    color: #7888AA !important;
}
body.splw-light #contact-form-main input:focus,
body.splw-light #contact-form-main select:focus,
body.splw-light #contact-form-main textarea:focus {
    border-color: #A67C10 !important;
    box-shadow: 0 0 0 3px rgba(166,124,16,0.12) !important;
}
/* Contact info cards */
body.splw-light .flex.items-center.gap-4.p-4 {
    background: #FFFFFF !important;
    border-color: #C5D0EE !important;
}
body.splw-light .flex.items-center.gap-4.p-4 p { color: #1E2D5E !important; }

/* ============================================================
   14. Light mode — Blog Preview cards
   ============================================================ */
body.splw-light article.group.flex.flex-col.rounded-2xl {
    background: #FFFFFF !important;
    border-color: #C5D0EE !important;
}
body.splw-light article.group.flex.flex-col.rounded-2xl h3 a {
    color: #0A1535 !important;
}
body.splw-light article.group.flex.flex-col.rounded-2xl p {
    color: #4A5A8A !important;
}
body.splw-light article.group.flex.flex-col.rounded-2xl time {
    color: #7888AA !important;
}

/* ============================================================
   15. Responsive — Global helpers
   ============================================================ */
/* Section header tighter on mobile */
@media (max-width: 639px) {
    .splw-section-header          { margin-bottom: 32px; }
    .splw-section-subtitle        { font-size: 15px; }
    .splw-section-header--center  { text-align: left; }
    .splw-section-header--center .splw-section-subtitle { max-width: 100%; }
}

/* Buttons full-width on very small screens */
@media (max-width: 479px) {
    .splw-btn { width: 100%; justify-content: center; }
    .splw-btn + .splw-btn { margin-top: 8px; }
}

/* ============================================================
   16. Animation Keyframes Library
   ============================================================ */

/* Scroll Reveal — base class (hidden until observed) */
.splw-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.splw-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal variants */
.splw-reveal--left  { transform: translateX(-40px); }
.splw-reveal--right { transform: translateX(40px); }
.splw-reveal--scale { transform: scale(0.92); }
.splw-reveal--left.is-visible,
.splw-reveal--right.is-visible,
.splw-reveal--scale.is-visible { transform: none; }

/* Stagger delays — for child items */
.splw-reveal[data-delay="1"] { transition-delay: 0.08s; }
.splw-reveal[data-delay="2"] { transition-delay: 0.16s; }
.splw-reveal[data-delay="3"] { transition-delay: 0.24s; }
.splw-reveal[data-delay="4"] { transition-delay: 0.32s; }
.splw-reveal[data-delay="5"] { transition-delay: 0.40s; }
.splw-reveal[data-delay="6"] { transition-delay: 0.48s; }

/* Icon bounce on hover */
@keyframes splw-icon-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Glow breathing — for CTA buttons & featured cards */
@keyframes splw-glow-breathe {
    0%, 100% { box-shadow: 0 4px 16px rgba(212,160,23,0.25); }
    50%      { box-shadow: 0 6px 28px rgba(212,160,23,0.45); }
}

/* Floating particles */
@keyframes splw-particle-float {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
    25%      { transform: translateY(-20px) translateX(10px); opacity: 0.7; }
    50%      { transform: translateY(-35px) translateX(-5px); opacity: 0.5; }
    75%      { transform: translateY(-15px) translateX(15px); opacity: 0.6; }
}

/* Stat number pop */
@keyframes splw-number-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Line draw (for process connectors) */
@keyframes splw-line-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Fade in page load */
@keyframes splw-page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.splw-flexible-page {
    animation: splw-page-fade-in 0.5s ease;
}

/* Pulse ring (for trust badges & avatars) */
@keyframes splw-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(212,160,23,0.3); }
    70%  { box-shadow: 0 0 0 8px rgba(212,160,23,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}

/* Orb float — smoother version */
@keyframes splw-orb-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-24px) scale(1.04); }
}

/* Scroll indicator line */
@keyframes splw-scroll-line {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50%      { opacity: 0.4; transform: scaleY(0.6); }
}

/* Pulse (for live dot) */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.5); }
}

/* Shimmer loading placeholder */
@keyframes splw-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.splw-shimmer {
    background: linear-gradient(90deg,
        var(--color-dark-2) 25%,
        var(--color-dark-3) 50%,
        var(--color-dark-2) 75%);
    background-size: 200% 100%;
    animation: splw-shimmer 1.5s ease infinite;
}

/* Gradient text animation (hover effect) */
@keyframes splw-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   16b. Header — Scroll Shrink Enhancement
   ============================================================ */
#splw-header {
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}
#splw-header nav {
    transition: height 0.3s ease;
}
#splw-header.is-scrolled nav {
    height: 56px;
}

/* Nav active indicator bar */
.splw-nav-link {
    position: relative;
}
.splw-nav-link.is-active::after,
.splw-nav-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10px; right: 10px;
    height: 2px;
    background: linear-gradient(90deg, #D4A017, #EFC132);
    border-radius: 1px;
}
body.splw-light .splw-nav-link.is-active::after,
body.splw-light .splw-nav-btn.is-active::after {
    background: linear-gradient(90deg, #A67C10, #C89010);
}

/* ============================================================
   16c. Enhanced Micro-interactions
   ============================================================ */

/* Service cards — icon animation on hover */
.splw-svc-card:hover .splw-svc-icon {
    animation: splw-icon-pulse 0.5s ease;
    box-shadow: 0 0 20px rgba(212,160,23,0.2);
}

/* CTA Band button — breathing glow */
.splw-cta-band-gradient .splw-btn--accent {
    animation: splw-glow-breathe 3s ease-in-out infinite;
}

/* Stat card — completed count pop */
.splw-stat-card.counted .counter {
    animation: splw-number-pop 0.4s ease;
}

/* Process step connector — draw animation */
.splw-process-connector {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.splw-process-connector.is-visible {
    transform: scaleX(1);
}

/* Footer link hover — subtle slide right */
.splw-footer-contact-link {
    transition: transform 0.2s ease, color 0.2s ease;
}
.splw-footer-contact-link:hover {
    transform: translateX(3px);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .splw-reveal,
    .splw-reveal--left,
    .splw-reveal--right,
    .splw-reveal--scale {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .splw-flexible-page { animation: none; }
    .splw-cta-band-gradient .splw-btn--accent { animation: none; }
    .splw-hero-orb { animation: none !important; }
}

/* ============================================================
   17. WooCommerce Marketplace base polish
   ============================================================ */
.woocommerce .products {
    display: grid;
    gap: 24px;
}
.woocommerce .product {
    background: var(--bg-card);
    border: 1px solid var(--bd-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
body.splw-light .woocommerce .product {
    background: #fff;
    box-shadow: 0 12px 30px rgba(27,45,107,0.08);
}
.woocommerce .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
    color: var(--cl-heading);
    font-family: var(--font-header);
}
body.splw-light .woocommerce a.button,
body.splw-light .woocommerce button.button,
body.splw-light .woocommerce input.button,
body.splw-light .woocommerce .button {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
body.splw-light .woocommerce a.button:hover,
body.splw-light .woocommerce button.button:hover,
body.splw-light .woocommerce input.button:hover,
body.splw-light .woocommerce .button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
}

/* Pricing table horizontal scroll on mobile */
@media (max-width: 767px) {
    .splw-seo-plans {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }
}

/* Testimonials — ensure no overflow on tiny screens */
@media (max-width: 479px) {
    .splw-ts-controls { gap: 8px; }
    .splw-ts-btn      { width: 36px; height: 36px; }
}

/* Featured themes — card min-width safety */
@media (max-width: 359px) {
    .splw-ft-slide { flex: 0 0 100% !important; }
}

/* ============================================================
   18. Auto Table of Contents — Sidebar + Mobile
   ============================================================ */

/* ── Header ────────────────────────────── */
.splw-toc__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(42, 59, 110, 0.35);
    user-select: none;
}
body.splw-light .splw-toc__header {
    border-bottom-color: rgba(197, 208, 238, 0.5);
}
.splw-toc__icon {
    display: flex;
    align-items: center;
    color: var(--color-accent, #D4A017);
    opacity: 0.9;
}
.splw-toc__title {
    font-family: var(--font-header);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted, #A0B0D0);
    flex: 1;
}
body.splw-light .splw-toc__title { color: #4A5A8A; }

/* ── Toggle button (mobile only) ─────────── */
.splw-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(42, 59, 110, 0.3);
    border-radius: 5px;
    color: var(--color-text-muted, #A0B0D0);
    cursor: pointer;
    transition: all 0.2s ease;
}
.splw-toc__toggle:hover {
    background: rgba(212, 160, 23, 0.15);
    color: var(--color-accent, #D4A017);
}
.splw-toc__toggle svg { transition: transform 0.25s ease; }
.splw-toc--open svg { transform: rotate(180deg); }

/* ── Nav / List ────────────────────────── */
.splw-toc__nav { padding: 10px 14px 14px; }
.splw-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc-counter;
}
.splw-toc-sidebar ul,
.splw-toc-sidebar li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.splw-toc__list > li {
    counter-increment: toc-counter;
    position: relative;
}
.splw-toc__list > li > a::before {
    content: counter(toc-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
    background: rgba(42, 59, 110, 0.4);
    color: var(--color-text-muted, #A0B0D0);
    transition: all 0.2s ease;
}
body.splw-light .splw-toc__list > li > a::before {
    background: rgba(27, 45, 107, 0.08);
    color: #4A5A8A;
}

/* ── Links ─────────────────────────────── */
.splw-toc__list a {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-muted, #A0B0D0);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.35;
}
body.splw-light .splw-toc__list a { color: #4A5A8A; }
.splw-toc__list a:hover {
    color: var(--color-accent, #D4A017);
    background: rgba(212, 160, 23, 0.06);
}

/* ── Active state ──────────────────────── */
.splw-toc__list a.active {
    color: var(--color-accent, #D4A017);
    background: rgba(212, 160, 23, 0.1);
    font-weight: 600;
}
.splw-toc__list > li > a.active::before {
    background: var(--color-accent, #D4A017);
    color: #0F1A3A;
}
body.splw-light .splw-toc__list a.active {
    color: #A67C10;
    background: rgba(212, 160, 23, 0.1);
}
body.splw-light .splw-toc__list > li > a.active::before {
    background: #A67C10;
    color: #fff;
}

/* ── Sub-list (H3) ─────────────────────── */
.splw-toc__sub {
    margin: 2px 0 4px !important;
    padding: 0 0 0 28px !important;
}
.splw-toc__sub a {
    font-size: 11.5px;
    padding: 4px 8px;
}
.splw-toc__sub a::before {
    content: "–";
    margin-right: 6px;
    color: rgba(160, 176, 208, 0.4);
    font-weight: 400;
}