@media (min-width: 900px) {
  .resto-tile {
    height: 100vh;
    max-height: 100vh;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
/* =========================
   GLOBAL / RESET
   ========================= */
:root{
  --maxw: 1180px;
  --page-pad: 28px;              /* внешний отступ контейнера от краёв экрана */
  --header-pad-x: 26px;          /* ВОТ ЭТО регулирует “воздух” в хедере слева/справа */
  --header-pad-y: 12px;

  --overlay: 0.10;               /* затемнение видео в hero/sec2 */
  --neonA: rgba(102,204,255,.95);
  --neonB: rgba(243,92,163,.95);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  font-family: 'Staatliches', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  scroll-snap-type: y mandatory;
  background:#fff;
  color:#000;
}

/* Общий контейнер для выравнивания (хедер + hero текст) */
.align-container{
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  margin: 0 auto;
  padding-left: var(--header-pad-x);
  padding-right: var(--header-pad-x);
  box-sizing: border-box;
  margin: clamp(18px, 6vh, 80px) auto 0;

}

/* =========================
   SECTIONS / VIDEO
   ========================= */
section{
  height: 100vh;
  position: relative;
  color: white;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  scroll-snap-align:start;
}

.video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay));
  z-index:-1;
  pointer-events:none;
}

/* ВАЖНО: чтобы ничего не “вылезало” из видео */
section#hero,
section#sec2{
  overflow:hidden;
  justify-content:flex-start;
  align-items:stretch;
}



.content{
  z-index:1;
  display:flex;
  flex-direction:column;
  
  min-height:100vh;
  
}

/* =========================
   HERO
   ========================= */


.hero-copy{
  
  text-align:left;
  max-width:700px;
  position: relative;
  padding-bottom: 78px; /* резерв снизу под footnote */
}

.hero-copy.sec2-copy{
  
  text-align:left;
  max-width:700px;
  position: relative;
  padding-bottom: 78px; /* резерв снизу под footnote */
}


.hero-subtitle{
  font-size:1.1rem;
  margin-bottom:30px;
  color:aqua;
}

@media (min-width:768px){
 
  .hero-subtitle{ font-size:1.3rem; }
}

.fade{ opacity:1; transition: opacity .9s ease-in-out; }
.fade-out{ opacity:0; }

.hero-title-line{
  display: block;
}

.cta-button{
  margin-top:20px;
  padding:12px 32px;
  font-size:1.3rem;
  font-family:'Staatliches', sans-serif;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:transparent;
  color:white;
  border:.5px solid white;
  border-radius:40px;
  cursor:pointer;
  transition:.3s;
}
.cta-button:hover{
  background:white;
  color:black;
}

/* Footnote — ВСЕГДА внутри hero, прижат к низу */
.footnote-block{
  position:absolute;
  left:0;
  right:0;
  bottom: 18px;
  margin:0 !important;
  max-width:none;
  text-align: center;
}

.footnote{
  font-family:'Lato', sans-serif;
  font-size:.6rem;
  opacity:.65;
  line-height:1.5;
  max-width:85vw;
  white-space:normal;
  word-break:break-word;
}
.footnote + .footnote{ margin-top:.15rem; }
.footnote a{ color:#66ccff; text-decoration:underline; font-weight:500; }
.footnote .oferta-inline-btn{
  border: 0;
  background: transparent;
  color:#66ccff;
  text-decoration:underline;
  font-weight:500;
  font: inherit;
  padding: 0;
  cursor: pointer;
}



/* Mobile: hero video non-interactive */
@media (max-width: 767px){
  #hero .video-bg{
    pointer-events: none;
  }

  #hero .hero-subtitle{
    display: none;
  }
}


/* =========================
   SPACER / METHODOLOGY
   ========================= */
.spacer{
  background:white;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 40px 0;         /* equal space above and below content */
}
.spacer-inner{
  width:100%;
  max-width:800px;
  padding:0 13px;
  text-align:center;
}
.spacer-title{
  font-size:1.4rem;
  margin-bottom:10px;
  font-family:'Staatliches', sans-serif;
  letter-spacing:1px;
}
.icon-line-wrapper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.icon-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  width:90px;
}
.icon-block img{ width:40px; height:40px; object-fit:contain; }
.icon-block span{
  font-size:.7rem;
  font-family:'Lato', sans-serif;
  text-transform:uppercase;
  margin-top:5px;
}
.line{
  flex-grow:1;
  height:2px;
  background:#999;
  min-width:20px;
  max-width:100px;
  transition:.3s;
}
@media (max-width:768px){
  .line{ max-width:30px; }
  .icon-block{ width:70px; }
  .icon-block img{ width:32px; height:32px; }
  .icon-block span{ font-size:.65rem; }
}

/* =========================
   HEADER — GLASS NEON (вернули!)
   ========================= */
header.topbar{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  z-index: 9999;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  padding: var(--header-pad-y) var(--header-pad-x);
  border-radius: 32px;

  background: rgba(10,10,14,.38);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.08);
}

/* градиентная линия снизу хедера */
header.topbar::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(102,204,255,0),
    var(--neonA),
    var(--neonB),
    rgba(243,92,163,0)
  );
  opacity:.8;
  pointer-events:none;
}

/* Brand */
.brand{
  text-decoration:none;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
  gap:2px;
}
.brand-title{
  font-family:'Staatliches', sans-serif;
  letter-spacing:1px;
  font-size:1.15rem;
  text-transform:uppercase;
  color: #000;
}
.brand-title img{
  display:block;
  height:131px;
  width:auto;
  filter: brightness(0) saturate(100%);
}
.brand-subtitle{
  font-family:'Lato', sans-serif;
  letter-spacing:.9px;
  font-size:.62rem;
  text-transform:uppercase;
  color: var(--neonA);
  opacity:.85;
}

/* Desktop nav */
.nav-desktop{
  display:none;
  align-items:center;
  gap:10px;
}
.nav-desktop a{
  font-family:'Lato', sans-serif;
  font-size:.78rem;
  letter-spacing:.7px;
  text-transform:uppercase;
  color: rgba(255,255,255,.88);
  text-decoration:none;

  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  opacity:.86;
}
.nav-desktop a:hover{
  opacity:1;
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* Actions */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang-select{
  display:none;
  align-items:center;
  gap:6px;
}
.lang-select button{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  border-radius:999px;
  padding:8px 10px;
  font-family:'Lato', sans-serif;
  font-size:.72rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.18s ease;
}
.lang-select button:hover{
  background: rgba(255,255,255,.08);
  color:white;
}
.lang-select button.active{
  border-color: rgba(102,204,255,.45);
  background: rgba(102,204,255,.12);
  color:white;
}

/* CTA */
.topbar-cta{
  display:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  color:white;
  background: linear-gradient(90deg, rgba(102,204,255,.18), rgba(243,92,163,.18));
  font-family:'Staatliches', sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.topbar-cta:hover{
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(102,204,255,.28), rgba(243,92,163,.28));
}

/* Burger */
.burger{
  width:44px;
  height:44px;
  border-radius:14px;
  border:0px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.00);
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:10px;
  transition:.18s ease;
}
.burger:hover{ background: rgba(255,255,255,.08); }
.burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.92);
  border-radius:99px;
}


/* FIX: burger lines spacing */
.burger-lines{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;                 /* расстояние между палочками */
}

.burger-lines span{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}


/* Desktop breakpoint */
@media (min-width:900px){
  .nav-desktop{ display:flex; }
  .lang-select{ display:flex; }
  .topbar-cta{ display:inline-flex; align-items:center; }
  .burger{ display:none; }
}

/* Compact (если ты добавляешь класс по скроллу) */
header.topbar.compact{
  top:10px;
  padding: 9px var(--header-pad-x);
  border-radius: 22px;
  background: rgba(10,10,14,.55);
}

/* =========================
   MOBILE MENU (drawer)
   ========================= */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.58);
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}

.mobile-menu{
  position:fixed;
  top:0;
  right:-92%;
  width:92%;
  max-width:420px;
  height:100vh;
  z-index:9999;
  transition: right .3s ease;
  display:flex;

  background: rgba(10,10,14,.78);
  backdrop-filter: blur(18px);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-10px 0 30px rgba(0,0,0,.25);
}

.mobile-menu-inner{
  width:100%;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:'Lato', sans-serif;
  color:#fff;
}

.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mobile-menu-title{
  font-family:'Staatliches', sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:1.1rem;
  opacity:.92;
}
.mobile-close{
  border:none;
  background:transparent;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  color:#fff;
  padding:0 6px;
}

.m-link{
  text-decoration:none;
  color:#fff;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:700;
  font-size:.9rem;
  backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.m-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.m-cta{
  margin-top:8px;
  padding:14px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, rgba(102,204,255,.22), rgba(243,92,163,.18));
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
  font-weight:700;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.m-cta:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(102,204,255,.30), rgba(243,92,163,.26));
}

.mobile-open .mobile-menu{ right:0; }
.mobile-open .mobile-menu-backdrop{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   SIDE PANEL + BACKDROP
   ========================= */
#panel-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.4);
  z-index:10040;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease;
}
#panel-backdrop.visible{
  opacity:1;
  visibility:visible;
}

#side-panel{
  position:fixed;
  top:0;
  right:-100%;
  width:90%;
  height:100vh;
  background: linear-gradient(180deg, #f7fbff 0%, #f2f7fb 100%);
  color:#0f172a;
  z-index:10050;
  transition: right .4s ease;
  box-shadow:-2px 0 8px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#side-panel.open{ right:0; }

@media (min-width:768px){
  #side-panel{ width:50%; right:-50%; }
  #side-panel.open{ right:0; }
}

.side-content{
  overflow-y:auto;
  flex-grow:1;
  padding: 0 20px 40px 20px;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  font-family:'Roboto', sans-serif;
}

.form-intro h2{
  font-family: 'Ultra', serif;
  font-weight: 400;
  letter-spacing: 0;
  color: #0f172a;
  margin: 8px 0 14px;
}

.progress-wrapper{
  background: #ffffff;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 8px 18px rgba(11, 95, 148, 0.12);
}

.progress-text{
  color: #0b4a6f;
  font-weight: 700;
  margin-bottom: 8px;
}

.progress-container{
  height: 8px;
  border-radius: 999px;
  background: #e7edf5;
  overflow: hidden;
}

.progress-bar{
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0ea5b7 0%, #0b5f94 100%);
  transition: width .25s ease;
}

.form-section{
  background: #ffffff;
  border: 1px solid #d9e6f2;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(11, 95, 148, 0.06);
}

.form-section h3{
  margin: 0 0 10px;
  color: #0f172a;
}

.form-section.is-complete{
  border-color: #9adbbf;
  background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
}

.form-section.is-complete h3{
  color: #0b6b4e;
}

.form-grid{
  display: block;
}

.form-grid--checks{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.form-check-option{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #bfd4e6;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.form-consent-option{
  justify-content: flex-start;
  min-height: auto;
  padding: 14px 16px 14px 46px;
  text-align: left;
  font-weight: 600;
  line-height: 1.45;
}

.form-consent-option::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #9ab8cf;
  background: #ffffff;
  transform: translateY(-50%);
}

.form-consent-option.is-filled::before{
  background: linear-gradient(180deg, #0ea5b7 0%, #0b5f94 100%);
  border-color: #0b5f94;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.form-consent-option.is-invalid::before{
  border-color: #c92626;
}

.form-check-option:hover{
  border-color: #8bb8d7;
  transform: translateY(-1px);
}

.form-check-option.is-filled{
  border-color: #0b8f6a;
  background: #f2fff9;
  box-shadow: inset 0 0 0 1px rgba(11, 143, 106, 0.18);
}

.form-check-option.is-invalid{
  border-color: #c92626;
  background: #fff6f6;
  box-shadow: inset 0 0 0 1px rgba(201, 38, 38, 0.18);
}

.form-check-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-grid .form-input,
.form-grid .form-textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #bfd4e6;
  background: #fff;
  font-size: 1rem;
  color: #0f172a;
}

.form-grid .form-textarea{
  resize: vertical;
  min-height: 90px;
}

.form-grid .form-input.is-filled,
.form-grid .form-textarea.is-filled,
.form-select.is-filled{
  border-color: #0b8f6a;
  background: #f2fff9;
  box-shadow: inset 0 0 0 1px rgba(11, 143, 106, 0.18);
}

.form-grid .form-input.is-invalid,
.form-grid .form-textarea.is-invalid,
.form-select.is-invalid{
  border-color: #c92626;
  background: #fff6f6;
  box-shadow: inset 0 0 0 1px rgba(201, 38, 38, 0.18);
}

.form-section.has-error{
  border-color: #f1b2b2;
  background: linear-gradient(180deg, #ffffff 0%, #fff9f9 100%);
}

.form-grid .form-input:focus,
.form-grid .form-textarea:focus{
  outline: none;
  border-color: #0ea5b7;
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.15);
}

.form-select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #bfd4e6;
  background: #fff;
  font-size: 1rem;
  color: #0f172a;
}

.form-select:focus{
  outline: none;
  border-color: #0ea5b7;
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.15);
}

#otroInputWrapper input{
  border: 1px solid #bfd4e6 !important;
  border-radius: 10px !important;
}

#otroInputWrapper input:focus{
  outline: none;
  border-color: #0ea5b7 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.15);
}

.form-submit{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #0ea5b7 0%, #0b5f94 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 10px 22px rgba(11, 95, 148, 0.28);
}

.form-submit:hover{
  filter: brightness(1.03);
}

.form-status-message{
  margin: 10px 2px 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.form-status-message.is-error{
  color: #a61d1d;
}

.form-status-message.is-success{
  color: #0b6b4e;
}

@media (max-width: 640px){
  .form-grid--checks{
    grid-template-columns: 1fr;
  }
}

#close-panel{
  background:#ffffff;
  border:1px solid #d6e3ef;
  font-size:24px;
  align-self:flex-end;
  margin:10px 10px 6px;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  line-height: 1;
  color: #0f172a;
  cursor:pointer;
}

body.modal-open{
  overflow:hidden;
  overscroll-behavior: none;
}

