:root{
    --fx-green:#315f3b;
    --fx-gold:#b8844d;
    --fx-glow:rgba(124,174,104,.28);
    --fx-line:rgba(49,95,59,.16);
    --fx-cyan:rgba(102,184,156,.22);
    --fx-ease:cubic-bezier(.2,.8,.2,1);
}

body.js-ready{
    overflow-x:hidden;
}

html{
    scroll-behavior:smooth;
}

body.js-ready::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.42;
    background:
        linear-gradient(90deg,transparent 0,rgba(49,95,59,.055) 1px,transparent 1px),
        linear-gradient(0deg,transparent 0,rgba(49,95,59,.04) 1px,transparent 1px);
    background-size:96px 96px;
    transform:translate3d(0,calc(var(--scroll-ratio,0) * -36px),0);
}

.fx-cursor-light{
    position:fixed;
    left:var(--cursor-x,50vw);
    top:var(--cursor-y,50vh);
    z-index:12;
    width:340px;
    height:340px;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(122,174,101,.18),rgba(184,132,77,.08) 36%,transparent 68%);
    transition:opacity .25s ease;
    mix-blend-mode:multiply;
}
body.fx-pointer-active .fx-cursor-light{
    opacity:1;
}

.nav{
    transition:height .28s ease, box-shadow .28s ease, background .28s ease, transform .28s ease;
}
.nav.is-scrolled{
    background:rgba(255,253,247,.96);
    box-shadow:0 14px 34px rgba(34,56,36,.12);
}
.nav.is-hidden{
    transform:translateY(-100%);
}
.nav a{
    position:relative;
}
.nav a::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-8px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--fx-green),var(--fx-gold),transparent);
    opacity:0;
    transform:scaleX(.35);
    transition:opacity .24s ease, transform .24s ease;
}
.nav a:hover::after,
.nav a.is-active::after{
    opacity:1;
    transform:scaleX(1);
}
.nav-progress{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,var(--fx-green),#88b66d,var(--fx-gold));
    transform:scaleX(0);
    transform-origin:left center;
    z-index:1001;
}

body.js-ready .section{
    position:relative;
}
.fx-rail{
    position:absolute;
    left:clamp(16px,3vw,46px);
    top:42px;
    bottom:42px;
    width:1px;
    z-index:0;
    pointer-events:none;
    opacity:.42;
    background:linear-gradient(180deg,transparent,var(--fx-line),rgba(184,132,77,.38),var(--fx-line),transparent);
}
.fx-rail::before,
.fx-rail::after{
    content:"";
    position:absolute;
    left:50%;
    border-radius:999px;
    transform:translateX(-50%);
}
.fx-rail::before{
    top:0;
    width:9px;
    height:9px;
    background:#7aae65;
    box-shadow:0 0 0 7px rgba(122,174,101,.1),0 0 18px rgba(122,174,101,.28);
}
.fx-rail::after{
    top:var(--rail-dot,0%);
    width:5px;
    height:58px;
    background:linear-gradient(180deg,transparent,rgba(184,132,77,.72),transparent);
    transition:top .18s ease;
}

.hero{
    isolation:isolate;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.26;
    background:
        linear-gradient(90deg,transparent 0,rgba(49,95,59,.11) 1px,transparent 1px),
        linear-gradient(0deg,transparent 0,rgba(49,95,59,.08) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(90deg,#000,transparent 72%);
    animation:fx-grid-drift 18s linear infinite;
}
.hero-fx-spot{
    position:absolute;
    width:520px;
    height:520px;
    left:var(--spot-x, 72%);
    top:var(--spot-y, 28%);
    z-index:1;
    pointer-events:none;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,255,255,.24),rgba(136,182,109,.12) 34%,transparent 68%);
    transition:left .18s ease, top .18s ease;
}
.hero-fx-scan{
    position:absolute;
    left:-20%;
    right:-20%;
    top:58%;
    z-index:2;
    height:2px;
    pointer-events:none;
    opacity:.5;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),rgba(136,182,109,.6),transparent);
    box-shadow:0 0 24px rgba(255,255,255,.45);
    animation:fx-hero-scan 5.8s var(--fx-ease) infinite;
}
.hero-fx-orbit{
    position:absolute;
    right:8%;
    top:23%;
    z-index:2;
    width:180px;
    height:180px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    box-shadow:0 0 0 26px rgba(255,255,255,.05), inset 0 0 28px rgba(122,174,101,.12);
    animation:fx-orbit 10s linear infinite;
}
.hero-fx-orbit::before,
.hero-fx-orbit::after{
    content:"";
    position:absolute;
    border-radius:999px;
}
.hero-fx-orbit::before{
    width:10px;
    height:10px;
    right:18px;
    top:24px;
    background:#7aae65;
    box-shadow:0 0 18px rgba(122,174,101,.7);
}
.hero-fx-orbit::after{
    inset:34px;
    border:1px dashed rgba(255,255,255,.42);
}
.hero .wrap{
    z-index:3;
}
.badge{
    position:relative;
    overflow:hidden;
}
.badge::after{
    content:"";
    position:absolute;
    inset:-20% auto -20% -60%;
    width:45%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    transform:skewX(-18deg);
    animation:fx-sheen 4.8s ease-in-out infinite;
}
.title{
    position:relative;
}
.title::after{
    content:"";
    display:block;
    width:74px;
    height:3px;
    margin:18px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--fx-green),var(--fx-gold),transparent);
    box-shadow:0 0 22px rgba(122,174,101,.18);
    transform:scaleX(.72);
    transition:transform .45s var(--fx-ease), opacity .3s ease;
}
.title.is-visible::after{
    transform:scaleX(1);
}
.hero-card{
    position:relative;
    transform-style:preserve-3d;
    transition:transform .25s ease, box-shadow .25s ease;
}
.hero-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:30px;
    pointer-events:none;
    opacity:.55;
    background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 34%,rgba(122,174,101,.22),transparent 68%,rgba(184,132,77,.24));
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    padding:1px;
    mask-composite:exclude;
    -webkit-mask-composite:xor;
    animation:fx-border-pulse 4.5s ease-in-out infinite;
}
.hero-card::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:30px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 0 34px rgba(255,255,255,.26);
}
.hero-card img{
    filter:saturate(1.04) contrast(1.02);
}

