@charset "UTF-8";
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;touch-action:manipulation}
img{content-visibility:auto}
:root{--color-primary: #667eea;--color-secondary: #f093fb;--color-accent: #f5576c;--color-green: #56ab2f;--color-yellow: #f7b733;--color-dark: #1a1a2e;--color-text: #333;--color-text-light: #666;--transition-fast: .2s ease;--transition-medium: .3s ease;--shadow-soft: 0 10px 40px rgba(0, 0, 0, .1);--shadow-medium: 0 15px 50px rgba(0, 0, 0, .15)}
.page-loader{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--color-primary) 0%,#764ba2 100%);display:flex;justify-content:center;align-items:center;z-index:99999;transition:opacity .4s ease,visibility .4s ease;contain:layout style}
.page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;position:relative}
.falling-condoms{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.condom{position:absolute;top:-100px;width:52px;height:52px;background:linear-gradient(135deg,#f5d26a,#e9bb43 45%,#d99a2b);border:3px solid #4a3520;border-radius:6px;box-shadow:0 4px 12px #0000004d,inset 0 2px 8px #ffffff4d;-webkit-animation:fallSpin linear infinite;animation:fallSpin linear infinite;will-change:transform;opacity:0;contain:layout style}
.condom:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#fff8dc,#f5d26a,#e9bb43 60%,#d99a2b);border:2px solid rgba(74,53,32,.5);box-shadow:inset 0 2px 4px #fff3,inset 0 -2px 4px #0000000d;opacity:.5}
.condom:after{content:"";position:absolute;inset:3px;border-radius:3px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%,rgba(0,0,0,.1) 100%)}
@-webkit-keyframes fallSpin{0%{-webkit-transform:translateY(0) rotate(0) translate(0);opacity:0}
5%{-webkit-transform:translateY(50px) rotate(15deg) translate(5px);opacity:0}
10%{-webkit-transform:translateY(100px) rotate(30deg) translate(10px);opacity:1}
50%{-webkit-transform:translateY(50vh) rotate(180deg) translate(25px);opacity:1}
92%{opacity:1}
to{-webkit-transform:translateY(calc(100vh + 100px)) rotate(360deg) translate(-15px);opacity:0}
}
@keyframes fallSpin{0%{transform:translateY(0) rotate(0) translate(0);opacity:0}
5%{transform:translateY(50px) rotate(15deg) translate(5px);opacity:0}
10%{transform:translateY(100px) rotate(30deg) translate(10px);opacity:1}
50%{transform:translateY(50vh) rotate(180deg) translate(25px);opacity:1}
92%{opacity:1}
to{transform:translateY(calc(100vh + 100px)) rotate(360deg) translate(-15px);opacity:0}
}
.condom.c1{left:5%;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-delay:0s;animation-delay:0s;width:48px;height:48px}
.condom.c2{left:20%;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-delay:.5s;animation-delay:.5s;width:56px;height:56px}
.condom.c3{left:35%;-webkit-animation-duration:4.5s;animation-duration:4.5s;-webkit-animation-delay:1s}
.condom.c4{left:50%;animation-delay:1s}
.condom.c4{left:50%;-webkit-animation-duration:5.5s;animation-duration:5.5s;-webkit-animation-delay:.3s;animation-delay:.3s;width:44px;height:44px}
.condom.c5{left:65%;-webkit-animation-duration:4.2s;animation-duration:4.2s;-webkit-animation-delay:.8s;animation-delay:.8s;width:58px;height:58px}
.condom.c6{left:80%;-webkit-animation-duration:5.2s;animation-duration:5.2s;-webkit-animation-delay:.2s}
.condom.c7{left:12%;animation-delay:.2s}
.condom.c7{left:12%;-webkit-animation-duration:4.8s;animation-duration:4.8s;-webkit-animation-delay:1.5s;animation-delay:1.5s;width:46px;height:46px}
.condom.c8{left:72%;-webkit-animation-duration:4.3s;animation-duration:4.3s;-webkit-animation-delay:1.2s;animation-delay:1.2s;width:50px;height:50px}
.condom.c1:before{width:24px;height:24px}
.condom.c2:before{width:32px;height:32px}
.condom.c4:before{width:22px;height:22px}
.condom.c5:before{width:34px;height:34px}
.condom.c7:before{width:24px;height:24px}
.condom.c8:before{width:28px;height:28px}
.tear-opening{position:absolute;top:-8px;right:-8px;width:160px;height:50px;background:linear-gradient(135deg,var(--color-primary) 0%,#764ba2 100%);clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);opacity:0;animation:revealTear 1s ease-out .3s forwards;will-change:clip-path,opacity}
@keyframes revealTear{0%{clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%);opacity:1}
20%{clip-path:polygon(82% 0%,100% 0%,100% 100%,94% 95%,90% 85%,86% 90%,82% 100%);opacity:1}
40%{clip-path:polygon(60% 0%,100% 0%,100% 100%,90% 95%,84% 88%,78% 92%,72% 85%,68% 95%,64% 88%,60% 100%);opacity:1}
60%{clip-path:polygon(35% 0%,100% 0%,100% 100%,88% 94%,80% 88%,72% 92%,66% 86%,60% 95%,54% 88%,48% 92%,42% 86%,38% 94%,35% 100%);opacity:1}
80%{clip-path:polygon(15% 0%,100% 0%,100% 100%,90% 95%,82% 88%,76% 94%,70% 86%,64% 92%,58% 88%,52% 95%,46% 86%,40% 92%,34% 88%,28% 94%,22% 88%,18% 95%,15% 100%);opacity:1}
to{clip-path:polygon(0% 0%,100% 0%,100% 100%,94% 88%,88% 92%,82% 86%,76% 94%,70% 88%,64% 95%,58% 86%,52% 92%,46% 88%,40% 94%,34% 86%,28% 92%,22% 88%,16% 94%,10% 86%,5% 92%,0% 85%);opacity:1}
}
.torn-flap{position:absolute;top:-8px;right:-8px;width:156px;height:45px;background:linear-gradient(270deg,#ff69b4,#ff1493 40%,#db1478);clip-path:polygon(0% 0%,100% 0%,100% 100%,94% 92%,88% 100%,82% 90%,76% 98%,70% 88%,64% 96%,58% 90%,52% 98%,46% 88%,40% 96%,34% 90%,28% 98%,22% 88%,16% 96%,10% 90%,5% 98%,0% 90%);box-shadow:0 3px 12px #00000059,inset 0 -2px 8px #ffffff40;transform-origin:100% 100%;animation:tearOff 1.2s cubic-bezier(.25,.1,.25,1) .4s forwards;z-index:10;will-change:transform,opacity}
.torn-flap:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 60%)}
.torn-flap:after{content:"";position:absolute;top:0;right:-6px;width:8px;height:100%;background:linear-gradient(270deg,#ff69b4,#ff1493);clip-path:polygon(0% 0%,100% 8%,0% 16%,100% 24%,0% 32%,100% 40%,0% 48%,100% 56%,0% 64%,100% 72%,0% 80%,100% 88%,0% 96%,100% 100%,0% 100%)}
@keyframes tearOff{0%{transform:rotateX(0) rotateY(0) translateY(0);opacity:1}
15%{transform:rotateX(-10deg) rotateY(-8deg) translateY(-2px) translate(-5px);opacity:1}
30%{transform:rotateX(-20deg) rotateY(-18deg) translateY(-5px) translate(-12px);opacity:1}
50%{transform:rotateX(-30deg) rotateY(-35deg) translateY(-10px) translate(-22px);opacity:1}
70%{transform:rotateX(-40deg) rotateY(-55deg) translateY(-15px) translate(-35px);opacity:.9}
85%{transform:rotateX(-48deg) rotateY(-72deg) translateY(-20px) translate(-48px);opacity:.7}
to{transform:rotateX(-52deg) rotateY(-85deg) translateY(-25px) translate(-60px);opacity:.5}
}
.silver-lining{position:absolute;top:0;right:0;width:140px;height:40px;background:linear-gradient(270deg,#f0f0f0,#d8d8d8,silver 60%,#b0b0b0);clip-path:polygon(0% 0%,100% 0%,100% 90%,92% 98%,85% 88%,78% 100%,70% 90%,62% 98%,55% 88%,48% 100%,40% 90%,32% 98%,25% 88%,18% 100%,10% 90%,0% 100%);opacity:0;animation:showSilver .5s ease-out .5s forwards;box-shadow:inset 0 0 15px #fff9}
@keyframes showSilver{0%{opacity:0}
to{opacity:1}
}
.condom-ring{position:absolute;top:8px;right:35px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at center,transparent 38%,#ff5500 40%,#ff7700 48%,#ffa500 55%,#ff8800 62%,#ff6600 70%,transparent 72%);box-shadow:0 4px 15px #ff550080,inset 0 3px 8px #ffdcb480,inset 0 -3px 8px #b43c0066;opacity:0;transform:translateY(-5px);animation:peekOut .8s cubic-bezier(.25,.46,.45,.94) .6s forwards;z-index:5;clip-path:polygon(0% 0%,100% 0%,100% 35%,0% 35%);will-change:transform,opacity}
.condom-ring:before{content:"";position:absolute;top:8%;left:15%;width:20%;height:12%;background:#ffffff80;border-radius:50%;transform:rotate(-25deg)}
.condom-ring:after{content:"";position:absolute;top:14%;left:25%;width:12%;height:8%;background:#ffffff4d;border-radius:50%;transform:rotate(-15deg)}
@keyframes peekOut{0%{opacity:0;transform:translateY(-12px)}
50%{opacity:1;transform:translateY(2px)}
70%{transform:translateY(-1px)}
85%{transform:translateY(.5px)}
to{opacity:1;transform:translateY(0)}
}
.loader-text{margin-top:35px;font-family:Poppins,sans-serif;font-size:18px;font-weight:600;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);animation:pulse 1s ease-in-out infinite;transform:rotate(0)}
@keyframes pulse{0%,to{opacity:1}
50%{opacity:.6}
}
.animal-menu{position:relative;margin-left:15px;padding-left:15px;border-left:1px solid rgba(255,255,255,.3)}
.animal-toggle{width:38px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:50%;background:#fff3;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.animal-toggle:hover{background:#ffffff59;transform:scale(1.08)}
.animal-toggle[aria-expanded=true]{border-color:#fff;background:#fff6;box-shadow:0 2px 12px #ffffff4d}
.animal-selector{position:absolute;top:100%;right:0;margin-top:10px;display:flex;gap:6px;background:#fffffff2;padding:10px 14px;border-radius:25px;box-shadow:0 6px 20px #00000040;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.95);transition:all .25s cubic-bezier(.34,1.56,.64,1);z-index:10000}
.animal-selector.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.animal-btn{width:36px;height:36px;border:2px solid rgba(0,0,0,.1);border-radius:50%;background:#f0f0f0e6;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.animal-btn:hover{background:#dcdcdce6;transform:scale(1.12)}
.animal-btn[aria-pressed=true]{border-color:#9370db;background:#e8e0f0;box-shadow:0 2px 8px #9370db66}
.animal-btn.animal-off{font-size:14px;font-weight:700;color:#888}
.animal-btn.animal-off:hover{color:#e74c3c;background:#ffeaea}
.animal-btn.animal-off[aria-pressed=true]{color:#e74c3c;border-color:#e74c3c;background:#ffeaea}
.cute-animal{position:fixed;top:35px;left:50%;transform:translate(-50%);z-index:500;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 6px 15px rgba(0,0,0,.25));transition:filter .3s ease,opacity .3s ease}
.cute-animal[data-animal=off]{opacity:0;pointer-events:none}
.cute-animal:hover{filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.animal-face{position:relative;width:100px;height:85px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.animal-face:hover{transform:scale(1.12) translateY(2px)}
.animal-face:active{transform:scale(.92)}
.eye-patch,.snout,.tongue{display:none}
.face-circle{position:absolute;width:100px;height:72px;background:linear-gradient(180deg,bisque,#f5d4b3 40%,#e8c4a0);border-radius:50%;top:18px;left:0;box-shadow:inset 0 -8px 20px #b4967840,inset 0 4px 10px #fff6;overflow:hidden}
.face-circle:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(ellipse 3px 4px at 18% 25%,rgba(210,180,150,.2) 0%,transparent 100%),radial-gradient(ellipse 3px 4px at 82% 28%,rgba(210,180,150,.2) 0%,transparent 100%),radial-gradient(ellipse 2px 3px at 30% 40%,rgba(210,180,150,.15) 0%,transparent 100%),radial-gradient(ellipse 2px 3px at 70% 38%,rgba(210,180,150,.15) 0%,transparent 100%)}
.face-circle:after{content:"";position:absolute;width:50px;height:30px;background:linear-gradient(180deg,#fff5eb,#ffe8d8);border-radius:50%;bottom:12px;left:50%;transform:translate(-50%)}
.ear{position:absolute;width:26px;height:30px;background:linear-gradient(180deg,bisque,#f0d0a8);border-radius:50% 50% 20% 20%;top:2px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:inset -2px -2px 5px #00000014}
.ear:after{content:"";position:absolute;width:14px;height:16px;background:linear-gradient(180deg,#ffcdd2,#f8bbd0);border-radius:50% 50% 25% 25%;top:6px;left:50%;transform:translate(-50%)}
.left-ear{left:10px;transform:rotate(-12deg)}
.right-ear{right:10px;transform:rotate(12deg)}
.animal-face:hover .left-ear{transform:rotate(-22deg) translateY(-4px)}
.animal-face:hover .right-ear{transform:rotate(22deg) translateY(-4px)}
.eye{position:absolute;width:26px;height:26px;background:linear-gradient(180deg,#fff,#f8f8f8);border-radius:50%;top:28px;overflow:hidden;box-shadow:inset 0 3px 8px #00000026,0 2px 4px #0000001a;z-index:5;transition:all .15s ease}
.left-eye{left:18px}
.right-eye{right:18px}
.animal-face:hover .eye{height:28px;width:28px}
.animal-face:hover .left-eye{left:17px}
.animal-face:hover .right-eye{right:17px}
.cute-animal.blinking .eye{height:4px;top:40px;border-radius:50%;background:linear-gradient(180deg,#c9b9a9,#b8a898)}
.pupil{position:absolute;width:16px;height:18px;background:radial-gradient(ellipse at 35% 35%,#7cb342,#558b2f 40%,#33691e,#1b5e20);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .1s ease-out;box-shadow:inset 0 0 4px #0000004d}
.pupil:before{content:"";position:absolute;width:5px;height:14px;background:linear-gradient(180deg,#1a1a1a,#000);border-radius:40%;top:50%;left:50%;transform:translate(-50%,-50%)}
.pupil:after{content:"";position:absolute;width:6px;height:6px;background:#fffffff2;border-radius:50%;top:2px;left:2px}
.nose{position:absolute;width:12px;height:9px;background:linear-gradient(180deg,#ffb0b0,#ff9090,#e88080);border-radius:50% 50% 45% 45%/40% 40% 60% 60%;top:50px;left:50%;transform:translate(-50%);z-index:7;box-shadow:0 2px 3px #00000026}
.nose:after{content:"";position:absolute;width:4px;height:3px;background:#ffffff80;border-radius:50%;top:1px;left:3px}
.mouth{position:absolute;width:20px;height:10px;top:57px;left:50%;transform:translate(-50%);z-index:6;transition:all .2s ease}
.mouth:before,.mouth:after{content:"";position:absolute;width:10px;height:7px;border:2px solid #D4A090;border-top:none;border-radius:0 0 50% 50%;background:transparent;transition:all .2s ease}
.mouth:before{left:0}
.mouth:after{right:0}
.cute-animal.meowing .mouth:before,.cute-animal.meowing .mouth:after{opacity:0}
.open-mouth{display:none;position:absolute;width:16px;height:12px;background:linear-gradient(180deg,#4a3535,#2d2020);border-radius:50%/30% 30% 70% 70%;top:57px;left:50%;transform:translate(-50%);z-index:8;box-shadow:inset 0 3px 6px #0006;overflow:hidden}
.open-mouth:before{content:"";position:absolute;width:8px;height:5px;background:linear-gradient(180deg,#ff9090,#e87070);border-radius:50%;bottom:1px;left:50%;transform:translate(-50%)}
.cute-animal.meowing .open-mouth{display:block;animation:mouthOpen .5s ease}
.cute-animal.meowing .animal-face{animation:catMeow .5s ease}
@keyframes mouthOpen{0%{height:6px;transform:translate(-50%) scale(.8)}
40%{height:16px;transform:translate(-50%) scale(1.1)}
to{height:12px;transform:translate(-50%) scale(1)}
}
@keyframes catMeow{0%{transform:scale(1.18) translateY(-6px)}
25%{transform:scale(1.22) translateY(-10px)}
50%{transform:scale(1.18) translateY(-4px)}
75%{transform:scale(1.2) translateY(-7px)}
to{transform:scale(1.18) translateY(-6px)}
}
.whiskers{position:absolute;top:52px;z-index:6;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.left-whiskers{left:8px}
.right-whiskers{right:8px}
.whisker{width:30px;height:1.5px;background:linear-gradient(90deg,#b4a08ce6,#b4a08c1a);border-radius:1px;margin:4px 0;transition:all .3s cubic-bezier(.34,1.56,.64,1);transform-origin:right center}
.right-whiskers .whisker{background:linear-gradient(-90deg,#b4a08ce6,#b4a08c1a);transform-origin:left center}
.left-whiskers .whisker:nth-child(1){transform:rotate(-18deg) translate(-8px)}
.left-whiskers .whisker:nth-child(2){transform:rotate(-3deg) translate(-10px);width:34px}
.left-whiskers .whisker:nth-child(3){transform:rotate(12deg) translate(-8px)}
.right-whiskers .whisker:nth-child(1){transform:rotate(18deg) translate(8px)}
.right-whiskers .whisker:nth-child(2){transform:rotate(3deg) translate(10px);width:34px}
.right-whiskers .whisker:nth-child(3){transform:rotate(-12deg) translate(8px)}
.animal-face:hover .left-whiskers .whisker:nth-child(1){transform:rotate(-28deg) translate(-12px);width:35px}
.animal-face:hover .left-whiskers .whisker:nth-child(2){transform:rotate(-8deg) translate(-14px);width:40px}
.animal-face:hover .left-whiskers .whisker:nth-child(3){transform:rotate(18deg) translate(-12px);width:35px}
.animal-face:hover .right-whiskers .whisker:nth-child(1){transform:rotate(28deg) translate(12px);width:35px}
.animal-face:hover .right-whiskers .whisker:nth-child(2){transform:rotate(8deg) translate(14px);width:40px}
.animal-face:hover .right-whiskers .whisker:nth-child(3){transform:rotate(-18deg) translate(12px);width:35px}
.cheeks{position:absolute;width:18px;height:12px;background:radial-gradient(ellipse,rgba(255,180,180,.45) 0%,transparent 70%);border-radius:50%;top:45px;z-index:5;transition:all .3s ease}
.left-cheek{left:12px}
.right-cheek{right:12px}
.animal-face:hover .cheeks{width:22px;height:16px;background:radial-gradient(ellipse,rgba(255,150,150,.55) 0%,transparent 70%)}
[data-animal=cat] .face-circle{background:linear-gradient(180deg,#a8a8a8,#909090 30%,#787878);border-radius:42% 42% 50% 50%;height:62px;width:88px;box-shadow:inset 0 -6px 15px #5050504d,inset 0 3px 8px #fff3}
[data-animal=cat] .face-circle:after{background:linear-gradient(180deg,#f0f0f0,#e0e0e0,#d0d0d0);width:46px;height:28px;bottom:4px;border-radius:50% 50% 55% 55%}
[data-animal=cat] .ear{background:linear-gradient(160deg,#a8a8a8,#888 60%,#707070);border-radius:3px 85%;width:30px;height:42px;top:-14px;box-shadow:inset -2px -2px 6px #00000026}
[data-animal=cat] .left-ear{left:4px;transform:rotate(-28deg)}
[data-animal=cat] .right-ear{right:4px;transform:rotate(28deg)}
[data-animal=cat] .animal-face:hover .left-ear{transform:rotate(-42deg) translateY(-5px)}
[data-animal=cat] .animal-face:hover .right-ear{transform:rotate(42deg) translateY(-5px)}
[data-animal=cat] .ear:after{background:linear-gradient(180deg,#ffb8c0,#ffa0b0);border-radius:3px 85%;width:15px;height:24px;top:8px}
[data-animal=cat] .eye{top:30px;width:28px;height:26px;border-radius:48%}
[data-animal=cat] .left-eye{left:12px}
[data-animal=cat] .right-eye{right:12px}
[data-animal=cat] .pupil{background:radial-gradient(ellipse at 40% 35%,#8bc34a,#689f38 35%,#4caf50 60%,#388e3c);width:8px;height:18px;border-radius:45%;box-shadow:inset 0 0 3px #0006}
[data-animal=cat] .pupil:before{width:4px;height:14px;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=cat] .nose{background:linear-gradient(180deg,#ffb0b0,#e89898,#d88080);width:11px;height:8px;top:52px;border-radius:50% 50% 45% 45%/45% 45% 55% 55%;box-shadow:0 1px 2px #00000026}
[data-animal=cat] .mouth{top:58px}
[data-animal=cat] .whiskers{display:flex;flex-direction:column;top:50px}
[data-animal=cat] .whisker{display:block;width:30px;height:2px}
[data-animal=dog] .face-circle{background:linear-gradient(180deg,#c8a060,#b89050 30%,#a88040);border-radius:52% 52% 48% 48%;height:75px;width:105px;box-shadow:inset 0 -6px 15px #64462840,inset 0 3px 8px #ffffff26}
[data-animal=dog] .face-circle:after{background:linear-gradient(180deg,#fff5e8,#f5e0d0,#e8d0c0);width:58px;height:46px;bottom:0;border-radius:48% 48% 52% 52%}
[data-animal=dog] .snout{display:block;position:absolute;width:48px;height:36px;background:linear-gradient(180deg,#fff5e8,#f0dcc8,#e0ccc0);border-radius:48% 48% 55% 55%;bottom:2px;left:50%;transform:translate(-50%);z-index:3;box-shadow:inset 0 -3px 6px #b48c6433}
[data-animal=dog] .ear{background:linear-gradient(180deg,#7d5535,#5d3525 60%,#4d2515);border-radius:45% 45% 55% 55%;width:36px;height:52px;top:10px;box-shadow:inset -2px -3px 6px #0003}
[data-animal=dog] .left-ear{left:-6px;transform:rotate(-12deg)}
[data-animal=dog] .right-ear{right:-6px;transform:rotate(12deg)}
[data-animal=dog] .animal-face:hover .left-ear{transform:rotate(-6deg) translateY(-3px)}
[data-animal=dog] .animal-face:hover .right-ear{transform:rotate(6deg) translateY(-3px)}
[data-animal=dog] .ear:after{display:none}
[data-animal=dog] .eye{top:28px;width:24px;height:24px}
[data-animal=dog] .left-eye{left:24px}
[data-animal=dog] .right-eye{right:24px}
[data-animal=dog] .pupil{background:radial-gradient(ellipse at 40% 35%,#6d5040,#5d4030 40%,#4d3020,#3d2010);width:15px;height:15px;box-shadow:inset 0 0 3px #0006}
[data-animal=dog] .pupil:before{width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=dog] .nose{background:linear-gradient(180deg,#404040,#2a2a2a,#1a1a1a);width:20px;height:14px;top:50px;border-radius:40% 40% 48% 48%;box-shadow:0 1px 2px #0003}
[data-animal=dog] .mouth,[data-animal=dog] .open-mouth{top:62px}
[data-animal=dog] .tongue,[data-animal=dog] .whiskers,[data-animal=dog] .cheeks{display:none}
[data-animal=panda] .face-circle{background:linear-gradient(180deg,#fff,#f5f5f5 30%,#ececec);border-radius:54% 54% 46% 46%;height:78px;width:112px;box-shadow:inset 0 -5px 12px #c8c8c866,inset 0 3px 6px #fffc}
[data-animal=panda] .face-circle:after{display:none}
[data-animal=panda] .ear{background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0a0a0a);border-radius:50%;width:32px;height:32px;top:-4px;box-shadow:inset -2px -2px 4px #0000004d}
[data-animal=panda] .left-ear{left:4px}
[data-animal=panda] .right-ear{right:4px}
[data-animal=panda] .ear:after{display:none}
[data-animal=panda] .eye-patch{display:block;position:absolute;width:38px;height:34px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0d0d0d);border-radius:55% 55% 50% 50%;top:22px;z-index:4;transform:rotate(-10deg);box-shadow:inset -2px -2px 5px #0000004d}
[data-animal=panda] .left-patch{left:12px}
[data-animal=panda] .right-patch{right:12px;transform:rotate(10deg)}
[data-animal=panda] .eye{top:24px;width:18px;height:20px;z-index:6}
[data-animal=panda] .left-eye{left:22px}
[data-animal=panda] .right-eye{right:22px}
[data-animal=panda] .pupil{background:radial-gradient(ellipse at 40% 35%,#3a3a3a,#2a2a2a 40%,#1a1a1a,#0a0a0a);width:16px;height:18px;box-shadow:inset 0 0 3px #0006}
[data-animal=panda] .pupil:before{width:10px;height:11px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=panda] .nose{background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0a0a0a);width:16px;height:10px;top:52px;border-radius:38% 38% 48% 48%;box-shadow:0 1px 2px #0003}
[data-animal=panda] .mouth{top:60px}
[data-animal=panda] .mouth:before,[data-animal=panda] .mouth:after{border-color:#707070}
[data-animal=panda] .open-mouth{top:60px}
[data-animal=panda] .whiskers,[data-animal=panda] .cheeks{display:none}
[data-animal=bear] .face-circle{background:linear-gradient(180deg,#9b7b5a,#8b6b4a,#7b5b3a 60%,#6b4b2a);border-radius:52% 52% 48% 48%;height:80px;width:118px;box-shadow:inset 0 -6px 15px #3c28144d,inset 0 3px 8px #ffffff1a}
[data-animal=bear] .face-circle:after{background:linear-gradient(180deg,#d4b494,#c4a484,#b49474);width:55px;height:40px;bottom:4px;border-radius:48% 48% 52% 52%}
[data-animal=bear] .snout{display:block;position:absolute;width:46px;height:34px;background:linear-gradient(180deg,#d4b494,#c4a484,#b49474);border-radius:48% 48% 55% 55%;bottom:4px;left:50%;transform:translate(-50%);z-index:3;box-shadow:inset 0 -3px 6px #78503233}
[data-animal=bear] .ear{background:linear-gradient(180deg,#9b7b5a,#7b5b3a,#5b3b1a);border-radius:50%;width:30px;height:30px;top:-2px;box-shadow:inset -2px -2px 4px #0003}
[data-animal=bear] .left-ear{left:8px}
[data-animal=bear] .right-ear{right:8px}
[data-animal=bear] .ear:after{background:linear-gradient(180deg,#d4b494,#c4a484);border-radius:50%;width:16px;height:16px;top:7px}
[data-animal=bear] .eye{top:22px;width:26px;height:28px}
[data-animal=bear] .left-eye{left:28px}
[data-animal=bear] .right-eye{right:28px}
[data-animal=bear] .pupil{background:radial-gradient(ellipse at 40% 35%,#c48820,#a87010 40%,#8a5800,#6a4000);width:15px;height:15px;box-shadow:inset 0 0 3px #0006}
[data-animal=bear] .pupil:before{width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=bear] .nose{background:linear-gradient(180deg,#4d4d4d,#3d3d3d,#2d2d2d);width:20px;height:12px;top:48px;border-radius:38% 38% 48% 48%;box-shadow:0 1px 2px #0003}
[data-animal=bear] .mouth{top:58px}
[data-animal=bear] .mouth:before,[data-animal=bear] .mouth:after{border-color:#6a5a4a}
[data-animal=bear] .open-mouth{top:58px}
[data-animal=bear] .whiskers,[data-animal=bear] .cheeks{display:none}
[data-animal=mouse] .face-circle{background:linear-gradient(180deg,#e8e0e0,#d8d0d0,#c8c0c0 60%,#b8b0b0);border-radius:50% 50% 48% 48%;height:70px;width:85px;box-shadow:inset 0 -5px 12px #64646433,inset 0 3px 8px #ffffff80}
[data-animal=mouse] .face-circle:after{display:none}
[data-animal=mouse] .ear{background:linear-gradient(180deg,#f5e8e8,#e8d8d8,#d8c8c8);border-radius:50%;width:38px;height:38px;top:-12px;box-shadow:inset -2px -2px 6px #96646433}
[data-animal=mouse] .left-ear{left:-2px}
[data-animal=mouse] .right-ear{right:-2px}
[data-animal=mouse] .ear:after{content:"";background:linear-gradient(180deg,#ffb6c1,#ffa0b0,#f89);border-radius:50%;width:26px;height:26px;top:6px;left:50%;transform:translate(-50%)}
[data-animal=mouse] .eye{top:26px;width:20px;height:22px}
[data-animal=mouse] .left-eye{left:18px}
[data-animal=mouse] .right-eye{right:18px}
[data-animal=mouse] .pupil{background:radial-gradient(ellipse at 40% 35%,#d03070,#b02060 40%,#901050,#700040);width:13px;height:13px;box-shadow:inset 0 0 3px #0006}
[data-animal=mouse] .pupil:before{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=mouse] .nose{background:linear-gradient(180deg,#ffb6c1,#f9a,#ff8090);width:12px;height:10px;top:46px;border-radius:50% 50% 45% 45%;box-shadow:0 1px 2px #00000026}
[data-animal=mouse] .mouth{top:54px}
[data-animal=mouse] .mouth:before,[data-animal=mouse] .mouth:after{border-color:#a0a0a0}
[data-animal=mouse] .open-mouth{top:54px;background:#f89}
[data-animal=mouse] .whiskers{display:block}
[data-animal=mouse] .cheeks,[data-animal=mouse] .tongue{display:none}
[data-animal=sloth] .face-circle{background:linear-gradient(180deg,#c4a882,#b49872,#a48862 60%,#947852);border-radius:50%;height:80px;width:100px;box-shadow:inset 0 -5px 12px #503c2840,inset 0 3px 8px #ffffff26}
[data-animal=sloth] .face-circle:after{content:"";background:linear-gradient(180deg,#e8d8c8,#d8c8b8,#c8b8a8);width:70px;height:55px;bottom:5px;border-radius:50%;left:50%;transform:translate(-50%);position:absolute}
[data-animal=sloth] .eye-patch{display:block;position:absolute;width:32px;height:28px;background:linear-gradient(180deg,#4a3a2a,#3a2a1a,#2a1a0a);border-radius:50%;top:18px;z-index:4}
[data-animal=sloth] .left-patch{left:16px}
[data-animal=sloth] .right-patch{right:16px}
[data-animal=sloth] .ear{background:linear-gradient(180deg,#c4a882,#a48862,#947852);border-radius:50%;width:22px;height:22px;top:8px;box-shadow:inset -2px -2px 4px #00000026}
[data-animal=sloth] .left-ear{left:2px}
[data-animal=sloth] .right-ear{right:2px}
[data-animal=sloth] .ear:after{display:none}
[data-animal=sloth] .eye{top:22px;width:18px;height:14px;z-index:6}
[data-animal=sloth] .left-eye{left:20px}
[data-animal=sloth] .right-eye{right:20px}
[data-animal=sloth] .pupil{background:radial-gradient(ellipse at 40% 35%,#4a7040,#3a6030 40%,#2a5020,#1a4010);width:10px;height:10px;box-shadow:inset 0 0 3px #0006}
[data-animal=sloth] .pupil:before{width:6px;height:6px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000);top:1px;left:1px;box-shadow:0 0 3px #fff}
[data-animal=sloth] .pupil:after{display:none}
[data-animal=sloth] .nose{background:linear-gradient(180deg,#3a3a3a,#2a2a2a,#1a1a1a);width:22px;height:14px;top:48px;border-radius:40% 40% 50% 50%;box-shadow:0 1px 2px #0003;z-index:5}
[data-animal=sloth] .mouth{top:60px;z-index:5}
[data-animal=sloth] .mouth:before,[data-animal=sloth] .mouth:after{border-color:#8a7a6a}
[data-animal=sloth] .open-mouth{top:60px;background:#6a5a4a;z-index:5}
[data-animal=sloth] .whiskers,[data-animal=sloth] .cheeks,[data-animal=sloth] .tongue,[data-animal=sloth] .snout{display:none}
[data-animal=hamster] .face-circle{background:linear-gradient(180deg,#f5d4a8,#e8c498,#dbb488 60%,#cea478);border-radius:52% 52% 48% 48%;height:75px;width:105px;box-shadow:inset 0 -5px 12px #96643233,inset 0 3px 8px #ffffff40}
[data-animal=hamster] .face-circle:after{content:"";background:linear-gradient(180deg,#fff5e8,#ffe8d8,#ffdbc8);width:50px;height:35px;bottom:8px;border-radius:50%;left:50%;transform:translate(-50%);position:absolute}
[data-animal=hamster] .cheeks{display:block;position:absolute;width:32px;height:28px;background:radial-gradient(ellipse at 50% 60%,#ffe8d8,#f5d4a8 40%,#e8c498,#dbb488);border-radius:50% 50% 55% 55%;top:32px;z-index:3;box-shadow:0 2px 4px #0000001a,inset 0 -2px 4px #96643226}
[data-animal=hamster] .left-cheek{left:2px}
[data-animal=hamster] .right-cheek{right:2px}
[data-animal=hamster] .ear{background:linear-gradient(180deg,#e8c498,#d8b488,#c8a478);border-radius:50%;width:24px;height:24px;top:-2px;box-shadow:inset -2px -2px 4px #0000001a}
[data-animal=hamster] .left-ear{left:12px}
[data-animal=hamster] .right-ear{right:12px}
[data-animal=hamster] .ear:after{content:"";background:linear-gradient(180deg,#ffb6c1,#ffa0b0);border-radius:50%;width:14px;height:14px;top:5px;left:50%;transform:translate(-50%)}
[data-animal=hamster] .eye{top:24px;width:22px;height:24px;z-index:4}
[data-animal=hamster] .left-eye{left:24px}
[data-animal=hamster] .right-eye{right:24px}
[data-animal=hamster] .pupil{background:radial-gradient(ellipse at 40% 35%,#8b2040,#7b1030 40%,#6b0020,#5b0010);width:14px;height:14px;box-shadow:inset 0 0 3px #0006}
[data-animal=hamster] .pupil:before{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=hamster] .pupil:after{display:none;background:#fffc;border-radius:50%;bottom:2px;right:2px}
[data-animal=hamster] .nose{background:linear-gradient(180deg,#ffb6c1,#f9a,#ff8090);width:10px;height:8px;top:46px;border-radius:50%;box-shadow:0 1px 2px #00000026;z-index:5}
[data-animal=hamster] .mouth{top:52px;z-index:5}
[data-animal=hamster] .mouth:before,[data-animal=hamster] .mouth:after{border-color:#c0a090}
[data-animal=hamster] .open-mouth{top:52px;background:#f89;z-index:5}
[data-animal=hamster] .whiskers,[data-animal=hamster] .tongue,[data-animal=hamster] .snout{display:none}
[data-animal=fox] .face-circle{background:linear-gradient(180deg,#f08030,#e07020,#d06010 60%,#c05000);border-radius:35% 35% 60% 60%;height:68px;width:82px;box-shadow:inset 0 -5px 12px #963c0040,inset 0 3px 8px #ffc89633}
[data-animal=fox] .face-circle:after{background:linear-gradient(180deg,#fff,#fff8f0,#f5ede5);width:48px;height:40px;bottom:0;border-radius:48% 48% 58% 58%}
[data-animal=fox] .ear{background:linear-gradient(160deg,#f08030,#d06010,#b04000);border-radius:6px 82%;width:30px;height:48px;top:-20px;box-shadow:inset -2px -2px 5px #00000026}
[data-animal=fox] .left-ear{left:0;transform:rotate(-22deg)}
[data-animal=fox] .right-ear{right:0;transform:rotate(22deg)}
[data-animal=fox] .animal-face:hover .left-ear{transform:rotate(-32deg) translateY(-5px)}
[data-animal=fox] .animal-face:hover .right-ear{transform:rotate(32deg) translateY(-5px)}
[data-animal=fox] .ear:after{background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0d0d0d);border-radius:6px 82%;width:13px;height:26px;top:0}
[data-animal=fox] .eye{top:28px;width:22px;height:20px;border-radius:48%}
[data-animal=fox] .left-eye{left:12px}
[data-animal=fox] .right-eye{right:12px}
[data-animal=fox] .pupil{background:radial-gradient(ellipse at 40% 35%,#ffb020,#ffa010 35%,#ff9000 60%,#e88000);width:7px;height:16px;border-radius:45%;box-shadow:inset 0 0 3px #0000004d}
[data-animal=fox] .pupil:before{width:4px;height:12px;background:linear-gradient(180deg,#1a1a1a,#000)}
[data-animal=fox] .nose{background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0d0d0d);width:11px;height:7px;top:48px;border-radius:42% 42% 48% 48%;box-shadow:0 1px 2px #00000026}
[data-animal=fox] .mouth{top:54px}
[data-animal=fox] .mouth:before,[data-animal=fox] .mouth:after{border-color:#d06010}
[data-animal=fox] .open-mouth{top:54px}
[data-animal=fox] .whisker{background:linear-gradient(90deg,#50321eb3,#50321e1a);width:28px;height:2px}
[data-animal=fox] .right-whiskers .whisker{background:linear-gradient(-90deg,#50321eb3,#50321e1a)}
[data-animal=fox] .whiskers{display:flex;flex-direction:column;top:46px}
[data-animal=fox] .cheeks{display:none}
@media (max-width: 768px){.animal-menu{position:fixed;bottom:15px;right:15px;margin-left:0;padding-left:0;border-left:none;z-index:9998}
.animal-toggle{width:44px;height:44px;font-size:24px;background:#fffffff2;border-color:#00000026;box-shadow:0 4px 15px #0003}
.animal-selector{bottom:100%;top:auto;right:0;margin-top:0;margin-bottom:10px;flex-direction:column;padding:10px;gap:8px}
.animal-btn{width:38px;height:38px;font-size:18px}
.cute-animal{top:25px}
.animal-face:hover{transform:scale(1.08) translateY(0)}
.animal-face{width:80px;height:70px}
.face-circle{width:80px;height:58px;top:15px}
.face-circle:after{width:44px;height:28px;bottom:8px}
.ear{width:22px;height:28px}
.ear:after{width:12px;height:16px;top:6px}
.left-ear{left:8px}
.right-ear{right:8px}
.eye{width:21px;height:21px;top:23px}
.left-eye{left:14px}
.right-eye{right:14px}
.cute-animal.blinking .eye{height:3px;top:33px}
.pupil{width:13px;height:15px}
.pupil:before{width:4px;height:11px}
.pupil:after{width:5px;height:5px}
.nose{width:10px;height:7px;top:40px}
.mouth{width:16px;height:8px;top:46px}
.mouth:before,.mouth:after{width:8px;height:6px}
.open-mouth{width:13px;height:10px;top:46px}
.whiskers{top:42px}
.left-whiskers{left:6px}
.right-whiskers{right:6px}
.whisker{width:24px;height:1px;margin:3px 0}
.cheeks{width:14px;height:10px;top:36px}
.left-cheek{left:10px}
.right-cheek{right:10px}
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Poppins,sans-serif;background:linear-gradient(135deg,#667eea,#f093fb,#f5576c);min-height:100vh;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{padding:20px 0}
.header-content{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{width:50px;height:50px;object-fit:contain;transition:transform .2s ease}
.logo:hover .logo-img{animation:logoShake .5s ease-in-out}
@keyframes logoShake{0%,to{transform:rotate(0)}
15%{transform:rotate(-8deg)}
30%{transform:rotate(8deg)}
45%{transform:rotate(-6deg)}
60%{transform:rotate(6deg)}
75%{transform:rotate(-3deg)}
90%{transform:rotate(3deg)}
}
.logo-text{font-size:24px;font-weight:700;color:#fff}
.btn{display:inline-block;padding:12px 24px;border-radius:25px;text-decoration:none;font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;cursor:pointer;border:none;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.btn-header{background:#2d3748;color:#fff}
.btn-header:hover{background:#1a202c;transform:translateY(-2px)}
.nav-menu{display:flex;align-items:center}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-link{color:#fff;text-decoration:none;font-weight:500;font-size:15px;padding:8px 16px;border-radius:20px;transition:all .3s ease}
.nav-link:hover{background:#ffffff26}
.nav-link.active{background:#fff3}
.menu-toggle{display:none;background:#fff3;border:none;padding:12px;border-radius:10px;cursor:pointer;width:44px;height:44px;position:relative}
.menu-icon{display:block;width:20px;height:2px;background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s ease}
.menu-icon:before,.menu-icon:after{content:"";position:absolute;width:20px;height:2px;background:#fff;left:0;transition:all .3s ease}
.menu-icon:before{top:-6px}
.menu-icon:after{top:6px}
.menu-toggle.active .menu-icon{background:transparent}
.menu-toggle.active .menu-icon:before{top:0;transform:rotate(45deg)}
.menu-toggle.active .menu-icon:after{top:0;transform:rotate(-45deg)}
@media (max-width: 768px){.menu-toggle{display:block;z-index:1001}
.nav-links{position:fixed;top:0;right:-100%;width:250px;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);flex-direction:column;justify-content:center;gap:20px;transition:right .3s ease;z-index:1000;box-shadow:-5px 0 30px #0000004d}
.nav-links.active{right:0}
.nav-link{font-size:18px;padding:12px 24px}
}
.hero{text-align:center;padding:60px 0 40px}
.hero h1{font-size:48px;font-weight:700;color:#f5576c;margin-bottom:15px}
.subtitle{font-size:18px;color:#fff;margin-bottom:20px}
.stars{display:flex;justify-content:center;gap:10px;font-size:24px}
.pricing{padding:40px 0}
.pricing-cards{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.card{width:320px;text-align:center;position:relative;border-radius:20px;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1);cursor:pointer;transform:translateZ(0);backface-visibility:hidden;contain:layout style}
@media (hover: hover) and (pointer: fine){.card:hover{transform:translate3d(0,-10px,0)}
}
.card.featured{transform:scale3d(1.05,1.05,1);z-index:10}
@media (hover: hover) and (pointer: fine){.card.featured:hover{transform:scale3d(1.05,1.05,1) translate3d(0,-10px,0)}
}
.card.coming-soon{opacity:.9}
.card.coming-soon h3{font-size:20px}
.popular-badge{position:absolute;top:10px;left:50%;transform:translate(-50%);background:#667eea;color:#fff;padding:6px 20px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:1px;z-index:20}
.card-image{width:100%;height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;z-index:1}
.card-image img{width:100%;height:100%;object-fit:contain;object-position:center}
.card-icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:50px}
.card-icon.green{background:linear-gradient(135deg,#a8e063,#56ab2f)}
.card-icon.yellow{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
.card-icon.blue{background:linear-gradient(135deg,#667eea,#764ba2)}
.card h3{font-size:22px;font-weight:600;margin:15px 0 5px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.price{font-size:36px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);margin-bottom:10px}
.card-details{background:#fff;border-radius:20px;padding:25px 20px;position:absolute;bottom:0;left:0;right:0;transform:translate3d(0,100%,0);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -10px 40px #0003;z-index:10;will-change:transform;backface-visibility:hidden}
.card-details.empty{min-height:100px;padding:40px 20px}
@media (hover: hover) and (pointer: fine){.card:hover .card-details{transform:translateZ(0)}
}
.features{list-style:none;text-align:left;margin-bottom:20px}
.features li{padding:8px 0;font-size:14px;color:#666;display:flex;align-items:center;gap:10px}
.check{font-weight:700;font-size:16px}
.green-check{color:#56ab2f}
.yellow-check{color:#f7b733}
.blue-check{color:#667eea}
.btn-card{width:100%;padding:15px;font-size:16px;color:#fff}
.green-btn{background:linear-gradient(135deg,#a8e063,#56ab2f)}
.green-btn:hover{box-shadow:0 10px 30px #56ab2f66}
.yellow-btn{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
.yellow-btn:hover{box-shadow:0 10px 30px #f7b73366}
.blue-btn{background:linear-gradient(135deg,#667eea,#764ba2)}
.blue-btn:hover{box-shadow:0 10px 30px #667eea66}
.full-offer-btn{text-align:center;margin-top:50px}
.btn-offer{background:#fff;color:#667eea;padding:16px 40px;font-size:18px;box-shadow:0 10px 40px #0003}
.btn-offer:hover{background:#667eea;color:#fff;transform:translateY(-3px);box-shadow:0 15px 50px #667eea66}
.gallery{background:#fffffff2;padding:80px 0}
.gallery h2{text-align:center;font-size:36px;font-weight:700;color:#333;margin-bottom:50px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:900px;margin:0 auto}
.gallery-item{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #0000001a;cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.gallery-item:hover{transform:translate3d(0,-8px,0);box-shadow:0 20px 50px #00000026}
.gallery-image{height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#f093fb);overflow:hidden}
.gallery-image img{width:100%;height:100%;object-fit:cover}
.gallery-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px}
.gallery-icon.yellow{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
.gallery-icon.blue{background:linear-gradient(135deg,#667eea,#764ba2)}
.gallery-info{padding:20px;text-align:center}
.gallery-info h4{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}
.gallery-price{font-size:20px;font-weight:700;color:#667eea}
.gallery-price.coming{color:#999;font-style:italic}
.cta{background:#fffffff2;padding:80px 0;text-align:center}
.cta h2{font-size:36px;font-weight:700;color:#333;margin-bottom:40px}
.how-to-buy{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-bottom:60px}
.how-section{background:#f8f9fa;border-radius:20px;padding:30px 40px;min-width:300px;max-width:400px;text-align:left}
.how-section h3{font-size:22px;font-weight:600;color:#333;margin-bottom:20px}
.how-content{min-height:80px}
.delivery-list{list-style:none}
.delivery-list li{padding:10px 0;font-size:15px;color:#555;display:flex;align-items:center;gap:12px}
.contact-info{display:flex;justify-content:center;gap:80px;flex-wrap:wrap;margin-top:40px;padding-top:40px;border-top:1px solid #e0e0e0}
.contact-item{text-align:center}
.contact-icon{font-size:40px;margin-bottom:15px}
.contact-item h4{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}
.contact-item a{color:#667eea;font-size:14px;text-decoration:none;transition:color .3s ease}
.contact-item a:hover{color:#f5576c;text-decoration:underline}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-content{background:#fff;border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:15px;right:20px;font-size:32px;color:#666;cursor:pointer;z-index:10;transition:color .3s ease}
.modal-close:hover{color:#f5576c}
.modal-gallery{width:100%}
.modal-main-image{width:100%;height:300px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#f093fb);border-radius:20px 20px 0 0;overflow:hidden}
.modal-main-image img{width:100%;height:100%;object-fit:cover}
.modal-main-image.icon-display{font-size:80px}
.modal-main-image.icon-display.yellow{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
.modal-main-image.icon-display.blue{background:linear-gradient(135deg,#667eea,#764ba2)}
.modal-info{padding:30px}
.modal-info h2{font-size:28px;font-weight:700;color:#333;margin-bottom:10px}
.modal-price{font-size:32px;font-weight:700;color:#667eea;margin-bottom:20px}
.modal-features{list-style:none;margin-bottom:25px}
.modal-features li{padding:10px 0;font-size:15px;color:#555;display:flex;align-items:center;gap:12px}
.coming-soon-text{font-size:16px;color:#666;line-height:1.6}
@media (max-width: 1024px){.pricing-cards{gap:20px}
.card{width:280px}
.card.featured{transform:scale(1)}
.card.featured:hover{transform:translateY(-10px)}
.how-to-buy{gap:30px}
.how-section{min-width:280px}
}
@media (max-width: 768px){.header-content{flex-direction:row;justify-content:space-between;padding:0 10px}
.hero{padding:40px 0 30px}
.hero h1{font-size:32px;line-height:1.2}
.subtitle{font-size:16px;padding:0 20px}
.pricing{padding:20px 0 40px}
.pricing-cards{flex-direction:column;align-items:center;gap:25px}
.card{width:100%;max-width:320px}
.gallery-grid{grid-template-columns:1fr}
.how-to-buy{flex-direction:column;align-items:center}
.how-section{width:100%;max-width:350px}
.contact-info{flex-direction:column;gap:40px}
.modal-content{max-height:95vh}
.modal-main-image{height:200px}
.footer-content{flex-direction:column;text-align:center;gap:30px}
.footer-links ul,.footer-contact ul{align-items:center}
}
.footer{background:#1a1a2e;color:#fff;padding:60px 0 30px}
.footer-content{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.footer-brand{max-width:300px}
.footer-brand .logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:15px}
.footer-brand .logo-img{width:40px;height:40px}
.footer-brand .logo-text{font-size:20px;font-weight:600;color:#fff}
.footer-tagline{color:#ffffffb3;font-size:14px}
.footer-links h4,.footer-contact h4{font-size:16px;font-weight:600;margin-bottom:20px;color:#fff}
.footer-links ul,.footer-contact ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-links a,.footer-contact a{color:#ffffffb3;text-decoration:none;font-size:14px;transition:color .3s ease}
.footer-links a:hover,.footer-contact a:hover{color:#f5576c}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:30px;text-align:center}
.footer-bottom p{color:#ffffff80;font-size:13px}
.logo{text-decoration:none}
.card-details-always{background:#fff;border-radius:0 0 20px 20px;padding:25px 20px}
@media (max-width: 768px){.card{width:100%;max-width:350px;display:flex;flex-direction:column;background:#ffffff26;border-radius:24px}
.card.featured{transform:none}
.card-image{height:auto;min-height:200px;max-height:280px;padding:20px;overflow:visible;background:transparent}
.card-image img{width:100%;height:auto;max-height:240px;object-fit:contain;object-position:center}
.card h3{padding:0 15px}
.price{padding:0 15px 10px}
.card-details{transform:translateY(0);position:relative;box-shadow:none;border-radius:0 0 24px 24px}
.card-details.empty{min-height:auto;padding:20px}
.popular-badge{top:15px}
}
.testimonials{background:#fffffff2;padding:80px 0}
.testimonials h2{text-align:center;font-size:36px;font-weight:700;color:#333;margin-bottom:50px}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1000px;margin:0 auto}
.testimonial-card{background:#fff;border-radius:20px;padding:30px;box-shadow:0 10px 40px #00000014;transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.testimonial-card:hover{transform:translate3d(0,-5px,0)}
.testimonial-stars{color:#f7b733;font-size:20px;margin-bottom:15px;letter-spacing:2px}
.testimonial-text{font-size:15px;line-height:1.7;color:#555;margin-bottom:20px;font-style:italic}
.testimonial-author{display:flex;flex-direction:column;gap:4px}
.author-name{font-weight:600;color:#333;font-size:14px}
.author-location{font-size:13px;color:#999}
.trust-badges{display:flex;justify-content:center;gap:40px;margin-top:50px;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:10px;color:#666;font-size:14px}
.trust-badge span{font-size:24px}
@media (max-width: 768px){.testimonials h2{font-size:28px}
.testimonials-grid{grid-template-columns:1fr}
}
.btn:focus,.card:focus,a:focus{outline:2px solid #667eea;outline-offset:2px}
.skip-link{position:absolute;top:-40px;left:0;background:#667eea;color:#fff;padding:8px 16px;z-index:100;transition:top .3s}
.skip-link:focus{top:0}
.eye-star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:16px;height:16px;pointer-events:none;z-index:100;opacity:0;font-size:14px;line-height:1;text-align:center;filter:drop-shadow(0 0 3px rgba(255,215,0,.8))}
.eye-star:before{content:"\2728";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.eye-star:after{display:none}
.cute-animal.star-eyes .eye-star{animation:starPop .6s ease-out forwards}
@keyframes starPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}
15%{transform:translate(-50%,-50%) scale(1.5);opacity:1}
30%{transform:translate(-50%,-50%) scale(0);opacity:0}
45%{transform:translate(-50%,-50%) scale(1.5);opacity:1}
60%{transform:translate(-50%,-50%) scale(1.3);opacity:.9}
to{transform:translate(-50%,-50%) scale(0);opacity:0}
}