/*
Theme Name: Caijing 188
Theme URI: https://www.caijing188.com
Description: Your Offshore CFO & Sourcing Liaison in China — Wall Street FinTech style WordPress theme for RMB payment agency, supply chain cost auditing, and supplier price negotiation.
Version: 1.0.0
Author: WorkBuddy
Tags: custom, fintech, b2b, responsive-layout, accessibility-ready
Text Domain: caijing188
*/

/* ═══════════════════════════════════════════════════════════
   CAIJING 188 — DESIGN TOKENS
   Wall Street FinTech: Dark Green / Sand Ivory / Matte Gold
   ═══════════════════════════════════════════════════════════ */

:root{
    /* ── Primary: Wall Street Deep Ink Green ── */
    --color-green-dark:#0A3D2E;
    --color-green:#145A3E;
    --color-green-mid:#1B7A54;
    --color-green-light:#E8F5EE;

    /* ── Background ── */
    --color-bg:#FBF9F1;
    --color-bg-alt:#F5F7F8;
    --color-white:#FFFFFF;

    /* ── Accent: Matte Financial Gold ── */
    --color-gold:#D6AD60;
    --color-gold-light:#F5E6C8;
    --color-gold-dark:#B8892E;

    /* ── Text ── */
    --color-text:#1A1A1A;
    --color-text-md:#4B5563;
    --color-text-lt:#9CA3AF;

    /* ── Borders & Shadows ── */
    --color-border:rgba(10,61,46,0.1);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:0 8px 30px rgba(0,0,0,0.1);
    --shadow-green:0 4px 20px rgba(10,61,46,0.15);

    /* ── Radius ── */
    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:10px;
    --radius-xl:16px;

    /* ── Transitions ── */
    --ease: cubic-bezier(0.4,0,0.2,1);

    /* ── Typography ── */
    --font-heading: 'Manrope','Inter',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'JetBrains Mono','Fira Code',monospace;
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.7;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:700;
    line-height:1.25;
    color:var(--color-green-dark);
}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-0.5px}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.5rem)}
h4{font-size:clamp(1rem,2vw,1.2rem)}
p{margin-bottom:1.2rem;color:var(--color-text-md)}
ul,ol{margin-bottom:1.2rem;padding-left:1.5rem}
li{margin-bottom:0.4rem;color:var(--color-text-md)}
a{color:var(--color-green);text-decoration:none;transition:color 0.25s var(--ease)}
a:hover{color:var(--color-green-dark)}
img{max-width:100%;height:auto;display:block}
svg{display:inline-block!important;vertical-align:middle;flex-shrink:0}
strong,b{font-weight:700;color:var(--color-green-dark)}
code,pre{font-family:var(--font-mono);background:var(--color-green-light);padding:0.15rem 0.4rem;border-radius:var(--radius-sm);font-size:0.9em;color:var(--color-green-dark)}
pre{padding:1rem;border-radius:var(--radius-md);overflow-x:auto;margin-bottom:1.2rem}

/* ═══════════════════════════════════════════════════════════
   LAYOUT & CONTAINER
   ═══════════════════════════════════════════════════════════ */
.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 1.25rem;
}
.section{padding:5rem 0}
.section-dark{
    background:var(--color-green-dark);
    color:rgba(255,255,255,0.85);
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{
    color:var(--color-white);
}
.section-alt{background:var(--color-bg-alt)}

/* ═══════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ═══════════════════════════════════════════════════════════ */
#site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:var(--color-green-dark);
    border-bottom:1px solid rgba(214,173,96,0.2);
    transition:box-shadow 0.3s var(--ease);
}
#site-header.scrolled{
    box-shadow:0 2px 20px rgba(0,0,0,0.2);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
}
.site-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
.logo-icon{
    width:38px;height:38px;
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:1rem;color:var(--color-green-dark);
    font-family:var(--font-heading);
}
.logo-text{
    font-family:var(--font-heading);
    font-size:1.3rem;
    font-weight:700;
    color:var(--color-white);
    letter-spacing:0.5px;
}
.logo-accent{color:var(--color-gold)}
.logo-tagline{
    font-size:0.65rem;
    color:rgba(255,255,255,0.5);
    letter-spacing:1px;
    text-transform:uppercase;
    margin-top:-2px;
}

