/* page hero: restyles the CMS banner on why-semsto and problem-we-solving to match the homepage hero.
   Loaded after css/media.css so it wins at equal specificity; the CMS markup itself is untouched. */
main .whyneed-slide-video, main .problem-solving-sec{--ph-ink: #14213d; --ph-slate: #5b6477; --ph-blue: #0b75d6; --ph-violet: #7b61ff; --ph-rule: #dfe7f3;
    position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 88px; background: linear-gradient(180deg, #fbfcff 0%, #ffffff 55%, #f7faff 100%);}
main .whyneed-slide-video::before, main .problem-solving-sec::before{content: ''; position: absolute; inset: 0; z-index: -1; opacity: 1; pointer-events: none;
    background: radial-gradient(560px 460px at 76% 48%, rgba(11,117,214,.10), transparent 70%), radial-gradient(520px 380px at 96% 4%, rgba(123,97,255,.10), transparent 70%), radial-gradient(420px 320px at 2% 98%, rgba(11,117,214,.05), transparent 70%);}
main .whyneed-slide-video::after, main .problem-solving-sec::after{content: ''; display: block; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; opacity: 1; pointer-events: none;
    background: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(700px 520px at 74% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(700px 520px at 74% 50%, #000 20%, transparent 75%);}
main .whyneed-slide-video .row, main .problem-solving-sec .row{align-items: center; row-gap: 48px;}

/* copy */
main .whyneed-slide-video .slide-left-content, main .problem-solving-sec .slide-left-content{position: relative; z-index: 1; max-width: 600px; margin-bottom: 0;}
main .whyneed-slide-video .slide-left-content::before, main .problem-solving-sec .slide-left-content::before{content: ''; display: block; width: 56px; height: 4px; margin-bottom: 24px; border-radius: 4px; background: linear-gradient(90deg, var(--ph-blue), var(--ph-violet)); box-shadow: 0 4px 12px -4px rgba(11,117,214,.6);}
main .whyneed-slide-video .slide-left-content h1, main .problem-solving-sec .slide-left-content h1{margin: 0 0 22px; font-size: 52px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
    background: linear-gradient(100deg, var(--ph-ink) 0%, var(--ph-ink) 42%, var(--ph-blue) 72%, var(--ph-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
main .whyneed-slide-video .slide-left-content p, main .problem-solving-sec .slide-left-content p{margin: 0 0 18px; color: var(--ph-slate); font-size: 18px; line-height: 31px; font-weight: 500;}
main .whyneed-slide-video .slide-left-content p:first-of-type{color: var(--ph-ink); font-size: 19px;}

/* check list (problem-we-solving) */
main .problem-solving-sec .slide-left-content .bulltet-list{margin: 0 0 32px; padding: 0; list-style: none;}
main .problem-solving-sec .slide-left-content .bulltet-list li{position: relative; margin: 0; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--ph-rule); color: var(--ph-slate); font-size: 16px; line-height: 27px; font-weight: 500;}
main .problem-solving-sec .slide-left-content .bulltet-list li:first-child{padding-top: 0;}
main .problem-solving-sec .slide-left-content .bulltet-list li:last-child{border-bottom: 0;}
main .problem-solving-sec .slide-left-content .bulltet-list li::before{content: ''; position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #eef4ff, #f2efff); border: 1px solid rgba(11,117,214,.14);}
main .problem-solving-sec .slide-left-content .bulltet-list li:first-child::before{top: 0;}
main .problem-solving-sec .slide-left-content .bulltet-list li img{position: absolute; left: 7px; top: 20px; width: 16px !important; height: 16px;}
main .problem-solving-sec .slide-left-content .bulltet-list li:first-child img{top: 6px;}

/* buttons: first = gradient primary with arrow, .btn-bg = white ghost with play icon */
main .whyneed-slide-video .slide-left-content .right-btn, main .problem-solving-sec .slide-left-content .right-btn{display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none;}
main .whyneed-slide-video .slide-left-content .right-btn li, main .whyneed-slide-video .slide-left-content .right-btn li:first-child, main .problem-solving-sec .slide-left-content .right-btn li, main .problem-solving-sec .slide-left-content .right-btn li:first-child{padding: 0;}
main .whyneed-slide-video .slide-left-content .btn-5, main .problem-solving-sec .slide-left-content .btn-5{display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 0; border-radius: 12px; outline: 0; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;
    background: linear-gradient(100deg, var(--ph-blue), #3d6cf0 60%, var(--ph-violet)); color: #fff; box-shadow: 0 14px 28px -12px rgba(11,117,214,.6); transition: transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;}
main .whyneed-slide-video .slide-left-content .btn-5::after, main .problem-solving-sec .slide-left-content .btn-5::after{content: ''; width: 18px; height: 18px; background: currentColor; transition: transform .25s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;}
main .whyneed-slide-video .slide-left-content .btn-5:hover, main .problem-solving-sec .slide-left-content .btn-5:hover{background: linear-gradient(100deg, var(--ph-blue), #3d6cf0 60%, var(--ph-violet)); color: #fff; outline: 0; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(11,117,214,.7);}
main .whyneed-slide-video .slide-left-content .btn-5:hover::after, main .problem-solving-sec .slide-left-content .btn-5:hover::after{transform: translateX(3px);}
main .whyneed-slide-video .slide-left-content .right-btn .btn-bg, main .problem-solving-sec .slide-left-content .right-btn .btn-bg{flex-direction: row-reverse; border: 1px solid var(--ph-rule); background: rgba(255,255,255,.85); color: var(--ph-ink); box-shadow: none;}
main .whyneed-slide-video .slide-left-content .right-btn .btn-bg::after, main .problem-solving-sec .slide-left-content .right-btn .btn-bg::after{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l5 3.5-5 3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l5 3.5-5 3.5z'/%3E%3C/svg%3E");}
main .whyneed-slide-video .slide-left-content .right-btn .btn-bg:hover, main .problem-solving-sec .slide-left-content .right-btn .btn-bg:hover{background: rgba(255,255,255,.95); color: var(--ph-blue); border-color: rgba(11,117,214,.35); box-shadow: none;}
main .whyneed-slide-video .slide-left-content .right-btn .btn-bg:hover::after, main .problem-solving-sec .slide-left-content .right-btn .btn-bg:hover::after{transform: none;}
main .whyneed-slide-video .slide-left-content .btn-5:focus-visible, main .problem-solving-sec .slide-left-content .btn-5:focus-visible{outline: 2px solid var(--ph-blue); outline-offset: 3px;}

/* image: glass frame, orbit ring behind, gentle float */
main .whyneed-slide-video .row > [class*="col-"]:last-child, main .problem-solving-sec .row > [class*="col-"]:last-child{position: relative; display: flex; justify-content: center;}
main .whyneed-slide-video .row > [class*="col-"]:last-child::before, main .problem-solving-sec .row > [class*="col-"]:last-child::before{content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 112%; aspect-ratio: 1 / 1; max-width: 680px; transform: translate(-50%,-50%); border-radius: 50%;
    border: 1px dashed rgba(11,117,214,.2); background: radial-gradient(circle, rgba(91,110,255,.14) 0%, rgba(11,117,214,.06) 40%, transparent 68%); pointer-events: none;}
main .whyneed-slide-video .row > [class*="col-"]:last-child::after, main .problem-solving-sec .row > [class*="col-"]:last-child::after{content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 88%; aspect-ratio: 1 / 1; max-width: 540px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(123,97,255,.12); pointer-events: none;}
main .whyneed-slide-video .row > [class*="col-"]:last-child img, main .problem-solving-sec .row > [class*="col-"]:last-child img{display: block; width: 100% !important; max-width: 620px; height: auto; border-radius: 24px !important; background: #fff;
    box-shadow: 0 0 0 10px rgba(255,255,255,.75), 0 0 0 11px rgba(11,117,214,.12), 0 40px 80px -30px rgba(38,60,160,.45), 0 0 70px -20px rgba(91,110,255,.4);
    animation: ph-float 7s ease-in-out infinite;}
@keyframes ph-float{0%, 100%{transform: translateY(0);} 50%{transform: translateY(-8px);}}

@media (max-width: 1199px){
    main .whyneed-slide-video .slide-left-content h1, main .problem-solving-sec .slide-left-content h1{font-size: 44px;}
}
@media (max-width: 991px){
    main .whyneed-slide-video, main .problem-solving-sec{padding: 48px 0 72px;}
    main .whyneed-slide-video .slide-left-content, main .problem-solving-sec .slide-left-content{max-width: none;}
    main .whyneed-slide-video .row > [class*="col-"]:last-child img, main .problem-solving-sec .row > [class*="col-"]:last-child img{max-width: 560px;}
    main .whyneed-slide-video::after, main .problem-solving-sec::after{-webkit-mask-image: radial-gradient(600px 500px at 50% 75%, #000 20%, transparent 75%); mask-image: radial-gradient(600px 500px at 50% 75%, #000 20%, transparent 75%);}
}
@media (max-width: 575px){
    main .whyneed-slide-video, main .problem-solving-sec{padding: 36px 0 56px;}
    main .whyneed-slide-video .container, main .problem-solving-sec .container{padding-left: 16px; padding-right: 16px;}
    main .whyneed-slide-video .slide-left-content::before, main .problem-solving-sec .slide-left-content::before{margin-bottom: 18px;}
    main .whyneed-slide-video .slide-left-content h1, main .problem-solving-sec .slide-left-content h1{font-size: 32px; margin-bottom: 16px;}
    main .whyneed-slide-video .slide-left-content p, main .problem-solving-sec .slide-left-content p{font-size: 16px; line-height: 27px;}
    main .whyneed-slide-video .slide-left-content p:first-of-type{font-size: 17px;}
    main .problem-solving-sec .slide-left-content .bulltet-list li{padding-left: 40px; font-size: 15px; line-height: 25px;}
    main .whyneed-slide-video .slide-left-content .right-btn, main .problem-solving-sec .slide-left-content .right-btn{flex-direction: column;}
    main .whyneed-slide-video .slide-left-content .right-btn li, main .whyneed-slide-video .slide-left-content .btn-5, main .problem-solving-sec .slide-left-content .btn-5{width: 100%; justify-content: center;}
    main .whyneed-slide-video .row > [class*="col-"]:last-child img, main .problem-solving-sec .row > [class*="col-"]:last-child img{border-radius: 18px !important; box-shadow: 0 0 0 6px rgba(255,255,255,.75), 0 0 0 7px rgba(11,117,214,.12), 0 30px 60px -28px rgba(38,60,160,.45);}
}
@media (prefers-reduced-motion: reduce){
    main .whyneed-slide-video .row > [class*="col-"]:last-child img, main .problem-solving-sec .row > [class*="col-"]:last-child img{animation: none;}
}