:root{
  --brand-red:#d92231;
  --brand-red-dark:#c31f2d;
  --text:#111;
  --muted:#666;
  --border:#d9d9d9;
  --bg:#fff;
  --card-bg:#fff;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --container:1200px;
  --radius:0;
  --font: Inter, Roboto, "Segoe UI", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font)}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{
  outline:3px solid rgba(217,34,49,.35);
  outline-offset:3px;
}

.site-header{
  height:74px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}

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

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:32px;
  letter-spacing:-.5px;
  color:var(--brand-red);
  line-height:1;
  user-select:none;
}

.logo-img{
  display:block;
  width:auto;
  height:38px;
  max-width:100%;
}

.hero{
  background:var(--brand-red);
  color:#fff;
  padding:24px 0 26px;
  text-align:center;
}

.hero h1{
  margin:0;
  font-size:44px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.8px;
}

main{
  padding:26px 0 34px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px 22px;
  align-items:stretch;
}

.card{
  min-height:210px;
  border:1px solid var(--border);
  background:var(--card-bg);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.card:hover{
  transform:translateY(-2px);
  border-color:#c8c8c8;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.card-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:100%;
}

.icon-wrap{
  width:82px;
  height:82px;
  border-radius:50%;
  background:#3c3c3c;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.download-icon{
  width:40px;
  height:40px;
  color:#fff;
  display:block;
}

.card-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  color:#111;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:currentColor;
  transition:color .15s ease, text-decoration-color .15s ease;
}

.card-title span{
  display:inline;
}

.card:hover .card-title,
.card-title:hover,
.card-title:focus-visible{
  color:var(--brand-red);
  text-decoration-color:var(--brand-red);
}

.footer{
  padding:30px 0 20px;
  text-align:center;
  color:#555;
  font-size:12px;
  line-height:1.6;
  border-top:0;
}

@media (max-width: 980px){
  .hero h1{font-size:36px}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .container{width:min(var(--container), calc(100% - 32px))}
}

@media (max-width: 640px){
  .site-header{height:64px}
  .logo{font-size:26px}
  .logo-img{height:32px}
  .hero{padding:20px 0}
  .hero h1{font-size:28px}
  .grid{grid-template-columns:1fr; gap:16px}
  .card{min-height:190px}
}