﻿.company-page {
    --company-accent: #2563eb;
    --company-accent-rgb: 37, 99, 235;
    --company-accent-2: #38bdf8;
    --company-accent-2-rgb: 56, 189, 248;
    --company-hero-start: #111827;
    --company-hero-mid: #0f2747;
    --company-hero-end: #123c6b;
    --company-cta-start: #0f2747;
    --company-cta-end: #14558f;
    --company-surface-border: rgba(15, 23, 42, 0.08);
    --company-strategy-icon-bg: rgba(var(--company-accent-rgb), 0.1);
    --company-strategy-icon-ring: rgba(var(--company-accent-rgb), 0.12);
    --company-focus: 0 0 0 3px rgba(var(--company-accent-rgb), 0.25);
    color: #0f172a;
}

.company-theme-appsnow {
    --company-accent: #0ea5e9;
    --company-accent-rgb: 14, 165, 233;
    --company-accent-2: #38bdf8;
    --company-accent-2-rgb: 56, 189, 248;
    --company-hero-start: #07172a;
    --company-hero-mid: #0b2a45;
    --company-hero-end: #0f4c81;
    --company-cta-start: #0b3558;
    --company-cta-end: #1173b6;
}

.company-theme-demarco {
    --company-accent: #f59e0b;
    --company-accent-rgb: 245, 158, 11;
    --company-accent-2: #fb7185;
    --company-accent-2-rgb: 251, 113, 133;
    --company-hero-start: #23130a;
    --company-hero-mid: #4a2512;
    --company-hero-end: #6b2f15;
    --company-cta-start: #4f2b15;
    --company-cta-end: #8b4f1d;
}

.company-theme-espanol {
    --company-accent: #3b82f6;
    --company-accent-rgb: 59, 130, 246;
    --company-accent-2: #60a5fa;
    --company-accent-2-rgb: 96, 165, 250;
    --company-hero-start: #0e1a2e;
    --company-hero-mid: #152b52;
    --company-hero-end: #1d4f91;
    --company-cta-start: #132b50;
    --company-cta-end: #2164b8;
}

.company-theme-grocernow {
    --company-accent: #f59e0b;
    --company-accent-rgb: 245, 158, 11;
    --company-accent-2: #22c55e;
    --company-accent-2-rgb: 34, 197, 94;
    --company-hero-start: #18220f;
    --company-hero-mid: #2b3f17;
    --company-hero-end: #3f5f1c;
    --company-cta-start: #24381a;
    --company-cta-end: #4d7a27;
}

.company-theme-logistics {
    --company-accent: #38bdf8;
    --company-accent-rgb: 56, 189, 248;
    --company-accent-2: #facc15;
    --company-accent-2-rgb: 250, 204, 21;
    --company-hero-start: #101a2a;
    --company-hero-mid: #122a48;
    --company-hero-end: #0f4c81;
    --company-cta-start: #102f4f;
    --company-cta-end: #1676ac;
}

.company-theme-distribution {
    --company-accent: #f97316;
    --company-accent-rgb: 249, 115, 22;
    --company-accent-2: #facc15;
    --company-accent-2-rgb: 250, 204, 21;
    --company-hero-start: #24140b;
    --company-hero-mid: #41220f;
    --company-hero-end: #7c3f14;
    --company-cta-start: #4a2a15;
    --company-cta-end: #a04c16;
}

.company-theme-kitchen {
    --company-accent: #ef4444;
    --company-accent-rgb: 239, 68, 68;
    --company-accent-2: #f59e0b;
    --company-accent-2-rgb: 245, 158, 11;
    --company-hero-start: #240f13;
    --company-hero-mid: #4a171d;
    --company-hero-end: #7a2228;
    --company-cta-start: #4d151c;
    --company-cta-end: #a12733;
}

.company-theme-logisphere {
    --company-accent: #3b82f6;
    --company-accent-rgb: 59, 130, 246;
    --company-accent-2: #22d3ee;
    --company-accent-2-rgb: 34, 211, 238;
    --company-hero-start: #081828;
    --company-hero-mid: #0a3055;
    --company-hero-end: #0a4f74;
    --company-cta-start: #0d2d49;
    --company-cta-end: #14618d;
}

.company-theme-prima {
    --company-accent: #94a3b8;
    --company-accent-rgb: 148, 163, 184;
    --company-accent-2: #f59e0b;
    --company-accent-2-rgb: 245, 158, 11;
    --company-hero-start: #12151d;
    --company-hero-mid: #1f2937;
    --company-hero-end: #334155;
    --company-cta-start: #1f2937;
    --company-cta-end: #475569;
}

