: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(28px, 3.2vw, 42px);
     font-weight: 700;
     line-height: 1.12;
     letter-spacing: -1.5px;
     color: var(--heading);
     margin-bottom: 24px;
}
.hero-text {
    font-size: 17px;
    line-height: 1.7;
}
 .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;
}
 

/* navbar  logo*/
/* ---------- New logo ---------- */
.brand-logo {
    height: 60px;
    width: auto;
    display: block;
    transition: height .3s;
}
.is-stuck .brand-logo { height: 50px; }

.footer-logo {
    height: 56px;
    width: auto;
    display: block;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .brand-logo { height: 38px; }
}
@media (max-width: 991.98px) {
    .brand-logo { height: 46px; }
    .footer-logo { margin: 0 auto; }
}

/* Smooth scroll lands below the sticky header */
section[id] { scroll-margin-top: 80px; }

/* header code */
/* ---------- Premium top bar ---------- */
.topbar {
    position: relative;
    padding: 12px 0;
    font-size: 15px;
    background:
        radial-gradient(600px 120px at 15% 0%, rgba(45, 60, 245, .35), transparent 70%),
        radial-gradient(500px 120px at 90% 100%, rgba(124, 58, 237, .25), transparent 70%),
        linear-gradient(135deg, #0b0c1a 0%, #14163a 55%, #0b0c1a 100%);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2d3cf5, #8b5cf6, #2d3cf5, transparent);
}
.topbar-info { gap: 28px !important; }
.topbar-info li + li {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.topbar-info a,
.topbar-info span {
    gap: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
}
.topbar-info i {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 4px 12px rgba(45, 60, 245, .45);
}
.topbar-info a:hover { opacity: 1; color: #fff; }

.topbar-social { gap: 10px !important; }
.topbar-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: all .25s ease;
}
.topbar-social a:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
    .topbar { font-size: 13px; }
    .topbar-info { gap: 16px !important; }
    .topbar-info li + li { padding-left: 16px; }
}
@media (max-width: 575.98px) {
    .topbar { padding: 10px 0; }
}

/* features */
/* ---------- Features showcase ---------- */
.fx-row { margin-bottom: 100px; }
.fx-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 50px;
    background: rgba(45, 60, 245, .08); color: var(--primary);
    font-size: 14px; font-weight: 600; margin-bottom: 18px;
}
.fx-title { font-size: 36px; font-weight: 700; line-height: 1.2; color: var(--heading); margin-bottom: 16px; }
.fx-text { font-size: 17px; line-height: 1.7; color: #5b5b66; margin-bottom: 22px; }
.fx-list { margin-bottom: 30px; }
.fx-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--heading); padding: 7px 0; }
.fx-list i {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 13px;
}

.fx-visual {
    position: relative; padding: 40px;
    border-radius: 32px;
    background: linear-gradient(145deg, #eceeff, #f6f1ff);
    border: 1px solid #e4e7fb;
}
.fx-panel {
    background: #fff; border-radius: 22px; padding: 22px;
    box-shadow: 0 24px 50px rgba(45, 60, 245, .12);
}
.fx-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; color: var(--heading); }
.fx-step { display: flex; align-items: center; gap: 14px; padding: 14px 4px; }
.fx-step + .fx-step { border-top: 1px solid #eef0fb; }
.fx-step > div { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.fx-step strong { font-size: 15px; color: var(--heading); }
.fx-step small { font-size: 13px; color: #8a8a96; }
.fx-step-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(45, 60, 245, .1); color: var(--primary); font-size: 19px;
}
.fx-pill {
    padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600;
    background: #dcfce7; color: #15803d;
}
.fx-pill-live { background: rgba(45, 60, 245, .1); color: var(--primary); }
.fx-float {
    position: absolute; right: -14px; bottom: -22px;
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; padding: 12px 18px; border-radius: 16px;
    font-size: 14px; font-weight: 600; color: var(--heading);
    box-shadow: 0 16px 36px rgba(17, 17, 18, .12);
}
.fx-float i { color: var(--primary); font-size: 18px; }
.fx-float-left { right: auto; left: -14px; }

.fx-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    padding-top: 10px;
}
.fx-strip-item {
    text-align: center; padding: 30px 22px;
    background: #f7f8ff; border: 1px solid #eceefb; border-radius: 24px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.fx-strip-item:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(45, 60, 245, .1); }
.fx-strip-item > span {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed); color: #fff; font-size: 24px;
    box-shadow: 0 10px 22px rgba(45, 60, 245, .35);
}
.fx-strip-item h4 { font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.fx-strip-item p { font-size: 14.5px; color: #5b5b66; margin: 0; line-height: 1.6; }

@media (max-width: 991.98px) {
    .fx-row { margin-bottom: 70px; }
    .fx-title { font-size: 30px; }
    .fx-visual { padding: 28px 22px; }
    .fx-float { right: 10px; }
    .fx-float-left { left: 10px; }
    .fx-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .fx-strip { grid-template-columns: 1fr; }
    .fx-title { font-size: 26px; }
}

/* pricing*/

/* ---------- About (new) ---------- */
.ab-visual {
    position: relative;
    padding: 44px;
    border-radius: 32px;
    background: linear-gradient(145deg, #eceeff, #f6f1ff);
    border: 1px solid #e4e7fb;
}
.ab-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 24px 50px rgba(45, 60, 245, .12);
}
.ab-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 22px;
}
.ab-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #eef0fb;
}
.ab-steps li > span {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    color: #fff; font-size: 19px;
    box-shadow: 0 8px 18px rgba(45, 60, 245, .3);
}
.ab-steps div { display: flex; flex-direction: column; line-height: 1.3; }
.ab-steps strong { font-size: 16px; color: var(--heading); }
.ab-steps small { font-size: 13px; color: #8a8a96; }

.ab-float {
    position: absolute;
    right: -14px; bottom: -22px;
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    padding: 14px 20px;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(17, 17, 18, .12);
}
.ab-float > i { font-size: 24px; color: var(--primary); }
.ab-float div { display: flex; flex-direction: column; line-height: 1.3; }
.ab-float strong { font-size: 14px; color: var(--heading); }
.ab-float small { font-size: 12px; color: #8a8a96; }

.ab-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 26px 0 22px;
}
.ab-mv-item {
    padding: 22px;
    background: #f7f8ff;
    border: 1px solid #eceefb;
    border-radius: 20px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ab-mv-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(45, 60, 245, .1); }
.ab-mv-item > span {
    width: 46px; height: 46px; margin-bottom: 14px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(45, 60, 245, .1); color: var(--primary); font-size: 20px;
}
.ab-mv-item h4 { font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.ab-mv-item p { font-size: 14.5px; line-height: 1.6; color: #5b5b66; margin: 0; }

.ab-list { margin-bottom: 28px; }
.ab-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0;
    font-size: 16px; font-weight: 500; color: var(--heading);
}
.ab-list i {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 13px;
}

@media (max-width: 991.98px) {
    .ab-visual { padding: 28px 20px; }
    .ab-float { right: 10px; }
}
@media (max-width: 575.98px) {
    .ab-mv { grid-template-columns: 1fr; }
}

/* about */
/* ---------- Pricing additions ---------- */
.price-custom {
    font-size: 40px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -1px;
    line-height: 1.25;
}
.price-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    margin: 50px 0 0;
    padding: 0;
}
.price-trust li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--heading);
}
.price-trust i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 6px 14px rgba(45, 60, 245, .3);
}
.pricing-footnote { margin-top: 30px; }

@media (max-width: 575.98px) {
    .price-custom { font-size: 32px; }
    .price-trust { gap: 12px 22px; }
}

/* testimonials  */
/* ---------- Testimonials (new) ---------- */
.tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eceefb;
    border-radius: 28px;
    padding: 36px 32px 32px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.tm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(45, 60, 245, .12);
}
.tm-quote {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 52px;
    line-height: 1;
    color: rgba(45, 60, 245, .12);
}
.tm-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    color: #f59e0b;
    font-size: 16px;
}
.tm-card > p {
    font-size: 16.5px;
    line-height: 1.75;
    color: #3d3d4a;
    margin-bottom: 28px;
}
.tm-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid #eef0fb;
}
.tm-person div { display: flex; flex-direction: column; line-height: 1.35; }
.tm-person strong { font-size: 16px; color: var(--heading); }
.tm-person small { font-size: 13px; color: #8a8a96; }
.tm-avatar {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
}

/* Highlighted middle card */
.tm-featured {
    background: linear-gradient(145deg, #2d3cf5 0%, #6d3df0 100%);
    border-color: transparent;
    box-shadow: 0 30px 60px rgba(45, 60, 245, .3);
    transform: translateY(-12px);
}
.tm-featured:hover { transform: translateY(-18px); }
.tm-featured .tm-quote { color: rgba(255, 255, 255, .18); }
.tm-featured > p { color: rgba(255, 255, 255, .92); }
.tm-featured .tm-person { border-top-color: rgba(255, 255, 255, .22); }
.tm-featured .tm-person strong { color: #fff; }
.tm-featured .tm-person small { color: rgba(255, 255, 255, .75); }
.tm-featured .tm-avatar { background: rgba(255, 255, 255, .22); }

/* CTA strip */
.tm-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 64px;
    padding: 34px 40px;
    background: #fff;
    border: 1px solid #eceefb;
    border-radius: 28px;
    box-shadow: 0 20px 44px rgba(45, 60, 245, .08);
}
.tm-cta h3 { font-size: 24px; font-weight: 700; color: var(--heading); margin-bottom: 4px; }
.tm-cta p { margin: 0; color: #5b5b66; }
.tm-cta-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.tm-cta-link { font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.tm-cta-link:hover { color: var(--primary-dark); }

@media (max-width: 991.98px) {
    .tm-grid { grid-template-columns: 1fr; }
    .tm-featured { transform: none; }
    .tm-featured:hover { transform: translateY(-6px); }
    .tm-cta { padding: 28px 24px; text-align: center; justify-content: center; }
    .tm-cta-actions { justify-content: center; }
}

/* banner img */
/* ---------- Hero image ---------- */
.hero-image { padding: 0; }
.hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(45, 60, 245, .18);
}
@media (max-width: 991.98px) {
    .hero-img { max-width: 560px; margin: 0 auto; }
}

/* ---------- Hero: image aligned to the top of the content ---------- */
.hero .row.align-items-center {
    align-items: flex-start !important;
}
.hero-image {
    margin-top: 0;
}

/* a little less empty space above the hero so more fits on screen */
.hero {
    padding: 70px 0 100px;
}

@media (max-width: 991.98px) {
    .hero { padding: 50px 0 70px; }
}
.hero-image { margin-top: 56px; }
@media (max-width: 991.98px) { .hero-image { margin-top: 0; } }

/* ---------- Hero image: slightly larger only ---------- */
.hero .row.align-items-center {
    align-items: flex-start !important;
}
.hero-image {
    height: auto;
    margin-top: 0;
}
.hero-img {
    width: calc(100% + 24px);      /* a little wider, grows to the left */
    max-width: none;
    margin-left: -24px;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;         /* a little taller than the original shape */
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(45, 60, 245, .18);
}

@media (max-width: 1199.98px) {
    .hero-img { width: 100%; margin-left: 0; }
}
@media (max-width: 991.98px) {
    .hero-img { max-width: 560px; margin: 0 auto; aspect-ratio: auto; }
}

/* Integrations*/

/* ---------- Integrations: logo in the center ---------- */
.orbit-center {
    padding: 14px 20px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #eceefb;
    box-shadow: 0 20px 44px rgba(45, 60, 245, .18);
}
.orbit-logo {
    display: block;
    width: 150px;
    height: auto;
}

/* hover glow on the icons, to match the rest of the page */
.orbit-icon:hover {
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    color: #fff;
}

@media (max-width: 991.98px) {
    .orbit-logo { width: 120px; }
}

/* ---------- One smaller size for ALL main headings ---------- */
:root {
    --main-heading-size: clamp(26px, 3vw, 38px);
}

.hero-title,
.section-title,
.app-title,
.fc-title,
.pb-title,
.video-caption h2 {
    font-size: var(--main-heading-size) !important;
    line-height: 1.25 !important;
    letter-spacing: -.5px;
    font-weight: 700;
}
/* ---------- Integrations: premium cards ---------- */
.int-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 70px;
}
.int-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 40px 30px 34px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
    border: 1px solid #eceefb;
    border-radius: 28px;
    box-shadow: 0 14px 34px rgba(45, 60, 245, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* glowing line on top */
.int-card::before {
    content: "";
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #2d3cf5, #8b5cf6);
    opacity: .85;
}
/* soft glow in the corner */
.int-card::after {
    content: "";
    position: absolute;
    top: -70px; right: -70px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 70%);
    pointer-events: none;
}
.int-card:hover {
    transform: translateY(-8px);
    border-color: rgba(45, 60, 245, .25);
    box-shadow: 0 28px 56px rgba(45, 60, 245, .16);
}
.int-icon {
    position: relative;
    z-index: 1;
    width: 68px; height: 68px;
    margin: 0 auto 22px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 14px 28px rgba(45, 60, 245, .35);
    transition: transform .35s ease;
}
.int-card:hover .int-icon { transform: rotate(-6deg) scale(1.08); }
.int-card h4 {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 10px;
}
.int-card p {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.7;
    color: #5b5b66;
    margin: 0;
}

@media (max-width: 991.98px) {
    .int-cards { gap: 18px; }
    .int-card { padding: 32px 22px 28px; }
}
@media (max-width: 767.98px) {
    .int-cards { grid-template-columns: 1fr; margin-top: 44px; }
}

/* ---------- About: image ---------- */
.ab-photo {
    padding: 0;
    background: none;
    border: 0;
}
.ab-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    object-position: center;
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(45, 60, 245, .18);
}
.ab-photo .ab-float {
    right: -14px;
    bottom: -22px;
}

@media (max-width: 991.98px) {
    .ab-img { max-width: 560px; margin: 0 auto; }
    .ab-photo .ab-float { right: 10px; bottom: -18px; }
}
/* ---------- About: image card that matches the text height ---------- */
.about .row.align-items-center {
    align-items: stretch !important;
}
.ab-col {
    display: flex;
}
.ab-showcase {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 36px 30px;
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid #e4e7fb;
    background:
        radial-gradient(420px 260px at 85% 10%, rgba(139, 92, 246, .14), transparent 70%),
        radial-gradient(380px 240px at 10% 95%, rgba(45, 60, 245, .12), transparent 70%),
        linear-gradient(145deg, #f4f5ff, #fbf9ff);
    box-shadow: 0 30px 60px rgba(45, 60, 245, .1);
}
.ab-showcase::before {               /* soft grid, same as the hero */
    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: 56px 56px;
    pointer-events: none;
}
.ab-showcase-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(45, 60, 245, .15);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(45, 60, 245, .08);
}
.ab-showcase-img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    mix-blend-mode: multiply;        /* the image's white background melts into the card */
}
.ab-showcase-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(17, 17, 18, .08);
}
.ab-showcase-foot > i { font-size: 24px; color: var(--primary); }
.ab-showcase-foot div { display: flex; flex-direction: column; line-height: 1.3; }
.ab-showcase-foot strong { font-size: 14px; color: var(--heading); }
.ab-showcase-foot small { font-size: 12px; color: #8a8a96; }

@media (max-width: 991.98px) {
    .ab-showcase { padding: 28px 20px; gap: 22px; }
}

/* ---------- About: image card ends at the Mission/Vision cards ---------- */
.ab-mv { margin-bottom: 0; }

.ab-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-top: 48px;
    padding: 26px 34px;
    background: #fff;
    border: 1px solid #eceefb;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(45, 60, 245, .07);
}
.ab-bottom .ab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 0;
}
.ab-bottom .ab-list li { padding: 0; }
.ab-bottom .about-actions { margin: 0; }

@media (max-width: 991.98px) {
    .ab-bottom { flex-direction: column; align-items: flex-start; padding: 24px 22px; margin-top: 36px; }
}

/* ---------- About: premium highlights bar (v2) ---------- */
.ab-bottom {
    position: relative;
    overflow: hidden;
    margin-top: 56px;
    padding: 44px 52px 40px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(520px 220px at 10% 0%, rgba(45, 60, 245, .45), transparent 70%),
        radial-gradient(480px 220px at 95% 100%, rgba(124, 58, 237, .38), transparent 70%),
        linear-gradient(135deg, #0b0c1a 0%, #14163a 55%, #0b0c1a 100%);
    box-shadow: 0 30px 60px rgba(20, 22, 58, .28);
}
.ab-bottom::before {                 /* glowing line on top */
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2d3cf5, #8b5cf6, #2d3cf5, transparent);
}

/* top row: three points */
.ab-points {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.ab-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 0 32px;
}
.ab-point:first-child { padding-left: 0; }
.ab-point:last-child { padding-right: 0; }
.ab-point + .ab-point { border-left: 1px solid rgba(255, 255, 255, .12); }
.ab-point > span {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 0 0 6px rgba(139, 92, 246, .16), 0 12px 24px rgba(45, 60, 245, .5);
}
.ab-point div { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.ab-point strong { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.3; }
.ab-point small { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .66); }

/* bottom row: message + buttons */
.ab-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-top: 34px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.ab-foot-text h3 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.ab-foot-text p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .66); }

