/* ============================================================
   УК РНГС — Общие стили сайта
   Тёмная тема по умолчанию, переключение на светлую
   Вдохновение: E-Engineering (типографика, pill-кнопки, red-line label)
                Фотон (левое меню, зелёные акценты, галерея документов)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== Тёмная тема (по умолчанию) ===== */
  --bg: #0A0D0C;
  --bg-alt: #10130F;
  --surface: #151915;
  --surface-2: #1B201B;
  --text: #F5F6F4;
  --text-secondary: #9CA6A0;
  --text-muted: #6B756F;
  --border: #232A24;
  --border-light: #2C332C;

  --accent: #4ECCA3;        /* teal/mint — основной акцент */
  --accent-hover: #3DB894;
  --accent-contrast: #0A0D0C;
  --accent-green: #2EBD59;  /* зелёный — Фотон-стиль (sidebar) */
  --accent-red: #E8493D;    /* красная линия — E-Engineering стиль */

  --overlay: rgba(6, 8, 6, 0.55);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius-pill: 999px;
  --radius: 10px;
  --font: 'Montserrat', -apple-system, sans-serif;
}

:root[data-theme="light"] {
  --bg: #F6F5F1;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0EFEA;
  --text: #14181A;
  --text-secondary: #5B615E;
  --text-muted: #8A908B;
  --border: #E4E2DB;
  --border-light: #ECEAE3;

  --accent: #1FA983;
  --accent-hover: #178C6C;
  --accent-contrast: #FFFFFF;
  --accent-green: #1F9E4A;
  --accent-red: #D8382C;

  --overlay: rgba(20, 24, 26, 0.35);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ===== Eyebrow label (E-Engineering style: red line + caps text) ===== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent-red);
  flex-shrink: 0;
}
.eyebrow.on-hero { color: rgba(255,255,255,0.85); }

/* ===== Buttons (pill-shaped) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-light); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline.on-hero { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline.on-hero:hover { border-color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* ===== Header ===== */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  border-bottom: 1px solid transparent;
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
header.site-header.transparent { background: transparent; color: #fff; }
header.site-header.solid {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo .logo-mark {
  width: 52px; height: 52px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 13px;
  padding: 7px;
  box-sizing: border-box;
}
.logo .logo-text {
  display: flex;
  flex-direction: column;
}
.logo .logo-title {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}
.logo .logo-subtitle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1;
  margin-top: 5px;
}
nav.main-nav { display: flex; align-items: center; gap: 8px; }
nav.main-nav ul {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
}
nav.main-nav ul li a {
  font-size: 14px; font-weight: 500; opacity: 0.9;
  transition: opacity .2s ease, color .2s ease;
}
nav.main-nav ul li a:hover { opacity: 1; color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* ===== Переключатель темы (сегментированный, иконки светлая/тёмная) ===== */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.theme-switch-btn {
  position: relative;
  z-index: 2;
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  opacity: .55;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .25s ease, color .25s ease;
}
.theme-switch-btn svg { width: 16px; height: 16px; display: block; }
.theme-switch-btn[aria-checked="true"] { opacity: 1; color: var(--accent-contrast); }
.theme-switch-btn:hover { opacity: .85; }
.theme-switch-btn[aria-checked="true"]:hover { opacity: 1; }
.theme-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 1;
  pointer-events: none;
}
.theme-switch[data-active-theme="dark"] .theme-switch-thumb { transform: translateX(30px); }
.theme-switch[data-active-theme="light"] .theme-switch-thumb { transform: translateX(0); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  cursor: pointer;
  background: none; border: none; padding: 0;
}
.hamburger span { height: 2px; width: 100%; background: currentColor; }

@media (max-width: 900px) {
  nav.main-nav > ul { display: none; }
  .hamburger { display: flex; }
}

/* Mobile menu drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  color: var(--text);
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  padding: 24px;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.mobile-drawer .close-btn { font-size: 28px; background: none; border: none; color: inherit; cursor: pointer; }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0 0 24px; }
.mobile-drawer ul li { border-bottom: 1px solid var(--border); }
.mobile-drawer ul li a { display: block; padding: 16px 0; font-size: 17px; font-weight: 600; }
.mobile-drawer .companies-toggle {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 20px 0 10px;
}
.mobile-drawer .company-sub { padding-left: 14px; }
.mobile-drawer .company-sub a { font-size: 15px; font-weight: 500; }

/* ===== Footer ===== */
footer.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 64px 0 30px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1.9fr;
  gap: 80px;
  margin-bottom: 40px;
}
/* Internal (company) pages drop the "Компании" column — three tracks instead of four.
   The first (contact info) column is widened so "Волочаевская, 6, пом. 1012" wraps onto its own
   line instead of splitting mid-phrase; "Обратная связь" gives up most of that space, "Меню"
   stays comfortably wider than its longest link either way. */
