/* Styles for the site header, the footer menu and the homepage sections. They used to be inline
   <style> blocks in each component; here they are downloaded once and cached instead of being
   repeated in every page's HTML. Linked last in App.razor, so they still override Bootstrap and
   app.css as before. Sections are in page order. */

/* ---- Site header: Components/Layout/SiteHeaderThemed.razor ---- */

/* Match AboutWolf section background and rhythm */
.sth-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    color: #e2e8f0;
    background:
        radial-gradient(900px 280px at 80% -40%, rgba(var(--accent-rgb), 0.06), transparent 60%),
        radial-gradient(700px 240px at 0% -20%, rgba(33, 150, 243, 0.05), transparent 60%),
        linear-gradient(180deg, #000000 0%, #03070d 60%, #000000 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.sth-navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 1400px) {
    .sth-navbar > .container-xxl {
        max-width: 1400px;
    }
}

.sth-divider {
    background-color: rgba(255, 255, 255, 0.18);
    opacity: 1;
    width: 1px;
}

.sth-phone {
    color: #e2e8f0;
    white-space: nowrap;
    transition: color .15s ease-in-out;
}

.sth-phone:hover,
.sth-phone:focus {
    color: var(--accent-light);
}

/* Top-level nav links — uppercase kicker style like aw-kicker, but readable */
.sth-link {
    color: rgba(226, 232, 240, 0.85) !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.55rem 0.9rem !important;
    border-radius: 999px;
    transition: color .15s ease-in-out, background .15s ease-in-out;
}

.sth-link:hover,
.sth-link:focus,
.sth-link[aria-expanded="true"] {
    color: var(--accent-light) !important;
    background: rgba(var(--accent-rgb), 0.08);
}

/* Glass-card dropdown surface matching aw-stat-card / aw-panel */
.sth-dropdown {
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(8, 14, 24, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    padding: 0.6rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    margin-top: 0.5rem;
    min-width: 14rem;
}

.sth-dropdown .dropdown-item {
    color: rgba(226, 232, 240, 0.85);
    border-radius: 0.6rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
    transition: color .15s ease-in-out, background .15s ease-in-out, transform .15s ease-in-out;
}

.sth-dropdown .dropdown-item:hover,
.sth-dropdown .dropdown-item:focus {
    color: var(--accent-light);
    background: rgba(var(--accent-rgb), 0.10);
    transform: translateX(2px);
}

.sth-dropdown .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0.4rem 0;
}

.sth-dropdown-header {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
}

.sth-dropdown-emphasis {
    color: var(--accent-light) !important;
    font-weight: 600;
}

/* Right-side actions */
.sth-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #e2e8f0;
    font-size: 1.05rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: color .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}

.sth-search-btn:hover,
.sth-search-btn:focus {
    color: var(--accent-light);
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-1px);
}

/* CTA mirrors aw-btn-primary (green→lime gradient, dark text) */
.sth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border: 1px solid var(--accent-light);
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: filter .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.18);
}

.sth-cta:hover,
.sth-cta:focus {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.28);
}

.sth-cta:active {
    transform: translateY(0);
}

/* Mobile toggler */
.sth-toggler {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
}

.sth-toggler .navbar-toggler-icon {
    filter: invert(1) brightness(1.4);
}

.sth-brand-img {
    height: 2.5rem;
    width: auto;
}

