:root{
  --bg-page:#000;
  --bg-img:url("image/fon.webp");

  --topbar-bg:#f9f7f6;
  --text-dark:#222;

  --chip-text:#E9D6D6;
  --chip-icon:#F3DFDF;

  --container:1200px;
  --x-pad:24px;
  --topbar-y:clamp(8px,1.5vw,16px);
  --topbar-h:0px;

  /* hero anim */
  --hero-slide-from:-100vw;
  --hero-title-delay:40ms;
  --hero-subtitle-delay:160ms;
  --hero-in-dur:700ms;
  --hero-ease:cubic-bezier(.18,.9,.22,1);

  /* brand sizes */
  --logo-size:clamp(48px,9vw,100px);
  --brand-size:clamp(20px,3.3vw,40px);
  --brand-line:1.1;
  --subbrand-size:clamp(11px,1.4vw,16px);
  --subbrand-color:#5a5a5a;

  /* misc */
  --chip-stagger:90ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:#fff;

  /* фон */
  background-color:#000;
  background-image:var(--bg-img);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  position: relative;
}

/* iOS/мобилки не любят fixed */
@media (max-width:1024px),(hover:none){
  body{ background-attachment:scroll; }
}

/* ===== Topbar ===== */
.topbar{
  width:100%;
  background:var(--topbar-bg);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding:var(--topbar-y) var(--x-pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar .container{
  max-width:none; margin:0;
  padding-left:clamp(8px,8vw,140px);
  padding-right:clamp(16px,12vw,300px);
}
.logo{ display:inline-flex; align-items:center; gap:30px; color:var(--text-dark); text-decoration:none; }
.logo img{ width:var(--logo-size); height:var(--logo-size); object-fit:contain; display:block; }
.logo-text{ display:grid; gap:4px; min-width:0; }
.brand{ color:var(--text-dark); font-weight:700; font-size:var(--brand-size); line-height:var(--brand-line); white-space:nowrap; }
.subbrand{ font-size:var(--subbrand-size); color:var(--subbrand-color); line-height:1.2; white-space:nowrap; }
.menu-btn{
  font-size:clamp(22px,2.8vw,26px);
  background:transparent; border:none; color:#111; cursor:pointer; padding:8px; border-radius:8px;
}
.menu-btn:active{ transform:scale(.98); }

/* ===== Hero ===== */
.hero{
  min-height:calc(100vh - var(--topbar-h));
  display:flex; align-items:stretch;
  background:transparent !important;
  overflow:hidden;
}
.hero-container{
  width:100%;
  padding-left:140px;
  padding-right:300px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(711px,820px) 1fr;
  align-items:center;
  gap:4px;
  height:100%;
}

/* Левая колонка */
.hero-content{ max-width:980px; margin-top:0; }

.hero-title{
  margin:24px 0 28px;                   /* было 70px – уменьшили отступ сверху */
  font-weight:700;
  font-size:66px;
  line-height:66px;
  color:#FFFEFE;
  position:relative;
}
.hero-title::after{
  content:"";
  display:block;
  width:clamp(280px,55vw,787px);
  height:3px; margin-top:16px;
  background:#fff; border-radius:2px;
}

.hero-subtitle{
  margin:32px 0 40px;
  font-weight:400;
  font-size:24px;
  line-height:25px;
  color:#D9D3D3;
  max-width:720px;
}
.hero-actions{
  display:flex; flex-direction:column; gap:20px; align-items:flex-start; margin-top:32px;
}

/* Стартовые состояния до .is-ready */
.hero-content:not(.is-ready) .hero-title,
.hero-content:not(.is-ready) .hero-subtitle{
  opacity:0;
  transform:translateX(var(--hero-slide-from));
  will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes slide-left{
  from{ opacity:0; transform:translateX(var(--hero-slide-from)); }
  to  { opacity:1; transform:translateX(0); }
}
.hero-content.is-ready .hero-title{
  animation:slide-left var(--hero-in-dur) var(--hero-ease) forwards;
  animation-delay:var(--hero-title-delay);
}
.hero-content.is-ready .hero-subtitle{
  animation:slide-left var(--hero-in-dur) var(--hero-ease) forwards;
  animation-delay:var(--hero-subtitle-delay);
}
.hero-content:not(.is-ready) .hero-actions{ opacity:0; transform:translateY(10px); }
@keyframes rise-in{ to{ opacity:1; transform:translateY(0); } }
.hero-content.is-ready .hero-actions{
  animation:rise-in 520ms var(--hero-ease) forwards;
  animation-delay:calc(var(--hero-subtitle-delay) + 140ms);
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .hero-content:not(.is-ready) .hero-title,
  .hero-content:not(.is-ready) .hero-subtitle,
  .hero-content:not(.is-ready) .hero-actions{
    opacity:1 !important; transform:none !important;
  }
  .hero-content.is-ready .hero-title,
  .hero-content.is-ready .hero-subtitle,
  .hero-content.is-ready .hero-actions{
    animation:none !important;
  }
}

/* ===== CHIP (анимационные карточки) ===== */
.hero-chip{ width:420px; max-width:100%; min-height:72px; position:relative; }
.chip-stage{ position:relative; width:100%; min-height:72px; }
.chip-card{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:12px;
  background:linear-gradient(180deg,#1B1B1B 0%,#121212 100%);
  border:1px solid #2B2B2B;
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  text-align:center; font-size:16px; line-height:1.25;
  transition:transform 420ms cubic-bezier(.22,.75,.25,1), opacity 420ms ease, box-shadow 420ms ease;
  will-change:transform,opacity;
}
.chip-card.enter-from{ transform:translateX(110%) scale(.98); opacity:0; z-index:3; }
.chip-card.enter-to  { transform:translateX(0) scale(1);    opacity:1; z-index:3; }
.chip-card.leave-from{ transform:translateX(0) scale(1);    opacity:1; z-index:2; }
.chip-card.leave-to  { transform:translateX(-110%) scale(.98); opacity:0; z-index:2; }
.chip-card.idle{ transform:translateX(6%) scale(.985); opacity:0; z-index:1; }

@media (max-width:560px){
  .hero-chip{ min-height:64px; }
  .chip-stage{ min-height:64px; }
  .chip-card{ font-size:15px; padding:12px 16px; }
}

/* ===== Статичные чипсы ===== */
.hero-chips{ max-width:clamp(620px,70vw,980px); margin-top:8px; }
.chip-list{
  display:grid; grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:18px 48px; margin:0; padding:0; list-style:none;
}
.chip{
  display:flex; align-items:center; gap:12px;
  min-height:0; padding:0; background:none; border:none; box-shadow:none;
  color:var(--chip-text); font-weight:500; font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.01em; text-transform:none; text-align:left; white-space:normal; word-break:break-word;
  opacity:0; transform:translateY(8px) scale(.98); will-change:transform,opacity,filter;
}
.chip::before{
  content:"❈"; font-size:16px; line-height:1; color:var(--chip-icon); opacity:.95;
  margin-right:6px; transform:translateY(-1px); filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.chip-list.is-ready .chip{
  animation:chip-in 520ms cubic-bezier(.22,.75,.25,1) both;
  animation-delay:calc(var(--i,0) * var(--chip-stagger));
}
@media (prefers-reduced-motion:reduce){
  .chip, .chip-list.is-ready .chip{ animation:none !important; opacity:1; transform:none; filter:none; }
}
.chip em{ color:#FFF; opacity:.9; font-style:normal; }

@media (max-width:768px){
  .chip-list{ grid-template-columns:1fr; gap:10px; }
  .chip{ font-size:14px; }
  .chip::before{ font-size:14px; }
}

@keyframes chip-in{
  from{ opacity:0; transform:translateY(8px) scale(.98); filter:blur(2px); }
  to  { opacity:1; transform:translateY(0)  scale(1);   filter:blur(0); }
}

/* ===== Кнопка ===== */
.btn{
  display:inline-block; padding:16px 28px; border-radius:10px; text-decoration:none;
  font-size:16px; font-weight:600;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-light{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  margin-top:20px; padding:1px 120px; height:56px;
  border-radius:12px; border:1px solid rgba(233,5,5,.15);
  color:#111; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 8px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.06);
  font-family:'Montserrat',sans-serif; font-size:16px; font-weight:600;
  letter-spacing:.02em; transition:transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  overflow:hidden;
}
.btn-light::before{
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.6) 0%, rgba(250,247,247,.404) 40%, transparent 70%);
  transform:translate(-10%,-10%); transition:transform .6s ease; pointer-events:none;
}
.btn-light::after{
  content:""; position:absolute; top:0; left:-150%; width:120%; height:100%;
  background:linear-gradient(120deg,transparent 0%, rgba(240,55,55,.6) 50%, transparent 100%);
  transform:skewX(-20deg); opacity:0; pointer-events:none; animation:shine 4s infinite;
}
@keyframes shine{
  0%{ left:-150%; opacity:0; } 10%{ left:-50%; opacity:1; } 20%,100%{ left:150%; opacity:1; }
}
.btn-light:hover{
  background:#fff; border-color:rgba(0,0,0,.25);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgb(0 0 0), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,0,0,.08);
}
.btn-light:hover::before{ transform:translate(5%,5%) rotate(.0001deg); }
.btn-light:active{ transform:translateY(0); box-shadow:0 6px 12px rgb(0 0 0), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-light:focus-visible{ outline:2px solid rgba(247,10,10,.4); outline-offset:3px; }
@supports not ((backdrop-filter:blur(10px))){
  .btn-light{ background:rgba(255,255,255,.16); }
}

/* ===== Правая колонка ===== */
.hero-image{
  position:relative; height:100%;
  display:flex; align-items:flex-end; justify-content:flex-end;
  z-index:1;
}
.hero-image img{
  height:100%; width:auto; object-fit:cover;
}

/* ===== Адаптив ===== */
@media (max-width:1280px){
  .hero-container{ padding-left:80px; padding-right:160px; }
}
@media (max-width:1100px){
  .hero-container{ padding-left:48px; padding-right:96px; }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-image{ order:2; justify-content:center; align-items:center; }
  .hero-image img{ transform:none; max-height:54vh; height:auto; }
  .hero-content{ order:1; text-align:left; margin-top:0; }
  .hero-title{ font-size:clamp(32px,6vw,48px); line-height:1.1; }
  .hero-subtitle{ font-size:clamp(16px,2.6vw,20px); line-height:1.4; }
}

/* === MOBILE ≤768px — единый блок и компактные тексты === */
@media (max-width:768px){
  :root{ --hero-slide-from:-120vw; }

  .hero{ position:relative; min-height:calc(100svh - var(--topbar-h)); overflow:hidden; }
  .hero-container{ min-height:inherit; padding:10px 12px 14px; }
  .hero-grid{
    min-height:inherit; display:grid; grid-template-columns:1fr;
    justify-items:center; align-content:center; gap:12px;
  }

  /* фон-картинка за текстом */
  .hero-image{
    position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end;
    opacity:.32; pointer-events:none; z-index:0;
  }
  .hero-image img{
    width:100%; height:100%; object-fit:cover; object-position:center bottom; transform:none; max-height:none;
  }

  /* стеклянный блок */
  .hero-content{
    position:relative; z-index:2; width:100%; max-width:480px; padding:14px;
    text-align:center; max-height:calc(100svh - var(--topbar-h) - 20px);
    display:grid; grid-auto-rows:min-content; gap:10px;
  }
  .hero-content::before{
    content:""; position:absolute; inset:0; border-radius:14px;
    background:rgba(0,0,0,.36); backdrop-filter:blur(6px) saturate(150%); -webkit-backdrop-filter:blur(6px) saturate(150%);
    z-index:1;
  }
  .hero-title,.hero-subtitle,.hero-actions{ position:relative; z-index:2; }

  .hero-title{
    margin:0 0 12px; font-size:clamp(24px,6.4vw,30px); line-height:1.18; letter-spacing:-.01em;
  }
  .hero-title::after{ width:58%; height:2px; margin:8px auto 6px; }
  .hero-subtitle{ margin:0; font-size:clamp(13px,3.8vw,15.5px); line-height:1.5; color:rgba(255,255,255,.92); }

  .hero-chips{ width:100%; max-width:460px; margin-top:2px; }
  .chip-list{ grid-template-columns:1fr; gap:8px; }
  .chip{ min-height:40px; padding:0; font-size:13.5px; }
  .chip::before{ font-size:14px; }

  .hero-actions{ display:grid; justify-items:center; gap:10px; margin-top:4px; }
  .btn{ width:100%; max-width:280px; padding:12px 16px; height:auto; font-size:14px; }
}

/* Доп. сжатие для низких экранов */
@media (max-width:768px) and (max-height:640px){
  .hero-title{ font-size:clamp(20px,5.6vw,26px); }
  .hero-subtitle{ font-size:12.5px; }
  .chip{ min-height:36px; font-size:12px; }
  .btn{ max-width:260px; padding:10px 14px; font-size:13.5px; }
}

/* ====== ДЕСКТОПНЫЙ МАКЕТ как на скрине ====== */
/* Широкая левая колонка, заголовок в 2 строки, фото правее */
@media (min-width:1280px){
  .hero-container{ padding-left:120px; padding-right:80px; }

  .hero-grid{ grid-template-columns:960px 1fr; gap:24px; }
  .hero-content{ max-width:960px; }

  .hero-title{
    inline-size:960px;         /* контролируемая ширина под 2 строки */
    text-wrap:balance;
    line-height:1.04;
  }
  .hero-title::after{ width:100%; }

  .hero-image{ align-items:center; justify-content:flex-end; }
  .hero-image img{
    height:86vh;               /* высокая картинка справа */
    width:auto;
    transform:translateX(14%); /* сдвиг вправо; подгони 10–18% по вкусу */
  }
}

/* Промежуток 1101–1279: чуть компактнее */
@media (min-width:1101px) and (max-width:1279px){
  .hero-grid{ grid-template-columns:860px 1fr; }
  .hero-content{ max-width:860px; }
  .hero-title{ inline-size:860px; text-wrap:balance; }
  .hero-title::after{ width:100%; }
}


.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
  clip-path: inset(50%);
}

/* ПК ≥1280px: сдвиг фото левее и немного пониже высота, чтобы не обрезалось */
@media (min-width: 1280px){
  .hero-image{ justify-content: flex-end; align-items: center; }
  .hero-image img{
    transform: translateX(-9%);
    height: 96vh;      /* если края подрезает — уменьши до 78–80vh */
    width: auto;
    object-fit: cover; /* оставляем как было; если нужно видеть целиком — см. ниже */
  }
}

/* ПК ≥1280px: левый блок прижать вверх */
@media (min-width: 1280px){
  .hero { align-items: flex-start; }          /* на всякий случай для родителя */
  .hero-grid { align-items: start; }          /* вместо center */

  
  .hero-title { margin-top: 25px; }            /* был 24px — делаем компактнее */
}


/* Список под заголовком (как на примере) */
.hero-bullets{
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  max-width: 980px;
  color: rgba(255,255,255,.92);
  font-size: 20px;              /* близко к макету */
  line-height: 1.35;
  letter-spacing: .01em;
  z-index: 2;
}

.hero-bullets li{
  position: relative;
  padding-left: 26px;           /* место под треугольник */
  margin: 8px 0;
  text-transform: uppercase;    /* как на скрине; убери, если не нужно */
}

.hero-bullets li::before{
  content: "▾";                 /* маленький треугольник */
  position: absolute;
  left: 0; top: 0.08em;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  opacity: .95;
}

/* акцент перед двоеточием */
.hero-bullets strong{
  color: #fff;
  font-weight: 800;
}

/* адаптивно чуть компактнее */
@media (max-width: 1100px){
  .hero-bullets{ font-size: 18px; }
}
@media (max-width: 768px){
  .hero-bullets{
    font-size: 16px;
    line-height: 1.4;
    margin: 10px 0 16px;
  }
  .hero-bullets li{ margin: 6px 0; padding-left: 22px; }
  .hero-bullets li::before{ font-size: 14px; }
}

@media (min-width:1024px) and (max-width:1100px){
  .hero-image img{
    transform: none;
    height: 68vh;
    max-width: 48vw;
    object-fit: contain;
  }
}


/* ====== FIX: корректная высота и safe-area на мобиле ====== */
@media (max-width: 768px){
  .hero{
    /* dvh/svh вместо vh: учитываем браузерные панели */
    min-height: calc(100svh - var(--topbar-h));
  }
  .hero-container{
    /* добавляем отступы с учётом вырезов/жестовых зон */
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* стеклянная карточка – ещё компактнее */
  .hero-content{
    gap: 8px;
    padding: 12px;
    max-width: 480px;
    /* чтобы точно помещалось по высоте, разрешим внутр. скролл при крайней необходимости */
    max-height: calc(100svh - var(--topbar-h) - 12px - env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* заголовок и линия */
  .hero-title{
    margin: 0 0 10px;
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .hero-title::after{
    height: 2px;
    margin: 6px auto 4px;
    width: 56%;
  }

  /* список буллетов – плотнее */
  .hero-bullets{
    margin: 8px 0 12px;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.35;
  }
  .hero-bullets li{
    margin: 4px 0;
    padding-left: 20px;
  }
  .hero-bullets li::before{ font-size: 13px; top: 0.1em; }

  /* чипсы – ещё на шаг компактнее */
  .chip-list{ gap: 6px; }
  .chip{ font-size: 13px; min-height: 34px; }

  /* кнопка – мобильный размер */
  .btn{ width: 100%; max-width: 260px; }
  .btn-light{
    height: 44px;
    padding: 0 16px;      /* было 1px 120px */
    font-size: 14px;
    margin-top: 8px;
  }
  .btn-light::before{ inset: -50%; }
}

/* ====== Очень низкие экраны (например, 360×640, 375×667) ====== */
@media (max-width: 768px) and (max-height: 700px){
  .hero-title{ font-size: clamp(20px, 5.4vw, 24px); }
  .hero-bullets{ font-size: 13px; line-height: 1.3; }
  .chip{ font-size: 12.5px; min-height: 32px; }
  .btn-light{ height: 40px; font-size: 13px; }
}

/* ====== Критично низкие (≤640px по высоте): режим ультра-компакт ====== */
@media (max-width: 768px) and (max-height: 640px){
  .hero-content{ padding: 10px; gap: 6px; }
  .hero-title{ font-size: clamp(18px, 5vw, 22px); }
  .hero-title::after{ width: 52%; }
  .hero-bullets{ margin: 6px 0 10px; font-size: 12.5px; }
  .btn-light{ height: 38px; max-width: 240px; }
}

/* ====== Опционально: когда включим класс .hero--compact (см. JS ниже) ====== */
@media (max-width: 768px){
  .hero.hero--compact .hero-title{ font-size: clamp(18px, 5.2vw, 22px); }
  .hero.hero--compact .hero-bullets{ font-size: 12.5px; line-height: 1.28; }
  .hero.hero--compact .chip{ font-size: 12px; }
  .hero.hero--compact .btn-light{ height: 38px; }
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-link {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  color: #222;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.topbar-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .topbar-link {
    display: none; /* если в мобилке не нужна — можно убрать эту строку */
  }
}