.footer-grid.footer-grid-3col { grid-template-columns: 1.3fr 0.7fr 1.7fr; }
/* Internal pages only: footer column headings match the logo's "руснефтегазсервис" accent color
   instead of the default muted gray */
.footer-grid.footer-grid-3col .footer-col h4 { color: var(--accent); }
.footer-col h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a { font-size: 14px; color: var(--text-secondary); transition: color .2s ease; }
.footer-col ul li a:hover { color: var(--accent); }
.footer-col p.contact-line { font-size: 14px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; }
.footer-col p.contact-line .ico { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.footer-col p.contact-line .ico svg { width: 14px; height: 14px; display: block; }
.footer-col p.contact-line .contact-text { flex: 1; min-width: 0; }
.footer-form { display: flex; flex-direction: column; gap: 10px; }
.footer-form input {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-light);
  background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13px;
}
.footer-form input::placeholder { color: var(--text-muted); }
/* Send button: less rounded than the default pill buttons (matches the 8px radius of the inputs
   above it), sized to its own content instead of stretching, and pushed to the right edge of the form. */
.footer-form .btn {
  border-radius: 8px;
  align-self: flex-end;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 30px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--accent); }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Breadcrumbs ===== */
.breadcrumbs {
  padding: 110px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
.breadcrumbs .current { color: var(--text-secondary); }

/* ============================================================
   LEFT SIDEBAR (минисайты компаний — стиль Фотон)
   ============================================================ */
.company-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  padding-top: 68px;
  min-height: 100vh;
}
.company-sidebar {
  border-right: 1px solid var(--border);
  padding: 40px 28px 20px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow-y: auto;
}
.company-sidebar .sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.company-sidebar .sidebar-logo img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; }
.company-sidebar .sidebar-logo .name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.sidebar-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); font-weight: 700; margin: 0 0 12px;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0 0 32px; }
.sidebar-nav li a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  transition: all .2s ease;
  margin-bottom: 2px;
}
.sidebar-nav li a:hover { background: var(--surface); color: var(--text); }
.sidebar-nav li a.active { background: var(--surface-2); color: var(--accent); font-weight: 600; }
/* padding-bottom поднимает блок "Группа компаний" над копирайтом (следующий элемент,
   .sidebar-footer-links) — копирайт остаётся у нижнего края сайдбара как и раньше
   (эта пара всё ещё выталкивается вниз через .sidebar-bottom-group { margin-top: auto }),
   просто зазор между списком компаний и копирайтом стал больше. */
.sidebar-companies { list-style: none; padding: 0 0 50px; margin: 0; }
.sidebar-companies li a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-muted);
  transition: all .2s ease;
}
.sidebar-companies li a:hover { color: var(--text-secondary); background: var(--surface); }
/* Groups the "Группа компаний" list with the sidebar's bottom links/copyright so the two move
   down together and settle as one unit at the bottom of the sidebar column (the sidebar is a flex
   column with a fixed viewport-based height, so this auto margin absorbs any leftover space).
   The border-top on .sidebar-footer-links still acts as the separator line between the two parts.
   No margin-bottom of its own — the sidebar's own 20px bottom padding (.company-sidebar's
   `padding: 40px 28px 20px`) is what sets the gap below the group; adding margin here would stack
   on top of that padding instead of replacing it. */
