:root{
    --ipd-blue: #3858e9;
    --ipd-blue-dark: #2847d2;
    --ipd-blue-soft: rgba(56, 88, 233, .1);
    --ipd-text: #111111;
    --ipd-muted: rgba(17, 17, 17, .68);
    --ipd-line: #e2e2e2;
    --ipd-soft: #f6f6f6;
    --ipd-white: #ffffff;
    --ipd-shadow: 0 14px 40px rgba(19, 31, 65, .12);
    --ipd-radius: 8px;
    --ipd-page-width: 1480px;
}

html{scroll-behavior: smooth;}

body{
    margin: 0;
    background: var(--ipd-soft);
    color: var(--ipd-text);
    font-family: Rubik, Arial, sans-serif;
    overflow-x: hidden;
}

.demos-page,
.demos-page *{box-sizing: border-box;}

.demos-page a{
    color: inherit;
    text-decoration: none;
}

.demos-page{
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(56, 88, 233, .16), transparent 34vw),
        linear-gradient(180deg, #ffffff 0, #f6f6f6 700px, #ffffff 100%);
}

.demos-page .site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(226, 226, 226, .86);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
}

.demos-page .site-header-inner,
.demos-page .section-inner{
    width: calc(100% - 48px);
    max-width: var(--ipd-page-width);
    margin: 0 auto;
}

.demos-page main > section:not(:last-child){
    border-bottom: 1px solid rgba(226, 226, 226, .75);
}

.demos-page .site-header-inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    gap: 26px;
}

.demos-page .brand{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.demos-page .brand-logo{
    display: block;
    width: 248px;
    height: auto;
}

.demos-page .nav-links{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font: 600 13px Inter, sans-serif;
}

.demos-page .nav-links a{
    color: rgba(17, 17, 17, .72);
    border-bottom: 0 !important;
    background-image: linear-gradient(var(--ipd-blue), var(--ipd-blue));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    text-decoration: none;
    transition: background-size .6s cubic-bezier(.215, .61, .355, 1), color .25s ease-out;
}

.demos-page .nav-links a:hover,
.demos-page .nav-links a.active{
    color: var(--ipd-blue) !important;
}

.demos-page .nav-links a:hover{
    background-size: 100% 1px;
}

.demos-page .nav-buy-trigger{
    color: rgba(17, 17, 17, .72);
    transition: color .25s ease-out;
}

.demos-page .nav-buy{
    position: relative;
    display: flex;
    align-items: center;
}

.demos-page .nav-buy:after{
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 10px;
}

.demos-page .nav-buy-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(56, 88, 233, .26);
    border-radius: 6px;
    background: var(--ipd-blue-soft);
    color: var(--ipd-blue);
    font: inherit;
    cursor: pointer;
    transition: background .25s ease-out, border-color .25s ease-out, color .25s ease-out, transform .25s ease-out;
}

.demos-page .nav-buy-trigger:hover,
.demos-page .nav-buy:focus-within .nav-buy-trigger{
    border-color: var(--ipd-blue-dark);
    background: var(--ipd-blue-dark);
    color: #ffffff;
}

.demos-page .nav-buy-dropdown{
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 232px;
    padding: 8px;
    border: 1px solid var(--ipd-line);
    border-radius: var(--ipd-radius);
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--ipd-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity .25s ease-out, transform .25s ease-out, visibility .25s ease-out;
}

.demos-page .nav-buy:hover .nav-buy-dropdown,
.demos-page .nav-buy:focus-within .nav-buy-dropdown{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.demos-page .nav-buy-dropdown a{
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 11px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .25s ease-out, color .25s ease-out;
}

.demos-page .nav-buy-dropdown a:hover{
    background: var(--ipd-blue-soft);
    color: var(--ipd-blue);
}

.demos-page .nav-mobile-buy-link{display: none;}

.demos-page .menu-toggle{
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--ipd-line);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .25s ease-out, background .25s ease-out;
}

.demos-page .menu-toggle:hover{
    border-color: rgba(56, 88, 233, .34);
    background: var(--ipd-blue-soft);
}

.demos-page .menu-toggle span,
.demos-page .menu-toggle span:before,
.demos-page .menu-toggle span:after{
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ipd-text);
    transition: transform .25s ease-out, opacity .25s ease-out, background .25s ease-out;
}

.demos-page .menu-toggle span{position: relative;}

.demos-page .menu-toggle span:before,
.demos-page .menu-toggle span:after{
    content: "";
    position: absolute;
    left: 0;
}

.demos-page .menu-toggle span:before{top: -5px;}
.demos-page .menu-toggle span:after{top: 5px;}
.demos-page .site-header.menu-open .menu-toggle span{background: transparent;}
.demos-page .site-header.menu-open .menu-toggle span:before{transform: translateY(5px) rotate(45deg);}
.demos-page .site-header.menu-open .menu-toggle span:after{transform: translateY(-5px) rotate(-45deg);}

.demos-page .demos-hero{
    padding: 92px 0 52px;
    text-align: center;
}

.demos-page .eyebrow{
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 20px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ipd-blue-soft);
    color: var(--ipd-blue);
    font: 800 11px Inter, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.demos-page .demos-hero h1{
    max-width: 850px;
    margin: 0 auto 28px;
    font: 900 clamp(40px, 5vw, 68px)/1.02 Inter, sans-serif;
    letter-spacing: -.035em;
}

.demos-page .demos-hero p{
    max-width: 760px;
    margin: 0 auto;
    color: var(--ipd-muted);
    font: 400 17px/1.5 Rubik, sans-serif;
}