/* =========================
   COOKIE UI (оставил твой стиль почти без изменений)
   ========================= */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#f9f9f9;
  border-top:1px solid #ccc;
  padding:20px;
  font-size:.9rem;
  z-index:9999;
  transform:translateY(calc(100% + 16px));
  opacity:0;
  pointer-events:none;
  transition:transform .4s ease, opacity .25s ease;
  box-shadow:0 -2px 6px rgba(0,0,0,.1);
}
.cookie-banner.show{
  transform:translateY(0%);
  opacity:1;
  pointer-events:auto;
}
.cookie-banner.cookie-banner--hidden{ display:none; }
.cookie-content{
  max-width:960px;
  margin:0 auto;
  color:#333;
  display:flex;
  flex-direction:column;
  gap:15px;
}
.cookie-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cookie-buttons button{
  padding:10px 18px;
  border:none;
  border-radius:6px;
  font-weight:bold;
  cursor:pointer;
  font-family:'Lato', sans-serif;
}
#accept-cookies{ background:black; color:white; }
#config-cookies{ background:#eee; color:#333; }
#reject-cookies{ background:transparent; color:#999; border:1px solid #ccc; }

/* Cookie modal */
.cookie-modal{
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(0,0,0,.5);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:20px;
}
.cookie-modal.show{ display:flex; }
.cookie-modal-content{
  background:#fff;
  padding:30px;
  border-radius:16px;
  max-width:500px;
  width:100%;
  font-family:'Roboto', sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.modal-buttons{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}
.save-btn,.cancel-btn{
  padding:10px 20px;
  border:none;
  border-radius:30px;
  cursor:pointer;
  font-weight:bold;
  font-size:.9rem;
}
.save-btn{ background:black; color:white; }
.cancel-btn{ background:transparent; border:1px solid #ccc; color:#333; }



/* ===== LOGO CAROUSEL ===== */
.logo-marquee{
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.logo-marquee__track{
  display: flex;
  align-items: center;
  gap: 27px;
  width: max-content;
  animation: logo-scroll 60s linear infinite;
}

.logo-marquee img{
  height: 41px;
  width: auto;
  opacity: .6;
  filter: grayscale(1) brightness(1.1);
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.logo-marquee img:hover{
  opacity: 1;
  filter: grayscale(0) brightness(1);
  transform: translateY(-1px);
}

@keyframes logo-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .logo-marquee__track{
    animation: none;
  }
}

/* FULL WIDTH */
.logo-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}


/* ===== SEC2: 3 columns, video only in center ===== */
#sec2{
  height: 100vh;
  position: relative;
  background: transparent;
  --overlay: 0.28;
  color: #fff;
}

/* =========================
   ABOUT / PRESENTATION
   ========================= */
.about-section{
  background: #fff;
  color: #1a1a1a;
  height: auto;              /* override section 100vh */
  overflow: visible;         /* let content flow naturally */
}

.about-wrap{
  display: grid;
  grid-template-columns: 42% 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  gap: 56px;
  align-items: start;
}

/* ---------- left: video stays in place ---------- */
.about-media{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  align-self: stretch;
}

.about-media video{
  position: sticky;
  top: 100px;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .5s ease;
}

.about-media video.video-hover-active{
  filter: grayscale(0);
}

/* ---------- right: scrollable text ---------- */
.about-body{
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

.about-body .about-heading{
  font-family: var(--ff-heading, 'Sora', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #111;
}

.about-body h3{
  font-size: 1.1rem;
  font-weight: 700;
  margin: 32px 0 10px;
  color: #111;
}

.about-body p{
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
  margin: 0 0 16px;
}

.about-body strong{
  color: #111;
}

.about-body .cta-button{
  margin-top: 24px;
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.about-body .cta-button:hover{
  background: #fff;
  color: #111;
  border-color: #111;
}

@media (max-width: 767px){
  .about-section{
    overflow: visible;
  }

  .about-wrap{
    grid-template-columns: 1fr;
    padding: 0 2px 32px;
    gap: 24px;
  }

  .about-body{
    align-self: auto;
    padding: 0 14px;
  }

  .about-media{
    position: relative;
    top: auto;
    align-self: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .about-media video{
    position: relative;
    top: auto;
    height: 100%;
    border-radius: 0;
  }

  .about-body .about-heading{
    font-size: 1.3rem;
    margin: 0 0 8px;
  }

  .about-body h3{
    font-size: .88rem;
    margin: 14px 0 4px;
  }

  .about-body p{
    font-size: .82rem;
    line-height: 1.5;
    margin: 0 0 6px;
  }

  /* keep only first paragraph after each h3; hide second */
  .about-body h3 + p + p { display: none; }
  /* hide "Trabajo con:" label + the big list paragraph */
  .about-body p:nth-last-of-type(1),
  .about-body p:nth-last-of-type(2) { display: none; }
}


.sec2-grid{
  height: 100vh;
  width: 100%;
  display: flex;
  gap: 10px;              /* расстояние между блоками (десктоп) */
  padding: 10px;          /* чтобы был воздух от краёв */
  box-sizing: border-box;
}


/* left | center | right on desktop */
.sec2-left{ order: 1; }
.sec2-center{ order: 2; }
.sec2-right{ order: 3; }

/* side columns: light gray */
.sec2-side{
  flex: 1 1 auto;
  min-width: 0;
  background: #f1f1f1; /* светло-серый */
}

/* center width matches header */
.sec2-center{
  flex: 0 0 auto;
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  position: relative;
  overflow: hidden; /* важно для видео */
  color: #fff;
}

/* video and overlay ONLY inside center */
.sec2-center .video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.sec2-center .overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay));
  z-index:-1;
  pointer-events:none;
}

.sec2-center .content{
  width: 100%;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* ⬅️ текст вниз */
  padding-top: 0;             /* ⬅️ убрали 50% */
  padding-bottom: 10vh;       /* ⬅️ воздух снизу */
}


/* ===== MOBILE: center first, then left, then right ===== */
@media (max-width: 767px){
  /* секция становится “3 экрана” подряд */
  #sec2{
    height: auto;
  }

  .sec2-grid{
    flex-direction: column;
    height: auto;
  }

  /* порядок */
  .sec2-center{ order: 1; width: 100%; }
  .sec2-left{ order: 2; }
  .sec2-right{ order: 3; }

  /* ВАЖНО: все три одинаковой высоты */
  .sec2-center,
  .sec2-side{
    height: 100vh;
    width: 100%;
  }
}

/* ===== SEC2 QUAD GRID (desktop 2x2, mobile 1x4) ===== */
#sec2{
  height: auto;
  display: block;
  padding: 1mm;
  box-sizing: border-box;
}

.quad-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5mm;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.quad-tile{
  display: flex;
  align-items: flex-start;
  padding: 14px;
  font-family: 'Staatliches', sans-serif;
  font-size: clamp(26px, 3vw, 44px);
  color: #fff;
  overflow: hidden;
}

#sec2 .quad-grid{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: none;
  aspect-ratio: auto;
}

#sec2 .quad-tile{
  aspect-ratio: 1 / 1;
}

#sec2 .quad-copy{
  width: min(92%, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

#sec2 .quad-copy > p{
  margin: 0;
}

#sec2 .quad-copy > p:first-child{
  margin-bottom: 8px !important;
}

@media (max-width: 1200px){
  #sec2 .quad-tile p[style*="font-size:clamp(1.2rem,3vw,2.2rem)"],
  #sec3 .quad-tile p[style*="font-size:clamp(1.2rem,3vw,2.2rem)"],
  .spacer-message{
    font-size: clamp(0.95rem, 1.7vw, 1.45rem) !important;
  }

  #sec2 .quad-tile p[style*="font-size:clamp(0.7rem,1.4vw,1rem)"],
  #sec3 .quad-tile p[style*="font-size:clamp(0.7rem,1.4vw,1rem)"]{
    font-size: clamp(0.58rem, 1.05vw, 0.82rem) !important;
  }

  #sec2 .quad-tile p[style*="font-size:clamp(0.65rem,1.2vw,0.9rem)"],
  #sec3 .quad-tile p[style*="font-size:clamp(0.65rem,1.2vw,0.9rem)"]{
    font-size: clamp(0.54rem, 0.92vw, 0.72rem) !important;
  }
}

@media (max-width: 767px){
  .quad-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  #sec2 .quad-grid{
    grid-template-columns: 1fr;
  }
  .quad-tile{
    aspect-ratio: 1 / 1;
  }
  .quad-tile p{
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
  }
  #sec2 .quad-copy,
  #sec3 .quad-copy{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ===== SEC3: single full-width square tile ===== */
#sec3{
  height: auto;
}
#sec3 .quad-grid{
  grid-template-columns: 1fr;
  grid-template-rows: none;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding: 0 var(--page-pad, 14px);
  box-sizing: border-box;
}
#sec3 .quad-tile{
  aspect-ratio: 1 / 1;
  width: 100%;
}
@media (max-width: 767px){
  #sec3 .quad-grid{
    max-width: 100%;
    padding: 0 2px;
  }
}

/* ===== STEPS SECTION ===== */
.steps{
  background: transparent;
  padding: 80px var(--page-pad, 14px);
  position: relative;
  overflow: hidden;
}
.steps-heading{
  font-family: 'Ultra', serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 400;
  color: #0ec7ff;
  text-align: center;
  margin: 0 auto 48px;
  max-width: var(--maxw, 1200px);
  line-height: 1.2;
  padding: 0 var(--page-pad, 14px);
}
/* subtle ambient glow behind the whole block */
.steps::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(232,0,110,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 35% 20% at 85% 10%, rgba(14,199,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.steps-inner{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 18px;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  position: relative;
}
.step{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  grid-column: span 4;
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(20px);
  animation: stepFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: var(--delay);
}
.step:nth-child(1){ grid-column: 1 / span 4; }
.step:nth-child(2){ grid-column: 5 / span 4; }
.step:nth-child(3){ grid-column: 9 / span 4; }
.step:nth-child(4){ grid-column: 3 / span 4; }
.step:nth-child(5){ grid-column: 7 / span 4; }
.step-number{
  font-family: 'Ultra', serif;
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  font-weight: 400;
  color: #e8006e;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,0,110,0.5);
  background: rgba(232,0,110,0.08);
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
  animation: numberPulse 2.8s ease-in-out infinite;
  animation-delay: var(--delay);
  box-shadow: 0 0 0 0 rgba(232,0,110,0.3);
}
.step-copy{
  text-align: left;
}
.step-title{
  font-family: 'Lato', sans-serif;
  font-size: clamp(0.65rem, 1.2vw, 0.88rem);
  font-weight: 700;
  color: rgba(96, 197, 255, 0.85);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.4;
}
.step-desc{
  font-family: 'Lato', sans-serif;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.2px;
  margin: 8px 0 0;
  line-height: 1.45;
  text-transform: none;
}
@keyframes numberPulse{
  0%, 100%{
    box-shadow: 0 0 0 0 rgba(232,0,110,0.3);
    border-color: rgba(232,0,110,0.5);
  }
  50%{
    box-shadow: 0 0 0 8px rgba(232,0,110,0), 0 0 20px 4px rgba(232,0,110,0.25);
    border-color: rgba(232,0,110,0.9);
  }
}
@keyframes stepFadeUp{
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px){
  .steps-inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .step,
  .step:nth-child(1),
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4),
  .step:nth-child(5){
    grid-column: auto;
  }
}

/* ---- MOBILE: vertical timeline ---- */
@media (max-width: 767px){
  .steps{
    padding: 0 24px;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .steps::before{
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,0,110,0.09) 0%, transparent 70%);
  }
  .steps-inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 48px 0;
    position: relative;
  }
  /* vertical connector line */
  .steps-inner::before{
    content: '';
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(232,0,110,0.4) 15%, rgba(232,0,110,0.4) 85%, transparent);
  }
  .step{
    transform: none;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    width: 100%;
    margin-bottom: 36px;
  }
  .step:nth-child(1),
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4),
  .step:nth-child(5){ grid-column: auto; }
  .step:last-child{ margin-bottom: 0; }
  .step-number{
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin: 0;
  }
  .step-copy{ max-width: 78%; }
  .step-title{
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    letter-spacing: 0.8px;
  }
  .step-desc{
    font-size: clamp(0.72rem, 3.2vw, 0.86rem);
    margin-top: 6px;
  }
}

/* ===== FOOTNOTE MOBILE: always pinned to bottom of hero ===== */
@media (max-width: 767px){
  #hero .footnote-block{
    position: absolute !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    text-align: center;
  }
  #hero .hero-copy{
    padding-bottom: 60px;
  }
}

/* ===== SPACER MESSAGE ===== */
.spacer-message{
  font-family: 'Ultra', serif;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: #ff006a;
  text-align: center;
  margin: 0;
}




/* ===== GENERIC MODAL (for cookies policy) ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* важно */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);   /* затемнение */
  z-index: 10000;                /* выше хедера/баннера */
}

.modal.show{
  display: flex;
}

.modal-content{
  width: min(720px, 100%);
  background: #fff;
  color: #000;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  font-family: 'Roboto', sans-serif;
}

.modal-content h2{
  font-family: 'Staatliches', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.modal-oferta{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  z-index: 10060;
}

.modal-oferta.is-open{
  display: flex;
}


.modal-oferta .modal-oferta-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: #fff;
  color: #111;
  border-radius: 18px;
  box-sizing: border-box;
}

.modal-oferta .modal-oferta-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px 0 24px;
}

.modal-oferta .modal-oferta-body {
  flex: 1 1 auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 28px 24px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .modal-oferta .modal-oferta-body {
    padding: 0 12px 20px 12px;
  }
}

.modal-oferta .modal-close{
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  touch-action: manipulation;
}

.modal-scroll{
  max-height: min(60vh, 520px);
  overflow: auto;
  padding-right: 8px;
  line-height: 1.55;
  color: #222;
}

.modal-scroll a{
  color: #0b6bff;
  text-decoration: underline;
}

@media (max-width: 767px){
  .modal-content{
    padding: 18px;
    border-radius: 16px;
  }
  .modal-scroll{
    max-height: 65vh;
  }
}

/* ===== SIDE VIDEO (LEFT) ===== */
.sec2-left{
  position: relative;
  overflow: hidden;
  background: #f1f1f1; /* на случай, если видео не загрузилось */
}

.sec2-left .side-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sec2 .sec2-left .side-video{
  filter: grayscale(1) !important;
  transition: filter .35s ease;
}

#sec2 .sec2-left:hover .side-video,
#sec2 .sec2-left:focus-within .side-video{
  filter: grayscale(0) !important;
}