.company-sidebar .sidebar-bottom-group { margin-top: auto; }
.sidebar-footer-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-footer-links a { font-size: 12px; color: var(--text-muted); }
.sidebar-footer-links a:hover { color: var(--text-secondary); }

.company-content { padding: 48px 56px 80px; max-width: 980px; }
.company-content h1 { font-size: 38px; margin: 0 0 8px; font-weight: 800; }
.company-content .subtitle { color: var(--text-secondary); font-size: 16px; margin: 0 0 40px; }

/* ===== Курсорная подсветка + сетка в контентной области внутренних страниц (только тёмная
   тема — в светлой эти правила не подключаются, т.к. висят на :root:not([data-theme="light"])).
   Слой висит на .company-page, а не на .company-content: у .company-content есть
   max-width:980px (ограничивает ширину текста), из-за чего эффект раньше упирался в правый
   край текстового блока и не доходил до края страницы. .company-page — обёртка без
   max-width, она и так растянута на всю ширину справа от сайдбара (об этом заботится
   margin-left:280px на .ikg-canvas), поэтому эффект теперь распространяется до самого
   края экрана. --spot-x/--spot-y — координаты курсора внутри .company-page в px, их
   обновляет script.js по mousemove (изначально вынесены за экран, чтобы пятно не было
   видно до первого движения мыши). Два слоя: ::before — едва заметная сетка линиями,
   замаскированная радиальным градиентом так, что видна только в круге вокруг курсора;
   ::after — мягкое цветное пятно подсветки на том же месте. .company-content поднят над
   слоями через z-index. */
:root:not([data-theme="light"]) .company-page {
  position: relative;
  --spot-x: -9999px;
  --spot-y: -9999px;
}
:root:not([data-theme="light"]) .company-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle 260px at var(--spot-x) var(--spot-y), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 260px at var(--spot-x) var(--spot-y), #000 0%, transparent 100%);
}
:root:not([data-theme="light"]) .company-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 260px at var(--spot-x) var(--spot-y), rgba(78, 204, 163, 0.12), transparent 70%);
}
:root:not([data-theme="light"]) .company-page > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .company-page { grid-template-columns: 1fr; }
  .company-sidebar { display: none; }
  .company-content { padding: 32px 20px 60px; }
}

/* ===== Generic content blocks (used across company pages) ===== */
.section-block { margin-bottom: 56px; }
.section-block h2 {
  font-size: 22px; font-weight: 700; margin: 0 0 18px;
  padding-left: 16px; position: relative;
}
.section-block h2::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px;
  background: var(--accent-red);
}
.section-block p { color: var(--text-secondary); line-height: 1.8; font-size: 15px; margin: 0 0 16px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; }
.stat-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.stat-box .num { font-size: 26px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.stat-box .lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.chip {
  font-size: 12px; padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.competency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.competency-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.competency-card h3 { font-size: 15px; margin: 0 0 8px; font-weight: 700; }
.competency-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
@media (max-width: 700px) { .competency-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; margin-bottom: 20px;
}
.contact-card .row { display: flex; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.contact-card .row .ico { color: var(--accent); flex-shrink: 0; }
.map-embed {
  width: 100%; height: 360px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.15); }

.doc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.doc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: all .2s ease;
}
.doc-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.doc-card .doc-ico { font-size: 26px; }
.doc-card .doc-name { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.doc-card .doc-meta { font-size: 12px; color: var(--text-muted); }
.doc-empty { color: var(--text-muted); font-size: 14px; padding: 30px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
@media (max-width: 700px) { .doc-gallery { grid-template-columns: 1fr 1fr; } }