/* Nathan Celulares — tema preto & dourado (compartilhado) */
:root{
  --bg:#050505;
  --bg-2:#0c0b09;
  --card:rgba(20,18,15,.72);
  --card-border:rgba(214,170,98,.18);
  --line:rgba(255,255,255,.08);
  --text:#f4ede1;
  --muted:#a59b8a;
  --gold-1:#7a4f1d;
  --gold-2:#b98336;
  --gold-3:#e9c98a;
  --gold-4:#fff1d2;
  --gold:#d7a75a;
  --gold-grad:linear-gradient(100deg,#8a5a22 0%,#c9934a 22%,#f3d9a4 45%,#fff4dc 52%,#d9a85c 70%,#8f5d25 100%);
  --danger:#ff6b6b;
  --ok:#5fd39a;
  --radius:18px;
  --font-title:'Saira',system-ui,sans-serif;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--text);background:var(--bg);
  min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 600px at 50% -10%,rgba(201,147,74,.20),transparent 60%),
    radial-gradient(700px 500px at 110% 40%,rgba(185,131,54,.10),transparent 60%),
    radial-gradient(700px 500px at -10% 90%,rgba(185,131,54,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body::before{ /* textura sutil */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:3px 3px;
}
.gold-text{
  background:var(--gold-grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:200% center}}
.card{
  position:relative;background:var(--card);
  border:1px solid var(--card-border);border-radius:var(--radius);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,236,200,.06);
}
.btn-gold{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border:0;cursor:pointer;font-family:var(--font);font-weight:800;font-size:1rem;letter-spacing:.02em;
  color:#1a1206;padding:1rem 1.6rem;border-radius:14px;
  background:linear-gradient(135deg,#a8702c 0%,#e3bb73 35%,#fff0cf 52%,#d9a557 70%,#9c6627 100%);
  background-size:180% 180%;background-position:0% 50%;
  box-shadow:0 10px 30px -10px rgba(215,167,90,.6),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s ease,box-shadow .25s ease,background-position .6s ease,filter .2s;
}
.btn-gold:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(215,167,90,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:active{transform:translateY(0) scale(.99)}
.btn-gold:disabled{filter:grayscale(.4) brightness(.7);cursor:not-allowed;transform:none}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.95rem;color:var(--gold-3);
  background:rgba(215,167,90,.06);border:1px solid rgba(215,167,90,.35);
  padding:.85rem 1.2rem;border-radius:12px;transition:.2s;
}
.btn-ghost:hover{background:rgba(215,167,90,.14);border-color:var(--gold)}
.btn-wa{color:#d7ffe6;background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.45)}
.btn-wa:hover{background:rgba(37,211,102,.2);border-color:#25d366}
svg.ic{width:1.15em;height:1.15em;flex:none}
.demo-banner{position:sticky;top:0;z-index:80;text-align:center;font:800 15px/1.35 var(--font),system-ui,sans-serif;letter-spacing:.03em;color:#fff6df;background:#c41818;border-bottom:4px solid #e0b15a;padding:14px 16px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.setup{max-width:640px;margin:0 auto;text-align:left}
.setup h2{font-family:var(--font-title);font-weight:600;font-size:1.4rem;margin:12px 0 8px}
.setup p,.setup li{color:#d9cfbf;font-size:.94rem}
.setup ol{padding-left:20px;margin:12px 0 18px}
.setup li{margin-bottom:6px}
.setup code{color:var(--gold-3);background:rgba(215,167,90,.1);padding:1px 6px;border-radius:6px;font-size:.86em}
.setup .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.setup .btns a{text-decoration:none}