/* Project base CSS. Tailwind utilities are generated by static/vendor/tailwind-cdn.js. */
svg { display: block; }

    :root { color-scheme: light; }
    html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow-x: hidden; max-width: 100%; overscroll-behavior-x: none; }
    .font-oswald { font-family: Oswald, Inter, system-ui, sans-serif; }
    * { box-sizing: border-box; min-width: 0; }
    img { max-width: 100%; height: auto; display: block; }
    button, input, select, textarea { font: inherit; }
    ::selection { background: #0a0a0a; color: #fff; }
    @supports (overflow-x: clip) { body { overflow-x: clip; } }

    header, main, section, footer { max-width: 100vw; }

    .phone-link {
  gap: 0 !important;
}

    .wb-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
    .wb-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.12));
      border: 3px solid transparent;
      background-clip: padding-box;
    }
    .wb-scroll::-webkit-scrollbar-track { background: transparent; }

    .text-balance { text-wrap: balance; }
    .pd-desc p + p { margin-top: .65rem; }
    .pd-desc ul { margin-top: .65rem; display: grid; gap: .35rem; }
    .pd-desc li { position: relative; padding-left: 1rem; }
    .pd-desc li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: currentColor; opacity: .55; transform: translateY(-50%); }
    .pd-desc h3 { margin-top: .85rem; font-family: Oswald, Inter, system-ui, sans-serif; font-size: 18px; line-height: 1.15; letter-spacing: -.02em; color: #0a0a0a; }
    .pd-desc h3:first-child { margin-top: 0; }
    .pd-desc strong { font-weight: 600; color: #0a0a0a; }


    .container-x { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
    @media (min-width: 640px) { .container-x { padding-left: 1.5rem; padding-right: 1.5rem; } }
    @media (min-width: 1024px) { .container-x { padding-left: 2.5rem; padding-right: 2.5rem; } }
    @media (min-width: 1536px) { .container-x { max-width: 80rem; } }
    @media (min-width: 1800px) { .container-x { max-width: 1600px; padding-left: 4rem; padding-right: 4rem; } }
    @media (min-width: 2200px) { .container-x { max-width: 1800px; padding-left: 5rem; padding-right: 5rem; } }

    .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    @media (min-width: 768px) { .section { padding-top: 4rem; padding-bottom: 4rem; } }

    .card { border: 1px solid rgba(0,0,0,.10); background: #fff; border-radius: 0 !important; }

    details > summary::-webkit-details-marker { display: none; }
    details > summary { list-style: none; }

    .faq-details { overflow: hidden; }
    .faq-details .faq-answer {
      height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition:
        height 420ms cubic-bezier(.22,1,.36,1),
        opacity 280ms cubic-bezier(.22,1,.36,1),
        transform 420ms cubic-bezier(.22,1,.36,1);
      will-change: height, opacity, transform;
    }
    .faq-details[open] .faq-answer { opacity: 1; transform: translateY(0); }
    .faq-icon {
      transition: transform 420ms cubic-bezier(.22,1,.36,1), opacity 280ms cubic-bezier(.22,1,.36,1);
      transform-origin: center;
    }
    .faq-details[open] .faq-icon { transform: rotate(45deg); opacity: .85; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .faq-details .faq-answer, .faq-icon { transition: none !important; }
      .st-pop-card { transition: none !important; }
      .st-layer, .pd-layer { transition: none !important; }
      .st-dot, .pd-dot { transition: none !important; }
      .st-fs-close, .st-pop-close { transition: none !important; }
    }

    :root { --header-h: 72px; }
    @media (min-width: 641px) { :root { --header-h: 64px; } }
    main { padding-top: var(--header-h); }
    section[id], main[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

    .hero-section { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); min-height: 100svh; }
    .hero-inner { min-height: calc(100svh - var(--header-h)); }

    .xray-images { position: relative; width: 100%; overflow: hidden; cursor: ew-resize; user-select: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); touch-action: pan-y; }
    .xray-images::before { content: ""; display: block; padding-top: 58%; }
    .xray-img { position: absolute; inset: 0; width: 100%; height: 110%; background-size: cover; background-position: center; background-repeat: no-repeat; }
    .xray-img-bottom { background-image: url("../img/uploads/main/30.png"), url("../img/home/wall-before.png"); }
    .xray-img-top { background-image: url("../img/uploads/main/31.png"), url("../img/home/wall-after.png"); clip-path: inset(0 50% 0 0); }
    .xray-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; pointer-events: none; }
    .xray-handle-line { width: 2px; height: 100%; background: rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(0,0,0,0.32); }
    .xray-handle-circle { position: absolute; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; background: rgba(255,255,255,.98); box-shadow: 0 10px 30px rgba(15,23,42,0.22); display: flex; align-items: center; justify-content: center; pointer-events: none; }
    .xray-handle-circle::before { content: ""; display: block; width: 14px; height: 14px; border: 2px solid #111; opacity: .9; }
    @media (max-width: 640px) { .xray-images::before { padding-top: 74%; } .xray-handle-circle { width: 30px; height: 30px; } }
    @media (min-width: 1536px) { .xray-images::before { padding-top: 52%; } }

    .st-slider { position: relative; background: #fff; }
    .st-viewport { position: relative; width: 100%; overflow: hidden; background: rgba(0,0,0,.10); contain: layout paint; -webkit-tap-highlight-color: transparent; cursor: zoom-in; touch-action: pan-y; }
    .st-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); opacity: 0; transition: opacity 240ms cubic-bezier(.22,1,.36,1); will-change: opacity; }
    .st-layer.is-active { opacity: 1; }
    .st-dots { display: flex; gap: 7px; justify-content: center; padding: 10px 12px 12px; border-top: 1px solid rgba(0,0,0,.10); background: #fff; }
    .st-dot { width: 9px; height: 9px; background: rgba(0,0,0,.18); transition: transform 160ms ease, background 160ms ease; border: 0; padding: 0; cursor: pointer; display: inline-block; outline: none; }
    .st-dot:hover { transform: translateY(-1px); }
    .st-dot.is-active { background: rgba(0,0,0,.72); }
    .st-dot:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.18); }

    .st-fs { position: fixed; inset: 0; z-index: 1000; display: none; }
    .st-fs.is-open { display: block; }
    .st-fs-bg { position: absolute; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(12px); }
    .st-fs-wrap { position: relative; height: 100%; width: 100%; display: grid; place-items: center; padding: 16px; }
    .st-fs-viewport { position: relative; width: min(1300px, 100%); aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); touch-action: pan-y; }
    .st-fs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .st-fs-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; backdrop-filter: blur(10px); transition: background 160ms ease; z-index: 2; }
    .st-fs-close:hover { background: rgba(255,255,255,.18); }

    .st-pop { position: fixed; inset: 0; z-index: 1200; display: none; }
    .st-pop.is-open { display: block; }
    .st-pop-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
    .st-pop-wrap { position: relative; height: 100%; width: 100%; display: grid; place-items: center; padding: 16px; }
    .st-pop-card { width: min(860px, 100%); background: #fff; border: 1px solid rgba(0,0,0,.10); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.22); transform: translateY(10px); opacity: 0; transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 220ms cubic-bezier(.22,1,.36,1); will-change: transform, opacity; }
    .st-pop.is-open .st-pop-card { transform: translateY(0); opacity: 1; }
    .st-pop-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.9); backdrop-filter: blur(10px); display: grid; place-items: center; transition: background 160ms ease, opacity 160ms ease; z-index: 5; }
    .st-pop-close:hover { background: #fff; opacity: .9; }

    .pd-viewport { position: relative; width: 100%; overflow: hidden; background: rgba(0,0,0,.10); contain: layout paint; -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none; touch-action: pan-y; }
    .pd-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms cubic-bezier(.22,1,.36,1); will-change: opacity; }
    .pd-layer.is-active { opacity: 1; }
    .pd-dots { display: flex; gap: 7px; justify-content: center; padding: 10px 12px 12px; border-top: 1px solid rgba(0,0,0,.10); background: #fff; }
    .pd-dot { width: 9px; height: 9px; background: rgba(0,0,0,.18); transition: transform 160ms ease, background 160ms ease; border: 0; padding: 0; cursor: pointer; display: inline-block; outline: none; }
    .pd-dot:hover { transform: translateY(-1px); }
    .pd-dot.is-active { background: rgba(0,0,0,.72); }
    .pd-dot:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.18); }

    .select-title { display: inline-flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer; background: transparent; border: 0; padding: 0; }
    .select-title:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.14); }
    .card.is-selected { border-color: rgba(0,0,0,.35); }

    #heroPlayOpen { overflow: visible; }
    .hero-pulse {
      content: "";
      position: absolute;
      inset: -14px;
      border: 1px solid rgba(255,255,255,1);
      border-radius: 9999px;
      transform: scale(.78);
      opacity: .9;
      animation: heroPlayPulse 2.25s cubic-bezier(.22,1,.36,1) infinite;
      pointer-events: none;
    }
    .hero-pulse.is-2 {
      inset: -26px;
      opacity: .55;
      animation-delay: 1.125s;
    }
    @keyframes heroPlayPulse{
      0%{transform:scale(.78);opacity:.85}
      70%{transform:scale(1.25);opacity:0}
      100%{transform:scale(1.25);opacity:0}
    }
    @media (prefers-reduced-motion: reduce){
      .hero-pulse { animation: none !important; }
    }
