:root {
  --tech-ink: #111712;
  --tech-muted: #5f695f;
  --tech-paper: #f7f8f3;
  --tech-panel: #ffffff;
  --tech-line: rgba(17, 23, 18, 0.14);
  --tech-green: #8ce34f;
  --tech-green-dark: #315f20;
  --tech-shadow: 0 22px 70px rgba(24, 34, 22, 0.12);
}

html { scroll-behavior: smooth; }
body { background: var(--tech-paper); color: var(--tech-ink); }

.technology-shell {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 88px;
}

.technology-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 24px;
  color: var(--tech-muted);
  font-size: 14px;
}

.technology-breadcrumbs a { color: inherit; text-decoration: none; }
.technology-breadcrumbs a:hover { color: var(--tech-ink); }
.technology-breadcrumbs a::after { content: "/"; margin-left: 8px; opacity: .42; }

.technology-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
  min-height: 590px;
  overflow: hidden;
  border: 1px solid var(--tech-line);
  border-radius: 32px;
  background: #111712;
  box-shadow: var(--tech-shadow);
}

.technology-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 86px);
  color: #f9fff5;
}

.technology-kicker {
  margin: 0 0 22px;
  color: var(--tech-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.technology-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}

.technology-lede {
  max-width: 720px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
}

.technology-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
  color: rgba(255,255,255,.6);
  font-size: 14px;
}

.technology-meta span + span::before { content: "•"; margin-right: 18px; color: var(--tech-green); }

.technology-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.technology-actions .button { min-height: 48px; padding-inline: 22px; }
.technology-actions .button-primary { background: var(--tech-green); color: #11200d; border-color: var(--tech-green); }
.technology-actions .button-secondary { color: #fff; border-color: rgba(255,255,255,.34); background: transparent; }

.technology-hero-media { position: relative; min-height: 420px; margin: 0; background: #263028; }
.technology-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,23,18,.5), transparent 28%), linear-gradient(0deg, rgba(17,23,18,.32), transparent 35%);
  pointer-events: none;
}
.technology-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.technology-hero-media figcaption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 20px;
  max-width: calc(100% - 44px);
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(14,20,15,.62);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  backdrop-filter: blur(10px);
}

.technology-fit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 0;
  border: 1px solid var(--tech-line);
  border-radius: 22px;
  background: var(--tech-panel);
}
.technology-fit div { padding: 24px 28px; }
.technology-fit div + div { border-left: 1px solid var(--tech-line); }
.technology-fit strong { display: block; margin-bottom: 7px; font-size: 14px; }
.technology-fit span { color: var(--tech-muted); font-size: 14px; line-height: 1.45; }

.technology-topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--tech-line);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
}
.technology-topic-links strong { margin-right: 6px; font-size: 13px; }
.technology-topic-links a {
  padding: 8px 12px;
  border: 1px solid var(--tech-line);
  border-radius: 999px;
  background: #fff;
  color: var(--tech-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.technology-topic-links a:hover { border-color: var(--tech-green-dark); box-shadow: 0 0 0 3px rgba(140,227,79,.22); }

.technology-reading-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 820px);
  justify-content: center;
  gap: clamp(34px, 6vw, 84px);
  margin-top: 72px;
}

.technology-toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; }
.technology-toc strong { display: block; margin-bottom: 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.technology-toc a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17,23,18,.08);
  color: var(--tech-muted);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}
.technology-toc a:hover { color: var(--tech-green-dark); }

