/* Atlas technologies - multi-page site (HTML/CSS/JS)
   Palette: bg #F5F7FA, text #1A1A1A, accent soft blue/green
*/
:root{
  --bg:#F5F7FA; --text:#1A1A1A;
  --muted:rgba(26,26,26,.70); --muted2:rgba(26,26,26,.55);
  --card:rgba(255,255,255,.92); --card2:rgba(255,255,255,.86);
  --border:rgba(26,26,26,.10);
  --shadow:0 12px 32px rgba(14,30,37,.10);
  --shadow2:0 18px 48px rgba(14,30,37,.12);
  --r:14px; --r2:18px;
  --accentA:#4BB3FD; --accentB:#56D38E;
  --accentG:linear-gradient(135deg, rgba(75,179,253,.95), rgba(86,211,142,.95));
  --glass:rgba(245,247,250,.90);
  --glassBorder:rgba(26,26,26,.12);
  --maxW:1160px;
  --focus:rgba(75,179,253,.55);
  --bad:rgba(255,87,87,.85);

  --storyRatio: 13 / 20; /* 520×800 */
  --afishaRatio: 13 / 20; /* 520×800 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{text-decoration:none}
.bg{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.bg::before{content:"";position:absolute;width:900px;height:900px;left:-320px;top:-360px;background:radial-gradient(circle at 35% 35%, rgba(75,179,253,.22), transparent 60%);filter:blur(12px)}
.bg::after{content:"";position:absolute;width:920px;height:920px;right:-360px;bottom:-420px;background:radial-gradient(circle at 40% 40%, rgba(86,211,142,.22), transparent 60%);filter:blur(12px)}
.noise{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.container{width:min(var(--maxW), calc(100% - 40px));margin:0 auto}
.section{padding:72px 0}
.section.small{padding:46px 0}
.grid{display:grid;gap:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:var(--glass);border-bottom:1px solid var(--glassBorder);box-shadow:0 10px 24px rgba(14,30,37,.06)}
.header .inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandMark{width:42px;height:42px;border-radius:14px;background:var(--accentG);box-shadow:0 12px 24px rgba(14,30,37,.10);display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:-0.02em}
.brandText{line-height:1.05}
.brandTitle{font-weight:900;letter-spacing:-0.02em}
.brandSub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:flex;align-items:center;gap:10px;position:relative}
.nav a{font-size:13px;font-weight:800;color:rgba(26,26,26,.78);padding:10px 10px;border-radius:12px;text-decoration:none}
.nav a:hover{background:rgba(26,26,26,.05)}
.nav a.active{background:rgba(75,179,253,.10);color:rgba(26,26,26,.90);border:1px solid rgba(75,179,253,.20)}
.navToggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.70)}
.navPanel{display:flex;align-items:center;gap:10px}
.headerActions{display:flex;gap:10px;align-items:center}
.btn{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.78);border-radius:14px;padding:11px 14px;font-weight:900;font-size:13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:focus{outline:2px solid var(--focus);outline-offset:2px}
.btnPrimary{background:var(--accentG);border-color:rgba(26,26,26,.10);color:#fff}
.btnGhost{background:rgba(255,255,255,.70)}
.btnSmall{padding:9px 12px;border-radius:12px;font-size:12px}
.a11yToggle{border-radius:14px;padding:11px 12px;border:1px solid var(--border);background:rgba(255,255,255,.78);font-weight:900;cursor:pointer}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow)}
.card.pad{padding:16px}
.card.soft{background:var(--card2)}
.card.slim{box-shadow:0 10px 22px rgba(14,30,37,.08)}
.kicker{font-size:12px;font-weight:1000;color:rgba(26,26,26,.62);letter-spacing:.02em;text-transform:uppercase}
.h1{font-size:clamp(28px, 3.2vw, 44px);letter-spacing:-0.03em;margin:0}
.h2{font-size:clamp(22px, 2.2vw, 32px);letter-spacing:-0.02em;margin:0}
.h3{font-size:16px;letter-spacing:-0.01em;margin:0;font-weight:1000}
.p{color:var(--muted);margin:10px 0 0}
.lead{font-size:15px;color:rgba(26,26,26,.74);margin:12px 0 0}
.hero{padding:44px 0 26px}
.heroGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.heroBadgeRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badge{border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.70);padding:8px 10px;font-size:12px;font-weight:900;color:rgba(26,26,26,.72)}
.heroMedia{overflow:hidden}
.heroMedia img{width:100%;height:100%;min-height:340px;object-fit:cover}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.catalogGrid{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.posterCard{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.92);box-shadow:0 10px 22px rgba(14,30,37,.08);transition:transform .14s ease, box-shadow .14s ease}
.posterCard:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.posterCard img{width:100%;aspect-ratio:2/3;object-fit:cover}
.posterMeta{padding:12px}
.posterTitle{font-weight:1000;font-size:13px;letter-spacing:-0.01em}
.posterDesc{margin-top:4px;color:var(--muted2);font-size:12px}
.icon80{width:80px;height:80px;border-radius:20px;overflow:hidden}
.featureGrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.feature{display:flex;gap:12px;align-items:flex-start;padding:16px}
.feature p{margin:6px 0 0;color:var(--muted);font-size:13px}
.peopleGrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.person{padding:16px;display:flex;gap:12px;align-items:flex-start}
.avatar{width:78px;height:78px;border-radius:16px;overflow:hidden;border:1px solid var(--border);flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}
.personMeta{flex:1}
.personName{font-weight:1000}
.personRole{margin-top:2px;color:var(--muted);font-size:13px}
.personContacts{margin-top:10px;font-size:12px;color:var(--muted2);display:grid;gap:4px}
.tagRow{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:900;padding:6px 8px;border-radius:999px;background:rgba(75,179,253,.10);border:1px solid rgba(75,179,253,.18);color:rgba(26,26,26,.78)}
.docGrid{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px}
.docItem{padding:14px;display:flex;gap:12px;align-items:flex-start}
.docIcon{width:64px;height:64px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff;flex:0 0 auto}
.docIcon img{width:100%;height:100%;object-fit:cover}
.docTitle{font-weight:1000}
.docText{margin-top:6px;color:var(--muted);font-size:13px}
.docActions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.field{display:grid;gap:6px}
.field label{font-size:12px;font-weight:1000;color:rgba(26,26,26,.70)}
.input, select, textarea{border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.85);padding:11px 12px;font-size:14px;outline:none}
textarea{resize:vertical;min-height:120px}
.input:focus, select:focus, textarea:focus{border-color:rgba(75,179,253,.45);box-shadow:0 0 0 4px rgba(75,179,253,.12)}
.newsGrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.newsCard{overflow:hidden}
.newsCard img{width:100%;height:180px;object-fit:cover}
.newsBody{padding:14px}
.newsTitle{font-weight:1000}
.newsMeta{margin-top:6px;color:var(--muted2);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
.newsText{margin-top:10px;color:var(--muted);font-size:13px}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkRow{display:flex;gap:10px;align-items:flex-start;margin-top:10px;color:rgba(26,26,26,.78);font-size:13px}
.helpText{margin-top:8px;color:var(--muted2);font-size:12px}
.honeypot{display:none}
.footer{margin-top:50px;border-top:1px solid var(--glassBorder);background:var(--glass);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 -10px 22px rgba(14,30,37,.06)}
.footer .inner{padding:22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer small{color:var(--muted2)}
.footerLinks{display:flex;gap:10px;flex-wrap:wrap;color:rgba(26,26,26,.78);font-weight:900;font-size:13px}
.fab{position:fixed;right:18px;bottom:18px;z-index:90}
.fabBtn{width:54px;height:54px;border-radius:18px;border:1px solid rgba(26,26,26,.12);background:var(--accentG);color:#fff;font-weight:1000;cursor:pointer;box-shadow:var(--shadow2)}
.fabMenu{position:absolute;right:0;bottom:66px;width:260px;padding:10px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.92);box-shadow:var(--shadow2);display:none;gap:8px}
.fabMenu a,.fabMenu button{width:100%;text-align:left;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.90);padding:10px 12px;font-weight:1000;cursor:pointer;display:flex;gap:10px;align-items:center;text-decoration:none}
.fabMenu a:hover,.fabMenu button:hover{background:rgba(26,26,26,.04)}
.fabMenu .muted{font-weight:900;color:rgba(26,26,26,.70)}
.modal{position:fixed;inset:0;display:none;z-index:120}
.modalBack{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modalBody{position:relative;width:min(620px, calc(100% - 28px));margin:90px auto;background:rgba(255,255,255,.95);border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow2);padding:16px}
.modalTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modalTitle{font-weight:1000;letter-spacing:-0.02em}
.modalClose{width:40px;height:40px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.90);cursor:pointer;font-size:18px;line-height:0}
.modalText{margin-top:10px;color:var(--muted)}
.modalActions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
body.a11y{font-size:18px;background:#fff}
body.a11y .bg{display:none}
body.a11y .header, body.a11y .footer{background:#fff;backdrop-filter:none}
body.a11y .card, body.a11y .posterCard, body.a11y .newsCard{box-shadow:none;border-color:rgba(0,0,0,.22)}
body.a11y a{text-decoration:underline}
@media (max-width:1040px){
  .heroGrid{grid-template-columns:1fr}
  .catalogGrid{grid-template-columns:repeat(3, 1fr)}
  .featureGrid{grid-template-columns:1fr}
  .peopleGrid{grid-template-columns:repeat(2, 1fr)}
  .docGrid{grid-template-columns:1fr}
  .newsGrid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:760px){
  .container{width:min(var(--maxW), calc(100% - 28px))}
  .catalogGrid{grid-template-columns:repeat(2, 1fr)}
  .peopleGrid{grid-template-columns:1fr}
  .newsGrid{grid-template-columns:1fr}
  .formGrid{grid-template-columns:1fr}
  .navToggle{display:inline-flex;align-items:center;justify-content:center}
  .navPanel{display:none;position:fixed;left:14px;right:14px;top:calc(72px + env(safe-area-inset-top));width:auto;max-height:calc(100vh - 92px);overflow:auto;padding:10px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.98);box-shadow:var(--shadow2);flex-direction:column;align-items:stretch}
}
/* FIX v2: stronger mobile behavior + chips */
a.btn{display:inline-flex}
.heroBadgeRow{gap:8px}
.badge{white-space:normal; line-height:1.25; max-width:100%}
@media (max-width:760px){
  .headerActions{display:none}
  .navPanel{
    position:fixed;
    left:14px; right:14px;
    top:78px;
    max-height: calc(100vh - 100px);
    overflow:auto;
    z-index: 200;
  }
  .navPanel.is-open{display:flex}
  .navBackdrop{
    position:fixed;
    pointer-events:auto;
    inset:0;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 40;
    display:none;
  }
  .navBackdrop.is-open{display:block}
  .heroBadgeRow{margin-top:12px}
  .badge{font-size:11px; padding:7px 9px}
  .heroActions{margin-top:14px}
}

.docIcon{background: rgba(255,255,255,.9);}
.icon80{background: rgba(255,255,255,.9);}


/* Afisha slider on main page */
.afishaHead{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.afishaWrap{
  position: relative;
  margin-top: 14px;
}
.afishaSlider{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  align-items: stretch;
}
.afishaSlider::-webkit-scrollbar{height: 8px;}
.afishaSlider::-webkit-scrollbar-thumb{background: rgba(26,26,26,.18); border-radius: 999px;}
.afishaSlide{
  flex: 0 0 clamp(150px, 12vw, 190px);
  scroll-snap-align: start;
}
.sliderBtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  font-weight: 1000;
  color: rgba(26,26,26,.80);
}
.sliderBtn.prev{
  position:absolute;
  left: -6px;
  top: 50%;
  transform: translate(-40%, -50%);
}
.sliderBtn.next{
  position:absolute;
  right: -6px;
  top: 50%;
  transform: translate(40%, -50%);
}

@media (max-width: 760px){
  .sliderBtn{ display:none; }
  .afishaSlide{ flex: 0 0 clamp(170px, 64vw, 220px); }
}



/* Afisha slide typography tweaks */
.afishaSlide .posterMeta{padding: 10px 10px 12px;}
.afishaSlide .posterTitle{font-size: 12.5px; font-weight: 1000;}
.afishaSlide .posterDesc{font-size: 11px; color: var(--muted2);}

/* Story-like media slot (adaptive 520×800 / 13:20). Any image/video is centered and cropped if needed. */
.mediaFrame{position:relative;width:100%;height:100%;}
.cropHint{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.90);
  color: rgba(26,26,26,.78);
  font-size: 12px;
  font-weight: 900;
  max-width: calc(100% - 24px);
}

