/* Landing-only design layer. Existing admin-managed content and components stay intact. */
/* Two composited gradient layers; no canvas, blur filter, or animation loop. */
.niza-landing{position:relative;isolation:isolate;--ambient-blue:rgba(40,100,255,.16);--ambient-cyan:rgba(55,164,211,.11);--ambient-line:rgba(65,105,175,.07);--mascot-glow-blue:rgba(58,121,255,.48);--mascot-glow-cyan:rgba(97,205,255,.3)}
html[data-theme="dark"] .niza-landing{--ambient-blue:rgba(79,117,234,.2);--ambient-cyan:rgba(69,172,212,.12);--ambient-line:rgba(145,174,237,.055);--mascot-glow-blue:rgba(92,145,255,.7);--mascot-glow-cyan:rgba(84,207,255,.42)}
.landing-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.landing-ambient-grid{position:absolute;inset:0;background-image:linear-gradient(var(--ambient-line) 1px,transparent 1px),linear-gradient(90deg,var(--ambient-line) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,#000,transparent 38%,transparent 62%,#000)}
.landing-ambient-orb{position:absolute;width:min(70vw,760px);height:min(85vh,760px);border-radius:50%;background:radial-gradient(ellipse at center,var(--ambient-blue),transparent 68%);animation:landing-ambient-drift 28s ease-in-out infinite alternate;will-change:transform}
.landing-ambient-orb-blue{left:-18%;top:-5%}.landing-ambient-orb-cyan{right:-17%;bottom:-12%;background:radial-gradient(ellipse at center,var(--ambient-cyan),transparent 68%);animation-name:landing-ambient-drift-cyan;animation-duration:34s;animation-delay:-12s}
@keyframes landing-ambient-drift{from{transform:translate3d(-3%,-3%,0) scale(.96)}to{transform:translate3d(14%,12%,0) scale(1.07)}}
@keyframes landing-ambient-drift-cyan{from{transform:translate3d(6%,6%,0) scale(1)}to{transform:translate3d(-15%,-12%,0) scale(1.08)}}
.landing-motion-paused .landing-ambient-orb,.landing-motion-paused .anime-mascot-image{animation-play-state:paused}
.landing-motion-static .landing-ambient-orb{animation:none;will-change:auto}
/* Alpha-aware shadow follows only the image silhouette, not the circular scene. */
.anime-mascot-image{filter:drop-shadow(0 0 0 transparent);transition:filter .25s ease}
@media(hover:hover) and (pointer:fine){.anime-mascot:hover .anime-mascot-image{filter:drop-shadow(0 0 7px var(--mascot-glow-blue)) drop-shadow(0 0 14px var(--mascot-glow-cyan))}}
@media(max-width:768px){.landing-ambient-orb{width:90vw;height:60vh;animation-duration:40s}.landing-ambient-grid{background-size:110px 110px}}
@media(prefers-reduced-motion:reduce){.landing-ambient-orb{animation:none;will-change:auto}.anime-mascot-image{transition:none}}
/* Theme-aware decoration: keep the illustration's brand colors, adapt its surroundings. */
:root{--mascot-disc-start:#d8e8ff;--mascot-disc-end:#f4e9ff;--mascot-ray:rgba(40,100,255,.13);--on-accent:#fff}
html[data-theme="dark"]{--mascot-disc-start:#263b60;--mascot-disc-end:#302c50;--mascot-ray:rgba(143,175,255,.16);--on-accent:#11182b}
.anime-mascot.anime-mascot-custom{width:min(340px,80%);height:405px;top:8px;scale:1;transform-origin:bottom center}
.anime-mascot-image{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;transform-origin:50% 90%;animation:niza-greeting-sway 6s ease-in-out infinite}
@keyframes niza-greeting-sway{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}
@media(max-width:768px){.anime-mascot.anime-mascot-custom{height:355px;top:8px;width:min(300px,82%)}}
@media(max-width:380px){.anime-mascot.anime-mascot-custom{height:330px;width:82%}}
:root,html[data-theme="light"]{--bg-page:#f7f8fc;--bg-dot:#e7ecf5;--card-bg:#fff;--card-bg-alt:#eef3fc;--card-border:#dfe5f0;--card-border-dark:#b9c5dd;--text-primary:#10204a;--text-body:#34415f;--text-muted:#586681;--text-muted-light:#66708a;--amber-main:#2864ff;--amber-hover:#174bd5;--amber-light:#e8f1ff;--amber-border:#bed3ff;--amber-text:#2054c9;--dark-pill-bg:#fff;--dark-pill-text:#10204a;--dark-pill-border:#10204a;--dark-pill-hover:#edf2ff;--nav-bg:rgba(247,248,252,.94);--anime-ink:#10204a;--anime-yellow:#ffd84d;--anime-outline:#10204a;--anime-shadow:rgba(16,32,74,.13)}
html[data-theme="dark"]{--bg-page:#11182b;--bg-dot:#202b46;--card-bg:#19233b;--card-bg-alt:#222f4a;--card-border:#34415e;--card-border-dark:#556385;--text-primary:#f0f5ff;--text-body:#d5dff0;--text-muted:#bac7dd;--text-muted-light:#a0afca;--amber-main:#779dff;--amber-hover:#a1baff;--amber-light:#263b67;--amber-border:#4969a7;--amber-text:#bbd0ff;--dark-pill-bg:#19233b;--dark-pill-text:#f0f5ff;--dark-pill-border:#7c91b8;--dark-pill-hover:#263b67;--nav-bg:rgba(17,24,43,.94);--anime-outline:#8298bd;--anime-shadow:rgba(0,0,0,.25)}
body{background-image:none}h1,h2,h3,h4{letter-spacing:-.035em}.wrap{max-width:1180px}section{padding:86px 0}.hero-sec{padding:72px 0 60px;background:radial-gradient(ellipse at 82% 25%,var(--amber-light),transparent 58%)}.hero-grid{gap:48px;align-items:center}.hero-left h1{font-size:clamp(34px,4.4vw,60px);line-height:1.12;letter-spacing:-.055em}.hero-left h1 span{color:var(--amber-main)}.hero-left p{font-size:16px;line-height:1.8;max-width:600px}.hero-stats-row{margin-top:30px}.hero-stat-item b{color:var(--text-primary)}
.btn-filament-amber,.btn-filament-dark{border:2px solid var(--anime-outline);border-radius:10px;box-shadow:4px 4px 0 var(--anime-outline);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}.btn-filament-amber:hover,.btn-filament-dark:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--anime-outline)}
.sec-head{margin-bottom:32px}.sec-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.2}.sec-head h2:before{content:'✦';display:block;color:var(--amber-main);font-size:20px;margin-bottom:12px}.sec-head p{line-height:1.8}.card-grid-3{gap:22px}.filament-card{border:1px solid var(--card-border);border-radius:16px;padding:20px;background:var(--card-bg);box-shadow:0 4px 16px var(--anime-shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s ease}.filament-card:hover{transform:translateY(-6px);border-color:var(--amber-border);box-shadow:0 18px 35px var(--anime-shadow)}#layanan .filament-card{border:2px solid var(--anime-outline);box-shadow:5px 5px 0 var(--anime-outline)}#layanan .filament-card:hover{box-shadow:8px 10px 0 var(--anime-outline);transform:translateY(-5px) rotate(-.4deg)}.card-media{border-radius:11px}.card-title{letter-spacing:-.025em}.card-desc{line-height:1.75}.card-action-btn{border-radius:9px}.testi-carousel-box{background:var(--amber-light);border:1px solid var(--amber-border);border-radius:18px;padding:28px}.software-card{border:2px solid var(--anime-outline);border-radius:16px;box-shadow:6px 6px 0 var(--anime-outline);transition:transform .3s ease,box-shadow .3s ease}.software-card:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--anime-outline)}.contact-sec-grid{border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 12px 40px var(--anime-shadow)}.contact-info-box{background:var(--amber-light);border-radius:14px}.filament-footer{background:var(--card-bg-alt);border-top:1px solid var(--card-border)}input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--amber-light)}
.anime-scene{height:430px;position:relative;isolation:isolate}.anime-scene-disc{position:absolute;inset:35px 20px 25px;border:2px solid var(--anime-outline);border-radius:50%;background:linear-gradient(145deg,#d8e8ff,#f4e9ff);box-shadow:12px 12px 0 var(--anime-shadow)}.anime-speedlines{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(40,100,255,.15) 0deg 1deg,transparent 1deg 12deg);mask-image:radial-gradient(circle,transparent 30%,#000 57%,transparent 73%)}.anime-mascot{position:absolute;width:290px;height:360px;left:50%;top:25px;transform:translateX(-50%);transition:transform .2s ease;filter:drop-shadow(0 16px 14px rgba(34,59,115,.16))}.anime-face{position:absolute;width:170px;height:190px;left:61px;top:55px;background:#ffe7d3;border:3px solid #10204a;border-radius:46% 46% 43% 43%;overflow:hidden}.anime-hair{position:absolute;inset:-15px -8px 98px;background:#10204a;clip-path:polygon(0 0,100% 0,100% 72%,84% 58%,74% 88%,60% 61%,49% 92%,35% 60%,19% 87%,0 65%)}.anime-eye{position:absolute;top:105px;width:31px;height:17px;border:3px solid #10204a;background:#fff;border-radius:50%;overflow:hidden}.anime-eye:after{content:'';position:absolute;width:9px;height:13px;background:#2864ff;border:2px solid #10204a;border-radius:50%;left:9px;top:0}.anime-eye-left{left:27px}.anime-eye-right{right:27px}.anime-mouth{position:absolute;width:22px;height:8px;border-bottom:3px solid #10204a;border-radius:50%;left:72px;top:145px}.anime-body{position:absolute;left:35px;top:226px;width:220px;height:130px;border:3px solid #10204a;border-radius:68px 68px 18px 18px;background:linear-gradient(135deg,#2864ff,#7a66ff)}.anime-body span{position:absolute;left:83px;top:36px;width:54px;height:54px;border-radius:18px;background:white;border:3px solid #10204a;display:grid;place-items:center;font-weight:900;color:#2864ff}.anime-ear{position:absolute;top:115px;width:42px;height:58px;background:#ffd84d;border:3px solid #10204a;border-radius:16px}.anime-ear-left{left:31px}.anime-ear-right{right:29px}.anime-note{position:absolute;display:flex;align-items:center;gap:12px;z-index:3;border:2px solid var(--anime-outline);background:var(--card-bg);border-radius:12px;padding:12px 16px;box-shadow:4px 4px 0 var(--anime-shadow);animation:anime-float 5s ease-in-out infinite}.anime-note i{font-size:21px;color:var(--amber-main)}.anime-note b{display:block;font-size:13px;color:var(--text-primary)}.anime-note span{font-size:11px;color:var(--text-muted)}.anime-note-top{top:35px;left:0}.anime-note-bottom{bottom:20px;right:0;animation-delay:-2s}.anime-terminal{margin:20px auto 0;max-width:440px;animation:none!important;border-radius:14px;font-size:12px}.anime-terminal .term-body{padding:15px}.anime-terminal .term-body p{font-size:12px}.anime-motion{transition:opacity .65s var(--ease),translate .65s var(--ease);transition-delay:var(--anime-delay,0ms)}.anime-motion-pending{opacity:0;translate:0 22px}.anime-motion-in{opacity:1;translate:0 0}@keyframes anime-float{50%{transform:translateY(-8px)}}
@media(max-width:768px){section{padding:54px 0}.hero-sec{padding:38px 0 44px}.hero-grid{gap:32px}.hero-left h1{font-size:36px!important}.hero-left p{font-size:15px}.anime-scene{height:380px;max-width:480px;margin:auto}.anime-mascot{scale:.88;transform-origin:top center}.anime-scene-disc{inset:30px 15px}.anime-note{padding:10px;font-size:11px}.anime-note-top{top:20px}.anime-note-bottom{bottom:10px}.hero-right{min-width:0}.testi-carousel-box{padding:20px}#layanan .filament-card{box-shadow:3px 3px 0 var(--anime-outline)}}
@media(max-width:380px){.anime-note span{font-size:10px}.anime-note-bottom{right:-3px}.anime-note-top{left:-3px}.anime-scene{height:355px}.hero-left h1{font-size:32px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.reveal-left,.reveal-right,.anime-motion-pending{opacity:1!important;transform:none!important;translate:none!important}}

/* Final overrides consolidate legacy effects into a single subtle motion language. */
.anime-mascot-viewport{position:absolute;inset:35px 20px 25px;border-radius:50%;overflow:hidden;isolation:isolate;clip-path:ellipse(50% 50% at 50% 50%)}
.anime-mascot-viewport .anime-mascot.anime-mascot-custom{width:82%;height:calc(100% - 14px);top:auto;bottom:0;scale:1;filter:none}
@media(max-width:768px){.anime-mascot-viewport{inset:30px 15px}}
.hero-left h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--amber-main)}
.anime-scene-disc{background:linear-gradient(145deg,var(--mascot-disc-start),var(--mascot-disc-end));box-shadow:8px 8px 0 var(--anime-shadow)}
.anime-speedlines{background:repeating-conic-gradient(from 0deg at 50% 50%,var(--mascot-ray) 0deg 1deg,transparent 1deg 12deg)}
.btn-filament-amber{color:var(--on-accent)}
.btn-filament-amber i{color:inherit}
.anime-note{animation:none}
.anime-mascot{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.anime-mascot-image{animation-duration:8s}
/* Reveal sections once, without stacking parent/child transforms. */
.reveal,.reveal-left,.reveal-right,.reveal.in,.reveal.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none;transition:none}
.anime-motion{transition:opacity .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1),transform .24s ease,box-shadow .24s ease;transition-delay:var(--anime-delay,0ms)}
.anime-motion.anime-motion-pending{opacity:0;translate:0 14px}
.filament-card:hover,#layanan .filament-card:hover,.software-card:hover{transform:none}
.wa-float,.wa-float::before,.wa-float::after{animation:none!important}
@media(hover:hover) and (pointer:fine){.filament-card:hover,#layanan .filament-card:hover,.software-card:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.anime-motion.anime-motion-pending{opacity:1;translate:none}.filament-card:hover,#layanan .filament-card:hover,.software-card:hover,.btn-filament-amber:hover,.btn-filament-dark:hover{transform:none}}

/* White labels on filled actions, including dark mode and hover states. */
html{--on-accent:#fff;--button-bg:#2864ff;--button-hover:#174bd5}
html[data-theme="dark"]{--on-accent:#fff}
html .btn-filament-amber,html .port-tab-btn.active,html .stair-btn.active{background:var(--button-bg);color:#fff!important}
html .btn-filament-amber:hover,html .port-tab-btn.active:hover,html .stair-btn.active:hover{background:var(--button-hover);color:#fff!important}
html .btn-filament-amber :is(i,span,svg),html .port-tab-btn.active :is(i,span,svg),html .stair-btn.active :is(i,span,svg){color:inherit!important}

/* Anime motion: scoped to the public landing, with no continuous JS rendering. */
.niza-landing{--ambient-blue:rgba(40,100,255,.22);--ambient-cyan:rgba(55,164,211,.16);--constellation-color:rgba(51,103,189,.35)}
html[data-theme="dark"] .niza-landing{--ambient-blue:rgba(79,117,234,.27);--ambient-cyan:rgba(69,172,212,.17);--constellation-color:rgba(145,180,255,.38)}
.niza-landing .landing-ambient-grid{opacity:.35}
.landing-constellation{position:absolute;left:0;top:-3%;width:25%;height:106%;color:var(--constellation-color);animation:landing-stars-drift 24s ease-in-out infinite alternate}
.landing-constellation-right{left:auto;right:0;animation-delay:-12s;animation-direction:alternate-reverse}
.landing-constellation line{stroke:currentColor;stroke-width:.7}.landing-constellation circle{fill:currentColor}
@keyframes landing-stars-drift{from{transform:translate3d(0,-8px,0);opacity:.55}to{transform:translate3d(8px,12px,0);opacity:1}}
.niza-landing .anime-card{position:relative;isolation:isolate}
.niza-landing .anime-card-effects{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2}
.niza-landing .anime-card-effects:before{content:'';position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--amber-main) 13%,transparent) 49%,color-mix(in srgb,var(--amber-main) 22%,transparent) 51%,transparent 58%);opacity:0;transform:translateX(-85%)}
.niza-landing .anime-card-effects:after{content:'✦';position:absolute;right:14px;top:12px;color:var(--amber-main);font-size:24px;opacity:0;transform:scale(.4) rotate(-35deg);transition:opacity .25s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.niza-landing .anime-motion,.niza-landing .anime-card{transition:opacity .6s ease var(--anime-delay,0ms),translate .65s cubic-bezier(.16,1,.3,1) var(--anime-delay,0ms),transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease,border-color .3s ease!important}
.niza-landing .anime-motion.anime-motion-pending{translate:0 22px}
.niza-landing .software-card-icon,.niza-landing .card-media img.fit-img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
@keyframes landing-card-shine{0%{opacity:0;transform:translateX(-85%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(85%)}}
@media(hover:hover) and (pointer:fine){
  .niza-landing .anime-card:hover{transform:translateY(-6px) rotate(-.35deg);border-color:var(--amber-border);box-shadow:5px 8px 0 var(--anime-shadow),0 14px 28px var(--anime-shadow)}
  .niza-landing .anime-card:nth-child(even):hover{transform:translateY(-6px) rotate(.35deg)}
  .niza-landing .anime-card:hover>.anime-card-effects:before{animation:landing-card-shine .8s ease-out both}
  .niza-landing .anime-card:hover>.anime-card-effects:after{opacity:.85;transform:scale(1) rotate(8deg)}
  .niza-landing .anime-card:hover .software-card-icon{transform:translateY(-3px) rotate(-7deg)}
  .niza-landing .lab-carousel-viewport:hover,.niza-landing .contact-sec-grid:hover{transform:translateY(-3px)}
}
.niza-landing .anime-card:focus-within>.anime-card-effects:after{opacity:.85;transform:scale(1)}
.landing-motion-paused :is(.landing-constellation,.anime-card-effects:before){animation-play-state:paused!important}
.landing-motion-static :is(.landing-constellation,.landing-ambient-orb,.anime-mascot-image){animation:none!important}
@media(max-width:768px){.landing-constellation{width:20%;opacity:.6;animation-duration:34s}}
@media(max-width:768px){
  .niza-landing .software-card-grid{grid-template-columns:minmax(0,1fr)}
  .niza-landing .software-card{min-width:0;overflow-wrap:anywhere}
  .niza-landing .software-card-actions{flex-wrap:wrap}
  .niza-landing section :is(.btn-filament-amber,.btn-filament-dark){max-width:100%;white-space:normal;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .niza-landing .landing-constellation,.niza-landing .anime-card-effects:before{animation:none!important}
  .niza-landing .anime-motion,.niza-landing .anime-card,.niza-landing .anime-card-effects:after{transition:none!important}
  .niza-landing .anime-card:hover,.niza-landing .anime-card:nth-child(even):hover,.niza-landing .anime-card:hover .software-card-icon{transform:none!important}
}