:root {
    --navy: #101c3d;
    --blue: #086AD8;
    --blue-dark: #0f4bd8;
    --text: #182230;
    --muted: #5f6b7a;
    --line: #e5eaf1;
    --light: #f5f8fc;
    --white: #fff;
    --shadow: 0 18px 55px rgba(15,32,67,.12);
}
/* Hero carousel */
.hero-wrap {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 92% 18%, rgba(21,94,239,.13), transparent 30%), linear-gradient(135deg,#f7faff 0%,#edf4ff 48%,#fff 100%);
    border-bottom: 1px solid var(--line);
}

.carousel {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    touch-action: pan-y;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    z-index: 1;
    backface-visibility: hidden;
    will-change: opacity;
}

    .slide.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 2;
        animation: dnnSlideFadeIn .72s ease both;
    }

    .slide.leaving {
        opacity: 0;
        visibility: visible;
        pointer-events: none;
        z-index: 3;
        animation: dnnSlideFadeOut .72s ease both;
    }

@keyframes dnnSlideFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes dnnSlideFadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 800;
    margin-bottom: 16px;
}

    .eyebrow:before {
        content: "";
        width: 28px;
        height: 3px;
        border-radius: 99px;
        background: var(--blue);
    }


.hero-copy {
    font-size: 18px;
    color: var(--muted);
    max-width: 690px;
    margin: 0 0 30px;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}



.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid rgba(99,115,140,.18);
    padding-top: 22px;
}

.trust-item {
    padding: 0 18px;
    border-right: 1px solid #dbe2ec;
    font-size: 12px;
    color: #687386
}

    .trust-item:first-child {
        padding-left: 0
    }

    .trust-item:last-child {
        border: 0
    }

/* visual-contact mockup */
.visual-contact {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard {
    width: min(505px,100%);
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
    position: relative;
    z-index: 2;
}

.d-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.dots {
    display: flex;
    gap: 5px
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d0dd
}

.d-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--navy)
}

.d-body {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 14px;
    padding-top: 16px
}

.sidebar {
    background: #f5f7fb;
    border-radius: 10px;
    padding: 10px
}

.side-row {
    height: 26px;
    border-radius: 6px;
    background: #e6ebf3;
    margin-bottom: 8px
}

    .side-row.active {
        background: #d6e4ff
    }

.panel {
    display: grid;
    gap: 10px
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px
}

.metric {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px
}

    .metric strong {
        display: block;
        font-size: 19px;
        color: var(--navy)
    }

    .metric span {
        font-size: 10px;
        color: #7a8594
    }

.code {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px
}

.code-line {
    height: 8px;
    border-radius: 8px;
    background: #e7ecf3;
    margin: 8px 0
}

    .code-line.w1 {
        width: 84%
    }

    .code-line.w2 {
        width: 64%
    }

    .code-line.w3 {
        width: 91%
    }

    .code-line.w4 {
        width: 48%
    }

.badge {
    position: absolute;
    right: -18px;
    top: 54px;
    background: #fff;
    border: 1px solid #dae3ef;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    border-radius: 12px;
    padding: 14px 16px;
    z-index: 3
}

    .badge strong {
        display: block;
        font-size: 12px;
        color: var(--navy)
    }

    .badge span {
        font-size: 11px;
        color: #687386
    }

.floating {
    position: absolute;
    left: -22px;
    bottom: 48px;
    width: 172px;
    background: #fff;
    border: 1px solid #dae3ef;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    border-radius: 12px;
    padding: 14px;
    z-index: 3;
}

    .floating .check {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 700;
        margin: 7px 0;
        color: #485669
    }

.check i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #dce8ff;
    display: inline-block
}


/* Self-contained entrance animation system (no external CDN dependency,
        so it can never silently fail to load and break the effect below). */
.dnn-anim {
    animation-duration: .8s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

    .dnn-anim.delay-1 {
        animation-delay: .08s
    }

    .dnn-anim.delay-2 {
        animation-delay: .16s
    }

    .dnn-anim.delay-3 {
        animation-delay: .24s
    }

    .dnn-anim.delay-4 {
        animation-delay: .32s
    }

    .dnn-anim.delay-5 {
        animation-delay: .40s
    }

    .dnn-anim.delay-6 {
        animation-delay: .48s
    }

    .dnn-anim.delay-7 {
        animation-delay: .56s
    }

    .dnn-anim.motion-slow {
        animation-duration: 1s
    }

    .dnn-anim.motion-slower {
        animation-duration: 1.1s
    }

.dnn-fadeInUp {
    animation-name: dnnFadeInUp
}

.dnn-fadeInRight {
    animation-name: dnnFadeInRight
}

.dnn-zoomIn {
    animation-name: dnnZoomIn
}

.dnn-flipInY {
    animation-name: dnnFlipInY
}

@keyframes dnnFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes dnnFadeInRight {
    from {
        opacity: 0;
        transform: translateX(18px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes dnnZoomIn {
    from {
        opacity: 0;
        transform: scale(.92)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes dnnFlipInY {
    from {
        opacity: 0;
        transform: perspective(700px) rotateY(38deg)
    }

    to {
        opacity: 1;
        transform: perspective(700px) rotateY(0)
    }
}

/* Slide 2 */
.problem-card {
    width: min(505px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 22px
}

.problem-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px
}

    .problem-head strong {
        font-size: 14px;
        color: var(--navy)
    }

.status {
    font-size: 11px;
    padding: 5px 8px;
    background: #fff4e5;
    border-radius: 999px;
    color: #9a5b00;
    font-weight: 700
}

.problem {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 15px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 12px 0
}

    .problem:first-of-type {
        border-top: 0
    }

    .problem span {
        font-size: 12px;
        color: #566375
    }

.progress {
    height: 7px;
    background: #eef1f5;
    border-radius: 99px;
    overflow: hidden;
    width: 120px
}

    .progress i {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: #7f8ea5
    }

        .progress i.p85 {
            width: 85%
        }

        .progress i.p62 {
            width: 62%
        }

        .progress i.p42 {
            width: 42%
        }

        .progress i.p28 {
            width: 28%
        }

/* Slide 3 */
.enterprise {
    width: min(505px,100%);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 13px;
}

.e-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 14px 32px rgba(15,32,67,.08)
}

    .e-card b {
        display: block;
        font-size: 13px;
        color: var(--navy);
        margin-bottom: 5px
    }

    .e-card span {
        font-size: 11px;
        color: #687386
    }

.icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #e8f0ff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-weight: 900;
    font-size: 13px
}

/* Controls */
.controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 20;
}

.arrow {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d1d9e5;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(15,32,67,.08);
    transition: all .2s ease;
}

    .arrow:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15,32,67,.12);
    }

    .arrow:focus-visible,
    .nav-dot:focus-visible {
        outline: 3px solid rgba(21,94,239,.25);
        outline-offset: 3px;
    }

.dots-nav {
    display: flex;
    gap: 7px;
    margin: 0 5px
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d1de;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: all .28s ease;
}

    .nav-dot.active {
        width: 23px;
        border-radius: 20px;
        background: var(--blue)
    }

.slide-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 76px;
    font-size: 11px;
    color: #718094;
    font-weight: 700;
    white-space: nowrap;
}


/* Service marquee: SEO-friendly, readable service phrases beneath carousel controls */
.dnn-service-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    z-index: 19;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid rgba(21,94,239,.10);
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 -5px 18px rgba(15,32,67,.04);
}

    .dnn-service-marquee::before, .dnn-service-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 72px;
        z-index: 2;
        pointer-events: none;
    }

    .dnn-service-marquee::before {
        left: 0;
        background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%);
    }

    .dnn-service-marquee::after {
        right: 0;
        background: linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%);
    }

.dnn-marquee-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    animation: dnnServiceMarquee 48s linear infinite;
    will-change: transform;
}

.dnn-marquee-set {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.dnn-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-right: 36px;
    color: #4f5f75;
    /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

    .dnn-marquee-item strong {
        color: #152343;
        font-weight: 700;
    }

    .dnn-marquee-item .marquee-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: #eaf1ff;
        color: #155eef;
        font-size: 12px;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(21,94,239,.06);
    }

.dnn-service-marquee:hover .dnn-marquee-track, .dnn-service-marquee:focus-within .dnn-marquee-track {
    animation-play-state: paused;
}

@keyframes dnnServiceMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dnn-marquee-track {
        animation: none !important;
        transform: none !important;
        width: 100%;
        justify-content: center;
    }

    .dnn-marquee-set:nth-child(2) {
        display: none;
    }
}

/* Below fold demo */
.demo-section {
    padding: 72px 0;
    background: #fff
}

