/* ===== PUPA detail pages (studio / stage / academy) ===== */
body.sub{overflow-x:hidden}
.subnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:12px var(--gut);background:rgba(10,10,11,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav__logo .logo-bok{width:70px;height:28px;color:var(--fg)}
.subnav__tabs{display:flex;gap:4px;margin:0 auto;padding:4px;border:1px solid var(--line-2);border-radius:999px;overflow-x:auto;scrollbar-width:none}
.subnav__tabs::-webkit-scrollbar{display:none}
.subnav__tabs a{padding:8px 14px;border-radius:999px;color:var(--mute);white-space:nowrap;transition:background .3s,color .3s}
.subnav__tabs a:hover{color:var(--fg)}
.subnav__tabs a.is-on{background:var(--mint);color:#0A0A0B}
.subnav .lang{display:flex}
@media (max-width:760px){.subnav{flex-wrap:wrap;gap:10px}.subnav__cta{display:none}.subnav__tabs{order:3;width:100%;margin:0;justify-content:center}.subnav .lang{margin-left:auto}}

/* hero */
.shero{position:relative;padding:clamp(56px,10vw,130px) 0 clamp(56px,8vw,110px);overflow:hidden;border-bottom:1px solid var(--line)}
.shero__glow{position:absolute;right:-10%;top:-30%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(140,214,191,.18),transparent 70%);pointer-events:none}
.sub--stage .shero__glow{background:radial-gradient(closest-side,rgba(93,200,216,.16),transparent 70%)}
.sub--academy .shero__glow{background:radial-gradient(closest-side,rgba(241,238,231,.10),transparent 70%)}
.shero .wrap{position:relative}
.shero__back{display:inline-block;margin-bottom:clamp(28px,4vw,48px);color:var(--dim);font-size:12px}
.shero__back:hover{color:var(--mint)}
.shero__icon{display:grid;place-items:center;width:clamp(84px,9vw,120px);aspect-ratio:1;border-radius:30px;border:1px solid rgba(140,214,191,.45);background:rgba(140,214,191,.08);color:var(--mint);margin-bottom:28px}
.shero__icon svg,.snext__ic svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shero__icon svg .fill,.snext__ic svg .fill{fill:currentColor;stroke:none}
.shero__title{margin:0;font-family:var(--f-disp);font-weight:400;font-size:clamp(76px,15vw,220px);line-height:.88;letter-spacing:.005em}
.shero__kicker{margin:18px 0 0;font-size:clamp(22px,2.6vw,34px);font-weight:800;color:var(--mint);letter-spacing:-.02em}
.shero__lead{margin:8px 0 0;font-size:clamp(17px,1.6vw,22px);color:var(--fg);opacity:.86;word-break:keep-all}
.shero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* sections */
.ssec{padding:clamp(72px,10vw,140px) 0;border-bottom:1px solid var(--line)}
.ssec__h{max-width:14ch}
.ssec__p{max-width:640px;margin:28px 0 0;color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.75;word-break:keep-all}

/* flow */
.sflow{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:f}
.sflow li{position:relative;padding:22px 18px 20px;border-radius:18px;border:1px solid var(--line-2);background:var(--ink-2)}
.sflow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);z-index:1;color:var(--mint);font-size:14px}
.sflow span{color:var(--mint);font-size:11px}
.sflow b{display:block;margin-top:10px;font-size:clamp(18px,1.5vw,22px);font-weight:800}
.sflow p{margin:6px 0 0;color:var(--mute);font-size:14px;line-height:1.5;word-break:keep-all}
@media (max-width:900px){.sflow{grid-template-columns:1fr 1fr}.sflow li::after{display:none}}
@media (max-width:480px){.sflow{grid-template-columns:1fr}}

/* cards */
.scards{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scards--2{grid-template-columns:repeat(2,1fr)}
.scards--4{grid-template-columns:repeat(4,1fr)}
.scards li{padding:clamp(22px,2.4vw,30px);border-radius:22px;border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));transition:border-color .4s,transform .5s var(--ease)}
.scards li:hover{border-color:rgba(140,214,191,.5);transform:translateY(-3px)}
.scards .tool__ic{width:54px;height:54px;border-radius:16px}
.scards .tool__ic svg{width:30px;height:30px}
.scards b{display:block;margin-top:18px;font-size:clamp(19px,1.6vw,23px);font-weight:800}
.scards p{margin:8px 0 0;color:var(--mute);font-size:15px;line-height:1.6;word-break:keep-all}
@media (max-width:1000px){.scards,.scards--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scards,.scards--2,.scards--4{grid-template-columns:1fr}}

/* demo */
.sdemo{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.sdemo__in,.sdemo__out{padding:24px;border-radius:20px;border:1px solid var(--line-2);background:var(--ink-2)}
.sdemo__in{background:var(--paper);color:#151515;border-color:transparent}
.sdemo span.mono{font-size:11px;color:var(--dim)}
.sdemo__in span.mono{color:#777}
.sdemo p{margin:10px 0 0;line-height:1.6}
.sdemo__h{font-weight:800}
.sdemo__d{padding-left:12px;border-left:2px solid var(--mint-d)}
.sdemo__out{border-color:rgba(140,214,191,.45)}
.sdemo__out p{color:var(--mute)}
.sdemo__out b{color:var(--fg);font-size:18px}
.sdemo__ok{display:inline-block;margin-top:16px;padding:6px 10px;border-radius:999px;background:rgba(140,214,191,.12);color:var(--mint)!important}
.sdemo__arrow{display:grid;place-items:center;width:48px}
.sdemo__arrow i{width:2px;height:70%;background:linear-gradient(var(--line-2),var(--mint));position:relative}
.sdemo__arrow i::after{content:"";position:absolute;left:50%;bottom:-2px;width:10px;height:10px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:translateX(-50%) rotate(45deg)}
@media (min-width:761px){.sdemo__arrow i{width:70%;height:2px;background:linear-gradient(90deg,var(--line-2),var(--mint))}.sdemo__arrow i::after{left:auto;right:-2px;bottom:50%;transform:translateY(50%) rotate(-45deg)}}
@media (max-width:760px){.sdemo{grid-template-columns:1fr}.sdemo__arrow{width:100%;height:40px}}

/* stats */
.ssec--stats{padding:clamp(56px,7vw,96px) 0}
.sstats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sstats li{padding:28px;border-radius:22px;background:rgba(140,214,191,.07);border:1px solid rgba(140,214,191,.3)}
.sstats b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:1;color:var(--mint)}
.sstats small{font-family:var(--f-body);font-size:.4em;font-weight:800;margin-left:4px}
.sstats span{display:block;margin-top:12px;color:var(--fg);font-size:15px}
@media (max-width:760px){.sstats{grid-template-columns:1fr}}

/* quote */
.squote{padding:clamp(80px,11vw,150px) 0;text-align:center;border-bottom:1px solid var(--line)}
.squote blockquote{margin:0 auto;max-width:900px;font-size:clamp(24px,3.2vw,44px);font-weight:800;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.squote p{margin:24px 0 0;color:var(--mint)}

/* soon */
.ssoon{padding:clamp(48px,6vw,80px) 0;border-bottom:1px solid var(--line)}
.ssoon .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ssoon p{margin:0;font-size:clamp(16px,1.4vw,20px);word-break:keep-all}
.ssoon .mono{padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--mint);font-size:11px}

/* next */
.snext{padding:clamp(56px,7vw,96px) 0}
.snext__card{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px 24px;padding:clamp(26px,3vw,44px);border-radius:26px;border:1px solid var(--line-2);background:var(--ink-2);transition:border-color .4s}
.snext__card:hover{border-color:var(--mint)}
.snext__card .mono{grid-column:1;color:var(--dim);font-size:12px}
.snext__card b{grid-column:1;font-family:var(--f-disp);font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1}
.snext__ic{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:clamp(56px,6vw,80px);aspect-ratio:1;border-radius:20px;border:1px solid var(--line-2);color:var(--mint)}
.snext__card i{grid-column:3;grid-row:1/3;font-style:normal;font-size:32px;color:var(--mint);transition:transform .4s var(--ease)}
.snext__card:hover i{transform:translateX(6px)}

/* footer */
.sfoot{padding:36px 0 48px;border-top:1px solid var(--line)}
.sfoot__in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;justify-content:space-between;color:var(--dim)}
.sfoot__logo .logo-bok{width:70px;height:28px;color:var(--fg)}
.sfoot .mono{font-size:11px;text-transform:none}
.sstats li:nth-child(2) b{font-size:clamp(30px,3.2vw,50px)}
@media (max-width:480px){.sflow{gap:8px}.sflow li{display:grid;grid-template-columns:28px auto 1fr;align-items:baseline;gap:10px;padding:14px 16px}.sflow b{margin:0;font-size:17px}.sflow p{margin:0;font-size:13px}}
.subnav__name{margin:0 auto;color:var(--mint);font-size:12px;letter-spacing:.12em}
@media (max-width:760px){.subnav__name{display:none}}
.scta{padding:clamp(72px,10vw,130px) 0;text-align:center}
.scta__t{margin:0;font-size:clamp(24px,3vw,40px);font-weight:800;letter-spacing:-.02em;word-break:keep-all}
.scta .shero__ctas{justify-content:center}