@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,700&family=DM+Sans:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@1,300;1,400&display=swap');

/* ══════════════════════════════════════════════
   DESIGN TOKENS — Earthy · Vibrant · Nature
══════════════════════════════════════════════ */
:root {
    /* Core Palette — richer and more vibrant */
    --cream:          #F5EFE3;
    --warm-white:     #FDFAF4;
    --parchment:      #EDE2CC;
    --bark:           #28180A;
    --bark-light:     #3F2610;
    --muted-bark:     #6E5340;

    /* Accent Colours — more saturated */
    --terracotta:     #C0442A;
    --terracotta-light:#DC5A3D;
    --terracotta-glow: rgba(192,68,42,0.25);
    --leaf:           #3D6B47;
    --leaf-light:     #54906A;
    --leaf-glow:      rgba(61,107,71,0.22);
    --straw:          #C49020;
    --straw-light:    #E0AE38;
    --straw-glow:     rgba(196,144,32,0.25);
    --sage:           #7A9970;
    --moss:           #2E4D36;
    --amber:          #D97B1A;

    /* Surfaces */
    --surface-card:   #FFFDF8;

    /* Typography */
    --font-display:   'Playfair Display', serif;
    --font-body:      'DM Sans', sans-serif;
    --font-accent:    'Cormorant Garamond', serif;

    /* Spacing */
    --section-pad:    130px 0;
    --container-max:  1320px;

    /* Radii */
    --r-sm:  6px;
    --r-md:  14px;
    --r-lg:  22px;
    --r-xl:  32px;
    --r-pill:100px;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(40,24,10,.07);
    --shadow-md: 0 8px 30px rgba(40,24,10,.13);
    --shadow-lg: 0 20px 60px rgba(40,24,10,.16);
    --shadow-xl: 0 40px 90px rgba(40,24,10,.20);

    /* Transitions */
    --t-fast: 0.18s cubic-bezier(0.16,1,0.3,1);
    --t-mid:  0.38s cubic-bezier(0.16,1,0.3,1);
    --t-slow: 0.65s cubic-bezier(0.16,1,0.3,1);
}

/* ══════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--bark);
    line-height: 1.75;
    overflow-x: hidden;
    cursor: none; /* custom cursor */
}
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; }
a { text-decoration:none; color:inherit; transition:var(--t-fast); }
img { max-width:100%; display:block; }
em { font-style:italic; color:var(--terracotta); }

/* ══════════════════════════════════════════════
   SPLASH SCREEN
══════════════════════════════════════════════ */
#splash {
    position: fixed;
    inset: 0;
    background: var(--bark);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#splash.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.splash-inner { text-align:center; }

.splash-leaf {
    font-size: 4rem;
    display: block;
    margin-bottom: 20px;
    animation: splashLeafSpin 1.5s ease-in-out infinite alternate;
}

@keyframes splashLeafSpin {
    from { transform: rotate(-15deg) scale(0.9); }
    to   { transform: rotate(15deg)  scale(1.1); }
}

.splash-brand {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--cream);
    letter-spacing: -0.02em;
}
.splash-brand em { color: var(--straw); }

.splash-sub {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245,239,227,.45);
    margin: 12px 0 30px;
}

.splash-bar {
    width: 200px;
    height: 3px;
    background: rgba(245,239,227,.15);
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}
.splash-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(to right, var(--leaf), var(--straw), var(--terracotta));
    border-radius: 10px;
    animation: splashLoad 1.6s ease forwards 0.3s;
}
@keyframes splashLoad { to { width:100%; } }

/* ══════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════ */
#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(to right,
        var(--leaf) 0%,
        var(--straw) 50%,
        var(--terracotta) 100%
    );
    z-index: 9998;
    transition: width 0.1s linear;
    box-shadow: 0 0 12px var(--straw-glow);
}

/* ══════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════ */
#cursorDot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--terracotta);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%,-50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
    mix-blend-mode: multiply;
}

#cursorRing {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 2px solid var(--leaf);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99996;
    transform: translate(-50%,-50%);
    transition: transform 0.12s ease-out, width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
    opacity: 0.7;
}

body.cursor-hover #cursorDot  { width:14px; height:14px; background:var(--leaf); }
body.cursor-hover #cursorRing { width:54px; height:54px; border-color:var(--terracotta); opacity:0.5; }
body.cursor-click #cursorDot  { transform:translate(-50%,-50%) scale(0.5); }

/* Leaf trail */
#leafTrail { position:fixed; inset:0; pointer-events:none; z-index:99000; overflow:hidden; }

.trail-leaf {
    position: absolute;
    font-size: 1rem;
    pointer-events: none;
    user-select: none;
    animation: trailFade 0.8s ease-out forwards;
    transform-origin: center;
}

