/* Vitality Rich — self-hosted Typeform-style form engine. Premium, brand-matched, mobile-first. */
:root{
  --ink-0:#000;--ink-1:#0a0a0b;--ink-2:#111113;--ink-3:#17171a;--ink-4:#1e1e22;
  --line:#2d2d33;--line-soft:#1f1f24;
  --bone:#f4efe4;--bone-dim:#d8d2c3;--fog:#8a8680;--smoke:#5a5854;
  --gold:#3ddc84;--gold-hot:#5be89a;--gold-deep:#1fa35e;--gold-ink:#041a0d;
  --blood:#c8302a;
  --f-body:'Archivo',system-ui,-apple-system,sans-serif;
  --f-disp:'Archivo Narrow',var(--f-body);
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --glow:0 0 0 1px rgba(61,220,132,.0),0 8px 40px -8px rgba(61,220,132,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100%;min-height:100dvh;
  background:var(--ink-1);color:var(--bone);font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ambient backdrop: grid + a soft green glow bloom top-left, vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(40px,8vw,72px) clamp(40px,8vw,72px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 30%,transparent 90%);
  mask-image:radial-gradient(120% 100% at 50% 0,#000 30%,transparent 90%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 50% at 12% 0,rgba(61,220,132,.10),transparent 70%),
    radial-gradient(80% 60% at 100% 100%,rgba(31,163,94,.06),transparent 70%);
}

/* progress bar */
#vrf-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:30;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hot));
  box-shadow:0 0 12px rgba(61,220,132,.7);
  transition:width .45s cubic-bezier(.4,0,.2,1)}

/* top bar */
.vrf-top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.5vw,20px) clamp(16px,4vw,26px);z-index:20}
.vrf-brand{font-family:var(--f-disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(14px,2vw,16px);color:var(--bone)}
.vrf-brand b{color:var(--gold)}
.vrf-back{appearance:none;background:rgba(17,17,19,.6);backdrop-filter:blur(6px);border:1px solid var(--line);
  color:var(--fog);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border-radius:8px;cursor:pointer;opacity:0;pointer-events:none;transition:.2s}
.vrf-back.show{opacity:1;pointer-events:auto}
.vrf-back:hover{border-color:var(--gold);color:var(--bone);transform:translateX(-2px)}

/* stage */
.vrf-stage{position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;
  padding:clamp(72px,14vh,120px) 0 clamp(40px,8vh,72px)}
.vrf-wrap{width:100%;max-width:700px;margin:0 auto;padding:0 clamp(22px,6vw,34px)}
.vrf-slide{display:none}
.vrf-slide.active{display:block;animation:vrfIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes vrfIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.vrf-eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.vrf-eyebrow span:first-child{position:relative}
.vrf-q{font-family:var(--f-disp);font-weight:600;font-size:clamp(27px,5.2vw,44px);line-height:1.1;
  letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance}
.vrf-q .req{color:var(--gold);font-size:.42em;vertical-align:super;margin-left:5px;opacity:.8}
.vrf-help{color:var(--fog);font-size:clamp(14px,1.8vw,16px);margin-bottom:30px;line-height:1.55;max-width:46ch}

/* inputs */
.vrf-input,.vrf-textarea{
  width:100%;background:transparent;border:none;border-bottom:2px solid var(--line);
  color:var(--bone);font-family:var(--f-body);font-size:clamp(20px,3.4vw,27px);font-weight:500;
  padding:12px 2px;caret-color:var(--gold);outline:none;transition:border-color .25s,box-shadow .25s}
.vrf-input::placeholder,.vrf-textarea::placeholder{color:var(--smoke);font-weight:400}
.vrf-input:focus,.vrf-textarea:focus{border-color:var(--gold);box-shadow:0 2px 16px -10px var(--gold)}
.vrf-textarea{resize:none;line-height:1.45;min-height:48px;overflow:hidden}
/* kill number spinners */
.vrf-input[type=number]::-webkit-inner-spin-button,.vrf-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vrf-input[type=number]{-moz-appearance:textfield}

/* choice buttons (yes/no) */
.vrf-choices{display:flex;flex-direction:column;gap:12px;max-width:440px}
.vrf-choice{display:flex;align-items:center;gap:14px;text-align:left;background:var(--ink-2);
  border:1.5px solid var(--line);color:var(--bone);font-family:var(--f-body);font-weight:500;
  font-size:clamp(17px,2.4vw,19px);padding:16px 18px;border-radius:12px;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s}
.vrf-choice .key{font-family:var(--f-mono);font-size:13px;border:1px solid var(--line);border-radius:6px;
  padding:3px 9px;color:var(--fog);transition:.15s;flex:none}
.vrf-choice:hover,.vrf-choice.sel{border-color:var(--gold);background:rgba(61,220,132,.09);transform:translateY(-1px)}
.vrf-choice:active{transform:translateY(0)}
.vrf-choice:hover .key,.vrf-choice.sel .key{color:var(--gold);border-color:var(--gold)}

/* scale 1-10 */
.vrf-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-bottom:12px;max-width:640px}
.vrf-scale button{aspect-ratio:1;width:100%;background:var(--ink-2);border:1.5px solid var(--line);
  color:var(--bone);font-family:var(--f-mono);font-size:clamp(14px,2vw,18px);border-radius:10px;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s,color .15s}
.vrf-scale button:hover,.vrf-scale button.sel{border-color:var(--gold);background:rgba(61,220,132,.14);
  color:var(--gold);transform:translateY(-2px)}
.vrf-scale button:active{transform:translateY(0)}
.vrf-scale-labels{display:flex;justify-content:space-between;max-width:640px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog)}

