/* ============================================================
   JustinGambles — Home Page Styles
   Extracted from views/pages/home.php
============================================================ */


/* ===== GOLD PREMIUM REWARDS BLOCK ===== */
.gold-rewards{
  margin-top: 22px;
  padding: 0 6px 10px;
}

.gold-inner{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);

  background-image: linear-gradient(
    90deg,
    #C48747 0%,
    rgba(0,0,0,0) 100%
  );
}

.gold-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      900px 420px at 0% 50%,
      rgba(255,255,255,.10),
      transparent 60%
    );
  pointer-events:none;
}





.gold-inner{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items:center;
}

.gold-left, .gold-right{
  position: relative;
  z-index: 1;
}

/* Typography */
.gold-kicker{
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

.gold-title{
  margin: 8px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .2px;
  color: #fff;
}

.gold-sub{
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  font-size: 14px;
  max-width: 520px;
}
.gold-sub strong{ color: #fff; }

/* Reward tiles */
.gold-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gold-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.gold-item:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.28);
}

.gold-ico{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}


.gold-item-title{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1.05;
  color: #fff;
  font-size: 16px;
}

/* Chest image */
.gold-right{
  display:flex;
  justify-content:center;
  align-items:center;
}

.gold-chest{
  width: min(420px, 100%);
  height: auto;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.55));
  transform: translateY(2px);
}

/* Responsive */
@media (max-width: 980px){
  .gold-inner{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .gold-right{ order: 2; }
  .gold-left{ order: 1; }
  .gold-chest{
    width: min(360px, 92%);
  }
}
@media (max-width: 520px){
  .gold-grid{ grid-template-columns: 1fr; }
}

/* ===== HERO BLOCK (NO BACKGROUND / NO BORDER) ===== */
.hero-clean{
  padding: 28px 6px 10px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  align-items:center;
}

/* KING SIDE */
.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-glow{
  position:absolute;
  width: 82%;
  height: 82%;
  background:
    radial-gradient(circle, rgba(196,135,71,.10), transparent 70%);
  filter: blur(4px);
  z-index:0;
}

.hero-king{
  position:relative;
  z-index:1;
  width:100%;
  max-width: 460px; /* keeps height aligned with text */
  height:auto;
  object-fit:contain;
}

/* INFO SIDE */
.hero-info{
  max-width: 620px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid rgba(196,135,71,.24);
  background: rgba(255,255,255,.02);
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,238,247,.88);
}

.hero-badge img{
  width:18px;
  height:18px;
  object-fit:contain;
  border-radius:50%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}


.hero-title{
  margin: 14px 0 6px;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: .3px;
}

.hero-desc{
  margin: 0;
  max-width: 560px;
  color: rgba(170,180,197,.92);
  font-size: 15px;
  line-height: 1.65;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* BUTTONS */
.btn-primary{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: #140c06;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  border: 1px solid rgba(243,208,138,.6);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}

.btn-ghost{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: rgba(233,238,247,.92);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(196,135,71,.18);
}
.btn-ghost:hover{
  border-color: rgba(196,135,71,.32);
}

@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-info{
    text-align:center;
    margin-inline:auto;
  }
  .hero-actions{
    justify-content:center;
  }
  .hero-glow{
    width: 70%;
    height: 70%;
  }
}

/* ===== POWER STATS (PREMIUM BLOCK) ===== */
.power-wrap{
  margin-top: 26px;
  padding: 0 6px;
}

.power-card{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Soft glow behind */
.power-card::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(520px 260px at 18% 25%, rgba(196,135,71,.14), transparent 65%),
    radial-gradient(520px 260px at 82% 55%, rgba(243,208,138,.08), transparent 65%);
  filter: blur(6px);
  opacity: .9;
  pointer-events:none;
}

.power-top{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.power-title{
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,238,247,.88);
}

.power-sub{
  font-size: 12px;
  color: rgba(170,180,197,.88);
}

/* Grid */
.power-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:center;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.power-item{
  text-align:center;
  padding: 6px 0;
}

.power-value{
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 950;
  letter-spacing: .6px;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.power-label{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(233,238,247,.82);
}

.power-divider{
  width:1px;
  height:44px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(196,135,71,.45),
    transparent
  );
}

/* Mobile */
@media (max-width: 780px){
  .power-top{flex-direction:column; align-items:flex-start}
  .power-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .power-divider{display:none}
  .power-item{text-align:left}
}
/* ===== SOCIALS BLOCK ===== */
.socials-wrap{
  margin-top: 22px;
  padding: 0 6px 10px;
}

.socials-card{
  position: relative;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
}

.socials-card::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(196,135,71,.12), transparent 65%),
    radial-gradient(520px 260px at 80% 55%, rgba(243,208,138,.07), transparent 65%);
  filter: blur(6px);
  pointer-events:none;
}

