:root{
 --bg:#080a0f;--bg2:#10131a;--panel:#12151c;--panel2:#0b0e13;
 --text:#f7f7f8;--muted:#c8c9ce;--yellow:#f4c400;--yellow2:#ffd52d;
 --line:rgba(255,255,255,.09);--soft:rgba(244,196,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);
 font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 line-height:1.68;
 background:
 radial-gradient(circle at 88% 0%,rgba(244,196,0,.09),transparent 26%),
 linear-gradient(180deg,var(--bg2),var(--bg));
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{
 width:min(1160px,calc(100% - 160px))!important;
 max-width:1160px!important;
 margin-left:auto!important;
 margin-right:auto!important;
}

/* Header */
.top{
 position:sticky;top:0;z-index:50;
 background:rgba(8,10,15,.97)!important;
 border-bottom:1px solid var(--line)!important;
 backdrop-filter:blur(16px);
}
.nav{
 min-height:86px!important;
 display:flex!important;
 align-items:center!important;
 gap:22px!important;
}
.logo{
 display:flex!important;
 align-items:center!important;
 width:max-content!important;
 font-size:0!important;
 line-height:0!important;
 color:transparent!important;
}
.logo img{
 width:176px!important;
 max-width:176px!important;
 height:62px!important;
 object-fit:contain!important;
 border-radius:8px!important;
}
nav{
 margin-left:auto!important;
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 gap:8px!important;
 flex-wrap:wrap!important;
}
nav a{
 padding:10px 13px!important;
 border-radius:999px!important;
 color:var(--muted)!important;
 font-size:14px!important;
 font-weight:800!important;
 border:1px solid transparent!important;
}
nav a:hover{
 color:#fff!important;
 background:rgba(255,255,255,.045)!important;
 border-color:var(--line)!important;
}

/* IMPORTANT: banners are displayed at their native 1280×440 ratio, never cropped */
.hero{
 width:min(1160px,calc(100% - 160px))!important;
 max-width:1160px!important;
 margin:28px auto 20px!important;
 padding:0!important;
}
.hero img{
 width:100%!important;
 height:auto!important;
 aspect-ratio:1280/440!important;
 object-fit:contain!important;
 object-position:center!important;
 border-radius:22px!important;
 border:1px solid rgba(244,196,0,.26)!important;
 background:#090b10!important;
 box-shadow:0 22px 55px rgba(0,0,0,.38)!important;
}

/* Content */
.layout{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 285px!important;
 gap:22px!important;
 align-items:start!important;
}
article{min-width:0}
.card{
 margin:0 0 18px!important;
 padding:28px 30px!important;
 border-radius:20px!important;
 background:linear-gradient(180deg,var(--panel),var(--panel2))!important;
 border:1px solid var(--line)!important;
 box-shadow:0 16px 38px rgba(0,0,0,.16)!important;
}
.card h1{
 margin:0 0 16px!important;
 font-size:clamp(34px,4vw,50px)!important;
 line-height:1.08!important;
 letter-spacing:-.03em!important;
}
.card h2{
 margin:28px 0 13px!important;
 font-size:clamp(26px,3vw,34px)!important;
 line-height:1.18!important;
 color:#fff!important;
}
.card h3{
 margin:22px 0 9px!important;
 font-size:21px!important;
 line-height:1.3!important;
 color:#fff!important;
}
.card p,.card li{font-size:17px!important;color:var(--muted)!important}
.card p{margin:0 0 15px!important}
.card strong{color:#fff!important}
.lead{font-size:18px!important;color:#dedfe3!important}
.crumbs{font-size:14px!important;color:#98999f!important;margin-bottom:16px!important}

.btns{
 display:flex!important;
 gap:10px!important;
 flex-wrap:wrap!important;
 margin:17px 0 22px!important;
}
.btn{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-height:50px!important;
 padding:0 20px!important;
 border-radius:13px!important;
 background:linear-gradient(135deg,var(--yellow),var(--yellow2))!important;
 color:#0e0f11!important;
 font-weight:900!important;
 border:1px solid rgba(255,255,255,.12)!important;
}
.btn.alt{
 background:rgba(255,255,255,.035)!important;
 color:#fff!important;
 border-color:rgba(244,196,0,.28)!important;
}
.grid{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:13px!important;
 margin:18px 0!important;
}
.mini,.box{
 padding:18px 19px!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.025)!important;
 border:1px solid var(--line)!important;
}
.note{
 padding:17px 19px!important;
 border-left:3px solid var(--yellow)!important;
 border-radius:0 14px 14px 0!important;
 background:var(--soft)!important;
 color:var(--muted)!important;
}
table{width:100%!important;border-collapse:collapse!important;margin:18px 0!important}
th,td{padding:12px 13px!important;border:1px solid var(--line)!important;text-align:left!important}
th{background:var(--soft)!important;color:#fff!important}

/* Sidebar links stay separate on every page */
.toc{
 position:sticky!important;
 top:104px!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 gap:10px!important;
 padding:18px!important;
 border-radius:18px!important;
 background:linear-gradient(180deg,var(--panel),var(--panel2))!important;
 border:1px solid var(--line)!important;
}
.toc .tag{
 display:block!important;
 width:100%!important;
 margin:0 0 5px!important;
}
.toc>a{
 display:block!important;
 width:100%!important;
 margin:0!important;
 padding:11px 13px!important;
 line-height:1.35!important;
 white-space:normal!important;
 overflow-wrap:break-word!important;
 border-radius:10px!important;
 background:rgba(255,255,255,.025)!important;
 border:1px solid var(--line)!important;
 color:var(--muted)!important;
}

/* Four CTA buttons distributed through core SEO-page copy */
.text-cta-row{
 display:flex!important;
 justify-content:center!important;
 align-items:center!important;
 margin:29px 0 33px!important;
}
.text-cta-row a{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-height:54px!important;
 padding:0 30px!important;
 border-radius:14px!important;
 background:linear-gradient(135deg,var(--yellow),var(--yellow2))!important;
 color:#0e0f11!important;
 font-weight:900!important;
 box-shadow:0 14px 28px rgba(0,0,0,.25)!important;
}

.footer,footer{
 margin-top:44px!important;
 padding:34px 0 44px!important;
 border-top:1px solid var(--line)!important;
 background:#07080c!important;
 color:var(--muted)!important;
}
.footer-links{
 display:flex!important;
 flex-wrap:wrap!important;
 gap:10px 18px!important;
}

@media(max-width:960px){
 .wrap,.hero{width:min(100% - 40px,1160px)!important}
 .nav{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  padding:12px 0!important;
 }
 nav{
  margin-left:0!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  padding-bottom:3px!important;
 }
 nav a{white-space:nowrap!important}
 .layout{grid-template-columns:1fr!important}
 .toc{position:static!important}
}
@media(max-width:640px){
 .wrap,.hero{width:min(100% - 24px,1160px)!important}
 .logo img{width:158px!important;height:56px!important}
 .hero img{border-radius:16px!important}
 .card{padding:21px 18px!important;border-radius:17px!important}
 .grid{grid-template-columns:1fr!important}
}