/* ========================================
   CSG-DIVASPIN — concertations-sitegrandpuits.com
   Brand palette: Deep navy, royal purple, gold
   ======================================== */

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;color:#e2e0ef;background:#0d0b1a;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#d4a574;text-decoration:none}
a:hover{color:#e8c490}
ul{list-style:none}
h1,h2,h3,h4{font-family:'DM Serif Display',serif;font-weight:400;color:#fff;line-height:1.25}


img[src$=".svg"] {
  filter: brightness(0) saturate(100%) invert(73%) sepia(30%) saturate(1200%) hue-rotate(5deg) brightness(92%) contrast(85%);
}

/* ---------- UTILITY ---------- */
.csg-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.csg-ico-inline{display:inline-block;vertical-align:middle;margin-right:6px}

/* ---------- HEADER ---------- */
.csg-hdr{position:sticky;top:0;z-index:100;background:rgba(13,11,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,58,237,.25)}
.csg-hdr__inner{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.csg-hdr__brand img{height:40px;width:auto}
.csg-hdr__nav{display:flex;gap:24px}
.csg-hdr__link{color:#c4bfe0;font-size:.875rem;font-weight:500;transition:color .2s}
.csg-hdr__link:hover,.csg-hdr__link--active{color:#d4a574}
.csg-hdr__actions{display:flex;gap:10px}
.csg-hdr__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.csg-hdr__burger span{width:24px;height:2px;background:#fff;border-radius:2px}
@media(max-width:900px){
  .csg-hdr__nav,.csg-hdr__actions{display:none}
  .csg-hdr__burger{display:flex}
  .csg-hdr__nav--open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:#0d0b1a;padding:20px;border-bottom:1px solid rgba(124,58,237,.25)}
  .csg-hdr__actions--open{display:flex;justify-content:center;padding:10px 20px;background:#0d0b1a}
}

/* ---------- BUTTONS ---------- */
.csg-btn{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.875rem;padding:10px 22px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;text-align:center}
.csg-btn--outline{border:1px solid rgba(212,165,116,.5);color:#d4a574;background:transparent}
.csg-btn--outline:hover{background:rgba(212,165,116,.1)}
.csg-btn--glow{background:linear-gradient(135deg,#7c3aed,#6b21a8);color:#fff;border:none;box-shadow:0 4px 20px rgba(124,58,237,.4)}
.csg-btn--glow:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(124,58,237,.55)}
.csg-btn--jumbo{font-size:1.1rem;padding:16px 40px;background:linear-gradient(135deg,#d4a574,#b8864a);color:#0d0b1a;border-radius:12px;box-shadow:0 4px 24px rgba(212,165,116,.4)}
.csg-btn--jumbo:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(212,165,116,.55)}

/* ---------- HERO ---------- */
.csg-hero{padding:80px 0 60px;text-align:center;background:radial-gradient(ellipse at 50% 20%,rgba(124,58,237,.18),transparent 70%)}
.csg-hero__badge{display:inline-block;padding:6px 18px;border-radius:20px;font-size:.8rem;font-weight:600;color:#d4a574;background:rgba(212,165,116,.12);border:1px solid rgba(212,165,116,.25);margin-bottom:20px}
.csg-hero__h1{font-size:clamp(1.8rem,4vw,3rem);max-width:820px;margin:0 auto 16px}
.csg-hero__sub{font-size:1.15rem;color:#b0adca;margin-bottom:28px}
.csg-hero__ctas{margin-bottom:32px}

/* ---------- TRUST BAR ---------- */
.csg-trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.csg-trust{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#a09cc0}
.csg-trust__ico{opacity:.7}

/* ---------- METRICS ---------- */
.csg-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 0}
.csg-metric{text-align:center;padding:24px 16px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:14px}
.csg-metric__val{display:block;font-family:'DM Serif Display',serif;font-size:1.8rem;color:#d4a574}
.csg-metric__lbl{font-size:.82rem;color:#9e99b8;margin-top:4px}
@media(max-width:640px){.csg-metrics{grid-template-columns:repeat(2,1fr)}}

/* ---------- SECTIONS ---------- */
.csg-sec{padding:64px 0}
.csg-sec--navy{background:#0f0d20}
.csg-sec--purple{background:linear-gradient(180deg,rgba(107,33,168,.12),rgba(13,11,26,1))}
.csg-sec--highlight{background:rgba(124,58,237,.06);border-top:1px solid rgba(124,58,237,.15);border-bottom:1px solid rgba(124,58,237,.15)}
.csg-sec__hdr{text-align:center;margin-bottom:40px}
.csg-sec__h2{font-size:clamp(1.4rem,3vw,2.2rem);margin-bottom:10px}
.csg-sec__lead{color:#9e99b8;font-size:1rem}

/* ---------- GRIDS ---------- */
.csg-grid{display:grid;gap:24px}
.csg-grid--4{grid-template-columns:repeat(4,1fr)}
.csg-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.csg-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.csg-grid--4,.csg-grid--3{grid-template-columns:1fr}}

/* ---------- CARDS ---------- */
.csg-card{background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.15);border-radius:14px;padding:28px 24px;transition:border-color .2s}
.csg-card:hover{border-color:rgba(212,165,116,.35)}
.csg-card__ico{margin-bottom:14px}
.csg-card__h3{font-size:1.1rem;margin-bottom:10px}
.csg-card__p{font-size:.88rem;color:#b0adca;line-height:1.65}

/* ---------- GAME CARDS ---------- */
.csg-game{background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.15);border-radius:14px;overflow:hidden}
.csg-game__thumb{height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(107,33,168,.1));position:relative}
.csg-game__thumb--mint{background:linear-gradient(135deg,rgba(52,211,153,.15),rgba(16,185,129,.08))}
.csg-game__thumb--amber{background:linear-gradient(135deg,rgba(212,165,116,.2),rgba(184,134,74,.1))}
.csg-game__thumb--ruby{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.08))}
.csg-game__icon{opacity:.6}
.csg-game__tag{position:absolute;top:10px;right:10px;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:4px;color:#fff}
.csg-game__tag--hot{background:#ef4444}
.csg-game__tag--new{background:#10b981}
.csg-game__tag--live{background:#7c3aed}
.csg-game__body{padding:16px}
.csg-game__name{font-size:1rem;margin-bottom:2px}
.csg-game__studio{font-size:.78rem;color:#9e99b8;margin-bottom:10px}
.csg-game__play{display:inline-block;font-size:.8rem;font-weight:600;color:#d4a574;border:1px solid rgba(212,165,116,.3);padding:6px 14px;border-radius:6px;transition:background .2s}
.csg-game__play:hover{background:rgba(212,165,116,.1)}

/* ---------- PROSE ---------- */
.csg-prose{padding:48px 0}
.csg-prose h2{font-size:clamp(1.3rem,2.5vw,2rem);margin-bottom:16px}
.csg-prose h3{font-size:1.15rem;margin:28px 0 12px;color:#d4a574}
.csg-prose p{margin-bottom:16px;color:#c4bfe0;font-size:.92rem;line-height:1.75}
.csg-prose--mt{margin-top:40px}

/* ---------- VERSUS ---------- */
.csg-versus{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.csg-versus__box{text-align:center;padding:32px 28px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.15);flex:1;max-width:380px}
.csg-versus__box--winner{border-color:rgba(212,165,116,.4);background:rgba(212,165,116,.06)}
.csg-versus__ico{margin-bottom:12px}
.csg-versus__name{font-size:1.1rem;margin-bottom:8px}
.csg-versus__speed{display:block;font-size:1.6rem;font-family:'DM Serif Display',serif;color:#10b981;margin-bottom:6px}
.csg-versus__speed--slow{color:#ef4444}
.csg-versus__detail{font-size:.78rem;color:#9e99b8}
.csg-versus__sep{font-family:'DM Serif Display',serif;font-size:1.4rem;color:#7c3aed;font-weight:700}

/* ---------- REVIEWS ---------- */
.csg-review{background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.15);border-radius:14px;padding:28px 24px}
.csg-review__stars{color:#d4a574;font-size:1.1rem;margin-bottom:12px}
.csg-review__txt{font-size:.88rem;color:#c4bfe0;line-height:1.65;margin-bottom:16px}
.csg-review__author{display:flex;align-items:center;gap:12px}
.csg-review__name{display:block;font-weight:600;font-size:.88rem;color:#fff}
.csg-review__city{font-size:.78rem;color:#9e99b8}

/* ---------- VIP ROW ---------- */
.csg-vip-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1024px){.csg-vip-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.csg-vip-row{grid-template-columns:1fr}}
.csg-vip{background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.15);border-radius:14px;padding:28px 20px;text-align:center}
.csg-vip--featured{border-color:rgba(212,165,116,.45);background:rgba(212,165,116,.06)}
.csg-vip__ico{margin-bottom:12px}
.csg-vip__name{font-size:1.15rem;margin-bottom:4px}
.csg-vip__cond{font-size:.78rem;color:#9e99b8;display:block;margin-bottom:14px}
.csg-vip__perks{text-align:left;margin-bottom:0}
.csg-vip__perks li{font-size:.82rem;color:#c4bfe0;padding:4px 0;padding-left:16px;position:relative}
.csg-vip__perks li::before{content:"—";position:absolute;left:0;color:#7c3aed}

/* ---------- STUDIOS ---------- */
.csg-studios{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:900px){.csg-studios{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.csg-studios{grid-template-columns:repeat(2,1fr)}}
.csg-studio{text-align:center;padding:20px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.12);border-radius:12px}
.csg-studio__ico{margin:0 auto 8px}
.csg-studio__name{font-size:.88rem;color:#fff}
.csg-studio__desc{font-size:.74rem;color:#9e99b8;margin-top:2px}

/* ---------- FAQ ---------- */
.csg-faq{max-width:800px;margin:0 auto}
.csg-faq__item{border-bottom:1px solid rgba(124,58,237,.15)}
.csg-faq__q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0;background:none;border:none;color:#fff;font-size:.95rem;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;text-align:left;gap:12px}
.csg-faq__q:hover{color:#d4a574}
.csg-faq__arrow{font-size:.7rem;color:#7c3aed;transition:transform .2s}
.csg-faq__item--open .csg-faq__arrow{transform:rotate(180deg)}
.csg-faq__a{display:none;padding:0 0 18px}
.csg-faq__item--open .csg-faq__a{display:block}
.csg-faq__a p{font-size:.88rem;color:#b0adca;line-height:1.65}

/* ---------- CTA FINAL ---------- */
.csg-cta-final{padding:72px 0;text-align:center;background:radial-gradient(ellipse at 50% 60%,rgba(124,58,237,.14),transparent 70%)}
.csg-cta-final__h2{font-size:clamp(1.5rem,3.5vw,2.4rem);margin-bottom:14px}
.csg-cta-final__p{color:#b0adca;margin-bottom:28px;max-width:600px;margin-left:auto;margin-right:auto}

/* ---------- FOOTER ---------- */
.csg-foot{background:#080712;padding:48px 0 0;border-top:1px solid rgba(124,58,237,.15)}
.csg-foot__upper{display:flex;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(124,58,237,.1)}
.csg-foot__brand{flex:1;max-width:360px}
.csg-foot__logo{height:38px;width:auto;margin-bottom:14px}
.csg-foot__desc{font-size:.82rem;color:#9e99b8;line-height:1.6}
.csg-foot__cols{flex:2;display:flex;gap:40px}
.csg-foot__col h4{font-size:.9rem;color:#d4a574;margin-bottom:12px;font-family:'DM Serif Display',serif}
.csg-foot__col li{margin-bottom:6px}
.csg-foot__col a{font-size:.82rem;color:#9e99b8;transition:color .15s}
.csg-foot__col a:hover{color:#d4a574}
.csg-foot__lower{padding:24px 0;text-align:center}
.csg-foot__lower p{font-size:.78rem;color:#706d87;margin-bottom:4px}
.csg-foot__pay{margin-top:8px;font-size:.75rem;color:#5a5775}
@media(max-width:768px){
  .csg-foot__upper{flex-direction:column}
  .csg-foot__cols{flex-direction:column;gap:24px}
}