/* OpalSketch landing page, 2026 look: a soft pink aurora behind the hero, frosted nav, glass cards and one pink gradient for the
   primary buttons. Loaded after the page's own styles; only surfaces change. */
:root { --lg-accent: linear-gradient(135deg, #f7769c 0%, #d94d7e 55%, #c93b6a 100%); --lg-glow: 0 10px 26px -10px rgba(226,73,122,.7); --lg-edge: rgba(255,255,255,.85); --lg-line: rgba(43,49,55,.08); --lg-card: rgba(255,255,255,.7); }
body { background: #f8f4f6; }
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; filter: blur(14px);
  background: radial-gradient(42% 34% at 14% 10%, rgba(247,118,156,.32) 0%, rgba(247,118,156,0) 70%), radial-gradient(36% 30% at 88% 16%, rgba(255,196,214,.55) 0%, rgba(255,196,214,0) 70%), radial-gradient(40% 36% at 70% 92%, rgba(201,59,106,.12) 0%, rgba(201,59,106,0) 70%); }
.nav { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--lg-line); }
.btn { background: var(--lg-accent); border: 0; box-shadow: var(--lg-glow); }
.btn:hover { background: var(--lg-accent); filter: brightness(1.06); }
.btn.ghost { background: rgba(255,255,255,.7); border: 1px solid var(--lg-line); color: var(--ink); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: #fff; border-color: rgba(247,118,156,.7); color: #c93b6a; filter: none; }
.kick { background: rgba(255,255,255,.7); border: 1px solid rgba(247,118,156,.35); box-shadow: 0 1px 0 #fff inset; }
.shot { border: 1px solid var(--lg-edge); background: rgba(255,255,255,.6); box-shadow: 0 1px 0 #fff inset, 0 50px 100px -50px rgba(72,30,46,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bar { background: rgba(255,255,255,.55); border-bottom: 1px solid var(--lg-line); }
.step, .f, .plan, details, .cmp, .seats, .mods button { background: var(--lg-card); border: 1px solid var(--lg-edge); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -24px rgba(72,30,46,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.step:hover, .f:hover { border-color: rgba(247,118,156,.6); box-shadow: 0 1px 0 #fff inset, 0 20px 40px -22px rgba(201,59,106,.4); }
.plan.pop { border: 1px solid rgba(247,118,156,.8); box-shadow: 0 0 0 3px rgba(247,118,156,.18), 0 30px 60px -36px rgba(201,59,106,.6); }
.plan .badge { background: var(--lg-accent); box-shadow: var(--lg-glow); }
.plan.ent { background: linear-gradient(135deg, #2b3137 0%, #3a2a33 100%); border-color: transparent; }
.nav-demo { background: linear-gradient(135deg, #2b3137 0%, #4a2534 100%); }
.final { background: linear-gradient(135deg, #c93b6a 0%, #8a1f49 100%); box-shadow: 0 40px 80px -40px rgba(138,31,73,.7); }
.final .btn { background: #fff; color: #8a1f49; box-shadow: 0 10px 26px -12px rgba(0,0,0,.4); filter: none; }
.final .btn.ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.cmp td.pop, .cmp th.pop { background: rgba(247,118,156,.1); }
.cmp th:first-child, .cmp td:first-child, .cmp thead th { background: rgba(255,255,255,.9); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav, .step, .f, .plan, details, .cmp, .seats, .shot { background: rgba(255,255,255,.96); } }
@media (prefers-reduced-transparency: reduce) { .nav, .step, .f, .plan, details, .cmp, .seats, .shot, .btn.ghost { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } body::before { display: none; } }