:root {
  --dark-bg:#080c1a; --light-bg:#f0f4ff; --surface:#ffffff; --surface-2:#f8faff;
  --border:#e0e7ff; --border-2:#c7d2fe;
  --accent:#4f46e5; --accent-d:#3730a3; --accent-2:#818cf8;
  --green:#10b981; --orange:#f59e0b; --red:#ef4444;
  --text:#0f172a; --text-2:#475569; --muted:#94a3b8;
  --max:1140px; --r:12px; --r-lg:20px; --r-xl:28px; --r-sm:8px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 40px rgba(15,23,42,.1);
  --t-fast:150ms cubic-bezier(.4,0,.2,1);
  --t-base:280ms cubic-bezier(.4,0,.2,1);
  --t-slow:480ms cubic-bezier(.4,0,.2,1);
  --t-spring:500ms cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--dark-bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent-d);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1100px;margin:0 auto;padding:0 24px}
/* ── HEADER ── */
header.site{position:sticky;top:0;z-index:200;background:rgba(8,12,26,.92);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.07);transition:background var(--t-base),border-color var(--t-base)}
.topbar{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 24px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:#fff;text-decoration:none;flex-shrink:0;transition:opacity var(--t-fast)}
.brand:hover{opacity:.85;text-decoration:none}
.brand .mono{font-family:"Roboto Mono",monospace;font-weight:600;color:var(--accent-2)}
.brand svg{transition:transform var(--t-spring)}
.brand:hover svg{transform:rotate(20deg) scale(1.1)}
nav.menu{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
nav.menu a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:8px;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
nav.menu a:hover{background:rgba(255,255,255,.08);color:#fff}
nav.menu a.active{background:rgba(99,102,241,.2);color:var(--accent-2)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);cursor:pointer;padding:0 11px;flex-shrink:0;transition:background var(--t-fast)}
.burger:hover{background:rgba(255,255,255,.14)}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform var(--t-base),opacity var(--t-base);transform-origin:center}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;overflow:hidden;max-height:0;border-top:1px solid transparent;background:rgba(8,12,26,.97);transition:max-height var(--t-slow),border-color var(--t-base)}
.mobile-nav.open{max-height:600px;border-color:rgba(255,255,255,.08)}
.mobile-nav-list{list-style:none;padding:8px 0 4px}
.mobile-nav-list li{border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-nav-list li:last-child{border-bottom:none}
.mobile-nav-list a{display:block;padding:14px 24px;color:rgba(255,255,255,.8);font-size:15px;font-weight:500;text-decoration:none;transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-base)}
.mobile-nav-list a:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:30px}
.mobile-nav-list a.active{color:var(--accent-2);background:rgba(99,102,241,.12);font-weight:700}
/* ── DARK HERO ── */
.page-hero-dark{background:var(--dark-bg);background-image:radial-gradient(ellipse 90% 70% at 50% -5%,rgba(79,70,229,.4) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 85% 60%,rgba(99,102,241,.15) 0%,transparent 55%),radial-gradient(ellipse 45% 55% at 5% 80%,rgba(79,70,229,.12) 0%,transparent 50%);position:relative;overflow:visible}
.page-hero-inner{max-width:var(--max);margin:0 auto;padding:0 24px 100px}
.page-hero-wave{position:relative;line-height:0;margin-bottom:-1px}
.page-hero-wave svg{width:100%;height:90px;display:block}
/* ── ARTICLE HERO ── */
.article-hero{padding:44px 0 28px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.meta-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.meta-time{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.4)}
.meta-date{font-size:13px;color:rgba(255,255,255,.35)}
.meta-sep{color:rgba(255,255,255,.2)}
.article-hero h1{font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:#ffffff;margin-bottom:18px}
.article-lead{font-size:clamp(15px,1.8vw,18px);color:rgba(220,225,255,.9)!important;line-height:1.75;border-left:3px solid var(--accent-2);padding:14px 20px;background:rgba(99,102,241,.1);border-radius:0 var(--r-lg) var(--r-lg) 0}
/* ── COVER IMAGES ── */
.article-cover{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 64px rgba(0,0,0,.55);margin:28px 0}
.article-cover-wrap{border-radius:20px;overflow:hidden;margin:0 0 28px;aspect-ratio:21/8;box-shadow:0 8px 32px rgba(15,23,42,.15)}
.article-cover-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.article-cover:hover img{transform:scale(1.02)}
/* ── ARTICLE BODY (light area) ── */
main{background:var(--light-bg)}
main .wrap{padding-top:12px;padding-bottom:64px}
.article-body{padding:8px 0 40px}
.article-body h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--text);letter-spacing:-.025em;line-height:1.25;margin:36px 0 12px;padding-top:8px;border-top:1px solid var(--border)}
.article-body h2:first-child{margin-top:0;border-top:none}
.article-body h3{font-size:clamp(16px,1.8vw,19px);font-weight:700;color:var(--text);margin:26px 0 10px;line-height:1.35}
.article-body p{margin:0 0 14px;font-size:16px;color:var(--text-2);line-height:1.8}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 16px}
.article-body li{margin-bottom:8px;font-size:15px;color:var(--text-2);line-height:1.75}
.ai-def{display:none}
.ai-def::before{content:"AI·definition";display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);background:rgba(79,70,229,.08);border:1px solid rgba(79,70,229,.2);border-radius:999px;padding:3px 10px;margin-bottom:10px}
.ai-def p{margin:0;font-size:15px;color:var(--text-2);line-height:1.75}
.callout{background:rgba(79,70,229,.04);border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 var(--r-lg) var(--r-lg) 0;margin:18px 0;font-size:15px;color:var(--text);font-weight:600;line-height:1.65}
.article-cta{background:linear-gradient(135deg,rgba(79,70,229,.06),rgba(124,58,237,.04));border:1px solid rgba(79,70,229,.15);border-radius:var(--r-xl);padding:20px 24px;margin:24px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-cta p{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.article-cta a{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;color:#fff!important;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;box-shadow:0 4px 16px rgba(79,70,229,.35);transition:transform var(--t-spring),box-shadow var(--t-base)}
.article-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,70,229,.5);text-decoration:none}
.sources-block{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 24px;margin-top:40px}
.sources-block h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.sources-block ol{padding-left:20px;margin:0}
.sources-block li{margin-bottom:8px;font-size:13px;color:var(--muted);line-height:1.6}
.sources-block a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(100,116,139,.35)}
.sources-block a:hover{color:var(--accent)}
.key-points{background:#f8faff;border:1px solid var(--border-2);border-radius:var(--r-xl);padding:24px 28px;margin:32px 0}
.key-points h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px}
.key-points ul{padding-left:0;margin:0;list-style:none}
.key-points li{padding:8px 0 8px 22px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-2);line-height:1.65;position:relative}
.key-points li:last-child{border-bottom:none}
.key-points li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.table-wrap{border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);margin:18px 0}
.table-wrap table{width:100%;border-collapse:collapse;min-width:480px}
.table-wrap th{background:#f0f4ff;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:12px 15px;border-bottom:1px solid var(--border);text-align:left}
.table-wrap td{padding:12px 15px;font-size:14px;color:var(--text-2);border-bottom:1px solid #f0f4ff;vertical-align:top}
.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover td{background:#f8faff}
@media(max-width:600px){.table-wrap{overflow-x:auto}.table-wrap table{min-width:400px}}
details{background:#fafbff;border:1px solid var(--border);border-radius:var(--r-lg);margin:10px 0;transition:box-shadow var(--t-base),border-color var(--t-base)}
details[open]{border-color:var(--border-2);box-shadow:0 0 0 3px rgba(79,70,229,.06)}
details summary{cursor:pointer;font-weight:600;font-size:15px;color:#1e293b;padding:15px 20px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;outline:none;user-select:none;transition:background var(--t-fast)}
details summary:hover{background:#f0f4ff}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:20px;font-weight:300;color:var(--accent);flex-shrink:0;transition:transform var(--t-base);line-height:1}
details[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:4px 20px 16px;color:var(--text-2);font-size:14px;line-height:1.78;animation:faqOpen .22s ease}
@keyframes faqOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.visible{opacity:1;transform:translateY(0)}
footer.foot{background:#080c1a;border-top:none;padding:64px 24px 48px;color:#94a3b8;font-size:14px}
.foot-grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:48px}
.foot-col{flex:1 1 180px}
.foot-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#e2e8f0;font-weight:700;margin-bottom:14px}
.foot-col p{margin-bottom:8px;color:#64748b}
.foot-col ul{list-style:none}
.foot-col ul li{margin-bottom:10px}
.foot-col ul a{color:#64748b;transition:color var(--t-fast)}
.foot-col ul a:hover{color:#e2e8f0;text-decoration:none}
.foot-bottom{max-width:1100px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#475569}
.foot-bottom a{color:#475569;transition:color var(--t-fast)}
.foot-bottom a:hover{color:#e2e8f0}
#back-to-top{position:fixed;bottom:28px;right:24px;z-index:300;width:46px;height:46px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(79,70,229,.4);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity var(--t-base),transform var(--t-spring),background var(--t-fast)}
#back-to-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#back-to-top:hover{background:var(--accent-d);transform:translateY(-2px) scale(1.05)}
@media(max-width:860px){nav.menu{display:none}.burger{display:flex}.mobile-nav{display:block}}
@media(max-width:600px){.wrap{padding:0 16px}.wrap-wide{padding:0 16px}.article-hero h1{font-size:24px}footer.foot{padding:32px 16px}.foot-grid{gap:22px}.foot-bottom{flex-direction:column;text-align:center}#back-to-top{right:14px;bottom:16px}}
.page-hero-dark--sm .page-hero-inner { padding-bottom: 60px; }
.page-hero-dark--sm .article-hero { padding: 36px 0 20px; }
main { background: #f0f4ff; color: #0f172a; }
main .wrap { color: #0f172a; }
main .wrap { padding-top: 0; padding-bottom: 56px; }
main > .wrap > div[style*="aspect-ratio:21/8"] { border-radius: 24px !important; border: 1px solid #e0e7ff !important; box-shadow: 0 8px 32px rgba(79,70,229,.1) !important; margin: 28px 0 !important; }
.article-body { background: transparent; }
.article-cover-wrap { border-radius: 22px; overflow: hidden; margin: 0 0 28px; aspect-ratio: 21/8; box-shadow: 0 8px 32px rgba(15,23,42,.12); border: none; }
.article-cover-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.article-cover-wrap--audit { aspect-ratio: 21/7; margin: 20px 0 28px; }
.article-mid-img { border-radius: 18px; overflow: hidden; margin: 28px 0 32px; aspect-ratio: 16/6; box-shadow: 0 4px 20px rgba(15,23,42,.08); border: 1px solid #e0e7ff; }
.article-mid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-logo { height: 40px; width: auto; display: block; filter: brightness(1.1); transition: opacity 150ms ease; }
.brand:hover .brand-logo { opacity: .85; }
.article-body h2 { color: #0f172a; }
.article-body h3 { color: #1e293b; }
.article-body p, .article-body li { color: #374151; }
.article-body a { color: #4f46e5; }
.article-body strong { color: #1e293b; }
.faq-body p { color: #374151; }
.faq-body a { color: #4f46e5; }
.sources-block li, .sources-block li a { color: #64748b; }
.key-points li { color: #374151; }
.callout { color: #1e293b; }
.ai-def p { color: #1e293b; }
.article-body,.article-body h2,.article-body h3,.article-body p,.article-body li,.article-body ul,.article-body ol,.article-body strong,.article-body em,.ai-def p,.callout,.key-points li,.key-points h3,.faq-body,.faq-body p,.sources-block li,.sources-block h3,.article-cta p,details summary,.table-wrap td,.table-wrap th { color: initial; }
.article-body h2 { color: #0f172a !important; }
.article-body h3 { color: #1e293b !important; }
.article-body p { color: #374151 !important; }
.article-body li { color: #374151 !important; }
.article-body strong { color: #1e293b !important; }
.ai-def p { color: #1e293b !important; }
.callout { color: #1e293b !important; }
.key-points li { color: #374151 !important; }
.key-points h3 { color: #64748b !important; }
.faq-body { color: #374151 !important; }
details summary { color: #1e293b !important; }
.table-wrap td { color: #374151 !important; }
.table-wrap th { color: #4f46e5 !important; }
.sources-block li { color: #6b7280 !important; }
.sources-block h3 { color: #94a3b8 !important; }
.article-cta p { color: #0f172a !important; }
.ref a { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:rgba(79,70,229,.08); border:1px solid rgba(79,70,229,.22); border-radius:50%; font-size:11px; font-weight:700; color:var(--accent); text-decoration:none; margin-left:2px; vertical-align:middle; cursor:pointer; transition:background .15s; }
.ref a:hover { background:rgba(79,70,229,.16); text-decoration:none; }
header.site .topbar { align-items: center !important; padding: 13px 24px !important; }
header.site .brand  { display: flex !important; align-items: center !important; flex-shrink: 0 !important; gap: 10px !important; }
header.site .brand-logo { height: 40px !important; width: auto !important; display: block !important; flex-shrink: 0 !important; }
.ref-tooltip { position: fixed; z-index: 9999; max-width: 280px; background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-family: Inter, system-ui, sans-serif; color: #e2e8f0; line-height: 1.55; white-space: normal; box-shadow: 0 8px 32px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; }
.ref-tooltip.visible { opacity: 1; transform: translateY(0); }
details { overflow: visible; }
.faq-body { display: none; padding: 0 20px 18px; }
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-lg); margin: 24px 0; font-size: 15px; line-height: 1.65; color: var(--text) !important; border-left: none; background: none; }
.callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; line-height: 1; }
.callout > div { flex: 1; min-width: 0; }
.callout p { margin: 0 !important; font-size: 14px !important; line-height: 1.7 !important; }
.callout strong { display: block; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; color: inherit !important; }
.callout--warn { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.28); color: #78350f !important; }
.callout--warn strong { color: #92400e !important; }
.callout--info { background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.22); color: var(--text) !important; }
.callout--info strong { color: var(--accent) !important; }
.callout--tip { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.28); color: #064e3b !important; }
.callout--tip strong { color: #065f46 !important; }
.callout--alert { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.22); color: #7f1d1d !important; }
.callout--alert strong { color: #991b1b !important; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.two-col > div { background: var(--surface, #fff); border: 1px solid var(--border, #e0e7ff); border-radius: var(--r-lg); padding: 18px 20px; }
.two-col > div > p { margin: 0 !important; font-size: 14px !important; color: #374151 !important; line-height: 1.7 !important; }
.two-col > div > p + p { margin-top: 8px !important; }
.two-col h4 { font-size: 11px !important; font-weight: 700 !important; color: var(--accent) !important; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px !important; line-height: 1.4 !important; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.cta-related { background: linear-gradient(135deg,rgba(79,70,229,.1),rgba(124,58,237,.08)); border: 1px solid rgba(79,70,229,.25); border-radius: var(--r-xl); padding: 20px 24px; margin: 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-related__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-2, #818cf8); margin: 0 0 6px; }
.cta-related__title { font-size: 15px; font-weight: 700; color: var(--text, #0f172a); margin: 0 0 4px; }
.cta-related__desc { font-size: 13px; color: var(--text-2, #475569); margin: 0; }
.cta-related a.cta-related__btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg,#4f46e5,#7c3aed) !important; color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(79,70,229,.35); flex-shrink: 0; transition: transform var(--t-spring), box-shadow var(--t-base); }
.cta-related a.cta-related__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,70,229,.5); text-decoration: none; }
.ref-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin: 0 2px; vertical-align: middle; background: rgba(79,70,229,.10); border: 1px solid rgba(79,70,229,.30); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--accent, #4f46e5); font-style: normal; line-height: 1; cursor: help; transition: background .15s, border-color .15s; }
.ref-inline:hover { background: rgba(79,70,229,.18); border-color: rgba(79,70,229,.5); }
.page-hero-dark .ref-inline, .article-lead .ref-inline { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); color: #c7d2fe; }
.page-hero-dark .ref-inline:hover, .article-lead .ref-inline:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.5); color: #fff; }
@media(max-width:680px){.asc-grid{grid-template-columns:1fr!important;}}
.bc-nav { background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.bc-wrap { padding-top: 10px; padding-bottom: 10px; }
.bc-list { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: rgba(255,255,255,.55); }
.bc-link { color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; }
.bc-link:hover { color: #fff; }
.bc-sep { opacity: .4; }
.bc-current { color: rgba(255,255,255,.9); }
.float-img-right { float: right; width: 42%; max-width: 380px; margin: 4px 0 20px 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(15,23,42,.12); border: 1px solid var(--border,#e2e8f0); }
.float-img-right--sm { float: right; width: 35%; max-width: 300px; margin: 4px 0 16px 24px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(15,23,42,.10); border: 1px solid var(--border,#e2e8f0); }
.float-img-right--no-top { float: right; width: 42%; max-width: 380px; margin: 0 0 20px 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(15,23,42,.12); border: 1px solid var(--border,#e2e8f0); }
.float-img-right img, .float-img-right--sm img, .float-img-right--no-top img { width: 100%; display: block; }
.art-tag-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; }
.il-clear { clear: both; }
.il-hidden { display: none; }
.il-gap-8 { gap: 8px; }
.il-margin-24 { margin: 24px 0; }
.il-margin-28 { margin: 28px 0; }
.il-p-clear { margin: 0; }
.il-span-45 { width: 45%; display: inline-block; color: rgba(255,255,255,.55); font-size: 13px; }
.article-body .il-span-45, main .il-span-45:not(.page-hero-dark *) { color: var(--text-2, #475569); }
.il-span-dim { opacity: .6; }
.il-text-muted { color: var(--muted,#94a3b8); font-size: 13px; }
.il-text-muted-sm { color: var(--muted,#94a3b8); font-size: 12px; }
.il-text-sub { font-size: 13px; color: var(--text-2,#475569); }
.il-svg-full { width: 100%; height: auto; display: block; }
.il-div-transparent { background: transparent; }
.il-nav-top { margin-top: 0; }
.il-a-accent { color: var(--accent,#4f46e5); text-decoration: none; font-weight: 500; }
.il-a-accent:hover { text-decoration: underline; }
.il-img-shadow { border-radius: 14px; box-shadow: 0 4px 20px rgba(15,23,42,.12); border: 1px solid var(--border,#e2e8f0); width: 100%; display: block; }
.il-img-shadow-sm { border-radius: 10px; box-shadow: 0 2px 12px rgba(15,23,42,.08); border: 1px solid var(--border,#e2e8f0); }
.il-ol-light { padding-left: 20px; margin: 12px 0 0; color: var(--text-2,#475569); font-size: 14px; line-height: 1.7; }
.il-ol-light li { margin-bottom: 6px; }
.il-ul-plain { list-style: none; padding: 0; margin: 12px 0 0; }
.il-ul-plain li { padding: 4px 0; font-size: 14px; color: var(--text-2,#475569); }
.il-h3-impl { font-size: 15px; font-weight: 700; color: var(--text,#0f172a); margin: 18px 0 6px; }
.il-h3-sm { font-size: 13px; font-weight: 700; color: var(--text-2,#475569); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; }
@media(max-width:720px) { .float-img-right, .float-img-right--sm, .float-img-right--no-top { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; } }
.art-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.art-table th { background: var(--accent, #4f46e5); color: #fff; padding: 11px 14px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.art-table td { padding: 11px 14px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top; line-height: 1.55; color: var(--text-2, #475569); font-size: 14px; }
.art-table tbody tr:last-child td { border-bottom: 0; }
.art-table tbody tr:nth-child(even) td { background: #f8faff; }
.art-table tbody tr:hover td { background: #eef2ff; }
.art-table-lg { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.art-table-lg th { background: #1e293b; color: #e2e8f0; padding: 11px 14px; text-align: left; font-size: 13px; font-weight: 600; }
.art-table-lg td { padding: 11px 14px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top; line-height: 1.55; color: var(--text-2, #475569); font-size: 14px; }
.art-table-lg tbody tr:last-child td { border-bottom: 0; }
.art-table-lg tbody tr:nth-child(even) td { background: #f8faff; }
.tbl-wrap { overflow-x: auto; margin: 20px 0; border-radius: 12px; border: 1px solid var(--border, #e2e8f0); box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.tbl-wrap--no-margin { margin: 0; }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl-wrap th { background: var(--accent, #4f46e5); color: #fff; padding: 11px 14px; text-align: left; font-size: 13px; font-weight: 700; }
.tbl-wrap td { padding: 11px 14px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top; line-height: 1.55; color: var(--text-2, #475569); }
.tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap tbody tr:nth-child(even) td { background: #f8faff; }
.tbl-head-accent th { background: var(--accent, #4f46e5) !important; color: #fff !important; }
.tbl-row-alt tbody tr:nth-child(even) td { background: #f0f4ff !important; }
.img-full { width: 100%; display: block; border-radius: 14px; margin: 20px 0; box-shadow: 0 4px 20px rgba(15,23,42,.1); border: 1px solid var(--border, #e2e8f0); }
.img-block { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--border, #e2e8f0); box-shadow: 0 2px 12px rgba(15,23,42,.08); }
.img-rounded { border-radius: 14px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); box-shadow: 0 4px 20px rgba(15,23,42,.1); }
.img-rounded img { display: block; width: 100%; }
.img-cover { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 14px; border: 1px solid var(--border, #e2e8f0); box-shadow: 0 4px 20px rgba(15,23,42,.1); }
.img-cover--top { object-position: center top; }
.txt-sm-accent { font-size: 12px; color: rgba(129,140,248,.85); font-weight: 500; }
.author-bio__body { flex: 1; min-width: 0; }
.author-bio__name { font-size: 15px; font-weight: 700; color: var(--text, #0f172a); margin: 0 0 3px; line-height: 1.3; }
.author-bio__role { font-size: 13px; color: var(--accent, #4f46e5); margin: 0 0 10px; font-weight: 500; line-height: 1.4; }
.author-bio__desc { font-size: 14px; color: var(--text-2, #475569); line-height: 1.65; margin: 0 0 16px; }
.author-bio__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.author-bio__btn-primary, .author-bio__btn-primary:visited { color: #fff !important; text-decoration: none !important; }
.author-bio__btn-secondary, .author-bio__btn-secondary:visited { color: var(--text-2, #64748b) !important; text-decoration: none !important; }

/* ==========================================================
   CUAS-ANIM — SVG-анимации в статьях блога (в стиле .azs-guard)
   Увеличено на 12% (было 62%/480px → стало 70%/538px)
   ========================================================== */
.cuas-anim {
  float: right;
  width: 70%;
  max-width: 538px;
  margin: 6px 0 22px 30px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.38);
}
.cuas-anim svg { width: 100%; height: auto; display: block; }
/* Модификатор: слева от текста, текст обтекает справа */
.cuas-anim--sm.cuas-anim--sm {
  float: left;
  width: 58%;
  max-width: 430px;
  margin: 6px 30px 22px 0;
}
@media (max-width: 720px) {
  .cuas-anim {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }
}

/* ==========================================================
   BLOCKQUOTE — цитата автора в тексте статьи
   Работает на ЛЮБОЙ странице с разметкой:
     <blockquote><p>текст</p><footer>— Имя, роль</footer></blockquote>
   Ничего в HTML менять не нужно — оформление полностью на CSS.
   Структура повторяет карточку автора (author-short), адаптированную
   под светлый фон: сверху имя и роль автора, ниже — цитата
   одним цветом с открывающей и закрывающей кавычками.
   ========================================================== */
.article-body blockquote,
.prd-section blockquote,
main blockquote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0;
  padding: 20px 24px 24px;
  background: var(--surface-2, #f8faff);
  border: 1px solid var(--border, #e0e7ff);
  border-radius: 16px;
}

/* Пилюля «аватар + имя, роль» — footer идёт первым визуально через order */
.article-body blockquote footer,
.prd-section blockquote footer,
main blockquote footer {
  order: -1;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2, #475569);
  line-height: 1.5;
}

/* Цитата — один цвет текста, декоративный знак кавычки слева */
.article-body blockquote p,
.prd-section blockquote p,
main blockquote p {
  position: relative;
  margin: 0 !important;
  padding-left: 34px;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--text, #0f172a) !important;
  font-weight: 500;
  font-style: normal;
}
.article-body blockquote p::before,
.prd-section blockquote p::before,
main blockquote p::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 42px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--border-2, #c7d2fe);
}
.article-body blockquote p::after,
.prd-section blockquote p::after,
main blockquote p::after {
  content: "”";
  color: var(--border-2, #c7d2fe);
  font-size: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

@media (max-width: 480px) {
  .article-body blockquote,
  .prd-section blockquote,
  main blockquote { padding: 18px 20px 20px; }
  .article-body blockquote p,
  .prd-section blockquote p,
  main blockquote p { padding-left: 26px; font-size: 15px !important; }
  .article-body blockquote p::before,
  .prd-section blockquote p::before,
  main blockquote p::before { font-size: 32px; }
}