:root {
  --bg: #0f1226;
  --card: #ffffff;
  --text: #0f1226;
  --muted: #6b7280;
  --ring: #6366f1;
  --border: rgba(2,6,23,.08);
  --icons-tile: url("logo/icon-tile.svg");
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    var(--icons-tile),
    radial-gradient(1000px 500px at 70% -10%, rgba(59,130,246,.45) 0%, rgba(59,130,246,0) 60%),
    radial-gradient(900px 450px at -10% 110%, rgba(139,92,246,.45) 0%, rgba(139,92,246,0) 60%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 64px 64px, 1000px 500px, 900px 450px;
  background-position: 0 0, 70% -10%, -10% 110%;
  padding: 5px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.content { width: 400px; max-width: 90vw; }

/* ===== ШАПКА ===== */
.header-wrap { position: sticky; top: 0; z-index: 50; margin-bottom: 14px; }
.site-header {
  display:flex; justify-content:space-between; align-items:center;
  background: #fff;
  padding:8px 14px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(0);
  will-change: transform, background-color, box-shadow;
  backdrop-filter: saturate(130%) blur(4px);
}
.logo { display: flex; align-items: center; }
.logo svg{ stroke:#ca0e0e; }
.logo img { width: 40px; height: 40px; }
.title { display:flex; align-items:center; gap:6px; font-size:22px; font-weight:700; color:#0c1f9f; }
.title svg{ stroke:#aeee24; }

/* Меню */
.menu-wrap{ position:relative; }
.menu-btn{ background:none; border:none; cursor:pointer; padding:4px; border-radius:8px; position: relative; display:inline-flex; align-items:center; justify-content:center; }
.menu-btn svg{ stroke:#000; }
.menu-btn:hover svg{ stroke:#000; }
.menu-btn .icon{ transition: opacity .18s ease, transform .18s ease; }
.menu-btn .icon-close{ opacity:0; position:absolute; transform: rotate(-90deg) scale(.9); }
.menu-btn[aria-expanded="true"] .icon-burger{ opacity:0; transform: rotate(90deg) scale(.9); }
.menu-btn[aria-expanded="true"] .icon-close{ opacity:1; transform: rotate(0deg) scale(1); }

/* Выпадающее меню */
.dropdown-menu{
  position:absolute; top: calc(100% - 45px); right: 30px;
  background:#fff; border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.2);
  min-width: 180px; z-index:100; overflow: hidden;
  transform: translateX(16px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .18s ease-out, opacity .18s ease-out, visibility 0s linear .18s;
}
.dropdown-menu.open{ visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(0); transition: transform .18s ease-out, opacity .18s ease-out, visibility 0s; }
.dropdown-menu:before{ content:""; position:absolute; top:-6px; right:14px; width:10px; height:10px; background:#fff; border-left:1px solid var(--border); border-top:1px solid var(--border); transform: rotate(45deg) translateY(-1px); }
.dropdown-inner{ padding:6px 0; }
.dropdown-menu a{ display:block; padding:10px 14px; text-decoration:none; color:var(--text); font-size:14px; }
.dropdown-menu a:hover{ background:rgba(2,6,23,.04); }

/* ===== КАРУСЕЛЬ ===== */
.carousel-wrapper{ display:flex; align-items:center; position:relative; justify-content:center; }
.carousel-container{ position:relative; width:100%; height:225px; overflow:hidden; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.5); padding: 10px; }
.carousel-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: opacity .5s ease; }
img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s ease; }
.btn{ background:none; border:none; cursor:pointer; padding:10px; user-select:none; opacity:0; transition:opacity .3s, transform .3s; position:absolute; top:50%; transform:translateY(-50%); z-index:10; }
.carousel-wrapper:hover .btn{ opacity:.7; }
.btn:hover{ opacity:1; }
.btn svg{ fill:white; width:40px; height:40px; transition:fill .3s, transform .3s; }
.btn:hover svg{ fill:#aaa; transform:scale(1.1); }
.btn.prev{ left:-50px; }
.btn.next{ right:-50px; }

.dots{
  display:flex;
  justify-content:center;
  align-items:center;      /* чтобы высота не тянулась по умолчанию */
  margin:5px 0;
  gap:6px;
  background:rgba(255,255,255,.3);
  padding:8px 0;
  border-radius:8px;
}

.dot{
  width:8px;
  height:8px;
  background:gray;
  border-radius:25%;
  cursor:pointer;
  transition:background .3s, transform .2s;

  /* СБРОС UA-СТИЛЕЙ КНОПКИ */
  padding:0;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  background-clip: padding-box; /* на всякий случай */
  line-height:0;
  font-size:0;
}

.dot.active{ background:rgb(255, 255, 255); }
.dot:hover{ transform:scale(1.15); }

/* ===== АККОРДЕОН ===== */
.accordion{ display:flex; flex-direction:column; gap:10px; background: rgba(255,255,255,0.3); padding: 10px; border-radius: 12px; }
.item{ background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.pishu{ background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 10px; padding: 10px; }
.header{ appearance:none; background:transparent; border:0; display:flex; align-items:center; width:100%; padding:12px 16px; cursor:pointer; text-align:left; border-radius:10px; }
.header:hover{ background:rgba(2,6,23,.03); }
.header:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; }
.title-acc{ font-size:16px; font-weight:700; letter-spacing:.2px; }
.spacer{ flex:1; }
.arrow-icon{ width:20px; height:20px; stroke:var(--text); }
.panel{ height:0; overflow:hidden; transition:height .6s ease-in-out; will-change:height; padding-inline:22px; }
.panel-inner{ padding-block:0 12px; color:var(--muted); line-height:1.6; }

/* Footer */
.footer { margin-top: 20px; text-align: center; color: #333; background: rgba(255,255,255,0.3); font-size: 13px; padding: 10px 0; border-radius:10px; }

/* Адаптивность: меньше анимаций */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .dropdown-menu, .dropdown-menu.open{ transform: none !important; }
  .menu-btn .icon{ transition: none !important; transform: none !important; }
}

#carousel { transition: opacity .3s; }
#carousel.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #carousel { transition: none; }
}