/* ========== Brand Palette ========== */
:root{
  --brand-primary: #FFD54A;     /* glowing FortuneX gold */
  --brand-accent:  #FFB029;     /* warm amber highlight */
  --brand-dark:    #5a0805;     /* deep red-brown background */
  --brand-cocoa:   #72110d;     /* rich gradient mid-tone */
  --text:          #FFF8E1;     /* soft off-white for text */
  --muted:         rgba(255, 248, 225, 0.75);
  --surface:       rgba(255, 248, 225, 0.06);
  --border:        rgba(255, 248, 225, 0.15);
}
/* ========== Base ========== */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--brand-dark);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:1160px;margin-inline:auto;padding:0 1.25rem}
.section{padding:4.5rem 0}
.section__head{margin-bottom:1.25rem;text-align:center}
.section__head h2{margin:0 0 .25rem;font-size:2rem;font-weight:800}
.section__head p{margin:0;color:var(--muted)}
.grid{display:grid;gap:1.5rem}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ========== Header ========== */
.site-head{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-head__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.site-head__brand{
  display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none;
}
.site-logo {
  height: 20px !important;  /*professional header size */
  width: auto !important;
  display: block;
  border-radius: 6px;
}

/* Header Button */
.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 8px;
}

.site-nav .btn--primary {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  color: #fff;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 10px rgba(201, 105, 37, 0.4);
  text-decoration: none;
  transition: all 0.3s ease;
}

.site-nav .btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}


.site-nav{display:flex; gap:1rem}
.site-nav a{
  color:var(--text); text-decoration:none; font-weight:600; opacity:.9;
}
.site-nav a:hover{opacity:1;color:var(--brand-primary)}
@media (max-width:900px){.site-nav{display:none}}

/* ========== HERO ========== */
.hero{position:relative;padding:4rem 0 2rem;overflow:hidden;text-align:center}
.hero__bg{
  position:absolute;inset:0;z-index:-1;opacity:.12;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-cocoa),#000);
}
.hero__copy h1{
  font-size:2.8rem;line-height:1.1;margin:1rem 0 .75rem;font-weight:900;
}
.hero__copy p{color:var(--muted);font-size:1.1rem;max-width:42rem;margin:auto}
.actions{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.btn{
  --bg:transparent; --fg:var(--text);
  display:inline-block; text-decoration:none; padding:.9rem 1.25rem;
  border-radius:14px; border:1px solid var(--border); color:var(--fg);
  background:var(--bg); font-weight:700; text-align:center; transition:.2s ease;
}
.btn--primary{--bg:var(--brand-primary);border-color:transparent;box-shadow:0 12px 24px rgba(54,18,6,.35)}
.btn--primary:hover{filter:brightness(1.1)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}

.hero__image img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  object-fit: cover;
}

/* ========== OFFERINGS ========== */
.offerings .card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:1.25rem;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.offerings .card:hover{
  transform:translateY(-3px);box-shadow:0 26px 48px rgba(0,0,0,.25);
}
.offerings .card h3{margin:.5rem 0;font-size:1.25rem;font-weight:800;color:var(--brand-primary)}
.offerings .card p{color:var(--muted);margin:0}

/* ========== HOW TO START ========== */
.how{
  background:linear-gradient(180deg, var(--brand-cocoa), transparent);
  border-top:1px solid var(--border);
}
.how .step{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:1.25rem;box-shadow:0 18px 36px rgba(0,0,0,.18);
}

/* --- Packages Section (Grid Style) --- */
.packages {
  padding: 5rem 0;
  background: linear-gradient(135deg, #c71e18 0%, #cf0e0e 100%);
}

.package-box {
  background-color: #72110d;
  padding: 3rem;
  border-radius: 15px;
  border: 1px solid rgba(245, 226, 184, 0.2);
  text-align: left;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.package-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border-color: rgba(245, 226, 184, 0.4);
}

.package-box h3 {
  font-weight: 700;
  font-size: 1.8rem;
  color: #F5E2B8;
  margin-bottom: 1rem;
}

.package-box .price {
  font-size: 2.8rem;
  font-weight: 700;
  color: #FFD54A;
  margin: 0.5rem 0 1rem;
}

.package-box .usd {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
}

.package-box p {
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}

.package-box ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
}

.package-box ul li {
  margin-bottom: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

.package-box ul li i {
  color: #F0A44A;
  margin-right: 0.5rem;
}

.grid {
  display: grid;
  gap: 2.5rem;
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- Packages Section Buttons --- */
.package-box .btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: #0a0a0a;
  background: linear-gradient(90deg, #FFD54A 0%, #fcd143 100%);
  padding: 0.9rem 1.2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(190, 87, 13, 0.35);
  transition: all 0.3s ease;
}

.package-box .btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 12px 25px rgba(201, 190, 37, 0.5);
}

/* --- How Section Image Placeholder --- */
.how__image {
  margin-top: 3rem;
  text-align: center;
}

.how__image img {
  width: 100%;
  max-width: 700px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  transition: transform 0.4s ease;
}

.how__image img:hover {
  transform: scale(1.03);
}

.withdrawal-flyer {
  margin-top: 1.5rem;
  text-align: center;
}

.flyer-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--brand-primary);
}