/* footer / ok */
.vrf-foot{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.vrf-ok{appearance:none;background:var(--gold);color:var(--gold-ink);border:none;font-family:var(--f-body);
  font-weight:700;font-size:clamp(16px,2.2vw,18px);padding:14px 28px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;box-shadow:var(--glow);
  transition:transform .14s,background .15s,box-shadow .2s}
.vrf-ok:hover{background:var(--gold-hot);transform:translateY(-2px);box-shadow:0 12px 44px -8px rgba(61,220,132,.6)}
.vrf-ok:active{transform:translateY(0)}
.vrf-ok .kbd{font-family:var(--f-mono);font-size:12px;opacity:.65}
.vrf-hint{font-family:var(--f-mono);font-size:12px;color:var(--fog);letter-spacing:.03em}
.vrf-hint b{color:var(--bone-dim);font-weight:500}
.vrf-err{color:var(--blood);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;margin-top:16px;min-height:14px}

/* welcome + done screens */
.vrf-center{text-align:center}
.vrf-center .vrf-help{margin-left:auto;margin-right:auto}
.vrf-center .vrf-q{margin-bottom:20px}
.vrf-center .vrf-foot{justify-content:center}
.vrf-big{font-size:clamp(38px,8vw,64px);line-height:1.02}
.vrf-tick{width:64px;height:64px;margin:0 auto 24px;border-radius:50%;background:rgba(61,220,132,.12);
  border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-size:30px;
  box-shadow:var(--glow);animation:vrfPop .5s cubic-bezier(.16,1.4,.4,1)}
@keyframes vrfPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.vrf-spin{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;
  animation:vrfSpin .7s linear infinite;margin:0 auto}
@keyframes vrfSpin{to{transform:rotate(360deg)}}

/* honeypot */
.vrf-hp{position:absolute!important;left:-9999px;top:-9999px;height:0;width:0;opacity:0}

/* ---- mobile ---- */
@media(max-width:600px){
  .vrf-stage{align-items:flex-start;padding-top:84px}
  .vrf-foot{gap:14px}
  .vrf-ok{flex:1 1 auto;justify-content:center}
  .vrf-scale{gap:6px}
  .vrf-choices{max-width:none}
}
@media(max-width:380px){
  .vrf-scale{grid-template-columns:repeat(5,1fr)}
  .vrf-scale-labels{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.05ms!important}
}