:root { --bg:#f6f3ee; --card:#fff; --text:#171717; --muted:#666; --line:#e7ded2; --accent:#7b4b2a; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color:var(--text); background:var(--bg); }
.wrap { width:min(1120px, calc(100% - 32px)); margin-inline:auto; }
.hero { padding:64px 0 36px; background:linear-gradient(135deg,#fff8ef,#efe2d2); border-bottom:1px solid var(--line); }
.eyebrow { color:var(--accent); font-weight:700; margin:0 0 8px; }
h1 { font-size:clamp(34px,6vw,64px); line-height:.95; margin:0 0 18px; letter-spacing:-.04em; }
h2 { font-size:clamp(24px,3vw,34px); margin:0 0 16px; letter-spacing:-.03em; }
h3 { margin:0 0 8px; }
.lead { font-size:20px; color:var(--muted); max-width:760px; }
.generator, .seo-text, .presets { margin:28px 0; padding:28px; border:1px solid var(--line); background:var(--card); border-radius:28px; box-shadow:0 12px 30px rgba(60,40,20,.06); }
.controls { display:grid; grid-template-columns:1fr 1fr 1.4fr .8fr; gap:14px; margin-top:22px; align-items:end; }
label { display:grid; gap:8px; font-weight:700; }
select, button { min-height:48px; border-radius:14px; border:1px solid var(--line); padding:0 14px; font:inherit; background:#fff; }
button { background:var(--accent); color:white; border:0; cursor:pointer; font-weight:800; }
.helper-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.helper-columns > div { padding:16px; border:1px dashed var(--line); border-radius:18px; background:#fffaf4; }
.helper-columns p { color:var(--muted); margin:0; }
.results { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:24px; }
.result-card { padding:16px; border:1px solid var(--line); border-radius:18px; background:#fffaf4; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.result-main { display:grid; gap:4px; }
.result-main strong { font-size:18px; }
.native-name { font-size:22px; letter-spacing:.03em; }
.transcription { color:var(--muted); font-size:14px; }
.copy-actions { display:grid; gap:8px; min-width:112px; }
.copy { border:1px solid var(--line); background:white; color:var(--text); min-height:36px; padding:0 10px; border-radius:10px; }
.copy-native { background:#f2e8dc; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.preset { padding:18px; border:1px solid var(--line); border-radius:20px; background:#fffaf4; }
.preset h3 { margin:0 0 8px; }
.preset p { color:var(--muted); margin:0 0 14px; line-height:1.45; }
.preset button { width:100%; }
.seo-text p { line-height:1.65; }
@media (max-width:920px){ .controls{ grid-template-columns:1fr 1fr; } .helper-columns{ grid-template-columns:1fr; } }
@media (max-width:620px){ .controls{ grid-template-columns:1fr; } .generator,.seo-text,.presets{ padding:20px; border-radius:22px; } .result-card{ flex-direction:column; } .copy-actions{ width:100%; grid-template-columns:1fr 1fr; } }
.seo-hub {
  margin: 28px 0 56px;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(60, 40, 20, .06);
}

.seo-head {
  max-width: 780px;
  margin-bottom: 24px;
}

.section-label {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 800;
}

.seo-head p,
.seo-cards p,
.faq-block p {
  color: var(--muted);
  line-height: 1.65;
}

.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.seo-cards article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fffaf4;
}

.seo-cards h3 {
  margin: 0 0 10px;
}

.seo-cards p {
  margin: 0;
}

.howto-block,
.faq-block {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.howto-block ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.8;
}

.faq-block details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffaf4;
  padding: 16px 18px;
  margin-top: 12px;
}

.faq-block summary {
  cursor: pointer;
  font-weight: 800;
}

.faq-block details p {
  margin: 12px 0 0;
}

@media (max-width: 620px) {
  .seo-hub {
    padding: 20px;
    border-radius: 22px;
  }
}