:root{
  /* Identidade Sócias por Inteiro — cobre/bronze premium + creme perolado */
  --bg:#0d0805; --bg2:#1c0f07;
  --copper:#c8763c; --copper-deep:#9b4a1e; --copper-light:#e0955a;
  --pearl:#f3ddc0; --cream:#f7ead9; --gold:#e8b878;
  --ink-soft:#cbab8c; --glow:#e0955a;
  --font:"Poppins",system-ui,sans-serif; --serif:"Playfair Display",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--cream);overflow:hidden;position:fixed;inset:0;
  background:radial-gradient(125% 100% at 50% 118%, #7a3d18 0%, #2a160b 42%, var(--bg) 78%);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}

#embers{position:fixed;inset:0;z-index:0;pointer-events:none}
.stage{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;padding:22px}
.view{width:100%;max-width:480px;text-align:center;animation:fadeUp .6s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- INTRO ---------- */
.intro-card{
  background:linear-gradient(180deg, rgba(58,30,14,.7), rgba(24,12,6,.72));
  border:1px solid rgba(224,149,90,.28);border-radius:26px;padding:34px 26px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,235,210,.08);
  backdrop-filter:blur(4px);
}
.flame-badge{
  width:76px;height:76px;margin:0 auto 14px;border-radius:50%;font-size:38px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, #f3c98a, #b8571f 72%);
  box-shadow:0 0 34px rgba(224,149,90,.55), inset 0 -6px 14px rgba(0,0,0,.35);
  animation:flick 2.2s ease-in-out infinite;
}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.06) rotate(2deg)}}
.kicker{font-size:12px;font-weight:700;letter-spacing:.32em;color:var(--gold)}
.headline{font-family:var(--serif);font-weight:900;font-size:40px;line-height:1.02;margin:12px 0 4px;color:var(--cream);
  text-shadow:0 2px 30px rgba(224,149,90,.3)}
