.home { overflow: hidden; }
.hero { position: relative; display: grid; min-height: min(52rem, calc(100vh - 4.8rem)); align-items: end; padding-block: clamp(5rem, 10vw, 8rem) clamp(3.5rem, 8vw, 6rem); isolation: isolate; }
.hero::before { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 90%, transparent) 37%, color-mix(in srgb, var(--canvas) 20%, transparent) 100%), linear-gradient(0deg, var(--canvas), transparent 42%), url('../assets/images/hero-studio-ai.png') center right / cover no-repeat; content: ''; }
.hero::after { position: absolute; z-index: -1; top: 13%; right: 7%; width: min(38vw, 32rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: 50%; box-shadow: 0 0 0 2.8rem color-mix(in srgb, var(--gold) 6%, transparent), 0 0 0 7rem color-mix(in srgb, var(--blue) 4%, transparent); content: ''; }
.hero-content { max-width: 50rem; }
.hero h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3.6rem, 9vw, 8rem); }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-caption { position: absolute; right: 1rem; bottom: 1.6rem; color: var(--muted); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero-indicators { display: flex; gap: .5rem; margin-top: 3.2rem; }
.hero-indicators span { width: 2rem; height: 1px; background: var(--line); }.hero-indicators span:first-child { background: var(--gold); }
.section { padding-block: clamp(4rem, 8vw, 8.5rem); }.section--surface { background: color-mix(in srgb, var(--surface) 72%, transparent); border-block: 1px solid var(--line); }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; }.section-heading h2 { max-width: 17ch; margin: 0; }.section-heading .lede { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.stat { min-height: 10rem; padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.stat strong { display: block; color: var(--gold); font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.7rem); font-weight: 500; line-height: 1; }.stat span { color: var(--muted); font-size: .8rem; }
.pathway { display: grid; gap: 1rem; counter-reset: cycle; }.cycle { position: relative; padding: 1.4rem 1.4rem 1.4rem 4.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.cycle::before { position: absolute; top: 1.3rem; left: 1.35rem; color: var(--gold); content: '0' counter(cycle); counter-increment: cycle; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }.cycle h3 { margin-bottom: .5rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }.cycle p { margin: 0; color: var(--muted); }
.benefit-grid { display: grid; gap: 1rem; }.benefit { min-height: 15rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-raised) 64%, transparent)); }.benefit__number { color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .12em; }.benefit h3 { margin: 2.5rem 0 .65rem; font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; }.benefit p { color: var(--muted); }
.quote { max-width: 60rem; padding-left: clamp(1.2rem, 4vw, 4rem); border-left: 1px solid var(--gold); }.quote blockquote { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: clamp(1.65rem, 4vw, 3.2rem); line-height: 1.15; }.quote figcaption { color: var(--muted); font-size: .88rem; }.quote figcaption b { color: var(--ink); }
.faq { border-top: 1px solid var(--line); }.faq details { border-bottom: 1px solid var(--line); }.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 700; list-style: none; }.faq summary::after { color: var(--gold); content: '+'; font-size: 1.3rem; }.faq details[open] summary::after { content: '–'; }.faq p { max-width: 68ch; padding-bottom: 1.3rem; color: var(--muted); }
[data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .65s ease, transform .65s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 44rem) { .pathway { grid-template-columns: repeat(3, 1fr); }.benefit-grid { grid-template-columns: repeat(3, 1fr); }.stat-grid { grid-template-columns: repeat(4, 1fr); }.stat { padding: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }