/* ========== Global Temel ========== */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.ttf") format("truetype");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

:root{
  --atlas-bg:#0b0e14;
  --atlas-card:#121725;
  --atlas-text:#e9f1ff;
  --atlas-dim:#a6b0c3;
  --atlas-green:#11c770;
  --atlas-violet:#6c3bff;
  --atlas-orange:#ff7a1a;
  --atlas-border:#23314f;
  --radius-xl:18px;
  --radius-2xl:26px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --shadow-float:0 14px 40px rgba(0,0,0,.45);

  /* для компактного поповера */
  --hdr-h:64px;           /* если JS не обновит, будет 64px */
  --menu-x:92vw;
  --menu-y:24px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(108,59,255,.18), transparent),
    radial-gradient(900px 700px at 90% 10%, rgba(17,199,112,.18), transparent),
    var(--atlas-bg);
  color:var(--atlas-text);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* Erişilebilirlik */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Links */
a{ color:var(--atlas-green); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Images: ≤350px */
img{
  display:block;
  width:100%; height:auto;
  max-width:350px;
  border-radius:var(--radius-xl);
}

/* Container */
.sa-wrap{ width:min(1120px,92vw); margin:0 auto; }

/* ========== Header (sticky) ========== */
.sa-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background:rgba(11,14,20,.65);
  border-bottom:1px solid var(--atlas-border);
}
.sa-header__inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:14px 20px;
}
.sa-logo{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px; color:var(--atlas-text);
}
.sa-logo strong{
  font-family:"Archivo",sans-serif; letter-spacing:.3px; font-size:18px;
  background:linear-gradient(90deg,var(--atlas-green),var(--atlas-violet),var(--atlas-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sa-logo__dot{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--atlas-green));
  box-shadow:0 0 24px var(--atlas-green);
}

/* Desktop nav */
.sa-nav ul{ display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.sa-nav a{
  display:inline-block; padding:8px 10px; border-radius:10px; color:var(--atlas-text);
  transition:transform .2s ease, background-color .2s ease;
}
.sa-nav a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.06); }
.sa-nav a.is-active{ background:rgba(108,59,255,.18); }

/* ========== Unique Stadium Burger ========== */
.sa-burger{
  display:none; position:relative;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--atlas-border);
  background:
    radial-gradient(18px 18px at 65% 30%, rgba(255,255,255,.18), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
  cursor:pointer;
}
.sa-burger:focus-visible{ outline:2px solid var(--atlas-violet); outline-offset:2px; }

/* lanes */
.sa-burger__lane{
  position:absolute; left:50%; top:50%;
  width:22px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--atlas-violet),var(--atlas-orange));
  transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.sa-burger__lane:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
.sa-burger__lane:nth-child(2){ transform:translate(-50%,-50%) translateY(0); }
.sa-burger__lane:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }

/* ball */
.sa-burger__ball{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--atlas-orange); box-shadow:0 0 10px var(--atlas-orange);
  left:50%; top:50%; transform:translate(-50%, -50%) translate(-12px,10px) scale(1);
  opacity:0; pointer-events:none;
}

/* open state */
.sa-burger.is-open .sa-burger__lane:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.sa-burger.is-open .sa-burger__lane:nth-child(2){ transform:translate(-50%,-50%) scaleX(0); opacity:0; }
.sa-burger.is-open .sa-burger__lane:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }
.sa-burger.is-open .sa-burger__ball{ opacity:1; animation:sa-dribble .8s cubic-bezier(.2,.8,.2,1) infinite; }

@keyframes sa-dribble{
  0%{   transform:translate(-50%,-50%) translate(-10px,10px) scale(1); }
  50%{  transform:translate(-50%,-50%) translate(0,-6px)    scale(.92); }
  100%{ transform:translate(-50%,-50%) translate(10px,10px) scale(1); }
}

/* ========== Compact Popover Menu (top-right) ========== */
.sa-mobile{
  position:fixed; right:16px;
  top:calc(var(--hdr-h,64px) + 10px);
  z-index:40;

  width:min(320px,92vw);
  max-height:calc(100vh - var(--hdr-h,64px) - 24px);
  overflow:auto;

  background:
    radial-gradient(260px 120px at 80% 0%, rgba(108,59,255,.20), transparent 60%),
    radial-gradient(260px 140px at 20% 0%, rgba(17,199,112,.18), transparent 60%),
    rgba(9,12,18,.96);
  border:1px solid var(--atlas-border);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);

  transform-origin:100% 0%;
  transform:scale(.92) translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility 0s linear .22s;
}

/* arrow to the button */
.sa-mobile::before{
  content:"";
  position:absolute; top:-8px; right:20px;
  width:14px; height:14px;
  background:inherit;
  border-left:1px solid var(--atlas-border);
  border-top:1px solid var(--atlas-border);
  transform:rotate(45deg);
  border-radius:3px 0 0 0;
}

