/* DNDB header CTA, shared by the inner pages.
   =========================================================================
   The homepage is the source of truth. This file is generated from its
   `.nav-cta, .h-cta, .about-btn, ...` block, keeping only the .nav-cta
   selectors: reviews.html and capabilities.html carry no other button from
   that list. Both inner pages link this one file, so the button cannot drift
   between them again.

   Why it exists: the inner pages had only the base `.nav-cta` rule, a
   teal-to-ink gradient. On the homepage that base is overridden by the block
   below, so Contact Us reads as a dark button with an animated cyan rim. The
   two headers therefore did not match, and in the dark theme the inner pages'
   button became near-white text on a near-white gradient, because --t1 is
   #EDEFF5 there.

   Mobile and tablet are untouched by construction: all three pages already
   set `.nav-cta { display:none }` below 1025px.

   Regenerate rather than hand-edit if the homepage's button changes. */


/* Token the header needs and the inner pages never declared.
   `.nav-links li a { color: var(--m6) }` is identical on all three pages, but
   --m6 exists only on the homepage. Undefined, the declaration is invalid at
   computed-value time and the colour falls back to the inherited body ink, so
   every nav item on reviews.html and capabilities.html rendered dark instead
   of the light lavender the homepage shows. Values are the homepage's.
   Declared here rather than inline on each page so the two cannot drift. */
:root { --m5: #676C97; --m6: #B5C1E8; }
:root[data-theme="dark"] { --m5: #9AA0C8; --m6: #C7CEEE; }

@property --gradient-angle        { syntax:"<angle>";      initial-value:0deg;  inherits:false; }
@property --gradient-angle-offset { syntax:"<angle>";      initial-value:0deg;  inherits:false; }
@property --gradient-percent      { syntax:"<percentage>"; initial-value:5%;    inherits:false; }
@property --gradient-shine        { syntax:"<color>";      initial-value:white; inherits:false; }
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer        { to { rotate: 360deg; } }

.nav-cta {
    --sc-bg: #0d0d16;
    --sc-bg-subtle: #1a1818;
    --sc-hi: #67e8f9;
    --sc-hi-sub: #06b6d4;
    --sc-anim: gradient-angle linear infinite;
    --sc-dur: 3s;
    isolation: isolate; position: relative; overflow: hidden;
    border: 1px solid transparent !important;
    color: #fff !important;
    background:
        linear-gradient(var(--sc-bg), var(--sc-bg)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--sc-hi) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--sc-hi) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        ) border-box !important;
    box-shadow: inset 0 0 0 1px var(--sc-bg-subtle);
    transition:
        --gradient-angle-offset 800ms cubic-bezier(0.25,1,0.5,1),
        --gradient-percent 800ms cubic-bezier(0.25,1,0.5,1),
        --gradient-shine 800ms cubic-bezier(0.25,1,0.5,1),
        opacity .2s, transform .2s;
    animation: var(--sc-anim) var(--sc-dur);
}

.nav-cta::before,
.nav-cta::after {
    content: ""; pointer-events: none; position: absolute;
    left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
    animation: var(--sc-anim) var(--sc-dur);
}

.nav-cta::before {
    width: calc(100% - 6px); height: calc(100% - 6px);
    background: radial-gradient(circle at 2px 2px, #fff 0.5px, transparent 0) padding-box;
    background-size: 4px 4px; background-repeat: space;
    mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
    border-radius: inherit; opacity: .4;
}

.nav-cta::after {
    --sc-anim: shimmer linear infinite;
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, var(--sc-hi), transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: .55;
}

.nav-cta:hover {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--sc-hi-sub);
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta, .nav-cta::before, .nav-cta::after { animation: none !important; }
}