:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#aeb8c6;        /* чуть светлее для читабельности */
  --text:#e6eef8;
  --accent-a:#6dd3f5;
  --accent-b:#6a8cff;
  --glass:rgba(255,255,255,0.06);
  --radius:12px;
  --container:1100px;
  --content-width:720px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#071028);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--container);margin:0 auto;padding:1.25rem}

/* ---------- Links & focus (fix "links only by color") ---------- */
a{
  color:var(--accent-a);
  text-decoration:underline;
  text-underline-offset:0.18em;
  text-decoration-thickness:2px;
}

a:hover{opacity:.95}
a:focus-visible{
  outline:3px solid rgba(109,211,245,.9);
  outline-offset:3px;
  border-radius:8px;
}

/* кнопки и навигация — без подчёркивания, но с явным hover/focus */
.logo,
.nav a,
.btn{
  text-decoration:none;
}

/* ---------- Header ---------- */
.site-header{
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header .container{display:flex;align-items:center;justify-content:space-between}

.logo{
  font-weight:700;
  color:var(--accent-b);
}
.logo:hover,
.logo:focus-visible{
  text-decoration:underline;
}

.nav a{
  color:#d2dbea; /* делаем навигацию более читаемой */
  margin-left:1rem;
  font-size:.95rem;
  padding:.25rem .35rem;
  border-radius:8px;
}
.nav a:hover,
.nav a:focus-visible{
  background:rgba(255,255,255,0.06); /* не только цвет */
}

/* ---------- Hero ---------- */
.hero{padding:2rem 0}
.hero-grid{
  display:grid;
  grid-template-columns:var(--content-width) minmax(160px,280px);
  gap:.75rem;
  align-items:center;
}

.hero-text{max-width:var(--content-width);margin:0}
.hero-text h1{font-size:2rem;margin:0 0 .5rem}

.lead{color:var(--muted);margin:0 0 .6rem}

.actions .btn{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:10px;
  font-weight:700;
}

.btn.primary{
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:#041025;
  box-shadow:0 6px 18px rgba(106,140,255,0.18);
}

.btn.ghost{
  border:1px solid rgba(255,255,255,0.14);  /* контрастнее */
  color:var(--text);                         /* чтобы не было complaints */
  margin-left:.75rem;
  background:transparent;
}
.btn.ghost:hover,
.btn.ghost:focus-visible{
  background:rgba(255,255,255,0.06);
}

.hero-visual{display:flex;justify-content:flex-end}
.hero-img,
.bot-svg{
  width:100%;
  max-width:220px;
  border-radius:16px;
  box-shadow:0 20px 48px rgba(19,30,58,0.6);
  display:block;
}

.bot-svg{transition:transform .5s;transform:translateY(0)}
.hero-visual:hover .bot-svg{transform:translateY(-6px)}

/* ---------- Sections / Cards ---------- */
.section{padding:1.5rem 0}
.section-title{margin:0 0 1rem;font-size:1.25rem}

#features{padding-top:1rem;padding-bottom:1rem}

.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  width:100%;
  margin:0;
  align-items:stretch;
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
  padding:1rem;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(2,6,23,0.6);
}

.features .card{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:.95rem;
}

.card h3{margin:.5rem 0}
.card p{
  color:var(--muted);
  margin:0;
  flex:1;
}

.icon{width:36px;height:36px;color:var(--accent-b)}

/* ---------- How ---------- */
.how .card{
  padding:1.25rem;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(6,12,24,0.88),rgba(8,14,28,0.84));
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
  position:relative;
  z-index:1;
}

.how .card .steps{padding-left:1.25rem;color:var(--text);margin:0}
.how .card .steps li{margin-bottom:.5rem}

/* ---------- Contact: links should be underlined (fix color-only) ---------- */
.contact a{
  color:var(--accent-a);
  text-decoration:underline;
}

/* ---------- Footer ---------- */
.site-footer{
  padding:1.25rem 0;
  text-align:center;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ---------- Accessible "visually hidden" helpers ---------- */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Hide checkbox visually but keep accessible */
.nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.nav-btn{
  display:none;
  width:40px;
  height:40px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.10);
  cursor:pointer;
}

.nav-btn:hover{background:rgba(255,255,255,0.06)}
.nav-toggle:focus + .nav-btn{
  outline:3px solid rgba(109,211,245,.9);
  outline-offset:3px;
}

.nav-btn span,
.nav-btn span::before,
.nav-btn span::after{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  position:relative;
}
.nav-btn span::before,
.nav-btn span::after{
  content:"";
  position:absolute;
  left:0;
}
.nav-btn span::before{top:-6px}
.nav-btn span::after{top:6px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}

  .nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:linear-gradient(180deg,rgba(6,12,24,0.97),rgba(8,14,28,0.97));
    display:flex;
    flex-direction:column;
    padding:1rem;
    gap:.5rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s,transform .18s;
  }

  .nav a{
    margin-left:0;
    padding:.6rem;
    border-radius:8px;
  }

  .nav-toggle:checked + .nav-btn + .nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-btn{display:flex}
  .logo{font-size:1rem}
  .container{padding:1rem}
  .hero{padding:2.25rem 0}
  .card{padding:1rem}
}

@media (max-width:700px){
  .features{gap:.75rem}
}

@media (prefers-reduced-motion:reduce){
  .bot-svg{transition:none}
}