.section-kicker {
    text-align: center;
    color: var(--blue);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.demo-section h2 {
    text-align: center;
    color: var(--navy);
    font-size: 36px;
    line-height: 1.15;
    margin: 8px 0 14px
}

.demo-section p.lead {
    text-align: center;
    color: var(--muted);
    max-width: 760px;
    margin: 0 auto 36px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.service {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px
}

    .service h3 {
        margin: 0 0 7px;
        color: var(--navy);
        font-size: 17px
    }

    .service p {
        margin: 0;
        color: #687386;
        font-size: 13px
    }


@media (prefers-reduced-motion: reduce) {
    .dashboard, .badge, .floating, .dashboard .side-row, .dashboard .metric,
    .code-line:after, .problem-card, .problem, .progress:after,
    .enterprise .e-card, .enterprise .icon {
        animation: none !important;
    }
}

/* Responsive */
.menu-btn {
    display: none
}

@media (prefers-reduced-motion: reduce) {
    .slide {
        transition: none !important;
        transform: none !important;
    }

    .arrow, .nav-dot {
        transition: none !important
    }

    .dnn-anim {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media(max-width:980px) {
    .navlinks {
        display: none
    }

    .menu-btn {
        display: block;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 7px;
        padding: 10px 12px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 58px 0 92px
    }

    .visual-contact {
        min-height: 385px
    }

    .carousel, .slide {
        min-height: auto
    }

    .service-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .topbar {
        display: none
    }

    .nav-inner {
        min-height: 66px
    }

    .navcta {
        padding: 10px 13px;
        font-size: 12px
    }

    h1 {
        font-size: 40px;
        letter-spacing: -1px
    }

    .hero-copy {
        font-size: 16px
    }

    .trust {
        gap: 10px
    }

    .trust-item {
        padding: 0 10px 0 0;
        border: 0
    }

    .visual-contact {
        min-height: 325px
    }

    .dashboard, .problem-card {
        transform: scale(.9);
        transform-origin: center
    }

    .enterprise {
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .e-card {
        padding: 14px
    }

    .controls {
        bottom: 18px
    }

    .slide-label {
        bottom: 64px
    }

    .arrow {
        width: 36px;
        height: 36px;
        font-size: 19px
    }

    .service-grid {
        grid-template-columns: 1fr
    }
}

/* Compact above-the-fold hero */
.hero-wrap .carousel,
.hero-wrap .slide {
    min-height: 500px
}

.hero-wrap .hero-grid {
    gap: 34px;
    /*padding-top: 24px;*/
    padding-bottom: 30px
}

.hero-wrap h1 {
    font-size: clamp(31px,3.6vw,48px);
    line-height: 1.08;
    margin-bottom: 14px
}

.hero-wrap .hero-copy {
    font-size: 15px;
    line-height: 1.5;
    max-width: 610px;
    margin-bottom: 20px
}

.hero-wrap .eyebrow {
    font-size: 11px;
    margin-bottom: 12px
}

.hero-wrap .actions .btn {
    min-height: 42px;
    padding: 0 15px;
    font-size: 13px
}

.hero-wrap .trust {
    margin-top: 19px;
    padding-top: 14px
}

.hero-wrap .trust-item {
    font-size: 10px;
    line-height: 1.35;
    padding-left: 12px;
    padding-right: 12px
}

.hero-wrap .visual-contact {
    min-height: 330px
}

.hero-wrap .dashboard {
    width: min(425px,100%);
    padding: 12px;
    border-radius: 15px
}

.hero-wrap .d-top {
    padding-bottom: 11px
}

.hero-wrap .d-body {
    grid-template-columns: 82px 1fr;
    gap: 9px;
    padding-top: 11px
}

.hero-wrap .side-row {
    height: 18px;
    margin-bottom: 5px
}

.hero-wrap .metric {
    padding: 8px
}

    .hero-wrap .metric strong {
        font-size: 15px
    }

    .hero-wrap .metric span {
        font-size: 9px
    }

.hero-wrap .code {
    padding: 9px
}

.hero-wrap .code-line {
    height: 6px;
    margin: 6px 0
}

.hero-wrap .badge {
    right: -6px;
    top: 34px;
    padding: 9px 11px;
    border-radius: 10px
}

    .hero-wrap .badge strong {
        font-size: 10px
    }

    .hero-wrap .badge span {
        font-size: 9px
    }

.hero-wrap .floating {
    left: -7px;
    bottom: 24px;
    width: 142px;
    padding: 9px;
    border-radius: 10px
}

    .hero-wrap .floating strong,
    .hero-wrap .floating .check {
        font-size: 9px !important
    }

.hero-wrap .check i {
    width: 12px;
    height: 12px
}

.hero-wrap .problem-card {
    width: min(425px,100%);
    padding: 15px;
    border-radius: 15px
}

.hero-wrap .problem-head {
    margin-bottom: 12px
}

    .hero-wrap .problem-head strong {
        font-size: 11px
    }

.hero-wrap .status {
    font-size: 9px;
    padding: 4px 6px
}

.hero-wrap .problem {
    padding: 8px 0
}

    .hero-wrap .problem span {
        font-size: 10px
    }

.hero-wrap .progress {
    width: 95px;
    height: 6px
}

.hero-wrap .enterprise {
    width: min(425px,100%);
    gap: 9px
}

.hero-wrap .e-card {
    padding: 13px;
    border-radius: 12px
}

    .hero-wrap .e-card b {
        font-size: 11px;
        margin-bottom: 3px
    }

    .hero-wrap .e-card span {
        font-size: 9px;
        line-height: 1.35
    }

.hero-wrap .icon {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    font-size: 11px
}

.hero-wrap .controls {
    bottom: 59px
}

.hero-wrap .slide-label {
    bottom: 98px;
    font-size: 10px
}

@media(max-width:980px) {
    .hero-wrap .carousel,
    .hero-wrap .slide {
        min-height: 455px
    }

    .hero-wrap .hero-grid {
        padding-top: 22px;
        padding-bottom: 52px
    }

    .hero-wrap .visual-contact {
        min-height: 285px
    }
}

@media(max-width:640px) {
    .hero-wrap .carousel,
    .hero-wrap .slide {
        min-height: 425px
    }

    .hero-wrap .hero-grid {
        padding-top: 22px;
        padding-bottom: 54px
    }

    .hero-wrap h1 {
        font-size: 34px
    }

    .hero-wrap .visual-contact {
        min-height: 230px
    }

    .hero-wrap .dashboard,
    .hero-wrap .problem-card {
        transform: scale(.88)
    }

    .hero-wrap .controls {
        bottom: 13px
    }

    .hero-wrap .slide-label {
        bottom: 52px
    }
}




/* Same-space vertical floating wrappers.
        Wrapper owns translateY; Animate.css owns the inner object's entrance transform. */
.dnn-float-wrap {
    animation: dnnSameSpaceFloat 4.8s ease-in-out infinite;
    will-change: transform;
}

    .dnn-float-wrap.f2 {
        animation-duration: 5.2s;
        animation-delay: .55s
    }

    .dnn-float-wrap.f3 {
        animation-duration: 4.5s;
        animation-delay: 1.1s
    }

    .dnn-float-wrap.f4 {
        animation-duration: 5.8s;
        animation-delay: .85s
    }

    .dnn-float-wrap.f5 {
        animation-duration: 4.9s;
        animation-delay: 1.35s
    }

    .dnn-float-wrap.f6 {
        animation-duration: 5.5s;
        animation-delay: .3s
    }

@keyframes dnnSameSpaceFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-13px)
    }
}
/* Preserve exact absolute positioning for the two floating cards. */
.visual-contact > .float-badge-wrap {
    position: absolute;
    right: -6px;
    top: 34px;
    z-index: 3;
}

.visual-contact > .float-health-wrap {
    position: absolute;
    left: -7px;
    bottom: 24px;
    z-index: 3;
}

    .visual-contact > .float-badge-wrap .badge,
    .visual-contact > .float-health-wrap .floating {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .slide {
        animation: none !important;
        transition: none !important
    }

    .dnn-float-wrap {
        animation: none !important;
        transform: none !important
    }
}

.hero-wrap {
    background: radial-gradient(circle at 90% 20%,rgba(21,94,239,.075),transparent 29%), linear-gradient(135deg,#fafcff 0%,#f5f8fd 52%,#ffffff 100%);
}

    .hero-wrap h1 {
        /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
        color: #0f1d3b;
        font-size: 35px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1.12;
    }

    .hero-wrap .hero-copy {
        /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
        color: #667085;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
    }

    .hero-wrap .eyebrow {
        color: #155eef;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
    }

    .hero-wrap .btn {
        /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
        font-size: 12px;
        font-weight: 600;
        border-radius: 5px;
    }

    .hero-wrap .btn-primary {
        background: #155eef;
        box-shadow: 0 8px 22px rgba(21,94,239,.16);
    }

        .hero-wrap .btn-primary:hover {
            background: #0f4fd4;
        }

    .hero-wrap .btn-secondary {
        border-color: #d7deea;
        color: #24324b;
    }

    .hero-wrap .trust-item {
        /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
        font-size: 10px;
        color: #7b8798;
    }

        .hero-wrap .trust-item strong {
            color: #24324b;
            font-weight: 600;
        }

.dashboard,
.problem-card,
.e-card,
.badge,
.floating {
    /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
}

    .dashboard .d-title,
    .problem-head strong,
    .e-card b {
        font-weight: 600;
        color: #162341;
    }

    .dashboard .metric strong {
        font-weight: 700;
        color: #142244;
    }

    .dashboard .metric span,
    .dashboard .badge span,
    .floating .check,
    .problem span,
    .e-card span {
        color: #718096;
    }

.demo-section {
    /*font-family: "Poppins",Arial,Helvetica,sans-serif;*/
}

    .demo-section .section-kicker,
    .section-kicker {
        color: #155eef;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .85px;
    }

    .demo-section h2 {
        font-size: 34px;
        font-weight: 700;
        color: #0f1d3b;
    }

    .demo-section p.lead {
        color: #6b7688;
        font-size: 14px;
        line-height: 1.7;
    }

.service h3 {
    font-size: 17px;
    color: #152343;
    font-weight: 600;
}

.service p {
    font-size: 12px;
    line-height: 1.7;
    color: #738095;
}

@media(max-width:980px) {
    h1 {
        font-size: 42px
    }

    h2 {
        font-size: 31px
    }

    h3 {
        font-size: 23px
    }

    h4 {
        font-size: 19px
    }

    .hero-wrap h1 {
        font-size: 42px
    }
}

@media(max-width:640px) {
    .dnn-service-marquee {
        height: 38px;
    }

        .dnn-service-marquee::before, .dnn-service-marquee::after {
            width: 34px;
        }

    .dnn-marquee-item {
        font-size: 9px;
        margin-right: 24px;
        gap: 6px;
    }

        .dnn-marquee-item .marquee-icon {
            width: 19px;
            height: 19px;
            border-radius: 6px;
            font-size: 10px;
        }

    h1 {
        font-size: 34px
    }

    h2 {
        font-size: 28px
    }

    h3 {
        font-size: 21px
    }

    h4 {
        font-size: 18px
    }

    h5 {
        font-size: 16px
    }

    h6 {
        font-size: 13px
    }

    .hero-wrap h1 {
        font-size: 34px;
        letter-spacing: -.8px;
    }

    .hero-wrap .hero-copy {
        font-size: 14px;
        line-height: 1.65;
    }
}


/* =========================================================
   FULLY RESPONSIVE DNN HERO CAROUSEL
   Final override layer.
   ========================================================= */

.hero-wrap .carousel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0 !important;
    height: auto;
    overflow: hidden;
    touch-action: pan-y;
    padding-bottom: 78px;
}

    .hero-wrap .carousel .slide {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        width: 100%;
        min-height: 0 !important;
        height: auto;
        display: flex;
        align-items: stretch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        z-index: 1;
        overflow: visible;
    }

        .hero-wrap .carousel .slide.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            z-index: 2;
        }

        .hero-wrap .carousel .slide.leaving {
            opacity: 0;
            visibility: visible;
            pointer-events: none;
            z-index: 3;
        }

.hero-wrap .hero-grid,
.hero-wrap .hero-grid > div,
.hero-wrap .visual-contact,
.hero-wrap .dashboard,
.hero-wrap .problem-card,
.hero-wrap .enterprise,
.hero-wrap .e-card {
    min-width: 0;
    max-width: 100%;
}

.hero-wrap .hero-grid {
    width: 100%;
}

.hero-wrap .visual-contact {
    width: 100%;
    overflow: visible;
}

.hero-wrap .dashboard,
.hero-wrap .problem-card,
.hero-wrap .enterprise {
    width: min(100%, 505px);
}

.hero-wrap .controls {
    bottom: 100px;
    z-index: 40;
}

.hero-wrap .slide-label {
    bottom: 67px;
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 39;
}


/* =========================================================
   FULL-WIDTH SERVICE MARQUEE
   ========================================================= */

.hero-wrap .dnn-service-marquee {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 100vw;
    width: 100dvw;
    max-width: none;
    transform: translateX(-50%);
    height: 48px;
    z-index: 50;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    border-top: 1px solid rgba(21,94,239,.10);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 -5px 18px rgba(15,32,67,.04);
}

.hero-wrap .dnn-marquee-track {
    display: flex;
    width: max-content;
    min-width: max-content;
    flex-shrink: 0;
    animation: dnnServiceMarquee 150s linear infinite;
    will-change: transform;
}

.hero-wrap .dnn-marquee-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hero-wrap .dnn-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-right: 42px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
}

.hero-wrap .dnn-service-marquee::before,
.hero-wrap .dnn-service-marquee::after {
    z-index: 2;
    width: 72px;
}

.hero-wrap .dnn-service-marquee:hover .dnn-marquee-track,
.hero-wrap .dnn-service-marquee:focus-within .dnn-marquee-track {
    animation-play-state: paused;
}


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   ========================================================= */

@media (max-width: 1100px) {

    .hero-wrap .hero-grid {
        gap: 36px;
    }

    .hero-wrap .dnn-service-marquee {
        height: 46px;
    }

    .hero-wrap .dnn-marquee-item {
        margin-right: 34px;
        font-size: 10.5px;
    }
}


/* =========================================================
   TABLET: 981px - 1100px
   ========================================================= */

@media (min-width: 981px) and (max-width: 1100px) {

    .hero-wrap .hero-grid {
        grid-template-columns: 1fr .92fr;
        gap: 30px;
    }

    .hero-wrap .hero-copy {
        max-width: 620px;
    }

    .hero-wrap .visual-contact {
        min-height: 390px;
    }
}


/* =========================================================
   TABLET PORTRAIT: <= 980px
   ========================================================= */

@media (max-width: 980px) {

    .hero-wrap .carousel {
        padding-bottom: 102px;
    }

    .hero-wrap .hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 0 20px;
        align-items: start;
    }

    .hero-wrap .hero-copy {
        max-width: 760px;
    }

    .hero-wrap .actions {
        width: 100%;
    }

    .hero-wrap .visual-contact {
        min-height: 285px;
        margin-top: 2px;
    }

    .hero-wrap .dashboard,
    .hero-wrap .problem-card,
    .hero-wrap .enterprise {
        width: min(560px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-wrap .visual-contact > .float-badge-wrap {
        right: 0;
    }

    .hero-wrap .visual-contact > .float-health-wrap {
        left: 0;
    }

    .hero-wrap .controls {
        bottom: 45px;
    }

    .hero-wrap .slide-label {
        bottom: 90px;
    }
}


/* =========================================================
   MOBILE: <= 640px
   ========================================================= */

@media (max-width: 640px) {

    .hero-wrap .carousel {
        padding-bottom: 106px;
    }

    .hero-wrap .hero-grid {
        gap: 17px;
        padding: 22px 0 10px;
    }

    .hero-wrap h1 {
        font-size: clamp(30px, 8vw, 36px);
        line-height: 1.12;
        letter-spacing: -.8px;
        overflow-wrap: anywhere;
    }

    .hero-wrap .hero-copy {
        font-size: 14px;
        line-height: 1.62;
        max-width: none;
        margin-bottom: 18px;
    }

    .hero-wrap .actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

        .hero-wrap .actions .btn {
            width: 100%;
            max-width: 100%;
            min-height: 44px;
            padding-left: 14px;
            padding-right: 14px;
            text-align: center;
        }

    .hero-wrap .trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 0;
        margin-top: 18px;
        padding-top: 13px;
    }

    .hero-wrap .trust-item,
    .hero-wrap .trust-item:first-child,
    .hero-wrap .trust-item:last-child {
        min-width: 0;
        padding: 0 10px;
        border: 0;
        border-left: 1px solid #dbe2ec;
        font-size: 10px;
        line-height: 1.35;
    }

        .hero-wrap .trust-item:nth-child(odd) {
            padding-left: 0;
            border-left: 0;
        }

    .hero-wrap .visual-contact {
        min-height: 230px;
        margin-top: 0;
    }

    .hero-wrap .dashboard,
    .hero-wrap .problem-card {
        width: 100%;
        max-width: 100%;
        transform: none !important;
    }

    .hero-wrap .dashboard {
        padding: 12px;
        border-radius: 15px;
    }

    .hero-wrap .d-top {
        padding-bottom: 10px;
    }

    .hero-wrap .d-title {
        min-width: 0;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-wrap .d-body {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        padding-top: 10px;
    }

    .hero-wrap .sidebar {
        padding: 8px;
    }

    .hero-wrap .side-row {
        height: 17px;
        margin-bottom: 5px;
    }

    .hero-wrap .metric-row {
        gap: 5px;
    }

    .hero-wrap .metric {
        min-width: 0;
        padding: 7px 5px;
    }

        .hero-wrap .metric strong {
            font-size: 12px;
            white-space: nowrap;
        }

        .hero-wrap .metric span {
            display: block;
            font-size: 7.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .hero-wrap .code {
        padding: 8px;
    }

    .hero-wrap .code-line {
        height: 6px;
        margin: 6px 0;
    }


    /* Slide 2 */
    .hero-wrap .problem-card {
        padding: 13px;
        border-radius: 15px;
    }

    .hero-wrap .problem-head {
        gap: 8px;
        margin-bottom: 10px;
    }

        .hero-wrap .problem-head strong {
            min-width: 0;
            font-size: 10px;
        }

    .hero-wrap .status {
        flex-shrink: 0;
        font-size: 8px;
        padding: 4px 5px;
    }

    .hero-wrap .problem {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        padding: 8px 0;
    }

        .hero-wrap .problem span {
            min-width: 0;
            font-size: 9px;
            overflow-wrap: anywhere;
        }

    .hero-wrap .progress {
        width: 72px;
        max-width: 24vw;
    }


    /* Slide 3 */
    .hero-wrap .enterprise {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-wrap .e-card {
        min-width: 0;
        padding: 10px;
        border-radius: 11px;
    }

        .hero-wrap .e-card b,
        .hero-wrap .e-card span {
            overflow-wrap: anywhere;
        }

        .hero-wrap .e-card b {
            font-size: 10px;
        }

        .hero-wrap .e-card span {
            font-size: 8.5px;
            line-height: 1.35;
        }

    .hero-wrap .icon {
        width: 24px;
        height: 24px;
        margin-bottom: 7px;
        font-size: 10px;
    }


    /* Floating cards */
    .hero-wrap .visual-contact > .float-badge-wrap {
        right: 0;
        top: 8px;
    }

    .hero-wrap .visual-contact > .float-health-wrap {
        left: 0;
        bottom: 8px;
    }

    .hero-wrap .badge {
        max-width: 44%;
        padding: 8px 9px;
    }

    .hero-wrap .floating {
        width: 128px;
        max-width: 44%;
        padding: 8px;
    }


    /* Controls and slide label */
    .hero-wrap .controls {
        bottom: 49px;
        gap: 7px;
    }

    .hero-wrap .slide-label {
        bottom: 86px;
        max-width: calc(100% - 28px);
        font-size: 9px;
    }

    .hero-wrap .arrow {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }


    /* Full-width marquee */
    .hero-wrap .dnn-service-marquee {
        height: 42px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-wrap .dnn-marquee-item {
        font-size: 8.75px;
        margin-right: 24px;
        gap: 6px;
    }

        .hero-wrap .dnn-marquee-item .marquee-icon {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            font-size: 9px;
            flex-shrink: 0;
        }
}


/* =========================================================
   SMALL PHONES: <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .hero-wrap .carousel {
        padding-bottom: 103px;
    }

    .hero-wrap .hero-grid {
        gap: 14px;
    }

    .hero-wrap h1 {
        font-size: clamp(29px, 8.5vw, 34px);
    }

    .hero-wrap .hero-copy {
        font-size: 13.5px;
    }

    .hero-wrap .visual-contact {
        min-height: 218px;
    }

    .hero-wrap .d-body {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .hero-wrap .metric strong {
        font-size: 11.5px;
    }

    .hero-wrap .metric span {
        font-size: 7px;
    }

    .hero-wrap .progress {
        width: 65px;
    }

    .hero-wrap .enterprise {
        gap: 6px;
    }

    .hero-wrap .e-card {
        padding: 9px;
    }

        .hero-wrap .e-card b {
            font-size: 9.5px;
        }

        .hero-wrap .e-card span {
            font-size: 8px;
        }

    .hero-wrap .controls {
        bottom: 47px;
    }

    .hero-wrap .slide-label {
        bottom: 83px;
    }

    .hero-wrap .dnn-service-marquee {
        height: 40px;
    }

    .hero-wrap .dnn-marquee-item {
        font-size: 8.25px;
        margin-right: 20px;
    }
}


/* =========================================================
   EXTRA SMALL PHONES: <= 360px
   ========================================================= */

@media (max-width: 360px) {

    .hero-wrap .carousel {
        padding-bottom: 101px;
    }

    .hero-wrap h1 {
        font-size: 28px;
    }

    .hero-wrap .hero-copy {
        font-size: 13px;
    }

    .hero-wrap .d-body {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 6px;
    }

    .hero-wrap .sidebar {
        padding: 6px;
    }

    .hero-wrap .metric-row {
        gap: 3px;
    }

    .hero-wrap .metric {
        padding: 6px 4px;
    }

        .hero-wrap .metric strong {
            font-size: 10.5px;
        }

        .hero-wrap .metric span {
            font-size: 6.5px;
        }

    .hero-wrap .progress {
        width: 58px;
    }

    .hero-wrap .arrow {
        width: 33px;
        height: 33px;
        font-size: 17px;
    }

    .hero-wrap .floating {
        width: 118px;
    }

    .hero-wrap .dnn-marquee-item {
        font-size: 8px;
        margin-right: 18px;
    }
}


/* Prevent accidental page-wide horizontal scrolling */

@media (prefers-reduced-motion: reduce) {

    .hero-wrap .carousel .slide {
        animation: none !important;
        transition: none !important;
    }

    .hero-wrap .dnn-marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .hero-wrap .dnn-float-wrap {
        animation: none !important;
        transform: none !important;
    }
}


/* Team Members carousel */
.team-visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-card {
    width: min(515px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 20px;
    position: relative;
    z-index: 2;
}

.team-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

    .team-card-head strong {
        font-size: 14px;
        color: var(--navy)
    }

.team-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eaf1ff;
    color: var(--blue);
    white-space: nowrap;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    padding-top: 16px;
}

.team-person {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfe;
}

    .team-person img {
        width: 58px;
        height: 58px;
        border-radius: 12px;
        object-fit: cover;
        display: block;
    }

    .team-person b {
        display: block;
        color: var(--navy);
        font-size: 12px;
        margin-bottom: 2px;
    }

    .team-person span {
        color: #6f7c8f;
        font-size: 10px;
        line-height: 1.35;
    }

.team-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 14px;
}

.team-metric {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px;
    text-align: center;
}

    .team-metric strong {
        display: block;
        color: var(--navy);
        font-size: 17px
    }

    .team-metric span {
        display: block;
        color: #748094;
        font-size: 9px;
        margin-top: 2px
    }

.team-float {
    position: absolute;
    right: -18px;
    top: 44px;
    z-index: 4;
    width: 165px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #dae3ef;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
}

    .team-float strong {
        display: block;
        font-size: 11px;
        color: var(--navy)
    }

    .team-float span {
        display: block;
        font-size: 10px;
        color: #687386;
        margin-top: 4px;
        line-height: 1.35;
    }

.expertise-board {
    width: min(515px,100%);
    display: grid;
    gap: 12px;
}

.expertise-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px 15px;
    box-shadow: 0 12px 28px rgba(15,32,67,.07);
}

.expertise-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1ff;
    color: var(--blue);
    font-weight: 900;
    font-size: 14px;
}

.expertise-row b {
    display: block;
    color: var(--navy);
    font-size: 12px
}

.expertise-row span {
    display: block;
    color: #6e7b8f;
    font-size: 10px;
    margin-top: 2px
}

.expertise-badge {
    font-size: 9px;
    padding: 5px 7px;
    border-radius: 999px;
    background: #f2f5f9;
    color: #5f6b7a;
    font-weight: 800;
    white-space: nowrap;
}

.delivery-board {
    width: min(515px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 20px;
}

.delivery-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

    .delivery-top strong {
        font-size: 14px;
        color: var(--navy)
    }

    .delivery-top span {
        font-size: 10px;
        color: #6b778b;
        text-align: right
    }

.delivery-step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 11px;
    align-items: start;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

    .delivery-step:first-of-type {
        border-top: 0
    }

.delivery-num {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf3ff;
    color: var(--blue);
    font-weight: 900;
    font-size: 11px;
}

.delivery-step b {
    display: block;
    color: var(--navy);
    font-size: 12px
}

.delivery-step span {
    display: block;
    color: #6c788c;
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.4
}

.team-proof {
    position: absolute;
    left: -20px;
    bottom: 42px;
    width: 178px;
    background: #fff;
    border: 1px solid #dae3ef;
    border-radius: 12px;
    padding: 13px 14px;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    z-index: 4;
}

    .team-proof strong {
        display: block;
        font-size: 11px;
        color: var(--navy)
    }

    .team-proof span {
        display: block;
        font-size: 10px;
        color: #687386;
        margin-top: 4px;
        line-height: 1.4
    }

@media(max-width:640px) {
    .team-visual {
        min-height: 360px
    }

    .team-grid {
        grid-template-columns: 1fr
    }

    .team-person {
        grid-template-columns: 52px 1fr
    }

        .team-person img {
            width: 52px;
            height: 52px
        }

    .team-metrics {
        grid-template-columns: repeat(3,1fr)
    }

    .team-float {
        right: -8px;
        top: 26px;
        width: 145px
    }

    .team-proof {
        left: -8px;
        bottom: 24px;
        width: 155px
    }

    .expertise-row {
        grid-template-columns: 38px 1fr
    }

    .expertise-icon {
        width: 38px;
        height: 38px
    }

    .expertise-badge {
        display: none
    }
}

/* Controls */
.controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 20;
}

.arrow {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d1d9e5;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(15,32,67,.08);
    transition: all .2s ease;
}

    .arrow:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15,32,67,.12);
    }

    .arrow:focus-visible,
    .nav-dot:focus-visible {
        outline: 3px solid rgba(21,94,239,.25);
        outline-offset: 3px;
    }

