:root {
  color-scheme: dark;
  --bg: #080b10;
  --surface: rgba(17, 22, 29, 0.86);
  --line: rgba(255, 255, 255, 0.1);
  --muted: #9099a8;
  --green: #78f0aa;
  --green-strong: #35d981;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -25%, rgba(50, 111, 82, 0.18), transparent 38%),
    var(--bg);
  color: #f6f8f9;
  font-family: "DM Sans", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.ambient-one { width: 300px; height: 300px; background: rgba(47, 222, 126, .08); top: 20%; left: -180px; }
.ambient-two { width: 260px; height: 260px; background: rgba(93, 115, 255, .06); right: -140px; bottom: 5%; }

.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; }

.access-card {
  position: relative;
  width: min(100%, 520px);
  padding: 36px 44px 30px;
  text-align: center;
  background: linear-gradient(145deg, rgba(21, 27, 35, .94), rgba(12, 16, 22, .96));
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .45), inset 0 1px rgba(255,255,255,.025);
}

.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #aab2bd; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.lock-scene { position: relative; width: 154px; height: 171px; margin: 23px auto 7px; display: grid; place-items: center; }
.lock-glow { position: absolute; width: 115px; height: 115px; border-radius: 50%; background: rgba(74, 233, 142, .1); filter: blur(18px); transition: .5s ease; }
.lock-icon { position: relative; width: 122px; overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.36)); }
.shackle { stroke: #b6c0c9; stroke-width: 15; stroke-linecap: round; transition: transform .55s cubic-bezier(.2,.9,.25,1.2), stroke .35s; transform-origin: 118px 84px; }
.lock-body { fill: #232b34; stroke: #38434e; stroke-width: 2; transition: fill .35s, stroke .35s; }
.keyhole { fill: #82909b; transition: fill .35s; }
.success-check { position: absolute; opacity: 0; color: #08130d; font-size: 37px; font-weight: 800; transform: scale(.5); transition: .35s .12s ease; }

.copy .step { margin: 0 0 9px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(30px, 7vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
h1 em { color: var(--green); font-style: normal; }
.description { max-width: 350px; margin: 16px auto 27px; color: var(--muted); font-size: 14px; line-height: 1.65; }

.slider { --handle-x: 0px; position: relative; height: 70px; padding: 7px; overflow: hidden; touch-action: none; user-select: none; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #0b0f14; box-shadow: inset 0 2px 7px rgba(0,0,0,.45); cursor: grab; }
.slider:active { cursor: grabbing; }
.slider-progress { position: absolute; inset: 0 auto 0 0; width: calc(var(--handle-x) + 70px); background: linear-gradient(90deg, rgba(53,217,129,.24), rgba(53,217,129,.06)); }
.slider-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 13px; margin: 0 0 0 48px; color: #aab1ba; font-size: 13px; font-weight: 600; letter-spacing: .01em; transition: opacity .2s; }
.slider-label span { color: var(--green); font-size: 19px; animation: nudge 1.5s infinite; }
.slider-handle { position: relative; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 13px; background: linear-gradient(145deg, #8bf5b8, #43dc87); box-shadow: 0 6px 22px rgba(57,217,129,.25); transform: translateX(var(--handle-x)); pointer-events: none; }
.slider-handle svg { width: 23px; stroke: #0b311b; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.trust-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; color: #636d79; font-size: 10px; }
.trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.trust-row svg { width: 14px; fill: none; stroke: #697580; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #46505b; }

.unlocked .shackle { transform: translate(0, -18px) rotate(18deg); stroke: #81efad; }
.unlocked .lock-body { fill: var(--green-strong); stroke: #8ff6b9; }
.unlocked .keyhole { opacity: 0; }
.unlocked .success-check { opacity: 1; transform: scale(1); }
.unlocked .lock-glow { background: rgba(74, 233, 142, .25); transform: scale(1.25); }
.slider.complete { cursor: default; }
.slider.complete .slider-label { opacity: 0; }

@keyframes nudge { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(5px); opacity: 1; } }

@media (max-width: 520px) {
  .page-shell { padding: 14px; }
  .access-card { padding: 28px 20px 23px; border-radius: 24px; }
  .lock-scene { margin-top: 15px; transform: scale(.9); margin-bottom: -3px; }
  .description { margin-bottom: 22px; }
  .trust-row { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}