@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Galada&display=swap');
.vp-hero{--bg-inner:#0b8a78;--bg-mid:#044e3b;--bg-outer:#011411;--muted:rgba(255,255,255,.75);--glass-bg:rgba(255,255,255,.05);--glass-border:rgba(255,255,255,.1);position:relative;overflow:hidden;height:min(100vh,780px);min-height:600px;background:radial-gradient(circle at center,var(--bg-inner) 0%,var(--bg-mid) 50%,var(--bg-outer) 100%);color:#fff;font-family:'Inter',sans-serif;transition:background 1.2s cubic-bezier(.4,0,.2,1)}
.vp-hero *{box-sizing:border-box}
.vp-hero.blue-theme{--bg-inner:#0b4f8a;--bg-mid:#04294e;--bg-outer:#010c14}
.vp-hero.orange-theme{--bg-inner:#b8442a;--bg-mid:#5e1c10;--bg-outer:#170503}
.vp-hero .vp-bubbles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.vp-hero .bubble-img{position:absolute;pointer-events:none}
@keyframes vpFloatUp{0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}10%{opacity:.4}90%{opacity:.4}100%{transform:translateY(-110vh) translateX(30px) rotate(360deg);opacity:0}}
.vp-hero .hero-content{position:relative;display:flex;justify-content:space-between;align-items:stretch;height:100%;padding:0 4%}
.vp-hero .main-title,.vp-hero .side-title{font-family:'Galada',cursive;font-size:clamp(4rem,9vw,10.5rem);line-height:.8;font-weight:400;white-space:nowrap;color:#fff;margin:0;letter-spacing:normal}
.vp-hero .leaves-container,.vp-hero .berries-container,.vp-hero .berries-container-bg{position:absolute;inset:0;pointer-events:none;transition:transform .1s ease-out}
.vp-hero .leaves-container{z-index:0}
.vp-hero .berries-container-bg{z-index:0}
.vp-hero .berries-container{z-index:110}
.vp-hero .leaf{position:absolute;width:60px;height:60px;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}
.vp-hero .l1{top:10%;left:15%}.vp-hero .l2{top:40%;left:80%;width:140px;height:140px;opacity:.4}.vp-hero .l3{top:70%;left:75%;width:80px;height:80px}.vp-hero .l4{top:85%;left:20%;width:120px;height:120px;opacity:.3}
.vp-hero .hero-left{display:flex;flex-direction:column;height:100%;padding:4rem 0 5rem;gap:1.75rem;z-index:100;position:relative}
.vp-hero .description{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:400px;margin:0}
.vp-hero .primary-btn{display:flex;align-items:center;gap:1.5rem;background:rgba(0,0,0,.5);color:#fff;padding:.4rem .4rem .4rem 1.5rem;border-radius:100px;font-weight:700;width:fit-content;text-decoration:none;transition:all .3s ease}
.vp-hero .primary-btn:hover{background:rgba(0,0,0,.7);transform:translateY(-3px)}
.vp-hero .plus-icon{background:#fbcfe8;color:#011d17;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.4rem;font-weight:900;line-height:1;padding-bottom:2px}
.vp-hero .award-badge{display:flex;align-items:center;gap:1rem;margin-top:auto}
.vp-hero .award-icon{width:48px;height:48px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;display:flex;align-items:center;justify-content:center}
.vp-hero .award-text{display:flex;flex-direction:column}
.vp-hero .award-title{font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.vp-hero .award-subtitle{font-size:.85rem;font-weight:600}
.vp-hero .hero-center{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:1;opacity:0;animation:vpFadeIn 1.5s ease-out .3s forwards,vpFloat 6s ease-in-out infinite;pointer-events:none;background:radial-gradient(circle at center,rgba(16,185,129,.1) 0%,transparent 70%)}
@keyframes vpFadeIn{to{opacity:1}}
@keyframes vpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.vp-hero .device-stage{position:absolute;top:50%;left:50%;width:80%;height:85%;transform:translate(-50%,-50%) rotate(18deg);perspective:1400px;pointer-events:none}
.vp-hero .device-3d{position:relative;height:100%;width:100%;transform-style:preserve-3d;will-change:transform,filter}
.vp-hero .device-img{position:absolute;top:50%;left:50%;height:80%;width:auto;transform:translate(-50%,-50%);opacity:0;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.vp-hero .device-img.active{opacity:1}
.vp-hero .berry{position:absolute;width:120px;height:120px;outline:none;--progress-bar-color:transparent;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.vp-hero .b1{top:25%;left:30%;width:220px;height:220px}.vp-hero .b2{top:60%;left:42%;width:100px;height:100px}.vp-hero .b3{top:30%;left:62%;width:250px;height:250px}.vp-hero .b4{top:15%;left:48%;width:140px;height:140px}.vp-hero .b5{top:75%;left:20%;width:120px;height:120px}.vp-hero .b6{top:45%;left:75%;width:180px;height:180px}.vp-hero .b7{top:15%;left:40%;width:80px;height:80px;opacity:.7}.vp-hero .b8{top:50%;left:55%;width:70px;height:70px;opacity:.6}.vp-hero .b9{top:80%;left:35%;width:75px;height:75px;opacity:.7}
.vp-hero .hero-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;height:100%;padding:4rem 0 5rem;z-index:100;width:450px;pointer-events:none;position:relative}
.vp-hero .product-carousel{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-end;pointer-events:auto}
.vp-hero .carousel-cards{display:flex;gap:1rem}
.vp-hero .card{background:var(--glass-bg);border:1px solid var(--glass-border);padding:1rem;padding-top:5rem;border-radius:28px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);width:135px;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center;margin-top:5rem}
.vp-hero .card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.vp-hero .card.active{border-color:#fbcfe8}
.vp-hero .card img{width:auto;height:150px;margin-top:-8rem;filter:drop-shadow(0 20px 35px rgba(0,0,0,.5));transition:transform .5s cubic-bezier(.34,1.56,.64,1)!important;display:block;pointer-events:none}
.vp-hero .card:hover img{transform:translateY(-30px) rotate(-12deg) scale(1.15)!important}
.vp-hero .card-info{display:flex;flex-direction:column;font-size:.7rem;width:100%}
.vp-hero .card-info span:first-child{font-weight:600}
.vp-hero .card-info span:last-child{color:var(--muted)}
.vp-hero .carousel-nav{display:flex;gap:1rem}
.vp-hero .nav-arrow{background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s;font-size:1rem}
.vp-hero .nav-arrow:hover{background:rgba(255,255,255,.1)}
.vp-hero .side-title{align-self:flex-end;text-align:right}
.vp-hero .age-warning{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:.75rem;padding:.45rem 1rem .45rem .45rem;border-radius:100px;background:rgba(0,0,0,.45);border:1px solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.7rem;color:var(--muted);white-space:nowrap}
.vp-hero .age-warning strong{background:#fbcfe8;color:#011d17;border-radius:100px;padding:.2rem .55rem;font-weight:700}
@media (max-width:989px){
.vp-hero{height:auto;min-height:0}
.vp-hero .hero-content{flex-direction:column;align-items:center;text-align:center;padding:2rem 16px 4.5rem}
.vp-hero .hero-left,.vp-hero .hero-right{height:auto;padding:0;width:100%;align-items:center;text-align:center}
.vp-hero .hero-left{gap:1rem}
.vp-hero .description{margin:0 auto}
.vp-hero .award-badge{display:none}
.vp-hero .hero-center{position:relative;inset:auto;height:360px;width:100%;order:0}
.vp-hero .device-stage{width:100%;height:100%}
.vp-hero .main-title{font-size:4rem}
.vp-hero .side-title,.vp-hero .leaves-container,.vp-hero .berries-container-bg,.vp-hero .b3,.vp-hero .b6,.vp-hero .b1{display:none}
.vp-hero .berry{width:70px!important;height:70px!important}
.vp-hero .product-carousel{align-items:center}
.vp-hero .carousel-cards{gap:.5rem}
.vp-hero .card{width:100px;padding:.75rem;padding-top:4rem;margin-top:4rem;border-radius:20px}
.vp-hero .card img{height:110px;margin-top:-6.5rem}
.vp-hero .age-warning{white-space:normal;width:calc(100% - 32px);font-size:.65rem}
}
.vp-hero .vp-smoke{position:absolute;inset:0;pointer-events:none;display:block}
.vp-hero .vp-smoke--fg{opacity:.85;mix-blend-mode:screen}
.vp-hero .vp-bubbles,.vp-hero .leaves-container{display:none}
@media (max-width:989px){.vp-hero .berries-container-bg{display:block}.vp-hero .berries-container{inset:0}}