@keyframes trailFade {
    0%   { opacity:0.8; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
    100% { opacity:0;   transform: translate(-50%,-50%) scale(0.3) rotate(45deg) translateY(-30px); }
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════════════ */
#toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: var(--bark);
    color: var(--cream);
    padding: 14px 28px;
    border-radius: var(--r-pill);
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9990;
    box-shadow: var(--shadow-lg);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
    opacity: 0;
    white-space: nowrap;
    border: 1px solid rgba(245,239,227,.12);
}
#toast.show {
    transform: translateX(-50%) translateY(0px);
    opacity: 1;
}
#toastEmoji { font-size: 1.2rem; }

/* ══════════════════════════════════════════════
   REVEAL ANIMATION SYSTEM (stagger-aware)
══════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered card reveal */
.stagger-card {
    transition-delay: calc(var(--i, 0) * 0.1s) !important;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(45px);
    animation: fadeInUp 1s cubic-bezier(0.16,1,0.3,1) var(--delay,0s) forwards;
}
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.container { max-width:var(--container-max); margin:0 auto; padding:0 40px; }
.section { padding:var(--section-pad); position:relative; }
.section-header { text-align:center; max-width:720px; margin:0 auto 70px; }

.section-eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--leaf);
    margin-bottom: 16px;
    display: inline-block;
}

.section-title {
    font-size: clamp(2.2rem,4vw,3.5rem);
    color: var(--bark);
    margin-bottom: 20px;
}

.section-sub {
    font-size: 1.13rem;
    color: var(--muted-bark);
    line-height: 1.85;
}

/* ══════════════════════════════════════════════
   BUTTONS — with ripple + magnetic support
══════════════════════════════════════════════ */
.btn-primary,
.btn-ghost,
.btn-order,
.btn-call,
.btn-whatsapp {
    position: relative;
    overflow: hidden;
}

/* Ripple effect */
.ripple-btn .ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: rippleExpand 0.6s linear;
    pointer-events: none;
}
@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--terracotta) 0%, var(--amber) 100%);
    color: #fff !important;
    padding: 14px 32px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-body);
    border: none;
    box-shadow: 0 6px 24px var(--terracotta-glow), 0 2px 6px rgba(0,0,0,.1);
    transition: var(--t-mid);
    cursor: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--terracotta-light) 0%, var(--straw-light) 100%);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px var(--terracotta-glow), 0 4px 10px rgba(0,0,0,.12);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--bark);
    padding: 14px 32px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--bark);
    transition: var(--t-mid);
    cursor: none;
}
.btn-ghost:hover {
    background: var(--bark);
    color: var(--cream) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.btn-lg { padding:18px 42px; font-size:1.1rem; }

.btn-arrow { display:inline-block; transition:transform 0.3s ease; }
.btn-primary:hover .btn-arrow { transform:translateX(6px); }

/* ══════════════════════════════════════════════
   PARTICLES CANVAS
══════════════════════════════════════════════ */
#particles-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.particle {
    position: absolute;
    opacity: 0;
    animation: particleDrift var(--dur,12s) ease-in-out var(--pd-delay,0s) infinite;
    pointer-events: none;
    user-select: none;
}
@keyframes particleDrift {
    0%   { transform:translateY(110vh) rotate(0deg);   opacity:0; }
    10%  { opacity:0.3; }
    90%  { opacity:0.1; }
    100% { transform:translateY(-10vh)  rotate(360deg); opacity:0; }
}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 990;
    background: rgba(245,239,227,0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(40,24,10,.1);
    transition: all 0.4s ease;
}
.navbar.scrolled {
    background: rgba(245,239,227,0.96);
    box-shadow: 0 4px 30px rgba(40,24,10,.1);
}

.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto; padding: 0 40px;
    height: 76px;
    display: flex; align-items: center; gap:40px;
}

.logo {
    display: flex; align-items: center; gap:10px;
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight:700;
    color: var(--bark); white-space:nowrap; flex-shrink:0;
}
.logo em { color:var(--leaf); }
.logo-leaf { font-size:1.6rem; display:inline-block; transition:var(--t-mid); }
.logo:hover .logo-leaf { transform:rotate(20deg) scale(1.25); }

.nav-links { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
.nav-link {
    font-weight:500; font-size:0.95rem;
    padding:8px 16px; border-radius:var(--r-pill);
    color:var(--muted-bark); transition:var(--t-fast); cursor:none;
}
.nav-link:hover, .nav-link.active { color:var(--bark); background:rgba(61,107,71,.1); }
.nav-link.active { color:var(--leaf); font-weight:600; }

.nav-cta { display:flex; gap:10px; align-items:center; flex-shrink:0; }

.btn-call {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:var(--r-pill);
    font-weight:600; font-size:0.9rem;
    color:var(--bark); border:1.5px solid var(--bark);
    transition:var(--t-fast); cursor:none;
}
.btn-call:hover { background:var(--bark); color:var(--cream)!important; }

.btn-whatsapp {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 20px; border-radius:var(--r-pill);
    font-weight:600; font-size:0.9rem;
    background:var(--leaf); color:#fff!important;
    box-shadow:0 4px 16px var(--leaf-glow);
    transition:var(--t-fast); cursor:none;
}
.btn-whatsapp:hover { background:var(--moss); transform:translateY(-2px); }

.hamburger {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px; margin-left:auto;
}
.hamburger span { display:block; width:24px; height:2.5px; background:var(--bark); border-radius:2px; transition:var(--t-fast); }
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:76px;
    background:var(--warm-white);
    position:relative; overflow:hidden;
}