#sec2 .sec2-right .seekbeak-frame{
  filter: grayscale(1) brightness(.48) !important;
  transition: filter .35s ease;
}

#sec2 .sec2-right:hover .seekbeak-frame,
#sec2 .sec2-right:focus-within .seekbeak-frame{
  filter: grayscale(0) brightness(.48) !important;
}

/* Mobile: hero video in color from the start */
@media (max-width: 767px){
  #hero .video-bg{
    filter: grayscale(0) !important;
  }
}


/* ===== VIDEO HOVER BEHAVIOR ===== */
.video-bg,
.side-video{
  filter: grayscale(1);
  transition: filter .4s ease;
}

/* по умолчанию видео не играет */
.video-bg,
.side-video{
  pointer-events: auto;
}

/* при наведении — цвет */
.video-hover-active{
  filter: grayscale(0);
}

/* 360 container */
#sec2 .sec2-right{
  position: relative;
  overflow: hidden;
  background:#f1f1f1;
}

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.sec2-right{ position: relative; overflow:hidden; }

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== PANORAMA UI (CENTERED, 3DNA STYLE) ===== */

/* ===== PANORAMA UI (BOTTOM CENTER, 3DNA STYLE) ===== */

.pano-ui{
  position: absolute;
  left: 50%;
  bottom: 18px;                 /* расстояние от низа */
  transform: translateX(-50%);

  display: flex;
  gap: 14px;
  z-index: 6;
}


/* кнопка как элемент интерфейса, а не «кнопка» */
.pano-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-family: 'Staatliches', sans-serif;
  font-size: .9rem;
  letter-spacing: 1px;

  color: rgba(255,255,255,.85);

  background: rgba(10,10,14,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);

  cursor: pointer;
  transition: 
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* hover — живёт, но не кричит */
.pano-btn:hover{
  transform: scale(1.08);
  color: #fff;
  border-color: rgba(102,204,255,.6);
  box-shadow:
    0 0 0 1px rgba(102,204,255,.35),
    0 0 22px rgba(102,204,255,.35);
  background: rgba(10,10,14,.55);
}

/* активная сцена */
.pano-btn.active{
  color: #fff;
  border-color: rgba(243,92,163,.65);
  box-shadow:
    0 0 0 1px rgba(243,92,163,.4),
    0 0 26px rgba(243,92,163,.45);
}

/* ===== PANO SCROLL HANDLE (TOP) ===== */
.sec2-right{
  position: relative;
  overflow: hidden;
}

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== PANO TEXT HANDLE — LEFT ALIGNED ===== */
/* ===== PANO TEXT HANDLE — SAME AS CENTER HERO ===== */
.pano-handle{
  position:absolute;
  top:96px;
  left:24px;
  z-index:50;

  font-family:'Staatliches', sans-serif;
  font-size:1.8rem;        /* ⬅️ как .hero-title */
  line-height:1.2;
  letter-spacing:0;

  color:#ffffff;
  text-transform:none;

  text-align:left;
  max-width:80%;

  cursor:grab;
  user-select:none;
  touch-action:pan-y;
}

.pano-handle:active{
  cursor:grabbing;
}

/* tablet / desktop — как в hero */
@media (min-width:768px){
  .pano-handle{
    font-size:4.5rem;      /* ⬅️ ровно как hero-title */
  }
}

/* mobile */
@media (max-width:767px){
  .pano-handle{
    left:16px;
    right:16px;
    font-size:2rem;        /* совпадает с mobile hero */
  }
}


/* логотип как часть строки */
.pano-handle{
  display:flex;
  align-items:center;
  gap:18px; /* расстояние между текстом и логотипом */
}

/* логотип после текста */
.pano-handle-logo{
  height:0.9em;      /* масштабируется от размера текста */
  width:auto;
  object-fit:contain;
  opacity:0.95;
  filter:brightness(1.1);
}


/* ===== UNIVERSAL INSERT TEMPLATE (3DNA) ===== */
.insert{
  position: absolute;
  inset: 0;                 /* занимает весь блок-родитель */
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 22vh;        /* как у тебя в .content */
  pointer-events: none;     /* чтобы не мешать 360/видео */
}

.insert__inner{
  width: 100%;
  max-width: 700px;         /* как hero-copy */
  padding: 0 24px;          /* “воздух” слева */
  text-align: left;
  pointer-events: none;
}

.insert__title{
  
  font-size: 1.8rem;
  line-height: 1.1;                      
  margin-bottom: 10px;
  color: #fff;
}

.insert__subtitle{
  
  font-size: 1.1rem;
  margin-bottom: 26px;
  color: aqua;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.insert__btn{
  display: inline-block;
  padding: 12px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  color: #fff;
  background: transparent;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s ease;
  pointer-events: auto;     /* кнопка кликабельна */
  text-decoration: none;
}

.insert__btn:hover{
  background: #fff;
  color: #000;
}

@media (min-width: 768px){
  .insert__title{ font-size: 2.0rem; }
  .insert__subtitle{ font-size: 1.25rem; }
}

@media (max-width: 767px){
  .insert__inner{ padding: 0 16px; }
  .insert__title{ font-size: 2rem; }
}

/* 360 должен быть ниже текста, но принимать тач */
.sec2-right #pano-right{
  z-index: 1;
}

/* вставка сверху — только визуально, не мешает вращению */
.insert{
  z-index: 5;
  pointer-events: none;
}

/* кнопка кликабельна */
.insert__btn{
  pointer-events: auto;
  touch-action: manipulation;
}

/* страница скроллится по Y */
.sec2-right{
  touch-action: pan-y;
}

/* а сам viewer получает тач для вращения */
#pano-right{
  touch-action: none;
}


















/* ===== SERVICES MARQUEE (FINAL) ===== */
.services-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}

.services-track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 0;

  animation: services-scroll 55s linear infinite;
  will-change: transform;
}

/* движение влево (бесшовно, если в HTML есть дубликат набора) */
@keyframes services-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.service-item{
  display: inline-block;
  width: 17ch;
  white-space: normal;
  text-align: center;
  line-height: 1.05;
 

  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;

  font-size: 1.03rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #111;

  animation: none;
  will-change: auto;
}

@media (max-width: 767px){
  .services-track{ gap: 18px; animation-duration: 70s; }
  .service-item{
    width: 14ch;
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .services-track{ animation: none; }
   
}
/* ===== LEFT VERTICAL DISCOUNT TAB (WORKING) ===== */
.discount-vertical{
  position: fixed;
  left: 0;
  bottom: 32vh;
  z-index: 99999;

  display: flex;
  align-items: stretch;

  text-decoration: none;
  color: #fff;
}

/* РУЧКА — всегда видна, НЕ прячем её вообще */
.discount-vertical__text{
  background: #ff7a00;
  padding: 14px 2px;

  writing-mode: vertical-rl;
  transform: rotate(180deg); /* читается снизу вверх */

  letter-spacing: 1.2px;
  font-size: 1rem;
  

  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;

  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  text-decoration: none;
  color: #fff;
}

/* ПАНЕЛЬ — спрятана, выезжает вправо */
.discount-vertical__panel{
  background: #ff9533;
  padding: 16px 18px;

  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  line-height: 1.15;

  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;

  box-shadow: 0 16px 36px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;
  min-width: 220px;
  

  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;

  transition: transform .28s ease, opacity .28s ease;
}

/* ОТКРЫТЬ: только при наведении на ручку */
.discount-vertical__text:hover + .discount-vertical__panel,
.discount-vertical__panel:hover {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}



@media (max-width: 767px){
  .discount-vertical{ bottom: 22vh; }
  .discount-vertical__text{ font-size: .9rem; padding: 12px 1px; display: block;
  text-decoration: none;
  color: #fff;}
  .discount-vertical__panel{ font-size: .8rem; padding: 14px 14px; display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px; /* можно 200-260 под вкус */}
}

.discount-wa{
  display: inline-block;
  margin-top: 12px;

  padding: 10px 16px;
  border-radius: 999px;

  background: #25D366; /* WhatsApp green */
  color: #fff;
  text-decoration: none;

  font-family: 'Staatliches', sans-serif;
  font-size: .85rem;
  letter-spacing: .6px;
  text-transform: uppercase;

  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discount-wa:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.discount-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* расстояние между иконкой и текстом */
}

.wa-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}



#sec2{
  min-height: 100vh;
  display: flex;
}

.sec2-center .content{
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}

.hero-copy.sec2-copy{
  margin: 0 auto;
  padding-bottom: 0;
  text-align: center;
}

#sec2 .align-container{
  display:flex;
  flex-direction:column;
  height:100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

/* обе боковые секции одинаковые */
.sec2-side{
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  flex: 1 1 auto;
  min-width: 0;
}

.sec2-side .side-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== MOBILE STACK ORDER ===== */
@media (max-width: 767px){

  #sec2{
    height: auto;
  }

  .sec2-grid{
    flex-direction: column;
    height: auto;
  }

  /* порядок: центр → левый → правый */
  .sec2-center{ order: 1; width: 100%; }
  .sec2-left{   order: 2; width: 100%; }
  .sec2-right{  order: 3; width: 100%; }

  /* все блоки — экран высотой */
  .sec2-center,
  .sec2-side{
    height: 100vh;
  }

  #sec2 .sec2-center .content{
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
  }

  #sec2 .align-container{
    justify-content: center;
    align-items: center;
    padding-left: 18px;
    padding-right: 18px;
  }

  #sec2 .hero-copy.sec2-copy{
    margin: 0 auto;
    text-align: center;
  }

  .hero-title {
    font-size: 1.0rem;
  }
}

.hero-title{
  font-size: 2.5em;
  line-height: 1.15;
  margin-bottom: 2px;

  white-space: normal;
  max-width: 720px;
  font-size: clamp(18px, 7vw, 48px);
}


#sec3{
  
  position: relative;
}

#sec3 .content{
  min-height: 100vh;
}


/* ✅ LAPTOPS (1366/1440 тоже) — только для sec3 */
@media (max-width: 1600px){
  #sec3 .hero-title{
    max-width: 520px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* FORCE WRAP — sec3 title */
#sec3 .hero-title{
  font-family: 'Ultra', serif !important;
  font-weight: 400 !important;
  font-size: 142% !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  width: min(520px, 92vw) !important;
  max-width: min(520px, 92vw) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#sec3 .hero-copy.sec2-copy{
  text-align: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#sec3 .hero-copy.sec2-copy .hero-title,
#sec3 .hero-copy.sec2-copy .hero-subtitle{
  text-align: center !important;
}


@media (max-width: 767px){
  :root{ --overlay: 0.42; } /* было 0.10 — слишком светло */
}
/* Mobile tuning ONLY for sec2 hero */
@media (max-width: 767px){
  #sec2 .hero-copy{
    margin-top: 0;
    max-width: 560px;
    padding-bottom: 0;
  }

  #sec2 .hero-title{
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.05;
    letter-spacing: .3px;
    max-width: 18ch;          /* ⬅️ контроль ширины строк */
  }

  #sec2 .hero-subtitle{
    font-size: 14px;
    margin-bottom: 18px;
    max-width: 28ch;
    color: rgba(102,204,255,.95);
    text-transform: none;     /* можно uppercase, но лучше нет */
  }

  #sec2 .cta-button{
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 999px;
  }
}

@media (max-width: 767px){
  #sec2 .align-container{
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767px){
  .hero-copy.sec2-copy{
    margin-top: auto;
    margin-bottom: 0 !important;   /* ⬅️ убрали подъём */
    padding-bottom: 0;
  }

  .sec2-center .content{
    padding-bottom: 6vh;          
  }
}



  @media (max-width: 767px){
/* 2) логотип не должен съедать половину экрана */

  #hero .logo-container{
    margin-top: 80px;
    padding-top: 0;
  }

  /* 4) заголовок/подзаголовок чуть компактнее */
  #hero .hero-title{
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.1;
    max-width: 20ch;
  }

  #hero .hero-subtitle{
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 32ch;
    text-transform: none;
  }

  /* 5) кнопка компактнее */
  #hero .cta-button{
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 999px;
    margin-top: 10px;
  }

  #hero .hero-copy{
    padding-bottom: 0;
  }

  #hero .footnote-block{
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 16px;
  }

  #hero .align-container{
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  #hero .footnote{
    font-size: .55rem;
  }
}

/* Section size — stable on mobile */
#hero{
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
}

/* Main layout column */
#hero .content{
  min-height: 100svh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  width: 100%;

  /* prevents logo from touching / leaving the top */
  padding-top: calc(12px + env(safe-area-inset-top));
}

/* ================= LOGO ================= */

#hero .logo-container{
  width: 100%;
  display: flex;
  justify-content: center;
margin-top: 120px;
  /* stable spacing instead of margin-top: 15vh */
  padding-top: clamp(12px, 4vh, 36px);
  padding-bottom: 12px;

  flex-shrink: 0; /* never collapses */
}

#hero .logo{
  width: min(26.9vw, 166px);
  height: auto;
}

/* ================= TEXT BLOCK ================= */

/* pushes text to the bottom, logo stays above */
#hero .align-container{
  margin-top: auto;
  padding-bottom: calc(14vh + env(safe-area-inset-bottom));
}

#hero .hero-copy{
  position: relative;
  max-width: 700px;
  text-align: left;

  /* space for footnote */
  padding-bottom: 84px;
}

/* ================= FOOTNOTE ================= */

#hero .footnote-block{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: 700px;
}

/* ================= DESKTOP ================= */

@media (min-width: 768px){

  #hero{
    min-height: 100vh;
    height: 100vh;
  }

  #hero .content{
    min-height: 100vh;
    height: 100vh;
    padding-top: 0;
  }

  #hero .logo-container{
    padding-top: 15vh;
    padding-bottom: 30px;
  }

  #hero .logo{
    width: 25.6vw;
    max-width: 192px;
  }

  #hero .align-container{
    padding-bottom: 16vh;
  }
}


@media (max-width: 767px){
  #hero .logo-container{
    margin-top: 80px;
  }

  #hero .hero-copy{
    padding-bottom: 0;
  }

  #hero .footnote-block{
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 14px;
  }

  #hero .align-container{
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #hero .hero-title{
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.1;
  }

  #hero .hero-subtitle{
    font-size: 13px;
    margin-bottom: 10px;
  }

  #hero .cta-button{
    font-size: 13px;
    padding: 10px 16px;
    margin-top: 8px;
  }

  #hero .footnote{
    font-size: .52rem;
  }
}

