@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900;1000&display=swap');
:root{--purple:#321941;--pink:#fb267f;--pink-d:#b90b5b;--cream:#fff8f0;--ink:#411f36;--head-h:74px;--safe-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:#eff6ef;color:var(--ink);font-family:Nunito,'Trebuchet MS',system-ui,sans-serif;font-weight:700;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}[hidden]{display:none!important}:focus-visible{outline:3px solid #13bbdf;outline-offset:3px}body.modal-open{overflow:hidden}.container{width:min(1180px,calc(100% - 38px));margin-inline:auto}
/* Header remains the only fixed navigation in the entire document. Never transform its ancestors. */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;min-height:calc(var(--head-h) + var(--safe-top));padding-top:var(--safe-top);background:linear-gradient(120deg,rgba(44,20,63,.97),rgba(43,29,68,.97));box-shadow:0 5px 17px #27173d37;border-bottom:1px solid #ffffff2b;isolation:isolate}.header-inner{display:flex;align-items:center;gap:18px;width:min(1190px,calc(100% - 36px));height:var(--head-h);margin:auto}.brand{flex:0 0 150px;display:flex;align-items:center;justify-content:flex-start;height:100%;overflow:visible}.brand img{display:block;width:138px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 1px #30112b55)}.desktop-links{margin:auto;display:flex;align-items:center;justify-content:center;gap:clamp(13px,2vw,30px);white-space:nowrap}.desktop-links a{font-size:13px;font-weight:900;color:#fcf7ff}.desktop-links a:hover{color:#ff8fbf}.desktop-links a:first-child::after{content:"";height:3px;background:#fd399b;display:block;border-radius:8px;margin-top:3px}.header-buttons{flex-shrink:0;display:flex;gap:10px;align-items:center;justify-content:flex-end}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;color:#fff;font-weight:1000;white-space:nowrap;box-shadow:inset 0 2px #ffffffa8,inset 0 -3px #00000035,0 5px 0 #40123431,0 9px 15px #3c124824;transition:filter .18s,transform .18s,box-shadow .18s;letter-spacing:.1px}.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}.btn:active{transform:translateY(1px);box-shadow:inset 0 2px #ffffffa8,inset 0 -2px #00000044,0 2px 1px #38102c30}.btn-blue{background:linear-gradient(#5ad4ff 0%,#15a7ef 40%,#0861ce 98%);border:2px solid #0b8bda;text-shadow:0 1px 2px #004f9d}.btn-pink{background:linear-gradient(#ff93bd 0%,#ff4994 35%,#f51a71 80%,#c20857 100%);border:2px solid #eb2481;text-shadow:0 1px 2px #ad1052}.header-btn{min-width:112px;height:43px;font-size:13px}.menu-toggle{display:none;width:34px;height:40px;padding:7px 5px;flex-shrink:0;align-items:center;justify-content:center;flex-flow:column;gap:5px;background:none;border:0}.menu-toggle span{display:block;width:22px;height:2.5px;background:#fff;border-radius:2px}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#2b193bf9;padding:12px 24px 18px;box-shadow:0 12px 28px #2f17474f;border-bottom:1px solid #ffffff22;display:grid;gap:2px}.mobile-menu a{padding:12px;color:white;font-weight:900;border-bottom:1px solid #ffffff13}
/* landscape belongs to the section, rather than being an isolated rectangle */
.hero{position:relative;isolation:isolate;padding-top:calc(var(--head-h) + var(--safe-top) + 22px);min-height:715px;overflow:hidden;background:linear-gradient(180deg,#99d7fa 0%,#e5f4fd 38%,#f9e5d2 67%,#e6e8b9 100%)}.hero-scenery{position:absolute;inset:0;z-index:-1;background:url('v11-landscape.svg') center bottom / cover no-repeat;opacity:.96}.hero-scenery::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e8f9ff00 20%,#eff9ff19 49%,#e7f9ff00 84%)}.hero-inner{width:min(1190px,calc(100% - 36px));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,2vw,28px);align-items:center;padding:8px 0 30px}.hero-copy{text-align:center;min-width:0;display:flex;align-items:center;flex-flow:column}.hero-logo{display:block;object-fit:contain;width:min(100%,460px);height:auto;max-height:288px;margin:0 auto -10px;filter:drop-shadow(0 6px 3px #65305b25);animation:logoFloat 4s ease-in-out infinite}.hero h1{margin:4px 0 15px;font-size:clamp(26px,2.8vw,37px);font-weight:1000;line-height:1.08;color:#fff;letter-spacing:-.8px;text-shadow:2px 3px 0 #402071,-1px -1px 0 #44217a,3px -1px 0 #44217a,-2px 2px 0 #44217a,0 5px 3px #6a267d78}.hero h1 span{display:block;color:#ffd84a;text-shadow:2px 3px 0 #48236b,-1px -1px 0 #48236b,3px -1px 0 #48236b,-2px 2px 0 #48236b,0 5px 3px #662e8455}.hero-desc{width:min(440px,96%);padding:14px 16px;margin:0 0 15px;border:2px solid #ffe4d3;border-radius:19px;background:#fff8f0e9;box-shadow:0 6px 18px #9c546536;color:#4a2932;font-size:15px;font-weight:800;line-height:1.45}.primary-play{height:66px;width:min(410px,97%);font-size:clamp(18px,2.3vw,26px);box-shadow:inset 0 3px #fff6,inset 0 -5px #8b0c45,0 8px 0 #781c4c50,0 15px 20px #b3205a55}.play-icon{font-size:.9em}.hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px;gap:8px;margin:26px auto 0;width:100%}.hero-chips span{min-width:0;border-radius:99px;background:#fffdfaeb;color:#502b37;border:1px solid #ffffffcf;text-align:center;padding:10px 7px;font-size:12px;font-weight:900;box-shadow:0 3px 12px #6d48632b}.showcase{min-width:0;display:flex;flex-flow:column;align-items:center;padding:15px 0 0}.showcase-inner{position:relative;width:min(100%,480px);display:grid;place-items:center;padding:0 15px 0 0}.preview-shell{position:relative;width:min(100%,380px);padding:18px 15px 19px;border:8px solid #f5b17d;border-radius:38px;background:linear-gradient(145deg,#fffaf0 0%,#ffddbd 22%,#f6a76e 68%,#ffcf97 100%);box-shadow:inset 0 0 0 3px #fff4ce,inset 0 -8px 10px #dc7c4970,0 16px 20px #66375843,0 3px 0 #fff9d0;z-index:1;isolation:isolate}.icing-edge{position:absolute;top:-15px;left:-9px;right:-9px;height:51px;border-radius:42px 42px 18px 18px;background:linear-gradient(#fffdf5,#fff3e8 77%,#f7bd97);box-shadow:0 5px 0 #f19c72aa;z-index:-1}.icing-edge:after{content:"•   ✿     •     ✿      •      ✿   •";color:#fb6b89;font-size:19px;text-shadow:14px -5px #34bde9,-17px 9px #72bd70;display:block;text-align:center;letter-spacing:3px}.preview-hud{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:17px 2px 9px}.hud-medal{width:42px;height:42px;border-radius:50%;background:linear-gradient(#ffe88e,#ffc022);border:3px solid #e6a239;display:grid;place-items:center;font-size:25px;color:#aa4f22;text-shadow:0 1px #fff8;box-shadow:0 4px 4px #ad5c2770}.hud-star{color:#e88436;font-size:29px}.demo-badge{display:flex;flex-flow:column;align-items:center;flex:1;gap:1px;border-radius:22px;background:linear-gradient(#5b2f2c,#713b2c);padding:5px;color:#fff9ea;text-shadow:0 1px #321017}.demo-badge strong{font-size:18px;line-height:1}.demo-badge small{font-size:10px;font-weight:800;letter-spacing:.1px}.preview-grid,.game-grid{--cell:36px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;width:100%;padding:4px;overflow:hidden;border-radius:12px;background:#543b63;border:5px solid #fff6f8;box-shadow:0 3px 2px #ab634b88,inset 0 0 0 3px #382746}.preview-grid{appearance:none;text-align:initial;cursor:pointer}.preview-caption{display:block;text-align:center;color:#953f38;font-size:10px;font-weight:1000;letter-spacing:1.2px;padding-top:11px}.candy-tile{position:relative;display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:1;overflow:visible;isolation:isolate}.candy-tile:nth-child(even){background:#ffffff0c}.candy-tile:nth-child(odd){background:#230d2211}.candy-tile img{display:block;width:85%;height:85%;object-fit:contain;filter:drop-shadow(0 2px 1px #1b092b6b);pointer-events:none;will-change:transform,opacity}.candy-tile.pop img{animation:candyPop .58s ease-in forwards}.candy-tile.new img{animation:candyFall .5s both}.candy-tile.swapping img{animation:swapPulse .4s ease}.candy-tile.pop:after{content:"✦";position:absolute;z-index:3;color:#fffce6;font-size:34px;animation:spark .6s ease-out forwards;text-shadow:0 0 5px #fff,0 0 15px #ff7cca,0 0 21px #ffeff9}.candy-tile.selected{outline:3px solid #ffe45c;outline-offset:-3px;border-radius:3px}.candy-tile.invalid{animation:shake .25s}.preview-spark{position:absolute;top:46%;left:50%;z-index:5;pointer-events:none;font-size:clamp(19px,3vw,28px);font-weight:1000;transform:translate(-50%,-50%) scale(.6);opacity:0;letter-spacing:1px;color:#fff;text-shadow:2px 3px #ba2e74,0 0 10px #ffca38,0 0 22px #fff}.preview-spark.active{animation:comboShout 1.05s both}.mascot{position:absolute;right:-11%;bottom:-16px;width:35%;height:auto;max-width:162px;filter:drop-shadow(0 7px 7px #7a3a5678);z-index:3;pointer-events:none;animation:mascotBob 4.2s ease-in-out infinite}.preview-hint{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#603c53;background:#fff9f7ca;border-radius:20px;margin:16px auto;padding:5px 12px;font-weight:1000;letter-spacing:.55px}.pulse-dot{width:6px;height:6px;border-radius:99px;background:#2dcc99;box-shadow:0 0 0 4px #37d2a43a;animation:glow 2s infinite}
/* Lower content */
.how-section{position:relative;z-index:2;margin-top:-16px}.how-section,.reviews,.faq{scroll-margin-top:115px}.how-section{border:2px solid #ffe7d7;border-radius:28px;padding:18px 20px 21px;background:linear-gradient(140deg,#fff8efef,#ffefe8fa);box-shadow:0 14px 40px #a5555a21}.section-heading{text-align:center;margin-bottom:18px}.section-heading .sparkles{color:#ffc23d;letter-spacing:6px}.section-heading h2{margin:2px 0;font-size:clamp(27px,3.1vw,39px);font-weight:1000;line-height:1.08;color:#763e2b;-webkit-text-stroke:.4px #6b2e25;text-shadow:1px 2px #f7e4d7}.section-heading p{margin:5px auto 0;font-size:14px;color:#734b56}.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.step-card{position:relative;min-width:0;text-align:center;background:linear-gradient(#fffefa,#fff2eb);border:1px solid #ffdece;border-radius:20px;padding:15px 10px 16px;box-shadow:0 5px 8px #cf72911c}.step-number{position:absolute;top:9px;left:9px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(#fc77af,#eb257b);color:#fff;border:1px solid white;font-size:14px;font-weight:1000}.step-card>img{width:75px;height:80px;object-fit:contain;display:block;margin:auto}.step-sweets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:124px;max-width:100%;height:80px;margin:auto}.step-sweets img{height:36px;width:36px;object-fit:contain;flex-shrink:0;margin:-4px -3px}.step-card h3{font-size:15px;line-height:1.18;color:#ea1473;font-weight:1000;margin:10px 0 5px}.step-card p{font-size:13px;line-height:1.35;font-weight:700;color:#502e3e;margin:0}
.reviews{padding:52px 0 30px}.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.review-card{display:flex;gap:14px;align-items:center;background:#fffaf4;border:1px solid #fde3d9;border-radius:18px;padding:17px 20px;box-shadow:0 8px 17px #b7868e24;min-height:120px}.avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:1000;font-size:25px}.av-blue{background:linear-gradient(145deg,#49b7ff,#1767dd)}.av-pink{background:linear-gradient(145deg,#ff77b3,#ec1373)}.av-purple{background:linear-gradient(145deg,#b778fd,#7424cf)}.review-card strong{font-size:15px}.review-card small{font-size:10px;margin-left:5px;color:#815d70}.review-card p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#56394b}.faq{padding:20px 0 50px;max-width:930px}.faq details{margin:10px 0;border-radius:14px;background:#fffaf6;box-shadow:0 3px 10px #b8779230;border:1px solid #f4d9d2;padding:14px 18px}.faq summary{cursor:pointer;font-weight:1000}.faq details p{line-height:1.5;color:#6c5062;font-weight:700;font-size:14px}.last-call{position:relative;isolation:isolate;background:linear-gradient(120deg,#190d2d,#302046 52%,#190d2d);color:white;padding:49px 18px 57px;text-align:center;overflow:hidden}.last-call:before,.last-call:after{content:"";position:absolute;width:240px;height:190px;bottom:-105px;background:radial-gradient(circle at 31% 24%,#ff98be 0 16%,#c0569e 18% 30%,transparent 31%),radial-gradient(circle at 80% 55%,#8bc6e7 0 19%,transparent 20%),radial-gradient(circle at 40% 75%,#fde07b 0 25%,transparent 26%);opacity:.6;z-index:-1}.last-call:before{left:-60px}.last-call:after{right:-60px;transform:scaleX(-1)}.last-call h2{font-size:clamp(23px,3vw,32px);font-weight:1000;margin:0 0 8px}.last-call p{font-size:14px;margin:0 0 22px;color:#dfd4e5}.btn-green{background:linear-gradient(#6bffb0,#03e67f 75%,#00b765);color:#102f2d;min-width:min(450px,100%);height:57px;border:2px solid #2eed8c;font-size:20px;font-weight:1000}.footer{display:grid;justify-items:center;text-align:center;gap:10px;padding:35px 16px 27px;background:#120c21;color:#d9c9db}.footer img{width:110px;height:65px;object-fit:contain}.footer p{margin:0;font-size:12px}.footer small{font-size:11px;color:#9c89a9}
/* Signup / login / confirm */
.overlay{position:fixed;inset:0;z-index:1500;background:#080913b9;backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;overflow-y:auto;overscroll-behavior:contain}.auth-modal,.confirm-box,.game-modal{position:relative;width:min(100%,490px);border-radius:27px;background:linear-gradient(165deg,#15151d,#101016 80%);border:1px solid #ffffff23;box-shadow:0 22px 70px #080512b0;color:white}.auth-modal{padding:17px clamp(20px,4.5vw,32px) 27px;max-height:calc(100dvh - 34px);overflow-y:auto}.auth-logo{display:block;width:164px;height:85px;object-fit:contain;margin:0 auto 4px}.modal-close{position:absolute;right:14px;top:15px;z-index:5;background:#484752c9;border:0;border-radius:13px;width:39px;height:39px;color:#fff;font-weight:900;font-size:28px;display:grid;place-items:center}.auth-tabs{background:#1a1a22;border-radius:17px;padding:4px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.auth-tabs button{background:transparent;color:#8e8c9a;border:0;padding:12px 7px;border-radius:14px;font-size:15px;font-weight:1000}.auth-tabs button.selected{background:linear-gradient(#ff83b2,#eb2b78);box-shadow:inset 0 2px #ffdae9,0 3px #9f1d50;color:#fff}.auth-modal h2{text-align:center;margin:23px 0 2px;font-size:25px;font-weight:1000}.auth-desc{text-align:center;color:#aaa7b4;font-size:13px;margin:0 0 18px}.field{height:53px;margin:10px 0;display:flex;align-items:center;background:#1b1c24;border:1px solid #3e3e47;border-radius:16px;overflow:hidden;padding:0 12px 0 13px}.field:focus-within{border-color:#e45c9f;box-shadow:0 0 0 2px #db338a32}.field>span{font-size:20px;color:#848391;width:31px;text-align:center;flex-shrink:0}.field input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:white;padding:12px 8px;font-size:14px;letter-spacing:.1px}.field input::placeholder{color:#918f9e}.eye{background:transparent;border:0;color:#9a96aa;font-size:19px;padding:6px}.remember{display:flex;align-items:center;gap:8px;color:#bbb9c4;font-size:13px;margin:12px 0}.remember input{accent-color:#fa318d}.auth-submit{width:100%;height:57px;margin:12px 0 8px;font-size:18px}.switch-foot{text-align:center;font-size:13px;color:#b5b1c3;margin:13px auto 0}.switch-foot button{border:0;background:none;color:#fa419e;font-size:13px;font-weight:1000}.form-error{color:#ffb8cb;font-size:12px;min-height:0;margin:0}.confirm-overlay{z-index:1600;background:#080813b3}.confirm-box{text-align:center;max-width:415px;padding:29px 25px}.alert-ico{margin:0 auto 15px;width:62px;height:62px;display:grid;place-items:center;background:linear-gradient(#ff88ba,#ef2d83);border:3px solid #ffacd0;border-radius:50%;font-size:40px;font-weight:1000}.confirm-box h2{font-size:23px;line-height:1.3;margin:0}.confirm-box p{font-size:13px;color:#bcb5c6;margin:10px 0 19px}.confirm-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.confirm-buttons .btn{min-width:0;padding:12px 4px;font-size:12px}.btn-dark{background:linear-gradient(#676577,#292a35);border:1px solid #7c7889}
/* Match-3 real demo modal */
.game-modal{width:min(100%,535px);padding:19px 25px 23px;max-height:calc(100dvh - 30px);overflow-y:auto}.game-modal-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding-right:35px}.game-modal h2{margin:0;color:#ff89bb;font-size:21px}.game-modal-top small{color:#ad9eb4}.game-modal .modal-close{right:-9px;top:-6px}.game-stats{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 13px;font-size:10px;color:#ddd1df;text-align:center;font-weight:900}.game-stats>div{flex:1}.game-stats strong{display:block;color:white;font-size:20px}.game-stats>div:nth-child(2){flex:1.3;color:#ffdb59;font-size:13px}.game-grid{width:min(100%,435px);margin:auto;border:8px solid #ffeddf;box-shadow:0 0 0 7px #f3b67a,0 9px 16px #0005;border-radius:12px;gap:0}.game-grid .candy-tile{cursor:pointer;padding:0;background:transparent;border:0}.game-grid .candy-tile img{width:82%;height:82%}.game-help{text-align:center;font-size:12px;color:#ccbecb;margin:20px auto 16px;line-height:1.4}.game-controls{display:grid;grid-template-columns:1fr 1fr;gap:11px}.game-controls .btn{height:47px;font-size:12px}
.toast{position:fixed;right:18px;bottom:18px;z-index:1700;max-width:min(430px,calc(100vw - 36px));padding:13px 16px;border-radius:12px;color:#fff;font-weight:800;font-size:13px;background:#351d44;box-shadow:0 5px 20px #0004;opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:none}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes candyPop{0%{transform:scale(1);opacity:1}48%{transform:scale(1.25);opacity:.95}100%{transform:scale(.08);opacity:0}}@keyframes candyFall{from{transform:translateY(-80%) scale(.7);opacity:.1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes swapPulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes comboShout{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}24%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}@keyframes spark{0%{opacity:.2;transform:scale(.5) rotate(0)}40%{opacity:1;transform:scale(1.5) rotate(30deg)}100%{opacity:0;transform:scale(2) rotate(80deg)}}@keyframes glow{50%{box-shadow:0 0 0 8px #37d2a402}}@keyframes shake{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
@media(max-width:1050px){.desktop-links{gap:12px}.desktop-links a{font-size:12px}.brand{flex-basis:125px}.brand img{width:118px}.header-btn{min-width:100px}.hero-logo{max-height:245px}.preview-shell{width:min(100%,340px)}.mascot{right:-3%}.step-card h3{font-size:14px}.step-card p{font-size:12px}}
@media(max-width:830px){:root{--head-h:66px}.desktop-links{display:none}.header-inner{justify-content:space-between;gap:9px}.brand{flex:1 1 auto;width:auto;min-width:0}.brand img{width:113px;height:62px}.header-buttons{margin-left:auto}.header-btn{min-width:92px;height:37px;font-size:11px}.menu-toggle{display:flex}.hero-inner{grid-template-columns:1fr;gap:18px}.hero{padding-top:calc(var(--head-h) + var(--safe-top) + 10px);min-height:auto}.hero-logo{width:min(380px,95%)}.hero h1{font-size:30px}.hero-chips{max-width:450px;margin-top:22px}.showcase-inner{width:min(440px,100%)}.showcase{padding:2px 0 10px}.preview-shell{width:min(100% - 26px,380px)}.mascot{right:0}.hero-scenery{background-position:center center}.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.steps .step-card:nth-child(4){grid-column:1/2}.review-grid{gap:8px}.review-card{padding:12px;gap:8px}.avatar{width:40px;height:40px;flex-basis:40px;font-size:20px}}
@media(max-width:560px){:root{--head-h:57px}.header-inner{width:calc(100% - 20px);gap:5px}.brand{flex:0 1 102px}.brand img{width:101px;height:54px;object-fit:contain}.header-buttons{gap:5px}.header-btn{min-width:69px;height:31px;font-size:9px;border-width:1px;padding:0 7px}.menu-toggle{width:30px;height:33px;padding:5px 2px}.menu-toggle span{width:20px}.hero-inner{width:calc(100% - 24px);gap:4px;padding:0 0 21px}.hero-logo{width:min(355px,94%);margin:3px auto -10px}.hero h1{font-size:clamp(23px,6.6vw,30px);margin:2px 0 12px;line-height:1.08}.hero-desc{font-size:13px;padding:12px 13px;margin-bottom:13px;max-width:344px}.primary-play{height:54px;font-size:20px;max-width:350px}.hero-chips{gap:7px;width:min(100%,370px);margin-top:20px}.hero-chips span{font-size:10px;padding:8px 4px}.showcase{margin-top:10px}.showcase-inner{width:min(100%,380px)}.preview-shell{width:min(calc(100% - 24px),340px);border-width:6px;border-radius:28px;padding:14px 10px 16px}.preview-hud{margin-top:10px}.hud-medal{height:33px;width:33px;font-size:20px}.demo-badge strong{font-size:16px}.demo-badge small{font-size:9px}.preview-grid{border-width:4px;padding:2px}.preview-caption{font-size:8px;letter-spacing:.6px}.mascot{width:29%;right:-1.2%;bottom:-11px}.preview-hint{font-size:9px;margin:10px auto}.how-section{margin-top:2px;border-radius:20px;padding:15px 11px 14px;width:calc(100% - 22px)}.section-heading h2{font-size:26px}.section-heading p{font-size:12px}.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.step-card{padding:14px 8px 13px;border-radius:14px}.step-card:last-child{grid-column:1/-1;max-width:calc(50% - 4px);width:100%;justify-self:center}.step-card>img{height:60px;width:65px}.step-sweets{height:60px}.step-sweets img{width:29px;height:29px}.step-card h3{margin:6px 0 4px;font-size:13px}.step-card p{font-size:11px}.step-number{width:22px;height:22px;top:6px;left:6px;font-size:11px}.reviews{padding-top:32px}.review-grid{grid-template-columns:1fr}.review-card{min-height:80px}.review-card p{font-size:12px}.faq{padding-bottom:35px}.last-call{padding:43px 14px 47px}.last-call h2{font-size:23px}.btn-green{font-size:17px;height:52px}.auth-modal{padding:12px 15px 22px;border-radius:23px}.auth-logo{width:125px;height:69px}.auth-modal h2{font-size:22px;margin-top:19px}.auth-desc{margin-bottom:12px}.field{height:48px;margin:8px 0}.auth-tabs button{padding:10px}.auth-submit{height:51px}.game-modal{padding:16px 17px}.game-grid{border-width:5px}.game-modal h2{font-size:17px}.game-stats{margin:16px 0;font-size:9px}.game-stats strong{font-size:15px}}
@media(max-width:355px){.brand{flex-basis:79px}.brand img{width:81px}.header-btn{min-width:60px;font-size:8px;padding:0 4px}.hero-logo{width:94%}.hero h1{font-size:22px}.hero-chips span{font-size:9px}.preview-shell{max-width:calc(100% - 14px)}.mascot{right:0;width:28%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ============================ V11 - VISUAL FINISH ============================ */
:root{--head-h:74px;--panel:#fffaf5;--purple:#2b193c}
body{background:#f5ecf2;color:#40263d;-webkit-font-smoothing:antialiased}
main{background:linear-gradient(180deg,#d9eff3 0%,#fcf5ed 54%,#f7e3ed 84%,#faf0f6 100%)}
.header{background:linear-gradient(94deg,#2b173e 0%,#301b49 63%,#282045 100%);box-shadow:0 5px 21px #25153934;border-bottom:1px solid #ffffff25}
.header-inner{height:var(--head-h);align-items:center}
.brand{overflow:hidden!important;align-self:center;flex:0 0 146px;padding:4px 0}
.brand img{height:62px;width:137px;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #10081a44)}
.desktop-links{gap:clamp(13px,1.8vw,28px)}
.desktop-links a{font-weight:900;font-size:13px}
.header-buttons{align-items:center;gap:9px}
.header-btn{height:43px;min-width:108px}
.header.scrolled{box-shadow:0 7px 24px #20112d66;backdrop-filter:blur(13px)}
.hero{min-height:730px;padding-top:calc(var(--head-h) + var(--safe-top) + 23px);background:linear-gradient(180deg,#99d9fe 0%,#f5eef2 68%,#e4eccf)}
.hero-scenery{background-position:center 60%;opacity:1;background-size:cover;animation:sceneryReveal 1.5s ease-out both}
.hero-scenery:after{background:linear-gradient(90deg,rgba(230,246,255,.1) 0%,rgba(255,254,249,.09) 27%,rgba(255,255,255,.06) 69%,rgba(255,246,239,.08) 100%)}
.hero-inner{padding:17px 0 56px;gap:clamp(24px,3.1vw,48px)}
.hero-copy{padding-top:8px;filter:drop-shadow(0 7px 20px #fff4)}
.hero-logo{width:min(100%,450px);max-height:260px;margin:0 auto 0;object-fit:contain;animation:logoFloat 6s ease-in-out infinite;filter:drop-shadow(0 7px 6px #823d6240)}
.hero h1{font-size:clamp(27px,2.75vw,37px);max-width:550px;margin:1px 0 17px;line-height:1.11;text-wrap:balance}
.hero-desc{font-size:15px;max-width:455px;padding:15px 23px;background:#fffaf5f2;border:1px solid #fff;box-shadow:0 9px 28px #78628b2a;line-height:1.52}
.hero-chips{grid-template-columns:repeat(2,minmax(0,1fr));width:94%;max-width:470px;gap:9px;margin-top:25px}
.hero-chips span{font-size:12px;padding:11px 9px;background:rgba(255,254,251,.94);border:1px solid #fff;box-shadow:0 5px 13px #3e6d7f1a}
.showcase{padding-top:17px}
.preview-shell{box-shadow:0 20px 36px #503c5947,inset 0 0 0 3px #fff4ce,inset 0 -8px 10px #dc7c4970;border-color:#f4b47f}
.preview-hint{background:#fffaf8e8;box-shadow:0 3px 13px #55294314}
/* the steps panel is now its own polished section, readable even on narrow screens */
.how-section{margin-top:-13px;padding:26px 23px 27px;border:1px solid #fff7ec;border-radius:30px;background:linear-gradient(145deg,#fffefb 0%,#fff3ed 100%);box-shadow:0 20px 55px #76577329,0 0 0 1px #f1d8c9 inset;position:relative}
.how-section::before,.how-section::after{content:"";position:absolute;pointer-events:none;width:110px;height:110px;border-radius:50%;filter:blur(4px);opacity:.25}
.how-section::before{top:-32px;left:-23px;background:radial-gradient(circle,#ffacbc 0 30%,transparent 65%)}
.how-section::after{bottom:-48px;right:-45px;background:radial-gradient(circle,#9bd8f4 0 30%,transparent 65%)}
.section-heading h2{font-size:clamp(28px,2.9vw,37px);font-weight:1000;letter-spacing:-.4px;text-shadow:0 2px #fff,1px 3px 0 #f2cdc5;-webkit-text-stroke:0}
.section-heading p{color:#7a5060;font-weight:900;font-size:14px}
.section-heading .eyebrow{display:inline-block;color:#ac3d7a;font-size:10px;font-weight:1000;letter-spacing:2px;margin-bottom:6px}
.section-heading-steps{margin-bottom:22px}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.step-card{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;border:1px solid #f5d5c9;padding:18px 12px 19px;border-radius:21px;background:linear-gradient(170deg,#fffefa,#fff2ec);box-shadow:0 5px 12px #b6696e15;transition:transform .26s,box-shadow .26s,border-color .26s;min-height:239px}
.step-card:hover,.step-card:focus-visible{transform:translateY(-5px);box-shadow:0 13px 20px #b2618030;border-color:#e5a7bd}
.step-card:not(:last-child)::after{content:"›";font-size:26px;font-weight:1000;color:#e2a7af;position:absolute;top:48%;right:-17px;z-index:2;text-shadow:0 1px white}
.step-number{position:absolute;top:11px;left:10px;height:30px;width:30px;font-size:12px;background:linear-gradient(145deg,#ff80b1,#e61a73);border:2px solid white;box-shadow:0 2px 7px #6e184947}
.step-illustration{display:grid;place-items:center;width:116px;height:96px;margin:7px auto 5px;background:radial-gradient(ellipse at 50% 59%,#ffe4dd 0%,#fff6f0 40%,transparent 76%);flex-shrink:0}
.step-illustration>img{height:88px;width:91px;object-fit:contain;filter:drop-shadow(0 6px 4px #9b5b772c)}
.step-card .step-sweets{width:109px;height:78px;align-content:center;gap:0;filter:drop-shadow(0 5px 4px #7b406628)}
.step-card .step-sweets img{width:37px;height:37px;margin:-2px -3px}
.step-copy{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.step-label{font-size:9px;line-height:1.2;font-weight:1000;letter-spacing:1.4px;color:#996980}
.step-card h3{color:#e51d77;font-size:16px;line-height:1.15;margin:0;letter-spacing:-.2px}
.step-card p{margin:0;line-height:1.38;font-size:12px;color:#503948;font-weight:800;max-width:200px}
/* Comments: profile initials, airier cards and controls */
.reviews{padding:58px 0 51px;position:relative}
.reviews-heading{margin-bottom:13px}
.reviews-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:100%;margin:0 1px 15px}
.reviews-note{display:flex;align-items:center;gap:8px;color:#705169;font-size:11px;font-weight:900}
.reviews-note-dot{display:block;width:8px;height:8px;border-radius:50%;background:#eb6196;box-shadow:0 0 0 4px #f49fc652}
.reviews-controls{display:flex;gap:8px}
.review-arrow{display:grid;place-items:center;height:32px;width:32px;line-height:1;border:1px solid #f3cade;border-radius:50%;color:#ae376d;background:#fff8f6;font-size:25px;font-weight:900;box-shadow:0 3px 5px #58315015}
.review-arrow:hover{background:#ffdeed}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;scroll-behavior:smooth}
.review-card{min-width:0;display:block;position:relative;padding:18px 19px 14px;min-height:189px;background:linear-gradient(150deg,#fffefd,#fff6f8);border:1px solid #ffdee4;border-radius:22px;box-shadow:0 9px 18px #ac6b8221,0 2px 0 #fff inset;transition:transform .26s,box-shadow .26s}
.review-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #a76f912d}
.review-top{display:flex;align-items:center;gap:12px}
.avatar{height:48px;width:48px;flex:0 0 48px;box-shadow:inset 0 2px #ffffff99,0 4px 10px #56255933;border:2px solid white;font-size:23px}
.review-author{display:flex;flex:1;flex-flow:column;min-width:0}
.review-author strong{font-size:15px;color:#3f2845}
.review-author small{color:#9f667e;font-size:10px;font-weight:900;letter-spacing:.25px}
.quote-mark{color:#f1a4c6;font-size:38px;line-height:1;align-self:flex-start;font-family:Georgia,serif}
.review-card>p{margin:14px 0 15px;color:#4a3b50;font-size:13px;font-weight:800;line-height:1.5;min-height:43px}
.review-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f4e3e7;padding-top:11px;font-weight:900;font-size:11px;color:#975c83}
.review-foot span:last-child{color:#e8b453}
.review-progress{display:none;justify-content:center;gap:6px;margin:14px 0 0}
.review-progress span{width:7px;height:7px;background:#decbd6;border-radius:9px;transition:width .25s,background .25s}
.review-progress span.active{width:22px;background:#ed4a97}
/* FAQ + final section */
.faq{padding:12px 0 55px}
.faq .section-heading h2{font-size:clamp(24px,2.6vw,32px)}
.faq details{padding:15px 20px;margin:10px 0;background:#fffefaed;border:1px solid #f2d9d6;border-radius:15px;box-shadow:0 4px 11px #b7868e12;transition:border-color .2s,background .2s}
.faq details[open]{border-color:#edb6d0;background:#fffafc}
.faq summary{list-style:none;position:relative;padding-right:25px;font-size:14px;color:#512f4d}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1px;top:-3px;color:#e33d8e;font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-bottom:0}
.last-call{padding:59px 18px 66px;border-top:1px solid #fbe3ff66;background:radial-gradient(ellipse at 50% 0%,#4b3263 0%,#21112f 70%);box-shadow:inset 0 12px 35px #00000024}
.last-call-inner{position:relative;z-index:1}
.last-eyebrow{display:block;color:#f8b9e4;letter-spacing:2px;font-weight:1000;font-size:10px;margin-bottom:9px}
.last-call h2{font-size:clamp(23px,3vw,33px);line-height:1.1}
.last-call p{font-size:14px;color:#eddfec}
.last-call .btn-green{box-shadow:0 7px 25px #0eec8544,inset 0 2px #ffffffa4,inset 0 -3px #036a4a78}
.footer{padding:28px 16px 25px}
@keyframes sceneryReveal{from{opacity:0;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}
@media(min-width:1250px){.hero-chips{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;width:calc(100% + 200px);transform:translateX(100px);margin-left:-100px}.hero-chips span{font-size:11px;padding:9px 4px}}
@media(max-width:1050px){.step-card{padding:16px 9px;min-height:232px}.step-card p{font-size:11px}.step-illustration{width:100px}.brand{flex-basis:123px}.brand img{width:116px}.hero-logo{max-height:242px}}
@media(max-width:830px){:root{--head-h:66px}.brand{flex:0 1 130px}.brand img{width:118px;height:56px}.header-btn{height:37px;min-width:93px}.hero{padding-top:calc(var(--head-h) + var(--safe-top) + 20px);min-height:auto}.hero-inner{padding:8px 0 42px;gap:17px}.hero-logo{width:min(100%,404px);margin:0 auto}.hero h1{margin:6px 0 13px}.hero-scenery{background-position:53% center}.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.step-card:not(:last-child)::after{display:none}.step-card{min-height:225px}.review-grid{gap:10px}.review-card{padding:16px 13px;min-height:210px}.reviews{padding-top:45px}}
@media(max-width:560px){:root{--head-h:61px}.header-inner{height:var(--head-h);width:calc(100% - 18px);gap:6px}.brand{flex:1 1 auto;min-width:0;max-width:119px;height:100%;padding:4px 0}.brand img{width:106px;height:50px;max-width:100%}.header-buttons{gap:5px}.header-btn{height:32px;min-width:71px;padding:0 7px;font-size:9.5px}.menu-toggle{width:30px;flex:0 0 30px;padding:4px}.hero{padding-top:calc(var(--head-h) + var(--safe-top) + 20px)}.hero-inner{width:calc(100% - 24px);padding:8px 0 29px;gap:15px}.hero-copy{padding:0}.hero-logo{width:min(335px,96%);max-height:none;margin:0 auto 0;animation:none}.hero h1{font-size:clamp(22px,6.3vw,27px);line-height:1.09;margin:0 0 12px;letter-spacing:-.6px}.hero-desc{font-size:13px;max-width:354px;line-height:1.48;padding:12px 14px;margin:0 0 13px}.primary-play{max-width:355px;height:53px;font-size:19px}.hero-chips{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:355px;margin:17px auto 0;gap:7px;transform:none}.hero-chips span{font-size:10px;padding:8px 5px}.showcase{margin:0;padding:3px 0 6px}.showcase-inner{width:min(100%,380px);padding-right:0}.preview-shell{width:min(100% - 30px,342px);padding:14px 10px 16px}.mascot{right:-.3%;bottom:-14px;width:29%}.preview-hint{margin-top:10px}.how-section{width:calc(100% - 22px);padding:21px 14px 18px;margin-top:7px;border-radius:22px}.section-heading-steps{margin-bottom:15px}.section-heading h2{font-size:27px}.section-heading p{font-size:12.5px}.section-heading .eyebrow{font-size:9px}.steps{grid-template-columns:1fr;gap:10px}.step-card,.step-card:last-child{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;min-height:105px;max-width:none;width:100%;gap:8px;border-radius:16px;padding:12px 12px 12px 10px;text-align:left}.step-number{position:absolute;top:6px;left:6px;height:23px;width:23px;font-size:9px}.step-illustration{width:78px;height:82px;grid-column:1;grid-row:1;margin:0;background:radial-gradient(ellipse,#fff0e4 10%,transparent 74%)}.step-illustration>img{width:68px;height:72px;object-fit:contain}.step-card .step-sweets{width:78px;height:75px;align-content:center}.step-card .step-sweets img{width:30px;height:30px;margin:-3px -4px}.step-copy{align-items:flex-start;grid-column:2;gap:4px}.step-card h3{font-size:16px;margin:0}.step-card p{font-size:12px;line-height:1.35}.step-label{font-size:9px}.reviews{padding:38px 0 34px}.reviews .section-heading h2{font-size:26px}.reviews-note{font-size:10px}.review-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 4px 13px}.review-grid::-webkit-scrollbar{display:none}.review-card{flex:0 0 min(88%,345px);min-height:194px;scroll-snap-align:center;padding:17px 17px 13px}.review-progress{display:flex}.review-card>p{min-height:50px}.faq{padding-bottom:45px}.last-call{padding:48px 16px 53px}.last-call h2{font-size:24px}.last-call p{font-size:13px}.last-call .btn-green{height:53px;width:min(100%,385px);font-size:17px}}
@media(max-width:350px){.header-inner{gap:4px;width:calc(100% - 14px)}.brand{max-width:88px}.brand img{width:86px;height:48px}.header-btn{min-width:64px;padding:0 3px;font-size:8px}.menu-toggle{width:27px;flex-basis:27px}.hero-logo{width:94%}.hero-desc{font-size:12px}.preview-shell{max-width:calc(100% - 18px)}.step-card h3{font-size:15px}.step-card p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-scenery{animation:none}.step-card,.review-card{transition:none}}
/* Final layout safeguards: avoid invalid nested env() inside calc in WebKit/Chromium */
.hero{padding-top:calc(99px + env(safe-area-inset-top, 0px))!important}
.how-section{overflow:hidden}
@media(max-width:830px){.hero{padding-top:calc(87px + env(safe-area-inset-top, 0px))!important}}
@media(max-width:560px){.hero{padding-top:calc(80px + env(safe-area-inset-top, 0px))!important}}
@media(max-width:560px){.step-card p{font-size:13px}.step-card h3{font-size:16px}.hero-chips span{font-size:10.5px}.review-card>p{font-size:13.5px}}
/* Carousel controls only when reviews can actually scroll horizontally */
.reviews-controls{display:none}
@media(max-width:560px){.reviews-controls{display:flex}}