/* 첫 화면 배치 — 공통 부품은 다시 정의하지 않고, 움직임 정의는 design/motion.css 에만 둔다 */

/* 1. 무대 */
.hero{padding:56px 0 72px;min-height:calc(100vh - var(--gn-h))}
.hero-slides{position:absolute;inset:0}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;
  animation:asZoom 30s ease-in-out infinite alternate}
.hero-art{filter:var(--stage-art-filter)}
.hero-art.is-on{opacity:var(--stage-art-opacity)}
/* 배경 고르기 점 — 무대 아래 가운데. 지금 장은 길쭉하게, 마우스를 올리면 이름이 보인다 */
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;justify-content:center;gap:8px}
.hero-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:var(--r-pill);background:var(--on-stage-dim);opacity:.6;cursor:pointer;
  transition:width .3s,opacity .3s,background .3s}
.hero-dot:hover{opacity:1;background:var(--on-stage-dim)}
.hero-dot[aria-pressed="true"]{width:28px;opacity:1;background:var(--stage-active)}
.hero-dot[aria-pressed="true"]:hover{background:var(--stage-active)}
.hero-dot span{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:12px;background:var(--stage-glass);color:var(--on-stage);opacity:0;pointer-events:none;transition:opacity .2s}
.hero-dot:hover span,.hero-dot:focus-visible span{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--stage-veil) 0%,var(--stage-veil-mid) 38%,transparent 70%),linear-gradient(0deg,var(--stage-veil) 0%,transparent 35%)}
.hero-in{position:relative;display:grid;gap:40px;align-items:center}
@media (min-width:1024px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px}}
.hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero-title{font-size:clamp(40px,6vw,76px);font-weight:900;letter-spacing:-1.5px;line-height:1.08}
.hero-lede{font-size:17px;color:var(--on-stage-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* 엔진 · 믿음 */
.trust{display:grid;gap:16px}
@media (min-width:640px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1440px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust-item{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--stage-line);color:var(--on-stage-2)}
.trust-item b{color:var(--on-stage)}
.trust-item .ico{color:var(--stage-accent)}
.trust-item span{font-size:14px}

/* 쓰는 곳 — 탭 · 추천 설정 · 예시 */
.uses{display:flex;flex-direction:column;gap:20px}
.use-panel{display:grid;gap:16px}
@media (min-width:1024px){.use-panel{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}}
.use-preset{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-lg);background:var(--hover)}
.use-examples{display:grid;gap:12px}
@media (min-width:640px){.use-examples{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1440px){.use-examples{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 피날레 */
.finale{position:relative;overflow:hidden;padding:48px 0 24px}
.marquee{overflow:hidden;margin-bottom:36px}
.marquee-in{display:flex;gap:16px;width:max-content;animation:asMarquee 60s linear infinite}
.marquee-card{position:relative;width:180px;height:180px;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--glow-1),var(--glow-2),var(--glow-3))}
.marquee-card img{width:100%;height:100%;object-fit:cover}
.marquee-card span{position:absolute;left:10px;bottom:10px;padding:3px 10px;border-radius:var(--r-pill);background:var(--stage-2);color:var(--on-stage);font-size:12px;font-weight:700;box-shadow:var(--shadow-lift)}
.finale-in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}