/* ============================================================
   APIgency v2 — Engineering Blueprint
   Cream paper background, hard-edge frames, mono-heavy type,
   schema-style section labels, pixel-mosaic accents.
   ============================================================ */

/* ===== Tokens ===== */
:root {
  /* Paper surfaces (off-white blueprint feel) */
  --paper:        #f7f6f1;        /* main bg — warm cream */
  --paper-2:      #f1efe7;        /* alt sections */
  --paper-3:      #ebe8de;        /* footer/dark accents on paper */
  --grid:         #e3e0d4;        /* dot grid color */
  --grid-strong:  #d1ccbb;        /* visible blueprint lines */

  /* Ink (text + frames) */
  --ink:          #0e1a26;
  --ink-2:        #2a3947;
  --ink-3:        #5a6a78;
  --ink-mute:     #8a96a3;
  --frame:        #0e1a26;        /* card outlines */
  --frame-soft:   #c9c4b3;        /* secondary frames on paper */

  /* Brand accents (from logo) — re-roled by function */
  --connect:      #ff7a1a;        /* "active connection" — links, arrows, primary CTA */
  --connect-2:    #d65f10;        /* hover */
  --system:       #0892a3;        /* "block/system" — Bitrix, infrastructure */
  --system-2:     #066875;
  --output:       #3da42a;        /* "success/result" */
  --warn:         #e8a92a;        /* "attention/in-progress" */

  /* Inverted (blueprint dark) */
  --bp-dark:      #0c1822;        /* dark navy */
  --bp-grid:      rgba(8, 211, 224, 0.08);  /* cyan grid overlay */

  /* Sizing */
  --max:          1200px;
  --gutter:       40px;

  /* Type */
  --font-sans:    'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  /* Transitions */
  --t:            150ms ease-out;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--connect); }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--connect);
  outline-offset: 3px;
}

::selection { background: var(--connect); color: #fff; }

/* ===== Layout primitives ===== */
.shell {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
}

.section {
  padding: 88px 0;
  position: relative;
}

.section + .section {
  border-top: 1px dashed var(--frame-soft);
}

.section.alt {
  background: var(--paper-2);
}

.section.dark {
  background: var(--bp-dark);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.section.dark h2,
.section.dark h3,
.section.dark h4 { color: #fff; }

/* Schema label — "// 01_HERO" style */
.schema-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 28px;
}
.schema-label::before { content: "// "; color: var(--connect); }

.section.dark .schema-label { color: rgba(255,255,255,0.4); }
.section.dark .schema-label::before { color: var(--connect); }

/* Section header */
.section-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.section-head p {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.6;
}
.section.dark .section-head p { color: rgba(255,255,255,0.66); }

/* ===== Typography ===== */
h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 16ch;
}

h2 {
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h3 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.h-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  font-weight: 500;
}

.lead {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--system-2);
}
.kicker.warm { color: var(--connect-2); }
.kicker.dim { color: var(--ink-mute); }

.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* ===== Frames (hard-edge cards with corner brackets) ===== */
.frame {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--frame);
  padding: 28px;
}

.frame.on-paper-2 { background: var(--paper); }

.frame.compact { padding: 20px; }

/* corner brackets */
.frame::before,
.frame::after,
.frame > .corner-tl,
.frame > .corner-tr {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border: 1px solid var(--frame);
  z-index: 1;
}
.frame::before { top: -6px; left: -6px; }
.frame::after  { bottom: -6px; right: -6px; }
.frame > .corner-tr { top: -6px; right: -6px; }
.frame > .corner-bl { position: absolute; bottom: -6px; left: -6px; width: 10px; height: 10px; background: var(--paper); border: 1px solid var(--frame); z-index: 1; }

.section.alt .frame::before,
.section.alt .frame::after,
.section.alt .frame > .corner-tr,
.section.alt .frame > .corner-bl,
.section.alt .frame { background: var(--paper-2); }

/* hover */
.frame.interactive { transition: transform var(--t); cursor: pointer; }
.frame.interactive:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--frame); }

/* tagged frames (variant headers) */
.frame .frame-tag {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--paper);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.frame .frame-tag.warm { color: var(--connect-2); }
.frame .frame-tag.system { color: var(--system-2); }
.frame .frame-tag.output { color: var(--output); }
.section.alt .frame .frame-tag { background: var(--paper-2); }

