/*==================================================
        AFFILIATE SHOWCASE STYLE
==================================================*/

.affiliate-showcase {
    width:100%;
    padding:90px 0;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at top left,#004aad33,transparent 40%),
      radial-gradient(circle at bottom right,#7a00ff22,transparent 35%),
      linear-gradient(180deg,#05070d,#0a1020);
}

/*=========================
   HEADING CONTAINER
=========================*/
.affiliate-heading-container {
    text-align:center;
    margin-bottom:60px;
    padding:20px;
    background:rgba(255,255,255,.05);
    border-radius:20px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 0 25px rgba(0,216,239,.35);
}

.affiliate-heading-title {
    font-size:28px;
    font-weight:900;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:15px;
    text-shadow:0 0 10px #00d8ef,0 0 20px #00d8ef,0 0 40px #7a00ff;
    animation:glowPulse 3s infinite alternate;
}

.affiliate-heading-subtitle {
    font-size:18px;
    font-weight:600;
    background:linear-gradient(90deg,#00d8ef,#7a00ff,#ff0080);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-size:200% auto;
    animation:shineFlow 6s linear infinite;
    letter-spacing:1px;
}

.affiliate-intro {
    font-size:16px;
    color:rgba(255,255,255,.85);
    max-width:800px;
    margin:20px auto 0;
    line-height:1.7;
}

/*=========================
   GRID LAYOUT
=========================*/
.affiliate-grid {
    width:90%;
    max-width:1600px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
    position:relative;
    z-index:2;
}

/*=========================
   GLASS PANEL
=========================*/
.affiliate-panel {
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:35px 28px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 18px 45px rgba(0,0,0,.35);
    transition:.45s ease;
}

.affiliate-panel::before {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    top:-120px;
    right:-120px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,216,239,.28),transparent 70%);
    transition:.6s;
}

.affiliate-panel:hover {
    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 40px rgba(0,216,239,.18);
}

.affiliate-panel:hover::before {
    transform:scale(1.4);
}

/*=========================
   NUMBER, TITLE, DESCRIPTION
=========================*/
.affiliate-number {
    font-size:32px;
    font-weight:900;
    color:#00d8ef;
    margin-bottom:15px;
    text-shadow:0 0 10px #00d8ef,0 0 20px #7a00ff;
}

.affiliate-panel-title {
    font-size:22px;
    font-weight:700;
    color:#fff;
    margin-bottom:12px;
}

.affiliate-panel-description {
    font-size:15px;
    color:rgba(255,255,255,.80);
    line-height:1.6;
}

/*=========================
   ANIMATIONS
=========================*/
@keyframes glowPulse {
    from { text-shadow:0 0 10px #00d8ef,0 0 20px #00d8ef; }
    to   { text-shadow:0 0 20px #7a00ff,0 0 40px #ff0080; }
}

@keyframes shineFlow {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/*=========================
   RESPONSIVE
=========================*/
@media(max-width:991px){
  .affiliate-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .affiliate-showcase {
    padding:60px 0;
  }
  .affiliate-grid {
    width:95%;
    grid-template-columns:1fr;
    gap:24px;
  }
  .affiliate-panel {
    padding:24px;
  }
  .affiliate-heading-title {
    font-size:22px;
  }
  .affiliate-heading-subtitle {
    font-size:16px;
  }
  .affiliate-number {
    font-size:26px;
  }
  .affiliate-panel-title {
    font-size:20px;
  }
  .affiliate-panel-description {
    font-size:14px;
    line-height:1.5;
  }
}