@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700&display=swap');

:root{
  --bg:#ffffff;
  --fg:#0f1720;
  --muted:#6b7a90;
  --primary:#205cf4;
  --primary-2:#1b4fd3;
  --rule:#e7ebf0;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:'Rubik',sans-serif;
  background:var(--bg);
  color:var(--fg);
  margin:0;
  line-height:1.55;
}

h1{
  margin:0 0 28px 0;
  color:#ffffff;
  font-weight:700;
  font-size:clamp(34px,4.8vw,56px);
  line-height:1.15;
  text-align:center;
  padding:56px 24px 64px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
  width:100vw;
  margin-left:calc(50% - 50vw);
}

body > *:not(h1){
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}

h2{
  color:var(--fg);
  font-size:clamp(24px,2.6vw,32px);
  font-weight:700;
  text-align:center;
  margin:10px 0 24px;
}

ul{margin:0 0 22px 0;padding:0;list-style:none}

ul > li{
  margin:28px 0 12px 0;
  color:var(--primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:15px;
}

ul > li > ul{
  margin-top:10px;
  padding-left:0;
  text-transform:none;
  letter-spacing:normal;
  border-top:1px solid var(--rule);
}

ul > li > ul > li{
  margin:0;
  border-bottom:1px solid var(--rule);
}

ul > li > ul > li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 2px;
  text-decoration:none;
  color:var(--fg);
  font-weight:700;
}

ul > li > ul > li a::after{
  content:'→';
  margin-left:auto;
  font-weight:700;
  color:var(--primary);
  opacity:.0;
  transform:translateX(-6px);
  transition:transform .15s ease,opacity .15s ease,color .15s ease;
}

ul > li > ul > li a:hover{
  color:var(--primary);
}

ul > li > ul > li a:hover::after{
  opacity:1;
  transform:translateX(0);
}

ul > li > ul > li a:visited{color:var(--fg)}

@media (max-width:520px){
  h1{padding:44px 18px 52px;font-size:32px}
  body > *:not(h1){padding-left:18px;padding-right:18px}
}