/* Gradient orbs — morphing glow blobs */
.hero-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: orbMorph 10s ease-in-out infinite alternate;
    z-index: 0;
}
.orb1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(61,107,71,.18) 0%, transparent 70%);
    top: -10%; left: -10%;
    animation-delay: 0s;
}
.orb2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(192,68,42,.14) 0%, transparent 70%);
    bottom: -10%; right: -5%;
    animation-delay: 3s;
}
.orb3 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(196,144,32,.16) 0%, transparent 70%);
    top: 40%; left: 45%;
    animation-delay: 6s;
}
@keyframes orbMorph {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(0.9) rotate(-10deg); }
}

.hero::after {
    content:'';
    position:absolute; bottom:0; left:0; width:100%; height:3px;
    background:linear-gradient(90deg,var(--leaf),var(--straw),var(--terracotta));
    z-index:2;
}

.hero-bg-leaves { position:absolute; inset:0; pointer-events:none; z-index:1; }
.leaf { position:absolute; font-size:2rem; opacity:0.12; animation:leafFloat 9s ease-in-out infinite; }
.l1 { top:15%; left:5%;  animation-delay:0s;  animation-duration:10s; font-size:2.5rem; }
.l2 { top:60%; left:8%;  animation-delay:2s;  animation-duration:12s; }
.l3 { top:28%; right:7%; animation-delay:1s;  animation-duration:9s;  }
.l4 { bottom:22%; right:12%; animation-delay:3s; animation-duration:11s; font-size:1.6rem; }
.l5 { top:75%; left:44%; animation-delay:4s;  animation-duration:8s;  }

@keyframes leafFloat {
    0%,100% { transform:translateY(0) rotate(-5deg); }
    50%      { transform:translateY(-22px) rotate(10deg); }
}

.hero-container {
    max-width:var(--container-max); margin:0 auto;
    padding:80px 40px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:80px; align-items:center;
    position:relative; z-index:2;
}

.hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.82rem; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase;
    color:var(--leaf);
    background:rgba(61,107,71,.1);
    padding:6px 16px; border-radius:var(--r-pill);
    margin-bottom:28px;
}

.dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--leaf);
    display:inline-block;
    animation:pulseGrow 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 var(--leaf-glow);
}
@keyframes pulseGrow {
    0%   { transform:scale(1);   box-shadow:0 0 0 0   var(--leaf-glow); }
    50%  { transform:scale(1.5); box-shadow:0 0 0 8px transparent; }
    100% { transform:scale(1);   box-shadow:0 0 0 0   var(--leaf-glow); }
}

/* Typewriter */
.typewriter-wrap { display:inline; }
.hero-em {
    color:var(--terracotta);
    font-style:italic;
    display:inline;
    position:relative;
}
.type-cursor {
    display:inline-block;
    color:var(--terracotta);
    font-style:normal;
    animation:blink 0.9s step-end infinite;
    font-weight:300;
}
@keyframes blink { 50%{opacity:0;} }

.hero-headline {
    font-size:clamp(2.8rem,5vw,5rem);
    font-weight:700; color:var(--bark);
    margin-bottom:28px; letter-spacing:-0.02em;
}

.hero-sub {
    font-size:1.18rem; color:var(--muted-bark);
    margin-bottom:44px; max-width:540px; line-height:1.9;
}

.hero-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:48px; }

.hero-trust-bar {
    display:flex; align-items:center; gap:30px;
    padding:20px 28px;
    background:rgba(40,24,10,.04);
    border-radius:var(--r-lg);
    border:1px solid rgba(40,24,10,.08);
    width:fit-content;
}
.trust-item { text-align:center; font-size:0.92rem; color:var(--muted-bark); font-weight:500; }
.trust-num {
    display:block;
    font-family:var(--font-display); font-size:2rem; font-weight:700;
    color:var(--terracotta); line-height:1; margin-bottom:4px;
}
.trust-divider { width:1px; height:40px; background:rgba(40,24,10,.15); }

/* Hero image */
.hero-visual-block { position:relative; display:flex; justify-content:center; align-items:center; }

.hero-image-frame {
    width:88%; aspect-ratio:4/3;
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-xl);
    position:relative;
    border:3px solid rgba(255,255,255,.9);
}
.hero-main-img {
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.04);
    transition:transform 8s ease;
}
.hero-image-frame:hover .hero-main-img { transform:scale(1.1); }

