:root{
  --bg: #07060b;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --green: #2cff7c;
  --pink: #ff2dc3;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --max: 1120px;

  --casino-red: 0 85% 50%;

  --goldnes: 45 100% 50%;

  --casino-red: 0 85% 50%;

  --gold-light: 45 100% 65%;

  --gold-dark: 45 100% 35%;

  /*--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;*/
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  /*font-family: var(--font);*/
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{ color: inherit; text-decoration:none; }
.container_cas_up{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/*1*/
/* ================= HERO ================= */
.hero{
  position:relative;
  height: 50vh;
  min-height: 320px;
  max-height: 520px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(255,180,0,.10), transparent 60%),
    url("https://labcd.mx/wp-content/uploads/2026/01/hero-bg.jpg") center/cover no-repeat;
}

.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.70),
    rgba(0,0,0,.50) 40%,
    rgba(0,0,0,.50)
  );
  pointer-events:none;
}

.hero__bottomfade{
  position:absolute; left:0; right:0; bottom:0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.75));
  pointer-events:none;
}

.hero__content{
  position:relative;
  z-index: 2;
  padding: 0;
}

.hero__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
}

/* pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,180,0,.35);
  border-color: hsl(var(--casino-red) / .5);
  /*background: rgba(0,0,0,.30);*/
  /*background-color: hsl(var(--casino-red) / .2);*/
  /*background-color: hsla(0, 0%, 1.2%, 0.2);*/
  background-color: hsla(0, 88.7%, 48.6%, 0.2);
  /*box-shadow: 0 18px 50px rgba(0,0,0,.45);*/
  /*backdrop-filter: blur(10px);*/
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse{0%,to{box-shadow:0 0 20px hsl(var(--goldnes) / .5),0 0 40px hsl(var(--goldnes) / .3)}50%{box-shadow:0 0 30px hsl(var(--goldnes) / .7),0 0 60px hsl(var(--goldnes) / .5)}}

.pill__text{
  font-weight: 600;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: rgba(255,185,0,.95);
  text-transform: uppercase;
}

.pill__icon{
  color: rgba(255,185,0,.95);
  filter: drop-shadow(0 6px 14px rgba(255,185,0,.25));
}

/* badges */
.badges{
  display:flex;
  gap: 55px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.badge{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  /*min-width: 260px;*/
  justify-content:center;
}

.badge__icon{
  width: 24px; height: 24px;
  display:grid;
  place-items:center;
}

.badge__icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.badge__main{
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

.badge__label{
  font-weight: 600;
  letter-spacing: .6px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.badge--green{ color: var(--green); }
.badge--pink{ color: var(--pink); }

/* ================= Responsive ================= */
@media (max-width: 520px){
  .container_cas_up{ width: min(var(--max), calc(100% - 26px)); }

  .hero{
    height: 26vh;
    min-height: 320px;
    max-height: 520px;
    background-position: center top;
  }

  .hero__stack{
    transform: translateY(0);
  }

  .pill{
    padding: 6px 4px;
/*    border: 1px solid rgba(255,185,0,.55);
    background: rgba(0,0,0,.35);*/
  }

  .pill__text{
    font-size: 12px;
    letter-spacing: 1px;
  }

  .hero__stack{
/*    gap: 14px;
    transform: translateY(-6px);*/
  }

  .badges{
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
  }

  .badge{
    /*width: 100%;*/
    max-width: 280px;
    min-width: 0;
    /*padding: 14px 16px;*/
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
    border: 1px solid rgba(255,255,255,.14);
  }

  .badge__main{ font-size: 26px; }
  .badge__label{ font-size: 13px; letter-spacing: .4px; }
  .badge__icon svg{ width: 20px; height: 20px; }

  .badge--green{
    box-shadow: 0 0 0 1px rgba(44,255,124,.25),
                0 12px 40px rgba(0,0,0,.6);
  }

  .badge--pink{
    box-shadow: 0 0 0 1px rgba(255,45,195,.25),
                0 12px 40px rgba(0,0,0,.6);
  }
}

/*2*/
/* ================= TOP CASINOS ================= */
:root{
  --gold: rgba(255,185,0,.95);
  --gold2: rgba(255,185,0,.35);
  --panel: rgba(0,0,0,.55);
  --panel2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
}

.casinos{
  padding: 34px 0 46px;
  background: radial-gradient(900px 450px at 50% 10%, rgba(255,185,0,.10), transparent 60%);
}

.casinos__head{
  text-align:center;
  margin: 0 0 18px;
}

.casinos__title{
  margin: 0;
  font-size: clamp(24px, 2.4vw, 42px);
  letter-spacing: .8px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 18px 50px rgba(0,0,0,.55);

/*  background: linear-gradient(90deg,hsl(var(--gold-dark)),hsl(var(--gold-light)),hsl(var(--gold-dark)));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s linear infinite;*/
}

@keyframes text-shimmer{0%{background-position:-200% center}to{background-position:200% center}}

.casinos__sub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
  font-weight: 400;
  font-size: 15px;
}

.casinos__frame{
  border-radius: 18px;
  /*border: 1px solid rgba(255,185,0,.20);*/
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.25));
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  padding: 16px;
}