.socials-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.socials-kicker{
  font-weight:950;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(233,238,247,.88);
}

.socials-title{
  margin: 8px 0 6px;
  font-size: 20px;
  letter-spacing: .2px;
}

.socials-sub{
  margin: 0;
  color: rgba(170,180,197,.92);
  line-height: 1.6;
  font-size: 14px;
  max-width: 520px;
}

.socials-big{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px;
  border-radius: 18px;
  text-decoration:none;
  border: 1px solid rgba(243,208,138,.30);
  background: linear-gradient(135deg, rgba(196,135,71,.18), rgba(255,255,255,.02));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

.socials-big:hover{ border-color: rgba(243,208,138,.48); }

.socials-big .sicon{
  width:42px;height:42px;
  border-radius: 14px;
  border: 1px solid rgba(243,208,138,.32);
  background: rgba(196,135,71,.10);
  display:flex;align-items:center;justify-content:center;
}

.socials-big svg{ fill: rgba(243,208,138,.92); }

.socials-big .stext{ display:flex; flex-direction:column; gap:2px; }
.socials-big .slabel{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: rgba(233,238,247,.80);
  font-weight:900;
}
.socials-big .sname{
  font-size:16px;
  letter-spacing: .6px;
  text-transform:uppercase;
  font-weight:950;
  color: rgba(233,238,247,.96);
}
.socials-big .sarrow{
  color: rgba(243,208,138,.92);
  font-weight: 950;
  font-size: 18px;
}

/* tiles grid */
.socials-grid{
  position:relative;
  z-index:1;
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.social-tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 18px;
  text-decoration:none;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease, border-color .15s ease;
}

.social-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(196,135,71,.24);
}

.tile-ico{
  width:40px;height:40px;
  border-radius: 14px;
  border: 1px solid rgba(196,135,71,.20);
  background: rgba(196,135,71,.08);
  display:flex;align-items:center;justify-content:center;
}

.tile-ico svg{ fill: rgba(233,238,247,.92); opacity:.95; }

.tile-name{
  flex:1;
  font-weight:950;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(233,238,247,.92);
}

.tile-go{
  color: rgba(243,208,138,.92);
  font-weight: 950;
  font-size: 18px;
}

/* responsive */
@media (max-width: 980px){
  .socials-head{ grid-template-columns: 1fr; }
  .socials-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .socials-grid{ grid-template-columns: 1fr; }
}  
  








/* ===== PERKS BLOCK (like hero, switched sides) ===== */
.perks-clean{
  margin-top: 22px;
  padding: 10px 6px;
}
.tile-ico svg,
.socials-big svg {
  overflow: visible;
}

.perks-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:center;
}

/* Left info */
.perks-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(196,135,71,.24);
  background: rgba(255,255,255,.02);
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,238,247,.88);
  width: fit-content;
}

.perks-title{
  margin: 14px 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: .2px;
}

.perks-desc{
  margin: 0;
  max-width: 620px;
  color: rgba(170,180,197,.92);
  font-size: 15px;
  line-height: 1.65;
}

/* Code block */
.perks-codebox{
  margin-top: 16px;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

.perks-kicker{
  font-weight:950;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(233,238,247,.88);
  margin-bottom: 8px;
}

.perks-code-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.perks-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px dashed rgba(243,208,138,.55);
  background:rgba(196,135,71,.10);
  font-weight:950;
  letter-spacing: 1px;
}
.perks-note{
  margin-top: 8px;
  color: rgba(170,180,197,.92);
  font-size: 13px;
  line-height: 1.55;
}