/* ===== SEC3 RIGHT: ALWAYS COLOR + AUTOPLAY ===== */
#sec3 .sec2-right .side-video{
  filter: grayscale(0) !important;
}

/* если у тебя где-то общий стиль делает видео ч/б — перебиваем */
#sec3 .sec2-right video{
  filter: grayscale(0) !important;
}

/* ===== PANORAMA BADGE (logo17 as white hint) ===== */
.pano-badge{
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  z-index: 7;
  pointer-events: none;
}


.pano-badge__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;

  /* делаем logo17.jpg белым */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .92;
}

.pano-badge__text{
  font-family: 'Lato', sans-serif;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

@media (max-width: 767px){
  .pano-badge{
    left: 14px;
    bottom: 76px; /* чтобы не пересекалось с кнопками pano-ui */
    padding: 9px 10px;
    gap: 8px;
  }
  .pano-badge__icon{ width: 24px; height: 24px; }
  .pano-badge__text{ font-size: .66rem; }
}

.sec2-right-copy{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: min(88%, 700px);
  padding: 0;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.sec2-copy-link{
  color: inherit;
  text-decoration: none !important;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.sec2-copy-link:hover,
.sec2-copy-link:focus-visible{
  text-decoration: none !important;
}

.sec2-copy-link--sub{
  display: inline;
}

#sec2 .hero-copy.sec2-copy .hero-title,
#sec2 .sec2-right-copy .hero-title{
  font-family: 'Ultra', serif !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

#sec2 .hero-copy.sec2-copy .hero-subtitle,
#sec2 .sec2-right-subtitle,
#sec2 .sec2-right-subtitle .sec2-copy-link{
  font-family: var(--ff-body) !important;
  text-transform: uppercase;
  font-size: var(--ui-font-size) !important;
  font-weight: var(--ui-font-weight);
  letter-spacing: var(--ui-letter-spacing);
  line-height: 1.35;
}

.sec2-right-copy .hero-title{
  margin: 0;
  font-family: 'Ultra', serif;
  font-size: 142%;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.sec2-right-copy p{
  margin: 14px 0 0;
}

@media (min-width:768px){
  #sec2 .sec2-center .content{
    position: relative;
    justify-content: flex-start;
    align-items: stretch;
  }

  #sec2 .hero-copy.sec2-copy{
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, 0);
    width: min(88%, 700px);
    margin: 0;
    text-align: center;
  }

  .sec2-right-copy{
    top: 36%;
    transform: translate(-50%, 0);
  }

  .sec2-right-copy p{ margin-top: 14px; }
}

@media (max-width: 767px){
  .sec2-right-copy{
    width: calc(100% - 28px);
    padding: 0;
  }

  .sec2-right-copy h3{
    font-size: 1.0rem;
  }

  .sec2-right-copy p{ margin-top: 12px; }
}


/* ===============================
   SEC3 — MOBILE FIX (FINAL)
   =============================== */
/* ===============================
   SEC2/SEC3 — MOBILE STACK (WRAP!)
   =============================== */
@media (max-width: 767px){

  .sec2-grid{
    flex-direction: column;
    height: auto;
  }

  /* порядок — одинаковый везде */
  .sec2-center{ order: 1; width:100%; }
  .sec2-left{   order: 2; width:100%; }
  .sec2-right{  order: 3; width:100%; }

  /* каждый блок = экран */
  .sec2-center,
  .sec2-side{
    height: 100svh;
    min-height: 100svh;
  }

  /* текст всегда внизу */
  .sec2-center .content{
    justify-content: flex-end;
    padding-bottom: 6vh;
  }

  .hero-copy.sec2-copy{
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* видео/панорамы */
  video,
  #pano-right{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



/* =================================================
   MOBILE FIX — ALLOW STACK INSIDE SECTIONS
   ================================================= */
@media (max-width: 767px){

  /* ❗ ОТКЛЮЧАЕМ snap для mobile */
  body{
    scroll-snap-type: none;
  }

  section{
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: unset;
  }

  /* sec2 / sec3 grid становится вертикальным */
  .sec2-grid{
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  /* каждый внутренний блок = экран */
  .sec2-center,
  .sec2-left,
  .sec2-right{
    height: 100svh !important;
    min-height: 100svh !important;
    width: 100%;
  }

  /* центр — текст внизу */
  .sec2-center .content{
    justify-content: flex-end;
    padding-bottom: 6vh;
  }

  .hero-copy.sec2-copy{
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* видео и панорамы — всегда фулл */
  video,
  #pano-right{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#cookie-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}

#cookie-overlay.show{
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px){
  .sec2-grid{ flex-direction: row; height: 100vh; }
  .sec2-center{ order: 2; }
  .sec2-left{ order: 1; }
  .sec2-right{ order: 3; }

  .sec2-center,
  .sec2-side{
    height: 100vh;
    min-height: 100vh;
  }
}

/* ===== SPACER #3: REVIEWS ===== */
.spacer-reviews{
  background: #fff;
  display:flex;
  align-items:center;
  padding: 0;
}

.spacer-logos{
  padding: 40px 0;
}

.reviews-title{
  margin-bottom: 14px;
}

/* full width like your marquees */
.reviews-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  --reviews-fade: clamp(20px, 4vw, 56px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--reviews-fade),
    #000 calc(100% - var(--reviews-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--reviews-fade),
    #000 calc(100% - var(--reviews-fade)),
    transparent 100%
  );
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.reviews-marquee.is-dragging{
  cursor: grabbing;
}

.reviews-track{
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 8px 0;
  will-change: transform;
}

/* review card */
.review-card{
  width: 320px;
  flex: 0 0 auto;

  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 18px;
  padding: 14px 14px 12px 14px;

  font-family: 'Roboto', sans-serif;
  color: #111;
  
  display: flex;
  flex-direction: column;
  align-items: center;


}

.review-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

/* avatar circle */
.avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.10);
  flex: 0 0 auto;
}

.review-meta{
  display: flex;
  flex-direction: column;
  align-items: center;   /* ⬅️ по горизонтали */
  text-align: center;    /* ⬅️ текст по центру */
  gap: 2px;
  line-height: 1.1;
}


.review-name{
  font-weight: 700;
  font-size: .95rem;
  color: rgb(29, 160, 184);

}

.review-role{
  font-size: .78rem;
  opacity: .65;
}

.review-stars{
  font-size: .8rem;
  letter-spacing: 1px;
  opacity: .85;
  color: #6e4405;
}

.review-text{
  font-size: .86rem;
  line-height: 1.35;
  opacity: .92;
}

@media (max-width: 767px){
  .spacer-reviews{ padding: 0; }
  .spacer-logos{ padding: 24px 0; }
  .review-card{ width: 260px; }
}

@media (prefers-reduced-motion: reduce){
  .reviews-track{ animation: none; }
}



/* =================================================
   SEC4 — LAPTOP STACK (center → left → right)
   for small laptops where sides become too thin
   ================================================= */
@media (max-width: 1800px){

  #sec4{
    height: auto;
    overflow: visible;
  }

  /* GRID: центр сверху, потом ряд из двух блоков */
  #sec4 .sec2-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
    gap: 10px;
    padding: 10px;
    height: auto;
  }

  /* CENTER — как хедер по ширине */
  #sec4 .sec2-center{
    grid-area: center;
    width: min(var(--maxw), calc(100% - var(--page-pad)));
    margin: 0 auto;
    height: 100svh;
    min-height: 100svh;
  }

  /* LEFT / RIGHT — делят ширину пополам */
  #sec4 .sec2-left{
    grid-area: left;
    height: 100svh;
    min-height: 100svh;
  }

  #sec4 .sec2-right{
    grid-area: right;
    height: 100svh;
    min-height: 100svh;
  }

  /* текст внизу центра */
  #sec4 .sec2-center .content{
    justify-content: flex-end;
    padding-bottom: 6vh;
  }
}

/* на телефоне — как ты хотел: центр → левый → правый */
@media (max-width: 767px){
  #sec4 .sec2-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    padding: 10px;
  }

  #sec4 .sec2-center{ width: 100%; margin: 0; }
  #sec4 .sec2-left{ order: 2; }
  #sec4 .sec2-right{ order: 3; }

  #sec4 .sec2-center,
  #sec4 .sec2-side{
    height: 100svh;
    min-height: 100svh;
  }
}

/* ===== SEC4 QUAD GRID (desktop 2x2, mobile 1x4) ===== */
#sec4{
  height: auto;
  display: block;
  padding: 1mm;
  box-sizing: border-box;
}

.quad-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5mm;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.quad-tile{
  display: flex;
  align-items: flex-start;
  padding: 14px;
  font-family: 'Staatliches', sans-serif;
  font-size: clamp(26px, 3vw, 44px);
  color: #fff;
  overflow: hidden;
}

#sec4 .quad-copy{
  width: min(92%, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

#sec4 .quad-copy > p{
  margin: 0;
}

#sec4 .quad-copy > p:first-child{
  margin-bottom: 8px !important;
}

@media (max-width: 1200px){
  #sec4 .quad-tile p[style*="font-size:clamp(1.2rem,3vw,2.2rem)"]{
    font-size: clamp(0.95rem, 1.7vw, 1.45rem) !important;
  }

  #sec4 .quad-tile p[style*="font-size:clamp(0.7rem,1.4vw,1rem)"]{
    font-size: clamp(0.58rem, 1.05vw, 0.82rem) !important;
  }

  #sec4 .quad-tile p[style*="font-size:clamp(0.65rem,1.2vw,0.9rem)"]{
    font-size: clamp(0.54rem, 0.92vw, 0.72rem) !important;
  }
}

@media (max-width: 767px){
  .quad-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .quad-tile{
    aspect-ratio: 1 / 1;
  }
}



/* ===== GENERIC MODAL (for cookies policy) ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* важно */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);   /* затемнение */
  z-index: 10000;                /* выше хедера/баннера */
}

.modal.show{
  display: flex;
}

.modal-content{
  width: min(720px, 100%);
  background: #fff;
  color: #000;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  font-family: 'Roboto', sans-serif;
}

.modal-content h2{
  font-family: 'Staatliches', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.modal-oferta{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  z-index: 10060;
}

.modal-oferta.is-open{
  display: flex;
}


.modal-oferta .modal-oferta-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: #fff;
  color: #111;
  border-radius: 18px;
  box-sizing: border-box;
}

.modal-oferta .modal-oferta-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px 0 24px;
}

.modal-oferta .modal-oferta-body {
  flex: 1 1 auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 28px 24px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .modal-oferta .modal-oferta-body {
    padding: 0 12px 20px 12px;
  }
}

.modal-oferta .modal-close{
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  touch-action: manipulation;
}

.modal-scroll{
  max-height: min(60vh, 520px);
  overflow: auto;
  padding-right: 8px;
  line-height: 1.55;
  color: #222;
}

.modal-scroll a{
  color: #0b6bff;
  text-decoration: underline;
}

@media (max-width: 767px){
  .modal-content{
    padding: 18px;
    border-radius: 16px;
  }
  .modal-scroll{
    max-height: 65vh;
  }
}

/* ===== SIDE VIDEO (LEFT) ===== */
.sec2-left{
  position: relative;
  overflow: hidden;
  background: #f1f1f1; /* на случай, если видео не загрузилось */
}

.sec2-left .side-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sec2 .sec2-left .side-video{
  filter: grayscale(1) !important;
  transition: filter .35s ease;
}

#sec2 .sec2-left:hover .side-video,
#sec2 .sec2-left:focus-within .side-video{
  filter: grayscale(0) !important;
}

#sec2 .sec2-right .seekbeak-frame{
  filter: grayscale(1) brightness(.48) !important;
  transition: filter .35s ease;
}

#sec2 .sec2-right:hover .seekbeak-frame,
#sec2 .sec2-right:focus-within .seekbeak-frame{
  filter: grayscale(0) brightness(.48) !important;
}

/* Mobile: hero video in color from the start */
@media (max-width: 767px){
  #hero .video-bg{
    filter: grayscale(0) !important;
  }
}


/* ===== VIDEO HOVER BEHAVIOR ===== */
.video-bg,
.side-video{
  filter: grayscale(1);
  transition: filter .4s ease;
}

/* по умолчанию видео не играет */
.video-bg,
.side-video{
  pointer-events: auto;
}

/* при наведении — цвет */
.video-hover-active{
  filter: grayscale(0);
}

/* 360 container */
#sec2 .sec2-right{
  position: relative;
  overflow: hidden;
  background:#f1f1f1;
}

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.sec2-right{ position: relative; overflow:hidden; }

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== PANORAMA UI (CENTERED, 3DNA STYLE) ===== */

/* ===== PANORAMA UI (BOTTOM CENTER, 3DNA STYLE) ===== */

.pano-ui{
  position: absolute;
  left: 50%;
  bottom: 18px;                 /* расстояние от низа */
  transform: translateX(-50%);

  display: flex;
  gap: 14px;
  z-index: 6;
}


/* кнопка как элемент интерфейса, а не «кнопка» */
.pano-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-family: 'Staatliches', sans-serif;
  font-size: .9rem;
  letter-spacing: 1px;

  color: rgba(255,255,255,.85);

  background: rgba(10,10,14,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);

  cursor: pointer;
  transition: 
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* hover — живёт, но не кричит */
.pano-btn:hover{
  transform: scale(1.08);
  color: #fff;
  border-color: rgba(102,204,255,.6);
  box-shadow:
    0 0 0 1px rgba(102,204,255,.35),
    0 0 22px rgba(102,204,255,.35);
  background: rgba(10,10,14,.55);
}

/* активная сцена */
.pano-btn.active{
  color: #fff;
  border-color: rgba(243,92,163,.65);
  box-shadow:
    0 0 0 1px rgba(243,92,163,.4),
    0 0 26px rgba(243,92,163,.45);
}

/* ===== PANO SCROLL HANDLE (TOP) ===== */
.sec2-right{
  position: relative;
  overflow: hidden;
}

#pano-right{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== PANO TEXT HANDLE — LEFT ALIGNED ===== */
/* ===== PANO TEXT HANDLE — SAME AS CENTER HERO ===== */
.pano-handle{
  position:absolute;
  top:96px;
  left:24px;
  z-index:50;

  font-family:'Staatliches', sans-serif;
  font-size:1.8rem;        /* ⬅️ как .hero-title */
  line-height:1.2;
  letter-spacing:0;

  color:#ffffff;
  text-transform:none;

  text-align:left;
  max-width:80%;

  cursor:grab;
  user-select:none;
  touch-action:pan-y;
}

