/*
  Визуальный слой Kras Service.

  Этот файл можно редактировать без вмешательства в основу сайта:
  - index.html отвечает за структуру;
  - styles.css отвечает за базовый дизайн;
  - script.js отвечает за поведение формы и кнопок;
  - visual-overrides.css отвечает за быстрые визуальные корректировки.

  Как пользоваться:
  1. Меняйте значения только в блоке :root ниже.
  2. Для сдвигов используйте px: 20px, -12px, 0px.
  3. Для масштаба используйте числа: 1, 0.95, 1.08.
  4. Если что-то уехало, верните значение к 0px или 1.
*/

:root {
  /* Цвета сайта */
  --edit-ink: #071a2d;
  --edit-ink-soft: #0b233a;
  --edit-paper: #f7fafc;
  --edit-paper-dark: #edf6fc;
  --edit-white: #ffffff;
  --edit-muted: #536779;
  --edit-line: #d7e4ed;
  --edit-accent: #087bff;
  --edit-accent-dark: #0065d9;
  --edit-lime: #13b8a6;
  --edit-blue: #2bbfef;

  /* Общие размеры */
  --edit-container-width: 1180px;
  --edit-radius-small: 14px;
  --edit-radius-medium: 22px;
  --edit-radius-large: 34px;
  --edit-card-radius: 28px;
  --edit-button-height: 54px;
  --edit-button-padding-y: 13px;
  --edit-button-padding-x: 22px;
  --edit-button-scale: 1;

  /* Шапка */
  --edit-header-y: 0px;
  --edit-header-height: 80px;
  --edit-brand-x: 0px;
  --edit-brand-y: 0px;
  --edit-telegram-header-x: 0px;
  --edit-telegram-header-y: 0px;
  --edit-nav-x: 0px;
  --edit-nav-y: 0px;

  /* Первый экран */
  --edit-hero-copy-x: 0px;
  --edit-hero-copy-y: 0px;
  --edit-hero-visual-x: 0px;
  --edit-hero-visual-y: 0px;
  --edit-hero-visual-scale: 1;
  --edit-hero-grid-opacity: 0.42;
  --edit-hero-title-min: 44px;
  --edit-hero-title-fluid: 5vw;
  --edit-hero-title-max: 74px;
  --edit-hero-title-scale: 1;
  --edit-hero-title-gap: 0px;
  --edit-wifi-line-size: 0.78em;
  --edit-wifi-line-size-tablet: 0.72em;
  --edit-wifi-line-size-mobile: 0.92em;
  --edit-wifi-line-wrap: normal;
  --edit-wifi-line-wrap-mobile: normal;
  --edit-hero-text-width: 650px;
  --edit-hero-text-size: 18px;

  /* Иллюстрация с камерой и телефоном */
  --edit-glow-x: 0px;
  --edit-glow-y: 0px;
  --edit-glow-scale: 1;
  --edit-camera-scene-x: 0px;
  --edit-camera-scene-y: 0px;
  --edit-camera-scene-scale: 1;
  --edit-camera-x: 0px;
  --edit-camera-y: 0px;
  --edit-phone-x: 0px;
  --edit-phone-y: 0px;
  --edit-card-online-x: 0px;
  --edit-card-online-y: 0px;
  --edit-card-record-x: 0px;
  --edit-card-record-y: 0px;
  --edit-card-bot-x: 0px;
  --edit-card-bot-y: 0px;

  /* Секции страницы */
  --edit-services-y: 0px;
  --edit-use-cases-y: 0px;
  --edit-calculator-y: 0px;
  --edit-process-y: 0px;
  --edit-why-y: 0px;
  --edit-faq-y: 0px;
  --edit-request-y: 0px;
  --edit-section-heading-gap: 60px;
  --edit-service-grid-gap: 18px;
  --edit-process-grid-gap: 22px;
  --edit-request-grid-gap: 46px;

  /* Форма заявки */
  --edit-form-card-radius: 26px;
  --edit-input-radius: 14px;
  --edit-upload-radius: 18px;
  --edit-result-radius: 26px;
}

/*
  Передаем выбранные цвета и размеры в базовую тему.
  Меняя переменные --edit-* выше, ты меняешь внешний вид сайта.
*/
:root {
  --color-bg: var(--edit-paper);
  --color-surface: var(--edit-white);
  --color-surface-soft: var(--edit-paper-dark);
  --color-navy: var(--edit-ink);
  --color-navy-secondary: var(--edit-ink-soft);
  --color-text: #102033;
  --color-muted: var(--edit-muted);
  --color-primary: var(--edit-accent);
  --color-primary-hover: var(--edit-accent-dark);
  --color-teal: var(--edit-lime);
  --color-cyan: var(--edit-blue);
  --color-border: var(--edit-line);
  --ink: var(--edit-ink);
  --ink-soft: var(--edit-ink-soft);
  --paper: var(--edit-paper);
  --paper-dark: var(--edit-paper-dark);
  --white: var(--edit-white);
  --muted: var(--edit-muted);
  --line: var(--edit-line);
  --accent: var(--edit-accent);
  --accent-dark: var(--edit-accent-dark);
  --lime: var(--edit-lime);
  --blue: var(--edit-blue);
  --radius-sm: var(--edit-radius-small);
  --radius-md: var(--edit-radius-medium);
  --radius-lg: var(--edit-radius-large);
  --container: var(--edit-container-width);
}

