/* Apertura: sempre scura, petali di sakura che cadono lenti */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);
  min-height:clamp(400px,58svh,540px);background:#0B0B0C;color:#F4F1EC}
.hero>.wrap{width:100%}
.hero canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:45%;z-index:-1;background:linear-gradient(transparent,rgba(11,11,12,.85));pointer-events:none}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.hero .logo .ink{background:#F4F1EC}
.hero .themebtn{color:#F4F1EC}
.hero-body{margin-top:auto;padding-top:40px;padding-bottom:56px}
.eyebrow{margin:0 0 16px;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:#BDB6AC}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,13vw,92px);line-height:1;letter-spacing:-.01em}
.hero .sub{margin:14px 0 0;max-width:17em;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:#CFC9C0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:#fff;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:background .25s,border-color .25s,var(--press)}
@media (hover:hover) and (pointer:fine){.hbtn:hover{background:#8E211B;border-color:#8E211B}}
.hbtn:active{transform:scale(.97)}
.hbtn:focus-visible{outline:3px solid #F4F1EC;outline-offset:3px}

@media (prefers-reduced-motion: no-preference){
  .hero-body>*{opacity:0;transform:translateY(14px);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
  .hero-body>:nth-child(2){animation-delay:.12s}
  .hero-body>:nth-child(3){animation-delay:.24s}
  .hero-body>:nth-child(4){animation-delay:.36s}
}
@keyframes rise{to{opacity:1;transform:none}}
@media (min-width:1100px){.hero{min-height:min(70vh,640px)}.hero-body{padding-bottom:80px}}
.hbtn.ghost{background:transparent;color:#F4F1EC;border-color:rgba(244,241,236,.55);cursor:pointer;font-family:inherit}
@media (hover:hover) and (pointer:fine){.hbtn.ghost:hover{background:rgba(244,241,236,.08);border-color:#F4F1EC}}