.demos-page .demos-section{padding: 26px 0 96px;}

.demos-page .demo-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.demos-page .demo-card{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ipd-line);
    border-radius: 12px;
    background: var(--ipd-white);
    box-shadow: 0 12px 34px rgba(19, 31, 65, .08);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: border-color .32s ease-out, box-shadow .32s ease-out, transform .42s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.demos-page .demo-card:hover{
    border-color: rgba(56, 88, 233, .3);
    box-shadow: var(--ipd-shadow);
    transform: translate3d(0, -4px, 0);
}

.demos-page .demo-preview{
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 24px;
    overflow: hidden;
    border-bottom: 1px solid var(--ipd-line);
    background:
        linear-gradient(45deg, rgba(56, 88, 233, .025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(56, 88, 233, .025) 25%, transparent 25%),
        #f2f2f2;
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    contain: paint;
}

.demos-page .demo-preview img{
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
    image-rendering: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform .48s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.demos-page .demo-card:hover .demo-preview img{transform: translate3d(0, 0, 0) scale(1.025);}

.demos-page .demo-card-content{
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 26px 26px;
}

.demos-page .demo-card h2{
    margin: 0 0 12px;
    font: 850 23px/1.2 Inter, sans-serif;
}

.demos-page .demo-card p{
    margin: 0;
    color: var(--ipd-muted);
    font: 400 15px/1.42 Rubik, sans-serif;
}

.demos-page .button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid rgba(56, 88, 233, .26);
    border-radius: 6px;
    background: var(--ipd-blue-soft);
    color: var(--ipd-blue);
    font: 700 13px Inter, sans-serif;
    transition: background .25s ease-out, border-color .25s ease-out, color .25s ease-out, transform .25s ease-out;
}

.demos-page .button:hover{
    border-color: var(--ipd-blue-dark);
    background: var(--ipd-blue-dark);
    color: #ffffff;
}

.demos-page .demos-cta{padding: 0 0 96px;}

.demos-page .cta-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    padding: 38px 40px;
    border-radius: 12px;
    background: #111111;
    color: #ffffff;
    box-shadow: var(--ipd-shadow);
}

.demos-page .cta-box h2{
    margin: 0 0 9px;
    font: 850 30px/1.15 Inter, sans-serif;
}

.demos-page .cta-box p{
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font: 400 15px/1.46 Rubik, sans-serif;
}

.demos-page .cta-actions{
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.demos-page .cta-actions .button,
.demos-page .cta-actions .button.secondary{
    border-color: rgba(88, 113, 238, .62);
    background: rgba(56, 88, 233, .3);
    color: #ffffff;
}

.demos-page .cta-actions .button:hover,
.demos-page .cta-actions .button.secondary:hover{
    border-color: var(--ipd-blue-dark);
    background: var(--ipd-blue-dark);
    color: #ffffff;
}

.demos-page .site-footer{
    border-top: 1px solid var(--ipd-line);
    background: #ffffff;
}

.demos-page .site-footer .section-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    gap: 20px;
    color: var(--ipd-muted);
    font: 400 13px/1.4 Rubik, sans-serif;
}

.demos-page .footer-links{
    display: flex;
    align-items: center;
    gap: 18px;
}

.demos-page .footer-links a{transition: color .25s ease-out;}
.demos-page .footer-links a:hover{color: var(--ipd-blue);}

@media (max-width: 1120px){
    .demos-page .demo-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}

    .demos-page .menu-toggle{display: inline-flex;}

    .demos-page .nav-links{
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 40;
        display: grid;
        width: max-content;
        min-width: 240px;
        padding: 10px;
        border: 1px solid var(--ipd-line);
        border-radius: var(--ipd-radius);
        background: rgba(255, 255, 255, .98);
        box-shadow: var(--ipd-shadow);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        visibility: hidden;
        transition: opacity .25s ease-out, transform .25s ease-out, visibility .25s ease-out;
    }

    .demos-page .site-header.menu-open .nav-links{
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .demos-page .nav-links > a{
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 6px;
    }

    .demos-page .nav-links > a:hover{background: var(--ipd-blue-soft);}
    .demos-page .nav-buy{display: none;}
    .demos-page .nav-mobile-buy-link{display: flex;}
}

@media (max-width: 760px){
    .demos-page .site-header-inner,
    .demos-page .section-inner{width: calc(100% - 20px);}
    .demos-page .brand-logo{width: 220px;}
    .demos-page .demos-hero{padding: 68px 0 36px;}
    .demos-page .demos-hero p{font-size: 15px;}
    .demos-page .demo-grid{grid-template-columns: 1fr; gap: 16px;}
    .demos-page .demo-preview{min-height: 300px; padding: 24px;}
    .demos-page .demo-preview img{height: 260px;}
    .demos-page .demo-card-content{align-items: flex-start; padding: 22px;}
    .demos-page .cta-box{align-items: flex-start; flex-direction: column; padding: 30px 26px;}
    .demos-page .site-footer .section-inner{align-items: flex-start; flex-direction: column; padding: 20px 0;}
    .demos-page .footer-links{align-items: flex-start; flex-direction: column; gap: 8px;}
}

@media (max-width: 500px){
    .demos-page .brand-logo{width: 196px;}
    .demos-page .nav-links{right: 0; max-width: calc(100vw - 20px);}
    .demos-page .demo-card-content{flex-direction: column;}
    .demos-page .button{width: 100%;}
    .demos-page .cta-actions{flex-direction: column; width: 100%;}
}