:root {
  --pink:#ff3f78;
  --pink2:#ff6c9d;
  --ink:#171419;
  --muted:#6f6971;
  --line:rgba(20,20,20,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f7f7f7;color:var(--ink)}
body{min-height:100dvh}
.page{
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  background-image:url("../images/image_01.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 55%,rgba(0,0,0,.28) 100%);
  pointer-events:none;
}
.wrap{
  position:relative;
  z-index:2;
  min-height:100dvh;
  width:min(520px,100%);
  margin:0 auto;
  padding:18px 18px 26px;
  display:flex;
  flex-direction:column;
}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo{
  font-size:29px;
  font-weight:950;
  letter-spacing:-1.3px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.logo span{color:var(--pink)}
.age{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.85);
  color:#fff;
  font-size:13px;
  font-weight:900;
  background:rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
}
.progress{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  overflow:hidden;
  margin-top:18px;
}
.progress i{
  display:block;
  width:42%;
  height:100%;
  background:linear-gradient(90deg,var(--pink),var(--pink2));
  border-radius:999px;
}
.content{
  margin-top:auto;
}
.panel{
  padding-top:20px;
}
h1{
  margin:0 0 16px;
  color:#fff;
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.8px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.options{
  display:grid;
  gap:12px;
}
.option{
  width:100%;
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:16px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.15);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.option:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 30px rgba(0,0,0,.19);
  border-color:var(--pink);
}
.option:active{transform:scale(.985)}
.left{
  display:flex;
  align-items:center;
  gap:12px;
}
.ico{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff0f5;
  color:var(--pink);
  font-size:21px;
  flex:none;
}
.arrow{
  font-size:27px;
  line-height:1;
  color:var(--pink);
}
.safe{
  margin-top:16px;
  text-align:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
@media(min-width:760px){
  .wrap{width:min(560px,100%);padding:22px 22px 34px}
  h1{font-size:38px}
  .option{font-size:17px;padding:16px 18px}
}