/* ===== Header ===== */
.topbar {
  background: rgba(247, 246, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--frame-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* guaranteed clear space around the logo (the brand↔nav minimum) */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text > span {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-text small {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.nav-links a { position: relative; padding: 6px 0; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::before {
  content: "[";
  margin-right: 4px;
  color: transparent;
  transition: color var(--t);
}
.nav-links a::after {
  content: "]";
  margin-left: 4px;
  color: transparent;
  transition: color var(--t);
}
.nav-links a:hover::before,
.nav-links a:hover::after,
.nav-links a.active::before,
.nav-links a.active::after { color: var(--connect); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px;
  border: 1px solid var(--frame-soft);
  background: transparent;
  transition: all var(--t);
}
.lang-switch:hover { border-color: var(--ink); color: var(--ink); }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--frame);
  align-items: center;
  justify-content: center;
}
.burger span,
.burger span::before,
.burger span::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: transform var(--t), opacity var(--t);
}
.burger span::before { position: absolute; top: -5px; }
.burger span::after  { position: absolute; top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--paper);
  border-top: 1px solid var(--frame-soft);
  z-index: 40;
  padding: 24px;
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu nav { display: grid; gap: 0; }
.mobile-menu nav a {
  padding: 16px 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px dashed var(--frame-soft);
}
.mobile-menu nav a::before { content: "→ "; color: var(--connect); }
.mobile-menu .btn { margin-top: 24px; width: 100%; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--frame);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}

.btn::before { content: "→"; color: var(--connect); transition: transform var(--t); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--frame); }
.btn:hover::before { transform: translateX(2px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-primary::before { color: var(--connect); }
.btn-primary:hover { box-shadow: 4px 4px 0 var(--connect); }

.btn-accent {
  background: var(--connect);
  color: #fff;
  border-color: var(--connect);
}
.btn-accent::before { color: #fff; }
.btn-accent:hover { box-shadow: 4px 4px 0 var(--ink); }
/* keep solid-fill buttons' text white on hover (global a:hover would otherwise turn it orange) */
.btn-primary:hover, .btn-accent:hover { color: #fff; }

.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-ghost::before { color: var(--connect); }
.btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: #fff;
  color: #fff;
  box-shadow: 4px 4px 0 var(--connect);
}

.btn-lg { min-height: 52px; padding: 0 28px; font-size: 14px; }

/* ===== Pixel mosaic accents (decoration from logo) ===== */
.pixmap {
  display: inline-grid;
  grid-template-columns: repeat(4, 8px);
  grid-template-rows: repeat(4, 8px);
  gap: 2px;
  vertical-align: middle;
}
.pixmap span { width: 8px; height: 8px; }
.pixmap .px-c { background: var(--system); }
.pixmap .px-o { background: var(--connect); }
.pixmap .px-g { background: var(--output); }
.pixmap .px-y { background: var(--warn); }
.pixmap .px-i { background: var(--ink); }

/* large decorative variant */
.pixmap-lg {
  grid-template-columns: repeat(8, 14px);
  grid-template-rows: repeat(8, 14px);
  gap: 3px;
}
.pixmap-lg span { width: 14px; height: 14px; }

/* ===== Hero ===== */
.hero {
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-meta .dot { width: 6px; height: 6px; background: var(--output); border-radius: 50%; box-shadow: 0 0 8px var(--output); }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.hero-eyebrow span { color: var(--connect); }

.hero h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  letter-spacing: -0.025em;
}
.hero h1 .hl { color: var(--connect); }
.hero h1 .underline {
  background-image: linear-gradient(transparent 78%, var(--warn) 78%, var(--warn) 92%, transparent 92%);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero-meta-line {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.hero-meta-line span { color: var(--ink-2); }
.hero-meta-line .sep { color: var(--connect); margin: 0 8px; }

/* Hero schema (right column) — Bitrix24 as central hub */
.hero-schema {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin-left: auto;
  font-family: var(--font-mono);
}

.hero-schema svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Maxi.az proof (re-imagined as schema-card spec) ===== */
.spec {
  background: var(--paper);
  border: 1px solid var(--frame);
  display: grid;
  grid-template-columns: 280px 1fr;
}

.spec-side {
  background: var(--bp-dark);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}

.spec-side .kicker { color: rgba(255,255,255,0.5); }
.spec-side h2 { color: #fff; font-size: 26px; line-height: 1.2; margin-top: 18px; }
.spec-side .pixmap-lg { margin-top: 24px; }

.spec-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.spec-row {
  padding: 24px 28px;
  border-bottom: 1px dashed var(--frame-soft);
  border-right: 1px dashed var(--frame-soft);
}
.spec-row:nth-child(2n) { border-right: 0; }
.spec-row:nth-last-child(-n+2) { border-bottom: 0; }

.spec-row .row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.spec-row b { display: block; color: var(--ink); font-size: 16px; line-height: 1.25; margin-bottom: 8px; font-weight: 700; }
.spec-row p { color: var(--ink-3); font-size: 14px; line-height: 1.55; }

/* ===== Offers stack (vertical hierarchy with rank labels) ===== */
.offer-stack {
  display: grid;
  gap: 20px;
}

.offer-row {
  display: grid;
  grid-template-columns: 80px 1fr 320px;
  gap: 32px;
  align-items: stretch;
  border: 1px solid var(--frame);
  background: var(--paper);
  position: relative;
}

.offer-row.warm { border-color: var(--connect); }
.offer-row.system { border-color: var(--system); }

.offer-rank {
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  padding: 28px 0;
  text-align: center;
}
.offer-row.warm .offer-rank { background: var(--connect); }
.offer-row.system .offer-rank { background: var(--system); }

.offer-rank .num { font-size: 32px; font-weight: 500; line-height: 1; }
.offer-rank .label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.7;
}

.offer-body {
  padding: 28px 0 28px 0;
}
.offer-body h3 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; max-width: 36ch; }
.offer-body > p { color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 64ch; }

.offer-bullets {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.offer-bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.offer-bullets li::before {
  content: attr(data-i);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--connect);
  letter-spacing: 0.04em;
  padding-top: 2px;
  font-weight: 500;
}

.offer-aside {
  border-left: 1px dashed var(--frame-soft);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.offer-aside .stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.offer-aside .stat b { display: block; color: var(--ink); font-size: 22px; font-weight: 500; margin-bottom: 4px; }

/* ===== Process diagram (replaces philosophy/principles) ===== */
.process {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--frame);
  background: var(--paper);
}
.process-step {
  padding: 28px 24px;
  border-right: 1px dashed var(--frame-soft);
  position: relative;
}
.process-step:last-child { border-right: 0; }

.process-step .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--connect);
  margin-bottom: 12px;
}
.process-step h4 { font-size: 17px; line-height: 1.25; margin-bottom: 10px; }
.process-step p { color: var(--ink-3); font-size: 14px; line-height: 1.55; }

.process-step::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--connect);
  font-family: var(--font-mono);
  font-size: 14px;
  transform: translateY(-50%);
  border: 1px solid var(--frame-soft);
  border-radius: 0;
  z-index: 2;
}
.process-step:last-child::after { display: none; }
.section.alt .process-step::after { background: var(--paper-2); }