/* ── Desktop Nav ── */
.nav-wrap{display:flex;align-items:center;gap:0.25rem}
.nav-menu{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;padding:0;
    gap:0.1rem;
}
.nav-menu > li{position:relative}
.nav-menu > li > a{
    display:flex;
    align-items:center;
    gap:0.3rem;
    font-size:0.82rem;
    font-weight:600;
    color:rgba(255,255,255,0.8);
    padding:0.5rem 0.85rem;
    border-radius:var(--radius-sm);
    transition:all 0.2s var(--ease);
    white-space:nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a{
    color:var(--color-white);
    background:rgba(255,255,255,0.08);
}
.nav-menu > li > a svg{
    width:13px;height:13px;
    transition:transform 0.2s var(--ease);
}
.nav-menu > li:hover > a svg{transform:rotate(180deg)}

/* ── Dropdown ── */
.sub-menu{
    position:absolute;
    top:100%;left:0;
    min-width:220px;
    width:max-content;
    background:var(--color-green-dark);
    border:1px solid rgba(214,173,96,0.15);
    border-radius:var(--radius-md);
    padding:0.4rem 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:all 0.2s var(--ease);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
    z-index:10;
}
.sub-menu::before{
    content:'';
    position:absolute;
    top:-8px;left:1.2rem;
    width:16px;height:8px;
    background:var(--color-green-dark);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
    border-left:1px solid rgba(214,173,96,0.15);
    border-top:1px solid rgba(214,173,96,0.15);
}
.nav-menu > li:hover > .sub-menu{
    opacity:1;visibility:visible;transform:translateY(2px);
}
.sub-menu li{list-style:none;margin:0;padding:0}
.sub-menu a{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.5rem 1.2rem;
    font-size:0.8rem;
    color:rgba(255,255,255,0.7);
    transition:all 0.15s var(--ease);
    white-space:nowrap;
}
.sub-menu a:hover{
    color:var(--color-white);
    background:rgba(214,173,96,0.1);
}
.sub-menu a svg{width:16px;height:16px;color:var(--color-gold);flex-shrink:0}

/* ── Header CTA ── */
.header-cta{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 1.4rem;
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
    color:var(--color-green-dark)!important;
    font-size:0.82rem;
    font-weight:700;
    border-radius:var(--radius-md);
    margin-left:1rem;
    transition:all 0.2s var(--ease);
    text-decoration:none;
    letter-spacing:0.3px;
}
.header-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(214,173,96,0.3);
    color:var(--color-green-dark)!important;
}

