/* ---- core reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
  color: #1d1d1f;
  background: #fcfcfd;
}
a { color: #0969da; text-decoration: none; }

.container { max-width: 1200px; padding: 0 1rem; margin: auto; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ---- header ---- */
.logo-group { display: flex; align-items: center; }
.logo { width: 188px; }
.brand { font-size: 1.5rem; font-weight: 600; display: none; }
.contact-link { font-weight: 600; }

/* ---- hero ---- */
.hero { text-align: center; padding: 4rem 1rem 3rem; }
.hero h1 { font-size: clamp(1.9rem, 3.5vw, 3rem); margin: 0 0 1rem; font-weight: 600; }
.gradient {
  background: linear-gradient(90deg,#0066d6,#15c269);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitle { font-size: 1.125rem; margin-bottom: 2rem; color: #555; }

/* ---- buttons ---- */
.primary-btn {
  display: inline-block; padding: .75rem 1.5rem; border-radius: 6px;
  background: linear-gradient(90deg,#0066d6 0%,#15c269 100%);
  color: #fff; font-weight: 600; transition: opacity .2s ease;
}
.primary-btn:hover { opacity: .9; }

/* ---- benefits ---- */
.benefits {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  padding: 2rem 0 3rem;
}
.benefit {
  margin-left: 1rem;   /* left-right whitespace */
  margin-right: 1rem;
}
.benefit h3 { margin: 0 0 .5rem; font-size: 1.25rem; }

/* ---- trial section ---- */
.trial-section {
  text-align: center; padding: 3rem 0 4rem;
  background: #f5f7fa; border-top: 1px solid #e6e8ec; border-bottom: 1px solid #e6e8ec;
}
.trial-section h2 { margin-bottom: .5rem; font-size: 1.75rem; }

.trial-form {
  display: flex;
  flex-direction: column;   /* vertical layout */
  align-items: center;
  max-width: 420px;         /* optional: narrower column */
  margin: 1.5rem auto 0;
  gap: 0.75rem;
}
.trial-form label { display:none; }     /* visually hidden but keeps semantics */
.trial-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #cdd1d6;
  border-radius: 6px;
}
.trial-form .primary-btn {
  width: 100%;              /* button spans full width */
}

/* ---- footer ---- */
.footer { padding: 2rem 0 3rem; text-align: center; font-size: .875rem; color: #666; }

@media (max-width: 600px){
  .benefit h3{ font-size:1.125rem; }
}