/* shared card */
.casino{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,185,0,.22);
  /*background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));*/
  background: linear-gradient(145deg,#1f1f1f,#141414);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

/* featured */
.casino--featured{
  padding-top: 48px;
  padding-bottom: 48px;
  padding-left: 34px;
  padding-right: 34px;
  margin-bottom: 16px;
}

.casino--featured{
  border: 2px solid rgba(255, 185, 0, 0.51);
}

.casino--featured .star{
  font-size: 26px;
}

.casino--featured .bonusBox__text{
  font-size: 16px;
  font-weight: 600;
}

.casino--featured .rate{
  font-weight: 800;
  font-size: 16px;
  border-radius: 14px;
  padding: 8px 14px;
  border: none;
  margin-bottom: 14px;
}

.casino__topTag{
  position:absolute;
  top: 0;
  right: 0;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-bottom-left-radius: 14px;
  border-left: 1px solid rgba(255,185,0,.28);
  border-bottom: 1px solid rgba(255,185,0,.28);
  background: rgba(250, 183, 3, 0.69);
  color: rgba(255,255,255,.72);
  font-weight: 900;
  letter-spacing: .4px;
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse{50%{opacity:.5}}
.casino__trophy{ filter: saturate(1.1); }

.casino__featuredGrid{
  display:grid;
  grid-template-columns: 300px 1fr 220px;
  gap: 18px;
  align-items:center;
}

.casino__left{
  display:flex;
  align-items:center;
  gap: 16px;
}

.casino__img{
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,185,0,.20);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  background: rgba(255,255,255,.05);
}

.casino--featured .casino__img{
  width: 92px;
  height: 92px;
}

.casino__meta{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.casino__name{
  font-weight: 1000;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 24px;
  line-height: 1.05;
}

.casino__name--sm{
  font-size: 16px;
}

.stars{
  display:flex;
  gap: 4px;
  line-height: 1;
}
.star{
  font-size: 22px;
  color: rgba(255,185,0,.30);
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.star.is-on{ color: rgba(255,185,0,.95); }

/* rate pill */
.rate{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 2px 12px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.40);
  width: fit-content;
}
.rate--block{ margin: 12px 0 10px; }
.rate__icon{ font-weight: 1000; opacity:.9; }

.rate--high{ color: rgba(44,255,124,.90); background: rgba(0,80,35,.35); border-color: rgba(44,255,124,.15); }
.rate--med{  color: rgba(255,185,0,.92); background: rgba(120,90,0,.28); border-color: rgba(255,185,0,.18); }
.rate--low{  color: rgba(255,80,80,.88); background: rgba(95,0,0,.28); border-color: rgba(255,80,80,.16); }

.victorias_green{ color: rgba(44,255,124,.90); background: rgba(0,80,35,.35); border-color: rgba(44,255,124,.15); }
.victorias_yellow{  color: rgba(255,185,0,.92); background: rgba(120,90,0,.28); border-color: rgba(255,185,0,.18); }
.victorias_red{  color: rgba(255,80,80,.88); background: rgba(95,0,0,.28); border-color: rgba(255,80,80,.16); }

/* bonus box */
.bonusBox{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,185,0,.18);
  /*background: rgba(0,0,0,.30);*/
  background-color: hsla(45.1, 90.6%, 49.8%, 0.1);
  color: rgba(255,255,255,.85);
}
.bonusBox--compact{ margin-top: 0px; }
.bonusBox__icon{ opacity:.95; }
.bonusBox__text{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
}
.bonusBox__text b{ color: rgba(255,255,255,.95); }

/* CTA */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255,185,0,.85);
  border: 1px solid rgba(255,185,0,.35);
  color: rgba(0,0,0,.88);
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.cta:hover{ 
  /*filter: brightness(1.02);*/
  box-shadow: 0 0 20px hsla(45, 54.8%, 32.9%, 0.6),0 0 40px hsla(44.9, 100%, 50%, 0.43);
  transform: translateY(-1px); 
}
/*.cta:hover{
  box-shadow: 0 0 20px hsl(var(--gold) / .6),0 0 40px hsl(var(--gold) / .4);
}*/

.casino--featured .cta{
  width: 100%;
  padding: 14px 18px;
}

.cta__icon{ filter: saturate(1.05); }
.cta--full{ width: 100%; margin-top: 14px; }

/* grid of cards */
.casinos__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.casino:not(.casino--featured){
  padding: 16px;
}

.casino__cardTop{
  display:flex;
  gap: 12px;
  align-items:center;
}

/* make 5 cards layout like screenshot: 3 then 2 */
.casinos__grid > article:nth-child(4){
  grid-column: 1 / span 1;
}
.casinos__grid > article:nth-child(5){
  grid-column: 2 / span 1;
}

/* ================= Responsive ================= */
@media (max-width: 1024px){
  .casino__featuredGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .casino__right{ display:flex; }
  .cta{ width: 100%; }
}

@media (max-width: 900px){
  .casinos__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .casinos{
    padding: 26px 0 36px;
  }

  .casinos__frame{
    padding: 14px;
  }

  .casino--featured{
    padding: 22px;
  }

  .casino__name{ font-size: 18px; }
  .casino__img{ width: 64px; height: 64px; }

  .casino__topTag{
    padding: 8px 12px;
    border-bottom-left-radius: 12px;
  }

  .casinos__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ===== FIX: broken layout on mobile/tablet for casinos grid ===== */

/* 1) Apply the "3 then 2" trick ONLY on desktop 3-col layout */
@media (min-width: 901px){
  .casinos__grid > article:nth-child(4){ grid-column: 1 / span 1; }
  .casinos__grid > article:nth-child(5){ grid-column: 2 / span 1; }
}

/* 2) Reset any forced positioning on <=900px (2 cols) and <=520px (1 col) */
@media (max-width: 900px){
  .casinos__grid > article:nth-child(4),
  .casinos__grid > article:nth-child(5){
    grid-column: auto;
  }
}

/* 3) Prevent content overflow that can "break" cards on small screens */
.casino,
.casino *{
  min-width: 0; /* allows flex/grid children to shrink properly */
}

.casino__name,
.bonusBox__text{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Featured card: make sure it NEVER keeps wide columns on small screens */
@media (max-width: 1024px){
  .casino__featuredGrid{
    grid-template-columns: 1fr;
  }
  .casino__right .cta{ width: 100%; }
}

/* 5) Mobile: keep inner blocks full width and aligned like in your mock */
@media (max-width: 520px){
  .casino__featuredGrid{ gap: 12px; }

  .casino__left{
    align-items: center;
  }

  .bonusBox{
    width: 100%;
  }
}

/* ================= CASINO ITEM HOVER ================= */

/* тільки для пристроїв з hover (desktop / laptop) */
@media (hover: hover) and (pointer: fine){

  .casino{
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
  }

  .casino:hover{
    border-color: rgba(255,185,0,.75); /* золотий бордер */
    box-shadow:
      0 0 0 1px rgba(255,185,0,.35),
      0 22px 70px rgba(0,0,0,.65);
    transform: translateY(-2px);
  }

  /* підсвітка назви */
  .casino:hover .casino__name{
    color: rgba(255,210,90,1);
    text-shadow: 0 0 32px rgb(255, 185, 0), 0 36px 46px rgba(0, 0, 0, 0.51);
  }

  /* дрібний бонус: трохи підсвітити картинку */
  .casino:hover .casino__img{
    box-shadow:
      0 0 0 1px rgba(255,185,0,.45),
      0 18px 45px rgba(0,0,0,.6);
  }
}

/*3*/
/* ================= HOW TO GET YOUR BONUS ================= */
.how{
  padding: 46px 0 60px;
  background: radial-gradient(1100px 520px at 50% 0%, rgba(255,185,0,.08), transparent 62%);
}

.how__title{
  margin: 0 0 26px;
  text-align:center;
  font-size: clamp(22px, 2vw, 42px);
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255,185,0,.95);
  text-shadow: 0 18px 55px rgba(0,0,0,.65);
}

.how__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items:start;
  justify-items:center;
}