/* Shine sweep over hero image */
.hero-img-shine {
    position:absolute; inset:0;
    background:linear-gradient(105deg,
        transparent 40%,
        rgba(255,255,255,.22) 50%,
        transparent 60%
    );
    background-size:200% 100%;
    animation:imgShine 5s ease-in-out 2s infinite;
}
@keyframes imgShine {
    0%   { background-position:-100% 0; }
    40%  { background-position:200%  0; }
    100% { background-position:200%  0; }
}

.frame-deco { position:absolute; width:50px; height:50px; border-color:var(--straw); border-style:solid; opacity:.8; }
.frame-deco-tl { top:-8px;    left:-8px;  border-width:3px 0 0 3px; border-radius:6px 0 0 0; }
.frame-deco-br { bottom:-8px; right:-8px; border-width:0 3px 3px 0; border-radius:0 0 6px 0; }

.floating-badge {
    position:absolute;
    background:var(--warm-white);
    border-radius:var(--r-lg);
    padding:10px 18px;
    font-size:0.88rem; font-weight:600; color:var(--bark);
    box-shadow:var(--shadow-md);
    border:1px solid rgba(40,24,10,.12);
    white-space:nowrap;
    animation:badgeFloat 4s ease-in-out infinite;
    backdrop-filter:blur(8px);
}
.badge-eco  { top:10%;    left:-6%;  animation-delay:0s; }
.badge-made { top:55%;    right:-8%; animation-delay:1.5s; }
.badge-cert { bottom:8%;  left:-8%;  animation-delay:3s; }

@keyframes badgeFloat {
    0%,100% { transform:translateY(0px); }
    50%      { transform:translateY(-10px); }
}

.scroll-cue {
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    z-index:2; opacity:0.55;
    animation: scrollFade 3s ease-in-out infinite;
}
@keyframes scrollFade { 0%,100%{opacity:.35;} 50%{opacity:.7;} }

.scroll-cue span {
    font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-bark);
}
.scroll-line {
    width:1px; height:40px;
    background:linear-gradient(to bottom,var(--terracotta),transparent);
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%   { transform:scaleY(0); transform-origin:top; }
    50%  { transform:scaleY(1); transform-origin:top; }
    51%  { transform:scaleY(1); transform-origin:bottom; }
    100% { transform:scaleY(0); transform-origin:bottom; }
}

/* ══════════════════════════════════════════════
   MARQUEE TICKERS
══════════════════════════════════════════════ */
.ticker-strip { background:var(--bark); padding:14px 0; overflow:hidden; position:relative; z-index:5; }
.ticker-track, .ticker-track-reverse {
    display:flex; white-space:nowrap;
    animation:tickerMove 30s linear infinite;
}
.ticker-track-reverse { animation:tickerMoveReverse 26s linear infinite; }

@keyframes tickerMove        { 0%{transform:translateX(0);}    100%{transform:translateX(-50%);} }
@keyframes tickerMoveReverse { 0%{transform:translateX(-50%);} 100%{transform:translateX(0);}   }

.ticker-track span, .ticker-track-reverse span {
    padding:0 40px;
    font-family:var(--font-display); font-size:0.9rem; font-weight:600;
    letter-spacing:.08em; color:var(--straw); display:inline-block;
}
.ticker-reverse { background:var(--leaf); }
.ticker-reverse .ticker-track-reverse span { color:rgba(245,239,227,.9); }

/* ══════════════════════════════════════════════
   PRODUCTS SECTION
══════════════════════════════════════════════ */
.products-section { background:var(--warm-white); }

/* Decorative background blob */
.products-bg-shape {
    position:absolute;
    width:800px; height:800px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(61,107,71,.07) 0%, transparent 70%);
    top:-200px; right:-200px;
    pointer-events:none;
}

.product-filter-bar { display:flex; gap:10px; justify-content:center; margin-bottom:52px; }
.filter-btn {
    padding:10px 26px; border-radius:var(--r-pill);
    border:1.5px solid rgba(40,24,10,.2);
    background:transparent;
    font-family:var(--font-body); font-size:0.9rem; font-weight:600;
    color:var(--muted-bark); cursor:none; transition:var(--t-fast);
}
.filter-btn:hover, .filter-btn.active {
    background:var(--bark); color:var(--cream); border-color:var(--bark);
}

.product-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}

.product-card {
    background:var(--surface-card);
    border-radius:var(--r-xl); overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(40,24,10,.06);
    display:flex; flex-direction:column;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
    will-change:transform;
}
.product-card:hover {
    transform:translateY(-12px) !important;
    box-shadow:var(--shadow-xl);
}

.product-img-wrap { position:relative; overflow:hidden; height:240px; }
.product-img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.product-card:hover .product-img { transform:scale(1.1); }

.product-overlay {
    position:absolute; inset:0;
    background:rgba(40,24,10,.62);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s ease;
}
.product-card:hover .product-overlay { opacity:1; }

