:root { color-scheme: light; }
body { overflow-x: hidden; font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; }
.font-black { font-weight:800!important; }
::selection { background: #c5dfca; color: #193824; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:#2d693e; font-size:.75rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow::before { content:""; width:2rem; height:2px; background:#d9a52d; }
.hero-grid { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:40px 40px; }
.grain { position:relative; }
.grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.product-card img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover img { transform:scale(1.06); }
.hero-copy:not(.hidden) { animation:heroCopyIn .65s cubic-bezier(.2,.75,.2,1) both; }
.hero-control .hero-progress { transform:scaleX(0); }
.hero-control.is-active { background:rgba(255,255,255,.06); }
.hero-control.is-active span:nth-child(2) { color:#fff; }
.hero-control.is-active .hero-progress { animation:heroProgress 6s linear both; }
.hero-light-control { color:#64748b; }
.hero-light-control.is-active { background:#245433; color:#fff; }
.hero-light-control .hero-progress { transform:scaleX(0); }
.hero-light-control.is-active .hero-progress { animation:heroProgress 6s linear both; }
.showcase-item.is-active { box-shadow:0 16px 35px rgba(25,56,36,.15); }
#product-modal::backdrop { background:rgba(13,31,20,.82); backdrop-filter:blur(7px); }
#product-modal[open] { animation:modalIn .3s ease both; }
@keyframes heroCopyIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes heroProgress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes modalIn { from{opacity:0;transform:translateY(15px) scale(.98)} to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } .reveal{opacity:1;transform:none;} }