.step{
  text-align:center;
  max-width: 260px;
}

.step__iconWrap{
  width: 150px;
  height: 150px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.18);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  margin: 0 auto 16px;
}

.step__icon{
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.step__title{
  margin: 0 0 8px;
  font-weight: 1000;
  font-size: 18px;
  color: rgba(255,255,255,.99);
  text-shadow: 0 10px 32px rgba(0,0,0,.65);
}

.step__text{
  margin: 0;
  color: rgba(255,255,255,.65);
  font-weight: 400;
  line-height: 1.45;
  font-size: 14px;
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}

/* tablet */
@media (max-width: 980px){
  .how__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* mobile */
@media (max-width: 520px){
  .how{
    padding: 34px 0 46px;
  }

  .how__title{
    margin-bottom: 50px;
    padding-left: 30px;
    padding-right: 30px;
    letter-spacing: .6px;
  }

  .how__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .step{
    max-width: 320px;
  }

  .step__iconWrap{
    width: 156px;
    height: 156px;
    margin-bottom: 12px;
  }

  .step__icon{
    width: 126px;
    height: 126px;
  }

  .step__title{
    font-size: 17px;
  }
}

/* ================= HOW STEPS HOVER ================= */

/* тільки для пристроїв з hover (desktop / laptop) */
@media (hover: hover) and (pointer: fine){

  .step__icon{
    transition:
      transform .25s ease,
      filter .25s ease;
  }

  .step:hover .step__icon{
    transform: scale(1.08);
    filter: drop-shadow(0 22px 50px rgba(0,0,0,.65));
  }
}

@media (hover: hover) and (pointer: fine){
  .step__iconWrap{
    transition: border-color .25s ease, box-shadow .25s ease;
  }

  .step:hover .step__iconWrap{
    border-color: rgba(255,185,0,.45);
    box-shadow:
      0 0 0 1px rgba(255,185,0,.25),
      0 20px 60px rgba(0,0,0,.65);
  }
}

/*4*/
/* ================= FAQ ================= */
.faq{
  padding: 54px 0 64px;
  background: radial-gradient(1100px 520px at 50% 0%, rgba(255,185,0,.08), transparent 62%);
}

.faq__title{
  margin: 0 0 28px;
  text-align:center;
  font-size: clamp(22px, 2vw, 42px);
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255,185,0,.95);
  text-shadow: 0 18px 55px rgba(0,0,0,.65);
}

.faq__layout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items:start;
}

