:root {
            --primary: #1E3A8A;
            --secondary: #F97316;
            --accent: #3B82F6;
            --slate-50: #F8FAFC;
            --slate-100: #F1F5F9;
            --slate-200: #E2E8F0;
            --slate-400: #94A3B8;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1E293B;
            --slate-900: #0F172A;
            --white: #FFFFFF;
            --green: #25D366;
            --bg:        #080E1A;
            --bg-card:   #0D1526;
            --bg-card2:  #111D33;
            --border:    rgba(59,130,246,0.12);
            --border-md: rgba(59,130,246,0.22);
            --tx:        #CBD5E1;
            --tx-mute:   #64748B;
            --tx-head:   #F1F5F9;
        }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            font-family:'DM Sans',sans-serif;
            background:var(--bg);
            color:var(--tx);
            line-height:1.7;
            overflow-x:hidden;
        }
        h1,h2,h3,h4,h5,h6 {
            font-family:'Outfit',sans-serif;
            font-weight:700;
            line-height:1.2;
            color:var(--tx-head);
        }
        .container { max-width:1220px; margin:0 auto; padding:0 24px; }

        /* ── progress bar ── */
        .rp { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--accent),var(--secondary)); z-index:9999; transition:width .08s linear; }

        /* ── HERO ── */
        .blog-hero {
            background:var(--bg);
            background-image:
                radial-gradient(ellipse 70% 55% at 65% -10%, rgba(59,130,246,0.16) 0%, transparent 65%),
                radial-gradient(ellipse 40% 35% at 5% 110%,  rgba(249,115,22,0.10)  0%, transparent 60%),
                repeating-linear-gradient(0deg,  transparent,transparent 47px,rgba(59,130,246,0.035) 47px,rgba(59,130,246,0.035) 48px),
                repeating-linear-gradient(90deg, transparent,transparent 47px,rgba(59,130,246,0.035) 47px,rgba(59,130,246,0.035) 48px);
            padding:150px 0 64px;
            border-bottom:1px solid var(--border);
        }
        .breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--tx-mute); margin-bottom:28px; }
        .breadcrumb a { color:var(--tx-mute); text-decoration:none; transition:color .2s; }
        .breadcrumb a:hover { color:var(--secondary); }
        .breadcrumb i { font-size:9px; opacity:.55; }
        .hero-badge {
            display:inline-flex; align-items:center; gap:7px;
            background:rgba(249,115,22,0.12); border:1px solid rgba(249,115,22,0.3);
            color:var(--secondary); font-size:11px; font-weight:700;
            letter-spacing:.1em; text-transform:uppercase;
            padding:5px 14px; border-radius:100px; margin-bottom:24px;
        }
        .hero-badge span { width:6px; height:6px; border-radius:50%; background:var(--secondary); animation:blink 1.8s ease-in-out infinite; }
        @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
        .hero-title {
            font-size:clamp(26px,3.8vw,50px); font-weight:800; color:var(--white);
            max-width:820px; line-height:1.16; margin-bottom:28px;
        }
        .hero-title em {
            font-style:normal;
            background:linear-gradient(90deg,var(--accent),var(--secondary));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 20px; font-size:13.5px; color:var(--tx-mute); }
        .mi { display:flex; align-items:center; gap:7px; }
        .mi i { color:var(--accent); font-size:12px; }
        .mdot { width:3px; height:3px; border-radius:50%; background:var(--tx-mute); opacity:.45; }

        /* ── LAYOUT ── */
        .blog-layout { display:grid; grid-template-columns:1fr 320px; gap:48px; padding:64px 0 96px; align-items:start; }

        /* ── COVER ── */
        .blog-cover {
            width:100%; aspect-ratio:16/7; border-radius:20px; overflow:hidden; margin-bottom:52px;
            position:relative; background:linear-gradient(135deg,#0a1628,#0d1f45,#091428);
            display:flex; align-items:center; justify-content:center; border:1px solid var(--border-md);
        }
        .c-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.035) 1px,transparent 1px); background-size:26px 26px; }
        .c-glow-a { position:absolute; bottom:-50px; right:-50px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(249,115,22,0.14) 0%,transparent 70%); }
        .c-glow-b { position:absolute; top:-60px;  left:-60px;  width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,0.10) 0%,transparent 70%); }
        .c-inner { position:relative; z-index:1; text-align:center; }
        .c-icon {
            width:84px; height:84px; border-radius:22px;
            background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.3);
            display:flex; align-items:center; justify-content:center;
            margin:0 auto 16px; font-size:34px; color:var(--accent);
        }
        .c-label { font-size:13px; color:var(--tx-mute); letter-spacing:.07em; text-transform:uppercase; font-weight:500; }

        /* ── ARTICLE BODY ── */
        .blog-intro {
            font-size:17px; color:var(--tx); line-height:1.82;
            padding:22px 26px; background:var(--bg-card);
            border-left:3px solid var(--accent);
            border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
            border-radius:0 14px 14px 0; margin-bottom:44px;
        }
        .blog-section { margin-bottom:44px; }
        .sec-h {
            font-size:clamp(17px,2vw,22px); font-weight:700; color:var(--tx-head);
            margin-bottom:14px; display:flex; align-items:flex-start; gap:13px;
        }
        .sec-h::before {
            content:''; flex-shrink:0; width:3px; height:26px; border-radius:2px;
            background:linear-gradient(180deg,var(--accent),var(--secondary)); margin-top:3px;
        }
        .sec-p { font-size:15.5px; color:var(--tx); line-height:1.82; }

        /* keyword pills */
        .kw-cloud { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
        .kw { padding:6px 15px; border-radius:100px; font-size:13px; font-weight:500; background:var(--bg-card2); color:var(--tx-mute); border:1px solid var(--border); transition:all .2s; }
        .kw:hover { border-color:var(--border-md); color:var(--accent); }
        .kw.hi { background:linear-gradient(135deg,var(--primary),#2563eb); color:var(--white); border-color:transparent; }

        /* FAQ */
        .faq-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
        .faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s; }
        .faq-item:hover { border-color:var(--border-md); }
        .faq-q {
            width:100%; background:none; border:none; padding:17px 22px;
            text-align:left; font-family:'Outfit',sans-serif; font-size:15.5px; font-weight:600; color:var(--tx-head);
            cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:color .2s;
        }
        .faq-q i { color:var(--accent); font-size:12px; transition:transform .3s; flex-shrink:0; }
        .faq-q.active { color:var(--accent); }
        .faq-q.active i { transform:rotate(180deg); }
        .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
        .faq-a.open { max-height:260px; }
        .faq-a-in { padding:14px 22px 18px; font-size:15px; color:var(--tx-mute); line-height:1.76; border-top:1px solid var(--border); }

        /* mistake list */
        .mis-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
        .mis-item { display:flex; align-items:flex-start; gap:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; transition:border-color .2s; }
        .mis-item:hover { border-color:rgba(239,68,68,0.3); }
        .mis-icon { flex-shrink:0; width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#7f1d1d,#ef4444); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--white); }
        .mis-text { font-size:15px; color:var(--tx); line-height:1.65; }
        .mis-text strong { color:var(--tx-head); }

        /* conclusion */
        .blog-concl { background:var(--bg-card); border:1px solid var(--border-md); border-radius:20px; padding:38px 40px; position:relative; overflow:hidden; }
        .blog-concl::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--secondary)); }
        .blog-concl::after { content:''; position:absolute; bottom:-60px; right:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(249,115,22,0.10) 0%,transparent 70%); pointer-events:none; }
        .concl-lbl { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--secondary); margin-bottom:12px; }
        .concl-p { font-size:15.5px; color:var(--tx); line-height:1.82; }

        /* share */
        .blog-share { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:32px; border-top:1px solid var(--border); }
        .share-lbl { font-size:14px; font-weight:600; color:var(--tx-head); }
        .share-btn { display:flex; align-items:center; gap:7px; padding:8px 18px; border-radius:100px; font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--border); color:var(--tx-mute); background:var(--bg-card); transition:all .2s; }
        .share-btn:hover { transform:translateY(-2px); border-color:var(--border-md); color:var(--tx-head); }
        .share-btn.tw { border-color:rgba(29,161,242,.3); color:#1da1f2; }
        .share-btn.li { border-color:rgba(0,119,181,.3); color:#0077b5; }
        .share-btn.wa { border-color:rgba(37,211,102,.3); color:var(--green); }

        /* ── SIDEBAR ── */
        .blog-sidebar { position:sticky; top:100px; }
        .s-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:22px; margin-bottom:20px; }
        .s-title { font-size:12px; font-weight:700; color:var(--tx-head); margin-bottom:16px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.07em; }
        .s-title i { color:var(--accent); }

        /* toc */
        .toc { list-style:none; display:flex; flex-direction:column; gap:2px; }
        .toc li a { text-decoration:none; color:var(--tx-mute); font-size:13.5px; line-height:1.5; display:flex; align-items:flex-start; gap:9px; padding:7px 10px; border-radius:8px; transition:background .18s,color .18s; }
        .toc li a::before { content:''; flex-shrink:0; width:3px; height:3px; border-radius:50%; background:var(--accent); margin-top:8px; }
        .toc li a:hover { background:var(--bg-card2); color:var(--tx-head); }
        .toc li a.active { background:rgba(59,130,246,0.1); color:var(--accent); font-weight:600; }

        /* author */
        .auth-wrap { display:flex; gap:13px; }
        .auth-av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--white); flex-shrink:0; }
        .auth-name { font-size:14px; font-weight:700; color:var(--tx-head); }
        .auth-role { font-size:12px; color:var(--tx-mute); margin-top:2px; }
        .auth-bio { font-size:13px; color:var(--tx-mute); line-height:1.65; margin-top:10px; }

        /* tags */
        .tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
        .tag { padding:5px 13px; border-radius:100px; font-size:12px; font-weight:500; background:var(--bg-card2); color:var(--tx-mute); border:1px solid var(--border); text-decoration:none; transition:all .18s; }
        .tag:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }

        /* related */
        .rel-post { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); text-decoration:none; transition:opacity .18s; }
        .rel-post:last-child { border-bottom:none; padding-bottom:0; }
        .rel-post:hover { opacity:.72; }
        .rp-th { width:58px; height:46px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--white); }
        .rp-th.or { background:linear-gradient(135deg,#c2410c,#F97316); }
        .rp-th.bl { background:linear-gradient(135deg,var(--primary),var(--accent)); }
        .rp-th.gr { background:linear-gradient(135deg,#065f46,#10b981); }
        .rp-ti { font-size:13px; font-weight:600; color:var(--tx-head); line-height:1.45; }
        .rp-dt { font-size:12px; color:var(--tx-mute); margin-top:4px; }

        /* sidebar cta */
        .s-cta { background:linear-gradient(140deg,var(--bg-card2),#0a1a3a); border:1px solid var(--border-md); border-radius:16px; padding:24px; text-align:center; }
        .s-cta-icon { width:48px; height:48px; border-radius:12px; background:rgba(249,115,22,0.15); border:1px solid rgba(249,115,22,0.3); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:20px; color:var(--secondary); }
        .s-cta h4 { font-size:16px; color:var(--tx-head); margin-bottom:8px; }
        .s-cta p { font-size:13px; color:var(--tx-mute); line-height:1.65; margin-bottom:18px; }
        .s-cta a { display:block; background:var(--secondary); color:var(--white); text-decoration:none; padding:11px 20px; border-radius:100px; font-size:14px; font-weight:600; transition:background .2s,transform .2s; }
        .s-cta a:hover { background:#ea6c0b; transform:translateY(-2px); }

        /* float */
        .floats { position:fixed; bottom:28px; right:22px; display:flex; flex-direction:column; gap:12px; z-index:100; }
        .fl-btn { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; text-decoration:none; color:var(--white); box-shadow:0 6px 24px rgba(0,0,0,0.35); transition:transform .2s; }
        .fl-btn:hover { transform:scale(1.1); }
        .fl-btn.wa { background:var(--green); }
        .fl-btn.cl { background:var(--secondary); }

        @media(max-width:960px){ .blog-layout{ grid-template-columns:1fr; } .blog-sidebar{ position:static; } }
        @media(max-width:600px){ .blog-hero{ padding:106px 0 44px; } .blog-concl{ padding:26px 22px; } .blog-intro{ padding:18px 20px; } }