/* SaaSPerform — performance-engineering. Dark teal base, neon-orange accent,
   tabular numerals, dashboard chrome. Persona 9 (late-stage perf). */
/* Design review: Coralina "Cori" Espinoza-Whitehouse. Brief: chart-grid behind the hero,
   tabular slashed-zero numerals, right-aligned units, calibrate the orange glow,
   live ok-dot on the brand, refactor !important. */

:root[data-site="saasperform"] {
    --sp-bg: #042f2e;
    --sp-surface: #064e4a;
    --sp-fg: #ecfdf5;
    --sp-muted: #94c8c1;
    --sp-accent: #fb923c;
    --sp-accent-2: #f97316;
    --sp-ok: #34d399;
    --sp-rule: #0f766e;
    --sp-rule-strong: #14b8a6;
    --sp-sans: "Inter", -apple-system, system-ui, sans-serif;
    --sp-mono: ui-monospace, "JetBrains Mono", monospace;
}
html[data-site="saasperform"], body { background: var(--sp-bg); color: var(--sp-fg); }
body {
    font-family: var(--sp-sans); margin: 0; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Cori: tabular nums + slashed zero. Engineers notice. */
    font-feature-settings: "tnum", "zero", "cv11", "ss01";
    font-variant-numeric: tabular-nums slashed-zero;
}

.sp-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.sp-header { background: var(--sp-bg); padding: .85rem 0; border-bottom: 1px solid var(--sp-rule); }
.sp-header .sp-container { display: flex; gap: 1.5rem; align-items: center; }
.sp-brand {
    color: var(--sp-fg); text-decoration: none;
    font-family: var(--sp-mono); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em;
    display: inline-flex; align-items: center; gap: .5rem;
}
/* Cori: live perf-ok dot. Always-on. Always green. */
.sp-brand::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sp-ok); box-shadow: 0 0 8px var(--sp-ok);
    animation: sp-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .sp-brand::before { animation: none; } }

.sp-brand-strong { color: var(--sp-accent); }
.sp-meta {
    color: var(--sp-muted); font-family: var(--sp-mono); font-size: .85rem;
    font-variant-numeric: tabular-nums slashed-zero;
}
.sp-num { font-family: var(--sp-mono); font-weight: 700; font-variant-numeric: tabular-nums slashed-zero; }
.sp-num-ok { color: var(--sp-ok); }

.sp-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.sp-nav a {
    color: var(--sp-muted); text-decoration: none; margin-left: 1rem; font-size: .9rem;
    transition: color .12s ease;
}
.sp-nav a:hover { color: var(--sp-fg); }
.sp-nav a:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 4px; border-radius: 4px; }

/* Cori: refactor !important. */
.sp-nav a.sp-cta {
    background: var(--sp-accent); color: #1c0a00;
    padding: .45rem 1rem; border-radius: 4px; font-weight: 700;
}
.sp-nav a.sp-cta:hover { background: var(--sp-accent-2); color: #1c0a00; }

.sp-main { padding: 0; }

/* Hero — Cori: chart-grid + a single rising line. Calibrated, not gaudy. */
.sp-hero {
    padding: 4rem 0; position: relative; overflow: hidden;
    background-image:
        linear-gradient(transparent 95%, rgba(20,184,166,.08) 95%),
        linear-gradient(90deg, transparent 95%, rgba(20,184,166,.08) 95%);
    background-size: 60px 40px;
    background-position: 0 0;
}
.sp-hero::before {
    /* Single rising sparkline behind the headline, very faint. */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0,360 C200,340 320,300 460,260 S700,180 820,140 1000,80 1200,40' stroke='%23fb923c' stroke-width='2' fill='none' opacity='.18'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.sp-hero > * { position: relative; }

h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.08; margin: 0 0 1rem; letter-spacing: -.02em; }
.sp-accent { color: var(--sp-accent); }
.sp-lede { color: var(--sp-muted); max-width: 60ch; font-size: 1.1rem; }

.sp-btn {
    display: inline-block; padding: .85rem 1.6rem;
    border-radius: 4px; text-decoration: none; font-weight: 700;
    margin-top: 1.5rem;
    border: 1.5px solid transparent;
    transition: background-color .12s ease, transform .08s ease;
}
.sp-btn-primary {
    background: var(--sp-accent); color: #1c0a00; border-color: var(--sp-accent);
    /* Cori: calibrated. 12 px blur, low opacity. Not 25 px. */
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(251,146,60,.32);
}
.sp-btn-primary:hover { background: var(--sp-accent-2); border-color: var(--sp-accent-2); }
.sp-btn-primary:active { transform: translateY(1px); }
.sp-btn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }

/* Stats — Cori: kinetic shimmer on the big numbers. Subtle. */
.sp-stats { padding: 2rem 0 4rem; }
.sp-stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-stat {
    background: var(--sp-surface); border: 1px solid var(--sp-rule);
    border-radius: 8px; padding: 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .12s ease;
}
.sp-stat:hover {
    transform: translateY(-2px); border-color: var(--sp-rule-strong);
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 24px rgba(4,47,46,.4);
}
.sp-stat-num {
    font-family: var(--sp-mono); font-size: 2.5rem;
    color: var(--sp-accent); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -.02em;
    /* Cori: kinetic shimmer. Slow horizontal sweep on the digits. */
    background: linear-gradient(90deg,
        var(--sp-accent) 0%,
        var(--sp-accent-2) 50%,
        var(--sp-accent) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sp-kinetic 6s linear infinite;
}
@keyframes sp-kinetic { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@media (prefers-reduced-motion: reduce) { .sp-stat-num { animation: none; } }
@supports not (background-clip: text) {
    .sp-stat-num { -webkit-text-fill-color: currentColor; color: var(--sp-accent); animation: none; }
}
.sp-stat-label { color: var(--sp-muted); font-size: .9rem; margin-top: .35rem; text-transform: uppercase; letter-spacing: .08em; }

.sp-band { padding: 1rem 0 5rem; }
.sp-band h2 { font-size: 1.5rem; margin: 0 0 1rem; letter-spacing: -.005em; }

/* Bullets — Cori: right-align the numeric column so units stack. */
.sp-bullets { list-style: none; padding: 0; margin: 0; }
.sp-bullets li {
    padding: .85rem 0;
    border-bottom: 1px dashed var(--sp-rule);
    color: var(--sp-muted);
    display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline;
}
.sp-bullets li strong {
    color: var(--sp-fg);
    font-family: var(--sp-mono);
    text-align: right;
    font-variant-numeric: tabular-nums slashed-zero;
}

::selection { background: rgba(251,146,60,.35); color: var(--sp-fg); }

.sp-footer { padding: 2rem 0 3rem; border-top: 1px solid var(--sp-rule); color: var(--sp-muted); font-size: .9rem; }
.sp-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.sp-footer a { color: var(--sp-muted); text-decoration: none; }
.sp-footer a:hover { color: var(--sp-accent); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--sp-accent); color: #1c0a00;
    padding: .55rem 1.1rem; border-radius: 4px; font-weight: 700; z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}