@media (max-width: 575.98px) {
    .sth-brand-img {
        height: 1.75rem;
    }

    .sth-header .navbar-brand {
        gap: 0.5rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sth-navbar > .container-xxl {
        gap: 0.5rem !important;
    }

    .sth-header .navbar-brand {
        gap: 0.75rem !important;
    }

    .sth-link {
        padding: 0.55rem 0.3rem !important;
        letter-spacing: 0.03em;
    }

    .sth-actions {
        gap: 0.5rem !important;
    }

    .sth-cta {
        padding: 0.5rem 0.85rem;
    }
}

@media (max-width: 1199.98px) {
    .sth-dropdown {
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0 0 0 0.75rem;
    }

    /* Actions sit at the end of the collapsed menu with clear separation */
    .sth-actions {
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Let the CTA fill the remaining width for a balanced row */
    .sth-actions .sth-cta {
        flex: 1 1 auto;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        font-size: 0.9rem;
    }
}

/* ---- Homepage hero: Components/Shared/BlackwellHeroThemed.razor ---- */

.bwt-hero {
    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-tertiary-bg: var(--wolf-black-900);
    --bs-tertiary-bg-rgb: 17, 17, 17;
    --bs-tertiary-color: var(--wolf-black-500);
    --bs-tertiary-color-rgb: 82, 82, 82;
    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-primary-text-emphasis: var(--accent-light);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--accent) 30%, #000);
}

/* Hover states Bootstrap has no utility for: the whole unit card darkens, and the product
   row's chevron turns white alongside the underline. */
.bwt-unit-card {
    transition: background-color .3s ease-in-out;
}

.bwt-unit-card:hover,
.bwt-unit-card:focus-visible {
    background-color: var(--wolf-black-800) !important;
}

.bwt-heading {
    color: var(--wolf-primary-400);
}

.bwt-sku {
    color: var(--wolf-primary-300);
}

/* At least 24px tall, so the stacked rows meet the minimum touch-target size on phones. */
.bwt-product-link {
    min-height: 1.5rem;
}

.bwt-product-link:hover .bi,
.bwt-product-link:focus-visible .bi {
    color: var(--bs-emphasis-color) !important;
}

.bwt-hero .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
}

/* The design's headline is 36px on a 50px line, which sits between Bootstrap's h1 and h2
   steps; this is the RFS formula for that size. */
.bwt-hero h1 {
    font-size: calc(1.13rem + 1.49vw);
    line-height: 1.4;
}

/* Denser product lists on phones and tablets so more rows fit above the fold. */
@media (max-width: 991.98px) {
    .bwt-tier {
        font-size: 0.875rem;
    }
}

@media (min-width: 1200px) {
    .bwt-hero h1 {
        font-size: 2.25rem;
    }

    .bwt-hero {
        --bwt-design-h: 991px;
        min-height: var(--bwt-design-h);
    }

    .bwt-hero > .container-xxl {
        min-height: var(--bwt-design-h);
    }
}

.bwt-hero > .container-xxl {
    max-width: 1320px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .bwt-unit-card {
        transition: none;
    }
}

/* ---- Homepage sections below the hero ---- */

/* The browser skips rendering these sections until they are scrolled near, which keeps the
   first paint fast. The size is a placeholder until a section has rendered once; after that the
   browser remembers its real height. */
.poa-section,
.sua-section,
.li-section,
.kb-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* ---- Product offerings: Components/Shared/ProductOfferingsThemed.razor ---- */

/* Themed to match About / Contact pages (frosted glass on dark gradient). */
.poa-section {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.poa-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 85% 12%, rgba(33, 150, 243, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #05101e 0%, #071421 42%, #050a12 100%);
}

.poa-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
}

.poa-chip {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
}

.poa-head {
    margin-bottom: 2.25rem;
}

.poa-lead {
    color: rgba(226, 232, 240, 0.78);
    max-width: 60ch;
}

.poa-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    padding: 1.25rem 1rem;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    will-change: transform;
}

.poa-card:hover {
    transform: translateY(-4px);
    border-color: rgba(66, 165, 245, 0.45);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

.poa-card:focus-visible {
    outline: 2px solid #42a5f5;
    outline-offset: 2px;
}

.poa-card img {
    transition: transform .5s ease;
}

.poa-card:hover img {
    transform: scale(1.06);
}

.poa-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border: 1px solid var(--accent-light);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    line-height: 1.1;
}

.poa-card:hover .poa-badge {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover-light) 100%);
    border-color: var(--accent-hover-light);
}

