/* ============================================================
   Adssembly — hero redesign (warm, broken, playful)
   Scoped to .hero so the rest of the page is untouched.
   Palette: paper #F4ECDD · ink #1E1B16 · persimmon #E8552D · lime #C6E84A
   ============================================================ */
.hero{
  --paper:#F4ECDD;
  --panel:#FBF6EE;
  --ink:#1E1B16;
  --persimmon:#E8552D;
  --lime:#C6E84A;
  background:var(--paper);
  background-image:radial-gradient(var(--dot,rgba(30,27,22,0.05)) 1.4px, transparent 1.6px);
  background-size:22px 22px;
  position:relative;
  padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,7vw,5.5rem);
  overflow:hidden;
}

.hero-inner{position:relative;max-width:1040px;margin:0 auto;padding-inline:24px;
  display:flex;flex-direction:column;align-items:stretch;gap:0;}

/* ---------- decorative ---------- */
.hero-halftone{
  position:absolute;top:-30px;right:-40px;width:300px;height:200px;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--persimmon) 2px, transparent 2.6px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent);
          mask-image:radial-gradient(closest-side, #000 60%, transparent);
  opacity:0.22;transform:rotate(-8deg);
}
.hero-star{position:absolute;width:38px;height:38px;left:-6px;top:46%;z-index:1;
  transform:rotate(-10deg);pointer-events:none;}

/* ---------- copy ---------- */
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;}

.hero .eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;font-size:0.8rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--persimmon);background:none;
}
.hero .eyebrow::before{content:"";width:1.6rem;height:2.5px;background:var(--persimmon);}

.hero-h1-wrap{position:relative;margin-top:clamp(0.9rem,1.8vw,1.4rem);align-self:flex-start;}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,7vw,5.8rem);line-height:1.0;letter-spacing:-0.025em;
  color:var(--ink);max-width:none;margin:0;
}
.hero h1 .em{color:var(--persimmon);}
.hero .h1-line2{position:relative;display:inline-block;white-space:nowrap;}
.hero .squiggle{
  position:absolute;left:-2px;right:-6px;bottom:-0.32em;width:104%;height:0.42em;
  overflow:visible;pointer-events:none;
}

/* lime PAY PER AD sticker breaking out top-right of the headline */
.hero .sticker{
  position:absolute;top:-34px;right:-18px;z-index:5;
  width:92px;height:92px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--lime);border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 0 var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:0.96;
  text-transform:uppercase;text-align:center;color:var(--ink);letter-spacing:-0.01em;
  transform:rotate(9deg);
}
@media (max-width:560px){ .hero .sticker{width:74px;height:74px;font-size:0.82rem;top:-26px;right:-6px;} }

.hero-subhead{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-0.02em;
  color:var(--ink);margin-top:clamp(1.3rem,2.4vw,1.9rem);max-width:24ch;
}

.doodle-arrow{width:54px;height:64px;margin:6px 0 0 clamp(1rem,8vw,7rem);align-self:flex-start;
  transform:rotate(-4deg);}

/* ---------- framed animation panel (stays level) ---------- */
.hero-panel{
  position:relative;z-index:2;margin-top:clamp(1rem,2vw,1.5rem);
  background:var(--panel);border:2.5px solid var(--ink);
  box-shadow:8px 8px 0 0 var(--ink);
  padding:14px clamp(14px,2vw,22px) 6px;
  border-radius:16px;
}
.panel-caption{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#7c7361;margin-bottom:-6px;
}
.hero-panel .assembly-stage{margin:0;justify-content:center;}
.hero-panel .adl-wrap{margin-top:-18px;}

/* ---------- CTAs ---------- */
.hero .hero-ctas-wrap{display:flex;flex-direction:column;gap:10px;margin-top:clamp(1.5rem,3vw,2.25rem);}
.hero .hero-ctas{display:flex;flex-wrap:wrap;gap:0.9rem;align-items:center;}
.hero .btn{font-family:var(--font-display);font-weight:700;border:2.5px solid var(--ink);
  transition:transform 0.14s var(--ease),box-shadow 0.14s var(--ease);}
.hero .btn-primary{background:var(--persimmon);color:#FFF6F1;box-shadow:4px 4px 0 0 var(--ink);}
.hero .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink);}
.hero .btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink);}
.hero .btn-outline{background:transparent;color:var(--ink);box-shadow:none;}
.hero .btn-outline:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--ink);}
.hero .btn-outline:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--ink);}

/* ---------- entrance motion (staggered) ---------- */
.hero .reveal[data-d="4"]{transition-delay:0.32s;}
.hero .sticker{
  opacity:0;transform:rotate(9deg);
  animation:sticker-pop 0.6s cubic-bezier(.34,1.7,.5,1) 0.45s both,
            sticker-pulse 3s ease-in-out 1.25s infinite;
}
@keyframes sticker-pop{
  0%{opacity:0;transform:rotate(9deg) scale(0);}
  70%{opacity:1;transform:rotate(9deg) scale(1.12);}
  100%{opacity:1;transform:rotate(9deg) scale(1);}
}
@keyframes sticker-pulse{
  0%,100%{transform:rotate(9deg) scale(1);}
  50%{transform:rotate(9deg) scale(1.06);}
}

@media (prefers-reduced-motion: reduce){
  .hero .sticker{opacity:1;transform:rotate(9deg) scale(1);animation:none;}
}

@media (max-width:760px){
  .hero-inner{max-width:100%;}
  .hero h1{font-size:clamp(2.4rem,9vw,3.6rem);}
}