/* LEFT list */
.faq__list{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.faqItem{
  border-radius: 14px;
  border: 1px solid rgba(255,185,0,.18);
  background: rgba(0,0,0,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

.faqItem__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 18px;
  background: transparent;
  border: 0;
  cursor:pointer;
  color: rgba(255,255,255,.92);
  text-align:left;
  font-weight: 600;
  font-size: 16px;
}

.faqItem__q{ min-width: 0; }

.faqItem__chev{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  color: rgba(255,255,255,.65);
  flex: 0 0 auto;
  transition: transform .2s ease, color .2s ease;
}
.faqItem__chev svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* hover: title + arrow become yellow */
@media (hover: hover) and (pointer: fine){
  .faqItem__btn:hover{
    color: rgba(255,185,0,.95);
  }
  .faqItem__btn:hover .faqItem__chev{
    color: rgba(255,185,0,.95);
  }
}

.faqItem__panel{
  max-height: 0;
  overflow:hidden;
  transition: max-height .25s ease;
  border-top: 1px solid rgba(255,185,0,.12);
}

.faqItem__a{
  padding: 0 18px 18px;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.55;
  font-size: 16px;
}

/* open state */
.faqItem.is-open .faqItem__panel{
  max-height: 220px; /* enough for your text; can increase later */
}
.faqItem.is-open .faqItem__chev{
  transform: rotate(180deg);
  color: rgba(255,255,255,.75);
}

/* RIGHT art */
.faqArt{
  position: relative;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,185,0,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  min-height: 420px;
}

.faqArt__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.faqArt__float{
  position:absolute;
  right: 22px;
  bottom: 18px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255,185,0,.95);
  color: rgba(0,0,0,.9);
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 30px;
  box-shadow: 0 18px 55px rgba(0,0,0,.6);
  animation: floatY 2.6s ease-in-out infinite;
}

@keyframes floatY{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* responsive */
@media (max-width: 980px){
  .faq__layout{
    grid-template-columns: 1fr;
  }
  .faqArt{
    order: -1;           /* картинка зверху як на мобільному прикладі */
    min-height: 360px;
  }
}

@media (max-width: 520px){
  .faq{
    padding: 36px 0 48px;
  }

  .faq__title{
    margin-bottom: 18px;
    letter-spacing: .6px;
  }

  .faq__list{
    gap: 14px;
  }

  .faqItem__btn{
    padding: 16px 16px;
    font-size: 16px;
  }

  .faqItem__a{
    padding: 0 16px 16px;
    font-size: 14.5px;
  }

  .faqArt{
    min-height: 320px;
  }

  .faqArt__float{
    width: 58px;
    height: 58px;
    font-size: 28px;
    right: 16px;
    bottom: 14px;
  }
}

/*5*/
/* ================= EXPERT OPINION ================= */
.expert{
  padding: 54px 0 66px;
  background: radial-gradient(1100px 520px at 50% 0%, rgba(255,185,0,.08), transparent 62%);
}

.expert__title{
  margin: 0 0 50px;
  text-align:center;
  font-size: clamp(22px, 2vw, 42px);
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255,185,0,.95);
  text-shadow: 0 18px 55px rgba(0,0,0,.65);
}

.expertCard{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,185,0,.18);
  background-color: hsla(0, 0%, 7.8%, 0.51);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  padding: 26px 26px;
  overflow:hidden;
}

/* === Narrower expert card === */
.expertCard{
  max-width: 832px;   /* оптимально для читабельності */
  margin: 0 auto;
}


.expertCard__quote{
  position:absolute;
  right: 26px;
  top: 14px;
  font-size: 84px;
  line-height: 1;
  color: rgba(255,185,0,.18);
  font-weight: 1100;
  transform: translateY(-4px);
  user-select:none;
}

.expertCard__grid{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items:start;
}

.expertCard__avatar{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: 4px;
}

.avatar{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  border: 4px solid rgba(255,185,0,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
  overflow:hidden;
  background: rgba(255,255,255,.06);
}

.avatar__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* === Expert avatar checkmark (refined) === */
.avatar__check{
  position:absolute;
  right: 4px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #22c55e; /* чистий зелений */
  color: #fff;
  display:grid;
  place-items:center;
  font-size: 18px;
  font-weight: 1000;
  border: 3px solid #0b0b0b; /* темна обводка як на скріні */
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    0 0 0 2px rgba(34,197,94,.35);
}


.expertCard__name{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.expertCard__role{
  margin-top: 6px;
  font-weight: 400;
  color: rgba(255,185,0,.85);
}

.expertCard__text{
  margin: 14px 0 16px;
  color: rgba(255,255,255,.60);
  font-weight: 400;
  line-height: 1.7;
  font-size: 16px;
  font-style: italic;
  max-width: 78ch;
}

.expertCard__tags{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.tagPill{
  display:inline-flex;
  align-items:center;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,185,0,.18);
  background: rgba(255,185,0,.10);
  color: rgba(255,185,0,.92);
  font-weight: 400;
  letter-spacing: .2px;
  font-size: 13px;
}

/* responsive */
@media (max-width: 980px){
  .expertCard__grid{
    grid-template-columns: 1fr;
  }

  .expertCard{
    padding: 22px 18px;
  }

  .expertCard__avatar{
    padding-top: 0;
  }

  .expertCard__content{
    text-align:center;
  }

  .expertCard__tags{
    justify-content:center;
  }

  .expertCard__quote{
    right: 18px;
    top: 10px;
    font-size: 72px;
  }
}

@media (max-width: 520px){
  .expert{
    padding: 38px 0 52px;
  }

  .expert__title{
    margin-bottom: 18px;
    letter-spacing: .6px;
  }

  .avatar{
    width: 138px;
    height: 138px;
  }

  .expertCard__name{
    font-size: 24px;
  }

  .expertCard__role{
    font-size: 13.5px;
    line-height: 1.25;
  }

  .expertCard__text{
    font-size: 16px;
    line-height: 1.75;
  }

  .tagPill{
    font-size: 12.5px;
    padding: 8px 12px;
  }
}

/* === FIX: checkmark clipping on expert avatar === */

/* 1) allow checkmark to be outside the circle */
.avatar{
  overflow: visible; /* was hidden -> caused clipping */
}

/* 2) keep the photo clipped as a circle */
.avatar__img{
  border-radius: 999px;
}

/* 3) position checkmark like in design (slightly outside) */
.avatar__check{
  right: -8px;  /* push outside */
  bottom: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  border: 4px solid #0b0b0b; /* dark ring like your UI */
  box-shadow:
    0 10px 26px rgba(0,0,0,.6),
    0 0 0 2px rgba(34,197,94,.35);
}

/*6*/
/* ================= INFO / BONUSES ================= */
.info{
  padding: 54px 0 20px;
  background: radial-gradient(1100px 560px at 50% 0%, rgba(255,185,0,.08), transparent 62%);
}

.info__inner{
  border-radius: 18px;
  /*border: 1px solid rgba(255,185,0,.10);*/
  background: rgba(0,0,0,.20);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
  padding: 34px 34px;
}

/* Head */
.infoHead{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  margin-bottom: 22px;
}

.infoHead__icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: rgba(255,185,0,.95);
  font-size: 22px;
  flex: 0 0 auto;
}

.infoHead__title{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 1100;
  color: rgba(255,185,0,.95);
}

.infoHead__text{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.6;
  max-width: 110ch;
}

/* Two cards */
.infoCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 18px 0 26px;
}