/* ── Mobile Toggle ── */
.mobile-toggle{
    display:none;
    background:none;border:none;cursor:pointer;
    width:40px;height:40px;
    flex-direction:column;justify-content:center;align-items:center;gap:5px;
    padding:0;
}
.mobile-toggle span{
    display:block;width:22px;height:2px;
    background:var(--color-white);
    border-radius:2px;
    transition:all 0.3s var(--ease);
}
.mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-toggle.active span:nth-child(2){opacity:0}
.mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Mobile Nav ── */
@media (max-width:1024px){
    .mobile-toggle{display:flex}
    .nav-wrap{
        position:fixed;
        top:72px;left:0;right:0;
        background:var(--color-green-dark);
        border-top:1px solid rgba(214,173,96,0.15);
        padding:1rem;
        flex-direction:column;
        align-items:stretch;
        max-height:calc(100vh - 72px);
        overflow-y:auto;
        transform:translateY(-100%);
        opacity:0;
        visibility:hidden;
        transition:all 0.3s var(--ease);
    }
    .nav-wrap.open{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }
    .nav-menu{flex-direction:column;gap:0;width:100%}
    .nav-menu > li{width:100%}
    .nav-menu > li > a{
        padding:0.7rem 1rem;
        border-radius:var(--radius-sm);
    }
    .sub-menu{
        position:static;
        opacity:1;visibility:visible;
        transform:none;
        box-shadow:none;
        border:none;
        border-left:2px solid rgba(214,173,96,0.3);
        border-radius:0;
        margin:0.25rem 0 0.5rem 1rem;
        padding:0;
        min-width:auto;
        width:auto;
        background:transparent;
    }
    .sub-menu::before{display:none}
    .sub-menu a{padding:0.4rem 1rem;font-size:0.78rem}
    .header-cta{margin:1rem 0 0;justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.8rem 1.8rem;
    font-size:0.9rem;
    font-weight:700;
    border-radius:var(--radius-md);
    border:none;
    cursor:pointer;
    transition:all 0.25s var(--ease);
    text-decoration:none;
    font-family:var(--font-heading);
    letter-spacing:0.3px;
}
.btn-gold{
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
    color:var(--color-green-dark);
}
.btn-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(214,173,96,0.35);
    color:var(--color-green-dark);
}
.btn-green{
    background:var(--color-green-dark);
    color:var(--color-white);
    border:1px solid rgba(255,255,255,0.1);
}
.btn-green:hover{
    background:var(--color-green);
    color:var(--color-white);
    border-color:var(--color-gold);
}
.btn-outline{
    background:transparent;
    color:var(--color-green-dark);
    border:2px solid var(--color-green-dark);
}
.btn-outline:hover{
    background:var(--color-green-dark);
    color:var(--color-white);
}
.btn-white{
    background:var(--color-white);
    color:var(--color-green-dark);
}
.btn-white:hover{
    background:var(--color-gold-light);
    color:var(--color-green-dark);
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero{
    padding-top:72px;
    background:var(--color-green-dark);
    position:relative;
    overflow:hidden;
    min-height:90vh;
    display:flex;
    align-items:center;
}
.hero::before{
    content:'';
    position:absolute;
    top:-50%;right:-20%;
    width:70%;height:200%;
    background:radial-gradient(ellipse,rgba(214,173,96,0.06) 0%,transparent 70%);
    pointer-events:none;
}
.hero::after{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(214,173,96,0.4),transparent);
}
.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    position:relative;
    z-index:1;
}
.hero-content{max-width:560px}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(214,173,96,0.12);
    border:1px solid rgba(214,173,96,0.25);
    padding:0.4rem 1rem;
    border-radius:999px;
    font-size:0.78rem;
    color:var(--color-gold);
    font-weight:600;
    margin-bottom:1.5rem;
}
.hero-badge .dot{
    width:6px;height:6px;
    background:var(--color-gold);
    border-radius:50%;
    animation:pulse 2s infinite;
}
.hero h1{
    color:var(--color-white);
    margin-bottom:0.5rem;
    line-height:1.15;
}
.hero h1 .highlight{
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-subtitle{
    font-size:1.05rem;
    color:rgba(255,255,255,0.65);
    margin-bottom:2rem;
    line-height:1.7;
    max-width:480px;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-stats{
    display:flex;
    gap:2rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,0.08);
}
.hero-stat strong{
    display:block;
    font-size:1.5rem;
    font-weight:800;
    color:var(--color-gold);
    font-family:var(--font-heading);
}
.hero-stat span{
    font-size:0.78rem;
    color:rgba(255,255,255,0.5);
}

/* ── Hero Dashboard Mockup (Right Side) ── */
.hero-dashboard{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(214,173,96,0.12);
    border-radius:var(--radius-xl);
    padding:1.5rem;
    backdrop-filter:blur(10px);
}
.dashboard-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.2rem;
    padding-bottom:0.8rem;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.dashboard-title{
    font-size:0.8rem;
    font-weight:600;
    color:rgba(255,255,255,0.7);
    letter-spacing:0.5px;
    text-transform:uppercase;
}
.dashboard-badge{
    font-size:0.7rem;
    padding:0.2rem 0.6rem;
    background:rgba(214,173,96,0.15);
    color:var(--color-gold);
    border-radius:999px;
    font-weight:600;
}
.dashboard-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.8rem;
    margin-bottom:1.2rem;
}
.metric-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-md);
    padding:0.8rem 1rem;
}
.metric-label{
    font-size:0.7rem;
    color:rgba(255,255,255,0.45);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:0.3rem;
}
.metric-value{
    font-size:1.3rem;
    font-weight:800;
    color:var(--color-white);
    font-family:var(--font-heading);
}
.metric-value.gold{color:var(--color-gold)}
.metric-change{
    font-size:0.7rem;
    color:var(--color-green-mid);
    font-weight:600;
}
.dashboard-chart{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-md);
    padding:1rem;
    height:120px;
    display:flex;
    align-items:flex-end;
    gap:4px;
}
.chart-bar{
    flex:1;
    background:linear-gradient(0deg,var(--color-green-mid),rgba(27,122,84,0.3));
    border-radius:2px 2px 0 0;
    min-height:20px;
    transition:all 0.6s var(--ease);
    position:relative;
}
.chart-bar.gold-bar{
    background:linear-gradient(0deg,var(--color-gold),rgba(214,173,96,0.3));
}
.chart-bar::after{
    content:attr(data-label);
    position:absolute;
    bottom:-18px;
    left:50%;transform:translateX(-50%);
    font-size:0.6rem;
    color:rgba(255,255,255,0.35);
    white-space:nowrap;
}