.site-header {
  translate: 0 var(--edit-header-y);
}

.header-inner {
  min-height: var(--edit-header-height);
}

.brand {
  translate: var(--edit-brand-x) var(--edit-brand-y);
}

.telegram-header {
  translate: var(--edit-telegram-header-x) var(--edit-telegram-header-y);
}

.main-nav {
  translate: var(--edit-nav-x) var(--edit-nav-y);
}

.hero-grid {
  opacity: var(--edit-hero-grid-opacity);
}

.hero-copy {
  translate: var(--edit-hero-copy-x) var(--edit-hero-copy-y);
}

h1 {
  font-size: clamp(var(--edit-hero-title-min), var(--edit-hero-title-fluid), var(--edit-hero-title-max));
  scale: var(--edit-hero-title-scale);
  transform-origin: left center;
}

.hero-title-line + .hero-title-line {
  margin-top: var(--edit-hero-title-gap);
}

.hero-title-nowrap {
  white-space: var(--edit-wifi-line-wrap);
  font-size: var(--edit-wifi-line-size);
}

.hero-lead {
  max-width: var(--edit-hero-text-width);
  font-size: var(--edit-hero-text-size);
}

.hero-visual {
  translate: var(--edit-hero-visual-x) var(--edit-hero-visual-y);
  scale: var(--edit-hero-visual-scale);
  transform-origin: center;
}

.visual-glow {
  translate: var(--edit-glow-x) var(--edit-glow-y);
  scale: var(--edit-glow-scale);
  transform-origin: center;
}

.camera-scene {
  translate: var(--edit-camera-scene-x) var(--edit-camera-scene-y);
  scale: var(--edit-camera-scene-scale);
  transform-origin: center;
}

.camera-body {
  translate: var(--edit-camera-x) var(--edit-camera-y);
}

.phone {
  translate: var(--edit-phone-x) var(--edit-phone-y);
}

.card-online {
  translate: var(--edit-card-online-x) var(--edit-card-online-y);
}

.card-record {
  translate: var(--edit-card-record-x) var(--edit-card-record-y);
}

.card-bot {
  translate: var(--edit-card-bot-x) var(--edit-card-bot-y);
}

#services {
  translate: 0 var(--edit-services-y);
}

.use-cases {
  translate: 0 var(--edit-use-cases-y);
}

#calculator {
  translate: 0 var(--edit-calculator-y);
}

#process {
  translate: 0 var(--edit-process-y);
}

.why-us {
  translate: 0 var(--edit-why-y);
}

#faq {
  translate: 0 var(--edit-faq-y);
}

#request {
  translate: 0 var(--edit-request-y);
}

.section-heading {
  gap: var(--edit-section-heading-gap);
}

.service-grid {
  gap: var(--edit-service-grid-gap);
}

.process-list {
  gap: var(--edit-process-grid-gap);
}

.request-shell {
  gap: var(--edit-request-grid-gap);
}

.service-card,
.benefit-card,
.solution-card,
.price-table-wrap {
  border-radius: var(--edit-card-radius);
}

.request-form,
.request-result {
  border-radius: var(--edit-form-card-radius);
}

.request-form input,
.request-form textarea,
.request-form select {
  border-radius: var(--edit-input-radius);
}

.file-upload {
  border-radius: var(--edit-upload-radius);
}

.button {
  min-height: var(--edit-button-height);
  padding: var(--edit-button-padding-y) var(--edit-button-padding-x);
  scale: var(--edit-button-scale);
  transform-origin: center;
}

@media (max-width: 1100px) {
  .hero-title-nowrap {
    font-size: var(--edit-wifi-line-size-tablet);
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: clamp(25px, 7.7vw, 32px);
  }

  .hero-title-nowrap {
    white-space: var(--edit-wifi-line-wrap-mobile);
    font-size: var(--edit-wifi-line-size-mobile);
  }
}

/*
  Готовые примеры.
  Раскомментируй нужный блок, если хочется быстро попробовать вариант.
*/

/*
  Пример 1. Подвинуть текст первого экрана вправо и чуть вниз:
  :root {
    --edit-hero-copy-x: 24px;
    --edit-hero-copy-y: 12px;
  }
*/

/*
  Пример 2. Уменьшить зеленый шар с камерой:
  :root {
    --edit-glow-scale: 0.88;
    --edit-glow-x: 30px;
  }
*/

/*
  Пример 3. Сделать строку "Wi-Fi без мертвых зон" компактнее:
  :root {
    --edit-wifi-line-size: 0.7em;
    --edit-hero-title-max: 68px;
  }
*/

/*
  Пример 4. Сделать кнопки крупнее:
  :root {
    --edit-button-height: 60px;
    --edit-button-padding-x: 28px;
  }
*/

/*
  Пример 5. Сдвинуть форму заявки выше:
  :root {
    --edit-request-y: -30px;
  }
*/