:root{
  --bg:#050e2a;
  --bg2:#07153a;
  --panel:#0b2a6a;
  --panel2:#0d347c;
  --stroke:rgba(158,199,255,.18);
  --text:#eef5ff;
  --muted:#9ec7ff;
  --gold:#f5be3c;
  --gold2:#c98a1a;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 75% -15%, rgba(60,130,255,.25), transparent 55%),
    radial-gradient(900px 600px at 20% 120%, rgba(245,190,60,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 18px}

.topbar{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, rgba(10,30,74,.92), rgba(7,17,45,.78));
  border-bottom:1px solid rgba(158,199,255,.12);
  backdrop-filter: blur(10px);
}
.topbar .row{
  height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{
  display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.12em
}
.brand img{height:34px;width:auto;display:block}
.right{
  display:flex;align-items:center;gap:10px;
}
.lang{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border:1px solid rgba(158,199,255,.16);
  background: rgba(10,30,74,.5);
  border-radius:999px;
}
.flag{width:18px;height:18px;border-radius:50%}
.btn{
  border:0;cursor:pointer;color:#07153a;font-weight:800;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  padding:10px 14px;border-radius:12px;
  box-shadow:0 10px 24px rgba(245,190,60,.18);
}
.btn.secondary{
  background: rgba(158,199,255,.08);
  color:var(--text);
  border:1px solid rgba(158,199,255,.18);
  box-shadow:none;
}
.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}

.layout{display:grid;grid-template-columns:1fr;gap:26px;padding:22px 0 44px}
.sidebar{
  position:sticky;top:86px;align-self:start;
}
.sidecard{
  background: linear-gradient(180deg, rgba(11,42,106,.75), rgba(6,14,42,.45));
  border:1px solid rgba(158,199,255,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.nav{
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  border:1px solid rgba(158,199,255,.14);
  background: rgba(8,22,52,.35);
}
.nav a:hover{border-color:rgba(245,190,60,.45);background:rgba(245,190,60,.06)}
.ico{
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  background: rgba(245,190,60,.14);
  border:1px solid rgba(245,190,60,.25);
}
.promo{
  margin-top:14px;padding:18px;
}
.promo h4{margin:0 0 6px;font-size:16px}
.promo p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.promo .arrow{
  margin-top:14px;display:flex;justify-content:flex-end
}
.promo .arrow span{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(158,199,255,.16);
  background: rgba(8,22,52,.35);
}

.main{min-width:0}
.hero{
  background: linear-gradient(180deg, rgba(11,42,106,.62), rgba(6,14,42,.28));
  border:1px solid rgba(158,199,255,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
}
.hero-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.breadcrumbs{color:rgba(245,190,60,.9);font-weight:700;font-size:14px}
.hero-title{font-size:44px;margin:6px 0 0;font-weight:900}
.hero-sub{margin:10px 0 0;color:var(--muted);max-width:58ch;line-height:1.55}
.hero-grid{
  display:block;grid-template-columns:1fr 1.35fr;gap:18px;align-items:stretch;
}
.slider{
  border-radius:22px;overflow:hidden;position:relative;
  background: rgba(8,22,52,.35);
  border:1px solid rgba(158,199,255,.12);
  min-height:340px;
}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.slide-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px;
  background: linear-gradient(180deg, transparent, rgba(6,14,42,.86));
}
.kicker{font-weight:900;letter-spacing:.02em;font-size:28px}
.kicker span{color:var(--gold)}
.slide-overlay p{margin:6px 0 0;color:var(--muted);font-weight:600}
.slider-cta{
  position:absolute;right:16px;bottom:18px;
}
.dots{
  display:flex;justify-content:center;gap:10px;margin:14px 0 6px;
}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(245,190,60,.35);cursor:pointer}
.dot.active{background:var(--gold);box-shadow:0 0 0 4px rgba(245,190,60,.18)}
.pills{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px
}
.pill{
  padding:10px 14px;border-radius:14px;
  border:1px solid rgba(158,199,255,.16);
  background: rgba(8,22,52,.35);
  color:rgba(235,245,255,.9);
  font-weight:700;font-size:14px;
}
.pill:hover{border-color:rgba(245,190,60,.45)}

.section{margin-top:26px}
.section h2{margin:0 0 12px;font-size:30px}
.section .sub{margin:0 0 18px;color:var(--muted);line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  border-radius:22px;overflow:hidden;
  background: rgba(8,22,52,.35);
  border:1px solid rgba(158,199,255,.14);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}
.card img{width:100%;height:240px;object-fit:cover;display:block}
.card .c{
  padding:14px 14px 16px
}
.card .c h3{margin:0 0 6px;font-size:20px}
.card .c p{margin:0 0 12px;color:var(--muted);line-height:1.5;font-size:14px}
.card .c .btn{width:100%}

.slotbar{
  display:flex;align-items:center;gap:14px;justify-content:center;
  padding:12px 14px;border-radius:18px;
  border:1px solid rgba(158,199,255,.14);
  background: rgba(8,22,52,.35);
  margin:8px 0 16px;
}
.slotbar .label{
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(158,199,255,.16);
  background: rgba(8,22,52,.35);
  font-weight:800;
}
.slotgrid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.slot{
  border-radius:22px;overflow:hidden;border:1px solid rgba(158,199,255,.14);
  background: rgba(8,22,52,.35);
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.slot img{width:100%;height:120px;object-fit:cover;display:block}
.article{
  border-radius:22px;
  border:1px solid rgba(158,199,255,.14);
  background: rgba(8,22,52,.35);
  padding:18px;
  line-height:1.8;
}
.article h1{font-size:34px;margin:0 0 10px}
.article h2{font-size:26px;margin:18px 0 8px}
.article h3{font-size:20px;margin:16px 0 8px}
.article p{color:rgba(235,245,255,.92)}
.article ul{margin:10px 0 10px 20px}
.article table{
  width:100%;border-collapse:collapse;margin:12px 0;overflow:hidden;
  border-radius:16px;border:1px solid rgba(158,199,255,.14);
}
.article th,.article td{padding:10px 10px;border-bottom:1px solid rgba(158,199,255,.10)}
.article th{background: rgba(158,199,255,.08);text-align:left}
.article tr:last-child td{border-bottom:0}

.faq{
  border-radius:22px;border:1px solid rgba(158,199,255,.14);
  background: rgba(8,22,52,.35);
  overflow:hidden;
}
.faq-item{border-top:1px solid rgba(158,199,255,.12)}
.faq-item:first-child{border-top:0}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;cursor:pointer;
}
.faq-q span{font-weight:800}
.faq-q button{
  width:34px;height:34px;border-radius:12px;border:1px solid rgba(245,190,60,.35);
  background: rgba(245,190,60,.12);color:var(--gold);font-weight:900;cursor:pointer
}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 16px}
.faq-a p{margin:0;color:var(--muted);padding:0 0 14px;line-height:1.6}
.faq-item.open .faq-a{max-height:220px}
.footer{
  margin-top:28px;
  border-top:1px solid rgba(158,199,255,.12);
  padding:22px 0 26px;
  color:rgba(235,245,255,.86);
}
.footer .footgrid{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.footer .links{display:flex;gap:14px;flex-wrap:wrap;color:rgba(158,199,255,.9);font-weight:700;font-size:13px}
.footer small{color:rgba(158,199,255,.75)}
.mobile-toggle{display:none}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-title{font-size:38px}
  .cards{grid-template-columns:1fr}
  .slotgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){
  .topbar .row{height:auto;padding:10px 0}
  .right .btn.secondary{display:none}
  .hero-title{font-size:32px}
  .slider{min-height:260px}
  .slotgrid{grid-template-columns:repeat(2,1fr)}
}

/* No-sidebar variant */
.sidebar{display:none !important;}

.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table{
  min-width: 720px;        /* або 600-900px під твій контент */
  width:100%;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td{
  white-space: nowrap;     /* якщо треба, щоб колонки не ламались */
}

/* опційно: невидимий “гаттер”, щоб не залипало по краю */
.table-scroll{ padding-bottom: 6px; }