body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #000000;
}

/* ── Glass Card (Nav, etc.) ── */
.glass-card {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Sage-Teal Buttons ── */
.sage-btn {
    background: linear-gradient(135deg, #0d3d30 0%, #1a5040 50%, #0d3d30 100%);
    box-shadow:
        0 0 20px rgba(13, 61, 48, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(126, 200, 164, 0.15);
}

.sage-btn:hover {
    background: linear-gradient(135deg, #0f4a3a 0%, #1f5c4c 50%, #0f4a3a 100%);
    box-shadow:
        0 0 35px rgba(13, 61, 48, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* ── Tech Border ── */
.tech-border {
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.tech-border::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 158, 112, 0.25), transparent);
    z-index: 1;
}

/* ── Background Glow ── */
.sentinel-glow {
    background: radial-gradient(circle at center, rgba(13, 61, 48, 0.08) 0%, transparent 70%);
}

/* ── Feature Cards ── */
.feature-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #0a0a0a;
    transition: all 0.5s ease;
}

/* Shading gradient: dark top for text, fades out in middle, dark bottom */
.card-shade {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.05) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.4) 100%
    );
    transition: all 0.5s ease;
    z-index: 2;
}

/* Subtle rim / border glow */
.card-rim {
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    z-index: 3;
    transition: all 0.5s ease;
}

/* Hover: lighten the shade, brighten the rim */
.feature-card:hover .card-shade {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 30%,
        rgba(0, 0, 0, 0.0) 50%,
        rgba(0, 0, 0, 0.1) 80%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.feature-card:hover .card-rim {
    border-color: rgba(74, 158, 112, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 0 25px rgba(74, 158, 112, 0.08);
}

.feature-card:hover {
    border-color: rgba(74, 158, 112, 0.12);
}

/* ── Image Placeholders ── */
.img-placeholder {
    background: #111;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.img-placeholder::after {
    content: 'IMAGE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #2a2a2a;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* ── Atmospheric Images (when you add real images) ── */
.atmospheric-image {
    filter: contrast(1.1) brightness(0.75) saturate(0.85);
    transition: filter 0.5s ease;
}

.atmospheric-image:hover {
    filter: contrast(1.1) brightness(0.9) saturate(1);
}

/* Hero image - lighter than cards */
.hero-image {
    filter: contrast(1.05) brightness(0.95) saturate(0.95);
    transition: filter 0.5s ease;
}

.hero-image:hover {
    filter: contrast(1.05) brightness(1) saturate(1);
}