.infoCard{
  border-radius: 14px;
  border: 1px solid rgba(255,185,0,.16);
  background: rgba(0,0,0,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 20px 20px;
}

.infoCard__title{
  margin: 0 0 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

.infoCard__i{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.18);
  color: rgba(255,185,0,.95);
  flex: 0 0 auto;
}

.infoCard__i--gold{ color: rgba(255,185,0,.95); }

.infoCard__text{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.2;
  font-size: 14px;
}

/* Security line (icon + title + paragraph) */
.infoLine{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  margin: 6px 0 22px;
}

.infoLine__icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: rgba(255,185,0,.95);
  font-size: 24px;
  flex: 0 0 auto;
}

.infoLine__title{
  margin: 0 0 8px;
  font-size: 20px;
  /*font-weight: 1100;*/
  color: rgba(255,185,0,.95);
}

.infoLine__text{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.6;
  max-width: 110ch;
}

/* Quick blocks (4) */
.quickGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 12px;
}

.quick{
  border-radius: 14px;
  border: 1px solid rgba(255,185,0,.14);
  background: rgba(0,0,0,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  padding: 4px 16px;
  padding-bottom: 8px;
  text-align:center;
}

.quick__icon{
  width: 42px;
  height: 42px;
  margin: 0 auto 0;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  /*border: 1px solid rgba(255,185,0,.12);*/
  font-size: 20px;
}

.quick__icon--green{ color: rgba(44,255,124,.92); }
.quick__icon--gold{ color: rgba(255,185,0,.95); }
.quick__icon--blue{ color: rgba(56,189,248,.95); }
.quick__icon--pink{ color: rgba(255,45,195,.95); }

.quick__text{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 600;
}

/* Responsible Gambling block */
.rg{
  margin-top: 22px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(120,0,0,.35), rgba(0,0,0,.25));
  border: 1px solid rgba(255,60,60,.55);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  padding: 18px 18px;
}

.rg__title{
  margin: 0 0 8px;
  font-size: 16px;
  /*font-weight: 1100;*/
  color: rgba(255,255,255,.92);
}

.rg__text{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.2;
  font-size: 12px;
}