.pano-handle:active{
  cursor:grabbing;
}

/* tablet / desktop — как в hero */
@media (min-width:768px){
  .pano-handle{
    font-size:4.5rem;      /* ⬅️ ровно как hero-title */
  }
}

/* mobile */
@media (max-width:767px){
  .pano-handle{
    left:16px;
    right:16px;
    font-size:2rem;        /* совпадает с mobile hero */
  }
}


/* логотип как часть строки */
.pano-handle{
  display:flex;
  align-items:center;
  gap:18px; /* расстояние между текстом и логотипом */
}

/* логотип после текста */
.pano-handle-logo{
  height:0.9em;      /* масштабируется от размера текста */
  width:auto;
  object-fit:contain;
  opacity:0.95;
  filter:brightness(1.1);
}


/* ===== UNIVERSAL INSERT TEMPLATE (3DNA) ===== */
.insert{
  position: absolute;
  inset: 0;                 /* занимает весь блок-родитель */
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 22vh;        /* как у тебя в .content */
  pointer-events: none;     /* чтобы не мешать 360/видео */
}

.insert__inner{
  width: 100%;
  max-width: 700px;         /* как hero-copy */
  padding: 0 24px;          /* “воздух” слева */
  text-align: left;
  pointer-events: none;
}

.insert__title{
  
  font-size: 1.8rem;
  line-height: 1.1;                      
  margin-bottom: 10px;
  color: #fff;
}

.insert__subtitle{
  
  font-size: 1.1rem;
  margin-bottom: 26px;
  color: aqua;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.insert__btn{
  display: inline-block;
  padding: 12px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  color: #fff;
  background: transparent;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s ease;
  pointer-events: auto;     /* кнопка кликабельна */
  text-decoration: none;
}

.insert__btn:hover{
  background: #fff;
  color: #000;
}

@media (min-width: 768px){
  .insert__title{ font-size: 2.0rem; }
  .insert__subtitle{ font-size: 1.25rem; }
}

@media (max-width: 767px){
  .insert__inner{ padding: 0 16px; }
  .insert__title{ font-size: 2rem; }
}

/* 360 должен быть ниже текста, но принимать тач */
.sec2-right #pano-right{
  z-index: 1;
}

/* вставка сверху — только визуально, не мешает вращению */
.insert{
  z-index: 5;
  pointer-events: none;
}

/* кнопка кликабельна */
.insert__btn{
  pointer-events: auto;
  touch-action: manipulation;
}

/* страница скроллится по Y */
.sec2-right{
  touch-action: pan-y;
}

/* а сам viewer получает тач для вращения */
#pano-right{
  touch-action: none;
}


















/* ===== SERVICES MARQUEE (FINAL) ===== */
.services-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}

.services-track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 0;

  animation: services-scroll 55s linear infinite;
  will-change: transform;
}

/* движение влево (бесшовно, если в HTML есть дубликат набора) */
@keyframes services-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.service-item{
  display: inline-block;
  width: 17ch;
  white-space: normal;
  text-align: center;
  line-height: 1.05;
 

  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;

  font-size: 1.03rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #111;

  animation: none;
  will-change: auto;
}

@media (max-width: 767px){
  .services-track{ gap: 18px; animation-duration: 70s; }
  .service-item{
    width: 14ch;
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .services-track{ animation: none; }
   
}
/* ===== LEFT VERTICAL DISCOUNT TAB (WORKING) ===== */
.discount-vertical{
  position: fixed;
  left: 0;
  bottom: 32vh;
  z-index: 99999;

  display: flex;
  align-items: stretch;

  text-decoration: none;
  color: #fff;
}

/* РУЧКА — всегда видна, НЕ прячем её вообще */
.discount-vertical__text{
  background: #ff7a00;
  padding: 14px 2px;

  writing-mode: vertical-rl;
  transform: rotate(180deg); /* читается снизу вверх */

  letter-spacing: 1.2px;
  font-size: 1rem;
  

  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;

  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  text-decoration: none;
  color: #fff;
}

/* ПАНЕЛЬ — спрятана, выезжает вправо */
.discount-vertical__panel{
  background: #ff9533;
  padding: 16px 18px;

  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  line-height: 1.15;

  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;

  box-shadow: 0 16px 36px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;
  min-width: 220px;
  

  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;

  transition: transform .28s ease, opacity .28s ease;
}

/* ОТКРЫТЬ: только при наведении на ручку */
.discount-vertical__text:hover + .discount-vertical__panel,
.discount-vertical__panel:hover {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}



@media (max-width: 767px){
  .discount-vertical{ bottom: 22vh; }
  .discount-vertical__text{ font-size: .9rem; padding: 12px 1px; display: block;
  text-decoration: none;
  color: #fff;}
  .discount-vertical__panel{ font-size: .8rem; padding: 14px 14px; display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px; /* можно 200-260 под вкус */}
}

.discount-wa{
  display: inline-block;
  margin-top: 12px;

  padding: 10px 16px;
  border-radius: 999px;

  background: #25D366; /* WhatsApp green */
  color: #fff;
  text-decoration: none;

  font-family: 'Staatliches', sans-serif;
  font-size: .85rem;
  letter-spacing: .6px;
  text-transform: uppercase;

  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discount-wa:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.discount-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* расстояние между иконкой и текстом */
}

.wa-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}



#sec2{
  min-height: 100vh;
  display: flex;
}

.sec2-center .content{
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}

.hero-copy.sec2-copy{
  margin: 0 auto;
  padding-bottom: 0;
  text-align: center;
}

#sec2 .align-container{
  display:flex;
  flex-direction:column;
  height:100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

/* обе боковые секции одинаковые */
.sec2-side{
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  flex: 1 1 auto;
  min-width: 0;
}

.sec2-side .side-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== MOBILE STACK ORDER ===== */
@media (max-width: 767px){

  #sec2{
    height: auto;
  }

  .sec2-grid{
    flex-direction: column;
    height: auto;
  }

  /* порядок: центр → левый → правый */
  .sec2-center{ order: 1; width: 100%; }
  .sec2-left{   order: 2; width: 100%; }
  .sec2-right{  order: 3; width: 100%; }

  /* все блоки — экран высотой */
  .sec2-center,
  .sec2-side{
    height: 100vh;
  }

  #sec2 .sec2-center .content{
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
  }

  #sec2 .align-container{
    justify-content: center;
    align-items: center;
    padding-left: 18px;
    padding-right: 18px;
  }

  #sec2 .hero-copy.sec2-copy{
    margin: 0 auto;
    text-align: center;
  }

  .hero-title {
    font-size: 1.0rem;
  }
}

.hero-title{
  font-size: 2.5em;
  line-height: 1.15;
  margin-bottom: 2px;

  white-space: normal;
  max-width: 720px;
  font-size: clamp(18px, 7vw, 48px);
}


#sec3{
  
  position: relative;
}

#sec3 .content{
  min-height: 100vh;
}


/* ✅ LAPTOPS (1366/1440 тоже) — только для sec3 */
@media (max-width: 1600px){
  #sec3 .hero-title{
    max-width: 520px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* FORCE WRAP — sec3 title */
#sec3 .hero-title{
  font-family: 'Ultra', serif !important;
  font-weight: 400 !important;
  font-size: 142% !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  width: min(520px, 92vw) !important;
  max-width: min(520px, 92vw) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#sec3 .hero-copy.sec2-copy{
  text-align: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#sec3 .hero-copy.sec2-copy .hero-title,
#sec3 .hero-copy.sec2-copy .hero-subtitle{
  text-align: center !important;
}


@media (max-width: 767px){
  :root{ --overlay: 0.42; } /* было 0.10 — слишком светло */
}
/* Mobile tuning ONLY for sec2 hero */
@media (max-width: 767px){
  #sec2 .hero-copy{
    margin-top: 0;
    max-width: 560px;
    padding-bottom: 0;
  }

  #sec2 .hero-title{
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.05;
    letter-spacing: .3px;
    max-width: 18ch;          /* ⬅️ контроль ширины строк */
  }

  #sec2 .hero-subtitle{
    font-size: 14px;
    margin-bottom: 18px;
    max-width: 28ch;
    color: rgba(102,204,255,.95);
    text-transform: none;     /* можно uppercase, но лучше нет */
  }

  #sec2 .cta-button{
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 999px;
  }
}

@media (max-width: 767px){
  #sec2 .align-container{
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767px){
  .hero-copy.sec2-copy{
    margin-top: auto;
    margin-bottom: 0 !important;   /* ⬅️ убрали подъём */
    padding-bottom: 0;
  }

  .sec2-center .content{
    padding-bottom: 6vh;          
  }
}



  @media (max-width: 767px){
/* 2) логотип не должен съедать половину экрана */

  #hero .logo-container{
    margin-top: 80px;
    padding-top: 0;
  }

  /* 4) заголовок/подзаголовок чуть компактнее */
  #hero .hero-title{
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.1;
    max-width: 20ch;
  }

  #hero .hero-subtitle{
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 32ch;
    text-transform: none;
  }

  /* 5) кнопка компактнее */
  #hero .cta-button{
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 999px;
    margin-top: 10px;
  }

  #hero .hero-copy{
    padding-bottom: 0;
  }

  #hero .footnote-block{
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 16px;
  }

  #hero .align-container{
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  #hero .footnote{
    font-size: .55rem;
  }
}

/* Section size — stable on mobile */
#hero{
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
}

/* Main layout column */
#hero .content{
  min-height: 100svh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  width: 100%;

  /* prevents logo from touching / leaving the top */
  padding-top: calc(12px + env(safe-area-inset-top));
}

/* ================= LOGO ================= */

#hero .logo-container{
  width: 100%;
  display: flex;
  justify-content: center;
margin-top: 120px;
  /* stable spacing instead of margin-top: 15vh */
  padding-top: clamp(12px, 4vh, 36px);
  padding-bottom: 12px;

  flex-shrink: 0; /* never collapses */
}

#hero .logo{
  width: min(26.9vw, 166px);
  height: auto;
}

/* ================= TEXT BLOCK ================= */

/* pushes text to the bottom, logo stays above */
#hero .align-container{
  margin-top: auto;
  padding-bottom: calc(14vh + env(safe-area-inset-bottom));
}

#hero .hero-copy{
  position: relative;
  max-width: 700px;
  text-align: left;

  /* space for footnote */
  padding-bottom: 84px;
}

/* ================= FOOTNOTE ================= */

#hero .footnote-block{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: 700px;
}

/* ================= DESKTOP ================= */

@media (min-width: 768px){

  #hero{
    min-height: 100vh;
    height: 100vh;
  }

  #hero .content{
    min-height: 100vh;
    height: 100vh;
    padding-top: 0;
  }

  #hero .logo-container{
    padding-top: 15vh;
    padding-bottom: 30px;
  }

  #hero .logo{
    width: 25.6vw;
    max-width: 192px;
  }

  #hero .align-container{
    padding-bottom: 16vh;
  }
}


@media (max-width: 767px){
  #hero .logo-container{
    margin-top: 80px;
  }

  #hero .hero-copy{
    padding-bottom: 0;
  }

  #hero .footnote-block{
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 14px;
  }

  #hero .align-container{
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #hero .hero-title{
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.1;
  }

  #hero .hero-subtitle{
    font-size: 13px;
    margin-bottom: 10px;
  }

  #hero .cta-button{
    font-size: 13px;
    padding: 10px 16px;
    margin-top: 8px;
  }

  #hero .footnote{
    font-size: .52rem;
  }
}

/* ===== SEC3 RIGHT: ALWAYS COLOR + AUTOPLAY ===== */
#sec3 .sec2-right .side-video{
  filter: grayscale(0) !important;
}

/* если у тебя где-то общий стиль делает видео ч/б — перебиваем */
#sec3 .sec2-right video{
  filter: grayscale(0) !important;
}

/* ===== PANORAMA BADGE (logo17 as white hint) ===== */
.pano-badge{
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  z-index: 7;
  pointer-events: none;
}


.pano-badge__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;

  /* делаем logo17.jpg белым */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .92;
}

.pano-badge__text{
  font-family: 'Lato', sans-serif;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

@media (max-width: 767px){
  .pano-badge{
    left: 14px;
    bottom: 76px; /* чтобы не пересекалось с кнопками pano-ui */
    padding: 9px 10px;
    gap: 8px;
  }
  .pano-badge__icon{ width: 24px; height: 24px; }
  .pano-badge__text{ font-size: .66rem; }
}

.sec2-right-copy{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: min(88%, 700px);
  padding: 0;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.sec2-copy-link{
  color: inherit;
  text-decoration: none !important;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.sec2-copy-link:hover,
.sec2-copy-link:focus-visible{
  text-decoration: none !important;
}

.sec2-copy-link--sub{
  display: inline;
}

#sec2 .hero-copy.sec2-copy .hero-title,
#sec2 .sec2-right-copy .hero-title{
  font-family: 'Ultra', serif !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

#sec2 .hero-copy.sec2-copy .hero-subtitle,
#sec2 .sec2-right-subtitle,
#sec2 .sec2-right-subtitle .sec2-copy-link{
  font-family: var(--ff-body) !important;
  text-transform: uppercase;
  font-size: var(--ui-font-size) !important;
  font-weight: var(--ui-font-weight);
  letter-spacing: var(--ui-letter-spacing);
  line-height: 1.35;
}

.sec2-right-copy .hero-title{
  margin: 0;
  font-family: 'Ultra', serif;
  font-size: 142%;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.sec2-right-copy p{
  margin: 14px 0 0;
}

@media (min-width:768px){
  #sec2 .sec2-center .content{
    position: relative;
    justify-content: flex-start;
    align-items: stretch;
  }

  #sec2 .hero-copy.sec2-copy{
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, 0);
    width: min(88%, 700px);
    margin: 0;
    text-align: center;
  }

  .sec2-right-copy{
    top: 36%;
    transform: translate(-50%, 0);
  }

  .sec2-right-copy p{ margin-top: 14px; }
}

@media (max-width: 767px){
  .sec2-right-copy{
    width: calc(100% - 28px);
    padding: 0;
  }

  .sec2-right-copy h3{
    font-size: 1.0rem;
  }

  .sec2-right-copy p{ margin-top: 12px; }
}


