/* ═══════════════════════════════════════════════
   V CONCIERGE — shared.css
   Общие стили: хедер, футер, навигация, кнопки
   ═══════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DESIGN TOKENS ── */
:root{
  --dark:#1b1919;
  --dark2:#353333;
  --gray:#545454;
  --white:#fff;
  --bronze:#aa6c3e;
  --gold:#f2e0c7;
  --border:#edeff1;
  --mw:1200px;

  /* Типографика */
  --lh-body:1.85;

  /* Letter-spacing система (5 значений вместо 15) */
  --ls-xs:.04em;   /* навигация, подписи */
  --ls-sm:.08em;   /* кнопки, небольшие метки */
  --ls-md:.14em;   /* заголовки секций */
  --ls-lg:.22em;   /* eyebrow-лейблы */
  --ls-xl:.38em;   /* логотип */
}

/* ── БАЗА ── */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Geologica',Arial,sans-serif;
  font-weight:300;
  color:var(--dark);
  background:var(--white);
  overflow-x:hidden;
}

/* ── ХЕДЕР ── */
header{
  position:fixed;inset:0 0 auto;height:90px;
  background:rgba(255,255,255,.50);backdrop-filter:blur(14px);
  z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;border-bottom:1px solid rgba(237,239,241,.8);
}

/* ── ЛОГОТИП ── */
.logo{
  font-size:21px;font-weight:200;
  letter-spacing:var(--ls-xl);
  text-transform:uppercase;color:var(--dark);
  text-decoration:none;white-space:nowrap;
}

/* ── ЛОГОТИП АКЦЕНТ ── */
.logo-accent{color:var(--bronze)}

/* ── НАВИГАЦИЯ ──
   Исправление: раньше hover делал элемент opacity:.45 (затемнял активный).
   Теперь: все пункты слегка приглушены, hover = полная яркость + bronze-цвет.
   Активная страница выделена bronze через aria-current="page".
── */
.nav{display:flex;align-items:center;gap:32px;list-style:none}
.nav a{
  font-size:14px;font-weight:300;
  letter-spacing:var(--ls-xs);
  color:var(--dark);text-decoration:none;
  opacity:.65;
  transition:opacity .2s,color .2s;
}
.nav a:hover{opacity:1}
.nav a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;opacity:1}
.nav a[aria-current="page"]{opacity:1;color:var(--bronze)}

/* ── ХЕДЕР-ПРАВАЯ ЧАСТЬ ── */
.h-right{display:flex;align-items:center;gap:14px}

/* ── КНОПКА PILL (тёмная) ── */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 22px;height:35px;
  border:1px solid var(--dark);border-radius:100px;
  font-family:inherit;font-size:13px;font-weight:300;
  letter-spacing:var(--ls-xs);color:var(--dark);
  text-decoration:none;background:transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s;
}
.pill:hover{background:var(--dark);color:var(--white)}
.pill:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ── ЯЗЫКОВОЙ ПЕРЕКЛЮЧАТЕЛЬ ── */
.lang{display:flex;align-items:center}
.lang select{
  background:transparent;border:1px solid var(--border);
  color:var(--dark);font-family:inherit;font-size:11px;
  font-weight:300;letter-spacing:var(--ls-md);text-transform:uppercase;
  padding:4px 22px 4px 10px;cursor:pointer;border-radius:2px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;
  transition:border-color .2s,opacity .2s;
}
.lang select:hover{border-color:var(--dark)}
.lang select:focus{outline:2px solid var(--bronze);outline-offset:2px}

/* ── ТЕЛЕГРАМ ССЫЛКА ── */
.tg-link{display:flex;align-items:center;color:var(--dark);transition:opacity .2s}
.tg-link:hover{opacity:.5}

/* ── БУРГЕР ── */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px 4px}
.burger span{display:block;width:22px;height:1.5px;background:var(--dark)}

