:root {
  color: #172333;
  background: #edf4ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; }
.demo-shell { display: grid; place-items: center; min-height: 100vh; padding: 28px; }
.eyebrow { position: fixed; top: 28px; left: 28px; margin: 0; color: #3569a8; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; }
.demo-card { width: min(100%, 620px); padding: clamp(30px, 7vw, 72px); border: 1px solid #c9dcf7; border-radius: 24px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 24px 70px rgba(42, 85, 135, 0.14); }
.demo-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: #172333; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; }
h1 { margin: 34px 0 16px; font-size: clamp(2.1rem, 7vw, 4.7rem); letter-spacing: -0.065em; line-height: 1; }
p { color: #4d5d72; font-size: 1.08rem; line-height: 1.7; }
.detail { max-width: 470px; font-size: 0.93rem; }
a { display: inline-flex; gap: 8px; margin-top: 20px; color: #1457b8; font-weight: 800; text-decoration: none; }
a span { transition: transform 160ms ease; }
a:hover span { transform: translateX(3px); }
@media (max-width: 560px) { .eyebrow { position: static; align-self: start; margin-bottom: 18px; } .demo-shell { display: flex; flex-direction: column; align-items: stretch; } }