/* css/style.css - Чёрно‑белая минималистика для Кракен маркетплейс */
:root{
  --bg:#ffffff; --card:#ffffff; --text:#0b0b0b; --muted:#666; --accent:#000; --glass:rgba(11,11,11,0.06);
  --radius:12px; --container:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

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

/* Header */
.site-header{border-bottom:1px solid var(--glass);background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:64px;height:64px;display:block}
.brand-title{font-weight:800;font-size:18px}

/* Nav */
.nav{display:flex;gap:12px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link:hover{color:var(--text)}

/* Hero */
.hero{padding:36px 0}
.hero-inner{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:center}
.hero-left h1{font-size:32px;margin:0 0 12px 0;line-height:1.05}
.lead{color:var(--muted);margin:0 0 12px 0}
.actions{display:flex;gap:12px}
.btn{background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;display:inline-block}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--glass)}

/* Cards and sections */
.section{padding:24px 0}
.card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--glass)}

/* Grid */
.grid{display:grid;gap:12px}
.services-grid{grid-template-columns:repeat(3,1fr)}

/* Contact */
.form{display:block;margin-top:12px}
.form-row{display:flex;gap:12px}
.form-row label{flex:1;display:block}
input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--glass);background:transparent;color:var(--text)}

/* Socials */
.socials {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap; /* разрешаем перенос кнопок на новую строку */
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;       /* минимальная ширина для текста */
  height: 36px;
  padding: 0 10px;       /* отступ слева и справа */
  border-radius: 8px;
  border: 1px solid var(--glass);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;    /* текст не переносится внутрь кнопки */
  text-align: center;
  font-size: 14px;        /* можно подкорректировать для читаемости */
}
/* Footer */
.site-footer{border-top:1px solid var(--glass);margin-top:28px;padding:18px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column}
}
/* Simple animations */
.logo{animation:float 6s ease-in-out infinite}
.hero-illus{max-width:100%;display:block}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* FAQ */
#faq {
  background-color: #f9f9f9;
  padding: 50px 20px;
  border-radius: 12px;
  margin: 40px auto;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

#faq h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
  color: #222;
}

.faq-item {
  margin-bottom: 25px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.faq-question {
  font-size: 20px;
  color: #111;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-answer {
  font-size: 16px;
  color: #555;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.faq-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Адаптив */
@media (max-width: 600px) {
  #faq h2 { font-size: 26px; }
  .faq-question { font-size: 18px; }
  .faq-answer { font-size: 15px; }
}

/* Центрирование блока "О Кракен маркетплейс" */
.about-kraken {
  text-align: center; /* центрирование текста внутри контейнера */
}

.about-kraken h2 {
  font-size: 32px;
  margin-bottom: 15px;
  line-height: 1.1;
  color: var(--text);
}

.about-kraken p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width:600px){
  .about-kraken h2 { font-size: 26px; }
  .about-kraken p { font-size: 16px; }
}