/* Home page only. Requires tokens.css + components.css. */
.hero{position:relative;isolation:isolate;margin-top:calc(-1 * (var(--nav-h) + 20px));padding:calc(var(--nav-h) + 20px + clamp(24px,5vw,56px)) var(--gutter) clamp(24px,4vw,40px);text-align:center;overflow:hidden}
.hero h1{max-width:800px;margin:0 auto 20px}

.stage{max-width:var(--max);margin:clamp(24px,4vw,40px) auto 0;perspective:1500px}
.frame{position:relative;aspect-ratio:1000/558;border-radius:clamp(18px,3vw,34px);overflow:hidden;background:var(--card);box-shadow:0 50px 90px -40px rgba(22,25,29,.55),0 0 0 1px rgba(255,255,255,.55);transition:transform .25s ease-out}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s,transform 1.6s}
.frame img.on{opacity:1;transform:none}
.cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:18px}
.hero .proof{margin-top:22px}

/* Featured work */
.work-strip{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.work-card{display:grid;gap:10px;color:inherit;text-decoration:none}
.work-card-media{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);transition:transform .2s var(--ease-spring),box-shadow .2s}
.work-card:hover .work-card-media{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(22,25,29,.4)}
.work-card-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.work-card-meta{display:grid;font-size:14px;color:var(--muted)}
.work-card-meta b{font-size:16px;color:var(--fg)}

/* Process */
.process{list-style:none;counter-reset:step;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.process li{counter-increment:step;padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.process li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;border-radius:50%;background:var(--ch);color:#fff;font-weight:700}
:root[data-theme="dark"] .process li::before{background:var(--sky);color:var(--ch)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .process li::before{background:var(--sky);color:var(--ch)}}
.process h3{margin-bottom:4px}
.process p{font-size:15px;color:var(--muted)}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:20px;background:var(--card);padding:0 20px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:16px;color:var(--muted)}