/* =========================
   Global Variables
========================= */
:root {
  --accent:#ffb742;
  --accent-2:#ffd77a;
  --dark-900:#050812;
  --muted:#94a3b8;
  --green-gold:#28d17c;
}

/* =========================
   Base
========================= */
html,body { height:100%; margin:0; }
body {
  background:#050812;
  color:#fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }

/* =========================
   Header
========================= */
.site-header .navbar {
  background: rgba(5,8,18,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .navbar .nav-link {
  color: #dbe1ea;
  margin-right: .75rem;
  font-weight: 500;
}
.site-header .navbar .nav-link.active,
.site-header .navbar .nav-link:hover {
  color: var(--accent);
}
.btn-auth {
  border-radius: 10px;
  font-weight: 700;
  padding: .45rem .9rem;
  transition: all 0.25s ease;
}
.btn-auth.solid {
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #071024;
}
.btn-auth.outline {
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
@media (max-width: 768px) {
  .navbar-nav .nav-item { text-align: center; margin: 0.3rem 0; }
  .btn-auth, .btn { width: 100%; }
}

/* =========================
   Hero
========================= */
.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:4rem 0 6rem;
  background-image: linear-gradient(to bottom right,rgba(3,10,22,0.75),rgba(7,20,39,0.85)), url('/static/img/hero-bg.png');
  background-size:cover;
  background-position:center top;
}
.hero h1 { font-size:2.8rem;font-weight:800 }
.hero p { color:var(--muted);font-size:1.1rem }
@media (max-width: 767.98px) {
  .hero { min-height: calc(100vh - 60px); padding: 3rem 0 3.5rem; }
  .hero h1 { font-size: 1.9rem; line-height: 1.25; }
}

/* =========================
   Buttons
========================= */
.cta-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;color:#071024;font-weight:700;
  padding:.8rem 1.6rem;border-radius:10px;
  transition:transform .14s ease, box-shadow .14s ease;
}
.cta-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(255,183,66,.12)
}

/* =========================
   Widgets
========================= */
.trust-pill {
  background:rgba(0,0,0,.25);
  padding:.4rem .6rem;border-radius:999px;
  font-size:.85rem;border:1px solid rgba(255,255,255,.04);
  margin-right:.5rem
}
.widget-gold {
  background:rgba(0,0,0,.35);border:1px solid var(--accent);
  border-radius:14px;padding:1.2rem;
  backdrop-filter:blur(6px);
  transition:transform .18s ease, box-shadow .18s ease
}
.widget-gold:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.45)
}

/* =========================
   Sections
========================= */
section h2 { font-weight:800;color:var(--accent);margin-bottom:1.25rem }
.muted { color:var(--muted) }

/* Testimonials */
.testimonial-item {
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:1.5rem;
  min-height:190px;display:flex;flex-direction:column;justify-content:center
}
.testimonial-item img {
  width:60px;height:60px;border-radius:50%;object-fit:cover;
  border:2px solid var(--accent)
}

/* =========================
   Payment Methods
========================= */
.payments-section {
  background:#f9fafb;color:#111;
  border-top:1px solid rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.04);
  padding:3rem 0;
}
.payments-section .section-title { color:#222 }

/* Flexible grid for payment icons */
.payment-row {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:1rem;
  justify-items:center;
}
.payment-card {
  background:#fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
}
.payment-card img {
  max-height: 40px;
  margin: auto;
  display: block;
}
.payment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.payment-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255,183,66,0.4);
  transform: scale(1.05);
}

/* =========================
   FAQ
========================= */
.faq-cols .accordion-button { background:#0d1327;color:#fff }
.accordion-button:not(.collapsed) { background:var(--accent);color:#071024 }

/* =========================
   Footer
========================= */
footer {
  background:#0c1021;border-top:2px solid var(--accent);color:#fff
}
footer a { color:#fff;transition:color .3s }
footer a:hover { color:var(--accent) }

/* =========================
   Responsive Tweaks
========================= */
@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero { padding: 3rem 0; }
  .widget-gold { margin-bottom: 1rem; }
  footer .d-flex.gap-3 { justify-content: center; }
}