*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0A0A0F;color:#F0EDE8;font-family:'Source Serif 4',serif;font-weight:400;font-size:clamp(0.95rem,1.6vw,1.1rem);line-height:1.78;overflow-x:hidden;letter-spacing:0.005em}

/* Hex Nav */
.hex-nav{position:fixed;top:clamp(1rem,2vh,2rem);left:clamp(1rem,2vw,2rem);z-index:50}

/* Scroll Progress */
.scroll-progress{position:fixed;right:clamp(0.5rem,1vw,1.5rem);top:10%;height:80%;width:2px;z-index:50}
.progress-chain{width:2px;height:0;background:linear-gradient(180deg,#00E676,#00E5FF,#FFD740,#FF4081,#00E676);transition:height 0.1s;border-radius:1px}

/* Pollen Layer */
.pollen-layer{position:fixed;inset:0;z-index:1;pointer-events:none}

main{position:relative;z-index:2}

/* Hex Background */
.hex-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104'%3E%3Cpolygon points='60,0 120,26 120,78 60,104 0,78 0,26' fill='none' stroke='%231A1A24' stroke-width='0.5'/%3E%3C/svg%3E");background-size:120px 104px}
.hex-bg-warm{background-color:rgba(10,15,10,0.3)}
.hex-bg-dense .hex-bg{opacity:0.6}
.hex-bg-sparse{opacity:0.3}

/* Scenes */
.scene{position:relative;min-height:100vh;padding:clamp(4rem,8vh,8rem) clamp(1rem,4vw,4rem);overflow:hidden}

/* Scene 1: Atmosphere */
.scene-atmosphere{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mandala-hero{display:grid;grid-template-columns:repeat(3,clamp(80px,12vw,140px));grid-template-rows:repeat(3,clamp(70px,10vw,120px));gap:8px;justify-content:center;align-items:center}
.hex-cell{display:flex;align-items:center;justify-content:center;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#1A1A24;padding:clamp(0.8rem,1.5vw,1.5rem)}
.hex-center{grid-column:1/4;grid-row:2;background:linear-gradient(135deg,#1A1A24,#0A0A0F);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
.site-title{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,2rem);color:#F0EDE8;letter-spacing:0.06em;text-align:center;white-space:nowrap}
.hex-petal{min-width:clamp(60px,8vw,100px);min-height:clamp(60px,8vw,100px);border:1px solid rgba(0,230,118,0.3)}
.hex-p1{grid-column:1;grid-row:1}.hex-p2{grid-column:2;grid-row:1}.hex-p3{grid-column:3;grid-row:1}
.hex-p4{grid-column:1;grid-row:3}.hex-p5{grid-column:2;grid-row:3}.hex-p6{grid-column:3;grid-row:3}
.petal-icon{width:48px;height:48px}
.hero-subtitle{font-family:'Source Serif 4',serif;font-style:italic;font-weight:400;font-size:clamp(0.95rem,1.4vw,1.2rem);color:#8A8A96;margin-top:2rem;text-align:center}

/* Scene 2: Photosynthesis */
.scene-photosynthesis{background:radial-gradient(ellipse at center,rgba(10,15,10,0.6),#0A0A0F)}
.photo-cluster{display:flex;flex-direction:column;gap:clamp(2rem,4vh,4rem);max-width:700px;margin:0 auto;position:relative}
.hex-data-card{background:linear-gradient(135deg,rgba(26,26,36,0.8),rgba(10,10,15,0.9));border:1px solid rgba(0,230,118,0.2);clip-path:polygon(3% 0%,97% 0%,100% 3%,100% 97%,97% 100%,3% 100%,0% 97%,0% 3%);padding:clamp(1.5rem,3vw,2.5rem)}
.hex-data-cell{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(0,229,255,0.15)}
.data-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#8A8A96}
.data-value{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(2rem,4vw,3rem);color:#00E5FF}
.data-unit{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.7rem;color:#8A8A96;letter-spacing:0.04em}
.cluster-heading{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);color:#F0EDE8;letter-spacing:0.06em;margin-bottom:0.8rem}
.cluster-text{color:#F0EDE8;max-width:50ch}

/* Bond Connectors */
.bond-connector{position:absolute;right:10%;top:0;width:20px;height:100%;z-index:3;pointer-events:none}
.bond-draw{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2s ease-out}
.bond-draw.drawn{stroke-dashoffset:0}

/* Scene 3: Biomass */
.scene-biomass{background:radial-gradient(ellipse at 30% 50%,rgba(0,230,118,0.03),transparent)}
.biomass-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(200px,20vw,280px),1fr));gap:clamp(12px,2vw,20px);max-width:1000px;margin:0 auto}
.hex-module{background:linear-gradient(135deg,rgba(26,26,36,0.7),rgba(10,10,15,0.8));border:1px solid rgba(0,230,118,0.15);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);padding:clamp(2rem,3vw,3rem);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:clamp(160px,20vw,240px);transition:border-color 0.4s}
.hex-module:hover{border-color:rgba(0,230,118,0.5);box-shadow:0 0 20px rgba(0,230,118,0.15)}
.hex-2x{clip-path:none;border-radius:2px}
.data-big{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(2rem,4vw,3.5rem);color:#00E676}
.module-heading{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);color:#F0EDE8;margin-bottom:0.8rem}
.module-text{color:#F0EDE8;max-width:50ch;font-size:clamp(0.9rem,1.2vw,1rem);line-height:1.7}
.module-icon{width:64px;height:64px}

/* Scene 4: Decomposition */
.scene-decomposition{background:radial-gradient(ellipse at 70% 50%,rgba(255,64,129,0.03),transparent)}
.decomp-content{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.hex-decay{border-color:rgba(255,64,129,0.3)}
.hex-decay:hover{border-color:rgba(255,64,129,0.6);box-shadow:0 0 20px rgba(255,64,129,0.15)}
.hex-decay .data-big{color:#FF4081}
.decomp-heading{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);color:#F0EDE8;margin-bottom:0.8rem}
.decomp-text{padding:1rem 0}

/* Scene 5: Renewal */
.scene-renewal{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(26,26,36,0.3),#0A0A0F)}
.renewal-center{margin-bottom:2rem}
.renewal-title{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,2rem);color:#F0EDE8;letter-spacing:0.06em}
.renewal-text{font-family:'Source Serif 4',serif;font-style:italic;font-weight:400;font-size:clamp(1.1rem,2vw,1.4rem);color:#8A8A96;text-align:center}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Hex petal stagger */
.hex-p1[data-reveal]{transition-delay:0.1s}.hex-p2[data-reveal]{transition-delay:0.2s}.hex-p3[data-reveal]{transition-delay:0.3s}
.hex-p4[data-reveal]{transition-delay:0.4s}.hex-p5[data-reveal]{transition-delay:0.5s}.hex-p6[data-reveal]{transition-delay:0.6s}

/* Responsive */
@media(max-width:768px){
    .mandala-hero{grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,70px);gap:4px}
    .decomp-content{grid-template-columns:1fr;gap:1.5rem}
    .hex-module{clip-path:none;border-radius:4px;min-height:auto;padding:1.5rem}
}