.content-page {
  --content-accent:var(--c-blue);
  --content-accent-soft:rgba(37,99,235,.1);
  background:#f8fafc;
}
.content-page--security { --content-accent:#dc2626; --content-accent-soft:rgba(220,38,38,.09); }
.content-page--backup { --content-accent:#7c3aed; --content-accent-soft:rgba(124,58,237,.09); }
.content-page--maintenance { --content-accent:#0891b2; --content-accent-soft:rgba(8,145,178,.09); }
.content-page--local { --content-accent:#b45309; --content-accent-soft:rgba(180,83,9,.09); }
.content-page--recovery { --content-accent:#2563eb; --content-accent-soft:rgba(37,99,235,.1); }
.content-page--gaming { --content-accent:#22d3ee; --content-accent-soft:rgba(34,211,238,.1); }

.content-hero {
  position:relative;
  min-height:610px;
  overflow:hidden;
  padding:158px 0 82px;
  background:#07111f;
}
.content-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,17,31,.99) 0%,rgba(7,17,31,.93) 48%,rgba(7,17,31,.55) 72%,rgba(7,17,31,.35) 100%),
    var(--content-image,none) center/cover no-repeat;
}
.content-hero::after {
  content:'';
  position:absolute;
  inset:0;
  opacity:.48;
  background-image:
    linear-gradient(rgba(37,99,235,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.07) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}
.content-hero > .wrap { position:relative; z-index:2; }
.content-hero__copy { max-width:850px; }
.content-crumbs { margin-bottom:25px; color:rgba(255,255,255,.45); font-size:12.5px; }
.content-crumbs a { color:var(--c-cyan); }
.content-kicker {
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 17px;
  color:var(--c-cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.content-kicker::before { content:''; width:26px; height:2px; background:currentColor; }
.content-hero h1 {
  max-width:820px;
  margin:0 0 22px;
  color:#fff;
  font-family:var(--f-display);
  font-size:clamp(40px,5.7vw,68px);
  font-weight:800;
  line-height:1.01;
  letter-spacing:-.04em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.content-hero__lead {
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:18px;
  line-height:1.68;
}
.content-hero__meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:center;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);
  font-size:11.5px;
}
.content-hero__meta strong { color:#fff; }
.content-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.content-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:76px;
  align-items:start;
  padding:92px 0 106px;
}
.content-copy {
  min-width:0;
  color:#334155;
  font-size:16px;
  line-height:1.82;
}
.content-copy > p:first-child { color:#1e293b; font-size:19px; line-height:1.7; }
.content-copy h2 {
  margin:58px 0 20px;
  color:var(--c-navy);
  font-family:var(--f-display);
  font-size:clamp(28px,3.5vw,40px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
  scroll-margin-top:94px;
  text-wrap:balance;
}
.content-copy h3 {
  margin:32px 0 11px;
  color:var(--c-navy);
  font-family:var(--f-display);
  font-size:20px;
  font-weight:800;
  line-height:1.25;
}
.content-copy p { margin:0 0 19px; }
.content-copy ul,
.content-copy ol { display:grid; gap:12px; margin:0 0 25px; padding-left:22px; }
.content-copy li::marker { color:var(--content-accent); font-weight:800; }
.content-copy strong { color:#172033; }
.content-copy a { color:var(--c-blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.content-copy figure { margin:34px 0; }
.content-copy figure img {
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border:1px solid var(--c-border);
}
.content-copy figcaption { margin-top:10px; color:var(--c-muted); font-size:11px; line-height:1.5; }
.content-note {
  margin:30px 0;
  padding:22px 24px;
  border:1px solid var(--c-border);
  border-left:3px solid var(--content-accent);
  background:var(--content-accent-soft);
}
.content-note strong { display:block; margin-bottom:5px; color:var(--c-navy); font-family:var(--f-display); font-size:15px; }
.content-note p { margin:0; color:#475569; font-size:14px; line-height:1.65; }
.content-note--warning { --content-accent:#dc2626; --content-accent-soft:#fef2f2; }
.content-steps { margin:28px 0 36px!important; padding:0!important; border-top:2px solid var(--c-navy); counter-reset:content-step; list-style:none; }
.content-steps li {
  position:relative;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:18px;
  padding:23px 0;
  border-bottom:1px solid var(--c-border);
  counter-increment:content-step;
}
.content-steps li::before {
  content:'0' counter(content-step);
  color:var(--content-accent);
  font-family:var(--f-display);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}
.content-steps h3 { margin:0 0 5px; font-size:17px; }
.content-steps p { margin:0; color:var(--c-muted); font-size:14px; line-height:1.62; }

.content-aside { position:sticky; top:92px; }
.content-toc {
  padding:22px;
  border-top:2px solid var(--content-accent);
  background:#fff;
  box-shadow:0 16px 42px rgba(7,17,31,.07);
}
.content-toc > strong {
  display:block;
  margin-bottom:13px;
  color:var(--c-navy);
  font-family:var(--f-display);
  font-size:13px;
}
.content-toc nav { display:grid; gap:3px; }
.content-toc a {
  padding:8px 0;
  border-bottom:1px solid #eef2f7;
  color:var(--c-muted);
  font-size:11.5px;
  font-weight:600;
  line-height:1.4;
}
.content-toc a:hover { color:var(--content-accent); }
.content-aside__tool {
  display:block;
  margin-top:18px;
  padding:20px;
  background:#07111f;
  color:#fff;
}
.content-aside__tool small {
  display:block;
  margin-bottom:8px;
  color:var(--c-cyan);
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.content-aside__tool strong { display:block; font-family:var(--f-display); font-size:17px; line-height:1.25; }
.content-aside__tool span { display:block; margin-top:15px; color:rgba(255,255,255,.68); font-size:11px; text-decoration:underline; text-underline-offset:4px; }

.content-source-list {
  display:grid;
  gap:10px;
  margin:24px 0 0!important;
  padding:0!important;
  list-style:none;
}
.content-source-list li {
  padding:12px 14px;
  border:1px solid var(--c-border);
  background:#fff;
  font-size:12px;
  line-height:1.45;
}
.content-source-list a { display:flex; justify-content:space-between; gap:12px; text-decoration:none; }

.content-related { padding:96px 0; border-top:1px solid var(--c-border); background:#fff; }
.content-related__head {
  display:flex;
  gap:30px;
  align-items:end;
  justify-content:space-between;
  margin-bottom:35px;
}
.content-related__head h2 {
  color:var(--c-navy);
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,44px);
  line-height:1.08;
}
.content-related__head > a { color:var(--c-blue); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.content-related__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--c-navy); }
.content-related-card {
  display:flex;
  min-height:235px;
  flex-direction:column;
  padding:26px;
  border-right:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  background:#fff;
  color:inherit;
  transition:transform .2s ease,box-shadow .2s ease;
}
.content-related-card:first-child { border-left:1px solid var(--c-border); }
.content-related-card:hover { position:relative; z-index:2; transform:translateY(-5px); box-shadow:0 18px 44px rgba(7,17,31,.1); }
.content-related-card small { color:var(--content-accent); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.content-related-card h3 { margin:13px 0 10px; color:var(--c-navy); font-family:var(--f-display); font-size:20px; line-height:1.15; }
.content-related-card p { margin:0 0 22px; color:var(--c-muted); font-size:12.5px; line-height:1.6; }
.content-related-card b { margin-top:auto; color:var(--c-blue); font-size:11.5px; text-decoration:underline; text-underline-offset:4px; }

.content-faq { padding:96px 0; background:#f8fafc; }
.content-faq__list { max-width:900px; margin:36px auto 0; border-top:2px solid var(--c-navy); }
.content-faq details { border-bottom:1px solid var(--c-border); }
.content-faq summary {
  display:flex;
  min-height:74px;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--c-navy);
  cursor:pointer;
  font-family:var(--f-display);
  font-size:16px;
  font-weight:800;
  list-style:none;
}
.content-faq summary::-webkit-details-marker { display:none; }
.content-faq summary span {
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 auto;
  place-items:center;
  border:1px solid var(--c-border);
  border-radius:50%;
  color:var(--content-accent);
  transition:transform .2s ease;
}
.content-faq details[open] summary span { transform:rotate(45deg); }
.content-faq details p { max-width:760px; margin:-3px 0 24px; color:var(--c-muted); font-size:14px; line-height:1.7; }
.content-faq details a { color:var(--c-blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.case-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:32px 0; }
.case-strip figure { margin:0; }
.case-strip img { aspect-ratio:16/10; max-height:none; }
.case-strip--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-strip--three img { aspect-ratio:4/3; }
.case-result {
  margin:36px 0;
  padding:28px;
  border:1px solid var(--c-border);
  background:#07111f;
  color:#fff;
}
.case-result small { color:var(--c-cyan); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.case-result h3 { margin:10px 0 10px; color:#fff; font-size:22px; }
.case-result p { margin:0; color:rgba(255,255,255,.68); }

.guides-hero {
  position:relative;
  overflow:hidden;
  padding:160px 0 100px;
  background:
    radial-gradient(680px 420px at 85% 36%,rgba(37,99,235,.24),transparent 68%),
    radial-gradient(540px 300px at 10% 100%,rgba(34,211,238,.12),transparent 70%),
    #07111f;
}
.guides-hero::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.52;
  background-image:
    linear-gradient(rgba(37,99,235,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.07) 1px,transparent 1px);
  background-size:84px 84px;
}
.guides-hero .wrap { position:relative; z-index:1; }
.guides-hero__layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:80px; align-items:end; }
.guides-hero h1 {
  max-width:800px;
  margin:0 0 20px;
  color:#fff;
  font-family:var(--f-display);
  font-size:clamp(44px,6vw,72px);
  line-height:1;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.guides-hero__lead { max-width:680px; color:rgba(255,255,255,.72); font-size:18px; line-height:1.65; }
.guides-hero__index { padding:24px; border-top:2px solid var(--c-cyan); background:rgba(255,255,255,.045); }
.guides-hero__index small { color:var(--c-cyan); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.guides-hero__index strong { display:block; margin:10px 0 7px; color:#fff; font-family:var(--f-display); font-size:27px; }
.guides-hero__index p { color:rgba(255,255,255,.58); font-size:12px; line-height:1.55; }

.guides-tools { padding:96px 0; background:#f8fafc; }
.guides-section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); gap:50px; align-items:end; margin-bottom:40px; }
.guides-section-head h2 { color:var(--c-navy); font-family:var(--f-display); font-size:clamp(32px,4.5vw,48px); line-height:1.06; }
.guides-section-head p { color:var(--c-muted); font-size:14px; line-height:1.65; }
.guides-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.guides-tool {
  display:flex;
  min-height:230px;
  flex-direction:column;
  padding:28px;
  border:1px solid rgba(255,255,255,.1);
  background:#07111f;
  color:#fff;
}
.guides-tool:nth-child(2) { background:linear-gradient(145deg,#0b1a30,#102b5f); }
.guides-tool:nth-child(3) { background:linear-gradient(145deg,#101827,#1f1540); }
.guides-tool small { color:var(--c-cyan); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.guides-tool h3 { margin:18px 0 10px; color:#fff; font-family:var(--f-display); font-size:23px; line-height:1.12; }
.guides-tool p { margin:0 0 22px; color:rgba(255,255,255,.58); font-size:12.5px; line-height:1.6; }
.guides-tool b { margin-top:auto; color:#fff; font-size:12px; text-decoration:underline; text-decoration-color:var(--c-cyan); text-underline-offset:5px; }

.guides-list { padding:96px 0; background:#fff; border-top:1px solid var(--c-border); }
.guides-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--c-border); border:1px solid var(--c-border); }
.guide-card {
  display:grid;
  min-height:260px;
  grid-template-columns:54px minmax(0,1fr);
  gap:20px;
  padding:34px;
  background:#fff;
  color:inherit;
  transition:background .2s ease;
}
.guide-card:hover { background:#f8fafc; }
.guide-card__number { color:var(--c-blue); font-family:var(--f-display); font-size:11px; font-weight:800; letter-spacing:.1em; }
.guide-card small { color:var(--c-blue); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.guide-card h3 { margin:13px 0 11px; color:var(--c-navy); font-family:var(--f-display); font-size:24px; line-height:1.12; }
.guide-card p { margin:0 0 22px; color:var(--c-muted); font-size:13px; line-height:1.6; }
.guide-card b { color:var(--c-blue); font-size:11.5px; text-decoration:underline; text-underline-offset:4px; }
.guide-card--wide { grid-column:1/-1; min-height:220px; }

.content-footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; margin-bottom:25px; }
.content-footer-nav a { color:rgba(255,255,255,.55); font-size:13px; font-weight:600; }
.content-footer-nav a:hover { color:#fff; }
.content-page footer .logo { display:flex; justify-content:center; margin-bottom:24px; }
.content-page footer .ft-bot { justify-content:center; text-align:center; }

@media (max-width:980px) {
  .content-layout,
  .guides-hero__layout,
  .guides-section-head { grid-template-columns:minmax(0,1fr); }
  .content-layout { gap:50px; }
  .content-aside { position:static; }
  .content-toc { display:none; }
  .content-aside__tool { max-width:500px; margin-top:0; }
  .guides-hero__layout { gap:45px; }
  .guides-hero__index { max-width:500px; }
  .guides-section-head { gap:20px; }
}
@media (max-width:760px) {
  .content-hero { min-height:0; padding:128px 0 66px; }
  .content-hero::before { background:linear-gradient(180deg,rgba(7,17,31,.9),rgba(7,17,31,.97)),var(--content-image,none) center/cover no-repeat; }
  .content-hero h1 { font-size:clamp(34px,10vw,46px); }
  .content-hero__lead { font-size:16px; }
  .content-layout { padding:72px 0 80px; }
  .content-copy { font-size:15px; }
  .content-copy > p:first-child { font-size:17px; }
  .content-related,
  .content-faq,
  .guides-tools,
  .guides-list { padding:76px 0; }
  .content-related__head { align-items:flex-start; flex-direction:column; }
  .content-related__grid,
  .guides-tool-grid,
  .guides-grid { grid-template-columns:minmax(0,1fr); }
  .content-related-card { min-height:205px; border-left:1px solid var(--c-border); }
  .case-strip,
  .case-strip--three { grid-template-columns:minmax(0,1fr); }
  .guides-hero { padding:132px 0 76px; }
  .guides-hero h1 { font-size:clamp(39px,11vw,52px); }
  .guide-card,
  .guide-card--wide { min-height:0; grid-column:auto; padding:28px 22px; }
  .content-page #wa-float { display:none!important; }
}
@media (max-width:480px) {
  .content-hero h1 { font-size:clamp(31px,8.2vw,36px); }
  .content-note,
  .case-result { padding:20px 18px; }
  .content-steps li { grid-template-columns:40px minmax(0,1fr); gap:10px; }
  .guide-card { grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .content-faq summary { font-size:14px; line-height:1.35; }
}
@media (prefers-reduced-motion:reduce) {
  .content-page *,
  .content-page *::before,
  .content-page *::after { scroll-behavior:auto!important; transition:none!important; }
}