@media (max-width: 575.98px) {
    .poa-inner {
        padding: 1.5rem 1rem;
    }
}

/* ---- Business units: Components/Shared/SpecializedUnitsThemed.razor ---- */

/* Themed to match About / Contact pages (frosted glass on dark gradient). */
.sua-section {
    --sua-highlight: color-mix(in hsl, var(--accent), white 30%);
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.sua-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 85% 12%, rgba(33, 150, 243, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #05101e 0%, #071421 42%, #050a12 100%);
}

.sua-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
}

.sua-chip {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
}

.sua-head {
    margin-bottom: 2.25rem;
}

.sua-lead {
    color: rgba(226, 232, 240, 0.78);
    max-width: 60ch;
}

.sua-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    overflow: hidden;
    color: #fff;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    will-change: transform;
}

.sua-card:hover {
    transform: translateY(-4px);
    border-color: rgba(66, 165, 245, 0.45);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

.sua-card:focus-visible {
    outline: 2px solid #42a5f5;
    outline-offset: 2px;
}

.sua-tagline {
    font-size: 0.78rem;
    line-height: 1.15rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2));
    border: 1px solid color-mix(in srgb, var(--sua-highlight) 22%, transparent);
    border-radius: 0.5rem;
    color: rgba(226, 232, 240, 0.85);
}

.sua-tagline span {
    color: var(--sua-highlight);
}

.sua-image-shell {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sua-image-shell img {
    transition: transform .5s ease;
}

.sua-card:hover .sua-image-shell img {
    transform: scale(1.06);
}

@media (max-width: 575.98px) {
    .sua-inner {
        padding: 1.5rem 1rem;
    }
}

/* ---- Latest insights: Components/Shared/LatestInsights.razor ---- */

/* Themed frosted-glass frame to match the other home sections. */
.li-section {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.li-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 85% 12%, rgba(33, 150, 243, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #05101e 0%, #071421 42%, #050a12 100%);
}

.li-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
}

.li-head {
    margin-bottom: 2.25rem;
}

.li-chip {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
}

.li-lead {
    max-width: 60ch;
}

/* Brighter summary text for stronger contrast on dark cards. */
.li-summary {
    color: rgba(226, 232, 240, 0.85);
}

/* ---- Knowledge base: Components/Shared/KnowledgeBase.razor ---- */

.kb-section {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border-radius: 1.5rem;
    isolation: isolate;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.08), transparent 55%),
        linear-gradient(180deg, rgba(10, 18, 32, 0.85), rgba(6, 11, 20, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kb-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.kb-glow-1 {
    width: 22rem;
    height: 22rem;
    top: -8rem;
    right: -6rem;
    background: rgba(var(--accent-rgb), 0.18);
}

.kb-glow-2 {
    width: 18rem;
    height: 18rem;
    bottom: -8rem;
    left: -5rem;
    background: rgba(33, 150, 243, 0.14);
}

.kb-inner {
    z-index: 1;
}

.kb-head {
    margin-bottom: 2.25rem;
}

.kb-chip {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
}

.kb-lead {
    max-width: 60ch;
}

.kb-summary {
    color: rgba(226, 232, 240, 0.82);
}

.kb-all-link {
    color: var(--accent-light);
    text-decoration: none;
    padding: 0.4rem 0.25rem;
    transition: gap .15s ease-in-out, color .15s ease-in-out;
}

.kb-all-link:hover {
    color: var(--accent-hover-light);
    gap: 0.65rem !important;
}

/* Bento-style grid: first tile spans two columns on wide screens. */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.kb-card--featured {
    grid-column: span 2;
}

@media (max-width: 991.98px) {
    .kb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kb-card--featured {
        grid-column: span 2;
    }
}

@media (max-width: 575.98px) {
    .kb-grid {
        grid-template-columns: 1fr;
    }

    .kb-card--featured {
        grid-column: span 1;
    }
}

.kb-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(16, 26, 42, 0.92), rgba(9, 15, 26, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: kb-rise .5s ease both;
    animation-delay: var(--kb-delay, 0ms);
}

.kb-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .2s ease;
}

.kb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.kb-card:hover::before {
    opacity: 1;
}

.kb-card-sheen {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left .6s ease;
}

.kb-card:hover .kb-card-sheen {
    left: 140%;
}

.kb-card-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    z-index: 1;
}

