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

/* ── Accent word (highlight_accent filter output) ────── */
.hero-title em.accent,
.section-title em.accent,
.cta-title em.accent {
    font-style: normal;
    color: #16a34a;
    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: #e9f7ef;
    z-index: -1;
}
.dark .hero-title em.accent,
.dark .section-title em.accent { color: #4ade80; }
.dark .hero-title em.accent::after,
.dark .section-title em.accent::after {
    background: rgba(74, 222, 128, 0.12);
}
/* Titles that sit on dark backgrounds in both modes */
.home-dark-section .section-title em.accent,
.cta-title em.accent { color: #4ade80; }
.home-dark-section .section-title em.accent::after { background: rgba(74, 222, 128, 0.12); }

/* ── Scroll animation ────────────────────────────────── */
[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(#d8dde3 1px, transparent 1px),
        linear-gradient(90deg, #d8dde3 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(#21262d 1px, transparent 1px),
        linear-gradient(90deg, #21262d 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: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    color: #0b7c40;
    background: #e9f7ef;
    border: 1px solid #bfe6cd;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
}
.hero-tag::before {
    content: "●";
    color: #0e9f52;
    font-size: 0.6rem;
    animation: pulse-dot 2s infinite;
}
a.hero-tag:hover { border-color: #0e9f52; }
.dark .hero-tag {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
}
@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: #16a34a;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-solid:hover { background: #15803d; color: #fff; }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #0d1117;
    color: #0d1117;
    font-family: "Space Grotesk", sans-serif;
    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: #15803d; color: #15803d; }
.dark .btn-outline { border-color: #e6edf3; color: #e6edf3; }
.dark .btn-outline:hover { border-color: #4ade80; color: #4ade80; }

/* ── Terminal frame around hero photo ────────────────── */
.term {
    border: 1px solid #d8dde3;
    background: #fff;
    box-shadow: 6px 6px 0 #e9f7ef;
    width: 100%;
    max-width: 34rem;
}
.dark .term {
    border-color: #21262d;
    background: #161b22;
    box-shadow: 6px 6px 0 rgba(74, 222, 128, 0.08);
}
.term-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #d8dde3;
}
.dark .term-bar { border-color: #21262d; }
.term-bar i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #d8dde3;
}
.dark .term-bar i { background: #30363d; }
.term img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}
.term-body {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.9;
    padding: 1.1rem 1.3rem;
    color: #57606a;
    border-top: 1px solid #d8dde3;
    overflow-x: auto;
}
.dark .term-body { color: #8b949e; border-color: #21262d; }
.term-body .p { color: #0b7c40; }
.dark .term-body .p { color: #4ade80; }
.term-body .ok { color: #0e9f52; }
.dark .term-body .ok { color: #4ade80; }

/* ── Trust bar ───────────────────────────────────────── */
.trust-item {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.76rem;
    color: #57606a;
}
.dark .trust-item { color: #8b949e; }
.trust-item::before {
    content: "▸ ";
    color: #0e9f52;
}
.dark .trust-item::before { color: #4ade80; }

/* ── Section kicker ("// label") ─────────────────────── */
.kicker {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0b7c40;
    margin: 0 0 0.9rem;
}
.kicker::before { content: "// "; }
.dark .kicker { color: #4ade80; }

/* ── 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 #16a34a;
    padding-left: 1.25rem;
}
.home-offer-summary p {
    margin: 0;
    color: #57606a;
    font-size: 0.95rem;
    line-height: 1.75;
}
.dark .home-offer-summary p { color: #9ca3af; }
@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;
    }
}

/* ── Service / audience cards ────────────────────────── */
.tech-card {
    background: #fff;
    border: 1px solid #d8dde3;
    padding: 2rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tech-card:hover {
    border-color: #0e9f52;
    box-shadow: 5px 5px 0 #e9f7ef;
}
.dark .tech-card {
    background: #161b22;
    border-color: #21262d;
}
.dark .tech-card:hover {
    border-color: #4ade80;
    box-shadow: 5px 5px 0 rgba(74, 222, 128, 0.08);
}
.tech-card .fn {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: #0b7c40;
    margin-bottom: 1.3rem;
}
.dark .tech-card .fn { color: #4ade80; }

/* ── Process steps (dark section) ────────────────────── */
.step-card {
    border: 1px solid #21262d;
    background: #161b22;
    padding: 1.8rem 1.5rem;
}
.step-card .num {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: #4ade80;
    margin-bottom: 1rem;
}

/* ── Quote ───────────────────────────────────────────── */
.quote-prompt {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    color: #0b7c40;
    margin-bottom: 1.5rem;
}
.dark .quote-prompt { color: #4ade80; }
.quote-attr {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.76rem;
    color: #57606a;
}
.dark .quote-attr { color: #8b949e; }
.quote-attr b { font-weight: 500; }

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