.hero{background:linear-gradient(135deg,#f0e7f7 0%,#fef3e8 25%,#e8f4ff 50%,#fff5f0 75%,#f5e6ff 100%);justify-content:center;align-items:center;width:100%;min-height:auto;padding:3rem 2rem;display:flex;position:relative;overflow:hidden}.hero:before{content:"";opacity:.25;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 15% 20%,#9158db 2px,#0000 2px),radial-gradient(circle at 85% 15%,#22c55e 1.5px,#0000 1.5px),radial-gradient(circle at 25% 80%,#fbbf24 2px,#0000 2px),radial-gradient(circle at 75% 70%,#ec4899 1.5px,#0000 1.5px),radial-gradient(circle at 50% 30%,#8b5cf6 1.5px,#0000 1.5px),radial-gradient(circle at 90% 85%,#22c55e 2px,#0000 2px),radial-gradient(circle at 10%,#fbbf24 1.5px,#0000 1.5px);background-position:0 0,40px 60px,130px 270px,70px 100px,200px 150px,160px 320px,90px 180px;background-size:250px 250px;width:100%;height:100%;position:absolute;top:0;left:0}.hero:after{content:"";opacity:.15;pointer-events:none;z-index:1;background-image:radial-gradient(120px 40px at 20% 15%,#ffffffe6 0%,#0000 70%),radial-gradient(100px 35px at 75% 25%,#fffc 0%,#0000 70%),radial-gradient(140px 45px at 60% 80%,#ffffffd9 0%,#0000 70%),radial-gradient(90px 30px at 10% 70%,#ffffffbf 0%,#0000 70%);background-repeat:no-repeat;width:100%;height:100%;animation:40s ease-in-out infinite cloudFloat;position:absolute;top:5%;left:0}@keyframes cloudFloat{0%,to{transform:translate(0)translateY(0)}25%{transform:translate(20px)translateY(-10px)}50%{transform:translate(-15px)translateY(5px)}75%{transform:translate(10px)translateY(-5px)}}.hero-container{z-index:2;width:100%;max-width:1200px;padding:0 16px;position:relative}.hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;display:grid}.hero-content{flex-direction:column;gap:1.5rem;display:flex}.hero-mockup-column{justify-content:center;align-items:center;display:flex}.hero-header{text-align:left}.hero-title-new{color:#475569;word-break:keep-all;overflow-wrap:normal;margin-bottom:0;font-family:Playpen Sans,cursive,sans-serif;font-size:3rem;font-weight:700;line-height:1.1}.hero-title-secondary{color:#9158db;margin-top:.25rem;font-size:2.5rem;font-weight:700;display:block}.hero-subtitle-text{color:#475569;margin:0;font-family:Playpen Sans,sans-serif;font-size:1.1rem;font-weight:400;line-height:1.6}.hero-subtitle-text strong{color:#475569;font-weight:600}.hero-stats-text{color:#64748b;margin:0;font-family:Playpen Sans,sans-serif;font-size:.95rem;font-weight:400}.hero-features{grid-template-columns:repeat(2,1fr);gap:.75rem 1rem;display:grid}.hero-feature{align-items:center;gap:.75rem;font-family:Playpen Sans,sans-serif;display:flex}.feature-icon{justify-content:center;align-items:center;width:32px;height:32px;font-size:1.25rem;display:flex}.feature-text{color:#475569;font-size:1rem;font-weight:500}.compact-cards{flex-direction:column;gap:.5rem;width:100%;max-width:600px;display:flex}.card-container{justify-content:flex-start;align-items:center;gap:.5rem;display:flex;position:relative}.flip-card{perspective:1000px;cursor:pointer;width:170px;height:45px}.flip-card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%;height:100%;position:absolute}.flip-card-back{transform:rotateY(180deg)}.problem-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 50%,#94a3b8 100%);border:1px solid #ffffff4d;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;min-height:45px;padding:.5rem;transition:all .2s;display:flex;box-shadow:0 2px 8px #94a3b826}.flip-card:hover .problem-card{transform:translateY(-2px);box-shadow:0 6px 16px #94a3b84d}.solution-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ddd6fe 0%,#c4b5fd 50%,#8b5cf6 100%);border:1px solid #ffffff4d;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;min-height:45px;padding:.5rem;transition:all .2s;display:flex;box-shadow:0 2px 8px #8b5cf626}.flip-card:hover .solution-card{transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf64d}.problem-text{color:#475569;text-shadow:1px 1px 2px #fffc;font-family:Playpen Sans,sans-serif;font-size:.7rem;font-weight:600;line-height:1.1}.solution-highlight{color:#fff;text-shadow:1px 1px 2px #0000004d;margin-bottom:.1rem;font-family:Playpen Sans,sans-serif;font-size:.7rem;font-weight:800;line-height:1;display:block}.solution-subtitle{color:#f3f4f6;text-shadow:1px 1px 2px #0003;font-family:Playpen Sans,sans-serif;font-size:.55rem;font-weight:500;line-height:1.1;display:block}.hero-cta-section{justify-content:flex-start;width:100%}.cta-button-large{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e 0%,#16a34a 50%,#15803d 100%);border:2px solid #22c55e;border-radius:16px;align-items:center;gap:12px;margin:0;padding:14px 32px;font-family:Playpen Sans,sans-serif;font-size:1.2rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #22c55e66,0 4px 16px #16a34a4d}.cta-button-large:hover{background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#166534 100%);border-color:#16a34a;transform:translateY(-3px)scale(1.05);box-shadow:0 12px 40px #22c55e99,0 8px 24px #16a34a80}.cta-button-large:active{transform:translateY(-1px)scale(1.02);box-shadow:0 6px 20px #22c55e80}@media (max-width:968px){.hero{min-height:auto;padding:3rem 1.5rem}.hero-grid{grid-template-columns:1fr;gap:2rem}.hero-content{text-align:center;align-items:center}.hero-header{text-align:center}.hero-title-new{font-size:max(2rem,min(8vw,3rem))}.hero-title-secondary{font-size:max(1.5rem,min(6vw,2.5rem))}.hero-subtitle-text{text-align:center;font-size:max(.95rem,min(3.5vw,1.1rem))}.hero-stats-text{text-align:center;font-size:max(.85rem,min(3vw,.95rem))}.cta-button-large{width:-webkit-fit-content;width:fit-content;margin:0 auto;padding:14px 28px;font-size:1.15rem}.hero-cta-section{justify-content:center}.hero-features{grid-template-columns:1fr;width:100%;max-width:400px}.hero-feature{justify-content:center}.hero-mockup-column{order:1}.hero .mockup-wrapper{padding:20px 0;justify-content:center!important}}@media (max-width:480px){.hero{padding:2rem 1rem}.hero-title-new{font-size:1.75rem}.hero-title-secondary{font-size:1.4rem}.hero-subtitle-text{font-size:.9rem}.hero-stats-text{font-size:.8rem}.cta-button-large{padding:12px 24px;font-size:1rem}.hero-features{gap:.5rem}.feature-icon{width:28px;height:28px;font-size:1.1rem}.feature-text{font-size:.9rem}}.hero .mockup-wrapper{justify-content:center;padding:20px 0}.hero .mockup-frame{max-width:300px}.hero .mockup-frame .video-container{z-index:2;background:#000;border-radius:32px;width:92%;height:95%;position:absolute;top:2.6%;left:4%;overflow:hidden}.hero .mockup-frame .tutorial-video{object-fit:cover;object-position:center;width:100%;height:100%;display:block}@media (max-width:768px){.hero .mockup-frame .video-container{border-radius:35px;width:91%;height:95.5%;top:2.5%;left:4.5%}}@media (max-width:480px){.hero .mockup-frame .video-container{border-radius:35px;width:91.5%;height:95%;top:2.7%;left:4.2%}}
.video-tutorial-section{background:linear-gradient(#fff 0%,#f8f9fa 100%);justify-content:center;align-items:center;width:100%;padding:80px 20px;display:flex}.video-tutorial-container{flex-direction:column;align-items:center;gap:40px;width:100%;max-width:1200px;display:flex}.video-tutorial-title{color:#333;text-align:center;letter-spacing:-.5px;margin:0;font-size:2.5rem;font-weight:700}.video-tutorial-subtitle{color:#666;text-align:center;max-width:600px;margin:-20px 0 0;font-size:1.2rem}.mockup-wrapper{justify-content:center;align-items:center;width:100%;padding:20px;display:flex}.mockup-frame{aspect-ratio:1194/2505;width:100%;max-width:400px;position:relative}.video-container{z-index:2;background:#000;position:absolute;overflow:hidden}.video-tutorial-section .video-container{border-radius:55px;width:92%;height:95%;top:2.6%;left:4%}.frame-image{object-fit:contain;z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.tutorial-video{object-fit:cover;object-position:center;width:100%;height:100%;display:block}@media (max-width:768px){.video-tutorial-section{padding:60px 15px}.video-tutorial-title{font-size:2rem}.video-tutorial-subtitle{font-size:1.1rem}.mockup-frame{max-width:320px}.video-tutorial-section .video-container{border-radius:35px;width:91%;height:95.5%;top:2.5%;left:4.5%}}@media (max-width:480px){.video-tutorial-section{padding:40px 10px}.video-tutorial-title{font-size:1.75rem}.video-tutorial-subtitle{margin:-15px 0 0;font-size:1rem}.video-tutorial-container{gap:30px}.mockup-frame{max-width:280px}.mockup-wrapper{padding:10px}.video-container{border-radius:35px;width:91.5%;height:95%;top:2.7%;left:4.2%}}
.floating-cta{z-index:1050;color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:linear-gradient(135deg,#22c55e 0%,#16a34a 50%,#15803d 100%);border:2px solid #22c55e;border-radius:16px;justify-content:center;align-items:center;gap:12px;width:calc(100% - 40px);max-width:400px;min-height:56px;padding:14px 32px;font-family:Playpen Sans,sans-serif;font-size:1.1rem;font-weight:700;text-decoration:none;transition:opacity .3s,transform .3s;display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);box-shadow:0 8px 32px #22c55e66,0 4px 16px #16a34a4d}.floating-cta.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.floating-cta:hover{background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#166534 100%);border-color:#16a34a;transform:translate(-50%,-2px);box-shadow:0 12px 40px #22c55e99,0 8px 24px #16a34a80}.floating-cta:active{transform:translate(-50%);box-shadow:0 6px 20px #22c55e80}@media (max-width:480px){.floating-cta{display:inline-flex}@supports (padding-bottom:env(safe-area-inset-bottom)){.floating-cta{bottom:calc(20px + env(safe-area-inset-bottom))}}}@media (max-width:360px){.floating-cta{gap:10px;padding:12px 24px;font-size:1rem}.floating-cta img{width:20px!important;height:20px!important}}