/* RuangSekolah motion direction: a school system coming together. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
/* Clip at the viewport and content boundary: transformed entrance states must
   not enlarge Safari's horizontal scroll area. The sticky header stays outside main. */
html { scroll-padding-top: 110px; overflow-x:hidden; overscroll-behavior-x:none; }
body { overflow-x: clip; }
main { overflow:hidden; min-width:0; }
.hero>*,.video-layout>*,.approach>*,.faq-layout>* { min-width:0; }
.reading-progress { position:fixed; inset:0 0 auto; height:3px; z-index:100; pointer-events:none; }
.reading-progress span { display:block; height:100%; background:#91b750; transform:scaleX(0); transform-origin:left; }
.site-header { position:sticky; top:0; height:82px; background:#ffffffed; backdrop-filter:blur(18px); transition:box-shadow .35s,border-color .35s; }
.site-header.is-scrolled { box-shadow:0 6px 30px #1032260b; border-color:#dce5dc; }
.desktop-nav a { position:relative; padding-block:12px; }
.desktop-nav a::after { content:''; position:absolute; inset:auto 0 5px; height:2px; background:#4d753b; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--motion-ease); }
.desktop-nav a:hover::after,.desktop-nav a[aria-current='location']::after { transform:scaleX(1); }
.hero { padding-top:74px; padding-bottom:85px; gap:58px; min-height:710px; }
.title-line { display:block; overflow:clip; padding-bottom:.12em; margin-bottom:-.12em; }
.title-line>span,.title-line>em { display:block; }
.title-em { overflow:visible; }
.hero h1 em { position:relative; width:max-content; max-width:100%; }
.hero h1 em::after { content:''; position:absolute; left:2px; right:1%; bottom:2px; height:8px; border-radius:50%; background:#d2ef8970; z-index:-1; transform:scaleX(var(--underline-progress,1)); transform-origin:left; }
.hero-description { max-width:475px; }
.hero-film-link { display:inline-flex; align-items:center; gap:13px; margin-top:25px; font-size:14px; font-weight:600; }
.hero-film-link small { display:block; color:var(--muted); font-size:12px; font-weight:400; }
.film-play { display:grid; place-items:center; width:43px; height:43px; border:1px solid #cad9c7; border-radius:50%; transition:background .3s,transform .4s var(--motion-ease); }
.film-play .icon { width:16px; height:16px; fill:var(--forest); stroke-width:0; margin-left:2px; }
.hero-film-link:hover .film-play { background:var(--lime); transform:scale(1.1); }
.film-arrow { margin-left:11px; font-size:23px; font-weight:400; }
.hero-note { margin-top:25px; }
.hero-visual { isolation:isolate; background:#143d30; color:#fff; border:0; padding:25px 24px 21px; border-radius:26px; box-shadow:0 30px 70px -38px #08261a85; perspective:1000px; }
.visual-grid { position:absolute; inset:0; z-index:-2; opacity:.16; border-radius:inherit; background-image:radial-gradient(#cbeaab 1px,transparent 1px); background-size:22px 22px; overflow:hidden; }
.visual-topline { color:#d9e7d2; font-size:10px; position:relative; z-index:2; }
.hero-photo { height:187px; border:1px solid #ffffff20; margin-bottom:-26px; transform:rotate(-2deg); transform-origin:50% 100%; }
.hero-photo img { transition:none; }
.photo-caption { padding:23px; }
.school-dashboard { color:var(--ink); margin:0 0 0 16px; border-radius:15px; border-color:#e4eadf; box-shadow:0 26px 40px #082c2d3d; transform-origin:50% 50%; }
.mock-tabs { position:relative; }
.mock-tabs button { transition:color .25s; font-size:12px; }
.mock-panel { min-height:162px; }
.demo-stats strong { font-size:36px; }
.mini-chart i { transform-origin:bottom; }
.visual-bottom { padding-top:27px; position:relative; z-index:3; }
.visual-bottom p { color:#c2d2c2; font-size:12px; }
.visual-bottom strong { color:#e9f2dc; }
.connected-mark { color:var(--lime); }
.round-arrow { color:#d2ef89; border-color:#6c927744; }
.system-orbit { position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; }
.system-orbit>span { position:absolute; width:420px; height:420px; border:1px solid #bbdb9622; border-radius:50%; right:-180px; top:40px; }
.system-orbit>span:nth-child(2) { width:560px; height:560px; right:-250px; top:-30px; }
.system-orbit>span:nth-child(3) { width:700px; height:700px; right:-320px; top:-100px; }
.system-orbit>span::after { content:''; position:absolute; top:12%; left:16%; width:6px; height:6px; border-radius:50%; background:#d2ef89; box-shadow:0 0 20px #d2ef8955; }
.system-signal { position:absolute; z-index:5; right:-18px; top:190px; display:flex; align-items:center; gap:10px; padding:12px 15px; border:1px solid #d6e6c8; border-radius:12px; background:#f3faec; box-shadow:0 12px 25px #08261a22; color:#214534; font-size:12px; font-weight:600; }
.system-signal small { display:block; color:#6b7b65; font-size:10px; font-weight:400; }
.signal-icon { background:#e1eecb; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.signal-icon .icon { width:16px; height:16px; }
.signal-bars { display:flex; align-items:flex-end; gap:3px; margin-left:9px; height:17px; }
.signal-bars i { width:3px; border-radius:2px; background:#83a153; height:8px; }
.signal-bars i:nth-child(2) { height:12px; }.signal-bars i:nth-child(3) { height:16px; }
.school-types { background:#f5f8f0; }
.school-types-inner { gap:40px; padding-block:28px; }
.school-types p { flex:0 0 185px; font-size:13px; }
.school-marquee { flex:1; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.school-track { display:flex; width:max-content; }
.school-group { display:flex; align-items:center; flex-shrink:0; gap:48px; padding-right:48px; }
.school-group span { display:flex; align-items:center; gap:48px; font-family:var(--heading); font-size:18px; color:#576b4c; font-weight:600; white-space:nowrap; }
.school-group span::after { content:'✳'; font-size:20px; color:#96b16f; font-weight:400; }
.module { position:relative; overflow:hidden; transition:border-color .35s,box-shadow .35s; }
.module::after { content:''; position:absolute; inset:0; pointer-events:none; border:1px solid transparent; border-radius:inherit; transition:border-color .35s; }
.module:hover { box-shadow:0 15px 40px -22px #153c3045; }
.module:hover::after { border-color:#9ab578; }
.module-icon { transition:background .3s,transform .45s var(--motion-ease); }
.module:hover .module-icon { background:#d9ebbc; transform:rotate(-7deg); }
.attendance-bar i,.demo-progress i { transform-origin:left; }
.schedule-blocks>span { transform-origin:50% 100%; }
.section-heading h2,.approach h2,.faq-intro h2 { text-wrap:balance; }
.video-section { background:#eef3e7; padding-block:90px; }
.video-layout { grid-template-columns:.85fr 1.15fr; gap:55px; align-items:center; }
.video-stage { min-width:0; padding:16px; background:#173e31; border-radius:22px; color:#d4e3c9; box-shadow:0 22px 60px -35px #10322680; }
.video-stage-caption,.video-stage-footer { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:1.2px; padding:1px 4px 14px; }
.video-stage-caption>span:last-child { font-variant-numeric:tabular-nums; color:#d2ef89; letter-spacing:1px; }
.video-stage-footer { padding:12px 4px 0; font-size:12px; letter-spacing:0; }
.video-frame { border-radius:11px; aspect-ratio:16/9; box-shadow:none; border:1px solid #ffffff1a; }
.video-frame video { width:100%; height:100%; display:block; object-fit:contain; }
.video-stage.is-playing { outline:2px solid #a3c369; outline-offset:5px; }
.approach-list article { position:relative; padding-inline:17px; border-radius:12px; transition:background .4s; }
.approach-list article.is-current { background:#f3f7ee; }
.approach-list article::before { content:''; position:absolute; inset:20px auto 20px 0; width:3px; background:#91af57; transform:scaleY(var(--row-progress,0)); transform-origin:top; border-radius:3px; }
.process-section { background:#133e2f; color:#fff; position:relative; overflow:hidden; padding-block:88px; }
.process-section::before { content:''; position:absolute; width:650px; height:650px; top:-360px; right:-170px; border:1px solid #b3d49020; border-radius:50%; pointer-events:none; }
.process-section .eyebrow { color:#c3d5b7; }
.process-section h2 em { color:#d2ef89; }
.process-section .section-intro { color:#c0d1c5; }
.steps { position:relative; gap:32px; }
.steps article { position:relative; }
.steps h3 { color:#fff; }
.steps p { color:#c1d0c4; }
.step-line { border-color:#46694f; }
.step-line::after { content:''; height:1px; background:#cde992; position:absolute; top:24px; left:0; width:100%; transform:scaleX(var(--step-progress,0)); transform-origin:left; }
.step-line span { position:relative; z-index:1; background:#214b38; border-color:#628253; color:#d1e9b2; transition:background .4s,color .4s,box-shadow .4s; }
.steps article.is-current .step-line span { background:#d2ef89; color:#123927; box-shadow:0 0 0 8px #d2ef8910; }
.steps article.is-current h3 { color:#e4f4c8; }
.faq-list details { transition:border-color .3s; }
.faq-list details[open] { border-color:#abc47e; }
.faq-list details>p { animation:faq-in .35s var(--motion-ease); }
@keyframes faq-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.consultation { position:relative; overflow:hidden; isolation:isolate; }
.consultation::before,.consultation::after { content:''; position:absolute; z-index:-1; pointer-events:none; border:1px solid #d2ef8920; border-radius:50%; width:620px; height:620px; right:-320px; top:-280px; }
.consultation::after { width:780px; height:780px; right:-400px; top:-360px; }
.button { position:relative; overflow:hidden; }
.button .icon { transition:transform .4s var(--motion-ease); }
.button:hover .icon { transform:translateX(4px); }
.button::after { content:''; position:absolute; inset:-50% auto -50% -45%; width:25%; background:linear-gradient(90deg,transparent,#ffffff24,transparent); transform:rotate(24deg); transition:left .65s var(--motion-ease); pointer-events:none; }
.button:hover::after { left:125%; }






.motion-enabled .school-track { animation:school-ticker 32s linear infinite; }
.motion-enabled .school-marquee:hover .school-track { animation-play-state:paused; }
.motion-enabled .system-orbit>span { animation:system-orbit 30s linear infinite; }
.motion-enabled .system-orbit>span:nth-child(2) { animation-duration:40s; animation-direction:reverse; }
.motion-enabled .system-orbit>span:nth-child(3) { animation-duration:52s; }
.motion-enabled .signal-bars i { animation:signal-bar 1.8s ease-in-out infinite alternate; transform-origin:bottom; }
.motion-enabled .signal-bars i:nth-child(2) { animation-delay:.3s; }.motion-enabled .signal-bars i:nth-child(3) { animation-delay:.6s; }
.motion-enabled .connected-mark { animation:system-orbit 28s linear infinite; }
.hero-visual.is-offscreen * { animation-play-state:paused!important; }
@keyframes school-ticker { to { transform:translateX(-50%); } }
@keyframes system-orbit { to { transform:rotate(360deg); } }
@keyframes signal-bar { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
@media(min-width:1101px) { .hero h1 { font-size:clamp(52px,4.7vw,64px); } }
@media(max-width:1100px) { .hero { gap:35px; padding-top:58px; }.system-signal { right:-9px; top:185px; }.hero h1 em { width:auto; }.hero-visual { padding:22px 17px; }.school-dashboard { margin-left:8px; }.hero-film-link { font-size:13px; }.video-layout { gap:30px; } }
@media(max-width:850px) { .hero { grid-template-columns:1fr 1fr; gap:24px; min-height:0; }.hero h1 { font-size:45px; }.hero h1 em { font-size:1.03em; }.hero-actions { gap:16px; }.hero-photo { height:155px; }.photo-caption { padding:18px; }.photo-caption strong { font-size:21px; }.system-signal { padding:9px; top:151px; font-size:10px; right:-5px; }.system-signal small { font-size:9px; }.signal-bars { display:none; }.school-dashboard { margin-left:0; }.visual-topline { font-size:8px; }.school-types-inner { flex-wrap:nowrap; gap:24px; }.school-types p { flex-basis:165px; width:auto; text-align:left; font-size:12px; }.school-types p br { display:block; }.school-group { gap:30px; padding-right:30px; }.school-group span { gap:30px; font-size:16px; }.video-layout { grid-template-columns:1fr; gap:35px; }.video-copy { max-width:550px; }.video-stage { max-width:750px; width:100%; }.steps { gap:35px; }.video-section { padding-block:65px; } }
@media(max-width:640px) { .site-header { height:74px; }.hero { grid-template-columns:1fr; gap:46px; padding-block:44px 52px; }.hero h1 { font-size:clamp(43px,10.3vw,62px); line-height:1.11; }.hero h1 em { white-space:normal; font-size:1.05em; letter-spacing:-1.5px; }.hero-actions { flex-wrap:wrap; flex-direction:row; gap:15px; }.hero-film-link { margin-top:22px; font-size:14px; }.hero-note { font-size:12px; margin-top:20px; }.hero-visual { padding:21px 19px 17px; border-radius:22px; max-width:470px; }.hero-photo { height:180px; }.visual-topline { font-size:9px; }.photo-caption strong { font-size:25px; }.system-signal { top:173px; right:-10px; padding:10px 12px; font-size:12px; }.system-signal small { font-size:10px; }.school-dashboard { margin-left:8px; }.dashboard-brand { font-size:11px; }.dashboard-footer { font-size:9px; }.visual-bottom { padding-top:22px; }.school-types-inner { display:block; padding-block:22px; }.school-types p { text-align:center; font-size:13px; margin:0 0 16px; }.school-types p br { display:none; }.school-group span { font-size:16px; }.school-group { gap:25px; padding-right:25px; }.school-group span { gap:25px; }.video-section { padding-block:52px; }.video-stage { padding:11px; border-radius:16px; }.video-stage-caption { font-size:8px; letter-spacing:.8px; padding-bottom:10px; }.video-stage-footer { font-size:11px; padding-top:8px; }.video-frame { border-radius:8px; }.process-section { padding-block:58px; }.steps { grid-template-columns:1fr; gap:0; }.steps article { padding:0 0 32px 68px; min-height:130px; }.steps article:last-child { padding-bottom:0; min-height:100px; }.step-line { position:absolute; left:0; top:0; height:100%; width:45px; margin:0; border:0; }.step-line span { width:42px; height:42px; font-size:14px; }.step-line::after { top:43px; bottom:0; left:21px; width:1px; height:calc(100% - 43px); transform:scaleY(var(--step-progress,0)); transform-origin:top; }.steps article:last-child .step-line::after { display:none; }.steps h3 { padding-top:5px; font-size:18px; }.steps p { max-width:270px; font-size:15px; }.approach-list article { padding-left:13px; padding-right:8px; }.footer-bottom { padding-bottom:68px; } }
@media(prefers-reduced-motion:reduce) { .school-track { transform:none!important; }.school-marquee { overflow:hidden; mask-image:none; }.school-group[aria-hidden] { display:none; }.school-group span::after { display:none; } }
html:not(.motion-enabled) .school-group[aria-hidden] { display:none; }
html:not(.motion-enabled) .school-marquee { overflow:hidden; mask-image:none; }
html:not(.motion-enabled) .school-track { width:100%; }
html:not(.motion-enabled) .school-group { width:100%; flex-wrap:wrap; justify-content:center; gap:12px 28px; padding-right:0; }
html:not(.motion-enabled) .school-group span { gap:0; }
html:not(.motion-enabled) .school-group span::after { display:none; }
html:not(.motion-enabled) .reading-progress { display:none; }
html[data-page-hidden] * { animation-play-state:paused!important; }
.video-note { gap:14px; padding:17px 19px; border:1px solid #c9d8b6; border-radius:12px; background:#e3edcf; color:#173e31; font-size:20px; font-weight:650; line-height:1.5; }
.video-note-line { flex:0 0 4px; align-self:stretch; width:4px; height:auto; min-height:36px; border-radius:4px; background:#6b8a3d; }
.video-note>span:last-child { min-width:0; }
.video-stage-footer { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; gap:10px; padding:16px 0 2px; text-align:center; }
.video-stage-footer>span { font-size:13px; color:#d4e3c9; }
.video-sound-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:60px; padding:15px 20px; border:1px solid #ffffff66; border-radius:12px; color:#f5f9ef; background:#ffffff14; font-size:18px; font-weight:700; line-height:1.35; cursor:pointer; transition:background .2s,box-shadow .2s; }
.video-sound-button .icon { flex:none; width:24px; height:24px; }
.video-sound-button:hover { background:#ffffff24; }
.video-sound-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.video-sound-button.is-muted { background:#d2ef89; border-color:#e0f5b0; color:#173e31; box-shadow:0 4px 18px #0000001a; }
.video-sound-button.is-muted:hover { background:#e1f6b4; }
.video-sound-hint { display:none; color:#d4e3c9; font-size:13px; line-height:1.5; }
.video-sound-button.is-muted+.video-sound-hint { display:block; }
@media(max-width:640px) { .video-note { padding:15px 16px; font-size:18px; }.video-stage-footer { padding-top:13px; }.video-sound-button { min-height:58px; padding:14px 16px; font-size:18px; } }