/* === Madel Data — Blog === */
.blog-hero{padding-top:9rem;padding-bottom:3rem;position:relative;overflow:hidden}
.blog-hero .orb{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle, rgba(0,180,255,.25), transparent 70%);top:-180px;right:-120px;pointer-events:none}

/* Filters bar */
.filters-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:1rem 1.25rem;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
.filter-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.filter-tag{padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);color:var(--ink-soft);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:border-color .25s, color .25s, background .25s, transform .25s var(--ease-expo)}
.filter-tag:hover{color:#fff;border-color:rgba(0,180,255,.35)}
.filter-tag.active{background:rgba(0,180,255,.15);border-color:rgba(0,180,255,.5);color:#fff}
.search-input{flex:1;min-width:200px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.65rem 1rem .65rem 2.4rem;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s, background .2s, box-shadow .2s;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8c4' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");background-repeat:no-repeat;background-position:.7rem center;background-size:16px}
.search-input:focus{border-color:rgba(0,180,255,.5);background-color:rgba(0,180,255,.04);box-shadow:0 0 0 4px rgba(0,180,255,.1)}

/* Article grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:1.25rem}
.article-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;transition:border-color .35s, box-shadow .45s var(--ease-expo), transform .35s var(--ease-expo);text-decoration:none;color:inherit}
.article-card:hover{border-color:rgba(0,180,255,.25);box-shadow:0 30px 60px -30px rgba(0,180,255,.25);transform:translateY(-3px)}
.article-card .cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:#0a1730}
.article-card .cover img,.article-card .cover svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-expo)}
.article-card:hover .cover img{transform:scale(1.04)}
.article-card .body{padding:1.5rem;display:flex;flex-direction:column;flex:1;gap:.65rem}
.article-card .tags{display:flex;flex-wrap:wrap;gap:.35rem}
.article-card .tags .t{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-soft);padding:.18rem .5rem;border-radius:5px;background:rgba(0,180,255,.08);border:1px solid rgba(0,180,255,.2)}
.article-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;line-height:1.2;color:#fff;margin:0;letter-spacing:-.01em}
.article-card .excerpt{color:var(--ink-soft);font-size:14px;line-height:1.6;flex:1}
.article-card .meta{display:flex;align-items:center;gap:1rem;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.04em;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.05);margin-top:.5rem}

.blog-empty{text-align:center;padding:4rem 2rem;color:var(--ink-soft);border:1px dashed rgba(255,255,255,.1);border-radius:14px}
.blog-loading{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:1.25rem}
.blog-loading .skel{border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005))}
.blog-loading .skel .sk-cover{aspect-ratio:16/9;background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03));background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.blog-loading .skel .sk-body{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.blog-loading .skel .sk-line{height:14px;background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03));background-size:200% 100%;border-radius:4px;animation:shimmer 1.6s ease-in-out infinite}
.blog-loading .skel .sk-line.w-60{width:60%}
.blog-loading .skel .sk-line.w-90{width:90%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Article page ===== */
.article-hero{padding-top:8rem;padding-bottom:2rem}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-dim)}
.article-meta .sep{opacity:.4}
.article-meta .author{color:var(--ink-soft)}
.article-cover{margin:2.5rem auto 0;max-width:1100px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);aspect-ratio:21/9;background:#0a1730}
.article-cover img,.article-cover svg{width:100%;height:100%;object-fit:cover;display:block}

.article-body{max-width:760px;margin:0 auto;padding:3rem 0;font-family:'Inter',sans-serif;font-size:18px;line-height:1.75;color:#dbe2f0}
.article-body > * + *{margin-top:1.4rem}
.article-body p{color:#dbe2f0}
.article-body p strong{color:#fff}
.article-body p a{color:var(--cyan-soft);text-decoration:underline;text-decoration-color:rgba(0,180,255,.4);text-underline-offset:3px;transition:color .2s, text-decoration-color .2s}
.article-body p a:hover{color:#fff;text-decoration-color:var(--cyan)}
.article-body h2{font-family:'Space Grotesk',sans-serif;font-size:2rem;line-height:1.15;color:#fff;letter-spacing:-.02em;margin-top:3rem;margin-bottom:.4rem;font-weight:600}
.article-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;line-height:1.2;color:#fff;letter-spacing:-.01em;margin-top:2.2rem;margin-bottom:.2rem;font-weight:600}
.article-body h4{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;color:#fff;margin-top:1.6rem;font-weight:600}
.article-body ul,.article-body ol{padding-left:1.5rem;color:#dbe2f0}
.article-body ul li,.article-body ol li{margin-top:.6rem;padding-left:.3rem}
.article-body ul li::marker{color:var(--cyan-soft)}
.article-body ol li::marker{color:var(--cyan-soft);font-family:'Space Grotesk',sans-serif;font-weight:600}

.article-body blockquote{margin:2rem 0;padding:1.25rem 1.5rem;border-left:3px solid var(--cyan);background:rgba(0,180,255,.05);border-radius:0 10px 10px 0;font-style:italic;color:#fff;font-size:1.1rem;line-height:1.55}
.article-body blockquote .src{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);margin-top:.65rem;letter-spacing:.03em}

.article-body pre{margin:1.75rem 0;background:#070f24;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1.1rem 1.25rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.6;color:#dbe2f0;position:relative}
.article-body pre .lang{position:absolute;top:.55rem;right:.85rem;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.article-body pre code{font-family:inherit;color:inherit}
.article-body p code, .article-body li code{font-family:'JetBrains Mono',monospace;font-size:.85em;background:rgba(0,180,255,.08);border:1px solid rgba(0,180,255,.18);color:#bfe3ff;padding:.1rem .4rem;border-radius:4px}

.article-body figure{margin:2rem 0}
.article-body figure img{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.article-body figure figcaption{margin-top:.6rem;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);text-align:center}

.article-body .callout{margin:2rem 0;padding:1.2rem 1.4rem;border-radius:12px;border:1px solid rgba(0,180,255,.25);background:linear-gradient(180deg, rgba(0,180,255,.08), rgba(0,180,255,.02));color:#dbe2f0;display:flex;gap:.85rem;align-items:flex-start}
.article-body .callout::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--cyan);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");background-position:center;background-repeat:no-repeat;background-size:14px;margin-top:.1rem}
.article-body .callout.warn{border-color:rgba(245,158,11,.4);background:linear-gradient(180deg, rgba(245,158,11,.1), rgba(245,158,11,.02))}
.article-body .callout.warn::before{background:#f59e0b;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'><path d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>")}
.article-body .callout.success{border-color:rgba(16,185,129,.4);background:linear-gradient(180deg, rgba(16,185,129,.1), rgba(16,185,129,.02))}
.article-body .callout.success::before{background:#10b981;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>")}

/* Share row */
.share-row{display:flex;align-items:center;gap:.65rem;margin:1.5rem 0;padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.share-row .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-right:.5rem}
.share-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);display:grid;place-items:center;color:var(--ink-soft);transition:border-color .25s, color .25s, background .25s, transform .2s}
.share-btn:hover{border-color:rgba(0,180,255,.4);color:#fff;background:rgba(0,180,255,.06);transform:translateY(-1px)}

/* Author bio */
.author-bio{display:flex;gap:1rem;align-items:center;padding:1.5rem;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02);margin-top:1rem}
.author-bio .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, var(--cyan-soft), var(--cyan));display:grid;place-items:center;color:#04111f;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;flex-shrink:0}
.author-bio .name{color:#fff;font-weight:600;font-family:'Space Grotesk',sans-serif}
.author-bio .role{color:var(--ink-soft);font-size:13.5px;line-height:1.55}

/* Related articles */
.related-articles{max-width:1240px;margin:4rem auto 0;padding:0 1.5rem}
.related-articles h3{font-family:'Space Grotesk',sans-serif;color:#fff;font-size:1.5rem;margin-bottom:1.25rem}

/* 404 */
.blog-404{text-align:center;padding:6rem 2rem;max-width:600px;margin:0 auto}
.blog-404 h1{font-family:'Space Grotesk',sans-serif;font-size:5rem;color:var(--cyan-soft);margin:0;letter-spacing:-.04em}
.blog-404 p{color:var(--ink-soft);margin-top:1rem;font-size:18px;line-height:1.6}

@media (max-width: 720px){
  .article-body{font-size:17px;padding:2rem 0}
  .article-body h2{font-size:1.6rem;margin-top:2.2rem}
  .article-body h3{font-size:1.25rem}
  .article-cover{aspect-ratio:16/9;margin-top:1.5rem}
}