/* Teklar SEO pages — shared styles */
:root {
  --red: #E63946;
  --yellow: #FFC53D;
  --green: #2BB673;
  --ink: #16233E;
  --muted: #5B6B8C;
  --bg: #F7F9FC;
  --card: #FFFFFF;
  --line: #E3E9F2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }
header.top {
  background: var(--ink);
  padding: 14px 0;
}
header.top .wrap { display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 20px; }
.logo img { width: 34px; height: 34px; }
.logo .dot { color: var(--yellow); }
.hero { text-align: center; padding: 56px 20px 40px; }
.hero h1 { font-size: 34px; line-height: 1.25; font-weight: 800; letter-spacing: -0.5px; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero p.lead { color: var(--muted); font-size: 18px; margin-top: 14px; }
.cta {
  display: inline-block; margin-top: 26px; background: var(--red); color: #fff;
  font-size: 18px; font-weight: 700; padding: 15px 38px; border-radius: 12px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(230, 57, 70, .35);
  transition: transform .15s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta small { display: block; font-weight: 500; font-size: 12px; opacity: .85; margin-top: 2px; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; margin: 22px 0; }
section h2 { font-size: 22px; margin-bottom: 14px; }
section h2 .accent { color: var(--green); }
section p { color: var(--muted); margin-bottom: 12px; }
section p:last-child { margin-bottom: 0; }
ul.feats { list-style: none; margin: 10px 0 6px; }
ul.feats li { padding: 8px 0 8px 34px; position: relative; color: var(--muted); }
ul.feats li::before {
  content: ''; position: absolute; left: 0; top: 13px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--green);
  background-image: radial-gradient(circle at 40% 40%, #fff 2px, transparent 2.5px);
}
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:first-child { border-top: 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin-top: 8px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.links a { color: var(--muted); text-decoration: none; border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.links a:hover { border-color: var(--red); color: var(--red); }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 34px 20px 50px; }
footer a { color: var(--muted); text-decoration: underline; }
@media (max-width: 600px) {
  .hero h1 { font-size: 27px; }
  section { padding: 24px 20px; }
}