/* mcp enterprise page
   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
                /artificial-intelligence/shared.css
                /artificial-intelligence/mcp/styles.css
   ========================================================================== */


/* ==================================================
   SETUP
   ================================================== */
/*overrides*/
.enterprise .howitworks-path--local svg path {
    fill: #F58A7E;
}
.enterprise .howitworks-path--cloud svg path {
    fill: #EF4A3C;
}



/* ==================================================
   Hero
   ================================================== */
#hero {
    background:
        url("/artificial-intelligence/mcp/enterprise/img/hero-background1.svg"),
        url("/artificial-intelligence/mcp/enterprise/img/hero-background2.svg"),
        url("/artificial-intelligence/mcp/enterprise/img/hero-background3.svg"),
        url("/artificial-intelligence/mcp/enterprise/img/hero-background4.svg"),
        radial-gradient(circle at 78% 50%, rgba(239, 74, 60, 0.22) 0%, transparent 35%),
        radial-gradient(circle at 88% 60%, rgba(199, 51, 31, 0.30) 0%, transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(245, 138, 126, 0.10) 0%, transparent 55%),
        radial-gradient(900px 600px at 85% 5%, rgba(239, 74, 60, 0.10), transparent 60%),
        radial-gradient(circle at 22% 55%, rgba(239, 74, 60, 0.16) 0%, transparent 50%),
        radial-gradient(circle at 12% 65%, rgba(199, 51, 31, 0.20) 0%, transparent 55%),
        linear-gradient(to bottom, transparent calc(100% - 1px), rgba(239, 74, 60, 0.35) 100%),
        #040714;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.ent-hero-visual {
    aspect-ratio: 1200 / 553;
    height: 480px;
    pointer-events: none;
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.ent-hero-field {
    animation: heroDrift 42s ease-in-out infinite;
    color: var(--acc);
    inset: 0;
    position: absolute; 
    -webkit-mask-image: radial-gradient(ellipse 88% 88% at 52% 50%, #000 32%, rgba(0,0,0,.5) 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 88% 88% at 52% 50%, #000 32%, rgba(0,0,0,.5) 62%, transparent 100%);
    will-change: transform;
}
.ent-hero-field svg { 
    display: block; 
    height: 100%; 
    width: 100%; 
}
.ent-hero-field--pattern {
    animation-duration: 64s;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 14%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 14%, #000 78%, transparent 100%);
    z-index: 1;
}
.ent-hero-field--pattern svg { 
    height: 100%; 
    width: 100%; 
}

@media (max-width: 1023px) {
    .ent-hero-field--pattern { opacity: 0.4; }
}

.ent-hero-fg { 
    inset: 0; 
    position: absolute; 
}
.ent-hero-fg svg { 
    display: block; 
    height: 100%; 
    width: 100%; 
}

.ent-hero-field--stack svg { 
    display: block; 
    height: 100%; 
    width: 100%; 
}
.ent-hero-halo {
    aspect-ratio: 1 / 1; 
    background: 
        radial-gradient(circle at center,
            rgba(245, 138, 126, 0.30) 0%,
            rgba(239, 74, 60, 0.18) 22%,
            rgba(199, 51, 31, 0.08) 45%,
            transparent 72%);
    filter: blur(12px);
    left: 50%; 
    pointer-events: none;
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%);
    width: 50%; 
}
.ent-hero-spikey {
    filter: drop-shadow(0 0 26px rgba(239, 74, 60, 0.35))
            drop-shadow(0 0 64px rgba(199, 51, 31, 0.20));
    inset: 0;
    position: absolute; 
}
.ent-hero-spikey svg {
    height: 100%;
    inset: 0;
    position: absolute; 
    transform: translateX(-40px);
    width: 100%; 
}

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

@media (min-width: 1024px) {
    #hero::after {
        background:
            linear-gradient(to right,
                var(--bg) 0%,
                color-mix(in srgb, var(--bg) 70%, transparent) 28%,
                transparent 52%,
                rgba(4,7,20,0.20) 100%),
            linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 2;
    }
}

@media (max-width: 1023px) {
    .ent-hero-visual {
        left: calc(50% + 40px); 
        opacity: 0.28;
        right: auto;
        transform: translate(-50%, -50%);
    }
}


/*other hero stuff*/
#hero .pod-label {
    background-color: rgba(239, 74, 60, 0.10);
    background-image: url('/artificial-intelligence/mcp/enterprise/img/icon-enterprise-pill.svg'); 
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 16px;
    border: 1px solid;
    border-color: rgba(239, 74, 60, 0.50);
    border-radius: 10rem;
    color: #F58A7E;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.375rem 0.75rem 0.375rem 36px;
}
#hero h1 span {
    background: linear-gradient(135deg, #F58A7E 0%, #EF4A3C 55%, #C7331F 100%);
    background-clip: text;
    color: transparent;
}
#hero h1 + p {
    color: #F58A7E;
}
#hero .button {
    background: #A72817;
    border-color: #A72817;
    color: #fff; 
}
#hero .button:hover {
    background: color-mix(in srgb, #000 12%, #A72817);
    border-color: color-mix(in srgb, #000 12%, #A72817);
}



/* ==================================================
   using
   ================================================== */
#using {
    text-align: center;
}
#using h2 {
    color: #ef4a3c;
    margin-bottom: 1.25rem;
}
#using p {
    margin: 0 auto 1rem;
    max-width: 92ch;
}
#using .items {
    background: rgba(239, 74, 60, 0.07);
    border: 1px solid rgba(239, 74, 60, 0.40);
    border-radius: 10px;
    color:white;
    margin: 0 auto 1.5rem;
    max-width:800px;
    padding: 2rem 2.5rem;
    text-align: left;
}
#using .items p {
    color: #ef4a3c; 
    font-size: 1.125rem;
    font-weight:600;
    margin-bottom: 0;
}
#using .items ul {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: 1fr 1fr 1fr;
}
#using .items ul li {
    padding: 0 0 0 0.75rem;
    position: relative;
}
#using .items ul li:before {
    color: #ef4a3c;
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}



/* ==================================================
   access options (use cases)
   ================================================== */
#access-options .item {
    display: grid;
    gap: 1rem;
    grid-template-columns: 24px 1fr;
}


/*local*/
#access-options .local {
    box-shadow: inset 0 0 80px rgba(245, 138, 126, 0.05), 0 0 32px rgba(245, 138, 126, 0.08);
}
#access-options .local,
#access-options .local .pod-label {
    border-color: rgba(245, 138, 126, 0.45);
}
#access-options .local .pod-label {
    background-color: rgba(245, 138, 126, 0.10);
    background-image: url('/artificial-intelligence/mcp/enterprise/img/icon-enterprise-pill.svg'); 
    color: #F58A7E;
}
.subpage #access-options .local h3 {
    border-color: rgba(245, 138, 126, 0.20); 
}
.subpage #access-options .local h3 span,
.subpage #access-options .local h4 {
    color: #F58A7E;
}


/*cloud*/
#access-options .cloud {
    box-shadow: inset 0 0 80px rgba(239, 74, 60, 0.05), 0 0 32px rgba(239, 74, 60, 0.08);
}
#access-options .cloud,
#access-options .cloud .pod-label {
    border-color: rgba(239, 74, 60, 0.45);
}
#access-options .cloud .pod-label {
    background-color: rgba(239, 74, 60, 0.10);
    background-image: url('/artificial-intelligence/mcp/enterprise/img/icon-enterprise-pill2.svg'); 
    color: #EF4A3C;
}
.subpage #access-options .cloud h3 {
    border-color: rgba(239, 74, 60, 0.20); 
}
.subpage #access-options .cloud h3 span,
.subpage #access-options .cloud h4 {
    color: #EF4A3C;
}


/* ==================================================
   consulting/contact
   ================================================== */
#consulting {
    background: var(--bg-grad-cyan);
}
#consulting .pod {
    background: radial-gradient(ellipse 70% 80% at 90% 50%,
          rgba(43, 192, 224, 0.16) 0%,
          rgba(43, 192, 224, 0.05) 35%,
          transparent 65%),
        radial-gradient(ellipse 60% 60% at 5% 105%,
          rgba(77, 62, 159, 0.10) 0%,
          transparent 55%),
        linear-gradient(135deg,
          rgba(13, 22, 44, 0.75) 0%,
          rgba(13, 22, 44, 0.5) 100%);
    padding: 2rem 2.5rem; 
    position: relative;
}
#consulting h2 {
    color: #6FD8EE;
    font-size: 28px;
    margin-bottom: 0.5rem;
    text-align: left;
}
#consulting img {
    opacity: 0.08;
    pointer-events: none;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

#contact .content {
    align-items: center;
    color: #F1F2FA;
    display: flex;
    gap: 1rem;
    justify-content: center;
}
#contact span {
    font-size: 1.25rem;
    font-weight: 700;
}
#contact .button {
    background: #A72817;
    border-color: #A72817;
    color: #fff; 
}
#contact .button:hover {
    background: color-mix(in srgb, #000 12%, #A72817);
    border-color: color-mix(in srgb, #000 12%, #A72817);
}



/* ==================================================
   cta
   ================================================== */
#cta {
    background: var(--bg-grad-quiet);
}
#cta .pod {
    background: linear-gradient(135deg, rgba(13, 22, 44, 0.55) 0%, rgba(13, 22, 44, 0.35) 100%);
    border: 1px solid color-mix(in srgb, #82c2ff 22%, #343A64);
    padding: 3.5rem 2.5rem;
    position: relative;
}
#cta h2 { 
    color: #fff;
    font-size: 28px;
    margin-bottom: 0.75rem;
    text-align: left;
}
#cta h2 span {
    color: #2BC0E0;
}
#cta p {
    font-size: 1.125rem;
    max-width: 54ch;
}
#cta img {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 56%;
    height: 150%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    filter: none;
}
#cta .button {
    background: #2BC0E0;
    border-color: #2BC0E0;
    color: var(--bg);
}
#cta .button:hover {
    background: color-mix(in srgb, #fff 10%, #2BC0E0);
    border-color: #6FD8EE; 
}





/* ==================================================
   responsive
   ================================================== */
@media (max-width: 1200px) {
}


@media (max-width: 900px) {
    #using .items ul {
        grid-template-columns: 1fr 1fr;
    }
    #cta img {
        width: 92%;
        opacity: 0.22;
    }
}


@media (max-width: 600px) {
    #using .items ul {
        grid-template-columns: 1fr;
    }

    #contact .content {
        flex-direction: column;
    }
    #contact a {
        width: 100%;
    }
}


@media (max-width: 320px) {
}


@media print {}