.overlay-btn {
    background:var(--cream); color:var(--bark);
    padding:12px 26px; border-radius:var(--r-pill);
    font-weight:700; font-size:0.9rem;
    transform:translateY(12px); transition:transform 0.3s ease;
    cursor:none;
}
.product-card:hover .overlay-btn { transform:translateY(0); }

.product-badge {
    position:absolute; top:14px; left:14px;
    background:var(--terracotta); color:#fff;
    font-size:.74rem; font-weight:700; letter-spacing:.05em;
    padding:5px 14px; border-radius:var(--r-pill);
}
.badge-premium { background:var(--straw);    color:var(--bark); }
.badge-new     { background:var(--leaf); }

.product-body { padding:24px; display:flex; flex-direction:column; flex-grow:1; }
.product-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }

.product-tag {
    font-size:.76rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--leaf);
    background:rgba(61,107,71,.1);
    padding:3px 10px; border-radius:var(--r-pill);
}
.product-availability { font-size:.8rem; color:var(--muted-bark); }
.product-name { font-size:1.38rem; color:var(--bark); margin-bottom:10px; }
.product-desc {
    font-size:.94rem; color:var(--muted-bark);
    line-height:1.75; flex-grow:1; margin-bottom:20px;
}

.product-footer {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-top:16px; border-top:1px solid rgba(40,24,10,.08);
}
.product-price { display:flex; flex-direction:column; }
.price-label   { font-size:.74rem; color:var(--muted-bark); font-weight:500; }
.price-val     { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--terracotta); }

.btn-order {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg, var(--leaf), var(--moss));
    color:#fff!important;
    padding:10px 20px; border-radius:var(--r-pill);
    font-weight:700; font-size:.88rem;
    box-shadow:0 4px 16px var(--leaf-glow);
    transition:var(--t-fast); white-space:nowrap; cursor:none;
}
.btn-order:hover { background:var(--moss); transform:translateY(-3px); box-shadow:0 8px 24px var(--leaf-glow); }

/* CTA card */
.product-card-cta {
    background:linear-gradient(135deg, var(--bark) 0%, var(--bark-light) 100%);
    color:var(--cream);
}
.cta-card-inner {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:50px 30px;
    height:100%; gap:16px;
}
.cta-icon { font-size:3.5rem; animation:ctaTilt 3s ease-in-out infinite; }
@keyframes ctaTilt { 0%,100%{transform:rotate(-5deg) scale(1);} 50%{transform:rotate(5deg) scale(1.1);} }

.cta-card-inner h3 { font-size:1.8rem; color:var(--straw); }
.cta-card-inner p  { color:rgba(245,239,227,.72); font-size:.95rem; }

/* ══════════════════════════════════════════════
   SUSTAINABILITY / GREEN ADVANTAGE
══════════════════════════════════════════════ */
.sustainability-section {
    background:linear-gradient(170deg, var(--cream) 0%, #E8EFE8 100%);
}

.green-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:72px; }

.green-card {
    background:var(--warm-white);
    border-radius:var(--r-xl); padding:40px 32px;
    border:1px solid rgba(61,107,71,.1);
    box-shadow:var(--shadow-sm);
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
    transition-delay:var(--gc-delay,0s);
    position:relative; overflow:hidden;
}
.green-card::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(61,107,71,.04) 0%, transparent 60%);
    opacity:0; transition:opacity 0.3s ease;
}
.green-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.green-card:hover::before { opacity:1; }

