/* Mobile polish, motion and interaction layer. */
html,body{overflow-x:clip;max-width:100%}
:focus-visible{outline:2px solid #a78bfa;outline-offset:4px}
.button,.tabs button,.nav a,.plan,.member,.feature-list article,.rules article{transition:transform .28s ease,border-color .28s ease,background-color .28s ease,box-shadow .28s ease,color .28s ease}
@media (hover:hover){.button:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(124,58,237,.34)}.button.ghost:hover{color:#f0efff;border-color:rgba(124,58,237,.55);background:rgba(124,58,237,.08)}.tabs button:hover{color:#a78bfa;border-color:rgba(124,58,237,.5)}.plan:hover{transform:translateY(-7px);border-color:rgba(124,58,237,.48)}.member:hover,.feature-list article:hover,.rules article:hover{transform:translateX(4px)}.nav a:hover{transform:translateY(-1px)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .82s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.reveal.from-left{transform:translate3d(-54px,8px,0) scale(.985)}.reveal.from-right{transform:translate3d(54px,8px,0) scale(.985)}.reveal.is-visible{opacity:1;transform:none}
html.js .hero>h1,html.js .hero>p,html.js .hero>.actions,html.js .hero>.dashboard{animation:nm-hero-enter .86s cubic-bezier(.16,1,.3,1) both}html.js .hero>p{animation-delay:70ms}html.js .hero>.actions{animation-delay:140ms}html.js .hero>.dashboard{animation-delay:110ms}@keyframes nm-hero-enter{from{opacity:0;transform:translate3d(0,24px,0) scale(.99)}to{opacity:1;transform:none}}
.hero .pill{animation:float-soft 4s ease-in-out infinite}.dashboard{animation:dashboard-glow 5s ease-in-out infinite}.float{animation:float-card 4.5s ease-in-out infinite}.float.income{animation-delay:-1.5s}.float.retention{animation-delay:-3s}.brand-mark{animation:mark-pulse 3.5s ease-in-out infinite}.chart-line{transform-origin:bottom;animation:chart-enter 1.4s ease both}
@keyframes float-soft{50%{transform:translateY(-4px)}}@keyframes float-card{50%{transform:translateY(-7px)}}@keyframes dashboard-glow{50%{box-shadow:0 40px 130px rgba(124,58,237,.25)}}@keyframes mark-pulse{50%{box-shadow:0 0 18px rgba(124,58,237,.5)}}@keyframes chart-enter{from{transform:scaleY(.15);opacity:0}to{transform:scaleY(1);opacity:1}}
@media(max-width:800px){
  body{overflow-x:hidden}.wrap{width:min(100% - 32px,1072px)}.nav{height:68px}.menu{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(124,58,237,.25);border-radius:13px;background:#101018;cursor:pointer;position:relative;z-index:30}.menu[aria-expanded="true"]{color:#a78bfa;border-color:rgba(124,58,237,.55)}
  .nav nav.open{display:flex;position:absolute;top:60px;left:0;right:0;z-index:20;flex-direction:column;gap:4px;padding:12px;background:rgba(13,12,20,.98);border:1px solid rgba(124,58,237,.25);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:menu-in .25s ease both}.nav nav.open a{padding:12px;border-radius:10px}.nav nav.open a:active{background:rgba(124,58,237,.16)}
  .hero{padding-top:52px}.hero:before{width:130%;left:-15%;height:430px}.hero h1{font-size:clamp(38px,9vw,56px);line-height:1.06;letter-spacing:-1.5px;margin-top:20px}.hero h1 br{display:none}.hero>p{max-width:620px;font-size:16px;line-height:1.6}.hero .actions{max-width:420px;margin-left:auto;margin-right:auto}
  .dashboard{height:360px;margin-top:46px;border-radius:14px}.dashbody{height:315px}.dashmain{min-width:0}.metrics{grid-template-columns:repeat(3,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}.metrics article{scroll-snap-align:start}.chart{height:135px}.chart-line{height:75px}
  .social{padding:54px 20px}.social div{display:flex;gap:30px;overflow:hidden;white-space:nowrap;line-height:1.5;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);animation:brand-marquee 18s linear infinite}
  .section{padding-top:78px;padding-bottom:78px}.section h2,.final h2{font-size:clamp(34px,7vw,44px);line-height:1.14;letter-spacing:-1px}.section>p,.center>p{line-height:1.6}.members{width:100%}.panelhead{align-items:center}.member{min-height:54px}
  .app-section,.responsive{grid-template-columns:minmax(0,1fr);gap:52px}.app-section>*,.responsive>*{min-width:0;max-width:100%}.app-section h2,.responsive h2{text-align:left}.phone{max-width:100%;transform:none}.feature-list article{margin:16px 0;padding:10px;border-radius:14px}.feature-list p{line-height:1.55}
  .responsive ul{line-height:1.6}.responsive li{display:flex;align-items:flex-start;gap:4px;padding:7px 0}.devices{min-height:185px}.rules article{min-height:116px}.plans{max-width:480px;margin-left:auto;margin-right:auto}.plan{padding:26px}.plan p{min-height:0;margin-bottom:20px}.plan ul{line-height:1.55}.plan li{padding:6px 0;display:flex}.final{min-height:560px;padding:100px 22px}.final h2{max-width:650px}.footer-grid{padding-bottom:38px}
}
@media(max-width:520px){
  .hero h1 br{display:block}.hero h1 span{white-space:nowrap}
  .hero{padding-top:42px}.hero h1{font-size:clamp(35px,10.4vw,45px)}.hero .pill{font-size:11px}.actions{gap:10px}.actions .button{width:100%;min-height:50px}.dashboard{height:300px;margin-left:-3px;margin-right:-3px}.browserbar{height:39px;padding:10px}.browserbar span{overflow:hidden;white-space:nowrap}.dashbody{height:260px}.dashmain{padding:10px}.dashhead span{display:none}.metrics{margin-top:12px;grid-template-columns:82%;gap:10px}.metrics article:nth-child(n+2){display:grid}.chart{height:106px;margin-top:7px}.chart-line{height:55px;margin-top:9px}.social p{line-height:1.5}.section{padding-top:68px;padding-bottom:68px}.section h2,.final h2{font-size:clamp(32px,9vw,39px)}.tabs{margin:38px -16px 28px;padding:0 16px;scrollbar-width:none}.tabs button{white-space:nowrap}.panelhead b{max-width:48%}.phone{width:min(320px,100%)}.phone .browserbar span{font-size:10px}.feature-list i{min-width:42px}.devices{width:100%;margin-left:0;gap:7px}.devices .desktop{width:58%}.devices .tablet{width:20%}.devices .mobile{width:14%}.rules{margin-top:34px}.rules article{grid-template-columns:1fr auto;gap:8px;padding:16px}.rules code{grid-column:1/3}.rules article>span{display:none}.rules strong{text-align:right}.rules small{grid-column:1/3}.pricing>p{font-size:15px}.plans{gap:34px}.plan h3{font-size:34px}.final{padding:86px 18px}.final .actions{width:min(100%,360px);margin:26px auto 0}.final>small{line-height:1.5}.footer-grid{gap:32px}.copyright{line-height:1.5}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}@keyframes brand-marquee{to{transform:translateX(-30%)}}
@media (min-width: 999999px){html{scroll-behavior:auto}.reveal,.reveal.from-left,.reveal.from-right{opacity:1;transform:none;transition:none}.hero .pill,.dashboard,.float,.brand-mark,.chart-line,.social div{animation:none!important}.button,.plan,.member,.feature-list article,.rules article{transition:none}}