.headline span{
  background:linear-gradient(180deg,#fff,var(--pearl) 45%,var(--copper));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.sub{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:14px auto 16px;max-width:340px}
.god-note{font-size:13.5px;line-height:1.5;color:var(--cream);margin:0 auto 20px;max-width:360px;
  background:linear-gradient(180deg,rgba(224,149,90,.16),rgba(155,74,30,.12));
  border:1px solid rgba(224,149,90,.3);border-radius:14px;padding:11px 14px}
.god-note strong{color:var(--gold)}

#reveal-form{display:flex;flex-direction:column;gap:12px}
#email{
  width:100%;font-family:var(--font);font-size:16px;text-align:center;color:#fff;
  background:rgba(0,0,0,.32);border:1.5px solid rgba(224,149,90,.38);border-radius:16px;padding:16px 18px;
  transition:border-color .2s,box-shadow .2s;
}
#email::placeholder{color:#a07f60}
#email:focus{outline:none;border-color:var(--copper-light);box-shadow:0 0 0 4px rgba(224,149,90,.16)}

.btn-fire{
  position:relative;font-family:var(--font);font-weight:800;font-size:16.5px;letter-spacing:.02em;color:#301305;
  border:none;border-radius:16px;padding:17px 22px;cursor:pointer;width:100%;
  background:linear-gradient(180deg,#f3c98a,#d9822f 55%,#b8571f);
  box-shadow:0 12px 30px rgba(184,87,31,.5), inset 0 1px 0 rgba(255,240,220,.55);
  transition:transform .12s,filter .2s;
}
.btn-fire:hover{filter:brightness(1.06)}
.btn-fire:active{transform:translateY(2px)}
.btn-fire:disabled{opacity:.6;cursor:not-allowed}
.btn-fire.small{width:auto;font-size:15px;padding:14px 22px}
.btn-ghost{background:none;border:none;color:var(--ink-soft);font:600 14.5px var(--font);cursor:pointer;padding:12px;text-decoration:underline;text-underline-offset:3px}

.msg{border-radius:14px;padding:12px 15px;font-size:14px;margin-top:14px;line-height:1.45}
.msg-error{background:rgba(155,74,30,.2);color:#f3c49c;border:1px solid rgba(224,149,90,.4)}

/* ---------- SUSPENSE ---------- */
.suspense{display:flex;flex-direction:column;align-items:center;gap:26px}
.pulse-ring{
  width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:64px;color:var(--pearl);
  border:2px solid rgba(224,149,90,.45);
  box-shadow:0 0 60px rgba(224,149,90,.45), inset 0 0 40px rgba(224,149,90,.22);
  animation:beat 1s ease-in-out infinite;
}
@keyframes beat{0%,100%{transform:scale(1);box-shadow:0 0 50px rgba(224,149,90,.35), inset 0 0 30px rgba(224,149,90,.2)}
  50%{transform:scale(1.08);box-shadow:0 0 80px rgba(232,184,120,.7), inset 0 0 50px rgba(224,149,90,.4)}}
.suspense-text{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--cream);opacity:.95;min-height:28px;transition:opacity .3s}

/* ---------- REVEAL ---------- */
#view-reveal{max-width:480px}
#confetti{position:fixed;inset:0;z-index:5;pointer-events:none}
.fire{position:fixed;left:0;right:0;bottom:0;height:40vh;z-index:1;pointer-events:none;overflow:hidden}
.flames{position:absolute;bottom:-40px;left:0;right:0;height:100%;filter:blur(9px)}
.flame{position:absolute;bottom:0;width:36%;height:80%;border-radius:50% 50% 40% 40%;
  background:linear-gradient(0deg,#f3d59a,#d9822f 46%,#9b4a1e 82%,transparent);
  mix-blend-mode:screen;animation:rise 1.6s ease-in-out infinite;opacity:.7}
.flame.f1{left:-8%;animation-delay:0s;height:90%}
.flame.f2{left:18%;animation-delay:.25s;height:72%}
.flame.f3{left:40%;animation-delay:.5s;height:96%}
.flame.f4{left:62%;animation-delay:.15s;height:78%}
.flame.f5{left:80%;animation-delay:.4s;height:88%}
@keyframes rise{0%,100%{transform:scaleY(.92) skewX(-2deg);opacity:.55}50%{transform:scaleY(1.12) skewX(3deg);opacity:.85}}

.reveal-card{
  position:relative;z-index:6;
  background:linear-gradient(180deg, rgba(52,27,12,.94), rgba(20,10,5,.96));
  border:1px solid rgba(224,149,90,.45);border-radius:26px;padding:30px 24px 26px;
  box-shadow:0 0 70px rgba(224,149,90,.3), 0 30px 70px rgba(0,0,0,.6);
  animation:pop .7s cubic-bezier(.2,1.3,.35,1) both;
}
@keyframes pop{0%{opacity:0;transform:scale(.7)}60%{opacity:1}100%{transform:scale(1)}}
.hell{font-weight:800;font-size:13.5px;letter-spacing:.12em;color:var(--copper-light);text-transform:uppercase}
.reveal-label{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.34em;color:var(--ink-soft)}
.big-number{
  font-family:var(--serif);font-weight:900;font-size:84px;line-height:1;margin:4px 0 2px;
  background:linear-gradient(180deg,#ffffff,var(--pearl) 42%,var(--copper));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(232,184,120,.5));letter-spacing:.02em;
  animation:glow 2.6s ease-in-out infinite;
}
@keyframes glow{0%,100%{filter:drop-shadow(0 4px 20px rgba(224,149,90,.4))}50%{filter:drop-shadow(0 4px 34px rgba(243,221,192,.75))}}
.reveal-name{font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;margin-top:2px}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0}
.divider::before,.divider::after{content:"";height:1px;width:54px;background:linear-gradient(90deg,transparent,rgba(224,149,90,.65),transparent)}
.divider span{color:var(--gold);font-size:13px}
.phrase{font-family:var(--serif);font-size:18.5px;line-height:1.5;color:var(--cream)}
.phrase em{color:var(--gold);font-style:italic}
.total{margin-top:16px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.brand-foot{margin-top:10px;font-size:10.5px;letter-spacing:.22em;color:#8a6644;font-weight:600}

.reveal-actions{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px}

@media(max-width:400px){
  .headline{font-size:34px}
  .big-number{font-size:70px}
  .intro-card{padding:28px 20px}
}
@media(min-height:720px){
  .headline{font-size:44px}
}