/* ══════════════════════════════════════════════════════
   Home page — "Technical Grotesque" direction
   Space Grotesk display · Inter body · JetBrains Mono accents
   Single green accent · sharp corners · grid textures
   ══════════════════════════════════════════════════════ */

:root {
    --home-accent: #16a34a;
    --home-accent-hover: #15803d;
    --home-accent-ink: #0b7c40;
    --home-accent-dot: #0e9f52;
    --home-accent-soft-bg: #e9f7ef;
    --home-accent-soft-border: #bfe6cd;

    --home-accent-dark: #60a5fa;
    --home-accent-soft-bg-dark: rgba(96, 165, 250, 0.08);
    --home-accent-soft-border-dark: rgba(96, 165, 250, 0.3);

    --home-border: #d8dde3;
    --home-border-dark: #2a3f61;
    --home-surface-dark: #182b49;
    --home-band-dark: #10203a;

    --home-text-muted: #57606a;
    --home-text-muted-dark: #a7b6cc;

    --home-font-mono: "JetBrains Mono", ui-monospace, monospace;
    --home-font-display: "Space Grotesk", sans-serif;
}

/* ── Accent word (highlight_accent filter output) ────── */
.hero-title em.accent,
.section-title em.accent,
.cta-title em.accent {
    font-style: normal;
    color: var(--home-accent-ink);
    position: relative;
}
.hero-title em.accent::after,
.section-title em.accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 0.28em;
    background: var(--home-accent-soft-bg);
    z-index: -1;
}
.dark .hero-title em.accent,
.dark .section-title em.accent { color: var(--home-accent-dark); }
.dark .hero-title em.accent::after,
.dark .section-title em.accent::after {
    background: var(--home-accent-soft-bg-dark);
}
/* Titles that sit on dark backgrounds in both modes */
.home-dark-section .section-title em.accent,
.cta-title em.accent { color: var(--home-accent-dark); }
.home-dark-section .section-title em.accent::after { background: var(--home-accent-soft-bg-dark); }