/* ── МОБИЛЬНАЯ НАВИГАЦИЯ ── */
.mob{
  display:none;position:fixed;inset:0;
  background:rgba(27,25,25,.98);z-index:200;
  flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:40px 24px;
}
.mob.open{display:flex}
.mob a{
  font-size:20px;font-weight:200;
  letter-spacing:var(--ls-lg);
  text-transform:uppercase;color:var(--white);
  text-decoration:none;transition:color .2s;
}
.mob a:hover{color:var(--bronze)}
.mob a:focus-visible{color:var(--bronze);outline:none}
.mob-x{
  position:absolute;top:24px;right:32px;
  background:none;border:none;color:var(--white);
  font-size:32px;font-weight:100;line-height:1;cursor:pointer;
}

/* ── КНОПКА PILL-W (белый контур, малая) ── */
.pill-w{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 28px;height:35px;
  border:1px solid rgba(255,255,255,.7);border-radius:100px;
  font-family:inherit;font-size:13px;font-weight:300;
  letter-spacing:var(--ls-xs);color:var(--white);
  text-decoration:none;background:transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .25s,border-color .25s;
}
.pill-w:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.9)}
.pill-w:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.mob .pill-w{margin-top:12px;border-color:rgba(255,255,255,.45)}
.mob .pill-w:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}

/* ── КНОПКА PILL-WL (белый контур, стандартная) ──
   Исправление: унифицировано до 44px вместо хаотичных 42/48px.
── */
.pill-wl{
  display:inline-flex;align-items:center;gap:9px;
  padding:0 32px;height:44px;
  border:1px solid rgba(255,255,255,.35);border-radius:100px;
  font-family:inherit;font-size:13px;font-weight:300;
  letter-spacing:var(--ls-sm);text-transform:uppercase;
  color:var(--white);text-decoration:none;background:transparent;
  cursor:pointer;transition:background .25s,border-color .25s;
}
.pill-wl:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
.pill-wl:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}

/* ── ФУТЕР ── */
footer{
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.06);
  padding:28px 48px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
}
.f-logo{
  font-size:15px;font-weight:200;
  letter-spacing:var(--ls-lg);
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  text-decoration:none;white-space:nowrap;
}
.f-nav{display:flex;gap:22px}
.f-nav a{
  font-size:11px;font-weight:300;
  letter-spacing:var(--ls-md);
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  text-decoration:none;transition:color .2s;
}
.f-nav a:hover{color:rgba(255,255,255,.8)}
.f-copy{font-size:11px;font-weight:300;color:rgba(255,255,255,.2);letter-spacing:.05em}

/* ── SCROLL REVEAL ── */
.reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── АДАПТИВ: ХЕДЕР / ФУТЕР ── */
@media(max-width:768px){
  header{padding:0 24px}
  .nav{display:none}
  .lang{display:none}
  .tg-link{display:none}
  .h-right .pill{display:none}
  .burger{display:flex}
  footer{padding:24px;flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .h-right .pill{display:none}
}

/* RTL support for Arabic */
[dir="rtl"] { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }

/* Карусель — принудительно LTR, иначе ломается расчёт позиции */
[dir="rtl"] .carousel-wrap,
[dir="rtl"] .carousel-track { direction: ltr; }

/* Навигация */
[dir="rtl"] .nav ul { flex-direction: row-reverse; }
[dir="rtl"] .header-inner { flex-direction: row-reverse; }

/* Текст */
[dir="rtl"] .hero-text,
[dir="rtl"] .content-desc,
[dir="rtl"] .about-text,
[dir="rtl"] .section-head { text-align: right; }

[dir="rtl"] .features,
[dir="rtl"] .features li,
[dir="rtl"] .pkg-features li { text-align: right; }

[dir="rtl"] .stat-item,
[dir="rtl"] .pkg-card,
[dir="rtl"] .pkg-name,
[dir="rtl"] .svc-card-text { text-align: right; }

/* FAQ */
[dir="rtl"] .faq-q { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .faq-a { text-align: right; }

/* Карточки миссии */
[dir="rtl"] .mission-cards { flex-direction: row-reverse; }

/* Футер */
[dir="rtl"] footer { flex-direction: row-reverse; }
[dir="rtl"] .f-nav { flex-direction: row-reverse; }