:root {
     --primary: #2d3cf5;
    /* buttons, logo, active menu */
     --primary-dark: #1f2bd0;
    /* button hover */
     --topbar-bg: #111112;
    /* top bar background */
     --topbar-text: #ffffff;
     --header-bg: #ffffff;
    /* menu background */
     --heading: #111112;
    /* logo text + menu text */
     --hero-from: #eceeff;
    /* hero gradient start */
     --hero-via: #f5f1ff;
    /* hero gradient middle */
     --hero-to: #ffffff;
    /* hero gradient end */
     --body-font: 'Poppins', sans-serif;
     --header-height: 90px;
}
/* ---------- Base ---------- */
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: var(--body-font);
     color: #555;
     -webkit-font-smoothing: antialiased;
}
 a {
     text-decoration: none;
}
/* ---------- Top bar ---------- */
 .topbar {
     background: var(--topbar-bg);
     color: var(--topbar-text);
     padding: 20px 0;
     font-size: 17px;
     background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
     background-size: 72px 72px;
}
 .topbar ul {
     display: flex;
     align-items: center;
     gap: 36px;
     padding: 0;
}
 .topbar a, .topbar span {
     color: var(--topbar-text);
     display: inline-flex;
     align-items: center;
     transition: opacity .2s;
}
 .topbar-info i {
     margin-right: 10px;
     font-size: 19px;
}
 .topbar-info a:hover {
     opacity: .75;
}
 .topbar-social {
     gap: 24px !important;
}
 .topbar-social a {
     font-size: 17px;
}
 .topbar-social a:hover {
     color: var(--primary);
}
/* ---------- Sticky header ---------- */
 .site-header {
     position: sticky;
     top: 0;
     z-index: 1030;
     background: var(--header-bg);
     transition: box-shadow .3s ease;
}
 .site-header.is-stuck {
     box-shadow: 0 8px 30px rgba(17, 17, 18, .1);
}
 .site-header .navbar {
     min-height: var(--header-height);
     padding: 0;
     transition: min-height .3s ease;
}
 .site-header.is-stuck .navbar {
     min-height: 76px;
}
/* Logo */
 .navbar-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 0;
     margin-right: 40px;
}
 .brand-mark {
     width: 60px;
     height: 60px;
     flex-shrink: 0;
     transition: width .3s, height .3s;
}
 .is-stuck .brand-mark {
     width: 50px;
     height: 50px;
}
 .brand-text {
     font-size: 42px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -1px;
     line-height: 1;
}
/* Menu links */
 .navbar-nav {
     gap: 12px;
}
 .navbar-nav .nav-link {
     color: var(--heading);
     font-size: 18px;
     font-weight: 500;
     padding: 32px 18px;
     transition: color .2s;
}
 .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
     color: var(--primary);
}
/* Dropdown arrow (filled triangle like the design) */
 .navbar-nav .dropdown-toggle::after {
     border: 0;
     width: 0;
     height: 0;
     margin-left: 12px;
     vertical-align: middle;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 7px solid currentColor;
}
/* Dropdown menu */
 .dropdown-menu {
     border: 0;
     border-radius: 12px;
     padding: 12px 0;
     min-width: 210px;
     box-shadow: 0 20px 40px rgba(17, 17, 18, .12);
     margin-top: 0;
     display: block;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
 .dropdown-menu.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}
 .dropdown-item {
     padding: 10px 24px;
     font-weight: 500;
     color: var(--heading);
     transition: color .2s, padding .2s, background .2s;
}
 .dropdown-item:hover, .dropdown-item:focus {
     background: transparent;
     color: var(--primary);
     padding-left: 30px;
}
/* Desktop: open dropdown on hover */
 @media (min-width: 992px) {
     .navbar-nav .dropdown:hover > .dropdown-menu {
         display: block;
    }
}
/* Search + CTA */
 .header-actions {
     gap: 32px;
}
 .search-btn {
     background: none;
     border: 0;
     color: var(--heading);
     font-size: 25px;
     padding: 0;
     line-height: 1;
     transition: color .2s;
}
 .search-btn:hover {
     color: var(--primary);
}
 .btn-cta {
     --bs-btn-color: #fff;
     --bs-btn-hover-color: #fff;
     --bs-btn-active-color: #fff;
     background: var(--primary);
     border: 2px solid var(--primary);
     border-radius: 50px;
     padding: 18px 36px;
     font-size: 18px;
     font-weight: 600;
     color: #fff;
     transition: background .25s, border-color .25s, transform .25s;
}
 .btn-cta i {
     margin-left: 8px;
     font-size: 16px;
}
 .btn-cta:hover {
     background: var(--primary-dark);
     border-color: var(--primary-dark);
     color: #fff;
}
 .header-actions .btn-cta {
     padding: 16px 34px;
}
 .btn-cta-light {
     box-shadow: 0 14px 30px rgba(45, 60, 245, .22);
}
 .btn-cta-light:hover {
     transform: translateY(-2px);
}
/* Search panel */
 .search-panel {
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     background: var(--header-bg);
     padding: 24px 0;
     box-shadow: 0 20px 30px rgba(17, 17, 18, .08);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
     transition: all .25s ease;
}
 .search-panel.open {
     opacity: 1;
     visibility: visible;
     transform: none;
}
 .search-form {
     display: flex;
     gap: 12px;
}
 .search-form .form-control {
     border-radius: 50px;
     padding: 14px 26px;
     border: 1.5px solid #e4e6ef;
     box-shadow: none;
}
 .search-form .form-control:focus {
     border-color: var(--primary);
}
 .search-form .btn-cta {
     padding: 14px 26px;
}
/* Mobile toggler */
 .navbar-toggler {
     border: 0;
     font-size: 34px;
     color: var(--heading);
     padding: 0;
     box-shadow: none !important;
}
/* Keyboard focus */
 a:focus-visible, button:focus-visible {
     outline: 2px solid var(--primary);
     outline-offset: 3px;
}
/* ---------- Responsive ---------- */
 @media (max-width: 1399.98px) {
     .brand-text {
         font-size: 36px;
    }
     .navbar-nav .nav-link {
         font-size: 17px;
         padding: 32px 12px;
    }
     .header-actions {
         gap: 22px;
    }
     .header-actions .btn-cta {
         padding: 14px 26px;
         font-size: 16px;
    }
     .topbar {
         font-size: 15px;
    }
     .topbar ul {
         gap: 24px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .navbar > .container {
        flex-wrap: nowrap;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .brand-text {
        font-size: 24px;
        white-space: nowrap;
    }

    .navbar-nav {
        gap: 0;
    }

    .navbar-nav .nav-link {
        padding-left: 7px;
        padding-right: 7px;
        white-space: nowrap;
        font-size: 14px;
    }

    .header-actions {
        flex-shrink: 0;
        gap: 8px;
    }
}

 @media (max-width: 991.98px) {
     .site-header .navbar {
         min-height: 76px;
    }
     .brand-mark {
         width: 46px;
         height: 46px;
    }
     .brand-text {
         font-size: 30px;
    }
     .navbar > .container {
         flex-wrap: wrap;
    }
     .navbar-collapse {
         padding: 10px 0 24px;
         border-top: 1px solid #eee;
         margin-top: 12px;
         max-height: calc(100vh - 100px);
         overflow-y: auto;
    }
     .navbar-nav {
         gap: 0;
    }
     .navbar-nav .nav-link {
         padding: 14px 0;
    }
     .dropdown-menu {
         box-shadow: none;
         padding: 0 0 0 16px;
         min-width: 0;
        /* On mobile, Bootstrap makes .dropdown-menu position:static, so the old opacity/visibility technique (built for desktop's position:absolute) would reserve empty layout space even while "closed". Collapse it to zero height instead, and animate that on open. */
         opacity: 1;
         visibility: visible;
         transform: none;
         max-height: 0;
         overflow: hidden;
         transition: max-height .35s ease;
    }
     .dropdown-menu.show {
         max-height: 320px;
         overflow-y: auto;
    }
     .header-actions {
         margin-top: 16px;
         justify-content: space-between;
    }
}
 @media (max-width: 575.98px) {
     .topbar {
         padding: 12px 0;
         font-size: 14px;
    }
     .topbar-social {
         gap: 16px !important;
    }
}
/* ========================================================= HERO ========================================================= */
 .hero {
     position: relative;
     overflow: hidden;
     padding: 110px 0 130px;
     background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 55%, var(--hero-to) 100%);
}
/* soft grid, same feel as the top bar */
 .hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(45, 60, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 60, 245, .05) 1px, transparent 1px);
     background-size: 72px 72px;
     -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
     mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
 .hero-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     pointer-events: none;
}
 .hero-glow-1 {
     width: 460px;
     height: 460px;
     background: var(--primary);
     opacity: .22;
     top: -140px;
     right: -80px;
}
 .hero-glow-2 {
     width: 380px;
     height: 380px;
     background: #a855f7;
     opacity: .18;
     bottom: -160px;
     left: -100px;
}
/* Badge */
 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #fff;
     border: 1px solid rgba(45, 60, 245, .15);
     border-radius: 50px;
     padding: 6px 18px 6px 6px;
     font-size: 15px;
     font-weight: 500;
     color: var(--heading);
     box-shadow: 0 6px 20px rgba(45, 60, 245, .08);
     margin-bottom: 28px;
     transition: transform .25s, box-shadow .25s;
}
 .hero-badge:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 26px rgba(45, 60, 245, .15);
     color: var(--heading);
}
 .badge-new {
     background: var(--primary);
     color: #fff;
     border-radius: 50px;
     padding: 4px 14px;
     font-size: 13px;
     font-weight: 600;
}
 .hero-badge i {
     color: var(--primary);
}
/* Text */
 .hero-title {
     font-size: clamp(38px, 5.2vw, 66px);
     font-weight: 700;
     line-height: 1.12;
     letter-spacing: -1.5px;
     color: var(--heading);
     margin-bottom: 24px;
}
 .hero-text {
     font-size: 18px;
     line-height: 1.8;
     max-width: 540px;
     margin-bottom: 40px;
}
 .hero-buttons {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px 32px;
     margin-bottom: 48px;
}
 .hero-buttons .btn-cta {
     box-shadow: 0 14px 30px rgba(45, 60, 245, .3);
}
 .hero-buttons .btn-cta:hover {
     transform: translateY(-2px);
}
 .btn-play {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     padding: 0;
     border: 0;
     font-size: 18px;
     font-weight: 600;
     color: var(--heading);
}
 .btn-play:hover {
     color: var(--primary);
}
 .play-icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #fff;
     color: var(--primary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     box-shadow: 0 8px 24px rgba(17, 17, 18, .1);
     transition: background .25s, color .25s;
}
 .btn-play:hover .play-icon {
     background: var(--primary);
     color: #fff;
}
/* Social proof */
 .hero-proof {
     display: flex;
     align-items: center;
     gap: 18px;
}
 .avatars {
     display: flex;
}
 .avatars li {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--c);
     color: #fff;
     border: 3px solid #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: 600;
     margin-left: -12px;
}
 .avatars li:first-child {
     margin-left: 0;
}
 .stars {
     color: #f59e0b;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 2px;
}
 .stars strong {
     color: var(--heading);
     margin-left: 8px;
     font-size: 15px;
}
 .proof-text {
     font-size: 15px;
}
/* ---------- Dashboard mockup ---------- */
 .hero-visual {
     position: relative;
     padding: 20px 0 30px 20px;
}
 .dash {
     background: #fff;
     border-radius: 22px;
     box-shadow: 0 40px 80px rgba(45, 60, 245, .18), 0 0 0 1px rgba(45, 60, 245, .06);
     overflow: hidden;
}
 .dash-bar {
     display: flex;
     gap: 7px;
     padding: 14px 20px;
     background: #f6f7fd;
     border-bottom: 1px solid #eceefb;
}
 .dash-bar span {
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: #d6d9f0;
}
 .dash-body {
     display: flex;
}
 .dash-side {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 22px;
     padding: 26px 20px;
     border-right: 1px solid #eceefb;
     color: #b3b7d3;
     font-size: 18px;
}
 .dash-side i.active {
     color: var(--primary);
     background: rgba(45, 60, 245, .1);
     padding: 8px;
     border-radius: 10px;
     margin: -8px;
}
 .dash-main {
     flex: 1;
     padding: 26px;
     min-width: 0;
}
 .dash-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
}
 .dash-head h6 {
     margin: 0;
     font-weight: 600;
     color: var(--heading);
     font-size: 17px;
}
 .dash-pill {
     font-size: 12px;
     background: #f1f2fd;
     color: var(--primary);
     padding: 5px 12px;
     border-radius: 50px;
     font-weight: 500;
}
 .dash-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin-bottom: 22px;
}
 .dash-stats > div {
     background: #f6f7fd;
     border-radius: 14px;
     padding: 14px 16px;
}
 .dash-stats small {
     display: block;
     font-size: 12px;
     color: #8b8fae;
     margin-bottom: 4px;
}
 .dash-stats strong {
     font-size: 20px;
     color: var(--heading);
     font-weight: 600;
}
 .dash-chart {
     height: 170px;
}
 .dash-chart svg {
     width: 100%;
     height: 100%;
     display: block;
}
/* Floating cards (one gentle loop only) */
 .float-card {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 14px;
     background: #fff;
     border-radius: 16px;
     padding: 14px 20px 14px 14px;
     box-shadow: 0 20px 40px rgba(17, 17, 18, .12);
}
 .float-card small {
     display: block;
     font-size: 12px;
     color: #8b8fae;
}
 .float-card strong {
     font-size: 18px;
     color: var(--heading);
     font-weight: 600;
}
 .float-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
}
 .float-icon.green {
     background: #dcfce7;
     color: #16a34a;
}
 .float-icon.blue {
     background: rgba(45, 60, 245, .12);
     color: var(--primary);
}
 .float-growth {
     left: -10px;
     bottom: -6px;
     animation: floaty 6s ease-in-out infinite;
}
 .float-task {
     right: -6px;
     top: 0;
     animation: floaty 6s ease-in-out -3s infinite;
}
 @keyframes floaty {
     0%, 100% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-10px);
    }
}
 @media (prefers-reduced-motion: reduce) {
     .float-card {
         animation: none;
    }
     html {
         scroll-behavior: auto;
    }
}
 @media (max-width: 991.98px) {
     .hero {
         padding: 70px 0 90px;
    }
     .hero-visual {
         padding-left: 0;
    }
}
 @media (max-width: 575.98px) {
     .hero-text {
         font-size: 16px;
    }
     .dash-side {
         display: none;
    }
     .dash-main {
         padding: 18px;
    }
     .dash-stats strong {
         font-size: 16px;
    }
     .dash-stats > div {
         padding: 10px 12px;
    }
     .float-growth {
         left: 0;
    }
     .float-task {
         right: 0;
    }
}
/* ========================================================= TRUSTED BY ========================================================= */
 .trusted {
     padding: 56px 0 30px;
     background: #fff;
}
 .trusted-title {
     text-align: center;
     font-size: 16px;
     margin-bottom: 30px;
}
 .trusted-logos {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 24px 48px;
}
 .trusted-logos li {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 26px;
     font-weight: 600;
     letter-spacing: -.5px;
     color: #a4a8c4;
     transition: color .25s;
}
 .trusted-logos li i {
     font-size: 26px;
}
 .trusted-logos li:hover {
     color: var(--heading);
}
/* ========================================================= SECTION HEADINGS (reusable) ========================================================= */
 .section-head {
     max-width: 720px;
     margin: 0 auto 64px;
}
 .section-badge {
     display: inline-block;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     border-radius: 50px;
     padding: 7px 20px;
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 22px;
}
 .section-title {
     font-size: clamp(30px, 3.8vw, 48px);
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: -1px;
     color: var(--heading);
     margin-bottom: 18px;
}
 .section-text {
     font-size: 18px;
     line-height: 1.8;
     margin: 0;
}
/* ========================================================= FEATURES (bento) ========================================================= */
 .features {
     padding: 90px 0 130px;
     background: #fff;
}
 .feature-card {
     position: relative;
     display: flex;
     flex-direction: column;
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 28px;
     padding: 36px;
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
 .feature-card:hover {
     transform: translateY(-6px);
     border-color: rgba(45, 60, 245, .25);
     box-shadow: 0 24px 50px rgba(45, 60, 245, .1);
}
 .feature-card h3 {
     font-size: 23px;
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -.3px;
     color: var(--heading);
     margin: auto 0 12px;
}
 .feature-card p {
     margin: 0;
     line-height: 1.75;
}
/* visual area on top of small cards */
 .feature-card > [class$="-visual"], .feature-card > .mini-bars {
     margin-bottom: 34px;
}
/* --- Featured (primary) card --- */
 .feature-primary {
     background: linear-gradient(135deg, var(--primary) 0%, #5a3df0 100%);
     border-color: transparent;
     color: rgba(255, 255, 255, .82);
     overflow: hidden;
}
 .feature-primary::after {
     content: "";
     position: absolute;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     right: -110px;
     top: -130px;
     background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
     pointer-events: none;
}
 .feature-primary:hover {
     border-color: transparent;
     box-shadow: 0 30px 60px rgba(45, 60, 245, .35);
}
 .feature-primary h3 {
     color: #fff;
     font-size: 30px;
     margin-top: 0;
     max-width: 460px;
}
 .feature-primary p {
     max-width: 460px;
}
 .feature-primary .feature-body {
     margin-bottom: 44px;
}
 .flow {
     display: flex;
     align-items: center;
     margin-top: auto;
}
 .flow-node {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     gap: 12px;
     background: #fff;
     color: var(--heading);
     border-radius: 16px;
     padding: 14px 18px;
     font-size: 15px;
     font-weight: 500;
     box-shadow: 0 14px 30px rgba(10, 15, 100, .25);
}
 .fn{
    color:#111112;
}
 .flow-node i {
     font-size: 18px;
     color: var(--primary);
}
 .flow-node.is-done i {
     color: #16a34a;
}
 .flow-line {
     flex: 1 1 24px;
     min-width: 24px;
     height: 2px;
     background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 6px, transparent 6px 12px);
}
/* --- Analytics bars --- */
 .mini-bars {
     display: flex;
     align-items: flex-end;
     gap: 10px;
     height: 150px;
     padding: 0 4px;
}
 .mini-bars span {
     position: relative;
     flex: 1;
     height: var(--h);
     border-radius: 10px;
     background: #d9dcf8;
     transition: background .3s;
}
 .mini-bars span.hl {
     background: var(--primary);
}
 .mini-bars em {
     position: absolute;
     left: 50%;
     bottom: calc(100% + 8px);
     transform: translateX(-50%);
     background: var(--heading);
     color: #fff;
     font-style: normal;
     font-size: 12px;
     font-weight: 600;
     padding: 3px 9px;
     border-radius: 8px;
     white-space: nowrap;
}
/* --- Team --- */
 .team-visual {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 18px;
     padding-top: 6px;
}
 .team-visual .avatars li {
     border-color: #f7f8ff;
     width: 48px;
     height: 48px;
}
 .chat-bubble {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #fff;
     border-radius: 14px 14px 14px 4px;
     padding: 11px 16px;
     font-size: 14px;
     font-weight: 500;
     color: var(--heading);
     box-shadow: 0 10px 24px rgba(17, 17, 18, .07);
}
 .chat-bubble i {
     color: var(--primary);
}
/* --- Security --- */
 .secure-visual {
     display: flex;
     align-items: center;
     gap: 18px;
     padding-top: 6px;
}
 .shield {
     width: 72px;
     height: 72px;
     border-radius: 20px;
     flex-shrink: 0;
     background: #fff;
     color: #16a34a;
     font-size: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 24px rgba(22, 163, 74, .15);
}
 .chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
}
 .chips span {
     background: #fff;
     border: 1px solid #e3e6f8;
     border-radius: 50px;
     padding: 5px 14px;
     font-size: 13px;
     font-weight: 600;
     color: var(--heading);
}
/* --- Integrations --- */
 .apps-visual {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
}
 .apps-visual span {
     aspect-ratio: 1.5 / 1;
     border-radius: 16px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     color: var(--heading);
     box-shadow: 0 6px 16px rgba(17, 17, 18, .05);
     transition: color .25s, transform .25s;
}
 .feature-card:hover .apps-visual span {
     color: var(--primary);
}
/* --- Responsive --- */
 @media (max-width: 1199.98px) {
     .trusted-logos li {
         font-size: 22px;
    }
     .flow-node span {
         font-size: 14px;
    }
     .flow-node {
         padding: 12px 14px;
    }
}
 @media (max-width: 991.98px) {
     .features {
         padding: 60px 0 90px;
    }
     .section-head {
         margin-bottom: 44px;
    }
     .trusted-logos {
         justify-content: center;
         gap: 20px 36px;
    }
}
 @media (max-width: 575.98px) {
     .feature-card {
         padding: 28px 24px;
         border-radius: 22px;
    }
     .feature-primary h3 {
         font-size: 25px;
    }
     .flow {
         flex-direction: column;
         align-items: stretch;
    }
     .flow-line {
         flex: 0 0 22px;
         width: 2px;
         height: 22px;
         margin-left: 28px;
         background: repeating-linear-gradient(180deg, rgba(255,255,255,.7) 0 5px, transparent 5px 10px);
    }
     .section-text {
         font-size: 16px;
    }
}
/* ========================================================= ABOUT US ========================================================= */
 .about {
     padding: 90px 0 100px;
     background: #f7f8ff;
}
 .about-visual {
     position: relative;
     padding: 10px 40px 40px 10px;
}
 .about-panel {
     background: #fff;
     border-radius: 26px;
     padding: 30px;
     box-shadow: 0 40px 80px rgba(45, 60, 245, .12), 0 0 0 1px rgba(45, 60, 245, .05);
}
 .panel-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 26px;
}
 .panel-head h6 {
     margin: 0;
     font-weight: 600;
     color: var(--heading);
     font-size: 18px;
}
 .task-list li {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 14px 0;
     border-bottom: 1px solid #f1f2fa;
}
 .task-list li:last-child {
     border-bottom: 0;
     padding-bottom: 0;
}
 .t-avatar {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     flex-shrink: 0;
     background: var(--c);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .t-info {
     flex: 1;
     min-width: 0;
}
 .t-info strong {
     display: block;
     font-size: 14.5px;
     font-weight: 500;
     color: var(--heading);
     margin-bottom: 8px;
}
 .t-bar {
     display: block;
     height: 6px;
     border-radius: 50px;
     background: #eceefb;
     overflow: hidden;
}
 .t-bar i {
     display: block;
     height: 100%;
     width: var(--w);
     border-radius: 50px;
     background: var(--primary);
}
 .task-list em {
     font-style: normal;
     font-size: 13px;
     font-weight: 600;
     color: #8b8fae;
}
 .about-score {
     left: -20px;
     bottom: 10px;
     display: flex;
     align-items: center;
     gap: 14px;
     animation: floaty 6s ease-in-out infinite;
}
 .about-score .ring {
     width: 56px;
     height: 56px;
     flex-shrink: 0;
}
 .about-score strong {
     font-size: 20px;
}
 .about-score small {
     display: block;
     font-size: 12px;
     color: #8b8fae;
     white-space: nowrap;
}
 .about-since {
     position: absolute;
     right: 8px;
     top: -6px;
     width: 108px;
     height: 108px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 20px 40px rgba(17, 17, 18, .1);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     line-height: 1.3;
}
 .about-since strong {
     font-size: 30px;
     color: var(--primary);
     font-weight: 700;
}
 .about-since span {
     font-size: 12px;
     color: #8b8fae;
     font-weight: 500;
}
/* Content column */
 .about-lead {
     margin-bottom: 36px;
}
 .about-list {
     display: flex;
     flex-direction: column;
     gap: 26px;
     margin-bottom: 40px;
}
 .about-list li {
     display: flex;
     gap: 20px;
}
 .about-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     flex-shrink: 0;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
}
 .about-list h4 {
     font-size: 18px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 4px;
}
 .about-list p {
     margin: 0;
     font-size: 15.5px;
     line-height: 1.7;
}
 .about-actions {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px 32px;
}
 .about-call {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     color: var(--heading);
}
 .about-call .play-icon {
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     font-size: 18px;
     width: 52px;
     height: 52px;
     box-shadow: none;
}
 .about-call small {
     display: block;
     font-size: 13px;
}
 .about-call strong {
     font-size: 17px;
     font-weight: 600;
}
 .about-call:hover .play-icon {
     background: var(--primary);
     color: #fff;
}
/* Stats bar */
 .about-stats {
     margin-top: 90px;
     background: #fff;
     border-radius: 26px;
     box-shadow: 0 30px 60px rgba(45, 60, 245, .08);
}
 .stat {
     text-align: center;
     padding: 44px 20px;
     border-right: 1px solid #f1f2fa;
}
 .about-stats .row > div:last-child .stat, .about-stats .row > div:nth-child(4) .stat {
     border-right: 0;
}
 .stat strong {
     display: flex;
     align-items: baseline;
     justify-content: center;
     gap: 3px;
     font-size: 44px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -1px;
     line-height: 1;
     margin-bottom: 12px;
}
 .stat .counter {
     font-size: 1em;
     font-weight: 700;
}
 .stat .stat-sym {
     font-size: 0.62em;
     font-weight: 700;
     color: var(--primary);
}
 .stat span:last-child {
     display: block;
     font-size: 15px;
}
/* ========================================================= HOW IT WORKS ========================================================= */
 .process {
     padding: 90px 0 110px;
     background: #fff;
     overflow: hidden;
}
 .steps {
     position: relative;
     z-index: 1;
     margin-top: 10px;
}
 .step {
     position: relative;
     height: 100%;
}
 .step-no {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     font-weight: 700;
     font-size: 16px;
     margin-bottom: 20px;
     box-shadow: 0 10px 20px rgba(45, 60, 245, .25);
}
 .step-card {
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 26px;
     padding: 32px;
     height: 100%;
     transition: transform .3s ease, box-shadow .3s ease;
}
 .step:hover .step-card {
     transform: translateY(-6px);
     box-shadow: 0 24px 48px rgba(45, 60, 245, .1);
}
 .step-card h3 {
     font-size: 21px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 10px;
}
 .step-card p {
     margin: 0;
     line-height: 1.75;
}
 .step-visual {
     margin-bottom: 28px;
}
/* Step 1 visual */
 .mock-line {
     display: block;
     height: 12px;
     border-radius: 6px;
     background: #dfe1f7;
     margin-bottom: 10px;
}
 .mock-line.short {
     width: 60%;
     margin-bottom: 20px;
}
 .mock-btn {
     display: inline-block;
     background: var(--primary);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     padding: 9px 18px;
     border-radius: 10px;
}
/* Step 2 visual */
 .step-apps {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     height: 76px;
}
 .step-apps span {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: var(--heading);
     box-shadow: 0 6px 16px rgba(17, 17, 18, .06);
}
 .sa span{
    color:#111112;
}
 .step-apps .main {
     width: 58px;
     height: 58px;
     border-radius: 16px;
     background: var(--primary);
     color: #fff;
     font-size: 24px;
}
 .step-apps .link {
     flex: 1;
     max-width: 40px;
     height: 2px;
     background: repeating-linear-gradient(90deg, #c7cbef 0 5px, transparent 5px 10px);
}
/* Step 3 visual */
 .step-growth {
     position: relative;
     height: 76px;
}
 .step-growth svg {
     width: 100%;
     height: 100%;
     display: block;
}
 .growth-chip {
     position: absolute;
     right: 0;
     top: -6px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #fff;
     border-radius: 50px;
     padding: 6px 14px;
     font-size: 12px;
     font-weight: 600;
     color: var(--heading);
     box-shadow: 0 8px 20px rgba(17, 17, 18, .08);
}
 .gc{
    color:#111112;
}
 .growth-chip i {
     color: #16a34a;
}
 .process-cta {
     margin-top: 68px;
     padding-top: 4px;
}
 .process-cta span {
     display: block;
     margin-top: 18px;
     font-size: 14.5px;
}
/* ========================================================= RESPONSIVE — about + process ========================================================= */
 @media (max-width: 991.98px) {
     .about {
         padding: 60px 0 70px;
    }
     .about-visual {
         padding: 30px 30px 60px 0;
         margin-bottom: 20px;
    }
     .about-stats {
         margin-top: 56px;
    }
     .stat {
         padding: 30px 16px;
         border-bottom: 1px solid #f1f2fa;
    }
     .stat strong {
         font-size: 34px;
    }
     .process {
         padding: 60px 0 80px;
    }
}
 @media (max-width: 575.98px) {
     .about-since {
         width: 88px;
         height: 88px;
         right: 0;
    }
     .about-since strong {
         font-size: 24px;
    }
     .about-score {
         left: 0;
         gap: 10px;
         padding: 14px 16px;
    }
     .about-actions {
         gap: 16px 24px;
    }
     .stat {
         border-right: 0 !important;
    }
     .step-card {
         padding: 26px 22px;
    }
}
/* ========================================================= OUR SERVICES ========================================================= */
 .services {
     padding: 90px 0 130px;
     background: #f7f8ff;
}
 .service-card {
     --mx: 50%;
     --my: 50%;
     position: relative;
     width: 100%;
     text-align: left;
     appearance: none;
     color: inherit;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 26px;
     padding: 40px 34px;
     height: 100%;
     cursor: pointer;
     overflow: hidden;
     isolation: isolate;
     transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* soft glow that follows the cursor */
 .service-card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: radial-gradient(320px circle at var(--mx) var(--my), rgba(45, 60, 245, .12), transparent 65%);
     opacity: 0;
     transition: opacity .35s ease;
}
/* animated gradient border on hover */
 .service-card::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 1.5px;
     background: linear-gradient(135deg, var(--primary), #a855f7, var(--primary));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     opacity: 0;
     transition: opacity .35s ease;
     pointer-events: none;
}
 .service-card:hover, .service-card:focus-visible {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(45, 60, 245, .16);
     border-color: transparent;
}
 .service-card:hover::before, .service-card:focus-visible::before, .service-card:hover::after, .service-card:focus-visible::after {
     opacity: 1;
}
 .service-icon {
     position: relative;
     width: 66px;
     height: 66px;
     border-radius: 18px;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     margin-bottom: 26px;
     transition: background .35s ease, color .35s ease, transform .35s ease;
}
 .service-card:hover .service-icon {
     background: var(--primary);
     color: #fff;
     transform: scale(1.08) rotate(-6deg);
}
 .service-card h3 {
     font-size: 21px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 10px;
}
 .service-card p {
     margin: 0 0 26px;
     line-height: 1.75;
}
 .service-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 15px;
     font-weight: 600;
     color: var(--primary);
}
 .service-link i {
     transition: transform .3s ease;
}
 .service-card:hover .service-link i {
     transform: translateX(6px);
}
 @media (prefers-reduced-motion: reduce) {
     .service-card, .service-icon, .service-link i {
         transition: none;
    }
}
 @media (max-width: 991.98px) {
     .services {
         padding: 60px 0 90px;
    }
     .service-card {
         padding: 32px 26px;
    }
}
/* ---------- Service details modal ---------- */
 .service-modal .modal-content {
     border: 0;
     border-radius: 26px;
     padding: 48px 44px;
     box-shadow: 0 40px 90px rgba(17, 17, 18, .25);
}
 .service-modal .btn-close {
     position: absolute;
     top: 24px;
     right: 24px;
     opacity: .5;
}
 .service-modal .btn-close:hover {
     opacity: 1;
}
 .modal-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 62px;
     height: 62px;
     border-radius: 16px;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     font-size: 26px;
     margin-bottom: 20px;
}
 .modal-badge {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--primary);
     margin-bottom: 8px;
}
 .modal-title-text {
     font-size: 28px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -.5px;
     margin-bottom: 14px;
}
 .modal-desc {
     font-size: 16.5px;
     line-height: 1.75;
     margin-bottom: 24px;
}
 .modal-points {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px 20px;
     margin-bottom: 34px;
}
 .modal-points li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 15px;
     color: var(--heading);
     font-weight: 500;
}
 .modal-points li i {
     color: #16a34a;
     margin-top: 3px;
}
 @media (max-width: 575.98px) {
     .service-modal .modal-content {
         padding: 36px 26px;
    }
     .modal-points {
         grid-template-columns: 1fr;
    }
}
/* ========================================================= VIDEO (full-width, autoplay) ========================================================= */
 .video-section {
     background: #fff;
     padding: 0;
}
 .video-wrap {
     position: relative;
     width: 100%;
     height: 88vh;
     min-height: 620px;
     max-height: 920px;
     overflow: hidden;
     background: #0c0d12;
    /* shows while the video loads */
}
 .bg-video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .video-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(10, 11, 15, .78) 0%, rgba(10, 11, 15, .35) 55%, rgba(10, 11, 15, .55) 100%);
}
 .video-caption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     max-width: 640px;
     padding: 0 24px 64px 60px;
     color: #fff;
}
 .video-caption .section-badge {
     background: rgba(255, 255, 255, .12);
     color: #fff;
}
 .video-caption h2 {
     font-size: clamp(28px, 3.6vw, 42px);
     font-weight: 700;
     letter-spacing: -.8px;
     line-height: 1.2;
     margin: 18px 0 12px;
}
 .video-caption p {
     font-size: 17px;
     line-height: 1.7;
     color: rgba(255, 255, 255, .8);
     margin: 0;
}
 @media (max-width: 767.98px) {
     .video-wrap {
         height: 66vh;
         min-height: 460px;
    }
     .video-caption {
         padding: 0 24px 44px;
         max-width: 100%;
    }
}
/* ========================================================= OUR PROJECTS (vertical tab-switcher) ========================================================= */
 .projects {
     padding: 90px 0 130px;
     background: #fff;
}
 .project-switcher {
     display: flex;
     align-items: stretch;
     gap: 0;
     background: #f7f8ff;
     border-radius: 30px;
     border: 1px solid #eceefb;
     overflow: hidden;
}
/* ---- Tabs (left) ---- */
 .project-tabs {
     flex: 0 0 340px;
     display: flex;
     flex-direction: column;
     padding: 14px;
     border-right: 1px solid #eceefb;
}
 .project-tab {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     text-align: left;
     appearance: none;
     background: none;
     border: 0;
     border-radius: 18px;
     padding: 18px 16px;
     cursor: pointer;
     transition: background .25s ease;
}
 .project-tab + .project-tab {
     margin-top: 2px;
}
 .project-tab:hover {
     background: rgba(45, 60, 245, .05);
}
 .project-tab.active {
     background: #fff;
     box-shadow: 0 14px 30px rgba(45, 60, 245, .1);
}
 .tab-index {
     font-size: 13px;
     font-weight: 700;
     color: #b3b7d3;
     flex-shrink: 0;
}
 .project-tab.active .tab-index {
     color: var(--primary);
}
 .tab-info {
     flex: 1;
     min-width: 0;
}
 .tab-info strong {
     display: block;
     font-size: 16px;
     font-weight: 600;
     color: var(--heading);
}
 .tab-info small {
     font-size: 13px;
     color: #8b8fae;
}
 .tab-stat {
     flex-shrink: 0;
     text-align: right;
     font-size: 16px;
     font-weight: 700;
     color: #c7cbef;
     transition: color .25s ease;
}
 .project-tab.active .tab-stat {
     color: var(--primary);
}
 .tab-stat em {
     display: block;
     font-style: normal;
     font-size: 11px;
     font-weight: 500;
     color: #b3b7d3;
}
/* ---- Panels (right) ---- */
 .project-panels {
     flex: 1;
     min-width: 0;
}
 .project-panel {
     display: flex;
     flex-direction: column;
     padding: 44px;
     height: 100%;
}
/* Browser-style visual */
 .project-visual {
     border-radius: 18px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 20px 50px rgba(17, 17, 18, .08);
     margin-bottom: 30px;
}
 .pv-bar {
     display: flex;
     align-items: center;
     gap: 7px;
     padding: 12px 16px;
     background: #f6f7fd;
     border-bottom: 1px solid #eceefb;
}
 .pv-bar span {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #d6d9f0;
}
 .pv-bar small {
     margin-left: 10px;
     font-size: 12px;
     color: #9ea2c0;
}
 .pv-photo {
     position: relative;
     aspect-ratio: 16 / 10;
     background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, white), color-mix(in srgb, var(--accent) 6%, white));
}
 .pv-photo img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .pv-badge {
     position: absolute;
     left: 20px;
     bottom: 20px;
     background: #fff;
     border-radius: 14px;
     padding: 12px 18px;
     box-shadow: 0 14px 30px rgba(17, 17, 18, .12);
}
 .pv-badge small {
     display: block;
     font-size: 11.5px;
     color: #8b8fae;
     margin-bottom: 2px;
}
 .pv-badge strong {
     font-size: 20px;
     font-weight: 700;
     color: var(--accent);
}
 .project-info h3 {
     font-size: 26px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -.5px;
     margin: 18px 0 12px;
}
 .project-info p {
     line-height: 1.75;
     margin-bottom: 26px;
}
 .project-info .section-badge {
     background: #eef0fd;
     color: var(--accent);
}
 .project-meta {
     display: flex;
     gap: 32px;
     margin-bottom: 32px;
     padding-top: 24px;
     border-top: 1px solid #eceefb;
}
 .project-meta li {
     display: flex;
     flex-direction: column;
     gap: 4px;
}
 .project-meta span {
     font-size: 12.5px;
     color: #8b8fae;
}
 .project-meta strong {
     font-size: 15.5px;
     font-weight: 600;
     color: var(--heading);
}
 .view-details-btn {
     align-self: flex-start;
     margin-top: auto;
}
 @media (max-width: 991.98px) {
     .projects {
         padding: 60px 0 90px;
    }
     .project-switcher {
         flex-direction: column;
         border-radius: 24px;
    }
     .project-tabs {
         flex: none;
         flex-direction: row;
         overflow-x: auto;
         border-right: 0;
         border-bottom: 1px solid #eceefb;
         gap: 10px;
    }
     .project-tab {
         flex: 0 0 auto;
         min-width: 220px;
    }
     .project-tab + .project-tab {
         margin-top: 0;
    }
     .project-panel {
         padding: 32px 26px;
    }
}
 @media (max-width: 575.98px) {
     .project-meta {
         flex-wrap: wrap;
         gap: 20px;
    }
     .project-info h3 {
         font-size: 22px;
    }
}
/* ---- Project details modal ---- */
 .project-modal-meta {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin: 22px 0 30px;
     padding: 20px;
     background: #f7f8ff;
     border-radius: 16px;
}
 .project-modal-meta li {
     display: flex;
     flex-direction: column;
     gap: 4px;
     text-align: center;
}
 .project-modal-meta span {
     font-size: 12.5px;
     color: #8b8fae;
}
 .project-modal-meta strong {
     font-size: 15.5px;
     font-weight: 600;
     color: var(--heading);
}
 .modal-block {
     margin-bottom: 22px;
}
 .modal-block h5 {
     font-size: 15px;
     font-weight: 700;
     color: var(--heading);
     text-transform: uppercase;
     letter-spacing: .04em;
     margin-bottom: 8px;
}
 .modal-block p {
     margin: 0;
     line-height: 1.75;
     font-size: 15.5px;
}
 .modal-quote {
     display: flex;
     flex-direction: column;
     gap: 18px;
     background: #f7f8ff;
     border-radius: 18px;
     padding: 26px 28px;
     margin: 0 0 32px;
}
 .modal-quote p {
     margin: 0;
     font-size: 17px;
     font-style: italic;
     color: var(--heading);
     line-height: 1.7;
}
 .modal-quote footer {
     display: flex;
     align-items: center;
     gap: 14px;
}
 .q-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .modal-quote footer strong {
     display: block;
     font-size: 14.5px;
     font-weight: 600;
     color: var(--heading);
}
 .modal-quote footer small {
     font-size: 13px;
}
 @media (max-width: 575.98px) {
     .project-modal-meta {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
         padding: 16px;
    }
     .modal-quote {
         padding: 20px;
    }
}
/* ========================================================= OUR TEAM ========================================================= */
 .team {
     padding: 90px 0 130px;
     background: #f7f8ff;
}
 .team-card {
     position: relative;
     width: 100%;
     appearance: none;
     text-align: center;
     color: inherit;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 26px;
     padding: 46px 26px 32px;
     cursor: pointer;
     overflow: hidden;
     transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
 .team-card::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 6px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .35s ease;
}
 .team-card:hover, .team-card:focus-visible {
     transform: translateY(-8px);
     box-shadow: 0 30px 60px rgba(17, 17, 18, .1);
}
 .team-card:hover::before, .team-card:focus-visible::before {
     transform: scaleX(1);
}
 .team-avatar {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 96px;
     height: 96px;
     margin: 0 auto 18px;
     border-radius: 50%;
     padding: 4px;
     background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #6d3df0));
     box-shadow: 0 16px 30px -8px var(--accent);
}
 .team-avatar img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #fff;
     display: block;
}
 .team-social {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     height: 0;
     opacity: 0;
     overflow: hidden;
     transition: height .3s ease, opacity .25s ease, margin .3s ease;
}
 .team-card:hover .team-social, .team-card:focus-visible .team-social {
     height: 40px;
     opacity: 1;
     margin-bottom: 4px;
}
 .team-social i {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #f7f8ff;
     color: var(--heading);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     transition: background .25s, color .25s;
}
 .team-social i:hover {
     background: var(--accent);
     color: #fff;
}
 .team-name {
     display: block;
     font-size: 18.5px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 4px;
}
 .team-role {
     display: block;
     font-size: 14px;
     color: #8b8fae;
     margin-bottom: 18px;
}
 .team-view {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 600;
     color: var(--accent);
}
 .team-view i {
     transition: transform .3s ease;
}
 .team-card:hover .team-view i {
     transform: translateX(6px);
}
 @media (prefers-reduced-motion: reduce) {
     .team-card, .team-avatar, .team-social, .team-view i {
         transition: none;
    }
}
 @media (max-width: 991.98px) {
     .team {
         padding: 60px 0 90px;
    }
}
/* ---- Team member modal ---- */
 .team-modal-head {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 22px;
}
 .team-modal-avatar {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     flex-shrink: 0;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary);
}
 .team-modal-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .team-modal-head h3 {
     font-size: 24px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 6px;
}
 .team-modal-skills {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin: 20px 0 26px;
}
 .team-modal-skills li {
     background: #f7f8ff;
     border-radius: 50px;
     padding: 7px 16px;
     font-size: 13.5px;
     font-weight: 600;
     color: var(--heading);
}
 .team-modal-quote {
     position: relative;
     background: #f7f8ff;
     border-radius: 18px;
     padding: 24px 26px 24px 56px;
     margin-bottom: 28px;
}
 .team-modal-quote i {
     position: absolute;
     left: 20px;
     top: 18px;
     font-size: 24px;
     color: var(--primary);
     opacity: .5;
}
 .team-modal-quote p {
     margin: 0;
     font-size: 16px;
     font-style: italic;
     color: var(--heading);
     line-height: 1.7;
}
 .team-modal-social {
     display: flex;
     gap: 12px;
}
 .team-modal-social a {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #f7f8ff;
     color: var(--heading);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     transition: background .25s, color .25s;
}
 .team-modal-social a:hover {
     background: var(--primary);
     color: #fff;
}
/* ========================================================= PRICING ========================================================= */
 .pricing {
     position: relative;
     padding: 90px 0 130px;
     background: #fff;
     overflow: hidden;
}
 .pricing-glow {
     position: absolute;
     top: -180px;
     left: 50%;
     transform: translateX(-50%);
     width: 700px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(45, 60, 245, .12), transparent 70%);
     filter: blur(10px);
     pointer-events: none;
}
/* Toggle */
 .price-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 18px;
     margin-bottom: 56px;
}
 .pt-label {
     font-size: 16px;
     font-weight: 600;
     color: #b3b7d3;
     transition: color .25s ease;
     cursor: default;
}
 .pt-label.is-active {
     color: var(--heading);
}
 .pt-label em {
     font-style: normal;
     background: #dcfce7;
     color: #16a34a;
     font-size: 12px;
     font-weight: 700;
     border-radius: 50px;
     padding: 3px 10px;
     margin-left: 8px;
}
 .pt-switch {
     position: relative;
     appearance: none;
     border: 0;
     cursor: pointer;
     width: 60px;
     height: 32px;
     border-radius: 50px;
     background: #dfe1f7;
     transition: background .3s ease;
}
 .pt-switch[aria-checked="true"] {
     background: var(--primary);
}
 .pt-knob {
     position: absolute;
     top: 3px;
     left: 3px;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 4px 10px rgba(17, 17, 18, .18);
     transition: transform .3s cubic-bezier(.4,0,.2,1);
}
 .pt-switch[aria-checked="true"] .pt-knob {
     transform: translateX(28px);
}
/* Cards */
 .pricing-row {
     align-items: stretch;
}
 .price-card {
     position: relative;
     display: flex;
     flex-direction: column;
     background: #fff;
     border: 1.5px solid #eceefb;
     border-radius: 28px;
     padding: 40px 34px;
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
 .price-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 30px 60px rgba(17, 17, 18, .08);
}
 .price-card h3 {
     font-size: 22px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 8px;
}
 .price-desc {
     font-size: 15px;
     line-height: 1.7;
     min-height: 52px;
     margin-bottom: 22px;
}
 .price-amount {
     display: flex;
     align-items: flex-end;
     gap: 4px;
     margin-bottom: 2px;
}
 .price-amount span:first-child {
     font-size: 22px;
     font-weight: 700;
     color: var(--heading);
     transform: translateY(-2px);
}
 .price-value {
     font-size: 52px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -2px;
     line-height: 1;
}
 .price-amount small {
     font-size: 15px;
     color: #8b8fae;
     margin-bottom: 6px;
}
 .price-yearly-note {
     display: block;
     font-size: 13px;
     color: #8b8fae;
     opacity: 0;
     height: 0;
     margin-bottom: 24px;
     transition: opacity .25s ease;
}
 .is-yearly .price-yearly-note {
     opacity: 1;
     height: auto;
}
 .price-card .btn-cta, .price-card .btn-outline-cta {
     width: 100%;
     justify-content: center;
     margin-bottom: 30px;
}
 .btn-outline-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #f7f8ff;
     border: 1.5px solid #eceefb;
     color: var(--heading);
     border-radius: 50px;
     padding: 16px 34px;
     font-size: 17px;
     font-weight: 600;
     transition: background .25s ease, border-color .25s ease, color .25s ease;
}
 .btn-outline-cta:hover {
     background: var(--primary);
     border-color: var(--primary);
     color: #fff;
}
 .price-features {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin: 0;
}
 .price-features li {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 15px;
     color: var(--heading);
}
 .price-features li i {
     color: #16a34a;
     font-size: 16px;
}
 .price-features li.is-off {
     color: #b3b7d3;
}
 .price-features li.is-off i {
     color: #d6d9f0;
}
/* Featured (Growth) */
 .price-featured {
     background: linear-gradient(160deg, var(--primary) 0%, #5a3df0 120%);
     border-color: transparent;
     color: rgba(255, 255, 255, .82);
     transform: scale(1.04);
     box-shadow: 0 30px 70px rgba(45, 60, 245, .28);
}
 .price-featured:hover {
     transform: scale(1.04) translateY(-6px);
}
 .price-featured h3, .price-featured .price-amount span, .price-featured .price-value {
     color: #fff;
}
 .price-featured .price-desc, .price-featured .price-amount small, .price-featured .price-yearly-note {
     color: rgba(255, 255, 255, .72);
}
 .price-featured .price-features li {
     color: rgba(255, 255, 255, .9);
}
 .price-featured .price-features li i {
     color: #6ee7b7;
}
 .price-featured .price-features li.is-off {
     color: rgba(255, 255, 255, .45);
}
 .price-featured .price-features li.is-off i {
     color: rgba(255, 255, 255, .3);
}
 .price-featured .btn-cta {
     background: #fff;
     border-color: #fff;
     color: var(--primary);
}
 .price-featured .btn-cta:hover {
     background: rgba(255, 255, 255, .9);
}
 .price-badge {
     position: absolute;
     top: -16px;
     left: 50%;
     transform: translateX(-50%);
     background: #fff;
     color: var(--primary);
     border-radius: 50px;
     padding: 7px 20px;
     font-size: 13px;
     font-weight: 700;
     box-shadow: 0 10px 20px rgba(17, 17, 18, .15);
}
 .pricing-footnote {
     margin: 56px 0 0;
     font-size: 15px;
}
 .pricing-footnote a {
     color: var(--primary);
     font-weight: 600;
}
 @media (max-width: 991.98px) {
     .pricing {
         padding: 60px 0 90px;
    }
     .price-featured {
         transform: none;
    }
     .price-featured:hover {
         transform: translateY(-6px);
    }
}
 @media (max-width: 575.98px) {
     .price-value {
         font-size: 42px;
    }
     .price-card {
         padding: 32px 26px;
    }
}
/* ========================================================= TESTIMONIALS (dual auto-scrolling marquee) ========================================================= */
 .testimonials {
     padding: 90px 0 110px;
     background: #f7f8ff;
     overflow: hidden;
}
 .testimonials .section-head {
     margin-bottom: 56px;
}
 .marquee-wrap {
     display: flex;
     flex-direction: column;
     gap: 26px;
}
 .marquee-row {
     overflow: hidden;
     -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
     mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
 .marquee-track {
     display: flex;
     gap: 24px;
     width: max-content;
     animation: marquee-scroll 46s linear infinite;
}
 .marquee-reverse .marquee-track {
     animation-duration: 60s;
     animation-direction: reverse;
}
 .marquee-row:hover .marquee-track {
     animation-play-state: paused;
}
 @keyframes marquee-scroll {
     from {
         transform: translateX(0);
    }
     to {
         transform: translateX(-50%);
    }
}
 .t-card {
     flex: 0 0 auto;
     width: 380px;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 22px;
     padding: 30px 28px;
     box-shadow: 0 16px 34px rgba(17, 17, 18, .05);
}
 .t-stars {
     color: #f59e0b;
     font-size: 13px;
     margin-bottom: 14px;
     letter-spacing: 2px;
}
 .t-card p {
     font-size: 15.5px;
     line-height: 1.75;
     color: var(--heading);
     margin-bottom: 22px;
}
 .t-person {
     display: flex;
     align-items: center;
     gap: 14px;
}
 .t-person .t-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--accent);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .t-person strong {
     display: block;
     font-size: 14.5px;
     font-weight: 600;
     color: var(--heading);
}
 .t-person small {
     font-size: 13px;
}
 @media (prefers-reduced-motion: reduce) {
     .marquee-track {
         animation: none;
         overflow-x: auto;
         scroll-snap-type: x proximity;
    }
     .marquee-row {
         overflow-x: auto;
    }
}
 @media (max-width: 575.98px) {
     .t-card {
         width: 300px;
         padding: 24px 22px;
    }
     .marquee-wrap {
         gap: 18px;
    }
}
/* ========================================================= FAQ (two-column numbered accordion) ========================================================= */
 .faq {
     padding: 90px 0 120px;
     background: #fff;
}
 .faq-item {
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 20px;
     margin-bottom: 18px;
     transition: border-color .25s ease, box-shadow .25s ease;
}
 .faq-item:has(.collapse.show) {
     border-color: rgba(45, 60, 245, .25);
     box-shadow: 0 16px 34px rgba(45, 60, 245, .08);
     background: #fff;
}
 .faq-q {
     display: flex;
     align-items: center;
     gap: 18px;
     width: 100%;
     appearance: none;
     background: none;
     border: 0;
     text-align: left;
     padding: 22px 24px;
     cursor: pointer;
}
 .faq-no {
     font-size: 14px;
     font-weight: 700;
     color: #b3b7d3;
     flex-shrink: 0;
     transition: color .25s ease;
}
 .faq-q:not(.collapsed) .faq-no {
     color: var(--primary);
}
 .faq-q-text {
     flex: 1;
     font-size: 16.5px;
     font-weight: 600;
     color: var(--heading);
}
 .faq-icon {
     flex-shrink: 0;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #fff;
     color: var(--heading);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: background .25s ease, color .25s ease, transform .3s ease;
}
 .faq-q:not(.collapsed) .faq-icon {
     background: var(--primary);
     color: #fff;
     transform: rotate(135deg);
}
 .faq-a {
     padding: 0 24px 24px 58px;
     font-size: 15.5px;
     line-height: 1.75;
     color: #555;
}
 .faq-footnote {
     margin: 44px 0 0;
     font-size: 15px;
}
 .faq-footnote a {
     color: var(--primary);
     font-weight: 600;
}
 @media (max-width: 991.98px) {
     .faq {
         padding: 60px 0 90px;
    }
}
 @media (max-width: 575.98px) {
     .faq-q {
         padding: 18px 18px;
         gap: 14px;
    }
     .faq-q-text {
         font-size: 15.5px;
    }
     .faq-a {
         padding: 0 18px 20px 46px;
    }
}
/* ========================================================= APP DOWNLOAD ========================================================= */
 .app-download {
     position: relative;
     overflow: hidden;
     padding: 100px 0 110px;
     background: linear-gradient(160deg, #111112 0%, #1a1b2e 100%);
     color: rgba(255, 255, 255, .75);
}
 .app-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
}
 .app-glow-1 {
     width: 460px;
     height: 460px;
     background: var(--primary);
     opacity: .28;
     top: -140px;
     left: -100px;
}
 .app-glow-2 {
     width: 380px;
     height: 380px;
     background: #ec4899;
     opacity: .18;
     bottom: -160px;
     right: -80px;
}
 .app-badge {
     background: rgba(255, 255, 255, .1);
     color: #fff;
}
 .app-title {
     font-size: clamp(30px, 3.8vw, 46px);
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: -1px;
     color: #fff;
     margin: 20px 0 18px;
}
 .app-text {
     font-size: 17px;
     line-height: 1.8;
     max-width: 480px;
     margin-bottom: 30px;
}
 .app-points {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-bottom: 38px;
}
 .app-points li {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 15.5px;
     color: #fff;
}
 .app-points i {
     color: #6ee7b7;
     font-size: 18px;
}
 .app-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-bottom: 30px;
}
 .store-badge {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .14);
     border-radius: 16px;
     padding: 12px 22px;
     color: #fff;
     transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
 .store-badge:hover {
     background: rgba(255, 255, 255, .12);
     border-color: rgba(255, 255, 255, .3);
     color: #fff;
     transform: translateY(-2px);
}
 .store-badge i {
     font-size: 26px;
}
 .store-badge small {
     display: block;
     font-size: 11px;
     color: rgba(255, 255, 255, .6);
}
 .store-badge strong {
     font-size: 16px;
     font-weight: 600;
}
 .app-rating {
     display: flex;
     align-items: center;
     gap: 14px;
}
 .app-rating .stars {
     color: #f59e0b;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 2px;
}
 .app-rating .stars strong {
     color: #fff;
     margin-left: 8px;
     font-size: 15px;
}
 .app-rating span {
     font-size: 14px;
}
/* ---- Phone mockup ---- */
 .phone-wrap {
     position: relative;
     display: flex;
     justify-content: center;
     padding: 30px 0;
}
 .phone {
     position: relative;
     width: 280px;
     background: #0c0d12;
     border-radius: 42px;
     padding: 14px;
     box-shadow: 0 50px 100px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
 .phone-notch {
     position: absolute;
     top: 14px;
     left: 50%;
     transform: translateX(-50%);
     width: 110px;
     height: 22px;
     background: #0c0d12;
     border-radius: 0 0 16px 16px;
     z-index: 2;
}
 .phone-screen {
     position: relative;
     background: #f7f8ff;
     border-radius: 30px;
     padding: 40px 18px 24px;
     min-height: 480px;
     overflow: hidden;
}
 .ps-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 18px;
}
 .ps-head small {
     display: block;
     font-size: 12px;
     color: #8b8fae;
}
 .ps-head strong {
     font-size: 18px;
     font-weight: 700;
     color: var(--heading);
}
 .ps-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ps-card {
     background: #fff;
     border-radius: 16px;
     padding: 16px 18px;
     margin-bottom: 14px;
     box-shadow: 0 8px 20px rgba(17, 17, 18, .05);
}
 .ps-stat {
     position: relative;
}
 .ps-stat small {
     display: block;
     font-size: 12px;
     color: #8b8fae;
     margin-bottom: 4px;
}
 .ps-stat strong {
     font-size: 24px;
     font-weight: 700;
     color: var(--heading);
}
 .ps-chip {
     position: absolute;
     right: 18px;
     top: 18px;
     display: inline-flex;
     align-items: center;
     font-size: 12px;
     font-weight: 700;
     padding: 4px 8px;
     border-radius: 50px;
}
 .ps-chip.up {
     background: #dcfce7;
     color: #16a34a;
}
 .ps-notif {
     display: flex;
     align-items: center;
     gap: 12px;
}
 .ps-notif-icon {
     width: 38px;
     height: 38px;
     border-radius: 12px;
     background: rgba(45, 60, 245, .1);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     flex-shrink: 0;
}
 .ps-notif strong {
     display: block;
     font-size: 13.5px;
     font-weight: 600;
     color: var(--heading);
}
 .ps-notif small {
     font-size: 12px;
     color: #8b8fae;
}
 .ps-list {
     padding: 6px 18px;
}
 .ps-row {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     font-weight: 500;
     color: var(--heading);
     padding: 10px 0;
     border-bottom: 1px solid #f1f2fa;
}
 .ps-row:last-child {
     border-bottom: 0;
}
 .ps-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--c);
     flex-shrink: 0;
}
 .ps-row em {
     margin-left: auto;
     font-style: normal;
     font-size: 11.5px;
     color: #8b8fae;
}
 .app-float-1, .app-float-2 {
     color: var(--heading);
}
 .app-float-1 {
     left: -20px;
     top: 60px;
     animation: floaty 6s ease-in-out infinite;
}
 .app-float-2 {
     right: -20px;
     bottom: 90px;
     animation: floaty 6s ease-in-out -3s infinite;
}
 @media (max-width: 991.98px) {
     .app-download {
         padding: 70px 0 80px;
         text-align: center;
    }
     .app-text {
         margin-left: auto;
         margin-right: auto;
    }
     .app-points {
         align-items: center;
    }
     .app-badges, .app-rating {
         justify-content: center;
    }
     .phone-wrap {
         margin-top: 20px;
    }
     .app-float-1, .app-float-2 {
         display: none;
    }
}
/* ========================================================= INTEGRATIONS (orbit diagram) ========================================================= */
 .integrations {
     padding: 90px 0 110px;
     background: #fff;
}
 .orbit-wrap {
     position: relative;
     width: 100%;
     max-width: 520px;
     aspect-ratio: 1 / 1;
     margin: 0 auto;
}
 .orbit-lines {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
}
 .orbit-lines line {
     stroke: #e4e6f8;
     stroke-width: 1.5;
     stroke-dasharray: 4 6;
}
 .orbit-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     z-index: 2;
}
 .orbit-mark {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     box-shadow: 0 16px 34px rgba(45, 60, 245, .25);
}
 .orbit-mark svg {
     width: 100%;
     height: 100%;
     border-radius: 50%;
}
 .orbit-center strong {
     font-size: 15px;
     font-weight: 700;
     color: var(--heading);
}
 .orbit-icon {
     position: absolute;
     top: var(--y);
     left: var(--x);
     transform: translate(-50%, -50%);
     width: 62px;
     height: 62px;
     border-radius: 50%;
     background: #fff;
     color: var(--heading);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     box-shadow: 0 14px 30px rgba(17, 17, 18, .1);
     border: 1px solid #eceefb;
     transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}
 .orbit-icon:hover {
     transform: translate(-50%, -50%) translateY(-4px);
     color: var(--primary);
     box-shadow: 0 20px 40px rgba(45, 60, 245, .18);
}
 .integrations-grid {
     display: none;
}
 .integrations-stats {
     margin-top: 70px;
}
 .integrations-stats strong {
     display: block;
     font-size: 26px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 6px;
}
 .integrations-stats span {
     font-size: 14.5px;
}
 @media (max-width: 767.98px) {
     .integrations {
         padding: 60px 0 80px;
    }
     .orbit-wrap {
         display: none;
    }
     .integrations-grid {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 14px;
         max-width: 420px;
         margin: 0 auto;
    }
     .integrations-grid span {
         aspect-ratio: 1 / 1;
         border-radius: 16px;
         background: #f7f8ff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 22px;
         color: var(--heading);
    }
     .integrations-stats {
         margin-top: 44px;
    }
}
 @media (max-width: 400px) {
     .integrations-grid {
         grid-template-columns: repeat(4, 1fr);
    }
}
/* ========================================================= BLOG / LATEST NEWS ========================================================= */
 .blog {
     padding: 90px 0 110px;
     background: #f7f8ff;
}
 .blog-card {
     display: block;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 24px;
     overflow: hidden;
     height: 100%;
     transition: transform .3s ease, box-shadow .3s ease;
}
 .blog-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 26px 50px rgba(17, 17, 18, .1);
}
 .blog-thumb {
     position: relative;
     display: block;
     aspect-ratio: 16 / 10;
     background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, white), color-mix(in srgb, var(--accent) 6%, white));
}
 .blog-thumb img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .blog-cat {
     position: absolute;
     left: 16px;
     top: 16px;
     background: #fff;
     color: var(--accent);
     font-size: 12.5px;
     font-weight: 700;
     border-radius: 50px;
     padding: 6px 14px;
}
 .blog-body {
     padding: 26px 24px 28px;
}
 .blog-meta {
     display: flex;
     align-items: center;
     font-size: 13px;
     color: #8b8fae;
     margin-bottom: 14px;
}
 .blog-meta i.bi-calendar3 {
     margin-right: 8px;
}
 .blog-meta i.bi-dot {
     font-size: 20px;
     margin: 0 2px;
}
 .blog-body h3 {
     font-size: 19px;
     font-weight: 600;
     line-height: 1.4;
     margin-bottom: 12px;
}
 .blog-body h3 a {
     color: var(--heading);
     transition: color .2s ease;
}
 .blog-card:hover h3 a {
     color: var(--primary);
}
 .blog-body p {
     font-size: 14.5px;
     line-height: 1.7;
     margin-bottom: 20px;
}
 .blog-author {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 600;
     color: var(--heading);
}
 .blog-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .blog-view-all {
     margin-top: 40px;
}
 @media (max-width: 991.98px) {
     .blog {
         padding: 60px 0 80px;
    }
}
/* ========================================================= CONTACT ========================================================= */
 .contact {
     padding: 90px 0 110px;
     background: #fff;
}
 .contact-info {
     margin-bottom: 26px;
}
 .contact-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 30px;
}
 .contact-list li {
     display: flex;
     align-items: flex-start;
     gap: 16px;
}
 .contact-icon {
     width: 50px;
     height: 50px;
     border-radius: 14px;
     flex-shrink: 0;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
}
 .contact-list strong {
     display: block;
     font-size: 15px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 2px;
}
 .contact-list span {
     font-size: 14.5px;
}
 .contact-map {
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 44px rgba(17, 17, 18, .08);
}
 .contact-map iframe {
     width: 100%;
     height: 260px;
     border: 0;
     display: block;
     filter: grayscale(.15);
}
 .contact-form {
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 26px;
     padding: 40px;
}
 .contact-form .form-label {
     font-size: 14px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 8px;
}
 .contact-form .form-control {
     border: 1.5px solid #e4e6f8;
     border-radius: 14px;
     padding: 13px 18px;
     font-size: 15px;
     box-shadow: none;
     background: #fff;
}
 .contact-form .form-control:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(45, 60, 245, .1);
}
 .contact-form-note {
     display: inline-block;
     margin-left: 16px;
     font-size: 14px;
     font-weight: 600;
     color: #16a34a;
}
 @media (max-width: 991.98px) {
     .contact {
         padding: 60px 0 80px;
    }
}
 @media (max-width: 575.98px) {
     .contact-form {
         padding: 26px 22px;
    }
     .contact-form-note {
         display: block;
         margin: 12px 0 0;
    }
}
/* ========================================================= NEWSLETTER ========================================================= */
 .newsletter {
     padding: 0 0 20px;
     background: #fff;
}
 .newsletter-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 26px;
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 28px;
     padding: 40px 46px;
}
 .newsletter-text {
     display: flex;
     align-items: center;
     gap: 20px;
     max-width: 480px;
}
 .nl-icon {
     width: 56px;
     height: 56px;
     border-radius: 16px;
     flex-shrink: 0;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
}
 .newsletter-text h3 {
     font-size: 20px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 6px;
}
 .newsletter-text p {
     margin: 0;
     font-size: 14.5px;
}
 .newsletter-form {
     display: flex;
     gap: 10px;
     flex: 0 0 auto;
}
 .newsletter-form input {
     border: 1.5px solid #e4e6f8;
     border-radius: 50px;
     padding: 14px 22px;
     font-size: 15px;
     min-width: 260px;
     background: #fff;
}
 .newsletter-form input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(45, 60, 245, .1);
}
 @media (max-width: 767.98px) {
     .newsletter-box {
         padding: 30px 26px;
         justify-content: center;
         text-align: center;
    }
     .newsletter-text {
         flex-direction: column;
         text-align: center;
    }
     .newsletter-form {
         width: 100%;
         flex-direction: column;
    }
     .newsletter-form input {
         min-width: 0;
         width: 100%;
    }
     .newsletter-form .btn-cta {
         width: 100%;
         justify-content: center;
    }
}
/* ========================================================= FINAL CTA ========================================================= */
 .final-cta {
     position: relative;
     overflow: hidden;
     padding: 110px 0;
     background: linear-gradient(135deg, var(--primary) 0%, #5a3df0 100%);
}
 .fc-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
}
 .fc-glow-1 {
     width: 420px;
     height: 420px;
     background: #fff;
     opacity: .12;
     top: -160px;
     left: -100px;
}
 .fc-glow-2 {
     width: 380px;
     height: 380px;
     background: #fff;
     opacity: .1;
     bottom: -180px;
     right: -80px;
}
 .fc-badge {
     background: rgba(255, 255, 255, .15);
     color: #fff;
     margin-bottom: 22px;
}
 .fc-title {
     font-size: clamp(32px, 4.4vw, 54px);
     font-weight: 700;
     letter-spacing: -1px;
     color: #fff;
     margin-bottom: 18px;
}
 .fc-text {
     font-size: 18px;
     color: rgba(255, 255, 255, .82);
     max-width: 560px;
     margin: 0 auto 40px;
}
 .fc-actions {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 16px 32px;
}
 .fc-btn {
     background: #fff;
     border-color: #fff;
     color: var(--primary);
     box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}
 .fc-btn:hover {
     background: rgba(255, 255, 255, .9);
     color: var(--primary);
}
 .fc-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #fff;
     font-weight: 600;
     font-size: 16px;
}
 .fc-link:hover {
     color: #fff;
     opacity: .85;
}
 @media (max-width: 767.98px) {
     .final-cta {
         padding: 70px 0;
    }
}
/* ========================================================= FOOTER ========================================================= */
 .site-footer {
     position: relative;
     overflow: hidden;
     background: linear-gradient(160deg, #0c0d12 0%, #1a1b2e 100%);
     color: rgba(255, 255, 255, .6);
     padding: 90px 0 0;
}
 .site-footer::before {
     content: "";
     position: absolute;
     top: -220px;
     left: 50%;
     transform: translateX(-50%);
     width: 640px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(45, 60, 245, .18), transparent 70%);
     filter: blur(20px);
     pointer-events: none;
}
 .site-footer > .container {
     position: relative;
     z-index: 1;
}
 .footer-brand {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 22px;
}
 .footer-brand svg {
     width: 44px;
     height: 44px;
}
 .footer-brand span {
     font-size: 26px;
     font-weight: 700;
     color: #fff;
     letter-spacing: -.5px;
}
 .footer-about {
     font-size: 15px;
     line-height: 1.8;
     max-width: 320px;
     margin-bottom: 26px;
}
 .footer-social {
     display: flex;
     gap: 12px;
}
 .footer-social a {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .07);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     transition: background .25s ease;
}
 .footer-social a:hover {
     background: var(--primary);
}
 .footer-title {
     font-size: 15px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 22px;
}
 .footer-links {
     display: flex;
     flex-direction: column;
     gap: 14px;
}
 .footer-links a {
     font-size: 14.5px;
     color: rgba(255, 255, 255, .6);
     transition: color .2s ease, padding-left .2s ease;
}
 .footer-links a:hover {
     color: #fff;
     padding-left: 4px;
}
 .footer-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 70px;
     padding: 26px 0;
     border-top: 1px solid rgba(255, 255, 255, .08);
     font-size: 13.5px;
}
 .footer-bottom i.bi-heart-fill {
     color: #ec4899;
     margin: 0 3px;
}
 @media (max-width: 767.98px) {
     .site-footer {
         padding: 60px 0 0;
         text-align: center;
    }
     .footer-brand {
         justify-content: center;
    }
     .footer-about {
         margin-left: auto;
         margin-right: auto;
    }
     .footer-social {
         justify-content: center;
    }
     .footer-bottom {
         justify-content: center;
         text-align: center;
         margin-top: 44px;
    }
}
/* ========================================================= VIDEO POPUP (Magnific Popup) ========================================================= */
 .mfp-bg.video-popup {
     background: #0a0a0d;
     opacity: .92;
}
 .mfp-wrap.video-popup .mfp-container {
     padding: 20px;
}
 .video-popup .mfp-close {
     top: -44px;
     right: 0;
     color: #fff;
     opacity: .85;
     font-size: 32px;
     transition: opacity .2s ease, transform .2s ease;
}
 .video-popup .mfp-close:hover {
     opacity: 1;
     transform: rotate(90deg);
}
 #demo-video-content {
     max-width: 960px;
     margin: 0 auto;
}
 .video-modal-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
     background: #000;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 50px 100px rgba(0, 0, 0, .5);
}
 .video-modal-frame video {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: contain;
}
 @media (max-width: 575.98px) {
     .video-popup .mfp-close {
         top: -40px;
         font-size: 28px;
    }
}
/* ========================================================= SCROLL-REVEAL ANIMATION SYSTEM ========================================================= */
 .will-reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
     will-change: opacity, transform;
}
 .will-reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
}
 .will-reveal.reveal-zoom {
     transform: scale(.94);
}
 .will-reveal.reveal-zoom.is-visible {
     transform: scale(1);
}
 .will-reveal.reveal-left {
     transform: translateX(-36px);
}
 .will-reveal.reveal-left.is-visible {
     transform: translateX(0);
}
 .will-reveal.reveal-right {
     transform: translateX(36px);
}
 .will-reveal.reveal-right.is-visible {
     transform: translateX(0);
}
 @media (prefers-reduced-motion: reduce) {
     .will-reveal, .will-reveal.reveal-zoom, .will-reveal.reveal-left, .will-reveal.reveal-right {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important;
    }
}
/* ========================================================= SECTION TITLE — accent word + decorative underline ========================================================= */
 .section-title {
     position: relative;
}
 .title-accent {
     position: relative;
     color: var(--primary);
    /* fallback for browsers without background-clip:text */
     background: linear-gradient(100deg, var(--primary) 0%, #a855f7 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
/* Decorative squiggle beneath every section title */
 .section-title::after {
     content: "";
     display: block;
     width: 58px;
     height: 10px;
     margin-top: 16px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 10'%3E%3Cpath d='M1 7 C 10 1, 18 1, 29 5 C 40 9, 48 9, 57 3' fill='none' stroke='%232d3cf5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0;
     transform: scaleX(.5);
     transform-origin: left center;
     transition: opacity .6s ease .25s, transform .6s ease .25s;
}
 .section-head .section-title::after {
     margin-left: auto;
     margin-right: auto;
     transform-origin: center;
}
 .section-head.is-visible .section-title::after {
     opacity: 1;
     transform: scaleX(1);
}
 .about .section-title::after {
     opacity: 1;
     transform: scaleX(1);
}
/* ========================================================= CHATBOT WIDGET ========================================================= */
 .chatbot {
     position: fixed;
     right: 26px;
     bottom: 26px;
     z-index: 1080;
}
 .chatbot-toggle {
     position: relative;
     width: 62px;
     height: 62px;
     border-radius: 50%;
     border: 0;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     box-shadow: 0 16px 34px rgba(45, 60, 245, .35);
     cursor: pointer;
     transition: background .25s ease, transform .25s ease;
}
 .chatbot-toggle:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
}
 .chatbot-icon-close {
     display: none;
}
 .chatbot.is-open .chatbot-icon-open {
     display: none;
}
 .chatbot.is-open .chatbot-icon-close {
     display: block;
}
 .chatbot-ping {
     position: absolute;
     top: -3px;
     right: -3px;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #ec4899;
     border: 2px solid #fff;
}
 .chatbot.is-open .chatbot-ping {
     display: none;
}
 @keyframes chatbot-pulse {
     0%, 100% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.15);
    }
}
 .chatbot-ping {
     animation: chatbot-pulse 1.8s ease-in-out infinite;
}
 .chatbot-panel {
     position: absolute;
     right: 0;
     bottom: 78px;
     width: 360px;
     max-width: calc(100vw - 40px);
     height: 500px;
     max-height: 70vh;
     background: #fff;
     border-radius: 22px;
     box-shadow: 0 30px 70px rgba(17, 17, 18, .25);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     opacity: 0;
     visibility: hidden;
     transform: translateY(16px) scale(.97);
     transform-origin: bottom right;
     transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
 .chatbot.is-open .chatbot-panel {
     opacity: 1;
     visibility: visible;
     transform: none;
}
 .chatbot-header {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 18px 18px;
     background: linear-gradient(135deg, var(--primary) 0%, #5a3df0 100%);
     color: #fff;
}
 .chatbot-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     flex-shrink: 0;
     background: rgba(255, 255, 255, .18);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19px;
}
 .chatbot-header-info {
     flex: 1;
     min-width: 0;
}
 .chatbot-header-info strong {
     display: block;
     font-size: 15px;
     font-weight: 600;
}
 .chatbot-header-info small {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12.5px;
     color: rgba(255, 255, 255, .8);
}
 .chatbot-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #6ee7b7;
     display: inline-block;
}
 .chatbot-close {
     background: none;
     border: 0;
     color: #fff;
     font-size: 16px;
     opacity: .85;
     padding: 4px;
}
 .chatbot-close:hover {
     opacity: 1;
}
 .chatbot-messages {
     flex: 1;
     overflow-y: auto;
     padding: 20px 18px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     background: #f7f8ff;
}
 .chatbot-msg {
     display: flex;
     align-items: flex-end;
     gap: 10px;
     max-width: 88%;
}
 .chatbot-msg.user {
     align-self: flex-end;
     flex-direction: row-reverse;
}
 .chatbot-msg-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     flex-shrink: 0;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
}
 .chatbot-bubble {
     background: #fff;
     color: var(--heading);
     border-radius: 16px 16px 16px 4px;
     padding: 12px 16px;
     font-size: 14.5px;
     line-height: 1.6;
     box-shadow: 0 6px 16px rgba(17, 17, 18, .06);
}
 .chatbot-msg.user .chatbot-bubble {
     background: var(--primary);
     color: #fff;
     border-radius: 16px 16px 4px 16px;
}
 .chatbot-msg.typing .chatbot-bubble {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 14px 16px;
}
 .chatbot-msg.typing span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #b3b7d3;
     display: inline-block;
     animation: chatbot-typing 1s infinite ease-in-out;
}
 .chatbot-msg.typing span:nth-child(2) {
     animation-delay: .15s;
}
 .chatbot-msg.typing span:nth-child(3) {
     animation-delay: .3s;
}
 @keyframes chatbot-typing {
     0%, 60%, 100% {
         transform: translateY(0);
         opacity: .5;
    }
     30% {
         transform: translateY(-4px);
         opacity: 1;
    }
}
 .chatbot-input {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 16px;
     background: #fff;
     border-top: 1px solid #eceefb;
}
 .chatbot-input input {
     flex: 1;
     border: 1.5px solid #e4e6f8;
     border-radius: 50px;
     padding: 11px 18px;
     font-size: 14px;
     background: #f7f8ff;
}
 .chatbot-input input:focus {
     outline: none;
     border-color: var(--primary);
     background: #fff;
}
 .chatbot-input button {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 0;
     background: var(--primary);
     color: #fff;
     font-size: 16px;
     flex-shrink: 0;
     transition: background .2s ease;
}
 .chatbot-input button:hover {
     background: var(--primary-dark);
}
 @media (max-width: 480px) {
     .chatbot {
         right: 16px;
         bottom: 16px;
    }
     .chatbot-panel {
         width: calc(100vw - 32px);
         height: 65vh;
         bottom: 76px;
    }
}
/* ========================================================= PAGE BREADCRUMB BANNER (inner pages) ========================================================= */
 .page-breadcrumb {
     position: relative;
     overflow: hidden;
     padding: 76px 0 64px;
     background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 55%, var(--hero-to) 100%);
     text-align: center;
}
 .page-breadcrumb::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(45, 60, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 60, 245, .05) 1px, transparent 1px);
     background-size: 72px 72px;
     -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
     mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
 .pb-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     pointer-events: none;
}
 .pb-glow-1 {
     width: 380px;
     height: 380px;
     background: var(--primary);
     opacity: .18;
     top: -140px;
     right: -60px;
}
 .pb-glow-2 {
     width: 320px;
     height: 320px;
     background: #a855f7;
     opacity: .14;
     bottom: -160px;
     left: -80px;
}
 .page-breadcrumb .container {
     position: relative;
}
 .pb-kicker {
     background: #fff;
     color: var(--primary);
     box-shadow: 0 8px 22px rgba(45, 60, 245, .1);
}
 .pb-title {
     font-size: clamp(32px, 4.4vw, 54px);
     font-weight: 700;
     letter-spacing: -1px;
     color: var(--heading);
     margin: 20px 0 22px;
}
 .pb-trail {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #fff;
     border-radius: 50px;
     padding: 11px 24px;
     font-size: 14.5px;
     font-weight: 600;
     color: #8b8fae;
     box-shadow: 0 10px 26px rgba(45, 60, 245, .08);
}
 .pb-trail a {
     color: var(--heading);
     transition: color .2s ease;
}
 .pb-trail a:hover {
     color: var(--primary);
}
 .pb-trail i {
     font-size: 11px;
     color: #c7cbef;
}
 .pb-trail .pb-current {
     color: var(--primary);
}
 @media (max-width: 575.98px) {
     .page-breadcrumb {
         padding: 56px 0 48px;
    }
     .pb-trail {
         font-size: 13.5px;
         padding: 9px 18px;
    }
}
/* ========================================================= 404 ERROR PAGE ========================================================= */
 .error-page {
     position: relative;
     overflow: hidden;
     padding: 90px 0 120px;
     text-align: center;
}
 .error-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
}
 .error-glow-1 {
     width: 420px;
     height: 420px;
     background: var(--primary);
     opacity: .14;
     top: -140px;
     left: -100px;
}
 .error-glow-2 {
     width: 360px;
     height: 360px;
     background: #a855f7;
     opacity: .12;
     bottom: -160px;
     right: -80px;
}
 .error-code {
     position: relative;
     font-size: clamp(110px, 18vw, 220px);
     font-weight: 700;
     line-height: 1;
     letter-spacing: -6px;
     background: linear-gradient(100deg, var(--primary) 0%, #a855f7 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     color: var(--primary);
     margin-bottom: 8px;
}
 .error-illustration {
     width: 100%;
     max-width: 260px;
     margin: 0 auto 20px;
}
 .error-title {
     font-size: clamp(22px, 2.6vw, 30px);
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 14px;
}
 .error-text {
     font-size: 16.5px;
     max-width: 460px;
     margin: 0 auto 36px;
}
 .error-actions {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 16px 28px;
}
 .error-search {
     max-width: 420px;
     margin: 36px auto 0;
     display: flex;
     gap: 10px;
}
 .error-search input {
     flex: 1;
     border: 1.5px solid #e4e6f8;
     border-radius: 50px;
     padding: 13px 22px;
     font-size: 15px;
}
 .error-search input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(45, 60, 245, .1);
}
 @media (max-width: 575.98px) {
     .error-page {
         padding: 60px 0 80px;
    }
}
/* ========================================================= BLOG DETAILS (single article) ========================================================= */
 .article {
     padding: 90px 0 110px;
     background: #fff;
}
 .article-wrap {
     max-width: 780px;
     margin: 0 auto;
}
 .article-meta-top {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 14px;
     font-size: 14px;
     color: #8b8fae;
     margin-bottom: 22px;
}
 .article-meta-top .blog-cat {
     position: static;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
}
 .article-meta-top i.bi-dot {
     font-size: 20px;
     margin: 0 -4px;
}
 .article-title {
     font-size: clamp(28px, 4vw, 42px);
     font-weight: 700;
     letter-spacing: -1px;
     line-height: 1.25;
     color: var(--heading);
     margin-bottom: 30px;
}
 .article-cover {
     position: relative;
     border-radius: 24px;
     overflow: hidden;
     aspect-ratio: 16 / 9;
     margin-bottom: 44px;
     background: linear-gradient(135deg, rgba(45, 60, 245, .2), rgba(45, 60, 245, .04));
}
 .article-cover img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .article-body h2 {
     font-size: 25px;
     font-weight: 700;
     color: var(--heading);
     letter-spacing: -.3px;
     margin: 44px 0 16px;
}
 .article-body p {
     font-size: 16.5px;
     line-height: 1.9;
     margin-bottom: 22px;
}
 .article-body ul {
     margin: 0 0 26px;
     padding-left: 0;
     list-style: none;
}
 .article-body ul li {
     position: relative;
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 12px;
     padding-left: 30px;
}
 .article-body ul li::before {
     content: "\f26b";
     font-family: "bootstrap-icons";
     position: absolute;
     left: 0;
     top: 2px;
     color: #16a34a;
     font-size: 15px;
}
 .article-quote {
     border-left: 4px solid var(--primary);
     background: #f7f8ff;
     border-radius: 0 18px 18px 0;
     padding: 26px 30px;
     margin: 36px 0;
     font-size: 19px;
     font-style: italic;
     color: var(--heading);
     line-height: 1.7;
}
 .article-share {
     display: flex;
     align-items: center;
     gap: 14px;
     margin: 44px 0 0;
     padding-top: 30px;
     border-top: 1px solid #eceefb;
}
 .article-share span {
     font-size: 14px;
     font-weight: 600;
     color: var(--heading);
     margin-right: 4px;
}
 .article-share a {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #f7f8ff;
     color: var(--heading);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     transition: background .2s ease, color .2s ease;
}
 .article-share a:hover {
     background: var(--primary);
     color: #fff;
}
 .article-author-card {
     display: flex;
     align-items: center;
     gap: 20px;
     background: #f7f8ff;
     border-radius: 22px;
     padding: 28px;
     margin: 40px 0 0;
}
 .article-author-card img {
     width: 68px;
     height: 68px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
}
 .article-author-card h4 {
     font-size: 16px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 4px;
}
 .article-author-card p {
     margin: 0;
     font-size: 14.5px;
}
 .related-posts {
     margin-top: 70px;
}
 .related-posts h3 {
     font-size: 23px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 28px;
}
 @media (max-width: 575.98px) {
     .article {
         padding: 60px 0 80px;
    }
     .article-author-card {
         flex-direction: column;
         text-align: center;
    }
}
/* ========================================================= HOME TWO — DARK / PREMIUM THEME Scoped under body.theme-dark so it never touches Home One or the inner pages. Same markup/sections as Home One — only colors, backgrounds and surfaces change. ========================================================= */
 body.theme-dark {
     background: #0b0c14;
     color: rgba(255, 255, 255, .62);
    /* flips plain, uncolored paragraph text automatically */
}
/* --heading drives almost every title/label in the site, so redefining it here relights the whole page at once. We reset it back to the original dark value inside "device mockup" components further down, since those are meant to look like a literal white screenshot regardless of theme. */
 body.theme-dark {
     --heading: #f5f6ff;
}
/* ---------- Header ---------- */
 body.theme-dark .topbar {
     background: #05060a;
}
 body.theme-dark .site-header {
     background: rgba(11, 12, 20, .78);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
}
 body.theme-dark .site-header.is-stuck {
     background: rgba(11, 12, 20, .94);
     box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
 body.theme-dark .search-btn {
     color: #fff;
}
 body.theme-dark .navbar-toggler {
     color: #fff;
}
 body.theme-dark .dropdown-menu {
     background: #14162a;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}
 body.theme-dark .dropdown-item:hover, body.theme-dark .dropdown-item:focus {
     background: rgba(255, 255, 255, .04);
}
 body.theme-dark .search-panel {
     background: #14162a;
     box-shadow: 0 20px 30px rgba(0, 0, 0, .4);
}
 body.theme-dark .search-form .form-control {
     background: #0f1120;
     border-color: rgba(255, 255, 255, .12);
     color: #fff;
}
 body.theme-dark .search-form .form-control::placeholder {
     color: rgba(255, 255, 255, .4);
}
/* ---------- Hero ---------- */
 body.theme-dark .hero {
     background: linear-gradient(160deg, #0b0c14 0%, #171933 60%, #0b0c14 100%);
}
 body.theme-dark .hero::before {
     background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}
 body.theme-dark .hero-glow-1 {
     opacity: .35;
}
 body.theme-dark .hero-glow-2 {
     opacity: .3;
}
 body.theme-dark .hero-badge {
     background: rgba(255, 255, 255, .06);
     border-color: rgba(255, 255, 255, .12);
     box-shadow: none;
}
 body.theme-dark .hero-badge:hover {
     box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
 body.theme-dark .btn-play {
     color: #fff;
}
 body.theme-dark .play-icon {
     background: rgba(255, 255, 255, .08);
     box-shadow: none;
}
 body.theme-dark .avatars li {
     border-color: #14162a;
}
 body.theme-dark .stars strong {
     color: #fff;
}
 body.theme-dark .dash {
     box-shadow: 0 50px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}
 body.theme-dark .float-card {
     box-shadow: 0 24px 46px rgba(0, 0, 0, .5);
}
/* ---------- Section backgrounds (alternating for subtle separation) ---------- */
 body.theme-dark .trusted, body.theme-dark .process, body.theme-dark .pricing, body.theme-dark .faq, body.theme-dark .integrations, body.theme-dark .contact, body.theme-dark .newsletter, body.theme-dark .features {
     background: #0b0c14;
}
 body.theme-dark .about, body.theme-dark .services, body.theme-dark .projects, body.theme-dark .team, body.theme-dark .testimonials, body.theme-dark .blog {
     background: #10121f;
}
 body.theme-dark .pricing-glow {
     opacity: .5;
}
/* ---------- Trusted logos ---------- */
 body.theme-dark .trusted-logos li {
     color: rgba(255, 255, 255, .3);
}
 body.theme-dark .trusted-logos li:hover {
     color: #fff;
}
/* ---------- Generic glass-card treatment ---------- */
 body.theme-dark .feature-card, body.theme-dark .step-card, body.theme-dark .service-card, body.theme-dark .team-card, body.theme-dark .price-card, body.theme-dark .faq-item, body.theme-dark .blog-card, body.theme-dark .t-card, body.theme-dark .contact-form, body.theme-dark .newsletter-box, body.theme-dark .orbit-icon, body.theme-dark .project-switcher {
     background: rgba(255, 255, 255, .04);
     border-color: rgba(255, 255, 255, .08);
     backdrop-filter: blur(6px);
}
 body.theme-dark .feature-card:hover, body.theme-dark .service-card:hover, body.theme-dark .team-card:hover, body.theme-dark .price-card:hover, body.theme-dark .blog-card:hover, body.theme-dark .step:hover .step-card {
     border-color: rgba(255, 255, 255, .18);
     box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
 body.theme-dark .mini-bars span {
     background: rgba(255, 255, 255, .1);
}
 body.theme-dark .chips span, body.theme-dark .apps-visual span {
     background: rgba(255, 255, 255, .06);
     color: #fff;
}
 body.theme-dark .shield {
     background: rgba(255, 255, 255, .08);
}
 body.theme-dark .chat-bubble {
     background: rgba(255, 255, 255, .07);
     color: #fff;
}
/* Services: keep the cursor-glow, darken its base */
 body.theme-dark .service-card::before {
     background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, .08), transparent 65%);
}
/* ---------- About ---------- */
 body.theme-dark .about-lead, body.theme-dark .about-list p {
     color: rgba(255, 255, 255, .6);
}
 body.theme-dark .about-call {
     color: #fff;
}
 body.theme-dark .about-call .play-icon {
     background: rgba(255, 255, 255, .08);
}
/* ---------- Project tabs & panel (page-level UI — not the screenshot itself) ---------- */
 body.theme-dark .project-tab:hover {
     background: rgba(255, 255, 255, .05);
}
 body.theme-dark .project-tab.active {
     background: rgba(255, 255, 255, .07);
     box-shadow: none;
}
 body.theme-dark .tab-info small {
     color: rgba(255, 255, 255, .45);
}
 body.theme-dark .tab-stat {
     color: rgba(255, 255, 255, .25);
}
 body.theme-dark .project-tabs {
     border-color: rgba(255, 255, 255, .08);
}
 body.theme-dark .project-meta {
     border-color: rgba(255, 255, 255, .08);
}
 body.theme-dark .project-meta span {
     color: rgba(255, 255, 255, .45);
}
 body.theme-dark .project-info .section-badge {
     background: rgba(255, 255, 255, .08);
}
/* ---------- Team ---------- */
 body.theme-dark .team-role {
     color: rgba(255, 255, 255, .5);
}
 body.theme-dark .team-social i {
     background: rgba(255, 255, 255, .07);
     color: #fff;
}
/* ---------- Pricing ---------- */
 body.theme-dark .price-amount small, body.theme-dark .price-yearly-note, body.theme-dark .price-desc {
     color: rgba(255, 255, 255, .5);
}
 body.theme-dark .price-features li {
     color: rgba(255, 255, 255, .8);
}
 body.theme-dark .price-features li.is-off {
     color: rgba(255, 255, 255, .3);
}
 body.theme-dark .pt-label {
     color: rgba(255, 255, 255, .4);
}
 body.theme-dark .pt-label.is-active {
     color: #fff;
}
 body.theme-dark .pt-switch {
     background: rgba(255, 255, 255, .12);
}
 body.theme-dark .btn-outline-cta {
     background: rgba(255, 255, 255, .06);
     border-color: rgba(255, 255, 255, .15);
}
 body.theme-dark .btn-outline-cta:hover {
     background: var(--primary);
     border-color: var(--primary);
}
/* ---------- Testimonials ---------- */
 body.theme-dark .marquee-row {
     -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
     mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
 body.theme-dark .t-card {
     box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
 body.theme-dark .t-person small {
     color: rgba(255, 255, 255, .45);
}
/* ---------- FAQ ---------- */
 body.theme-dark .faq-item:has(.collapse.show) {
     background: rgba(255, 255, 255, .06);
     border-color: rgba(45, 60, 245, .5);
}
 body.theme-dark .faq-a {
     color: rgba(255, 255, 255, .55);
}
 body.theme-dark .faq-icon {
     background: rgba(255, 255, 255, .08);
     color: #fff;
}
 body.theme-dark .faq-no {
     color: rgba(255, 255, 255, .3);
}
/* ---------- Integrations orbit ---------- */
 body.theme-dark .orbit-lines circle, body.theme-dark .orbit-lines line {
     stroke: rgba(255, 255, 255, .12);
}
 body.theme-dark .integrations-stats span {
     color: rgba(255, 255, 255, .5);
}
 body.theme-dark .integrations-grid span {
     background: rgba(255, 255, 255, .06);
}
/* ---------- Blog ---------- */
 body.theme-dark .blog-meta {
     color: rgba(255, 255, 255, .45);
}
 body.theme-dark .blog-body p {
     color: rgba(255, 255, 255, .55);
}
/* ---------- Contact ---------- */
 body.theme-dark .contact-icon {
     background: rgba(255, 255, 255, .07);
}
 body.theme-dark .contact-list span {
     color: rgba(255, 255, 255, .5);
}
 body.theme-dark .contact-form .form-control {
     background: #0f1120;
     border-color: rgba(255, 255, 255, .12);
     color: #fff;
}
 body.theme-dark .contact-form .form-control::placeholder {
     color: rgba(255, 255, 255, .35);
}
 body.theme-dark .contact-map {
     box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
 body.theme-dark .contact-map iframe {
     filter: grayscale(1) invert(.92) contrast(.9);
}
/* About stats bar was a solid white box — fix so counters stay readable */
 body.theme-dark .about-stats {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .08);
     box-shadow: none;
}
 body.theme-dark .stat {
     border-color: rgba(255, 255, 255, .1);
}
 body.theme-dark .stat span:last-child {
     color: rgba(255, 255, 255, .5);
}
/* ---------- Newsletter ---------- */
 body.theme-dark .newsletter-text p {
     color: rgba(255, 255, 255, .55);
}
 body.theme-dark .newsletter-form input {
     background: #0f1120;
     border-color: rgba(255, 255, 255, .15);
     color: #fff;
}
 body.theme-dark .newsletter-form input::placeholder {
     color: rgba(255, 255, 255, .35);
}
 body.theme-dark .nl-icon {
     background: rgba(255, 255, 255, .07);
}
/* ---------- Exceptions: keep these "device mockup" surfaces literally white, the same on every theme, since they represent an app/product screenshot ---------- */
 body.theme-dark .dash, body.theme-dark .dash *, body.theme-dark .float-card, body.theme-dark .float-card *, body.theme-dark .about-panel, body.theme-dark .about-panel *, body.theme-dark .about-score, body.theme-dark .about-score *, body.theme-dark .about-since, body.theme-dark .about-since *, body.theme-dark .pv-photo .pv-badge, body.theme-dark .pv-photo .pv-badge *, body.theme-dark .phone-screen, body.theme-dark .phone-screen *, body.theme-dark .chatbot, body.theme-dark .chatbot *, body.theme-dark .modal, body.theme-dark .modal * {
     --heading: #111112;
}
/* These two cards share a base class with the generic glass-card rule above (.feature-card / .price-card), so restate their own gradient on top of it. */
 body.theme-dark .feature-primary {
     background: linear-gradient(135deg, var(--primary) 0%, #5a3df0 100%);
     border-color: transparent;
}
 body.theme-dark .price-featured {
     background: linear-gradient(160deg, var(--primary) 0%, #5a3df0 120%);
     border-color: transparent;
}
/* ========================================================= HOME THREE — AI / LIGHT PREMIUM THEME Scoped under body.theme-ai. Same sections/markup as Home One;
 this covers the AI hero mockup + a few light accent tweaks so the "AI" positioning feels genuine, not just a badge swap. ========================================================= */
 body.theme-ai .badge-new {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background: linear-gradient(100deg, var(--primary), #a855f7);
}
 body.theme-ai .hero-glow-1 {
     background: var(--primary);
}
 body.theme-ai .hero-glow-2 {
     background: #ec4899;
     opacity: .22;
}
 body.theme-ai .service-icon, body.theme-ai .modal-icon {
     background: linear-gradient(135deg, rgba(45, 60, 245, .12), rgba(168, 85, 247, .12));
}
/* ---------- AI prompt/response hero mockup ---------- */
 .ai-mock {
     background: #fff;
     border-radius: 22px;
     box-shadow: 0 40px 80px rgba(45, 60, 245, .18), 0 0 0 1px rgba(45, 60, 245, .06);
     overflow: hidden;
}
 .ai-mock-url {
     margin-left: 10px;
     font-size: 12px;
     color: #9ea2c0;
     display: inline-flex;
     align-items: center;
     gap: 5px;
}
 .ai-mock-url i {
     color: var(--primary);
}
 .ai-mock-body {
     padding: 22px 22px 24px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     min-height: 300px;
}
 .ai-msg {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     max-width: 92%;
}
 .ai-msg-user {
     align-self: flex-end;
     flex-direction: row-reverse;
}
 .ai-msg-bot {
     align-self: flex-start;
}
 .ai-msg-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     background: #b3b7d3;
}
 .ai-msg-avatar.ai {
     background: linear-gradient(135deg, var(--primary), #a855f7);
     font-size: 14px;
}
 .ai-bubble {
     background: #f6f7fd;
     color: var(--heading);
     border-radius: 14px 14px 14px 4px;
     padding: 12px 15px;
     font-size: 13.5px;
     line-height: 1.6;
}
 .ai-msg-user .ai-bubble {
     background: var(--primary);
     color: #fff;
     border-radius: 14px 14px 4px 14px;
}
 .ai-response {
     border-radius: 14px 14px 14px 4px;
}
 .ai-response strong {
     display: block;
     font-size: 13.5px;
     margin-bottom: 8px;
     color: var(--heading);
}
 .ai-steps {
     list-style: none;
     margin: 0 0 12px;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 .ai-steps li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
}
 .ai-steps li i {
     color: #16a34a;
     font-size: 14px;
}
 .ai-use-btn {
     border: 0;
     background: var(--primary);
     color: #fff;
     border-radius: 50px;
     padding: 8px 16px;
     font-size: 12.5px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: background .2s ease;
}
 .ai-use-btn:hover {
     background: var(--primary-dark);
}
 .ai-typing {
     display: flex;
     align-items: center;
     gap: 10px;
}
 .ai-typing-bubble {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 12px 15px;
}
 .ai-typing-bubble span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #b3b7d3;
     animation: chatbot-typing 1s infinite ease-in-out;
}
 .ai-typing-bubble span:nth-child(2) {
     animation-delay: .15s;
}
 .ai-typing-bubble span:nth-child(3) {
     animation-delay: .3s;
}
 @media (max-width: 575.98px) {
     .ai-mock-body {
         padding: 18px 16px 20px;
         min-height: 260px;
    }
     .ai-msg {
         max-width: 96%;
    }
}
/* ========================================================= HOME THREE — CENTERED AI HERO + LIVE PROMPT BOX ========================================================= */
 .ai-hero {
     position: relative;
     overflow: hidden;
     padding: 120px 0 90px;
     background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-via) 55%, var(--hero-to) 100%);
}
 .ai-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(45, 60, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 60, 245, .05) 1px, transparent 1px);
     background-size: 72px 72px;
     -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 90%);
     mask-image: linear-gradient(to bottom, #000 20%, transparent 90%);
}
 .ai-hero-badge {
     margin-bottom: 26px;
}
 .ai-hero-title {
     font-size: clamp(36px, 5.6vw, 68px);
     font-weight: 700;
     line-height: 1.14;
     letter-spacing: -1.5px;
     color: var(--heading);
     margin-bottom: 22px;
}
 .ai-hero-text {
     font-size: 18px;
     line-height: 1.8;
     max-width: 620px;
     margin: 0 auto 44px;
}
/* Prompt box */
 .ai-prompt-box {
     position: relative;
     max-width: 720px;
     margin: 0 auto 44px;
     background: #fff;
     border-radius: 26px;
     padding: 22px;
     text-align: left;
     box-shadow: 0 40px 80px rgba(45, 60, 245, .16), 0 0 0 1px rgba(45, 60, 245, .06);
}
 .ai-prompt-input {
     display: flex;
     align-items: center;
     gap: 12px;
     background: #f6f7fd;
     border-radius: 16px;
     padding: 8px 8px 8px 20px;
}
 .ai-prompt-input > i {
     color: var(--primary);
     font-size: 20px;
}
 .ai-prompt-input input {
     flex: 1;
     border: 0;
     background: none;
     font-size: 15.5px;
     padding: 10px 0;
     color: var(--heading);
}
 .ai-prompt-input input:focus {
     outline: none;
}
 .ai-prompt-input input::placeholder {
     color: #9ea2c0;
}
 .ai-prompt-input button {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     border: 0;
     flex-shrink: 0;
     background: var(--primary);
     color: #fff;
     font-size: 16px;
     transition: background .2s ease;
}
 .ai-prompt-input button:hover {
     background: var(--primary-dark);
}
 .ai-prompt-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 16px;
}
 .ai-chip {
     border: 1px solid #e4e6f8;
     background: #fff;
     color: var(--heading);
     border-radius: 50px;
     padding: 9px 16px;
     font-size: 13px;
     font-weight: 500;
     transition: background .2s ease, border-color .2s ease, color .2s ease;
}
 .ai-chip:hover, .ai-chip.is-active {
     background: var(--primary);
     border-color: var(--primary);
     color: #fff;
}
 .ai-live-response {
     margin-top: 18px;
     text-align: left;
     min-height: 64px;
}
 .ai-live-placeholder {
     display: flex;
     align-items: center;
     gap: 12px;
     color: #9ea2c0;
     font-size: 14px;
     padding: 14px 4px;
}
 .ai-live-placeholder i {
     font-size: 18px;
     color: var(--primary);
}
 .ai-live-thinking {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 4px;
}
 .ai-live-thinking .ai-msg-avatar {
     width: 30px;
     height: 30px;
}
 .ai-live-thinking-bubble {
     display: flex;
     align-items: center;
     gap: 5px;
     background: #f6f7fd;
     border-radius: 14px;
     padding: 12px 16px;
}
 .ai-live-thinking-bubble span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #b3b7d3;
     animation: chatbot-typing 1s infinite ease-in-out;
}
 .ai-live-thinking-bubble span:nth-child(2) {
     animation-delay: .15s;
}
 .ai-live-thinking-bubble span:nth-child(3) {
     animation-delay: .3s;
}
 .ai-live-result {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     animation: ai-fade-in .35s ease;
}
 .ai-live-result .ai-msg-avatar {
     width: 32px;
     height: 32px;
     flex-shrink: 0;
}
 .ai-live-card {
     flex: 1;
     background: #f6f7fd;
     border-radius: 14px 14px 14px 4px;
     padding: 16px 18px;
}
 .ai-live-card strong {
     display: block;
     font-size: 14.5px;
     color: var(--heading);
     margin-bottom: 10px;
}
 .ai-live-card ul {
     list-style: none;
     margin: 0 0 12px;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 7px;
}
 .ai-live-card ul li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13.5px;
     color: var(--heading);
}
 .ai-live-card ul li i {
     color: #16a34a;
}
 .ai-live-card .ai-use-btn {
     font-size: 13px;
     padding: 9px 18px;
}
 @keyframes ai-fade-in {
     from {
         opacity: 0;
         transform: translateY(6px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .ai-hero-proof {
     justify-content: center;
     margin-bottom: 34px;
}
 .ai-hero-buttons {
     justify-content: center;
}
 @media (max-width: 575.98px) {
     .ai-hero {
         padding: 90px 0 70px;
    }
     .ai-prompt-box {
         padding: 16px;
         border-radius: 22px;
    }
     .ai-prompt-chips {
         gap: 8px;
    }
     .ai-chip {
         font-size: 12px;
         padding: 8px 14px;
    }
}
/* ========================================================= HOME THREE — AI CAPABILITY GRID ========================================================= */
 .ai-capabilities {
     padding: 90px 0 110px;
     background: #fff;
}
 .cap-card {
     height: 100%;
     background: #f7f8ff;
     border: 1px solid #eceefb;
     border-radius: 22px;
     padding: 30px 26px;
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
 .cap-card:hover {
     transform: translateY(-6px);
     border-color: rgba(45, 60, 245, .25);
     box-shadow: 0 22px 44px rgba(45, 60, 245, .1);
}
 .cap-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 52px;
     height: 52px;
     border-radius: 14px;
     margin-bottom: 20px;
     background: linear-gradient(135deg, rgba(45, 60, 245, .12), rgba(168, 85, 247, .12));
     color: var(--primary);
     font-size: 22px;
}
 .cap-card h3 {
     font-size: 17.5px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 8px;
}
 .cap-card p {
     font-size: 14px;
     line-height: 1.7;
     margin: 0;
}
 @media (max-width: 991.98px) {
     .ai-capabilities {
         padding: 60px 0 80px;
    }
}
/* ========================================================= HOME THREE — AI PIPELINE (How it works) ========================================================= */
 .ai-pipeline {
     padding: 90px 0 110px;
     background: #f7f8ff;
}
 .pipeline-row {
     display: flex;
     align-items: stretch;
     gap: 20px;
     margin-top: 24px;
}
 .pipeline-step {
     flex: 1;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 22px;
     padding: 34px 28px;
     text-align: center;
}
 .pipeline-step-ai {
     background: linear-gradient(160deg, var(--primary), #5a3df0);
     border-color: transparent;
}
 .pipeline-step-ai h3, .pipeline-step-ai p {
     color: #fff;
}
 .pipeline-step-ai p {
     color: rgba(255, 255, 255, .82);
}
 .pipeline-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 16px;
     background: rgba(45, 60, 245, .1);
     color: var(--primary);
     font-size: 24px;
     margin-bottom: 18px;
}
 .pipeline-step-ai .pipeline-icon {
     background: rgba(255, 255, 255, .18);
     color: #fff;
}
 .pipeline-label {
     display: block;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .06em;
     color: #8b8fae;
     margin-bottom: 10px;
}
 .pipeline-step-ai .pipeline-label {
     color: rgba(255, 255, 255, .7);
}
 .pipeline-step h3 {
     font-size: 19px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 10px;
}
 .pipeline-step p {
     font-size: 14.5px;
     line-height: 1.7;
     margin: 0;
}
 .pipeline-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #c7cbef;
     font-size: 22px;
     flex: 0 0 auto;
}
 @media (max-width: 991.98px) {
     .ai-pipeline {
         padding: 60px 0 80px;
    }
     .pipeline-row {
         flex-direction: column;
    }
     .pipeline-arrow {
         transform: rotate(90deg);
         padding: 4px 0;
    }
}
/* ========================================================= HOME THREE — USE CASES BY TEAM ========================================================= */
 .usecases {
     padding: 90px 0 110px;
     background: #fff;
}
 .usecase-tabs {
     display: flex;
     justify-content: center;
     gap: 10px;
     list-style: none;
     padding: 0;
     margin: 0 0 44px;
     flex-wrap: wrap;
}
 .usecase-tab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #f7f8ff;
     border: 1px solid #eceefb;
     appearance: none;
     border-radius: 50px;
     padding: 12px 22px;
     font-size: 14.5px;
     font-weight: 600;
     color: var(--heading);
     transition: background .2s ease, color .2s ease, border-color .2s ease;
}
 .usecase-tab i {
     font-size: 16px;
}
 .usecase-tab.active, .usecase-tab:hover {
     background: var(--primary);
     border-color: var(--primary);
     color: #fff;
}
 .usecase-panel {
     display: flex;
     align-items: center;
     gap: 50px;
     background: #f7f8ff;
     border-radius: 28px;
     padding: 50px;
}
 .usecase-text h3 {
     font-size: 26px;
     font-weight: 700;
     color: var(--heading);
     margin-bottom: 14px;
}
 .usecase-text p {
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 22px;
}
 .usecase-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin: 0;
}
 .usecase-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 15px;
     color: var(--heading);
}
 .usecase-list li i {
     color: #16a34a;
}
 .usecase-visual {
     flex: 0 0 260px;
     display: flex;
     flex-direction: column;
     gap: 16px;
}
 .ai-mini-card {
     display: flex;
     align-items: center;
     gap: 14px;
     background: #fff;
     border-radius: 16px;
     padding: 18px 20px;
     box-shadow: 0 14px 30px rgba(45, 60, 245, .08);
}
 .ai-mini-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), #a855f7);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     flex-shrink: 0;
}
 .ai-mini-card strong {
     display: block;
     font-size: 20px;
     font-weight: 700;
     color: var(--heading);
}
 .ai-mini-card small {
     font-size: 12.5px;
     color: #8b8fae;
}
 @media (max-width: 991.98px) {
     .usecases {
         padding: 60px 0 80px;
    }
     .usecase-panel {
         flex-direction: column;
         padding: 34px 26px;
    }
     .usecase-visual {
         flex: none;
         width: 100%;
         flex-direction: row;
    }
}
 @media (max-width: 575.98px) {
     .usecase-visual {
         flex-direction: column;
    }
     .usecase-tabs {
         gap: 8px;
    }
     .usecase-tab {
         font-size: 13px;
         padding: 10px 16px;
    }
}
/* ========================================================= HOME THREE — DATA PRIVACY / TRUST ========================================================= */
 .ai-trust {
     padding: 90px 0 110px;
     background: #f7f8ff;
}
 .ai-trust .section-text {
     max-width: 460px;
     margin-bottom: 30px;
}
 .trust-card {
     height: 100%;
     background: #fff;
     border: 1px solid #eceefb;
     border-radius: 20px;
     padding: 26px;
     transition: transform .3s ease, box-shadow .3s ease;
}
 .trust-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(45, 60, 245, .08);
}
 .trust-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: rgba(45, 60, 245, .08);
     color: var(--primary);
     font-size: 20px;
     margin-bottom: 16px;
}
 .trust-card h3 {
     font-size: 16.5px;
     font-weight: 600;
     color: var(--heading);
     margin-bottom: 8px;
}
 .trust-card p {
     font-size: 14px;
     line-height: 1.7;
     margin: 0;
}
 @media (max-width: 991.98px) {
     .ai-trust {
         padding: 60px 0 80px;
    }
}
/* AI-credit highlight row at the top of each pricing plan (Home Three) */
 .price-features li.is-ai-credit {
     background: rgba(45, 60, 245, .06);
     border-radius: 10px;
     padding: 10px 12px;
     margin: -2px -12px 6px;
     font-weight: 600;
}
 .price-features li.is-ai-credit i {
     color: var(--primary);
     font-size: 17px;
}
 .price-featured .price-features li.is-ai-credit {
     background: rgba(255, 255, 255, .14);
}
 .price-featured .price-features li.is-ai-credit i {
     color: #fff;
}