*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;font-family:'Josefin Slab',serif}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#252B48}
::-webkit-scrollbar-thumb{background:#557A46;border-radius:3px}

/* Animations */
@keyframes floatUp{0%{opacity:0;transform:translateY(60px)}100%{opacity:1;transform:translateY(0)}}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes slideLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fadeScale{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes drawLine{0%{stroke-dashoffset:1000}100%{stroke-dashoffset:0}}
@keyframes rotate{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(85,122,70,.3)}50%{box-shadow:0 0 25px 5px rgba(85,122,70,.15)}}
@keyframes heroParticle{0%{opacity:0;transform:translate(0,0)}50%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

.anim-up{animation:floatUp .8s ease both}
.anim-float{animation:floatSlow 4s ease-in-out infinite}
.anim-scale{animation:fadeScale .7s ease both}
.anim-pulse{animation:pulseGlow 3s ease-in-out infinite}

.reveal{opacity:0;transform:translateY(40px);transition:all .7s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

.hero-strip{display:flex;gap:20px;animation:slideLeft 30s linear infinite;width:max-content}
.hero-strip img,.hero-strip .strip-card{min-width:320px;height:200px;border-radius:16px;object-fit:cover}

.organic-card{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden}
.organic-card:hover{border-radius:20%;transform:scale(1.05)}

.float-card{transition:all .5s ease;position:relative}
.float-card:hover{box-shadow:0 0 30px rgba(85,122,70,.4);border-color:#557A46;transform:translateY(-8px) scale(1.02)}

.exp-panel{flex:1;transition:all .6s cubic-bezier(.4,0,.2,1);overflow:hidden;cursor:pointer;position:relative}
.exp-panel:hover{flex:3}
.exp-panel:not(:hover){flex:.8}
.exp-panels-container:not(:hover) .exp-panel{flex:1}

.quote-note{transform:rotate(var(--rot));transition:all .4s ease}
.quote-note:hover{transform:rotate(0deg) scale(1.06);z-index:10}

.curved-step{transition:all .4s ease}
.curved-step:hover{transform:scale(1.08)}

.hand-drawn{border-image:repeating-linear-gradient(90deg,#FFF6DC 0,#FFF6DC 8px,transparent 8px,transparent 16px) 1}

/* Page routing */
.page{display:none;min-height:100%}
.page.active{display:block}

/* Parallax */
.parallax-img{position:sticky;top:0;height:100%}

/* Hero BG */
.hero-bg{background:linear-gradient(135deg,#1a1f38 0%,#252B48 40%,#2d3452 60%,#252B48 100%);position:relative;overflow:hidden}
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(85,122,70,.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(196,193,164,.08) 0%,transparent 50%)}
.hero-particle{position:absolute;width:4px;height:4px;background:rgba(255,246,220,.2);border-radius:50%;animation:heroParticle 6s ease-in-out infinite}

/* Filter */
.filter-tag{transition:all .3s ease;cursor:pointer}
.filter-tag.active{background:#557A46;color:#FFF6DC}
.filter-tag:not(.active){background:rgba(85,122,70,.15);color:#252B48}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(37,43,72,.85);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.modal-overlay.open{display:flex}
.modal-content{max-width:800px;width:90%;max-height:85%;overflow-y:auto;border-radius:20px;animation:fadeScale .4s ease}

/* Misc */
.text-shadow{text-shadow:0 2px 20px rgba(0,0,0,.3)}
.img-placeholder{background:linear-gradient(135deg,#557A46 0%,#3d5832 50%,#557A46 100%);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite}