/*
Theme Name: tiss-theme
*/

/* Fonts (self-hosted) ------------------------------------------------- */
/* Archivo: variable font, used for body text */
@font-face {
	font-family: "Archivo";
	src: url("assets/archivo/Archivo-VariableFont_wdth,wght.woff2") format("woff2"),
	     url("assets/archivo/Archivo-VariableFont_wdth,wght.woff") format("woff");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Archivo";
	src: url("assets/archivo/Archivo-Italic-VariableFont_wdth,wght.woff2") format("woff2"),
	     url("assets/archivo/Archivo-Italic-VariableFont_wdth,wght.woff") format("woff");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
}

/* Helvetica Neue: used for headings */
@font-face {
	font-family: "Helvetica Neue Web";
	src: url("assets/helvetica-neue/HelveticaNeueLight.woff2") format("woff2"),
	     url("assets/helvetica-neue/HelveticaNeueLight.woff") format("woff");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue Web";
	src: url("assets/helvetica-neue/HelveticaNeueRoman.woff2") format("woff2"),
	     url("assets/helvetica-neue/HelveticaNeueRoman.woff") format("woff");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue Web";
	src: url("assets/helvetica-neue/HelveticaNeueMedium.woff2") format("woff2"),
	     url("assets/helvetica-neue/HelveticaNeueMedium.woff") format("woff");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue Web";
	src: url("assets/helvetica-neue/HelveticaNeueBold.woff2") format("woff2"),
	     url("assets/helvetica-neue/HelveticaNeueBold.woff") format("woff");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue Web";
	src: url("assets/helvetica-neue/HelveticaNeueBlack.woff2") format("woff2"),
	     url("assets/helvetica-neue/HelveticaNeueBlack.woff") format("woff");
	font-weight: 900;
	font-display: swap;
}

body,
button,
input,
select,
textarea {
	font-family: "Archivo", Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6{
     font-family: "Helvetica Neue Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p, a{
   font-family: "Archivo", Arial, sans-serif;
    color: #000000de;  
    font-size: 16px;                                         
}

span{
    font-family: "Archivo", Arial, sans-serif;
}

a:hover{
   
    text-decoration: none !important;
}

.custom-container {
    padding: 0 clamp(20px, 6vw, 80px) !important;
    width: 100%;
}

.error-404 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 90px 20px;
    overflow: hidden;
    text-align: center;
}
.error-404__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    transition: transform 0.4s ease-out;
}
.error-404__orb--1 {
    width: 340px;
    height: 340px;
    top: 5%;
    left: 8%;
    background: rgba(123, 92, 255, 0.35);
}
.error-404__orb--2 {
    width: 280px;
    height: 280px;
    bottom: 0;
    right: 10%;
    background: rgba(205, 189, 255, 0.2);
}
.error-404__inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
}
.error-404__badge {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(205, 189, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #cdbdff;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.error-404__code {
    display: flex;
    justify-content: center;
    gap: 0.04em;
    margin: 18px 0 0;
    font-size: clamp(110px, 22vw, 230px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #e4dbff 0%, #7b5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-404__code span {
    display: inline-block;
}
.error-404__zero {
    filter: drop-shadow(0 0 28px rgba(123, 92, 255, 0.6));
}
.error-404.is-animated .error-404__code span {
    animation: error404Float 4s ease-in-out infinite;
}
.error-404.is-animated .error-404__code span:nth-child(2) {
    animation-delay: 0.4s;
}
.error-404.is-animated .error-404__code span:nth-child(3) {
    animation-delay: 0.8s;
}
@keyframes error404Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.error-404__title {
    margin: 10px 0 12px;
    font-size: clamp(26px, 4vw, 42px);
    color: #fff;
}
.error-404__text {
    margin: 0 auto 30px;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.7);
}
.error-404__search {
    display: flex;
    max-width: 440px;
    margin: 0 auto 24px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}
.error-404__search:focus-within {
    border-color: #7b5cff;
}
.error-404__search input {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
}
.error-404__search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.error-404__search button {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: #7b5cff;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.error-404__search button:hover {
    background: #9478ff;
}
.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.error-404__btn {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #7b5cff;
    border-radius: 999px;
    background: #7b5cff;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.error-404__btn:hover {
    background: #9478ff;
    color: #fff;
    transform: translateY(-2px);
}
.error-404__btn--ghost {
    background: transparent;
}
.error-404__btn--ghost:hover {
    background: rgba(123, 92, 255, 0.2);
}
.error-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.error-404__links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-decoration: none;
}
.error-404__links a:hover {
    color: #cdbdff;
}
/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #1D1D1D;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FEDD56;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
  /* Lenis handles smooth scrolling; keep native smooth scroll only when it is off */
  html:not(.lenis) {
    scroll-behavior: smooth;
  }

body{
    background: #000 !important;
}

/* top header ends */

/* header start */

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 12px 0;
    transition: padding .3s ease;
}
.f-nav .header-wrapper {
    padding: 8px 0;
}
.header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px;
    border-radius: 16px;
    /* glass: a faint light-to-clear tint over a strong blur of whatever is behind, a top highlight
       like light catching the edge, and a soft drop shadow to lift it off the page */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(20, 14, 38, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 8px 32px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* once scrolled, content of every colour passes behind it, so the tint gets a little denser to keep
   the menu readable */
.f-nav .header-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(14, 10, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 12px 40px rgba(0, 0, 0, 0.4);
}
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 10px;
    background: #fff;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}
.header-logo:hover {
    color: #fff;
}
.header-logo img {
    display: block;
    width: auto;
    height: 32px;
}
.header-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 24px;
}
.header-menu #mega-menu-wrap-primary {
    flex: 1;
    background: transparent;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    background: transparent;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    display: flex;
    align-items: center;
    height: auto;
    padding: 10px 0;
    font-family: "Archivo", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 0;
    transition: color .2s ease;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
    color: #fff;
    background: transparent;
}

/* dropdown arrow: Font Awesome chevron instead of the plugin dashicon */
.header-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    float: none;
    margin-left: 6px;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    margin: 0;
    transition: transform .2s ease;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
    content: "\f107";
    transform: rotate(180deg);
}

/* dropdown panel */
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    min-width: 220px;
    padding: 10px;
    border-radius: 12px;
    background: #15121d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    padding: 10px 14px;
    border-radius: 8px;
    font-family: "Archivo", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    transition: .2s ease;
}
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus,
.header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
    color: #fff;
    background: rgba(124, 92, 255, 0.15);
}

.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
}
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: .3s ease;
}
.header-btn-light {
    background: #fff;
    color: #111;
}
.header-btn-light:hover {
    background: #ece6ff;
    color: #111;
}
/* the same white pill, expanding icon-badge button as .banner-btn-light (used on the banner/hero
   sections), scaled down to fit the 44px header bar: a dark square sits behind the icon at rest and
   opens out to fill the whole pill in violet on hover */
.header-btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 10px;
    padding: 0 4px 0 20px;
    color: #111;
    background: #fff;
    /* override .header-btn's generic transition: a blanket one would also ease the ::before clip-path,
       which already animates on its own timing below, and the two would fight */
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.header-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: #0b0619;
    clip-path: inset(6px 4px 6px calc(100% - 36px) round 8px);
    transition:
        clip-path .5s cubic-bezier(.65, 0, .35, 1),
        background-color .5s cubic-bezier(.65, 0, .35, 1);
}
.header-btn-primary:hover {
    color: #fff;
    box-shadow: 0 0 0 4px rgba(205, 195, 255, 0.28);
}
.header-btn-primary:hover::before {
    background-color: #7c5cff;
    clip-path: inset(4px 4px 4px 4px round 8px);
}
.header-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
}
.header-btn-icon img {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.header-btn-primary:hover .header-btn-icon img {
    transform: translateX(3px);
}
.header-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}
.header-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: .3s ease;
}
.header-open .header-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-open .header-toggle span:nth-child(2) {
    opacity: 0;
}
.header-open .header-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* header ends */

/* banner start */

.home-banner-wrap {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 160px 0 0;
    display: flex;
    flex-direction: column;
    background: #050309;
    color: #fff;
}
/* the main content takes the height left over by the client strip and centres itself in it */
.home-banner-wrap > .custom-container {
    flex: 1;
    display: flex;
    align-items: center;
}
.home-banner-wrap > .custom-container > .banner-row {
    width: 100%;
}
/* Background video: the banner takes the video's own 16:9 shape (the height follows the width instead
   of a fixed 100vh). The video covers the whole banner, so if the content is ever taller than 16:9
   (phones, tablets) the banner grows and the video just crops to fill it. */
.home-banner-wrap.has-video {
    min-height: 0;
    aspect-ratio: 16 / 9;
}
.banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/* the light dark overlay over the video, a little heavier at the top (behind the nav) and bottom (behind the logos) */
.banner-video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 3, 9, 0.35) 0%, rgba(5, 3, 9, 0) 30%, rgba(5, 3, 9, 0) 70%, rgba(5, 3, 9, 0.5) 100%),
        rgba(5, 3, 9, 0.45);
}
/* The phone must fit inside the 16:9 banner: its height is capped to what is left after the top padding
   (160px) and a little room below (20px), so it never runs far past the bottom edge.
   Width follows from the height. The 420px floor stops it collapsing on narrow screens, where the
   banner is taller than 16:9 anyway. */
/* lifts the phone off the bottom edge (margin, not transform: GSAP moves .banner-image with transforms) */
.has-video .banner-image {
    margin-bottom: 40px;
    /* shifts the phone 30px up without changing the banner height */
    position: relative;
    top: -30px;
}
.has-video .banner-image img {
    width: auto;
    max-height: max(420px, calc(56.25vw - 180px));
}
/* the animated blobs would tint the video, so they step aside when there is one */
.has-video .banner-glow,
.has-video .banner-circle,
.has-video .banner-gradient {
    display: none;
}
.banner-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(55% 65% at 78% 38%, rgba(124, 92, 255, 0.32) 0%, rgba(124, 92, 255, 0) 60%),
        radial-gradient(50% 60% at 8% 92%, rgba(91, 44, 200, 0.45) 0%, rgba(91, 44, 200, 0) 65%),
        radial-gradient(40% 40% at 50% 0%, rgba(183, 166, 255, 0.12) 0%, rgba(183, 166, 255, 0) 70%),
        linear-gradient(180deg, #0e0822 0%, #08050f 100%);
    box-shadow: inset 0 0 120px rgba(124, 92, 255, 0.12);
    pointer-events: none;
}
.banner-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.banner-glow {
    position: absolute;
    top: 5%;
    right: 8%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 70, 230, 0.55) 0%, rgba(110, 70, 230, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
}
.banner-circle {
    position: absolute;
    top: 80px;
    right: -320px;
    width: 1050px;
    height: 1050px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
/* Animated gradient: two large, heavily blurred colour blobs (violet top right, magenta bottom left)
   drifting slowly on CSS keyframes. GSAP only fades this layer in and out; the blobs' own movement
   lives on the pseudo-elements, so the two never animate the same transform. */
.banner-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.banner-gradient::before,
.banner-gradient::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}
.banner-gradient::before {
    top: -15%;
    right: -10%;
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.55) 0%, rgba(124, 92, 255, 0) 65%);
    animation: banner-gradient-a 18s ease-in-out infinite alternate;
}
.banner-gradient::after {
    bottom: -25%;
    left: -15%;
    width: 55vmax;
    height: 55vmax;
    background: radial-gradient(circle, rgba(165, 22, 242, 0.4) 0%, rgba(165, 22, 242, 0) 65%);
    animation: banner-gradient-b 22s ease-in-out infinite alternate;
}
@keyframes banner-gradient-a {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-12vw, 8vh) scale(1.15);
    }
    100% {
        transform: translate(-4vw, 18vh) scale(0.95);
    }
}
@keyframes banner-gradient-b {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(14vw, -10vh) scale(1.1);
    }
    100% {
        transform: translate(6vw, -4vh) scale(1.2);
    }
}

.home-banner-wrap .custom-container {
    position: relative;
    z-index: 2;
}
.banner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.banner-content {
    flex: 1 1 460px;
    padding-bottom: 56px;
}
.banner-tag {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #cdbdff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.banner-content h1 {
    font-size: 64px;
    line-height: 1.1;
    max-width: 470px;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #f3eefe;
    margin-bottom: 24px;
}
/* SplitText's line masks (one overflow-hidden wrapper per line) need the line itself to behave like
   a normal block so the heading/paragraph keep their layout while each line animates independently. */
.banner-content h1 .banner-line,
.banner-text .banner-line {
    display: block;
}
/* the gradient fill moved from the line to .banner-fill, so the outlined part can stay unfilled
   (a parent's background-clip:text would otherwise show through the outline's transparent letters) */
.banner-content h1 .banner-fill {
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* "The Complexity." as a border outline only: no fill, just a stroke */
.banner-content h1 .banner-outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2.5px #ffffff;
    /* soft violet glow around the outline so it stands out from the busy video */
    filter: drop-shadow(0 0 6px rgba(160, 130, 255, 0.85)) drop-shadow(0 2px 10px rgba(5, 3, 9, 0.6));
}
.banner-text,
.banner-text p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    max-width: 540px;
}
.banner-text p:last-child {
    margin-bottom: 0;
}
.banner-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}
.banner-btn-outline,
.banner-btn-light {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    /* only the hover properties: a blanket transition would also ease opacity/transform, which GSAP
       animates every frame in the intro, and the two fight */
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
/* dark button with a thin purple border and a beam of light running around it (see the running glow
   rules below); on hover it fills with a magenta-to-violet gradient */
.banner-btn-outline {
    position: relative;
    padding: 0 28px;
    color: #fff;
    border: 1px solid rgba(124, 92, 255, 0.5);
    gap: 12px;
    background: linear-gradient(180deg, rgba(24, 17, 46, 0.92) 0%, rgba(10, 7, 20, 0.92) 100%);
    box-shadow: inset 0 0 18px rgba(124, 92, 255, 0.14);
}
/* the SVG is drawn in black; the filter turns it white for the dark button */
.banner-btn-play {
    display: block;
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}
/* Running glow: a beam of light travels around the border. Both layers are a rotating conic gradient
   masked down to a ring: ::before is the sharp 1px beam, ::after a wider, blurred ring that glows
   with it. The angle is a registered custom property so the browser can animate it. */
@property --beam-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes banner-beam {
    to {
        --beam-angle: 360deg;
    }
}
.banner-btn-outline::before,
.banner-btn-outline::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: banner-beam 4s linear infinite;
    transition: opacity .4s ease;
}
.banner-btn-outline::before {
    inset: -1px;
    padding: 1px;
    background: conic-gradient(from var(--beam-angle), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.95) 335deg, rgba(255, 255, 255, 0) 360deg);
}
.banner-btn-outline::after {
    inset: -3px;
    padding: 3px;
    background: conic-gradient(from var(--beam-angle), rgba(205, 195, 255, 0) 0deg, rgba(205, 195, 255, 0) 270deg, rgba(205, 195, 255, 0.75) 335deg, rgba(205, 195, 255, 0) 360deg);
    filter: blur(3px);
    opacity: 0.8;
}

.banner-btn-outline:hover {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(90deg, #a516f2 0%, #8a2cf5 45%, #6a48f5 100%);
    border-color: rgba(225, 205, 255, 0.55);
    box-shadow:
        0 10px 30px -10px rgba(165, 22, 242, 0.6),
        0 0 0 4px rgba(124, 92, 255, 0.16);
}
.banner-btn-outline:hover::after {
    opacity: 1;
}
.banner-btn-light {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 16px;
    padding: 0 6px 0 28px;
    color: #111;
    background: #fff;
}
/* The icon badge's dark square is drawn by this ::before, clipped down to the 44px box on the right.
   On hover the clip opens out, so the badge itself grows across the button, turning purple as it
   goes; the text turns white and a soft ring appears around the button. */
.banner-btn-light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: #0b0619;
    clip-path: inset(calc(50% - 22px) 6px calc(50% - 22px) calc(100% - 50px) round 9px);
    transition:
        clip-path .55s cubic-bezier(.65, 0, .35, 1),
        background-color .55s cubic-bezier(.65, 0, .35, 1);
}
.banner-btn-light:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 0 4px rgba(205, 195, 255, 0.28);
}
/* the fill stops 6px short of the edge (the same gap the square has at rest), so the button's white
   shows through as a border around it */
.banner-btn-light:hover::before {
    background-color: #7c5cff;
    clip-path: inset(6px 6px 6px 6px round 9px);
}
/* the span only holds the icon and keeps the 44px slot in the layout; the square behind it is the
   button's ::before above */
.banner-btn-icon {
    width: 44px;
    height: 44px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.banner-btn-icon img {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.banner-btn-light:hover .banner-btn-icon img {
    transform: translateX(3px);
}
.banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}
.banner-badge i {
    color: #fff;
    font-size: 12px;
}
.banner-badge strong {
    color: #fff;
    font-weight: 600;
	font-display: swap;
}
.banner-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}
.banner-image {
    flex: 1 1 360px;
    align-self: flex-end;
    text-align: right;
}
.banner-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    will-change: transform;
}


/* banner ends */

/* why choose start */

.why-choose-wrap {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(45% 55% at 50% 0%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 70%),
        #ffffff;
    color: #14101f;
}
.why-choose-head {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}
.why-choose-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.why-choose-head h2 {
    margin: 0;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #14101f;
}
/* Bootstrap 4 row/col: columns give the horizontal gutter, the bottom margin gives the vertical one */
.why-choose-sub {
    margin: 18px auto 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.7;
    color: #5a5570;
}
.why-choose-grid {
    margin-bottom: -24px;
}
.why-choose-grid > [class*="col-"] {
    margin-bottom: 24px;
}
.why-choose-card {
    height: 100%;
    padding: 32px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    border: 1px solid rgba(20, 16, 31, 0.08);
    box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 12px 32px -18px rgba(60, 40, 140, 0.25);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.why-choose-card:hover {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 22px 44px -18px rgba(106, 72, 245, 0.35);
    transform: translateY(-4px);
}
.why-choose-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.22);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* on hover the icon box fills violet and the icon turns white */
.why-choose-card:hover .why-choose-icon {
    background-color: #7c5cff;
    border-color: #7c5cff;
}
.why-choose-icon-img {
    display: block;
    width: 28px;
    height: 28px;
    background-color: #6a48f5;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color 0.3s ease;
}
.why-choose-card:hover .why-choose-icon-img {
    background-color: #ffffff;
}
.why-choose-card h3 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: #14101f;
}
.why-choose-text,
.why-choose-text p {
    font-size: 16px;
    line-height: 1.65;
    color: #5a5570;
}
.why-choose-text p:last-child {
    margin-bottom: 0;
}


/* why choose ends */

/* community start */

.community-wrap {
    position: relative;
    overflow: hidden;
    padding: 110px 0 100px;
    background: #000;
    color: #fff;
}
.community-head {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.community-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.16);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #e6deff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.community-head h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #f3eefe;
}
/* SplitText lines (added by homepage-animation.js) carry the same white-to-lavender gradient as the
   banner heading; the gradient sits on each line so it survives the line being transformed */
.community-head h2 .community-line {
    display: block;
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.community-sub, .community-sub p {
    max-width: 500px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.community-sub p {
    max-width: none;
    margin: 0;
}
.community-stage {
    position: relative;
    margin-top: 40px;
    padding: 60px 16px;
}
.community-orbit {
    position: relative;
    z-index: 1;
    width: min(690px, 100%);
    aspect-ratio: 690 / 400;
    margin: 0 auto;
}
.community-glow {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(124, 92, 255, 0.35), rgba(124, 92, 255, 0));
    filter: blur(30px);
    pointer-events: none;
    animation: community-glow 6s ease-in-out infinite alternate;
}
@keyframes community-glow {
    from { opacity: 0.6; }
    to { opacity: 1; }
}
.community-ring {
    position: absolute;
    top: calc((100% - var(--h)) / 2);
    left: calc((100% - var(--w)) / 2);
    width: var(--w);
    height: var(--h);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.community-ring-1 { --w: 100%; --h: 100%; background: rgba(0, 0, 0, 0.55); }
.community-ring-2 { --w: 82%;  --h: 70%; }
.community-ring-3 { --w: 65%;  --h: 47%; }
.community-ring-4 { --w: 51%;  --h: 29%; border-color: rgba(205, 189, 255, 0.22); }
/* a beam of light runs around the outer and third ring, the same effect as the banner's outline
   button (reuses its --beam-angle property and banner-beam keyframes) */
.community-ring-1::before,
.community-ring-3::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--beam-angle), rgba(205, 189, 255, 0) 0deg, rgba(205, 189, 255, 0) 290deg, rgba(205, 189, 255, 0.9) 345deg, rgba(205, 189, 255, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: banner-beam 9s linear infinite;
    pointer-events: none;
}
.community-ring-3::before {
    animation-duration: 7s;
    animation-direction: reverse;
}

.community-avatar {
    position: absolute;
    z-index: 2;
    width: var(--size);
    aspect-ratio: 1;
    margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
}
.community-avatar-1 { --size: 12.3%; left: 40.6%; top: 21%; }
.community-avatar-2 { --size: 5.3%;  left: 60.8%; top: 30%; }
.community-avatar-3 { --size: 10.8%; left: 83.6%; top: 43%; }
.community-avatar-4 { --size: 8.2%;  left: 15%;   top: 45.5%; }
.community-avatar-5 { --size: 6.7%;  left: 27.3%; top: 65%; }
.community-avatar-6 { --size: 12%;   left: 55.7%; top: 79%; }
.community-avatar-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(205, 189, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12), 0 10px 30px -8px rgba(124, 92, 255, 0.55);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease;
}
.community-avatar-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.community-avatar:hover .community-avatar-inner {
    transform: scale(1.12);
    border-color: #cdbdff;
}
.community-badge {
    position: absolute;
    z-index: 2;
    width: 54px;
    height: 36px;
    margin: -18px 0 0 -27px;
}
.community-badge-1 { left: 20.5%; top: 21%; }
.community-badge-2 { left: 79.5%; top: 21%; }
.community-badge-3 { left: 79.5%; top: 79%; }
.community-badge-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #0b0714;
    border: 1px solid rgba(165, 130, 255, 0.75);
    color: #fff;
    font-size: 15px;
    animation: community-pulse 3s ease-in-out infinite;
}
.community-badge-2 .community-badge-inner { animation-delay: -1s; }
.community-badge-3 .community-badge-inner { animation-delay: -2s; }
@keyframes community-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(124, 92, 255, 0.35); }
    50% { box-shadow: 0 0 26px rgba(124, 92, 255, 0.75), 0 0 0 5px rgba(124, 92, 255, 0.12); }
}
.community-cta {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.community-cta .banner-btn-light {
    white-space: nowrap;
    pointer-events: auto;
    box-shadow: 0 12px 40px -10px rgba(124, 92, 255, 0.6);
}
.community-cta .banner-btn-light:hover {
    box-shadow: 0 0 0 4px rgba(205, 195, 255, 0.28), 0 12px 40px -10px rgba(124, 92, 255, 0.6);
}


/* community ends */

/* features start */

.features-wrap {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(40% 50% at 85% 10%, rgba(124, 92, 255, 0.12) 0%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(35% 45% at 10% 90%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 70%),
        #050309;
    color: #fff;
    overflow: hidden;
}
.features-wrap::before,
.features-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.features-wrap::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
}
.features-wrap::after {
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.features-wrap > .custom-container {
    position: relative;
    z-index: 1;
}
.features-head {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}
.features-sub {
    margin: 20px auto 0;
    max-width: 680px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
}

.features-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #cdbdff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.features-head h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #f3eefe;
}
/* SplitText lines (homepage-animation.js) carry the white-to-lavender heading gradient */
.features-head h2 .features-line {
    display: block;
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Sticky scroll story. Desktop: feature list left, image stage right; homepage-animation.js pins the
   block and moves .is-active down the list as the visitor scrolls (or on click). Below 992px it is a
   plain stack where every feature shows its own image and text. */
.features-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.features-item {
    position: relative;
}
.features-item h3 {
    margin: 0;
}
.features-item-btn {
    display: flex;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #f3eefe;
    font: inherit;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.features-item-btn:focus-visible {
    outline: 2px solid #cdbdff;
    outline-offset: 6px;
    border-radius: 4px;
}
.features-item-num {
    flex: none;
    width: 26px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #cdbdff;
}
.features-item-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
    /* at most five lines, ending in "..." */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}
/* "Explore this feature" link under the open feature text */
.features-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(205, 189, 255, 0.35);
    color: #e6deff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.features-explore:hover {
    color: #fff;
    border-color: #fff;
    text-decoration: none;
}
.features-explore-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.features-explore:hover .features-explore-arrow {
    transform: translateX(4px);
}
.features-wrap .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.features-item-media,
.features-stage {
    position: relative;
    overflow: hidden;
    background: rgba(124, 92, 255, 0.08);
}
.features-item-media img,
.features-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* features ends */

/* core hr start */

.core-hr-wrap {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(50% 45% at 50% 100%, rgba(124, 92, 255, 0.14) 0%, rgba(124, 92, 255, 0) 70%),
        #08050f;
    color: #fff;
    overflow: hidden;
}
.core-hr-head {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}
.core-hr-sub {
    margin: 20px auto 0;
    max-width: 680px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
}

.core-hr-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #cdbdff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.core-hr-head h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #f3eefe;
}

