:root{
  --blue:#0a6ea8;
  --blue-dark:#075d8f;
  --orange:#ff9800;
  --green:#1aa34a;
  --purple:#9c27b0;
  --gray:#666;
  --white:#ffffff;
}

a:link,
a:visited {
  color:var(--blue);
  /* font: 14px/1.4 Arial, Helvetica, sans-serif; */
  text-decoration: none; /* underline none */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:#222;
}

/* HEADER */
header{
  background:var(--blue);
  color:#fff;
}
.header-inner{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}

header a,
header a:link,
header a:visited,
header a:hover,
header a:active,
header a:focus {
  color: #ffffff;
  text-decoration: none;
}

.logo{
  font-size:28px;
  font-weight:bold;
  letter-spacing:1px;
}
.header-form{
  display:flex;
  gap:6px;
  margin-left:auto;
}
.header-form input{
  padding:10px;
  border-radius:4px;
  border:none;
  min-width:260px;
}
.header-form button{
  background:var(--orange);
  border:none;
  font-size:20px;
  color:#fff;
  font-weight:bold;
  padding:10px 16px;
  border-radius:4px;
  cursor:pointer;
}
.top-links{
  font-size:18px;
  margin-left:20px;
  white-space:nowrap;
}

/* HERO */
.hero{
  text-align:center;
  padding:40px 20px 10px;
}
.hero h1{
  color:var(--blue-dark);
  font-size:26px;
  margin-bottom:6px;
}
.hero h2{
  color:var(--blue-dark);
  font-size:20px;
  font-weight:normal;
  margin-top:0;
}

/* FEATURES */
.features{
  max-width:900px;
  margin:30px auto 10px;
}
.feature{
  display:flex;
  gap:14px;
  margin:22px 0;
}
.feature strong{
  font-size:20px;
}
.feature p{
  margin:4px 0 0;
  color:var(--gray);
}
.feature.tickets strong{color:var(--orange)}
.feature.files strong{color:var(--green)}
.feature.crm strong{color:var(--purple)}

/* MAIN SCREENSHOT */
.board-shot{
  max-width:1200px;
  margin:30px auto;
  padding:0 20px;
}
.board-shot img{
  width:100%;
  border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* LOWER SCREENSHOTS */
.subshots{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.subshots img{
  width:100%;
  border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* FOOTER */
footer{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:18px 10px;
  font-size:14px;
}


footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:active,
footer a:focus {
  color: #ffffff;
  text-decoration: none;
  margin: 0 6px;
}

@media(max-width:900px){
  .subshots{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap}
  .header-form{width:100%; margin-left:0}
  .header-form input{flex:1}
}