/* Shortcut Kings - marketing landing. */

.sk-hero { background: radial-gradient(1200px 500px at 50% -10%, rgba(124,92,255,.25), transparent), var(--bg); border-bottom: 1px solid var(--border); }
.sk-hero__inner { text-align: center; padding-top: 48px; padding-bottom: 70px; }

/* Wide keyboard-letter logo — scales to viewport, keeps 901:350 aspect ratio. */
.sk-hero__logo {
    display: block;
    max-width: min(640px, 92vw);
    width: 100%;
    height: auto;
    margin: 0 auto 22px;
}

.sk-hero__sub { font-size: 20px; color: var(--muted); max-width: 600px; margin: 0 auto 30px; }
.sk-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Mini game stage — mirrors the real play UI. */
.sk-hero__demo {
    margin-top: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 48px;
    min-width: min(420px, 92vw);
}
.sk-hero__prompt { font-size: 22px; font-weight: 600; }
.sk-hero__demo .sk-chain-slots { margin: 0; }
.sk-hero__demo-feedback {
    min-height: 24px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--muted);
}
.sk-hero__demo-feedback.is-good { color: var(--good); }
.sk-hero__demo-feedback.is-bad  { color: var(--bad);  }

.sk-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.sk-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.sk-feature h3 { margin: 0 0 8px; }
.sk-feature p { color: var(--muted); margin: 0; font-size: 15px; }

/* Latest blog posts (homepage — below How it works) */
.sk-blog-preview { padding-top: 20px; padding-bottom: 60px; }
.sk-blog-preview h2 { margin-bottom: 8px; }
.sk-blog-preview__sub { margin: 0 auto 28px; max-width: 520px; }
.sk-blog-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 8px;
}
.sk-blog-preview .sk-blog-card { display: flex; flex-direction: column; height: 100%; margin: 0; }
.sk-blog-preview .sk-blog-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
.sk-blog-preview .sk-blog-card h3 a { color: var(--text); }
.sk-blog-preview .sk-blog-card h3 a:hover { color: var(--accent); text-decoration: none; }
.sk-blog-preview .sk-blog-card p:last-of-type { flex: 1; color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.sk-blog-preview__thumb { display: block; margin: -28px -28px 16px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.sk-blog-preview__thumb img { display: block; width: 100%; height: 160px; object-fit: cover; }
.sk-blog-preview__more { margin-top: 28px; }
.sk-blog-preview__cta { margin-top: 32px; margin-bottom: 0; }

.sk-modes-strip { padding-top: 50px; padding-bottom: 20px; }
.sk-steps { list-style: none; counter-reset: step; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
.sk-steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; }
.sk-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; margin-bottom: 10px; }
.sk-steps strong { display: block; font-size: 17px; }
.sk-steps span { color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
    .sk-blog-preview__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sk-hero__inner { padding-top: 32px; }
    .sk-hero__logo { max-width: 94vw; }
    .sk-hero__demo { padding: 24px 18px; min-width: 0; width: 100%; }
    .sk-steps { grid-template-columns: 1fr; }
}