@font-face{
  font-family:"SknSerif";
  src:local("Times New Roman");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"SknSerif";
  src:local("Times New Roman Bold"), local("Times New Roman");
  font-weight:700;
  font-style:normal;
}

:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --muted:#6b6b6b;
  --line:#d9d9d9;
  --panel:#f4f4f4;

  --container:1100px;
  --radius:16px;
  --shadow:0 18px 55px rgba(0,0,0,.10);
  --shadow2:0 26px 78px rgba(0,0,0,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"SknSerif", ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.skip{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 14px;
  background:var(--panel);
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  transform:translateY(-150%);
  transition:transform .2s ease;
}
.skip:focus{transform:translateY(0);}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}

.header{
  padding:56px 0 28px;
}
.brand{
  text-align:center;
}
.brand__name{
  font-weight:700;
  font-size:22px;
  letter-spacing:.22em;
}
.brand__tag{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

.main{padding-bottom:88px;}

.hero{padding:22px 0 44px;}
.hero__inner{text-align:center;}
.hero__title{
  margin:0;
  font-size:44px;
  font-weight:700;
  letter-spacing:.08em;
}
.rule{
  width:120px;
  height:1px;
  background:var(--line);
  margin:18px auto 0;
}

.divider{
  height:1px;
  background:var(--line);
  margin:26px 0;
}

.services{padding:10px 0;}
.services__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:22px;
  padding:10px 0;
}

.card{
  grid-column:span 6;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 30px 28px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  min-height:240px;
}

.card__title{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
}
.card__desc{
  margin:14px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.card__list{
  margin:18px 0 0;
  padding-left:18px;
  color:var(--ink);
  font-size:14px;
  line-height:1.9;
}
.card__list li{margin:2px 0;}

.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#cfcfcf;
}
.card:focus-within{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#cfcfcf;
}

.bottom{padding:44px 0 0;}
.bottom__inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.bottom__statement{
  margin:0;
  font-size:18px;
  color:var(--ink);
  letter-spacing:.06em;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  background:var(--ink);
  color:#ffffff;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:#ffffff;
  color:var(--ink);
}
.btn:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

@media (max-width: 900px){
  .hero__title{font-size:38px;}
  .card{grid-column:span 12;}
}

@media (max-width: 520px){
  .header{padding:44px 0 22px;}
  .hero{padding:18px 0 34px;}
  .hero__title{font-size:32px;}
  .card{padding:24px 22px;}
}