.hero-bg{
  background:
    linear-gradient(180deg, rgba(10,10,10,.38) 0%, rgba(5,5,5,.56) 100%),
    radial-gradient(1200px 700px at 18% 22%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 520px at 86% 76%, rgba(255,255,255,.06), transparent 55%),
    url("../img/home/hero-bg.png"),
    url("../img/home/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .22;
  mask-image: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,1), transparent 82%);
}

.hero-noise{
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .18;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,1), transparent 78%);
}

.hero-vignette{
  background:
    radial-gradient(800px 500px at 50% 30%, transparent 0%, rgba(0,0,0,.32) 70%, rgba(0,0,0,.62) 100%);
}

.hero-chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}


    .section-dark-card { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.055); backdrop-filter: blur(14px); }
    .trust-card, .ui-soft-card { border: 1px solid rgba(0,0,0,.10); background: linear-gradient(180deg, #fff, rgba(250,250,250,.92)); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
    .trust-card:hover, .ui-soft-card:hover, .card:hover { transform: translateY(-2px); border-color: rgba(0,0,0,.18); box-shadow: 0 18px 42px rgba(0,0,0,.07); }
    .ui-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(0,0,0,.10); background: #0a0a0a; color: #fff; flex: 0 0 auto; }
    .ui-icon svg { width: 20px; height: 20px; }
    .ui-icon-light { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); color: #fff; }
    .ui-icon-soft { background: #fff; color: #0a0a0a; border-color: rgba(0,0,0,.10); }
    .ui-mini-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid currentColor; opacity: .8; flex: 0 0 auto; }
    .ui-mini-icon svg { width: 15px; height: 15px; }
    .brand-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .brand-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.075); color: #fff; font-size: 12px; line-height: 1; }
    .brand-badge-light { border-color: rgba(0,0,0,.10); background: #fff; color: #0a0a0a; }
    .sber-mark { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; border: 2px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: -.03em; }
    .quiz-option { position: relative; overflow: hidden; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
    .quiz-option::after { content: ""; position: absolute; inset: auto 12px 12px auto; width: 16px; height: 16px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .22; }
    .quiz-option:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); }
    .quiz-option.is-selected { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.14); }
    .quiz-option-head { display: flex; align-items: center; gap: 12px; }
    .layer-card { position: relative; overflow: hidden; }
    .layer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #0a0a0a; opacity: .9; }
    .timeline-card { position: relative; }
    .timeline-card::before { content: ""; position: absolute; left: 21px; top: 56px; bottom: -16px; width: 1px; background: rgba(0,0,0,.10); }
    .timeline-card:last-child::before { display: none; }
    .video-frame { aspect-ratio: 16/9; min-height: 260px; }
    .form-input-icon { position: relative; }
    .form-input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(0,0,0,.45); pointer-events: none; }
    .form-input-icon input { padding-left: 42px !important; }


