/* =========================================================
   SystemPLAY — Clube de Indicação PREMIUM
========================================================= */

:root{
  --bg:#070707;
  --panel:#121212;
  --panel-2:#171717;
  --glass:rgba(255,255,255,.05);

  --text:#ffffff;
  --muted:#cfcfcf;

  --primary:#00e676;
  --primary-dark:#009624;

  --shadow:
    0 10px 30px rgba(0,0,0,.35);

  --radius:20px;
}

/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{

  font-family:
    'Poppins',
    system-ui,
    -apple-system,
    sans-serif;

  background:
    radial-gradient(
      1200px 800px at 20% -10%,
      rgba(0,230,118,.08),
      transparent 60%
    ),
    radial-gradient(
      900px 700px at 100% 0%,
      rgba(0,230,118,.03),
      transparent 60%
    ),
    var(--bg);

  color:var(--text);

  line-height:1.55;
}

/* =========================================================
   HEADER
========================================================= */

.header{

  text-align:center;

  padding:34px 18px 28px;

  border-bottom:
    1px solid rgba(255,255,255,.05);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.30),
      transparent
    );
}

.header-logo{

  height:150px;
  width:auto;

  display:block;

  margin:
    -35px auto -35px;

  object-fit:contain;
}

.header-title{

  margin:0;

  font-size:
    clamp(1.9rem,3vw,3rem);

  font-weight:800;

  line-height:1.18;

  padding-bottom:10px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #00ff88
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.header-subtitle{

  max-width:680px;

  margin:12px auto 0;

  font-size:.96rem;

  color:var(--muted);

  line-height:1.7;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{

  width:100%;
  max-width:980px;

  margin:0 auto;

  padding:22px 16px 50px;
}

/* =========================================================
   GLASS
========================================================= */

.glass{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:18px;

  box-shadow:var(--shadow);

  backdrop-filter:blur(10px);

  padding:22px;
}

/* =========================================================
   HERO
========================================================= */

.hero{
  text-align:center;
}

.hero h2{

  margin-top:0;

  font-size:
    clamp(1.5rem,3vw,2.1rem);

  margin-bottom:14px;
}

.hero-text{

  max-width:650px;

  margin:0 auto 26px;

  color:var(--muted);

  font-size:.92rem;

  line-height:1.75;
}

/* =========================================================
   GRID
========================================================= */

.grid{
  display:grid;
  gap:18px;
}

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

/* =========================================================
   CARD
========================================================= */

.card{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.012)
    );

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:18px;

  padding:20px 18px;

  text-align:center;

  transition:.25s ease;
}

.card:hover{

  transform:translateY(-3px);

  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    0 0 20px rgba(0,230,118,.06);
}

.card h3{

  margin-top:0;

  margin-bottom:18px;

  font-size:1.15rem;

  line-height:1.35;
}

/* =========================================================
   LIST
========================================================= */

.steps-list{

  margin:0 auto;

  padding-left:18px;

  display:flex;
  flex-direction:column;

  gap:12px;

  text-align:left;

  max-width:300px;

  font-size:.95rem;
}

/* =========================================================
   REWARD
========================================================= */

.reward-text{
  color:#d7d7d7;
  font-size:.92rem;
}

.reward-highlight{

  margin:14px auto;

  max-width:260px;

  background:
    linear-gradient(
      135deg,
      #00ff88,
      #00c767
    );

  color:#000;

  font-weight:800;

  font-size:1.35rem;

  border-radius:16px;

  padding:16px;

  text-align:center;

  box-shadow:
    0 0 25px rgba(0,255,136,.18);
}

.reward-small{
  opacity:.72;
  font-size:.88rem;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  border:none;

  text-decoration:none;

  cursor:pointer;

  color:#fff;

  font-weight:700;

  font-size:.92rem;

  padding:13px 18px;

  border-radius:13px;

  transition:.25s ease;

  min-height:48px;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary-dark)
    );

  box-shadow:
    0 0 18px rgba(0,230,118,.14);
}

.btn-secondary{

  background:
    linear-gradient(
      90deg,
      #18b7a3,
      #0d8b79
    );
}

.btn-center{

  display:flex;
  justify-content:center;

  margin-top:22px;
}

.btn,
button.btn{

  appearance:none;
  -webkit-appearance:none;

  border:none;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary-dark)
    );

  color:#fff !important;

  font-family:'Poppins',sans-serif;

  font-weight:700;

  cursor:pointer;
}

/* =========================================================
   GENERATOR
========================================================= */

.generator{
  margin-top:24px;
}

.generator h2{

  text-align:center;

  font-size:
    clamp(1.5rem,3vw,2rem);

  margin-top:0;
}

.generator-text{

  text-align:center;

  max-width:620px;

  margin:0 auto 24px;

  color:var(--muted);

  font-size:.92rem;

  line-height:1.7;
}

.form{

  display:grid;
  gap:14px;

  max-width:600px;

  margin:0 auto;
}

.field{

  display:grid;
  gap:7px;

  text-align:left;
}

.field label{

  font-weight:600;

  font-size:.92rem;
}

input[type="text"],
input[type="tel"],
input[type="url"]{

  width:100%;

  background:#0e0e0e;

  border:
    1px solid rgba(255,255,255,.08);

  color:#fff;

  padding:13px;

  border-radius:13px;

  font-size:.92rem;

  transition:.25s ease;
}

