* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:#f5f3ef;
  color:#252725;
  font-family:Arial,Helvetica,sans-serif;
  min-height:100svh;
}
body:before {
  content:'';
  position:fixed;
  width:400px;
  height:400px;
  border:1px solid #e4dfd6;
  border-radius:50%;
  left:calc(50% - 200px);
  top:-245px;
  pointer-events:none;
}
main {
  max-width:470px;
  margin:auto;
  padding:42px 24px 30px;
}
.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:#62635c;
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#e87936;
  margin-right:6px;
}
.brand {
  text-align:center;
  padding:48px 0 24px;
  animation:brand .8s both;
}
.mark {
  width:60px;
  height:60px;
  margin:0 auto 19px;
  display:grid;
  place-items:center;
  background:#ef783b;
  border-radius:18px;
  transform:rotate(-7deg);
  box-shadow:0 10px 30px #ed783b25;
}
.mark svg {
  width:35px;
  stroke:#fff;
  fill:none;
  stroke-width:1.5;
}
h1 {
  font-size:61px;
  letter-spacing:-4px;
  margin:0;
  font-weight:800;
}
h1 span {
  color:#ec7537;
}
.tag {
  font-size:11px;
  letter-spacing:3px;
  color:#66675f;
  margin-top:8px;
}
.intro {
  text-align:center;
  animation:enter .7s .65s both;
}
.intro h2 {
  font-size:25px;
  letter-spacing:-.8px;
  margin:22px 0 9px;
}
.intro p {
  font-size:14px;
  line-height:1.6;
  color:#62635c;
  margin:0 auto 28px;
  max-width:300px;
}
.links {
  display:grid;
  gap:12px;
}
.link {
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
  color:inherit;
  background:#fffefa;
  border:1px solid #e9e4dc;
  border-radius:18px;
  padding:18px 19px;
  animation:enter .65s both;
  transition:transform .2s,box-shadow .2s;
}
.link:nth-child(1) {
  animation-delay:.85s;
  background:#b54d1d;
  color:white;
  border-color:#b54d1d;
}
.link:nth-child(2) {
  animation-delay:.98s;
}
.link:nth-child(3) {
  animation-delay:1.11s;
}
.link:nth-child(4) {
  animation-delay:1.24s;
}
.link:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 25px #352b2110;
}
.icon {
  width:28px;
  flex:none;
  font-size:24px;
  text-align:center;
}
.text {
  flex:1;
}
.text strong {
  display:block;
  font-size:16px;
}
.text small {
  display:block;
  font-size:12px;
  opacity:.65;
  margin-top:5px;
}
.arrow {
  font-size:21px;
  font-weight:400;
  opacity:.7;
}
.footer {
  text-align:center;
  color:#66675f;
  font-size:11px;
  line-height:1.8;
  margin-top:32px;
  animation:enter .6s 1.4s both;
}
.footer b {
  font-weight:500;
  color:#50544b;
}
.line {
  width:28px;
  height:2px;
  background:#ee783b;
  margin:0 auto 17px;
}
@keyframes brand {
  from {
    opacity:0;
    transform:scale(.87);
  }
  to {
    opacity:1;
    transform:scale(1);
  }
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(15px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
a:focus-visible {
  outline:3px solid #262e2c;
  outline-offset:4px;
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
  }
}
@media(max-height:760px) {
  main {
    padding-top:24px;
  }
  .brand {
    padding-top:28px;
  }
  .intro h2 {
    margin-top:12px;
  }
  .footer {
    margin-top:25px;
  }
}

.link:first-child small {
  opacity: 1;
}

@media (hover: none) {
  .link:hover {
    transform: none;
    box-shadow: none;
  }
}