/* ============================================================
   СВОД — сопровождение подключения спутниковых терминалов
   Тема: editorial-technical · тёплая бумага + изумрудный акцент
   Раскладка: компактная одноэкранная карточка
   ============================================================ */

:root {
  --paper:      #F4F1EA;
  --paper-2:    #ECE7DB;
  --card:       #FBF9F4;
  --ink:        #14171C;
  --ink-soft:   #4C525C;
  --ink-faint:  #7C828C;

  --accent:      #0F9C74;   /* декоративный изумруд */
  --accent-deep: #0A6E52;   /* текст/кнопки на бумаге */
  --accent-soft: rgba(15, 156, 116, 0.10);
  --accent-line: rgba(15, 156, 116, 0.28);

  --amber:      #C8791F;    /* редкий тёплый акцент */
  --line:       rgba(20, 23, 28, 0.12);
  --line-soft:  rgba(20, 23, 28, 0.07);

  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 1px 2px rgba(20,23,28,.04), 0 8px 30px rgba(20,23,28,.06);
  --shadow-lg:  0 2px 6px rgba(20,23,28,.05), 0 24px 60px rgba(20,23,28,.12);

  --container:  1120px;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Golos Text', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,23,28,.045) 1px, transparent 0);
  background-size: 26px 26px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }

/* ============================================================
   Stage + Card (компактная одноэкранная раскладка)
   ============================================================ */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 44px) 18px;
}

.card {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4.5vw, 44px) clamp(22px, 4vw, 46px) clamp(24px, 3.5vw, 36px);
  text-align: center;
}

/* ---------- Mark / glyph ---------- */
.mark { display: grid; place-items: center; margin-bottom: 14px; }
.orbit {
  width: clamp(96px, 24vw, 124px);
  height: auto; display: block; overflow: visible;
}
.orbit .ring { fill: none; stroke: rgba(20,23,28,.10); stroke-width: 1.4; }
.orbit .ring-dash { fill: none; stroke: var(--accent-line); stroke-width: 1.6; stroke-dasharray: 2 12; stroke-linecap: round; }
.orbit .ping { fill: none; stroke: var(--accent); stroke-width: 2; }
.orbit .arc { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.orbit .node { fill: var(--accent-deep); }
.orbit .core { fill: var(--accent-deep); }
.orbit .core-ring { fill: none; stroke: var(--accent); stroke-width: 1.8; opacity: .55; }

/* ---------- Brand ---------- */
.brand-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: .06em;
  color: var(--ink);
}
.brand-sub {
  font-size: clamp(.82rem, 3vw, .92rem);
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin-top: 4px;
}

/* ---------- Headline ---------- */
.headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.28rem, 5.2vw, 1.72rem); line-height: 1.18;
  letter-spacing: -0.01em;
  margin-top: 22px;
}
.headline .accent { color: var(--accent-deep); }
.tagline {
  color: var(--ink-soft);
  font-size: clamp(.94rem, 3.4vw, 1.02rem);
  max-width: 40ch; margin: 10px auto 0;
}

/* ---------- Divider (── ✦ ──) ---------- */
.divider {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(18px, 3.5vw, 26px) auto;
  width: min(300px, 80%);
  color: var(--accent);
}
.divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.divider span { font-size: .8rem; color: var(--accent-deep); }

/* ---------- Price list (точки-лидеры) ---------- */
.price-list { display: grid; gap: 12px; text-align: left; }
.price-row { display: flex; align-items: baseline; gap: 8px; }
.price-row .name {
  font-weight: 600; font-size: clamp(1rem, 3.8vw, 1.1rem); color: var(--ink);
  white-space: nowrap;
}
.price-row .leader {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-4px);
  min-width: 24px;
}
.price-row .value {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 3.8vw, 1.14rem); color: var(--ink);
  white-space: nowrap;
}
.price-row .value b { font-weight: 500; color: var(--ink-soft); font-family: var(--font-body); }
.price-note {
  margin-top: 12px; font-size: .84rem; color: var(--ink-faint);
}

/* ---------- Actions (кнопки в столбик) ---------- */
.actions { display: grid; gap: 12px; }
.cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  color: var(--ink);
  text-align: left;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.cta .ic { flex: none; display: grid; place-items: center; color: var(--accent-deep); }
.cta:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow); }

.cta-primary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: 0 8px 22px rgba(10,110,82,.24);
  padding: 16px 22px;
}
.cta-primary .ic { color: #fff; }
.cta-primary:hover { transform: translateY(-2px); border-color: var(--accent-deep); box-shadow: 0 14px 30px rgba(10,110,82,.32); }
.cta-body { display: grid; gap: 2px; line-height: 1.2; }
.cta-body b { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: .01em; }
.cta-body small { font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.82); }

/* ---------- Mini footer ---------- */
.mini-foot {
  display: grid; gap: 4px;
  margin-top: clamp(20px, 3.5vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--ink-faint);
}

/* ============================================================
   Legal document pages
   ============================================================ */
.doc-wrap { max-width: 780px; margin-inline: auto; padding-block: clamp(48px, 7vw, 88px); }
.doc-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--accent-deep); margin-bottom: 30px; }
.doc-back:hover { gap: 12px; }
.doc-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 10px; }
.doc-meta { color: var(--ink-faint); font-size: .9rem; margin-bottom: 40px; }
.doc-wrap h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.24rem; margin-block: 34px 12px; }
.doc-wrap h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin-block: 22px 8px; }
.doc-wrap p, .doc-wrap li { color: var(--ink-soft); font-size: 1rem; margin-bottom: 12px; }
.doc-wrap ul, .doc-wrap ol { padding-left: 22px; margin-bottom: 14px; }
.doc-wrap li { margin-bottom: 8px; }
.doc-wrap strong { color: var(--ink); }
.placeholder { background: var(--accent-soft); border-bottom: 1px dashed var(--accent-line); padding: 1px 6px; border-radius: 4px; color: var(--accent-deep); font-weight: 600; }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); animation: reveal .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 420px) {
  .card { padding-left: 18px; padding-right: 18px; }
  .price-row .name, .price-row .value { font-size: 1rem; }
  .cta { padding: 14px 16px; gap: 12px; }
}