.green-icon-wrap {
    width:70px; height:70px; position:relative;
    margin-bottom:24px; display:flex; align-items:center; justify-content:center;
}
.green-icon { font-size:2.2rem; position:relative; z-index:2; }
.green-ring {
    position:absolute; inset:0; border-radius:50%;
    background:rgba(61,107,71,.1);
    animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

.green-card h3 { font-size:1.22rem; color:var(--bark); margin-bottom:12px; }
.green-card p  { font-size:.94rem; color:var(--muted-bark); line-height:1.78; margin-bottom:16px; }
.green-stat {
    display:inline-block; font-size:.78rem; font-weight:700;
    letter-spacing:.05em; color:var(--leaf);
    background:rgba(61,107,71,.1);
    padding:5px 14px; border-radius:var(--r-pill);
}

/* Impact Banner */
.impact-banner {
    background:linear-gradient(135deg, var(--bark) 0%, var(--bark-light) 50%, #5C4433 100%);
    border-radius:var(--r-xl); padding:56px 60px;
    display:flex; align-items:center; justify-content:center;
    gap:60px; flex-wrap:wrap;
    box-shadow:var(--shadow-xl);
    position:relative; overflow:hidden;
}
.impact-banner::before {
    content:'♻️';
    position:absolute; font-size:18rem;
    right:-50px; bottom:-40px;
    opacity:0.04; pointer-events:none; line-height:1;
}

.impact-stat { text-align:center; }
.impact-num {
    display:block; font-family:var(--font-display);
    font-size:3.8rem; font-weight:700; color:var(--straw);
    line-height:1; margin-bottom:8px;
    text-shadow:0 0 30px var(--straw-glow);
}
.impact-label { font-size:.9rem; color:rgba(245,239,227,.6); font-weight:500; }
.impact-div { font-size:1.8rem; opacity:.35; }

/* ══════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════ */
.about-section { background:var(--cream); overflow:hidden; }
.about-watermark {
    position:absolute; font-size:28rem; line-height:1;
    top:50%; left:50%; transform:translate(-50%,-50%);
    opacity:.025; pointer-events:none; z-index:0; user-select:none;
}

.about-layout {
    display:grid; grid-template-columns:1fr 1fr;
    gap:40px; margin-bottom:60px; position:relative; z-index:1;
}

.about-panel, .vision-panel {
    background:var(--surface-card);
    border-radius:var(--r-xl); padding:52px;
    box-shadow:var(--shadow-md);
    border:1px solid rgba(40,24,10,.07);
    transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.about-panel:hover, .vision-panel:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.vision-panel {
    background:linear-gradient(145deg, var(--leaf) 0%, var(--moss) 100%);
    color:var(--cream);
}
.vision-panel p { color:rgba(245,239,227,.8); }

.panel-label {
    display:inline-block; font-size:.78rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--leaf); background:rgba(61,107,71,.1);
    padding:5px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.label-vision { color:var(--straw); background:rgba(196,144,32,.2); }

.panel-heading { font-size:1.9rem; color:var(--bark); margin-bottom:24px; }
.vision-panel .panel-heading { color:var(--cream); }

.about-panel p, .vision-panel p {
    font-size:1rem; line-height:1.88; color:var(--muted-bark); margin-bottom:16px;
}
.vision-panel p { color:rgba(245,239,227,.8); }

.about-founder-card {
    display:flex; align-items:center; gap:16px;
    background:rgba(61,107,71,.06);
    border-radius:var(--r-lg); padding:18px 22px;
    margin:28px 0; border:1px solid rgba(61,107,71,.12);
}
.founder-avatar {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,var(--leaf),var(--moss));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1.4rem; font-weight:700; flex-shrink:0;
}
.founder-info { display:flex; flex-direction:column; gap:3px; }
.founder-info strong { font-size:1rem; color:var(--bark); }
.founder-info span   { font-size:.85rem; color:var(--muted-bark); }
.founder-location    { color:var(--terracotta)!important; }

.about-fact-row { display:flex; flex-wrap:wrap; gap:10px; }
.fact-pill {
    font-size:.82rem; font-weight:600; padding:6px 14px;
    background:rgba(40,24,10,.06); border-radius:var(--r-pill);
    color:var(--muted-bark); border:1px solid rgba(40,24,10,.1);
}

.vision-pillars { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0; }
.pillar {
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.12);
    border-radius:var(--r-md); padding:12px 16px;
    font-size:.9rem; font-weight:500; color:var(--cream);
    transition:background 0.2s ease;
}
.pillar:hover { background:rgba(255,255,255,.2); }
.pillar-icon { font-size:1.2rem; }

.vision-quote {
    border-left:3px solid var(--straw);
    padding:14px 24px;
    font-family:var(--font-accent); font-style:italic;
    font-size:1.15rem; color:rgba(245,239,227,.85);
    background:rgba(0,0,0,.12);
    border-radius:0 var(--r-md) var(--r-md) 0;
    line-height:1.75;
}

.factsheet {
    background:var(--surface-card); border-radius:var(--r-xl);
    padding:44px; box-shadow:var(--shadow-md);
    border:1px solid rgba(40,24,10,.07);
    position:relative; z-index:1;
}
.factsheet-title {
    font-family:var(--font-display); font-size:1.4rem;
    color:var(--bark); margin-bottom:28px;
    padding-bottom:18px; border-bottom:2px solid rgba(40,24,10,.08);
}
.factsheet-grid { display:flex; flex-direction:column; gap:0; }
.fact-row {
    display:flex; align-items:center; gap:20px;
    padding:14px 0; border-bottom:1px dashed rgba(40,24,10,.08);
}
.fact-row:last-child { border-bottom:none; }
.fact-key  { font-weight:600; font-size:.9rem; color:var(--muted-bark); min-width:200px; flex-shrink:0; }
.fact-val  { font-size:.95rem; color:var(--bark); }

/* ══════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════ */
.reviews-section { background:var(--parchment); }

.rating-overview {
    display:grid; grid-template-columns:auto 1fr 1fr;
    gap:50px; align-items:start;
    background:var(--warm-white);
    border-radius:var(--r-xl); padding:44px;
    margin-bottom:60px; box-shadow:var(--shadow-md);
    border:1px solid rgba(40,24,10,.07);
}
.rating-big { text-align:center; }
.rating-num {
    display:block; font-family:var(--font-display);
    font-size:5rem; font-weight:700; color:var(--terracotta); line-height:1;
}
.rating-stars { font-size:1.8rem; color:var(--straw); margin:8px 0; letter-spacing:4px; }
.rating-count { font-size:.88rem; color:var(--muted-bark); font-weight:500; }

.rating-bars    { display:flex; flex-direction:column; gap:10px; justify-content:center; }
.rbar-row       { display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--muted-bark); font-weight:500; }
.rbar-track     { flex:1; height:8px; background:rgba(40,24,10,.08); border-radius:10px; overflow:hidden; }
.rbar-fill      { height:100%; background:linear-gradient(to right, var(--straw), var(--terracotta)); border-radius:10px; width:0; transition:width 1.6s ease; }
.rbar-fill.animated { width:var(--w); }