/* ===============================
   SEC3 — MOBILE FIX (FINAL)
   =============================== */
/* ===============================
   SEC2/SEC3 — MOBILE STACK (WRAP!)
   =============================== */
@media (max-width: 767px){

  .sec2-grid{
    flex-direction: column;
    height: auto;
  }

  /* порядок — одинаковый везде */
  .sec2-center{ order: 1; width:100%; }
  .sec2-left{   order: 2; width:100%; }
  .sec2-right{  order: 3; width:100%; }

  /* каждый блок = экран */
  .sec2-center,
  .sec2-left,
  .sec2-right{
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    aspect-ratio: auto !important; /* убираем квадратность */
  }

  /* порядок */
  #sec2 .sec2-center{ order: 1; }
  #sec2 .sec2-left  { order: 2; }
  #sec2 .sec2-right { order: 3; }

  #sec2 .sec2-center,
  #sec2 .sec2-side{
    height: 100svh;
    min-height: 100svh;
  }
}

/* ===== SEC5: force side panels visible (desktop/laptop) ===== */
#sec5 .sec2-left,
#sec5 .sec2-right{
  aspect-ratio: auto !important;
  height: 100svh !important;
  min-height: 100svh !important;
}

/* на всякий случай: панель и карточка поверх */
#sec5 .sec2-side{ position: relative; }
#sec5 .services-panel{ z-index: 5; }
#sec5 .services-card{ z-index: 6; }



/* =================================================
   SEC5 — FINAL (CLEAN)
   ================================================= */

section#sec5{
  overflow: hidden;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  height: 100vh;
  position: relative;
}

/* layout: left | center(header width) | right */
#sec5 .sec2-grid.tri-split{
  height: 100vh;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

/* columns */
#sec5 .sec2-center{
  flex: 0 0 auto;
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  position: relative;
  overflow: hidden;
}
#sec5 .sec2-side{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
}

/* center video only */
#sec5 .sec2-center .video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
#sec5 .sec2-center .overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay));
  z-index:-1;
  pointer-events:none;
}
#sec5 .sec2-center .content{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom: 10vh;
}

/* ===== shared card system (BOTH sides) ===== */
#sec5 .services-panel{
  position:absolute;
  inset:0;
  padding: 22px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 14px;

  color:#111;
  font-family:'Roboto', sans-serif;
}

#sec5 .services-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

#sec5 .services-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-family:'Lato', sans-serif;
  font-size:.72rem;
  letter-spacing:.8px;
  text-transform: uppercase;

  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

#sec5 .services-title{
  font-family:'Staatliches', sans-serif;
  letter-spacing: 1px;
  font-size: 1.15rem;
  line-height: 1.12;
  margin-bottom: 12px;
  color:#000;
}

#sec5 .services-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding:0;
  margin:0 0 14px 0;
}
#sec5 .services-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height:1.25;
  font-size:.95rem;
  color: rgba(0,0,0,.78);
}
#sec5 .services-list li::before{
  content:"•";
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(29,160,184,.90);
  margin-top: 1px;
}

#sec5 .services-note{
  font-size: .84rem;
  line-height: 1.35;
  color: rgba(0,0,0,.58);
  margin-top: 8px;
}

#sec5 .services-cta{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color:#000;

  font-family:'Staatliches', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none;
}
#sec5 .services-cta:hover{
  transform: translateY(-1px);
  border-color: rgba(29,160,184,.45);
  box-shadow: 0 18px 38px rgba(0,0,0,.14);
}

/* ===== PRO modifiers (left card) ===== */
#sec5 .services-card--pro{
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
  background: rgba(255,255,255,.94);
}

#sec5 .services-title--pro{ font-size: 1.25rem; }

#sec5 .services-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 12px;
}

#sec5 .metric{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 10px 10px 9px;
  text-align: center;
}

#sec5 .metric-num{
  font-family:'Staatliches', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .8px;
  color: rgba(0,0,0,.88);
  line-height: 1;
}

#sec5 .metric-label{
  font-family:'Lato', sans-serif;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-top: 6px;
}

/* ===== responsive ===== */
@media (max-width: 1800px){
  #sec5{ height: auto; }

  #sec5 .sec2-grid.tri-split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
    gap: 10px;
    height: auto;
  }

  #sec5 .sec2-center{ grid-area: center; width: 100%; min-height: 100svh; }
  #sec5 .sec2-left{   grid-area: left; }
  #sec5 .sec2-right{  grid-area: right; }

  #sec5 .sec2-left,
  #sec5 .sec2-right{
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 767px){
  #sec5{ height: auto; }

  #sec5 .sec2-grid.tri-split{
    display:flex;
    flex-direction:column;
    gap: 10px;
    height:auto;
  }

  #sec5 .sec2-center{ order:1; height: 100svh; }
  #sec5 .sec2-left{   order:2; height: 100svh; }
  #sec5 .sec2-right{  order:3; height: 100svh; }

  #sec5 .services-panel{ padding: 18px 16px; }
  #sec5 .services-card{ border-radius: 16px; }
  #sec5 .services-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* === SEC5 MOBILE: force 3 screens (center -> left -> right) === */
@media (max-width: 767px){

  #sec5{
    height: auto !important;
  }

  #sec5 .sec2-grid.tri-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
    height: auto !important;
  }

  /* каждый блок = экран */
  #sec5 .sec2-center,
  #sec5 .sec2-left,
  #sec5 .sec2-right{
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    aspect-ratio: auto !important; /* убираем квадратность */
  }

  /* порядок */
  #sec5 .sec2-center{ order: 1 !important; }
  #sec5 .sec2-left  { order: 2 !important; }
  #sec5 .sec2-right { order: 3 !important; }
}
/* ===== SEC5: force side panels visible (desktop/laptop) ===== */
#sec5 .sec2-left,
#sec5 .sec2-right{
  aspect-ratio: auto !important;
  height: 100svh !important;
  min-height: 100svh !important;
}

/* на всякий случай: панель и карточка поверх */
#sec5 .sec2-side{ position: relative; }
#sec5 .services-panel{ z-index: 5; }
#sec5 .services-card{ z-index: 6; }



/* =================================================
   SEC5 — FINAL GEOMETRY (like sec2/sec3/sec4)
   Put this at the VERY END of your CSS
   ================================================= */

/* base */
#sec5{
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* desktop: left | center | right */
#sec5 .sec2-grid.tri-split{
  height: 100vh;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

/* center = header width */
#sec5 .sec2-center{
  flex: 0 0 auto;
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* sides fill remaining space */
#sec5 .sec2-side{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  height: 100%;
}

/* center video */
#sec5 .sec2-center .video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
#sec5 .sec2-center .overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay));
  z-index:-1;
  pointer-events:none;
}

/* IMPORTANT: side content must be visible and on top */
#sec5 .services-panel{
  position:absolute;
  inset:0;
  padding: 22px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 14px;
  z-index: 5;
  font-family:'Roboto', sans-serif;
}
#sec5 .services-card{ z-index: 6; }

/* ---------- LAPTOP (<=1800): center row1, sides row2 (both full panels) ---------- */
@media (max-width: 1800px){
  #sec5{
    height: auto;
    overflow: visible;
  }

  #sec5 .sec2-grid.tri-split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
    gap: 10px;
    padding: 10px;
    height: auto;
  }

  #sec5 .sec2-center{
    grid-area: center;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
  }

  #sec5 .sec2-left{
    grid-area: left;
    height: 100svh;
    min-height: 100svh;

    /* kill squares */
    aspect-ratio: auto !important;
  }

  #sec5 .sec2-right{
    grid-area: right;
    height: 100svh;
    min-height: 100svh;

    /* kill squares */
    aspect-ratio: auto !important;
  }
}

/* ---------- MOBILE (<=767): 3 screens stack: center -> left -> right ---------- */
@media (max-width: 767px){
  #sec5{
    height: auto !important;
  }

  #sec5 .sec2-grid.tri-split{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:10px !important;
    height:auto !important;
  }

  #sec5 .sec2-center,
  #sec5 .sec2-left,
  #sec5 .sec2-right{
    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    aspect-ratio:auto !important; /* keep panels tall */
  }

  #sec5 .sec2-center{ order:1; }
  #sec5 .sec2-left{ order:2; }
  #sec5 .sec2-right{ order:3; }

  #sec5 .services-panel{ padding: 18px 16px; }
}


/* ✅ SEC5: на ноутбуках оставляем 3 колонки (не grid), чтобы были видны боковые панели */
@media (max-width: 1800px){
  #sec5{
    height: 100vh !important;
    overflow: hidden !important;
  }

  #sec5 .sec2-grid.tri-split{
    display: flex !important;
    height: 100vh !important;
  }

  #sec5 .sec2-center{
    width: min(var(--maxw), calc(100% - var(--page-pad))) !important;
    min-height: 100vh !important;
  }

  #sec5 .sec2-left,
  #sec5 .sec2-right{
    aspect-ratio: auto !important; /* на всякий, чтобы не квадратилось */
    height: 100vh !important;
  }
}


@media (max-width: 1800px){
  #sec5{
    height: auto !important;
    overflow: visible !important;
  }
  #sec5 .sec2-grid.tri-split{
    height: auto !important;
  }
}

/* =========================================
   SEC5 — LAPTOP STACK (B): 2 экрана
   1) экран: center (video)
   2) экран: left + right рядом
   ========================================= */
@media (max-width: 1800px){

  /* секция должна вместить 2 экрана */
  #sec5{
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* grid: 2 строки (center | center) потом (left | right) */
  #sec5 .sec2-grid.tri-split{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "center center"
      "left   right" !important;
    gap: 10px !important;
    padding: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  /* назначаем зоны */
  #sec5 .sec2-center{ grid-area: center !important; }
  #sec5 .sec2-left  { grid-area: left   !important; }
  #sec5 .sec2-right { grid-area: right  !important; }

  /* экран 1: центр = 100svh */
  #sec5 .sec2-center{
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
  }

  /* экран 2: боковые = 100svh */
  #sec5 .sec2-left,
  #sec5 .sec2-right{
    height: 100svh !important;
    min-height: 100svh !important;

    /* важно: НЕ квадраты на ноутбуке */
    aspect-ratio: auto !important;
  }

  /* видео в центре не “расплывается” и не влияет на высоту */
  #sec5 .sec2-center .video-bg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* контент центра пусть живёт поверх видео */
  #sec5 .sec2-center .content{
    min-height: 100% !important;
    height: 100% !important;
  }
}

/* =================================================
   LAPTOP FIX: disable scroll-snap for 2-screen sections
   ================================================= */
@media (max-width: 1800px){
  body{ scroll-snap-type: none !important; }
  section{ scroll-snap-align: unset !important; }
}
@media (max-width: 1800px){

  #sec5{
    height: auto !important;
    overflow: visible !important;
  }

  #sec5 .sec2-grid.tri-split{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "center center"
      "left   right" !important;
    gap: 10px !important;
    padding: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  #sec5 .sec2-center{ grid-area: center !important; height: 100svh !important; }
  #sec5 .sec2-left  { grid-area: left   !important; height: 100svh !important; }
  #sec5 .sec2-right { grid-area: right  !important; height: 100svh !important; }

  #sec5 .sec2-left,
  #sec5 .sec2-right{
    aspect-ratio: auto !important; /* убираем “квадраты” */
  }
}

/* =====================================================
   ISHARE TYPOGRAPHY STRIP LAB - imported styles
===================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body{
  background:#ffffff;
  color:#000000;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.page{
  width:min(1200px,94vw);
  margin:0 auto;
  padding:64px 0 140px;
}

.page-title{
  font-size:28px;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:64px;
}

.page-title small{
  display:block;
  margin-top:8px;
  font-size:14px;
  opacity:.6;
}

.typo-strip{
  padding:84px 0;
  border-top:1px solid rgba(0,0,0,.15);
}

.typo-strip:first-of-type{
  border-top:none;
}

.typo-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:20px;
  opacity:.6;
}

.typo-hero{
  font-family: "Sora", system-ui, sans-serif;
  font-size:clamp(48px,6vw,88px);
  font-weight:800;
  line-height:1.05;
  margin:0 0 26px;
}

.typo-hero.gradient{
  background: linear-gradient(
    90deg,
    #000000 0%,
    #4f46e5 35%,
    #06b6d4 65%,
    #22c55e 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroGradient 6s ease-in-out infinite;
}

@keyframes heroGradient{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.typo-sub{
  font-size:20px;
  line-height:1.55;
  max-width:72ch;
  margin-bottom:22px;
  font-weight:600;
}

.typo-body{
  font-size:17px;
  line-height:1.65;
  max-width:70ch;
  margin-bottom:28px;
  font-weight:400;
}

.typo-ui{
  font-size:14px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.typo-util{
  font-size:13px;
  opacity:.65;
}

.button-row{
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 26px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  background:none;
  border:1.5px solid #000;
  color:#000;
}

.btn-primary{
  background:#000;
  color:#fff;
}

.btn-secondary{
  background:transparent;
  color:#000;
}

.mobile-preview{
  padding:84px 0;
  border-top:1px solid rgba(0,0,0,.15);
}

.mobile-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
  align-items:start;
}

@media (min-width: 860px){
  .mobile-grid{
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 44px;
    align-items: start;
  }
}

.preview-note{
  max-width:70ch;
  font-size:16px;
  line-height:1.7;
  opacity:.75;
}

.iphone17pro{
  width: min(420px, 92vw);
  margin: 0 auto;
  position: relative;
  padding: 14px;
  border-radius: 54px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.04) 52%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #1a1a1a 0%, #0b0b0b 100%);
  box-shadow:
    0 22px 70px rgba(0,0,0,.18),
    0 4px 16px rgba(0,0,0,.12);
}

.iphone17pro::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%, rgba(255,255,255,.10) 100%);
  pointer-events:none;
  mix-blend-mode: overlay;
}

.iphone17pro .bezel{
  border-radius: 46px;
  background: #0a0a0a;
  padding: 12px;
  position: relative;
}

.iphone17pro .screen{
  border-radius: 36px;
  overflow: hidden;
  background:#fff;
  min-height: 760px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}

.iphone17pro .island{
  position:absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 34px;
  background:#000;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  z-index: 5;
}

.iphone17pro .island::after{
  content:"";
  position:absolute;
  inset: 3px 10px auto 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity: .6;
}

.iphone17pro .btn-side{
  position:absolute;
  width: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  left: -5px;
  top: 150px;
  height: 56px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.iphone17pro .btn-side.b2{ top: 220px; height: 46px; }
.iphone17pro .btn-side.b3{ top: 278px; height: 46px; }

.mobile-stage{
  padding: 56px 18px 20px;
}

.mobile-stage .typo-hero{
  font-size: 40px;
  line-height: 1.06;
  margin: 0 0 18px;
}

.mobile-stage .typo-sub{
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.mobile-stage .typo-body{
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.mobile-stage .typo-ui{
  font-size: 12px;
  margin-bottom: 10px;
}

.mobile-stage .button-row{
  gap:10px;
  margin-top: 18px;
}

.mobile-stage .btn{
  height: 44px;
  padding: 0 18px;
  font-size: 12px;
}

@media (min-width: 860px){
  .iphone17pro{
    margin: 0;
    justify-self: end;
  }
}

@media (max-width: 859px){
  .iphone17pro{
    margin: 0 auto;
    justify-self: center;
  }
}

@media (min-width: 860px){
  .mobile-grid > div:first-child{
    padding-top: 8px;
  }
}

.mobile-title{
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.08;
  margin: 0 0 14px;
}

.typo-strip,
.mobile-preview{
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: 84px 0;
}

.typo-strip:first-of-type{
  border-top: none;
}

.mobile-preview > .mobile-grid{
  width: min(1200px, 94vw);
  margin: 0 auto;
  padding: 0 2vw;
}

@media (max-width: 520px){
  .mobile-preview > .mobile-grid{
    width: 100%;
    padding: 0 18px;
  }
}

@media (min-width: 860px){
  .iphone17pro{ justify-self: end; }
}
@media (max-width: 859px){
  .iphone17pro{ justify-self: center; }
}

/* =====================================================
   HERO REFRESH (ISHARE look, scoped to first section)
===================================================== */
#hero .overlay{
  background: rgba(0,0,0,.46) !important;
}