/* ========== WHY CHOOSE ========== */
.reasons .reason{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:1.25rem;text-align:center;
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}
.reasons .reason h3{color:var(--brand-primary);font-weight:800;margin-bottom:.5rem}
.reasons .reason p{color:var(--muted);margin:0}

/* ========== FAQ ========== */
.faq{
  background:linear-gradient(180deg, var(--brand-dark), var(--brand-cocoa));
  border-top:1px solid var(--border);
}
.accordion-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;margin-bottom:.75rem;
}
.accordion-button{
  background:transparent;color:var(--text);font-weight:600;
  border:none;box-shadow:none;
}
.accordion-button:not(.collapsed){
  color:var(--brand-primary);background:rgba(201,105,37,.08);
}
.accordion-button:focus{box-shadow:none}
.accordion-body{color:var(--muted)}

/* ========== CTA ========== */
.cta{padding:3rem 0;text-align:center;background:linear-gradient(180deg,var(--brand-accent),transparent)}
.cta h3{font-size:2rem;font-weight:900;margin-bottom:.5rem}
.cta p{color:var(--muted);margin-bottom:1.25rem}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .popup-box {
    background: var(--brand-cocoa, #361206);
    color: #fff;
    padding: 2rem;
    border-radius: 16px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: fadeInScale 0.4s ease;
  }

  .popup-box h2 {
    color: var(--brand-primary, #C96925);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
  }
  .popup-box p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
    font-size: 1rem;
  }

  .popup-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .popup-btn {
    display: inline-block;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
  }

  .popup-btn.telegram { background: #229ED9; }
  .popup-btn.whatsapp { background: #25D366; }

  .popup-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }

  .popup-close {
    margin-top: 1.25rem;
    background: var(--brand-primary, #C96925);
    border: none;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .popup-close:hover {
    background: var(--brand-accent, #6C3213);
  }

  @keyframes fadeInScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }


/* --- Scroll to Top Button --- */
#scrollTopBtn {
  position: fixed;
  bottom: 20px; 
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD54A 0%, #FFD54A 100%);
  color: #070707;
  border: none;
  outline: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(201, 105, 37, 0.35);
  z-index: 9999;
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, #A75512 0%, #C96925 100%);
  transform: translateX(-50%) scale(1.05);
}

/* Show button when scrolling down */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}


/* --- Live Counter Style --- */
  .live-counter {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #F5E2B8;
    margin-top: 1rem;
  }

  /* --- Floating Payment Notifications --- */
  #payment-popup-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 9999;
  }

  .payment-popup {
    background: linear-gradient(135deg, #C96925 0%, #A75512 100%);
    color: #fff;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(201,105,37,0.35);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.5s ease forwards;
  }

  @keyframes fadeSlideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #floatingSupportBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: linear-gradient(135deg, #FFD54A 0%, #C96925 100%);
  color: #111;
  padding: 15px 20px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s ease;
}

#floatingSupportBtn:hover {
  transform: scale(1.1);
}

/* --- Mobile Hamburger Menu --- */
@media screen and (max-width: 768px) {
  /* Show hamburger icon only */
  .hamburger {
    display: flex !important;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }

  /* Hide other nav items */
  .site-nav {
    display: none !important;
  }

  /* Overlay menu that pops up */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;             /* Hidden by default */
    height: 100vh;
    background: rgba(0,0,0,0.95);
    overflow-x: hidden;    /* Prevent horizontal scroll */
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    padding-left: 1.5rem;
    gap: 1.5rem;
    transition: width 0.3s ease;
    z-index: 1000;
  }

  .nav-links.active {
    width: 220px; /* Slide in width when active */
  }

  /* Center menu items text */
  .nav-links li {
    text-align: left;
    width: 100%;
  }

  .nav-links li a {
    display: block;
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
    padding: 0.5rem 0;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .nav-links li a:hover {
    color: var(--brand-primary);
  }
}

/* --- Pulse Animation for Title --- */

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

#counter-title {
  color: #FFD54A;
  font-weight: 600;
  font-size: 1.2rem;
  animation: pulse 3s infinite ease-in-out;
}

/* --- Glow Flash for the Counter --- */
@keyframes glowFlash {
  0%   { text-shadow: 0 0 10px #FFD54A, 0 0 20px #FFD54A; color: #fff; }
  50%  { text-shadow: 0 0 25px #FFD54A, 0 0 40px #FFD54A; color: #FFD54A; }
  100% { text-shadow: none; color: #fff; }
}

.glow {
  animation: glowFlash 1s ease-out;
}

/* ========== FOOTER ========== */
.footer{border-top:1px solid var(--border);padding:1.25rem;text-align:center;color:rgba(255,255,255,.6)}