@media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;text-align:center}
    .hero-content{margin:0 auto}
    .hero-subtitle{margin:0 auto 2rem}
    .hero-actions{justify-content:center}
    .hero-stats{justify-content:center}
    .hero-dashboard{display:none}
}

/* ═══════════════════════════════════════════════════════════
   TRUST BAR (Logos / Certifications)
   ═══════════════════════════════════════════════════════════ */
.trust-bar{
    background:var(--color-bg-alt);
    border-bottom:1px solid var(--color-border);
    padding:1.2rem 0;
}
.trust-bar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
}
.trust-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.78rem;
    color:var(--color-text-lt);
    font-weight:500;
}
.trust-item svg{color:var(--color-green);flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   SERVICES CARDS
   ═══════════════════════════════════════════════════════════ */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.service-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    transition:all 0.3s var(--ease);
    position:relative;
    overflow:hidden;
}
.service-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,var(--color-green-dark),var(--color-green-mid));
    opacity:0;
    transition:opacity 0.3s var(--ease);
}
.service-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:rgba(10,61,46,0.15);
}
.service-card:hover::before{opacity:1}
.service-icon{
    width:52px;height:52px;
    background:var(--color-green-light);
    border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1.2rem;
}
.service-icon svg{width:26px;height:26px;color:var(--color-green-dark)}
.service-card h3{
    font-size:1.1rem;
    margin-bottom:0.6rem;
}
.service-card p{
    font-size:0.88rem;
    color:var(--color-text-md);
    margin-bottom:1rem;
}
.service-price{
    font-size:0.82rem;
    font-weight:700;
    color:var(--color-gold-dark);
    font-family:var(--font-heading);
}
@media (max-width:768px){
    .services-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
    .services-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   ROI CALCULATOR
   ═══════════════════════════════════════════════════════════ */
.calculator-wrap{
    background:var(--color-green-dark);
    border-radius:var(--radius-xl);
    padding:3rem;
    color:var(--color-white);
    position:relative;
    overflow:hidden;
}
.calculator-wrap::before{
    content:'';
    position:absolute;
    top:0;right:0;
    width:40%;height:100%;
    background:radial-gradient(ellipse at center,rgba(214,173,96,0.08),transparent);
    pointer-events:none;
}
.calc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    position:relative;
    z-index:1;
}
.calc-inputs{display:flex;flex-direction:column;gap:1.2rem}
.calc-field label{
    display:block;
    font-size:0.82rem;
    font-weight:600;
    color:rgba(255,255,255,0.7);
    margin-bottom:0.5rem;
    letter-spacing:0.3px;
}
.calc-field input,
.calc-field select{
    width:100%;
    padding:0.8rem 1rem;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-md);
    color:var(--color-white);
    font-size:1rem;
    font-family:var(--font-mono);
    transition:border-color 0.2s;
}
.calc-field input:focus,
.calc-field select:focus{
    outline:none;
    border-color:var(--color-gold);
}
.calc-results{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.5rem;
}
.calc-result-card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(214,173,96,0.2);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    text-align:center;
}
.calc-result-label{
    font-size:0.78rem;
    color:rgba(255,255,255,0.5);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:0.5rem;
}
.calc-result-value{
    font-size:2.5rem;
    font-weight:800;
    color:var(--color-gold);
    font-family:var(--font-heading);
}
.calc-result-note{
    font-size:0.78rem;
    color:rgba(255,255,255,0.45);
    margin-top:0.3rem;
}
.calc-cta{
    text-align:center;
    margin-top:1rem;
}
@media (max-width:768px){
    .calc-grid{grid-template-columns:1fr}
    .calculator-wrap{padding:1.5rem}
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDIES
   ═══════════════════════════════════════════════════════════ */
.cases-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}
.case-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:2rem;
    transition:all 0.3s var(--ease);
}
.case-card:hover{
    box-shadow:var(--shadow-md);
    border-color:rgba(10,61,46,0.15);
}
.case-tag{
    display:inline-block;
    padding:0.2rem 0.7rem;
    background:var(--color-green-light);
    color:var(--color-green-dark);
    font-size:0.72rem;
    font-weight:700;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:1rem;
}
.case-card h3{
    font-size:1.1rem;
    margin-bottom:0.6rem;
}
.case-card p{
    font-size:0.88rem;
    color:var(--color-text-md);
    margin-bottom:1rem;
}
.case-result{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.8rem 1rem;
    background:var(--color-green-light);
    border-radius:var(--radius-md);
    font-weight:700;
    color:var(--color-green-dark);
    font-family:var(--font-heading);
}
.case-result svg{color:var(--color-green-dark);flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   188% ROI SYSTEM / PROCESS STEPS
   ═══════════════════════════════════════════════════════════ */
.process-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
    position:relative;
}
.process-step{
    text-align:center;
    position:relative;
}
.process-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:2.5rem;
    right:-1rem;
    width:2rem;
    height:2px;
    background:linear-gradient(90deg,var(--color-gold),transparent);
}
.step-number{
    width:56px;height:56px;
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
    color:var(--color-green-dark);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    font-weight:800;
    font-family:var(--font-heading);
    margin:0 auto 1rem;
}
.step-icon{
    width:48px;height:48px;
    background:var(--color-green-light);
    border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1rem;
}
.step-icon svg{width:24px;height:24px;color:var(--color-green-dark)}
.process-step h3{
    font-size:1.05rem;
    margin-bottom:0.5rem;
}
.process-step p{
    font-size:0.85rem;
    color:var(--color-text-md);
}
@media (max-width:768px){
    .process-steps{grid-template-columns:1fr}
    .process-step:not(:last-child)::after{display:none}
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.testimonial-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:2rem;
    position:relative;
}
.testimonial-card::before{
    content:'\201C';
    position:absolute;
    top:1rem;right:1.5rem;
    font-size:3rem;
    color:var(--color-gold);
    opacity:0.3;
    font-family:Georgia,serif;
    line-height:1;
}
.testimonial-stars{
    display:flex;gap:2px;
    margin-bottom:0.8rem;
}
.testimonial-stars svg{width:16px;height:16px;color:var(--color-gold)}
.testimonial-card blockquote{
    font-size:0.92rem;
    color:var(--color-text);
    line-height:1.7;
    margin-bottom:1.2rem;
    font-style:normal;
}
.testimonial-author{
    display:flex;
    align-items:center;
    gap:0.8rem;
}
.testimonial-avatar{
    width:42px;height:42px;
    background:var(--color-green-light);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    color:var(--color-green-dark);
    font-size:0.85rem;
}
.testimonial-name{font-weight:700;font-size:0.88rem;color:var(--color-text)}
.testimonial-role{font-size:0.78rem;color:var(--color-text-lt)}

