*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;line-height:1.75;scroll-behavior:smooth}
body{background-color:#0B0E1A;color:#A8B4D0;font-family:'IBM Plex Sans',sans-serif;font-weight:400;overflow-x:hidden}
.particle{position:fixed;width:12px;height:12px;opacity:0.2;z-index:0;pointer-events:none}
.particle::before,.particle::after{content:'';position:absolute;width:100%;height:100%}
.particle::before{background:var(--pcolor);transform:skewY(30deg)}
.particle::after{background:var(--pcolor);opacity:0.6;transform:skewY(-30deg) translateX(6px)}
.p1{--pcolor:#6BFFD4;left:10%;animation:float-up 35s linear infinite}
.p2{--pcolor:#FFD46B;left:25%;animation:float-up 42s linear infinite;animation-delay:-8s}
.p3{--pcolor:#FF6B8A;left:50%;animation:float-up 38s linear infinite;animation-delay:-15s}
.p4{--pcolor:#B06BFF;left:70%;animation:float-up 45s linear infinite;animation-delay:-5s}
.p5{--pcolor:#6BB8FF;left:85%;animation:float-up 40s linear infinite;animation-delay:-20s}
.p6{--pcolor:#6BFFD4;left:40%;animation:float-up 50s linear infinite;animation-delay:-30s}
@keyframes float-up{0%{bottom:-20px;opacity:0.2}100%{bottom:100vh;opacity:0}}
.layer-nav{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;z-index:100}
.nav-dot{width:5px;height:5px;border-radius:50%;opacity:0.4;transition:opacity 200ms,transform 200ms}
.nav-dot.active{opacity:1;transform:scale(2)}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:10}
.iso-cube{position:relative;width:200px;height:200px;opacity:0;transition:opacity 800ms;margin-bottom:32px}
.iso-cube.visible{opacity:1}
.cube-face{position:absolute}
.cube-top{width:140px;height:80px;background:#1E2A4A;transform:rotateX(60deg) rotateZ(-45deg);top:10px;left:30px;z-index:3}
.cube-left{width:100px;height:120px;background:#162040;transform:skewY(30deg);top:52px;left:30px;z-index:2}
.cube-right{width:100px;height:120px;background:#0F1730;transform:skewY(-30deg);top:52px;left:100px;z-index:1}
.face-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:20px 20px}
.cube-text{position:relative;z-index:5;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;color:#6BFFD4;padding:8px 12px;white-space:nowrap}
.hero-subtitle{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:1rem;color:#A8B4D0;margin-top:8px;opacity:0;transition:opacity 500ms}
.hero-subtitle.visible{opacity:1}
.hero-chevron{margin-top:40px;opacity:0;animation:pulse-chevron 2s ease-in-out infinite;transition:opacity 300ms}
.hero-chevron.visible{opacity:1}
@keyframes pulse-chevron{0%,100%{transform:translateY(0);opacity:0.4}50%{transform:translateY(6px);opacity:1}}
.section-line{height:1px;max-width:80%;margin:0 auto;opacity:0;transition:opacity 500ms,width 500ms}
.section-line.visible{opacity:1}
.layer-section{max-width:900px;margin:0 auto;padding:60px 24px;display:flex;gap:24px;position:relative;z-index:10}
.layer-section.offset-right{margin-left:15%}
.layer-bar{width:4px;border-radius:2px;flex-shrink:0;height:0;transition:height 300ms ease-out}
.layer-bar.visible{height:100%}
.layer-content{flex:1}
.scroll-reveal{opacity:0;transform:translateX(-40px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.scroll-reveal.visible{opacity:1;transform:translateX(0)}
.layer-label{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.layer-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.4rem;color:#FFFFFF;letter-spacing:0.03em;margin-bottom:16px}
.layer-body{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:1rem;color:#A8B4D0;line-height:1.75;margin-bottom:20px}
.code-block{font-family:'IBM Plex Mono',monospace;font-size:0.85rem;color:#6BFFD4;background:rgba(107,255,212,0.06);padding:16px 20px;border-radius:3px;line-height:1.8;margin-top:16px}
.code-token{font-weight:400}
.dep-graph{margin:24px 0}
.dep-svg{width:100%;max-width:320px}
.dep-node{opacity:0;transition:opacity 200ms,transform 200ms}
.dep-node.visible{opacity:1}
.dep-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 400ms ease-out}
.dep-line.drawn{stroke-dashoffset:0}
.chain-links{margin-top:16px;opacity:0.7}
.site-footer{max-width:900px;margin:0 auto;padding:60px 24px;position:relative;z-index:10}
.footer-line{height:1px;background:linear-gradient(to right,#1E2A4A,transparent);margin-bottom:16px}
.footer-text{font-family:'IBM Plex Sans',sans-serif;font-size:0.75rem;color:#4A5068;letter-spacing:0.04em}
@media(max-width:768px){.layer-section,.layer-section.offset-right{margin-left:auto;margin-right:auto;padding:40px 16px}.layer-title{font-size:1.8rem}.layer-nav{right:8px;gap:12px}.iso-cube{transform:scale(0.8)}}