/* Afisha posters use 520×800 ratio. Catalog posters remain 2:3. */
.afishaSlide img{aspect-ratio: var(--afishaRatio);}

/* Story-like media slot (adaptive 520×800 / 13:20). Any image/video is centered and cropped if needed. */
.storyMedia{overflow:hidden; aspect-ratio: var(--storyRatio);}
.storyMedia .mediaEl, .storyMedia img, .storyMedia video{width:100%;height:100%;object-fit:cover;display:block;object-position:center}

/* Hero media should not dominate the first screen. Keep 520×800 ratio, but show it компактнее. */
.heroMedia.storyMedia{
  max-width: clamp(260px, 22vw, 340px);
  width: 100%;
  margin-left: auto;
}
@media (max-width:1040px){
  .heroMedia.storyMedia{ max-width: 420px; margin: 0 auto; }
}

/* iOS/Android hardening */
html{ -webkit-text-size-adjust: 100%; }
body{ overflow-x: hidden; }

/* Safe areas for iPhone */
.header{ padding-top: env(safe-area-inset-top); }
.fab{ right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }

/* Blur fallback */
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))){
  .header, .footer{ background: rgba(245,247,250,.98); }
  .navBackdrop{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Smooth horizontal swipe on iOS */
.afishaTrack{ -webkit-overflow-scrolling: touch; }