*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0D0D0D;font-family:'Nunito Sans',sans-serif;font-weight:400;font-size:16px;line-height:1.75;color:#B8B8B8;overflow-x:hidden}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;opacity:0.04}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:#0D0D0D;overflow:hidden}
.honeycomb{position:absolute;top:50%;left:50%;width:600px;height:400px;transform:translate(-50%,-50%)}
.hex{stroke-dasharray:300;stroke-dashoffset:300;opacity:0}
.hero.visible .hex{animation:drawHex 1.5s ease forwards}
.hero.visible .hex:nth-child(1){animation-delay:0.5s}
.hero.visible .hex:nth-child(2){animation-delay:0.7s}
.hero.visible .hex:nth-child(3){animation-delay:0.9s}
.hero.visible .hex:nth-child(4){animation-delay:0.9s}
.hero.visible .hex:nth-child(5){animation-delay:1.1s}
.hero.visible .hex:nth-child(6){animation-delay:1.1s}
@keyframes drawHex{
    0%{stroke-dashoffset:300;opacity:0;stroke:#2A2A2A}
    50%{opacity:1;stroke:#2A2A2A}
    100%{stroke-dashoffset:0;opacity:1;stroke:#6B8F71}
}
.hero-content{position:relative;z-index:2;text-align:center;opacity:0;transform:translateY(10px);transition:all 0.6s ease}
.hero.visible .hero-content{opacity:1;transform:translateY(0);transition-delay:2s}
h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:72px;text-transform:uppercase;letter-spacing:0.08em;color:#E8E8E8;margin-bottom:0;line-height:1}
.hero-ext{font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:14px;letter-spacing:0.1em;color:#8B7355;display:block;margin-bottom:16px}
.hero-sub{max-width:420px;margin:0 auto;color:#B8B8B8;font-size:15px}
.section-label{font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#6B8F71;display:block;margin-bottom:12px}
.diagonal-section{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:80px 40px;position:relative;clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);margin-top:-40px}
.section-charcoal{background:#0D0D0D}
.section-diamond{background:#2A2A2A}
.section-graphene{background:#0D0D0D}
.section-organic{background:#2A2A2A}
.section-inner{max-width:600px;width:100%;opacity:0;transform:translateY(24px);transition:all 0.5s ease}
.section-inner.visible{opacity:1;transform:translateY(0)}
h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:56px;text-transform:uppercase;letter-spacing:0.08em;color:#E8E8E8;margin-bottom:16px;line-height:1}
p{margin-bottom:14px}
.section-diamond h2{color:#8B7355}
.section-diamond .section-label{color:#D4D4D4}
.section-graphene h2{color:#6B8F71}
.section-organic h2{color:#3D5A4C}
.section-inner{position:relative}
.section-inner::before{content:'';position:absolute;top:0;left:-24px;width:2px;height:60px;background:linear-gradient(to bottom,#6B8F71,transparent);opacity:0.5}
@media(max-width:768px){h1{font-size:48px}h2{font-size:36px}.diagonal-section{padding:60px 20px;clip-path:polygon(0 3%,100% 0,100% 97%,0 100%)}}