@media (max-width: 767px) {
  .hero-bg { background-position: center 30%; }
  .hero-inner { padding-bottom: 6.25rem; }
  .hero-grid { background-size: 56px 56px; }
}

  

/* Django start additions */
.dj-message-wrap { position: fixed; left: 50%; top: 88px; transform: translateX(-50%); z-index: 70; width: min(920px, calc(100% - 32px)); }
.dj-message { border: 1px solid rgba(0,0,0,.12); background: #fff; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); font-size: 14px; }
.dj-message-success { border-color: rgba(22,163,74,.28); }
.dj-message-error { border-color: rgba(220,38,38,.28); }
input, textarea, select { outline: none; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
[data-mobile-menu].is-open { display: block; }
.home-photo-frame { background: linear-gradient(135deg, #f3f0ea, #d8d0c3); }


/* Header projects dropdown */
.nav-projects {
  position: relative;
  height: 40px;
  display: inline-flex;
  align-items: center;
}
.nav-projects-trigger { cursor: pointer; }
.nav-projects-panel {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: min(560px, calc(100vw - 32px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 80;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  /* задержка закрытия: курсор успевает пересечь зазор между кнопкой и панелью */
  transition-delay: 180ms;
}
/* невидимый «мостик» над панелью — закрывает зазор до кнопки, hover не слетает */
.nav-projects-panel::after {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: -16px;
  height: 16px;
}
.nav-projects-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(58, 58, 58, .98);
}
.nav-projects-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(50, 50, 50, .98);
  color: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.nav-projects:hover .nav-projects-panel,
.nav-projects:focus-within .nav-projects-panel,
.nav-projects.is-open .nav-projects-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
  transition-delay: 0ms; /* открытие без задержки */
}
.nav-projects:hover .nav-projects-arrow,
.nav-projects:focus-within .nav-projects-arrow,
.nav-projects.is-open .nav-projects-arrow {
  transform: rotate(180deg);
}
.nav-projects-col { padding: 14px 16px; }
.nav-projects-col-left { background: rgba(255,255,255,.16); }
.nav-projects-heading {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.15;
}
.nav-projects-link {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.nav-projects-link:hover,
.nav-projects-link.is-active {
  background: rgba(255,255,255,.08);
  border-color: rgba(114, 91, 255, .95);
  color: #fff;
}
.nav-projects-product { justify-content: flex-start; }
.nav-projects-chevron { opacity: .85; font-size: 16px; line-height: 1; }
.mobile-projects summary::-webkit-details-marker { display: none; }
[data-mobile-menu].is-open { display: block; }