/* Quote on dark blueprint */
.bp-quote {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border: 1px solid var(--frame);
}
.bp-quote .q-text {
  background: var(--bp-dark);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #fff;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}
.bp-quote .q-text .kicker { color: rgba(255,255,255,0.5); margin-bottom: 24px; }
.bp-quote .q-text q {
  display: block;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
  quotes: "«" "»";
}
.bp-quote .q-text .q-meta {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}
.bp-quote .q-aside {
  background: var(--paper);
  padding: 36px 32px;
  display: grid;
  gap: 16px;
  align-content: center;
}
.bp-quote .q-aside h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 4px;
}
.bp-quote .q-aside p { font-size: 16px; color: var(--ink-2); line-height: 1.6; }
.bp-quote .q-aside p b { color: var(--ink); font-weight: 700; }

/* ===== Infra blocks (replaces 3-card grid) — modular schema ===== */
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.module {
  border: 1px solid var(--frame);
  background: var(--paper);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.module:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--frame); }

.module .module-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--paper);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--system-2);
}
.section.alt .module .module-tag { background: var(--paper-2); }

.module h3 { font-size: 19px; line-height: 1.2; }
.module p { color: var(--ink-3); font-size: 14px; line-height: 1.6; }

.module .module-pins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}
.module-pin {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid var(--frame-soft);
  color: var(--ink-3);
  text-transform: uppercase;
}

.module-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--connect);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.module-link::after { content: "→"; transition: transform var(--t); }
.module-link:hover { color: var(--connect-2); }
.module-link:hover::after { transform: translateX(3px); }

/* ===== Virtual specialists (two big role cards) ===== */
.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.role {
  border: 1px solid var(--frame);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
}

