*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1423;color:#F0EBE0;font-family:'Lexend',sans-serif;font-weight:300;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.7;letter-spacing:0.01em;overflow-x:hidden}

/* Holographic overlay */
.holo-film{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.15;mix-blend-mode:overlay;background:conic-gradient(from 0deg,#FF6B9D,#4ECDC4,#FFE66D,#FF6B9D);animation:holoRotate 20s linear infinite;filter:hue-rotate(var(--scroll-hue,0deg))}
@keyframes holoRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Scanlines */
.scanlines{position:fixed;inset:0;z-index:9998;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px);transition:opacity 0.15s ease}
.scanlines.intense{opacity:0.25}

/* Navigation strip */
.nav-strip{position:fixed;left:0;top:0;width:4px;height:100vh;z-index:100;display:flex;flex-direction:column;transition:width 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
.nav-strip:hover{width:40px}
.nav-seg{flex:1;cursor:pointer;opacity:0.5;transition:opacity 0.3s ease}
.nav-seg:hover{opacity:1}

/* Diagonal sections */
.diagonal-section{position:relative;min-height:110vh;overflow:hidden;padding:0}
.diagonal-wrapper{transform:skewY(-12deg);padding:15vh clamp(24px,8vw,80px);min-height:110vh;display:flex;align-items:center}
.diagonal-content{transform:skewY(12deg);max-width:1000px;width:100%}

.diagonal-section[data-stage="discard"]{background:#1A1423}
.diagonal-section[data-stage="collection"]{background:#1B4E3D}
.diagonal-section.alt .diagonal-wrapper{background:inherit}
.diagonal-section[data-stage="transformation"]{background:#2D1B4E}
.diagonal-section[data-stage="reconstitution"]{background:#1B4E3D}
.diagonal-section[data-stage="reuse"]{background:#1A1423}

/* Seam glow */
.seam-glow{position:absolute;bottom:-40px;left:0;right:0;height:80px;background:linear-gradient(90deg,#FF6B9D,#4ECDC4,#FFE66D,#FF6B9D);background-size:300% 100%;opacity:0.15;mix-blend-mode:screen;animation:seamSweep 6s linear infinite;z-index:5}
@keyframes seamSweep{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* Settle section */
.diagonal-section.settle .diagonal-wrapper{transform:skewY(0deg)}
.diagonal-section.settle .diagonal-content{transform:skewY(0deg)}

/* Typography */
.display-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,7rem);letter-spacing:-0.02em;line-height:0.95;color:#F0EBE0;text-shadow:0 0 40px rgba(232,168,56,0.2)}
.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(1.6rem,4vw,3.2rem);letter-spacing:-0.02em;line-height:0.95;color:#F0EBE0;margin-bottom:16px;text-shadow:0 0 30px rgba(232,168,56,0.15)}
.body-text{font-family:'Lexend',sans-serif;font-weight:300;max-width:55ch;margin-bottom:1rem}
.body-text.meta{font-family:'Special Elite',monospace;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:#E8A838;opacity:0.6;margin-top:32px}

/* Glitch text */
.glitch-text{position:relative}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;opacity:0.6}
.glitch-text::before{color:#FF6B9D;clip-path:inset(0 0 60% 0);transform:translateX(2px)}
.glitch-text::after{color:#4ECDC4;clip-path:inset(60% 0 0 0);transform:translateX(-2px)}

/* Two column layout */
.two-col{display:grid;grid-template-columns:65% 35%;gap:clamp(1rem,3vw,3rem);align-items:start}

/* Tape spine dividers */
.tape-spine{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#E8A838;background:linear-gradient(90deg,rgba(232,168,56,0.15),rgba(200,160,80,0.08),rgba(232,168,56,0.15));padding:6px 16px;margin-bottom:24px;display:inline-block}

/* Recycle stamp */
.recycle-stamp{width:80px;height:80px;margin-bottom:20px}
.recycle-stamp.small{width:60px;height:60px}

/* Price tags */
.price-tag{background:#F0EBE0;border:1px dashed #2D1B4E;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;position:relative}
.tag-hole{width:8px;height:8px;border-radius:50%;border:1px solid #2D1B4E;flex-shrink:0}
.tag-text{font-family:'Special Elite',monospace;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#2D1B4E}

/* Pixel stretch */
.pixel-stretch{height:2px;width:100%;background:linear-gradient(90deg,#FF6B9D,#4ECDC4,#FFE66D);margin:12px 0;opacity:0.5}
.pixel-stretch.alt{background:linear-gradient(90deg,#FFE66D,#FF6B9D,#4ECDC4);opacity:0.3}

/* Datamosh */
.datamosh-zone{position:relative;height:200px;margin:24px 0}
.mosh-block{position:absolute;opacity:0;mix-blend-mode:multiply;transition:opacity 0.3s cubic-bezier(0.175,0.885,0.32,1.275),transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}
.mosh-block:nth-child(1){background:#FF6B9D}
.mosh-block:nth-child(2){background:#4ECDC4}
.mosh-block:nth-child(3){background:#FFE66D}
.mosh-block:nth-child(4){background:#7EDCB5}
.datamosh-zone.active .mosh-block{opacity:0.7}

/* Channel split */
.channel-split{position:relative;width:120px;height:120px;margin:24px auto}
.channel-split svg{position:absolute;inset:0;width:100%;height:100%}
.ch-r{transform:translate(-3px,-2px)}
.ch-g{transform:translate(3px,0)}
.ch-b{transform:translate(0,3px)}

/* Corner fold */
.col-main::before{content:'';position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 24px 24px 0;border-color:transparent #1A1423 transparent transparent}

/* Stagger */
[data-stagger]>*{opacity:0;transform:translate(-20px,20px);transition:opacity 0.6s cubic-bezier(0.175,0.885,0.32,1.275),transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275)}
[data-stagger].visible>*{opacity:1;transform:translate(0,0)}
[data-stagger].visible>*:nth-child(1){transition-delay:0s}
[data-stagger].visible>*:nth-child(2){transition-delay:0.08s}
[data-stagger].visible>*:nth-child(3){transition-delay:0.16s}
[data-stagger].visible>*:nth-child(4){transition-delay:0.24s}
[data-stagger].visible>*:nth-child(5){transition-delay:0.32s}
[data-stagger].visible>*:nth-child(6){transition-delay:0.4s}

/* Palette refs */
.ref-violet{color:#2D1B4E}
.ref-amber{color:#E8A838}
.ref-teal{color:#1B4E3D}
.ref-mint{color:#7EDCB5}
.ref-rose{color:#FF6B9D}
.ref-spectral{color:#4ECDC4}
.ref-gold{color:#FFE66D}
.ref-charcoal{color:#1A1423}
.ref-receipt{color:#F0EBE0}
.ref-prismatic{color:#F5F0FF}

@media(max-width:768px){
.diagonal-wrapper{transform:skewY(-6deg)}
.diagonal-content{transform:skewY(6deg)}
.two-col{grid-template-columns:1fr}
}
@media(max-width:480px){
.diagonal-wrapper{transform:skewY(-3deg)}
.diagonal-content{transform:skewY(3deg)}
.diagonal-section.settle .diagonal-wrapper{transform:skewY(0deg)}
}