:root{--ink:#2d2638;--muted:#756d7e;--violet:#7c3aed;--line:#e4dced}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 82% 5%,#e9ddfb 0,transparent 30%),#faf9fd;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.demo-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;height:76px;padding:0 max(5vw,calc((100vw - 1200px)/2));border-bottom:1px solid var(--line);background:#fffdfdcc;backdrop-filter:blur(16px)}.demo-nav img{display:block;width:146px}.demo-nav>span{color:#7f7587;font-size:12px;font-weight:700}.demo-nav-cta{margin-left:auto;border-radius:12px;padding:12px 18px;background:#7140b5;color:#fff;font-size:12px;font-weight:800;text-decoration:none}.demo-shell{width:min(1160px,90vw);margin:auto;padding:72px 0 88px}.demo-intro{max-width:820px}.demo-intro>p,.demo-copy>p,.demo-closing p{margin:0 0 16px;color:#7947b1;font-size:10px;font-weight:900;letter-spacing:.13em}.demo-intro h1{margin:0;font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-3px}.demo-intro h1 em{background:linear-gradient(90deg,#663cb0,#bd59c9,#d89955);background-clip:text;color:transparent;font-style:normal}.demo-intro>span{display:block;max-width:700px;margin-top:22px;color:var(--muted);font-size:14px;line-height:1.7}.demo-stage{scroll-margin-top:92px;margin-top:54px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 24px 70px #4b2c6e14;overflow:hidden}.demo-progress{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:#faf8fc}.demo-progress button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;border:0;border-right:1px solid var(--line);background:transparent;color:#918797;cursor:pointer}.demo-progress button:last-child{border-right:0}.demo-progress b{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:#eee8f5;font-size:10px}.demo-progress span{font-size:12px;font-weight:800}.demo-progress .is-active{color:#6f3ca8;background:#fff}.demo-progress .is-active b{background:#7542b6;color:#fff}.demo-panel{display:none;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;min-height:530px;padding:64px}.demo-panel.is-active{display:grid;animation:reveal .3s ease}.demo-event-art,.demo-phone{display:grid;place-items:center;min-height:370px;border-radius:24px;background:radial-gradient(circle,#f4eaff,#e8dcf7);box-shadow:inset 0 0 0 1px #ddd1ea}.demo-qr{display:grid;width:146px;height:146px;place-items:center;border:16px solid #fff;border-radius:22px;background:#2d2638;color:#fff;font-size:70px;box-shadow:0 18px 35px #4d326c2b}.demo-event-art small{margin-top:-80px;color:#7245a3;font-size:9px;font-weight:900;letter-spacing:.15em}.demo-copy h2{margin:0 0 18px;font-size:clamp(34px,4vw,52px);line-height:1.04;letter-spacing:-2px}.demo-copy>span{display:block;color:var(--muted);font-size:14px;line-height:1.7}.demo-copy ul{display:grid;gap:10px;margin:24px 0;padding:0;list-style:none}.demo-copy li{color:#5f5668;font-size:12px}.demo-copy li:before{content:"✓";margin-right:9px;color:#7c3aed;font-weight:900}.demo-copy button,.demo-closing a{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;margin-top:26px;border:0;border-radius:13px;padding:15px 18px;background:#7542b6;color:#fff;font:800 12px inherit;text-decoration:none;cursor:pointer}.demo-copy button:disabled{cursor:not-allowed;opacity:.45}.demo-copy i,.demo-closing i{font-style:normal}.demo-phone{align-content:center;padding:38px;text-align:center}.demo-phone>small{color:#7651a0;font-size:9px;font-weight:900;letter-spacing:.12em}.demo-face{width:150px;height:150px;margin:24px;border:2px dashed #9a6ed0;border-radius:50%;background:radial-gradient(circle,#fff 0 45%,#eee4f8 46%)}.demo-phone>b{font-size:13px}.demo-phone>span{max-width:310px;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.6}.demo-consent{display:flex;gap:12px;margin-top:26px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#faf8fc;cursor:pointer}.demo-consent input{width:18px;height:18px;accent-color:#7542b6}.demo-consent b,.demo-consent small{display:block}.demo-consent b{font-size:12px}.demo-consent small{margin-top:4px;color:var(--muted);font-size:10px}.demo-results-copy{align-self:start}.demo-result-stat{display:flex;align-items:end;gap:12px;margin-top:26px}.demo-result-stat b{color:#7542b6;font-size:56px;line-height:.8}.demo-result-stat span{max-width:100px;color:var(--muted);font-size:11px}.demo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.demo-gallery figure{aspect-ratio:1;min-width:0;margin:0;border-radius:16px;background-color:#ede6f3;background-image:url('/static/event-menu-thumbnails.jpg');background-repeat:no-repeat;background-size:200% 200%;box-shadow:inset 0 0 0 1px #ffffff80}.demo-gallery figure:nth-child(1){background-position:0 0}.demo-gallery figure:nth-child(2){background-position:100% 0}.demo-gallery figure:nth-child(3){background-position:0 100%}.demo-gallery figure:nth-child(4){background-position:100% 100%}.demo-gallery figure:nth-child(5){background-position:8% 8%;background-size:235% 235%}.demo-gallery figure:nth-child(6){background-position:92% 92%;background-size:235% 235%}.demo-closing{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:54px;padding:44px 48px;border-radius:24px;background:linear-gradient(110deg,#43266d,#7a42ae);color:#fff}.demo-closing p{color:#ead8ff}.demo-closing h2{margin:0;font-size:36px}.demo-closing span{display:block;margin-top:8px;color:#ded0e8;font-size:12px}.demo-closing a{margin:0;background:#fff;color:#573181}@keyframes reveal{from{opacity:0;transform:translateY(8px)}}@media(max-width:760px){.demo-nav>span{display:none}.demo-shell{padding-top:48px}.demo-intro h1{font-size:clamp(42px,12vw,56px);letter-spacing:-2px}.demo-progress span{display:none}.demo-panel{grid-template-columns:1fr;gap:30px;min-height:0;padding:24px}.demo-event-art,.demo-phone{min-height:310px}.demo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-results-copy{order:2}.demo-closing{display:grid;padding:32px 24px}.demo-closing h2{font-size:30px}.demo-closing a{width:100%}}
