*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Sarabun,Noto Sans Thai,Roboto,sans-serif}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e3a8a 50%,#4338ca);color:#f8fafc;overflow:hidden}.card{text-align:center;padding:3rem 4rem;background:hsla(0,0%,100%,.04);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);max-width:560px}.brand{font-size:5rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.subtitle{font-size:1.5rem;font-weight:500;color:#cbd5e1;margin-bottom:2rem}.thai{font-size:1.125rem;color:#94a3b8;margin-bottom:2.5rem;line-height:1.6}.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);border-radius:9999px;font-size:.875rem;font-weight:500;color:#86efac}.dot{width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 12px #22c55e;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.footer{margin-top:2rem;font-size:.75rem;color:#64748b}.mockup-page{position:fixed;inset:0;display:block;align-items:unset;justify-content:unset;background:linear-gradient(180deg,#f8fafc,#eef2ff);color:#0f172a;overflow-y:auto;padding:4rem 1.5rem}.mockup-wrap{max-width:880px;margin:0 auto}.mockup-head{text-align:center;margin-bottom:3rem}.mockup-title{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#1e3a8a,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.mockup-sub{color:#64748b;font-size:1rem}.mockup-grid{display:grid;grid-template-columns:1fr;grid-gap:1.25rem;gap:1.25rem}@media (min-width:640px){.mockup-grid{grid-template-columns:1fr 1fr}}.mockup-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1.75rem;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.mockup-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -15px rgba(99,102,241,.25);border-color:#c7d2fe}.mockup-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#eef2ff,#ddd6fe);color:#4f46e5;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.mockup-name{font-size:1.25rem;font-weight:700;margin-bottom:.4rem}.mockup-desc{color:#64748b;font-size:.9375rem;line-height:1.5;margin-bottom:1rem}.mockup-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.25rem}.mockup-chip{font-size:.75rem;padding:.25rem .625rem;background:#f1f5f9;color:#475569;border-radius:6px;font-family:ui-monospace,SF Mono,Menlo,monospace}.mockup-size{font-size:.75rem;color:#94a3b8}.mockup-open{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;align-self:flex-start;padding:.6rem 1rem;background:#4f46e5;color:#fff;border-radius:10px;font-size:.875rem;font-weight:600;transition:background .15s ease}.mockup-card:hover .mockup-open{background:#4338ca}.mockup-foot{text-align:center;margin-top:3rem}.mockup-back{color:#6366f1;text-decoration:none;font-size:.875rem}.mockup-back:hover{text-decoration:underline}