.technology-content { min-width: 0; color: #202820; font-size: 18px; line-height: 1.72; }
.technology-content > :first-child { margin-top: 0; }
.technology-content h2,
.technology-content h3 { color: var(--tech-ink); scroll-margin-top: 24px; }
.technology-content h2 { margin: 76px 0 22px; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.technology-content h3 { margin: 38px 0 14px; font-size: 24px; line-height: 1.2; }
.technology-content p { margin: 0 0 22px; }
.technology-content a { color: #285d1c; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.technology-content ul,
.technology-content ol { margin: 0 0 28px; padding-left: 25px; }
.technology-content li { margin: 8px 0; padding-left: 3px; }
.technology-content blockquote {
  margin: 34px 0;
  padding: 22px 26px;
  border: 0;
  border-left: 5px solid var(--tech-green);
  border-radius: 0 16px 16px 0;
  background: #edf6e7;
  color: #30432e;
}
.technology-content blockquote p:last-child { margin-bottom: 0; }

.technology-table-wrap {
  position: relative;
  overflow-x: auto;
  margin: 28px 0 38px;
  border: 1px solid var(--tech-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17,23,18,.06);
}
.technology-table-wrap::after {
  content: attr(data-scroll-hint);
  display: none;
  padding: 8px 14px;
  color: var(--tech-muted);
  font-size: 12px;
}
.technology-content table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.technology-content th,
.technology-content td { padding: 15px 17px; border-bottom: 1px solid var(--tech-line); text-align: left; vertical-align: top; }
.technology-content th { background: #111712; color: #fff; font-size: 13px; }
.technology-content tr:last-child td { border-bottom: 0; }
.technology-content tbody tr:nth-child(even) td { background: #f7f9f4; }

.technology-content h2[id="faq"] ~ h3 { padding-top: 22px; border-top: 1px solid var(--tech-line); }
.technology-content h2[id^="zakazat"] {
  margin-top: 76px;
  padding: 38px 40px 0;
  border: 1px solid var(--tech-line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #111712;
  color: #fff;
}
.technology-content h2[id^="zakazat"] ~ p { margin: 0; padding: 0 40px 22px; background: #111712; color: rgba(255,255,255,.76); }
.technology-content h2[id^="zakazat"] ~ p:last-of-type { padding-bottom: 38px; border-radius: 0 0 22px 22px; }

.technology-next {
  margin-top: 82px;
  padding-top: 34px;
  border-top: 1px solid var(--tech-line);
}
.technology-next-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.technology-next h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.035em; }
.technology-next-head a { color: var(--tech-green-dark); font-weight: 800; text-decoration: none; }
.technology-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.technology-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--tech-line);
  border-radius: 20px;
  background: #fff;
  color: var(--tech-ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.technology-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(17,23,18,.11); }
.technology-card small { color: var(--tech-green-dark); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.technology-card h3 { margin: 18px 0 12px; font-size: 25px; line-height: 1.08; letter-spacing: -.025em; }
.technology-card p { margin: 0; color: var(--tech-muted); font-size: 14px; line-height: 1.5; }
.technology-card span { margin-top: auto; padding-top: 20px; font-weight: 800; }

.technology-hub-hero {
  padding: clamp(46px, 7vw, 92px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 14%, rgba(140,227,79,.34), transparent 27%),
    linear-gradient(135deg, #0e1510, #243526);
  color: #fff;
}
.technology-hub-hero .technology-kicker { margin-bottom: 24px; }
.technology-hub-hero h1 { max-width: 940px; margin: 0; font-size: clamp(52px, 7vw, 96px); line-height: .94; letter-spacing: -.065em; }
.technology-hub-hero > p:not(.technology-kicker) { max-width: 740px; margin: 30px 0 0; color: rgba(255,255,255,.74); font-size: 21px; line-height: 1.5; }

.technology-hub-section { margin-top: 76px; }
.technology-hub-section > header { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: 28px; }
.technology-hub-section h2 { margin: 0; font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: -.045em; }
.technology-hub-section > header p { margin: 0; color: var(--tech-muted); font-size: 17px; line-height: 1.55; }
.technology-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.technology-hub-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  overflow: hidden;
  min-height: 250px;
  border: 1px solid var(--tech-line);
  border-radius: 22px;
  background: #fff;
  color: var(--tech-ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.technology-hub-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(17,23,18,.11); }
.technology-hub-card img { width: 100%; height: 100%; object-fit: cover; }
.technology-hub-card div { display: flex; flex-direction: column; padding: 26px; }
.technology-hub-card small { color: var(--tech-green-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.technology-hub-card h2 { margin: 14px 0 10px; font-size: 28px; line-height: 1.08; letter-spacing: -.03em; }
.technology-hub-card p { margin: 0; color: var(--tech-muted); font-size: 14px; line-height: 1.48; }
.technology-hub-card span { margin-top: auto; padding-top: 18px; font-weight: 800; }

.technology-decision {
  overflow-x: auto;
  border: 1px solid var(--tech-line);
  border-radius: 22px;
  background: #fff;
}
.technology-decision table { width: 100%; min-width: 760px; border-collapse: collapse; }
.technology-decision th,
.technology-decision td { padding: 17px 20px; border-bottom: 1px solid var(--tech-line); text-align: left; vertical-align: top; }
.technology-decision th { background: #111712; color: #fff; }
.technology-decision tr:last-child td { border-bottom: 0; }
.technology-decision a { color: var(--tech-green-dark); font-weight: 800; }

.technology-cta-band {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 30px;
  align-items: center;
  margin-top: 76px;
  padding: 40px;
  border-radius: 24px;
  background: var(--tech-green);
}
.technology-cta-band h2 { margin: 0 0 10px; font-size: 36px; letter-spacing: -.035em; }
.technology-cta-band p { margin: 0; color: #2e4928; }
.technology-cta-band .button { background: #111712; color: #fff; border-color: #111712; white-space: nowrap; }

@media (max-width: 1040px) {
  .technology-hero { grid-template-columns: 1fr; }
  .technology-hero-media { min-height: 460px; order: -1; }
  .technology-reading-layout { grid-template-columns: 1fr; }
  .technology-toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 0 14px; padding: 18px; border: 1px solid var(--tech-line); border-radius: 18px; background: #fff; }
  .technology-toc strong { flex-basis: 100%; }
  .technology-toc a { border: 0; padding: 6px 0; }
  .technology-hub-card { grid-template-columns: 160px 1fr; }
}

@media (max-width: 760px) {
  .technology-shell { width: min(100% - 22px, 1320px); padding-top: 18px; }
  .technology-hero { border-radius: 22px; }
  .technology-hero-copy { padding: 34px 24px 40px; }
  .technology-hero h1 { font-size: clamp(39px, 12vw, 58px); }
  .technology-hero-media { min-height: 300px; }
  .technology-fit { grid-template-columns: 1fr; }
  .technology-fit div + div { border-left: 0; border-top: 1px solid var(--tech-line); }
  .technology-reading-layout { margin-top: 48px; }
  .technology-content { font-size: 17px; }
  .technology-content h2 { margin-top: 58px; }
  .technology-table-wrap::after { display: block; }
  .technology-content h2[id^="zakazat"] { padding: 30px 24px 0; }
  .technology-content h2[id^="zakazat"] ~ p { padding-inline: 24px; }
  .technology-card-grid { grid-template-columns: 1fr; }
  .technology-hub-hero { border-radius: 22px; padding: 44px 24px; }
  .technology-hub-hero h1 { font-size: clamp(48px, 14vw, 70px); }
  .technology-hub-section > header { grid-template-columns: 1fr; }
  .technology-hub-grid { grid-template-columns: 1fr; }
  .technology-hub-card { grid-template-columns: 1fr; }
  .technology-hub-card img { height: 220px; }
  .technology-cta-band { grid-template-columns: 1fr; padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .technology-card,
  .technology-hub-card { transition: none; }
}

/* Journal integration — 2026-07-30 */
body { color: var(--tech-ink); background-color: transparent; }
.technology-shell { width: min(1460px, calc(100% - 64px)); padding-top: 28px; }
.technology-breadcrumbs { margin-bottom: 18px; font-size: 12px; }
.technology-breadcrumbs a { text-decoration: underline; text-decoration-color: rgba(17,23,18,.24); text-underline-offset: 4px; }
.technology-hero {
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  min-height: 610px;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--tech-ink);
  border-bottom: 1px solid var(--tech-ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.technology-hero-copy { padding: clamp(46px,5vw,72px) clamp(28px,4vw,58px) clamp(46px,5vw,72px) 0; color: var(--tech-ink); }
.technology-kicker { margin-bottom: 16px; color: #47743a; }
.technology-hero h1 { max-width: 16ch; color: var(--tech-ink); font-size: clamp(40px,4.25vw,64px); line-height: .96; overflow-wrap: normal; word-break: normal; hyphens: none; }
.technology-lede { max-width: 62ch; margin-top: 22px; color: #47524d; font-size: clamp(16px,1.35vw,19px); line-height: 1.55; }
.technology-meta { margin-top: 22px; color: #69736e; font-size: 12px; }
.technology-actions { margin-top: 26px; }
.technology-actions .button { min-height: 44px; border: 1px solid var(--tech-ink); border-radius: 8px; }
.technology-actions .button-primary { border-color: var(--tech-ink); background: var(--tech-ink); color: #fff; box-shadow: 5px 5px 0 var(--tech-green); }
.technology-actions .button-secondary { border-color: var(--tech-ink); background: transparent; color: var(--tech-ink); }
.technology-hero-media { align-self:center; min-height: 0; height: min(540px,42vw); border:1px solid var(--tech-ink); border-radius:14px; background:#e7ece4; box-shadow:9px 9px 0 var(--tech-green); }
.technology-hero-media::after { background:linear-gradient(0deg,rgba(8,12,16,.16),transparent 34%); border-radius:inherit; }
.technology-hero-media img { border-radius:inherit; }
.technology-hero-media figcaption { border-radius:6px; background:rgba(8,12,16,.84); }
.technology-fit { gap:1px; margin-top:18px; overflow:hidden; border-color:var(--tech-ink); border-radius:10px; background:var(--tech-ink); }
.technology-fit div { background:#eef4e9; }
.technology-fit div + div { border:0; }
.technology-topic-links { margin-top:18px; padding:14px 0; border:0; border-bottom:1px solid var(--tech-line); border-radius:0; background:transparent; }
.technology-topic-links a { padding:5px 0; border:0; border-radius:0; background:transparent; color:#285d1c; text-decoration:underline; text-underline-offset:4px; }
.technology-topic-links a:hover { border:0; box-shadow:none; }
.technology-reading-layout { grid-template-columns:220px minmax(0,940px); gap:clamp(38px,5vw,76px); margin-top:62px; }
.technology-toc { top:94px; max-height:none; overflow:visible; padding-right:12px; }
.technology-toc strong { margin-bottom:4px; }
.technology-toc-note { display:block; margin-bottom:12px; color:var(--tech-muted); font-size:11px; }
.technology-toc a { padding:8px 0; font-size:12px; }
.technology-content { font-size:18px; line-height:1.7; }
.technology-content h2 { max-width:25ch; margin-top:64px; font-size:clamp(29px,2.7vw,40px); }
.technology-content h3 { max-width:32ch; font-size:23px; }
.technology-content blockquote { border:1px solid var(--tech-ink); border-left:5px solid var(--tech-green); border-radius:10px; box-shadow:5px 5px 0 rgba(140,227,79,.72); }
.technology-table-wrap { border-color:var(--tech-ink); border-radius:10px; box-shadow:none; }
.technology-content th { background:var(--tech-ink); }
.technology-next { border-top-color:var(--tech-ink); }
.technology-card { border-color:var(--tech-ink); border-radius:10px; }
.technology-card:hover { box-shadow:6px 6px 0 var(--tech-green); }
.technology-cta-band { border:1px solid var(--tech-ink); border-radius:10px; box-shadow:8px 8px 0 #080c10; }

.technology-hub-hero { padding:clamp(54px,7vw,94px) clamp(38px,6vw,78px); border:1px solid var(--tech-ink); border-radius:12px; background:rgba(247,248,243,.9); color:var(--tech-ink); box-shadow:10px 10px 0 var(--tech-green); }
.technology-hub-hero h1 { max-width:17ch; color:var(--tech-ink); font-size:clamp(46px,6.2vw,84px); line-height:.94; overflow-wrap:normal; word-break:normal; hyphens:none; }
.technology-hub-hero > p:not(.technology-kicker) { color:#4e5a54; font-size:19px; }
.technology-hub-section { margin-top:70px; }
.technology-hub-section > header { border-top:1px solid var(--tech-ink); padding-top:26px; }
.technology-hub-section h2 { font-size:clamp(34px,3.7vw,52px); }
.technology-hub-grid { gap:12px; }
.technology-hub-card { grid-template-columns:190px 1fr; min-height:235px; border-color:var(--tech-ink); border-radius:10px; }
.technology-hub-card:hover { box-shadow:7px 7px 0 var(--tech-green); }
.technology-hub-card h2 { font-size:25px; }
.technology-decision { border-color:var(--tech-ink); border-radius:10px; }

@media(max-width:1040px){
  .technology-hero { grid-template-columns:1fr; }
  .technology-hero-copy { padding-left:0; }
  .technology-hero-media { order:0; width:calc(100% - 10px); height:min(620px,72vw); margin-bottom:52px; }
  .technology-reading-layout { grid-template-columns:1fr; }
  .technology-toc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; padding:18px; border:1px solid var(--tech-ink); border-radius:10px; background:rgba(255,255,255,.72); }
  .technology-toc strong,.technology-toc-note { grid-column:1/-1; }
  .technology-toc a { border-bottom:1px solid rgba(17,23,18,.08); }
}
@media(max-width:760px){
  .technology-shell { width:calc(100% - 32px); }
  .technology-hero-copy { padding:34px 0 38px; }
  .technology-hero h1 { max-width:100%; font-size:34px; line-height:.98; }
  .technology-lede { font-size:16px; }
  .technology-hero-media { width:calc(100% - 7px); height:72vw; margin-bottom:40px; border-radius:10px; box-shadow:6px 6px 0 var(--tech-green); }
  .technology-fit { grid-template-columns:1fr; }
  .technology-toc { grid-template-columns:1fr; }
  .technology-toc strong,.technology-toc-note { grid-column:auto; }
  .technology-content { font-size:16px; }
  .technology-content h2 { margin-top:50px; font-size:29px; }
  .technology-hub-hero { padding:42px 22px; box-shadow:7px 7px 0 var(--tech-green); }
  .technology-hub-hero h1 { max-width:100%; font-size:39px; line-height:.96; }
  .technology-hub-hero > p:not(.technology-kicker) { font-size:16px; }
  .technology-hub-card { grid-template-columns:112px minmax(0,1fr); }
  .technology-hub-card img { height:100%; min-height:230px; }
  .technology-hub-card div { padding:17px; }
  .technology-hub-card h2 { font-size:20px; }
  .technology-hub-card p { font-size:12px; }
}