/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════ */
.faq-list{display:flex;flex-direction:column;gap:0.75rem;max-width:800px;margin:0 auto}
.faq-item{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:border-color 0.2s;
}
.faq-item.open{border-color:var(--color-green-dark)}
.faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:1.2rem 1.5rem;
    background:none;border:none;
    cursor:pointer;
    font-size:0.95rem;
    font-weight:700;
    color:var(--color-green-dark);
    text-align:left;
    font-family:var(--font-heading);
}
.faq-question svg{
    width:20px;height:20px;
    color:var(--color-text-lt);
    transition:transform 0.3s var(--ease);
    flex-shrink:0;
}
.faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--color-green-dark)}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s var(--ease),padding 0.35s var(--ease);
    padding:0 1.5rem;
}
.faq-item.open .faq-answer{
    max-height:400px;
    padding:0 1.5rem 1.2rem;
}
.faq-answer p{font-size:0.9rem;color:var(--color-text-md);margin:0}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════ */
.cta-banner{
    background:linear-gradient(135deg,var(--color-green-dark) 0%,var(--color-green) 100%);
    border-radius:var(--radius-xl);
    padding:3.5rem 3rem;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-banner::before{
    content:'';
    position:absolute;
    top:-50%;right:-10%;
    width:50%;height:200%;
    background:radial-gradient(ellipse,rgba(214,173,96,0.1),transparent);
    pointer-events:none;
}
.cta-banner h2{
    color:var(--color-white);
    margin-bottom:0.8rem;
    position:relative;
}
.cta-banner p{
    color:rgba(255,255,255,0.7);
    max-width:560px;
    margin:0 auto 2rem;
    position:relative;
}
.cta-banner .btn{position:relative}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER / BREADCRUMB
   ═══════════════════════════════════════════════════════════ */
.page-header{
    padding-top:calc(72px + 3rem);
    padding-bottom:3rem;
    background:var(--color-green-dark);
    text-align:center;
}
.page-header h1{color:var(--color-white);margin-bottom:0.5rem}
.page-header p{color:rgba(255,255,255,0.65);max-width:600px;margin:0 auto}
.breadcrumbs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    font-size:0.8rem;
    color:rgba(255,255,255,0.4);
    margin-bottom:1rem;
}
.breadcrumbs a{color:rgba(255,255,255,0.6);transition:color 0.2s}
.breadcrumbs a:hover{color:var(--color-gold)}
.breadcrumbs .sep{color:rgba(255,255,255,0.25)}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════ */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:start;
}
.contact-form .form-group{margin-bottom:1.2rem}
.contact-form label{
    display:block;
    font-size:0.85rem;
    font-weight:600;
    color:var(--color-text);
    margin-bottom:0.4rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
    width:100%;
    padding:0.8rem 1rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    font-size:0.92rem;
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-white);
    transition:border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
    outline:none;
    border-color:var(--color-green-dark);
    box-shadow:0 0 0 3px rgba(10,61,46,0.1);
}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form .btn{width:100%;justify-content:center}
.form-note{
    font-size:0.78rem;
    color:var(--color-text-lt);
    margin-top:0.8rem;
    text-align:center;
}
.contact-info-card{
    background:var(--color-green-dark);
    border-radius:var(--radius-lg);
    padding:2rem;
    color:var(--color-white);
}
.contact-info-card h3{
    color:var(--color-white);
    margin-bottom:1.2rem;
    font-size:1.1rem;
}
.contact-info-item{
    display:flex;
    align-items:flex-start;
    gap:0.8rem;
    margin-bottom:1rem;
}
.contact-info-item svg{
    width:20px;height:20px;
    color:var(--color-gold);
    flex-shrink:0;
    margin-top:2px;
}
.contact-info-item a{
    color:rgba(255,255,255,0.8);
    transition:color 0.2s;
}
.contact-info-item a:hover{color:var(--color-gold)}
.whatsapp-cta{
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:1rem 1.2rem;
    background:rgba(37,211,102,0.12);
    border:1px solid rgba(37,211,102,0.3);
    border-radius:var(--radius-md);
    margin-top:1.5rem;
    text-decoration:none;
    transition:all 0.2s;
}
.whatsapp-cta:hover{
    background:rgba(37,211,102,0.2);
}
.whatsapp-cta svg{width:28px;height:28px;color:#25D366;flex-shrink:0}
.whatsapp-cta-text strong{display:block;color:var(--color-white);font-size:0.9rem}
.whatsapp-cta-text span{font-size:0.8rem;color:rgba(255,255,255,0.6)}

@media (max-width:768px){
    .contact-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   BLOG / ARCHIVE
   ═══════════════════════════════════════════════════════════ */
.posts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.post-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:all 0.3s var(--ease);
}
.post-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    border-color:rgba(10,61,46,0.15);
}
.post-thumb{
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--color-green-light);
}
.post-thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 0.5s var(--ease);
}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-body{padding:1.2rem 1.5rem 1.5rem}
.post-meta{
    display:flex;
    align-items:center;
    gap:0.8rem;
    font-size:0.75rem;
    color:var(--color-text-lt);
    margin-bottom:0.6rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.post-body h3{
    font-size:1.05rem;
    margin-bottom:0.5rem;
    line-height:1.4;
}
.post-body h3 a{color:var(--color-green-dark);transition:color 0.2s}
.post-body h3 a:hover{color:var(--color-green)}
.post-body p{
    font-size:0.85rem;
    color:var(--color-text-md);
    margin-bottom:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
@media (max-width:768px){
    .posts-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
    .posts-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════ */
.article-layout{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:2.5rem;
    align-items:start;
}
.article-body{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:2.5rem;
    border:1px solid var(--color-border);
}
.caijing-article-body h2{
    font-size:1.5rem;
    margin:2.5rem 0 1rem;
    padding-bottom:0.6rem;
    border-bottom:2px solid var(--color-green-light);
    color:var(--color-green-dark)!important;
}
.caijing-article-body h3{
    font-size:1.2rem;
    margin:2rem 0 0.8rem;
    color:var(--color-green-dark)!important;
}
.caijing-article-body p{
    margin-bottom:1.2rem;
    line-height:1.85;
    color:var(--color-text)!important;
    font-size:1rem!important;
}
.caijing-article-body ul,.caijing-article-body ol{
    margin-bottom:1.2rem;
    padding-left:1.5rem;
}
.caijing-article-body li{
    margin-bottom:0.5rem;
    line-height:1.8;
    color:var(--color-text-md)!important;
}
.caijing-article-body strong,.caijing-article-body b{
    color:var(--color-green-dark)!important;
    font-weight:700;
}
.caijing-article-body blockquote{
    margin:1.5rem 0;
    padding:1rem 1.5rem;
    background:var(--color-green-light);
    border-left:4px solid var(--color-green-dark);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    font-style:italic;
    color:var(--color-green-dark)!important;
}
.caijing-article-body code{
    background:var(--color-green-light);
    color:var(--color-green-dark);
    padding:0.15rem 0.4rem;
    border-radius:var(--radius-sm);
    font-size:0.9em;
}
.caijing-article-body pre{
    background:var(--color-green-dark);
    color:var(--color-gold-light)!important;
    padding:1.2rem;
    border-radius:var(--radius-md);
    overflow-x:auto;
    margin-bottom:1.5rem;
}
.caijing-article-body a{
    color:var(--color-green)!important;
    text-decoration:underline;
    text-underline-offset:2px;
}
.caijing-article-body a:hover{
    color:var(--color-green-dark)!important;
}
.caijing-article-body img{
    max-width:100%;
    height:auto;
    border-radius:var(--radius-md)!important;
    margin:1.5rem 0;
}

/* ── TOC Sidebar ── */
.toc-sidebar{
    position:sticky;
    top:calc(72px + 1.5rem);
}
.toc-widget{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:1.2rem 1.5rem;
}
.toc-widget h4{
    font-size:0.85rem;
    font-weight:700;
    color:var(--color-green-dark);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:0.8rem;
    padding-bottom:0.6rem;
    border-bottom:2px solid var(--color-gold-light);
}
.toc-widget ul{
    list-style:none;
    padding:0;margin:0;
}
.toc-widget li{
    margin-bottom:0.4rem;
    padding:0;
}
.toc-widget a{
    display:block;
    padding:0.35rem 0.6rem;
    font-size:0.82rem;
    color:var(--color-text-md);
    border-radius:var(--radius-sm);
    transition:all 0.15s var(--ease);
    border-left:2px solid transparent;
}
.toc-widget a:hover,
.toc-widget a.active{
    background:var(--color-green-light);
    color:var(--color-green-dark);
    border-left-color:var(--color-green-dark);
}

/* ── Tags ── */
.post-tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.5rem;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-border);
}
.post-tags-label{
    font-size:0.88rem;
    font-weight:600;
    color:var(--color-text);
}
.post-tag-item{
    display:inline-block;
    padding:0.3rem 0.8rem;
    background:var(--color-green-dark);
    color:var(--color-gold)!important;
    border-radius:999px;
    font-size:0.78rem;
    font-weight:600;
    transition:all 0.2s;
    text-decoration:none;
}
.post-tag-item:hover{
    background:var(--color-gold);
    color:var(--color-green-dark)!important;
}

/* ── Post Nav ── */
.post-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-border);
}
.post-nav-item{
    padding:1rem 1.2rem;
    background:var(--color-bg-alt);
    border-radius:var(--radius-md);
    text-decoration:none;
    transition:all 0.2s;
    border:1px solid var(--color-border);
}
.post-nav-item:hover{
    border-color:var(--color-green-dark);
    background:var(--color-green-light);
}
.post-nav-label{
    font-size:0.72rem;
    color:var(--color-text-lt);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:0.3rem;
}
.post-nav-title{
    font-size:0.92rem;
    font-weight:700;
    color:var(--color-green-dark);
}
.post-nav-next{text-align:right}

