/* ===== Базовые ===== */
:root{
  --bg:#f9f9f9; --fg:#111; --brand:#2563eb; --muted:#64748b; --line:#e5e7eb;
  --shadow:0 3px 10px rgba(0,0,0,.05);
  --radius:11px;
}
*,:before,:after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:'Roboto',system-ui,-apple-system,Segoe UI,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--fg); line-height:1.6 }
img{ display:block; max-width:100%; height:auto }

/* ===== Контейнер ===== */
.container{ max-width:880px; min-width:320px; margin:0 auto; padding:0.9rem }

/* ===== Верхняя шапка ===== */
.site-header{ background:#fff; border-bottom:1px solid #eef2f7; position:relative; z-index:20; overflow:visible; }
.site-header__row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 0; flex-wrap:wrap; }
.site-logo{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:#111; font-weight:800; }
.site-logo i{ color:var(--brand); font-size:1.1rem }
.site-logo span{ font-size:1.05rem }

.site-nav{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem; flex-wrap:wrap; }
.site-nav a{ display:inline-block; text-decoration:none; color:#111; padding:.45rem .65rem; border-radius:10px; }
.site-nav a:hover{ background:#f1f5f9 }

.site-actions{ display:flex; align-items:center; gap:.5rem }

/* язык (disabled) */
.lang-switch{ position:relative; display:flex; align-items:center; gap:.35rem; border:1px solid var(--line); border-radius:999px; padding:.25rem .5rem; background:#fff; }
.lang{ text-decoration:none; color:#111; font-weight:700; font-size:.9rem; line-height:1; }
.lang-sep{ color:#94a3b8; }
.lang-disabled{ cursor:default; opacity:.7; user-select:none; }

/* Tooltip для EN — показывать СНИЗУ */
.lang-en{ position:relative; }
.lang-en::after{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  padding: .4rem .6rem;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 1000;
}
.lang-en::before{
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #111;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1000;
}
.lang-en:hover::after,
.lang-en:hover::before{ opacity: 1; }

/* соц-иконки */
.social-icons{ display:flex; align-items:center; gap:.35rem; }
.si{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; text-decoration:none; color:#2563eb; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s, background-color .15s; }
.si:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.1); border-color:#2563eb; background:#f8fbff; }
.si i{ font-size:16px; }

/* ===== Header ===== */
.header{ text-align:center; padding:1.7rem 1rem }
.header-top{ display:flex; justify-content:center; align-items:center; gap:.45rem }
.header-icon{ font-size:1.9rem; color:var(--brand) }
.header-title{ font-weight:700; font-size:1.85rem; color:var(--brand) }
.header-subtitle{ font-size:.98rem; color:#333; margin-top:.4rem }

/* ===== Upload ===== */
.upload-section{ border:2px dashed var(--brand); border-radius:12px; padding:1.7rem; text-align:center; cursor:pointer; transition:background-color .25s, border-color .25s; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:1.6rem; background:#fff; }
.upload-section.dragover{ background:rgba(37,99,235,.05); border-color:#10b981 }
.upload-btn{ display:inline-block; background:var(--brand); color:#fff; padding:.7rem 1.8rem; border-radius:9px; cursor:pointer; font-weight:700; transition:background-color .25s; text-align:center; margin-bottom:.85rem; }
.upload-btn:hover{ background:#1e40af }

/* Progress */
.progress-container{ width:100%; max-width:380px; margin-top:.8rem; height:18px; background:#e5e7eb; border-radius:9px; overflow:hidden; display:none }
.progress-bar{ height:100%; width:0%; background:#10b981; transition:width .25s }
.status-text{ margin-top:.45rem; display:none; font-size:.9rem }

/* ===== Important ===== */
.important-info{ background:#fef3c7; border-left:4px solid #f59e0b; padding:.9rem 1.3rem; border-radius:10px; margin-top:1.6rem; font-size:.95rem; color:#92400e; }
.important-info h2{ margin:0 0 .45rem; color:#b45309; font-size:1.1rem }

/* ===== Warning ===== */
.warning-box{ display:flex; align-items:flex-start; gap:.9rem; padding:1rem 1.2rem; border-radius:11px; margin:1rem 0; background:#fffbeb; border:1px solid #fcd34d; box-shadow:var(--shadow); }
.warning-box i{ font-size:1.2rem; color:#f59e0b; flex-shrink:0; margin-top:.15rem }
.warning-content h3{ margin:0 0 .45rem; color:#b45309; font-size:1.03rem }
.warning-content p{ margin:.4rem 0; color:#92400e; line-height:1.5 }
.warning-content ul{ margin:.4rem 0; padding-left:1.25rem; color:#92400e }
.faq-link{ color:var(--brand); font-weight:600; text-decoration:underline }
.faq-link:hover{ color:#1e40af }
.hidden{ display:none }

/* ===== Promo ===== */
.promo-cameras{ margin-top:1.6rem }
.promo-cameras h2{ margin-bottom:.45rem; color:var(--brand); font-size:1.1rem }
.camera-grid{ display:flex; flex-wrap:wrap; gap:.65rem }
.camera-item{ background:var(--brand); color:#fff; padding:.55rem .95rem; border-radius:10px; font-weight:700; font-size:.9rem; text-align:center; flex:1 1 100px }

/* ===== Results ===== */
.results{ margin-top:1.6rem; display:none }
.results h2{ font-size:1.2rem; margin:0 0 .55rem }
.metadata-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; margin-top:.6rem }
.metadata-item{ background:#fff; border-radius:11px; padding:.7rem; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; font-size:.92rem; line-height:1.5; }
.metadata-item:hover{ transform:translateY(-1px); box-shadow:0 7px 16px rgba(0,0,0,.09) }
.metadata-item.shutter-count{ grid-column:1 / -1; background:linear-gradient(135deg,var(--brand) 0%,#1e40af 100%); color:#fff; padding:1.2rem; text-align:center }
.metadata-item.shutter-count .meta-label{ color:#fff; font-size:1.05rem; margin-bottom:.4rem }
.metadata-item.shutter-count .meta-value{ color:#fff; font-size:1.8rem; font-weight:800 }

/* PDF button */
.download-btn{ margin-top:.85rem; padding:.55rem 1.3rem; border-radius:10px; border:0; background:#10b981; color:#fff; font-weight:800; cursor:pointer; transition:background-color .25s }
.download-btn:hover{ background:#059669 }

/* ===== FAQ ===== */
.faq{ margin-top:1.8rem }
.faq h2{ text-align:center; color: var(--brand); margin-bottom:1rem; font-size:1.35rem } /* ← фикс */
.faq-grid{ display:grid; gap:.75rem }
.faq-card{ background:#fff; border-radius:11px; box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden; transition: box-shadow .25s }
.faq-card:hover{ box-shadow:0 8px 18px rgba(0,0,0,.08) }
.faq-question{ padding:.85rem 1.1rem; font-weight:700; font-size:1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none }
.faq-toggle i{ transition:transform .25s }
.faq-answer{ max-height:0; overflow:hidden; padding:0 1.1rem; font-size:.95rem; line-height:1.5; color:#333; transition:max-height .3s ease, padding .3s ease }
.faq-card.active .faq-answer{ padding:.65rem 1.1rem .85rem; max-height:480px }

/* ===== Соцсети ===== */
.socials{ margin-top:1.6rem }
.socials h2{ margin:0 0 .6rem; color:var(--brand); font-size:1.125rem }
.socials-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:560px){ .socials-list{ grid-template-columns:1fr } }

/* ===== Партнёры ===== */
.partners{ margin-top:1.6rem; margin-bottom:10px }
.partners h2{ margin:0 0 .6rem; color:var(--brand); font-size:1.125rem }
.partners-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:900px){ .partners-list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .partners-list{ grid-template-columns:1fr } }
.partners-item{ display:block }

/* Общая карточка (чип) */
.partner-chip{ display:flex; align-items:center; gap:10px; width:100%; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.65rem .85rem; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s, border-color .18s; }
.partner-chip:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.1); border-color:var(--brand) }
.partner-chip img{ width:48px; height:48px; border-radius:10px; object-fit:cover; flex:0 0 48px }
.partner-badge{ width:48px; height:48px; flex:0 0 48px; border-radius:10px; display:grid; place-items:center; font-weight:800; letter-spacing:.45px; color:#fff; background:linear-gradient(135deg,#27a7e7 0%, #2563eb 100%); }
.partner-text{ display:grid; line-height:1.5 }
.partner-name{ font-weight:700; color:#111; font-size:1rem }
.partner-note{ font-size:.9rem; color:var(--muted) }

/* ===== Footer ===== */
footer.footer{ text-align:center; color:#6b7280; font-size:.9rem; margin-top:10px; padding:1rem 1rem 1.7rem }
.footer .footer-wrap{ display:inline-flex; align-items:center; gap:.6rem; padding:.45rem .65rem; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow); }
.footer .copyright{ margin:0; color:#6b7280 }

/* ===== Адаптив ===== */
@media (max-width:768px){
  .site-header__row{ justify-content:center; gap:.6rem; }
  .site-nav{ justify-content:center; gap:.45rem; }
  .site-actions{ gap:.45rem; }
  .si{ width:30px; height:30px; }
  .si i{ font-size:15px; }

  .metadata-grid{ grid-template-columns:1fr }
  .metadata-item.shutter-count{ grid-column:1 }
  .camera-grid{ justify-content:space-between }
  .upload-section{ padding:1.3rem }
  .warning-box{ flex-direction:column; align-items:center; text-align:center }
  .warning-box i{ margin-bottom:.4rem }
}

/* ===== Анимация ===== */
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0) } }
.metadata-item.fade-in{ opacity:0; transform:translateY(8px); animation:fadeInUp .35s forwards }