.company-theme-unlad {
    --company-accent: #22c55e;
    --company-accent-rgb: 34, 197, 94;
    --company-accent-2: #84cc16;
    --company-accent-2-rgb: 132, 204, 22;
    --company-hero-start: #0f1f18;
    --company-hero-mid: #153426;
    --company-hero-end: #1b5a3b;
    --company-cta-start: #173523;
    --company-cta-end: #257a48;
}

.company-theme-vicar {
    --company-accent: #16a34a;
    --company-accent-rgb: 22, 163, 74;
    --company-accent-2: #22c55e;
    --company-accent-2-rgb: 34, 197, 94;
    --company-hero-start: #102116;
    --company-hero-mid: #163624;
    --company-hero-end: #1a5a39;
    --company-cta-start: #183523;
    --company-cta-end: #2a7b45;
}

.company-hero {
    position: relative;
    overflow: hidden;
    padding: 5.75rem 1.5rem 4rem;
    color: #fff;
    background:
        radial-gradient(circle at 12% 14%, rgba(var(--company-accent-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(var(--company-accent-2-rgb), 0.14), transparent 34%),
        linear-gradient(135deg, var(--company-hero-start) 0%, var(--company-hero-mid) 55%, var(--company-hero-end) 100%);
}

.company-hero::before,
.company-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.company-hero::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 28%),
        linear-gradient(105deg, rgba(255, 255, 255, 0.06), transparent 25%);
}

.company-hero::after {
    background:
        radial-gradient(circle at 60% 90%, rgba(255, 255, 255, 0.05), transparent 45%);
}

.company-hero > .mud-container {
    position: relative;
    z-index: 1;
}

.company-hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    opacity: 0.35;
    pointer-events: none;
    animation: company-orb-drift 18s ease-in-out infinite alternate;
}

.company-hero-orb-a {
    width: 15rem;
    height: 15rem;
    top: -2.5rem;
    right: 8%;
    background: radial-gradient(circle, rgba(var(--company-accent-2-rgb), 0.5), rgba(var(--company-accent-2-rgb), 0));
}

.company-hero-orb-b {
    width: 13rem;
    height: 13rem;
    bottom: -4rem;
    left: 3%;
    background: radial-gradient(circle, rgba(var(--company-accent-rgb), 0.45), rgba(var(--company-accent-rgb), 0));
    animation-duration: 22s;
    animation-delay: -5s;
}

.company-breadcrumbs {
    margin-bottom: 1.5rem;
}

.company-breadcrumbs .mud-breadcrumb-item,
.company-breadcrumbs .mud-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.72);
}

.company-breadcrumbs .mud-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.45);
}

.company-hero-grid {
    position: relative;
}

.company-hero-copy {
    display: flex;
    align-items: center;
}

.company-hero-copy-inner {
    max-width: 44rem;
}

.company-chip {
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.company-title {
    margin-bottom: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(2rem, 3.1vw, 3rem) !important;
    text-wrap: balance;
}

.company-mission {
    margin: 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    font-weight: 400;
}

.company-hero-visual {
    display: flex;
    align-items: stretch;
}

.company-hero-panel {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 0.35rem;
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.55);
}

