/* Refine the approved composition, not the course structure. */
:root{--premium-shadow:0 24px 60px -24px #071a3d32;--premium-edge:#dce5f2}
.hero{position:relative;background:radial-gradient(ellipse at 77% 35%,#eaf0fc 0,transparent 43%),radial-gradient(ellipse at 12% 80%,#fff5ee 0,transparent 36%),#fff;}
.hero h1{letter-spacing:-1.9px!important;line-height:1.06!important;max-width:560px}
.hero-body{max-width:470px;line-height:1.7!important}
.hero .actions{gap:12px}
.hero .actions :is(a,button){border-radius:28px!important;min-height:48px;box-shadow:0 5px 16px -10px #071a3d55;transition:box-shadow .25s,background .25s;white-space:nowrap}
.hero .actions a:hover{box-shadow:0 10px 24px -12px #071a3d66}
.vibe-portal{border:1px solid #cad6ea;box-shadow:0 32px 65px -22px #071a3d60!important;background:radial-gradient(ellipse at 80% 0,#29408e,#071a3d 65%)!important;transform:none!important}
.vibe-portal>img{opacity:1;filter:brightness(.42) saturate(.8)!important}
.portal-stack{transform-style:flat!important;perspective:none!important;inset:28px 28px 90px}
.portal-layer{transform-style:flat!important;animation:none!important;transition:opacity .65s,transform .8s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 32px #0003;backface-visibility:hidden}
.layer-data{top:12px;left:35%;width:60%;transform:rotate(5deg);background:#29408ed9;border-color:#7890c866;opacity:.8}
.layer-interface{top:96px;left:4%;width:85%;height:205px;transform:rotate(-4deg);border-color:#f6f0e5}
.layer-brief{width:88%;left:0;bottom:0;transform:rotate(1deg);z-index:3}
.portal-meter i{animation:none!important;width:100%;transition:width .8s}
.vibe-portal[data-premium-phase="brief"] .layer-data{opacity:.45}
.vibe-portal[data-premium-phase="brief"] .layer-interface{opacity:.8}
.vibe-portal[data-premium-phase="interface"] .layer-data{opacity:.6}
.vibe-portal[data-premium-phase="brief"] .portal-meter i{width:12%}
.vibe-portal[data-premium-phase="interface"] .portal-meter i{width:60%}
.portal-replay{position:absolute;right:18px;top:17px;z-index:5;border:1px solid #ffffff45;background:#071a3d;color:#fff;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:18px}
.portal-footer{bottom:20px}.portal-footer>span{line-height:1.5!important;max-width:170px}
.sandbox-section{background:radial-gradient(ellipse at 5% 10%,#29408e66,transparent 55%),radial-gradient(ellipse at 98% 85%,#f26b271c,transparent 40%),#071a3d!important}
.unified-experience .hook-intro{max-width:760px;margin-bottom:42px!important}
.unified-experience>.project-tabs{border-radius:18px;padding:8px;box-shadow:inset 0 1px #ffffff18;background:#ffffff06}
.unified-experience>.project-tabs button{border-radius:12px;transition:background .3s,box-shadow .3s}
.vibe-sandbox{border-color:#859bce66;box-shadow:0 30px 70px -20px #0007!important}
.sandbox-preview{background:radial-gradient(ellipse at 65% 30%,#e3ebff,transparent 65%),#f4f7fd!important}
.sandbox-canvas{box-shadow:0 18px 30px -20px #071a3d44}
.process-journey{background:radial-gradient(ellipse at 10% 60%,#eaf0fc,transparent 55%),#f5f7fb!important}
.journey-visual{box-shadow:var(--premium-shadow)!important;border-color:var(--premium-edge)}
.curriculum-studio{background:radial-gradient(ellipse at 95% 0,#29408e90,transparent 60%),radial-gradient(ellipse at 10% 100%,#f26b2715,transparent 45%),#071a3d!important}
.curriculum-studio .module-detail{border:1px solid #e1e8f2;box-shadow:0 30px 60px -25px #0006}
.curriculum-studio .module-output{background:linear-gradient(145deg,#f7f9fe,#eef3fd)!important}
.toolkit{background:radial-gradient(ellipse at 95% 25%,#eef3fe,transparent 45%),#fff!important}
.connected-workflow .tool-line button{box-shadow:0 8px 24px -17px #071a3d30;transition:background .25s,border-color .25s,box-shadow .25s}
.connected-workflow .tool-line button.active{background:#fff!important;border-color:#a1b4df!important;box-shadow:inset 0 -3px #f26b27,0 14px 30px -18px #29408e60!important}
.connected-workflow .tool-build-view{border:1px solid #dce5f2!important;background:linear-gradient(135deg,#f8faff,#f0f4fd)!important;box-shadow:var(--premium-shadow)!important}
.tool-specific-scene{box-shadow:0 20px 45px -25px #071a3d50!important}
.workflow-contribution{border-left-color:#f26b2760!important}
.prepare.prepare-clear{background:#fff!important}
.prepare-essentials{padding:28px 32px;border:1px solid #dce5f2;border-radius:24px;box-shadow:var(--premium-shadow);background:linear-gradient(130deg,#fff,#f6f8fd)}
.prepare-symbol{box-shadow:0 8px 20px -12px #29408e55}
.closing-clear{background:radial-gradient(ellipse at 50% 0,#29408e90,transparent 75%),#071a3d!important}
.enquire.admissions-section{background:radial-gradient(ellipse at 0 50%,#e9f0fd,transparent 55%),#f7f9fd!important}
.premium-enter{animation:premium-enter .7s cubic-bezier(.22,1,.36,1) both!important;animation-delay:var(--premium-delay,0ms)!important}
@keyframes premium-enter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:700px){
 .hero{padding-top:35px!important}.hero h1{letter-spacing:-1.2px!important;line-height:1.08!important}
 .hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero .actions :is(a,button){width:100%!important;min-width:0!important;padding:13px 9px!important;font-size:12px!important;justify-content:center;text-align:center;gap:5px}
 .vibe-portal{height:405px!important;border-radius:22px}.portal-stack{inset:25px 20px 85px}.layer-interface{top:75px;height:185px}.layer-data{height:130px;left:32%;width:65%}.layer-brief{width:94%;padding:16px}.layer-interface p{font-size:25px}
 .portal-footer{left:18px;right:18px}.portal-footer>span{font-size:11px!important;max-width:145px}.portal-footer>a{padding:11px 12px;font-size:12px}
 .unified-experience .hook-intro{margin-bottom:28px!important}.unified-experience>.project-tabs{padding:6px;gap:6px}
 .prepare-essentials{padding:24px 20px;border-radius:20px}.connected-workflow .tool-build-view{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.premium-enter{animation:none!important}.portal-layer,.portal-meter i{transition:none!important}}
/* One consistent two-row action group, including the resource buttons. */
.layer-brief p{padding-right:66px;min-height:24px}
.vibe-portal[data-hook-reveal="none"] .layer-interface,.vibe-portal[data-hook-reveal="none"] .layer-data,.vibe-portal[data-hook-reveal="interface"] .layer-data{opacity:0!important;visibility:hidden;pointer-events:none}
.vibe-portal[data-hook-reveal="interface"] .layer-interface{visibility:visible;animation:hook-card-pop .65s cubic-bezier(.22,1,.36,1) both,hero-interface-depth 8s ease-in-out infinite!important}
.vibe-portal[data-hook-reveal="data"] .layer-data{visibility:visible;animation:hook-card-pop .65s cubic-bezier(.22,1,.36,1) both,hero-data-depth 8s ease-in-out infinite!important}
@keyframes hook-card-pop{from{opacity:0;translate:0 24px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@media(prefers-reduced-motion:reduce){.vibe-portal[data-hook-reveal] .portal-layer{animation:none!important}}
.layer-brief .portal-enter{position:absolute;right:19px;bottom:26px;padding:8px 10px;border:1px solid #d5deed;border-radius:7px;background:#f4f7fc;color:#29408e;font-size:11px;letter-spacing:0;box-shadow:0 3px 0 #d5deed;transition:transform .15s,background .15s,color .15s,box-shadow .15s}
.hook-enter-pressed .portal-enter{transform:translateY(3px);box-shadow:0 0 0 #d5deed;background:#29408e;color:#fff}
.hook-typing .layer-brief p:after{content:'';display:inline-block;width:2px;height:1em;background:#f26b27;margin-left:3px;vertical-align:-2px;animation:hook-caret .6s steps(1) infinite}
@keyframes hook-caret{50%{opacity:0}}
@media(max-width:700px){.layer-brief .portal-enter{right:13px;bottom:24px;font-size:10px;padding:7px}.layer-brief p{padding-right:58px}}
.layer-interface .portal-booking{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;opacity:0;translate:0 8px;transition:opacity .6s,translate .6s}
.portal-booking span{font-size:11px;color:inherit;letter-spacing:0}
.portal-booking b{font:600 11px Aeonik,sans-serif;background:#344638;color:#fff;border-radius:7px;padding:9px;margin:0}
.layer-data .portal-record{font-size:14px;color:#fff;margin-top:17px;opacity:0;transition:opacity .6s}
.portal-record small,.portal-record b{display:block;margin-top:9px;font-size:11px;font-weight:400;color:#d2dcf6}
.vibe-portal[data-hook-step="booking"] .portal-booking,.vibe-portal[data-hook-step="refine"] .portal-booking{opacity:1;translate:0 0}
.vibe-portal[data-hook-step="booking"] .portal-record,.vibe-portal[data-hook-step="refine"] .portal-record{opacity:1}
.vibe-portal[data-hook-step="refine"] .layer-interface{background:#102749;color:#fff;border-color:#45618a;transition:background 1s,color 1s}
.vibe-portal[data-hook-step="refine"] .layer-interface>span{color:#b5c7e5}
.vibe-portal[data-hook-step="refine"] .portal-booking b{background:#fff;color:#102749}
.layer-interface>div:not(.portal-booking){transition:opacity .5s}
.vibe-portal:not([data-hook-step="build"]) .layer-interface>div:not(.portal-booking){display:none}
.vibe-portal:not([data-hook-step="build"]) .layer-interface p{font-size:25px;line-height:1.05;margin:10px 0}
.vibe-portal:not([data-hook-step="build"]) .layer-interface{padding-top:14px}
.vibe-portal:not([data-hook-step="build"]) .layer-interface>b{margin-top:8px}
.vibe-portal:not([data-hook-step="build"]) .layer-interface .portal-booking{margin-top:6px}
.curriculum-scroll-hint{color:#b9c9e4!important}
@media(max-width:700px){.vibe-portal:not([data-hook-step="build"]) .layer-interface p{font-size:21px;margin:8px 0}.vibe-portal:not([data-hook-step="build"]) .layer-interface b{margin-top:7px}}
@media(max-width:700px){.vibe-portal:not([data-hook-step="build"]) .layer-interface{padding:12px 16px}.vibe-portal:not([data-hook-step="build"]) .layer-interface p{font-size:18px;margin:5px 0}.vibe-portal:not([data-hook-step="build"]) .layer-interface .portal-booking{margin-top:3px}.vibe-portal:not([data-hook-step="build"]) .portal-booking b{margin-top:0;padding:5px;font-size:9px}.portal-booking span{font-size:9px}}
@media(max-width:700px){.layer-interface .portal-booking{margin-top:10px}.portal-booking span{font-size:10px}.portal-booking b{padding:7px;font-size:10px}.layer-data .portal-record{font-size:12px;margin-top:10px}.portal-record small,.portal-record b{font-size:10px;margin-top:7px}}
.hero .actions,.hero .hero-resource-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;max-width:480px;gap:12px!important}
.hero .hero-resource-actions{margin-top:12px}
.hero .actions a,.hero .hero-resource-actions button{width:100%;min-width:0;min-height:54px;height:54px;padding:12px 15px!important;border-radius:28px!important;font-size:14px!important;font-weight:500;white-space:nowrap;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;box-shadow:none;gap:8px}
.hero .hero-resource-actions button{background:#fff;border-color:#bccce3}
@media(max-width:500px){.hero .actions,.hero .hero-resource-actions{gap:10px!important}.hero .actions a,.hero .hero-resource-actions button{font-size:12px!important;padding:12px 8px!important;min-height:48px;height:48px}}
/* Independent 3D surfaces prevent intersecting planes while retaining depth. */
@media(prefers-reduced-motion:no-preference){
 .portal-stack{perspective:1100px!important;transform-style:flat!important}
 .portal-layer{transform-origin:center;will-change:transform}
 .layer-data{animation:hero-data-depth 8s ease-in-out infinite!important}
 .layer-interface{animation:hero-interface-depth 8s ease-in-out infinite!important}
 .layer-brief{animation:hero-brief-depth 8s ease-in-out infinite!important}
 @keyframes hero-data-depth{0%,100%{transform:rotateX(3deg) rotateY(-7deg) rotateZ(5deg) translateY(0)}50%{transform:rotateX(-2deg) rotateY(3deg) rotateZ(4deg) translateY(-7px)}}
 @keyframes hero-interface-depth{0%,100%{transform:rotateX(2deg) rotateY(-5deg) rotateZ(-4deg) translateY(0)}50%{transform:rotateX(-2deg) rotateY(4deg) rotateZ(-3deg) translateY(-9px)}}
 @keyframes hero-brief-depth{0%,100%{transform:rotateX(1deg) rotateY(3deg) rotateZ(1deg) translateY(0)}50%{transform:rotateX(-2deg) rotateY(-3deg) rotateZ(0deg) translateY(-5px)}}
 .vibe-portal[data-premium-phase="brief"] .portal-layer{animation-play-state:paused!important}
 .faq-arrived .faq-intro-card,.faq-arrived .accordions details{animation:none!important}
 .faq-cards .faq-motion-in{animation:faq-depth-in .65s cubic-bezier(.22,1,.36,1) both!important}
 @keyframes faq-depth-in{from{opacity:0;transform:perspective(1000px) rotateX(5deg) translateY(24px)}to{opacity:1;transform:perspective(1000px) rotateX(0deg) translateY(0)}}
 .faq-cards .faq-toggle{transition:background .25s,color .25s,border-color .25s}
}