/* ai ecosystem landing page
   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
                /artificial-intelligence/shared.css
   ========================================================================== */


/* ==================================================
   Hero
   ================================================== */
#hero {
    background:
        url("/artificial-intelligence/foundation-tool/assets/img/hero-grid.svg"), 
        radial-gradient(circle at 95% 55%, rgba(43, 192, 224, 0.18), transparent 40%),
        radial-gradient(1500px 900px at 22% 55%, rgba(var(--blue-primary-rgb), 0.40), transparent 75%),
        radial-gradient(circle at 12% 75%, rgba(31, 160, 184, 0.10), transparent 55%),
        #040714;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
}

#hero h1 { font-size: clamp(36px, 5.2vw, 3.5rem); }
#hero-copy p { text-wrap: pretty; }

.hero__canvas-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: block;
    opacity: 0.45;
    width: 900px;
    height: 450px;
    mask-image: radial-gradient(
        ellipse 90% 80% at 70% 50%,
        #000 30%,
        rgba(0,0,0,0.5) 60%,
        transparent 90%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 90% 80% at 70% 50%,
        #000 30%,
        rgba(0,0,0,0.5) 60%,
        transparent 90%
    );
}

/*let's keep this close*/
@media (min-width: 1200px) {
    .hero__canvas-layer {
        inset: auto;
        top: 4.5%;
        bottom: 4.5%;
        right: calc(-7% - 24px);
        width: 67%;
        opacity: 1;
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            transparent 2%,
            rgba(0,0,0,0.25) 22%,
            rgba(0,0,0,0.70) 44%,
            rgba(0,0,0,0.95) 64%,
            #000 74%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            transparent 2%,
            rgba(0,0,0,0.25) 22%,
            rgba(0,0,0,0.70) 44%,
            rgba(0,0,0,0.95) 64%,
            #000 74%
        );
    }
}



/* ==================================================
   Make Your AI Smarter
   ================================================== */
#make-your-ai-smarter {
    background: var(--bg-grad-cyan);
}
#make-your-ai-smarter h2 {
    margin-bottom: 1rem;
}
#make-your-ai-smarter p {
    font-size: 1.125rem;
}
#make-your-ai-smarter li {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}
#make-your-ai-smarter a {
    font-weight: bold;
}



/* ==================================================
   AI Assistance
   ================================================== */
#ai-assistance {
    background: var(--bg-grad-cyan);
}
#ai-assistance h2 {
    margin-bottom: 1rem;
}
#ai-assistance p {
    font-size: 1.125rem;
}
#ai-assistance li {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}
#ai-assistance a {
    font-weight: bold;
}



/* ==================================================
   Testimonial
   ================================================== */
#testimonial {
    background: var(--bg-grad-emerald);
}
#testimonial .pod {
    background: 
        radial-gradient(ellipse 60% 50% at 95% 5%, rgba(43, 192, 224, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 5% 95%, rgba(31, 143, 184, 0.22) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, #1FA0B8 24%, rgba(13, 22, 44, 0.65)) 0%, rgba(13, 22, 44, 0.55) 50%, color-mix(in srgb, #1F8FB8 22%, rgba(13, 22, 44, 0.65)) 100%);
    border: 1px solid color-mix(in srgb, #2BC0E0 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
}
#testimonial .pod::before {
    content: "\201C";
    position: absolute;
    top: -0.5rem;
    left: 2rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10rem;
    line-height: 1;
    color: #2BC0E0;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}
#testimonial blockquote {
    color: #fff;
    font-size: clamp(20px, 2.2vw, 1.625rem);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.45;
    font-style: normal;
    letter-spacing: -0.005em;
}
#testimonial cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 auto;
    max-width: 60ch;
    text-align: right;
    width: 100%;
}
#testimonial .button {
    margin-bottom: 0;
}
#testimonial cite::before {
    content: "\2014";
}



/* ==================================================
   Wolfram Computational Language
   ================================================== */
#wolfram-computational-language {
    background: var(--bg-grad-cyan);
}
#wolfram-computational-language h2 {
    margin-bottom: 0.5rem;
}
#wolfram-computational-language .content {
    display: grid;
    font-size: 1.125rem;
    gap: 1.25rem;
    grid-template-columns: 5fr 7fr;
}

#wolfram-computational-language .content .pod {
    padding: 2rem 1.5rem;
}
#wolfram-computational-language .content .pod.intro {
    justify-content: space-between; 
    display: flex;
    flex-direction: column;
}
#wolfram-computational-language .button {
    margin: 0;
}
#wolfram-computational-language .content .pod.img {
    display: flex;
    padding: 0;
}
#wolfram-computational-language .product-list {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
    grid-column-end: span 2;
}
#wolfram-computational-language .product-list .pod {
    padding-bottom: 1.25rem;
}

#wolfram-computational-language li {
    margin-bottom: 0.75rem;
}
#wolfram-computational-language a {
    font-weight: bold;
}




/* ==================================================
   Wolfram and AI
   ================================================== */
#wolfram-and-ai {
    background: var(--bg-grad-quiet);
}
#wolfram-and-ai h3 {
    font-size: 1.125rem;
}
#wolfram-and-ai .cgrid {
    gap: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
}
#wolfram-and-ai .cgrid a {
    background: rgba(13, 22, 44, 0.4); 
    border-color: rgba(43, 192, 224, 0.18);
    display: grid;
    gap: 1rem;
    grid-template-columns: 48px 1fr;
    padding: 2rem;
    transition: background 0.9s, border 0.9s 
}
#wolfram-and-ai .cgrid a:hover {
    background: rgba(13, 22, 44, 0.6); 
    border-color: rgba(43, 192, 224, 0.42);
}
#wolfram-and-ai .cgrid p {
    color: var(--body);
}
#wolfram-and-ai .cgrid + h3 {
    margin-top: 3.5rem;
}



/* ==================================================
   Wolfram AI Resources
   ================================================== */
#wolfram-ai-resources {
    background: var(--bg-grad-quiet);
}
#wolfram-ai-resources ul {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr 1fr;
}
#wolfram-ai-resources a {
    background: rgba(13, 22, 44, 0.4); 
    border-color: rgba(43, 192, 224, 0.18);
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    transition: background 0.9s, border 0.9s 
}
#wolfram-ai-resources a:hover {
    background: rgba(13, 22, 44, 0.6); 
    border-color: rgba(43, 192, 224, 0.42);
}
#wolfram-ai-resources .chevron-after::after {
    color: #2BC0E0;
}



/* ==================================================
   Q&A
   ================================================== */



/* ==================================================
   CTA
   ================================================== */
#cta {
    background: var(--bg-grad-quiet);
}
#cta .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%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    overflow: hidden;
    padding: 2.5rem 2rem;
    position: relative;
}
#cta h2 {
    font-size: 1.75rem;
    margin-bottom: 0;
}
#cta p {
    line-height: 1.55;
    max-width: 810px;
    padding-bottom: 0;
}
#cta .button {
    margin-bottom: 0;
}

#cta .pod.consulting img {
    opacity: 0.08;
    pointer-events: none;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}



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


@media (max-width: 900px) {
    /* Wolfram Computational Language */
    #wolfram-computational-language .content {
        grid-template-columns: 1fr;
    }
    #wolfram-computational-language .content .pod.img img {
        width: 100%;
    }
    #wolfram-computational-language .product-list {
        grid-template-columns: 1fr;
        grid-column-end: span 1;
    }


    /*wolfram and ai*/
    #wolfram-and-ai .cgrid {
        grid-template-columns: repeat(2, 1fr);
    }


    /*cta*/
    #cta .pod.consulting img {
        right: -110px;
    }
}


@media (max-width: 600px) {


    /*wolfram and ai*/
    #wolfram-and-ai .cgrid {
        grid-template-columns: 1fr;
    }


    /*resources*/
    #wolfram-ai-resources ul {
        grid-template-columns: 1fr;
    }


    /*cta*/
    #cta .content {
        grid-template-columns: 1fr;
    }
}


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


@media print {}