/* H33 Blog Shared Stylesheet — Externalized for CWV optimization */
:root {
    --primary: #00d9b1;
    --primary-hover: #00a284;
    --primary-glow: rgba(0,217,177,0.15);
    --bg-primary: #0a0a0a;
    --bg-secondary: #111;
    --bg-card: #161616;
    --bg-card-hover: #1c1c1c;
    --border: rgba(255,255,255,0.08);
    --text-primary: #f0f0f0;
    --text-secondary: #999;
    --text-muted: #666;
    --red: #ff4d4d;
    --green: #00d9b1;
    --yellow: #f5a623;
    --blue: #4da6ff;
    --purple: #a855f7;
    --orange: #f97316;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.7; -webkit-font-smoothing:antialiased; }
nav { position:fixed; top:0; width:100%; background:rgba(10,10,10,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:1000; padding:1rem 2rem; }
nav .nav-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.5rem; font-weight:800; color:var(--primary); text-decoration:none; letter-spacing:-0.5px; }
.logo-sub { font-size:0.75rem; color:var(--text-muted); font-weight:500; margin-left:0.75rem; letter-spacing:0.5px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; }
.nav-links a { color:var(--text-secondary); text-decoration:none; margin-left:1.75rem; font-size:0.875rem; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(--primary); }
.nav-cta { background:var(--primary); color:#000 !important; padding:0.45rem 1.1rem; border-radius:6px; font-weight:700 !important; transition:background 0.2s !important; }
.nav-cta:hover { background:var(--primary-hover) !important; }
.breadcrumb { max-width:860px; margin:0 auto; padding:7rem 2rem 0; font-size:0.8rem; color:var(--text-muted); }
.breadcrumb a { color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb span { margin:0 0.4rem; }
.hero { max-width:860px; margin:0 auto; padding:2.5rem 2rem 4rem; }
.post-meta { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.badge { display:inline-block; background:var(--primary-glow); color:var(--primary); padding:0.35rem 0.9rem; border-radius:50px; font-size:0.75rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border:1px solid rgba(0,217,177,0.2); }
.post-date { font-size:0.82rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.read-time { font-size:0.82rem; color:var(--text-muted); }
.hero h1 { font-size:clamp(2rem,4.5vw,3rem); font-weight:900; line-height:1.1; letter-spacing:-1.5px; margin-bottom:1.5rem; }
.hero h1 .accent { background:linear-gradient(135deg,var(--primary),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-lead { font-size:1.15rem; color:var(--text-secondary); max-width:720px; line-height:1.75; margin-bottom:2.5rem; }
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:14px; overflow:hidden; margin-bottom:1rem; }
.hstat { background:var(--bg-card); padding:1.5rem 1rem; text-align:center; }
.hstat-val { font-size:1.6rem; font-weight:800; color:var(--primary); font-family:'JetBrains Mono',monospace; line-height:1; }
.hstat-label { font-size:0.72rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; margin-top:0.4rem; font-weight:500; }
.article { max-width:860px; margin:0 auto; padding:0 2rem; }
.article h2 { font-size:1.65rem; font-weight:800; letter-spacing:-0.5px; margin:3.5rem 0 1.25rem; color:var(--text-primary); border-left:3px solid var(--primary); padding-left:1rem; }
.article h3 { font-size:1.15rem; font-weight:700; margin:2.25rem 0 0.9rem; color:var(--text-primary); }
.article h4 { font-size:1rem; font-weight:700; margin:1.75rem 0 0.75rem; color:var(--text-primary); }
.article p { margin-bottom:1.25rem; color:var(--text-secondary); font-size:1rem; }
.article p strong { color:var(--text-primary); font-weight:600; }
.article p code, .article li code { font-family:'JetBrains Mono',monospace; font-size:0.85rem; background:rgba(255,255,255,0.06); padding:0.15rem 0.45rem; border-radius:4px; color:var(--primary); }
.article ul, .article ol { padding-left:1.5rem; margin-bottom:1.25rem; }
.article li { color:var(--text-secondary); margin-bottom:0.5rem; font-size:1rem; }
.article li strong { color:var(--text-primary); }
.article a { color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(0,217,177,0.2); }
.article a:hover { border-bottom-color:var(--primary); }
.article blockquote { border-left:3px solid var(--primary); padding:1rem 1.5rem; margin:1.5rem 0; background:rgba(255,255,255,0.02); border-radius:0 8px 8px 0; }
.article blockquote p { color:var(--text-secondary); margin:0; }
.article img { max-width:100%; border-radius:12px; margin:1.5rem 0; }
.article hr { border:none; border-top:1px solid var(--border); margin:3rem 0; }
.article pre { background:#0d0d0d; border:1px solid var(--border); border-radius:12px; padding:1.5rem; overflow-x:auto; margin:1.75rem 0; font-family:'JetBrains Mono',monospace; font-size:0.83rem; line-height:1.75; }
.article pre code { background:none; padding:0; border-radius:0; color:var(--text-secondary); font-size:0.83rem; }
.article table { width:100%; border-collapse:collapse; font-size:0.9rem; margin:2rem 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.article thead th { background:var(--bg-secondary); color:var(--text-secondary); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; padding:0.9rem 1.25rem; text-align:left; font-weight:600; border-bottom:1px solid var(--border); }
.article td { padding:0.8rem 1.25rem; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text-secondary); }
.article tbody tr:last-child td { border-bottom:none; }
.article tbody tr:hover { background:rgba(255,255,255,0.02); }
.article sup { font-size:0.7em; }
.highlight-box,.key-point,.info-box { background:linear-gradient(135deg,rgba(0,217,177,0.15),rgba(77,166,255,0.07)); border:1px solid rgba(0,217,177,0.2); border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.highlight-box h4,.key-point h4,.info-box h4 { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--primary); margin-bottom:0.75rem; }
.highlight-box p,.key-point p,.info-box p { color:var(--text-secondary); margin-bottom:0.5rem; }
.highlight-box p:last-child,.key-point p:last-child { margin-bottom:0; }
.verdict-box { background:linear-gradient(135deg,rgba(0,217,177,0.07),rgba(77,166,255,0.07)); border:1px solid rgba(0,217,177,0.18); border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.verdict-box h4 { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--green); margin-bottom:0.75rem; }
.verdict-box p { color:var(--text-secondary); }
.warning-box { background:rgba(245,166,35,0.07); border:1px solid rgba(245,166,35,0.2); border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.warning-box h4 { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--yellow); margin-bottom:0.75rem; }
.warning-box p { color:var(--text-secondary); }
.math-row { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.math-row:last-child { border-bottom:none; }
.math-label { color:var(--text-secondary); font-size:0.9rem; }
.math-value { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--primary); font-size:0.9rem; }
.perf-table,.comparison-table { width:100%; border-collapse:collapse; margin:2rem 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.perf-table th,.comparison-table th { background:var(--bg-secondary); color:var(--text-secondary); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; padding:0.9rem 1.25rem; text-align:left; font-weight:600; }
.perf-table td,.comparison-table td { padding:0.8rem 1.25rem; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text-secondary); }
.code-example { background:#0d0d0d; border:1px solid var(--border); border-radius:12px; margin:1.75rem 0; overflow:hidden; }
.code-example pre { margin:0; border:none; border-radius:0; }
.step,.step-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; margin:1rem 0; }
.step h4,.step-card h4 { color:var(--primary); font-weight:700; margin-bottom:0.5rem; }
.features-grid,.cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:2rem 0; }
.feature-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.feature-card h4 { color:var(--primary); font-weight:700; margin-bottom:0.5rem; font-size:0.9rem; }
.feature-card p { color:var(--text-secondary); font-size:0.9rem; margin:0; }
.table-wrap { overflow-x:auto; margin:2rem 0; border-radius:12px; border:1px solid var(--border); }
.table-wrap table { margin:0; border:none; border-radius:0; }
.callout { background:linear-gradient(135deg,rgba(0,217,177,0.15),rgba(77,166,255,0.07)); border:1px solid rgba(0,217,177,0.2); border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.callout-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--primary); margin-bottom:0.6rem; }
.callout p { margin:0; color:var(--text-secondary); }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; margin:2rem 0; }
.card h4 { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--primary); margin-bottom:1.25rem; }
.bench-row { margin-bottom:1.1rem; }
.bench-label { display:flex; justify-content:space-between; margin-bottom:0.35rem; font-size:0.85rem; }
.bench-name { color:var(--text-secondary); }
.bench-val { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--text-primary); }
.bench-track { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.bench-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--primary),var(--blue)); }
.cta-section { background:linear-gradient(135deg,rgba(0,217,177,0.15),rgba(77,166,255,0.07)); border-top:1px solid rgba(0,217,177,0.2); border-bottom:1px solid rgba(0,217,177,0.2); padding:4rem 2rem; text-align:center; margin:3rem 0; }
.cta-section h2 { font-size:1.75rem; font-weight:800; letter-spacing:-0.5px; margin-bottom:0.75rem; }
.cta-section p { color:var(--text-secondary); max-width:550px; margin:0 auto 2rem; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; gap:0.5rem; background:var(--primary); color:#000; padding:0.75rem 1.75rem; border-radius:8px; font-weight:700; font-size:0.95rem; text-decoration:none; transition:background 0.2s; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; color:var(--text-primary); padding:0.75rem 1.75rem; border-radius:8px; font-weight:600; font-size:0.95rem; text-decoration:none; border:1px solid var(--border); transition:border-color 0.2s; }
.btn-secondary:hover { border-color:rgba(255,255,255,0.2); }
.related { max-width:860px; margin:4rem auto 0; padding:0 2rem 5rem; }
.related h3 { font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:1.25rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.related-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.25rem; text-decoration:none; transition:border-color 0.2s,background 0.2s; display:block; }
.related-card:hover { border-color:rgba(0,217,177,0.2); background:var(--bg-card-hover); }
.related-tag { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--primary); margin-bottom:0.5rem; }
.related-title { font-size:0.88rem; font-weight:600; color:var(--text-primary); line-height:1.45; }
footer { border-top:1px solid var(--border); padding:3rem 2rem; text-align:center; color:var(--text-muted); font-size:0.85rem; }
footer a { color:var(--text-muted); text-decoration:none; }
footer a:hover { color:var(--primary); }
.footer-links { display:flex; gap:2rem; justify-content:center; margin-bottom:1.25rem; flex-wrap:wrap; }
@media (max-width:768px) {
    .hero-stats { grid-template-columns:repeat(2,1fr); }
    .related-grid { grid-template-columns:1fr; }
    .nav-links { display:none; }
    .hero h1 { font-size:1.8rem; }
    .features-grid,.cards-grid { grid-template-columns:1fr; }
}