.ab-cta {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin: 0;
}
.ab-cta .about-call small { color: rgba(255, 255, 255, .66); }
.ab-cta .about-call strong { color: #fff; }
.ab-cta .about-call .play-icon { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 991.98px) {
    .ab-bottom { padding: 36px 30px; }
    .ab-points { grid-template-columns: 1fr; gap: 24px; }
    .ab-point, .ab-point:first-child, .ab-point:last-child { padding: 0; }
    .ab-point + .ab-point { border-left: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 575.98px) {
    .ab-bottom { padding: 30px 20px; margin-top: 40px; }
    .ab-foot-text h3 { font-size: 21px; }
    .ab-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* about contentt */
/* ---------- How it works: premium step cards ---------- */
.pr-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    align-items: stretch;
}
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 42px 34px 36px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
    border: 1px solid #eceefb;
    border-radius: 30px;
    box-shadow: 0 16px 38px rgba(45, 60, 245, .07);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pr-card::before {                         /* gradient line on top */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2d3cf5, #8b5cf6);
    opacity: .9;
}
.pr-card:hover {
    transform: translateY(-8px);
    border-color: rgba(45, 60, 245, .25);
    box-shadow: 0 30px 60px rgba(45, 60, 245, .16);
}

/* big faded step number */
.pr-no {
    position: absolute;
    top: 18px;
    right: 28px;
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: rgba(45, 60, 245, .07);
    pointer-events: none;
}

.pr-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 26px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 14px 28px rgba(45, 60, 245, .35);
    transition: transform .35s ease;
}
.pr-card:hover .pr-icon { transform: rotate(-6deg) scale(1.08); }

.pr-card h3 {
    font-size: 23px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 12px;
}
.pr-card p {
    font-size: 16px;
    line-height: 1.75;
    color: #5b5b66;
    margin-bottom: 26px;
}

/* tags pushed to the bottom so every card ends the same way */
.pr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: auto 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px dashed #dfe2f7;
}
.pr-tags li {
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(45, 60, 245, .08);
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 600;
}

/* arrow connectors between cards (desktop only) */
.pr-card:not(:last-child)::after {
    content: "\f138";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    right: -44px;
    transform: translate(50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
    background: #fff;
    border: 1px solid #e4e7fb;
    box-shadow: 0 10px 24px rgba(45, 60, 245, .15);
    z-index: 3;
}

@media (max-width: 1199.98px) {
    .pr-steps { gap: 30px; }
    .pr-card { padding: 38px 26px 32px; }
    .pr-card:not(:last-child)::after { right: -30px; }
}
@media (max-width: 991.98px) {
    .pr-steps { grid-template-columns: 1fr; gap: 24px; max-width: 560px; margin: 0 auto; }
    .pr-card:not(:last-child)::after { display: none; }
}

/* ---------- Step cards: tags always in ONE row ---------- */
.pr-tags {
    flex-wrap: nowrap;
    gap: 8px;
}
.pr-tags li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding: 8px 6px;
    font-size: 13px;
}

/* narrower desktop widths: allow a safe wrap so nothing gets cut off */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pr-tags { flex-wrap: wrap; }
    .pr-tags li { flex: 1 1 auto; }
}


/* ---------- Step cards: 3 equal chips in one row (clean version) ---------- */
.pr-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px dashed #dfe2f7;
}
.pr-chips span {
    display: block;
    padding: 9px 4px;
    border-radius: 50px;
    text-align: center;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(45, 60, 245, .08);
}

/* a little more room per chip on mid-size screens */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pr-chips { gap: 6px; }
    .pr-chips span { font-size: 11.5px; }
}

/* ---------- Services: compact premium cards ---------- */
.services {
    padding: 70px 0 100px;
}

/* narrower grid so the cards are smaller */
.services .row {
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
}

.service-card {
    padding: 28px 26px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f9faff 100%);
    box-shadow: 0 10px 26px rgba(45, 60, 245, .06);
    display: flex;
    flex-direction: column;
}
.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(45, 60, 245, .16);
}

/* gradient icon tile with glow */
.service-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 23px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 10px 22px rgba(45, 60, 245, .32);
}
.service-card:hover .service-icon {
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    color: #fff;
    transform: scale(1.06) rotate(-6deg);
}

.service-card h3 {
    font-size: 18.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.service-card p {
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 18px;
}

/* footer line: "View details" + round arrow button */
.service-link {
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed #e0e3f7;
    justify-content: space-between;
    font-size: 14px;
}
.service-link i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--primary);
    background: rgba(45, 60, 245, .08);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.service-card:hover .service-link i {
    transform: translateX(4px);
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
}

@media (max-width: 991.98px) {
    .services { padding: 50px 0 80px; }
    .service-card { padding: 26px 22px 22px; }
}

/* faq */
/* ---------- FAQ: premium two-column layout ---------- */
.faq {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(520px 320px at 8% 12%, rgba(45, 60, 245, .08), transparent 70%),
        radial-gradient(520px 320px at 95% 90%, rgba(139, 92, 246, .10), transparent 70%),
        #f7f8ff;
}

/* ----- left card ----- */
.fq-side {
    position: sticky;
    top: 120px;
    overflow: hidden;
    padding: 40px 34px 36px;
    border-radius: 30px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(360px 200px at 0% 0%, rgba(45, 60, 245, .55), transparent 70%),
        radial-gradient(340px 200px at 100% 100%, rgba(124, 58, 237, .45), transparent 70%),
        linear-gradient(135deg, #0b0c1a 0%, #14163a 60%, #0b0c1a 100%);
    box-shadow: 0 30px 60px rgba(20, 22, 58, .28);
}
.fq-side::before {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2d3cf5, #8b5cf6, #2d3cf5, transparent);
}
.fq-side-icon {
    width: 62px; height: 62px;
    margin-bottom: 24px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 0 0 7px rgba(139, 92, 246, .18), 0 14px 28px rgba(45, 60, 245, .5);
}
.fq-side h3 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.fq-side p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .7); margin-bottom: 26px; }
.fq-side-btn { width: 100%; justify-content: center; }
.fq-side-list { margin: 26px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fq-side-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fq-side-list i {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff;
    background: rgba(255, 255, 255, .1);
}
.fq-side-list a { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .88); word-break: break-all; }
.fq-side-list a:hover { color: #fff; }

/* ----- accordion ----- */
.fq-list { display: flex; flex-direction: column; gap: 16px; }

.fq-item {
    position: relative;
    background: #fff;
    border: 1px solid #eceefb;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(45, 60, 245, .05);
    overflow: hidden;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.fq-item::before {                       /* accent bar on the left */
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #2d3cf5, #8b5cf6);
    opacity: 0;
    transition: opacity .3s ease;
}
.fq-item:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(45, 60, 245, .1); }
.fq-item:has(.collapse.show) {
    border-color: rgba(45, 60, 245, .28);
    box-shadow: 0 22px 48px rgba(45, 60, 245, .16);
}
.fq-item:has(.collapse.show)::before { opacity: 1; }

.fq-q {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 22px 26px;
    appearance: none;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.fq-no {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    color: var(--primary);
    background: rgba(45, 60, 245, .08);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.fq-q:not(.collapsed) .fq-no {
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 10px 20px rgba(45, 60, 245, .35);
}
.fq-text {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--heading);
}
.fq-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: var(--primary);
    background: rgba(45, 60, 245, .08);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.fq-q:not(.collapsed) .fq-icon {
    transform: rotate(45deg);            /* plus turns into a cross */
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
}
.fq-a {
    padding: 0 30px 26px 88px;           /* lines up with the question text */
    font-size: 15.5px;
    line-height: 1.8;
    color: #5b5b66;
}

@media (max-width: 991.98px) {
    .fq-side { position: static; }
}
@media (max-width: 575.98px) {
    .fq-q { padding: 18px 16px; gap: 14px; }
    .fq-no { width: 38px; height: 38px; font-size: 13px; }
    .fq-text { font-size: 15.5px; }
    .fq-a { padding: 0 18px 22px 18px; }
}

/* contact section and form */

/* ---------- Contact: premium split card ---------- */
.contact {
    background:
        radial-gradient(520px 320px at 5% 10%, rgba(45, 60, 245, .07), transparent 70%),
        radial-gradient(520px 320px at 95% 85%, rgba(139, 92, 246, .09), transparent 70%),
        #f7f8ff;
}

.ct-card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    margin-top: 10px;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eceefb;
    box-shadow: 0 40px 80px rgba(45, 60, 245, .14);
}

/* ----- left: dark info panel ----- */
.ct-info {
    position: relative;
    overflow: hidden;
    padding: 50px 42px;
    color: #fff;
    background:
        radial-gradient(380px 240px at 0% 0%, rgba(45, 60, 245, .6), transparent 70%),
        radial-gradient(360px 240px at 100% 100%, rgba(124, 58, 237, .5), transparent 70%),
        linear-gradient(135deg, #0b0c1a 0%, #14163a 60%, #0b0c1a 100%);
}
.ct-info::before {                       /* soft grid texture */
    content: "";
    position: absolute;
    inset: 0;
    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: 48px 48px;
    pointer-events: none;
}
.ct-info > * { position: relative; }
.ct-info h3 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.ct-info > p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .7); margin-bottom: 34px; }

.ct-list li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; }
.ct-list li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.ct-list li > span {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 0 0 5px rgba(139, 92, 246, .16), 0 10px 20px rgba(45, 60, 245, .45);
}
.ct-list div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-list small { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255, 255, 255, .55); }
.ct-list strong, .ct-list a { font-size: 15.5px; font-weight: 500; line-height: 1.55; color: #fff; word-break: break-word; }
.ct-list a:hover { color: #c9ceff; }

.ct-social { display: flex; gap: 12px; margin: 30px 0 0; padding: 0; }
.ct-social a {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .25s ease, background .25s ease;
}
.ct-social a:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    border-color: transparent;
}

/* ----- right: form ----- */
.ct-form { padding: 50px 46px 44px; }
.ct-form h3 { font-size: 26px; font-weight: 700; color: var(--heading); margin-bottom: 26px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ct-group { margin-bottom: 20px; }
.ct-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--heading);
}
.ct-field {
    position: relative;
    display: flex;
    align-items: center;
    background: #f7f8ff;
    border: 1.5px solid #eceefb;
    border-radius: 16px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ct-field > i {
    position: absolute;
    left: 18px;
    font-size: 17px;
    color: #9aa0c8;
    transition: color .25s ease;
    pointer-events: none;
}
.ct-field input,
.ct-field textarea {
    width: 100%;
    padding: 16px 18px 16px 50px;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--heading);
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #a3a8c9; }
.ct-field:focus-within {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(45, 60, 245, .12);
}
.ct-field:focus-within > i { color: var(--primary); }
.ct-area { align-items: flex-start; }
.ct-area > i { top: 18px; }

.ct-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    padding-top: 17px;
    padding-bottom: 17px;
}
.ct-note {
    display: block;
    margin-top: 14px;
    min-height: 22px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: #15803d;
}

/* ----- map strip ----- */
.ct-map {
    margin-top: 30px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #eceefb;
    box-shadow: 0 24px 50px rgba(45, 60, 245, .1);
}
.ct-map iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
}

@media (max-width: 991.98px) {
    .ct-card { grid-template-columns: 1fr; }
    .ct-info { padding: 38px 28px; }
    .ct-form { padding: 38px 26px 34px; }
}
@media (max-width: 575.98px) {
    .ct-row { grid-template-columns: 1fr; gap: 0; }
    .ct-map iframe { height: 280px; }
}

/* circle image */
/* ---------- Ecosystem section (matches reference) ---------- */
.integrations.eco {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background:
        radial-gradient(620px 360px at 8% 8%, rgba(139, 92, 246, .22), transparent 70%),
        radial-gradient(640px 380px at 96% 70%, rgba(45, 60, 245, .14), transparent 70%),
        linear-gradient(180deg, #f6f3ff 0%, #eef0ff 55%, #f8f6ff 100%);
}
.integrations.eco::before {               /* soft decorative arc */
    content: "";
    position: absolute;
    top: -560px; right: -320px;
    width: 980px; height: 980px;
    border-radius: 50%;
    border: 1.5px solid rgba(139, 92, 246, .14);
    pointer-events: none;
}
.integrations.eco::after {
    content: "";
    position: absolute;
    bottom: -520px; left: -300px;
    width: 900px; height: 900px;
    border-radius: 50%;
    border: 1.5px solid rgba(45, 60, 245, .10);
    pointer-events: none;
}

/* badge */
.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(139, 92, 246, .25);
    color: #5b3df0;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(139, 92, 246, .12);
}

/* orbit */
.eco-orbit {
    position: relative;
    width: 460px;
    height: 460px;
    margin: 20px auto 0;
}
.eco-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.eco-ring-1 {
    width: 340px; height: 340px;
    border: 1.5px solid rgba(139, 92, 246, .28);
    background: radial-gradient(circle, rgba(139, 92, 246, .10) 0%, transparent 72%);
}
.eco-ring-2 {
    width: 456px; height: 456px;
    border: 1.5px dashed rgba(139, 92, 246, .2);
}

/* center logo */
.eco-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 156px; height: 156px;
    margin: -78px 0 0 -78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1eeff 100%);
    box-shadow:
        0 0 0 14px rgba(139, 92, 246, .10),
        0 0 0 32px rgba(139, 92, 246, .06),
        0 30px 60px rgba(45, 60, 245, .28);
}
.eco-center img {
    width: 108px;
    height: auto;
}

/* icons on the ring */
.eco-icon {
    position: absolute;
    top: 50%; left: 50%;
    width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(139, 92, 246, .15);
    box-shadow: 0 12px 26px rgba(45, 60, 245, .16);
    transform: rotate(var(--a)) translateY(-170px) rotate(calc(var(--a) * -1));
    transition: box-shadow .3s ease, border-color .3s ease;
}
.eco-icon:hover {
    border-color: rgba(139, 92, 246, .5);
    box-shadow: 0 0 0 6px rgba(139, 92, 246, .14), 0 16px 32px rgba(45, 60, 245, .28);
}

/* glass cards */
.eco-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 56px auto 0;
}
.eco-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 34px 26px 28px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(91, 61, 240, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}
.eco-card::before {                       /* gradient line on top */
    content: "";
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #2d3cf5, #8b5cf6);
}
.eco-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(91, 61, 240, .22);
}
.eco-card-icon {
    width: 54px; height: 54px;
    margin: 0 auto 16px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 12px 24px rgba(91, 61, 240, .38);
}
.eco-card h4 { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.eco-card p { font-size: 14.5px; line-height: 1.65; color: #5b5b66; margin: 0; }

/* responsive */
@media (max-width: 991.98px) {
    .eco-cards { gap: 16px; }
    .eco-card { padding: 28px 18px 24px; }
}
@media (max-width: 767.98px) {
    .eco-cards { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 575.98px) {
    .eco-orbit { transform: scale(.72); margin: -64px auto -64px; }
}

/* banner section circle image */
/* ---------- Hero: orbit on the right ---------- */
.hero .row.align-items-center {
    align-items: center !important;      /* cancels the earlier top-align rule */
}
.hero-orbit {
    display: flex;
    justify-content: center;
}
.hero-orbit .eco-orbit {
    margin: 0 auto;
}

/* slightly smaller on narrow laptops so it never overflows */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-orbit .eco-orbit {
        transform: scale(.9);
        margin: -23px auto;
    }
}
/* on phones the orbit sits below the text */
@media (max-width: 991.98px) {
    .hero-orbit { margin-top: 10px; }
}

/* ---------- Hero: matches the reference design ---------- */
.hero { position: relative; overflow: hidden; }

/* waves */
.hr-wave { position: absolute; pointer-events: none; z-index: 0; }
.hr-wave-right { top: 0; right: 0; width: 52%; height: 100%; }
.hr-wave-bottom { left: 0; bottom: 0; width: 100%; height: 130px; }

/* badge */
.hr-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    margin-bottom: 22px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #e6e8fb;
    color: var(--heading);
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 10px 26px rgba(45, 60, 245, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hr-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(45, 60, 245, .16); }
.hr-badge i { color: var(--primary); font-size: 16px; }

/* curved underline under the last word */
.hr-underline { position: relative; display: inline-block; }
.hr-underline svg {
    position: absolute;
    left: 18%;
    right: -6%;
    bottom: -14px;
    width: 88%;
    height: 16px;
}

/* paragraph */
.hr-text {
    max-width: 520px;
    margin: 22px 0 28px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #4b4b57;
}

/* buttons */
.hr-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.hr-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .7);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hr-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* 3 feature items */
.hr-features {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 0;
    margin-top: 40px;
}
.hr-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
}
.hr-feature:first-child { padding-left: 0; }
.hr-feature + .hr-feature { border-left: 1px solid #d9dcf3; }
.hr-feature > i { font-size: 26px; color: var(--primary); }
.hr-feature div { display: flex; flex-direction: column; line-height: 1.35; }
.hr-feature strong { font-size: 14.5px; font-weight: 600; color: var(--heading); }
.hr-feature small { font-size: 12.5px; color: #7a7a88; }

/* glowing blue ring around the center logo */
.hero-orbit .eco-center {
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, .85),
        0 0 0 14px rgba(45, 60, 245, .55),
        0 0 46px 20px rgba(45, 60, 245, .28),
        0 30px 60px rgba(45, 60, 245, .25);
}

/* layout */
.hero .row.align-items-center { align-items: center !important; }
.hero-orbit { display: flex; justify-content: center; }
.hero-orbit .eco-orbit { margin: 0 auto; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-orbit .eco-orbit { transform: scale(.9); margin: -23px auto; }
    .hr-feature { padding: 0 14px; }
}
@media (max-width: 991.98px) {
    .hero-orbit { margin-top: 10px; }
    .hr-wave-right { width: 100%; opacity: .6; }
}
@media (max-width: 575.98px) {
    .hr-feature { padding: 0 !important; border-left: 0 !important; width: 100%; }
    .hero-orbit .eco-orbit { transform: scale(.72); margin: -64px auto; }
}

/* rotating the image */
/* ================= HERO ORBIT: rotating + premium ================= */

/* section: soft animated glows */
.hero-glow-1 { animation: heroGlow 12s ease-in-out infinite alternate; }
.hero-glow-2 { animation: heroGlow 14s ease-in-out -6s infinite alternate; }
@keyframes heroGlow {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 24px) scale(1.12); }
}