/* hover on quick blocks (optional but fits site vibe) */
@media (hover: hover) and (pointer: fine){
  .quick{
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .quick:hover{
    border-color: rgba(255,185,0,.45);
    transform: translateY(-2px);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
  }
}

/* Responsive */
@media (max-width: 980px){
  .info__inner{
    padding: 26px 22px;
  }

  .infoCards{
    grid-template-columns: 1fr;
  }

  .quickGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .info{
    padding: 38px 0 52px;
  }

  .info__inner{
    padding: 22px 18px;
  }

  .infoHead__title{
    font-size: 22px;
  }

  .infoLine__title{
    font-size: 22px;
  }

  .quick{
    padding: 16px 14px;
  }

  .rg{
    padding: 16px 16px;
  }
}

/*7*/
/* ================= FOOTER ================= */
.footer{
  /*margin-top: 40px;*/
  background: #000;
}

.footer__chips{
  height: 100px;
  border-bottom: 1px solid rgba(255,185,0,.08);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.90)), url("https://labcd.mx/wp-content/uploads/2026/01/footer-chips.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center, bottom center;
}

/* якщо немає картинки — буде просто темний верх */
.footer__chips:empty{
  background-color: #000;
/*  background:
    linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.85));*/
}

.footer__panel{
  padding: 36px 0 28px;
}

.footer__top{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 36px;
  align-items:start;
}

.fBrand__head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 16px;
}

.fBrand__icon{
/*  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: rgba(255,185,0,.95);
  font-size: 20px;*/
}

.fBrand__icon img{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,185,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: rgba(255,185,0,.95);
  font-size: 20px;
}

.fBrand__name{
  font-weight: 600;
  letter-spacing: .6px;
  color: rgba(255,185,0,.95);
  font-size: 24px;
  text-transform: uppercase;
}

.fBrand__text{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 400;
  line-height: 1.2;
  max-width: 44ch;
  font-size: 14px;
}

.fCol__title{
  font-weight: 800;
  color: rgba(255,185,0,.95);
  margin-bottom: 10px;
  font-size: 18px;
}

.fLink{
  display:block;
  padding: 6px 0;
  color: rgba(255,255,255,.90);
  font-weight: 400;
  letter-spacing: .1px;
}

@media (hover:hover) and (pointer:fine){
  .fLink:hover{ color: rgba(255,185,0,.95); }
}

.footer__hr{
  height: 1px;
  background: rgba(255,185,0,.10);
  margin: 22px 0;
}

.footer__mid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items:center;
}

.fSafe{
  display:flex;
  align-items:center;
  gap: 6px;
  color: rgba(255,255,255,.75);
  font-weight: 400;
  font-size: 12px;
}

.fSafe__18{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: #e11d1d;
  color: #fff;
  font-weight: 1100;
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
  margin-right: 10px;
}

.fSafe__shield{
  width: 26px;
  height: 26px;
  color: rgba(34,197,94,.95);
  display:grid;
  place-items:center;
}
.fSafe__shield svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fCopy{
  text-align:center;
  color: rgba(255,255,255,.55);
  font-weight: 400;
  font-size: 12px;
}

.fMail{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.65);
  font-weight: 400;
  font-size: 12px;
}

.fMail__ic{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.55);
}
.fMail__ic svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover:hover) and (pointer:fine){
  .fMail:hover{ color: rgba(255,185,0,.95); }
  .fMail:hover .fMail__ic{ color: rgba(255,185,0,.95); }
}

.footer__disc{
  margin: 16px 0 0;
  text-align:center;
  color: rgba(255,255,255,.38);
  font-weight: 400;
  line-height: 1.6;
  font-size: 12px;
}

.footer__badges{
  margin-top: 18px;
  display:flex;
  gap: 22px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  color: rgba(255,255,255,.35);
  border-top: 1px solid rgba(255,185,0,.06);
  padding-top: 16px;
}

.badgeMini{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 400;
  font-size: 13px;
  opacity: .75;
}

.badgeMini__ic{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.35);
}

/* responsive */
@media (max-width: 980px){
  .footer__top{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer__mid{
    grid-template-columns: 1fr;
    text-align:center;
    gap: 14px;
  }

  .fCopy{ text-align:center; }
  .fMail{ justify-content:center; }

  .fBrand__text{ max-width: none; }
}

@media (max-width: 520px){
  .footer__chips{
    height: 74px;
    background-size: 100% 100%, auto 150px;
  }

  .footer__panel{
    padding: 26px 0 22px;
  }

  .fBrand__name{
    font-size: 22px;
  }

  .fCol__title{
    /*font-size: 20px;*/
  }

  .fLink{
/*    padding: 9px 0;
    font-size: 18px;*/
  }

  .footer__disc{
    font-size: 13px;
  }

  .fSafe{
    justify-content: center;
  }
}