/* ============================================================
   СКАНВОЗ — дизайн-система
   Палитра: лес / кора / асфальт / сигнальный оранжевый
   Шрифты: Unbounded (display) + Manrope (текст) + JetBrains Mono (данные)
   ============================================================ */

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, figure, address { margin: 0; }
  ul { padding: 0; list-style: none; }
  img { max-width: 100%; height: auto; display: block; }
  address { font-style: normal; }
  button { font: inherit; cursor: pointer; border: none; background: none; }
  svg { display: block; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  :root {
    /* ---- цвет ---- */
    --birch-50:   #F5F0E4;   /* фон — бумага / берёста */
    --birch-100:  #ECE3CE;   /* фон карточек */
    --birch-200:  #DED2AF;   /* границы на светлом */
    --forest-950: #101B0C;   /* почти чёрный лес — текст на тёмном */
    --forest-900: #16240F;   /* тёмная секция */
    --forest-800: #223318;
    --forest-700: #34501F;   /* основной зелёный */
    --forest-500: #4C6E2E;
    --bark-600:   #6E4A2C;   /* кора / брэнд-акцент вторичный */
    --signal-500: #D9601A;   /* сигнальный оранжевый — CTA */
    --signal-400: #E97A34;
    --ink:        #201C13;  /* тёплый почти-чёрный текст */
    --ink-soft:   #55503F;  /* приглушённый текст */
    --line:       #CBBF9E;  /* волокна / разделители на светлом */
    --line-dark:  rgba(245, 240, 228, 0.18);
    --white:      #FFFDF8;

    /* ---- типографика ---- */
    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ---- геометрия ---- */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 28px;
    --section-py: clamp(4rem, 9vw, 7.5rem);
    --container-px: clamp(1.25rem, 5vw, 3rem);
    --header-h: clamp(4.25rem, 9vw, 5.5rem);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw + 0.6rem, 1.05rem);
    line-height: 1.65;
    color: var(--ink);
    background: var(--birch-50);
    -webkit-font-smoothing: antialiased;
  }

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

  a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--signal-500);
    outline-offset: 3px;
  }
}