/* ── Related Posts ── */
.related-posts{margin-top:3rem}
.related-posts h3{
    font-size:1.2rem;
    margin-bottom:1.5rem;
    padding-bottom:0.6rem;
    border-bottom:2px solid var(--color-gold-light);
}

@media (max-width:1024px){
    .article-layout{grid-template-columns:1fr}
    .toc-sidebar{display:none}
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0.5rem;
    margin-top:3rem;
}
.pagination a,
.pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;height:40px;
    padding:0 0.8rem;
    border-radius:var(--radius-md);
    font-size:0.88rem;
    font-weight:600;
    color:var(--color-text-md);
    background:var(--color-white);
    border:1px solid var(--color-border);
    transition:all 0.2s;
    text-decoration:none;
}
.pagination a:hover{
    background:var(--color-green-dark);
    color:var(--color-white);
    border-color:var(--color-green-dark);
}
.pagination .current{
    background:var(--color-green-dark);
    color:var(--color-white);
    border-color:var(--color-green-dark);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer{
    background:var(--color-green-dark);
    color:rgba(255,255,255,0.65);
    padding:4rem 0 2rem;
    border-top:1px solid rgba(214,173,96,0.15);
}
.footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:2rem;
    margin-bottom:2rem;
}
.footer-brand .logo-text{
    font-size:1.3rem;
    font-weight:700;
    color:var(--color-white);
    letter-spacing:0.5px;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    text-decoration:none;
    margin-bottom:0.8rem;
}
.footer-brand p{
    font-size:0.85rem;
    color:rgba(255,255,255,0.5);
    line-height:1.7;
    max-width:260px;
    margin:0;
}
.footer-col h4{
    font-size:0.85rem;
    font-weight:600;
    color:var(--color-white);
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:1rem;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:0.55rem}
.footer-col a{
    font-size:0.84rem;
    color:rgba(255,255,255,0.55);
    transition:color 0.2s;
}
.footer-col a:hover{color:var(--color-gold)}
.footer-contact li{
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.footer-contact svg{color:var(--color-gold);flex-shrink:0;width:16px;height:16px}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:1.5rem;
    font-size:0.78rem;
    color:rgba(255,255,255,0.4);
}
.footer-social{display:flex;gap:0.75rem}
.footer-social a{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.55);
    transition:all 0.2s;
}
.footer-social a:hover{
    background:var(--color-gold);
    color:var(--color-green-dark);
}
@media (max-width:768px){
    .footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
    .footer-bottom{flex-direction:column;gap:0.75rem;text-align:center}
}

