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

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

  background:
    radial-gradient(circle at 50% 0%, rgba(255,210,140,.12), transparent 60%),
    linear-gradient(180deg,#05070d 0%,#0b1220 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(255,215,140,.35), 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;

  background:linear-gradient(
    120deg,
    #120b05,
    #6b4a1f,
    #fff3c9,
    #c9a15a,
    #2a1a0b
  );

  background-size:300%;
  -webkit-background-clip:text;
  color:transparent;

  animation:vl24GoldShine 6s linear infinite;
}

@keyframes vl24GoldShine{
  0%{background-position:0%}
  50%{background-position:100%}
  100%{background-position:0%}
}

.vl24-tabs-intro{
  color:#94a3b8;
  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;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  backdrop-filter:blur(22px) saturate(140%);

  border:1px solid rgba(255,255,255,.08);

  transition:.35s;

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

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

/* ACTIVE GLOW */

.vl24-acc-item.active{
  border:1px solid rgba(255,210,140,.45);

  box-shadow:
    0 40px 120px rgba(0,0,0,.5),
    0 0 40px rgba(255,200,120,.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 #c9a15a;
  border-bottom:2px solid #c9a15a;

  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:100px 0;
  }

}

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

  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,190,90,.35) 35%,
      rgba(255,220,150,.55) 50%,
      rgba(255,190,90,.35) 65%,
      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); }
}