:root {
            --white: #FFFFFF;
            --cream-50: #FFFBF6;
            --cream-100: #FDF6ED;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            --gray-950: #0a0d12;
            --bronze-900: #422006;
            --bronze-800: #713F12;
            --bronze-700: #A16207;
            --bronze-600: #CA8A04;
            --bronze-500: #EAB308;
            --bronze-400: #FBBF24;
            --bronze-300: #FDE68A;
            --bronze-200: #FEF3C7;
            --bronze-100: #FEFCE8;
            --secondary: #64748B;
            --secondary-light: #94A3B8;
            --secondary-dark: #475569;
            --tertiary: #FEFCE8;
            --tertiary-dark: #FEF3C7;
            --emerald: #10B981;
            --blue: #3B82F6;
            --violet: #8B5CF6;
            --wa-green: #25D366;
            --wa-dark: #075E54;
            --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-serif: 'DM Serif Display', Georgia, serif;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { overflow-x: hidden; }
        body {
            font-family: var(--font-sans);
            background: var(--white);
            color: var(--gray-900);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            padding-top: 80px;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        .container { max-width: 1600px; margin: 0 auto; padding: 0 72px; }
        .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

        /* BLOG HERO */
        .blog-hero {
            padding: 60px 0 80px;
            background: linear-gradient(180deg, #F0FDF4 0%, var(--white) 100%);
        }
        .blog-breadcrumb {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: var(--gray-500); margin-bottom: 24px;
        }
        .blog-breadcrumb a { color: var(--gray-500); transition: color 0.2s; }
        .blog-breadcrumb a:hover { color: var(--wa-green); }
        .blog-breadcrumb svg { width: 14px; height: 14px; }
        .blog-category {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(37,211,102,0.12), rgba(37,211,102,0.06));
            border: 1px solid rgba(37,211,102,0.25);
            border-radius: 100px; font-size: 12px; font-weight: 700;
            color: #16A34A; text-transform: uppercase; letter-spacing: 0.05em;
            margin-bottom: 20px;
        }
        .blog-title {
            font-family: var(--font-serif);
            font-size: clamp(36px, 5vw, 52px);
            font-weight: 400; color: var(--gray-900);
            line-height: 1.15; margin-bottom: 24px; max-width: 900px;
        }
        .blog-excerpt {
            font-size: 19px; color: var(--gray-600);
            line-height: 1.7; max-width: 700px; margin-bottom: 32px;
        }
        .blog-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
        .blog-meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-500); }
        .blog-meta-item svg { width: 16px; height: 16px; }

        /* FEATURED IMAGE */
        .blog-featured-image { position: relative; margin: -40px auto 0; max-width: 1000px; padding: 0 24px; }
        .blog-featured-image-inner {
            position: relative; border-radius: 20px; overflow: hidden;
            box-shadow: 0 24px 64px rgba(0,0,0,0.12);
            background: linear-gradient(135deg, #064E3B 0%, #065F46 40%, #047857 70%, #0D9488 100%);
            padding: 60px 40px;
        }
        .featured-image-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }

        /* HERO VISUAL */
        .wa-hero-visual { text-align: center; width: 100%; }
        .wa-hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
            border-radius: 100px; padding: 8px 20px; margin-bottom: 28px;
            font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .wa-hero-badge-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #4ADE80; box-shadow: 0 0 10px #4ADE80;
            animation: pulse-dot 1.8s ease-in-out infinite;
        }
        @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }
        .wa-hero-title {
            font-size: clamp(52px, 8vw, 96px); font-weight: 800; color: #fff;
            line-height: .9; letter-spacing: -0.03em; margin-bottom: 10px;
        }
        .wa-hero-title span { color: #4ADE80; }
        .wa-hero-sub { font-size: 22px; color: rgba(255,255,255,0.75); margin-bottom: 44px; font-weight: 400; }

        /* PHONE MOCKUP IN HERO */
        .wa-phone-row { display: flex; align-items: flex-end; justify-content: center; gap: 28px; }
        .wa-phone-wrap {
            width: 200px; background: #111820; border-radius: 32px;
            border: 2px solid rgba(255,255,255,0.1);
            box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 0 8px rgba(0,0,0,0.12);
            overflow: hidden; flex-shrink: 0;
        }
        .wa-phone-header {
            background: #1F2C34; padding: 28px 12px 10px;
            display: flex; align-items: center; gap: 8px;
        }
        .wa-phone-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg,#1a3d28,#2a6040);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 800; color: var(--wa-green);
            font-family: 'DM Serif Display', serif; flex-shrink: 0;
        }
        .wa-phone-name { font-size: 11px; font-weight: 600; color: #E9EDEF; }
        .wa-phone-status { font-size: 9px; color: #8696A0; }
        .wa-phone-chat {
            background: #0B141A; padding: 10px 8px;
            display: flex; flex-direction: column; gap: 6px; min-height: 160px;
        }
        .wa-bubble-in {
            background: #202C33; border-radius: 4px 10px 10px 10px;
            padding: 7px 9px; max-width: 85%; align-self: flex-start;
        }
        .wa-bubble-in p { font-size: 10px; color: #E9EDEF; line-height: 1.4; }
        .wa-bubble-in .wa-time { font-size: 8px; color: #8696A0; margin-top: 2px; text-align: right; }
        .wa-call-btn {
            display: flex; align-items: center; justify-content: center; gap: 5px;
            background: rgba(37,211,102,0.15); border: 1px solid rgba(37,211,102,0.4);
            border-radius: 8px; padding: 7px; margin-top: 4px; cursor: pointer;
            font-size: 10px; font-weight: 700; color: var(--wa-green);
        }
        .wa-call-btn svg { width: 12px; height: 12px; }

        /* CALL SCREEN PHONE */
        .wa-call-screen {
            width: 200px; background: linear-gradient(160deg,#0C2818,#060E08);
            border-radius: 32px; border: 2px solid rgba(255,255,255,0.1);
            box-shadow: 0 32px 64px rgba(0,0,0,0.5), 0 0 0 8px rgba(0,0,0,0.12),
                        0 0 60px rgba(37,211,102,0.2);
            overflow: hidden; flex-shrink: 0;
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 36px 20px; gap: 8px;
            position: relative;
        }
        .call-ring {
            position: absolute; border-radius: 50%;
            border: 1px solid rgba(37,211,102,0.15);
            animation: call-ring-anim 3s ease-in-out infinite;
        }
        .call-ring:nth-child(1) { width: 90px; height: 90px; }
        .call-ring:nth-child(2) { width: 140px; height: 140px; animation-delay: .7s; }
        .call-ring:nth-child(3) { width: 192px; height: 192px; animation-delay: 1.4s; }
        @keyframes call-ring-anim { 0%{opacity:0;transform:scale(.8)} 50%{opacity:.5} 100%{opacity:0;transform:scale(1.15)} }
        .call-avatar-small {
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(135deg,#1a4028,#2a6040);
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; font-weight: 900; color: var(--wa-green);
            font-family: 'DM Serif Display', serif;
            border: 2px solid rgba(37,211,102,0.3);
            box-shadow: 0 0 30px rgba(37,211,102,0.2);
            position: relative; z-index: 2;
        }
        .call-name-small { font-size: 13px; font-weight: 700; color: #fff; z-index: 2; }
        .call-status-small { font-size: 10px; color: var(--wa-green); z-index: 2; display: flex; align-items: center; gap: 5px; }
        .call-status-small svg { width: 11px; height: 11px; }
        .call-timer { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .1em; z-index: 2; margin-top: 4px; }
        .call-actions-small { display: flex; gap: 16px; z-index: 2; margin-top: 8px; }
        .call-action-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; }
        .call-action-btn.end { background: #EF4444; box-shadow: 0 4px 14px rgba(239,68,68,.4); }
        .call-action-btn svg { width: 16px; height: 16px; }

        .wa-hero-label {
            margin-top: 36px; display: flex; align-items: center; justify-content: center;
            gap: 32px; flex-wrap: wrap;
        }
        .wa-hero-stat { text-align: center; }
        .wa-hero-stat strong { display: block; font-size: 28px; font-weight: 800; color: #4ADE80; line-height: 1; }
        .wa-hero-stat span { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 3px; }
        .wa-stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.15); }

        /* ARTICLE CONTENT */
        .blog-content { padding: 80px 0; }
        .article-body { font-size: 17px; line-height: 1.8; color: var(--gray-700); }
        .article-body p { margin-bottom: 24px; }
        .article-body h2 {
            font-family: var(--font-serif); font-size: 32px; font-weight: 400;
            color: var(--gray-900); margin: 56px 0 24px; line-height: 1.3;
        }
        .article-body h3 { font-size: 22px; font-weight: 700; color: var(--gray-900); margin: 40px 0 16px; }
        .article-body strong { color: var(--gray-900); }
        .article-body a { color: var(--bronze-600); text-decoration: underline; text-underline-offset: 2px; }
        .article-body a:hover { color: var(--bronze-700); }

        /* STAT CARDS */
        .stat-highlight { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 48px 0; }
        .stat-card { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 16px; padding: 24px; text-align: center; }
        .stat-value { font-size: 36px; font-weight: 800; color: #16A34A; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 13px; color: var(--gray-600); line-height: 1.4; }

        /* HOW IT WORKS */
        .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 40px 0; }
        .how-card {
            background: var(--white); border: 1px solid var(--gray-200);
            border-radius: 16px; padding: 28px; text-align: center;
            transition: all 0.3s ease;
        }
        .how-card:hover { border-color: rgba(37,211,102,.35); box-shadow: 0 8px 24px rgba(37,211,102,.1); transform: translateY(-2px); }
        .how-step-num {
            width: 48px; height: 48px; border-radius: 50%;
            background: linear-gradient(135deg,var(--wa-green),#16A34A);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; font-weight: 800; color: #fff;
            margin: 0 auto 16px;
        }
        .how-icon {
            width: 52px; height: 52px; border-radius: 14px;
            background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.2);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 16px; color: #16A34A;
        }
        .how-icon svg { width: 26px; height: 26px; }
        .how-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
        .how-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

        /* USE CASES */
        .usecases-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin: 40px 0; }
        .usecase-card {
            background: var(--white); border: 1px solid var(--gray-200);
            border-radius: 16px; padding: 28px; transition: all 0.3s ease;
        }
        .usecase-card:hover { border-color: var(--gray-300); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
        .usecase-icon {
            width: 52px; height: 52px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
        }
        .usecase-icon.wa { background: rgba(37,211,102,.1); color: #16A34A; }
        .usecase-icon.ecom { background: rgba(251,146,60,.1); color: #F97316; }
        .usecase-icon.health { background: rgba(16,185,129,.1); color: var(--emerald); }
        .usecase-icon.support { background: rgba(139,92,246,.1); color: var(--violet); }
        .usecase-icon svg { width: 26px; height: 26px; }
        .usecase-title { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
        .usecase-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

        /* CALLOUT */
        .callout {
            background: linear-gradient(135deg,rgba(37,211,102,.08),rgba(37,211,102,.04));
            border: 1px solid rgba(37,211,102,.22);
            border-radius: 16px; padding: 28px 32px; margin: 40px 0;
        }
        .callout.bronze {
            background: linear-gradient(135deg,rgba(234,179,8,0.08),rgba(234,179,8,0.04));
            border: 1px solid rgba(234,179,8,0.2);
        }
        .callout-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg,var(--wa-green),#16A34A);
            border-radius: 12px; display: flex; align-items: center; justify-content: center;
            margin-bottom: 16px;
        }
        .callout.bronze .callout-icon { background: linear-gradient(135deg,var(--bronze-500),var(--bronze-700)); }
        .callout-icon svg { width: 22px; height: 22px; color: white; }
        .callout-title { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
        .callout-text { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0; }

        /* COMPARISON TABLE */
        .comparison-table { width: 100%; border-collapse: collapse; margin: 32px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); }
        .comparison-table th { background: var(--gray-50); padding: 14px 18px; text-align: left; font-size: 13px; font-weight: 700; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); }
        .comparison-table th:first-child { color: var(--gray-500); font-weight: 500; }
        .comparison-table td { padding: 13px 18px; font-size: 14px; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); }
        .comparison-table tr:last-child td { border-bottom: none; }
        .comparison-table tr:nth-child(even) td { background: var(--gray-50); }
        .check { color: #16A34A; font-weight: 700; }
        .cross { color: var(--gray-400); }
        .col-mihu { background: rgba(37,211,102,.04) !important; }
        .col-mihu-head { background: rgba(37,211,102,.1) !important; color: #065F46 !important; }

        /* CTA */
        .blog-cta {
            margin: 80px 0;
            background: linear-gradient(135deg,var(--wa-green),#16A34A);
            border-radius: 24px; padding: 60px; text-align: center;
            position: relative; overflow: hidden;
        }
        .blog-cta::before {
            content: ""; position: absolute; top: -50%; right: -20%;
            width: 400px; height: 400px;
            background: radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 60%);
            pointer-events: none;
        }
        .blog-cta-title { font-family: var(--font-serif); font-size: 32px; color: white; margin-bottom: 12px; position: relative; }
        .blog-cta-text { font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; position: relative; }
        .blog-cta-actions { display: flex; justify-content: center; gap: 16px; position: relative; }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border-radius: 8px; transition: all 0.2s ease; border: none; cursor: pointer; }
        .btn-white { background: white; color: #16A34A; }
        .btn-white:hover { background: var(--gray-100); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
        .btn-icon { width: 16px; height: 16px; }

        /* ARTICLE FOOTER */
        .article-footer { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--gray-200); }
        .article-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
        .article-tags-label { font-size: 13px; font-weight: 600; color: var(--gray-500); }
        .article-tag { padding: 6px 14px; background: var(--gray-100); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--gray-600); transition: all 0.2s; }
        .article-tag:hover { background: var(--gray-200); color: var(--gray-900); }
        .article-share { display: flex; align-items: center; justify-content: space-between; padding: 24px; background: var(--gray-50); border-radius: 16px; }
        .article-share-text { font-size: 15px; font-weight: 600; color: var(--gray-900); }
        .share-buttons { display: flex; gap: 10px; }
        .share-btn { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600); transition: all 0.2s; cursor: pointer; }
        .share-btn:hover { border-color: var(--bronze-300); color: var(--bronze-600); background: var(--bronze-100); }
        .share-btn svg { width: 18px; height: 18px; }

        /* RELATED */
        .related-section { padding: 80px 0; background: var(--gray-50); }
        .related-header { text-align: center; margin-bottom: 48px; }
        .related-title { font-size: 28px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
        .related-subtitle { font-size: 15px; color: var(--gray-500); }
        .related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
        .related-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; }
        .related-card:hover { border-color: var(--gray-300); box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-4px); }
        .related-card-image { height: 160px; display: flex; align-items: center; justify-content: center; }
        .related-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; }
        .related-card-icon.wa { background: linear-gradient(135deg,var(--wa-green),#16A34A); }
        .related-card-icon.bronze { background: linear-gradient(135deg,var(--bronze-500),var(--bronze-700)); }
        .related-card-icon.emerald { background: linear-gradient(135deg,var(--emerald),#059669); }
        .related-card-icon svg { width: 28px; height: 28px; }
        .related-card-body { padding: 24px; }
        .related-card-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bronze-600); margin-bottom: 10px; }
        .related-card-title { font-size: 17px; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; line-height: 1.4; }
        .related-card-meta { font-size: 13px; color: var(--gray-500); }

        @media (max-width: 768px) {
            .stat-highlight { grid-template-columns: repeat(2,1fr); }
            .how-grid { grid-template-columns: 1fr; }
            .usecases-grid { grid-template-columns: 1fr; }
            .related-grid { grid-template-columns: 1fr; }
            .blog-cta { padding: 40px 24px; }
            .article-share { flex-direction: column; gap: 16px; text-align: center; }
            .share-buttons { justify-content: center; }
            .wa-phone-row { gap: 16px; }
            .wa-phone-wrap, .wa-call-screen { width: 160px; }
        }