/* ═══════════════════════════════════════════════════════════
   FLOATING CTA
   ═══════════════════════════════════════════════════════════ */
.float-cta{
    position:fixed;
    bottom:1.5rem;
    right:1.5rem;
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    z-index:999;
    pointer-events:none;
}
.float-cta > *{pointer-events:auto}
.float-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.75rem 1.1rem;
    border-radius:var(--radius-lg);
    font-size:0.82rem;
    font-weight:600;
    color:var(--color-white);
    box-shadow:var(--shadow-md);
    transition:all 0.2s var(--ease);
    position:relative;
}
.float-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
}
.float-btn.whatsapp{background:#25D366}
.float-btn.audit{
    background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
    color:var(--color-green-dark);
}
.float-btn span:first-of-type{display:none}
@media (min-width:640px){
    .float-btn span:first-of-type{display:inline}
}
.pulse-dot{
    position:absolute;
    top:0.4rem;right:0.4rem;
    width:8px;height:8px;
    border-radius:50%;
    background:#fff;
    animation:pulse 2s infinite;
    border:1px solid rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
#toast{
    position:fixed;
    bottom:7rem;
    right:1.5rem;
    background:var(--color-green-dark);
    color:var(--color-white);
    padding:0.75rem 1.25rem;
    border-radius:var(--radius-md);
    font-size:0.85rem;
    font-weight:500;
    box-shadow:var(--shadow-lg);
    opacity:0;
    transform:translateY(12px);
    transition:all 0.3s var(--ease);
    z-index:1000;
    pointer-events:none;
    border:1px solid rgba(214,173,96,0.2);
}
#toast.show{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeup{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes slideInRight{
    from{opacity:0;transform:translateX(30px)}
    to{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn{
    from{opacity:0;transform:scale(0.92)}
    to{opacity:1;transform:scale(1)}
}
@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.5;transform:scale(1.5)}
}
.animate-fadeup{animation:fadeup 0.7s ease-out both}
.animate-slide-right{animation:slideInRight 0.7s ease-out both}
.animate-scale{animation:scaleIn 0.5s ease-out both}

.stagger > *:nth-child(1){animation-delay:0.1s}
.stagger > *:nth-child(2){animation-delay:0.2s}
.stagger > *:nth-child(3){animation-delay:0.3s}
.stagger > *:nth-child(4){animation-delay:0.4s}
.stagger > *:nth-child(5){animation-delay:0.5s}
.stagger > *:nth-child(6){animation-delay:0.6s}

/* Page wrapper offset for fixed header */
.page-wrapper{padding-top:72px}

/* ── li:has(svg) flex alignment (global SVG fix) ── */
li:has(> svg){
    display:flex;
    align-items:flex-start;
    gap:0.5rem;
    padding:0.3rem 0;
    line-height:1.65;
}
li:has(> svg) > svg{
    margin-top:0.15rem;
}

/* ── Admin Bar Offset ── */
body.admin-bar #site-header{top:32px}