input:focus{

  outline:none;

  border-color:
    rgba(0,230,118,.45);

  box-shadow:
    0 0 0 4px rgba(0,230,118,.08);
}

/* =========================================================
   RESULT
========================================================= */

.result{
  margin-top:22px;
}

.result-title{
  text-align:center;
}

.hidden{
  display:none;
}

.actions{

  display:flex;
  flex-wrap:wrap;

  gap:10px;

  justify-content:center;

  margin-top:14px;
}

#linkGerado{
  margin-top:10px;
}

/* =========================================================
   BANNERS
========================================================= */

.banner-section{

  margin-top:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );

  padding:22px;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,.05);
}

.banner-title{

  text-align:center;

  margin-top:0;
  margin-bottom:20px;

  font-size:1.15rem;
}

.banner-grid{

  display:flex;

  justify-content:center;

  align-items:flex-start;

  gap:18px;

  flex-wrap:wrap;
}

.banner-card{

  width:220px;

  background:#151515;

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:16px;

  padding:12px;

  text-align:center;

  transition:.25s ease;
}

.banner-card:hover{

  transform:translateY(-3px);

  box-shadow:
    0 0 20px rgba(0,230,118,.08);
}

.banner-img{

  width:100%;

  height:auto;

  max-height:390px;

  object-fit:contain;

  border-radius:10px;

  margin-bottom:12px;

  display:block;
}

.btn-download{

  display:inline-flex;

  justify-content:center;
  align-items:center;

  width:100%;

  text-decoration:none;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary-dark)
    );

  color:#fff;

  padding:11px 14px;

  border-radius:11px;

  font-size:.88rem;

  font-weight:700;

  transition:.25s ease;
}

/* =========================================================
   REGULAMENTO
========================================================= */

.regulamento{
  margin-top:24px;
}

.regulamento h2{

  text-align:center;

  margin-top:0;

  font-size:1.6rem;
}

.rules-list{

  max-width:700px;

  margin:0 auto;

  display:flex;
  flex-direction:column;

  gap:12px;

  font-size:.94rem;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{

  padding:24px 18px;

  text-align:center;

  color:var(--muted);

  font-size:.9rem;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

  .glass{
    padding:18px;
  }

  .header{
    padding:22px 16px 20px;
  }

  .header-logo{

    height:105px;

    margin:
      -8px auto 4px;
  }

  .header-title{

    font-size:2rem;

    line-height:1.15;

    padding-bottom:8px;
  }

  .header-subtitle{
    font-size:.92rem;
    line-height:1.6;
  }

  .hero h2,
  .generator h2,
  .regulamento h2{
    font-size:1.4rem;
  }

  .hero-text,
  .generator-text{
    font-size:.9rem;
  }

  .card{
    padding:18px 16px;
  }

  .card h3{
    font-size:1.05rem;
  }

  .reward-highlight{
    font-size:1.15rem;
    padding:15px;
  }

  .btn{
    width:100%;
  }

  .actions{
    flex-direction:column;
  }

  .banner-card{
    width:100%;
    max-width:240px;
  }

  .rules-list{
    padding-left:18px;
  }

}

@media (max-width:480px){

  .container{
    padding:18px 12px 45px;
  }

  .glass{
    border-radius:16px;
    padding:16px;
  }

  .header{

    padding-top:18px;
  }

  .header-logo{

    height:92px;

    margin:
      -2px auto 8px;
  }

  .header-title{

    font-size:1.95rem;

    line-height:1.12;

    padding-bottom:8px;
  }

  .header-subtitle{
    font-size:.9rem;
  }

  .hero h2,
  .generator h2,
  .regulamento h2{
    font-size:1.3rem;
  }

  .card h3{
    font-size:1rem;
  }

  .reward-highlight{
    font-size:1.05rem;
  }

  input[type="text"],
  input[type="tel"]{
    padding:13px;
    font-size:16px;
  }

}

/* =========================================================
   QUICK ACCESS
========================================================= */

.quick-access{

  margin-bottom:24px;

  background:
    linear-gradient(
      135deg,
      rgba(0,230,118,.12),
      rgba(0,230,118,.04)
    );

  border:
    1px solid rgba(0,230,118,.18);

  border-radius:20px;

  padding:22px;

  text-align:center;

  box-shadow:
    0 0 30px rgba(0,230,118,.08);
}

.quick-access h3{

  margin-top:0;

  margin-bottom:10px;

  font-size:1.35rem;
}

.quick-access p{

  margin:0 auto 18px;

  max-width:600px;

  color:var(--muted);

  line-height:1.7;
}

.quick-access-buttons{

  display:flex;

  justify-content:center;

  gap:12px;

  flex-wrap:wrap;
}

.quick-access .btn{

  min-width:220px;
}

.quick-access-link{

  margin-top:14px;

  display:block;

  font-size:.88rem;

  color:#9df7c5;

  word-break:break-all;

  opacity:.85;
}

@media (max-width:768px){

  .quick-access{
    padding:18px;
  }

  .quick-access-buttons{
    flex-direction:column;
  }

  .quick-access .btn{
    width:100%;
    min-width:unset;
  }

}