/* صفحهٔ اصلی: فقط هیرو، یک صفحه بدون اسکرول */
html,body.home{height:100%;overflow:hidden;background:#fff}
.hero{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 480px at 85% -10%,var(--brand-100) 0%,rgba(255,255,255,0) 70%),radial-gradient(700px 420px at 0% 110%,var(--brand-50) 0%,rgba(255,255,255,0) 70%),#fff;overflow:hidden}
.hero-in{width:100%;max-width:1160px;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px;max-height:100%}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand-50);color:var(--brand);font-weight:700;font-size:.9rem;padding:.3rem 1rem;border-radius:99px;margin-bottom:20px}
.hero h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.35;margin-bottom:18px;letter-spacing:-.01em}
.hl{color:var(--brand);position:relative;white-space:nowrap;isolation:isolate}
.hl::after{content:"";position:absolute;inset-inline:0;bottom:.05em;height:.26em;background:var(--accent);opacity:.45;z-index:-1;border-radius:4px}
.lead{font-size:1.12rem;color:var(--ink2);max-width:520px;margin:0}
.hero-art{display:flex;justify-content:center;align-items:center;min-height:0}
.scene{width:100%;max-width:560px;max-height:84vh;height:auto;overflow:visible}

/* حرکت اجزای تصویر */
.cloud{animation:drift 16s ease-in-out infinite alternate}
.cloud.c2{animation-duration:21s;animation-delay:-6s}
.tw{animation:twinkle 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tw.t2{animation-delay:-.9s}.tw.t3{animation-delay:-1.7s}.tw.t4{animation-delay:-2.2s}
.chalk.c3{animation-delay:3.2s}.chalk.c4{animation-delay:4.3s}.chalk.c5{animation-delay:5.2s}
.tree{animation:treesway 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.tree.t2{animation-delay:-2s}
.flag{animation:wave 1.7s ease-in-out infinite;transform-box:fill-box;transform-origin:0 50%}
.win{animation:blink 5s ease-in-out infinite}
.win.w2{animation-delay:-2.4s}
.glow{animation:glow 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hand.slow{animation-duration:36s}
.wiggle{animation:wiggle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(28px)}}
@keyframes twinkle{0%,100%{transform:scale(.55);opacity:.4}50%{transform:scale(1.15);opacity:1}}
@keyframes treesway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(7deg) scaleX(.9)}}
@keyframes blink{0%,86%,100%{opacity:1}92%{opacity:.35}}
@keyframes glow{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.7;transform:scale(1.15)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

@media (prefers-reduced-motion:reduce){
  .cloud,.tw,.tree,.flag,.win,.glow,.wiggle
}

@media (max-width:860px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:8px;text-align:center;justify-items:center}
  .hero-art{order:-1}
  .scene{max-width:min(78vw,340px);max-height:42vh}
  .lead{font-size:1rem}
  .hero h1{font-size:clamp(1.7rem,7vw,2.3rem);margin-bottom:12px}
  .pill{margin-bottom:12px}
}