.demo-page{background:#0a0e14}.demo-grid-bg{background-image:linear-gradient(rgba(6,182,212,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.12) 1px,transparent 1px),linear-gradient(rgba(6,182,212,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.05) 1px,transparent 1px);background-size:60px 60px,60px 60px,15px 15px,15px 15px;animation:demo-grid-drift 20s linear infinite}@keyframes demo-grid-drift{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:60px 60px,60px 60px,15px 15px,15px 15px}}.demo-pulse-1{animation:demo-pulse 8s ease-in-out infinite alternate}.demo-pulse-2{animation:demo-pulse 10s ease-in-out infinite alternate-reverse}@keyframes demo-pulse{0%{opacity:.4;transform:scale(1)}to{opacity:1;transform:scale(1.15)}}.demo-particle{position:absolute;border-radius:9999px;background:#06b6d4;box-shadow:0 0 6px 1px #06b6d4b3;animation:demo-float 4s ease-in-out infinite;opacity:0}.demo-particle-alt{position:absolute;border-radius:9999px;background:#38bdf8;box-shadow:0 0 6px 1px #38bdf8b3;animation:demo-twinkle 4s ease-in-out infinite;opacity:0}@keyframes demo-float{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.85}75%{opacity:.85}to{opacity:0;transform:translateY(-100px) scale(.2)}}@keyframes demo-twinkle{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:.9;transform:translateY(-20px) scale(1.2)}50%{opacity:.5;transform:translateY(-55px) scale(.9)}80%{opacity:.85;transform:translateY(-80px) scale(1.1)}to{opacity:0;transform:translateY(-110px) scale(.2)}}.demo-tab-pill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:#ffffff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(6,182,212,.2);border-radius:9999px;padding:4px}.demo-tab-indicator{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:linear-gradient(135deg,#06b6d4,#0ea5e9);border-radius:9999px;box-shadow:0 0 16px #06b6d480;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.demo-tab-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:9999px;font-size:.875rem;font-weight:600;color:#ffffff73;background:transparent;border:none;cursor:pointer;transition:color .3s ease;white-space:nowrap}.demo-tab-btn--active{color:#fff}.demo-tab-btn svg{flex-shrink:0;transition:color .3s ease}.demo-title-gradient{background:linear-gradient(135deg,#67e8f9,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 16px rgba(103,232,249,.45))}.demo-phone-glow{position:relative;border-radius:44px;padding:3px;background:linear-gradient(135deg,#06b6d499,#0ea5e94d,#06b6d499);box-shadow:0 0 40px #06b6d440,0 0 80px #06b6d41a,0 0 120px #06b6d40d;animation:demo-glow-pulse 4s ease-in-out infinite alternate}@keyframes demo-glow-pulse{0%{box-shadow:0 0 40px #06b6d433,0 0 80px #06b6d414,0 0 120px #06b6d408}to{box-shadow:0 0 50px #06b6d459,0 0 100px #06b6d426,0 0 150px #06b6d414}}.demo-phone-frame{position:relative;width:375px;height:812px;background:#000;border-radius:42px;overflow:hidden;border:2px solid rgba(255,255,255,.08)}.demo-phone-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:150px;height:28px;background:#000;border-radius:0 0 20px 20px;z-index:10}.demo-phone-screen{width:100%;height:100%;border:none;background:#111}@media(max-width:440px){.demo-phone-frame{width:320px;height:693px}.demo-phone-glow{border-radius:38px}.demo-phone-frame{border-radius:36px}}@media(max-width:350px){.demo-phone-frame{width:280px;height:607px}.demo-phone-glow{border-radius:34px}.demo-phone-frame{border-radius:32px}}