:root{
  --bg: #1D152C;
  --accent: #8e53e1;
  --btn: #a466ff;
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --text: #F2EEFB;
  --nav-height: 74px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:4vh 5vw; z-index:900; position:relative;}
.hero-inner{display:flex;width:100%;max-width:1400px}
.hero-left{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:6vh;z-index:900}
.hero-right{flex:1;padding:40px;display:flex;flex-direction:column;justify-content:center;z-index:900}

/* Logo wrapper & main logo sizing */
/* сделали логотип крупнее и responsive, и сохраняем translate в CSS (важно) */
.logo-wrap{position:relative;width:100%;height:75vh;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-wrap img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:110%;
  max-height:110%;
  transition:transform .12s cubic-bezier(.2,.9,.3,1);
  transform-origin:center center;
  will-change:transform;
}
/* Больший размер логотипа, оставляем responsive */
#fsilogo{ width: clamp(260px, 36vw, 520px); height:auto; display:block; }

/* Text */
.title{font-family:'Wix Madefor Display',sans-serif;font-size:clamp(24px,4vw,40px);margin:0 0 16px}
.lead{font-size:1.05rem;line-height:1.5;color:rgba(234,230,247,0.95)}
.lead .accent{color:var(--accent);font-weight:600}
.lead .highlight{color:var(--accent);font-weight:700}

.hero-actions{margin-top:22px}
.btn{padding:12px 20px;border-radius:12px;border:0;cursor:pointer;font-weight:600;background:transparent;color:var(--text);transition:transform .12s ease,box-shadow .12s ease}
.btn.primary{background:linear-gradient(90deg,var(--btn), #8e5dff);box-shadow:0 6px 18px rgba(164,102,255,0.12)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(164,102,255,0.18)}
.btn.nActive{background:linear-gradient(90deg,var(--btn), #7a7a7a);box-shadow:0 6px 18px rgba(61, 61, 61, 0.12)}
.btn.nActive:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(65, 65, 65, 0.18)}
.btn:active{transform:translateY(0) scale(.99)}

/* ----- фон, панели, размеры текста/картинок, elisia scatter ----- */
.bg-image{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:65vh;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:translateY(30%);
  transition:transform .9s cubic-bezier(.22,.9,.41,1),opacity .7s;
  z-index:100; /* ниже героя */
}
.bg-image.visible{ opacity:1; transform:translateY(0); }

/* Панели: центр по X и Y; slide-up и slide-down анимации */
/* панели сделали темнее: темный стеклянный фон (сохранили noise) */
.panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,110%);
  width:100%;
  max-width:1200px;
  height:75vh;
  border-radius:12px;
  background: rgba(6,6,8,0.66); /* темнее */
  backdrop-filter:blur(8px);
  box-shadow:0 24px 80px rgba(0,0,0,0.8);
  opacity:0;
  transition:transform .65s cubic-bezier(.22,.9,.41,1),opacity .45s;
  pointer-events:auto;
  z-index:1200;
  /* noise + subtle overlay kept */
  background-image: url('../img/noise.png'), linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.12));
  background-blend-mode:overlay;
  overflow:hidden;
}
.panel.visible{ transform:translate(-50%,-50%); opacity:1; }
.panel.slide-up{ transform:translate(-50%,-220%); opacity:0; }
.panel.slide-down{ transform:translate(-50%,120%); opacity:0; }

/* Panel inner layout: icon top-left (absolute), text below icon for standard panels */
/* We place icon in the left column but ensure text starts below it */
.panel .panel-inner{ display:flex; gap:28px; align-items:flex-start; padding:36px; height:100%; position:relative; }
.panel .panel-left{ flex:0 0 160px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; position:relative; top:0; left:0; }
.panel .panel-icon{ margin-top: 50px; width:128px; height:128px; object-fit:cover; }

/* Default: text starts below icon (so icon visually top-left, text lower) */
.panel .panel-right{ flex:1; padding-top:108px; }
.panel .panel-text{ font-size: clamp(1.05rem, 1.9vw, 1.7rem); line-height:1.6; color:var(--text); margin:50px; }
.panel .elisia-text{ font-size: clamp(1.05rem, 1.9vw, 1.7rem); line-height:1.6; color:var(--text); margin:50px; }

/* nicer Назад button */
.panel .panel-close{
  position:absolute; left:18px; top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  z-index:1250;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.panel .panel-close:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.45); }

/* Elisia panel: keep image left and text to the right (no text padding-top) */
.panel-elisia .panel-inner{ display:flex; align-items:center; gap:40px; padding:36px; }
.panel-elisia .panel-left{ flex:0 0 260px; }
.panel-elisia .panel-right{ padding-top:0; }

/* Elisia main & background images */
.panel-elisia .elisia-img { max-width:260px; width:100%; height:auto; object-fit:contain; border-radius:10px; }
.panel-elisia .elisia-bg{ position:absolute; inset:0; pointer-events:none; }
/* child imgs get positioning and will be rotated by JS */
.panel-elisia .elisia-bg img{ position:absolute; width:90px; height:auto; object-fit:contain; opacity:0.12; filter: blur(1px); transform-origin:center center; }


