.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--honey);
  color:var(--outline);
  padding:8px 18px;
  border-radius:999px;
  border:2px solid var(--outline);
  font-family:'Sniglet',sans-serif;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 3px 0 var(--outline);
  margin-bottom:14px;
}
.eyebrow .dot{
  width:8px;height:8px;background:var(--bubblegum);border-radius:50%;
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,138,192,.6)}
  50%    {box-shadow:0 0 0 6px rgba(255,138,192,0)}
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  border-radius:999px;
  border:2.5px solid var(--outline);
  font-family:'Recoleta','Fraunces',serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:-.01em;
  box-shadow:0 6px 0 var(--outline);
  transition: transform .2s cubic-bezier(.5,1.6,.4,1), box-shadow .2s;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 4 L19 13 L28 13 L21 19 L24 28 L16 22 L8 28 L11 19 L4 13 L13 13 Z' fill='%23ffd13a' stroke='%235a2675' stroke-width='2'/></svg>") 16 16, pointer;
  background:var(--cream);
  color:var(--outline);
}
.btn:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--outline)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--outline)}
.btn-primary{background:var(--bubblegum);color:var(--cream)}
.btn-honey{background:var(--honey);color:var(--outline)}
.btn-arrow{transition:transform .25s;display:inline-block}
.btn:hover .btn-arrow{transform:translateX(4px)}

.nl-card{
  background:
    radial-gradient(circle at 80% 20%, var(--bubblegum), var(--grape) 60%);
  border:2.5px solid var(--outline);
  border-radius:40px;
  padding: 48px 40px;
  box-shadow: 0 14px 0 rgba(90,38,117,.22);
  position:relative;
  overflow:hidden;
  margin-top:30px;
}
.nl-card h2{
  font-family:'Fraunces',serif;
  font-weight:900;
  font-style:italic;
  font-size:clamp(26px,3.2vw,36px);
  color:#fff;
  margin-bottom:8px;
  position:relative;z-index:1;
  text-shadow: 0 3px 0 rgba(90,38,117,.25);
}
.nl-card p{
  color:rgba(255,255,255,.92);
  font-size:15px;font-weight:500;
  margin-bottom:24px;
  position:relative;z-index:1;
  font-family:'Sniglet',sans-serif;
}

.nl-form{
  display:flex;gap:10px;
  max-width:480px;margin:0 auto;
  background:var(--cream);
  border:2.5px solid var(--outline);
  border-radius:999px;
  padding:6px;
  box-shadow:0 6px 0 var(--outline);
  position:relative;z-index:1;
  transition: opacity .3s ease, transform .3s ease;
}
.nl-form.hidden{opacity:0;transform:scale(.95);pointer-events:none;position:absolute;left:0;right:0}
.nl-form input{
  flex:1;background:transparent;border:0;outline:0;
  padding:0 22px;
  font-family:'Sniglet',sans-serif;
  font-weight:400;font-size:15px;
  color:var(--outline);
}
.nl-form input::placeholder{color:var(--ink-soft)}
.nl-form button{
  background:var(--bubblegum);
  color:#fff;
  border:2.5px solid var(--outline);
  border-radius:999px;
  padding:13px 26px;
  font-family:'Recoleta','Fraunces',serif;
  font-weight:600;font-size:16px;
  letter-spacing:-.005em;
  box-shadow:0 4px 0 var(--outline);
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 4 L19 13 L28 13 L21 19 L24 28 L16 22 L8 28 L11 19 L4 13 L13 13 Z' fill='%23ffd13a' stroke='%235a2675' stroke-width='2'/></svg>") 16 16, pointer;
  transition: transform .15s cubic-bezier(.5,1.6,.4,1);
}
.nl-form button:hover{transform:translateY(-2px)}
.nl-form button:active{transform:translateY(2px)}
.nl-form button:disabled{opacity:.6;cursor:wait}

.nl-success{
  display:none;
  max-width:480px;margin:0 auto;
  background:var(--cream);
  border:2.5px solid var(--outline);
  border-radius:999px;
  padding:18px 28px;
  box-shadow:0 6px 0 var(--outline);
  position:relative;z-index:1;
  text-align:center;
  font-family:'Recoleta','Fraunces',serif;
  font-weight:600;font-size:16px;
  color:var(--outline);
  animation: pop-in .5s cubic-bezier(.5,1.8,.4,1);
}
.nl-success.show{display:block}
.nl-success .heart{
  display:inline-block;color:var(--bubblegum);
  animation: thump 1.4s ease-in-out infinite;
}
@keyframes pop-in{
  0%{transform:scale(.7);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes thump{
  0%,100%{transform:scale(1)}
  20%{transform:scale(1.2)}
  40%{transform:scale(1)}
}

@media (max-width: 520px){
  .nl-card{padding:36px 24px}
  .nl-form{flex-direction:column;border-radius:28px;padding:8px}
  .nl-form input{padding:14px}
}