.rating-factors { display:flex; flex-direction:column; gap:16px; justify-content:center; }
.factor-item    { display:flex; flex-direction:column; gap:6px; font-size:.88rem; color:var(--muted-bark); font-weight:500; }
.factor-bar-wrap{ height:6px; background:rgba(40,24,10,.08); border-radius:10px; overflow:hidden; }
.factor-bar     { height:100%; background:linear-gradient(to right, var(--leaf), var(--sage)); border-radius:10px; width:0; transition:width 1.6s ease 0.3s; }
.factor-bar.animated { width:var(--fw); }

.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.review-card {
    background:var(--warm-white);
    border-radius:var(--r-xl); padding:32px;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(40,24,10,.07);
    transition:transform 0.4s ease, box-shadow 0.4s ease;
    transition-delay:var(--rc-delay,0s);
}
.review-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); }

.review-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.reviewer-avatar {
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg,var(--leaf),var(--moss));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1.2rem; font-weight:700; flex-shrink:0;
}
.reviewer-info { flex:1; }
.reviewer-info strong { display:block; font-size:1rem; color:var(--bark); }
.reviewer-info span   { font-size:.82rem; color:var(--muted-bark); }
.review-stars  { font-size:1.1rem; color:var(--straw); letter-spacing:2px; }

.review-tag {
    display:inline-block; font-size:.74rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--terracotta); background:rgba(192,68,42,.08);
    padding:3px 12px; border-radius:var(--r-pill); margin-bottom:14px;
}
.review-text { font-size:.97rem; color:var(--muted-bark); line-height:1.82; font-style:italic; margin-bottom:16px; }
.review-date { font-size:.8rem; color:var(--sage); font-weight:500; }

/* ══════════════════════════════════════════════
   CONTACT CTA
══════════════════════════════════════════════ */
.contact-section { background:var(--warm-white); }

.contact-card {
    background:linear-gradient(135deg, var(--bark) 0%, var(--bark-light) 60%, #5C4433 100%);
    border-radius:28px; padding:80px;
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow-xl);
}
/* Animated glow behind CTA card */
.contact-card-glow {
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 30% 50%, rgba(196,144,32,.15) 0%, transparent 60%);
    animation:ctaGlow 6s ease-in-out infinite alternate;
    pointer-events:none;
}
@keyframes ctaGlow {
    from { opacity:.5; transform:scale(1); }
    to   { opacity:1;  transform:scale(1.1); }
}
.contact-card::after {
    content:'🌿';
    position:absolute; font-size:22rem;
    bottom:-40px; right:-50px;
    opacity:.04; pointer-events:none; line-height:1;
}

.contact-text { position:relative; z-index:1; }
.contact-text h2 { font-size:2.7rem; color:var(--cream); margin:16px 0 20px; line-height:1.2; }
.contact-text h2 em { color:var(--straw); }
.contact-text p { color:rgba(245,239,227,.74); font-size:1.05rem; line-height:1.82; margin-bottom:30px; }

.contact-details { display:flex; flex-direction:column; gap:10px; }
.contact-item { font-size:.94rem; color:rgba(245,239,227,.78); display:flex; align-items:center; gap:8px; }