/* mobile menu */
.mobile-menu{
  position:fixed; right:16px; top:90px; width:88%; max-width:360px; border-radius:14px; padding:18px;
  transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:transform .22s ease,opacity .18s; z-index:1400; display:none;
  background:rgba(255,255,255,0.02); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.04);
}
.mobile-menu.visible{ display:block; transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.mobile-menu .mobile-menu-close{ position:absolute; right:12px; top:10px; background:transparent; border:0; color:var(--text); font-size:20px }
.mobile-menu-nav{ display:flex; flex-direction:column; gap:8px; margin-top:18px }
.mobile-nav-btn{ padding:12px; border-radius:10px; border:0; background:transparent; color:var(--text); text-align:left }

/* Footer */
.site-footer{ padding:20px 5vw; position:relative; z-index:10 }
.footer-inner{ max-width:1100px; margin:0 auto; display:flex; justify-content:space-between }

/* Когда навигация показана, панели опускаются ниже, чтобы не заходить под неё */
.panel.with-nav{
  top: calc(50% + var(--nav-height) / 2);
  transform: translate(-50%,-50%); /* keep center transform */
}
/* Обеспечим, что нав. панель всегда выше панелей */
.top-nav{ z-index:4000; }
.panel{ z-index:1200; }

/* Responsive adjustments */
@media (max-width:1000px){
  .hero-inner{ flex-direction:column }
  .logo-wrap{ height:40vh }
  .panel{ height:65vh }
  .panel .panel-text{ font-size:1.4rem; margin-top: -10px; }
  .panel .elisia-text{ font-size: 1.4rem;}
}


/* Slightly larger panel text on small screens and adjust panel-left on small */
@media (max-width:900px){
  .panel .panel-text{ font-size:1.3rem; margin-top: 10px; }
  .panel .elisia-text{ font-size: 1.2rem; margin-top: -10px;}
  .panel .panel-left{ flex:0 0 110px; }
  .panel .panel-right{ padding-top:82px; }
  /* elisia panel stack for mobile */
  .panel-elisia .panel-inner{ flex-direction:column; align-items:center; text-align:center; }
  .panel-elisia .panel-left{ flex:0 0 auto; margin-bottom:12px; }
  .panel-elisia .panel-right{ padding-top:0; }

}

@media (max-width:700px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:18px; padding:18px }
  .panel .panel-left{ flex:0 0 90px }
  .panel .panel-text{ font-size:1.25rem; margin-top: -10px; }
  .panel .elisia-text{ font-size: 1.2rem; margin-top: -10px;}
}

@media (max-width:610px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:18px; padding:18px }
  .panel .panel-left{ flex:0 0 90px }
  .panel .panel-text{ font-size:1rem; margin-top: 10px; }
  .panel .elisia-text{ font-size: 1.2rem; margin-top: -10px;}
}

@media (max-width:520px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:18px; padding:18px }
  .panel .panel-left{ flex:0 0 10px }
  .panel .panel-text{ font-size:1rem; margin-top: -50px; }
  .panel .elisia-text{ font-size: 1.2rem; margin-top: -10px;}
  .panel .panel-icon {width:82px; height:82px;}
}

@media (max-width:409px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:18px; padding:18px }
  .panel .panel-left{ flex:0 10 5px }
  .panel .panel-text{ font-size:1rem; margin-top: -50px; }
  .panel .elisia-text{ font-size: 1rem; margin-top: -10px;}
  .panel .panel-icon {width:64px; height:64px;}
}

@media (max-width:395px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:9px; padding:18px }
  .panel .panel-left{ flex:0 10 5px }
  .panel .panel-text{ font-size:0.9rem; margin-top: -50px; }
  .panel .elisia-text{ font-size: 0.85rem; margin-top: -10px;}
  .panel .panel-icon {width:64px; height:64px;}
}

@media (max-width:360px){
  .title{ font-size:20px }
  .logo-wrap img{ max-width:95% }
  .panel{ border-radius:14px; padding:12px }
  .panel .panel-inner{ gap:9px; padding:18px }
  .panel .panel-left{ flex:0 10 5px }
  .panel .panel-text{ font-size:0.8rem; margin-top: -50px; }
  .panel .elisia-text{ font-size: 0.85rem; margin-top: -10px;}
  .panel .panel-icon {width:64px; height:64px;}
}
/* SUPPORT: pushed / with-nav / slide-down behaviors for panel stacking */

/* pushed = panel moved up but kept in DOM so it can be restored */
.panel.pushed{
  transform: translate(-50%,-220%);
  opacity: 0;
  transition: transform .65s cubic-bezier(.22,.9,.41,1), opacity .45s;
}

/* visible = center position (already in main CSS), ensure transition present */
.panel.visible{
  transform: translate(-50%,-50%);
  opacity: 1;
  transition: transform .65s cubic-bezier(.22,.9,.41,1), opacity .45s;
}

/* slide-down used when hiding a panel (move down off-screen) */
.panel.slide-down{
  transform: translate(-50%,120%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.9,.41,1), opacity .32s;
}

/* ensure panels shift down if nav is visible (doesn't overlap nav) */
.panel.with-nav{
  top: calc(50% + var(--nav-height) / 2);
  /* transform manipulations managed by other classes (visible/pushed) */
}

/* make sure nav sits above panels */
.top-nav{ z-index:4000; }
.panel{ z-index:1200; }

/* nicer Назад button */
.panel .panel-close{
  position:absolute; 
  left:18px; 
  top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  z-index:9999; /* УВЕЛИЧЕН z-index */
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  pointer-events: auto; /* Явно включаем клики */
}
.panel .panel-close:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 8px 20px rgba(0,0,0,0.45); 
}

/* Кнопка "Вперёд" (справа) */
.panel .panel-next{
  position:absolute; 
  right:18px; 
  top:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  z-index:9999; /* УВЕЛИЧЕН z-index */
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  pointer-events: auto; /* Явно включаем клики */
}
.panel .panel-next:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 8px 20px rgba(0,0,0,0.45); 
}

/* Скрываем кнопку "Вперёд" на последней панели */
.panel:last-of-type .panel-next {
  display: none;
}