:root {
  --vh: 100svh;
  --hair: rgba(255,255,255,0.1);
  --pink: #FF4D9D;
  --ink: #F2F1EE;
  --mute: #A5A5A9;
  --ease: cubic-bezier(.33,0,.2,1);
  --pad: clamp(20px, 3vw, 44px);
}
html, body { scroll-snap-type: y mandatory; }
body { margin: 0; background: #08080A; color: var(--ink); font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font: inherit; color: inherit; }

.t-h { margin: 0; font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 200; font-size: clamp(32px, 5vw, 86px); line-height: 1; letter-spacing: -0.042em; max-width: 15ch; text-wrap: balance; }
.t-sub { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: #DAD9D6; max-width: 46ch; font-weight: 300; text-wrap: pretty; }
.t-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 52ch; text-wrap: pretty; }
.t-num { font-family: Archivo, Arial, sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.08em; color: var(--pink); }

.lock { height: var(--vh); box-sizing: border-box; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }

.btn { position: relative; overflow: hidden; z-index: 0; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 30px; font-size: 16px; border: 1px solid rgba(255,255,255,0.34); color: var(--ink); transition: color 460ms var(--ease), border-color 460ms var(--ease), opacity 460ms var(--ease); cursor: pointer; }
.btn > * { position: relative; z-index: 2; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--pink); transform: translate3d(0,101%,0); transition: transform 620ms var(--ease); }
.btn:hover::before { transform: translate3d(0,0,0); }
.btn:hover { color: #08080A; border-color: var(--pink); }
.btn svg { transition: transform 520ms var(--ease); }
.btn:hover svg { transform: translate3d(4px,-4px,0); }
.btn-fill { background: var(--ink); border-color: var(--ink); color: #08080A; }
.btn-off { opacity: 0.3; cursor: not-allowed; }
.btn-off::before { display: none; }
.btn-off:hover { color: var(--ink); border-color: rgba(255,255,255,0.34); }

.nav-link { position: relative; padding-bottom: 3px; font-size: 14px; transition: color 420ms var(--ease); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--ease); }
.nav-link:hover { color: var(--pink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.fld { display: flex; flex-direction: column; gap: 10px; }
.fld label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8D8D92; }
.fld input, .fld textarea { background: #101014; border: 1px solid rgba(255,255,255,0.16); padding: 16px 18px; font-size: 17px; font-weight: 300; min-height: 56px; box-sizing: border-box; width: 100%; transition: border-color 420ms var(--ease), background-color 420ms var(--ease); }
.fld input::placeholder, .fld textarea::placeholder { color: #5E5E65; }
.fld input:hover, .fld textarea:hover { border-color: rgba(255,255,255,0.3); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--pink); background: #14141A; }
.fld textarea { min-height: 150px; resize: none; line-height: 1.5; }

.opt { cursor: pointer; text-align: left; min-height: 56px; padding: 15px 20px; background: #101014; border: 1px solid rgba(255,255,255,0.16); font-size: 17px; font-weight: 300; transition: background-color 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease); }
.opt:hover { border-color: var(--pink); color: var(--pink); }

.step-in { animation: stepIn 620ms var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: none; } }

.kb { animation: kb 34s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; }
.kb-b { animation-name: kb2; animation-duration: 40s; }
.kb-c { animation-name: kb3; animation-duration: 37s; }
@keyframes kb  { 0% { transform: scale(1.05) translate3d(0,0,0); } 50% { transform: scale(1.15) translate3d(-1.4%,-1.1%,0); } 100% { transform: scale(1.05) translate3d(0,0,0); } }
@keyframes kb2 { 0% { transform: scale(1.14) translate3d(1.3%,0.8%,0); } 50% { transform: scale(1.04) translate3d(0,0,0); } 100% { transform: scale(1.14) translate3d(1.3%,0.8%,0); } }
@keyframes kb3 { 0% { transform: scale(1.06) translate3d(-1.1%,0.6%,0); } 50% { transform: scale(1.16) translate3d(1.1%,-0.8%,0); } 100% { transform: scale(1.06) translate3d(-1.1%,0.6%,0); } }

.px { position: absolute; inset: -7% 0; overflow: hidden; }
@keyframes px { from { transform: translate3d(0,-6%,0); } to { transform: translate3d(0,6%,0); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0,30px,0); } to { opacity: 1; transform: none; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.foot-grid { display: grid; gap: 32px clamp(32px, 4vw, 72px); grid-template-columns: repeat(4, 1fr); align-items: start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hair); margin-left: -1px; color: #B9B8B5; transition: background-color 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease); }
.soc:first-child { margin-left: 0; }
.soc:hover { background: var(--pink); border-color: var(--pink); color: #08080A; }

@supports (animation-timeline: view()) {
  .px   { animation: px linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .rise { animation: rise var(--ease) both; animation-timeline: view(); animation-range: entry 14% cover 40%; }
  .prog { animation: bar linear both; animation-timeline: scroll(root); }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-snap-type: none; }
  .px, .rise, .prog, .kb, .step-in { animation: none !important; }
}

/* ---- wizard ---- */
.wiz-step { display: flex; flex-direction: column; gap: 18px; animation: stepIn 620ms var(--ease) both; }
.wiz-step[hidden] { display: none; }
.wiz-bar { height: 2px; flex: 1; background: rgba(255,255,255,0.14); transition: background-color 560ms var(--ease); }
.wiz-bar.on { background: var(--pink); }
.opt.on { background: #F2F1EE; color: #08080A; border-color: #F2F1EE; }
@keyframes stepIn { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: none; } }