/* Home — лендинг. Общее (btn, icon) из ui.css. */

.home{max-width:960px}

/* ── hero ── */
.hero{text-align:center;padding:2.5rem 0 3.5rem}
.logo{
  font-size:3.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.logo .dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--violet);margin-left:2px;vertical-align:super;
  box-shadow:0 0 20px var(--focus);
  animation:pulse 2.4s ease-in-out infinite;
}
.hero-title{
  margin-top:1.5rem;font-size:2.1rem;font-weight:700;letter-spacing:-.03em;
  color:var(--text);line-height:1.15;
}
.hero-sub{
  max-width:560px;margin:1rem auto 0;font-size:1rem;font-weight:300;
  color:var(--text-dim);line-height:1.6;
}
.hero-cta{
  margin-top:2rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;
}
.hero-cta .btn{
  width:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;
}

/* ── features ── */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;
}
.feature{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.6rem;
  text-decoration:none;color:inherit;transition:border-color .25s;
}
.feature:hover{border-color:var(--accent-border-2)}
.feature-icon{
  display:inline-flex;color:var(--violet-lite);
  width:44px;height:44px;align-items:center;justify-content:center;
  background:var(--accent-soft);border-radius:12px;
}
.feature-icon .icon{width:22px;height:22px;stroke-width:1.75}
.feature-name{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.feature-desc{font-size:.86rem;color:var(--text-dim);font-weight:300;line-height:1.55;flex:1}
.feature-link{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;
  font-size:.82rem;font-weight:600;color:var(--violet-lite);
}
.feature:hover .feature-link{gap:.55rem;transition:gap .2s}

/* ── highlights ── */
.highlights{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.5rem;
}
.hl{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;color:var(--text-dim);
  padding:.5rem .9rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);
}
.hl .icon{color:var(--violet-lite)}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}

@media (max-width:560px){
  .hero-title{font-size:1.7rem}
  .logo{font-size:2.8rem}
}