:root {
  --article-bg: #020817;
  --article-panel: rgba(8, 21, 42, .84);
  --article-panel-solid: #08152a;
  --article-line: rgba(135, 183, 255, .15);
  --article-blue: #2f8cff;
  --article-cyan: #5edcff;
  --article-green: #3dc98a;
  --article-text: #f7fbff;
  --article-muted: #a5b7ca;
}

body.spy-article {
  margin: 0;
  padding-top: var(--nav-height, 80px);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(47, 140, 255, .13), transparent 28rem),
    radial-gradient(circle at 92% 24%, rgba(61, 201, 138, .08), transparent 30rem),
    var(--article-bg);
  color: var(--article-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.spy-article .navbar-nav > li.active > a::after,
.spy-article .navbar-nav > li > a:hover::after { background: var(--article-blue); }
.spy-article .btn-trial {
  background: linear-gradient(135deg, #147cff, #50c8ff) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(20, 124, 255, .24);
}

.article-shell { width: min(100% - 40px, 1240px); margin-inline: auto; }
.article-hero { position: relative; padding: 58px 0 46px; overflow: hidden; }
.article-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background-image: linear-gradient(rgba(89, 151, 232, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(89, 151, 232, .06) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 86%);
}
.article-breadcrumbs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: #7890a9; font-size: 13px; }
.article-breadcrumbs a { color: #9cc9ff; text-decoration: none; }
.article-head { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); gap: 48px; align-items: center; }
.article-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(94, 220, 255, .2); border-radius: 999px; background: rgba(20, 124, 255, .08); color: #98eaff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--article-blue); box-shadow: 0 0 18px rgba(47, 140, 255, .9); }
.article-head h1 { margin: 20px 0 18px; font-size: clamp(42px, 5.3vw, 72px); line-height: .99; letter-spacing: -.055em; }
.article-intro { max-width: 650px; margin: 0; color: var(--article-muted); font-size: 17px; line-height: 1.75; }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 25px; color: #8198b0; font-size: 13px; }
.article-byline strong { color: #dcecff; }
.partner-mark { display: inline-flex; align-items: center; gap: 9px; }
.partner-mark img { width: auto; height: 30px; }
.hero-cover { position: relative; overflow: hidden; border: 1px solid rgba(112, 180, 255, .24); border-radius: 26px; background: #06120f; box-shadow: 0 38px 90px rgba(0, 0, 0, .42), 0 0 80px rgba(35, 128, 255, .09); }
.hero-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); pointer-events: none; }
.hero-cover img { display: block; width: 100%; height: auto; }

.article-main { padding: 34px 0 100px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 780px) minmax(260px, 330px); gap: clamp(36px, 6vw, 76px); justify-content: center; align-items: start; }
.article-body { min-width: 0; }
.article-body > p:first-of-type { color: #d9e8f7; font-size: 20px; line-height: 1.75; }
.article-body h2 { margin: 64px 0 18px; color: #f8fbff; font-size: clamp(29px, 3.3vw, 42px); line-height: 1.13; letter-spacing: -.035em; scroll-margin-top: 110px; }
.article-body h3 { margin: 38px 0 13px; color: #dcedff; font-size: 23px; line-height: 1.3; scroll-margin-top: 110px; }
.article-body p, .article-body li { color: var(--article-muted); font-size: 17px; line-height: 1.82; }
.article-body p { margin: 0 0 21px; }
.article-body ul { display: grid; gap: 13px; margin: 24px 0 32px; padding: 0; list-style: none; }
.article-body li { position: relative; padding: 15px 18px 15px 50px; border: 1px solid var(--article-line); border-radius: 14px; background: rgba(10, 29, 57, .58); }
.article-body li::before { content: "✓"; position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(47, 140, 255, .16); color: #78bcff; font-size: 12px; font-weight: 900; }
.article-body strong { color: #eaf4ff; }
.article-body a { color: #74c4ff; text-decoration-color: rgba(116, 196, 255, .38); text-underline-offset: 4px; }
.article-body a:hover { color: #a4e5ff; }

.article-callout { position: relative; overflow: hidden; margin: 38px 0; padding: 28px; border: 1px solid rgba(47, 140, 255, .28); border-radius: 20px; background: linear-gradient(135deg, rgba(17, 70, 135, .4), rgba(7, 24, 50, .78)); }
.article-callout::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -100px; border-radius: 50%; background: rgba(61, 201, 138, .14); filter: blur(12px); }
.article-callout span { position: relative; display: block; margin-bottom: 10px; color: #75bdff; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.article-callout p { position: relative; margin: 0; color: #dcecff; font-size: 18px; line-height: 1.7; }

.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 28px 0 40px; }
.workflow-step { min-height: 170px; padding: 20px; border: 1px solid var(--article-line); border-radius: 17px; background: linear-gradient(180deg, rgba(47, 140, 255, .09), rgba(8, 21, 42, .72)); }
.workflow-step b { display: block; margin-bottom: 22px; color: #52a7ff; font-size: 12px; letter-spacing: .12em; }
.workflow-step h3 { margin: 0 0 8px; font-size: 18px; }
.workflow-step p { margin: 0; font-size: 14px; line-height: 1.6; }

.article-sidebar { position: sticky; top: 108px; display: grid; gap: 18px; }
.side-card { overflow: hidden; padding: 23px; border: 1px solid var(--article-line); border-radius: 20px; background: var(--article-panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
.side-card h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.02em; }
.toc { display: grid; gap: 5px; }
.toc a { padding: 8px 10px; border-left: 2px solid rgba(90, 157, 237, .14); color: #8ea6be; font-size: 13px; line-height: 1.35; text-decoration: none; transition: .2s ease; }
.toc a:hover { border-color: var(--article-blue); color: #dcecff; background: rgba(47, 140, 255, .07); }
.offer-card { position: relative; background: linear-gradient(155deg, rgba(18, 82, 153, .88), rgba(5, 30, 61, .94)); }
.offer-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -72px; top: -90px; border-radius: 50%; background: rgba(61, 201, 138, .22); filter: blur(8px); }
.offer-card img { position: relative; width: 175px; height: auto; margin-bottom: 28px; }
.offer-card .discount { position: relative; color: #fff; font-size: 34px; font-weight: 850; letter-spacing: -.04em; }
.offer-card p { position: relative; margin: 8px 0 18px; color: #c8dbef; font-size: 14px; line-height: 1.6; }
.promo-code { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 13px 14px; border: 1px dashed rgba(154, 227, 255, .58); border-radius: 12px; background: rgba(1, 15, 35, .5); }
.promo-code span { color: #89a8c4; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.promo-code strong { color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.side-cta { position: relative; display: flex; justify-content: center; margin-top: 14px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(135deg, #2288ff, #58d6ff); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 32px rgba(34, 136, 255, .24); }

.article-conclusion { margin-top: 58px; padding: clamp(26px, 5vw, 46px); border: 1px solid rgba(55, 150, 255, .26); border-radius: 26px; background: radial-gradient(circle at 90% 0, rgba(61, 201, 138, .14), transparent 30%), linear-gradient(135deg, #0b2344, #07162c); }
.article-conclusion h2 { margin-top: 0; }
.article-conclusion .actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.article-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 19px; border-radius: 12px; background: linear-gradient(135deg, #2085ff, #56d4ff); color: #fff !important; font-size: 14px; font-weight: 800; text-decoration: none !important; }
.article-button.secondary { border: 1px solid rgba(135, 183, 255, .23); background: rgba(255, 255, 255, .04); color: #dcecff !important; }

.spy-article .cta-card .cta-btn,
.spy-article .cta-btn { background: linear-gradient(135deg, #147cff, #50c8ff) !important; color: #fff !important; }
.spy-article .cta-card { border-color: rgba(47, 140, 255, .23); background: radial-gradient(circle at 76% 0, rgba(47, 140, 255, .2), transparent 34%), #07162d; }

@media (max-width: 1040px) {
  .article-head { grid-template-columns: 1fr; }
  .hero-cover { max-width: 820px; }
  .article-layout { grid-template-columns: minmax(0, 780px); }
  .article-sidebar { position: static; grid-row: 1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .article-shell { width: min(100% - 28px, 1240px); }
  .article-hero { padding: 36px 0 26px; }
  .article-head { gap: 30px; }
  .article-head h1 { font-size: clamp(39px, 13vw, 57px); }
  .article-intro { font-size: 16px; }
  .article-main { padding-top: 20px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .toc-card { display: none; }
  .article-body > p:first-of-type { font-size: 18px; }
  .article-body p, .article-body li { font-size: 16px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-step { min-height: 0; }
  .hero-cover { border-radius: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cover { animation: coverReveal .8s cubic-bezier(.2,.8,.2,1) both; }
  .article-head-copy { animation: copyReveal .75s .08s cubic-bezier(.2,.8,.2,1) both; }
  .workflow-step { transition: transform .28s ease, border-color .28s ease; }
  .workflow-step:hover { transform: translateY(-5px); border-color: rgba(47, 140, 255, .38); }
  @keyframes coverReveal { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes copyReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}