/* ZY hero */
.zy-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,4vw,56px);
  margin-block:var(--spacing-16) var(--spacing-24);
  padding:clamp(24px,5vw,64px);
  border-radius:32px;
  background:var(--zy-hero-bg,#F7E7DC);color:var(--zy-hero-fg,#3A1B1B);
  box-shadow:0 24px 60px rgba(91,44,44,.12);
}
.zy-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);animation:zy-drift 14s ease-in-out infinite}
.zy-blob--a{width:380px;height:380px;background:#E8A7A7;opacity:.55;inset-block-start:-120px;inset-inline-end:-90px}
.zy-blob--b{width:300px;height:300px;background:#D9BFA7;opacity:.7;inset-block-end:-120px;inset-inline-start:-80px;animation-delay:-6s}
.zy-spark{position:absolute;z-index:0;color:#A86F6F;font-size:22px;animation:zy-twinkle 3.2s ease-in-out infinite}
.zy-spark--1{inset-block-start:14%;inset-inline-start:46%}
.zy-spark--2{inset-block-end:16%;inset-inline-start:42%;animation-delay:-1.2s;font-size:16px}
.zy-spark--3{inset-block-start:10%;inset-inline-end:8%;animation-delay:-2s;font-size:28px}

.zy-hero__text{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;z-index:1}
.zy-eyebrow{
  display:inline-flex;gap:6px;align-items:center;
  padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.7);
  border:1px solid rgba(91,44,44,.12);font-weight:700;font-size:13px;
  animation:zy-up .7s both;
}
.zy-hero__title{
  font-family:var(--font-heading-family);font-weight:800;
  font-size:clamp(32px,5.2vw,60px);line-height:1.12;letter-spacing:-.015em;margin:0;
  animation:zy-up .8s .08s both;
}
.zy-hero__sub{font-size:clamp(15px,1.6vw,18px);line-height:1.7;max-width:46ch;opacity:.85;margin:0;animation:zy-up .8s .18s both}
.zy-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;animation:zy-up .8s .28s both}
.zy-hero__perks{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 0;animation:zy-up .8s .38s both}
.zy-hero__perks li{
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(91,44,44,.08);color:#5B2C2C;
}
.zy-hero__perks li::before{content:"✓";margin-inline-end:6px;color:#A86F6F;font-weight:800}

.zy-hero__visual{position:relative;z-index:1;animation:zy-pop .9s .15s both;perspective:900px}
.zy-hero__frame{
  position:relative;aspect-ratio:9/10;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 70px rgba(91,44,44,.28);
  transform:rotate(-2deg);transition:transform .4s ease;
  background:#D9BFA7;
}
.zy-hero__frame img,.zy-hero__frame svg{width:100%;height:100%;object-fit:cover;display:block}
.zy-chip{
  position:absolute;padding:9px 14px;border-radius:999px;background:#fff;color:#5B2C2C;
  font-weight:700;font-size:13px;white-space:nowrap;
  box-shadow:0 12px 28px rgba(91,44,44,.2);animation:zy-float 5s ease-in-out infinite;
}
.zy-chip--1{inset-block-start:8%;inset-inline-start:-6%}
.zy-chip--2{inset-block-end:18%;inset-inline-end:-5%;animation-delay:-1.6s}
.zy-chip--3{inset-block-end:-3%;inset-inline-start:10%;animation-delay:-3s}

/* Buttons (own, flat + playful) */
.zy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:999px;font-weight:800;font-size:15px;
  text-decoration:none;cursor:pointer;border:2px solid #5B2C2C;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.zy-btn--solid{background:#5B2C2C;color:#F7E7DC;box-shadow:0 10px 24px rgba(91,44,44,.28)}
.zy-btn--solid:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 30px rgba(91,44,44,.34);background:#4a2222}
.zy-btn--ghost{background:transparent;color:#5B2C2C}
.zy-btn--ghost:hover{background:#E8A7A7;border-color:#E8A7A7;transform:translateY(-2px) rotate(-1deg)}
.zy-btn:active{transform:scale(.97)}

@keyframes zy-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zy-pop{from{opacity:0;transform:scale(.92) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes zy-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes zy-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,18px) scale(1.06)}}
@keyframes zy-twinkle{0%,100%{opacity:.25;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}

@media (max-width:820px){
  .zy-hero{grid-template-columns:1fr;text-align:start;border-radius:24px}
  .zy-hero__visual{order:-1;max-width:340px;margin-inline:auto;width:100%}
  .zy-hero__frame{aspect-ratio:1/1}
  .zy-chip--1{inset-inline-start:-2%}
  .zy-chip--2{inset-inline-end:-2%}
}
@media (prefers-reduced-motion:reduce){
  .zy-blob,.zy-spark,.zy-chip{animation:none}
}