.btn,
.nav-hot-link,
.product-categories a,
.guide-card a,
.official-more a,
.more-news-btn{
    position:relative;
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn:hover,
.nav-hot-link:hover,
.official-more a:hover,
.more-news-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 36px rgba(49,95,59,.24);
}
.btn.fx-magnetic,
.contact-card.fx-magnetic{
    transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);
}
.btn.fx-magnetic:hover{
    transform:translate3d(var(--mag-x,0px),calc(var(--mag-y,0px) - 2px),0);
}
.contact-card.fx-magnetic:hover{
    transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0) translateY(-4px);
}
.btn:focus-visible,
.contact-card:focus-visible,
.product-card:focus-visible{
    outline:3px solid rgba(184,132,77,.42);
    outline-offset:3px;
}
.fx-ripple{
    position:absolute;
    width:14px;
    height:14px;
    border-radius:999px;
    pointer-events:none;
    background:rgba(255,255,255,.55);
    transform:translate(-50%,-50%) scale(1);
    animation:fx-ripple .65s ease-out forwards;
}

[data-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
    transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
}

.trust-item,
.stat,
.about-path a,
.about-path div,
.product-card,
.quality-card,
.proof-item,
.panel,
.guide-card,
.official-news-item,
.purchase-step,
.contact-card{
    will-change:transform;
}
.trust-strip{
    position:relative;
    overflow:hidden;
}
.trust-strip::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--fx-line),var(--fx-gold),var(--fx-line),transparent);
}
.trust-item{
    position:relative;
}
.trust-item::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    right:18px;
    top:18px;
    border-radius:50%;
    background:#7aae65;
    box-shadow:0 0 0 7px rgba(122,174,101,.12),0 0 18px rgba(122,174,101,.34);
}
.product-card,
.quality-card,
.guide-card,
.panel,
.contact-card{
    position:relative;
    isolation:isolate;
    transition:transform .26s var(--fx-ease), box-shadow .26s ease, border-color .26s ease;
}
.product-card::before,
.quality-card::after,
.guide-card::before,
.panel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,18%),rgba(255,255,255,.72),rgba(122,174,101,.12) 30%,transparent 58%);
    transition:opacity .24s ease;
}
.product-card::after,
.guide-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    z-index:2;
    height:3px;
    background:linear-gradient(90deg,var(--fx-green),#7aae65,var(--fx-gold));
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .32s var(--fx-ease);
}
.product-card:hover,
.quality-card:hover,
.guide-card:hover,
.panel:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 56px rgba(34,56,36,.13);
    border-color:rgba(49,95,59,.18);
}
.product-card:hover::before,
.quality-card:hover::after,
.guide-card:hover::before,
.panel:hover::before{
    opacity:1;
}
.product-card:hover::after,
.guide-card:hover::after{
    transform:scaleX(1);
}
.product-card > *,
.quality-card > *,
.guide-card > *,
.panel > *{
    position:relative;
    z-index:3;
}
.product-card img,
.quality-card img,
.card img,
.official-news-img{
    transition:transform .42s ease, filter .42s ease;
}
.product-card-body small,
.guide-card small{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.product-card-body small::before,
.guide-card small::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:999px;
    background:#7aae65;
    box-shadow:0 0 0 6px rgba(122,174,101,.1);
    animation:fx-node-pulse 2.6s ease-in-out infinite;
}
.product-card:hover img,
.quality-card:hover img,
.card:hover img{
    transform:scale(1.045);
    filter:saturate(1.08);
}