/* Perk list */
.perks-list{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.perk{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease, border-color .15s ease;
}
.perk:hover{
  transform: translateY(-2px);
  border-color: rgba(196,135,71,.22);
}
.perk-ico{
  width:42px;
  height:42px;
  border-radius: 14px;
  border: 1px solid rgba(196,135,71,.20);
  background: rgba(196,135,71,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.perk-ico svg{ width:18px; height:18px; fill: rgba(243,208,138,.92); }

.perk h3{
  margin:0 0 4px;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.perk p{
  margin:0;
  color: rgba(170,180,197,.92);
  font-size: 13px;
  line-height: 1.55;
}

/* Right visual */
/* Right visual column */
.perks-visual{
  position: relative;
  display:flex;
  justify-content:center;
}

.perks-visual-inner{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction: column;
  align-items:center;
}

/* glow stays behind everything */
.perks-glow{
  position:absolute;
  inset: 10% 10% auto 10%;
  height: 60%;
  background:
    radial-gradient(circle, rgba(196,135,71,.10), transparent 70%),
    radial-gradient(circle, rgba(243,208,138,.06), transparent 72%);
  filter: blur(6px);
  z-index:0;
}

/* image sizing */
.perks-char{
  width:100%;
  max-width: 440px;
  height:auto;
  object-fit:contain;
  display:block;
}

/* buttons under image */
.perks-visual-actions{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}


/* Responsive */
@media (max-width: 980px){
  .perks-grid{ grid-template-columns: 1fr; gap: 18px; }
  .perks-badge{ margin-inline:auto; }
  .perks-title, .perks-desc{ text-align:center; margin-inline:auto; }
  .perks-codebox{ text-align:center; }
  .perks-code-row{ justify-content:center; }
}

.perks-title{
  margin: 14px 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: .3px;
  text-transform: uppercase;

  display:flex;
  align-items:center;
  gap: 18px; /* 👈 more space between text and pill */
  flex-wrap:wrap;
}

.perks-code-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px dashed rgba(243,208,138,.55);
  background: rgba(196,135,71,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
  cursor: pointer;
  position: relative;
}
.perks-code-pill:hover{
  border-color: rgba(243,208,138,.75);
}

.perks-code-pill::after{
  content: "CLICK TO COPY";
  position:absolute;
  bottom: -18px;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(170,180,197,.85);
  opacity: 0;
  transition: opacity .15s ease;
}

.perks-code-pill:hover::after{
  opacity: 1;
}

.perks-code-pill.copied::after{
  content: "COPIED ✓";
  color: rgba(243,208,138,.95);
  opacity: 1;
}

.perks-code-gradient{
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    var(--gold2),
    var(--gold),
    #f7e3a1
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



@media (max-width: 520px){
  .perks-code-pill{
    margin-left: 0;
    margin-top: 10px;
  }
  .perks-title{ display:flex; flex-direction:column; gap:10px; }
}
.perks-visual-actions{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* reuse your hero button styles */
.btn-primary{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: #140c06;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  border: 1px solid rgba(243,208,138,.6);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}

.btn-ghost{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: rgba(233,238,247,.92);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(196,135,71,.18);
}
.btn-ghost:hover{ border-color: rgba(196,135,71,.32); }
.perks-copy-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 10px;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease;
}

.perks-copy-icon svg{
  width:16px;
  height:16px;
  fill: rgba(233,238,247,.92);
}

.perks-code-pill:hover .perks-copy-icon{
  opacity: 1;
  transform: translateY(-1px);
}

/* copied state */
.perks-code-pill.copied .perks-copy-icon svg{
  fill: rgba(243,208,138,.95);
}




/* ===== FINAL CTA ===== */
.final-cta{
  margin-top: 22px;
  padding: 0 6px 18px;
}

.final-cta-inner{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  padding: 22px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(196,135,71,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
}

.final-cta-inner::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 360px at 18% 30%, rgba(196,135,71,.18), transparent 60%),
    radial-gradient(700px 360px at 80% 65%, rgba(243,208,138,.10), transparent 62%);
  filter: blur(8px);
  pointer-events:none;
}

.final-cta-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:center;
}

.final-kicker{
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,238,247,.88);
}

.final-title{
  margin: 10px 0 6px;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: .2px;
}

.final-sub{
  margin: 0;
  color: rgba(170,180,197,.92);
  line-height: 1.6;
  font-size: 14px;
  max-width: 560px;
}

.final-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(243,208,138,.45);
  background: rgba(196,135,71,.08);
  width: fit-content;
}

.final-pill .label{
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(233,238,247,.88);
}

.final-pill .code{
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold2), var(--gold), #f7e3a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons (reuse same styles if already defined; duplicated here to be safe) */
.final-actions{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  gap: 12px;
  flex-wrap:wrap;
}

.btn-primary{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: #140c06;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  border: 1px solid rgba(243,208,138,.6);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}

.btn-ghost{
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration:none;
  color: rgba(233,238,247,.92);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(196,135,71,.18);
}
.btn-ghost:hover{ border-color: rgba(196,135,71,.32); }

@media (max-width: 980px){
  .final-cta-content{ grid-template-columns: 1fr; }
  .final-actions{ justify-content:flex-start; }
}
@media (max-width: 620px){
  .final-actions a{ width: 100%; text-align:center; }
}