.core-hr-head h2 .core-hr-line {
    display: block;
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Layout: a full-width feature card on top (text left, large image right), then the other cards in
   one even row, each with an image band of the same height above its text. Flexbox throughout. */
.core-hr-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.core-hr-row {
    display: flex;
    gap: 24px;
}
.core-hr-row > .core-hr-card {
    flex: 1 1 0;
    min-width: 0;
}

.core-hr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.4s ease;
    isolation: isolate;
}
.core-hr-card:hover {
    border-color: rgba(124, 92, 255, 0.4);
}
/* soft light inside the card and a lit border, both centred on the pointer (set by homepage-animation.js) */
.core-hr-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(160, 135, 255, 0.16), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.core-hr-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(205, 189, 255, 0.85), rgba(124, 92, 255, 0.25) 45%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.core-hr-card:hover .core-hr-glow,
.core-hr-card:hover::before {
    opacity: 1;
}

/* image band: every image fills it (cover), so images that carry their own background line up as
   clean panels; anchored to the top so phone screens stay in view */
.core-hr-media {
    position: relative;
    z-index: 1;
    flex: none;
    height: 280px;
    margin: 12px 12px 0;
    overflow: hidden;
    border-radius: 16px;
    /* layered glow behind the image (shows wherever the image doesn't cover the box):
       a violet spotlight falling from the top, a warmer magenta bloom low in one corner, a faint dot
       texture that fades out, all over a deep ink base that darkens toward the edges */
    background:
        radial-gradient(70% 55% at 50% -10%, rgba(167, 139, 255, 0.42) 0%, rgba(124, 92, 255, 0.14) 45%, rgba(124, 92, 255, 0) 75%),
        radial-gradient(55% 60% at 100% 110%, rgba(214, 51, 255, 0.28) 0%, rgba(214, 51, 255, 0) 70%),
        radial-gradient(45% 50% at 0% 100%, rgba(80, 60, 220, 0.22) 0%, rgba(80, 60, 220, 0) 70%),
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 14px 14px,
        radial-gradient(120% 120% at 50% 40%, #1a1233 0%, #0d0820 60%, #07050f 100%);
    box-shadow:
        0 18px 40px -24px rgba(124, 92, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* fine gradient border: bright along the top edge, fading to almost nothing at the bottom */
.core-hr-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(205, 189, 255, 0.45) 0%, rgba(205, 189, 255, 0.12) 40%, rgba(255, 255, 255, 0.04) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* over the image: a soft diagonal sheen from the top left and a gentle shade at the bottom, so the
   picture sits in the card instead of on it */
.core-hr-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 35%),
        linear-gradient(180deg, rgba(8, 5, 15, 0) 70%, rgba(8, 5, 15, 0.4) 100%);
    transition: opacity 0.5s ease;
}
.core-hr-card:hover .core-hr-media::after {
    opacity: 0.6;
}
.core-hr-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the feature card shows its whole image, pinned to the top left of its area */
.core-hr-card--featured .core-hr-media img {
    object-fit: contain;
    object-position: left top;
}
/* the second item (first card in the row) also shows its whole image, pinned to the top right */
.core-hr-row > .core-hr-card:nth-child(1) .core-hr-media img {
    object-fit: contain;
    object-position: right top;
}
.core-hr-card:hover .core-hr-media img {
    transform: scale(1.05);
}

.core-hr-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    padding: 28px 30px 32px;
}
.core-hr-body h3 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: #f3eefe;
}
/* full post content: paragraphs, lists and links as written in the editor */
.core-hr-text,
.core-hr-text p,
.core-hr-text li {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
}
.core-hr-text p,
.core-hr-text ul,
.core-hr-text ol {
    margin: 0 0 12px;
}
.core-hr-text ul,
.core-hr-text ol {
    padding-left: 20px;
}
.core-hr-text > :last-child {
    margin-bottom: 0;
}
.core-hr-text a {
    color: #cdbdff;
}
/* a card without an image: its text sits at the top with a little more room */
.core-hr-card--no-media .core-hr-body {
    padding-top: 34px;
}

/* feature card: text on the left, centred vertically; a tall image fills the right half */
.core-hr-card--featured {
    flex-direction: row-reverse;
    min-height: 460px;
}
.core-hr-card--featured.core-hr-card--no-media {
    min-height: 0;
}
.core-hr-card--featured .core-hr-media {
    flex: 0 0 52%;
    height: auto;
    margin: 12px 12px 12px 0;
}
.core-hr-card--featured .core-hr-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
}
.core-hr-card--featured .core-hr-body h3 {
    margin-bottom: 16px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.core-hr-card--featured .core-hr-text,
.core-hr-card--featured .core-hr-text p {
    font-size: 17px;
}
.core-hr-kicker {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.16);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #e6deff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* core hr ends */

/* testimonials start */

/* core hr ends */

/* testimonials start */

/* Clients: white band between Testimonials and the FAQ. Each logo sits on its own bordered tile;
   tiles are centred, so a short last row stays centred. */
.clients-wrap {
    position: relative;
    padding: 40px 0 100px;
    background: #ffffff;
    color: #14101f;
    overflow: hidden;
}
.clients-head {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}
.clients-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.clients-head h2 {
    margin: 0;
    font-size: 44px;
    text-wrap: balance;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #14101f;
}
.clients-head h2 .clients-line {
    display: block;
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.clients-sub {
    margin: 20px auto 0;
    max-width: 600px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(20, 16, 31, 0.68);
}

.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.clients-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 calc((100% - 80px) / 5);
    min-width: 0;
    height: 132px;
    padding: 24px 28px;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* a faint violet wash that fades in on hover */
.clients-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(90% 120% at 50% 0%, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.clients-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.testimonials-wrap {
    position: relative;
    padding: 120px 0 100px;
    background:
        radial-gradient(45% 40% at 50% 0%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 70%),
        #ffffff;
    color: #14101f;
    overflow: hidden;
}
.testimonials-head {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}
.testimonials-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.testimonials-tag i {
    font-size: 11px;
}
.testimonials-head h2 {
    margin: 0;
    font-size: 44px;
    text-wrap: balance;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #14101f;
}
.testimonials-head h2 .testimonials-line {
    display: block;
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.testimonials-board {
    position: relative;
    height: 780px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    height: 100%;
}
.testimonials-col {
    min-width: 0;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    flex-direction: column;
    animation: testimonials-up var(--duration, 40s) linear infinite;
    will-change: transform;
}
.testimonials-set {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 22px;
}
.testimonials-col--2 .testimonials-track {
    animation-direction: reverse;
    animation-delay: calc(var(--duration, 40s) * -0.35);
}
.testimonials-col--3 .testimonials-track {
    animation-delay: calc(var(--duration, 40s) * -0.6);
}

.testimonials-col:hover .testimonials-track,
.testimonials-col:focus-within .testimonials-track {
    animation-play-state: paused;
}
@keyframes testimonials-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}
.testimonials-card {
    position: relative;
    margin: 0;
    padding: 28px 26px 24px;
    border-radius: 18px;
    border: 1px solid rgba(20, 16, 31, 0.08);
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #f4f0ff 100%);
    box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 12px 32px -18px rgba(60, 40, 140, 0.25);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.testimonials-card:hover {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 18px 40px -16px rgba(106, 72, 245, 0.35);
}
.testimonials-mark {
    display: block;
    margin-bottom: 16px;
    font-size: 20px;
    color: #7c5cff;
}
.testimonials-quote {
    margin: 0;
}
.testimonials-quote p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #4a4560;
}
.testimonials-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}
.testimonials-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(20, 16, 31, 0.08);
}
.testimonials-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8a2cf5 0%, #6a48f5 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.testimonials-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.testimonials-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #14101f;
}
.testimonials-role {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #7a7590;
}
.testimonials-logo {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 18px;
}
.testimonials-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 30px;
    max-width: 140px;
    object-fit: contain;
}
.testimonials-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 340px;
    padding-bottom: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 55%, #ffffff 85%);
    pointer-events: none;
}
.testimonials-fade a {
    pointer-events: auto;
}
.testimonials-fade .banner-btn-light {
    color: #fff;
    background: #0b0619;
}
.testimonials-fade .banner-btn-light::before {
    background-color: #7c5cff;
}
.testimonials-fade .banner-btn-light:hover {
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.2);
}


/* testimonials ends */

/* faq start */

.faq-wrap {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    color: #14101f;
    /* thin rule so it separates from the white testimonials above */
    border-top: 1px solid rgba(20, 16, 31, 0.06);
}
.faq-aside {
    position: sticky;
    top: 120px;
    padding-right: 40px;
}
.faq-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.faq-aside h2 {
    margin: 0;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    color: #14101f;
}
.faq-aside h2 .faq-line {
    display: block;
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.faq-sub {
    margin: 18px 0 0;
    max-width: 420px;
    font-size: 17px;
    line-height: 1.7;
    color: #5a5570;
}
.faq-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 300px;
    margin-top: 36px;
}
.faq-tab {
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7a7590;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.faq-tab:hover {
    color: #14101f;
}
.faq-tab.is-active {
    background: rgba(124, 92, 255, 0.08);
    color: #6a48f5;
    font-weight: 500;
}
.faq-tab:focus-visible,
.faq-toggle:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 4px;
}

.faq-item {
    border-bottom: 1px solid rgba(20, 16, 31, 0.08);
}
.faq-item:first-child {
    border-top: 1px solid rgba(20, 16, 31, 0.08);
}
.faq-question {
    margin: 0;
}
.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 26px 0;
    border: 0;
    background: none;
    color: #14101f;
    font: inherit;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}
.faq-toggle:hover,
.faq-item.is-open .faq-toggle {
    color: #6a48f5;
}
.faq-icon {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(20, 16, 31, 0.12);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    margin: -0.75px 0 0 -6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.faq-icon::after {
    transform: rotate(90deg);
}
.faq-item.is-open .faq-icon {
    background: #7c5cff;
    border-color: #7c5cff;
}
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after {
    background: #fff;
}
.faq-item.is-open .faq-icon::after {
    transform: rotate(0deg);
}
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}
.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
    padding-right: 56px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.faq-item.is-open .faq-answer-inner {
    opacity: 1;
}
.faq-answer-inner > :last-child {
    margin-bottom: 26px;
}
.faq-answer-inner,
.faq-answer-inner p,
.faq-answer-inner li {
    font-size: 16px;
    line-height: 1.75;
    color: #5a5570;
}
.faq-answer-inner p,
.faq-answer-inner ul,
.faq-answer-inner ol {
    margin: 0 0 12px;
}
.faq-answer-inner a {
    color: #6a48f5;
}


/* faq ends */

/* book a demo start */

.demo-wrap {
    padding: 20px 0 120px;
    background: #ffffff;
}
.demo-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 110px 40px;
    border-radius: 32px;
    background: #08050f;
    color: #fff;
    text-align: center;
    box-shadow: 0 40px 100px -40px rgba(60, 30, 160, 0.55);
}
.demo-glow {
    position: absolute;
    left: 50%;
    bottom: -55%;
    z-index: -1;
    width: 900px;
    max-width: 140%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 44, 245, 0.55) 0%, rgba(106, 72, 245, 0.25) 35%, rgba(106, 72, 245, 0) 68%);
    transform: translateX(-50%);
    filter: blur(10px);
    animation: demo-breathe 7s ease-in-out infinite;
}
@keyframes demo-breathe {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
.demo-content {
    max-width: 760px;
    margin: 0 auto;
}
.demo-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.16);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #e6deff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.demo-content h2 {
    margin: 0;
    font-size: 52px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -1.2px;
    color: #f3eefe;
}
/* SplitText lines (homepage-animation.js) carry the white-to-lavender heading gradient */
.demo-content h2 .demo-line {
    display: block;
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.demo-text {
    max-width: 620px;
    margin: 22px auto 36px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}
.demo-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 32px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.demo-points li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
}
.demo-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(124, 92, 255, 0.22);
    border: 1px solid rgba(205, 189, 255, 0.4);
    color: #e6deff;
    font-size: 10px;
}


/* book a demo ends */

/* footer start */

.footer-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 88px 0 0;
    background:
        radial-gradient(60% 90% at 50% 125%, rgba(165, 22, 242, 0.55) 0%, rgba(124, 92, 255, 0.28) 35%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(45% 75% at 0% 0%, rgba(106, 72, 245, 0.38) 0%, rgba(106, 72, 245, 0) 65%),
        radial-gradient(40% 70% at 100% 15%, rgba(214, 51, 255, 0.24) 0%, rgba(214, 51, 255, 0) 65%),
        linear-gradient(180deg, #120a26 0%, #0a0616 55%, #170a33 100%);
    color: rgba(255, 255, 255, 0.62);
}
/* slowly drifting aurora behind everything */
.footer-wrap::after {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        radial-gradient(30% 35% at 30% 60%, rgba(124, 92, 255, 0.22) 0%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(28% 32% at 70% 45%, rgba(165, 22, 242, 0.18) 0%, rgba(165, 22, 242, 0) 70%);
    filter: blur(20px);
    animation: footer-aurora 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes footer-aurora {
    from { transform: translate3d(-6%, 4%, 0) rotate(0deg); }
    to   { transform: translate3d(6%, -4%, 0) rotate(8deg); }
}

/* a thin line of light along the top edge, brightest in the middle */
.footer-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(205, 189, 255, 0) 0%, rgba(205, 189, 255, 0.8) 50%, rgba(205, 189, 255, 0) 100%);
    box-shadow: 0 0 18px 1px rgba(165, 120, 255, 0.6);
}
/* brand on the left, three link columns on the right */
.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 64px;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    flex: 1 1 auto;
    max-width: 400px;
}
/* white pill like the header, since the logo artwork is dark */
.footer-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 10px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(124, 92, 255, 0.55);
    color: #14101f;
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
}
.footer-logo:hover {
    color: #14101f;
    text-decoration: none;
}
.footer-logo img {
    display: block;
    width: auto;
    height: 48px;
}
.footer-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.58);
}
.footer-cols {
    display: flex;
    gap: 72px;
    flex: none;
}
.footer-col {
    min-width: 140px;
}
.footer-col h4 {
    margin: 4px 0 22px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}
.footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-contact li {
    max-width: 220px;
    font-size: 15px;
    line-height: 1.6;
}
.footer-contact li + li {
    margin-top: 14px;
}
.footer-contact a,
.footer-contact span {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    word-break: break-word;
}
.footer-contact a:hover {
    color: #fff;
}

/* With Max Mega Menu not enabled on a location, its shortcode prints the plain WordPress menu list */
.footer-col ul:not(.max-mega-menu) {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-col ul:not(.max-mega-menu) ul {
    display: none;
}
.footer-col ul:not(.max-mega-menu) > li + li {
    margin-top: 14px;
}
.footer-col ul:not(.max-mega-menu) > li > a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-col ul:not(.max-mega-menu) > li > a:hover,
.footer-col ul:not(.max-mega-menu) > li.current-menu-item > a {
    color: #fff;
}

/* Max Mega Menu in the footer: strip the plugin's bar styling down to a plain vertical list. Its
   rules are ID based, so these match on the wrapper IDs and use !important where they must win. */
.footer-col [id^="mega-menu-wrap-"],
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-col [id^="mega-menu-wrap-"] .mega-menu-toggle {
    display: none !important;
}
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu {
    display: block !important;
    position: static !important;
    text-align: left !important;
}
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu > li.mega-menu-item {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu > li.mega-menu-item + li.mega-menu-item {
    margin-top: 14px !important;
}
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu > li.mega-menu-item > a.mega-menu-link {
    display: inline !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    text-align: left !important;
    transition: color 0.3s ease !important;
}
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    color: #fff !important;
    background: transparent !important;
}
/* no dropdown arrows or sub menus in the footer */
.footer-col [id^="mega-menu-wrap-"] .mega-indicator,
.footer-col [id^="mega-menu-wrap-"] ul.max-mega-menu ul.mega-sub-menu {
    display: none !important;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 26px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.78);
    font-size: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-bottom a:hover {
    color: #fff;
}


/* footer ends */

/* contact us start */

.contact-us-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0;
    background: #ffffff;
    color: #14101f;
}
/* on the home page it follows the white Book a Demo band, so its own top padding would double the gap */
.demo-wrap + .contact-us-wrap {
    padding-top: 20px;
}
/* on the Contact Us page the section sits right under the fixed header, which gets its solid
   (scrolled) look there from the start so its white menu stays readable on white */
.header-solid .header-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(14, 10, 28, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}
.contact-us-wrap--page {
    padding-top: 180px;
}
/* big title on the left, short intro on the right, as in the reference */
.contact-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
}
.contact-title {
    margin: 0;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #14101f;
}
/* the Contact Us page never splits its title, so the gradient goes on the title itself; on the home
   page the title is split and each line carries it (below) */
.contact-us-wrap--page .contact-title {
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* once the home page animation splits the title into lines (homepage-animation.js), each line
   carries the gradient itself so it keeps painting while the line moves */
.contact-title .contact-line {
    display: block;
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.contact-intro {
    max-width: 380px;
    padding-bottom: 8px;
}
.contact-intro p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #5a5570;
}
.contact-body {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
/* the page version rises in on load; on the home page it reveals on scroll (homepage-animation.js) */
.contact-us-wrap--page .contact-head {
    animation: contact-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.contact-us-wrap--page .contact-body {
    animation: contact-rise 1.2s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes contact-rise {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.contact-form-card {
    position: relative;
    flex: 1 1 62%;
    min-width: 0;
    padding: 40px;
    border-radius: 28px;
    background: #ffffff;
    color: #14101f;
    border: 1px solid rgba(20, 16, 31, 0.07);
    box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 30px 70px -35px rgba(60, 40, 140, 0.3);
}
.contact-media {
    position: relative;
    flex: 1 1 38%;
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(124, 92, 255, 0.12);
}
.contact-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(5, 3, 9, 0) 50%, rgba(5, 3, 9, 0.65) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
}
/* glass chip top right and contact details along the bottom of the image */
.contact-media-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}
.contact-media-card {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(12, 8, 22, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.contact-media-card a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    word-break: break-word;
}
.contact-media-card a:hover {
    color: #cdbdff;
}
.contact-media-card i {
    flex: none;
    width: 16px;
    color: #cdbdff;
    text-align: center;
}

/* Contact Form 7 form: label above a soft grey field, as in the reference */
.velo6hr-contact-form {
    position: relative;
}
.velo6hr-form-row {
    margin-left: -10px;
    margin-right: -10px;
}
.velo6hr-form-row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}
.velo6hr-form-col {
    margin-bottom: 20px;
}
.velo6hr-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #14101f;
}
.velo6hr-contact-form .wpcf7-form-control-wrap {
    display: block;
}
.velo6hr-contact-form .form-control {
    width: 100%;
    height: auto;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: #f4f3f7;
    color: #14101f;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.velo6hr-contact-form .form-control::placeholder {
    color: #9a96aa;
}
.velo6hr-contact-form .form-control:hover {
    background-color: #efedf5;
}
.velo6hr-contact-form .form-control:focus {
    outline: none;
    border-color: #7c5cff;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14);
}
/* dropdowns: own chevron instead of the browser's */
.velo6hr-contact-form select.form-control {
    padding-right: 44px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a5570' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    cursor: pointer;
}
.velo6hr-contact-form textarea.form-control {
    min-height: 130px;
    resize: vertical;
}
.velo6hr-contact-form .wpcf7-not-valid {
    border-color: #e5484d;
    background-color: #fff5f5;
}
.velo6hr-contact-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
    color: #e5484d;
}
.velo6hr-form-submit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.velo6hr-submit-btn {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: #0b0619;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.velo6hr-submit-btn:hover {
    background: #7c5cff;
    box-shadow: 0 12px 30px -10px rgba(124, 92, 255, 0.7);
    transform: translateY(-2px);
}
.velo6hr-submit-btn:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 3px;
}
.velo6hr-submit-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.contact-form-card .wpcf7-spinner {
    margin: 0 0 0 4px;
}
/* CF7 status message after sending */
.contact-form-card .wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #d9d4ec;
    background: #f8f6ff;
    font-size: 14px;
    color: #14101f;
}
.contact-form-card .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46a758;
    background: #f1faf2;
}
.contact-form-card .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-card .wpcf7 form.failed .wpcf7-response-output,
.contact-form-card .wpcf7 form.spam .wpcf7-response-output {
    border-color: #e5484d;
    background: #fff5f5;
}

/* Velo6Hr custom honeypot: out of sight for people, still in the form for bots */
.velo6hr-contact-form .velo6hr-honeypot-wrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* contact details under the form and image (Contact Us page): phone, email and address from General
   Info in three even columns, divided by hairlines */
