/* SKNR — stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:#050e24;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:#34baf2;color:#050e24} a{color:inherit} @keyframes spin{to{transform:rotate(360deg)}} @keyframes meshFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}} @keyframes meshFloat2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-50px,40px) scale(1)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(52,186,242,0.45),0 14px 40px rgba(9,52,137,0.5)}50%{box-shadow:0 0 0 14px rgba(52,186,242,0),0 14px 40px rgba(9,52,137,0.5)}} @keyframes scanmove{0%{top:6%}100%{top:82%}} @keyframes fieldIn1{0%,34%{opacity:0;transform:translateX(-10px)}40%,62%{opacity:1;transform:none}66%,100%{opacity:0}} @keyframes fieldIn2{0%,37%{opacity:0;transform:translateX(-10px)}43%,62%{opacity:1;transform:none}66%,100%{opacity:0}} @keyframes fieldIn3{0%,40%{opacity:0;transform:translateX(-10px)}46%,62%{opacity:1;transform:none}66%,100%{opacity:0}} @keyframes msgIn{0%,67%{opacity:0;transform:translateY(10px)}73%,97%{opacity:1;transform:none}100%{opacity:0}} @keyframes waPop{0%,70%{opacity:0;transform:scale(.4)}76%{opacity:1;transform:scale(1.2)}81%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}} @keyframes confetti{0%,72%{opacity:0;transform:translate(0,0) scale(0)}78%{opacity:1;transform:translate(var(--cx),var(--cy)) scale(1)}96%,100%{opacity:0;transform:translate(calc(var(--cx)*1.5),calc(var(--cy)*1.5 + 26px)) scale(.4)}} @keyframes phoneCycle{0%{opacity:0;transform:translateX(24px)}3%{opacity:1;transform:none}30%{opacity:1;transform:none}33%{opacity:0;transform:translateX(-24px)}100%{opacity:0;transform:translateX(-24px)}} @keyframes step1{0%,30%{opacity:1}33%,100%{opacity:.3}} @keyframes step2{0%,33%{opacity:.3}36%,63%{opacity:1}66%,100%{opacity:.3}} @keyframes step3{0%,66%{opacity:.3}69%,96%{opacity:1}100%{opacity:.3}} @keyframes stepProgress{0%{width:6%}30%{width:34%}33%{width:36%}63%{width:67%}66%{width:69%}96%,100%{width:100%}} @keyframes shimmerSweep{100%{transform:translateX(220%) skewX(-18deg)}} @keyframes badgePulse{0%,100%{opacity:.5}50%{opacity:1}} .sknr-shimmer{position:relative;overflow:hidden} .sknr-shimmer::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transform:translateX(-160%) skewX(-18deg)} .sknr-shimmer:hover::after{animation:shimmerSweep .9s ease} @keyframes demoFill{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}} @keyframes demoScan{0%{opacity:0;top:8%}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:84%}} /* demo scan replay */ #demo-stage .demo-fill{opacity:1} #demo-stage.playing .demo-scanline{animation:demoScan 1.4s ease-in-out} #demo-stage.playing .demo-fill{animation:demoFill .55s ease forwards;animation-delay:1.1s} #demo-stage.playing .demo-fill.d2{animation-delay:1.4s} #demo-stage.playing .demo-fill.d3{animation-delay:1.7s} /* responsive */ .r-burger{display:none} .r-mm{display:none;overflow:hidden} #sknr-menu:checked ~ .r-mm{display:block} .r-burger .r-bar{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .22s ease,opacity .18s ease} #sknr-menu:checked ~ nav .r-burger .r-bar:nth-child(1){transform:translateY(7px) rotate(45deg)} #sknr-menu:checked ~ nav .r-burger .r-bar:nth-child(2){opacity:0} #sknr-menu:checked ~ nav .r-burger .r-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* pricing billing toggle */ .price-annual{display:none} #sknr-billing:checked ~ * .price-monthly,#sknr-billing:checked ~ .pricing-grid .price-monthly{display:none} #sknr-billing:checked ~ * .price-annual,#sknr-billing:checked ~ .pricing-grid .price-annual{display:inline} #sknr-billing:checked ~ .billing-row .save-badge{opacity:1 !important} #sknr-billing:checked ~ .billing-row .bill-knob{left:25px !important} #sknr-billing:checked ~ .billing-row .bill-m{color:rgba(255,255,255,0.5) !important} #sknr-billing:checked ~ .billing-row .bill-a{color:#fff !important} @media (max-width:980px){ .r-desktop-nav{display:none !important} .r-burger{display:flex !important} .hero-grid{grid-template-columns:1fr !important;text-align:center} .hero-grid .hero-ctas,.hero-grid .hero-trust,.hero-grid .hero-badge{justify-content:center} .ps-grid{grid-template-columns:1fr !important} .feat-grid{grid-template-columns:repeat(2,1fr) !important} .how-grid{grid-template-columns:1fr !important} .stats-grid{grid-template-columns:repeat(2,1fr) !important;gap:36px 16px !important} .who-grid{grid-template-columns:repeat(2,1fr) !important} .wa-grid{grid-template-columns:1fr !important} .pricing-grid{grid-template-columns:1fr !important;max-width:440px;margin-left:auto;margin-right:auto} .price-mid{transform:none !important} .testi-grid{grid-template-columns:1fr !important;max-width:480px;margin-left:auto;margin-right:auto} .foot-grid{grid-template-columns:1fr 1fr !important} .demo-stage{grid-template-columns:1fr !important} .how-line{display:none !important} .sec{padding-top:72px !important;padding-bottom:72px !important} } @media (max-width:560px){ .feat-grid{grid-template-columns:1fr !important} .who-grid{grid-template-columns:1fr !important} .stats-grid{grid-template-columns:1fr 1fr !important} .nav-pad{padding-left:18px !important;padding-right:18px !important} .sec{padding-left:18px !important;padding-right:18px !important} #demo-stage{display:flex !important;flex-direction:row !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;-webkit-overflow-scrolling:touch !important;gap:20px !important;padding:20px 18px !important;width:100% !important} #demo-stage > div{scroll-snap-align:center !important;flex-shrink:0 !important;width:200px !important} .foot-grid{grid-template-columns:1fr 1fr !important} .hero-trust{flex-direction:column !important;gap:10px !important} .billing-row{flex-wrap:wrap !important} .pricing-grid{grid-template-columns:1fr !important} .testi-grid{grid-template-columns:1fr !important} } @media (max-width:760px){ .pricing-grid{grid-template-columns:1fr !important} .feat-grid{grid-template-columns:1fr 1fr !important} .testi-grid{grid-template-columns:1fr !important} .how-grid{grid-template-columns:1fr 1fr !important} .foot-grid{grid-template-columns:1fr 1fr !important} #demo-stage{display:flex !important;flex-direction:row !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;-webkit-overflow-scrolling:touch !important;gap:24px !important;padding:20px 24px !important} #demo-stage > div{scroll-snap-align:center !important;flex-shrink:0 !important} }