/* Blog listing + article pages. Loaded after services.css (navbar, footer, tokens). */
.blog-page main{ display:block; }
.blog-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:64px 24px 76px;
  background:linear-gradient(160deg,#071238 0%,#0B1F6B 55%,#0E2A80 130%);
}
.blog-hero .service-grid-bg{
  -webkit-mask-image:radial-gradient(70% 90% at 30% 20%, #000 0%, transparent 75%); mask-image:radial-gradient(70% 90% at 30% 20%, #000 0%, transparent 75%);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
}
.blog-hero::after{ content:""; position:absolute; right:-140px; top:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(27,156,255,.35),transparent 70%); pointer-events:none; }
.blog-hero-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.blog-hero h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.1; letter-spacing:-.03em; margin:14px 0 14px; color:#fff; }
.blog-hero h1::after{ content:""; display:block; width:72px; height:5px; margin-top:20px; border-radius:5px; background:linear-gradient(90deg,#1b9cff,#7C93F0); }
.blog-hero p{ max-width:620px; font-size:18px; line-height:1.7; color:rgba(255,255,255,.78); margin:0; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.7); }
.crumbs a{ color:rgba(255,255,255,.9); } .crumbs a:hover{ text-decoration:underline; }
.post-head .crumbs{ color:var(--ink-muted); } .post-head .crumbs a{ color:var(--blue-primary); }

.blog-list{ max-width:1180px; margin:0 auto; padding:56px 24px 72px; }
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #E3E8FA; border-radius:22px; overflow:hidden; box-shadow:0 1px 2px rgba(11,31,107,.04),0 18px 30px -26px rgba(11,31,107,.4); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.post-card:hover{ transform:translateY(-6px); border-color:rgba(43,78,224,.3); box-shadow:0 30px 46px -26px rgba(18,46,140,.5); }
.post-card-media{ display:block; aspect-ratio:16/9; background:linear-gradient(140deg,#E8ECFC,#F6F8FF); overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.post-card:hover .post-card-media img{ transform:scale(1.05); }
.post-card-ph{ display:grid; place-items:center; width:100%; height:100%; color:#9DB2F5; } .post-card-ph svg{ width:46px; height:46px; }
.post-card-body{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1; }
.post-cat{ align-self:flex-start; padding:5px 12px; border-radius:999px; background:var(--badge-bg); color:var(--blue-primary); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.post-card-title{ margin:0; font-size:20px; line-height:1.3; letter-spacing:-.01em; } .post-card-title a{ color:var(--ink); } .post-card-title a:hover{ color:var(--blue-signal); }
.post-card-ex{ margin:0; color:var(--ink-muted); font-size:15px; line-height:1.65; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-meta{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-muted); }
.pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:44px; }
.pager-n,.pager-a{ min-width:42px; padding:10px 16px; border-radius:12px; border:1px solid #E3E8FA; background:#fff; color:var(--ink); font-weight:600; text-align:center; }
.pager-n:hover,.pager-a:hover{ border-color:var(--blue-signal); color:var(--blue-signal); }
.pager-n.is-current{ background:linear-gradient(135deg,#1b9cff,#2B4EE0); color:#fff; border-color:transparent; }
.blog-empty{ text-align:center; padding:56px 20px; border:1px dashed #cfd7f2; border-radius:22px; background:#fff; }
.blog-empty h2{ margin:0 0 8px; } .blog-empty p{ color:var(--ink-muted); margin:0 0 20px; }
.blog-btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:999px; background:var(--blue-deep); color:#fff; font-weight:700; box-shadow:0 16px 30px -14px rgba(11,31,107,.7); transition:transform .25s ease; white-space:nowrap; }
.blog-btn:hover{ transform:translateY(-3px); color:#fff; }

/* article */
.preview-bar{ background:#FFF3DA; color:#8a5a00; text-align:center; padding:10px 16px; font-size:14px; border-bottom:1px solid #f2dca8; }
.post{ max-width:820px; margin:0 auto; padding:44px 24px 40px; }
.post-head h1{ font-size:clamp(30px,4.2vw,46px); line-height:1.15; letter-spacing:-.025em; color:var(--ink); margin:14px 0 22px; }
.post-head .post-cat{ margin-top:18px; }
.post-byline{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.post-byline strong{ display:block; color:var(--ink); } .post-byline span{ font-size:14px; color:var(--ink-muted); }
.post-byline span.post-avatar{ color:#fff; font-size:17px; }
.post-head .post-cat{ display:inline-block; margin:16px 0 0; }
.post-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(140deg,#1b9cff,#2B4EE0); color:#fff; display:grid; place-items:center; font-weight:800; flex:none; }
.post-hero{ margin:0 0 34px; } .post-hero img{ width:100%; height:auto; display:block; border-radius:22px; border:1px solid #E3E8FA; box-shadow:0 30px 50px -34px rgba(11,31,107,.5); }
.post-content{ font-size:18px; line-height:1.85; color:#2a3358; }
.post-content > *:first-child{ margin-top:0; }
.post-content h2{ font-size:30px; line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin:1.8em 0 .6em; }
.post-content h3{ font-size:23px; line-height:1.3; color:var(--ink); margin:1.6em 0 .5em; }
.post-content h4{ font-size:19px; color:var(--ink); margin:1.4em 0 .4em; }
.post-content p{ margin:0 0 1.3em; }
.post-content a{ color:var(--blue-signal); text-decoration:underline; text-underline-offset:3px; } .post-content a:hover{ color:var(--blue-deep); }
.post-content ul,.post-content ol{ margin:0 0 1.4em; padding-left:1.4em; } .post-content li{ margin:.45em 0; }
.post-content blockquote{ margin:1.6em 0; padding:1em 1.4em; border-left:5px solid var(--blue-signal); background:#F4F7FF; border-radius:0 14px 14px 0; color:#1c2a66; font-size:1.05em; }
.post-content img{ max-width:100%; height:auto; border-radius:16px; margin:.6em 0; display:block; }
.post-content figure{ margin:1.6em 0; } .post-content figcaption{ font-size:14px; color:var(--ink-muted); text-align:center; margin-top:8px; }
.post-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:16px; display:block; overflow-x:auto; }
.post-content th,.post-content td{ border:1px solid #E3E8FA; padding:10px 14px; text-align:left; } .post-content th{ background:#F4F7FF; }
.post-content code{ background:#F0F3FF; padding:2px 6px; border-radius:6px; font-size:.9em; } .post-content pre{ background:#0B1F6B; color:#fff; padding:16px 18px; border-radius:14px; overflow:auto; } .post-content pre code{ background:none; color:inherit; }
.post-content hr{ border:0; height:1px; background:#E3E8FA; margin:2em 0; }
.post-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:34px 0 0; }
.post-tags li{ padding:6px 14px; border-radius:999px; background:var(--pill-bg); color:var(--blue-primary); font-size:13px; font-weight:600; }
.post-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; padding:30px 32px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#0B1F6B,#2B4EE0); }
.post-cta h2{ margin:0 0 6px; font-size:24px; color:#fff; } .post-cta p{ margin:0; color:rgba(255,255,255,.8); max-width:460px; }
.post-cta .blog-btn{ background:#fff; color:var(--blue-deep); box-shadow:0 16px 30px -14px rgba(0,0,0,.5); }
.related{ border-top:1px solid #E3E8FA; padding-top:48px; } .related-title{ font-size:28px; letter-spacing:-.02em; margin:0 0 26px; color:var(--ink); }

@media (max-width:980px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .blog-hero{ padding:44px 20px 56px; } .blog-hero p{ font-size:16px; }
  .post-grid{ grid-template-columns:1fr; } .blog-list{ padding:36px 16px 56px; }
  .post{ padding:30px 18px 30px; } .post-content{ font-size:17px; } .post-content h2{ font-size:25px; } .post-cta{ padding:24px 22px; }
}
@media (prefers-reduced-motion: reduce){ .post-card,.post-card-media img{ transition:none; } }

/* ---- blog hero: same split layout as the service pages, with a blog illustration ---- */
.blog-hero2{ padding-bottom:90px; }
.sv-blog .sv-art{ left:78px; right:12px; top:6px; bottom:6px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.sv-blog .sv-art2{ left:0; top:58px; width:150px; height:250px; padding:16px 14px; display:flex; flex-direction:column; gap:10px; transform:rotate(-7deg); z-index:1; opacity:.85; }
.sv-blog .sv-img4{ height:118px; flex:none; }
.sv-cat{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(27,156,255,.35); color:#fff; border:1px solid rgba(255,255,255,.25); }
.sv-blog .sv-h{ height:14px !important; }
.sv-bymeta{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.sv-bymeta .sv-av{ width:32px; height:32px; }
.sv-bymeta > div{ flex:1; display:flex; flex-direction:column; gap:6px; }
.sv-blog .sv-cb{ left:auto; right:-6px; bottom:-14px; }