@layer components {

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

  /* ---------------------------------------------------------
     Сигнатурный элемент: маршрутная линия слева по странице.
     Дорожная разметка, идущая через весь путь груза —
     от отправления (hero) до точки назначения (contacts).
  --------------------------------------------------------- */
  .route-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: clamp(0.75rem, 2.4vw, 2.25rem);
    width: 4px;
    z-index: 5;
    pointer-events: none;
    display: none;
  }
  @media (min-width: 64rem) {
    .route-rail { display: block; }
  }
  .route-rail__svg { width: 100%; height: 100%; }
  .route-rail__track,
  .route-rail__progress {
    stroke-width: 2;
    stroke-dasharray: 2 12;
    stroke-linecap: round;
  }
  .route-rail__track {
    stroke: var(--ink-soft);
    opacity: 0.25;
  }
  .route-rail__progress {
    stroke: var(--signal-500);
  }

  /* ---------------- Header ---------------- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    background: transparent;
    transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .site-header.is-scrolled {
    background-color: rgba(16, 27, 12, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--line-dark);
  }
  .site-header.is-hidden { transform: translate3d(0, -100%, 0); }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    min-height: var(--header-h);
    padding-inline: var(--container-px);
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
  }
  .site-header__logo-img { width: clamp(2.1rem, 4vw, 2.6rem); height: auto; }
  .site-header__logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--white);
    text-transform: uppercase;
  }

  .site-header__nav {
    display: none;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    margin-inline-start: auto;
  }
  @media (min-width: 56rem) {
    .site-header__nav { display: flex; }
  }
  .site-header__nav a {
    color: rgba(245, 240, 228, 0.82);
    font-size: 0.92rem;
    font-weight: 500;
    position: relative;
    padding-block: 0.3rem;
    transition: color 0.2s var(--ease-out);
  }
  .site-header__nav a:hover { color: var(--white); }
  .site-header__nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1.5px;
    background: var(--signal-500);
    transition: right 0.25s var(--ease-out);
  }
  .site-header__nav a:hover::after { right: 0; }

  .site-header__cta {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--white);
    border: 1px solid var(--line-dark);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
  }
  @media (min-width: 56rem) {
    .site-header__cta { display: inline-flex; }
  }
  .site-header__cta:hover {
    border-color: var(--signal-500);
    background: rgba(217, 96, 26, 0.12);
  }
  .site-header__cta-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal-500);
    box-shadow: 0 0 0 3px rgba(217, 96, 26, 0.25);
  }

  /* ---------------- Bottom nav (мобильные устройства) ---------------- */
  .bottom-nav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: rgba(16, 27, 12, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-dark);
    padding-block-start: 0.4rem;
    padding-block-end: calc(0.4rem + env(safe-area-inset-bottom));
    padding-inline: 0.25rem;
  }
  @media (min-width: 56rem) {
    .bottom-nav { display: none; }
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding-block: 0.4rem;
    color: rgba(245, 240, 228, 0.62);
    position: relative;
    transition: color 0.2s var(--ease-out);
  }
  .bottom-nav__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    background: var(--signal-500);
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.25s var(--ease-out);
  }
  .bottom-nav__item.is-active { color: var(--white); }
  .bottom-nav__item.is-active::before { transform: translateX(-50%) scaleX(1); }
  .bottom-nav__item.is-active .bottom-nav__icon { color: var(--signal-400); }

  .bottom-nav__icon { width: 1.35rem; height: 1.35rem; color: inherit; }
  .bottom-nav__icon svg { width: 100%; height: 100%; }
  .bottom-nav__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.01em;
  }

  .bottom-nav__item--call {
    color: var(--white);
  }
  .bottom-nav__item--call .bottom-nav__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--signal-500);
    border-radius: 50%;
    padding: 0.6rem;
    margin-block-start: -1.4rem;
    box-shadow: 0 6px 16px -4px rgba(217, 96, 26, 0.55), 0 0 0 4px var(--forest-900);
    transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
  }
  .bottom-nav__item--call:active .bottom-nav__icon { transform: scale(0.92); background: var(--signal-400); }
  .bottom-nav__item--call::before { display: none; }
  .bottom-nav__item--call .bottom-nav__label { color: var(--birch-100); }

  @media (max-width: 55.99rem) {
    body { padding-block-end: calc(4.5rem + env(safe-area-inset-bottom)); }
  }

  /* ---------------- Buttons ---------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
  }
  .btn--primary {
    background: var(--signal-500);
    color: var(--white);
  }
  .btn--primary:hover { background: var(--signal-400); transform: translateY(-2px); }
  .btn--ghost {
    border: 1.5px solid var(--line-dark);
    color: var(--white);
  }
  .btn--ghost:hover { border-color: var(--white); transform: translateY(-2px); }

  /* ---------------- Hero ---------------- */
  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 62%;
    filter: saturate(0.85) contrast(1.03);
  }
  .hero__scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(0deg, rgba(16,27,12,0.96) 0%, rgba(16,27,12,0.72) 32%, rgba(16,27,12,0.38) 60%, rgba(16,27,12,0.55) 100%);
  }

  .hero__content {
    position: relative;
    padding-inline: var(--container-px);
    padding-block-start: calc(var(--header-h) + 2rem);
    max-width: 46rem;
  }
  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--birch-100);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    opacity: 0;
    animation: rise 0.7s var(--ease-out) 0.1s forwards;
  }
  .hero__eyebrow-mark {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--signal-500);
  }
  .hero__title {
    font-size: clamp(3rem, 9vw, 6rem);
    color: var(--white);
    opacity: 0;
    animation: rise 0.8s var(--ease-out) 0.22s forwards;
  }
  .hero__subtitle {
    margin-top: 1.5rem;
    max-width: 32rem;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--birch-100);
    opacity: 0;
    animation: rise 0.8s var(--ease-out) 0.36s forwards;
  }
  .hero__actions {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    opacity: 0;
    animation: rise 0.8s var(--ease-out) 0.5s forwards;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero__manifest {
    position: relative;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: 1.1rem var(--container-px);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--line-dark);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--birch-100);
  }
  .hero__manifest-row i { font-style: normal; color: var(--signal-400); font-weight: 500; }

  .hero__scroll-hint {
    position: absolute;
    right: clamp(1.25rem, 4vw, 2.5rem);
    bottom: clamp(1.25rem, 4vw, 2.5rem);
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--line-dark);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--white);
    animation: bob 2.4s ease-in-out infinite;
  }
  @media (min-width: 40rem) { .hero__scroll-hint { display: flex; } }
  .hero__scroll-hint svg { width: 1.1rem; height: 1.1rem; }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  /* ---------------- Section headers ---------------- */
  .section { padding-block: var(--section-py); position: relative; }
  .section-header { max-width: 40rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
  .section-header__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--signal-500);
    margin-bottom: 0.85rem;
  }
  .section-header h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    color: var(--ink);
  }
  .section-header--light h2 { color: var(--white); }
  .section-header--light .section-header__eyebrow { color: var(--signal-400); }

  /* ---------------- Services ---------------- */
  .section--services { background: var(--birch-50); }

  .route-map { margin-block: -0.5rem 2.5rem; }
  .route-map__svg { width: 100%; height: 12px; }
  .route-map__svg line { stroke: var(--line); stroke-width: 2; }

  .services-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 52rem) {
    .services-grid { grid-template-columns: 1fr 1fr; }
  }

  .service-card {
    background: var(--white);
    border: 1px solid var(--birch-200);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    position: relative;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(16, 27, 12, 0.25);
  }
  .service-card__index {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    margin-bottom: 1.5rem;
  }
  .service-card__icon {
    display: flex;
    width: 3rem; height: 3rem;
    align-items: center; justify-content: center;
    color: var(--forest-700);
    background: var(--birch-100);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
  }
  .service-card__icon svg { width: 1.6rem; height: 1.6rem; }
  .service-card__title {
    font-size: 1.35rem;
    margin-bottom: 0.85rem;
    color: var(--ink);
  }
  .service-card__text { color: var(--ink-soft); }
  .service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .service-card__tags li {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--forest-700);
    background: rgba(52, 80, 31, 0.08);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
  }

  /* ---------------- Why us ---------------- */
  .section--why {
    background: var(--forest-900);
    color: var(--birch-100);
    overflow: hidden;
  }
  .why__grain {
    position: absolute;
    inset: 0;
    background-image: url('assets/wood-grain.jpg');
    background-image: image-set(
      url('assets/wood-grain.webp') type('image/webp'),
      url('assets/wood-grain.jpg') type('image/jpeg')
    );
    background-size: 900px;
    background-repeat: repeat;
    opacity: 0.06;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .why-grid {
    position: relative;
    display: grid;
    gap: 1px;
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 64rem) {
    .why-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .why-card {
    background: var(--forest-900);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    transition: background-color 0.25s var(--ease-out);
  }
  .why-card:hover { background: var(--forest-800); }
  .why-card__icon {
    display: flex;
    width: 2.5rem; height: 2.5rem;
    align-items: center; justify-content: center;
    color: var(--signal-400);
    margin-bottom: 1.25rem;
  }
  .why-card__icon svg { width: 1.6rem; height: 1.6rem; }
  .why-card__num {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.4rem;
  }
  .why-card__text { color: rgba(245, 240, 228, 0.68); font-size: 0.92rem; }

  /* ---------------- About ---------------- */
  .section--about { background: var(--birch-50); }
  .about__layout {
    display: grid;
    gap: 3rem;
  }
  @media (min-width: 56rem) {
    .about__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
    .about__layout .section-header { margin-bottom: 0; }
  }
  .about-prose { max-width: 38rem; }
  .about-prose p { color: var(--ink-soft); margin-bottom: 1.15rem; }
  .about-prose p:last-child { margin-bottom: 0; }
  .about-prose__lead {
    font-size: 1.2rem;
    color: var(--ink) !important;
    font-weight: 500;
  }

  /* ---------------- Contacts ---------------- */
  .section--contacts { background: var(--birch-50); }

  .contacts-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 56rem) {
    .contacts-layout { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  }

  .contacts-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--birch-200);
    min-height: 22rem;
    filter: grayscale(0.35) contrast(1.05);
  }
  .contacts-map iframe { width: 100%; height: 100%; min-height: 22rem; }

  .contacts-info {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--birch-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .contact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--birch-200);
    transition: background-color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
  }
  .contact-row:last-child { border-bottom: none; }
  .contact-row:hover { background: var(--birch-100); padding-left: 1.6rem; }
  .contact-row__icon {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--forest-700);
    background: var(--birch-100);
    border-radius: var(--radius-sm);
  }
  .contact-row__icon svg { width: 1.1rem; height: 1.1rem; }
  .contact-row__icon--brand { background: transparent; }
  .contact-row__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
  .contact-row__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
  }
  .contact-row__value { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
  .contact-row__go {
    margin-inline-start: auto;
    color: var(--signal-500);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  }
  .contact-row:hover .contact-row__go { opacity: 1; transform: translateX(0); }

  /* ---------------- Footer ---------------- */
  .site-footer { background: var(--forest-950); color: rgba(245, 240, 228, 0.6); }
  .site-footer__inner {
    padding-block: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .site-footer__logo {
    font-family: var(--font-display);
    color: var(--birch-100);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.95rem;
  }
  .site-footer__copy { font-size: 0.85rem; }

  /* ---------------- Reveal on scroll ---------------- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}