:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --ink:#15171a;
  --muted:#7b818b;
  --line:#e4e7eb;
  --blue:#2057f4;
  --green:#23823b;
  --lime:#719b00;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

body{
  min-height:100vh;
}

.page{
  width:min(920px,calc(100% - 36px));
  margin:0 auto;
  padding:36px 0 28px;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:34px;
  height:34px;
  border:1px solid #d8dde3;
  border-radius:9px;
  background:#fff;
  display:grid;
  place-items:center;
}

.brand-mark span{
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--blue);
  box-shadow:8px 8px 0 #1d1f22;
  transform:translate(-4px,-4px);
}

.brand-name{
  font-size:14px;
  font-weight:800;
  letter-spacing:.05em;
}

.brand-sub{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.count{
  color:var(--muted);
  font-size:11px;
  border:1px solid var(--line);
  background:#fff;
  padding:7px 10px;
  border-radius:999px;
}

.intro{
  padding:58px 0 34px;
}

.eyebrow{
  margin:0 0 10px;
  color:#9aa1ab;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

.intro h1{
  margin:0;
  font-size:44px;
  line-height:1;
  letter-spacing:-.045em;
  font-weight:750;
}

.intro-text{
  margin:14px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.menu{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}

.menu-item{
  min-height:90px;
  display:grid;
  grid-template-columns:48px 1fr auto 34px;
  align-items:center;
  gap:16px;
  padding:0 22px;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--line);
  transition:background .16s ease;
}

.menu-item:last-child{
  border-bottom:none;
}

.menu-item:hover{
  background:#fafbfc;
}

.menu-index{
  color:#afb5bd;
  font-size:11px;
  font-weight:700;
}

.menu-main{
  min-width:0;
}

.menu-title{
  font-size:18px;
  font-weight:750;
  letter-spacing:-.02em;
}

.menu-desc{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.menu-tag{
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  padding:6px 8px;
  border-radius:7px;
  white-space:nowrap;
}

.menu-tag.blue{
  color:var(--blue);
  background:#eef3ff;
}

.menu-tag.green{
  color:var(--green);
  background:#edf7ef;
}

.menu-tag.lime{
  color:var(--lime);
  background:#f3f7e8;
}

.menu-arrow{
  color:#adb3bb;
  font-size:20px;
  transition:transform .16s ease,color .16s ease;
}

.menu-item:hover .menu-arrow{
  transform:translateX(3px);
  color:#15171a;
}

.footer{
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  color:#a0a6ae;
  font-size:10px;
  letter-spacing:.05em;
}

@media(max-width:640px){
  .page{
    width:min(100% - 22px,920px);
    padding-top:18px;
  }

  .intro{
    padding:40px 0 26px;
  }

  .intro h1{
    font-size:34px;
  }

  .menu-item{
    grid-template-columns:34px 1fr 28px;
    padding:0 14px;
  }

  .menu-tag{
    display:none;
  }

  .menu-title{
    font-size:16px;
  }
}