*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;line-height:1.75;scroll-behavior:smooth}
body{background-color:#0A0A14;color:#8888A0;font-family:'IBM Plex Sans',sans-serif;font-weight:400;overflow-x:hidden}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#0A0A14}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#FF3D8E,#00D4FF,#FFD23F)}

.section-indicator{position:fixed;right:16px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center center;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:400;color:#666680;letter-spacing:0.08em;text-transform:uppercase;z-index:100;transition:opacity 200ms}

.full-bleed{position:relative;width:100%;overflow:hidden}

.content-column{max-width:640px;margin:0 auto;position:relative;z-index:2}

.header-bar{position:absolute;top:0;left:0;width:0;height:2px;z-index:3;transition:width 600ms ease-out}
[data-accent="magenta"] .header-bar{background:#FF3D8E}
[data-accent="cyan"] .header-bar{background:#00D4FF}
[data-accent="yellow"] .header-bar{background:#FFD23F}

.cuboid{position:absolute;width:120px;height:80px;opacity:0;transition:opacity 1200ms ease-out,transform 1200ms ease-out;z-index:1}
.cuboid::before,.cuboid::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%}
.cuboid::before{background:linear-gradient(135deg,#12121E,#1A1A28);transform:rotateX(25deg) rotateY(-35deg);border:1px solid #1A1A28}
.cuboid-hero{top:15%;right:8%;width:180px;height:120px;transform:rotateX(35deg) rotateY(-45deg)}
.cuboid-hero.visible{opacity:0.05;transform:rotateX(25deg) rotateY(-35deg)}
.cuboid-a{bottom:20%;left:5%;width:100px;height:70px;transform:rotateX(30deg) rotateY(-40deg)}
.cuboid-a.visible{opacity:0.04;transform:rotateX(20deg) rotateY(-30deg)}
.cuboid-b{top:25%;right:6%;width:140px;height:90px;transform:rotateX(40deg) rotateY(-50deg)}
.cuboid-b.visible{opacity:0.05;transform:rotateX(28deg) rotateY(-38deg)}
.cuboid-c{bottom:15%;left:8%;width:110px;height:75px;transform:rotateX(35deg) rotateY(-42deg)}
.cuboid-c.visible{opacity:0.04;transform:rotateX(22deg) rotateY(-32deg)}

.glow-orb{position:absolute;width:200px;height:200px;border-radius:50%;opacity:0;z-index:1;transition:opacity 600ms ease-out}
[data-accent="magenta"] .glow-orb{background:radial-gradient(circle,#FF3D8E 0%,transparent 70%);top:40%;left:30%}
[data-accent="cyan"] .glow-orb{background:radial-gradient(circle,#00D4FF 0%,transparent 70%);top:30%;right:20%}
[data-accent="yellow"] .glow-orb{background:radial-gradient(circle,#FFD23F 0%,transparent 70%);top:50%;left:40%}
.glow-orb.visible{opacity:0.08}

.hero-section{min-height:100vh;display:flex;align-items:center;padding:0 5vw}
.hero-section .header-bar{background:#FF3D8E}
.hero-title{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:3.7rem;color:#E0E0F0;letter-spacing:0.08em;text-transform:uppercase;line-height:1.2;min-height:1.2em}
.hero-title .cursor{display:inline-block;width:2px;height:0.9em;background:#FF3D8E;margin-left:2px;animation:blink 800ms steps(1) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-subtitle{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:1rem;color:#8888A0;max-width:480px;margin-top:20px;opacity:0;transform:translateY(12px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.hero-subtitle.visible{opacity:1;transform:translateY(0)}

.breathing-section{min-height:60vh;display:flex;align-items:center;justify-content:center;background:#12121E;padding:80px 5vw}
.breathing-statement{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.6rem;color:#E0E0F0;text-align:center;letter-spacing:0.04em;line-height:1.5;opacity:0;transition:opacity 300ms ease-out}
.breathing-statement.visible{opacity:1}
[data-accent="cyan"] .accent-text{color:#00D4FF}
[data-accent="yellow"] .accent-text{color:#FFD23F}
[data-accent="magenta"] .accent-text{color:#FF3D8E}

.data-section{padding:120px 5vw;background:#0A0A14}
.section-title{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.6rem;color:#E0E0F0;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:48px;padding-top:40px;opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.section-title.visible{opacity:1;transform:translateY(0)}

.text-block{margin-bottom:32px;opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.text-block.visible{opacity:1;transform:translateY(0)}
.text-block p{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:1rem;color:#8888A0;line-height:1.75}

.data-point{border-left:2px solid #666680;padding:16px 0 16px 20px;margin-top:40px;opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.data-point.visible{opacity:1;transform:translateY(0)}
.data-label{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px}
.data-value{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:0.95rem;color:#AAAAC0;line-height:1.65}
[data-accent="magenta"] .data-label{color:#FF3D8E}
[data-accent="magenta"] .data-point{border-left-color:#FF3D8E}
[data-accent="cyan"] .data-label{color:#00D4FF}
[data-accent="cyan"] .data-point{border-left-color:#00D4FF}
[data-accent="yellow"] .data-label{color:#FFD23F}
[data-accent="yellow"] .data-point{border-left-color:#FFD23F}

@keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(-4px)}30%{transform:translateX(4px)}45%{transform:translateX(-2px)}60%{transform:translateX(2px)}100%{transform:translateX(0)}}
.shake-active{animation:shake 300ms ease-out}

.footer-section{padding:60px 5vw;background:#0A0A14;border-top:1px solid #12121E}
.footer-text{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:#666680;letter-spacing:0.06em}

@media(max-width:768px){
    .hero-title{font-size:2rem}
    .breathing-statement{font-size:1.2rem}
    .section-title{font-size:1.2rem}
    .section-indicator{display:none}
    .cuboid{display:none}
}