#hero .hero-copy{
  max-width: 760px;
  padding-bottom: 88px;
}

#hero .hero-title{
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

#hero .hero-subtitle{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(17px, 1.65vw, 28px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  max-width: 700px;
  margin-bottom: 22px;
  font-weight: 600;
}

#hero .cta-button{
  margin-top: 8px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 900px){
  #hero .hero-copy{ padding-bottom: 86px; }

  #hero .hero-title{
    font-size: clamp(38px, 10vw, 62px);
    line-height: 1.02;
  }

  #hero .hero-subtitle{
    font-size: clamp(15px, 4.1vw, 20px);
    margin-bottom: 16px;
  }

  #hero .cta-button{
    height: 46px;
    font-size: 13px;
    padding: 0 20px;
  }
}

/* =====================================================
   HEADER OVERRIDE (ISHARE style)
===================================================== */

:root{
  --ff-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-display: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --radius-pill: 999px;
  --radius-1: 12px;
  --radius-2: 16px;
  --radius-3: 18px;
  --ls-nav: 0.12em;
  --utility-h: 40px;
  --topbar-h: 76px;
  --ui-font-family: var(--ff-body);
  --ui-font-size: 12px;
  --ui-font-weight: var(--fw-700);
  --ui-letter-spacing: var(--ls-nav);
  --ui-text-transform: uppercase;
  --ui-color: rgba(0,0,0,.78);
  --ui-color-hover: rgba(0,0,0,.9);
}

.container{
  width: 100%;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding: 0 var(--page-pad, 14px);
}

.utility-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: var(--utility-h);
  width: 100%;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
}

.utility-nav{
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}

.utility-nav::-webkit-scrollbar{ display: none; }

.utility-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .15s ease, color .15s ease;
}

.utility-link:hover{ opacity: .8; }

.utility-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.45);
}

.utility-ico svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.utility-text{
  font-family: var(--ui-font-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  color: rgba(0,0,0,.55);
}

.utility-link:hover .utility-text,
.utility-link:hover .utility-ico{
  color: rgba(0,0,0,.85);
}

header.topbar{
  position: fixed;
  top: var(--utility-h);
  z-index: 1900;
  height: var(--topbar-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.10);
  display: flex;
  align-items: center;
  width: 100%;
  left: 0;
  right: 0;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

body{
  padding-top: 0;
}

/* Anchor offsets with fixed utility + top bars */
#hero{
  margin-top: calc(var(--utility-h) + var(--topbar-h));
  height: calc(100vh - (var(--utility-h) + var(--topbar-h))) !important;
  min-height: calc(100vh - (var(--utility-h) + var(--topbar-h))) !important;
  scroll-margin-top: calc(var(--utility-h) + var(--topbar-h));
}

#about{
  scroll-margin-top: calc(var(--utility-h) + var(--topbar-h) + 14px);
}

header.topbar::after{ display: none; }

header.topbar .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

header.topbar .brand{
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: rgba(0,0,0,.84);
  flex-direction: row;
}

header.topbar .brand-title{
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: var(--fw-800);
  letter-spacing: .1em;
  line-height: 1;
  text-transform: none;
  color: #000;
}
header.topbar .brand-title img{
  display:block;
  height: 109px;
}

header.topbar .brand-subtitle{
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: var(--fw-700);
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0,0,0,.56);
}

.nav-desktop{
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-desktop > a,
.nav-parent{
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-size);
  font-weight: var(--ui-font-weight);
  color: rgba(0,0,0,.78);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  text-decoration: none;
  line-height: 1;
}

/* Enforce exact menu font rendering regardless of earlier theme rules */
header.topbar .nav-desktop > a,
header.topbar .nav-parent,
header.topbar .nav-menu a,
.mobile-menu .m-link,
.mobile-menu .m-cta,
.utility-bar .utility-text{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

header.topbar .nav-parent,
header.topbar .nav-desktop > a,
header.topbar .nav-arrow{
  color: #000;
}

.nav-desktop > a:hover,
.nav-parent:hover{
  background: rgba(0,0,0,.06);
  color: #000;
}

.nav-dropdown{ position: relative; }

.nav-arrow{
  font-size: 12px;
  opacity: .7;
  margin-left: 6px;
  transition: transform .18s ease;
}

.nav-menu{
  position: absolute;
  top: 100%;
  margin-top: 0;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.nav-menu::before{ display: none; }

.nav-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-size);
  font-weight: var(--ui-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: rgba(0,0,0,.78);
  text-decoration: none;
}

.nav-menu a:hover{
  background: rgba(0,0,0,.06);
  color: #000;
  transform: none;
}

.nav-dropdown:hover .nav-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown:hover .nav-arrow{ transform: rotate(180deg); }

.topbar-actions{
  display: flex;
  align-items:center;
  gap:10px;
}

.topbar-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid #0b0d10;
  background: #0b0d10;
  font-family: var(--ui-font-family);
  font-size: clamp(11px, .72vw, var(--ui-font-size));
  font-weight: var(--fw-800);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2f4f7;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.topbar-cta:hover{
  color: #0b0d10;
  border-color: #0b0d10;
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.topbar-cta:focus-visible{
  outline: 2px solid rgba(0,0,0,.5);
  outline-offset: 2px;
}

.burger{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  width: auto;
  height: auto;
  border-radius: 0;
  cursor: pointer;
}

.burger:hover{ background: none; }

.burger-lines{
  width: 20px;
  height: 16px;
  margin: 0 auto;
  position: relative;
  display: block;
}

.burger-lines span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,0,0,.78);
  border-radius: 999px;
  width: 100%;
}

.burger-lines span:nth-child(1){ top: 0; }
.burger-lines span:nth-child(2){ top: 7px; opacity: .8; }
.burger-lines span:nth-child(3){ top: 14px; opacity: .6; }

.mobile-menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1700;
}

.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(86vw, 360px);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  z-index: 3000;
  transform: translateX(110%);
  transition: transform .22s ease;
  border-left: none;
}

.mobile-menu-inner{
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--ui-font-family);
  color: #000;
}

.mobile-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 14px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  margin-bottom: 6px;
}

.mobile-menu-title{
  font-family: var(--ui-font-family);
  font-weight: var(--fw-900);
  letter-spacing: .16em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
}

.mobile-close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: #000;
  font-size: 22px;
  cursor: pointer;
}

.m-link{
  display: block;
  padding: 8px 0;
  border-radius: 0;
  font-family: var(--ui-font-family);
  font-weight: var(--ui-font-weight);
  font-size: var(--ui-font-size);
  letter-spacing: var(--ui-letter-spacing);
  text-transform: uppercase;
  color: rgba(0,0,0,.82);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.m-link:hover{
  color: rgba(0,0,0,.95);
  transform: none;
  background: transparent;
}

.m-link.active{ border-bottom: 1px solid rgba(0,0,0,.3); }

.m-cta{
  margin-top: auto;
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid #0b0d10;
  background: #0b0d10;
  color: #f2f4f7;
  font-family: var(--ui-font-family);
  font-weight: var(--fw-900);
  letter-spacing: var(--ui-letter-spacing);
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 14px;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.m-cta:hover{
  border-color: #12161d;
  background: #12161d;
  box-shadow: none;
  transform: translateY(-1px);
}

.m-cta:focus-visible{
  outline: 2px solid rgba(0,0,0,.5);
  outline-offset: 2px;
}

body.mobile-open .mobile-menu{ transform: translateX(0); }

body.mobile-open .mobile-menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}

body.mobile-open{ overflow: hidden; }

@media (max-width: 980px){
  .nav-desktop{ display: none; }
  .burger{ display: inline-flex; align-items: center; justify-content: center; }
  .topbar-cta{ display: none; }
  .topbar .brand-subtitle{ display: none; }

  header.topbar .topbar-inner{
    position: relative;
    justify-content: flex-end;
  }

  header.topbar .brand{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}

@media (min-width: 981px){
  #hero .align-container{
    padding-bottom: 10vh !important;
  }

  #hero .hero-copy{
    padding-bottom: 42px !important;
  }

  #hero .footnote-block{
    bottom: 0 !important;
  }
}

.utility-bar a,
.utility-bar a:visited,
.utility-bar a:hover,
.utility-bar a:focus,
.topbar a,
.topbar a:visited,
.topbar a:hover,
.topbar a:active,
.topbar a:focus,
.mobile-menu a,
.mobile-menu a:visited,
.mobile-menu a:hover,
.mobile-menu a:active,
.mobile-menu a:focus{
  text-decoration: none !important;
}

/* Main text uses Inter; large headings keep their existing display fonts */
body :where(p, li, a, button, input, select, textarea, label, small, td, th, caption){
  font-family: var(--ff-body);
}

body :where(h1, h2, h3, h4, h5, h6, .hero-title, .spacer-title, .brand-title){
  font-family: inherit;
  text-transform: uppercase;
}

/* Rotating subtitle phrases like "Espacios que comunican marca..." use main text font */
#hero .hero-subtitle,
#sec2 .hero-subtitle,
#sec3 .hero-subtitle,
#rotating-text,
#rotating-text-sec2,
#rotating-text-sec3{
  font-family: var(--ff-body) !important;
  text-transform: uppercase;
  font-size: var(--ui-font-size) !important;
  font-weight: var(--ui-font-weight);
  letter-spacing: var(--ui-letter-spacing);
  line-height: 1.35;
}

/* Keep text width aligned with header content width */
:root{
  --text-content-max: min(100%, calc(var(--maxw) - (var(--page-pad) * 2)));
}

section .align-container{
  width: min(var(--maxw), calc(100% - (var(--page-pad) * 2))) !important;
  max-width: min(var(--maxw), calc(100% - (var(--page-pad) * 2))) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section .hero-copy,
section .hero-title,
section .hero-subtitle,
section .footnote-block{
  width: 100%;
  max-width: 100% !important;
}

#hero .hero-title{
  font-family: "Sora", system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(22px, 2.7vw, 40px) !important;
  line-height: 1.05;
}

@media (max-width: 900px){
  #hero .hero-title{
    font-size: clamp(19px, 4.9vw, 30px) !important;
  }
}

/* SEC2: force 2 equal panels (desktop) and vertical stack (mobile) */
#sec2{
  height: auto !important;
  overflow: visible;
}

#sec2 .sec2-grid.tri-split{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "center right";
  gap: 1mm;
  width: 100%;
  height: auto;
}

#sec2 .sec2-left{
  display: none !important;
}

#sec2 .sec2-center{
  grid-area: center;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  margin: 0 !important;
}

#sec2 .sec2-right{
  grid-area: right;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
}

#sec2 .seekbeak-frame{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#sec2 .sec2-center .content{
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767px){
  #sec2{
    height: auto !important;
  }

  #sec2 .sec2-grid.tri-split{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "center"
      "right";
    gap: 1mm;
  }

  #sec2 .sec2-center,
  #sec2 .sec2-right{
    height: auto !important;
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
  }

  #sec2 .sec2-center .content,
  #sec2 .align-container,
  #sec2 .hero-copy.sec2-copy{
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #sec2 .hero-copy.sec2-copy{
    flex-direction: column;
    text-align: center !important;
    padding: 0 14px;
  }
}