.contact-info {
    display: flex;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(20, 16, 31, 0.08);
}
.contact-info-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 32px 32px 4px;
    border-left: 1px solid rgba(20, 16, 31, 0.08);
}
.contact-info-item:first-child {
    padding-left: 0;
    border-left: 0;
}
.contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(124, 92, 255, 0.08);
    color: #6a48f5;
    font-size: 15px;
}
.contact-info-label {
    color: #7a7590;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
}
.contact-info-value {
    color: #14101f;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    text-decoration: none;
    word-break: break-word;
}
a.contact-info-value {
    transition: color 0.3s ease;
}
a.contact-info-value:hover {
    color: #6a48f5;
    text-decoration: none;
}


/* contact us ends */

/* default page start */

/* dark hero under the fixed header */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 190px 0 110px;
    background:
        radial-gradient(50% 70% at 85% 0%, rgba(124, 92, 255, 0.28) 0%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(165, 22, 242, 0.16) 0%, rgba(165, 22, 242, 0) 70%),
        linear-gradient(180deg, #0d0918 0%, #07050d 100%);
    color: #fff;
    text-align: center;
}
/* with a featured image the hero leaves room for it to overlap into */
.page-hero--with-image {
    padding-bottom: 190px;
}
/* page with no content yet: the hero fills the screen and carries a "coming soon" message */
.page-hero--empty {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 150px 0 110px;
}
.page-hero--empty > .custom-container {
    width: 100%;
}
.page-hero--empty .page-hero-glow {
    bottom: -45%;
    animation: page-glow-breathe 7s ease-in-out infinite;
}
@keyframes page-glow-breathe {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}
.page-soon-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.14);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #e6deff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* small live dot with a ring that keeps pulsing out of it */
.page-soon-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a98cff;
}
.page-soon-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #a98cff;
    animation: page-soon-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes page-soon-ping {
    from { transform: scale(1);   opacity: 0.9; }
    to   { transform: scale(2.8); opacity: 0; }
}
.page-soon-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    margin-top: 40px;
}
.page-soon-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #e6deff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}
.page-soon-link i {
    font-size: 13px;
    transition: transform 0.3s ease;
}
.page-soon-link:hover {
    color: #fff;
    text-decoration: none;
}
.page-soon-link:hover i {
    transform: translateX(4px);
}

.page-hero-glow {
    position: absolute;
    left: 50%;
    bottom: -60%;
    z-index: -1;
    width: 900px;
    max-width: 140%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 44, 245, 0.35) 0%, rgba(106, 72, 245, 0.12) 40%, rgba(106, 72, 245, 0) 70%);
    transform: translateX(-50%);
    filter: blur(10px);
    pointer-events: none;
}
/* faint grain, like the home page hero */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}
.page-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    animation: page-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes page-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Yoast breadcrumbs as a soft pill */
.page-breadcrumbs #breadcrumbs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0 0 26px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
}
.page-breadcrumbs #breadcrumbs a {
    color: #cdbdff;
    font-size: inherit;
    text-decoration: none;
}
.page-breadcrumbs #breadcrumbs a:hover {
    color: #fff;
}
.page-breadcrumbs .breadcrumb-sep {
    margin: 0 6px;
    opacity: 0.4;
}
.page-hero .page-title {
    margin: 0;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-intro {
    max-width: 640px;
    margin: 22px auto 0;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}
.page-meta {
    margin: 22px 0 0;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.45);
}

/* white reading area */
.page-body {
    position: relative;
    padding: 90px 0 120px;
    background: #ffffff;
    color: #14101f;
}
.page-hero--with-image + .page-body {
    padding-top: 0;
}
/* featured image overlaps the hero */
.page-feature {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: -130px auto 80px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 40px 90px -40px rgba(30, 15, 80, 0.6);
    animation: page-rise 1.2s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-feature img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
}

/* typography for whatever is written in the editor */
.page-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #3d3852;
}
.page-content > :first-child {
    margin-top: 0;
}
.page-content > :last-child {
    margin-bottom: 0;
}
.page-content p,
.page-content li {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.page-content p {
    margin: 0 0 1.3em;
}
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin: 2em 0 0.7em;
    color: #14101f;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.page-content h2 {
    font-size: 34px;
    letter-spacing: -0.5px;
}
.page-content h3 {
    font-size: 26px;
}
.page-content h4 {
    font-size: 21px;
}
.page-content h5,
.page-content h6 {
    font-size: 18px;
}
.page-content a {
    color: #6a48f5;
    font-size: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(106, 72, 245, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.page-content a:hover {
    color: #4b2fd6;
    text-decoration-color: currentColor;
}
.page-content strong {
    color: #14101f;
}
.page-content ul,
.page-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.4em;
}
.page-content li {
    margin-bottom: 0.45em;
}
.page-content ul li::marker {
    color: #7c5cff;
}
.page-content ol li::marker {
    color: #7c5cff;
    font-weight: 600;
}
.page-content blockquote {
    margin: 2em 0;
    padding: 6px 0 6px 26px;
    border-left: 3px solid #7c5cff;
    font-size: 22px;
    line-height: 1.6;
    color: #14101f;
}
.page-content blockquote p:last-child {
    margin-bottom: 0;
}
.page-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-style: normal;
    color: #7a7590;
}
.page-content img,
.page-content video,
.page-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}
.page-content figure {
    margin: 2em 0;
}
.page-content figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: #7a7590;
    text-align: center;
}
.page-content hr {
    margin: 3em 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 92, 255, 0) 0%, rgba(124, 92, 255, 0.4) 50%, rgba(124, 92, 255, 0) 100%);
}
.page-content table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: 16px;
}
.page-content th,
.page-content td {
    padding: 12px 14px;
    border-bottom: 1px solid #ebe8f2;
    text-align: left;
}
.page-content th {
    color: #14101f;
    font-weight: 600;
    background: #f7f5fc;
}
.page-content code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #f4f1ff;
    color: #4b2fd6;
    font-size: 0.88em;
}
.page-content pre {
    margin: 2em 0;
    padding: 20px 22px;
    overflow-x: auto;
    border-radius: 16px;
    background: #0d0918;
    color: #e6deff;
    font-size: 15px;
}
.page-content pre code {
    padding: 0;
    background: none;
    color: inherit;
}
/* block editor buttons in the brand style */
.page-content .wp-block-button__link {
    padding: 14px 28px;
    border-radius: 999px;
    background: #0b0619;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.page-content .wp-block-button__link:hover {
    background: #7c5cff;
    color: #fff;
}
.page-content .alignwide {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.page-links {
    display: flex;
    gap: 8px;
    margin-top: 40px;
    font-size: 15px;
}
.page-comments {
    max-width: 760px;
    margin: 80px auto 0;
    padding-top: 48px;
    border-top: 1px solid #ebe8f2;
}


/* default page: light theme (page.php sets .page-wrap--light) */
.page-wrap--light .page-hero {
    background:
        radial-gradient(50% 70% at 85% 0%, rgba(124, 92, 255, 0.14) 0%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(165, 22, 242, 0.08) 0%, rgba(165, 22, 242, 0) 70%),
        #ffffff;
    color: #14101f;
}
/* a hairline between the hero and the white reading area */
.page-wrap--light .page-hero:not(.page-hero--empty) {
    border-bottom: 1px solid rgba(20, 16, 31, 0.06);
}
.page-wrap--light .page-hero::after {
    display: none;
}
.page-wrap--light .page-hero-glow {
    background: radial-gradient(circle, rgba(138, 44, 245, 0.16) 0%, rgba(106, 72, 245, 0.06) 40%, rgba(106, 72, 245, 0) 70%);
}
.page-wrap--light .page-breadcrumbs #breadcrumbs {
    background: rgba(124, 92, 255, 0.08);
    border-color: rgba(124, 92, 255, 0.25);
    color: #7a7590;
}
.page-wrap--light .page-breadcrumbs #breadcrumbs a {
    color: #6a48f5;
}
.page-wrap--light .page-breadcrumbs #breadcrumbs a:hover {
    color: #14101f;
}
.page-wrap--light .page-hero .page-title {
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.page-wrap--light .page-intro {
    color: #5a5570;
}
.page-wrap--light .page-meta {
    color: #9a96aa;
}
.page-wrap--light .page-soon-tag {
    background: rgba(124, 92, 255, 0.08);
    border-color: rgba(124, 92, 255, 0.3);
    color: #6a48f5;
}
.page-wrap--light .page-soon-dot,
.page-wrap--light .page-soon-dot::after {
    background: #7c5cff;
    border-color: #7c5cff;
}
.page-wrap--light .page-soon-dot::after {
    background: transparent;
}
/* the shared white button would vanish on white: dark with a violet icon badge here */
.page-wrap--light .banner-btn-light {
    color: #fff;
    background: #0b0619;
}
.page-wrap--light .banner-btn-light::before {
    background-color: #7c5cff;
}
.page-wrap--light .banner-btn-light:hover {
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.2);
}
.page-wrap--light .page-soon-link {
    color: #14101f;
}
.page-wrap--light .page-soon-link:hover {
    color: #6a48f5;
}
.page-wrap--light .page-feature {
    box-shadow: 0 40px 90px -40px rgba(60, 40, 140, 0.4);
}

/* default page ends */

/* single post start */

/* clean white editorial page; body text styles come from .page-content (default page) */
.post-wrap {
    background: #ffffff;
    color: #14101f;
}
/* thin reading-progress line just under the top of the window */
.post-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 3px;
    pointer-events: none;
}
.post-progress-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #a516f2 0%, #7c5cff 100%);
    transform: scaleX(0);
    transform-origin: left;
}

.post-head {
    padding: 180px 0 56px;
    background:
        radial-gradient(45% 80% at 50% 0%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 70%),
        #ffffff;
    text-align: center;
}
.post-head-inner {
    max-width: 860px;
    margin: 0 auto;
    animation: page-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.post-wrap .page-breadcrumbs #breadcrumbs {
    background: rgba(124, 92, 255, 0.08);
    border-color: rgba(124, 92, 255, 0.25);
    color: #7a7590;
}
.post-wrap .page-breadcrumbs #breadcrumbs a {
    color: #6a48f5;
}
.post-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}
.post-cat {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.28);
    color: #6a48f5;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.post-cat:hover {
    background: #7c5cff;
    color: #fff;
    text-decoration: none;
}
.post-title {
    margin: 0;
    font-size: clamp(36px, 5.2vw, 64px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #14101f;
}
/* standfirst: the excerpt as a short summary under the headline */
.post-dek {
    max-width: 680px;
    margin: 22px auto 0;
    font-size: 20px;
    line-height: 1.6;
    color: #5a5570;
}
.post-feature {
    max-width: 1100px;
    margin: 0 auto 72px;
    animation: page-rise 1.2s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.post-feature img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    border-radius: 24px;
}
.post-feature figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: #7a7590;
    text-align: center;
}

/* the reading column, centred */
.post-layout {
    display: flex;
    justify-content: center;
}
.post-content {
    flex: 0 1 760px;
    margin: 0;
    min-width: 0;
}
/* the opening paragraph reads as a lead */
.post-content > p:first-of-type {
    font-size: 21px;
    line-height: 1.7;
    color: #14101f;
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid #ebe8f2;
}
.post-tags a {
    padding: 6px 14px;
    border-radius: 999px;
    background: #f4f3f7;
    color: #5a5570;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.post-tags a:hover {
    background: #7c5cff;
    color: #fff;
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 860px;
    margin: 72px auto 0;
    padding-bottom: 96px;
}
.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 26px;
    border-radius: 18px;
    border: 1px solid #ebe8f2;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.post-nav-link--next {
    text-align: right;
}
.post-nav-link:hover {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 18px 40px -24px rgba(60, 40, 140, 0.35);
    text-decoration: none;
}
.post-nav-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6a48f5;
}
.post-nav-title {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #14101f;
}

/* related posts on a soft tint, so the article clearly ends */
.post-related {
    padding: 90px 0 110px;
    background: #f7f5fc;
    border-top: 1px solid #ebe8f2;
}
.post-related-title {
    margin: 0 0 36px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #14101f;
}
.post-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #ebe8f2;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.post-card:hover {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 24px 50px -28px rgba(60, 40, 140, 0.4);
    transform: translateY(-4px);
    text-decoration: none;
}
.post-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #ece6ff 0%, #f7f5fc 100%);
}
.post-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover .post-card-media img {
    transform: scale(1.05);
}
.post-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 26px;
}
.post-card-date {
    font-size: 13px;
    color: #9a96aa;
}
.post-card-body h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
    color: #14101f;
}
.post-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #6a48f5;
}
.post-card-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.post-card:hover .post-card-more i {
    transform: translateX(4px);
}
.post-comments {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.post-related + .custom-container .post-comments {
    padding-top: 80px;
}


/* single post ends */

/* inner about us start */

/* full-bleed, full-height panel: the section carries the background, edge to edge, no rounding */
.inner-about-us-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding: 130px 0 64px;
    background:
        radial-gradient(55% 70% at 85% 15%, rgba(124, 92, 255, 0.28) 0%, rgba(124, 92, 255, 0) 70%),
        radial-gradient(45% 60% at 0% 100%, rgba(165, 22, 242, 0.14) 0%, rgba(165, 22, 242, 0) 70%),
        linear-gradient(160deg, #15102a 0%, #0b0817 55%, #08060f 100%);
    color: #fff;
}
.inner-about-us-wrap > .custom-container {
    display: flex;
}
/* faint grain over the whole section */
.inner-about-us-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}
/* Layout (as the reference): the big title anchored bottom left, the content and button bottom right */
.about-banner {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px 64px;
    width: 100%;
}
.about-banner-title {
    flex: 0 1 62%;
    min-width: 0;
}

/* featured image as the background: covers the section, slow zoom, with a shade that is darkest
   behind the text (left) and lets the picture show on the right */
.about-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.about-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: about-zoom 22s ease-out both;
}
.about-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 5, 18, 0.6) 0%, rgb(8 5 18 / 3%) 28%, rgb(8 5 18 / 53%) 55%, rgba(8, 5, 18, 0.9) 100%), linear-gradient(90deg, rgba(8, 5, 18, 0.55) 0%, rgba(8, 5, 18, 0) 55%), radial-gradient(60% 80% at 0% 100%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%);
}
@keyframes about-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}
.inner-about-us-wrap--bg .about-banner-glow {
    display: none;
}
.about-banner-glow {
    position: absolute;
    top: 8%;
    right: -6%;
    z-index: -1;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(138, 44, 245, 0.4), rgba(138, 44, 245, 0));
    filter: blur(20px);
    pointer-events: none;
}

.about-banner-title h1 {
    font-size: 70px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0;
    font-weight: 600;
    color: #f3eefe;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
}
.about-banner-title h1 .about-line {
    display: block;
    background: linear-gradient(170deg, #ffffff 0%, #f1ecff 50%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.about-banner-body {
    display: flex;
    flex: 0 1 380px;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-bottom: 10px;
}
.about-banner-text,
.about-banner-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}
.about-banner-text p + p {
    margin-top: 12px;
}
.about-banner-text a {
    color: #cdbdff;
}
/* outlined pill with a filled arrow badge */
.about-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.about-banner-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #7c5cff;
    color: #fff;
    font-size: 13px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.about-banner-btn:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(205, 189, 255, 0.6);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.16);
}
.about-banner-btn:hover .about-banner-btn-icon {
    background: #fff;
    color: #14101f;
    transform: translateX(3px);
}


/* While the intro is waiting for its script (html.js-anim, set in the head by functions.php), keep the
   hero text out of sight so it doesn't show, vanish and then animate in. aboutuspageanimation.js makes
   it visible the moment its timeline is ready; if the script never runs, it appears after 3s anyway. */
html.js-anim .about-banner-title,
html.js-anim .about-banner-body {
    visibility: hidden;
    animation: about-unhide 0s 3s forwards;
}
@keyframes about-unhide {
    to {
        visibility: visible;
    }
}

/* inner about us ends */

/* who are we start */

/* white section after the dark About hero: tag and title on the left, the story on the right */
.who-are-we-wrap {
    position: relative;
    padding: 130px 0;
    background:
        radial-gradient(40% 60% at 0% 0%, rgba(124, 92, 255, 0.08) 0%, rgba(124, 92, 255, 0) 70%),
        #ffffff;
    color: #14101f;
}
.who-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px 96px;
}
/* the heading stays in view while a longer story scrolls past */
.who-head {
    position: sticky;
    top: 130px;
    flex: 0 1 42%;
    min-width: 0;
}
/* same pill as the home page .why-choose-tag (both on white) */
.who-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.3);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.who-title {
    margin: 0;
    font-size: 56px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #14101f;
    text-wrap: balance;
}
.who-title .who-line {
    background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.who-title .who-line {
    display: block;
}
.who-content {
    flex: 0 1 52%;
    min-width: 0;
    padding-top: 44px;
}
.who-content,
.who-content p,
.who-content li {
    font-size: 18px;
    line-height: 1.8;
    color: #4a4560;
}
.who-content p {
    margin: 0 0 24px;
}
.who-content > :last-child {
    margin-bottom: 0;
}
.who-content > p:first-child {
    font-size: 22px;
    line-height: 1.6;
    color: #14101f;
}
.who-content strong {
    color: #14101f;
}
.who-content a {
    color: #6a48f5;
}
.who-content ul,
.who-content ol {
    margin: 0 0 16px;
    padding-left: 30px;
}
.who-content li::marker {
    color: #7c5cff;
}


/* who are we ends */

/* inner why choose start */

.inner-why-choose-wrap {
    position: relative;
    overflow: clip;
    isolation: isolate;
    padding: 130px 0;
    background: linear-gradient(180deg, #0d0918 0%, #07050d 100%);
    color: #fff;
}
.inner-why-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px 80px;
}
.inner-why-head {
    position: sticky;
    top: 110px;
    flex: 0 1 38%;
    min-width: 0;
}
.inner-why-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.35);
    color: #cdbdff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.inner-why-title {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #f3eefe;
    text-wrap: balance;
}
.inner-why-title .inner-why-line {
    background: linear-gradient(100deg, #ffffff 0%, #ece6ff 45%, #b7a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.inner-why-title .inner-why-line {
    display: block;
}
.inner-why-sub {
    margin: 22px 0 0;
    max-width: 420px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

/* Numbered list, kept minimal: a quiet number, the title with a small line icon, the text, and a hairline
   between rows. Hover draws a violet line along the row's top edge and lifts the title colour. */
.inner-why-list {
    flex: 0 1 56%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inner-why-item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 36px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.inner-why-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.inner-why-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #a516f2 0%, #7c5cff 60%, rgba(124, 92, 255, 0) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.inner-why-item:hover::before {
    transform: scaleX(1);
}
.inner-why-num {
    flex: none;
    width: 28px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.inner-why-item:hover .inner-why-num {
    color: #cdbdff;
}
.inner-why-body {
    flex: 1 1 auto;
    min-width: 0;
}
.inner-why-body h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f3eefe;
    transition: color 0.3s ease;
}
.inner-why-item:hover .inner-why-body h3 {
    color: #cdbdff;
}
.inner-why-text,
.inner-why-text p {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.6);
}
.inner-why-text p + p {
    margin-top: 10px;
}


/* inner why choose ends */

/* our approach start */

/* light section after the dark "Why choose": big title left, intro and button right, then numbered
   columns divided by thin vertical lines (as the reference) */
.our-approach-wrap {
    padding: 130px 0 120px;
    background: #f6f5f9;
    color: #14101f;
}
.approach-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 80px;
    margin-bottom: 110px;
}
.approach-title {
    flex: 0 1 58%;
    min-width: 0;
    margin: 0;
    font-size: 64px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.035em;
    color: #14101f;
    text-wrap: balance;
}
.approach-title .approach-line {
    display: block;
}
.approach-intro {
    flex: 0 1 320px;
    padding-top: 10px;
}
.approach-intro p {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4560;
}
/* pill button with a dark arrow badge */
.approach-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    border: 1px solid rgba(20, 16, 31, 0.15);
    background: #fff;
    color: #14101f;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.approach-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #14101f;
    color: #fff;
    font-size: 12px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.approach-btn:hover {
    color: #14101f;
    text-decoration: none;
    border-color: rgba(124, 92, 255, 0.45);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}
.approach-btn:hover .approach-btn-icon {
    background: #7c5cff;
    transform: translateX(3px);
}

/* label on the left; with a slider, the arrows on the right */
.approach-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.approach-nav {
    display: flex;
    gap: 8px;
}
.approach-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(20, 16, 31, 0.15);
    background: #fff;
    color: #14101f;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.approach-arrow:hover:not(:disabled) {
    background: #14101f;
    border-color: #14101f;
    color: #fff;
}
.approach-arrow:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 3px;
}
.approach-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
.approach-label {
    display: block;
    color: #7a7590;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.approach-steps {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* each step: a thin line on its left, number, line icon, title, text */
.approach-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 32px 8px 22px;
}
.approach-step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(20, 16, 31, 0.14);
    /* drawn downwards on scroll: aboutuspageanimation.js tweens --line from 0 to 1 */
    transform: scaleY(var(--line, 1));
    transform-origin: top;
}
.approach-num {
    display: block;
    margin-bottom: 36px;
    color: #7a7590;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
/* the featured image as a line illustration in the theme ink (masked, so any single-colour icon works) */
.approach-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin-bottom: 36px;
    background-color: #14101f;
    -webkit-mask: var(--icon) left center / contain no-repeat;
    mask: var(--icon) left center / contain no-repeat;
    transition: background-color 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.approach-step:hover .approach-icon {
    background-color: #7c5cff;
}
/* the lift only in the plain row (four steps or fewer), not in the horizontal slider */
.approach-steps:not(.approach-steps--slider) .approach-step:hover .approach-icon {
    transform: translateY(-4px);
}

/* More than four steps: the same row becomes a horizontal slider. Each step keeps a quarter of the
   width, the rest scroll in from the right; it snaps to a step, scrolls by swipe / trackpad / drag or
   the arrows (aboutuspageanimation.js), and hides its scrollbar. */
.approach-steps--slider {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
}
.approach-steps--slider::-webkit-scrollbar {
    display: none;
}
.approach-steps--slider:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 6px;
}
.approach-steps--slider.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}
.approach-steps--slider > .approach-step {
    flex: 0 0 25%;
    scroll-snap-align: start;
}
.approach-step h3 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #14101f;
}
.approach-text,
.approach-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #5a5570;
}
.approach-text p + p {
    margin-top: 10px;
}


/* phone: one per row */


/* our approach ends */

/* inner cta start */

.inner-cta-wrap {
    padding: 100px 0;
    background: #ffffff;
}
.inner-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 400px;
    padding: 72px 80px;
    border-radius: 28px;
    background: #1aa0ff url("assets/img/cta-section-bg.webp") 85% 40% / cover no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 24px 50px -30px rgba(15, 60, 140, 0.35);
    color: #0b1f4d;
    text-align: left;
}
.inner-cta-title {
    max-width: 640px;
    margin: 0;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #0b1f4d;
    text-wrap: balance;
}
.inner-cta-title .inner-cta-line {
    display: block;
}
.inner-cta-text {
    max-width: 440px;
    margin: 18px 0 34px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(11, 31, 77, 0.72);
}
.inner-cta .banner-btn-light {
    color: #fff;
    background: #0b0619;
}
.inner-cta .banner-btn-light::before {
    background-color: #7c5cff;
}
.inner-cta .banner-btn-light:hover {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
}


