/* Mozaca Natural Premium — responsive, accessible, genuinely interactive hero */
:root{--mozaca-dark:#14361e;--mozaca-green:#397d25;--mozaca-bright:#64a82f}
.hero.hero-new{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 60% 80% at 73% 48%,rgba(210,237,180,.65) 0%,rgba(250,253,244,.15) 80%,transparent 100%),linear-gradient(108deg,#fff 0%,#fdfefa 46%,#f4faef 82%,#e4f0dd 100%);color:#112e20}
.hero-new::before{content:"";position:absolute;inset:-15% -15% auto auto;width:68%;height:110%;background:radial-gradient(ellipse,rgba(174,215,113,.21),transparent 66%);pointer-events:none}
.hero-new .hero-grid{width:min(1440px,calc(100% - 76px));min-height:703px;display:grid;grid-template-columns:48% 52%;gap:0;align-items:center;position:relative;z-index:1}
.hero-new .hero-copy{position:relative;z-index:5;padding:66px 16px 55px 0;align-self:center;animation:mozacaEnter .8s both}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;color:#547251;font-size:11px;font-weight:800;letter-spacing:2.65px;white-space:nowrap}
.hero-kicker-symbol{color:white;background:linear-gradient(150deg,#89c24b,#3c873a);font-size:15px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 12px #6ab05645;letter-spacing:0}
.hero-new h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(50px,5.25vw,81px);font-weight:600;letter-spacing:-2.8px;line-height:1.075;margin:24px -58px 17px 0;max-width:none;color:#142c20;text-wrap:balance}
.hero-new h1 em{font-style:normal;color:#397e27;font-weight:600}
.hero-new h1 span{white-space:nowrap}
.hero-new .hero-intro{font-family:'DM Sans',sans-serif;color:#61705e;font-size:clamp(13px,1.1vw,16px);max-width:515px;line-height:1.85;margin:19px 0 22px}
.hero-benefits{display:flex;gap:22px;align-items:center;margin-bottom:29px}
.hero-benefits>div{display:flex;align-items:center;gap:9px;font:700 11px/1.4 'DM Sans',sans-serif;color:#4a674d}
.hero-benefit-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;background:rgba(255,255,255,.88);border:1px solid rgba(87,135,79,.15);border-radius:50%;box-shadow:0 6px 23px rgba(66,102,46,.07)}
.hero-benefit-icon .ico{width:19px;height:19px;color:#57913b}
.hero-new .hero-buttons{gap:11px;flex-wrap:wrap}
.hero-new .hero-buttons .btn{border-radius:100px;padding:17px 24px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:800;display:inline-flex;gap:12px;min-height:56px;transition:transform .23s,box-shadow .23s,background .23s}
.hero-new .hero-buttons .btn:hover{transform:translateY(-3px)}
.hero-new .hero-primary{background:linear-gradient(116deg,#448f2a,#256c27)!important;color:#fff!important;box-shadow:0 12px 26px rgba(37,105,41,.24);border:1px solid #31762a}
.hero-new .hero-primary:hover{box-shadow:0 17px 33px rgba(34,95,35,.28)}
.hero-new .hero-secondary{color:#2f6b39!important;background:rgba(255,255,255,.9)!important;border:1px solid #80b47a!important;box-shadow:0 9px 23px rgba(32,87,43,.07)}
.hero-new .hero-microtext{display:flex;align-items:center;gap:8px;color:#7d8a79;font:600 10px 'DM Sans',sans-serif;margin-top:17px}
.hero-microtext .dot{height:7px;width:7px;background:#7ebc57;border-radius:50%}
.hero-new .hero-visual{height:658px;position:relative;width:100%;max-width:none;align-self:stretch;min-width:0;overflow:visible;--tiltx:0px;--tilty:0px}
.hero-photo-atmosphere{position:absolute;inset:0 -22px 0 -45px;background:url('img/botanical-atmosphere.webp') center center / cover no-repeat;opacity:.65;-webkit-mask-image:radial-gradient(ellipse 62% 67% at 49% 48%,#000 4%,rgba(0,0,0,.65) 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 67% at 49% 48%,#000 4%,rgba(0,0,0,.65) 52%,transparent 100%);pointer-events:none}
.hero-halo{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.hero-halo.halo-one{width:485px;height:485px;left:8%;top:9%;background:radial-gradient(circle,rgba(247,252,220,.28) 50%,transparent 66%);border:4px solid rgba(246,255,203,.78);box-shadow:0 0 44px #dcf59a78,inset 0 0 35px #e0f6a862;animation:mozacaHalo 7s ease-in-out infinite alternate}
.hero-halo.halo-two{width:370px;height:370px;left:17%;top:17%;border:1px dashed rgba(184,216,108,.52);animation:mozacaSpin 65s linear infinite}
.hero-sparkles>span{position:absolute;z-index:2;font-size:36px;color:#ecf9ba;text-shadow:0 0 13px #c7e47a,0 0 30px #cce780;animation:mozacaSpark 3s infinite}
.hero-sparkles>span:nth-child(1){top:15%;left:22%}.hero-sparkles>span:nth-child(2){top:24%;right:33%;font-size:20px;animation-delay:1s}.hero-sparkles>span:nth-child(3){bottom:20%;left:12%;font-size:20px;animation-delay:2s}
.hero-vine{position:absolute;width:210px;z-index:2;pointer-events:none;filter:drop-shadow(5px 10px 14px #38652928);opacity:.83;animation:mozacaSway 7s ease-in-out infinite alternate;transform-origin:bottom center}
.hero-vine.vine-left{left:1%;top:22%;transform:rotate(-27deg)}
.hero-vine.vine-right{right:14%;top:17%;transform:scaleX(-1) rotate(19deg);animation-delay:-2s}
.hero-stone{position:absolute;z-index:3;left:7%;width:66%;border-radius:49% 49% 42% 43% / 48% 46% 40% 40%;background-image:linear-gradient(180deg,#fff8 0%,#ffffff00 30%,#c1b39933 100%),url('img/botanical-stone.webp');background-size:100% 100%,cover;border:1px solid #f5eedb;box-shadow:0 21px 20px #514e3727,inset 0 -16px 13px #93866944}
.hero-stone.hero-stone-back{height:98px;bottom:89px;opacity:.9;transform:scale(.93);filter:brightness(.97);z-index:2}
.hero-stone.hero-stone-front{height:93px;bottom:44px;z-index:4;box-shadow:0 23px 23px #514e3719,inset 0 -9px 15px #b0a89455}
.hero-new .hero-product{position:absolute;z-index:5;left:40%;top:11%;transform:translateX(calc(-50% + var(--tiltx))) translateY(var(--tilty));height:505px;width:390px;max-width:initial;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(19px 26px 18px #2341284a);transition:opacity .24s,filter .24s;animation:mozacaProductFloat 5.5s ease-in-out infinite;pointer-events:none}
.hero-new .hero-product.is-changing{opacity:.15;filter:blur(12px)}
.hero-new .hero-product img{height:100%;width:100%;object-fit:contain;max-width:none;max-height:none;display:block}
.hero-ground-shadow{position:absolute;z-index:3;width:310px;height:38px;border-radius:50%;background:#34533263;filter:blur(19px);left:40%;bottom:135px;transform:translateX(-50%)}
.hero-orbit-caption{position:absolute;z-index:4;top:62px;left:10px;color:#5c8a47;font:italic 600 18px 'Playfair Display',serif;transform:rotate(-8deg);text-shadow:0 2px 4px #ffffff90}
.hero-orbit-leaf{font-style:normal;color:#73b34b}
.hero-caption{position:absolute;left:14%;bottom:80px;z-index:6;display:flex;gap:5px;flex-direction:column;transform:rotate(-4deg);pointer-events:none;background:#ffffffe0;backdrop-filter:blur(8px);border:1px solid #ffffffdf;padding:11px 17px;border-radius:14px;box-shadow:0 9px 19px #284f3217}
.hero-caption span{font:700 8px 'DM Sans',sans-serif;letter-spacing:1.2px;color:#779176}
.hero-caption strong{font:800 17px 'Manrope',sans-serif;letter-spacing:-.6px;color:#315a43}
.hero-pickers{position:absolute;right:-21px;top:19%;z-index:7;display:flex;flex-direction:column;gap:11px;width:211px}
.hero-picker{width:100%;min-height:100px;display:flex;align-items:center;gap:9px;padding:10px 12px;text-align:left;border:1px solid #e8eee5;background:rgba(255,255,255,.9);border-radius:20px;box-shadow:0 14px 30px rgba(49,89,39,.11);backdrop-filter:blur(16px);color:#24482d;cursor:pointer;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.hero-picker:hover{transform:translateX(-6px) scale(1.02);box-shadow:0 18px 38px #285c2b27}
.hero-picker.is-active{border:2px solid #7fb35a;background:#f8fff5;box-shadow:0 13px 37px rgba(65,124,43,.18)}
.hero-picker img{height:76px;width:52px;object-fit:contain;flex:none;filter:drop-shadow(3px 5px 3px #34503422)}
.hero-picker>span:nth-of-type(1){display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.hero-picker strong{font:800 13px 'Manrope',sans-serif;color:#315b39;letter-spacing:-.5px}
.hero-picker small{font:600 10px/1.3 'DM Sans',sans-serif;color:#79907a}
.picker-arrow{flex:0 0 21px;border-radius:100%;background:#edf6e8;height:21px;display:grid;place-items:center;color:#3b7a32;font-weight:900}
.hero-picker-controls{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:0}
.hero-picker-controls button{display:grid;place-items:center;height:35px;width:35px;border-radius:50%;border:1px solid #cbdac3;background:#fff;box-shadow:0 4px 12px #7eac7022;color:#416d39;font-size:17px;cursor:pointer;transition:transform .2s}
.hero-picker-controls button:hover{transform:scale(1.1);background:#eaf5e3}
.hero-picker-controls div{display:flex;gap:6px}.hero-picker-controls i{display:block;width:8px;height:8px;border-radius:50%;background:#c7d4bf;transition:background .2s,transform .2s}.hero-picker-controls i.is-active{background:#55963f;transform:scale(1.15)}
.hero-small-leaf{position:absolute;font-size:36px;color:#a0c563;opacity:.57;pointer-events:none;z-index:2;animation:mozacaSway 5s ease-in-out infinite alternate}
.hero-small-leaf.l1{top:15%;left:7%}.hero-small-leaf.l2{bottom:25%;right:24%;font-size:20px;animation-delay:-1s}
.hero-foliage{position:absolute;z-index:0;pointer-events:none;width:350px;height:350px;filter:blur(15px);opacity:.25;background:radial-gradient(ellipse at 70% 70%,#75ba5d 1%,transparent 55%);border-radius:50%}
.hero-foliage-left{left:-220px;bottom:-70px}.hero-foliage-right{right:-140px;top:-110px}
.hero-proof{position:relative;z-index:8;display:grid;grid-template-columns:repeat(3,1fr);width:min(950px,calc(100% - 76px));border-radius:25px;background:rgba(255,255,255,.82);backdrop-filter:blur(19px);box-shadow:0 15px 45px #577a4621;border:1px solid #ffffff;transform:translateY(-15px);padding:17px 25px;margin:0 auto -13px}
.hero-proof-item{display:flex;gap:13px;align-items:center;justify-content:center;padding:6px 13px}
.hero-proof-item+.hero-proof-item{border-left:1px solid #dbe8d7}
.hero-proof-item .ico{width:25px;height:25px;color:#457846;stroke-width:1.8;flex:none}
.hero-proof-item span{display:flex;flex-direction:column;gap:4px}
.hero-proof-item strong{font:800 13px 'DM Sans',sans-serif;color:#31563b}
.hero-proof-item small{font:500 11px 'DM Sans',sans-serif;color:#81917f}
@keyframes mozacaHalo{from{transform:scale(.97)}to{transform:scale(1.04)}}
@keyframes mozacaProductFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes mozacaSway{from{rotate:-5deg}to{rotate:6deg}}
@keyframes mozacaSpark{0%,100%{opacity:.32;transform:scale(.8)}50%{opacity:.9;transform:scale(1.3)}}
@keyframes mozacaSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes mozacaEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1250px){
 .hero-new .hero-grid{width:calc(100% - 55px);grid-template-columns:50% 50%;min-height:680px}
 .hero-new h1{font-size:clamp(46px,5vw,67px);margin-right:-20px}
 .hero-benefits{gap:9px}.hero-benefits>div{gap:6px;font-size:10px}
 .hero-new .hero-visual{height:650px}.hero-new .hero-product{height:450px;top:15%;left:41%}
 .hero-halo.halo-one{width:420px;height:420px;left:4%}.hero-halo.halo-two{left:13%}
 .hero-picker{min-height:88px}.hero-picker img{height:60px}.hero-pickers{right:-4px;width:185px}
 .hero-picker strong{font-size:12px}.hero-picker small{font-size:9px}.hero-stone{left:6%;width:70%}
}
@media(max-width:930px){
 .hero-new .hero-grid{grid-template-columns:47% 53%;min-height:600px}
 .hero-new .hero-copy{padding:55px 0}.hero-new h1{font-size:clamp(39px,5.15vw,51px);margin-right:-30px}
 .hero-new .hero-intro{font-size:13px;line-height:1.6}
 .hero-benefits>div:last-child{display:none}
 .hero-new .hero-buttons .btn{min-height:48px;padding:14px 15px;font-size:11px}
 .hero-new .hero-visual{height:585px}
 .hero-new .hero-product{height:400px;top:17%;width:300px;left:39%}
 .hero-pickers{width:146px;right:-9px;top:25%;gap:8px}.hero-picker{min-height:76px;padding:6px;border-radius:14px;gap:5px}.hero-picker img{height:52px;width:36px}.hero-picker small{font-size:8px}.hero-picker strong{font-size:10px}.picker-arrow{display:none}
 .hero-halo.halo-one{width:350px;height:350px;top:20%}.hero-halo.halo-two{width:285px;height:285px;top:25%}.hero-stone{bottom:65px;height:72px}.hero-stone.hero-stone-back{bottom:102px;height:60px}
 .hero-caption{bottom:78px;left:2%;padding:7px 11px}.hero-caption strong{font-size:13px}.hero-proof{width:calc(100% - 55px)}
}
@media(max-width:700px){
 .hero.hero-new{overflow:hidden}
 .hero-new .hero-grid{width:calc(100% - 32px);display:flex;flex-direction:column;min-height:0;align-items:stretch}
 .hero-new .hero-copy{padding:34px 3px 18px;max-width:none}
 .hero-kicker{font-size:8.7px;letter-spacing:1.3px}.hero-kicker-symbol{width:21px;height:21px;font-size:11px}
 .hero-new h1{font-size:clamp(36px,9.2vw,58px);line-height:1.1;margin:14px 0 13px;letter-spacing:-1.5px;max-width:500px}
 .hero-new h1 span{white-space:normal}
 .hero-new .hero-intro{font-size:12px;line-height:1.6;max-width:510px;margin:0 0 13px}
 .hero-benefits{gap:11px;margin-bottom:15px}.hero-benefits>div{font-size:9px}.hero-benefit-icon{width:30px;height:30px;flex-basis:30px}.hero-benefit-icon .ico{width:15px;height:15px}
 .hero-new .hero-buttons{gap:8px}.hero-new .hero-buttons .btn{min-height:43px;font-size:10.5px;padding:11px 14px;gap:6px}
 .hero-new .hero-microtext{margin-top:12px;font-size:9px}
 .hero-new .hero-visual{height:440px;width:100%;max-width:none;flex:none;overflow:visible}
 .hero-photo-atmosphere{inset:0 -30px 0 -30px;opacity:.64}
 .hero-halo.halo-one{width:330px;height:330px;left:0;top:11%;border-width:2px}
 .hero-halo.halo-two{width:255px;height:255px;left:8%;top:17%}
 .hero-new .hero-product{height:345px;width:256px;left:37%;top:10%;filter:drop-shadow(7px 13px 13px #29472a4a)}
 .hero-orbit-caption{top:31px;left:0;font-size:12px}
 .hero-vine{width:140px;opacity:.6}.hero-vine.vine-left{left:-35px;top:11%}.hero-vine.vine-right{right:19%;top:9%}
 .hero-stone{left:0%;width:76%;height:60px;bottom:31px}.hero-stone.hero-stone-back{bottom:62px;height:58px}
 .hero-ground-shadow{left:35%;bottom:90px;width:150px}
 .hero-caption{bottom:45px;left:0;padding:7px 10px;border-radius:10px;max-width:150px}.hero-caption span{font-size:6px}.hero-caption strong{font-size:11px}
 .hero-pickers{top:18%;width:118px;right:0;gap:7px}
 .hero-picker{min-height:73px;gap:3px;padding:5px 6px;border-radius:13px}.hero-picker img{width:36px;height:59px}.hero-picker strong{font-size:9px}.hero-picker small{font-size:7.5px;line-height:1.15}.hero-picker-controls{gap:7px}.hero-picker-controls button{width:26px;height:26px;font-size:14px}.hero-picker-controls i{width:5px;height:5px}
 .hero-proof{grid-template-columns:repeat(3,1fr);width:calc(100% - 32px);padding:11px 2px;margin:0 auto 10px;transform:none;border-radius:16px;gap:0}
 .hero-proof-item{gap:6px;padding:4px 5px}.hero-proof-item .ico{width:18px;height:18px}.hero-proof-item strong{font-size:9px}.hero-proof-item small{font-size:7px;line-height:1.2}
}
@media(max-width:390px){
 .hero-new h1{font-size:35px}.hero-new .hero-intro{font-size:11.5px}.hero-new .hero-visual{height:404px}
 .hero-new .hero-product{height:306px;width:240px;top:9%;left:35%}
 .hero-pickers{width:113px;right:-2px;top:17%}.hero-picker{min-height:65px}.hero-picker img{height:50px}
 .hero-halo.halo-one{width:270px;height:270px}.hero-halo.halo-two{width:220px;height:220px}
 .hero-stone{height:54px}.hero-caption{bottom:44px}
}
@media(prefers-reduced-motion:reduce){
 .hero-new .hero-product,.hero-new .hero-halo,.hero-new .hero-sparkles>span,.hero-new .hero-vine,.hero-new .hero-small-leaf{animation:none!important;translate:none!important;rotate:none!important}
 .hero-new .hero-picker,.hero-new .hero-buttons .btn{transition:none!important}
}