/* Center all content inside sec2-copy blocks */
.hero-copy.sec2-copy{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-copy.sec2-copy .hero-title,
.hero-copy.sec2-copy .hero-subtitle,
.hero-copy.sec2-copy .cta-button{
  text-align: center !important;
}

/* Final desktop normalization: equal tile heights and equal section/spacer rhythm */
@media (min-width: 768px){
  #sec2,
  #sec3,
  #sec4,
  #sec5{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }

  #sec2 .sec2-center,
  #sec2 .sec2-left,
  #sec2 .sec2-right,
  #sec3 .sec2-center,
  #sec3 .sec2-left,
  #sec3 .sec2-right,
  #sec4 .sec2-center,
  #sec4 .sec2-left,
  #sec4 .sec2-right,
  #sec5 .sec2-center,
  #sec5 .sec2-left,
  #sec5 .sec2-right{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .spacer,
  .spacer-reviews,
  .spacer-logos{
    margin: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* FINAL FIX: remove empty tail under sec2 before spacer */
@media (min-width: 768px){
  #sec2{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #sec2 .sec2-grid.tri-split{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "center right" !important;
    grid-auto-rows: auto !important;
    gap: 1mm !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  #sec2 .sec2-center,
  #sec2 .sec2-right{
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
  }

  #sec2 .sec2-center .content{
    min-height: 0 !important;
    height: 100% !important;
  }
}

/* FINAL FIX: sec3 desktop = auto section, center and bottom tiles equal 100vh */
@media (min-width: 768px){
  #sec3{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #sec3 .sec2-grid.tri-split{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "center center"
      "left right" !important;
    gap: 1mm !important;
    width: 100% !important;
    max-width: var(--maxw) !important;
    margin: 0 auto !important;
    padding: 10px var(--page-pad) !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    align-content: start !important;
  }

  #sec3 .sec2-grid.tri-split .sec2-center{
    grid-area: center;
    width: 100% !important;
    min-height: 0 !important;
    height: 100vh !important;
  }

  #sec3 .sec2-grid.tri-split .sec2-left{
    grid-area: left;
    width: 100% !important;
    min-height: 0 !important;
    height: 108vh !important;
  }

  #sec3 .sec2-grid.tri-split .sec2-right{
    grid-area: right;
    width: 100% !important;
    min-height: 0 !important;
    height: 108vh !important;
  }

  #sec3 .sec2-grid.tri-split .sec2-center .content{
    min-height: 100% !important;
    height: 100% !important;
    justify-content: flex-start !important;
    padding-top: 40% !important;
    padding-bottom: 0 !important;
  }
}

/* Global rhythm: 1mm gap between major section blocks */
section,
.spacer,
.spacer-reviews,
.spacer-logos{
  margin-bottom: 1mm !important;
}

/* SEC3: right tile as text panel */
#sec3 .sec2-right{
  position: relative;
  display: flex;
  overflow: hidden;
  background: #ffffff !important;
}

#sec3 .sec3-right-essay{
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  background: #ffffff !important;
  padding: 0;
}

#sec3 .sec3-right-essay.about-body{
  justify-content: flex-start;
  align-self: stretch;
  max-width: 78%;
  margin: 0 auto;
  padding-top: 10px;
}

#sec3 .sec3-right-essay.about-body .about-heading{
  margin: 0 0 10px;
  font-size: clamp(1.08rem, 1.35vw, 1.55rem);
  line-height: 1.12;
}

#sec3 .sec3-right-essay.about-body h3{
  margin: 14px 0 8px;
  font-size: clamp(.90rem, 1.0vw, 1.08rem);
  line-height: 1.2;
}

#sec3 .sec3-right-essay.about-body p{
  margin: 0 0 9px;
  font-size: clamp(.80rem, .88vw, .96rem);
  line-height: 1.42;
  color: #111;
}

@media (max-width: 767px){
  #sec3 .sec3-right-essay{
    padding: 0;
  }

  #sec3 .sec3-right-essay.about-body .about-heading{
    margin-bottom: 8px;
    font-size: .98rem;
    line-height: 1.1;
  }

  #sec3 .sec3-right-essay.about-body h3{
    margin: 10px 0 6px;
    font-size: .86rem;
  }

  #sec3 .sec3-right-essay.about-body p{
    margin: 0 0 8px;
    font-size: .76rem;
    line-height: 1.35;
  }

  #sec3 .sec3-right-essay{
    max-width: 100%;
    padding-top: 0;
  }
}




/* Form success image */
.form-success-img {
  display: block;
  width: 86vw;
  max-width: 420px;
  margin: 0 auto 26px;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.14), 0 26px 60px rgba(15, 23, 42, 0.16), 0 0 48px rgba(255, 79, 216, 0.2);
}

/* Success screen — premium branded confirmation */
.form-success-state {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 0%, rgba(255, 79, 216, 0.12), transparent 42%), radial-gradient(circle at 95% 5%, rgba(6, 182, 212, 0.1), transparent 38%), #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
  padding: 30px 18px 34px;
  animation: fsReveal 0.55s ease both;
}

.form-success-state::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
}

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

.fs-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: #0f172a;
}

.fs-title {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 5.4vw, 2.35rem);
  line-height: 1.12;
  color: #0f172a;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

.fs-subtitle {
  max-width: 690px;
  margin: 0 auto 18px;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  line-height: 1.58;
  color: #0f172a;
  font-weight: 600;
}

.fs-body {
  max-width: 680px;
  margin: 0 auto 14px;
  font-size: clamp(0.88rem, 2.35vw, 1rem);
  line-height: 1.68;
  color: #334155;
}

.fs-checklist {
  list-style: none;
  padding: 0;
  margin: 24px auto 30px;
  max-width: 620px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.fs-checklist li {
  width: 100%;
  text-align: center;
  font-size: clamp(0.89rem, 2.25vw, 1rem);
  color: #0f172a;
  line-height: 1.48;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.fs-checklist li::before {
  content: '✓ ';
  color: #ff4fd8;
  font-weight: 700;
}

.fs-closing {
  margin: 0;
  font-size: clamp(0.92rem, 2.8vw, 1.05rem);
  line-height: 1.55;
  color: #334155;
}

.fs-closing strong {
  color: #ff4fd8;
  font-weight: 700;
}

@media (min-width: 768px) {
  .form-success-state {
    padding: 44px 36px 48px;
  }

  .fs-checklist {
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .form-success-state {
    border-radius: 18px;
    padding: 24px 18px 28px;
  }
}

/* Mobile-only: raise hero CTA while keeping footnote in current place */
@media (max-width: 767px) {
  #hero .hero-title.hero-title--split {
    transform: translateY(-100%) !important;
    transform-origin: center bottom;
    display: grid;
    grid-template-rows: 1.08em 1.08em;
    align-content: end;
    min-height: 2.16em;
    line-height: 1.05;
  }

  #hero .hero-title.hero-title--split .hero-title-line {
    white-space: nowrap;
    line-height: 1.05;
  }

  .page-hero .hero-title {
    transform: none !important;
    display: block;
    min-height: 0;
  }

  .page-hero .hero-title-line,
  .page-hero .hero-subtitle,
  .page-hero .page-back {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #hero .cta-button {
    transform: none !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 6px;
    margin-bottom: 34px;
    position: relative;
    z-index: 20;
    pointer-events: auto;
    touch-action: manipulation;
  }

  #hero .footnote-block {
    position: relative;
    bottom: auto;
    left: 0;
    right: 0;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 6px !important;
    z-index: 30;
    pointer-events: auto;
  }

  #hero .footnote {
    max-width: 92vw;
    margin: 0 auto;
    text-align: center;
  }

  #hero .footnote .open-oferta {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    display: inline-block;
    padding: 12px 8px;
    min-height: 44px;
    line-height: 1.35;
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
  }
}

/* iOS safety: hidden overlays must never capture taps */
.mobile-menu-backdrop,
#panel-backdrop,
#cookie-overlay {
  display: none !important;
  pointer-events: none !important;
}

body.mobile-open .mobile-menu-backdrop,
body.panel-open #panel-backdrop.visible,
#cookie-overlay.show {
  display: block !important;
  pointer-events: auto !important;
}

/* Global touch stability for iPhone Safari */
a,
button,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

/* =============================================
   SITE FOOTER
   ============================================= */
.site-footer {
  background: #52bfff;
  color: #fff;
  padding: 52px 0 28px;
  font-family: 'Lato', sans-serif;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: color .18s ease;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-inner {
  width: min(var(--maxw), calc(100% - var(--page-pad)));
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}

.footer-logo {
  height: 128px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: .75rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
  max-width: 180px;
  line-height: 1.4;
}

.footer-cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-family: 'Ultra', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 14px;
  color: #fff;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col ul li a {
  font-size: .82rem;
  letter-spacing: .4px;
  color: #fff;
}

.footer-col ul li span {
  color: #fff;
  font-size: .82rem;
}

.footer-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.footer-cta-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  letter-spacing: .4px;
  transition: background-color .18s ease, color .18s ease;
}

.footer-cta-btn:hover {
  background: #fff;
  color: #52bfff;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  font-size: .73rem;
  color: #fff;
  letter-spacing: .4px;
}

@media (max-width: 600px) {
  .footer-top {
    flex-direction: column;
    gap: 28px;
  }
  .footer-cols {
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* =============================================
   QUAD-TILE HOVER (service pages links)
   ============================================= */
a.quad-tile {
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.22s ease;
  display: flex;
  outline: 3px solid transparent;
  outline-offset: -3px;
  overflow: hidden;
}
a.quad-tile:hover {
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.75);
  z-index: 2;
}
.quad-tile--cta {
  cursor: pointer;
  transition: box-shadow 0.22s ease;
  outline: 3px solid transparent;
  outline-offset: -3px;
}
.quad-tile--cta:hover {
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.18);
}

/* Spotlight video inside tile */
.quad-tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.45);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  transition: filter 0.4s ease;
  -webkit-mask-image: none;
  mask-image: none;
}
a.quad-tile:hover .quad-tile-video {
  filter: grayscale(0) brightness(0.5);
}
.quad-copy {
  position: relative;
  z-index: 1;
}

/* =============================================
   SERVICE PAGE HERO
   ============================================= */
.page-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}
.page-hero .video-bg,
.page-hero .img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero-overlay,
.page-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay));
  z-index: -1;
}

.page-hero .align-container {
  margin-top: clamp(18px, 6vh, 80px);
  margin-bottom: 0;
}

.page-hero .hero-copy {
  max-width: 700px;
  padding-bottom: 20px;
}

.page-hero .page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  margin-bottom: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s;
}

.page-hero .page-back::before {
  content: '← ';
}

.page-hero .page-back:hover {
  color: #fff;
}

/* =============================================
   SERVICE PAGE CONTENT
   ============================================= */
.page-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 80px var(--page-pad, 20px);
}
.page-content h2 {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: #111;
  margin: 0 0 20px;
}
.page-content h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  color: #555;
  margin: 36px 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.page-content p {
  font-family: 'Lato', sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: #444;
  line-height: 1.75;
  margin: 0 0 16px;
}
.page-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 40px 0;
}
.page-feature-card {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 26px 22px;
}
.page-feature-card h4 {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: #111;
  margin: 0 0 8px;
}
.page-feature-card p {
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}
.page-accent {
  border-left: 4px solid #e8006e;
  padding-left: 20px;
  margin: 32px 0;
}
.page-accent p {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #222;
  font-style: italic;
  margin: 0;
}
@media (max-width: 767px) {
  .page-hero { min-height: 55vh; }
  .page-content { padding: 50px var(--page-pad, 14px); }
}

/* =============================================
   ECOSISTEMAS DIGITALES PAGE
   ============================================= */
.ed-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--page-pad, 28px);
}

.ed-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 14px;
}

.ed-heading {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 28px;
}

.ed-body {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 0 16px;
}

.ed-highlight {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: #e8006e;
  margin: 20px 0 0;
}

/* Products grid */
.ed-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.ed-product {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px 24px;
  transition: border-color 0.2s;
}

.ed-product:hover {
  border-color: rgba(232,0,110,0.4);
}

.ed-product--featured {
  grid-column: span 3;
  background: rgba(232,0,110,0.10);
  border-color: rgba(232,0,110,0.35);
}

.ed-product-icon {
  font-size: 2rem;
  margin-bottom: 14px;
}

.ed-product-title {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: #fff;
  margin: 0 0 10px;
}

.ed-product-sub {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin: 0 0 16px;
}

.ed-product-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ed-product-checks li {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  padding-left: 18px;
  position: relative;
}

.ed-product-checks li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #e8006e;
  font-size: 0.75rem;
  top: 1px;
}

.ed-product-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  color: #e8006e;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Steps */
.ed-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 48px;
  flex-wrap: wrap;
}

.ed-step {
  flex: 1 1 130px;
  text-align: center;
  padding: 24px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
}

.ed-step-arrow {
  align-self: center;
  font-size: 1.4rem;
  color: rgba(232,0,110,0.7);
  padding: 0 4px;
  flex: 0 0 auto;
}

.ed-step-num {
  font-family: 'Ultra', serif;
  font-size: 2.2rem;
  color: rgba(232,0,110,0.55);
  line-height: 1;
  margin-bottom: 10px;
}

.ed-step-title {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 8px;
}

.ed-step-body {
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.45;
  margin: 0;
}

/* For-list */
.ed-forlist {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.ed-forlist li {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px 20px;
}

.ed-forlist li::before {
  content: '✔  ';
  color: #e8006e;
  font-weight: 700;
}

/* CTA final */
.ed-cta-heading {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
  line-height: 1.1;
  margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .ed-products {
    grid-template-columns: 1fr;
  }
  .ed-product--featured {
    grid-column: span 1;
  }
  .ed-steps {
    flex-direction: column;
    align-items: stretch;
  }
  .ed-step-arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .ed-forlist {
    grid-template-columns: 1fr;
  }
}


/* ===== PRODUCT MODALS (reusable) ===== */
.prod-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.prod-modal.is-open {
  opacity: 1;
  pointer-events: all;
}
.prod-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  cursor: pointer;
}
.prod-modal__content {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 72px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.93);
  transition: transform .25s ease;
}
.prod-modal.is-open .prod-modal__content {
  transform: scale(1);
}
.prod-modal__close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #bbb;
  cursor: pointer;
  z-index: 1;
  padding: 0;
  transition: color .2s;
}
.prod-modal__close:hover { color: #111; }
.prod-modal__scroll {
  overflow-y: auto;
  padding: 44px 40px 40px;
  -webkit-overflow-scrolling: touch;
}
.prod-modal__scroll h2 {
  font-family: 'Ultra', serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: #111;
  margin: 0 0 20px;
  line-height: 1.15;
  padding-right: 28px;
}
.prod-modal__scroll h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: #e8006e;
  margin: 24px 0 8px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.prod-modal__scroll p {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.78;
  color: #444;
  margin: 0 0 14px;
}
.prod-modal__price {
  font-family: 'Ultra', serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  color: #111 !important;
  margin: 28px 0 6px !important;
}
.prod-modal__tagline {
  font-weight: 700 !important;
  font-style: italic;
  color: #111 !important;
  margin-bottom: 32px !important;
}
.prod-tile-details {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.5);
  transition: color .2s, border-color .2s;
}
.quad-tile:hover .prod-tile-details {
  color: #fff;
  border-color: #fff;
}
@media (max-width: 767px) {
  .prod-modal__scroll {
    padding: 48px 20px 32px;
  }
}