/* inner cta ends */

/* features page start */

/* hero: light, minimal and editorial - a small label, a large left-aligned title, a hairline, and the
   intro set into the right-hand column beneath it */
.features-hero {
    padding: 190px 0 100px;
    background: #ffffff;
    color: #14101f;
}
.features-hero-tag {
    display: block;
    margin-bottom: 28px;
    color: #7a7590;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.features-hero-title {
    max-width: 960px;
    margin: 0;
    font-size: 64px;
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #14101f;
    text-wrap: balance;
}
.features-hero-title .features-hero-line {
    display: block;
}
.features-hero-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(20, 16, 31, 0.12);
}
.features-hero-intro {
    flex: 0 1 460px;
}
.features-hero-intro p {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: #5a5570;
}

.features-list-wrap {
    padding: 40px 0 60px;
    background: #ffffff;
    color: #14101f;
}
.features-cards {
    margin-bottom: -24px;
}
.features-col {
    display: flex;
    margin-bottom: 24px;
}
.features-row {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    scroll-margin-top: 120px;
}
.features-row-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;
    background: #f1eef9;
}
.features-row-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.features-row:hover .features-row-media img {
    transform: scale(1.04);
}
.features-row-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 16, 31, 0.12);
}
.features-row-num {
    display: block;
    margin-bottom: 14px;
    color: #7a7590;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.features-row-num em {
    font-style: normal;
    color: #b3aec4;
}
.features-row-title {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #14101f;
    text-wrap: balance;
}
.features-row-title .features-row-line {
    display: block;
}
.features-row-text, .features-row-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5a5570;
}
.features-row-text p + p {
    margin-top: 10px;
}
/* the summary held to six lines, ending in "..." */
.features-row-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}
.features-row-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(20, 16, 31, 0.25);
    color: #14101f;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.features-row-link span[aria-hidden] {
    display: inline-block;
    transition: transform 0.3s ease;
}
.features-row-link:hover {
    color: #6a48f5;
    border-color: #6a48f5;
    text-decoration: none;
}
.features-row-link:hover span[aria-hidden] {
    transform: translateX(4px);
}
.features-list-wrap .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.features-list-wrap + .inner-cta-wrap {
    background: #ffffff;
    padding-top: 60px;
}


/* phone: one column */


/* keep the hero text out of sight until its intro is ready (see the About banner); featurespageanimation.js
   makes it visible, and it shows after 3s regardless if the script never runs */
html.js-anim .features-hero-inner {
    visibility: hidden;
    animation: about-unhide 0s 3s forwards;
}

/* features page ends */

/* single feature start */

.feature-single {
    padding-bottom: 40px;
    background: #ffffff;
}
.feature-single-hero {
    padding-bottom: 64px;
}
.feature-single-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
    padding: 5px 20px 5px 5px;
    border: 1px solid rgba(20, 16, 31, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: #14101f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.feature-single-back-icon {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #f1eef9;
    color: #6a48f5;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.feature-single-back-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-single-back-icon svg + svg {
    transform: translateX(28px);
}
.feature-single-back-text {
    font-size: 14px;
    letter-spacing: -0.005em;
}
.feature-single-back:hover,
.feature-single-back:focus-visible {
    border-color: rgba(106, 72, 245, 0.35);
    box-shadow: 0 8px 24px -12px rgba(106, 72, 245, 0.45);
    color: #14101f;
    text-decoration: none;
}
.feature-single-back:focus-visible {
    outline: 2px solid #6a48f5;
    outline-offset: 3px;
}
.feature-single-back:hover .feature-single-back-icon,
.feature-single-back:focus-visible .feature-single-back-icon {
    background: #6a48f5;
    color: #ffffff;
}
.feature-single-back:hover .feature-single-back-icon svg,
.feature-single-back:focus-visible .feature-single-back-icon svg {
    transform: translateX(-28px);
}
.feature-single-back:hover .feature-single-back-icon svg + svg,
.feature-single-back:focus-visible .feature-single-back-icon svg + svg {
    transform: translateX(0);
}
.feature-single-hero .features-hero-title {
    max-width: 860px;
    font-size: 64px;
    line-height: 1.05;
}

.feature-single-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 64px;
}
.feature-single-head .features-hero-title {
    flex: 0 1 auto;
}
.feature-single-head .banner-btn-light {
    flex: 0 0 auto;
    margin-bottom: 6px;
}
.feature-single .banner-btn-light {
    color: #fff;
    background: #0b0619;
}
.feature-single .banner-btn-light::before {
    background-color: #7c5cff;
}
.feature-single .banner-btn-light:hover {
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.2);
}

.feature-single-media {
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #f1eef9;
    aspect-ratio: 16 / 7;
}
.feature-single-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-single-body {
    padding-top: 110px;
}
.feature-single-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 56px;
}
.feature-single-aside {
    flex: 0 0 260px;
}
.feature-single-aside-inner {
    position: sticky;
    top: 120px;
}
.feature-single-label {
    display: block;
    margin-bottom: 18px;
    color: #7a7590;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.feature-single-index {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(20, 16, 31, 0.12);
}
.feature-single-index li {
    margin: 0;
    border-bottom: 1px solid rgba(20, 16, 31, 0.12);
}
.feature-single-index a {
    position: relative;
    display: block;
    padding: 14px 0 14px 18px;
    color: #7a7590;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.3s ease;
}
.feature-single-index a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #6a48f5;
    transform: scale(0);
    transition: transform 0.3s ease;
}
.feature-single-index a:hover {
    color: #14101f;
    text-decoration: none;
}
.feature-single-index a.is-current {
    color: #14101f;
    font-weight: 500;
}
.feature-single-index a.is-current::before {
    transform: scale(1);
}

/* the feature's text (block editor content) */
.feature-single-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 780px;
    color: #4a4560;
}
.feature-single-content > :first-child {
    margin-top: 0;
}
.feature-single-content > :last-child {
    margin-bottom: 0;
}
.feature-single-content p {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.75;
    color: #4a4560;
}
/* the heading the content opens with leads the article, a step larger than the headings inside it */
.feature-single-content > :is(h2, h3):first-child {
    margin-bottom: 28px;
    font-size: 36px;
    line-height: 1.15;
}
/* the opening paragraph a touch larger and darker, as an intro */
.feature-single-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.7;
    color: #14101f;
}
.feature-single-content a {
    color: #6a48f5;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.feature-single-content strong {
    font-weight: 600;
    color: #14101f;
}
.feature-single-content h2,
.feature-single-content h3,
.feature-single-content h4 {
    margin: 64px 0 24px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #14101f;
    text-wrap: balance;
}
.feature-single-content h4 {
    font-size: 22px;
}
/* lists: hairline rows, numbered, each bold label on its own line above its text */
.feature-single-content ul,
.feature-single-content ol {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    counter-reset: feature-point;
    border-top: 1px solid rgba(20, 16, 31, 0.12);
}
.feature-single-content li {
    position: relative;
    margin: 0;
    padding: 20px 0 20px 56px;
    border-bottom: 1px solid rgba(20, 16, 31, 0.12);
    counter-increment: feature-point;
    font-family: "Archivo", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #5a5570;
}
.feature-single-content li::before {
    content: counter(feature-point, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 22px;
    color: #b3aec4;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.feature-single-content li > strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 500;
    color: #14101f;
}

.feature-more {
    padding: 100px 0;
    background: #ffffff;
}
.feature-more + .inner-cta-wrap {
    padding-top: 0;
    background: #ffffff;
}
.feature-more-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    margin-bottom: 40px;
}
.feature-more-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #14101f;
}
.feature-more-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 20px;
    border: 1px solid rgba(20, 16, 31, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: #14101f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.feature-more-all span {
    font-size: 14px;
}
.feature-more-all:hover,
.feature-more-all:focus-visible {
    border-color: rgba(106, 72, 245, 0.35);
    box-shadow: 0 8px 24px -12px rgba(106, 72, 245, 0.45);
    color: #14101f;
    text-decoration: none;
}

/* the round arrow, in the pill and on each card: on hover the circle fills violet and the arrow slides
   out to the right while a second one follows it in from the left */
.feature-more-icon {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #f1eef9;
    color: #6a48f5;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.feature-more-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-more-icon svg + svg {
    transform: translateX(-28px);
}
.feature-more-all:hover .feature-more-icon,
.feature-more-all:focus-visible .feature-more-icon,
.feature-more-card:hover .feature-more-icon,
.feature-more-card:focus-visible .feature-more-icon {
    background: #6a48f5;
    color: #ffffff;
}
.feature-more-all:hover .feature-more-icon svg,
.feature-more-all:focus-visible .feature-more-icon svg,
.feature-more-card:hover .feature-more-icon svg,
.feature-more-card:focus-visible .feature-more-icon svg {
    transform: translateX(28px);
}
.feature-more-all:hover .feature-more-icon svg + svg,
.feature-more-all:focus-visible .feature-more-icon svg + svg,
.feature-more-card:hover .feature-more-icon svg + svg,
.feature-more-card:focus-visible .feature-more-icon svg + svg {
    transform: translateX(0);
}

.feature-more-grid {
    display: flex;
    gap: 24px;
}
.feature-more-card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(20, 16, 31, 0.09);
    border-radius: 24px;
    background: #ffffff;
    color: #14101f;
    text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}
.feature-more-card:hover,
.feature-more-card:focus-visible {
    color: #14101f;
    text-decoration: none;
    border-color: rgba(106, 72, 245, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -30px rgba(20, 16, 31, 0.3);
}
.feature-more-all:focus-visible,
.feature-more-card:focus-visible {
    outline: 2px solid #6a48f5;
    outline-offset: 3px;
}
.feature-more-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #f1eef9;
}
.feature-more-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-more-card:hover .feature-more-media img {
    transform: scale(1.05);
}
.feature-more-body {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 8px 12px 10px;
}
.feature-more-text {
    min-width: 0;
}
.feature-more-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #14101f;
}
/* the description held to two lines whatever its length */
.feature-more-desc {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 15px;
    line-height: 1.6;
    color: #5a5570;
}


/* single feature ends */

/* testimonials page start */

/* page-testimonials.php: the Features page hero (.features-hero), then the testimonials three to a row
   on white, in the look of the home page cards, and a plain white dialog for the full quote */
.testimonials-page-hero {
    padding-bottom: 72px;
}
.testimonials-page {
    padding: 0 0 110px;
    background: #ffffff;
    color: #14101f;
}
.testimonials-page + .testimonials-dialog + .inner-cta-wrap,
.testimonials-page + .inner-cta-wrap {
    padding-top: 0;
    background: #ffffff;
}
.testimonials-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.testimonials-page-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 30px 30px 28px;
    border: 1px solid rgba(20, 16, 31, 0.09);
    border-radius: 24px;
    background: linear-gradient(150deg, #ffffff 0%, #ffffff 60%, #f6f2ff 100%);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonials-page-card:hover {
    border-color: rgba(106, 72, 245, 0.28);
    box-shadow: 0 28px 50px -32px rgba(60, 40, 140, 0.35);
    transform: translateY(-4px);
}
.testimonials-page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
    margin-bottom: 26px;
}
.testimonials-page-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 32px;
}
.testimonials-page-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 40px;
    object-fit: contain;
}
.testimonials-page-mark {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    color: #c9bcff;
}
.testimonials-page-quote {
    flex: 1 1 auto;
    margin: 0;
}
.testimonials-page-quote p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #2e2a40;
}
.testimonials-page-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid rgba(106, 72, 245, 0.35);
    background: none;
    color: #6a48f5;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.testimonials-page-more span[aria-hidden] {
    display: inline-block;
    transition: transform 0.3s ease;
}
.testimonials-page-more:hover {
    border-color: #6a48f5;
}
.testimonials-page-more:hover span[aria-hidden] {
    transform: translateX(4px);
}
.testimonials-page-more:focus-visible,
.testimonials-dialog-close:focus-visible {
    outline: 2px solid #6a48f5;
    outline-offset: 3px;
}
.testimonials-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.testimonials-page-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 16, 31, 0.08);
}
.testimonials-page-avatar {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(20, 16, 31, 0.08);
}
.testimonials-page-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8a2cf5 0%, #6a48f5 100%);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
}
.testimonials-page-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.testimonials-page-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #14101f;
}
.testimonials-page-role {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #7a7590;
}
.testimonials-page-empty {
    margin: 0;
    font-size: 18px;
    color: #5a5570;
}

/* the dialog: a plain white panel over a dimmed, blurred page */
.testimonials-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    pointer-events: none;
}
.testimonials-dialog.is-open {
    visibility: visible;
    pointer-events: auto;
}
.testimonials-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(214, 211, 226, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.testimonials-dialog-box {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 48px 40px 44px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 40px 80px -40px rgba(20, 16, 31, 0.35);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonials-dialog.is-open .testimonials-dialog-backdrop,
.testimonials-dialog.is-open .testimonials-dialog-box {
    opacity: 1;
}
.testimonials-dialog.is-open .testimonials-dialog-box {
    transform: none;
}
.testimonials-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f1f8;
    color: #14101f;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.testimonials-dialog-close svg {
    width: 15px;
    height: 15px;
}
.testimonials-dialog-close:hover {
    background: #6a48f5;
    color: #ffffff;
}
.testimonials-dialog-box .testimonials-page-mark {
    margin: 0 0 32px;
}
.testimonials-dialog-box .testimonials-page-mark svg {
    width: 26px;
    height: 26px;
}
.testimonials-dialog-quote {
    margin: 0 0 32px;
}
.testimonials-dialog-quote p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #14101f;
}
.testimonials-dialog-box .testimonials-page-name {
    margin: 0;
    font-family: "Helvetica Neue Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #14101f;
}
.testimonials-dialog-box .testimonials-page-role {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8a85a0;
}
html.testimonials-dialog-open,
html.testimonials-dialog-open body {
    overflow: hidden;
}


/* testimonials page ends */

/* resources page start */

/* page-resources.php: the Features page hero (.features-hero), then .inner-blog-wrap: the
   "blog-category" filter pills and the articles three to a row (image, category and date, title and a
   two-line summary), with page links under the grid */
.resources-hero {
    padding-bottom: 64px;
}
.inner-blog-wrap {
    padding: 0 0 110px;
    background: #ffffff;
    color: #14101f;
    scroll-margin-top: 110px;
}
.inner-blog-wrap + .inner-cta-wrap {
    padding-top: 0;
    background: #ffffff;
}
.inner-blog-wrap .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* category filter: a row of pills; scrolls sideways on a narrow screen rather than wrapping */
.blog-category {
    margin-bottom: 48px;
}
.blog-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-category-list li {
    margin: 0;
}
.blog-category-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid rgba(20, 16, 31, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: #4a4560;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.blog-category-link:hover {
    border-color: #14101f;
    color: #14101f;
    text-decoration: none;
}
.blog-category-link.is-active,
.blog-category-link.is-active:hover {
    border-color: #14101f;
    background: #14101f;
    color: #ffffff;
}
.blog-category-link:focus-visible,
.inner-blog-title a:focus-visible {
    outline: 2px solid #14101f;
    outline-offset: 3px;
}

/* the articles */
.inner-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 32px;
}
.inner-blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.inner-blog-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 16px;
    background: #f3f3f5;
}
.inner-blog-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.inner-blog-card:hover .inner-blog-media img,
.inner-blog-card:hover .inner-blog-placeholder {
    transform: scale(1.04);
}
/* no featured image: a soft violet panel with the category name */
.inner-blog-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(20, 16, 31, 0.08) 0%, rgba(20, 16, 31, 0) 60%),
        linear-gradient(150deg, #f6f6f8 0%, #ececf0 100%);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.inner-blog-placeholder span {
    max-width: 80%;
    font-family: "Helvetica Neue Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #14101f;
}
.inner-blog-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-top: 22px;
}
/* above the image: the date on the left, the reading time on the right, in quiet grey */
.inner-blog-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    color: #6f6b80;
    font-size: 14px;
    line-height: 1.4;
}
.inner-blog-figure {
    position: relative;
}
/* the category above the title: a small soft grey label (not a link) */
.inner-blog-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: #f1f1f4;
    color: #2e2a40;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1px;
    text-decoration: none;
}
.inner-blog-cat::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}
.inner-blog-title {
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #14101f;
}
.inner-blog-title a {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* the whole card is clickable through the title link */
.inner-blog-card {
    position: relative;
}
.inner-blog-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* hover: the title underlined rather than recoloured */
.inner-blog-card:hover .inner-blog-title a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.inner-blog-excerpt {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 15px;
    line-height: 1.6;
    color: #5a5570;
}
.inner-blog-empty {
    margin: 0;
    padding: 40px 0;
    font-size: 18px;
    color: #5a5570;
}

/* page links */
.inner-blog-pages {
    margin-top: 64px;
}
.inner-blog-pages ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inner-blog-pages .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(20, 16, 31, 0.12);
    border-radius: 999px;
    color: #14101f;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.inner-blog-pages a.page-numbers:hover {
    border-color: #14101f;
    color: #14101f;
}
.inner-blog-pages .page-numbers.current {
    border-color: #14101f;
    background: #14101f;
    color: #ffffff;
}
.inner-blog-pages .page-numbers.dots {
    border-color: transparent;
}


/* resources page ends */

/* single blog start */

/* single-blog.php, .single-blog-wrap: the back link (.feature-single-back) and category tag
   (.inner-blog-cat), the title, date and reading time, the image wide, then the article in one reading
   column. The "More articles" cards use the Resources page styles. Neutral ink only. */
.single-blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    height: 3px;
    pointer-events: none;
}
.single-blog-progress span {
    display: block;
    height: 100%;
    background: #14101f;
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.single-blog-wrap {
    padding-bottom: 40px;
    background: #ffffff;
    color: #14101f;
}
.single-blog-head {
    padding: 170px 0 56px;
}
/* keep the head out of sight until its entrance is ready (see the Features page hero); singleblog.js
   makes it visible, and it shows after 3s regardless if the script never runs */
html.js-anim .single-blog-head .custom-container {
    visibility: hidden;
    animation: about-unhide 0s 3s forwards;
}
.single-blog-head .feature-single-back {
    display: flex;
    width: max-content;
    margin-bottom: 40px;
}
.single-blog-cat {
    margin: 0 4px 0 0;
}
/* the back pill and the "All articles" pill in neutral ink instead of violet */
.single-blog-wrap .feature-single-back-icon,
.single-blog-more .feature-more-icon {
    background: #f1f1f4;
    color: #14101f;
}
.single-blog-wrap .feature-single-back:hover,
.single-blog-wrap .feature-single-back:focus-visible,
.single-blog-more .feature-more-all:hover,
.single-blog-more .feature-more-all:focus-visible {
    border-color: rgba(20, 16, 31, 0.35);
    box-shadow: 0 8px 24px -14px rgba(20, 16, 31, 0.35);
}
.single-blog-wrap .feature-single-back:focus-visible,
.single-blog-more .feature-more-all:focus-visible {
    outline-color: #14101f;
}
.single-blog-wrap .feature-single-back:hover .feature-single-back-icon,
.single-blog-wrap .feature-single-back:focus-visible .feature-single-back-icon,
.single-blog-more .feature-more-all:hover .feature-more-icon,
.single-blog-more .feature-more-all:focus-visible .feature-more-icon {
    background: #14101f;
    color: #ffffff;
}
.single-blog-title {
    max-width: 980px;
    margin: 0;
    font-size: 54px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.035em;
    color: #14101f;
    text-wrap: balance;
}
.single-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 28px 0 0;
    color: #6f6b80;
    font-size: 15px;
    line-height: 1.4;
}
.single-blog-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b3aec4;
}

.single-blog-media {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #f3f3f5;
    aspect-ratio: 16 / 7;
}
.single-blog-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-blog-body {
    padding-top: 88px;
}

.single-blog-content {
    color: #3a3650;
}
.single-blog-content > :first-child {
    margin-top: 0;
}
.single-blog-content > :last-child {
    margin-bottom: 0;
}
.single-blog-content p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.8;
    color: #3a3650;
}
.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4 {
    color: #14101f;
    font-weight: 500;
    text-wrap: balance;
    scroll-margin-top: 110px;
}
.single-blog-content h2 {
    margin: 64px 0 22px;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.single-blog-content h3 {
    margin: 40px 0 14px;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.single-blog-content h4 {
    margin: 32px 0 12px;
    font-size: 19px;
}
.single-blog-content a {
    color: #14101f;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.single-blog-content strong {
    font-weight: 600;
    color: #14101f;
}
/* lists: hairline rows with a small dark marker */
.single-blog-content ul,
.single-blog-content ol {
    margin: 4px 0 32px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(20, 16, 31, 0.1);
}
.single-blog-content ol {
    counter-reset: blog-point;
}
.single-blog-content li {
    position: relative;
    margin: 0;
    padding: 13px 0 13px 30px;
    border-bottom: 1px solid rgba(20, 16, 31, 0.1);
    font-size: 17px;
    line-height: 1.6;
    color: #3a3650;
}
.single-blog-content ul > li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #14101f;
}
.single-blog-content ol > li {
    counter-increment: blog-point;
}
.single-blog-content ol > li::before {
    content: counter(blog-point, decimal-leading-zero);
    position: absolute;
    top: 15px;
    left: 0;
    color: #9a96aa;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.single-blog-content blockquote {
    margin: 36px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid #14101f;
}
.single-blog-content blockquote p {
    font-size: 21px;
    line-height: 1.6;
    color: #14101f;
}
.single-blog-content figure,
.single-blog-content img {
    max-width: 100%;
    height: auto;
}
.single-blog-content figure {
    margin: 36px 0;
}
.single-blog-content figure img {
    border-radius: 16px;
}
.single-blog-content figcaption {
    margin-top: 10px;
    color: #7a7590;
    font-size: 14px;
}

/* more articles */
.single-blog-more {
    padding: 110px 0;
    background: #ffffff;
}
.single-blog-more + .inner-cta-wrap {
    padding-top: 0;
    background: #ffffff;
}


/* single blog ends */

/* pricing page start */

/* page-pricing.php: a centered hero (label, title, intro), then .pricing-wrap - the Monthly / Annual
   toggle and the three plan cards (pricing-plans posts) - and the shared closing call to action. */
.pricing-hero {
    padding: 190px 0 90px;
    background: #ffffff;
    color: #14101f;
}
.pricing-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.pricing-hero-tag {
    display: block;
    margin-bottom: 20px;
    color: #7a7590;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pricing-hero-title {
    margin: 0;
    font-size: 56px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.035em;
    color: #14101f;
    text-wrap: balance;
}
.pricing-hero-intro {
    margin-top: 20px;
}
.pricing-hero-intro p {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: #5a5570;
}

/* keep the hero out of sight until its entrance is ready (see the Features page hero); pricingpage.js
   makes it visible, and it shows after 3s regardless if the script never runs */
html.js-anim .pricing-hero-inner {
    visibility: hidden;
    animation: about-unhide 0s 3s forwards;
}

.pricing-wrap {
    padding: 0 0 110px;
    background: #ffffff;
    color: #14101f;
}
.pricing-wrap + .inner-cta-wrap {
    padding-top: 0;
    background: #ffffff;
}

/* the Monthly / Annual toggle: a "Save X%" note above a track with a sliding knob */
.pricing-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 64px;
}
.pricing-save {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.1);
    color: #6a48f5;
    font-size: 13px;
    font-weight: 600;
}
.pricing-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pricing-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: #9a96aa;
    transition: color 0.3s ease;
}
.pricing-toggle-label.is-active {
    color: #14101f;
}
.pricing-switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e9e7ef;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.pricing-switch[aria-checked="true"] {
    background: #6a48f5;
}
.pricing-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 16, 31, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-switch[aria-checked="true"] .pricing-switch-knob {
    transform: translateX(20px);
}
.pricing-switch:focus-visible {
    outline: 2px solid #6a48f5;
    outline-offset: 3px;
}

/* the plans: three even cards; the featured one steps up, with a violet border and a dark badge */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 28px;
}
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 36px 32px;
    border: 1px solid rgba(20, 16, 31, 0.1);
    border-radius: 24px;
    background: #ffffff;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.pricing-card.is-featured {
    margin-top: -24px;
    padding-top: 44px;
    padding-bottom: 44px;
    border: 1.5px solid rgba(124, 92, 255, 0.45);
    box-shadow: 0 32px 60px -30px rgba(90, 60, 200, 0.35);
}
.pricing-card-badge {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f1f4;
    color: #2e2a40;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.pricing-card.is-featured .pricing-card-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    background: #14101f;
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(20, 16, 31, 0.5);
}
.pricing-card-name {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #14101f;
}
.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 18px 0 0;
}
.pricing-card-amount {
    display: inline-block;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #14101f;
    font-variant-numeric: tabular-nums;
}
.pricing-card-period {
    font-size: 15px;
    color: #9a96aa;
}
.pricing-card-desc {
    margin-top: 14px;
}
.pricing-card-desc p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #6f6b80;
}
.pricing-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 15px 20px;
    border: 1px solid rgba(20, 16, 31, 0.14);
    border-radius: 12px;
    background: #ffffff;
    color: #14101f;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card-cta:hover {
    border-color: rgba(20, 16, 31, 0.3);
    background: #f7f6fa;
    color: #14101f;
    text-decoration: none;
}
.pricing-card.is-featured .pricing-card-cta {
    border-color: transparent;
    background: #0b0619;
    color: #ffffff;
}
.pricing-card.is-featured .pricing-card-cta:hover {
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.25);
}
.pricing-card-cta:focus-visible {
    outline: 2px solid #6a48f5;
    outline-offset: 3px;
}

/* the feature list: a small violet check in a soft circle, one row per line */
.pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(20, 16, 31, 0.08);
    list-style: none;
}
.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3a3650;
}
.pricing-check {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(124, 92, 255, 0.12);
    color: #6a48f5;
    font-size: 10px;
}


/* phone: one column; nothing steps up, the badge sits back inside the card */


/* pricing page ends */


@media only screen and (min-width: 300px) and (max-width: 575.5px) {
    .features-item {
        position: relative;
        margin-bottom: 24px;
    }
    .features-item-num {
        display: none;
    }
    .features-item-btn {
        font-size: 20px;
        margin-bottom: 6px;
    }
    /* each feature already shows its own image on a phone, so the shared image stage is not needed */
    .features-stage {
        display: none;
    }
    .banner-content {
        flex: 1 1 100%;
    }
    .home-banner-wrap.has-video {
        aspect-ratio: auto;
        min-height: 100vh;
    }
    .has-video .banner-image {
        top: 0;
    }
    .banner-content h1 .banner-outline {
        -webkit-text-stroke-width: 1.5px;
    }
    .clients-wrap {
        padding: 20px 0 64px;
    }
    .clients-head {
        margin-bottom: 36px;
    }
    .clients-head h2 {
        font-size: 30px;
    }
    .clients-sub {
        font-size: 16px;
    }
    .clients-grid {
        gap: 12px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 12px) / 2);
        height: 96px;
        padding: 16px 18px;
    }

    .header-bar {
        padding: 8px 8px 8px 20px;
    }
    .header-toggle {
        display: flex;
    }
    .header-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        background: #15121d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .25s ease;
    }
    .header-open .header-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle {
        display: none;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        z-index: auto;
        right: auto;
        left: auto;
        padding: 0;
        background: transparent;
        transition: none;
        /* Max Mega Menu's own mobile mode keeps the list hidden until its toggle (hidden here) is clicked */
        visibility: inherit;
        opacity: 1;
        transform: none;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        display: list-item;
        width: auto;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        justify-content: space-between;
        padding: 12px 8px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
        min-width: 0;
        padding: 0 0 0 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    /* full-width button: label on the left, the icon badge on the right where the dark square sits */
    .header-actions .header-btn-primary {
        justify-content: space-between;
        height: 48px;
        padding: 0 8px 0 22px;
    }
    .header-actions .header-btn-primary::before {
        clip-path: inset(6px 6px 6px calc(100% - 42px) round 8px);
    }
    .header-actions .header-btn-primary:hover::before {
        clip-path: inset(4px 4px 4px 4px round 8px);
    }
    .header-actions .header-btn-icon {
        width: 34px;
        height: 34px;
    }
    .banner-content h1 {
        font-size: 52px;
    }
    .banner-content h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }
    .banner-text, .banner-text p {
        font-size: 14px;
        line-height: 1.5;
    }
    .banner-btn-outline,
    .banner-btn-light {
        min-height: 50px;
        font-size: 15px;
    }
    .banner-btn-icon {
        width: 38px;
        height: 38px;
    }
    .banner-btn-light::before {
        clip-path: inset(calc(50% - 19px) 6px calc(50% - 19px) calc(100% - 44px) round 9px);
    }
    .banner-glow {
        width: 300px;
        height: 300px;
    }
    .why-choose-wrap {
        padding: 70px 0;
    }
    .why-choose-head {
        margin-bottom: 40px;
    }
    .why-choose-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .why-choose-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .community-wrap {
        padding: 70px 0 50px;
    }
    .community-head h2 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .community-sub,
    .community-sub p {
        font-size: 15px;
    }
    .community-stage {
        margin-top: 24px;
        padding: 40px 16px;
    }
    .community-avatar-2,
    .community-avatar-5,
    .community-badge {
        display: none;
    }
    .community-cta .banner-btn-light {
        min-height: 46px;
        gap: 10px;
        padding-left: 18px;
        font-size: 14px;
    }
    .community-cta .banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    .community-cta .banner-btn-light::before {
        clip-path: inset(calc(50% - 17px) 6px calc(50% - 17px) calc(100% - 40px) round 8px);
    }
    .features-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .features-wrap {
        padding: 70px 0;
    }
    .features-head {
        margin-bottom: 40px;
    }
    .features-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .features-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .features-item-media {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        margin-bottom: 10px;
    }
    .core-hr-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .core-hr-card--featured .core-hr-body {
        padding: 40px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        font-size: 30px;
    }
    .core-hr-wrap {
        padding: 70px 0;
    }
    .core-hr-head {
        margin-bottom: 40px;
    }
    .core-hr-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* cards stack one under another: the featured card first, then the row's cards */
    .core-hr-grid,
    .core-hr-row {
        flex-direction: column;
        gap: 18px;
    }
    .core-hr-row > .core-hr-card {
        flex: none;
        width: 100%;
    }
    .core-hr-card {
        border-radius: 20px;
    }
    /* featured card: image on top, text below (on a wide screen it is side by side) */
    .core-hr-card--featured {
        flex-direction: column;
        min-height: 0;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        flex: none;
        width: auto;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 10px 10px 0;
        border-radius: 14px;
    }
    /* every image fills its box on a phone (the desktop contain/left/right pinning is not used) */
    .core-hr-media img,
    .core-hr-card--featured .core-hr-media img,
    .core-hr-row > .core-hr-card:nth-child(1) .core-hr-media img {
        object-fit: cover;
        object-position: center top;
    }
    .core-hr-body,
    .core-hr-card--featured .core-hr-body {
        display: block;
        padding: 22px 20px 26px;
    }
    .core-hr-body h3 {
        font-size: 20px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        margin-bottom: 12px;
        font-size: 24px;
    }
    .core-hr-text,
    .core-hr-text p,
    .core-hr-card--featured .core-hr-text,
    .core-hr-card--featured .core-hr-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    .core-hr-kicker {
        margin-bottom: 14px;
    }
    .testimonials-wrap {
        padding: 70px 0 60px;
    }
    .testimonials-head {
        margin-bottom: 40px;
    }
    .testimonials-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* one scrolling column of cards, full width; the other two columns would only be squeezed
       into rows below it, so they are left out (the "View all" button leads to the full list) */
    .testimonials-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .testimonials-col--2,
    .testimonials-col--3 {
        display: none;
    }
    .testimonials-board {
        height: 560px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
    }
    .testimonials-set {
        gap: 16px;
        padding-bottom: 16px;
    }
    .testimonials-card {
        padding: 22px 20px 20px;
        border-radius: 16px;
    }
    .testimonials-mark {
        margin-bottom: 12px;
        font-size: 18px;
    }
    .testimonials-logo {
        height: 26px;
        margin-bottom: 14px;
    }
    .testimonials-logo img {
        max-height: 26px;
        max-width: 120px;
    }
    .testimonials-quote p {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .testimonials-author {
        gap: 10px;
        margin-top: 18px;
    }
    .testimonials-avatar {
        width: 38px;
        height: 38px;
    }
    .testimonials-fade {
        height: 180px;
        padding-bottom: 8px;
    }
    .faq-wrap {
        padding: 70px 0;
    }
    .faq-aside h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .faq-sub {
        font-size: 16px;
    }
    .faq-toggle {
        padding: 22px 0;
        font-size: 16px;
    }
    .faq-answer-inner {
        padding-right: 0;
    }
    .demo-wrap {
        padding: 0 0 70px;
    }
    .demo-panel {
        padding: 60px 22px;
        border-radius: 22px;
    }
    .demo-content h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .demo-text {
        font-size: 16px;
    }
    /* checklist stacks, left-aligned, as a block in the middle */
    .demo-points {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .footer-wrap {
        padding-top: 56px;
    }
    /* brand on top, then the link columns, instead of side by side */
    .footer-main {
        flex-direction: column;
        gap: 36px;
        padding-bottom: 40px;
    }
    .footer-brand {
        gap: 18px;
        max-width: none;
    }
    .footer-logo {
        padding: 8px 16px;
        border-radius: 12px;
    }
    .footer-logo img {
        height: 40px;
    }
    .footer-text {
        font-size: 14.5px;
        line-height: 1.7;
    }
    /* two link columns side by side, contact under them across the full width */
    .footer-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-col {
        min-width: 0;
    }
    .footer-col h4 {
        margin: 0 0 16px;
        font-size: 14px;
        letter-spacing: 0.6px;
    }
    .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .footer-contact li {
        max-width: none;
    }
    .footer-contact li + li {
        margin-top: 12px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 22px 0 26px;
    }
    .footer-bottom p {
        font-size: 13px;
        line-height: 1.6;
    }
    .contact-us-wrap {
        padding: 70px 0;
    }
    .contact-us-wrap--page {
        padding-top: 130px;
    }
    /* title above the intro instead of beside it, and the form above the image */
    .contact-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
    }
    .contact-title {
        font-size: 40px;
        line-height: 1.05;
    }
    .contact-intro {
        max-width: none;
        padding-bottom: 0;
    }
    .contact-intro p {
        font-size: 15px;
        line-height: 1.65;
    }
    .contact-body {
        flex-direction: column;
        gap: 16px;
    }
    .contact-form-card {
        flex: none;
        padding: 24px 18px;
        border-radius: 20px;
    }
    .contact-media {
        flex: none;
        min-height: 320px;
        border-radius: 20px;
    }
    .contact-media-tag {
        top: 14px;
        right: 14px;
        padding: 6px 14px;
        font-size: 12px;
    }
    .contact-media-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
    }
    .contact-media-card a {
        font-size: 14px;
    }
    .velo6hr-form-col {
        margin-bottom: 16px;
    }
    .velo6hr-contact-form .form-control {
        padding: 12px 14px;
        font-size: 16px;
    }
    .velo6hr-contact-form textarea.form-control {
        min-height: 110px;
    }
    .velo6hr-form-submit {
        flex-wrap: wrap;
    }
    .velo6hr-submit-btn {
        justify-content: center;
        width: 100%;
        min-height: 52px;
    }
    .contact-info {
        flex-direction: column;
        margin-top: 36px;
    }
    .contact-info-item,
    .contact-info-item:first-child {
        padding: 24px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(20, 16, 31, 0.08);
    }
    .contact-info-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .page-hero {
        padding: 140px 0 70px;
    }
    .page-hero--with-image {
        padding-bottom: 110px;
    }
    .page-intro {
        font-size: 16px;
    }
    .page-feature {
        margin: -70px auto 44px;
        border-radius: 18px;
    }
    .page-body {
        padding: 56px 0 70px;
    }
    .page-content {
        font-size: 17px;
    }
    .page-content h2 {
        font-size: 28px;
    }
    .page-content h3 {
        font-size: 22px;
    }
    .page-content blockquote {
        font-size: 19px;
    }
    .post-head {
        padding: 130px 0 36px;
    }
    .post-dek {
        font-size: 17px;
    }
    .post-content > p:first-of-type {
        font-size: 19px;
    }
    .post-feature img {
        border-radius: 16px;
    }
    .post-nav {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 52px;
        padding-bottom: 70px;
    }
    .post-nav-link--next {
        text-align: left;
    }
    .post-related {
        padding: 64px 0 80px;
    }
    .post-related-title {
        font-size: 26px;
    }
    .post-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .inner-about-us-wrap {
        padding: 110px 0 44px;
        min-height: 650px;
        height: 100vh;
        height: 100svh;
        max-height: 720px;
    }
    /* title on top, the text and button under it (on a wide screen they sit side by side) */
    .about-banner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 26px;
    }
    .about-banner-title {
        flex: none;
        width: 100%;
    }
    .about-banner-title h1 {
        font-size: 36px;
        line-height: 1.08;
        letter-spacing: -0.025em;
    }
    .about-banner-body {
        flex: none;
        width: 100%;
        gap: 22px;
        padding-bottom: 0;
    }
    .about-banner-text,
    .about-banner-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    /* a stronger shade along the bottom so the text stays readable over the picture */
    .about-bg::after {
        background: linear-gradient(180deg, rgba(8, 5, 18, 0.6) 0%, rgba(8, 5, 18, 0.2) 25%, rgba(8, 5, 18, 0.7) 60%, rgba(8, 5, 18, 0.94) 100%), radial-gradient(60% 60% at 0% 100%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%);
    }
    .about-banner-btn {
        padding: 5px 5px 5px 20px;
        font-size: 14px;
    }
    .about-banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    /* Who are we: heading above the story, no sticky heading */
    .who-are-we-wrap {
        padding: 64px 0;
    }
    .who-grid {
        flex-direction: column;
        gap: 24px;
    }
    .who-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .who-title {
        font-size: 34px;
        line-height: 1.1;
    }
    .who-content {
        flex: none;
        width: 100%;
        padding-top: 0;
    }
    .who-content,
    .who-content p,
    .who-content li {
        font-size: 16px;
        line-height: 1.75;
    }
    .who-content p {
        margin-bottom: 18px;
    }
    .who-content > p:first-child {
        font-size: 18px;
        line-height: 1.6;
    }
    /* Why choose: heading above the numbered list, no sticky heading */
    .inner-why-choose-wrap {
        padding: 64px 0;
    }
    .inner-why-grid {
        flex-direction: column;
        gap: 32px;
    }
    .inner-why-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .inner-why-title {
        font-size: 30px;
        line-height: 1.12;
    }
    .inner-why-sub {
        margin-top: 16px;
        font-size: 15px;
    }
    .inner-why-list {
        flex: none;
        width: 100%;
    }
    .inner-why-item {
        gap: 14px;
        padding: 24px 0;
    }
    .inner-why-num {
        width: 22px;
    }
    .inner-why-body h3 {
        gap: 10px;
        margin-bottom: 8px;
        font-size: 19px;
    }
    .inner-why-text,
    .inner-why-text p {
        font-size: 15px;
        line-height: 1.7;
    }
    /* Our approach: title, intro and button stacked; steps one under another (or a swipe slider) */
    .our-approach-wrap {
        padding: 64px 0;
    }
    .approach-head {
        flex-direction: column;
        gap: 22px;
        margin-bottom: 44px;
    }
    .approach-title {
        flex: none;
        font-size: 34px;
        line-height: 1.08;
    }
    .approach-intro {
        flex: none;
        padding-top: 0;
    }
    .approach-intro p {
        margin-bottom: 24px;
        font-size: 15px;
    }
    .approach-steps:not(.approach-steps--slider) {
        flex-direction: column;
        gap: 30px;
    }
    .approach-step {
        flex: none;
        padding: 0 0 4px 20px;
    }
    .approach-steps--slider > .approach-step {
        flex: 0 0 82%;
        padding-right: 20px;
    }
    .approach-num,
    .approach-icon {
        margin-bottom: 20px;
    }
    .approach-icon {
        width: 56px;
        height: 56px;
    }
    .approach-step h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    .approach-text,
    .approach-text p {
        font-size: 15px;
    }
    /* Call to action */
    .inner-cta-wrap {
        padding: 48px 0;
    }
    .inner-cta {
        min-height: 0;
        padding: 40px 22px;
        border-radius: 22px;
        background-position: 70% center;
    }
    .inner-cta-title {
        font-size: 28px;
        line-height: 1.15;
    }
    .inner-cta-text {
        margin: 14px 0 26px;
        font-size: 15px;
    }
    .features-hero-title {
        font-size: 64px;
    }
    .features-row-title {
        font-size: 23px;
    }
    .features-hero {
        padding: 135px 0 60px;
    }
    .features-hero-title {
        font-size: 38px;
    }
    .features-hero-foot {
        margin-top: 40px;
    }
    .features-hero-intro p {
        font-size: 16px;
    }
    .features-row-media {
        border-radius: 16px;
    }
    .feature-single {
        padding-bottom: 16px;
    }
    .feature-single-hero {
        padding-bottom: 36px;
    }
    .feature-single-back {
        margin-bottom: 24px;
        padding: 4px 16px 4px 4px;
    }
    .feature-single-back-icon {
        width: 30px;
        height: 30px;
    }
    /* title above the demo button instead of beside it */
    .feature-single-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 32px;
        line-height: 1.1;
    }
    .feature-single-head .banner-btn-light {
        margin-bottom: 0;
    }
    .feature-single-media {
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
    .feature-single-body {
        padding-top: 44px;
    }
    /* the article first, then the "All features" list under it as plain navigation (not sticky) */
    .feature-single-grid {
        flex-direction: column;
        gap: 44px;
    }
    .feature-single-content {
        order: 1;
        max-width: none;
    }
    .feature-single-aside {
        order: 2;
        flex: none;
        width: 100%;
    }
    .feature-single-aside-inner {
        position: static;
    }
    .feature-single-label {
        margin-bottom: 12px;
        font-size: 12px;
    }
    .feature-single-index a {
        padding: 13px 0 13px 18px;
        font-size: 15px;
    }
    .feature-single-content p {
        font-size: 16px;
    }
    .feature-single-content > p:first-of-type {
        font-size: 18px;
    }
    .feature-single-content h2,
    .feature-single-content h3,
    .feature-single-content h4 {
        margin: 44px 0 20px;
        font-size: 23px;
    }
    .feature-single-content > :is(h2, h3):first-child {
        margin-bottom: 22px;
        font-size: 26px;
    }
    .feature-single-content li {
        padding-left: 40px;
        font-size: 15px;
    }
    .feature-single-content li > strong:first-child {
        font-size: 16px;
    }
    /* phone: compact rows, a square thumbnail beside the title */
    .feature-more {
        padding: 64px 0;
    }
    .feature-more-head {
        margin-bottom: 28px;
    }
    .feature-more-title {
        font-size: 30px;
    }
    .feature-more-grid {
        flex-direction: column;
        gap: 12px;
    }
    .feature-more-card:nth-child(3) {
        display: flex;
    }
    .feature-more-card {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        border-radius: 20px;
    }
    .feature-more-media {
        flex: 0 0 92px;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }
    .feature-more-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 6px 0 16px;
    }
    .feature-more-name {
        font-size: 17px;
    }
    .feature-more-desc {
        margin-top: 4px;
        font-size: 13.5px;
        line-height: 1.5;
    }
    .feature-more-body {
        align-items: center;
    }
    .feature-more-card:hover,
    .feature-more-card:focus-visible {
        transform: none;
    }
    .testimonials-page-card {
        padding: 26px 24px 24px;
    }
    .testimonials-page-quote p {
        font-size: 16px;
    }
    .testimonials-page-hero {
        padding-bottom: 44px;
    }
    .testimonials-page {
        padding-bottom: 60px;
    }
    .testimonials-page-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .testimonials-page-card {
        padding: 24px 22px 22px;
        border-radius: 20px;
    }
    .testimonials-page-top {
        margin-bottom: 20px;
    }
    .testimonials-dialog {
        align-items: center;
        padding: 16px;
    }
    .testimonials-dialog-box {
        max-height: calc(100vh - 32px);
        padding: 40px 24px 32px;
    }
    .inner-blog-grid {
        gap: 48px 24px;
    }
    .inner-blog-title {
        font-size: 19px;
    }
    .resources-hero {
        padding-bottom: 40px;
    }
    .inner-blog-wrap {
        padding-bottom: 60px;
    }
    /* the pills wrap onto as many lines as they need, so every category is in view (a sideways
       scroller cut the last pill off at the screen edge with no hint that more were there) */
    .blog-category {
        margin: 0 0 32px;
    }
    .blog-category-list {
        flex-wrap: wrap;
        gap: 8px;
    }
    .blog-category-link {
        padding: 9px 14px;
        font-size: 13px;
        line-height: 1.2;
    }
    .inner-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .inner-blog-placeholder span {
        font-size: 22px;
    }
    .inner-blog-meta {
        margin-bottom: 12px;
        font-size: 13px;
    }
    .inner-blog-pages {
        margin-top: 48px;
    }
    .single-blog-title {
        font-size: 46px;
    }
    .single-blog-head {
        padding: 128px 0 36px;
    }
    .single-blog-head .feature-single-back {
        margin-bottom: 28px;
    }
    .single-blog-title {
        font-size: 32px;
        line-height: 1.12;
    }
    .single-blog-meta {
        margin-top: 20px;
        font-size: 14px;
    }
    .single-blog-media {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
    .single-blog-body {
        padding-top: 48px;
    }
    .single-blog-content p {
        font-size: 16.5px;
        line-height: 1.75;
    }
    .single-blog-content h2 {
        margin-top: 48px;
        font-size: 26px;
    }
    .single-blog-content h3 {
        margin-top: 32px;
        font-size: 20px;
    }
    .single-blog-content li {
        font-size: 16px;
    }
    .single-blog-more {
        padding: 72px 0;
    }
    .pricing-hero-title {
        font-size: 48px;
    }
    .pricing-card {
        padding: 30px 26px;
    }
    .pricing-card.is-featured {
        padding-top: 38px;
        padding-bottom: 38px;
    }
    .pricing-card-amount {
        font-size: 38px;
    }
    .pricing-hero {
        padding: 135px 0 56px;
    }
    .pricing-hero-title {
        font-size: 32px;
        line-height: 1.14;
    }
    .pricing-hero-intro p {
        font-size: 16px;
    }
    .pricing-wrap {
        padding-bottom: 64px;
    }
    .pricing-toggle {
        margin-bottom: 40px;
    }
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }
    .pricing-card {
        padding: 28px 24px;
    }
    .pricing-card.is-featured {
        padding: 36px 24px 28px;
    }
    .pricing-card.is-featured .pricing-card-badge {
        position: static;
        align-self: flex-start;
        transform: none;
        margin: 0 0 18px;
    }
    .pricing-card-amount {
        font-size: 34px;
    }
}


@media only screen and (min-width: 576px) and (max-width: 767.5px) {
    .features-item {
        position: relative;
        margin-bottom: 24px;
    }
    .features-item-num {
        display: none;
    }
    .features-item-btn {
        font-size: 20px;
        margin-bottom: 6px;
    }
    /* each feature already shows its own image on a phone, so the shared image stage is not needed */
    .features-stage {
        display: none;
    }
    .banner-content {
        flex: 1 1 100%;
    }
    .home-banner-wrap.has-video {
        aspect-ratio: auto;
        min-height: 100vh;
    }
    .has-video .banner-image {
        top: 0;
    }
    .banner-content h1 .banner-outline {
        -webkit-text-stroke-width: 1.5px;
    }
    .clients-wrap {
        padding: 20px 0 64px;
    }
    .clients-head {
        margin-bottom: 36px;
    }
    .clients-head h2 {
        font-size: 30px;
    }
    .clients-sub {
        font-size: 16px;
    }
    .clients-grid {
        gap: 12px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 12px) / 2);
        height: 96px;
        padding: 16px 18px;
    }

    .header-bar {
        padding: 8px 8px 8px 8px;
    }
    .header-toggle {
        display: flex;
    }
    .header-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        background: #15121d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .25s ease;
    }
    .header-open .header-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle {
        display: none;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        z-index: auto;
        right: auto;
        left: auto;
        padding: 0;
        background: transparent;
        transition: none;
        /* Max Mega Menu's own mobile mode keeps the list hidden until its toggle (hidden here) is clicked */
        visibility: inherit;
        opacity: 1;
        transform: none;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        display: list-item;
        width: auto;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        justify-content: space-between;
        padding: 12px 8px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
        min-width: 0;
        padding: 0 0 0 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    /* full-width button: label on the left, the icon badge on the right where the dark square sits */
    .header-actions .header-btn-primary {
        justify-content: space-between;
        height: 48px;
        padding: 0 8px 0 22px;
    }
    .header-actions .header-btn-primary::before {
        clip-path: inset(6px 6px 6px calc(100% - 42px) round 8px);
    }
    .header-actions .header-btn-primary:hover::before {
        clip-path: inset(4px 4px 4px 4px round 8px);
    }
    .header-actions .header-btn-icon {
        width: 34px;
        height: 34px;
    }
    .banner-content h1 {
        font-size: 52px;
    }
    .banner-content h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }
    .banner-text, .banner-text p {
        font-size: 14px;
        line-height: 1.5;
    }
    .banner-btn-outline,
    .banner-btn-light {
        min-height: 50px;
        font-size: 15px;
    }
    .banner-btn-icon {
        width: 38px;
        height: 38px;
    }
    .banner-btn-light::before {
        clip-path: inset(calc(50% - 19px) 6px calc(50% - 19px) calc(100% - 44px) round 9px);
    }
    .banner-glow {
        width: 300px;
        height: 300px;
    }
    .why-choose-wrap {
        padding: 70px 0;
    }
    .why-choose-head {
        margin-bottom: 40px;
    }
    .why-choose-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .why-choose-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .community-wrap {
        padding: 70px 0 50px;
    }
    .community-head h2 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .community-sub,
    .community-sub p {
        font-size: 15px;
    }
    .community-stage {
        margin-top: 24px;
        padding: 40px 16px;
    }
    .community-avatar-2,
    .community-avatar-5,
    .community-badge {
        display: none;
    }
    .community-cta .banner-btn-light {
        min-height: 46px;
        gap: 10px;
        padding-left: 18px;
        font-size: 14px;
    }
    .community-cta .banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    .community-cta .banner-btn-light::before {
        clip-path: inset(calc(50% - 17px) 6px calc(50% - 17px) calc(100% - 40px) round 8px);
    }
    .features-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .features-wrap {
        padding: 70px 0;
    }
    .features-head {
        margin-bottom: 40px;
    }
    .features-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .features-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .features-item-media {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        margin-bottom: 10px;
    }
    .core-hr-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .core-hr-card--featured .core-hr-body {
        padding: 40px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        font-size: 30px;
    }
    .core-hr-wrap {
        padding: 70px 0;
    }
    .core-hr-head {
        margin-bottom: 40px;
    }
    .core-hr-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* cards stack one under another: the featured card first, then the row's cards */
    .core-hr-grid,
    .core-hr-row {
        flex-direction: column;
        gap: 18px;
    }
    .core-hr-row > .core-hr-card {
        flex: none;
        width: 100%;
    }
    .core-hr-card {
        border-radius: 20px;
    }
    /* featured card: image on top, text below (on a wide screen it is side by side) */
    .core-hr-card--featured {
        flex-direction: column;
        min-height: 0;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        flex: none;
        width: auto;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 10px 10px 0;
        border-radius: 14px;
    }
    /* every image fills its box on a phone (the desktop contain/left/right pinning is not used) */
    .core-hr-media img,
    .core-hr-card--featured .core-hr-media img,
    .core-hr-row > .core-hr-card:nth-child(1) .core-hr-media img {
        object-fit: cover;
        object-position: center top;
    }
    .core-hr-body,
    .core-hr-card--featured .core-hr-body {
        display: block;
        padding: 22px 20px 26px;
    }
    .core-hr-body h3 {
        font-size: 20px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        margin-bottom: 12px;
        font-size: 24px;
    }
    .core-hr-text,
    .core-hr-text p,
    .core-hr-card--featured .core-hr-text,
    .core-hr-card--featured .core-hr-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    .core-hr-kicker {
        margin-bottom: 14px;
    }
    .testimonials-wrap {
        padding: 70px 0 60px;
    }
    .testimonials-head {
        margin-bottom: 40px;
    }
    .testimonials-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* one scrolling column of cards, full width; the other two columns would only be squeezed
       into rows below it, so they are left out (the "View all" button leads to the full list) */
    .testimonials-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .testimonials-col--2,
    .testimonials-col--3 {
        display: none;
    }
    .testimonials-board {
        height: 560px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
    }
    .testimonials-set {
        gap: 16px;
        padding-bottom: 16px;
    }
    .testimonials-card {
        padding: 22px 20px 20px;
        border-radius: 16px;
    }
    .testimonials-mark {
        margin-bottom: 12px;
        font-size: 18px;
    }
    .testimonials-logo {
        height: 26px;
        margin-bottom: 14px;
    }
    .testimonials-logo img {
        max-height: 26px;
        max-width: 120px;
    }
    .testimonials-quote p {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .testimonials-author {
        gap: 10px;
        margin-top: 18px;
    }
    .testimonials-avatar {
        width: 38px;
        height: 38px;
    }
    .testimonials-fade {
        height: 180px;
        padding-bottom: 8px;
    }
    .faq-wrap {
        padding: 70px 0;
    }
    .faq-aside h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .faq-sub {
        font-size: 16px;
    }
    .faq-toggle {
        padding: 22px 0;
        font-size: 16px;
    }
    .faq-answer-inner {
        padding-right: 0;
    }
    .demo-wrap {
        padding: 0 0 70px;
    }
    .demo-panel {
        padding: 60px 22px;
        border-radius: 22px;
    }
    .demo-content h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .demo-text {
        font-size: 16px;
    }
    /* checklist stacks, left-aligned, as a block in the middle */
    .demo-points {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .footer-wrap {
        padding-top: 56px;
    }
    /* brand on top, then the link columns, instead of side by side */
    .footer-main {
        flex-direction: column;
        gap: 36px;
        padding-bottom: 40px;
    }
    .footer-brand {
        gap: 18px;
        max-width: none;
    }
    .footer-logo {
        padding: 8px 16px;
        border-radius: 12px;
    }
    .footer-logo img {
        height: 40px;
    }
    .footer-text {
        font-size: 14.5px;
        line-height: 1.7;
    }
    /* two link columns side by side, contact under them across the full width */
    .footer-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-col {
        min-width: 0;
    }
    .footer-col h4 {
        margin: 0 0 16px;
        font-size: 14px;
        letter-spacing: 0.6px;
    }
    .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .footer-contact li {
        max-width: none;
    }
    .footer-contact li + li {
        margin-top: 12px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 22px 0 26px;
    }
    .footer-bottom p {
        font-size: 13px;
        line-height: 1.6;
    }
    .contact-us-wrap {
        padding: 70px 0;
    }
    .contact-us-wrap--page {
        padding-top: 130px;
    }
    /* title above the intro instead of beside it, and the form above the image */
    .contact-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
    }
    .contact-title {
        font-size: 40px;
        line-height: 1.05;
    }
    .contact-intro {
        max-width: none;
        padding-bottom: 0;
    }
    .contact-intro p {
        font-size: 15px;
        line-height: 1.65;
    }
    .contact-body {
        flex-direction: column;
        gap: 16px;
    }
    .contact-form-card {
        flex: none;
        padding: 24px 18px;
        border-radius: 20px;
    }
    .contact-media {
        flex: none;
        min-height: 320px;
        border-radius: 20px;
    }
    .contact-media-tag {
        top: 14px;
        right: 14px;
        padding: 6px 14px;
        font-size: 12px;
    }
    .contact-media-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
    }
    .contact-media-card a {
        font-size: 14px;
    }
    .velo6hr-form-col {
        margin-bottom: 16px;
    }
    .velo6hr-contact-form .form-control {
        padding: 12px 14px;
        font-size: 16px;
    }
    .velo6hr-contact-form textarea.form-control {
        min-height: 110px;
    }
    .velo6hr-form-submit {
        flex-wrap: wrap;
    }
    .velo6hr-submit-btn {
        justify-content: center;
        width: 100%;
        min-height: 52px;
    }
    .contact-info {
        flex-direction: column;
        margin-top: 36px;
    }
    .contact-info-item,
    .contact-info-item:first-child {
        padding: 24px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(20, 16, 31, 0.08);
    }
    .contact-info-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .page-hero {
        padding: 140px 0 70px;
    }
    .page-hero--with-image {
        padding-bottom: 110px;
    }
    .page-intro {
        font-size: 16px;
    }
    .page-feature {
        margin: -70px auto 44px;
        border-radius: 18px;
    }
    .page-body {
        padding: 56px 0 70px;
    }
    .page-content {
        font-size: 17px;
    }
    .page-content h2 {
        font-size: 28px;
    }
    .page-content h3 {
        font-size: 22px;
    }
    .page-content blockquote {
        font-size: 19px;
    }
    .post-head {
        padding: 130px 0 36px;
    }
    .post-dek {
        font-size: 17px;
    }
    .post-content > p:first-of-type {
        font-size: 19px;
    }
    .post-feature img {
        border-radius: 16px;
    }
    .post-nav {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 52px;
        padding-bottom: 70px;
    }
    .post-nav-link--next {
        text-align: left;
    }
    .post-related {
        padding: 64px 0 80px;
    }
    .post-related-title {
        font-size: 26px;
    }
    .post-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .inner-about-us-wrap {
        padding: 110px 0 44px;
        min-height: 650px;
        height: 100vh;
        height: 100svh;
        max-height: 720px;
    }
    /* title on top, the text and button under it (on a wide screen they sit side by side) */
    .about-banner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 26px;
    }
    .about-banner-title {
        flex: none;
        width: 100%;
    }
    .about-banner-title h1 {
        font-size: 36px;
        line-height: 1.08;
        letter-spacing: -0.025em;
    }
    .about-banner-body {
        flex: none;
        width: 100%;
        gap: 22px;
        padding-bottom: 0;
    }
    .about-banner-text,
    .about-banner-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    /* a stronger shade along the bottom so the text stays readable over the picture */
    .about-bg::after {
        background: linear-gradient(180deg, rgba(8, 5, 18, 0.6) 0%, rgba(8, 5, 18, 0.2) 25%, rgba(8, 5, 18, 0.7) 60%, rgba(8, 5, 18, 0.94) 100%), radial-gradient(60% 60% at 0% 100%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%);
    }
    .about-banner-btn {
        padding: 5px 5px 5px 20px;
        font-size: 14px;
    }
    .about-banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    /* Who are we: heading above the story, no sticky heading */
    .who-are-we-wrap {
        padding: 64px 0;
    }
    .who-grid {
        flex-direction: column;
        gap: 24px;
    }
    .who-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .who-title {
        font-size: 34px;
        line-height: 1.1;
    }
    .who-content {
        flex: none;
        width: 100%;
        padding-top: 0;
    }
    .who-content,
    .who-content p,
    .who-content li {
        font-size: 16px;
        line-height: 1.75;
    }
    .who-content p {
        margin-bottom: 18px;
    }
    .who-content > p:first-child {
        font-size: 18px;
        line-height: 1.6;
    }
    /* Why choose: heading above the numbered list, no sticky heading */
    .inner-why-choose-wrap {
        padding: 64px 0;
    }
    .inner-why-grid {
        flex-direction: column;
        gap: 32px;
    }
    .inner-why-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .inner-why-title {
        font-size: 30px;
        line-height: 1.12;
    }
    .inner-why-sub {
        margin-top: 16px;
        font-size: 15px;
    }
    .inner-why-list {
        flex: none;
        width: 100%;
    }
    .inner-why-item {
        gap: 14px;
        padding: 24px 0;
    }
    .inner-why-num {
        width: 22px;
    }
    .inner-why-body h3 {
        gap: 10px;
        margin-bottom: 8px;
        font-size: 19px;
    }
    .inner-why-text,
    .inner-why-text p {
        font-size: 15px;
        line-height: 1.7;
    }
    /* Our approach: title, intro and button stacked; steps one under another (or a swipe slider) */
    .our-approach-wrap {
        padding: 64px 0;
    }
    .approach-head {
        flex-direction: column;
        gap: 22px;
        margin-bottom: 44px;
    }
    .approach-title {
        flex: none;
        font-size: 34px;
        line-height: 1.08;
    }
    .approach-intro {
        flex: none;
        padding-top: 0;
    }
    .approach-intro p {
        margin-bottom: 24px;
        font-size: 15px;
    }
    .approach-steps:not(.approach-steps--slider) {
        flex-direction: column;
        gap: 30px;
    }
    .approach-step {
        flex: none;
        padding: 0 0 4px 20px;
    }
    .approach-steps--slider > .approach-step {
        flex: 0 0 82%;
        padding-right: 20px;
    }
    .approach-num,
    .approach-icon {
        margin-bottom: 20px;
    }
    .approach-icon {
        width: 56px;
        height: 56px;
    }
    .approach-step h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    .approach-text,
    .approach-text p {
        font-size: 15px;
    }
    /* Call to action */
    .inner-cta-wrap {
        padding: 48px 0;
    }
    .inner-cta {
        min-height: 0;
        padding: 40px 22px;
        border-radius: 22px;
        background-position: 70% center;
    }
    .inner-cta-title {
        font-size: 28px;
        line-height: 1.15;
    }
    .inner-cta-text {
        margin: 14px 0 26px;
        font-size: 15px;
    }
    .features-hero-title {
        font-size: 64px;
    }
    .features-row-title {
        font-size: 23px;
    }
    .features-hero {
        padding: 135px 0 60px;
    }
    .features-hero-title {
        font-size: 38px;
    }
    .features-hero-foot {
        margin-top: 40px;
    }
    .features-hero-intro p {
        font-size: 16px;
    }
    .features-row-media {
        border-radius: 16px;
    }
    .feature-single {
        padding-bottom: 16px;
    }
    .feature-single-hero {
        padding-bottom: 36px;
    }
    .feature-single-back {
        margin-bottom: 24px;
        padding: 4px 16px 4px 4px;
    }
    .feature-single-back-icon {
        width: 30px;
        height: 30px;
    }
    /* title above the demo button instead of beside it */
    .feature-single-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 32px;
        line-height: 1.1;
    }
    .feature-single-head .banner-btn-light {
        margin-bottom: 0;
    }
    .feature-single-media {
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
    .feature-single-body {
        padding-top: 44px;
    }
    /* the article first, then the "All features" list under it as plain navigation (not sticky) */
    .feature-single-grid {
        flex-direction: column;
        gap: 44px;
    }
    .feature-single-content {
        order: 1;
        max-width: none;
    }
    .feature-single-aside {
        order: 2;
        flex: none;
        width: 100%;
    }
    .feature-single-aside-inner {
        position: static;
    }
    .feature-single-label {
        margin-bottom: 12px;
        font-size: 12px;
    }
    .feature-single-index a {
        padding: 13px 0 13px 18px;
        font-size: 15px;
    }
    .feature-single-content p {
        font-size: 16px;
    }
    .feature-single-content > p:first-of-type {
        font-size: 18px;
    }
    .feature-single-content h2,
    .feature-single-content h3,
    .feature-single-content h4 {
        margin: 44px 0 20px;
        font-size: 23px;
    }
    .feature-single-content > :is(h2, h3):first-child {
        margin-bottom: 22px;
        font-size: 26px;
    }
    .feature-single-content li {
        padding-left: 40px;
        font-size: 15px;
    }
    .feature-single-content li > strong:first-child {
        font-size: 16px;
    }
    /* phone: compact rows, a square thumbnail beside the title */
    .feature-more {
        padding: 64px 0;
    }
    .feature-more-head {
        margin-bottom: 28px;
    }
    .feature-more-title {
        font-size: 30px;
    }
    .feature-more-grid {
        flex-direction: column;
        gap: 12px;
    }
    .feature-more-card:nth-child(3) {
        display: flex;
    }
    .feature-more-card {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        border-radius: 20px;
    }
    .feature-more-media {
        flex: 0 0 92px;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }
    .feature-more-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 6px 0 16px;
    }
    .feature-more-name {
        font-size: 17px;
    }
    .feature-more-desc {
        margin-top: 4px;
        font-size: 13.5px;
        line-height: 1.5;
    }
    .feature-more-body {
        align-items: center;
    }
    .feature-more-card:hover,
    .feature-more-card:focus-visible {
        transform: none;
    }
    .testimonials-page-card {
        padding: 26px 24px 24px;
    }
    .testimonials-page-quote p {
        font-size: 16px;
    }
    .testimonials-page-hero {
        padding-bottom: 44px;
    }
    .testimonials-page {
        padding-bottom: 60px;
    }
    .testimonials-page-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .testimonials-page-card {
        padding: 24px 22px 22px;
        border-radius: 20px;
    }
    .testimonials-page-top {
        margin-bottom: 20px;
    }
    .testimonials-dialog {
        align-items: center;
        padding: 16px;
    }
    .testimonials-dialog-box {
        max-height: calc(100vh - 32px);
        padding: 40px 24px 32px;
    }
    .inner-blog-grid {
        gap: 48px 24px;
    }
    .inner-blog-title {
        font-size: 19px;
    }
    .resources-hero {
        padding-bottom: 40px;
    }
    .inner-blog-wrap {
        padding-bottom: 60px;
    }
    /* the pills wrap onto as many lines as they need, so every category is in view (a sideways
       scroller cut the last pill off at the screen edge with no hint that more were there) */
    .blog-category {
        margin: 0 0 32px;
    }
    .blog-category-list {
        flex-wrap: wrap;
        gap: 8px;
    }
    .blog-category-link {
        padding: 9px 14px;
        font-size: 13px;
        line-height: 1.2;
    }
    .inner-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .inner-blog-placeholder span {
        font-size: 22px;
    }
    .inner-blog-meta {
        margin-bottom: 12px;
        font-size: 13px;
    }
    .inner-blog-pages {
        margin-top: 48px;
    }
    .single-blog-title {
        font-size: 46px;
    }
    .single-blog-head {
        padding: 128px 0 36px;
    }
    .single-blog-head .feature-single-back {
        margin-bottom: 28px;
    }
    .single-blog-title {
        font-size: 32px;
        line-height: 1.12;
    }
    .single-blog-meta {
        margin-top: 20px;
        font-size: 14px;
    }
    .single-blog-media {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
    .single-blog-body {
        padding-top: 48px;
    }
    .single-blog-content p {
        font-size: 16.5px;
        line-height: 1.75;
    }
    .single-blog-content h2 {
        margin-top: 48px;
        font-size: 26px;
    }
    .single-blog-content h3 {
        margin-top: 32px;
        font-size: 20px;
    }
    .single-blog-content li {
        font-size: 16px;
    }
    .single-blog-more {
        padding: 72px 0;
    }
    .pricing-hero-title {
        font-size: 48px;
    }
    .pricing-card {
        padding: 30px 26px;
    }
    .pricing-card.is-featured {
        padding-top: 38px;
        padding-bottom: 38px;
    }
    .pricing-card-amount {
        font-size: 38px;
    }
    .pricing-hero {
        padding: 135px 0 56px;
    }
    .pricing-hero-title {
        font-size: 32px;
        line-height: 1.14;
    }
    .pricing-hero-intro p {
        font-size: 16px;
    }
    .pricing-wrap {
        padding-bottom: 64px;
    }
    .pricing-toggle {
        margin-bottom: 40px;
    }
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }
    .pricing-card {
        padding: 28px 24px;
    }
    .pricing-card.is-featured {
        padding: 36px 24px 28px;
    }
    .pricing-card.is-featured .pricing-card-badge {
        position: static;
        align-self: flex-start;
        transform: none;
        margin: 0 0 18px;
    }
    .pricing-card-amount {
        font-size: 34px;
    }

    /* large phone: a little more room than a small phone, so some sizes step up and a few grids
       go to two or three columns */
    .banner-content h1 {
        font-size: 42px;
    }
    .why-choose-head h2,
    .features-head h2,
    .core-hr-head h2,
    .testimonials-head h2,
    .faq-aside h2,
    .demo-content h2,
    .clients-head h2 {
        font-size: 34px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 24px) / 3);
        height: 110px;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        aspect-ratio: 16 / 10;
    }
    .testimonials-board {
        height: 600px;
    }
    .contact-title {
        font-size: 52px;
    }
    .contact-form-card {
        padding: 30px 26px;
    }
    .post-related-grid,
    .inner-blog-grid,
    .testimonials-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
    .about-banner-title h1 {
        font-size: 44px;
    }
    .who-title,
    .approach-title {
        font-size: 40px;
    }
    .inner-why-title {
        font-size: 36px;
    }
    .inner-cta {
        padding: 48px 32px;
    }
    .inner-cta-title {
        font-size: 32px;
    }
    .features-hero-title {
        font-size: 46px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 40px;
    }
    .feature-single-media {
        aspect-ratio: 16 / 9;
    }
    .single-blog-title {
        font-size: 38px;
    }
    .pricing-hero-title {
        font-size: 40px;
    }
    .testimonials-dialog-box {
        padding: 44px 32px 36px;
    }
}

/* tablet: 768px to 991.98px */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .features-item {
        position: relative;
        margin-bottom: 24px;
    }
    .features-item-num {
        display: none;
    }
    .features-item-btn {
        font-size: 20px;
        margin-bottom: 6px;
    }
    /* each feature already shows its own image on a phone, so the shared image stage is not needed */
    .features-stage {
        display: none;
    }
    .banner-content {
        flex: 1 1 100%;
    }
    .home-banner-wrap.has-video {
        aspect-ratio: auto;
        min-height: 100vh;
    }
    .has-video .banner-image {
        top: 0;
    }
    .banner-content h1 .banner-outline {
        -webkit-text-stroke-width: 1.5px;
    }
    .clients-wrap {
        padding: 20px 0 64px;
    }
    .clients-head {
        margin-bottom: 36px;
    }
    .clients-head h2 {
        font-size: 30px;
    }
    .clients-sub {
        font-size: 16px;
    }
    .clients-grid {
        gap: 12px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 12px) / 2);
        height: 96px;
        padding: 16px 18px;
    }

    .header-bar {
        padding: 8px 8px 8px 8px;
    }
    .header-toggle {
        display: flex;
    }
    .header-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        background: #15121d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .25s ease;
    }
    .header-open .header-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle {
        display: none;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        z-index: auto;
        right: auto;
        left: auto;
        padding: 0;
        background: transparent;
        transition: none;
        /* Max Mega Menu's own mobile mode keeps the list hidden until its toggle (hidden here) is clicked */
        visibility: inherit;
        opacity: 1;
        transform: none;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        display: list-item;
        width: auto;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        justify-content: space-between;
        padding: 12px 8px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
        min-width: 0;
        padding: 0 0 0 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    /* full-width button: label on the left, the icon badge on the right where the dark square sits */
    .header-actions .header-btn-primary {
        justify-content: space-between;
        height: 48px;
        padding: 0 8px 0 22px;
    }
    .header-actions .header-btn-primary::before {
        clip-path: inset(6px 6px 6px calc(100% - 42px) round 8px);
    }
    .header-actions .header-btn-primary:hover::before {
        clip-path: inset(4px 4px 4px 4px round 8px);
    }
    .header-actions .header-btn-icon {
        width: 34px;
        height: 34px;
    }
    .banner-content h1 {
        font-size: 52px;
    }
    .banner-content h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }
    .banner-text, .banner-text p {
        font-size: 14px;
        line-height: 1.5;
    }
    .banner-btn-outline,
    .banner-btn-light {
        min-height: 50px;
        font-size: 15px;
    }
    .banner-btn-icon {
        width: 38px;
        height: 38px;
    }
    .banner-btn-light::before {
        clip-path: inset(calc(50% - 19px) 6px calc(50% - 19px) calc(100% - 44px) round 9px);
    }
    .banner-glow {
        width: 300px;
        height: 300px;
    }
    .why-choose-wrap {
        padding: 70px 0;
    }
    .why-choose-head {
        margin-bottom: 40px;
    }
    .why-choose-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .why-choose-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .community-wrap {
        padding: 70px 0 50px;
    }
    .community-head h2 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .community-sub,
    .community-sub p {
        font-size: 15px;
    }
    .community-stage {
        margin-top: 24px;
        padding: 40px 16px;
    }
    .community-avatar-2,
    .community-avatar-5,
    .community-badge {
        display: none;
    }
    .community-cta .banner-btn-light {
        min-height: 46px;
        gap: 10px;
        padding-left: 18px;
        font-size: 14px;
    }
    .community-cta .banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    .community-cta .banner-btn-light::before {
        clip-path: inset(calc(50% - 17px) 6px calc(50% - 17px) calc(100% - 40px) round 8px);
    }
    .features-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .features-wrap {
        padding: 70px 0;
    }
    .features-head {
        margin-bottom: 40px;
    }
    .features-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .features-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .features-item-media {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        margin-bottom: 10px;
    }
    .core-hr-sub {
        font-size: 14px;
        line-height: 1.5;
    }
    .core-hr-card--featured .core-hr-body {
        padding: 40px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        font-size: 30px;
    }
    .core-hr-wrap {
        padding: 70px 0;
    }
    .core-hr-head {
        margin-bottom: 40px;
    }
    .core-hr-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* cards stack one under another: the featured card first, then the row's cards */
    .core-hr-grid,
    .core-hr-row {
        flex-direction: column;
        gap: 18px;
    }
    .core-hr-row > .core-hr-card {
        flex: none;
        width: 100%;
    }
    .core-hr-card {
        border-radius: 20px;
    }
    /* featured card: image on top, text below (on a wide screen it is side by side) */
    .core-hr-card--featured {
        flex-direction: column;
        min-height: 0;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        flex: none;
        width: auto;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 10px 10px 0;
        border-radius: 14px;
    }
    /* every image fills its box on a phone (the desktop contain/left/right pinning is not used) */
    .core-hr-media img,
    .core-hr-card--featured .core-hr-media img,
    .core-hr-row > .core-hr-card:nth-child(1) .core-hr-media img {
        object-fit: cover;
        object-position: center top;
    }
    .core-hr-body,
    .core-hr-card--featured .core-hr-body {
        display: block;
        padding: 22px 20px 26px;
    }
    .core-hr-body h3 {
        font-size: 20px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        margin-bottom: 12px;
        font-size: 24px;
    }
    .core-hr-text,
    .core-hr-text p,
    .core-hr-card--featured .core-hr-text,
    .core-hr-card--featured .core-hr-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    .core-hr-kicker {
        margin-bottom: 14px;
    }
    .testimonials-wrap {
        padding: 70px 0 60px;
    }
    .testimonials-head {
        margin-bottom: 40px;
    }
    .testimonials-head h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    /* one scrolling column of cards, full width; the other two columns would only be squeezed
       into rows below it, so they are left out (the "View all" button leads to the full list) */
    .testimonials-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .testimonials-col--2,
    .testimonials-col--3 {
        display: none;
    }
    .testimonials-board {
        height: 560px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
    }
    .testimonials-set {
        gap: 16px;
        padding-bottom: 16px;
    }
    .testimonials-card {
        padding: 22px 20px 20px;
        border-radius: 16px;
    }
    .testimonials-mark {
        margin-bottom: 12px;
        font-size: 18px;
    }
    .testimonials-logo {
        height: 26px;
        margin-bottom: 14px;
    }
    .testimonials-logo img {
        max-height: 26px;
        max-width: 120px;
    }
    .testimonials-quote p {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .testimonials-author {
        gap: 10px;
        margin-top: 18px;
    }
    .testimonials-avatar {
        width: 38px;
        height: 38px;
    }
    .testimonials-fade {
        height: 180px;
        padding-bottom: 8px;
    }
    .faq-wrap {
        padding: 70px 0;
    }
    .faq-aside h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .faq-sub {
        font-size: 16px;
    }
    .faq-toggle {
        padding: 22px 0;
        font-size: 16px;
    }
    .faq-answer-inner {
        padding-right: 0;
    }
    .demo-wrap {
        padding: 0 0 70px;
    }
    .demo-panel {
        padding: 60px 22px;
        border-radius: 22px;
    }
    .demo-content h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .demo-text {
        font-size: 16px;
    }
    /* checklist stacks, left-aligned, as a block in the middle */
    .demo-points {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .footer-wrap {
        padding-top: 56px;
    }
    /* brand on top, then the link columns, instead of side by side */
    .footer-main {
        flex-direction: column;
        gap: 36px;
        padding-bottom: 40px;
    }
    .footer-brand {
        gap: 18px;
        max-width: none;
    }
    .footer-logo {
        padding: 8px 16px;
        border-radius: 12px;
    }
    .footer-logo img {
        height: 40px;
    }
    .footer-text {
        font-size: 14.5px;
        line-height: 1.7;
    }
    /* two link columns side by side, contact under them across the full width */
    .footer-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-col {
        min-width: 0;
    }
    .footer-col h4 {
        margin: 0 0 16px;
        font-size: 14px;
        letter-spacing: 0.6px;
    }
    .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .footer-contact li {
        max-width: none;
    }
    .footer-contact li + li {
        margin-top: 12px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 22px 0 26px;
    }
    .footer-bottom p {
        font-size: 13px;
        line-height: 1.6;
    }
    .contact-us-wrap {
        padding: 70px 0;
    }
    .contact-us-wrap--page {
        padding-top: 130px;
    }
    /* title above the intro instead of beside it, and the form above the image */
    .contact-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
    }
    .contact-title {
        font-size: 40px;
        line-height: 1.05;
    }
    .contact-intro {
        max-width: none;
        padding-bottom: 0;
    }
    .contact-intro p {
        font-size: 15px;
        line-height: 1.65;
    }
    .contact-body {
        flex-direction: column;
        gap: 16px;
    }
    .contact-form-card {
        flex: none;
        padding: 24px 18px;
        border-radius: 20px;
    }
    .contact-media {
        flex: none;
        min-height: 320px;
        border-radius: 20px;
    }
    .contact-media-tag {
        top: 14px;
        right: 14px;
        padding: 6px 14px;
        font-size: 12px;
    }
    .contact-media-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
    }
    .contact-media-card a {
        font-size: 14px;
    }
    .velo6hr-form-col {
        margin-bottom: 16px;
    }
    .velo6hr-contact-form .form-control {
        padding: 12px 14px;
        font-size: 16px;
    }
    .velo6hr-contact-form textarea.form-control {
        min-height: 110px;
    }
    .velo6hr-form-submit {
        flex-wrap: wrap;
    }
    .velo6hr-submit-btn {
        justify-content: center;
        width: 100%;
        min-height: 52px;
    }
    .contact-info {
        flex-direction: column;
        margin-top: 36px;
    }
    .contact-info-item,
    .contact-info-item:first-child {
        padding: 24px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(20, 16, 31, 0.08);
    }
    .contact-info-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .page-hero {
        padding: 140px 0 70px;
    }
    .page-hero--with-image {
        padding-bottom: 110px;
    }
    .page-intro {
        font-size: 16px;
    }
    .page-feature {
        margin: -70px auto 44px;
        border-radius: 18px;
    }
    .page-body {
        padding: 56px 0 70px;
    }
    .page-content {
        font-size: 17px;
    }
    .page-content h2 {
        font-size: 28px;
    }
    .page-content h3 {
        font-size: 22px;
    }
    .page-content blockquote {
        font-size: 19px;
    }
    .post-head {
        padding: 130px 0 36px;
    }
    .post-dek {
        font-size: 17px;
    }
    .post-content > p:first-of-type {
        font-size: 19px;
    }
    .post-feature img {
        border-radius: 16px;
    }
    .post-nav {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 52px;
        padding-bottom: 70px;
    }
    .post-nav-link--next {
        text-align: left;
    }
    .post-related {
        padding: 64px 0 80px;
    }
    .post-related-title {
        font-size: 26px;
    }
    .post-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .inner-about-us-wrap {
        padding: 110px 0 44px;
        min-height: 650px;
        height: 100vh;
        height: 100svh;
        max-height: 720px;
    }
    /* title on top, the text and button under it (on a wide screen they sit side by side) */
    .about-banner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 26px;
    }
    .about-banner-title {
        flex: none;
        width: 100%;
    }
    .about-banner-title h1 {
        font-size: 36px;
        line-height: 1.08;
        letter-spacing: -0.025em;
    }
    .about-banner-body {
        flex: none;
        width: 100%;
        gap: 22px;
        padding-bottom: 0;
    }
    .about-banner-text,
    .about-banner-text p {
        font-size: 15px;
        line-height: 1.65;
    }
    /* a stronger shade along the bottom so the text stays readable over the picture */
    .about-bg::after {
        background: linear-gradient(180deg, rgba(8, 5, 18, 0.6) 0%, rgba(8, 5, 18, 0.2) 25%, rgba(8, 5, 18, 0.7) 60%, rgba(8, 5, 18, 0.94) 100%), radial-gradient(60% 60% at 0% 100%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%);
    }
    .about-banner-btn {
        padding: 5px 5px 5px 20px;
        font-size: 14px;
    }
    .about-banner-btn-icon {
        width: 34px;
        height: 34px;
    }
    /* Who are we: heading above the story, no sticky heading */
    .who-are-we-wrap {
        padding: 64px 0;
    }
    .who-grid {
        flex-direction: column;
        gap: 24px;
    }
    .who-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .who-title {
        font-size: 34px;
        line-height: 1.1;
    }
    .who-content {
        flex: none;
        width: 100%;
        padding-top: 0;
    }
    .who-content,
    .who-content p,
    .who-content li {
        font-size: 16px;
        line-height: 1.75;
    }
    .who-content p {
        margin-bottom: 18px;
    }
    .who-content > p:first-child {
        font-size: 18px;
        line-height: 1.6;
    }
    /* Why choose: heading above the numbered list, no sticky heading */
    .inner-why-choose-wrap {
        padding: 64px 0;
    }
    .inner-why-grid {
        flex-direction: column;
        gap: 32px;
    }
    .inner-why-head {
        position: static;
        flex: none;
        width: 100%;
    }
    .inner-why-title {
        font-size: 30px;
        line-height: 1.12;
    }
    .inner-why-sub {
        margin-top: 16px;
        font-size: 15px;
    }
    .inner-why-list {
        flex: none;
        width: 100%;
    }
    .inner-why-item {
        gap: 14px;
        padding: 24px 0;
    }
    .inner-why-num {
        width: 22px;
    }
    .inner-why-body h3 {
        gap: 10px;
        margin-bottom: 8px;
        font-size: 19px;
    }
    .inner-why-text,
    .inner-why-text p {
        font-size: 15px;
        line-height: 1.7;
    }
    /* Our approach: title, intro and button stacked; steps one under another (or a swipe slider) */
    .our-approach-wrap {
        padding: 64px 0;
    }
    .approach-head {
        flex-direction: column;
        gap: 22px;
        margin-bottom: 44px;
    }
    .approach-title {
        flex: none;
        font-size: 34px;
        line-height: 1.08;
    }
    .approach-intro {
        flex: none;
        padding-top: 0;
    }
    .approach-intro p {
        margin-bottom: 24px;
        font-size: 15px;
    }
    .approach-steps:not(.approach-steps--slider) {
        flex-direction: column;
        gap: 30px;
    }
    .approach-step {
        flex: none;
        padding: 0 0 4px 20px;
    }
    .approach-steps--slider > .approach-step {
        flex: 0 0 82%;
        padding-right: 20px;
    }
    .approach-num,
    .approach-icon {
        margin-bottom: 20px;
    }
    .approach-icon {
        width: 56px;
        height: 56px;
    }
    .approach-step h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    .approach-text,
    .approach-text p {
        font-size: 15px;
    }
    /* Call to action */
    .inner-cta-wrap {
        padding: 48px 0;
    }
    .inner-cta {
        min-height: 0;
        padding: 40px 22px;
        border-radius: 22px;
        background-position: 70% center;
    }
    .inner-cta-title {
        font-size: 28px;
        line-height: 1.15;
    }
    .inner-cta-text {
        margin: 14px 0 26px;
        font-size: 15px;
    }
    .features-hero-title {
        font-size: 64px;
    }
    .features-row-title {
        font-size: 23px;
    }
    .features-hero {
        padding: 135px 0 60px;
    }
    .features-hero-title {
        font-size: 38px;
    }
    .features-hero-foot {
        margin-top: 40px;
    }
    .features-hero-intro p {
        font-size: 16px;
    }
    .features-row-media {
        border-radius: 16px;
    }
    .feature-single {
        padding-bottom: 16px;
    }
    .feature-single-hero {
        padding-bottom: 36px;
    }
    .feature-single-back {
        margin-bottom: 24px;
        padding: 4px 16px 4px 4px;
    }
    .feature-single-back-icon {
        width: 30px;
        height: 30px;
    }
    /* title above the demo button instead of beside it */
    .feature-single-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 32px;
        line-height: 1.1;
    }
    .feature-single-head .banner-btn-light {
        margin-bottom: 0;
    }
    .feature-single-media {
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
    .feature-single-body {
        padding-top: 44px;
    }
    /* the article first, then the "All features" list under it as plain navigation (not sticky) */
    .feature-single-grid {
        flex-direction: column;
        gap: 44px;
    }
    .feature-single-content {
        order: 1;
        max-width: none;
    }
    .feature-single-aside {
        order: 2;
        flex: none;
        width: 100%;
    }
    .feature-single-aside-inner {
        position: static;
    }
    .feature-single-label {
        margin-bottom: 12px;
        font-size: 12px;
    }
    .feature-single-index a {
        padding: 13px 0 13px 18px;
        font-size: 15px;
    }
    .feature-single-content p {
        font-size: 16px;
    }
    .feature-single-content > p:first-of-type {
        font-size: 18px;
    }
    .feature-single-content h2,
    .feature-single-content h3,
    .feature-single-content h4 {
        margin: 44px 0 20px;
        font-size: 23px;
    }
    .feature-single-content > :is(h2, h3):first-child {
        margin-bottom: 22px;
        font-size: 26px;
    }
    .feature-single-content li {
        padding-left: 40px;
        font-size: 15px;
    }
    .feature-single-content li > strong:first-child {
        font-size: 16px;
    }
    /* phone: compact rows, a square thumbnail beside the title */
    .feature-more {
        padding: 64px 0;
    }
    .feature-more-head {
        margin-bottom: 28px;
    }
    .feature-more-title {
        font-size: 30px;
    }
    .feature-more-grid {
        flex-direction: column;
        gap: 12px;
    }
    .feature-more-card:nth-child(3) {
        display: flex;
    }
    .feature-more-card {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        border-radius: 20px;
    }
    .feature-more-media {
        flex: 0 0 92px;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }
    .feature-more-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 6px 0 16px;
    }
    .feature-more-name {
        font-size: 17px;
    }
    .feature-more-desc {
        margin-top: 4px;
        font-size: 13.5px;
        line-height: 1.5;
    }
    .feature-more-body {
        align-items: center;
    }
    .feature-more-card:hover,
    .feature-more-card:focus-visible {
        transform: none;
    }
    .testimonials-page-card {
        padding: 26px 24px 24px;
    }
    .testimonials-page-quote p {
        font-size: 16px;
    }
    .testimonials-page-hero {
        padding-bottom: 44px;
    }
    .testimonials-page {
        padding-bottom: 60px;
    }
    .testimonials-page-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .testimonials-page-card {
        padding: 24px 22px 22px;
        border-radius: 20px;
    }
    .testimonials-page-top {
        margin-bottom: 20px;
    }
    .testimonials-dialog {
        align-items: center;
        padding: 16px;
    }
    .testimonials-dialog-box {
        max-height: calc(100vh - 32px);
        padding: 40px 24px 32px;
    }
    .inner-blog-grid {
        gap: 48px 24px;
    }
    .inner-blog-title {
        font-size: 19px;
    }
    .resources-hero {
        padding-bottom: 40px;
    }
    .inner-blog-wrap {
        padding-bottom: 60px;
    }
    /* the pills wrap onto as many lines as they need, so every category is in view (a sideways
       scroller cut the last pill off at the screen edge with no hint that more were there) */
    .blog-category {
        margin: 0 0 32px;
    }
    .blog-category-list {
        flex-wrap: wrap;
        gap: 8px;
    }
    .blog-category-link {
        padding: 9px 14px;
        font-size: 13px;
        line-height: 1.2;
    }
    .inner-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .inner-blog-placeholder span {
        font-size: 22px;
    }
    .inner-blog-meta {
        margin-bottom: 12px;
        font-size: 13px;
    }
    .inner-blog-pages {
        margin-top: 48px;
    }
    .single-blog-title {
        font-size: 46px;
    }
    .single-blog-head {
        padding: 128px 0 36px;
    }
    .single-blog-head .feature-single-back {
        margin-bottom: 28px;
    }
    .single-blog-title {
        font-size: 32px;
        line-height: 1.12;
    }
    .single-blog-meta {
        margin-top: 20px;
        font-size: 14px;
    }
    .single-blog-media {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
    .single-blog-body {
        padding-top: 48px;
    }
    .single-blog-content p {
        font-size: 16.5px;
        line-height: 1.75;
    }
    .single-blog-content h2 {
        margin-top: 48px;
        font-size: 26px;
    }
    .single-blog-content h3 {
        margin-top: 32px;
        font-size: 20px;
    }
    .single-blog-content li {
        font-size: 16px;
    }
    .single-blog-more {
        padding: 72px 0;
    }
    .pricing-hero-title {
        font-size: 48px;
    }
    .pricing-card {
        padding: 30px 26px;
    }
    .pricing-card.is-featured {
        padding-top: 38px;
        padding-bottom: 38px;
    }
    .pricing-card-amount {
        font-size: 38px;
    }
    .pricing-hero {
        padding: 135px 0 56px;
    }
    .pricing-hero-title {
        font-size: 32px;
        line-height: 1.14;
    }
    .pricing-hero-intro p {
        font-size: 16px;
    }
    .pricing-wrap {
        padding-bottom: 64px;
    }
    .pricing-toggle {
        margin-bottom: 40px;
    }
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }
    .pricing-card {
        padding: 28px 24px;
    }
    .pricing-card.is-featured {
        padding: 36px 24px 28px;
    }
    .pricing-card.is-featured .pricing-card-badge {
        position: static;
        align-self: flex-start;
        transform: none;
        margin: 0 0 18px;
    }
    .pricing-card-amount {
        font-size: 34px;
    }

    /* large phone: a little more room than a small phone, so some sizes step up and a few grids
       go to two or three columns */
    .banner-content h1 {
        font-size: 42px;
    }
    .why-choose-head h2,
    .features-head h2,
    .core-hr-head h2,
    .testimonials-head h2,
    .faq-aside h2,
    .demo-content h2,
    .clients-head h2 {
        font-size: 34px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 24px) / 3);
        height: 110px;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        aspect-ratio: 16 / 10;
    }
    .testimonials-board {
        height: 600px;
    }
    .contact-title {
        font-size: 52px;
    }
    .contact-form-card {
        padding: 30px 26px;
    }
    .post-related-grid,
    .inner-blog-grid,
    .testimonials-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
    .about-banner-title h1 {
        font-size: 44px;
    }
    .who-title,
    .approach-title {
        font-size: 40px;
    }
    .inner-why-title {
        font-size: 36px;
    }
    .inner-cta {
        padding: 48px 32px;
    }
    .inner-cta-title {
        font-size: 32px;
    }
    .features-hero-title {
        font-size: 46px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 40px;
    }
    .feature-single-media {
        aspect-ratio: 16 / 9;
    }
    .single-blog-title {
        font-size: 38px;
    }
    .pricing-hero-title {
        font-size: 40px;
    }
    .testimonials-dialog-box {
        padding: 44px 32px 36px;
    }

    /* tablet: the large-phone rules above, stepped up for the extra width - bigger type, more
       breathing room, and two or three columns where the content allows it */
    .header-wrapper {
        padding: 16px 0;
    }
    .header-menu {
        left: auto;
        width: 340px;
    }
    .banner-content h1 {
        font-size: 52px;
    }
    .banner-content {
        flex: 1 1 100%;
    }
    .banner-image {
        flex: 1 1 100%;
        text-align: center;
    }
    /* the phone image at a set size, centred under the text, instead of filling the full width */
    .banner-image img,
    .has-video .banner-image img {
        width: auto;
        max-width: min(100%, 380px);
        max-height: 520px;
    }
    .why-choose-wrap,
    .features-wrap,
    .core-hr-wrap,
    .faq-wrap,
    .contact-us-wrap,
    .who-are-we-wrap,
    .inner-why-choose-wrap,
    .our-approach-wrap {
        padding: 90px 0;
    }
    .testimonials-wrap {
        padding: 90px 0 70px;
    }
    .why-choose-head h2,
    .features-head h2,
    .core-hr-head h2,
    .testimonials-head h2,
    .faq-aside h2,
    .demo-content h2,
    .clients-head h2 {
        font-size: 40px;
    }
    .clients-item {
        flex: 0 1 calc((100% - 60px) / 4);
        height: 120px;
    }
    /* features: two cards per row */
    .features-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }
    .features-item {
        margin-bottom: 0;
    }
    /* core HR: the featured card full width, the other cards two to a row */
    .core-hr-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .core-hr-row > .core-hr-card {
        flex: 1 1 calc(50% - 9px);
        width: auto;
    }
    .core-hr-media,
    .core-hr-card--featured .core-hr-media {
        aspect-ratio: 4 / 3;
    }
    .core-hr-card--featured .core-hr-media {
        aspect-ratio: 16 / 9;
    }
    /* testimonials: two scrolling columns */
    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .testimonials-col--2 {
        display: block;
    }
    .testimonials-board {
        height: 680px;
    }
    /* FAQ: heading above the questions, not sticky */
    .faq-aside {
        position: static;
        padding-right: 0;
        margin-bottom: 36px;
    }
    .faq-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
    }
    .demo-panel {
        padding: 80px 48px;
    }
    .contact-title {
        font-size: 64px;
    }
    .contact-media {
        min-height: 380px;
    }
    /* footer: the three link columns in one row */
    .footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .footer-col:last-child {
        grid-column: auto;
    }
    .inner-about-us-wrap {
        padding: 130px 0 56px;
        min-height: 650px;
        height: 100vh;
        height: 100svh;
        max-height: 820px;
    }
    .about-banner-title h1 {
        font-size: 54px;
    }
    .who-title,
    .approach-title {
        font-size: 46px;
    }
    .inner-why-title {
        font-size: 40px;
    }
    .approach-steps:not(.approach-steps--slider) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }
    .approach-steps--slider > .approach-step {
        flex: 0 0 45%;
    }
    .inner-cta {
        padding: 56px 48px;
    }
    .inner-cta-title {
        font-size: 38px;
    }
    .features-hero {
        padding: 160px 0 70px;
    }
    .features-hero-title {
        font-size: 54px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 44px;
    }
    .single-blog-title {
        font-size: 44px;
    }
    /* pricing: plans one under another, at a readable width */
    .pricing-hero-title {
        font-size: 46px;
    }
    .pricing-grid {
        max-width: 560px;
        margin: 0 auto;
    }
}

/* small desktop: 992px to 1199.5px */
@media only screen and (min-width: 992px) and (max-width: 1199.5px) {
    .clients-item {
        flex: 0 1 calc((100% - 60px) / 4);
    }

    .header-bar {
        padding: 8px 8px 8px 20px;
    }
    .header-toggle {
        display: flex;
    }
    .header-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        background: #15121d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: -1;
        transform: translateY(-8px);
        transition: .25s ease;
    }
    .header-open .header-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        z-index: 99999;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle {
        display: none;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        z-index: auto;
        right: auto;
        left: auto;
        padding: 0;
        background: transparent;
        transition: none;
        /* Max Mega Menu's own mobile mode keeps the list hidden until its toggle (hidden here) is clicked */
        visibility: inherit;
        opacity: 1;
        transform: none;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        display: list-item;
        width: auto;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        justify-content: space-between;
        padding: 12px 8px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
        min-width: 0;
        padding: 0 0 0 12px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    /* full-width button: label on the left, the icon badge on the right where the dark square sits */
    .header-actions .header-btn-primary {
        justify-content: space-between;
        height: 48px;
        padding: 0 8px 0 22px;
    }
    .header-actions .header-btn-primary::before {
        clip-path: inset(6px 6px 6px calc(100% - 42px) round 8px);
    }
    .header-actions .header-btn-primary:hover::before {
        clip-path: inset(4px 4px 4px 4px round 8px);
    }
    .header-actions .header-btn-icon {
        width: 34px;
        height: 34px;
    }
    .banner-content h1 {
        font-size: 52px;
    }
    .core-hr-card--featured .core-hr-body {
        padding: 40px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        font-size: 30px;
    }
    .footer-cols {
        gap: 48px;
    }
    .about-banner-title h1 {
        font-size: 60px;
    }
    .approach-title {
        font-size: 54px;
    }
    .features-hero-title {
        font-size: 64px;
    }
    .features-row-title {
        font-size: 23px;
    }
    .feature-single-hero .features-hero-title {
        font-size: 50px;
    }
    .feature-single-grid {
        gap: 44px;
    }
    .feature-single-aside {
        flex-basis: 220px;
    }
    .testimonials-page-card {
        padding: 26px 24px 24px;
    }
    .testimonials-page-quote p {
        font-size: 16px;
    }
    .inner-blog-grid {
        gap: 48px 24px;
    }
    .inner-blog-title {
        font-size: 19px;
    }
    .single-blog-title {
        font-size: 46px;
    }
    .pricing-hero-title {
        font-size: 48px;
    }
    .pricing-card {
        padding: 30px 26px;
    }
    .pricing-card.is-featured {
        padding-top: 38px;
        padding-bottom: 38px;
    }
    .pricing-card-amount {
        font-size: 38px;
    }

    /* the open menu as a panel on the right rather than across the whole bar */
    .header-menu {
        left: auto;
        width: 360px;
    }
    .banner-content h1 {
        font-size: 54px;
    }
    .banner-image img,
    .has-video .banner-image img {
        width: auto;
        max-height: 560px;
    }
    .why-choose-head h2,
    .faq-aside h2 {
        font-size: 42px;
    }
    /* Why choose: two cards per row instead of four narrow ones, with the icon beside the text */
    .why-choose-wrap {
        padding: 100px 0;
    }
    .why-choose-head {
        margin-bottom: 48px;
    }
    .why-choose-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .why-choose-card {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 20px;
        align-content: start;
        padding: 28px 28px 30px;
    }
    .why-choose-icon {
        grid-row: span 2;
        margin-bottom: 0;
    }
    .why-choose-card h3 {
        margin-bottom: 8px;
        font-size: 21px;
    }
    .why-choose-text,
    .why-choose-text p {
        font-size: 15.5px;
    }
    .features-head h2,
    .core-hr-head h2,
    .testimonials-head h2,
    .clients-head h2 {
        font-size: 40px;
    }
    .demo-content h2 {
        font-size: 46px;
    }
    .features-item-btn {
        font-size: 21px;
    }
    /* (.features-story in front so this wins over the 992px-and-up rule that comes later in the file) */
    .features-story .features-stage {
        height: min(480px, 65vh);
    }
    .core-hr-card--featured {
        min-height: 400px;
    }
    .core-hr-media {
        height: 240px;
    }
    .core-hr-body {
        padding: 24px 24px 28px;
    }
    .testimonials-board {
        height: 720px;
    }
    .footer-main {
        gap: 40px;
    }
    .footer-brand {
        max-width: 320px;
    }
    .who-title {
        font-size: 48px;
    }
    .who-grid {
        gap: 40px 64px;
    }
    .inner-why-title {
        font-size: 40px;
    }
    .inner-why-grid {
        gap: 40px 56px;
    }
    .approach-step {
        padding-right: 24px;
    }
    .inner-cta {
        padding: 64px 56px;
    }
    .inner-cta-title {
        font-size: 40px;
    }
    /* Pricing: three plans side by side in the narrower width, so everything a size smaller and
       the price kept on one line */
    .pricing-hero {
        padding: 160px 0 70px;
    }
    .pricing-hero-title {
        font-size: 46px;
    }
    .pricing-toggle {
        margin-bottom: 56px;
    }
    .pricing-grid {
        gap: 18px;
    }
    .pricing-card {
        padding: 28px 22px;
        border-radius: 20px;
    }
    .pricing-card.is-featured {
        margin-top: -16px;
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .pricing-card-name {
        font-size: 21px;
    }
    .pricing-card-price {
        flex-wrap: nowrap;
        margin-top: 14px;
    }
    .pricing-card-amount {
        font-size: 34px;
        white-space: nowrap;
    }
    .pricing-card-period {
        font-size: 14px;
        white-space: nowrap;
    }
    .pricing-card-desc p {
        font-size: 14px;
    }
    .pricing-card-cta {
        margin-top: 22px;
        padding: 13px 16px;
        font-size: 14.5px;
    }
    .pricing-card-features {
        gap: 12px;
        margin-top: 22px;
        padding-top: 20px;
    }
    .pricing-card-features li {
        font-size: 14px;
    }
}

/* laptop: 1200px to 1369.5px */
@media only screen and (min-width: 1200px) and (max-width: 1369.5px) {
    /* Max Mega Menu's own mobile mode runs up to and including 1200px (its breakpoint setting), so at
       exactly 1200px it would show its hamburger and fold the menu away. Keep the desktop menu here. */
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle {
        display: none;
    }
    .header-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        left: auto;
        right: auto;
        padding: 0;
        background: transparent;
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        display: block;
        flex: none;
        width: auto;
        clear: none;
        border: 0;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        height: auto;
        padding: 10px 0;
        line-height: 1.4;
        text-align: left;
        white-space: nowrap;
    }
    /* a little less space between the menu items so everything fits on one bar */
    .header-menu #mega-menu-wrap-primary #mega-menu-primary {
        gap: 26px;
    }
    .header-bar {
        gap: 18px;
    }
    .header-btn-primary {
        padding-left: 18px;
    }
    .banner-content h1 {
        font-size: 58px;
    }
}


@media only screen and (min-width: 1600px) and (max-width: 1919.5px) {
    /* a wider page, but capped and centred so lines don't stretch across very wide screens */
    .custom-container {
        padding: 0 clamp(20px, 6vw, 140px) !important;
        width: 100%;
    }
    p,
    a {
        font-size: 17px;
    }
    .header-wrapper {
        padding: 16px 0;
    }
    .header-logo img {
        height: 36px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary {
        gap: 44px;
    }
    .header-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-size: 17px;
    }
    .header-btn {
        height: 48px;
        font-size: 17px;
    }

    /* home */
    .home-banner-wrap {
        padding-top: 180px;
    }
    .banner-content h1 {
        max-width: 560px;
        font-size: 74px;
    }
    .banner-text,
    .banner-text p {
        max-width: 600px;
        font-size: 19px;
    }
    .banner-btn-outline,
    .banner-btn-light {
        min-height: 60px;
        font-size: 17px;
    }
    .why-choose-wrap,
    .features-wrap,
    .core-hr-wrap,
    .faq-wrap {
        padding: 140px 0;
    }
    .testimonials-wrap {
        padding: 140px 0 110px;
    }
    .why-choose-head,
    .clients-head,
    .testimonials-head {
        max-width: 760px;
    }
    .why-choose-head h2,
    .faq-aside h2 {
        font-size: 54px;
    }
    .features-head h2,
    .core-hr-head h2,
    .testimonials-head h2,
    .clients-head h2,
    .community-head h2 {
        font-size: 50px;
    }
    .why-choose-sub,
    .features-sub,
    .core-hr-sub,
    .clients-sub {
        font-size: 19px;
    }
    .why-choose-card {
        padding: 36px 32px;
    }
    .why-choose-card h3 {
        font-size: 24px;
    }
    .features-item-btn {
        font-size: 26px;
    }
    .features-item-text p {
        font-size: 15px;
    }
    /* (.features-story in front so this wins over the 992px-and-up rule later in the file) */
    .features-story .features-stage {
        height: min(640px, 70vh);
    }
    .core-hr-card--featured {
        min-height: 520px;
    }
    .core-hr-media {
        height: 320px;
    }
    .core-hr-card--featured .core-hr-body h3 {
        font-size: 38px;
    }
    .core-hr-body h3 {
        font-size: 24px;
    }
    .core-hr-text,
    .core-hr-text p {
        font-size: 17px;
    }
    .clients-item {
        height: 150px;
    }
    .testimonials-board {
        height: 860px;
    }
    .testimonials-quote p {
        font-size: 16px;
    }
    .faq-toggle {
        font-size: 20px;
    }
    .demo-panel {
        padding: 130px 60px;
    }
    .demo-content {
        max-width: 860px;
    }
    .demo-content h2 {
        font-size: 60px;
    }
    .demo-text {
        font-size: 19px;
    }
    .footer-wrap {
        padding-top: 104px;
    }
    .footer-brand {
        max-width: 440px;
    }
    .footer-cols {
        gap: 96px;
    }

    /* inner pages */
    .inner-about-us-wrap {
        padding: 150px 0 80px;
    }
    .about-banner-title h1 {
        font-size: 82px;
    }
    .about-banner-body {
        flex-basis: 420px;
    }
    .about-banner-text,
    .about-banner-text p {
        font-size: 17px;
    }
    .who-are-we-wrap,
    .inner-why-choose-wrap {
        padding: 150px 0;
    }
    .who-title {
        font-size: 64px;
    }
    .who-content,
    .who-content p,
    .who-content li {
        font-size: 19px;
    }
    .who-content > p:first-child {
        font-size: 24px;
    }
    .inner-why-title {
        font-size: 50px;
    }
    .inner-why-body h3 {
        font-size: 26px;
    }
    .inner-why-text,
    .inner-why-text p {
        max-width: 640px;
        font-size: 17px;
    }
    .our-approach-wrap {
        padding: 150px 0 140px;
    }
    .approach-title {
        font-size: 74px;
    }
    .approach-step h3 {
        font-size: 24px;
    }
    .approach-text,
    .approach-text p {
        font-size: 16px;
    }
    .inner-cta-wrap {
        padding: 120px 0;
    }
    .inner-cta {
        min-height: 460px;
        padding: 80px 96px;
    }
    .inner-cta-title {
        max-width: 720px;
        font-size: 52px;
    }
    .inner-cta-text {
        max-width: 500px;
        font-size: 17px;
    }
    .features-hero,
    .pricing-hero {
        padding-top: 210px;
    }
    .features-hero-title {
        max-width: 1100px;
        font-size: 76px;
    }
    .features-hero-intro {
        flex-basis: 520px;
    }
    .features-row-title {
        font-size: 28px;
    }
    .feature-single-hero .features-hero-title {
        max-width: 960px;
        font-size: 72px;
    }
    .feature-single-content {
        max-width: 860px;
    }
    .feature-single-content p {
        font-size: 19px;
    }
    .feature-more-title {
        font-size: 46px;
    }
    .single-blog-title {
        max-width: 1100px;
        font-size: 62px;
    }
    .single-blog-content p {
        font-size: 19px;
    }
    .pricing-hero-inner {
        max-width: 820px;
    }
    .pricing-hero-title {
        font-size: 64px;
    }
    .pricing-grid {
        gap: 32px;
    }
    .pricing-card {
        padding: 40px 36px;
    }
    .pricing-card-amount {
        font-size: 50px;
    }
    .pricing-card-features li {
        font-size: 15.5px;
    }
    .inner-blog-title {
        font-size: 23px;
    }
    .testimonials-page-quote p {
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
    .features-list {
        padding-right: 40px;
    }
    /* a thin rail on the left; the active item's part of it lights up */
    .features-item {
        padding: 22px 24px 22px 32px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 18px 18px 0;
        transition: background-color 0.5s ease, box-shadow 0.5s ease;
    }
    .features-item.is-active {
        background: linear-gradient(90deg, rgba(124, 92, 255, 0.14) 0%, rgba(124, 92, 255, 0.03) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .features-item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 2px;
        background: linear-gradient(180deg, #cdbdff 0%, #7c5cff 100%);
        box-shadow: 0 0 14px rgba(124, 92, 255, 0.8);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .features-item.is-active::before {
        transform: scaleY(1);
    }
    .features-item-btn {
        opacity: 0.4;
        transition: opacity 0.4s ease;
    }
    .features-item-btn:hover,
    .features-item.is-active .features-item-btn {
        opacity: 1;
    }
    /* only the active feature's text is open: the 0fr -> 1fr row animates its height */
    .features-item-text {
        display: grid;
        grid-template-rows: 0fr;
        margin-left: 44px;
        opacity: 0;
        /* hidden from keyboard and screen readers while closed (visibility flips after it has shut) */
        visibility: hidden;
        transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, margin-top 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.7s;
    }
    .features-item-text-inner {
        min-height: 0;
        overflow: hidden;
    }
    .features-item.is-active .features-item-text {
        grid-template-rows: 1fr;
        margin-top: 12px;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
    .features-item-media {
        display: none;
    }

    .features-stage {
        height: min(560px, 70vh);
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
            0 50px 120px -50px rgba(124, 92, 255, 0.55),
            0 0 0 8px rgba(255, 255, 255, 0.02);
    }
    /* bottom shade (keeps the progress line readable) and a fine inner edge */
    .features-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(8, 5, 15, 0) 60%, rgba(8, 5, 15, 0.55) 100%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    /* the active image comes into focus while the previous one fades out behind it */
    .features-shot {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        transform: scale(1.08);
        filter: blur(10px);
        transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;
    }
    .features-shot.is-active {
        z-index: 1;
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    /* frosted caption on each image: "03 / 04" and the feature name; it crossfades with its image */
    .features-shot-caption {
        position: absolute;
        left: 24px;
        bottom: 46px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 14px;
        max-width: calc(100% - 48px);
        padding: 12px 18px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(12, 8, 22, 0.45);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        color: #fff;
        transform: translateY(10px);
        opacity: 0;
        transition: opacity 0.6s ease 0.25s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
    }
    .features-shot.is-active .features-shot-caption {
        opacity: 1;
        transform: none;
    }
    .features-shot-count {
        flex: none;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #cdbdff;
    }
    .features-shot-count em {
        font-style: normal;
        color: rgba(255, 255, 255, 0.45);
    }
    .features-shot-title {
        overflow: hidden;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* one segment per feature; the current one fills as the visitor scrolls (homepage-animation.js) */
    .features-progress {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 24px;
        z-index: 3;
        display: flex;
        gap: 6px;
    }
    .features-progress-seg {
        flex: 1 1 0;
        height: 3px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.2);
    }
    .features-progress-fill {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #cdbdff 0%, #ffffff 100%);
        transform: scaleX(0);
        transform-origin: left;
    }
}

/* responsive ranges end */

/* reduced motion start */

/* every prefers-reduced-motion rule in the file, combined into one block */

@media (prefers-reduced-motion: reduce) {
    .banner-gradient::before,
    .banner-gradient::after {
        animation: none;
    }

    .banner-btn-outline::before,
    .banner-btn-outline::after {
        animation: none;
    }

    .why-choose-card,
    .why-choose-icon {
        transition: none;
    }
    .why-choose-card:hover {
        transform: none;
    }

    .community-glow,
    .community-ring-1::before,
    .community-ring-3::before,
    .community-badge-inner {
        animation: none;
    }
    .community-avatar-inner {
        transition: none;
    }

    .features-item::before,
    .features-item,
    .features-item-btn,
    .features-item-text,
    .features-shot,
    .features-shot-caption {
        transition: none;
    }

    .core-hr-media img {
        transition: none;
    }
    .core-hr-card:hover .core-hr-media img {
        transform: none;
    }

    .testimonials-card {
        transition: none;
    }
    /* a still wall: no loop, and no duplicate set */
    .testimonials-track {
        animation: none;
    }
    .testimonials-set[aria-hidden="true"] {
        display: none;
    }

    .faq-tab,
    .faq-toggle,
    .faq-icon,
    .faq-icon::before,
    .faq-icon::after,
    .faq-answer,
    .faq-answer-inner {
        transition: none;
    }

    .demo-glow {
        animation: none;
    }

    .footer-wrap::after {
        animation: none;
    }

    .contact-us-wrap--page .contact-head,
    .contact-us-wrap--page .contact-body {
        animation: none;
    }
    .velo6hr-submit-btn:hover {
        transform: none;
    }

    .page-hero--empty .page-hero-glow,
    .page-soon-dot::after {
        animation: none;
    }

    .page-hero-inner,
    .page-feature {
        animation: none;
    }

    .post-head-inner,
    .post-feature {
        animation: none;
    }
    .post-card:hover {
        transform: none;
    }

    .about-bg img {
        animation: none;
    }

    .inner-why-item::before,
    .inner-why-num,
    .inner-why-body h3 {
        transition: none;
    }

    .approach-icon,
    .approach-btn-icon {
        transition: none;
    }
    .approach-step:hover .approach-icon {
        transform: none;
    }

    .features-row-media img,
    .features-row-link span[aria-hidden] {
        transition: none;
    }
    .features-row:hover .features-row-media img {
        transform: none;
    }

    .feature-single-back,
    .feature-single-back-icon,
    .feature-single-back-icon svg,
    .feature-single-index a::before,
    .feature-more-all,
    .feature-more-icon,
    .feature-more-icon svg,
    .feature-more-card,
    .feature-more-media img {
        transition: none;
    }
    .feature-more-card:hover,
    .feature-more-card:focus-visible,
    .feature-more-card:hover .feature-more-media img {
        transform: none;
    }

    .testimonials-page-card,
    .testimonials-page-more span[aria-hidden],
    .testimonials-dialog-backdrop,
    .testimonials-dialog-box {
        transition: none;
    }
    .testimonials-page-card:hover {
        transform: none;
    }

    .inner-blog-media img,
    .inner-blog-placeholder {
        transition: none;
    }
    .inner-blog-card:hover .inner-blog-media img,
    .inner-blog-card:hover .inner-blog-placeholder {
        transform: none;
    }

    .pricing-switch-knob,
    .pricing-card {
        transition: none;
    }

    /* With reduced motion the headings are never split into animated lines, so they carry their gradient
   themselves (when animating, only the lines may carry it; see .who-title .who-line). */
    .about-banner-title h1,
    .inner-why-title {
        background: linear-gradient(170deg, #ffffff 0%, #f1ecff 50%, #b7a6ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .who-title,
    .contact-title {
        background: linear-gradient(100deg, #14101f 0%, #2d2150 50%, #6a48f5 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* reduced motion ends */