/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* ItemDash public home polish — layered over existing page styles */

:root {
    --id-ink: #050605;
    --id-neon: #39ff14;
    --id-on-neon: #050605;
    --id-paper: #f4f7f2;
    --id-muted: #9aa396;
    --id-font: "IBM Plex Sans", "Segoe UI", sans-serif;
    --id-display: "Syne", "Segoe UI", sans-serif;
}

html, body {
    overflow-x: clip;
}

body {
    font-family: var(--id-font) !important;
    background: var(--id-ink) !important;
}

.navbar {
    border-bottom: 1px solid rgba(57, 255, 20, 0.12);
    backdrop-filter: blur(8px);
}

.navbar-brand img {
    height: 44px !important;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    padding: 0.15rem;
}

.nav-link {
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

.hero {
    padding: 5.5rem 0 6.5rem !important;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(57, 255, 20, 0.14), transparent 60%),
        linear-gradient(180deg, #070907 0%, #050605 100%) !important;
}

.hero::before {
    background:
        linear-gradient(180deg, transparent 0%, rgba(57, 255, 20, 0.04) 40%, transparent 100%) !important;
}

.hero-logo-frame {
    width: 6.5rem;
    height: 6.5rem;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(57, 255, 20, 0.35);
    background: rgba(5, 6, 5, 0.75);
    padding: 0.85rem;
    animation: id-float 4.5s ease-in-out infinite;
}

.hero-logo-frame img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

@keyframes id-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero h1,
.hero .display-4 {
    font-family: var(--id-display) !important;
    font-style: normal !important;
    font-size: clamp(1.85rem, 7.5vw, 3.2rem) !important;
    letter-spacing: -0.04em;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    min-width: 0;
}

.hero h1 .dash-green,
.hero .display-4 .dash-green {
    white-space: nowrap !important;
}

.hero .lead {
    color: var(--id-muted) !important;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.hero .btn-success,
.hero .btn-primary,
.hero a.btn-success,
.hero a.btn-primary {
    background: var(--id-neon) !important;
    border: none !important;
    color: var(--id-on-neon) !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 0.85rem 1.75rem !important;
    box-shadow: 0 8px 28px rgba(57, 255, 20, 0.22);
}

.hero .btn-success:hover,
.hero .btn-primary:hover,
.hero a.btn-success:hover,
.hero a.btn-primary:hover {
    background: #5dff3d !important;
    color: var(--id-on-neon) !important;
    transform: translateY(-2px);
}

.hero-secondary-link,
a.hero-secondary-link {
    color: var(--id-neon) !important;
    font-weight: 650;
    text-decoration: none;
}

.hero-secondary-link:hover,
a.hero-secondary-link:hover {
    text-decoration: underline;
    color: #5dff3d !important;
}

.feature-card {
    border: 1px solid rgba(57, 255, 20, 0.14) !important;
    background: linear-gradient(165deg, #101410 0%, #0a0c0a 100%) !important;
}

.feature-card h5,
.feature-card .card-title {
    font-family: var(--id-display);
    font-style: normal;
}

.products-title,
.section-title,
#features h2 {
    font-family: var(--id-display) !important;
    font-style: normal !important;
}

@media (max-width: 576px) {
    .hero {
        padding: 4rem 0 4.5rem !important;
    }

    .hero-logo-frame {
        width: 5.25rem;
        height: 5.25rem;
    }
}