.hero { text-align: center; padding: 1rem 0 0.5rem; }
.hero img { max-width: 100%; height: auto; }
.hero .tagline { opacity: 0.8; margin: 0.25rem 0 1rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem 0 1.5rem; }
.badges img { height: 28px; width: auto; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.stat { text-align: center; padding: 1rem 0.5rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent); }
.stat b { display: block; font-size: 1.6rem; color: var(--accent-color, #0d9488); }
.stat span { font-size: 0.85rem; opacity: 0.8; }

.cap { text-align: center; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin: 1.5rem 0 0.25rem; }
.toolgroup { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0.5rem 0 1rem; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 84px; }
.tool img { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: #f1f5f9;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent); transition: transform 0.15s ease; }
.tool:hover img { transform: translateY(-3px); }
.tool span { font-size: 0.75rem; opacity: 0.85; text-align: center; }

.ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; margin: 1rem 0 1.5rem; }
.ab-card { padding: 1rem 1.1rem; border-radius: 14px; transition: transform 0.15s ease, border-color 0.15s ease;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent); }
.ab-card:hover { transform: translateY(-3px); border-color: var(--accent-color, #0d9488); }
.ab-card-title { font-weight: 700; margin-bottom: 0.25rem; }
.ab-card p { margin: 0; font-size: 0.92rem; opacity: 0.85; }

.gif { text-align: center; margin: 2rem 0 0.5rem; }
.gif img { max-width: min(100%, 420px); height: auto; border-radius: 14px; }
.closing { text-align: center; opacity: 0.85; }