/* ======= 2.1 TOKENS / DARK THEME ======= */
:root{
  --bg: #111213;
  --surface: #17181A;
  --surface-2: #1E2023;
  --border: #2A2D31;
  --muted: #9AA3AD;
  --text: #E7E9EC;
  --heading: #F5F7FA;
  --primary: #FFB000;       /* gold */
  --primary-700: #E19A00;
  --primary-900: #B07A00;
  --danger: #D7263D;        /* red */
  --success: #18C29C;       /* green/teal */
  --info: #00C2FF;          /* cyan */
  --warning: #FF7A00;       /* orange */

  --radius: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 6px 20px rgba(0,0,0,.25);
  --shadow-2: 0 14px 30px rgba(0,0,0,.35);

  --btn-h: 46px;
  --fx-fast: 180ms;
  --fx: 260ms;
  --fx-slow: 420ms;
}

html, body{background: var(--bg); color: var(--text)}
a{color: var(--info)}
a:hover{color: var(--primary)}

.section, .container, .row, .ux-section, .ux-sidebar{background: transparent}
.box, .callout, .panel{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* ======= 2.2 HEADINGS / TYPO ======= */
h1,h2,h3,h4,h5,h6{color:var(--heading); letter-spacing:.2px}
h1{font-size: clamp(28px, 4.2vw, 38px); line-height:1.15}
h2{font-size: clamp(22px, 3.2vw, 30px)}
.lead{color:#D3D7DC; font-size:1.1rem}

/* ======= 2.3 BUTTONS ======= */
.button, .btn{
  height: var(--btn-h);
  padding: 0 18px;
  border-radius: var(--radius);
  border:1px solid transparent;
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.2px;
  transition: transform var(--fx), box-shadow var(--fx), background var(--fx);
}
.btn-primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
  color:#201A00;
  box-shadow: 0 6px 16px rgba(255,176,0,.25);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,176,0,.35)}
.btn-ghost{
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary) }
.btn-danger{ background: var(--danger); color:#fff}
.btn-success{ background: var(--success); color:#021915}

/* ======= 2.4 BADGE / CHIP ======= */
.badge{
  display:inline-block; padding:6px 10px; border-radius: 10px;
  background: var(--surface-2); border:1px solid var(--border); color: var(--muted);
  font-size:.85rem; font-weight:600;
}
.badge--hot{ background: rgba(215,38,61,.14); color:#FF9AA7; border-color: rgba(215,38,61,.3)}
.badge--new{ background: rgba(0,194,255,.12); color:#A5E8FF; border-color: rgba(0,194,255,.28)}
.badge--pagcor{ background: rgba(255,176,0,.12); color:#FFE29A; border-color: rgba(255,176,0,.28) }

/* ======= 2.5 RATING STARS (data-rating="4.3") ======= */
.rating{
  --size: 16px;
  position: relative; display:inline-block; font-size:0;
}
.rating::before{
  content: "★★★★★"; letter-spacing:2px; font-size: var(--size); 
  background: linear-gradient(90deg, #FFC94A var(--p,0%), #4C4F55 var(--p,0%));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.rating[data-rating]{
  --p: calc((attr(data-rating number) / 5) * 100%);
}

/* ======= 2.6 OFFER CARD ======= */
.offer-card{
  display:grid; grid-template-columns: 84px 1fr auto; align-items:center;
  gap:18px; padding:16px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.offer-card__logo img{ width:84px; height:84px; object-fit:contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.offer-card__meta h3{ margin:0 0 6px; font-size:1.05rem }
.offer-card__meta .sub{ color: var(--muted); font-size:.92rem }
.offer-card__cta .btn{ min-width:160px }
.offer-card--highlight{ border-color: rgba(255,176,0,.45); position:relative }
.offer-card--highlight::after{
  content:"TOP PICK"; position:absolute; top:-10px; right:18px; 
  background: linear-gradient(90deg, #FFD36A, #FFB000); color:#201A00;
  padding:4px 8px; border-radius:8px; font-size:.75rem; font-weight:800; box-shadow: var(--shadow-1);
}

/* ======= 2.7 OFFER TABLE ======= */
.table-offer{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
}
.table-offer thead th{
  background: #1B1D21; color:#DDE2E7; text-transform:uppercase; font-size:.83rem; letter-spacing:.6px;
  padding:12px 14px; position:sticky; top:0; z-index:2;
}
.table-offer td{ padding:14px; border-top:1px solid var(--border) }
.table-offer tr:hover{ background: #191A1E }

/* ======= 2.8 STEPS / HOW-TO ======= */
.steps{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
}
.step{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px; position:relative;
}
.step__num{
  position:absolute; top:12px; right:12px; width:28px; height:28px; 
  border-radius: 8px; background: var(--surface-2); border:1px solid var(--border);
  display:grid; place-items:center; color: var(--muted); font-weight:800;
}

/* ======= 2.9 PAYMENT GRID ======= */
.pay-grid{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:18px; display:grid; grid-template-columns: repeat(5,1fr); gap:12px;
}
.pay-item{
  background: #2A1D00; border: 1px solid #5A3C00; color:#FFD36A;
  border-radius: 12px; height:44px; display:grid; place-items:center;
  font-weight:700; letter-spacing:.3px; transition: filter var(--fx);
}
.pay-item:hover{ filter: brightness(1.07) }

/* ======= 2.10 FAQ ACCORDION ======= */
.faq{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
}
.faq .faq-item{ border-top:1px solid var(--border) }
.faq .faq-item:first-child{ border-top:none }
.faq .q{ padding:14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center }
.faq .a{ padding:0 14px 14px; display:none; color:#CFD4DA }
.faq .faq-item.active .a{ display:block }

/* ======= 2.11 COMPLIANCE BAR ======= */
.compliance{
  background:#0C1116; border-top:1px solid #1A2027; color:#93A0AE; padding:14px; font-size:.9rem
}
.compliance .logos img{ height:20px; opacity:.85; margin-right:10px }

/* ======= 2.12 UTILITIES ======= */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px }
.surface{ background:var(--surface) }
.surface-2{ background:var(--surface-2) }
.mt-12{ margin-top:12px } .mt-24{ margin-top:24px } .mb-16{ margin-bottom:16px } .mb-28{ margin-bottom:28px }
.p-16{ padding:16px } .p-24{ padding:24px }
.center{ text-align:center }

/* ======= 2.13 RESPONSIVE ======= */
@media (max-width: 991px){
  .offer-card{ grid-template-columns: 70px 1fr; }
  .offer-card__cta{ grid-column: 1 / -1; }
  .steps{ grid-template-columns: 1fr; }
  .pay-grid{ grid-template-columns: repeat(3,1fr) }
}
@media (max-width: 575px){
  .pay-grid{ grid-template-columns: repeat(2,1fr) }
  .button, .btn{ width:100%; justify-content:center }
}