.hero-l { position: relative; text-align: center; padding: 150px 24px 0; overflow: hidden; }
.hero-l::before { content: ""; position: absolute; left: 50%; top: -80px; width: 1100px; max-width: 160vw; height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,138,61,.28), transparent); pointer-events: none; }
.hero-l > * { position: relative; }
.hero-l h1 { font-size: clamp(2.8rem, 8vw, 6.4rem); letter-spacing: -.045em; line-height: .98; }
.hero-l .sub { max-width: 560px; margin: 22px auto 30px; color: var(--muted); font-size: 1.15rem; }
.row2 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero3d { max-width: 1100px; margin: 64px auto 0; perspective: 1400px; }
.hero3d img { width: 100%; height: auto; display: block; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; transform-origin: 50% 100%; transform: rotateX(28deg) scale(.88); box-shadow: 0 -30px 120px rgba(255,100,20,.3); }
.words { max-width: 980px; margin: 0 auto; padding: 32vh 24px; font-size: clamp(2rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.words span { opacity: .16; transition: opacity .25s; } .words span.lit { opacity: 1; }
.stage { height: 420vh; position: relative; }
.x-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 24px; perspective: 1600px; }
.steps { position: relative; height: 270px; }
.step { position: absolute; inset: 0; opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.step.on { opacity: 1; transform: none; }
.step h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.035em; line-height: 1.05; margin-bottom: 16px; }
.step p { color: var(--muted); max-width: 420px; margin: 0; }
.eq2 { display: flex; gap: 5px; align-items: flex-end; height: 48px; margin-top: 12px; }
.eq2 i { flex: 1; max-width: 8px; height: 20%; border-radius: 4px; background: var(--accent); }
.rail { height: 2px; margin-top: 22px; background: var(--line); } .rail b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.shots { position: relative; aspect-ratio: 1431 / 950; }
.shots img { position: absolute; inset: 0; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 100px rgba(255,100,20,.22); opacity: 0; transform: translateX(90px) rotateY(-14deg) scale(.92); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.shots img.on { opacity: 1; transform: none; } .shots img.past { transform: translateX(-90px) rotateY(14deg) scale(.92); }
.band { overflow: hidden; padding: 120px 0; }
.band h2, .bento h2, .dl h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.035em; margin: 0 24px 48px; text-align: center; }
.x-row { display: flex; gap: 18px; width: max-content; margin-bottom: 18px; will-change: transform; }
.x-row img { width: 190px; height: 190px; object-fit: cover; border-radius: 20px; filter: grayscale(1) brightness(.75); transition: filter .5s; } .x-row img:hover { filter: none; }
.bento { max-width: 1100px; margin: 0 auto; padding: 40px 24px 120px; }
.glow { position: relative; overflow: hidden; }
.glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(255,138,61,.24), transparent 70%); }
.glow:hover::after { opacity: 1; }
.dl { max-width: 900px; margin: 0 auto; padding: 60px 24px 120px; text-align: center; } .dl > p { color: var(--muted); }
.dl-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.press-s { text-align: center; padding: 80px 24px 140px; }
.press { font-size: clamp(3.4rem, 15vw, 12rem); font-weight: 800; letter-spacing: -.055em; line-height: 1; margin-bottom: 36px; transform: scale(var(--s, .7)); opacity: var(--o, .3); }
@media (max-width: 860px) { .x-pin { grid-template-columns: 1fr; gap: 20px; align-content: center; } .steps { height: 220px; } .eq2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero3d img { transform: none; } .press { --s: 1; --o: 1; } }
.l-show, .l-road, .l-team, .l-faq { max-width: 1100px; margin: 0 auto; padding: 100px 24px 40px; text-align: center; }
.l-show h2, .l-road h2, .l-team h2, .l-faq h2, .l-zoom h3 { letter-spacing: -.035em; }
.l-show h2, .l-road h2, .l-team h2, .l-faq h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 40px; }
.l-tabs { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 28px; }
.l-tabs button { font: inherit; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .3s, color .3s; }
.l-tabs button.on { background: var(--accent); color: #000; } .l-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.l-frame { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #0a0a0a; box-shadow: 0 30px 120px rgba(255,100,20,.22); }
.l-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.l-bar i { width: 11px; height: 11px; border-radius: 50%; background: #333; } .l-bar span { margin: 0 auto; padding-right: 40px; }
.l-view { position: relative; aspect-ratio: 1431 / 950; }
.l-view img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; transform: scale(1.03); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.l-view img.on { opacity: 1; transform: none; }
.l-cap { color: var(--muted); margin-top: 22px; min-height: 1.6em; }
.l-zoom { max-width: 1100px; margin: 0 auto; padding: 60px 24px; display: grid; gap: 90px; }
.l-zrow { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; text-align: left; }
.l-zrow.l-rev { grid-template-columns: 1fr 1.2fr; } .l-zrow.l-rev .l-zimg { order: 2; }
.l-zimg { aspect-ratio: 4 / 3; border-radius: 20px; border: 1px solid var(--line); background: var(--img) var(--pos) / 190% no-repeat; box-shadow: 0 30px 90px rgba(255,100,20,.18); transition: background-size 1.2s var(--ease); }
.l-zimg:hover { background-size: 215%; }
.l-zrow h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 12px; } .l-zrow p { color: var(--muted); max-width: 400px; margin: 0; }
.l-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; }
.l-tgrid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.l-person { width: 250px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.l-person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; } .l-person p { color: var(--muted); margin: 6px 0 0; font-size: .95rem; }
.l-faq > div { max-width: 720px; margin: 0 auto; text-align: left; }
.l-faq details { border-bottom: 1px solid var(--line); padding: 20px 4px; } .l-faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.l-faq summary::-webkit-details-marker { display: none; } .l-faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; transition: transform .3s; } .l-faq details[open] summary::after { transform: rotate(45deg); }
.l-faq details p { color: var(--muted); margin: 12px 0 0; }
@media (max-width: 860px) { .l-zrow, .l-zrow.l-rev { grid-template-columns: 1fr; gap: 24px; } .l-zrow.l-rev .l-zimg { order: 0; } .l-tabs { flex-wrap: wrap; justify-content: center; border-radius: 22px; } .l-tabs button { padding: 8px 14px; } }

.l-show, .l-road, .l-team, .l-faq, .bento, .band, .dl, .stage { scroll-margin-top: 90px; }
.l-zrow h3 { line-height: 1.1; }
.l-zimg { background-size: var(--bs, 190%); }