.hero-orbit { position: relative; display: flex; justify-content: center; }
.hero-orbit::before {                       /* soft light behind the orbit */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 560px; height: 560px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 108, 246, .22) 0%, rgba(124, 108, 246, 0) 68%);
    pointer-events: none;
}

/* rings */
.hero-orbit .eco-ring-1 {
    border: 1.5px solid rgba(139, 124, 246, .30);
    background: radial-gradient(circle, rgba(139, 124, 246, .10) 0%, transparent 72%);
}
.hero-orbit .eco-ring-2 {
    border: 1.5px dashed rgba(139, 124, 246, .38);
    animation: ecoRing 70s linear infinite reverse;
}
@keyframes ecoRing {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* the ring of icons turns continuously ... */
.eco-spin {
    position: absolute;
    inset: 0;
    z-index: 2;
    animation: ecoSpin 48s linear infinite;
}
@keyframes ecoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ... while every icon turns the opposite way, so it always stays upright */
.hero-orbit .eco-icon i {
    display: block;
    animation: ecoSpinBack 48s linear infinite;
}
@keyframes ecoSpinBack { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* pause the motion when the mouse is over the orbit */
.hero-orbit:hover .eco-spin,
.hero-orbit:hover .eco-icon i,
.hero-orbit:hover .eco-ring-2,
.hero-orbit:hover .eco-center::before,
.hero-orbit:hover .eco-center::after { animation-play-state: paused; }

/* glass icon bubbles */
.hero-orbit .eco-icon {
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    font-size: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f6f1ff 100%);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 14px 30px rgba(70, 60, 200, .22), inset 0 0 0 1px rgba(139, 124, 246, .12);
    transition: box-shadow .3s ease;
}
.hero-orbit .eco-icon:hover {
    box-shadow: 0 0 0 7px rgba(139, 124, 246, .18), 0 18px 36px rgba(70, 60, 200, .34);
}

/* centre: glowing gradient ring + soft pulse waves */
.hero-orbit .eco-center {
    isolation: isolate;
    z-index: 3;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #f1eeff 100%);
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, .8),
        0 0 46px 14px rgba(76, 80, 245, .30),
        0 30px 60px rgba(45, 60, 245, .26);
}
.hero-orbit .eco-center::before {            /* turning gradient ring */
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(from 0deg, #2d3cf5, #8b5cf6, #5ab0ff, #2d3cf5);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: ecoRingSpin 9s linear infinite;
}
@keyframes ecoRingSpin { to { transform: rotate(360deg); } }
.hero-orbit .eco-center::after {             /* expanding pulse wave */
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    z-index: -2;
    border: 2px solid rgba(124, 108, 246, .45);
    animation: ecoPulse 3.2s ease-out infinite;
}
@keyframes ecoPulse {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.65); opacity: 0; }
}
.hero-orbit .eco-center img { mix-blend-mode: multiply; }

/* floating glass chips */
.eco-chip {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 12px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--heading);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px rgba(70, 60, 200, .18);
    white-space: nowrap;
}
.eco-chip i {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
}
.eco-chip-1 { top: 6px;    left: -34px;  animation: floaty 6s ease-in-out infinite; }
.eco-chip-2 { bottom: 8px; right: -34px; animation: floaty 6s ease-in-out -3s infinite; }

@media (prefers-reduced-motion: reduce) {
    .eco-spin, .hero-orbit .eco-icon i, .hero-orbit .eco-ring-2,
    .hero-orbit .eco-center::before, .hero-orbit .eco-center::after,
    .hero-glow-1, .hero-glow-2, .eco-chip { animation: none !important; }
}
@media (max-width: 575.98px) {
    .eco-chip { display: none; }
}

/* contact form */

/* ---------- Contact form: validation (keeps the original split-card design) ---------- */
.ct-form { min-width: 0; }
.ct-row > .ct-group { min-width: 0; }

.ct-group label b { color: #dc2626; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-prefix {
    position: absolute;
    left: 48px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--heading);
    pointer-events: none;
}
.ct-field input.has-prefix { padding-left: 88px; }

.ct-error { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #dc2626; }
.ct-error:empty { display: none; }

.ct-field.is-invalid { border-color: #dc2626; background: #fff7f7; }
.ct-field.is-invalid > i { color: #dc2626; }
.ct-field.is-invalid:focus-within { box-shadow: 0 0 0 5px rgba(220, 38, 38, .12); }
.ct-field.is-valid { border-color: #16a34a; }
.ct-field.is-valid > i { color: #16a34a; }

.ct-note.is-error { color: #dc2626; }
.ct-submit:disabled { opacity: .7; cursor: not-allowed; }

/* about image */

/* ================= ABOUT: premium dark card + animated kid ================= */
.ab-showcase {
    background:
        radial-gradient(420px 280px at 88% 6%, rgba(139, 92, 246, .45), transparent 70%),
        radial-gradient(400px 280px at 6% 96%, rgba(45, 60, 245, .5), transparent 70%),
        linear-gradient(145deg, #0b0c1a 0%, #14163a 55%, #0b0c1a 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 60px rgba(20, 22, 58, .35);
}
.ab-showcase::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
}
.ab-showcase::after {                       /* glowing top line */
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2d3cf5, #8b5cf6, #2d3cf5, transparent);
}
.ab-showcase-tag {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ab-showcase-foot {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ab-showcase-foot > i { color: #a9b4ff; }
.ab-showcase-foot strong { color: #fff; }
.ab-showcase-foot small { color: rgba(255, 255, 255, .65); }

/* twinkling stars */
.ab-star {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(167, 139, 250, .8);
    animation: abTwinkle 3.2s ease-in-out infinite;
}
@keyframes abTwinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }

/* ---------- Stage ---------- */
.kid-stage {
    --loop: 12s;                 /* <-- change this ONE value to make everything faster / slower */
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 100 / 85;
    container-type: inline-size;
}
.kid-ground {
    position: absolute;
    left: 2%; right: 2%; bottom: 6%;
    height: 11%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(124, 108, 255, .55), rgba(124, 108, 255, 0) 70%);
    filter: blur(6px);
}
.kid-world {
    position: absolute;
    inset: 0;
    animation: kidWorldFloat 6s ease-in-out infinite;
}
@keyframes kidWorldFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2%); } }

.kid-arrow {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, .55));
}
.arrow-flow { animation: kidDash 2.5s linear infinite; }
@keyframes kidDash { to { stroke-dashoffset: -10; } }

/* ---------- Bars ---------- */
.kb {
    position: absolute;
    bottom: 14%;
    width: 15%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .25em;
    padding-top: 10px;
    padding-top: 2.8cqw;
    color: #fff;
    font-weight: 600;
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    box-shadow: 0 16px 30px -10px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform-origin: 50% 100%;
    animation: barPress var(--loop) infinite;
}
.kb::before {                                /* 3D top cap */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -5px; height: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff -60%, var(--c1) 140%);
}
.kb::after {                                 /* glossy shine */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 32%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, .24), transparent);
    pointer-events: none;
}
.kb i { font-size: 18px; font-size: 3.3cqw; line-height: 1; }
.kb span { font-size: 10px; font-size: 2cqw; letter-spacing: .2px; }

.kb1 { left: 7.5%;  height: 16%; animation-delay: calc(var(--loop) * .96); }
.kb2 { left: 24.5%; height: 24%; animation-delay: calc(var(--loop) * .18); }
.kb3 { left: 41.5%; height: 32%; animation-delay: calc(var(--loop) * .36); }
.kb4 { left: 58.5%; height: 40%; animation-delay: calc(var(--loop) * .54); }
.kb5 { left: 75.5%; height: 48%; animation-delay: calc(var(--loop) * .72); }

/* a bar presses down for a moment when the kid lands on it */
@keyframes barPress {
    0%    { transform: scaleY(1);    filter: brightness(1); }
    1.5%  { transform: scaleY(.94);  filter: brightness(1.3); }
    3.5%  { transform: scaleY(1.02); filter: brightness(1.15); }
    5.5%, 100% { transform: scaleY(1); filter: brightness(1); }
}

/* ---------- Kid ---------- */
.kid {
    position: absolute;
    z-index: 3;
    width: 10%;
    left: 10%;
    bottom: 30.6%;
    animation: kidTravel var(--loop) linear infinite;
}
.kid-body {
    transform-origin: 50% 100%;
    animation: kidJump var(--loop) infinite;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}
.kid-body svg { display: block; width: 100%; height: auto; }

.kid-arm-l { transform-origin: 14px 42px; animation: kidArmL var(--loop) ease-in-out infinite; }
.kid-arm-r { transform-origin: 46px 42px; animation: kidArmR var(--loop) ease-in-out infinite; }

/* where the kid is: bar 1 -> 2 -> 3 -> 4 -> 5, small dip each time a bar presses, then restart */
@keyframes kidTravel {
    0%, 6%     { left: 10%; bottom: 30.6%; opacity: 1; }
    18%        { left: 27%; bottom: 38.6%; }
    19.5%      { left: 27%; bottom: 37.16%; }
    21.5%      { left: 27%; bottom: 39.08%; }
    23.5%, 24% { left: 27%; bottom: 38.6%; }
    36%        { left: 44%; bottom: 46.6%; }
    37.5%      { left: 44%; bottom: 44.68%; }
    39.5%      { left: 44%; bottom: 47.24%; }
    41.5%, 42% { left: 44%; bottom: 46.6%; }
    54%        { left: 61%; bottom: 54.6%; }
    55.5%      { left: 61%; bottom: 52.2%; }
    57.5%      { left: 61%; bottom: 55.4%; }
    59.5%, 60% { left: 61%; bottom: 54.6%; }
    72%        { left: 78%; bottom: 62.6%; }
    73.5%      { left: 78%; bottom: 59.72%; }
    75.5%      { left: 78%; bottom: 63.56%; }
    77.5%, 88% { left: 78%; bottom: 62.6%; opacity: 1; }
    90%        { left: 78%; bottom: 62.6%; opacity: 0; }
    90.1%, 94% { left: 10%; bottom: 30.6%; opacity: 0; }
    96%        { left: 10%; bottom: 30.6%; opacity: 1; }
    97.5%      { left: 10%; bottom: 29.64%; }
    99%        { left: 10%; bottom: 30.92%; }
    100%       { left: 10%; bottom: 30.6%; opacity: 1; }
}

/* the jump: crouch -> stretch -> up in the air -> squash on landing */
@keyframes kidJump {
    0%, 3.5%   { transform: translateY(0) scale(1, 1); }
    4.5%       { transform: translateY(0) scale(1.1, .86); }
    6%         { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    12%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    18%        { transform: translateY(0) scale(1.14, .84); }
    20%, 21%   { transform: translateY(0) scale(1, 1); }
    22.5%      { transform: translateY(0) scale(1.1, .86); }
    24%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    30%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    36%        { transform: translateY(0) scale(1.14, .84); }
    38%, 39%   { transform: translateY(0) scale(1, 1); }
    40.5%      { transform: translateY(0) scale(1.1, .86); }
    42%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    48%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    54%        { transform: translateY(0) scale(1.14, .84); }
    56%, 57%   { transform: translateY(0) scale(1, 1); }
    58.5%      { transform: translateY(0) scale(1.1, .86); }
    60%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    66%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    72%        { transform: translateY(0) scale(1.14, .84); }
    74%        { transform: translateY(0) scale(1, 1); }
    77.5%      { transform: translateY(0) scale(1, 1);     animation-timing-function: ease-out; }
    79.5%      { transform: translateY(-45%) scale(1, 1);  animation-timing-function: ease-in; }
    81.5%      { transform: translateY(0) scale(1.08, .9); animation-timing-function: ease-out; }
    83.5%      { transform: translateY(-45%) scale(1, 1);  animation-timing-function: ease-in; }
    85.5%      { transform: translateY(0) scale(1.08, .9); }
    87%, 100%  { transform: translateY(0) scale(1, 1); }
}

/* arms swing up on every jump and cheer at the end */
@keyframes kidArmL {
    0%, 6%, 18%, 24%, 36%, 42%, 54%, 60%, 72%, 77.5%, 88%, 100% { transform: rotate(0deg); }
    12%, 30%, 48%, 66% { transform: rotate(150deg); }
    79.5%, 85.5%       { transform: rotate(165deg); }
}
@keyframes kidArmR {
    0%, 6%, 18%, 24%, 36%, 42%, 54%, 60%, 72%, 77.5%, 88%, 100% { transform: rotate(0deg); }
    12%, 30%, 48%, 66% { transform: rotate(-150deg); }
    79.5%, 85.5%       { transform: rotate(-165deg); }
}

/* ---------- Sparkles when he reaches the top ---------- */
.kid-spark {
    position: absolute;
    z-index: 4;
    color: #ffd166;
    font-size: 22px;
    font-size: 3.9cqw;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 209, 102, .8));
    animation: kidSpark var(--loop) ease-in-out infinite;
}
@keyframes kidSpark {
    0%, 76%  { opacity: 0; transform: scale(0) rotate(0deg); }
    79%      { opacity: 1; transform: scale(1.25) rotate(20deg); }
    83%      { opacity: 1; transform: scale(.9) rotate(-10deg); }
    87%      { opacity: 1; transform: scale(1.15) rotate(15deg); }
    90%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kid-world, .kid, .kid-body, .kid-arm, .kb, .kid-spark, .ab-star, .arrow-flow { animation: none !important; }
    .kid { left: 78%; bottom: 62.6%; }
}

/* our vision and mission */
/* ---------- About: Mission / Vision cards, aligned ---------- */
.ab-mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;              /* both cards always the same height */
    align-items: stretch;
    gap: 20px;
    margin: 28px 0 0;
}
.ab-mv-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    margin: 0;
    padding: 26px 24px;
    text-align: left;
    background: #fff;
    border: 1px solid #eceefb;
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(45, 60, 245, .06);
    transform: none !important;       /* never moves, so the two cards stay level */
    transition: box-shadow .3s ease, border-color .3s ease;
}
.ab-mv-item:hover {
    border-color: rgba(45, 60, 245, .28);
    box-shadow: 0 22px 46px rgba(45, 60, 245, .16);
}
.ab-mv-item > span {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    margin: 0 0 18px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary);
    background: rgba(45, 60, 245, .1);
}
.ab-mv-item h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading);
}
.ab-mv-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #5b5b66;
}