.sa-mobile.is-open{
  transform:scale(1) translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

/* links */
.sa-mobile__nav{ display:grid; gap:10px; padding:14px; }
.sa-mobile__nav a{
  display:block; padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--atlas-border); color:var(--atlas-text);
  transform:translateY(6px); opacity:0;
  transition:transform .25s ease, opacity .25s ease, filter .2s ease;
}
.sa-mobile__nav a:hover{ filter:saturate(1.15); }
.sa-mobile.is-open .sa-mobile__nav a{ transform:none; opacity:1; }
.sa-mobile.is-open .sa-mobile__nav a:nth-child(1){ transition-delay:.03s; }
.sa-mobile.is-open .sa-mobile__nav a:nth-child(2){ transition-delay:.06s; }
.sa-mobile.is-open .sa-mobile__nav a:nth-child(3){ transition-delay:.09s; }
.sa-mobile.is-open .sa-mobile__nav a:nth-child(4){ transition-delay:.12s; }
.sa-mobile.is-open .sa-mobile__nav a:nth-child(5){ transition-delay:.15s; }

/* ========== Sections / reveal / CTA ========== */
.sa-section{ padding:68px 0; position:relative; }

.reveal [data-reveal]{ opacity:0; transform:translateY(12px) scale(.98); }
.reveal.is-visible [data-reveal]{
  opacity:1; transform:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}

.sa-cta-row{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.sa-cta{
  display:inline-block; padding:12px 16px; border-radius:12px;
  background:linear-gradient(90deg,var(--atlas-green),var(--atlas-violet));
  color:#0b0e14; font-weight:700; box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.sa-cta:hover{ transform:translateY(-2px); filter:saturate(1.2); box-shadow:var(--shadow-float); }
.sa-cta--ghost{ background:transparent; color:var(--atlas-text); border:1px solid var(--atlas-border); }

/* ========== Footer ========== */
.sa-footer{ border-top:1px solid var(--atlas-border); background:rgba(255,255,255,.02); }
.sa-footer__grid{ display:grid; grid-template-columns:1fr auto; gap:18px; padding:26px 20px; }
.sa-footer nav{ display:flex; flex-wrap:wrap; gap:12px; }
.sa-footer nav a{
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04);
  border:1px solid var(--atlas-border); color:var(--atlas-text);
}

/* ========== Responsive ========== */
@media (max-width:1000px){
  .sa-nav{ display:none; }
  .sa-burger{ display:inline-grid; }
}
@media (max-width:720px){
  .sa-header__inner{ grid-template-columns:auto auto auto; }
  .sa-footer__grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .sa-mobile{ right:10px; width:min(92vw,320px); }
  .sa-mobile::before{ right:16px; }
}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .sa-burger__ball{ display:none; }
}
/* Хедер растягиваем и центрируем содержимое */
.sa-header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;

  width: min(1200px, 98vw);   /* добавлено */
  margin: 0 auto;             /* добавлено */
  position: relative;         /* на всякий случай для позиционирования */
}

/* Бургер — принудительно в правый угол */
.sa-burger{
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  /* ...остальные твои стили кнопки... */

  justify-self: end;          /* добавлено: при grid — вправо */
  margin-left: auto;          /* добавлено: страхует в Safari */
}

/* На мобильных показываем бургер, а не меню */
@media (max-width: 1000px){
  .sa-nav{ display: none; }
  .sa-burger{ display: inline-grid; }  /* видно и справа */
}
/* FIXED header */
.sa-header{
  position: fixed;            /* было: sticky */
  top: 0; left: 0; right: 0;
  z-index: 100;               /* выше контента и поповера */
  backdrop-filter: saturate(130%) blur(10px);
  background: rgba(11,14,20,0.65);
  border-bottom: 1px solid var(--atlas-border);
}

/* чтобы контент не оказался под хеддером */
body{
  margin: 0;
  padding-top: var(--hdr-h, 64px);   /* отступ равен высоте хедера */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(108,59,255,.18), transparent),
    radial-gradient(900px 700px at 90% 10%, rgba(17,199,112,.18), transparent),
    var(--atlas-bg);
  color: var(--atlas-text);
  font-family: "Manrope",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* поповер уже использует var(--hdr-h): */
.sa-mobile{
  top: calc(var(--hdr-h,64px) + 10px);
}
/* ===== GLOBAL CENTERING FIX ===== */
:root{
  --container-max: 1180px;
  --container-pad: 16px;
}

/* Единый контейнер для всех страниц */
.sa-header__inner,
.sa-wrap,
.ha-wrap,
.kr-wrap{
  box-sizing: border-box;
  width: min(var(--container-max), 100% - var(--container-pad)*2);
  margin-inline: auto !important;        /* принудительно по центру */
  padding-inline: var(--container-pad);
}

/* На всякий случай: сцены внутри секций тоже центрируем */
.kr-section .arch-stage,
.kr-section .snap-rail,
.kr-section .mosaic-board,
.kr-section .bridge-stage,
.kr-section .fold-stage,
.kr-section .orbit-stage,
.kr-section .strap-stage,
.kr-section .spiral-board,
.ha-section .metro-board,
.ha-section .weave-grid,
.ha-section .topo-stage,
.ha-section .tier-track,
.ha-section .legend-board{
  margin-inline: auto;
}

/* Центрируем футерный wrap */
.sa-footer .sa-wrap{ 
  width: min(var(--container-max), 100% - var(--container-pad)*2);
  margin-inline: auto !important;
  padding-inline: var(--container-pad);
}

/* Убираем возможный горизонтальный скролл из-за теней/эффектов */
html, body{ overflow-x: hidden; }