.role-head {
  padding: 28px 32px 20px;
  display: grid;
  gap: 14px;
}
.role-head .role-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-head .role-id .pixmap { vertical-align: middle; }
.role-head .role-id .id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.role-head h3 { font-size: 24px; line-height: 1.2; }

.role-body {
  padding: 0 32px 24px;
  display: grid;
  gap: 18px;
}
.role-body p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }

.role-checks {
  display: grid;
  gap: 10px;
}
.role-checks li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.role-checks li::before {
  content: "▪";
  color: var(--system);
  font-size: 14px;
  line-height: 1.4;
}
.role.warm .role-checks li::before { color: var(--connect); }

.role-foot {
  padding: 20px 32px;
  border-top: 1px dashed var(--frame-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

/* warning callout below roles */
.callout {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px dashed var(--connect);
  background: rgba(255, 122, 26, 0.04);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.callout b { color: var(--ink); }
.callout::before {
  content: "⚠ ";
  font-family: var(--font-mono);
  color: var(--connect);
  font-weight: 500;
  margin-right: 4px;
}

/* ===== Packages (catalog rows) ===== */
.catalog {
  display: grid;
  border: 1px solid var(--frame);
  background: var(--paper);
}

.catalog-row {
  display: grid;
  grid-template-columns: 60px 1.2fr 2fr 140px 140px;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px dashed var(--frame-soft);
  align-items: start;
  transition: background var(--t);
}
.catalog-row:last-child { border-bottom: 0; }
.catalog-row:hover { background: rgba(255, 122, 26, 0.03); }

.catalog-row .cat-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.catalog-row .cat-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}
.catalog-row .cat-desc {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.55;
}
.catalog-row .cat-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.catalog-row .cat-meta span { display: block; color: var(--ink-mute); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.catalog-row .cat-cta {
  align-self: center;
}

.catalog-foot {
  padding: 20px 28px;
  background: var(--paper-2);
  border-top: 1px solid var(--frame);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ===== Local block (Gorkhmaz) — schema box ===== */
.local-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border: 1px solid var(--frame);
  background: var(--paper);
}
.local-text {
  padding: 40px 36px;
}
.local-text h2 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 18px; }
.local-text p { color: var(--ink-3); margin-top: 16px; line-height: 1.65; }

.local-actions {
  background: var(--paper-2);
  padding: 36px;
  border-left: 1px dashed var(--frame-soft);
  display: grid;
  gap: 14px;
  align-content: center;
}
.local-action {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  line-height: 1.5;
}
.local-action::before {
  content: "→";
  color: var(--connect);
}

/* Baku representative — contact row (phone + messengers, one number) */
.local-contact { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.local-contact .lc-phone { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.local-contact .lc-phone:hover { color: var(--connect); }
.local-contact .lc-ch { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.local-contact .lc-ch a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border: 1px solid var(--frame-soft); padding: 6px 12px; transition: color .15s, border-color .15s; }
.local-contact .lc-ch a:hover { color: var(--connect); border-color: var(--connect); }

/* Partners — real brand wordmarks in bold cards above the footer */
.partners-sec { border-top: 1px solid var(--frame); }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.partner-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 48px 24px; min-height: 216px; border: 1px solid var(--frame); background: var(--paper); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
a.partner-card:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--frame); }
.partner-logo { width: 84px; height: 84px; object-fit: contain; }
.up-tile { width: 90px; height: 90px; border-radius: 20px; background: var(--paper-2); border: 1px solid var(--frame-soft); display: grid; place-items: center; }
.up-tile svg { width: 54px; height: 54px; }
.partner-word { font-family: var(--font-sans); font-weight: 800; line-height: 1; }
.pw-tag { font-size: 27px; letter-spacing: -0.02em; }
.pw-tag .a { color: #202124; }
.pw-tag .b { color: #1a73e8; }
.pw-wd { font-size: 27px; letter-spacing: -0.03em; color: #0f172a; }
.pw-wd .dot { color: #3ddc97; }
.pw-up { font-size: 27px; }
.partner-text { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.partner-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 34ch; }
.partner-card.is-soon { background: var(--paper-2); border-style: dashed; }
.soon-badge { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); padding: 4px 9px; }
@media (max-width: 760px) { .partner-grid { grid-template-columns: 1fr; } }

/* ===== Final CTA on dark blueprint ===== */
.final {
  padding: 96px 0;
  background: var(--bp-dark);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: rgba(255,255,255,0.78);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.final h2 { color: #fff; max-width: 22ch; }
.final .schema-label { color: rgba(255,255,255,0.4); }
.final .schema-label::before { color: var(--connect); }
.final-row {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 36px;
  align-items: center;
}
.final p { margin-top: 18px; max-width: 60ch; color: rgba(255,255,255,0.7); line-height: 1.6; font-size: 16px; }
.final .pixmap-lg { margin-top: 28px; }

/* ===== Footer ===== */
.footer {
  background: var(--paper-3);
  padding: 56px 0 24px;
  font-size: 13px;
  color: var(--ink-3);
  border-top: 1px solid var(--frame);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px dashed var(--frame-soft);
}

.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

.footer ul { display: grid; gap: 10px; }
.footer ul a:hover { color: var(--connect); }

.footer-brand p {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 320px;
}

.footer-bottom {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* ===== Inline schema connector (used in hero SVG and elsewhere) ===== */
.svg-schema {
  font-family: var(--font-mono);
}
.svg-schema text { font-size: 11px; fill: var(--ink); letter-spacing: 0.04em; }
.svg-schema text.label { fill: var(--ink-3); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; }
.svg-schema rect.box { fill: var(--paper); stroke: var(--frame); stroke-width: 1; }
.svg-schema rect.hub { fill: var(--ink); stroke: var(--ink); }
.svg-schema text.hub-text { fill: #fff; font-weight: 500; }
.svg-schema line { stroke: var(--frame); stroke-width: 1; }
.svg-schema line.active { stroke: var(--connect); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ===== Responsive ===== */

/* Logo clear space: the longer Azerbaijani nav labels crowd the wordmark on
   1061–1200px screens (the gap collapses to the flex minimum). Collapse the
   horizontal nav into the burger earlier so the logo always keeps breathing
   room. Kept separate from the 1060 block below, which also drives unrelated
   layout and must not shift. */
@media (max-width: 1250px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-actions .lang-switch { display: none; }
  .burger { display: inline-flex; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-schema { max-width: 380px; margin: 0; }

  .spec { grid-template-columns: 1fr; }
  .spec-side { min-height: 240px; }
  .spec-rows { grid-template-columns: 1fr; }
  .spec-row { border-right: 0; }

  .offer-row { grid-template-columns: 64px 1fr; }
  .offer-aside { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--frame-soft); flex-direction: row; flex-wrap: wrap; }

  .process { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(2)::after { display: none; }
  .process-step:nth-child(odd) { border-right: 1px dashed var(--frame-soft); }
  .process-step:nth-child(2),
  .process-step:nth-child(4) { border-right: 0; }
  .process-step:nth-child(1),
  .process-step:nth-child(2) { border-bottom: 1px dashed var(--frame-soft); }

  .bp-quote { grid-template-columns: 1fr; }
  .modules { grid-template-columns: 1fr 1fr; }
  .roles { grid-template-columns: 1fr; }

  .catalog-row { grid-template-columns: 50px 1fr 1fr; }
  .catalog-row .cat-meta { grid-column: 2 / -1; }
  .catalog-row .cat-cta { grid-column: 2 / -1; }

  .local-block { grid-template-columns: 1fr; }
  .local-actions { border-left: 0; border-top: 1px dashed var(--frame-soft); }

  .final-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 680px) {
  :root { --gutter: 28px; }

  body { background-size: 18px 18px; }

  .nav-actions .btn { display: none; }

  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .lead { font-size: 17px; }

  .section { padding: 64px 0; }
  .final { padding: 64px 0; }

  .offer-row { grid-template-columns: 1fr; }
  .offer-rank { flex-direction: row; padding: 12px 24px; gap: 14px; }
  .offer-rank .num { font-size: 22px; }

  .process { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
  .process-step { border-right: 0; border-bottom: 1px dashed var(--frame-soft); }
  .process-step:last-child { border-bottom: 0; }

  .modules { grid-template-columns: 1fr; }

  .catalog-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 22px; }
  .catalog-row .cat-num { color: var(--connect); }

  .footer-grid { grid-template-columns: 1fr; }

  .spec-side { padding: 24px; }
  .spec-row { padding: 20px 22px; }
  .role-head, .role-body, .role-foot { padding-left: 22px; padding-right: 22px; }
  .local-text, .local-actions { padding: 24px; }
  .bp-quote .q-text { padding: 28px 24px; min-height: auto; }
  .bp-quote .q-text q { font-size: 22px; }
  .bp-quote .q-aside { padding: 24px; }
}

@media print {
  body { background: #fff; }
  .topbar, .footer, .burger, .mobile-menu, .lang-switch { display: none; }
}