/* ── Design tokens ─────────────────────────────────────────── */
:root{
  --bg:            #0B0C0E;
  --surface:       #16181C;
  --surface-2:     #1E2126;
  --border:        #2A2D33;
  --text:          #F2EFE8;
  --text-dim:      #9A9C9F;
  --gold:          #E1962F;
  --gold-dim:      #8A5E20;
  --wa-green:      #25D366;
  --wa-green-dim:  #17A053;
  --danger:        #E15353;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 14px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

/* subtle film-grain so the near-black field isn't flat */
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.035;
  z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 28px;
  max-width:960px;
  margin:0 auto;
  width:100%;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:30px; height:30px;
  border-radius:8px;
  object-fit:cover;
  display:block;
  background: var(--surface-2);
  border:1px solid var(--border);
}

/* ── Live connected-count badge ───────────────────────────────*/
.live-stat{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color: var(--text-dim);
  border:1px solid var(--border);
  padding:7px 12px;
  border-radius:999px;
}
.live-dot{
  width:7px; height:7px;
  border-radius:50%;
  background: var(--wa-green);
  box-shadow: 0 0 0 0 rgba(37,211,102,.6);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.brand-name{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0.04em;
  font-size:15px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar-link{
  text-decoration:none;
  font-size:13px;
  color: var(--text-dim);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:999px;
  transition: color .2s ease, border-color .2s ease;
}
.topbar-link:hover{ color:var(--wa-green); border-color: var(--wa-green-dim); }

.lang-switch{
  display:flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.lang-btn{
  border:none;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
  padding:6px 11px;
  border-radius:999px;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-btn[aria-pressed="true"]{
  background: var(--gold);
  color:#1A1206;
}
.lang-btn:not([aria-pressed="true"]):hover{ color:var(--text); }

/* ── Hero ──────────────────────────────────────────────────── */
main{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  width:100%;
  padding: 8px 28px 60px;
  flex:1;
}

.hero{ padding: 28px 0 40px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--wa-green);
  margin:0 0 14px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height:1.02;
  margin:0 0 20px;
  letter-spacing:-0.01em;
}
.lede{
  max-width:52ch;
  color: var(--text-dim);
  font-size:16px;
  line-height:1.6;
  margin:0;
}
.lede strong{ color:var(--text); font-weight:600; }

/* ── Panel / card ──────────────────────────────────────────── */
.panel{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  max-width:460px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}

.step-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--gold);
  margin-bottom:8px;
}
.panel h2{
  font-family:var(--font-display);
  font-size:22px;
  margin:0 0 10px;
  font-weight:600;
}
.hint{
  color:var(--text-dim);
  font-size:14px;
  line-height:1.55;
  margin:0 0 22px;
}
.mono{ font-family:var(--font-mono); color:var(--text); }

/* form */
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:8px;
}
.field input{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:16px;
  letter-spacing:0.02em;
  outline:none;
  transition: border-color .2s ease;
}
.field input:focus{ border-color: var(--wa-green); }
.field input::placeholder{ color:#5B5E63; }

.btn-primary{
  width:100%;
  border:none;
  border-radius:10px;
  padding:15px 18px;
  background: var(--wa-green);
  color:#06180F;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: background .2s ease, transform .05s ease;
}
.btn-primary:hover{ background: #2FE277; }
.btn-primary:active{ transform: scale(0.98); }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; }

.btn-spinner{
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(6,24,15,0.35);
  border-top-color:#06180F;
  animation: spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-secondary{
  width:100%;
  margin-top:18px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  border-radius:10px;
  padding:13px 18px;
  font-family:var(--font-body);
  font-size:14px;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease;
}
.btn-secondary:hover{ color:var(--text); border-color:var(--gold-dim); }

.error{
  color: var(--danger);
  font-size:13px;
  margin:14px 0 0;
}

/* code display */
.code-display{
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.code-text{
  font-family:var(--font-mono);
  font-weight:700;
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing:0.06em;
  color: var(--gold);
}
.copy-btn{
  flex-shrink:0;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  border-radius:8px;
  padding:9px 14px;
  font-size:12px;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease;
}
.copy-btn:hover{ color:var(--wa-green); border-color:var(--wa-green-dim); }
.copy-btn[data-copied="true"]{ color:var(--wa-green); border-color:var(--wa-green-dim); }

.expiry{
  font-size:12.5px;
  color: var(--text-dim);
  margin:0;
}

/* ── How it works ──────────────────────────────────────────── */
.howitworks{ margin-top:70px; max-width:600px; }
.howitworks h3{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 20px;
}
.rows{ display:flex; flex-direction:column; gap:16px; }
.row{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.row:last-child{ border-bottom:none; padding-bottom:0; }
.row-num{
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:13px;
  flex-shrink:0;
  width:26px;
}
.row p{
  margin:0;
  color:var(--text-dim);
  font-size:14.5px;
  line-height:1.55;
}

/* ── Social links ──────────────────────────────────────────── */
.social{ margin-top:56px; max-width:600px; }
.social h3{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 20px;
}
.social-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.social-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}
.social-card:hover{
  border-color: var(--gold-dim);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.social-card span{
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
}
.social-card:hover span{ color:var(--text); }
.social-icon{
  width:22px;
  height:22px;
  color:var(--gold);
  flex-shrink:0;
}

@media (max-width: 560px){
  .social-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ── Footer ────────────────────────────────────────────────── */
footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:26px 20px 34px;
  font-size:12.5px;
  color:#5B5E63;
}
.signature{ color: var(--gold); }

@media (max-width: 520px){
  .topbar{ padding:18px 20px; }
  .topbar-right{ gap:8px; }
  .topbar-link{ display:none; }
  main{ padding:4px 20px 50px; }
  .panel{ padding:24px; max-width:100%; }
}

/* ── Follow & Subscribe gate ──────────────────────────────────
   Full-screen overlay shown on first visit. Same palette as the
   rest of the site (near-black / gold / WhatsApp green) — no
   pink-purple-blue borrowed from other templates, no emoji,
   SVG icons only.                                               */
.gate-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  background: rgba(6,7,8,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 0;
  opacity:1;
  transition: opacity .25s ease;
}
.gate-overlay[hidden]{ display:none; }
.gate-overlay.is-closing{ opacity:0; pointer-events:none; }

.gate-card{
  width:100%;
  max-width:480px;
  max-height:92vh;
  overflow-y:auto;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 4px 26px 26px;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.7);
  animation: gate-rise .3s ease;
}
@media (min-width: 560px){
  .gate-overlay{ align-items:center; padding:24px; }
  .gate-card{ border-radius: var(--radius); }
}
@keyframes gate-rise{
  from{ transform: translateY(24px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

.gate-topbar{
  height:4px;
  border-radius:999px;
  margin: 18px 0 22px;
  background: linear-gradient(90deg, var(--gold), var(--wa-green));
}

.gate-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 22px;
  margin:0 0 8px;
  background: linear-gradient(90deg, var(--gold), var(--wa-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate-subtitle{
  color: var(--text-dim);
  font-size:14px;
  margin:0 0 22px;
}

.gate-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.gate-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
}
.gate-item-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.gate-item-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.gate-item-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.gate-item-handle{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.gate-badge{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gate-badge svg{ width:20px; height:20px; }
.badge-youtube{    background: rgba(225,150,47,0.14);  color: var(--gold); }
.badge-telegram{   background: rgba(37,211,102,0.14);  color: var(--wa-green); }
.badge-whatsapp{   background: rgba(37,211,102,0.14);  color: var(--wa-green); }
.badge-github{     background: rgba(242,239,232,0.10); color: var(--text); }
.badge-instagram{  background: rgba(225,150,47,0.14);  color: var(--gold); }

.gate-btn{
  flex-shrink:0;
  text-decoration:none;
  font-size:12.5px;
  font-weight:600;
  color:#06180F;
  background: var(--wa-green);
  padding:9px 16px;
  border-radius:999px;
  transition: background .2s ease;
}
.gate-btn:hover{ background:#2FE277; }

.gate-skip{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  border-radius:10px;
  padding:13px 18px;
  font-family:var(--font-body);
  font-size:14px;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease;
}
.gate-skip svg{ width:16px; height:16px; }
.gate-skip:hover{ color:var(--text); border-color: var(--gold-dim); }

@media (max-width: 380px){
  .gate-item-handle{ max-width:120px; }
}