.contact-actions {
    display:flex; flex-direction:column; align-items:flex-start;
    gap:16px; position:relative; z-index:1;
}
.contact-actions .btn-primary {
    background:linear-gradient(135deg, var(--straw) 0%, var(--straw-light) 100%);
    color:var(--bark)!important;
    box-shadow:0 6px 24px var(--straw-glow);
}
.contact-actions .btn-primary:hover { filter:brightness(1.08); box-shadow:0 10px 30px var(--straw-glow); }
.contact-actions .btn-ghost { color:var(--cream)!important; border-color:rgba(245,239,227,.38); }
.contact-actions .btn-ghost:hover { background:rgba(245,239,227,.1); color:var(--cream)!important; }
.cta-note { font-size:.82rem; color:rgba(245,239,227,.45); margin-top:-4px; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer { background:var(--bark); padding:80px 0 0; color:var(--cream); }
.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:50px; padding-bottom:60px;
    border-bottom:1px solid rgba(245,239,227,.1);
}
.footer-logo { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--cream); margin-bottom:16px; display:block; }
.footer-logo em { color:var(--straw); }
.footer-brand p { font-size:.9rem; color:rgba(245,239,227,.55); line-height:1.85; margin-bottom:24px; }
.footer-social { display:flex; gap:10px; }
.social-pill {
    padding:8px 18px; border-radius:var(--r-pill);
    border:1px solid rgba(245,239,227,.2);
    font-size:.84rem; font-weight:600;
    color:rgba(245,239,227,.72); transition:var(--t-fast);
    cursor:none;
}
.social-pill:hover { background:rgba(245,239,227,.1); color:var(--cream); border-color:rgba(245,239,227,.35); }
.footer-links-col { display:flex; flex-direction:column; gap:10px; }
.footer-links-col h4 {
    font-size:.84rem; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--straw); margin-bottom:6px;
}
.footer-links-col a, .footer-links-col span { font-size:.9rem; color:rgba(245,239,227,.58); transition:color 0.2s ease; }
.footer-links-col a:hover { color:var(--cream); }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; font-size:.84rem; color:rgba(245,239,227,.38);
}
.footer-credit { color:rgba(245,239,227,.48); }

/* ══════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════ */
.back-to-top {
    position:fixed; bottom:32px; right:32px;
    width:50px; height:50px; border-radius:50%;
    background:linear-gradient(135deg, var(--terracotta), var(--amber));
    color:#fff; border:none; font-size:1.3rem; font-weight:700;
    cursor:none; box-shadow:var(--shadow-md);
    opacity:0; transform:translateY(20px);
    transition:opacity 0.35s ease, transform 0.35s ease;
    z-index:500; display:flex; align-items:center; justify-content:center;
}
.back-to-top:hover { filter:brightness(1.12); }
.back-to-top.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════
   CONFETTI CANVAS (JS draws on it)
══════════════════════════════════════════════ */
.confetti-piece {
    position: fixed;
    width: 10px; height: 10px;
    pointer-events: none;
    z-index: 99995;
    border-radius: 2px;
    animation: confettiFall var(--cf-dur,1.5s) ease-out var(--cf-delay,0s) forwards;
}
@keyframes confettiFall {
    0%   { transform:translate(0,0) rotate(0deg);   opacity:1; }
    100% { transform:translate(var(--cf-x,0px), var(--cf-y,200px)) rotate(var(--cf-r,720deg)); opacity:0; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1100px) {
    .product-grid { grid-template-columns:repeat(2,1fr); }
    .green-grid   { grid-template-columns:repeat(2,1fr); }
    .about-layout { grid-template-columns:1fr; }
    .reviews-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid  { grid-template-columns:1fr 1fr; }
    .contact-card { padding:50px 40px; }
    .rating-overview { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
    :root { --section-pad:80px 0; }
    body { cursor:auto; }
    #cursorDot, #cursorRing, #leafTrail { display:none; }

    .hero-container { grid-template-columns:1fr; text-align:center; gap:40px; }
    .hero-sub { max-width:100%; }
    .hero-actions { justify-content:center; }
    .hero-trust-bar { margin:0 auto; }
    .hero-visual-block { order:-1; }
    .orb1, .orb2, .orb3 { opacity:.6; }
    .hero-image-frame { width:100%; max-width:460px; margin:0 auto; }

    .nav-links { display:none; }
    .nav-links.open {
        display:flex; flex-direction:column;
        position:absolute; top:76px; left:0; right:0;
        background:rgba(245,239,227,.97);
        backdrop-filter:blur(20px);
        padding:20px 40px 30px;
        border-bottom:1px solid rgba(40,24,10,.1);
        gap:4px;
    }
    .hamburger { display:flex; }
    .nav-cta { display:none; }

    .contact-card { grid-template-columns:1fr; gap:40px; padding:40px; }
    .contact-actions { align-items:stretch; }
    .product-grid { grid-template-columns:1fr; }
    .green-grid   { grid-template-columns:1fr; }
    .reviews-grid { grid-template-columns:1fr; }
    .footer-grid  { grid-template-columns:1fr; }
    .rating-overview { grid-template-columns:1fr; }
    .impact-banner { gap:30px; padding:40px 30px; }
}

@media (max-width:600px) {
    .container { padding:0 20px; }
    .nav-inner { padding:0 20px; }
    .hero-container { padding:60px 20px; }
    .hero-headline { font-size:2.5rem; }
    .hero-trust-bar { flex-direction:column; gap:20px; }
    .trust-divider { width:40px; height:1px; }
    .about-panel, .vision-panel { padding:32px 24px; }
    .factsheet { padding:28px 20px; }
    .fact-key { min-width:unset; }
    .fact-row { flex-direction:column; align-items:flex-start; gap:4px; }
    .contact-card { padding:28px 20px; }
    .contact-text h2 { font-size:1.9rem; }
    .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
    .badge-eco, .badge-made, .badge-cert { display:none; }
    .splash-brand { font-size:2.2rem; }
}