/* Guang Ji Da / Ousu. Original motion treatment, brand blue #008CC9. */
:root { --brand:#008cc9; --blue:#006b9b; --motion-ease:cubic-bezier(.2,.7,.25,1); }
html { scroll-padding-top:9rem; }
body.motion-design { overflow-x:clip; }
.motion-design main { max-width:none; padding:0; }
.preview-bar { border-top:0; border-bottom:1px solid #dcebf2; font-size:13px; background:#f6fbfe; }
.motion-design header { max-width:none; padding:1.05rem clamp(1.2rem,4vw,5rem); position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid #dcebf2; gap:1.3rem; }
.wordmark { border:0; padding:0; color:var(--blue); font-size:1.65rem; }
.wordmark span { font-size:12px; }
nav { gap:clamp(1rem,2.2vw,2rem); }
nav a { position:relative; padding:.55rem 0; }
nav a::after { content:""; position:absolute; inset-inline-start:0; bottom:.2rem; width:100%; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--motion-ease); }
nav a:hover::after,nav a[aria-current="location"]::after { transform:scaleX(1); }
.motion-toggle { border:1px solid #d4e8f1; background:#fff; border-radius:99px; padding:.55rem .85rem; display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; color:var(--blue); font:inherit; font-size:13px; cursor:pointer; min-height:42px; }
.motion-symbol { width:9px; height:10px; border-inline:3px solid var(--brand); }
.motion-toggle[aria-pressed="true"] .motion-symbol { width:0; height:0; border:5px solid transparent; border-inline-start:8px solid var(--brand); border-inline-end:0; }
.language { gap:.5rem; }
.language select { max-width:165px; padding-block:.55rem; }
.skip-link { position:fixed; top:0; inset-inline-start:1rem; transform:translateY(-150%); background:#fff; padding:.8rem; z-index:40; color:var(--blue); }
.skip-link:focus { transform:translateY(0); }
.product-hero { display:block; position:relative; padding:0; min-height:760px; height:125svh; max-height:1280px; background:#fff; isolation:isolate; }
.hero-stage { position:sticky; top:88px; min-height:670px; height:calc(100svh - 88px); max-height:910px; padding:3rem clamp(1.2rem,6vw,7rem) 5rem; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); align-items:center; column-gap:3rem; overflow:clip; }
.hero-atmosphere { position:absolute; inset:0; z-index:-2; pointer-events:none; }
#brand-field { display:block; width:100%; height:100%; opacity:.72; }
.atmosphere-fallback { position:absolute; width:min(70vw,950px); aspect-ratio:1; right:-10%; top:-10%; border:1px solid #d5eef9; border-radius:50%; background:radial-gradient(ellipse at center,transparent 35%,#edf8fd 61%,transparent 69%); transform:rotate(-20deg); opacity:.75; }
.has-webgl .atmosphere-fallback { opacity:.25; }
.hero-topline { position:absolute; top:2rem; left:clamp(1.2rem,6vw,7rem); right:clamp(1.2rem,6vw,7rem); display:flex; justify-content:space-between; color:var(--blue); font-size:12px; letter-spacing:.1em; z-index:3; }
.hero-wordmark { position:absolute; bottom:-.13em; inset-inline-start:.025em; font-size:clamp(12rem,31vw,38rem); font-weight:750; line-height:1; letter-spacing:-.075em; color:#e4f4fb; z-index:-1; user-select:none; transform:translate3d(calc(var(--hero-progress,0) * -6%),0,0); }
.hero-copy { position:relative; z-index:4; padding-block:2rem; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:1rem; font-size:14px; font-weight:600; letter-spacing:.13em; }
.hero-copy .eyebrow::before { content:""; width:2.3rem; height:2px; background:var(--brand); flex-shrink:0; }
.product-hero h1 { font-size:clamp(3rem,5.9vw,6rem); color:var(--blue); line-height:1.16; font-weight:650; letter-spacing:-.045em; margin:1.1rem 0 1.6rem; }
html[lang=en] .product-hero h1,html[lang=ms] .product-hero h1,html[lang=id] .product-hero h1 { font-size:clamp(2.7rem,4.6vw,5.2rem); }
.hero-note { font-size:17px; line-height:1.9; max-width:390px; }
.hero-small { font-size:14px; max-width:380px; line-height:1.8; }
.actions { gap:1rem; margin-top:1.8rem; }
.button { position:relative; overflow:hidden; border-radius:99px; padding:1rem 1.65rem; box-shadow:none; transition:background .25s,box-shadow .25s,translate .25s; }
.button:hover { background:#005b84; box-shadow:0 7px 20px #008cc920; translate:0 -3px; }
.button:active { translate:0 0; }
.product-hero .product-art { position:relative; width:100%; max-width:720px; margin:2rem 0 0; align-self:center; overflow:visible; background:none; border-radius:0; perspective:1400px; z-index:2; transform:translate3d(0,calc(var(--hero-progress,0) * -50px),0); }
.product-window { border-radius:clamp(1rem,3vw,3rem); overflow:hidden; box-shadow:0 28px 60px -28px #00628e66; transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(calc(-4deg + var(--hero-progress,0) * 7deg)); transform-origin:50% 55%; transition:box-shadow .4s; }
.product-window img { width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:cover; transform:scale(calc(1.025 + var(--hero-progress,0) * .025)); }
.product-hero figcaption { padding:1.4rem .3rem .4rem; color:var(--blue); background:transparent; font-size:13px; font-weight:650; letter-spacing:.07em; }
.scroll-cue { position:absolute; bottom:2rem; right:clamp(1.2rem,6vw,7rem); color:var(--blue); display:flex; align-items:center; gap:1.2rem; text-decoration:none; font-size:14px; z-index:5; }
.scroll-cue>span:last-child { display:grid; place-items:center; width:42px; height:42px; border:1px solid #b4deef; border-radius:50%; font-size:20px; }
.brand-strip { position:relative; z-index:2; background:var(--brand); color:#062d40; padding:2rem clamp(1.2rem,6vw,7rem); border:0; align-items:center; font-weight:600; font-size:16px; gap:2rem; }
.brand-strip a { color:inherit; text-decoration:none; }
.brand-strip { color:#001a26; }
.brand-strip .strip-index { font-size:2rem; font-weight:800; letter-spacing:-.07em; color:#fff; }
.subscriptions,.community-wrap,.inquiry { width:calc(100% - clamp(2.4rem,12vw,14rem)); max-width:1320px; margin-inline:auto; }
.subscriptions { padding-block:6rem; }
.chapter-label { display:flex; align-items:center; gap:2rem; color:var(--blue); font-size:12px; letter-spacing:.14em; margin:0 0 2.8rem; font-weight:600; }
.chapter-line { height:1px; background:#d5e8f1; flex:1; transform-origin:left; }
.section-heading { margin-bottom:2.5rem; }
.section-heading h2 { font-size:clamp(2rem,3.8vw,3.8rem); max-width:790px; font-weight:600; line-height:1.27; }
.plan-grid { gap:0; border:1px solid #d5e8f1; border-radius:1.2rem; overflow:hidden; }
.plan { border:0; border-inline-end:1px solid #d5e8f1; border-radius:0; padding:2rem 1.4rem; transition:background .3s,color .3s; }
.plan:last-child { border-inline-end:0; }
.plan:hover { background:#f2faff; }
.plan[aria-pressed=true] { border:0; border-inline-end:1px solid #d5e8f1; padding:2rem 1.4rem; background:#e8f6fd; box-shadow:inset 0 4px var(--brand); }
.plan:focus-visible { outline-offset:-4px; }
.plan[aria-pressed=true] .select-plan { background:transparent; padding:0; border-radius:0; color:var(--blue); }
.plan-name { font-size:18px; }
.price { font-size:clamp(1.8rem,3vw,2.9rem); font-weight:650; }
.select-plan { display:flex; align-items:center; justify-content:space-between; width:100%; }
.select-plan::after { content:"↗"; font-size:1.4rem; transition:transform .25s; }
.plan:hover .select-plan::after { transform:translate(3px,-3px); }
.plan-summary { background:#f6fbfe; border:0; border-radius:0; padding:2rem 0; margin-top:1rem; border-bottom:1px solid #d5e8f1; background:#fff; }
.community-wrap { padding-block:1rem 2rem; }
.community-panel { padding:clamp(1.5rem,4vw,4rem); border:0; border-radius:1.4rem; background:#008cc9; color:#062d40; position:relative; overflow:hidden; }
.community-panel .eyebrow,.community-panel .community-topics span { color:#083b51; }
.community-panel h2 { font-size:clamp(2rem,3.5vw,3.5rem); color:white; line-height:1.3; }
.community-panel>div>p { color:#073649; }
.community-panel .text-link { color:#073649; }
.community-panel .button { background:#fff; color:#00618c; }
.community-panel .button:hover { background:#eaf8ff; }
.community-topics>div+div { border-color:#ffffff66; }
.community-topics h3 { font-weight:650; }
.community-topics a:hover { color:#062d40; }
.community-panel,.community-panel>div>p,.community-panel .eyebrow,.community-panel .community-topics span,.community-panel .text-link,.community-panel .community-topics a:hover { color:#001a26; }
.inquiry { margin-block:5rem 6rem; padding-top:3rem; }
.form-intro h2 { font-size:clamp(2rem,3.5vw,3.4rem); }
footer { max-width:none; padding:2rem clamp(1.2rem,6vw,7rem); border-top:1px solid #d5e8f1; }
footer span { font-weight:600; color:var(--blue); }
.reveal-item { transition:opacity .8s var(--motion-ease),translate .8s var(--motion-ease); transition-delay:var(--reveal-delay,0ms); }
.reveal-item.is-pending { opacity:0; translate:0 32px; }
.reveal-item.is-visible { opacity:1; translate:0 0; }
.title-line { display:block; overflow:clip; padding-bottom:.05em; }
.title-line>span { display:block; animation:title-arrive .9s both var(--motion-ease); animation-delay:calc(var(--line-index,0) * 130ms); }
.motion-running .product-window { animation:image-arrive 1.1s var(--motion-ease) both; }
@keyframes title-arrive { from { transform:translateY(108%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes image-arrive { from { clip-path:inset(0 0 100% 0 round 2rem); opacity:0; } to { clip-path:inset(0 0 0 0 round 2rem); opacity:1; } }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation:none!important; transition:none!important; }
.motion-paused .reveal-item { opacity:1; translate:none; }
.motion-paused .product-art,.motion-paused .product-window,.motion-paused .product-window img,.motion-paused .hero-wordmark { transform:none; }
.motion-paused .title-line>span { transform:none; opacity:1; }
html.motion-paused { scroll-behavior:auto; }
[dir=rtl] .hero-wordmark { direction:ltr; inset-inline-start:auto; left:.025em; }
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3 { letter-spacing:normal; }
[dir=rtl] .product-window { transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(calc(4deg - var(--hero-progress,0) * 7deg)); }
[dir=rtl] nav a::after,[dir=rtl] .chapter-line { transform-origin:right; }
[dir=rtl] .plan-summary { border-right:0; }
@media(min-width:1700px) { .hero-stage { padding-inline:max(7rem,calc((100vw - 1500px)/2)); } }
@media(max-width:1180px) { .motion-design header { flex-wrap:wrap; gap:.65rem 1rem; } nav { order:4; width:100%; justify-content:center; margin:0; gap:2rem; } .motion-toggle { margin-inline-start:auto; } .language { margin:0; } .hero-stage { top:130px; height:calc(100svh - 130px); min-height:610px; gap:1.5rem; } .hero-note { font-size:16px; } }
@media(max-width:1050px) { .plan-grid { grid-template-columns:repeat(2,1fr); } .plan:nth-child(-n+2) { border-bottom:1px solid #d5e8f1; } .plan:nth-child(2n) { border-inline-end:0; } }
@media(max-width:740px) {
 html { scroll-padding-top:9rem; }
 .motion-design header { padding:.85rem 1.2rem; }
 .wordmark { font-size:1.4rem; }
 .wordmark span { font-size:10px; }
 .motion-toggle { font-size:12px; padding:.5rem .65rem; min-height:38px; }
 .language { display:block; font-size:0; }
 .language select { font-size:13px; max-width:125px; min-height:38px; }
 nav { flex-wrap:nowrap; gap:.7rem; justify-content:space-between; overflow:auto; }
 nav a { font-size:13px; white-space:nowrap; }
 .product-hero { height:auto; max-height:none; min-height:0; }
 .hero-stage { position:relative; top:0; height:auto; min-height:0; max-height:none; padding:4.5rem 1.3rem 5.5rem; grid-template-columns:1fr; gap:2rem; }
 .hero-topline { top:1.5rem; font-size:10px; left:1.3rem; right:1.3rem; }
 .hero-copy { padding:0; }
 .product-hero h1 { font-size:clamp(2.75rem,9vw,4.8rem); margin:1rem 0; }
 html[lang=en] .product-hero h1,html[lang=ms] .product-hero h1,html[lang=id] .product-hero h1 { font-size:clamp(2.5rem,8vw,4rem); }
 .hero-note { max-width:480px; }
 .hero-small { margin:.8rem 0 0; }
 .actions { margin-top:1.2rem; }
 .product-hero .product-art { grid-row:auto; margin:0; width:calc(100% - 1rem); justify-self:center; }
 .hero-wordmark { font-size:36vw; bottom:.24em; }
 .hero-atmosphere { top:20%; }
 .product-window { border-radius:1.3rem; }
 .product-hero figcaption { padding-top:1.1rem; font-size:12px; }
 .scroll-cue { bottom:1.1rem; right:1.3rem; font-size:13px; }
 .scroll-cue>span:last-child { width:34px; height:34px; }
 .brand-strip { display:grid; grid-template-columns:auto 1fr; gap:.65rem 1.5rem; font-size:14px; padding:1.5rem 1.3rem; }
 .strip-index { grid-row:span 3; align-self:center; }
 .subscriptions,.community-wrap,.inquiry { width:calc(100% - 2.6rem); }
 .subscriptions { padding-block:3.5rem; }
 .chapter-label { margin-bottom:2rem; gap:1rem; }
 .section-heading { margin-bottom:1.5rem; }
 .section-heading h2 { font-size:2.1rem; }
 .plan,.plan[aria-pressed=true] { padding:1.5rem 1rem; }
 .plan-name { font-size:17px; }
 .price { font-size:clamp(1.5rem,5.5vw,2.1rem); }
 .plan-summary { padding:1.5rem 0; }
 .community-panel { padding:1.8rem 1.4rem; }
 .community-panel h2 { font-size:2rem; }
 .inquiry { margin-block:2rem 3.5rem; }
}
@media(max-width:380px) { .motion-toggle { font-size:11px; gap:.3rem; padding-inline:.5rem; } .wordmark { font-size:1.3rem; } .language select { max-width:112px; } .motion-design header { gap:.5rem; } nav a { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .reveal-item { opacity:1!important; translate:none!important; } .product-art,.product-window,.product-window img,.hero-wordmark { transform:none!important; } }