.kb-card--featured .kb-card-body {
    gap: 1.25rem;
}

.kb-icon {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.5rem;
    border-radius: 0.85rem;
    color: var(--accent-light);
    background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.08));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    transition: transform .2s ease, color .2s ease;
}

.kb-card:hover .kb-icon {
    transform: scale(1.08) rotate(-4deg);
    color: var(--accent-hover-light);
}

.kb-card--featured .kb-icon {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.75rem;
}

.kb-card-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.kb-card--featured .kb-card-title {
    font-size: 1.35rem;
}

.kb-card-summary {
    font-size: 0.875rem;
}

.kb-arrow {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: rgba(226, 232, 240, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .2s ease, color .2s ease, background .2s ease;
}

.kb-card:hover .kb-arrow {
    color: #fff;
    background: var(--accent-light);
    border-color: var(--accent-light);
    transform: translate(2px, -2px);
}

@keyframes kb-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
    50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.05); }
}

@keyframes kb-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kb-card,
    .kb-kicker-dot,
    .kb-card-sheen {
        animation: none;
        transition: none;
    }
}

/* ---- Footer menu: Components/Layout/SiteFooterMenu.razor ---- */

/* Match AboutWolf section background and rhythm */
.sfm-section {
    position: relative;
    padding: 4rem 0 2.5rem;
    color: #e2e8f0;
    background:
        radial-gradient(1200px 360px at 80% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%),
        radial-gradient(900px 320px at 0% 10%, rgba(33, 150, 243, 0.08), transparent 60%),
        linear-gradient(180deg, #05101e 0%, #071421 42%, #050a12 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reuse the AboutWolf kicker treatment */
.sfm-kicker {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sfm-lead {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.92rem;
    max-width: 360px;
}

.sfm-links {
    margin: 0;
}

.sfm-links li + li {
    margin-top: 0.55rem;
}

.sfm-links a {
    color: rgba(226, 232, 240, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color .15s ease-in-out, transform .15s ease-in-out;
    display: inline-block;
}

.sfm-links a:hover,
.sfm-links a:focus {
    color: var(--accent-light);
    transform: translateX(2px);
}

.sfm-link-emphasis {
    color: var(--accent-light) !important;
    font-weight: 600;
}

/* Glass-card newsletter input matching aw-stat-card / aw-panel surfaces */
.sfm-newsletter {
    max-width: 420px;
}

.sfm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.sfm-field-full {
    grid-column: 1 / -1;
}

.sfm-field {
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.65rem;
    color: #fff;
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    backdrop-filter: blur(8px);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.sfm-field::placeholder {
    color: rgba(226, 232, 240, 0.55);
}

.sfm-field:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.sfm-field:user-invalid,
.sfm-field:user-invalid:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22);
}

select.sfm-field {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23005EB8'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.8rem;
    padding-right: 2.1rem;
    cursor: pointer;
}

select.sfm-field option {
    color: #fff;
}

.sfm-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--accent-light);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.15rem;
    cursor: pointer;
    transition: filter .15s ease-in-out, transform .15s ease-in-out;
}

.sfm-form-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.sfm-form-submit:active {
    transform: translateY(0);
}

/* Social pills match the glass-card aesthetic */
.sfm-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 1.05rem;
    transition: color .15s ease-in-out, border-color .15s ease-in-out, background .15s ease-in-out, transform .15s ease-in-out;
}

.sfm-social a:hover,
.sfm-social a:focus {
    color: var(--accent-light);
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.10);
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .sfm-section {
        padding: 3rem 0 2rem;
    }
}