/*
 * Simple Sprite Maker — landing page styles.
 *
 * Standalone-on-purpose: no WordPress / Astra theme dependencies, no shared bundles. The
 * whole `/simple-sprite-maker/` tree can be rsync'd to a subdomain root unchanged. Color
 * tokens mirror the ktisisweb.com palette (--kw-primary etc.) so the look stays consistent
 * with the parent site without coupling to its CSS.
 */

* { box-sizing: border-box; }

:root {
    --ssm-primary: #0680a2;
    --ssm-primary-dark: #04384d;
    --ssm-primary-light: #0a9cc4;
    --ssm-dark: #1a1a2e;
    --ssm-text: #2d3436;
    --ssm-text-light: #636e72;
    --ssm-bg: #ffffff;
    --ssm-bg-subtle: #f8f9fa;
    --ssm-border: #e9ecef;
    --ssm-radius: 8px;
    --ssm-radius-lg: 12px;
    --ssm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ssm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --ssm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--ssm-bg);
    color: var(--ssm-text);
    font-family: var(--ssm-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ssm-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header / nav */
.ssm-header {
    border-bottom: 1px solid var(--ssm-border);
    background: var(--ssm-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}
.ssm-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
.ssm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ssm-dark);
    font-weight: 600;
}
.ssm-brand__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
.ssm-brand__name { font-size: 16px; }
.ssm-nav { display: flex; gap: 24px; }
.ssm-nav a {
    color: var(--ssm-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.ssm-nav a:hover { color: var(--ssm-primary); }

/* Hero */
.ssm-hero {
    padding: 80px 0 56px;
    text-align: center;
    background: linear-gradient(180deg, var(--ssm-bg) 0%, var(--ssm-bg-subtle) 100%);
}
.ssm-hero__title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--ssm-dark);
}
.ssm-hero__tagline {
    font-size: 18px;
    color: var(--ssm-text-light);
    max-width: 640px;
    margin: 0 auto 32px;
}
.ssm-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.ssm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--ssm-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ssm-btn--primary {
    background: var(--ssm-primary);
    color: white;
    box-shadow: var(--ssm-shadow-sm);
}
.ssm-btn--primary:hover {
    background: var(--ssm-primary-light);
    box-shadow: var(--ssm-shadow-md);
    transform: translateY(-1px);
}
.ssm-btn--ghost {
    color: var(--ssm-primary);
    border: 1.5px solid var(--ssm-primary);
    background: transparent;
}
.ssm-btn--ghost:hover { background: var(--ssm-primary); color: white; }

/* Screenshot showcase. Each section's background matches its screenshot's bg color so
   the App Store-style images sit flush against the page chrome. Image is centered and
   capped at a reasonable width so it doesn't blow out on huge displays. */
.ssm-showcase { /* parent wrapper for the 5 .ssm-shot sections */ }

.ssm-shot {
    /* No vertical padding: the matched background already blends each image into its
       band, and every screenshot PNG carries its own internal margin, so the panels
       butt directly together as one continuous filmstrip instead of floating cards. */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ssm-shot img {
    display: block;
    width: 100%;
    /* Cap at the site content width (matches .ssm-container) so the screenshots line up
       with the nav and hero text instead of sprawling on wide displays. The section
       background — matched to each image's edge color — fills the rest of the band, so
       the panel stays full-width and seamless while the image itself stays content-aligned. */
    max-width: 1100px;
    height: auto;
}

/* Per-section background colors matched to each screenshot's true edge color so the
   image blends seamlessly into the page. Sampled directly from the PNG edge pixels
   (corner == left-avg == right-avg — each shot has a solid background). */
.ssm-shot--trace    { background: #F3EFE7; }
.ssm-shot--palettes { background: #EEF1E4; }
.ssm-shot--animate  { background: #1A1322; }
.ssm-shot--export   { background: #FBEEE0; }
.ssm-shot--pixelize { background: #1B1B1F; }

/* Docs CTA banner */
.ssm-docs-promo {
    padding: 64px 0;
    background: linear-gradient(135deg, var(--ssm-primary-dark) 0%, var(--ssm-primary) 100%);
    color: white;
    text-align: center;
}
.ssm-docs-promo h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}
.ssm-docs-promo p {
    margin: 0 0 28px;
    opacity: 0.9;
    font-size: 17px;
}
.ssm-docs-promo .ssm-btn--primary {
    background: white;
    color: var(--ssm-primary-dark);
}
/* Match the hero primary's hover mechanism (shadow lift) instead of swapping bg color —
   the previous `--ssm-bg-subtle` swap went near-black in dark mode and muddy in light. */
.ssm-docs-promo .ssm-btn--primary:hover {
    background: white;
    box-shadow: var(--ssm-shadow-md);
    transform: translateY(-1px);
}

/* Footer */
.ssm-footer {
    padding: 32px 0;
    border-top: 1px solid var(--ssm-border);
    background: var(--ssm-bg-subtle);
}
.ssm-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--ssm-text-light);
    font-size: 14px;
}
.ssm-footer__inner p { margin: 0; }
.ssm-footer__nav { display: flex; gap: 20px; }
.ssm-footer__nav a {
    color: var(--ssm-text-light);
    text-decoration: none;
}
.ssm-footer__nav a:hover { color: var(--ssm-primary); }

/* Dark mode (system preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --ssm-bg: #1a1a2e;
        --ssm-bg-subtle: #24243e;
        --ssm-text: #e9ecef;
        --ssm-text-light: #adb5bd;
        --ssm-dark: #ffffff;
        --ssm-border: #2d2d44;
    }
    .ssm-feature { background: var(--ssm-bg-subtle); }
    .ssm-btn--ghost:hover { color: var(--ssm-dark); }
}

/* Small screens */
@media (max-width: 600px) {
    .ssm-hero { padding: 56px 0 40px; }
    .ssm-hero__title { font-size: 34px; }
    .ssm-hero__tagline { font-size: 16px; }
    .ssm-section-title { font-size: 28px; }
    .ssm-features { padding: 56px 0; }
    .ssm-nav { display: none; }
}