/* ── Scroll animation — hero only, one entrance per section head ── */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ── Hero grid texture ───────────────────────────────── */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--home-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.25;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 20% 40%, black, transparent 70%);
    mask-image: radial-gradient(ellipse at 20% 40%, black, transparent 70%);
}
.dark .hero-grid-bg {
    background:
        linear-gradient(var(--home-border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-border-dark) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.5;
}

/* ── Hero tag (mono pill) ────────────────────────────── */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--home-font-mono);
    font-size: 0.74rem;
    color: var(--home-accent-ink);
    background: var(--home-accent-soft-bg);
    border: 1px solid var(--home-accent-soft-border);
    padding: 0.4rem 0.85rem;
    text-decoration: none;
}
.hero-tag::before {
    content: "●";
    color: var(--home-accent-dot);
    font-size: 0.6rem;
    animation: pulse-dot 2s infinite;
}
a.hero-tag:hover { border-color: var(--home-accent-dot); }
.dark .hero-tag {
    color: var(--home-accent-dark);
    background: var(--home-accent-soft-bg-dark);
    border-color: var(--home-accent-soft-border-dark);
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Buttons (sharp corners) ─────────────────────────── */
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--home-accent);
    color: #fff;
    font-family: var(--home-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-solid:hover { background: var(--home-accent-hover); color: #fff; }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--home-band-dark);
    color: var(--home-band-dark);
    font-family: var(--home-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.btn-outline:hover { border-color: var(--home-accent-hover); color: var(--home-accent-hover); }
.dark .btn-outline { border-color: #e6edf3; color: #e6edf3; }
.dark .btn-outline:hover { border-color: var(--home-accent-dark); color: var(--home-accent-dark); }

/* ── Hero status panel (real photo, labelled — no faked window chrome) ── */
.status-panel {
    border: 1px solid var(--home-border);
    background: #fff;
    box-shadow: 6px 6px 0 var(--home-accent-soft-bg);
    width: 100%;
    max-width: 34rem;
}
.dark .status-panel {
    border-color: var(--home-border-dark);
    background: var(--home-surface-dark);
    box-shadow: 6px 6px 0 var(--home-accent-soft-bg-dark);
}
.status-panel-label {
    font-family: var(--home-font-mono);
    font-size: 0.72rem;
    color: var(--home-text-muted);
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--home-border);
}
.status-panel-label::before { content: "// "; color: var(--home-accent-ink); }
.dark .status-panel-label { color: var(--home-text-muted-dark); border-color: var(--home-border-dark); }
.dark .status-panel-label::before { color: var(--home-accent-dark); }
.status-panel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}
.status-panel-body {
    font-family: var(--home-font-mono);
    font-size: 0.78rem;
    line-height: 1.9;
    padding: 1.1rem 1.3rem;
    color: var(--home-text-muted);
    border-top: 1px solid var(--home-border);
    overflow-x: auto;
}
.dark .status-panel-body { color: var(--home-text-muted-dark); border-color: var(--home-border-dark); }
.status-panel-body .p { color: var(--home-accent-ink); }
.dark .status-panel-body .p { color: var(--home-accent-dark); }
.status-panel-body .ok { color: var(--home-accent-dot); }
.dark .status-panel-body .ok { color: var(--home-accent-dark); }

/* ── Trust bar ───────────────────────────────────────── */
.trust-item {
    font-family: var(--home-font-mono);
    font-size: 0.76rem;
    color: var(--home-text-muted);
}
.dark .trust-item { color: var(--home-text-muted-dark); }
.trust-item::before {
    content: "▸ ";
    color: var(--home-accent-dot);
}
.dark .trust-item::before { color: var(--home-accent-dark); }

/* ── Section header (title left, summary right) ──────── */
.home-offer-header {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: 2.25rem;
}
.home-offer-title { max-width: 640px; margin: 0; }
.home-offer-summary {
    border-left: 2px solid var(--home-accent);
    padding-left: 1.25rem;
}
.home-offer-summary p {
    margin: 0;
    color: var(--home-text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}
.dark .home-offer-summary p { color: var(--home-text-muted-dark); }
@media (max-width: 767px) {
    .home-offer-header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.1rem;
        margin-bottom: 1.75rem;
    }
    .home-offer-summary {
        border-left: 0;
        padding-left: 0;
        max-width: 36rem;
    }
}

/* ── Services — column grid with hairline dividers, no boxed cards ── */
.services-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-col {
    padding: 0 1.75rem;
    border-left: 1px solid var(--home-border);
}
.service-col:first-child { border-left: none; padding-left: 0; }
.service-col:last-child { padding-right: 0; }
.dark .service-col { border-color: var(--home-border-dark); }
.service-fn {
    display: block;
    font-family: var(--home-font-mono);
    font-size: 0.72rem;
    color: var(--home-accent-ink);
    margin-bottom: 1.3rem;
}
.dark .service-fn { color: var(--home-accent-dark); }
@media (max-width: 767px) {
    .services-row { grid-template-columns: 1fr; gap: 2rem; }
    .service-col {
        border-left: none;
        padding: 1.75rem 0 0;
        border-top: 1px solid var(--home-border);
    }
    .service-col:first-child { border-top: none; padding-top: 0; }
    .dark .service-col { border-color: var(--home-border-dark); }
}

/* ── Who I work with — numbered editorial list, distinct from services ── */
.audience-list { display: flex; flex-direction: column; }
.audience-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.75rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--home-border);
}
.audience-row:last-child { border-bottom: 1px solid var(--home-border); }
.dark .audience-row { border-color: var(--home-border-dark); }
.audience-num {
    font-family: var(--home-font-mono);
    font-size: 0.85rem;
    color: var(--home-accent-ink);
    padding-top: 0.2rem;
}
.dark .audience-num { color: var(--home-accent-dark); }
@media (max-width: 480px) {
    .audience-row { grid-template-columns: 2.25rem 1fr; gap: 1rem; }
}

/* ── Process steps (dark section) ────────────────────── */
.step-card {
    border: 1px solid var(--home-border-dark);
    background: var(--home-surface-dark);
    padding: 1.8rem 1.5rem;
}
.step-card .num {
    display: block;
    font-family: var(--home-font-mono);
    font-size: 0.72rem;
    color: var(--home-accent-dark);
    margin-bottom: 1rem;
}

/* ── Quote ───────────────────────────────────────────── */
.quote-prompt {
    font-family: var(--home-font-mono);
    font-size: 0.78rem;
    color: var(--home-accent-ink);
    margin-bottom: 1.5rem;
}
.dark .quote-prompt { color: var(--home-accent-dark); }
.quote-attr {
    font-family: var(--home-font-mono);
    font-size: 0.76rem;
    color: var(--home-text-muted);
}
.dark .quote-attr { color: var(--home-text-muted-dark); }
.quote-attr b { font-weight: 500; }

/* ── CTA grid texture ────────────────────────────────── */
.cta-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--home-border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-border-dark) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.5;
    pointer-events: none;
}