/* ============================================================================
   enhance.css — site-wide visual polish layer (loaded LAST on every page).
   Builds on the design tokens in styles.css. Safe to remove to fully revert.
   ============================================================================ */

/* ---------- Base niceties ---------- */
html { scroll-behavior: smooth; }

::selection {
    background: rgba(30, 91, 168, 0.85);
    color: #fff;
}

body { letter-spacing: -0.01em; }
h1, h2, h3, h4 { letter-spacing: -0.02em; }
img { max-width: 100%; }

/* Accessible focus ring */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(76, 201, 176, 0.65);
    outline-offset: 2px;
}

/* ---------- Header / Nav ---------- */
.header { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-primary);
    transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--gradient-primary);
    background-size: 160% 160%;
    background-position: left center;
    box-shadow: 0 6px 16px -6px rgba(30, 91, 168, 0.55);
}
.btn-primary:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -8px rgba(30, 91, 168, 0.7);
}

.btn-outline:hover,
.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

/* ---------- Section titles ---------- */
.section-title {
    position: relative;
    padding-bottom: 1.1rem;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: var(--gradient-primary);
}

/* ---------- Hero (home) ---------- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.hero::before {
    width: 440px; height: 440px;
    top: -130px; right: -90px;
    background: radial-gradient(circle, rgba(76, 201, 176, 0.45), transparent 70%);
}
.hero::after {
    width: 400px; height: 400px;
    bottom: -150px; left: -110px;
    background: radial-gradient(circle, rgba(30, 91, 168, 0.32), transparent 70%);
}
.hero .container { position: relative; z-index: 1; }

/* ---------- Shared card polish ---------- */
.problem-item,
.feature-card,
.industry-card,
.capability-card,
.use-case-card,
.benefit-card,
.value-card,
.leader-card,
.security-card,
.difference-card,
.stat-card,
.data-card,
.detail-card,
.spec-item,
.regulatory-item {
    border-radius: 16px;
    transition: transform 0.28s cubic-bezier(.2, .7, .3, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
}

.problem-item:hover,
.feature-card:hover,
.industry-card:hover,
.capability-card:hover,
.use-case-card:hover,
.benefit-card:hover,
.value-card:hover,
.leader-card:hover,
.security-card:hover,
.difference-card:hover,
.stat-card:hover,
.data-card:hover,
.detail-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Icon pop on card hover */
.feature-icon, .capability-icon, .benefit-icon,
.security-icon, .difference-icon, .value-icon {
    transition: transform 0.28s ease;
}
.feature-card:hover .feature-icon,
.capability-card:hover .capability-icon,
.benefit-card:hover .benefit-icon,
.security-card:hover .security-icon,
.difference-card:hover .difference-icon,
.value-card:hover .value-icon {
    transform: scale(1.1) rotate(-3deg);
}

/* ---------- Dark sections: subtle glow ---------- */
.metrics-section,
.cta-section {
    position: relative;
    overflow: hidden;
}
.metrics-section::before,
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.16), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.10), transparent 45%);
    pointer-events: none;
}
.metrics-section .container,
.cta-section .container { position: relative; z-index: 1; }

.metric-value { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }

/* ---------- Footer ---------- */
.footer { position: relative; }
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

/* ---------- Scroll reveal (classes added by main-simple.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .7, .3, 1);
    }
    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}