.company-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.company-stats-card {
    position: relative;
    padding: 1.6rem 1.4rem;
    border-radius: 1.05rem;
    color: #fff;
    background:
        radial-gradient(circle at 12% 10%, rgba(var(--company-accent-rgb), 0.18), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 34px -24px rgba(0, 0, 0, 0.55);
}

.company-stats-card .mud-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.company-stats-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms ease,
        color 220ms ease;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row:hover {
    transform: translateX(4px);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.stat-row .mud-icon-root {
    color: rgb(var(--company-accent-2-rgb));
    font-size: 1.18rem;
}

.company-strategies {
    position: relative;
    padding: 4.5rem 1.5rem;
    background:
        radial-gradient(circle at 87% 14%, rgba(var(--company-accent-rgb), 0.06), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(var(--company-accent-2-rgb), 0.04), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.section-kicker {
    color: rgb(var(--company-accent-rgb));
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
}

.section-title {
    margin-bottom: 2rem;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.company-strategy-grid {
    align-items: stretch;
}

.strategy-card {
    position: relative;
    height: 100%;
    padding: 1.25rem 1.2rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid var(--company-surface-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
    box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.28);
}

.strategy-card::before,
.strategy-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.strategy-card::before {
    background: linear-gradient(180deg, rgba(var(--company-accent-rgb), 0.04), transparent 46%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.strategy-card::after {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.strategy-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--company-accent-rgb), 0.18);
    box-shadow: 0 24px 44px -30px rgba(15, 23, 42, 0.32);
}

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

.strategy-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.strategy-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    height: 1.9rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: rgba(var(--company-accent-rgb), 0.1);
    color: rgb(var(--company-accent-rgb));
    border: 1px solid rgba(var(--company-accent-rgb), 0.14);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.strategy-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    border-radius: 0.85rem;
    color: rgb(var(--company-accent-rgb)) !important;
    background: linear-gradient(180deg, var(--company-strategy-icon-bg), rgba(var(--company-accent-rgb), 0.04));
    box-shadow: inset 0 0 0 1px var(--company-strategy-icon-ring);
    font-size: 1.45rem !important;
}

.strategy-title {
    margin-bottom: 0.35rem;
    color: #0f172a;
    font-weight: 700;
}

.strategy-description {
    color: #475569;
    line-height: 1.6;
}

.company-cta {
    position: relative;
    padding: 4rem 1.5rem;
    background:
        radial-gradient(circle at 16% 16%, rgba(var(--company-accent-2-rgb), 0.16), transparent 33%),
        radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, var(--company-cta-start) 0%, var(--company-cta-end) 100%);
}

.company-cta .cta-card {
    position: relative;
    padding: 2.4rem 2rem;
    border-radius: 1.2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(circle at 10% 8%, rgba(var(--company-accent-rgb), 0.06), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(var(--company-accent-2-rgb), 0.06), transparent 34%),
        #fff;
    box-shadow:
        0 26px 48px -32px rgba(5, 23, 40, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.company-cta .cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(var(--company-accent-rgb), 0.05);
}

.cta-title {
    margin-bottom: 0.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.cta-description {
    margin: 0 auto 1.15rem;
    max-width: 46ch;
    color: #475569;
    line-height: 1.6;
}

.company-cta-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.company-cta-button {
    position: relative;
    min-width: 11.25rem;
    box-shadow: 0 14px 28px -18px rgba(var(--company-accent-rgb), 0.6);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        filter 220ms ease !important;
}

.company-cta-button:hover,
.company-cta-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -18px rgba(var(--company-accent-rgb), 0.65);
}

.company-cta-button:focus-visible {
    outline: none;
    box-shadow: var(--company-focus), 0 18px 32px -18px rgba(var(--company-accent-rgb), 0.65);
}

.company-cta-secondary {
    min-width: 10.25rem;
    border-width: 1px !important;
    border-color: rgba(var(--company-accent-rgb), 0.35) !important;
    color: rgb(var(--company-accent-rgb)) !important;
    background: rgba(var(--company-accent-rgb), 0.04) !important;
}

.company-cta-secondary:hover,
.company-cta-secondary:focus-visible {
    background: rgba(var(--company-accent-rgb), 0.08) !important;
    border-color: rgba(var(--company-accent-rgb), 0.5) !important;
}

.content-slot-anchor {
    display: block;
    height: 0;
    visibility: hidden;
    scroll-margin-top: 7rem;
}

.company-preview-mode .content-slot {
    position: relative;
    z-index: 1;
    scroll-margin-top: 7rem;
    border-radius: 0.35rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.company-preview-mode .content-slot-active {
    background: rgba(245, 158, 11, 0.18);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.62), 0 6px 16px -10px rgba(0, 0, 0, 0.35);
    padding: 0.08rem 0.2rem;
}

.company-preview-mode .content-slot-note {
    background: #fff7ed;
    border-color: #f59e0b;
    color: #9a3412;
}

@keyframes company-orb-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(10px, -8px, 0) scale(1.06);
    }
}

@media (max-width: 960px) {
    .company-hero {
        padding-top: 5.15rem;
        text-align: center;
    }

    .company-hero-copy-inner {
        margin-inline: auto;
    }

    .company-mission {
        margin-inline: auto;
    }

    .company-hero-panel {
        margin-top: 0.5rem;
    }

    .company-stats-card {
        text-align: left;
    }

    .section-title {
        margin-bottom: 1.6rem;
    }
}

@media (max-width: 600px) {
    .company-hero,
    .company-strategies,
    .company-cta {
        padding-inline: 1rem;
    }

    .company-title {
        font-size: 1.9rem !important;
    }

    .company-stats-card,
    .strategy-card,
    .company-cta .cta-card,
    .company-hero-panel {
        border-radius: 0.95rem;
    }

    .company-stats-card {
        padding: 1.2rem 1rem;
    }

    .company-cta .cta-card {
        padding: 2rem 1.2rem;
    }

    .company-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .company-cta-button,
    .company-cta-secondary {
        width: 100%;
    }

    .strategy-card {
        padding: 1.05rem 0.95rem 1rem;
    }

    .strategy-icon {
        width: 2.7rem;
        height: 2.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .company-hero-orb {
        animation: none;
    }

    .strategy-card:hover,
    .stat-row:hover,
    .company-cta-button:hover,
    .company-cta-button:focus-visible {
        transform: none;
    }
}
