/* ==========================================================
   VL24 ULTRA ACCORDION — 2026 LUXURY SYSTEM
   Glass / Gold / Depth / Cinematic / Zero blue boxes
========================================================== */

.vl24-tabs-section{
  position:relative;
  padding:100px 0 100px;
  overflow:hidden;

  background:
  radial-gradient(circle at 50% 0%, rgba(255,214,140,.10), transparent 62%),
  linear-gradient(180deg,#0f1012 0%, #1a1c20 55%, #101114 100%);
}

/* ===============================
   BACKGROUND FX
=============================== */

.vl24-tabs-section::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/g%3E%3C/svg%3E");

  opacity:.4;
  pointer-events:none;
}

.vl24-tabs-section::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 50% -20%, rgba(201,162,39,.32), transparent 70%);

  pointer-events:none;
}

/* ===============================
   HEADER (same system as WHY)
=============================== */

.vl24-tabs-head{
  max-width:900px;
  margin:0 auto 80px;
  text-align:center;
}

.section-eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:14px;
}

.vl24-tabs-title{
  font-size:52px;
  line-height:1.1;
  margin:0 0 18px;
  font-weight:700;

  color:#fff;

  /* shadow shine overlay */
  position:relative;
  display:inline-block;
}

.vl24-tabs-intro{
  color:rgba(255,255,255,.85);
  font-size:18px;
  line-height:1.7;
}

/* ===============================
   ACCORDION WRAP
=============================== */

.vl24-accordion{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ===============================
   CARD
=============================== */

.vl24-acc-item{
  position:relative;
  border-radius:26px;
  overflow:hidden;              /* oluline */
  background:transparent;       /* ✳️ ära pane siia tausta */
  border:1px solid rgba(255,255,255,.08);
  transition:.35s;

  /* ✳️ EEMALDA siit backdrop-filter */
  backdrop-filter:none;

  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.vl24-acc-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

.vl24-acc-item:hover{
  transform:translateY(-4px);
}

/* ACTIVE GLOW */

.vl24-acc-item.active{
  border:1px solid rgba(212,225,87,.45);

  box-shadow:
    0 40px 120px rgba(0,0,0,.5),
    0 0 40px rgba(212,225,87,.15);
}

/* ===============================
   HEADER BUTTON
=============================== */

.vl24-acc-header{
  width:100%;
  background:none;
  border:0;
  padding:28px 30px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  cursor:pointer;
}

/* TITLE */

.vl24-acc-title{
  font-size:20px;
  font-weight:600;
  color:#fff;
}

/* ===============================
   ICON (single arrow)
=============================== */

.vl24-acc-icon{
  width:22px;
  height:22px;
  position:relative;
}

.vl24-acc-icon::before{
  content:"";
  position:absolute;
  inset:0;

  border-right:2px solid #d4e157;
border-bottom:2px solid #d4e157;

  transform:rotate(45deg);
  transition:.35s;
}

.vl24-acc-item.active .vl24-acc-icon::before{
  transform:rotate(-135deg);
}

/* ===============================
   CONTENT
=============================== */

.vl24-acc-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s ease;
}

.vl24-acc-item.active .vl24-acc-content{
  max-height:500px;
}

.vl24-acc-content > *{
  padding:0 30px 30px;
  color:#cbd5e1;
  line-height:1.8;
}

/* ===============================
   MOBILE
=============================== */

@media(max-width:900px){

  .vl24-tabs-title{
    font-size:34px;
  }

  .vl24-tabs-section{
    padding:60px 0 !important;
  }

}

.vl24-tabs-section::before{
  content:"";
  position:absolute;
  inset:-40%;

  background:
  linear-gradient(
    120deg,
    transparent 20%,
    rgba(201,162,39,.22),
    rgba(255,214,140,.32),
    transparent 80%
  );

  transform:rotate(15deg);
  animation:vl24LightSweep 10s linear infinite;

  mix-blend-mode:screen;
  z-index:1;
  pointer-events:none;
}

@keyframes vl24LightSweep{
  from{ transform:translateX(-40%) rotate(15deg); }
  to{ transform:translateX(40%) rotate(15deg); }
}

.vl24-tabs-section{
  position:relative;
  padding:100px 0 120px;
  overflow:hidden;

  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* =================================
VL24 TABS — CONTENT ALWAYS ON TOP
FIX LAYER ORDER
================================= */

/* section base */
.vl24-tabs-section{
  position:relative;
  z-index:0;
}

/* background layers alati taha */
.vl24-tabs-section::before,
.vl24-tabs-section::after{
  z-index:0 !important;
}

/* content wrapper ette */
.vl24-tabs-section .container{
  position:relative;
  z-index:5;
}

/* header kindlasti kõige peal */
.vl24-tabs-head{
  position:relative;
  z-index:10;
}

/* accordion ka layeritest ette */
.vl24-accordion{
  position:relative;
  z-index:6;
}

/* TABS EYEBROW — ainult roheline raam */
.vl24-tabs-section .vl24-eyebrow-pill{
  border:1px solid var(--brand-primary);
  border-radius:999px;
}

/* AUTO CONTRAST TEXT — works with image background */
.vl24-acc-title{
  color:#fff;
  mix-blend-mode:difference;
}

/* =================================
ACCORDION — SOFT GLASS DARK (UNIFORM)
sama toon kogu kaardile
================================= */

/* kogu card sama glass taust */
.vl24-acc-item{
  background:rgba(10,14,18,.45) !important; /* ⭐ sama mis enne — mitte liiga tume */
  backdrop-filter:blur(18px) saturate(140%);
}

/* eemaldame vastuse eraldi tumeda layeri */
.vl24-acc-content::before{
  display:none !important;
}

/* tekst loetav */
.vl24-acc-title{
  color:#fff !important;
}

.vl24-acc-content > *{
  color:rgba(255,255,255,.85) !important;
}

/* =================================
ACCORDION TEXT — FORCE ABOVE LAYERS
================================= */

/* kogu accordion content layer üles */
.vl24-acc-item,
.vl24-acc-header,
.vl24-acc-content{
  position:relative;
  z-index:5;
}

/* küsimus */
.vl24-acc-title{
  color:#ffffff !important;
}

/* vastus */
.vl24-acc-content,
.vl24-acc-content p,
.vl24-acc-content *{
  color:#ffffff !important;
  opacity:1 !important;
}

/* =================================
FAQ — DARK METAL GOLD (SAFE)
Only visual changes
================================ */

/* CARD */
.vl24-acc-item{
  border-radius:18px !important;

  background:linear-gradient(
    180deg,
    rgba(18,18,18,.95),
    rgba(28,28,28,.92)
  ) !important;

  border:1px solid rgba(201,162,39,.35) !important;

  box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ACTIVE */
.vl24-acc-item.active{
  border-color:#c9a227 !important;

  box-shadow:
    0 35px 80px rgba(0,0,0,.55),
    0 0 30px rgba(201,162,39,.25) !important;
}

/* QUESTION */
.vl24-acc-title{
  color:#ffffff !important;
  font-weight:600;
}

/* ANSWER */
.vl24-acc-content,
.vl24-acc-content *{
  color:rgba(255,255,255,.75) !important;
}

/* ICON GOLD */
.vl24-acc-icon::before{
  border-right:2px solid #c9a227 !important;
  border-bottom:2px solid #c9a227 !important;
}

/* TITLE */
.vl24-tabs-title{
  color:#ffffff !important;
}

/* INTRO */
.vl24-tabs-intro{
  color:rgba(255,255,255,.75) !important;
}