@media (max-width: 575.98px) {
    .ab-mv { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* for the moving of the headings */
/* ================= HEADINGS: word by word reveal (slow + smooth) ================= */
html { overflow-x: clip; }

.hd-split .hw {
    display: inline-block;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    will-change: opacity, transform, filter;
    transition:
        opacity   1.1s cubic-bezier(.22, 1, .36, 1),
        transform 1.3s cubic-bezier(.22, 1, .36, 1),
        filter    1.1s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i) * .22s);      /* gap between words */
}
.hd-split.hd-in .hw {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* highlighted words (like "Grow Faster") keep their original gradient */
.hd-split .title-accent {
    background: none;
    -webkit-text-fill-color: initial;
}
.hd-split .title-accent .hw {
    background: linear-gradient(100deg, var(--primary) 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

@media (prefers-reduced-motion: reduce) {
    .hd-split .hw {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* footer css */
/* ================= PREMIUM FOOTER ================= */
.site-footer.ft {
    position: relative;
    overflow: hidden;
    padding: 80px 0 0;
    text-align: left;
    color: rgba(255, 255, 255, .72);
    background:
        radial-gradient(700px 380px at 6% 0%, rgba(45, 60, 245, .30), transparent 70%),
        radial-gradient(600px 360px at 100% 25%, rgba(124, 58, 237, .20), transparent 70%),
        linear-gradient(160deg, #060818 0%, #0b0e2b 55%, #070918 100%);
}
.site-footer.ft::before { display: none; }
.ft-container { position: relative; z-index: 2; }

/* waves */
.ft-wave { position: absolute; pointer-events: none; z-index: 1; }
.ft-wave-top { top: 0; right: 0; width: 55%; height: 260px; }
.ft-wave-bottom { left: 0; bottom: 0; width: 100%; height: 230px; animation: ftWave 16s ease-in-out infinite alternate; }
@keyframes ftWave { from { transform: translateX(-2%); } to { transform: translateX(2%); } }

/* layout */
.ft-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .9fr 1.2fr;
    gap: 40px;
    align-items: start;
}

/* brand */
.ft-logo-link { display: inline-block; margin-bottom: 26px; }
.ft-logo {
    display: block;
    width: 180px;
    height: auto;
    padding: 10px 16px;
    background: #fff;
    border-radius: 14px;
}
.ft-tagline {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 18px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.3px;
    color: #fff;
}
.ft-tagline span {
    display: block;
    background: linear-gradient(90deg, #4f8bff, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ft-tagline::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2d3cf5, #38bdf8);
}
.ft-about { max-width: 360px; margin: 0 0 26px; font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, .72); }

.ft-social { display: flex; gap: 12px; margin: 0; padding: 0; }
.ft-social a {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.ft-social a:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    border-color: transparent;
}

/* column titles */
.ft-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.ft-title > span {
    width: 36px; height: 36px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 8px 18px rgba(45, 60, 245, .4);
}
.ft-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 44px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2d3cf5, #38bdf8);
}

/* link lists */
.ft-links { margin: 0; padding: 0; }
.ft-links li + li { margin-top: 4px; }
.ft-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
    transition: color .25s ease, transform .25s ease;
}
.ft-links a i { font-size: 11px; color: #8ea2ff; transition: transform .25s ease; }
.ft-links a:hover { color: #fff; transform: translateX(4px); }
.ft-links a:hover i { transform: translateX(3px); color: #fff; }

/* contact card */
.ft-contact {
    padding: 28px 26px 22px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(110, 120, 255, .35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3), inset 0 0 40px rgba(79, 70, 229, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ft-contact .ft-title { margin-bottom: 22px; }
.ft-contact-list { margin: 0; padding: 0; }
.ft-contact-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.ft-contact-list li > span {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
}
.ft-contact-list a {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    word-break: break-word;
    transition: color .25s ease;
}
.ft-contact-list a:hover { color: #fff; }

/* bottom bar */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 60px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13.5px;
    color: rgba(255, 255, 255, .7);
}
.ft-bottom p { margin: 0; }
.ft-legal { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.ft-legal li + li { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .22); }
.ft-legal a { color: rgba(255, 255, 255, .7); transition: color .25s ease; }
.ft-legal a:hover { color: #fff; }

/* responsive */
@media (max-width: 1199.98px) {
    .ft-grid { grid-template-columns: 1.3fr .8fr .9fr; }
    .ft-contact { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    .site-footer.ft { padding-top: 60px; }
    .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .ft-brand { grid-column: 1 / -1; }
    .ft-contact { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .ft-grid { grid-template-columns: 1fr; }
    .ft-bottom { flex-direction: column; text-align: center; }
    .ft-legal { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-wave-bottom { animation: none; }
}
/* ================= FOOTER: move content up ================= */
.site-footer.ft {
    padding-top: 30px;                 /* was 80px: main control for moving everything up */
}
.site-footer.ft > .container,
.ft-container {
    padding-top: 0;
    margin-top: 0;
}
.ft-grid {
    gap: 32px 40px;
    align-items: start;
}

/* brand column */
.ft-logo-link { margin-bottom: 16px; }
.ft-tagline { margin-bottom: 14px; padding-bottom: 14px; }
.ft-about { margin-bottom: 18px; }

/* link columns */
.ft-title { margin-bottom: 16px; padding-bottom: 12px; }
.ft-links a { padding: 7px 0; }

/* contact card */
.ft-contact { padding: 22px 24px 16px; }
.ft-contact .ft-title { margin-bottom: 14px; }
.ft-contact-list li { padding: 8px 0; }

/* bottom bar sits closer too */
.ft-bottom { margin-top: 36px; padding: 18px 0; }

/* ================= FOOTER: top and bottom padding ================= */
.site-footer.ft {
    padding-top: 50px;        /* space above the content (was 30px) */
    padding-bottom: 20px;     /* space below the bottom bar */
}

.ft-bottom {
    margin-top: 40px;         /* gap between the columns and the copyright line */
    padding: 22px 0 6px;      /* space around the copyright line */
}

/* ================= PREMIUM HERO ================= */
.hero.hero-premium {
    padding: 90px 0 110px;
    background:
        radial-gradient(720px 440px at 6% 0%, rgba(45, 60, 245, .48), transparent 70%),
        radial-gradient(660px 440px at 100% 45%, rgba(124, 58, 237, .38), transparent 70%),
        linear-gradient(160deg, #060818 0%, #0b0e2b 55%, #070918 100%);
}
.hero-premium::before {                       /* faint grid */
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
.hero-premium::after {                        /* glowing line at the bottom */
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2d3cf5, #8b5cf6, #2d3cf5, transparent);
}
.hero-premium .hero-glow-1 { opacity: .35; }
.hero-premium .hero-glow-2 { opacity: .3; background: #ec4899; }

/* badge */
.hero-premium .hero-badge {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero-premium .hero-badge:hover { color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.hero-premium .hero-badge > i { color: #a9b4ff; }
.hero-premium .badge-new { background: linear-gradient(135deg, #2d3cf5, #7c3aed); }

/* heading */
.hero-premium .hero-title {
    color: #fff;
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.18 !important;
    letter-spacing: -1px;
}
.hero-premium .hero-title .title-accent,
.hero-premium .hero-title .title-accent .hw {
    background: linear-gradient(100deg, #6f8bff 0%, #c084fc 50%, #f472b6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hpShine 6s ease-in-out infinite alternate;
}
@keyframes hpShine { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.hero-premium .hero-text {
    color: rgba(255, 255, 255, .72);
    font-size: 17.5px;
}

/* buttons */
.hero-premium .hero-buttons .btn-cta {
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(79, 70, 229, .5);
}
.hero-premium .hero-buttons .btn-cta:hover {
    background: linear-gradient(135deg, #3b49ff, #8b4bff);
    box-shadow: 0 20px 44px rgba(79, 70, 229, .65);
}
.hero-premium .btn-play { color: #fff; }
.hero-premium .btn-play:hover { color: #fff; }
.hero-premium .play-icon {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: none;
}
.hero-premium .btn-play:hover .play-icon { background: linear-gradient(135deg, #2d3cf5, #7c3aed); border-color: transparent; }

/* glass feature cards */
.hp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
}
.hp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hp-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 124, 246, .55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.hp-card > span {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 8px 18px rgba(45, 60, 245, .45);
}
.hp-card div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hp-card strong { font-size: 14px; font-weight: 600; color: #fff; }
.hp-card small { font-size: 12px; color: rgba(255, 255, 255, .62); }

/* orbit on the dark background */
.hero-premium .hero-orbit::before {
    background: radial-gradient(circle, rgba(124, 108, 246, .42) 0%, rgba(124, 108, 246, 0) 68%);
}
.hero-premium .hero-orbit .eco-ring-1 {
    border-color: rgba(167, 139, 250, .4);
    background: radial-gradient(circle, rgba(139, 124, 246, .16) 0%, transparent 72%);
}
.hero-premium .hero-orbit .eco-ring-2 { border-color: rgba(167, 139, 250, .45); }
.hero-premium .eco-chip {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

/* responsive */
@media (max-width: 1199.98px) {
    .hp-cards { grid-template-columns: 1fr; max-width: 360px; }
}
@media (max-width: 991.98px) {
    .hero.hero-premium { padding: 60px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-premium .hero-title .title-accent,
    .hero-premium .hero-title .title-accent .hw { animation: none; }
}
/* ================= HERO HEADING: smaller size ================= */
.hero.hero-premium .hero-title {
    font-size: clamp(26px, 3.1vw, 40px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.5px;
}



/* ================= HERO: smaller button + badge moved up ================= */

/* smaller "Explore Our Services" button */
.hero.hero-premium .hero-buttons .btn-cta {
    padding:11px 24px;
    font-size: 15.5px;
}
.hero.hero-premium .hero-buttons .btn-cta i {
    font-size: 14px;
    margin-left: 6px;
}

/* less space below the navbar, and the text block moves up */
.hero.hero-premium {
    padding-top: 50px;              /* was 90px */
}
@media (min-width: 992px) {
    .hero-premium .row > .col-lg-6:first-child {
        transform: translateY(-30px);   /* moves the badge + heading + text + buttons up */
    }
}

/* ================= HERO: stack buttons + cut bottom space ================= */

/* "Talk to Our Team" goes below "Explore Our Services" */
.hero.hero-premium .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 18px;
    margin-bottom: 0;
}

/* remove the extra empty space at the bottom of the hero */
.hero.hero-premium {
    padding-bottom: 40px;          /* was 110px */
}

/* the text column no longer needs to be pushed up */
@media (min-width: 992px) {
    .hero-premium .row > .col-lg-6:first-child {
        transform: none;
    }
}

/* tablet and mobile */
@media (max-width: 991.98px) {
    .hero.hero-premium {
        padding-bottom: 30px;
    }
}

/* ================= KID: turns into Batman and flies away ================= */

.kid-body { position: relative; }
.kid-body svg { overflow: visible; }

/* where the kid is: 5 steps, then lift-off to the top, then restart */
@keyframes kidTravel {
    0%, 6%     { left: 10%; bottom: 30.6%; opacity: 1; }
    18%        { left: 27%; bottom: 38.6%; }
    19.5%      { left: 27%; bottom: 37.16%; }
    21.5%      { left: 27%; bottom: 39.08%; }
    23.5%, 24% { left: 27%; bottom: 38.6%; }
    36%        { left: 44%; bottom: 46.6%; }
    37.5%      { left: 44%; bottom: 44.68%; }
    39.5%      { left: 44%; bottom: 47.24%; }
    41.5%, 42% { left: 44%; bottom: 46.6%; }
    54%        { left: 61%; bottom: 54.6%; }
    55.5%      { left: 61%; bottom: 52.2%; }
    57.5%      { left: 61%; bottom: 55.4%; }
    59.5%, 60% { left: 61%; bottom: 54.6%; }
    72%        { left: 78%; bottom: 62.6%; }
    73.5%      { left: 78%; bottom: 59.72%; }
    75.5%      { left: 78%; bottom: 63.56%; }
    /* waits, transforms, then flies up (starts slow, speeds up) */
    77.5%, 81% { left: 78%; bottom: 62.6%; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .9, .55); }
    91.5%      { left: 91%; bottom: 140%; opacity: 1; }
    91.6%      { left: 91%; bottom: 140%; opacity: 0; }
    91.7%, 94% { left: 10%; bottom: 30.6%; opacity: 0; }
    96%        { left: 10%; bottom: 30.6%; opacity: 1; }
    97.5%      { left: 10%; bottom: 29.64%; }
    99%        { left: 10%; bottom: 30.92%; }
    100%       { left: 10%; bottom: 30.6%; opacity: 1; }
}

/* jumps, then crouch -> spring -> flight */
@keyframes kidJump {
    0%, 3.5%   { transform: translateY(0) scale(1, 1); }
    4.5%       { transform: translateY(0) scale(1.1, .86); }
    6%         { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    12%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    18%        { transform: translateY(0) scale(1.14, .84); }
    20%, 21%   { transform: translateY(0) scale(1, 1); }
    22.5%      { transform: translateY(0) scale(1.1, .86); }
    24%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    30%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    36%        { transform: translateY(0) scale(1.14, .84); }
    38%, 39%   { transform: translateY(0) scale(1, 1); }
    40.5%      { transform: translateY(0) scale(1.1, .86); }
    42%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    48%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    54%        { transform: translateY(0) scale(1.14, .84); }
    56%, 57%   { transform: translateY(0) scale(1, 1); }
    58.5%      { transform: translateY(0) scale(1.1, .86); }
    60%        { transform: translateY(0) scale(.94, 1.1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    66%        { transform: translateY(-95%) scale(1, 1);  animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    72%        { transform: translateY(0) scale(1.14, .84); }
    74%        { transform: translateY(0) scale(1, 1); }
    77.5%      { transform: translateY(0) scale(1, 1);     animation-timing-function: ease-in; }
    79.5%      { transform: translateY(0) scale(1.12, .84); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }  /* crouch */
    81%        { transform: translateY(-6%) scale(.92, 1.16); animation-timing-function: ease-out; }                      /* spring */
    83%, 100%  { transform: translateY(0) scale(1, 1); }
}

/* leans forward while flying (separate property, so it never clashes with the jump) */
.kid-body { animation: kidJump var(--loop) infinite, kidLean var(--loop) ease-in-out infinite; }
@keyframes kidLean {
    0%, 80%     { rotate: 0deg; }
    84%, 91.5%  { rotate: 12deg; }
    91.6%, 100% { rotate: 0deg; }
}

/* arms: swing on every jump, then both go straight up for the flight */
@keyframes kidArmL {
    0%, 6%, 18%, 24%, 36%, 42%, 54%, 60%, 72%, 79.5%, 91.6%, 100% { transform: rotate(0deg); }
    12%, 30%, 48%, 66% { transform: rotate(150deg); }
    82%, 91.5%         { transform: rotate(168deg); }
}
@keyframes kidArmR {
    0%, 6%, 18%, 24%, 36%, 42%, 54%, 60%, 72%, 79.5%, 91.6%, 100% { transform: rotate(0deg); }
    12%, 30%, 48%, 66% { transform: rotate(-150deg); }
    82%, 91.5%         { transform: rotate(-168deg); }
}

/* ---------- Batman parts: only visible from the transformation until he leaves ---------- */
.kid-cape,
.kid-mask {
    opacity: 0;
    animation: kidHeroShow var(--loop) ease-in-out infinite;
}
@keyframes kidHeroShow {
    0%, 76%     { opacity: 0; }
    79%, 91.5%  { opacity: 1; }
    91.6%, 100% { opacity: 0; }
}

/* cape gets longer in flight and keeps fluttering */
.kid-cape {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: kidHeroShow var(--loop) ease-in-out infinite,
               kidCapeLong var(--loop) ease-in-out infinite;
}
@keyframes kidCapeLong {
    0%, 81%     { transform: scaleY(1); }
    86%, 91.5%  { transform: scaleY(1.4); }
    91.6%, 100% { transform: scaleY(1); }
}
.kid-cape-flap {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: kidCapeFlap .35s ease-in-out infinite alternate;
}
@keyframes kidCapeFlap {
    from { transform: scale(1, 1.05) skewX(-4deg); }
    to   { transform: scale(1.06, 1.25) skewX(4deg); }
}

/* glowing speed streak behind him */
.kid-trail {
    position: absolute;
    left: 24%;
    width: 52%;
    top: 72%;
    height: 230%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(56, 189, 248, .7), rgba(124, 108, 255, .35) 40%, transparent);
    filter: blur(5px);
    transform-origin: 50% 0;
    animation: kidTrail var(--loop) ease-in-out infinite;
}
@keyframes kidTrail {
    0%, 82%     { opacity: 0;  transform: scaleY(.2); }
    86%         { opacity: .9; transform: scaleY(1); }
    91.5%       { opacity: .9; transform: scaleY(1.4); }
    91.6%, 100% { opacity: 0;  transform: scaleY(.2); }
}

/* sparkle flash while he transforms */
@keyframes kidSpark {
    0%, 75%   { opacity: 0; transform: scale(0) rotate(0deg); }
    78%       { opacity: 1; transform: scale(1.25) rotate(20deg); }
    81%       { opacity: 1; transform: scale(.9) rotate(-10deg); }
    84%       { opacity: 1; transform: scale(1.1) rotate(15deg); }
    87%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kid-cape, .kid-cape-flap, .kid-mask, .kid-trail { animation: none !important; opacity: 0; }
}


/* ================= FLOATING PILL NAVBAR ================= */
:root {
    --pill-h: 72px;                 /* height of the white navbar card */
    --pill-gap: 14px;               /* space above and below the card */
    --nav-total: calc(var(--pill-h) + var(--pill-gap) * 2);
}

/* the header itself takes no space, so the dark hero slides underneath it */
.site-header {
    height: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.site-header .navbar,
.site-header.is-stuck .navbar {
    min-height: 0;
    padding: var(--pill-gap) 0;
}

/* the white rounded card */
.site-header .navbar > .container {
    width: calc(100% - 24px);
    max-width: 1320px;
    min-height: var(--pill-h);
    padding: 8px 12px 8px 28px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    box-shadow: 0 18px 44px rgba(8, 10, 40, .35);
    transition: box-shadow .3s ease;
}
.site-header.is-stuck .navbar > .container {
    box-shadow: 0 14px 36px rgba(8, 10, 40, .28);
}

/* logo */
.site-header .navbar-brand { margin-right: 24px; }
.site-header .brand-logo { height: 52px; }
.site-header.is-stuck .brand-logo { height: 46px; }

/* menu links, with the active one as a soft blue pill */
.site-header .navbar-nav { gap: 6px; }
.site-header .navbar-nav .nav-link {
    padding: 10px 22px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #14163a;
    transition: background .2s, color .2s;
}
.site-header .navbar-nav .nav-link:hover {
    background: #f1f2ff;
    color: var(--primary);
}
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link.show {
    background: #e9ecff;
    color: var(--primary);
}

/* "Get Started" button: blue to purple gradient */
.site-header .header-actions .btn-cta {
    padding: 13px 28px;
    font-size: 15.5px;
    border-color: transparent;
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 12px 26px rgba(79, 70, 229, .4);
}
.site-header .header-actions .btn-cta i { font-size: 14px; margin-left: 6px; }
.site-header .header-actions .btn-cta:hover {
    background: linear-gradient(135deg, #3b49ff, #8b4bff);
    box-shadow: 0 16px 32px rgba(79, 70, 229, .55);
    transform: translateY(-2px);
}

/* hero starts under the floating navbar */
.hero.hero-premium {
    padding-top: calc(var(--nav-total) + 30px);
}
section[id] { scroll-margin-top: 110px; }

/* ---------- laptop ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .navbar > .container { padding-left: 18px; }
    .site-header .brand-logo { height: 40px; }
    .site-header .navbar-nav .nav-link { padding: 8px 12px; font-size: 14.5px; }
    .site-header .header-actions .btn-cta { padding: 11px 18px; font-size: 14px; }
}

/* ---------- tablet + mobile ---------- */
@media (max-width: 991.98px) {
    :root { --pill-h: 64px; --pill-gap: 10px; }
    .site-header .navbar > .container {
        padding: 8px 14px 8px 18px;
        border-radius: 24px;
    }
    .site-header .brand-logo { height: 42px; }
    .site-header .navbar-collapse {
        margin-top: 8px;
        padding: 10px 0 14px;
        border-top: 1px solid #eceefb;
    }
    .site-header .navbar-nav { gap: 2px; }
    .site-header .navbar-nav .nav-link { padding: 12px 16px; }
    .site-header .header-actions { margin-top: 12px; }
    .site-header .header-actions .btn-cta {
        width: 100%;
        text-align: center;
    }
}


/* ================= CHATBOT: premium touches ================= */
.chatbot-toggle {
    background: linear-gradient(135deg, #2d3cf5, #7c3aed);
    box-shadow: 0 16px 34px rgba(79, 70, 229, .45);
}
.chatbot-toggle:hover { background: linear-gradient(135deg, #3b49ff, #8b4bff); }
.chatbot-toggle::before {                 /* pulsing ring */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, .55);
    animation: botRing 2.4s ease-out infinite;
}
.chatbot.is-open .chatbot-toggle::before { display: none; }
@keyframes botRing {
    from { transform: scale(1);   opacity: .9; }
    to   { transform: scale(1.7); opacity: 0; }
}

.chatbot-panel { width: 380px; height: 560px; border-radius: 24px; }
.chatbot-header { background: linear-gradient(135deg, #2d3cf5 0%, #7c3aed 100%); }
.chatbot-msg-avatar { background: linear-gradient(135deg, #2d3cf5, #7c3aed); }
.chatbot-msg.user .chatbot-bubble { background: linear-gradient(135deg, #2d3cf5, #6d3df0); }
.chatbot-input button { background: linear-gradient(135deg, #2d3cf5, #7c3aed); }

.chatbot-messages { scrollbar-width: thin; scrollbar-color: #cfd3f5 transparent; }
.chatbot-bubble a { color: var(--primary); font-weight: 500; text-decoration: underline; }
.chatbot-bubble small { opacity: .7; }

/* quick-reply chips */
.chatbot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 0 40px;
}
.chatbot-chips button {
    padding: 7px 14px;
    border: 1.5px solid #d9dcff;
    border-radius: 50px;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.chatbot-chips button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}

/* WhatsApp button inside a message */
.chatbot-bubble a.chatbot-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 9px 16px;
    border-radius: 50px;
    background: #25d366;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

/* "Need help?" nudge above the button */
.chatbot-tip {
    position: absolute;
    right: 0;
    bottom: 76px;
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 14px 14px 4px 14px;
    background: #fff;
    color: var(--heading);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 14px 34px rgba(17, 17, 18, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s, visibility .3s;
}
.chatbot-tip.show { opacity: 1; visibility: visible; transform: none; }
.chatbot.is-open .chatbot-tip { display: none; }

@media (prefers-reduced-motion: reduce) {
    .chatbot-toggle::before { animation: none; }
}

/* Get Started lands with the contact card just below the header */
.ct-card { scroll-margin-top: 140px; }

@media (max-width: 991.98px) {
    .ct-card { scroll-margin-top: 110px; }
}

/* ================= CONTACT: "Get my demo" (dark, two-column) ================= */
.ct-demo {
    padding: 100px 0 110px;
    background: #050507;
}
.ctd-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 56px;
    align-items: start;
}

/* ----- left ----- */
.ctd-title {
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 6px 0 28px;
}
.ctd-lead {
    max-width: 520px;
    font-size: 19px;
    line-height: 1.65;
    color: #e4e4e8;
    margin: 0 0 46px;
}
.ctd-sub {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 22px;
}
.ctd-list { margin: 0; }
.ctd-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    font-size: 17.5px;
    color: #f0f0f3;
}
.ctd-list i { font-size: 22px; color: #3ddc97; flex-shrink: 0; }
.ctd-call {
    margin: 38px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .6);
}
.ctd-call a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.ctd-call a:hover { border-bottom-color: #fff; }

/* ----- right: form panel with blue-to-teal border ----- */
.ctd-panel {
    border: 4px solid transparent;
    border-radius: 26px;
    background:
        linear-gradient(#050507, #050507) padding-box,
        linear-gradient(160deg, #3b82f6 0%, #4a90f0 45%, #35d6c4 100%) border-box;
    padding: 42px 44px 38px;
    box-shadow: 0 0 80px rgba(59, 130, 246, .12);
    scroll-margin-top: 140px;
}
.ctd-form { padding: 0; background: none; border: 0; box-shadow: none; }
.ctd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }

.ct-demo .ct-group { margin: 0 0 22px; }
.ct-demo .ct-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.ctd-opt { font-weight: 500; color: rgba(255, 255, 255, .85); }

/* fields */
.ct-demo .ct-field {
    position: relative;
    display: flex;
    align-items: center;
    background: #1e2422;
    border: 1.5px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-demo .ct-field input,
.ct-demo .ct-field select,
.ct-demo .ct-field textarea {
    width: 100%;
    height: 60px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 17px;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    resize: none;
}
.ct-demo .ct-field textarea { height: auto; padding: 16px 18px; line-height: 1.55; }
.ct-demo .ct-field input::placeholder,
.ct-demo .ct-field textarea::placeholder { color: rgba(255, 255, 255, .38); }
.ct-demo .ct-field:focus-within {
    border-color: #4a90f0;
    box-shadow: 0 0 0 4px rgba(74, 144, 240, .18);
    background: #1e2422;
}
.ct-demo .ct-prefix {
    padding-left: 18px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.ct-demo .ct-prefix + input { padding-left: 12px; }

/* dropdown */
.ct-demo .ct-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}
.ct-demo .ct-select select option { color: #111; background: #fff; }
.ct-demo .ct-select select:invalid { color: rgba(255, 255, 255, .85); }

/* validation (works with the existing script) */
.ct-demo .ct-field.is-invalid { border-color: #ff5d6c; }
.ct-demo .ct-field.is-valid { border-color: rgba(61, 220, 151, .55); }
.ct-demo .ct-error { display: block; min-height: 0; margin-top: 7px; font-size: 13px; color: #ff8a95; }
.ct-demo .ct-error:empty { display: none; }

/* honeypot stays hidden */
.ct-demo .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* button */
.ctd-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 18px 30px;
    border: 0;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #3b82f6 0%, #35d6c4 100%);
    box-shadow: 0 18px 40px rgba(59, 130, 246, .3);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.ctd-submit:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(59, 130, 246, .42); }
.ctd-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.ct-demo .ct-note {
    display: block;
    margin-top: 16px;
    min-height: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #3ddc97;
}
.ct-demo .ct-note.is-error { color: #ff8a95; }

/* responsive */
@media (max-width: 991.98px) {
    .ct-demo { padding: 70px 0 80px; }
    .ctd-grid { grid-template-columns: 1fr; gap: 44px; }
    .ctd-panel { padding: 34px 28px 30px; }
}
@media (max-width: 575.98px) {
    .ctd-row { grid-template-columns: 1fr; }
    .ctd-panel { padding: 28px 18px 26px; border-width: 3px; }
}

/* heading: smaller */
.ctd-title {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 6px 0 22px;
}

/* fix: keep +91 beside the number instead of on top of it */
.ct-demo .ct-prefix {
    position: static;
    transform: none;
    padding-left: 18px;
    flex-shrink: 0;
}
.ct-demo .ct-field input.has-prefix {
    padding-left: 12px;
}

/* ================= FLOATING WHATSAPP BUTTON ================= */
.wa-float {
    position: fixed;
    right: 29px;                 /* centred above the 62px chatbot button */
    bottom: 104px;               /* 26px + 62px chatbot + 16px gap */
    z-index: 1070;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(18, 140, 126, .45);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 18px 38px rgba(18, 140, 126, .6);
}
.wa-float:focus-visible { outline: 3px solid rgba(37, 211, 102, .5); outline-offset: 3px; }

/* soft pulsing ring */
.wa-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .6);
    animation: waRing 2.6s ease-out infinite;
}
@keyframes waRing {
    from { transform: scale(1);   opacity: .9; }
    to   { transform: scale(1.65); opacity: 0; }
}

/* "Chat with us" tooltip (shows on hover) */
.wa-float .wa-tip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    padding: 8px 14px;
    border-radius: 12px;
    background: #14163a;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.wa-float .wa-tip::after {       /* little arrow */
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #14163a;
    transform: translateY(-50%) rotate(45deg);
}
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* hide it while the chat window is open so they never overlap */
body:has(.chatbot.is-open) .wa-float {
    opacity: 0;
    pointer-events: none;
    transform: scale(.8);
}

/* phones: chatbot sits at right/bottom 16px, so match it */
@media (max-width: 480px) {
    .wa-float {
        right: 19px;
        bottom: 90px;            /* 16px + 62px + 12px */
        width: 52px;
        height: 52px;
        font-size: 27px;
    }
    .wa-float .wa-tip { display: none; }
}

@media (hover: none) {
    .wa-float .wa-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float::before { animation: none; }
}

/* ===== WhatsApp button: move to the LEFT side ===== */
.wa-float {
    left: 26px;
    right: auto;
    bottom: 29px;                 /* centred on the same line as the chatbot button */
}

/* tooltip now opens to the right of the button */
.wa-float .wa-tip {
    left: calc(100% + 14px);
    right: auto;
    transform: translate(-8px, -50%);
}
.wa-float .wa-tip::after {
    left: -4px;
    right: auto;
}
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip {
    transform: translate(0, -50%);
}

/* the chat window opens on the right, so keep WhatsApp visible on desktop */
body:has(.chatbot.is-open) .wa-float {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* phones: the chat window goes nearly full width, so hide WhatsApp while it is open */
@media (max-width: 480px) {
    .wa-float {
        left: 16px;
        right: auto;
        bottom: 21px;
    }
    body:has(.chatbot.is-open) .wa-float {
        opacity: 0;
        pointer-events: none;
        transform: scale(.8);
    }
}

/* ================= DEMO FORM: compact, ends level with the email line ================= */

/* both columns get the same height, so the form's bottom edge lines up with the left text */
.ctd-grid { align-items: stretch; }
.ctd-left .ctd-call { margin-bottom: 0; }

/* panel: tighter padding, and a flex column so the notes box fills any spare height */
.ctd-panel {
    display: flex;
    flex-direction: column;
    padding: 26px 30px 24px;
    border-width: 3px;
    border-radius: 22px;
}
.ctd-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ctd-row { gap: 0 20px; }

/* smaller labels, fields and spacing */
.ct-demo .ct-group { margin-bottom: 14px; }
.ct-demo .ct-group label { margin-bottom: 6px; font-size: 14.5px; }
.ct-demo .ct-field { border-radius: 9px; }
.ct-demo .ct-field input,
.ct-demo .ct-field select { height: 46px; font-size: 15px; }
.ct-demo .ct-prefix { font-size: 15px; padding-left: 14px; }
.ct-demo .ct-error { margin-top: 5px; font-size: 12.5px; }

/* notes box stretches to take whatever height is left */
.ctd-form > .ct-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.ct-demo .ct-area { flex: 1; align-items: stretch; }
.ct-demo .ct-field textarea {
    height: auto;
    min-height: 76px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
}

/* smaller button */
.ct-demo .ctd-submit {
    align-self: flex-start;        /* not full width any more */
    width: auto;
    min-width: 210px;
    margin-top: 2px;
    padding: 12px 30px;
    gap: 8px;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(59, 130, 246, .28);
}

/* success / error message under the button (takes no space when empty) */
.ct-demo .ct-note {
    min-height: 0;
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
}
.ct-demo .ct-note:empty { display: none; }

/* tablet + mobile: single column, so no height matching needed */
@media (max-width: 991.98px) {
    .ctd-grid { align-items: start; }
    .ctd-panel { padding: 24px 20px 22px; }
    .ctd-form > .ct-group { flex: none; }
    .ct-demo .ct-field textarea { min-height: 96px; }
}
@media (max-width: 575.98px) {
    .ct-demo .ctd-submit { width: 100%; }   /* full width on phones */
}

/* ===== Contact links land exactly on the demo section (form just below the navbar) ===== */
#contact.ct-demo {
    /* navbar bottom edge + 11px gap, minus the section's own 100px top padding */
    scroll-margin-top: calc(var(--nav-total) - var(--pill-gap) + 11px - 100px);
}
@media (max-width: 991.98px) {
    #contact.ct-demo {
        /* same idea, but the section padding is 70px on tablet / mobile */
        scroll-margin-top: calc(var(--nav-total) - var(--pill-gap) + 11px - 70px);
    }
}

/* ================= HERO VISUAL: six-point "Our Core Focus" ================= */
.hex-orbit {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1.25;
    margin: 0 auto;
    container-type: inline-size;       /* everything inside scales with the width */
}

/* ring, spokes and moving dots */
.hex-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.hex-lines .ring    { fill: none; stroke: rgba(167, 139, 250, .4); stroke-width: .25; }
.hex-lines .ring-in { stroke: rgba(129, 140, 248, .28); stroke-dasharray: 1 1.6; }
.hex-lines .spoke   { fill: none; stroke: rgba(167, 139, 250, .22); stroke-width: .2; stroke-dasharray: .8 1.2; }

/* centre sphere */
.hex-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 35% 22%, rgba(190, 170, 255, .55), rgba(96, 64, 220, .45) 52%, rgba(22, 14, 84, .78));
    border: 1.5px solid rgba(255, 255, 255, .24);
    box-shadow:
        0 0 70px rgba(124, 58, 237, .55),
        inset 0 0 40px rgba(255, 255, 255, .08);
}
.hex-core::before {                     /* soft pulsing halo */
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, .4);
    animation: hexPulse 3.6s ease-out infinite;
}
@keyframes hexPulse {
    from { transform: scale(1);    opacity: .8; }
    to   { transform: scale(1.28); opacity: 0; }
}
.hex-core span {
    font-size: clamp(14px, 3.6cqw, 22px);
    font-weight: 500;
    line-height: 1.1;
    color: #e9e5ff;
}
.hex-core strong {
    font-size: clamp(15px, 3.9cqw, 24px);
    font-weight: 700;
    line-height: 1.15;
}
.hex-core i {
    display: block;
    width: 6cqw;
    height: 2px;
    margin: 1.6cqw auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #c084fc);
}

/* service pills */
.hex-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 30cqw;
    height: 13cqw;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    padding: 0 2cqw;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: clamp(11px, 2.6cqw, 15px);
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    border-radius: 7cqw;
    background:
        linear-gradient(180deg, rgba(120, 90, 255, .24), rgba(40, 24, 126, .62)) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(176, 150, 255, .95)) border-box;
    box-shadow:
        inset 0 -10px 18px rgba(139, 92, 246, .32),
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 32px rgba(6, 4, 38, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: hexBob 6s ease-in-out var(--d, 0s) infinite;
    transition: filter .25s ease;
}
.hex-node:hover,
.hex-node:focus-visible {
    color: #fff;
    filter: brightness(1.18) drop-shadow(0 0 14px rgba(167, 139, 250, .6));
    animation-play-state: paused;
}
.hex-node:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }
@keyframes hexBob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

/* tablet + mobile */
@media (max-width: 991.98px) {
    .hex-orbit { max-width: 480px; margin-top: 10px; }
}
@media (max-width: 575.98px) {
    .hex-node { width: 31cqw; }
}

@media (prefers-reduced-motion: reduce) {
    .hex-node, .hex-core::before { animation: none; }
}

/* ================= HERO VISUAL: numbered "Core Focus" cards ================= */
.cf-orbit {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1.6;
    margin: 0 auto;
    container-type: inline-size;       /* everything inside scales with the width */
}

/* connecting lines */
.cf-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.cf-lines path {
    fill: none;
    stroke: rgba(167, 139, 250, .5);
    stroke-width: .35;
}

/* centre circle */
.cf-core {
    position: absolute;
    left: 50%;
    top: 50.5%;
    width: 21cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    border: 2.5px solid transparent;
    background:
        radial-gradient(circle at 35% 25%, rgba(120, 96, 255, .5), rgba(25, 16, 96, .92) 70%) padding-box,
        linear-gradient(135deg, #b794ff, #5b6bff 55%, #38bdf8) border-box;
    box-shadow: 0 0 46px rgba(99, 102, 241, .55), inset 0 0 26px rgba(139, 92, 246, .35);
}
.cf-core::before {
    content: "";
    position: absolute;
    inset: -9%;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, .4);
    animation: cfPulse 3.6s ease-out infinite;
}
@keyframes cfPulse {
    from { transform: scale(1);    opacity: .8; }
    to   { transform: scale(1.3);  opacity: 0; }
}
.cf-core span {
    font-size: clamp(13px, 3cqw, 20px);
    font-weight: 600;
    line-height: 1.1;
}
.cf-core strong {
    font-size: clamp(14px, 3.1cqw, 21px);
    font-weight: 700;
    line-height: 1.15;
}
.cf-core i {
    display: block;
    width: 4.6cqw;
    height: 2px;
    margin: 1.4cqw auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #d946ef);
}

/* the six cards */
.cf-card {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 39cqw;
    aspect-ratio: 2.5;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.6cqw 4cqw 1cqw;
    text-align: center;
    color: #fff;
    animation: cfBob 7s ease-in-out var(--d, 0s) infinite;
    transition: filter .25s ease;
}
.cf-card:hover {
    filter: brightness(1.15);
    animation-play-state: paused;
}
@keyframes cfBob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

/* hexagon outline with glow */
.cf-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 9px rgba(124, 92, 255, .5));
}
.cf-shape path {
    fill: url(#cfFill);
    stroke-width: 2.2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.cf-shape path.a { stroke: url(#cfStrokeA); }
.cf-shape path.b { stroke: url(#cfStrokeB); }

/* number badge on the top edge */
.cf-num {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -52%);
    padding: .3cqw 3cqw;
    border-radius: 20px;
    font-size: clamp(11px, 2.1cqw, 15px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    box-shadow: 0 6px 16px rgba(99, 102, 241, .55);
}

.cf-card h4 {
    position: relative;
    margin: 0 0 .7cqw;
    font-size: clamp(12px, 2.15cqw, 15px);
    font-weight: 700;
    line-height: 1.15;
}
.cf-card ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cf-card li {
    font-size: clamp(9.5px, 1.65cqw, 12px);
    line-height: 1.4;
    color: #ddd8ff;
    white-space: nowrap;
}
.cf-card li::before {
    content: "\2022";
    margin-right: .45em;
    color: #fff;
}

/* glowing wave along the bottom of the hero */
.hero-premium > .container { position: relative; z-index: 1; }
.hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: clamp(90px, 14vw, 180px);
    pointer-events: none;
    z-index: 0;
}

/* tablet */
@media (max-width: 991.98px) {
    .cf-orbit { max-width: 560px; margin-top: 10px; }
}

/* phones: stack the cards in a single column */
@media (max-width: 600px) {
    .cf-orbit {
        aspect-ratio: auto;
        display: grid;
        gap: 30px;
        padding-top: 14px;
        container-type: normal;
    }
    .cf-lines { display: none; }
    .cf-core {
        position: static;
        transform: none;
        width: 150px;
        margin: 0 auto;
        order: -1;
    }
    .cf-core span, .cf-core strong { font-size: 16px; }
    .cf-core i { width: 28px; margin-top: 8px; }
    .cf-card {
        position: static;
        transform: none;
        width: 100%;
        max-width: 360px;
        min-height: 110px;
        aspect-ratio: auto;
        margin: 0 auto;
        padding: 20px 34px 10px;
        animation: none;
    }
    .cf-num { padding: 2px 16px; font-size: 13px; }
    .cf-card h4 { font-size: 15px; margin-bottom: 4px; }
    .cf-card li { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-card, .cf-core::before { animation: none; }
}

/* ================= CORE FOCUS visual: glass capsules + glass sphere ================= */
.cr-wrap { width: 100%; max-width: 580px; margin: 0 auto; }
.cr-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 520 / 370;
    container-type: inline-size;
}

/* rings: true circles that pass behind the capsules */
.cr-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cr-ring { fill: none; stroke-width: 1; }
.cr-ring-1 { stroke: rgba(150, 140, 255, .20); }
.cr-ring-2 { stroke: rgba(150, 140, 255, .26); }
.cr-ring-3 { stroke: rgba(150, 140, 255, .16); }

/* centre glass sphere */
.cr-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 29.6%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 33% 22%, rgba(122, 106, 238, .50) 0%, rgba(62, 50, 156, .55) 40%, rgba(30, 22, 92, .90) 100%);
    border: 0;
    box-shadow:
        0 0 0 8px rgba(96, 80, 210, .07),
        0 0 0 9px rgba(150, 130, 255, .13),
        0 0 46px rgba(112, 72, 240, .45),
        inset 0 0 26px rgba(140, 120, 255, .16),
        inset -6px -9px 16px -8px rgba(240, 218, 255, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: crPulse 6s ease-in-out infinite;
}
/* complete glowing ring around the sphere, brightest on the lower right */
.cr-core::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(170, 160, 255, .35) 0deg,
        rgba(210, 196, 255, .60) 70deg,
        rgba(255, 240, 255, 1) 125deg,
        rgba(255, 214, 250, .95) 165deg,
        rgba(190, 175, 255, .55) 215deg,
        rgba(170, 160, 255, .32) 300deg,
        rgba(170, 160, 255, .35) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cr-core span   { font-size: 15px; font-size: 3.6cqw; font-weight: 600; line-height: 1.1; color: #ece8ff; }
.cr-core strong { font-size: 17px; font-size: 4.1cqw; font-weight: 700; line-height: 1.15; letter-spacing: -.2px; }
.cr-core em {
    font-style: normal;
    background: linear-gradient(90deg, #cdb8ff, #f3b0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cr-core i {
    width: 28px; height: 2px;
    margin-top: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, #5b8cff, #ff7ae0);
}
@keyframes crPulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(96,80,210,.07), 0 0 0 9px rgba(150,130,255,.13), 0 0 42px rgba(112,72,240,.40), inset 0 0 26px rgba(140,120,255,.16), inset -6px -9px 16px -8px rgba(240,218,255,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(96,80,210,.10), 0 0 0 9px rgba(150,130,255,.20), 0 0 64px rgba(112,72,240,.65), inset 0 0 28px rgba(140,120,255,.22), inset -6px -9px 16px -8px rgba(240,218,255,.60); }
}

/* glass capsules */
.cr-pill {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    width: 30.4%;
    aspect-ratio: 158 / 72;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3%;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-size: 2.7cqw;
    font-weight: 600;
    line-height: 1.24;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(170deg, rgba(82, 72, 196, .42) 0%, rgba(34, 32, 98, .76) 55%, rgba(28, 26, 86, .85) 100%);
    box-shadow:
        0 10px 22px -4px rgba(112, 84, 240, .45),
        inset 0 0 16px rgba(140, 125, 255, .20),
        inset 0 -4px 10px -2px rgba(226, 210, 255, .38);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: scale .3s ease, box-shadow .3s ease;
    animation: crFloat 7s ease-in-out infinite;
    animation-delay: var(--d);
}
.cr-pill > span { position: relative; z-index: 2; text-shadow: 0 1px 10px rgba(120, 100, 255, .35); }

/* thin glowing rim: dim at the top, bright along the bottom */
.cr-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.4px;
    border-radius: inherit;
    background: linear-gradient(172deg, rgba(160, 152, 255, .60) 0%, rgba(112, 98, 220, .30) 45%, rgba(238, 228, 255, .98) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cr-pill:hover {
    scale: 1.05;
    box-shadow:
        0 14px 30px -4px rgba(130, 100, 255, .65),
        inset 0 0 20px rgba(160, 145, 255, .30),
        inset 0 -4px 12px -2px rgba(240, 226, 255, .55);
}
@keyframes crFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* phones: taller stage, slightly larger capsules */
@media (max-width: 575.98px) {
    .cr-stage { aspect-ratio: 520 / 440; }
    .cr-pill  { width: 34%; font-size: 3.2cqw; }
    .cr-pill.cr-l { left: 17.5%; }
    .cr-pill.cr-r { left: 82.5%; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-core, .cr-pill { animation: none !important; }
    .cr-dot { display: none; }
}

/* Hero: Core Focus graphic on the right, filling its column */
.hero-premium .cr-wrap {
    max-width: 620px;
    margin-left: auto;
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .hero-premium .cr-wrap {
        margin: 0 auto;   /* centered under the text on tablet/mobile */
        max-width: 560px;
    }
}

/* ================= CORE FOCUS: kid + extra motion ================= */

/* glow on the kid and his trail */
.cr-kid {
    filter: drop-shadow(0 0 4px rgba(170, 140, 255, .95))
            drop-shadow(0 0 10px rgba(124, 92, 255, .6));
}
.cr-trail { filter: drop-shadow(0 0 5px rgba(150, 120, 255, .9)); }

/* slowly rotating colour aura behind the whole graphic */
.cr-stage::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 78%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        rgba(91, 140, 255, 0) 0deg,
        rgba(91, 140, 255, .60) 90deg,
        rgba(168, 85, 247, .60) 180deg,
        rgba(255, 122, 224, .55) 270deg,
        rgba(255, 122, 224, 0) 360deg);
    filter: blur(40px);
    opacity: .55;
    animation: crSpin 16s linear infinite;
}
@keyframes crSpin { to { rotate: 360deg; } }

/* ripple waves coming out of the centre sphere */
.cr-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(190, 170, 255, .75);
    pointer-events: none;
    animation: crRipple 3.2s ease-out infinite;
}
@keyframes crRipple {
    0%   { transform: scale(1);   opacity: .75; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* rings: flowing dashed lines, opposite directions */
.cr-ring-1 { stroke-dasharray: 3 9; animation: crDash 30s linear infinite; }
.cr-ring-3 { stroke-dasharray: 2 7; animation: crDash 22s linear infinite reverse; }
@keyframes crDash { to { stroke-dashoffset: -240; } }

@media (prefers-reduced-motion: reduce) {
    .cr-stage::before, .cr-core::after, .cr-ring { animation: none !important; }
    .cr-kid, .cr-trail { display: none; }
}
/* ================= CORE FOCUS: balance sizes ================= */

/* rings + trail + kid grow together (scales from the centre) */
.cr-rings {
    transform: scale(1.14);
    transform-origin: 50% 50%;
}

/* bigger centre sphere */
.cr-core { width: 33%; }

/* smaller capsules (desktop/tablet only, phones keep their own sizes) */
@media (min-width: 576px) {
    .cr-pill {
        width: 24%;
        font-size: 2.3cqw;
        padding: 0 2%;
    }
}

.hero.hero-premium {
    background:
      /* soft violet glow behind the right-hand visual */
      radial-gradient(ellipse 55% 70% at 78% 52%, rgba(109, 76, 255, .38) 0%, rgba(109, 76, 255, 0) 65%),
      /* matching indigo glow on the left, same colour family */
      radial-gradient(ellipse 50% 60% at 12% 18%, rgba(79, 70, 229, .30) 0%, rgba(79, 70, 229, 0) 65%),
      /* gentle lift at the bottom centre so both sides blend */
      radial-gradient(ellipse 70% 40% at 50% 105%, rgba(139, 92, 246, .22) 0%, rgba(139, 92, 246, 0) 70%),
      /* one smooth base across the whole width */
      linear-gradient(120deg, #070a1f 0%, #0c0f33 40%, #130f45 70%, #1b1260 100%) !important;
  }

  /* the two old glow blobs: same hue, much softer, so no pink patch on the left */
  .hero-premium .hero-glow {
    opacity: .35 !important;
    filter: blur(110px) !important;
  }
  .hero-premium .hero-glow-1 { background: #4f46e5 !important; }
  .hero-premium .hero-glow-2 { background: #7c5cff !important; }

  /* clearer, brighter text */
  .hero-premium .hero-title { color: #ffffff !important; text-shadow: 0 2px 24px rgba(8, 6, 40, .55); }
  .hero-premium .hero-title .title-accent {
    background: linear-gradient(90deg, #8aa4ff 0%, #b78cff 50%, #ff8fe6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  .hero-premium .hero-text { color: rgba(226, 232, 255, .86) !important; }
  .hero-premium .hero-badge { background: rgba(255, 255, 255, .06) !important; border-color: rgba(167, 150, 255, .35) !important; }

  /* pills and centre circle read a little crisper on the new background */
  .hero-premium .cr-pill {
    background: linear-gradient(160deg, rgba(40, 34, 120, .85), rgba(22, 18, 78, .9)) !important;
    border-color: rgba(160, 140, 255, .45) !important;
  }

    @media (min-width: 992px) {
    .features .fx-title {
      white-space: nowrap;
      font-size: clamp(1.3rem, 2.6vw, 2.05rem) !important;
      line-height: 1.25 !important;
      letter-spacing: -0.01em;
    }
  }

  /* on tablets and phones the column is full width, so a little shrink is enough */
  @media (max-width: 991.98px) {
    .features .fx-title {
      font-size: clamp(1.25rem, 4.6vw, 1.9rem) !important;
      line-height: 1.25 !important;
    }
  }

  /* very small phones: allow wrapping only if the text truly cannot fit */
  @media (max-width: 480px) {
    .features .fx-title { white-space: normal; }
  }


  .features .fx-row > [class*="col-"] {
    container-type: inline-size;
  }

  .features .fx-title {
    white-space: nowrap;
    font-size: clamp(1.1rem, 3.85cqw, 2.3rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
  }

  /* very small phones: allow wrapping only if the text truly cannot fit */
  @media (max-width: 400px) {
    .features .fx-title {
      white-space: normal;
      font-size: 1.25rem !important;
    }
  }

   .features .fx-row .btn.btn-cta {
    padding: 11px 26px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px;
  }
  .features .fx-row .btn.btn-cta i {
    font-size: 0.9em !important;
  }

   .hero-premium .hero-title {
    color: #ffffff !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em;
    text-shadow: 0 0 28px rgba(160, 140, 255, .35), 0 4px 30px rgba(8, 6, 40, .5);
  }

  /* each word gets room all round, with NO negative margin, so nothing overlaps */
  .hero-premium .hero-title .hw {
    display: inline-block;
    overflow: visible !important;
    padding: .12em .04em .22em;
    margin: 0;
    line-height: 1.2;
  }

    .hero-premium .hero-title .title-accent {
    filter: drop-shadow(0 3px 14px rgba(110, 70, 255, .45));
  }
  .hero-premium .hero-title .title-accent,
  .hero-premium .hero-title .title-accent .hw {
    background: linear-gradient(100deg,
      #3d8bff 0%, #7a5cff 30%, #b44dff 55%, #ff4fc3 80%, #3d8bff 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    animation: heroShine 8s linear infinite;
  }
    .hero-premium .hero-title .title-accent {
    filter: drop-shadow(0 3px 14px rgba(110, 70, 255, .45));
  }
  .hero-premium .hero-title .title-accent,
  .hero-premium .hero-title .title-accent .hw {
    background: linear-gradient(100deg,
      #3d8bff 0%, #7a5cff 30%, #b44dff 55%, #ff4fc3 80%, #3d8bff 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    animation: heroShine 8s linear infinite;
  }


  /* images */

  .features .fx-row > [class*="col-"] { min-width: 0; }

  .features .fx-img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px;
    overflow: hidden;
    background: #f3f4ff;
    border: 1px solid rgba(120, 100, 255, .15);
    box-shadow: 0 24px 60px -24px rgba(60, 50, 200, .35);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .features .fx-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* ================= CORE FOCUS: PREMIUM SHINE ================= */
.cr-stage { overflow: visible; }

/* aura behind everything, brighter */
.cr-stage::before { opacity: .85; filter: blur(46px); }

/* ring lines: clearly visible + glowing */
.cr-rings { filter: drop-shadow(0 0 6px rgba(150,130,255,.85)); }
.cr-stage .cr-ring { stroke-width: 1.8; }
.cr-stage .cr-ring-1 { stroke: rgba(176,164,255,.85); }
.cr-stage .cr-ring-2 { stroke: rgba(205,185,255,.95); stroke-width: 2.2; }
.cr-stage .cr-ring-3 { stroke: rgba(130,190,255,.90); }

/* glowing trail the kid leaves while running */
.cr-trail circle:first-child { stroke-opacity: .95 !important; stroke-width: 5 !important; }
.cr-trail circle:last-child  { stroke-width: 2.6 !important; }
.cr-trail { filter: drop-shadow(0 0 10px rgba(160,130,255,1)) drop-shadow(0 0 22px rgba(120,100,255,.8)); }

/* kid: stronger glow */
.cr-kid {
  filter: drop-shadow(0 0 5px rgba(190,160,255,1))
          drop-shadow(0 0 14px rgba(124,92,255,.9))
          drop-shadow(0 0 26px rgba(124,92,255,.5));
}

/* centre sphere: brighter */
.cr-core {
  background: radial-gradient(circle at 33% 22%, rgba(160,140,255,.65) 0%, rgba(80,64,200,.65) 42%, rgba(30,22,100,.92) 100%);
  box-shadow:
    0 0 0 8px rgba(120,100,240,.12),
    0 0 0 10px rgba(180,160,255,.25),
    0 0 70px rgba(130,90,255,.85),
    0 0 130px rgba(100,70,240,.45),
    inset 0 0 30px rgba(170,150,255,.28),
    inset -6px -9px 16px -8px rgba(255,230,255,.7);
}
.cr-core strong { text-shadow: 0 0 18px rgba(190,170,255,.85); }

/* pills: brighter rim, glow and a moving shine */
.hero-premium .cr-pill {
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%) 0 0 / 250% 100%,
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(160deg, rgba(70,58,190,.88), rgba(26,22,90,.95)) !important;
  box-shadow:
    0 0 24px rgba(130,100,255,.65),
    0 12px 26px -4px rgba(112,84,240,.6),
    inset 0 0 18px rgba(160,145,255,.35),
    inset 0 -4px 12px -2px rgba(240,226,255,.6) !important;
  animation: crFloat 7s ease-in-out infinite, crShine 5s linear infinite;
  animation-delay: var(--d), var(--d);
}
.hero-premium .cr-pill::before {
  padding: 2px;
  background: linear-gradient(172deg, rgba(190,180,255,.95) 0%, rgba(140,125,255,.6) 45%, #fff 100%);
}
@keyframes crShine { from { background-position: 150% 0, 0 0, 0 0; } to { background-position: -100% 0, 0 0, 0 0; } }

/* hero heading: smooth flowing word reveal */
.hero-premium .hero-title .hw {
  filter: none;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   1.9s cubic-bezier(.25, .1, .25, 1),
    transform 2.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * .13s);   /* small gap so words flow into each other */
}
.hero-premium .hero-title.hd-in .hw {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-premium .cr-pill { animation: none !important; }
}

/* ================= CORE FOCUS: SOFTER / CLEANER ================= */

/* aura behind the graphic: much weaker */
.cr-stage::before { opacity: .35; filter: blur(55px); }

/* ring lines: still visible, no glow */
.cr-rings { filter: none; }
.cr-stage .cr-ring { stroke-width: 1.3; }
.cr-stage .cr-ring-1 { stroke: rgba(170,160,255,.55); }
.cr-stage .cr-ring-2 { stroke: rgba(190,175,255,.60); stroke-width: 1.5; }
.cr-stage .cr-ring-3 { stroke: rgba(140,185,255,.50); }

/* trail behind the kid: thinner, softer */
.cr-trail circle:first-child { stroke-opacity: .55 !important; stroke-width: 3 !important; }
.cr-trail circle:last-child  { stroke-width: 1.6 !important; }
.cr-trail { filter: drop-shadow(0 0 4px rgba(150,125,255,.6)); }

/* kid: light glow only */
.cr-kid { filter: drop-shadow(0 0 3px rgba(180,155,255,.55)); }

/* centre sphere: calm glow, less white rim */
.cr-core {
  background: radial-gradient(circle at 33% 22%, rgba(110,96,225,.45) 0%, rgba(56,46,150,.55) 42%, rgba(28,20,90,.90) 100%);
  box-shadow:
    0 0 0 8px rgba(96,80,210,.06),
    0 0 0 9px rgba(150,130,255,.12),
    0 0 36px rgba(112,72,240,.35),
    inset 0 0 20px rgba(140,120,255,.12),
    inset -6px -9px 14px -8px rgba(240,218,255,.30);
}
.cr-core strong { text-shadow: none; }

/* pills: flat dark, thin rim, no moving shine */
.hero-premium .cr-pill {
  background: linear-gradient(165deg, rgba(40,34,115,.90), rgba(22,18,78,.95)) !important;
  box-shadow:
    0 8px 18px -6px rgba(0,0,0,.45),
    inset 0 -3px 8px -2px rgba(210,195,255,.18) !important;
  animation: crFloat 7s ease-in-out infinite;
  animation-delay: var(--d);
}
.hero-premium .cr-pill::before {
  padding: 1.2px;
  background: linear-gradient(172deg, rgba(150,140,255,.45) 0%, rgba(120,105,230,.30) 50%, rgba(215,205,255,.65) 100%);
}
.hero-premium .cr-pill > span { text-shadow: none; }
.hero-premium .cr-pill:hover {
  box-shadow: 0 10px 22px -6px rgba(110,90,240,.45), inset 0 -3px 8px -2px rgba(220,205,255,.28) !important;
}

/* =========================================================
   FEATURES: PREMIUM UPGRADE (paste at very end of style.css)
   ========================================================= */
.features { counter-reset: fx; }

/* ---------- Card behind each feature row ---------- */
.features .fx-row {
  counter-increment: fx;
  position: relative;
  isolation: isolate;
  margin-bottom: 130px;
}
.features .fx-row::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(109, 76, 255, .10), transparent 70%),
    radial-gradient(600px 300px at 100% 100%, rgba(255, 122, 224, .10), transparent 70%),
    linear-gradient(145deg, #ffffff 0%, #f6f5ff 60%, #ffffff 100%);
  border: 1px solid rgba(120, 100, 255, .14);
  box-shadow:
    0 40px 80px -48px rgba(60, 50, 200, .38),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease;
}
.features .fx-row:hover::before {
  border-color: rgba(120, 100, 255, .32);
  box-shadow:
    0 50px 90px -44px rgba(60, 50, 200, .5),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transform: translateY(-4px);
}
.features .fx-row > [class*="col-"] { position: relative; z-index: 1; }

/* ---------- Tag pill: gradient border + glowing dot ---------- */
.features .fx-tag {
  position: relative;
  padding: 8px 18px 8px 16px;
  background: linear-gradient(#f5f3ff, #f5f3ff) padding-box,
              linear-gradient(120deg, #5b8cff, #a06bff, #ff7ae0) border-box;
  border: 1.5px solid transparent;
  color: #4a36e6;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px -10px rgba(110, 80, 255, .55);
}
.features .fx-tag i {
  background: linear-gradient(135deg, #5b8cff, #a06bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Title + text ---------- */
.features .fx-title,
.features .fx-title .hw {
  font-weight: 800 !important;
  color: #14123a !important;
  background: none !important;
  -webkit-text-fill-color: #14123a !important;
  text-shadow: none !important;
}
.features .fx-text { color: #5b5b72; }

/* ---------- Bullet list as soft glass rows ---------- */
.features .fx-list li {
  padding: 11px 16px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(120, 100, 255, .10);
  backdrop-filter: blur(6px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.features .fx-list li:hover {
  transform: translateX(8px);
  background: #fff;
  border-color: rgba(120, 100, 255, .30);
  box-shadow: 0 14px 28px -16px rgba(80, 60, 230, .45);
}
.features .fx-list i {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #4f6bff, #8a5bff);
  box-shadow: 0 6px 14px -4px rgba(100, 70, 255, .7);
}

/* ---------- CTA button: gradient + shine sweep ---------- */
.features .fx-row .btn.btn-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #2d3cf5, #6d4cff 60%, #a06bff) !important;
  border: 0 !important;
  box-shadow: 0 16px 30px -12px rgba(80, 60, 240, .7);
  transition: transform .3s ease, box-shadow .3s ease;
}
.features .fx-row .btn.btn-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.features .fx-row .btn.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 36px -12px rgba(80, 60, 240, .85);
}
.features .fx-row .btn.btn-cta:hover::after { left: 130%; }
.features .fx-row .btn.btn-cta i { transition: transform .3s ease; }
.features .fx-row .btn.btn-cta:hover i { transform: translate(3px, -3px); }

/* ---------- Image: gradient frame, fill, zoom, number badge ---------- */
.features .fx-img {
  position: relative;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #5b8cff, #a06bff 55%, #ff7ae0) !important;
  box-shadow:
    0 40px 80px -30px rgba(90, 60, 240, .55),
    0 0 0 6px rgba(140, 120, 255, .08) !important;
  transition: transform .5s ease, box-shadow .5s ease;
}
.features .fx-row:hover .fx-img {
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow:
    0 50px 90px -30px rgba(90, 60, 240, .7),
    0 0 0 8px rgba(140, 120, 255, .12) !important;
}
.features .fx-row .fx-img img {
  object-fit: cover !important;           /* change to "contain" if you don't want any cropping */
  border-radius: 22px;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) !important;
}
.features .fx-row:hover .fx-img img { transform: scale(1.06) !important; }

/* soft dark gradient at the bottom of the image for depth */
.features .fx-img::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  border-radius: 22px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 15, 80, .35) 100%);
}
/* glass badge: "Feature 01", "Feature 02" ... (auto numbered) */
.features .fx-img::after {
  content: "Feature " counter(fx, decimal-leading-zero);
  position: absolute;
  top: 22px; left: 22px;
  z-index: 2;
  padding: 7px 15px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3a2ad8;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
}

/* ---------- Scroll reveal (works with the script in Step 2) ---------- */
.features .fx-row.fx-pre .col-lg-6:nth-child(1),
.features .fx-row.fx-pre .col-lg-6:nth-child(2) {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.features .fx-row.fx-pre .col-lg-6:nth-child(2) { transition-delay: .15s; }
.features .fx-row.fx-in .col-lg-6:nth-child(1),
.features .fx-row.fx-in .col-lg-6:nth-child(2) {
  opacity: 1;
  transform: none;
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 991.98px) {
  .features .fx-row { margin-bottom: 100px; }
  .features .fx-row::before { inset: -28px 14px; border-radius: 28px; }
  .features .fx-row > [class*="col-"] { padding-inline: 2.2rem; }
}

/* ---------- Dark theme (your site has body.theme-dark) ---------- */
body.theme-dark .features .fx-row::before {
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(109, 76, 255, .18), transparent 70%),
    linear-gradient(145deg, #15122e, #100d24);
  border-color: rgba(140, 120, 255, .22);
}
body.theme-dark .features .fx-title,
body.theme-dark .features .fx-title .hw {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.theme-dark .features .fx-text { color: #b9b6d6; }
body.theme-dark .features .fx-list li { background: rgba(255, 255, 255, .05); color: #fff; }
body.theme-dark .features .fx-tag { background: linear-gradient(#1b1740, #1b1740) padding-box, linear-gradient(120deg, #5b8cff, #a06bff, #ff7ae0) border-box; color: #cfc6ff; }

@media (prefers-reduced-motion: reduce) {
  .features .fx-row *, .features .fx-row::before { transition: none !important; }
  .features .fx-row.fx-pre .col-lg-6 { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   FEATURES: SMALLER IMAGE + COMPACT SECTIONS
   (paste at the very end of style.css)
   ========================================================= */

/* ---- 1. Smaller image ---- */
.features .fx-row .fx-img {
  max-width: min(380px, 100%) !important;   /* image width: make smaller/bigger here */
  margin-inline: auto !important;           /* keeps it centred in its column */
  aspect-ratio: 16 / 11 !important;         /* shorter image: try 16/10 for even shorter */
  border-radius: 24px !important;
}
.features .fx-row .fx-img img,
.features .fx-img::before {
  border-radius: 18px;
}

/* ---- 2. Smaller section (less empty space) ---- */
.features .fx-row {
  margin-bottom: 80px;                      /* gap between one feature and the next */
  --bs-gutter-y: 1.5rem;                    /* less gap when stacked on mobile */
}
.features .fx-row::before {
  inset: -22px 0;                           /* card padding top/bottom: smaller = tighter */
  border-radius: 30px;
}

/* ---- 3. Slightly tighter text so the block is shorter ---- */
.features .fx-tag { margin-bottom: 12px; padding: 6px 15px 6px 13px; font-size: 13.5px; }
.features .fx-text { font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
.features .fx-list { margin-bottom: 20px; }
.features .fx-list li { padding: 8px 14px; margin-bottom: 6px; font-size: 15px; }
.features .fx-list i { width: 26px; height: 26px; }

/* ---- 4. Phones / tablets ---- */
@media (max-width: 991.98px) {
  .features .fx-row { margin-bottom: 70px; }
  .features .fx-row::before { inset: -18px 14px; }
  .features .fx-row .fx-img { max-width: 100% !important; }
}

/* =========================================================
   FEATURES: PREMIUM IMAGE CLARITY
   (paste at the very end of style.css)
   ========================================================= */

/* sharper, richer, crisper image */
.features .fx-row .fx-img img {
  filter: url(#fxSharpen) contrast(1.06) saturate(1.12) brightness(1.03) !important;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* the old dark bottom overlay made photos look dull, so make it very light */
.features .fx-img::before {
  background: linear-gradient(180deg, transparent 70%, rgba(20, 15, 80, .14) 100%) !important;
}

/* glossy light reflection that sweeps across the image on hover */
.features .fx-img > img { position: relative; z-index: 0; }
.features .fx-img .fx-shine,
.features .fx-img {
  --shine-pos: -120%;
}
.features .fx-row .fx-img::before {
  background:
    linear-gradient(115deg,
      transparent 35%,
      rgba(255, 255, 255, .28) 50%,
      transparent 65%) var(--shine-pos) 0 / 220% 100% no-repeat,
    linear-gradient(180deg, transparent 70%, rgba(20, 15, 80, .14) 100%) !important;
  transition: background-position .9s ease;
}
.features .fx-row:hover .fx-img::before {
  background-position: 120% 0, 0 0 !important;
}

/* thin inner highlight edge = "glass" premium feel */
.features .fx-img {
  box-shadow:
    0 40px 80px -30px rgba(90, 60, 240, .55),
    0 0 0 6px rgba(140, 120, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .35) !important;
}


/* ================= FAQ (matches the reference design) ================= */
.fr {
    position: relative;
    overflow: hidden;
    padding: 90px 0 110px;
    background:
        radial-gradient(520px 340px at 0% 0%, rgba(139, 124, 246, .22), transparent 70%),
        linear-gradient(180deg, #f6f4ff 0%, #f1efff 100%);
}
.fr .container { z-index: 2; }

/* decorations */
.fr-blob {
    position: absolute; top: -170px; left: -150px;
    width: 420px; height: 420px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(167, 150, 255, .35), rgba(167, 150, 255, 0));
    pointer-events: none;
}
.fr-dots {
    position: absolute; width: 130px; height: 100px; pointer-events: none;
    background-image: radial-gradient(rgba(124, 108, 246, .45) 2px, transparent 2.5px);
    background-size: 16px 16px;
}
.fr-dots-tr { top: 46px; right: 70px; }
.fr-dots-bl { bottom: 70px; left: 40px; }
.fr-wave {
    position: absolute; right: -150px; bottom: -190px;
    width: 560px; height: 380px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(167, 150, 255, 0), rgba(139, 124, 246, .30));
    transform: rotate(-12deg);
    pointer-events: none;
}

/* header */
.fr-head { max-width: 760px; margin: 0 auto 54px; }
.fr-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 18px; margin-bottom: 18px;
    border-radius: 50px;
    background: #e9e5ff; color: #4a3fe0;
    font-size: 14px; font-weight: 700;
}
.fr-badge i { color: #8b5cf6; }
.fr-title { margin-bottom: 12px; }
.fr-title::after { display: none; }
.fr-sub { margin: 0; font-size: 15.5px; color: #4b4c63; }
.fr-bar {
    display: block; width: 62px; height: 4px; margin: 20px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #8b5cf6, #2d3cf5);
}

/* layout */
.fr-grid {
    display: grid;
    grid-template-columns: 370px 1fr;
    gap: 44px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* ----- left: dark contact card ----- */
.fr-side {
    position: relative;
    padding: 34px 30px 30px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(300px 220px at 100% 100%, rgba(150, 92, 255, .55), transparent 70%),
        radial-gradient(260px 200px at 0% 0%, rgba(60, 70, 255, .35), transparent 70%),
        linear-gradient(160deg, #11113a 0%, #1a1a66 55%, #2b1c9a 100%);
    box-shadow: 0 34px 60px rgba(40, 30, 150, .32);
}
.fr-side::before {
    content: "";
    position: absolute; z-index: -1;
    top: -42px; left: -42px;
    width: 220px; height: 220px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(167, 150, 255, .45), rgba(167, 150, 255, 0));
}
.fr-side-icon {
    position: relative;
    width: 62px; height: 62px; margin-bottom: 22px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #4f46f0);
    box-shadow: 0 0 0 7px rgba(139, 124, 246, .22), 0 16px 30px rgba(79, 70, 240, .55);
}
.fr-side-icon::after {
    content: "";
    position: absolute; top: -12px; right: -20px;
    width: 18px; height: 18px;
    background:
        linear-gradient(#fff, #fff) 4px 2px / 2px 8px no-repeat,
        linear-gradient(#fff, #fff) 0 10px / 9px 2px no-repeat,
        linear-gradient(#fff, #fff) 11px 0 / 2px 6px no-repeat;
    opacity: .9;
    transform: rotate(18deg);
}
.fr-side h3 {
    font-size: 28px; font-weight: 700; line-height: 1.2;
    color: #fff; margin: 0 0 12px;
}
.fr-cyan {
    background: linear-gradient(90deg, #22d3ee, #3b82f6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fr-side p { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .82); margin: 0 0 22px; }

.fr-contact {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 15px; font-weight: 700;
    color: #3d3ae0; background: #fff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}
.fr-contact i:first-child { font-size: 17px; }
.fr-contact i:last-child { font-size: 12px; }
.fr-contact:hover { color: #2d2ad0; transform: translateY(-3px); box-shadow: 0 20px 34px rgba(0, 0, 0, .3); }

.fr-side-list { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fr-side-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fr-side-list i {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff; background: rgba(255, 255, 255, .12);
}
.fr-side-list a { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .92); word-break: break-all; }
.fr-side-list a:hover { color: #fff; }

/* ----- right: questions ----- */
.fr-list { display: flex; flex-direction: column; gap: 14px; }
.fr-item {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(80, 70, 200, .10);
    border: 1px solid rgba(139, 124, 246, .10);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.fr-item:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(80, 70, 200, .16); }
.fr-item:has(.collapse.show) { box-shadow: 0 20px 46px rgba(80, 70, 200, .20); }

.fr-q {
    display: flex; align-items: center; gap: 16px;
    width: 100%;
    padding: 13px 18px 13px 14px;
    appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
}
.fr-no {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 700; color: #3d3ae0;
    background: #eeebff;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.fr-q:not(.collapsed) .fr-no {
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
    box-shadow: 0 8px 18px rgba(79, 70, 240, .4);
}
.fr-text { flex: 1; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: #15162b; }
.fr-chev {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #4a3fe0; background: #eeebff;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.fr-q:not(.collapsed) .fr-chev {
    transform: rotate(180deg);
    color: #fff;
    background: linear-gradient(135deg, #2d3cf5, #8b5cf6);
}
.fr-a {
    padding: 0 24px 22px 70px;
    font-size: 14.5px; line-height: 1.8; color: #5b5c72;
}

/* responsive */
@media (max-width: 991.98px) {
    .fr { padding: 64px 0 80px; }
    .fr-grid { grid-template-columns: 1fr; gap: 34px; }
    .fr-side { max-width: 480px; }
    .fr-dots-tr { right: 20px; }
}
@media (max-width: 575.98px) {
    .fr-q { gap: 12px; padding: 12px 12px; }
    .fr-text { font-size: 14.5px; }
    .fr-a { padding: 0 16px 18px 16px; }
    .fr-dots { display: none; }
}

/* FAQ: clean sparkle rays above the "?" icon */
.fr-side-icon::after {
    content: "";
    position: absolute;
    top: -16px;
    right: -30px;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 4v6'/%3E%3Cpath d='M16 7l-4 4'/%3E%3Cpath d='M20 16h-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
    opacity: .95;
}

/* ================= LOGO COLOUR THEME (everything except the banner) ================= */
:root {
  --lg-1: #1a4dff;   /* deep logo blue  */
  --lg-2: #2f8cff;   /* middle blue     */
  --lg-3: #2ec4f1;   /* light sky blue  */
  --logo-grad: linear-gradient(135deg, var(--lg-1) 0%, var(--lg-2) 55%, var(--lg-3) 100%);
  --logo-grad-h: linear-gradient(135deg, #0f3ad6 0%, #1f7cf5 55%, #1fb3e6 100%);
  --primary: #1a4dff;
  --primary-dark: #0f3ad6;
}

/* ---------- Buttons ---------- */
.btn-cta,
.site-header .header-actions .btn-cta {
  background: var(--logo-grad);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(26, 77, 255, .32);
}
.btn-cta:hover,
.site-header .header-actions .btn-cta:hover {
  background: var(--logo-grad-h);
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(26, 77, 255, .45);
}
.price-featured .btn-cta { background: #fff; border-color: #fff; box-shadow: none; }
.btn-outline-cta:hover { background: var(--logo-grad); border-color: transparent; }

/* ---------- Headings (accent words) ---------- */
.title-accent {
  background: linear-gradient(100deg, var(--lg-1) 0%, var(--lg-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hd-split .title-accent .hw {
  background: linear-gradient(100deg, var(--lg-1) 0%, var(--lg-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Icon tiles / badges / bullets ---------- */
.fx-list i,
.fx-step-icon,
.fx-strip-item > span,
.pr-icon, .int-icon, .eco-card-icon, .service-icon,
.price-trust i, .tm-avatar,
.fq-side-icon, .ft-title > span, .ft-contact-list li > span {
  background: var(--logo-grad);
  box-shadow: 0 10px 22px rgba(26, 77, 255, .32);
}
.fx-tag, .section-badge { background: rgba(26, 77, 255, .08); color: var(--lg-1); }

/* ---------- Pricing ---------- */
.price-featured {
  background: linear-gradient(160deg, var(--lg-1) 0%, var(--lg-2) 60%, var(--lg-3) 130%);
  box-shadow: 0 30px 70px rgba(26, 77, 255, .30);
}
.pt-switch[aria-checked="true"] { background: var(--logo-grad); }

/* ---------- FAQ ---------- */
.faq {
  background:
    radial-gradient(520px 320px at 8% 12%, rgba(26, 77, 255, .08), transparent 70%),
    radial-gradient(520px 320px at 95% 90%, rgba(46, 196, 241, .10), transparent 70%),
    #f7f8ff;
}
.fq-side {
  background:
    radial-gradient(360px 200px at 0% 0%, rgba(26, 77, 255, .55), transparent 70%),
    radial-gradient(340px 200px at 100% 100%, rgba(46, 196, 241, .35), transparent 70%),
    linear-gradient(135deg, #060d24 0%, #0c1a44 60%, #060d24 100%);
}
.fq-side::before { background: linear-gradient(90deg, transparent, var(--lg-1), var(--lg-3), var(--lg-1), transparent); }
.fq-item::before { background: linear-gradient(180deg, var(--lg-1), var(--lg-3)); }
.fq-q:not(.collapsed) .fq-no,
.fq-q:not(.collapsed) .fq-icon { background: var(--logo-grad); box-shadow: 0 10px 20px rgba(26, 77, 255, .35); }
.fq-no, .fq-icon { color: var(--lg-1); background: rgba(26, 77, 255, .08); }
.fq-q:not(.collapsed) .fq-no, .fq-q:not(.collapsed) .fq-icon { color: #fff; }

/* ---------- Contact (demo form) ---------- */
.ctd-panel {
  background:
    linear-gradient(#050507, #050507) padding-box,
    var(--logo-grad) border-box;
  box-shadow: 0 0 80px rgba(26, 77, 255, .14);
}
.ctd-submit { background: var(--logo-grad); box-shadow: 0 12px 26px rgba(26, 77, 255, .35); }
.ct-demo .ct-field:focus-within { border-color: var(--lg-2); box-shadow: 0 0 0 4px rgba(47, 140, 255, .18); }

/* ---------- Footer ---------- */
.site-footer.ft {
  background:
    radial-gradient(700px 380px at 6% 0%, rgba(26, 77, 255, .32), transparent 70%),
    radial-gradient(600px 360px at 100% 25%, rgba(46, 196, 241, .16), transparent 70%),
    linear-gradient(160deg, #050b1f 0%, #0a1740 55%, #060b1c 100%);
}
.ft-social a:hover { background: var(--logo-grad); }
.ft-title::after, .ft-tagline::after { background: linear-gradient(90deg, var(--lg-1), var(--lg-3)); }
.ft-wave stop:nth-child(2) { stop-color: #2f8cff; }
.ft-wave stop:nth-child(3) { stop-color: #2ec4f1; }

/* ---------- Chatbot ---------- */
.chatbot-toggle { background: var(--logo-grad); box-shadow: 0 16px 34px rgba(26, 77, 255, .42); }
.chatbot-toggle:hover { background: var(--logo-grad-h); }
.chatbot-toggle::before { border-color: rgba(47, 140, 255, .55); }
.chatbot-header { background: var(--logo-grad); }
.chatbot-msg-avatar, .chatbot-input button { background: var(--logo-grad); }
.chatbot-msg.user .chatbot-bubble { background: var(--logo-grad); }
.chatbot-chips button { border-color: #cfe0ff; color: var(--lg-1); }
.chatbot-chips button:hover { background: var(--lg-1); border-color: var(--lg-1); color: #fff; }

/* ================= FOOTER (matches reference design) ================= */
.pf {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 190px 0 0;
  background:
    radial-gradient(760px 420px at 0% 0%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(700px 400px at 100% 30%, rgba(45, 60, 245, .45), transparent 70%),
    linear-gradient(180deg, #1c1fa8 0%, #0d1479 38%, #070c52 100%);
}
.pf-container { position: relative; z-index: 2; }

/* top wave */
.pf-wave-top { position: absolute; top: 0; left: 0; width: 100%; height: 230px; z-index: 1; pointer-events: none; }

/* dotted decorations */
.pf-dots {
  position: absolute; z-index: 2; width: 84px; height: 56px; pointer-events: none;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.8px);
  background-size: 14px 14px;
}
.pf-dots-l { top: 54px; left: 38px; color: #8b6bff; }
.pf-dots-r { top: 150px; right: 50px; color: #3d5bff; }

/* 3 columns with vertical dividers */
.pf-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  align-items: start;
}
.pf-col { padding: 0 44px; }
.pf-col:first-child { padding-left: 0; }
.pf-col:last-child { padding-right: 0; }
.pf-col + .pf-col { border-left: 1px solid rgba(255, 255, 255, .16); }

/* brand */
.pf-logo-link { display: inline-block; margin-bottom: 18px; }
.pf-logo { display: block; height: 62px; width: auto; filter: brightness(0) invert(1); } /* white logo */
.pf-about { max-width: 400px; margin: 0 0 22px; font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.pf-social { display: flex; gap: 12px; margin: 0; padding: 0; }
.pf-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #2f5bff, #5b7dff);
  box-shadow: 0 8px 18px rgba(47, 91, 255, .45);
  transition: transform .25s ease, background .25s ease;
}
.pf-social a:hover { transform: translateY(-3px); background: linear-gradient(135deg, #7c3aed, #5b7dff); color: #fff; }

/* contact */
.pf-head { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 16px; font-weight: 700; color: #fff; }
.pf-head > span {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  background: linear-gradient(135deg, #2f5bff, #4f8bff);
  box-shadow: 0 8px 18px rgba(47, 91, 255, .45);
}
.pf-info { margin: 0; padding: 0; }
.pf-info li { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; color: rgba(255, 255, 255, .92); }
.pf-info li i { width: 18px; text-align: center; font-size: 15px; color: #fff; flex-shrink: 0; }
.pf-info a { color: rgba(255, 255, 255, .92); word-break: break-word; transition: color .2s; }
.pf-info a:hover { color: #fff; text-decoration: underline; }

/* call to action */
.pf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 16px;
  border-radius: 50px; font-size: 12px; font-weight: 600; color: #e7ebff;
  background: rgba(79, 110, 255, .35);
  border: 1px solid rgba(140, 160, 255, .45);
}
.pf-chip i { font-size: 12px; }
.pf-cta-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.pf-cta-text { margin: 0 0 22px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.pf-btn {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 7px 8px 7px 26px;
  border-radius: 50px; font-size: 14.5px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #2f5bff, #7c8cff);
  box-shadow: 0 14px 30px rgba(47, 91, 255, .5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pf-btn span {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #2f5bff; font-size: 15px;
  transition: transform .25s ease;
}
.pf-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(47, 91, 255, .65); }
.pf-btn:hover span { transform: translateX(3px); }

/* bottom bar */
.pf-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 48px; padding: 22px 0 70px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; color: rgba(255, 255, 255, .85);
}
.pf-copy { margin: 0; display: flex; align-items: center; gap: 8px; }
.pf-badges { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.pf-badges li { display: flex; align-items: center; gap: 9px; padding: 0 22px; }
.pf-badges li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.pf-badges li:last-child { padding-right: 70px; }   /* keeps text clear of the floating buttons */
.pf-badges i { font-size: 17px; color: #fff; }

/* bottom wave */
.pf-wave-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; z-index: 1; pointer-events: none; }

/* tablet */
@media (max-width: 991.98px) {
  .pf { padding-top: 150px; }
  .pf-main { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .pf-brand { grid-column: 1 / -1; padding-right: 0; }
  .pf-col { padding: 0 24px; }
  .pf-col:nth-child(2) { padding-left: 0; border-left: 0; }
  .pf-dots { display: none; }
}
/* phone */
@media (max-width: 575.98px) {
  .pf-main { grid-template-columns: 1fr; }
  .pf-col, .pf-col:nth-child(2) { padding: 0; border-left: 0; }
  .pf-col + .pf-col { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .pf-bottom { flex-direction: column; align-items: flex-start; }
  .pf-badges { flex-direction: column; gap: 10px; }
  .pf-badges li, .pf-badges li:last-child { padding: 0; border-left: 0 !important; }
}

/* footer logo: show original colours on a white card */
.pf-logo {
  filter: none !important;
  height: 56px;
  width: auto;
  padding: 10px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

/* ===== FOOTER: centre the 3 bottom badges ===== */
.pf-bottom {
  justify-content: center;
  text-align: center;
  padding-bottom: 80px;
}
.pf-badges {
  justify-content: center;
  width: 100%;
}
.pf-badges li,
.pf-badges li:last-child {
  padding: 0 26px;
}

/* ===== FOOTER: reduce inner spacing ===== */
.pf {
  padding-top: 120px;              /* was 190px: space under the top wave */
}
.pf-wave-top { height: 180px; }    /* slightly shorter wave */

.pf-col { padding-top: 0; padding-bottom: 0; }

/* logo, text, icons: tighter stack */
.pf-logo-link { margin-bottom: 12px; }
.pf-about { margin-bottom: 14px; line-height: 1.65; }

/* contact rows closer together */
.pf-head { margin-bottom: 12px; }
.pf-info li { padding: 5px 0; }

/* CTA column tighter */
.pf-chip { margin-bottom: 10px; }
.pf-cta-title { margin-bottom: 6px; }
.pf-cta-text { margin-bottom: 14px; }

/* bottom bar: smaller gap above and below */
.pf-bottom {
  margin-top: 26px;
  padding: 16px 0 60px;            /* was 80px: room for the wave */
}

.pf-wave-bottom { height: 90px; }

/* dots follow the new height */
.pf-dots-l { top: 40px; }
.pf-dots-r { top: 110px; }

@media (max-width: 991.98px) {
  .pf { padding-top: 100px; }
  .pf-wave-top { height: 140px; }
  .pf-bottom { padding-bottom: 50px; }
}


/* ===== "Get my demo": arrow copied from the reference (same shape, size and spacing) ===== */
.ctd-action {
    --bh: 46.7px;                         /* height of the Get my demo button */
    display: flex;
    align-items: flex-start;
    gap: calc(var(--bh) * .9);            /* distance from the button, as in the reference */
}
.ctd-action .ctd-submit {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
}

.ctd-arrow {
    flex: 0 0 auto;
    width: calc(var(--bh) * 1.817);       /* arrow is 1.8x the button height wide... */
    height: calc(var(--bh) * .805);       /* ...and 80% of the button height tall */
    margin-top: calc(var(--bh) * .079);   /* starts just below the button's top edge */
    overflow: visible;
    fill: #fff;
    pointer-events: none;
    animation: ctdArrowNudge 2.2s ease-in-out infinite;
}
@keyframes ctdArrowNudge {                /* slow, continuous left-to-right drift */
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(12px); }
}

/* phones: the button is full width, so the arrow is hidden */
@media (max-width: 575.98px) {
    .ctd-action { display: block; }
    .ctd-arrow  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ctd-arrow { animation: none; }
}

/* ===== Heading arrow: flipped, pointing at the form ===== */
.ctd-title { position: relative; }
.ctd-title-end { position: static; }          /* the arrow is now positioned from the heading block */

.ctd-arrow-title { display: none; }           /* hidden on small screens */

@media (min-width: 1200px) {
    .ctd-title-end { white-space: nowrap; }

    .ctd-arrow-title {
        display: block;
        position: absolute;
        left: auto;                           /* clears the old position */
        margin-left: 0;
        right: -40px;                         /* tip ends about 16px before the form (column gap is 56px) */
        top: 50%;                             /* centred on the two-line heading */
        width: 2.1em;
        height: .93em;
        overflow: visible;
        fill: #fff;
        pointer-events: none;
        letter-spacing: 0;
        animation: ctdArrowFormNudge 2.2s ease-in-out infinite;
    }
}
@keyframes ctdArrowFormNudge {                /* slow drift toward the form and back; scaleX(-1) flips the arrow */
    0%, 100% { transform: translate(0, -50%) scaleX(-1); }
    50%      { transform: translate(12px, -50%) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
    .ctd-arrow-title { animation: none; transform: translate(0, -50%) scaleX(-1); }
}

/* ===== Features link lands exactly like the reference (badge just below the navbar) ===== */
#features.features {
    /* navbar bottom edge + 12.7px gap, minus the section's own 90px top padding */
    scroll-margin-top: calc(var(--nav-total) - var(--pill-gap) + 12.7px - 90px);
}
@media (max-width: 991.98px) {
    #features.features {
        /* same position, but the section padding is 60px on tablet / mobile */
        scroll-margin-top: calc(var(--nav-total) - var(--pill-gap) + 12.7px - 60px);
    }
}

/* ===== Reduce white space between Features and Pricing ===== */

/* 1. last feature row: no extra gap below it */
.features .container > .fx-row:last-child {
    margin-bottom: 0;
}

/* 2. features section: smaller bottom padding (was 130px) */
.features {
    padding-bottom: 40px;
}

/* 3. pricing section: smaller top padding (was 90px) */
.pricing {
    padding-top: 40px;
}

/* tablet + mobile */
@media (max-width: 991.98px) {
    .features { padding-bottom: 20px; }
    .pricing  { padding-top: 20px; }
}

/* ===== Reduce white space between Hero and Features ===== */
.features {
    padding-top: 70px;
}

/* tablet + mobile */
@media (max-width: 991.98px) {
    .features { padding-top: 20px; }
}

/* ===== Hero fills the first screen (no white strip at the bottom) ===== */
.hero.hero-premium {
    min-height: 100vh;          /* fallback for older browsers */
    min-height: 100svh;         /* modern browsers: real visible screen height */
}

/* on phones and tablets let the content decide the height */
@media (max-width: 991.98px) {
    .hero.hero-premium {
        min-height: auto;
    }
}

/* ===== Pricing: less space between heading and Monthly/Yearly toggle ===== */
.pricing .section-head {
    margin-bottom: 20px;      /* was 64px */
}

/* optional: also tighten the squiggle line under the heading */
.pricing .section-title {
    margin-bottom: 0;
}
.pricing .section-title::after {
    margin-top: 10px;         /* was 16px */
}

/* ===== Hero: curved arrow under the paragraph ===== */
.hero-arrow-wrap {
    position: relative;
    height: 0;                 /* takes no space, so nothing else moves */
}
.hero-arrow {
    position: absolute;
    left: 290px;               /* move right: bigger number, left: smaller */
    top: -60px;                /* move down: bigger number, up: smaller (can be negative) */
    width: 170px;              /* size of the arrow */
    height: auto;
    fill: #fff;
    opacity: .95;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(150, 130, 255, .55));
}

/* hide on tablet + mobile, where the text wraps differently */
@media (max-width: 991.98px) {
    .hero-arrow-wrap { display: none; }
}

/* ===== Hero: curved arrow under the paragraph (flipped, animated) ===== */
.hero-arrow-wrap {
    position: relative;
    height: 0;                 /* takes no space, so nothing else moves */
}
.hero-arrow {
    position: absolute;
    left: 100px;               /* move right: bigger number, left: smaller */
    top: -40px;                /* move down: bigger number, up: smaller */
    width: 170px;              /* size of the arrow */
    height: auto;
    fill: #fff;
    opacity: .95;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 0 8px rgba(150, 130, 255, .55));
    transform: scaleX(-1);     /* flips it so the arrowhead is on the right */
    animation: heroArrowMove 2s ease-in-out infinite;
}

/* the arrow swings forward (to the right) and back, and bobs slightly */
@keyframes heroArrowMove {
    0%, 100% { transform: scaleX(-1) translate(0, 0) rotate(0deg); }
    50%      { transform: scaleX(-1) translate(-14px, -10px) rotate(4deg); }
}

/* stop the motion for people who turn animations off in their system */
@media (prefers-reduced-motion: reduce) {
    .hero-arrow { animation: none; }
}

/* hide on tablet + mobile, where the text wraps differently */
@media (max-width: 991.98px) {
    .hero-arrow-wrap { display: none; }
}

/* ===== Hero: curved arrow under the paragraph (small, tilted up, animated) ===== */
.hero-arrow-wrap {
    position: relative;
    height: 0;                 /* takes no space, so nothing else moves */
}
.hero-arrow {
    position: absolute;
    left: 130px;               /* move right: bigger number, left: smaller */
    top: -20px;                /* move down: bigger number, up: smaller */
    width: 90px;              /* size of the arrow (was 225px) */
    height: auto;
    fill: #fff;
    opacity: .95;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 0 8px rgba(150, 130, 255, .55));
    transform: rotate(-18deg) scaleX(-1);   /* -18deg = tilted up toward the text */
    animation: heroArrowMove 2s ease-in-out infinite;
}

/* the arrow nudges forward along its own direction and back */
@keyframes heroArrowMove {
    0%, 100% { transform: rotate(-18deg) scaleX(-1) translate(0, 0); }
    50%      { transform: rotate(-18deg) scaleX(-1) translate(-10px, -4px); }
}

/* stop the motion for people who turn animations off in their system */
@media (prefers-reduced-motion: reduce) {
    .hero-arrow { animation: none; }
}

/* hide on tablet + mobile, where the text wraps differently */
@media (max-width: 991.98px) {
    .hero-arrow-wrap { display: none; }
}