.dots-nav {
    display: flex;
    gap: 7px;
    margin: 0 5px
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d1de;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: all .28s ease;
}

    .nav-dot.active {
        width: 23px;
        border-radius: 20px;
        background: var(--blue)
    }

.slide-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 76px;
    font-size: 11px;
    color: #718094;
    font-weight: 700;
    white-space: nowrap;
}


/* Below fold demo */
.demo-section {
    padding: 72px 0;
    background: #fff
}

.section-kicker {
    text-align: center;
    color: var(--blue);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.demo-section h2 {
    text-align: center;
    color: var(--navy);
    font-size: 36px;
    line-height: 1.15;
    margin: 8px 0 14px
}

.demo-section p.lead {
    text-align: center;
    color: var(--muted);
    max-width: 760px;
    margin: 0 auto 36px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.service {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px
}

    .service h3 {
        margin: 0 0 7px;
        color: var(--navy);
        font-size: 17px
    }

    .service p {
        margin: 0;
        color: #687386;
        font-size: 13px
    }


@media (prefers-reduced-motion: reduce) {
    .dashboard, .badge, .floating, .dashboard .side-row, .dashboard .metric,
    .code-line:after, .problem-card, .problem, .progress:after,
    .enterprise .e-card, .enterprise .icon {
        animation: none !important;
    }
}

/* Responsive */
.menu-btn {
    display: none
}

@media (prefers-reduced-motion: reduce) {
    .slide {
        transition: none !important;
        transform: none !important;
    }

    .arrow, .nav-dot {
        transition: none !important
    }

    .animate__animated {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media(max-width:980px) {
    .navlinks {
        display: none
    }

    .menu-btn {
        display: block;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 7px;
        padding: 10px 12px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 58px 0 92px
    }

    .visual {
        min-height: 385px
    }

    .carousel, .slide {
        min-height: auto
    }

    .service-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .topbar {
        display: none
    }

    .nav-inner {
        min-height: 66px
    }

    .navcta {
        padding: 10px 13px;
        font-size: 12px
    }

    h1 {
        font-size: 40px;
        letter-spacing: -1px
    }

    .hero-copy {
        font-size: 16px
    }

    .trust {
        gap: 10px
    }

    .trust-item {
        padding: 0 10px 0 0;
        border: 0
    }

    .visual {
        min-height: 325px
    }

    .dashboard, .problem-card {
        transform: scale(.9);
        transform-origin: center
    }

    .enterprise {
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .e-card {
        padding: 14px
    }

    .controls {
        bottom: 18px
    }

    .slide-label {
        bottom: 64px
    }

    .arrow {
        width: 36px;
        height: 36px;
        font-size: 19px
    }

    .service-grid {
        grid-template-columns: 1fr
    }
}

```css
/* =========================================================
   CORE DNN CAPABILITIES — SLIDE STYLES
   ========================================================= */
.capability-visual {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

/* Main capability panel */
.capability-shell {
    width: min(525px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(15,32,67,.11);
    padding: 11px;
}

    /* Decorative glow */
    .capability-shell::before {
        content: "";
        position: absolute;
        width: 210px;
        height: 210px;
        right: -85px;
        top: -90px;
        border-radius: 50%;
        background: rgba(21,94,239,.08);
        filter: blur(5px);
        pointer-events: none;
    }

    .capability-shell::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        left: -80px;
        bottom: -80px;
        border-radius: 50%;
        background: rgba(21,94,239,.045);
        pointer-events: none;
    }

/* Header */
.cap-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #edf1f6;
}

    .cap-head strong {
        font-size: 11px;
        line-height: 1.2;
        color: var(--navy);
    }

        .cap-head strong::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--blue);
            box-shadow: 0 0 0 5px rgba(21,94,239,.10);
        }


    .cap-head span {
        font-size: 8px;
        color: #6e7b8f;
    }


/* Capability cards */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 6px;
}

.cap-box {
    position: relative;
    min-height: 68px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fbfcfe;
}

    .cap-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(21,94,239,.035), transparent 55% );
        opacity: 0;
        transition: opacity .25s ease;
    }

    .cap-box:hover {
        transform: translateY(-3px);
        border-color: #bfd1ee;
        background: #fff;
        box-shadow: 0 12px 26px rgba(15,32,67,.09);
    }

        .cap-box:hover::before {
            opacity: 1;
        }

/* Icons */
.cap-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    border-radius: 7px;
    background: #eaf1ff;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 9px;
}
/* Individual icon accents */
.cap-box:nth-child(1) .cap-icon {
    background: #eaf1ff;
}

.cap-box:nth-child(2) .cap-icon {
    background: #eef5ff;
}

.cap-box:nth-child(3) .cap-icon {
    background: #edf8ff;
}

.cap-box:nth-child(4) .cap-icon {
    background: #eef9f5;
    color: #198754;
    border-color: #d7eee3;
}

.cap-box:nth-child(5) .cap-icon {
    background: #f3efff;
    color: #7157c8;
    border-color: #e5def9;
}

.cap-box:nth-child(6) .cap-icon {
    background: #fff5e8;
    color: #b86b00;
    border-color: #f2dfc0;
}

/* Titles */
.cap-box b {
    display: block;
    font-size: 9px;
    line-height: 1.15;
    color: var(--navy);
}

.cap-box span {
    display: block;
    margin-top: 2px;
    font-size: 7.2px;
    line-height: 1.25;
    color: #6b778b;
}

.cap-tag {
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 6px;
    line-height: 1;
    font-weight: 800;
    color: #607086;
}

.cap-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.cap-flow-box {
    padding: 5px 4px;
    border-radius: 6px;
    background: #f6f8fc;
    text-align: center;
    font-size: 7px;
    line-height: 1.1;
    font-weight: 800;
    color: #59677a;
}

.cap-arrow {
    color: #8b98aa;
    font-size: 9px;
    font-weight: 900;
}
    .cap-flow-box:hover {
        border-color: #cbdaf0;
        background: #eef4ff;
        color: var(--blue);
    }


/* Floating credibility badge */
.capability-visual::after {
    content: "DNN • BUILD • INTEGRATE • SECURE";
    position: absolute;
    right: -8px;
    bottom: 20px;
    padding: 8px 11px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(15,32,67,.10);
    color: #708096;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .45px;
    z-index: 5;
}

/* Entrance animation tuning */
.capability-shell.animate__animated {
    --animate-duration: .72s;
}

.cap-box.animate__animated {
    --animate-duration: .55s;
}

/* Slight stagger emphasis */
.cap-box:nth-child(1) {
    transform-origin: center bottom
}

.cap-box:nth-child(2) {
    transform-origin: center bottom
}

.cap-box:nth-child(3) {
    transform-origin: center bottom
}

.cap-box:nth-child(4) {
    transform-origin: center bottom
}

.cap-box:nth-child(5) {
    transform-origin: center bottom
}

.cap-box:nth-child(6) {
    transform-origin: center bottom
}

/* Tablet */
@media(max-width:980px) {

    .capability-visual {
        min-height: 430px;
    }

    .capability-shell {
        width: min(560px,100%);
    }
}

/* Mobile */
@media(max-width:760px) {

    .capability-visual {
        min-height: 360px;
        padding: 0 4px;
    }

    .capability-shell {
        padding: 9px;
        border-radius: 13px;
    }

    .cap-head {
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

        .cap-head strong {
            font-size: 10px;
        }

        .cap-head span {
            font-size: 7px;
        }

    .cap-grid {
        gap: 5px;
    }

    .cap-box {
        min-height: 62px;
        padding: 6px 7px;
        border-radius: 8px;
    }

    .cap-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 4px;
        border-radius: 6px;
        font-size: 8px;
    }

    .cap-box b {
        font-size: 8.2px;
    }

    .cap-box span {
        font-size: 6.7px;
        line-height: 1.2;
    }

    .cap-tag {
        display: none;
    }

    .cap-flow {
        margin-top: 5px;
        padding-top: 6px;
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .cap-flow-box {
        padding: 4px;
        font-size: 6.5px;
    }

    .cap-arrow {
        display: none;
    }
}
/* Small phones */
@media(max-width:480px) {

    .capability-visual {
        min-height: 340px;
    }

    .capability-shell {
        padding: 8px;
    }

    .cap-grid {
        gap: 4px;
    }

    .cap-box {
        min-height: 58px;
        padding: 5px 6px;
    }

    .cap-icon {
        width: 20px;
        height: 20px;
        font-size: 7px;
    }

    .cap-box b {
        font-size: 7.8px;
    }

    .cap-box span {
        font-size: 6.2px;
    }

    .cap-flow {
        display: none;
    }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce) {

    .cap-box,
    .cap-flow-box {
        transition: none !important;
    }

        .cap-box:hover {
            transform: none;
        }
}

/* ---------- Visual foundation ---------- */
.visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .visual:before,
    .visual:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(.2px);
        pointer-events: none;
    }

    .visual:before {
        width: 280px;
        height: 280px;
        right: 7%;
        top: 7%;
        background: radial-gradient(circle,rgba(142,188,255,.22),rgba(142,188,255,0));
    }

    .visual:after {
        width: 240px;
        height: 240px;
        left: 1%;
        bottom: -5%;
        background: radial-gradient(circle,rgba(180,164,255,.18),rgba(180,164,255,0));
    }

/* ---------- Slide 1: Challenge -> Solution ---------- */
.solution-visual {
    width: min(535px,100%);
    height: 440px;
    position: relative
}

.solution-board {
    position: absolute;
    left: 11%;
    right: 8%;
    top: 58px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 24px 70px rgba(15,32,67,.14);
    z-index: 3;
}

.solution-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
}

    .solution-top strong {
        font-size: 13px;
        color: var(--navy)
    }

.status-pill {
    background: #edf3ff;
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    border-radius: 999px;
    padding: 6px 8px;
}

.solution-screen {
    margin-top: 14px;
    border: 1px solid #e3eaf4;
    border-radius: 13px;
    padding: 13px;
    background: linear-gradient(#fbfdff,#f6f9fd);
}

.browser-bar {
    display: flex;
    gap: 5px;
    margin-bottom: 11px
}

.browser-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c6d0df
}

.screen-main {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 12px;
}

.screen-side {
    background: #f1f5fa;
    border-radius: 9px;
    padding: 9px
}

    .screen-side i {
        display: block;
        height: 9px;
        border-radius: 7px;
        background: #dce4ef;
        margin: 8px 0
    }

        .screen-side i.active {
            background: #cbdcff
        }

.screen-panel {
    display: grid;
    gap: 9px
}

.screen-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px
}

.metric {
    background: #fff;
    border: 1px solid #e5ebf3;
    border-radius: 9px;
    padding: 9px;
}

    .metric b {
        display: block;
        color: var(--navy);
        font-size: 16px
    }

    .metric span {
        font-size: 8px;
        color: #7a8594
    }

.screen-code {
    background: #fff;
    border: 1px solid #e5ebf3;
    border-radius: 9px;
    padding: 9px;
}

.code-row {
    height: 7px;
    border-radius: 99px;
    background: #e5ebf3;
    margin: 7px 0
}

    .code-row.r1 {
        width: 88%
    }

    .code-row.r2 {
        width: 62%
    }

    .code-row.r3 {
        width: 78%
    }

    .code-row.r4 {
        width: 46%
    }

.floating-card {
    position: absolute;
    width: 154px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    padding: 12px;
    box-shadow: 0 14px 34px rgba(15,32,67,.13);
    z-index: 5;
}

    .floating-card .icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #edf3ff;
        color: var(--blue);
        font-weight: 900;
        margin-bottom: 8px;
    }

    .floating-card strong {
        display: block;
        font-size: 10px;
        color: var(--navy)
    }

    .floating-card span {
        display: block;
        font-size: 9px;
        color: #697688;
        line-height: 1.35;
        margin-top: 2px
    }

.fix-card {
    left: -8px;
    top: 95px
}

.performance-card {
    right: -5px;
    top: 28px
}

.upgrade-card {
    right: 10px;
    bottom: 48px
}

.maintenance-card {
    left: 4px;
    bottom: 15px
}

.connector-line {
    position: absolute;
    border-top: 2px dashed rgba(21,94,239,.35);
    width: 85px;
    z-index: 1;
}

.line-a {
    left: 26%;
    top: 32%
}

.line-b {
    right: 25%;
    top: 29%
}

.line-c {
    right: 28%;
    bottom: 30%
}

.line-d {
    left: 27%;
    bottom: 25%
}

/* ---------- Slide 2: Idea -> Solution Plan ---------- */
.plan-visual {
    width: min(535px,100%);
    height: 440px;
    position: relative
}

.plan-orbit {
    position: absolute;
    border: 1px dashed rgba(21,94,239,.24);
    border-radius: 50%;
    pointer-events: none
}

.orbit-one {
    width: 310px;
    height: 310px;
    left: 22%;
    top: 45px;
    transform: rotate(-8deg)
}

.orbit-two {
    width: 215px;
    height: 215px;
    left: 31%;
    top: 92px;
    transform: rotate(14deg);
    border-color: rgba(77,39,232,.20)
}

.plan-center {
    position: absolute;
    left: 35%;
    top: 35%;
    transform: translate(-50%,-50%);
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: linear-gradient(145deg,#fff,#eef4ff);
    border: 1px solid #d8e3f2;
    box-shadow: 0 18px 48px rgba(15,32,67,.14),inset 0 0 0 10px rgba(235,242,255,.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-align: center
}

.plan-center-icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: linear-gradient(145deg,#155eef,#4d27e8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .5px;
    box-shadow: 0 10px 22px rgba(21,94,239,.23);
    margin-bottom: 9px
}

.plan-center strong {
    font-size: 12px;
    color: var(--navy)
}

.plan-center span {
    font-size: 8.5px;
    color: #728095;
    margin-top: 2px
}

.plan-card {
    position: absolute;
    width: 170px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 13px;
    box-shadow: 0 14px 38px rgba(15,32,67,.11);
    z-index: 7
}

    .plan-card strong {
        display: block;
        font-size: 10px;
        color: var(--navy);
        margin-bottom: 2px
    }

    .plan-card span {
        display: block;
        font-size: 8.5px;
        color: #6b778b;
        line-height: 1.35
    }

.plan-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 7px
}

    .plan-icon.blue {
        background: #e8f0ff;
        color: var(--blue)
    }

    .plan-icon.purple {
        background: #eee9ff;
        color: #6942ef
    }

    .plan-icon.green {
        background: #e5f8ef;
        color: #18a873
    }

    .plan-icon.orange {
        background: #fff1df;
        color: #ee8415
    }

.card-requirements {
    left: 0;
    top: 57px
}

.card-architecture {
    right: 0;
    top: 38px
}

.card-build {
    left: 0;
    bottom: 37px
}

.card-launch {
    right: 0;
    bottom: 27px
}

.plan-link {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,rgba(21,94,239,0),rgba(21,94,239,.42),rgba(21,94,239,0));
    z-index: 2;
    transform-origin: left center
}

.link-1 {
    width: 105px;
    left: 30%;
    top: 36%;
    transform: rotate(20deg)
}

.link-2 {
    width: 95px;
    left: 59%;
    top: 34%;
    transform: rotate(156deg)
}

.link-3 {
    width: 108px;
    left: 31%;
    top: 67%;
    transform: rotate(-20deg)
}

.link-4 {
    width: 102px;
    left: 59%;
    top: 70%;
    transform: rotate(-160deg)
}

.plan-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -3px;
    min-width: 185px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(15,32,67,.11);
    z-index: 9
}

    .plan-badge b {
        display: block;
        font-size: 10px;
        color: var(--navy)
    }

    .plan-badge span {
        display: block;
        font-size: 8.5px;
        color: #6e7b8f;
        margin-top: 2px
    }

/* ---------- Slide 3: More Than Development ---------- */
.partner-visual {
    width: min(535px,100%);
    height: 440px;
    position: relative
}

.stack-scene {
    position: absolute;
    right: 7%;
    bottom: 30px;
    width: 220px;
    z-index: 4;
}

.stack-block {
    height: 72px;
    border-radius: 8px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    color: #1b355e;
    font-weight: 800;
    background: linear-gradient(135deg,#f3e5ca,#fff4dc);
    border: 1px solid #dbc49c;
    box-shadow: 0 7px 0 rgba(45,62,91,.08);
}

    .stack-block:nth-child(2) {
        transform: translateX(10px)
    }

    .stack-block:nth-child(3) {
        transform: translateX(-2px)
    }

    .stack-block:nth-child(4) {
        transform: translateX(12px)
    }

.stack-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff7e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.partner-core {
    position: absolute;
    left: 3%;
    top: 46px;
    width: 305px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 22px 62px rgba(15,32,67,.14);
    z-index: 3;
}

    .partner-core h3 {
        margin: 0 0 5px;
        color: var(--navy);
        font-size: 15px
    }

    .partner-core p {
        margin: 0 0 12px;
        color: #687386;
        font-size: 10px;
        line-height: 1.45
    }

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.partner-mini {
    border: 1px solid var(--line);
    background: #fbfcfe;
    border-radius: 10px;
    padding: 9px
}

    .partner-mini b {
        display: block;
        color: var(--navy);
        font-size: 9.5px
    }

    .partner-mini span {
        display: block;
        color: #6d798c;
        font-size: 8px;
        margin-top: 2px
    }

.partner-float {
    position: absolute;
    left: -8px;
    bottom: 16px;
    width: 195px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    padding: 12px;
    box-shadow: 0 14px 35px rgba(15,32,67,.12);
    z-index: 6;
}

    .partner-float strong {
        display: block;
        color: var(--navy);
        font-size: 10px
    }

    .partner-float span {
        display: block;
        color: #6b778b;
        font-size: 9px;
        line-height: 1.35;
        margin-top: 4px
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px
}

.chip {
    font-size: 8px;
    font-weight: 800;
    padding: 4px 6px;
    border-radius: 999px;
    background: #f0f3f8;
    color: #5f6b7a
}

/* Decorative orbital lines */
.orbit {
    position: absolute;
    left: 5%;
    right: 3%;
    top: 45px;
    bottom: 30px;
    border: 1px dashed rgba(21,94,239,.22);
    border-radius: 50%;
    transform: rotate(-8deg);
}

    .orbit:before, .orbit:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: #eaf1ff;
        border: 1px solid #d6e3fa
    }

    .orbit:before {
        width: 12px;
        height: 12px;
        left: 13%;
        top: 17%
    }

    .orbit:after {
        width: 10px;
        height: 10px;
        right: 8%;
        bottom: 20%
    }

/* Floating motion and animate.css replay */
.hero-anim {
    --animate-duration: .82s
}

.delay-1 {
    --animate-delay: .08s
}

.delay-2 {
    --animate-delay: .16s
}

.delay-3 {
    --animate-delay: .24s
}

.delay-4 {
    --animate-delay: .32s
}

.delay-5 {
    --animate-delay: .40s
}

.delay-6 {
    --animate-delay: .48s
}

@keyframes dnnFloat {
    0%,100% {
        transform: translate3d(0,0,0)
    }

    50% {
        transform: translate3d(0,-8px,0)
    }
}

@keyframes dnnFloatSmall {
    0%,100% {
        transform: translate3d(0,0,0)
    }

    50% {
        transform: translate3d(0,-4px,0)
    }
}

@keyframes pulseSoft {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(77,39,232,.12)
    }

    50% {
        box-shadow: 0 0 0 11px rgba(77,39,232,0)
    }
}

.solution-board.hero-anim.animate__animated {
    animation-name: zoomIn,dnnFloat !important;
    animation-duration: .82s,6.3s !important;
    animation-delay: 0s,1.0s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: cubic-bezier(.22,.61,.36,1),ease-in-out !important
}

.floating-card.hero-anim.animate__animated {
    animation-name: fadeInUp,dnnFloatSmall !important;
    animation-duration: .62s,4.8s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.floating-card:nth-of-type(2) {
    animation-delay: .08s,1.2s !important
}

.floating-card:nth-of-type(3) {
    animation-delay: .16s,1.45s !important
}

.floating-card:nth-of-type(4) {
    animation-delay: .24s,1.7s !important
}

.floating-card:nth-of-type(5) {
    animation-delay: .32s,1.95s !important
}

.plan-center.hero-anim.animate__animated {
    animation-name: zoomIn,dnnFloat !important;
    animation-duration: .82s,6s !important;
    animation-delay: 0s,1.0s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.plan-card.hero-anim.animate__animated {
    animation-name: fadeInUp,dnnFloatSmall !important;
    animation-duration: .64s,5s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.card-architecture.hero-anim.animate__animated {
    animation-name: fadeInRight,dnnFloatSmall !important
}

.card-build.hero-anim.animate__animated {
    animation-name: fadeInLeft,dnnFloatSmall !important
}

.card-launch.hero-anim.animate__animated {
    animation-name: fadeInUp,dnnFloatSmall !important
}

.card-requirements {
    animation-delay: .10s,1.25s !important
}

.card-architecture {
    animation-delay: .18s,1.50s !important
}

.card-build {
    animation-delay: .26s,1.75s !important
}

.card-launch {
    animation-delay: .34s,2.0s !important
}

.plan-badge.hero-anim.animate__animated {
    animation-name: fadeInUp,dnnFloatSmall !important;
    animation-duration: .62s,5.2s !important;
    animation-delay: .55s,1.9s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.partner-core.hero-anim.animate__animated {
    animation-name: fadeInLeft,dnnFloat !important;
    animation-duration: .78s,6.2s !important;
    animation-delay: 0s,1.05s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.stack-scene.hero-anim.animate__animated {
    animation-name: zoomIn,dnnFloat !important;
    animation-duration: .82s,6.5s !important;
    animation-delay: .15s,1.15s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.partner-float.hero-anim.animate__animated {
    animation-name: fadeInUp,dnnFloatSmall !important;
    animation-duration: .68s,5.0s !important;
    animation-delay: .35s,1.35s !important;
    animation-iteration-count: 1,infinite !important;
    animation-timing-function: ease,ease-in-out !important
}

.stack-block:nth-child(1) {
    animation: fadeInRight .6s ease .35s both
}

.stack-block:nth-child(2) {
    animation: fadeInRight .6s ease .46s both
}

.stack-block:nth-child(3) {
    animation: fadeInRight .6s ease .57s both
}

.stack-block:nth-child(4) {
    animation: fadeInRight .6s ease .68s both
}

.slide-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    width: min(270px,46vw);
    height: 3px;
    border-radius: 99px;
    background: #dfe6f0;
    overflow: hidden;
    z-index: 21;
}

    .slide-progress i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--blue);
        border-radius: 99px;
        transform-origin: left
    }

.carousel.is-playing .slide-progress i {
    animation: carouselProgress 8.8s linear forwards
}

@keyframes carouselProgress {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 20;
}

.arrow {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d1d9e5;
    background: rgba(255,255,255,.95);
    color: var(--navy);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(15,32,67,.08);
    transition: all .2s ease;
}

    .arrow:hover {
        border-color: var(--blue);
        color: var(--blue);
        transform: translateY(-1px)
    }

    .arrow:focus-visible, .nav-dot:focus-visible {
        outline: 3px solid rgba(21,94,239,.25);
        outline-offset: 3px
    }

.dots-nav {
    display: flex;
    gap: 7px;
    margin: 0 5px
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d1de;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: all .28s ease;
}

    .nav-dot.active {
        width: 23px;
        border-radius: 20px;
        background: var(--blue)
    }

.slide-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 76px;
    font-size: 11px;
    color: #718094;
    font-weight: 700;
    white-space: nowrap;
}

/* Accessibility */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media(max-width:980px) {
    .navlinks {
        display: none
    }

    .menu-btn {
        display: block
    }

    .navcta {
        display: none
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 54px 0 90px
    }

    .visual {
        min-height: 400px
    }

    .carousel, .slide {
        min-height: auto
    }

    h1 {
        font-size: clamp(39px,7.6vw,56px)
    }
}

@media(max-width:760px) {
    .solution-visual, .idea-visual, .partner-visual {
        height: 405px
    }

    .solution-board {
        left: 7%;
        right: 6%;
        top: 48px
    }

    .floating-card {
        width: 132px;
        padding: 10px
    }

        .floating-card strong {
            font-size: 9px
        }

        .floating-card span {
            font-size: 8px
        }

    .fix-card {
        left: -2px;
        top: 88px
    }

    .performance-card {
        right: -3px;
        top: 17px
    }

    .upgrade-card {
        right: 0;
        bottom: 36px
    }

    .maintenance-card {
        left: 0;
        bottom: 3px
    }

    .partner-core {
        left: 0;
        top: 40px;
        width: 285px
    }

    .stack-scene {
        right: -2px;
        bottom: 24px;
        transform: scale(.9);
        transform-origin: bottom right
    }

    .partner-float {
        left: 0;
        bottom: 6px;
        width: 180px
    }

    .process-card {
        left: 0;
        right: 0;
        bottom: 0
    }

    .bulb {
        left: 41%;
        transform: scale(.9);
        transform-origin: top center
    }
}

@media(max-width:640px) {
    .demo-nav .nav-inner {
        min-height: 64px
    }

    .container {
        width: min(94%,1180px)
    }

    .hero-grid {
        padding: 44px 0 84px
    }

    h1 {
        font-size: 39px;
        letter-spacing: -1px
    }

    .hero-copy {
        font-size: 16px
    }

    .actions .btn {
        width: 100%
    }

    .trust {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .trust-item {
        padding: 0;
        border: 0;
        font-size: 10px
    }

    .visual {
        min-height: 340px
    }

    .solution-visual, .idea-visual, .partner-visual {
        height: 350px
    }

    .solution-board {
        left: 5%;
        right: 3%;
        top: 44px;
        padding: 13px
    }

    .screen-main {
        grid-template-columns: 74px 1fr;
        gap: 8px
    }

    .screen-side {
        padding: 6px
    }

        .screen-side i {
            height: 7px;
            margin: 6px 0
        }

    .screen-metrics {
        gap: 5px
    }

    .metric {
        padding: 7px
    }

        .metric b {
            font-size: 13px
        }

        .metric span {
            font-size: 7px
        }

    .floating-card {
        width: 110px;
        padding: 8px;
        border-radius: 11px
    }

        .floating-card .icon {
            width: 25px;
            height: 25px;
            font-size: 12px;
            margin-bottom: 6px
        }

        .floating-card strong {
            font-size: 8px
        }

        .floating-card span {
            font-size: 7px
        }

    .fix-card {
        left: -3px;
        top: 79px
    }

    .performance-card {
        right: -2px;
        top: 14px
    }

    .upgrade-card {
        right: 2px;
        bottom: 30px
    }

    .maintenance-card {
        left: 0;
        bottom: 1px
    }

    .plan-visual {
        height: 350px
    }

    .orbit-one {
        width: 240px;
        height: 240px;
        left: 25%;
        top: 42px
    }

    .orbit-two {
        width: 170px;
        height: 170px;
        left: 32%;
        top: 77px
    }

    .plan-center {
        width: 118px;
        height: 118px
    }

    .plan-center-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 12px;
        margin-bottom: 6px
    }

    .plan-center strong {
        font-size: 10px
    }

    .plan-center span {
        font-size: 7px
    }

    .plan-card {
        width: 122px;
        padding: 8px 9px;
        border-radius: 11px
    }

        .plan-card strong {
            font-size: 8px
        }

        .plan-card span {
            font-size: 6.8px
        }

    .plan-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        font-size: 10px;
        margin-bottom: 5px
    }

    .card-requirements {
        left: -2px;
        top: 55px
    }

    .card-architecture {
        right: -2px;
        top: 38px
    }

    .card-build {
        left: 0;
        bottom: 38px
    }

    .card-launch {
        right: 0;
        bottom: 30px
    }

    .link-1 {
        width: 70px;
        left: 31%;
        top: 37%
    }

    .link-2 {
        width: 65px;
        left: 58%;
        top: 35%
    }

    .link-3 {
        width: 73px;
        left: 31%;
        top: 65%
    }

    .link-4 {
        width: 72px;
        left: 58%;
        top: 68%
    }

    .plan-badge {
        min-width: 145px;
        padding: 7px 9px;
        bottom: 0
    }

        .plan-badge b {
            font-size: 8px
        }

        .plan-badge span {
            font-size: 7px
        }

    .partner-core {
        left: 0;
        top: 28px;
        width: 235px;
        padding: 12px
    }

        .partner-core h3 {
            font-size: 12px
        }

        .partner-core p {
            font-size: 8px
        }

    .partner-grid {
        gap: 5px
    }

    .partner-mini {
        padding: 7px
    }

        .partner-mini b {
            font-size: 7.8px
        }

        .partner-mini span {
            font-size: 6.8px
        }

    .stack-scene {
        right: -13px;
        bottom: 19px;
        transform: scale(.72);
        transform-origin: bottom right
    }

    .partner-float {
        width: 160px;
        padding: 9px;
        bottom: 0
    }

        .partner-float strong {
            font-size: 8px
        }

        .partner-float span {
            font-size: 7px
        }

    .chip {
        font-size: 6.5px
    }

    .controls {
        bottom: 17px
    }

    .slide-label {
        bottom: 60px
    }

    .arrow {
        width: 35px;
        height: 35px;
        font-size: 18px
    }

    .slide-progress {
        bottom: 7px
    }
}

@media(prefers-reduced-motion:reduce) {
    .slide {
        transition: none !important;
        transform: none !important
    }

    .hero-anim, .stack-block, .cap-box .cap-icon, .plan-center, .plan-card, .plan-badge {
        animation: none !important
    }

    .slide-progress i {
        animation: none !important
    }

    .arrow, .nav-dot {
        transition: none !important
    }
}


.dwh-hero-wrap {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 92% 18%, rgba(21,94,239,.13), transparent 30%), linear-gradient(135deg,#f7faff 0%,#edf4ff 48%,#fff 100%);
    border-bottom: 1px solid var(--line);
}

.dwh-carousel {
    position: relative;
    min-height: 610px;
    perspective: 1400px;
}

.dwh-slide {
    position: absolute;
    inset: 0;
    min-height: 610px;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(7%) rotateY(-8deg) scale(.985);
    transform-origin: center;
    transition: opacity 1.05s ease, transform 1.10s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1.10s;
    backface-visibility: hidden;
    will-change: transform,opacity;
}

    .dwh-slide.active {
        position: relative;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) rotateY(0) scale(1);
        transition: opacity 1.05s ease, transform 1.10s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
    }

    .dwh-slide.from-left {
        transform: translateX(-7%) rotateY(8deg) scale(.985);
    }

    .dwh-slide.exit-left {
        opacity: 0;
        transform: translateX(-7%) rotateY(8deg) scale(.985);
        visibility: hidden;
    }

    .dwh-slide.exit-right {
        opacity: 0;
        transform: translateX(7%) rotateY(-8deg) scale(.985);
        visibility: hidden;
    }

.dwh-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.dwh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 800;
    margin-bottom: 16px;
}

    .dwh-eyebrow:before {
        content: "";
        width: 28px;
        height: 3px;
        border-radius: 99px;
        background: var(--blue);
    }

.dwh-title {
    font-size: clamp(38px,4.6vw,62px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    margin: 0 0 22px;
    color: var(--navy);
}

.dwh-copy {
    font-size: 18px;
    color: var(--muted);
    max-width: 690px;
    margin: 0 0 30px;
}

.dwh-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dwh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 7px;
    font-weight: 800;
    font-size: 14px;
    transition: .2s ease;
    border: 1px solid transparent;
}

.dwh-btn-primary {
    background: var(--blue);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(21,94,239,.22);
}

    .dwh-btn-primary:hover {
        background: var(--blue-dark);
        transform: translateY(-1px);
    }

.dwh-btn-secondary {
    background: #fff;
    border-color: #cdd7e5;
    color: var(--navy) !important;
}

    .dwh-btn-secondary:hover {
        border-color: var(--blue);
        color: var(--blue) !important;
    }

.dwh-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid rgba(99,115,140,.18);
    padding-top: 22px;
}

.dwh-trust-item {
    padding: 0 18px;
    border-right: 1px solid #dbe2ec;
    font-size: 12px;
    color: #687386;
}

    .dwh-trust-item:first-child {
        padding-left: 0
    }

    .dwh-trust-item:last-child {
        border: 0
    }

/* ============================================================
   VISUAL 1 — Expertise command center
   ============================================================ */

.dwh-visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dwh-dashboard {
    width: min(505px,100%);
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
    position: relative;
    z-index: 2;
}

.dwh-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.dwh-dots {
    display: flex;
    gap: 5px;
}

.dwh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d0dd;
}

.dwh-dashboard-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
}

.dwh-dashboard-body {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 14px;
    padding-top: 16px;
}

.dwh-sidebar {
    background: #f5f7fb;
    border-radius: 10px;
    padding: 10px;
}

.dwh-side-row {
    height: 26px;
    border-radius: 6px;
    background: #e6ebf3;
    margin-bottom: 8px;
}

    .dwh-side-row.active {
        background: #d6e4ff
    }

.dwh-panel {
    display: grid;
    gap: 10px;
}

.dwh-metric-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
}

.dwh-metric {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px;
}

    .dwh-metric strong {
        display: block;
        font-size: 19px;
        color: var(--navy);
    }

    .dwh-metric span {
        font-size: 10px;
        color: #7a8594;
    }

.dwh-code {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
}

.dwh-code-line {
    height: 8px;
    border-radius: 8px;
    background: #e7ecf3;
    margin: 8px 0;
}

    .dwh-code-line.w1 {
        width: 84%
    }

    .dwh-code-line.w2 {
        width: 64%
    }

    .dwh-code-line.w3 {
        width: 91%
    }

    .dwh-code-line.w4 {
        width: 48%
    }

.dwh-floating {
    position: absolute;
    left: -20px;
    bottom: 48px;
    width: 184px;
    background: #fff;
    border: 1px solid #dae3ef;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    border-radius: 12px;
    padding: 14px;
    z-index: 4;
}

    .dwh-floating strong {
        display: block;
        font-size: 11px;
        color: var(--navy);
    }

    .dwh-floating span {
        display: block;
        color: #687386;
        font-size: 10px;
        line-height: 1.4;
        margin-top: 4px;
    }

.dwh-badge {
    position: absolute;
    right: 20%;
    top: 60%;
    background: #fff;
    border: 1px solid #dae3ef;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    border-radius: 12px;
    padding: 14px 16px;
    z-index: 3;
}

    .dwh-badge strong {
        display: block;
        font-size: 12px;
        color: var(--navy);
    }

    .dwh-badge span {
        font-size: 11px;
        color: #687386;
    }

/* ============================================================
   VISUAL 2 — Complexity to clarity
   ============================================================ */

.dwh-problem-card {
    width: min(505px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 22px;
}

.dwh-problem-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .dwh-problem-head strong {
        font-size: 14px;
        color: var(--navy);
    }

.dwh-status {
    font-size: 11px;
    padding: 5px 8px;
    background: #fff4e5;
    border-radius: 999px;
    color: #9a5b00;
    font-weight: 700;
}

.dwh-problem {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 15px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 12px 0;
}

    .dwh-problem:first-of-type {
        border-top: 0
    }

    .dwh-problem span {
        font-size: 12px;
        color: #566375;
    }

.dwh-progress {
    height: 7px;
    background: #eef1f5;
    border-radius: 99px;
    overflow: hidden;
    width: 120px;
}

    .dwh-progress i {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: #7f8ea5;
    }

        .dwh-progress i.p85 {
            width: 85%
        }

        .dwh-progress i.p62 {
            width: 62%
        }

        .dwh-progress i.p42 {
            width: 42%
        }

        .dwh-progress i.p28 {
            width: 28%
        }

.dwh-resolution {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 7px;
}

.dwh-resolution-box {
    padding: 12px;
    border-radius: 10px;
    background: #f6f9fd;
    border: 1px solid #e2e9f3;
    text-align: center;
}

    .dwh-resolution-box strong {
        display: block;
        font-size: 11px;
        color: var(--navy);
    }

    .dwh-resolution-box span {
        display: block;
        font-size: 9px;
        color: #6d7a8e;
        margin-top: 3px;
    }

.dwh-resolution-arrow {
    color: var(--blue);
    font-size: 18px;
    font-weight: 800;
}

.dwh-risk-card {
    position: absolute;
    right: 20%;
    bottom: 35%;
    width: 174px;
    background: #fff;
    border: 1px solid #dae3ef;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    border-radius: 12px;
    padding: 13px;
    z-index: 4;
}

    .dwh-risk-card strong {
        display: block;
        color: var(--navy);
        font-size: 11px;
    }

.dwh-risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #edf0f5;
}

    .dwh-risk-row:first-of-type {
        margin-top: 7px
    }

    .dwh-risk-row span {
        font-size: 9px;
        color: #6f7c8f;
    }

    .dwh-risk-row b {
        font-size: 9px;
        color: var(--blue);
    }

/* ============================================================
   VISUAL 3 — Business outcomes + integrations
   ============================================================ */

.dwh-enterprise {
    width: min(505px,100%);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 13px;
}

.dwh-e-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 14px 32px rgba(15,32,67,.08);
}

.dwh-e-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #e8f0ff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-weight: 900;
    font-size: 13px;
}

.dwh-e-card b {
    display: block;
    font-size: 13px;
    color: var(--navy);
    margin-bottom: 5px;
}

.dwh-e-card span {
    font-size: 11px;
    color: #687386;
    line-height: 1.42;
}

.dwh-integration-strip {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 15px;
    box-shadow: 0 10px 26px rgba(15,32,67,.07);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.dwh-integration {
    padding: 9px 6px;
    text-align: center;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fbfcfe;
}

    .dwh-integration strong {
        display: block;
        font-size: 9px;
        color: var(--navy);
    }

    .dwh-integration span {
        display: block;
        margin-top: 2px;
        font-size: 8px;
        color: #7b8797;
    }

/* ============================================================
   VISUAL 4 — Long-term partnership
   ============================================================ */

.dwh-lifecycle {
    width: min(505px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 20px;
}

.dwh-life-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 17px;
}

    .dwh-life-head strong {
        color: var(--navy);
        font-size: 14px;
    }

    .dwh-life-head span {
        color: #687386;
        font-size: 10px;
    }

.dwh-life-track {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    position: relative;
    gap: 8px;
}

    .dwh-life-track:before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 29px;
        height: 2px;
        background: #dce5f2;
        z-index: 0;
    }

.dwh-life-stage {
    position: relative;
    z-index: 1;
    text-align: center;
}

.dwh-life-dot {
    width: 58px;
    height: 58px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #edf3ff;
    border: 1px solid #dbe6fa;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.dwh-life-stage strong {
    display: block;
    margin-top: 8px;
    color: var(--navy);
    font-size: 10px;
}

.dwh-life-stage span {
    display: block;
    margin-top: 2px;
    color: #6f7c8f;
    font-size: 8.5px;
    line-height: 1.3;
}

.dwh-support-board {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dwh-support {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fbfcfe;
    padding: 11px;
}

    .dwh-support strong {
        display: block;
        font-size: 10px;
        color: var(--navy);
    }

    .dwh-support span {
        display: block;
        font-size: 9px;
        line-height: 1.38;
        color: #6c788c;
        margin-top: 3px;
    }

.dwh-support-badge {
    position: absolute;
    right: -16px;
    bottom: 30px;
    width: 178px;
    background: #fff;
    border: 1px solid #dae3ef;
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 12px 32px rgba(15,32,67,.12);
    z-index: 4;
}

    .dwh-support-badge strong {
        display: block;
        font-size: 11px;
        color: var(--navy);
    }

    .dwh-support-badge span {
        display: block;
        margin-top: 4px;
        font-size: 9px;
        color: #687386;
        line-height: 1.4;
    }

/* ============================================================
   Animate.css
   ============================================================ */

.dwh-anim {
    --animate-duration: 1.05s
}

.dwh-anim-fast {
    --animate-duration: .78s
}

.dwh-delay-1 {
    --animate-delay: .08s
}

.dwh-delay-2 {
    --animate-delay: .16s
}

.dwh-delay-3 {
    --animate-delay: .24s
}

.dwh-delay-4 {
    --animate-delay: .32s
}

.dwh-delay-5 {
    --animate-delay: .40s
}

.dwh-delay-6 {
    --animate-delay: .48s
}

.dwh-delay-7 {
    --animate-delay: .56s
}

/* ============================================================
   Controls — same centered style as attached slider
   ============================================================ */

.dwh-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 20;
}

.dwh-arrow {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d1d9e5;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(15,32,67,.08);
    transition: all .2s ease;
}

    .dwh-arrow:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15,32,67,.12);
    }

    .dwh-arrow:focus-visible,
    .dwh-nav-dot:focus-visible {
        outline: 3px solid rgba(21,94,239,.25);
        outline-offset: 3px;
    }

.dwh-dots-nav {
    display: flex;
    gap: 7px;
    margin: 0 5px;
}

.dwh-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d1de;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: all .28s ease;
}

    .dwh-nav-dot.active {
        width: 23px;
        border-radius: 20px;
        background: var(--blue);
    }

.dwh-slide-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 76px;
    font-size: 11px;
    color: #718094;
    font-weight: 700;
    white-space: nowrap;
}

.dwh-progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 11px;
    width: min(260px,46vw);
    height: 3px;
    border-radius: 99px;
    background: #dfe6f0;
    overflow: hidden;
    z-index: 21;
}

    .dwh-progress i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--blue);
        border-radius: 99px;
        transform-origin: left;
    }

.dwh-carousel.is-playing .dwh-progress i {
    animation: dwhCarouselProgress 8.8s linear forwards;
}

.dwh-carousel.is-paused .dwh-progress i {
    animation-play-state: paused;
}

@keyframes dwhCarouselProgress {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* ============================================================
   Continuous visual motion
   Entrance animations happen once; these floating animations
   continue gently while the slide is visible.
   ============================================================ */

@keyframes dwhFloatY {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -12px, 0);
    }
}

@keyframes dwhFloatYReverse {
    0%, 100% {
        transform: translate3d(0, -4px, 0);
    }

    50% {
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes dwhFloatSoft {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -7px, 0) rotate(.35deg);
    }
}

@keyframes dwhFloatDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(5px, -9px, 0);
    }
}

.dwh-float-main {
    animation: dwhFloatY 5.2s ease-in-out infinite;
    will-change: transform;
}

.dwh-float-alt {
    animation: dwhFloatYReverse 4.4s ease-in-out infinite;
    will-change: transform;
}

.dwh-float-soft {
    animation: dwhFloatSoft 4.8s ease-in-out infinite;
    will-change: transform;
}

.dwh-float-drift {
    animation: dwhFloatDrift 5.7s ease-in-out infinite;
    will-change: transform;
}

.dwh-slide:not(.active) .dwh-float-main,
.dwh-slide:not(.active) .dwh-float-alt,
.dwh-slide:not(.active) .dwh-float-soft,
.dwh-slide:not(.active) .dwh-float-drift {
    animation-play-state: paused;
}

/* ============================================================
   Responsive
   ============================================================ */

@media(max-width:980px) {
    .dwh-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 58px 0 92px;
    }

    .dwh-visual {
        min-height: 385px;
    }

    .dwh-carousel,
    .dwh-slide {
        min-height: auto;
    }
}

@media(max-width:760px) {
    .dwh-enterprise {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .dwh-e-card {
        padding: 14px
    }

    .dwh-life-track {
        gap: 5px;
    }

    .dwh-life-dot {
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }

    .dwh-support-badge {
        right: -5px;
    }
}

@media(max-width:640px) {
    .dwh-title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .dwh-copy {
        font-size: 16px;
    }

    .dwh-trust {
        gap: 10px;
    }

    .dwh-trust-item {
        padding: 0 10px 0 0;
        border: 0;
    }

    .dwh-visual {
        min-height: 325px;
    }

    .dwh-dashboard,
    .dwh-problem-card,
    .dwh-lifecycle {
        transform: scale(.90);
        transform-origin: center;
    }

    .dwh-floating {
        left: -7px;
        bottom: 28px;
        width: 154px;
    }

    .dwh-badge {
        right: -7px;
        top: 30px;
    }

    .dwh-risk-card {
        right: -5px;
        bottom: 28px;
        width: 152px;
    }

    .dwh-enterprise {
        grid-template-columns: 1fr 1fr;
    }

    .dwh-integration-strip {
        grid-template-columns: repeat(2,1fr);
    }

    .dwh-support-board {
        grid-template-columns: 1fr;
    }

    .dwh-controls {
        bottom: 18px;
    }

    .dwh-slide-label {
        bottom: 64px;
    }

    .dwh-arrow {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dwh-slide {
        transition: none !important;
        transform: none !important;
    }

    .dwh-arrow,
    .dwh-nav-dot {
        transition: none !important;
    }

    .dwh-progress i {
        animation: none !important;
    }

    .dwh-anim {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*-------------- TABLES BLOG ------------------*/

/* =====================================================
   DNN DEVELOPERS | DNN UPGRADE GUIDE
   Premium table design - Version 3
   ===================================================== */

.dnn-upgrade-guide-content {
    --upgrade-ink: #102e50;
    --upgrade-blue: #176797;
    --upgrade-teal: #08a6a1;
    --upgrade-mint: #d9fbf4;
    --upgrade-line: #e0eaf3;
    --upgrade-muted: #64758b;
    --upgrade-shadow: 0 14px 40px rgba(16, 46, 80, .10);
}

    /* Outer glass-like card */
    .dnn-upgrade-guide-content .dnn-table-wrap {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        margin: 38px 0 46px;
        padding: 0 12px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        background: linear-gradient(145deg, #f4faff 0%, #ffffff 48%, #f7fbff 100%);
        border: 1px solid #d8e7f2;
        border-radius: 18px;
        box-shadow: 0 2px 5px rgba(16, 46, 80, .025), 0 14px 38px rgba(16, 46, 80, .085), inset 0 1px 0 #ffffff;
        scrollbar-width: thin;
        scrollbar-color: #78b8c6 #edf4f8;
        -webkit-overflow-scrolling: touch;
    }

        /* Animated brand accent */
        .dnn-upgrade-guide-content .dnn-table-wrap::before {
            content: "";
            display: block;
            width: 100%;
            height: 5px;
            margin-bottom: 2px;
            border-radius: 20px;
            background: linear-gradient( 90deg, #102e50 0%, #176797 35%, #08a6a1 72%, #74e1c7 100% );
            background-size: 180% 100%;
            animation: dnnTableAccent 8s ease-in-out infinite alternate;
        }

@keyframes dnnTableAccent {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

/* Main table */
.dnn-upgrade-guide-content table {
    width: 100%;
    min-width: 700px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 7px;
    background: transparent;
    color: #34465b;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.8;
    text-align: left;
}

    /* Dramatic gradient header */
    .dnn-upgrade-guide-content table thead th {
        position: relative;
        padding: 21px 22px;
        background: radial-gradient( circle at 95% 5%, rgba(70, 220, 203, .16), transparent 35% ), linear-gradient( 120deg, #102945 0%, #164b72 56%, #087e8a 100% );
        color: #ffffff;
        font-size: 11.5px;
        font-weight: 800;
        line-height: 1.65;
        letter-spacing: .09em;
        text-transform: uppercase;
        vertical-align: middle;
        border: 0;
        border-bottom: 3px solid #37d5bf;
    }

        /* Header corners */
        .dnn-upgrade-guide-content table thead th:first-child {
            border-radius: 11px 0 0 11px;
            box-shadow: inset 4px 0 0 #49ddc4;
        }

        .dnn-upgrade-guide-content table thead th:last-child {
            border-radius: 0 11px 11px 0;
        }

    /* Elevated individual body rows */
    .dnn-upgrade-guide-content table tbody tr {
        transition: transform .22s ease, filter .22s ease;
    }

    .dnn-upgrade-guide-content table tbody td {
        padding: 18px 22px;
        vertical-align: top;
        background: #ffffff;
        border: 0;
        border-top: 1px solid #edf2f7;
        border-bottom: 1px solid #e2eaf2;
        overflow-wrap: anywhere;
        transition: background-color .22s ease, color .22s ease;
    }

        /* Rounded card edges */
        .dnn-upgrade-guide-content table tbody td:first-child {
            border-left: 1px solid #e2eaf2;
            border-radius: 11px 0 0 11px;
        }

        .dnn-upgrade-guide-content table tbody td:last-child {
            border-right: 1px solid #e2eaf2;
            border-radius: 0 11px 11px 0;
        }

    /* Subtle alternating card surfaces */
    .dnn-upgrade-guide-content table tbody tr:nth-child(even) td {
        background-color: #f4f8fc;
    }

    /* Branded first-column treatment */
    .dnn-upgrade-guide-content table tbody td:first-child {
        color: #103b61;
        font-weight: 750;
        border-left: 4px solid #0ba6a3;
        background-image: linear-gradient( 110deg, rgba(8, 166, 161, .10), rgba(23, 103, 151, .025) );
    }

    /* Hover: brighten and lift */
    .dnn-upgrade-guide-content table tbody tr:hover {
        transform: translateY(-2px);
        filter: drop-shadow(0 5px 8px rgba(16, 46, 80, .07));
    }

        .dnn-upgrade-guide-content table tbody tr:hover td {
            background-color: #eaf8fc;
            color: #153e60;
            border-top-color: #bfe7ed;
            border-bottom-color: #bfe7ed;
        }

            .dnn-upgrade-guide-content table tbody tr:hover td:first-child {
                background-color: #dcf5f2;
                background-image: none;
                border-left-color: #087f8c;
            }

    /* Final row */
    .dnn-upgrade-guide-content table tbody tr:last-child td {
        border-bottom-color: #dce7f0;
    }

    /* Technical version labels */
    .dnn-upgrade-guide-content table td code {
        display: inline-block;
        padding: 4px 9px;
        margin: 1px 0;
        color: #075b75;
        background: linear-gradient(135deg, #e8f8fa, #e9f2ff);
        border: 1px solid #cce7ee;
        border-radius: 7px;
        font-family: Consolas, "Courier New", monospace;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.6;
    }

    /* Links */
    .dnn-upgrade-guide-content table td a {
        color: #067c91;
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid #8cd5d6;
        transition: color .2s ease, border-color .2s ease;
    }

        .dnn-upgrade-guide-content table td a:hover {
            color: #102e50;
            border-bottom-color: #102e50;
        }

    /* Emphasis */
    .dnn-upgrade-guide-content table td strong {
        color: #102e50;
        font-weight: 800;
    }

    /* Optional captions */
    .dnn-upgrade-guide-content table caption {
        padding: 15px 4px 12px;
        color: #102e50;
        font-size: 17px;
        font-weight: 800;
        text-align: left;
        caption-side: top;
    }

    /* Optional footer */
    .dnn-upgrade-guide-content table tfoot td {
        padding: 17px 22px;
        color: #103b61;
        background: #eaf5fa;
        font-weight: 650;
        border-top: 1px solid #d8e7f2;
    }

/* Tablet and mobile */
@media (max-width: 767px) {
    .dnn-upgrade-guide-content .dnn-table-wrap {
        margin: 27px 0 34px;
        padding: 0 7px 7px;
        border-radius: 13px;
    }

    .dnn-upgrade-guide-content table {
        min-width: 650px;
        font-size: 13px;
        border-spacing: 0 5px;
        line-height: 1.7;
    }

        .dnn-upgrade-guide-content table thead th {
            padding: 16px 14px;
            font-size: 10px;
            letter-spacing: .065em;
        }

        .dnn-upgrade-guide-content table tbody td {
            padding: 14px;
        }

            .dnn-upgrade-guide-content table tbody td:first-child {
                border-left-width: 3px;
            }
}

/* Accessible reduced-motion mode */
@media (prefers-reduced-motion: reduce) {
    .dnn-upgrade-guide-content .dnn-table-wrap::before {
        animation: none;
    }

    .dnn-upgrade-guide-content table tbody tr,
    .dnn-upgrade-guide-content table tbody td,
    .dnn-upgrade-guide-content table td a {
        transition: none;
    }
}


/*-------------- TABLES BLOG ------------------*/


#main-content a {
    color: var(--blue);
    text-decoration: none;
}
    #main-content a:hover {
        color: var(--blue-dark);
        border-bottom-color: var(--blue-dark);
        box-shadow: var(--shadow);
    }