.stat{
    position:relative;
    overflow:hidden;
}
.stat::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:linear-gradient(135deg,rgba(49,95,59,.08),transparent 55%);
    transition:opacity .25s ease;
}
.stat:hover::before{opacity:1}
.stat b{
    font-variant-numeric:tabular-nums;
}

.quality{
    position:relative;
    overflow:hidden;
}
.quality::before{
    content:"";
    position:absolute;
    inset:24px;
    border:1px solid rgba(49,95,59,.12);
    border-radius:36px;
    pointer-events:none;
}
.quality::after{
    content:"";
    position:absolute;
    inset:auto 42px 38px 42px;
    height:1px;
    pointer-events:none;
    opacity:.6;
    background:
        linear-gradient(90deg,transparent,var(--fx-line),var(--fx-gold),var(--fx-line),transparent);
}
.quality-card{
    border:1px solid rgba(49,95,59,.08);
}
.quality-card .fx-corner,
.guide-card .fx-corner,
.trust-item .fx-corner{
    position:absolute;
    right:14px;
    bottom:14px;
    width:20px;
    height:20px;
    z-index:4;
    pointer-events:none;
    border-right:2px solid rgba(184,132,77,.38);
    border-bottom:2px solid rgba(184,132,77,.38);
    opacity:.62;
}
.proof-list{
    position:relative;
}
.proof-item{
    position:relative;
}
.proof-item::before{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    right:18px;
    top:18px;
    border-radius:50%;
    background:#7aae65;
    box-shadow:0 0 0 6px rgba(122,174,101,.14);
}

.product-card.fx-tilt{
    transform:
        perspective(900px)
        rotateX(var(--tilt-x,0deg))
        rotateY(var(--tilt-y,0deg))
        translateY(-4px);
}
.quality-card.fx-tilt,
.guide-card.fx-tilt{
    transform:
        perspective(900px)
        rotateX(var(--tilt-x,0deg))
        rotateY(var(--tilt-y,0deg))
        translateY(-8px);
}

.fx-lightbox{
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(12,28,17,.72);
    backdrop-filter:blur(10px);
}
.fx-lightbox::before{
    content:"";
    position:absolute;
    inset:22px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(90deg,transparent 0,rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(0deg,transparent 0,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:64px 64px;
    border-radius:28px;
}
.fx-lightbox.open{display:flex}
.fx-lightbox img{
    max-width:min(960px,92vw);
    max-height:82vh;
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.34);
}
.fx-lightbox button{
    position:absolute;
    right:24px;
    top:22px;
    width:44px;
    height:44px;
    border:0;
    border-radius:999px;
    color:#244b2c;
    background:white;
    font-size:25px;
    cursor:pointer;
}

.fx-backtop{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1200;
    width:48px;
    height:48px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#315f3b,#7aae65);
    color:white;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 16px 38px rgba(49,95,59,.25);
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    transition:.25s ease;
}
.fx-backtop.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

@keyframes fx-grid-drift{
    from{background-position:0 0,0 0}
    to{background-position:72px 0,0 72px}
}
@keyframes fx-hero-scan{
    0%,34%{transform:translateY(-150px);opacity:0}
    46%{opacity:.55}
    70%,100%{transform:translateY(160px);opacity:0}
}
@keyframes fx-orbit{
    to{transform:rotate(360deg)}
}
@keyframes fx-border-pulse{
    0%,100%{opacity:.32}
    50%{opacity:.72}
}
@keyframes fx-node-pulse{
    0%,100%{box-shadow:0 0 0 5px rgba(122,174,101,.08)}
    50%{box-shadow:0 0 0 9px rgba(122,174,101,.18)}
}
@keyframes fx-sheen{
    0%,58%{left:-60%}
    82%,100%{left:120%}
}
@keyframes fx-ripple{
    to{
        opacity:0;
        transform:translate(-50%,-50%) scale(18);
    }
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
    [data-reveal]{
        opacity:1;
        transform:none;
    }
    body.js-ready::before,
    .fx-cursor-light,
    .fx-rail,
    .hero-fx-scan,
    .hero-fx-orbit{
        display:none!important;
    }
}

@media(max-width:1000px){
    .hero::after,
    .hero-fx-spot,
    .hero-fx-scan,
    .hero-fx-orbit{
        display:none;
    }
    [data-reveal]{
        transform:translateY(18px);
    }
    .fx-backtop{
        right:16px;
        bottom:72px;
    }
    .fx-cursor-light,
    .fx-rail{
        display:none;
    }
}
