/**
Theme Name: TMS
Author: PureLogics
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tms
Template: astra
*/

:root {
    --paper: #f8f7f3;
    --ink: #252723;
    --muted: #7c7e76;
    --orange: #ea7048;
    --line: #e6e6de;
    --green: #52816c
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

button,a {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible,button:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 5px
}

h1,h2,h3,.brand {
    font-family: Manrope,sans-serif
}

h2 {
    font-size: 44px;
    font-weight: 650;
    letter-spacing: -1.8px;
    line-height: 1.2
}

h3 {
    font-weight: 650;
    letter-spacing: -.7px
}

.container {
    max-width: 1200px;
    padding-left: 28px;
    padding-right: 28px
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(248,247,243,.96);
    position: sticky;
    top: 0;
    z-index: 100
}

.navbar {
    min-height: 89px
}

.brand {
    display: inline-flex;
    align-items: center;
    font-size: 36px;
    letter-spacing: -2px;
    font-weight: 800;
    gap: 9px;
    line-height: 1
}

.brand-dot {
    margin-left: -9px
}

.brand-mark {
    display: flex;
    gap: 3px;
    width: 29px;
    align-items: center;
    transform: rotate(-12deg)
}

.brand-mark i {
    display: block;
    background: var(--orange);
    width: 7px;
    height: 24px;
    border-radius: 2px
}

.brand-mark i:first-child {
    height: 16px;
    align-self: flex-start
}

.brand-mark i:last-child {
    height: 16px;
    align-self: flex-end
}

.navbar .nav-link {
    font-size: 13px;
    color: #5c5f56;
    margin: 0 13px
}

.nav-link:hover,.text-link:hover {
    color: var(--orange)
}

.nav-demo {
    font-size: 13px;
    margin-right: 25px
}

.nav-demo span {
    margin-left: 9px
}

.btn {
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    padding: 15px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 49px;
    transition: transform .2s,background .2s
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-sm {
    padding: 12px 17px;
    min-height: 43px
}

.btn-dark {
    background: #292c26;
    border-color: #292c26;
    color: #fff
}

.btn-orange {
    background: var(--orange);
    border-color: var(--orange);
    color: white;
    box-shadow: 0 3px 0 #d25c3420
}

.btn-orange:hover {
    background: #d76039;
    border-color: #d76039;
    color: white
}

.btn-outline {
    border: 1px solid #d8d9d1;
    background: transparent;
    color: var(--ink)
}

.btn-outline:hover {
    background: #efeee7;
    border-color: #c5c7bc
}

.hero {
    padding-top: 66px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 70%,#e9eddf55,transparent 65%)
}

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfdfd6;
    background: #f0f0e9;
    border-radius: 30px;
    padding: 7px 13px;
    font-size: 9px;
    letter-spacing: 1.3px;
    font-weight: 650
}

.sparkle {
    color: var(--orange);
    font-size: 20px;
    line-height: 1
}

.pill-arrow {
    padding-left: 8px;
    border-left: 1px solid #d8d9d1;
    font-size: 15px
}

h1 {
    font-size: clamp(43px,5.1vw,68px);
    font-weight: 650;
    line-height: 1.14;
    letter-spacing: -3.3px;
    margin: 26px 0 25px
}

.accent-word {
    color: var(--orange);
    position: relative;
    white-space: nowrap
}

.accent-word svg {
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 15px;
    fill: none;
    stroke: var(--orange);
    stroke-width: 2;
    opacity: .65
}

.hero-copy {
    color: #76796f;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 26px
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px
}

.play-icon {
    border: 1px solid #8c9084;
    border-radius: 50%;
    height: 19px;
    width: 19px;
    display: grid;
    place-items: center;
    font-size: 8px;
    padding-left: 1px
}

.hero-actions .btn-outline {
    gap: 10px
}

.hero-notes {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-size: 10px;
    color: #828578;
    margin-top: 17px
}

.hero-notes span::first-letter {
    color: var(--green)
}

.product-stage {
    position: relative;
    margin: 66px auto 0;
    max-width: 1070px
}

.app-window {
    background: #fff;
    border: 1px solid #dcdfd4;
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 0 7px #ebede477,0 18px 65px #363f2910;
    height: 528px
}

.float-note {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    position: absolute;
    z-index: 2;
    right: -24px;
    top: -26px;
    border: 1px solid #dedfd4;
    border-radius: 10px;
    background: #fffef9;
    padding: 13px 17px;
    transform: rotate(4deg);
    box-shadow: 0 6px 20px #35392e08
}

.float-note strong {
    font-size: 11px;
    display: block
}

.float-note div>span {
    display: block;
    font-size: 9px;
    color: #8a8e81;
    margin-top: 3px
}

.note-symbol {
    background: #f8eadf;
    color: #d87c50;
    border-radius: 8px;
    font-size: 23px;
    padding: 0 8px
}

.note-check {
    border: 1px solid #d4dece;
    border-radius: 50%;
    font-size: 10px;
    color: #5e8957;
    width: 18px;
    height: 18px;
    text-align: center;
    margin-left: 5px
}

.app-sidebar {
    width: 183px;
    flex-shrink: 0;
    background: #fafbf8;
    border-right: 1px solid #e9ebe4;
    padding: 23px 13px 13px;
    position: relative;
    font-size: 10px
}

.app-brand {
    font-size: 26px;
    padding-left: 9px;
    margin-bottom: 23px
}

.app-brand .brand-mark {
    transform: rotate(-12deg) scale(.7);
    width: 23px
}

.workspace {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 7px;
    border: 1px solid #e1e5db;
    border-radius: 6px;
    font-size: 9px
}

.workspace small,.profile small {
    display: block;
    color: #969b8c;
    font-size: 7px;
    margin-top: 3px
}

.workspace>span:last-child {
    margin-left: auto
}

.workspace-icon {
    font-size: 11px;
    border: 1px solid #e3ded0;
    background: #f0ece1;
    border-radius: 4px;
    padding: 4px 6px
}

.sidebar-label {
    font-size: 7px;
    letter-spacing: 1px;
    color: #92968a;
    margin: 23px 9px 10px
}

.sidebar-item {
    padding: 9px 10px;
    display: flex;
    gap: 10px;
    color: #7d8377;
    font-size: 10px;
    margin-bottom: 2px;
    align-items: center
}

.sidebar-item.active {
    color: #bc6a42;
    background: #f7ede2;
    border-radius: 5px
}

.sidebar-item small {
    margin-left: auto;
    font-size: 8px
}

.tiny-dot,.connected-dot {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: #e78c66;
    margin-left: auto
}

.connected-dot {
    background: #6d9878
}

.jira-icon {
    color: #3e7cd5
}

.sidebar-bottom {
    position: absolute;
    bottom: 12px;
    left: 13px;
    right: 13px
}

.ai-side {
    border: 1px solid #e1e5d9;
    background: #f1f4ea;
    border-radius: 6px;
    padding: 10px;
    color: #778568;
    font-size: 10px
}

.ai-side strong {
    font-size: 8px
}

.ai-side small {
    display: block;
    font-size: 7px;
    margin: 3px 0 8px
}

.ai-side>span {
    font-size: 7px;
    color: #5f714f
}

.profile {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    margin-top: 16px
}

.profile>span:last-child {
    margin-left: auto
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #e8dbc7;
    color: #7e694e;
    font-size: 8px;
    font-weight: 600
}

.app-main {
    flex: 1;
    min-width: 0
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 53px;
    border-bottom: 1px solid #edf0e7;
    font-size: 9px;
    color: #92988b;
    padding: 0 24px
}

.app-topbar strong {
    font-weight: 500;
    color: #555c4e
}

.crumb {
    margin: 0 9px;
    color: #ccc
}

.app-topbar>span:last-child {
    display: flex;
    align-items: center;
    gap: 13px
}

.topbar-divider {
    color: #e4e6df
}

.small-avatar {
    width: 22px;
    height: 22px;
    font-size: 7px
}

.dashboard-body {
    padding: 24px;
    background: #fdfefb
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px
}

.sample-label {
    font-size: 6px;
    letter-spacing: 1px;
    color: #9ba38f;
    margin-bottom: 6px
}

.dashboard-heading h2 {
    font-family: 'DM Sans',sans-serif;
    font-size: 19px;
    letter-spacing: -.5px;
    font-weight: 600;
    margin-bottom: 5px
}

.dashboard-heading h2 span {
    color: #c2b377;
    font-size: 20px
}

.dashboard-heading p {
    font-size: 8px;
    color: #949b8b;
    margin: 0
}

.date-chip {
    border: 1px solid #e5e8de;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 7px;
    color: #7c8372
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 11px
}

.metric {
    padding: 13px;
    border: 1px solid #e4e8dd;
    background: white;
    border-radius: 6px
}

.metric>span {
    font-size: 8px;
    color: #939889;
    display: flex;
    justify-content: space-between
}

.metric i {
    font-style: normal;
    font-size: 11px;
    color: #9ca390
}

.metric strong {
    display: block;
    font-size: 25px;
    font-weight: 550;
    letter-spacing: -.8px;
    margin: 5px 0
}

.metric sub {
    bottom: 0;
    font-size: 16px
}

.metric small {
    font-size: 6px;
    color: #a0a593;
    white-space: nowrap
}

.metric em {
    font-style: normal;
    color: #6d9070;
    margin-right: 3px
}

.metric .neutral {
    color: #7f8675
}

.charts-grid {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 12px;
    margin-top: 14px
}

.chart-card {
    background: #fff;
    border: 1px solid #e3e7db;
    border-radius: 6px;
    padding: 14px
}

.chart-title {
    font-size: 9px;
    font-weight: 550;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.chart-title>span {
    font-size: 6px;
    font-weight: 400;
    color: #939b87
}

.legend-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #e5845a;
    border-radius: 50%;
    margin-right: 4px
}

.legend-dot.pale {
    background: #e7e9df;
    margin-left: 7px
}

.line-chart {
    display: flex;
    height: 135px;
    margin-top: 18px;
    gap: 9px
}

.axis-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 6px;
    color: #a3aa96;
    padding: 5px 0
}

.line-chart svg {
    flex: 1;
    width: 0;
    height: 100%
}

.chart-dates {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
    color: #a3aa96;
    margin: 9px 0 0 24px
}

.donut {
    width: 120px;
    height: 120px;
    background: conic-gradient(#849573 0deg 333deg,#edf0e6 333deg 360deg);
    border-radius: 50%;
    margin: 14px auto;
    display: grid;
    place-items: center;
    transform: rotate(-90deg)
}

.donut>div {
    background: #fff;
    border-radius: 50%;
    width: 98px;
    height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg)
}

.donut strong {
    font-size: 25px;
    letter-spacing: -1px;
    font-weight: 550
}

.donut strong span {
    font-size: 13px
}

.donut small {
    font-size: 7px;
    color: #a1a792
}

.coverage-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 7px;
    color: #8d957e
}

.coverage-legend>span {
    display: flex;
    align-items: center
}

.coverage-legend b {
    margin-left: auto;
    font-weight: 400;
    color: #515943
}

.coverage-legend .legend-dot {
    background: #849573
}

.coverage-legend .legend-dot.pale {
    background: #edf0e6;
    margin-left: 0
}

.recent-projects {
    padding: 14px;
    background: white;
    border: 1px solid #e4e8dc;
    margin-top: 14px;
    border-radius: 6px
}

.project-row {
    display: grid;
    grid-template-columns: 2fr .8fr 1.2fr .6fr;
    align-items: center;
    font-size: 8px;
    margin-top: 10px
}

.table-head {
    font-size: 6px;
    color: #9ca48e;
    border-block:1px solid #f0f2eb;padding: 8px 0
}

.project-icon {
    font-style: normal;
    color: #ad9680;
    margin-right: 6px
}

.project-row small {
    font-size: 6px;
    color: #a7ad9a;
    display: block;
    margin-left: 17px
}

.project-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 7px
}

.project-progress i {
    width: 60px;
    height: 4px;
    background: linear-gradient(to right,#899b77 86%,#edf0e7 86%);
    border-radius: 3px
}

.status-tag {
    color: #709377;
    background: #edf5ea;
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 6px;
    width: fit-content
}

.under-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: .1px;
    color: #909585;
    padding: 22px 0 27px
}

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

.workflow-strip {
    border-block:1px solid var(--line);padding: 28px 0 31px;
    text-align: center;
    background: #f1f2ea66
}

.workflow-strip p {
    font-size: 8px;
    letter-spacing: 1.8px;
    color: #999e8e;
    margin-bottom: 22px
}

.capabilities {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 0 40px
}

.capabilities>span {
    font-size: 15px;
    font-weight: 500;
    color: #737968;
    letter-spacing: -.2px
}

.capabilities i {
    font-size: 16px;
    color: #b4b9a8;
    font-style: normal
}

.section {
    padding: 96px 0
}

.eyebrow {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #888e7d;
    font-weight: 600;
    margin-bottom: 18px
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 38px
}

.section-heading p,.section-copy {
    font-size: 14px;
    color: #929789;
    line-height: 1.85
}

.section-heading p {
    margin-bottom: 7px
}

.muted {
    color: #919886
}

.feature-card {
    height: 100%;
    border: 1px solid #e0e3d8;
    border-radius: 12px;
    padding: 30px;
    overflow: hidden;
    background: #fbfbf7
}

.feature-icon {
    font-size: 24px;
    line-height: 1;
    background: #f0eee5;
    border: 1px solid #e6e3d7;
    border-radius: 9px;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    color: #828a6c;
    margin-bottom: 23px
}

.feature-card h3 {
    font-size: 23px;
    margin-bottom: 12px
}

.feature-card p {
    font-size: 13px;
    color: #8b9280;
    line-height: 1.8
}

.feature-ai {
    background: #f1f1e9
}

.ai-demo {
    background: #fffefa;
    border: 1px solid #e1e3d8;
    border-radius: 9px;
    padding: 17px;
    margin-top: 30px;
    box-shadow: 0 8px 20px #51573205
}

.prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    border: 1px solid #e4e5dd;
    background: #f7f8f2;
    border-radius: 5px;
    padding: 12px;
    color: #858b78
}

.prompt>span:first-child {
    color: #b29a7a;
    font-size: 16px
}

.prompt-enter {
    margin-left: auto;
    color: #afb3a5
}

.generation-label {
    font-size: 7px;
    color: #a38769;
    letter-spacing: .8px;
    margin: 21px 0 13px;
    display: flex;
    justify-content: space-between
}

.generation-label>span {
    color: #9da28e;
    letter-spacing: 0;
    font-size: 7px
}

.generated-test {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid #eff0e8;
    font-size: 9px;
    color: #737c65
}

.generated-test>span {
    color: #99a888;
    background: #f0f4e9;
    border-radius: 3px;
    padding: 1px 4px
}

.generated-test small {
    margin-left: auto;
    background: #f4f4ee;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 6px;
    color: #959b89
}

.human-review {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 8px;
    color: #929883
}

.human-review .avatar {
    width: 19px;
    height: 19px;
    font-size: 6px
}

.human-review>span:last-child {
    margin-left: auto;
    color: #8c9b74
}

.feature-trace {
    background: #eeefe8
}

.trace-visual {
    margin-top: 28px;
    padding: 0 17px
}

.trace-node {
    border: 1px solid #dce1d1;
    border-radius: 7px;
    padding: 13px;
    background: #fdfef9;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #82906e;
    font-size: 19px;
    box-shadow: 0 4px 8px #47523803
}

.trace-node>span {
    font-size: 9px;
    color: #69765a
}

.trace-node small {
    font-size: 7px;
    display: block;
    color: #a0a68e;
    margin-top: 4px
}

.trace-node i {
    font-style: normal;
    font-size: 6px;
    margin-left: auto;
    color: #9ea98e;
    border: 1px solid #e6eadc;
    border-radius: 3px;
    padding: 3px 5px
}

.trace-node .trace-status {
    margin-left: auto;
    color: #84986d
}

.trace-node .resolved {
    background: #edf3e5;
    color: #889d6c
}

.trace-line {
    height: 21px;
    width: 1px;
    margin-left: 30px;
    background: #cdd6bf;
    position: relative
}

.trace-line:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 5px;
    height: 5px;
    border-bottom: 1px solid #c1ccb0;
    border-right: 1px solid #c1ccb0;
    transform: rotate(45deg)
}

.small-feature {
    padding: 27px;
    min-height: 285px
}

.small-feature h3 {
    font-size: 19px
}

.small-feature p {
    font-size: 12px
}

.small-feature .feature-icon {
    margin-bottom: 19px;
    width: 37px;
    height: 37px;
    font-size: 20px
}

.sync-visual,.execution-visual,.healing-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 27px;
    height: 50px
}

.sync-logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px
}

.sync-arrows {
    font-size: 22px;
    color: #b1b9a2;
    text-align: center
}

.sync-arrows small {
    display: block;
    font-size: 6px;
    margin-top: -5px
}

.jira-logo {
    color: #4485d4;
    font-size: 22px
}

.jira-logo b {
    font-size: 18px;
    color: #5c6670;
    font-weight: 600
}

.execution-visual {
    gap: 12px;
    font-size: 8px
}

.execution-visual>span:first-child {
    background: #32382d;
    color: #fff;
    padding: 10px 14px;
    border-radius: 5px
}

.execution-visual>span:last-child {
    color: #7f956d
}

.healing-visual {
    gap: 10px;
    font-size: 8px
}

.old-selector {
    color: #b1a293;
    text-decoration: line-through;
    background: #f2eee5;
    padding: 8px;
    border-radius: 4px
}

.new-selector {
    color: #82966c;
    background: #eff3e8;
    padding: 8px;
    border-radius: 4px
}

.workflow-section {
    border-block:1px solid var(--line);background: #f0f1e9;
    padding: 75px 0
}

.workflow-section h2 {
    font-size: 38px
}

.steps {
    margin-top: 39px
}

.step-number {
    color: #a0a88e;
    font-size: 12px;
    border-top: 1px solid #d7ddcb;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px
}

.step-number span {
    color: #879470
}

.steps h3 {
    font-size: 18px;
    margin-bottom: 12px
}

.steps p {
    font-size: 12px;
    color: #8c947e;
    line-height: 1.85;
    max-width: 225px
}

.pricing-row {
    max-width: 830px;
    margin-top: 34px
}

.price-card {
    position: relative;
    border: 1px solid #dcdfd3;
    background: #fcfcf8;
    padding: 34px;
    border-radius: 12px;
    height: 100%
}

.plan-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #9aa18b
}

.price-card h3 {
    font-size: 27px;
    margin-top: 12px
}

.price-card>p {
    color: #939b85;
    font-size: 12px
}

.price {
    font-size: 48px;
    letter-spacing: -2px;
    margin: 23px 0;
    font-weight: 500
}

.price>span {
    font-size: 12px;
    letter-spacing: 0;
    color: #9da58e;
    font-weight: 400
}

.plan-divider {
    height: 1px;
    background: #e3e6da;
    margin: 25px 0
}

.plan-features {
    padding: 0;
    list-style: none;
    margin: 0
}

.plan-features li {
    font-size: 11px;
    color: #7f8971;
    margin: 15px 0
}

.plan-features li:before {
    content: '✓';
    margin-right: 10px;
    color: #8d9a77
}

.pro-card {
    background: #f7efe6;
    border-color: #e5bea1
}

.popular {
    position: absolute;
    right: 22px;
    top: 25px;
    background: #eedac6;
    border-radius: 4px;
    font-size: 7px;
    letter-spacing: 1px;
    padding: 6px 9px;
    color: #a37450
}

.pricing-footnote {
    font-size: 10px;
    color: #a0a58f;
    margin-top: 23px
}

.faq-section {
    padding-top: 30px;
    padding-bottom: 90px
}

.faq-section h2 {
    font-size: 38px
}

.text-link {
    display: inline-block;
    margin-top: 15px;
    color: #6d785e;
    font-size: 12px
}

.text-link span {
    margin-left: 14px
}

.accordion-item {
    background: transparent;
    border-color: #dfe3d4
}

.accordion-button {
    padding: 23px 0;
    background: transparent!important;
    box-shadow: none!important;
    color: #535c48!important;
    font-size: 13px;
    font-weight: 500
}

.accordion-button:after {
    background-image: none!important;
    content: '+';
    transform: none!important;
    font-size: 21px;
    color: #96a183;
    height: auto;
    line-height: 1
}

.accordion-button:not(.collapsed):after {
    content: '−'
}

.accordion-body {
    padding: 0 30px 23px 0;
    font-size: 12px;
    line-height: 1.9;
    color: #8d967e
}

.contact-section {
    padding-bottom: 65px
}

.contact-panel {
    background: #f0d9c5;
    border: 1px solid #e8cdb6;
    border-radius: 14px;
    padding: 57px 60px;
    position: relative;
    overflow: hidden;
    display: flex
}

.contact-panel .eyebrow {
    color: #9b8068
}

.contact-panel h2 {
    font-size: 43px;
    line-height: 1.25;
    color: #4e4538
}

.contact-panel p {
    color: #9b8068;
    font-size: 13px;
    margin: 19px 0 25px
}

.contact-email {
    font-size: 10px;
    color: #9b8068;
    margin-top: 17px
}

.contact-email a {
    color: #79624d;
    border-bottom: 1px solid #b49a81
}

.cta-art {
    position: absolute;
    right: 30px;
    top: 0;
    width: 420px;
    height: 100%;
    display: grid;
    place-items: center
}

.orbit {
    position: absolute;
    border: 1px solid #d5b59688;
    border-radius: 50%;
    width: 250px;
    height: 250px
}

.orbit-two {
    width: 340px;
    height: 340px
}

.orbit-three {
    width: 440px;
    height: 440px
}

.cta-star {
    font-size: 235px;
    color: #ad7857;
    line-height: 1;
    transform: rotate(15deg)
}

.release-chip {
    position: absolute;
    bottom: 65px;
    right: 25px;
    background: #fff8ed;
    border: 1px solid #e3c6a6;
    border-radius: 8px;
    padding: 13px 18px;
    font-size: 11px;
    color: #967951;
    transform: rotate(-8deg);
    box-shadow: 0 6px 20px #77502c0a
}

footer {
    padding: 10px 0 24px
}

.footer-main {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 29px;
    border-bottom: 1px solid var(--line)
}

.footer-main .brand {
    font-size: 30px
}

.footer-main p {
    font-size: 11px;
    color: #9ba38c;
    margin: 0
}

.footer-main>div {
    margin-left: auto;
    display: flex;
    gap: 28px;
    font-size: 11px;
    color: #818d70
}

.footer-bottom {
    padding-top: 23px;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #a1a990
}

.footer-star {
    color: #bbaa85;
    font-size: 17px;
    margin-left: 10px
}

.modal-content {
    background: var(--paper);
    border-radius: 15px;
    border: 1px solid #dedfcf
}

.modal-header {
    border-bottom: 1px solid var(--line);
    padding: 23px 30px
}

.modal-header .eyebrow {
    margin: 0
}

.modal-body {
    padding: 35px
}

.tour-count {
    font-size: 11px;
    color: var(--orange)
}

.modal-body h2 {
    font-size: 32px;
    margin: 17px 0
}

.modal-body p {
    font-size: 15px;
    color: #858c7b;
    line-height: 1.8
}

.tour-example {
    padding: 25px;
    background: #eeefe6;
    border-radius: 8px;
    margin: 25px 0;
    color: #6e795e;
    font-size: 15px
}

.tour-controls {
    display: flex;
    justify-content: space-between
}

.skip-link {
    background: #fff;
    padding: 12px;
    position: fixed;
    z-index: 200
}

.navbar-toggler {
    border: 0;
    padding: 8px
}

.navbar-toggler-icon {
    width: 23px;
    height: 23px
}

@media(min-width: 1440px) {
    .container {
        max-width:1280px
    }

    .hero {
        padding-top: 76px
    }

    .product-stage {
        max-width: 1110px
    }

    .app-window {
        height: 540px
    }

    .line-chart {
        height: 145px
    }
}

@media(max-width: 1199px) {
    .navbar .nav-link {
        margin:0 6px
    }

    .nav-demo {
        margin-right: 15px
    }

    .capabilities {
        padding: 0
    }

    .capabilities>span {
        font-size: 13px
    }

    .cta-art {
        right: -40px;
        opacity: .75
    }

    .contact-panel>div:first-child {
        position: relative;
        z-index: 1
    }

    .metric {
        padding: 10px
    }

    .float-note {
        right: 0
    }

    .trace-visual {
        padding: 0
    }

    .dashboard-body {
        padding: 20px
    }

    .app-sidebar {
        width: 170px
    }
}

@media(max-width: 991px) {
    .navbar {
        min-height:76px
    }

    .navbar-collapse {
        padding: 20px 0
    }

    .navbar .nav-link {
        margin: 0;
        padding: 12px 0
    }

    .nav-demo {
        display: inline-block;
        margin: 15px 20px 10px 0
    }

    .hero {
        padding-top: 48px
    }

    h1 {
        font-size: 55px
    }

    .app-sidebar {
        width: 145px;
        padding: 18px 10px
    }

    .app-brand {
        margin-bottom: 15px
    }

    .app-window {
        height: 470px
    }

    .dashboard-body {
        padding: 16px
    }

    .dashboard-heading h2 {
        font-size: 16px
    }

    .date-chip {
        font-size: 6px
    }

    .metric-grid {
        gap: 7px
    }

    .metric strong {
        font-size: 21px
    }

    .metric small {
        font-size: 5px
    }

    .metric>span {
        font-size: 7px
    }

    .line-chart {
        height: 115px
    }

    .chart-card {
        padding: 10px
    }

    .donut {
        width: 100px;
        height: 100px
    }

    .donut>div {
        width: 82px;
        height: 82px
    }

    .chart-title {
        font-size: 8px
    }

    .chart-title>span {
        font-size: 5px
    }

    .app-topbar {
        padding: 0 16px
    }

    .sidebar-label {
        margin-top: 16px
    }

    .sidebar-item {
        padding: 7px
    }

    .ai-side {
        display: none
    }

    .section {
        padding: 70px 0
    }

    .section-heading {
        gap: 30px
    }

    .section-heading h2 {
        font-size: 36px
    }

    .section-heading p {
        font-size: 12px;
        max-width: 300px
    }

    .small-feature {
        padding: 23px 18px
    }

    .small-feature h3 {
        font-size: 17px
    }

    .sync-visual {
        gap: 13px
    }

    .execution-visual {
        gap: 5px
    }

    .execution-visual>span:first-child {
        padding: 9px
    }

    .healing-visual {
        gap: 5px;
        font-size: 6px
    }

    .capabilities>span {
        font-size: 11px
    }

    .contact-panel {
        padding: 42px
    }

    .cta-art {
        right: -120px;
        opacity: .35
    }

    .contact-panel h2 {
        font-size: 38px
    }

    .footer-main {
        gap: 20px
    }

    .footer-main>div {
        gap: 20px
    }
}

@media(max-width: 767px) {
    .container {
        padding-left:22px;
        padding-right: 22px
    }

    h1 {
        font-size: 43px;
        letter-spacing: -2px
    }

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

    .eyebrow-pill {
        font-size: 7px;
        letter-spacing: .9px
    }

    .product-stage {
        margin-top: 55px
    }

    .float-note {
        top: -24px;
        padding: 9px 12px;
        right: 8px
    }

    .float-note strong {
        font-size: 9px
    }

    .float-note div>span {
        font-size: 7px
    }

    .app-window {
        height: 420px
    }

    .app-sidebar {
        display: none
    }

    .dashboard-body {
        padding: 16px
    }

    .dashboard-heading {
        margin-bottom: 16px
    }

    .app-topbar {
        height: 40px
    }

    .metric strong {
        font-size: 23px
    }

    .metric small {
        font-size: 6px
    }

    .metric>span {
        font-size: 7px
    }

    .line-chart {
        height: 112px
    }

    .charts-grid {
        grid-template-columns: 1.6fr 1fr
    }

    .chart-title>span {
        font-size: 5px
    }

    .donut {
        width: 95px;
        height: 95px
    }

    .donut>div {
        width: 78px;
        height: 78px
    }

    .donut strong {
        font-size: 23px
    }

    .capabilities {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .capabilities i {
        display: none
    }

    .capabilities>span {
        font-size: 13px
    }

    .section-heading {
        display: block
    }

    .section-heading p {
        max-width: none;
        margin-top: 20px
    }

    .section h2 {
        font-size: 34px
    }

    .feature-card {
        padding: 27px
    }

    .small-feature {
        min-height: 245px
    }

    .small-feature h3 {
        font-size: 22px
    }

    .small-feature p {
        max-width: 330px
    }

    .sync-visual,.execution-visual,.healing-visual {
        justify-content: flex-start;
        margin-top: 20px;
        gap: 23px;
        font-size: 10px
    }

    .steps {
        margin-top: 25px
    }

    .steps p {
        max-width: none
    }

    .pricing-row {
        margin-top: 24px
    }

    .price-card {
        padding: 30px
    }

    .pricing-footnote {
        line-height: 1.8;
        padding: 0 15px
    }

    .faq-section {
        padding-top: 10px
    }

    .faq-section .section-copy {
        margin-bottom: 0
    }

    .contact-panel {
        padding: 35px 27px
    }

    .contact-panel h2 {
        font-size: 32px
    }

    .contact-panel p {
        max-width: 230px;
        line-height: 1.8
    }

    .cta-art {
        right: -230px;
        opacity: .24
    }

    .footer-main {
        flex-wrap: wrap
    }

    .footer-main>div {
        width: 100%;
        margin: 5px 0 0;
        justify-content: space-between
    }

    .footer-bottom {
        gap: 20px;
        line-height: 1.8
    }

    .footer-bottom>span:last-child {
        text-align: right
    }

    .contact-section {
        padding-bottom: 40px
    }

    .modal-body {
        padding: 24px
    }

    .tour-example {
        font-size: 12px;
        line-height: 1.8
    }

    .modal-body h2 {
        font-size: 27px
    }
}

@media(max-width: 420px) {
    h1 {
        font-size:36px;
        letter-spacing: -1.7px
    }

    .eyebrow-pill {
        font-size: 6px;
        gap: 7px
    }

    .hero-actions {
        gap: 8px
    }

    .hero-actions .btn {
        padding: 12px 13px;
        font-size: 10px;
        gap: 9px
    }

    .hero-notes {
        font-size: 8px;
        gap: 15px
    }

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

    .app-window {
        height: 390px
    }

    .dashboard-body {
        padding: 12px
    }

    .dashboard-heading h2 {
        font-size: 14px
    }

    .date-chip {
        display: none
    }

    .metric-grid {
        gap: 5px
    }

    .metric {
        padding: 8px 6px
    }

    .metric strong {
        font-size: 20px
    }

    .metric small {
        font-size: 4px
    }

    .metric>span {
        font-size: 6px
    }

    .metric i {
        display: none
    }

    .chart-title {
        font-size: 7px
    }

    .chart-title>span {
        display: none
    }

    .chart-card {
        padding: 9px
    }

    .line-chart {
        height: 100px
    }

    .donut {
        width: 83px;
        height: 83px
    }

    .donut>div {
        width: 68px;
        height: 68px
    }

    .donut strong {
        font-size: 20px
    }

    .donut small {
        font-size: 5px
    }

    .coverage-legend {
        font-size: 6px
    }

    .project-progress i {
        width: 35px
    }

    .section h2 {
        font-size: 30px
    }

    .feature-card {
        padding: 23px
    }

    .feature-card h3 {
        font-size: 21px
    }

    .generation-label {
        font-size: 6px;
        letter-spacing: .3px
    }

    .generation-label>span {
        font-size: 6px
    }

    .generated-test {
        font-size: 7px;
        gap: 5px
    }

    .prompt {
        font-size: 8px;
        padding: 9px
    }

    .generated-test small {
        font-size: 5px
    }

    .contact-panel h2 {
        font-size: 29px
    }

    .contact-panel .eyebrow {
        font-size: 8px
    }

    .tour-controls .btn {
        font-size: 11px;
        padding: 12px
    }
}

.faq-section .row {
    --bs-gutter-x: 2rem
}

.section-heading p,.section-copy,.feature-card p,.steps p,.price-card>p,.accordion-body {
    color: #737b69
}

.plan-features li {
    color: #68735b
}

.app-window {
    height: 565px
}

@media(min-width: 1440px) {
    .app-window {
        height:580px
    }
}

@media(max-width: 991px) {
    .app-window {
        height:510px
    }
}

@media(max-width: 767px) {
    .app-window {
        height:455px
    }
}

@media(max-width: 420px) {
    .app-window {
        height:425px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*:before,*:after {
        transition: none!important;
        animation: none!important
    }
}
/* TMS brand layer — primary color #7047eb */
:root {
    --primary: #7047eb;
    --primary-dark: #5932c9;
    --paper: #fff;
    --ink: #262335;
    --muted: #787387;
    --orange: #7047eb;
    --line: #ebe7f4;
    --bs-primary: #7047eb;
    --bs-primary-rgb: 112,71,235;
    --green: #388467
}

body {
    background: #fff;
    color: var(--ink)
}

main {
    position: relative;
    isolation: isolate;
    overflow: clip
}

main>section {
    position: relative
}

main>section>.container {
    position: relative;
    z-index: 1
}

.section {
    padding: 95px 0
}

.section-copy {
    color: #777186
}

.section h2 {
    font-size: 43px;
    line-height: 1.2;
    letter-spacing: -1.7px
}

.purple-text {
    color: var(--primary)
}

.muted {
    color: #8e80ad
}

.eyebrow {
    color: var(--primary);
    font-size: 9px;
    letter-spacing: 1.7px
}

.section-intro {
    max-width: 620px;
    margin: 0 auto 44px
}

.section-intro .section-copy {
    margin-top: 19px
}

.section-mantra {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    color: #4f426e
}

.btn-primary {
    --bs-btn-bg: #7047eb;
    --bs-btn-border-color: #7047eb;
    --bs-btn-hover-bg: #5932c9;
    --bs-btn-hover-border-color: #5932c9;
    --bs-btn-active-bg: #4e27bb;
    --bs-btn-active-border-color: #4e27bb;
    --bs-btn-disabled-bg: #7047eb;
    --bs-btn-disabled-border-color: #7047eb;
    box-shadow: 0 5px 13px #7047eb1c
}

.btn-dark {
    background: #2d204f;
    border-color: #2d204f
}

.btn-dark:hover {
    background: #443066;
    border-color: #443066
}

.btn-outline {
    border-color: #dcd5eb;
    color: #514566;
    background: #fff
}

.btn-outline:hover {
    background: #f3effd;
    border-color: #c6b5f7;
    color: #5932c9
}

.text-link {
    color: var(--primary)
}

.site-header {
    background: #fffefef5;
    border-color: #ece7f6
}

.navbar .nav-link {
    color: #665e76
}

.navbar .nav-link:hover {
    color: var(--primary)
}

.hero {
    background: radial-gradient(ellipse at 10% 0%,#ac8bff99,transparent 47%),radial-gradient(ellipse at 90% 40%,#ab8ef966,transparent 48%),linear-gradient(150deg,#7047eb,#6337df 60%,#8058ed);
    padding-top: 66px;
    color: white
}



.hero:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -10%;
    width: 120%;
    height: 90px;
    background: white;
    border-radius: 50% 55% 0 0/80% 95% 0 0;
    z-index: 0
}

.hero .eyebrow-pill {
    background: #ffffff12;
    border-color: #ffffff35;
    color: #f0eaff;
    font-size: 8px
}

.hero .sparkle,.hero .pill-arrow {
    color: #fff
}

.hero .pill-arrow {
    border-color: #ffffff30
}

.hero h1 {
    font-size: clamp(45px,5.2vw,71px);
    letter-spacing: -2.9px;
    margin-top: 24px
}

.hero .accent-word {
    color: #dfd1ff
}

.hero .accent-word svg {
    stroke: #d8c6ff
}

.hero-copy {
    color: #ede5ff;
    font-size: 15px
}

.hero-actions .btn-primary {
    background: white;
    color: #653bdd;
    border-color: white;
    box-shadow: 0 5px 15px #30107825
}

.hero-actions .btn-primary:hover {
    background: #efe7ff
}

.hero-actions .btn-outline {
    color: #fff;
    background: #ffffff0b;
    border-color: #ffffff65
}

.hero-actions .btn-outline:hover {
    background: #ffffff22
}

.hero .play-icon {
    border-color: #d6c5ff
}

.hero-notes {
    color: #e1d5fb
}

.hero-notes span::first-letter {
    color: #ece4ff
}

.product-stage {
    color: var(--ink);
    margin-top: 59px
}

.app-window {
    box-shadow: 0 0 0 7px #ffffff25,0 25px 65px #23124825;
    border-color: #d3c3f4
}

.float-note {
    border-color: #dfd4f4;
    background: #fff;
    box-shadow: 0 8px 30px #2f185f1a
}

.note-symbol {
    color: var(--primary);
    background: #eee7ff
}

.note-check {
    color: #7047eb;
    border-color: #dacef8
}

.app-sidebar {
    background: #f9f7fd;
    border-color: #ebe6f6
}

.sidebar-item.active {
    background: #eee7ff;
    color: #7047eb
}

.workspace {
    border-color: #e6dff3
}

.workspace-icon,.avatar {
    background: #e9defb;
    color: #77559f;
    border-color: #dcd0f0
}

.sidebar-label,.sidebar-item {
    color: #7b7389
}

.ai-side {
    background: #f0eafd;
    border-color: #e2d7f6;
    color: #7047eb
}

.ai-side>span {
    color: #7655ad
}

.dashboard-body {
    background: #fcfbff
}

.metric,.chart-card,.recent-projects {
    border-color: #ece8f4
}

.dashboard-heading h2 span {
    color: #9e7fea
}

.legend-dot {
    background: #9879e7
}

.donut {
    background: conic-gradient(#9775e4 0deg 333deg,#f0eafa 333deg 360deg)
}

.coverage-legend .legend-dot {
    background: #9775e4
}

.coverage-legend .legend-dot.pale {
    background: #f0eafa
}

.project-progress i {
    background: linear-gradient(to right,#a089d5 86%,#f0eafa 86%)
}

.under-preview {
    position: relative;
    z-index: 2;
    color: #7d6b9d;
    padding-bottom: 22px
}

.under-preview .live-dot {
    background: #9b80ce
}

.workflow-strip {
    background: #fbf9ff;
    border-color: #efeafa
}

.workflow-strip p {
    color: #8c809f
}

.capabilities>span {
    color: #7c6b98
}

.capabilities i {
    color: #c5b4e2
}

/* Decorative details live outside content and do not intercept interaction. */
.page-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden
}

.edge-orbit {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid #d7c7f6;
    border-radius: 50%;
    box-shadow: 0 0 0 24px #ffffff,0 0 0 25px #e8dff9,0 0 0 52px #fff,0 0 0 53px #f0e9fc
}

.orbit-a {
    left: -225px;
    top: 1400px;
    transform: rotate(25deg)
}

.orbit-b {
    right: -230px;
    top: 5500px
}

.edge-star {
    position: absolute;
    color: #c9b3f5;
    font-size: 130px;
    font-weight: 400
}

.star-a {
    right: -32px;
    top: 1220px;
    transform: rotate(18deg)
}

.star-b {
    left: -34px;
    top: 4300px;
    font-size: 175px
}

.dot-grid {
    position: absolute;
    width: 140px;
    height: 170px;
    background-image: radial-gradient(#c4b1ec 1.4px,transparent 1.4px);
    background-size: 13px 13px;
    opacity: .55
}

.dots-a {
    left: -63px;
    top: 2300px;
    transform: rotate(-10deg)
}

.dots-b {
    right: -50px;
    top: 6800px;
    transform: rotate(12deg)
}

.why-section .row,.team-section .row,.message-section .row {
    --bs-gutter-x: 3rem
}

.why-section .section-copy,.team-section .section-copy {
    margin: 22px 0
}

.benefit-list {
    list-style: none;
    margin: 25px 0 30px;
    padding: 0;
    display: grid;
    gap: 19px
}

.benefit-list li {
    display: flex;
    gap: 14px;
    align-items: center
}

.benefit-list li>span {
    width: 38px;
    height: 38px;
    background: #f2edff;
    border: 1px solid #e8defc;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #7047eb;
    font-size: 18px
}

.benefit-list strong {
    display: block;
    font-size: 13px;
    font-weight: 550
}

.benefit-list small {
    display: block;
    color: #898192;
    font-size: 11px;
    margin-top: 4px
}

.quality-visual {
    background: radial-gradient(circle at 50% 45%,#ede3ff,transparent 65%),#faf8ff;
    border: 1px solid #e4d9fa;
    border-radius: 18px;
    position: relative;
    padding: 30px;
    box-shadow: 0 15px 50px #5028980b
}

.visual-badge {
    font-size: 8px;
    letter-spacing: 1.3px;
    color: #8a6db7
}

.quality-hub {
    height: 305px;
    position: relative;
    display: grid;
    place-items: center
}

.hub-ring {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px dashed #cdb9ef;
    border-radius: 50%
}

.hub-ring.second {
    width: 145px;
    height: 145px;
    border-style: solid;
    border-color: #e5d9fa;
    box-shadow: 0 0 0 17px #f1eafd77
}

.quality-hub>strong {
    font-family: Manrope,sans-serif;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    font-size: 39px;
    font-weight: 800;
    letter-spacing: -2px;
    width: 98px;
    height: 98px;
    border-radius: 25px;
    background: #7047eb;
    color: white;
    box-shadow: 0 12px 25px #7047eb30;
    transform: rotate(-5deg)
}

.quality-hub>strong>span {
    color: #c9b5ff
}

.hub-node {
    position: absolute;
    background: white;
    border: 1px solid #e9e1f5;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px #4a28610a;
    font-size: 10px;
    color: #79638f;
    min-width: 107px;
    text-align: center
}

.node-one {
    top: 22px;
    left: 15px;
    transform: rotate(-5deg)
}

.node-two {
    top: 67px;
    right: 0;
    transform: rotate(5deg)
}

.node-three {
    bottom: 27px;
    left: 24px;
    transform: rotate(3deg)
}

.node-four {
    bottom: 35px;
    right: 8px;
    transform: rotate(-5deg)
}

.visual-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    color: #927da8;
    border-top: 1px solid #e9e0f6;
    padding-top: 19px
}

.visual-bottom .live-dot {
    background: #a385ce
}

.visual-float {
    position: absolute;
    right: 18px;
    bottom: -16px;
    background: white;
    border: 1px solid #e0d4f5;
    color: #8969af;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 9px;
    transform: rotate(-4deg)
}

.features-section {
    background: linear-gradient(180deg,#fbfaffb3,#f9f6ffb3);
    border-block:1px solid #f2eef9}

.solutions-list {
    display: grid;
    gap: 25px;
    max-width: 1000px;
    margin: auto
}

.solution-card {
    border: 1px solid #e7dff7;
    border-radius: 15px;
    background: #f1ebfd;
    padding: 25px;
    box-shadow: 0 5px 16px #4c2d6b03
}

.solution-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px
}

.solution-heading>span {
    font-size: 10px;
    color: #9a83ba;
    border: 1px solid #dcd0ef;
    padding: 5px 7px;
    border-radius: 5px
}

.solution-heading h3 {
    font-size: 21px;
    letter-spacing: -.55px;
    margin: 0;
    color: #443555
}

.solution-heading>i {
    font-style: normal;
    margin-left: auto;
    font-size: 20px;
    color: #a18abf
}

.problem-solution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.pain-panel,.answer-panel {
    border-radius: 9px;
    padding: 22px;
    border: 1px solid
}

.pain-panel {
    background: #fff5f3;
    border-color: #f5e6e3
}

.answer-panel {
    background: #f5fcf8;
    border-color: #e1eee6
}

.panel-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c28279
}

.answer-panel .panel-label {
    color: #65937a
}

.problem-solution h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 13px 0 10px;
    letter-spacing: -.3px;
    line-height: 1.4
}

.problem-solution p {
    font-size: 12px;
    line-height: 1.8;
    color: #857880;
    margin: 0
}

.answer-panel p {
    color: #738379
}

.solution-diagram {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: #9176b6;
    font-size: 11px;
    flex-wrap: wrap;
    padding: 17px 10px;
    text-align: center
}

.solution-diagram b {
    font-size: 16px;
    font-weight: 400;
    color: #b299d2
}

.solution-diagram strong {
    font-size: 18px;
    color: #7047eb
}

.heal-chip {
    color: #6f8a72
}

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

.outcomes>div {
    background: #fffefd;
    border: 1px solid #eae3f5;
    border-radius: 8px;
    padding: 17px
}

.outcome-check {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    background: #eee6ff;
    color: #7047eb;
    border-radius: 50%;
    font-size: 9px;
    margin-bottom: 10px
}

.outcomes h4 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #50445f
}

.outcomes p {
    font-size: 10px;
    line-height: 1.65;
    color: #8f839a;
    margin: 0
}

.workflow-section {
    background: #fff;
    border-color: #ece5f6
}

.steps h3 {
    color: #524061
}

.step-number {
    border-color: #e6dbf5;
    color: #9679b9
}

.step-number span {
    color: #7047eb
}

.steps p {
    color: #81758d
}

.workflow-section .section-copy {
    color: #81758d
}

.team-section {
    background: #fcfaffc9
}

.team-visual {
    border: 1px solid #e4d9f4;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px #4123690b;
    padding: 23px;
    transform: rotate(-2deg)
}

.board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 550
}

.board-avatars {
    display: flex;
    padding-right: 7px
}

.board-avatars i {
    font-style: normal;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid white;
    border-radius: 50%;
    background: #ece0ff;
    font-size: 7px;
    color: #8968b0;
    margin-right: -6px
}

.board-avatars i:nth-child(2) {
    background: #f4dfdc;
    color: #b58181
}

.board-avatars i:nth-child(3) {
    background: #dfece7;
    color: #7da296
}

.team-visual .sample-label {
    margin: 16px 0;
    color: #a594b6;
    font-size: 6px
}

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

.mini-board>div {
    background: #faf8fc;
    border-radius: 6px;
    padding: 9px;
    min-height: 226px
}

.board-label {
    font-size: 6px;
    letter-spacing: .5px;
    display: flex;
    justify-content: space-between;
    color: #9787a6
}

.board-label b {
    font-weight: 400;
    background: #ede6f5;
    padding: 0 4px;
    border-radius: 2px
}

.board-task {
    padding: 10px;
    background: white;
    border: 1px solid #ebe3f3;
    border-radius: 5px;
    margin-top: 10px
}

.task-tag {
    font-style: normal;
    font-size: 5px;
    padding: 3px 4px;
    background: #f6e8de;
    color: #b79070;
    border-radius: 3px;
    display: inline-block
}

.task-tag.violet {
    background: #eae1ff;
    color: #9369d7
}

.task-tag.green {
    background: #e4f2e8;
    color: #82a68e
}

.board-task strong {
    font-size: 9px;
    line-height: 1.6;
    display: block;
    margin: 9px 0 14px;
    font-weight: 500
}

.board-task small {
    font-size: 5px;
    color: #a795b6;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.board-task small span {
    background: #efe9f6;
    padding: 3px;
    border-radius: 50%;
    font-size: 5px;
    color: #a287be
}

.task-progress {
    height: 3px;
    background: linear-gradient(to right,#a788da 65%,#efe8f6 65%);
    margin-bottom: 11px;
    border-radius: 3px
}

.board-summary {
    font-size: 7px;
    display: flex;
    justify-content: space-between;
    color: #a48ab9;
    padding-top: 20px
}

.team-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 27px
}

.team-benefits>span {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 13px 12px;
    border: 1px solid #e9e0f4;
    border-radius: 7px;
    font-size: 17px;
    color: #9673c9
}

.team-benefits strong {
    font-size: 10px;
    font-weight: 500;
    color: #74627f
}

.pricing-section {
    padding-bottom: 50px
}

.price-card {
    background: #fff;
    border-color: #e7dff3;
    box-shadow: 0 8px 30px #5a3f7405
}

.pro-card {
    background: #faf7ff;
    border-color: #c5aef6;
    box-shadow: 0 8px 30px #7047eb0c
}

.plan-label {
    color: #9c88b0
}

.price-card>p {
    color: #87778f
}

.price>span {
    color: #9a88a8
}

.popular {
    background: #ece3ff;
    color: #8762bf;
    font-size: 6px
}

.plan-divider {
    background: #ebe2f5
}

.plan-features li {
    color: #807087;
    font-size: 11px
}

.plan-features li:before {
    color: #9975db
}

.offer-banner {
    border: 1px solid #e5d7ff;
    border-radius: 30px;
    padding: 10px 20px;
    width: fit-content;
    max-width: 100%;
    margin: 30px auto 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: #faf7ff;
    color: #7b609b;
    font-size: 11px;
    flex-wrap: wrap
}

.offer-banner>span {
    font-size: 7px;
    letter-spacing: .8px;
    color: #a087bd
}

.offer-banner strong {
    background: #ece1ff;
    padding: 3px 6px;
    border-radius: 4px;
    color: #7047eb;
    font-size: 10px
}

.offer-banner a {
    font-size: 9px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.all-plans {
    max-width: 800px;
    margin: 35px auto 0;
    padding: 24px;
    background: #faf8fe;
    border: 1px solid #e8dff6;
    border-radius: 12px;
    text-align: center
}

.all-plans h3 {
    font-size: 13px;
    letter-spacing: 0;
    margin-bottom: 22px;
    color: #7b6590
}

.all-plans>div {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    font-size: 10px;
    color: #9681ac
}

.comparison-section {
    padding-top: 40px;
    padding-bottom: 80px
}

.comparison-wrap {
    max-width: 940px;
    margin: 0 auto;
    border: 1px solid #e5dcf1;
    border-radius: 13px;
    background: white
}

.comparison-table {
    margin: 0;
    font-size: 12px;
    --bs-table-bg: transparent;
    --bs-table-color: #7d6e8b;
    --bs-table-border-color: #eee8f7
}

.comparison-table thead {
    background: #f8f4ff
}

.comparison-table thead th {
    font-size: 16px;
    color: #7047eb;
    padding: 24px;
    font-weight: 600
}

.comparison-table thead th:first-child {
    font-size: 12px;
    color: #766482
}

.comparison-table thead small {
    display: block;
    font-size: 9px;
    color: #9d87b2;
    margin-top: 6px;
    font-weight: 400
}

.comparison-table tbody th {
    font-weight: 400
}

.comparison-table th,.comparison-table td {
    padding: 14px 24px;
    vertical-align: middle
}

.comparison-table tr>*:not(:first-child) {
    text-align: center;
    width: 23%
}

.comparison-table tr>*:last-child {
    background: #faf7ff88
}

.comparison-table .table-yes {
    display: inline-grid;
    place-items: center;
    background: #eee5ff;
    color: #9069d4;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px
}

.table-no {
    color: #baafc6
}

.comparison-table caption {
    padding: 15px 24px;
    background: #fbfaff;
    font-size: 9px;
    line-height: 1.7;
    color: #a392b4
}

.testimonials-section {
    background: #f8f5fdbb;
    border-block:1px solid #eee6f7;padding: 75px 0
}

.testimonials-section .section-heading p {
    color: #8a779c;
    font-size: 12px
}

.testimonials-section .section-heading small {
    font-size: 9px;
    color: #a38fb5
}

.perspective-card {
    border: 1px solid #e7dcf3;
    border-radius: 12px;
    background: #fff;
    padding: 26px;
    height: 100%;
    position: relative
}

.quote-mark {
    display: block;
    font-family: Georgia,serif;
    font-size: 64px;
    color: #d8c5f5;
    line-height: .9
}

.perspective-role {
    font-size: 7px;
    letter-spacing: 1.2px;
    color: #9b80b7
}

.perspective-card h3 {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.5px;
    margin: 15px 0;
    color: #584364
}

.perspective-card p {
    font-size: 12px;
    line-height: 1.85;
    color: #93809f
}

.perspective-footer {
    border-top: 1px solid #eee6f4;
    margin-top: 22px;
    padding-top: 16px;
    color: #9b81b5;
    font-size: 9px
}

.faq-section {
    padding-top: 90px
}

.accordion-item {
    border-color: #e9e0f3
}

.accordion-button {
    color: #635170!important
}

.accordion-button:after {
    color: #9d81c0
}

.accordion-body {
    color: #8e7e9a
}

.message-section {
    padding-top: 25px
}

.contact-method {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 27px
}

.contact-method>span {
    width: 40px;
    height: 40px;
    border: 1px solid #e7daf8;
    background: #f7f2ff;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #9673c6;
    font-size: 21px
}

.contact-method small {
    display: block;
    color: #a28daf;
    font-size: 7px;
    letter-spacing: 1.3px;
    margin-bottom: 6px
}

.contact-method a {
    font-size: 13px;
    color: #73588c
}

.contact-spark {
    font-size: 95px;
    line-height: 1;
    color: #d6bdf6;
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 24px
}

.contact-spark>span {
    font-size: 10px;
    line-height: 1.8;
    color: #ac94bd;
    transform: rotate(-6deg)
}

.message-form {
    border: 1px solid #e7dbf4;
    border-radius: 14px;
    padding: 33px;
    background: #fcfaff;
    box-shadow: 0 12px 30px #57337c05
}

.message-form h3 {
    font-size: 23px;
    color: #543f64
}

.message-form>p {
    font-size: 12px;
    color: #94809f;
    margin-bottom: 25px
}

.message-form .form-label {
    font-size: 10px;
    color: #8c729e;
    margin-bottom: 8px
}

.form-control {
    font-size: 12px;
    padding: 12px;
    border-color: #e4d9ef;
    border-radius: 6px;
    background: white;
    color: #65536f
}

.form-control::placeholder {
    color: #b5a5c0;
    font-size: 11px
}

.form-control:focus {
    border-color: #aa87ef;
    box-shadow: 0 0 0 3px #7047eb15
}

.message-form .form-note {
    font-size: 9px;
    text-align: center;
    line-height: 1.7;
    margin: 15px 0 0;
    color: #a791b5
}

.contact-panel {
    background: linear-gradient(115deg,#7047eb,#8354ec);
    border: 0;
    color: #fff
}

.contact-panel .eyebrow {
    color: #d5c0fc
}

.contact-panel h2 {
    color: white
}

.contact-panel p,.contact-email {
    color: #e3d4fb
}

.contact-email a {
    color: white;
    border-color: #c5abed
}

.contact-panel .btn-dark {
    background: white;
    border-color: white;
    color: #7047eb
}

.contact-panel .btn-dark:hover {
    background: #f1e8ff
}

.orbit {
    border-color: #c5a9f344
}

.cta-star {
    color: #d7bcfc
}

.release-chip {
    background: #f9f3ff;
    border-color: #eadbff;
    color: #8d62b5
}

.footer-main p,.footer-main>div {
    color: #91809e
}

.footer-bottom {
    color: #a592b2
}

.footer-star {
    color: #ad87d6
}

.modal-content {
    background: #fcfaff;
    border-color: #e4d7f5
}

.modal-body p {
    color: #85728f
}

.tour-example {
    color: #8a69ad;
    background: #f0e8fb
}

.tour-count {
    color: #7047eb
}

@media(min-width: 1440px) {
    .edge-star.star-a {
        right:calc((100vw - 1440px)/2 - 38px)
    }

    .edge-orbit.orbit-a {
        left: calc((100vw - 1440px)/2 - 225px)
    }
}

@media(max-width: 991px) {
    .section {
        padding:70px 0
    }

    .section h2 {
        font-size: 36px
    }

    .why-section .row,.team-section .row,.message-section .row {
        --bs-gutter-x: 2rem
    }

    .quality-visual {
        max-width: 570px;
        margin: auto
    }

    .quality-hub {
        height: 300px
    }

    .team-visual {
        max-width: 590px;
        margin: 0 auto 20px;
        transform: rotate(-1deg)
    }

    .mini-board>div {
        min-height: 235px
    }

    .board-task strong {
        font-size: 11px
    }

    .board-label {
        font-size: 7px
    }

    .task-tag {
        font-size: 6px
    }

    .board-task small {
        font-size: 7px
    }

    .team-benefits {
        max-width: 500px
    }

    .solution-heading h3 {
        font-size: 20px
    }

    .message-section {
        padding-top: 10px
    }

    .contact-spark {
        display: none
    }

    .contact-method:last-of-type {
        margin-bottom: 15px
    }

    .comparison-section {
        padding-top: 10px
    }

    .faq-section {
        padding-bottom: 60px
    }

    .testimonials-section .section-heading {
        gap: 25px
    }

    .perspective-card {
        padding: 20px
    }

    .perspective-card h3 {
        font-size: 18px
    }

    .perspective-footer {
        font-size: 8px
    }

    .hero h1 {
        font-size: 57px
    }

    .page-decoration {
        opacity: .55
    }

    .popular {
        position: static;
        display: block;
        width: fit-content;
        margin-bottom: 14px
    }

    .plan-label {
        display: block
    }

    .pro-card .price {
        margin-top: 23px
    }
}

@media(max-width: 767px) {
    .hero {
        padding-top:44px
    }

    .hero h1 {
        font-size: 47px;
        letter-spacing: -2px
    }

    .hero .eyebrow-pill {
        font-size: 6px;
        letter-spacing: .8px
    }

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

    .hero:after {
        height: 65px
    }

    .section {
        padding: 60px 0
    }

    .section h2 {
        font-size: 33px
    }

    .page-decoration {
        opacity: .35
    }

    .quality-visual {
        padding: 23px
    }

    .quality-hub {
        height: 280px
    }

    .quality-hub .hub-ring {
        width: 205px;
        height: 205px
    }

    .quality-hub .hub-ring.second {
        width: 140px;
        height: 140px
    }

    .hub-node {
        font-size: 9px;
        min-width: 96px;
        padding: 10px
    }

    .node-one {
        left: 0
    }

    .node-two {
        right: 0
    }

    .node-three {
        left: 0
    }

    .node-four {
        right: 0
    }

    .features-section {
        padding-top: 60px
    }

    .section-intro {
        margin-bottom: 30px
    }

    .solution-card {
        padding: 17px;
        border-radius: 12px
    }

    .solution-heading {
        gap: 10px;
        margin-bottom: 15px
    }

    .solution-heading h3 {
        font-size: 18px
    }

    .problem-solution {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .pain-panel,.answer-panel {
        padding: 19px
    }

    .problem-solution h4 {
        font-size: 16px
    }

    .problem-solution p {
        font-size: 12px
    }

    .solution-diagram {
        gap: 10px;
        font-size: 9px;
        min-height: 63px
    }

    .solution-diagram b {
        font-size: 12px
    }

    .outcomes {
        gap: 8px
    }

    .outcomes>div {
        padding: 12px 10px
    }

    .outcomes h4 {
        font-size: 10px;
        line-height: 1.5
    }

    .outcomes p {
        font-size: 9px;
        line-height: 1.7
    }

    .outcome-check {
        margin-bottom: 8px
    }

    .solutions-list {
        gap: 20px
    }

    .team-visual {
        padding: 17px
    }

    .mini-board {
        gap: 6px
    }

    .mini-board>div {
        padding: 7px;
        min-height: 218px
    }

    .board-task {
        padding: 8px
    }

    .board-task strong {
        font-size: 9px
    }

    .board-label {
        font-size: 6px
    }

    .task-tag {
        font-size: 5px
    }

    .board-task small {
        font-size: 5px
    }

    .team-section .row {
        --bs-gutter-y: 1.5rem
    }

    .team-benefits strong {
        font-size: 10px
    }

    .offer-banner {
        border-radius: 10px;
        padding: 12px;
        gap: 8px;
        font-size: 10px
    }

    .offer-banner>span {
        width: 100%;
        text-align: center
    }

    .popular {
        position: absolute;
        right: 20px;
        top: 28px;
        font-size: 6px
    }

    .plan-label {
        font-size: 7px
    }

    .all-plans {
        padding: 23px 15px;
        margin-top: 25px
    }

    .all-plans>div {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        font-size: 9px
    }

    .comparison-section {
        padding-top: 0
    }

    .comparison-table {
        font-size: 10px
    }

    .comparison-table th,.comparison-table td {
        padding: 12px 13px
    }

    .comparison-table thead th {
        padding: 18px 13px;
        font-size: 14px
    }

    .comparison-table thead small {
        font-size: 7px
    }

    .comparison-table caption {
        padding: 14px;
        font-size: 8px
    }

    .perspective-card {
        padding: 25px
    }

    .perspective-card h3 {
        font-size: 21px
    }

    .perspective-footer {
        font-size: 10px
    }

    .testimonials-section .section-heading p {
        margin-top: 18px
    }

    .message-section {
        padding-top: 10px
    }

    .message-form {
        padding: 24px
    }

    .message-form h3 {
        font-size: 21px
    }

    .contact-method a {
        font-size: 14px
    }

    .contact-panel .eyebrow {
        font-size: 8px
    }

    .contact-panel h2 {
        font-size: 32px
    }

    .contact-panel {
        padding: 38px 27px
    }

    .contact-panel p {
        max-width: 260px
    }

    .why-section .section-copy,.team-section .section-copy {
        font-size: 13px
    }

    .benefit-list strong {
        font-size: 12px
    }

    .benefit-list small {
        font-size: 10px
    }

    .under-preview {
        font-size: 8px
    }

    .section-copy {
        font-size: 13px
    }

    .hero .product-stage {
        margin-top: 50px
    }
}

@media(max-width: 420px) {
    .hero h1 {
        font-size:43px
    }

    .hero .eyebrow-pill {
        font-size: 5px;
        letter-spacing: .7px;
        padding: 6px 9px;
        gap: 6px
    }

    .hero .sparkle {
        font-size: 15px
    }

    .hero .pill-arrow {
        font-size: 12px
    }

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

    .section h2 {
        font-size: 29px
    }

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

    .outcomes>div {
        position: relative;
        padding: 12px 12px 12px 39px
    }

    .outcome-check {
        position: absolute;
        left: 12px;
        top: 14px
    }

    .outcomes h4 {
        font-size: 11px;
        margin-bottom: 2px
    }

    .outcomes p {
        font-size: 10px
    }

    .solution-heading h3 {
        font-size: 16px
    }

    .solution-heading>span {
        font-size: 8px;
        padding: 4px 6px
    }

    .solution-diagram {
        font-size: 8px;
        gap: 7px
    }

    .team-visual {
        padding: 13px
    }

    .mini-board>div {
        padding: 5px
    }

    .board-task {
        padding: 6px
    }

    .board-task strong {
        font-size: 8px
    }

    .board-top {
        font-size: 10px
    }

    .board-summary {
        font-size: 6px
    }

    .board-label {
        font-size: 5px
    }

    .team-benefits {
        gap: 9px
    }

    .team-benefits>span {
        padding: 10px 8px;
        gap: 6px
    }

    .team-benefits strong {
        font-size: 9px
    }

    .popular {
        font-size: 5px;
        right: 17px
    }

    .price-card {
        padding: 27px
    }

    .quality-visual {
        padding: 18px
    }

    .quality-hub {
        height: 260px
    }

    .hub-node {
        min-width: 85px;
        font-size: 8px
    }

    .quality-hub>strong {
        width: 85px;
        height: 85px;
        font-size: 33px
    }

    .node-one {
        top: 20px
    }

    .node-two {
        top: 49px
    }

    .node-three {
        bottom: 28px
    }

    .node-four {
        bottom: 19px
    }

    .contact-panel h2 {
        font-size: 29px
    }
}
/* Readable type, deliberate hierarchy, and progressive disclosure. */
:root {
    --copy: #655f73;
    --heading: #292238;
    --soft: #f7f5fc
}

body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--heading)
}

.container {
    max-width: 1280px;
    padding-inline:32px}

.section {
    padding: 100px 0
}

.section h2 {
    font-size: clamp(34px,3.6vw,48px);
    letter-spacing: -1.8px;
    line-height: 1.17;
    font-weight: 700
}

.section h3 {
    font-weight: 650
}

.section-copy,.section-heading p,.why-section .section-copy,.team-section .section-copy {
    font-size: 18px;
    line-height: 1.8;
    color: var(--copy)
}

.section-intro {
    max-width: 720px;
    margin-bottom: 44px
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 1.6px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #6740d4
}

.btn,.btn-sm {
    font-size: 16px;
    line-height: 1.35;
    min-height: 52px;
    border-radius: 10px;
    padding: 15px 22px;
    gap: 14px
}

.btn:hover {
    transform: translateY(-1px)
}

.btn .fa-solid {
    font-size: 13px
}

.btn-primary {
    box-shadow: 0 6px 18px #7047eb22
}

.navbar {
    min-height: 88px
}

.navbar .nav-link,.nav-demo {
    font-size: 15px;
    color: #554d65
}

.navbar .nav-link {
    margin: 0 12px
}

.nav-demo {
    margin-right: 25px
}

.nav-demo span {
    font-size: 12px
}

.site-header {
    background: #ffffffed;
    backdrop-filter: blur(16px)
}

.hero {
    background: radial-gradient(ellipse at 93% 45%,#e3d6ff 0%,transparent 46%),linear-gradient(115deg,#fff 30%,#f7f2ff);
    color: var(--heading);
    padding: 88px 0 76px;
    overflow: hidden;
    border-bottom: 1px solid #eee7f9
}

.hero:before {
    background-image: radial-gradient(#9877cb35 1px,transparent 1px);
    background-size: 21px 21px;
    inset: 20px 0 0 65%;
    opacity: .45
}

.hero:after {
    display: none
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1.03fr;
    gap: 38px;
    align-items: center
}

.hero-content {
    position: relative;
    z-index: 2
}

.hero .eyebrow-pill {
    background: #f0e9fe;
    border-color: #e4d8fc;
    color: #714bb6;
    font-size: 10px;
    padding: 8px 11px;
    letter-spacing: .7px;
    gap: 8px
}

.hero .eyebrow-pill .sparkle {
    color: #7047eb;
    font-size: 14px
}

.hero .pill-arrow {
    display: none
}

.hero h1 {
    font-size: clamp(48px,4.7vw,60px);
    font-weight: 750;
    line-height: 1.07;
    letter-spacing: -2.8px;
    margin: 26px 0
}

.hero .accent-word {
    color: #7047eb
}

.hero .accent-word svg {
    display: block;
}

.hero-copy {
    font-size: 18px;
    line-height: 1.8;
    color: #6a6278;
    max-width: 535px;
    margin-bottom: 29px
}

.hero-actions {
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap
}

.hero-actions .btn-primary {
    background: #7047eb;
    color: white;
    border-color: #7047eb;
    box-shadow: 0 6px 18px #7047eb25
}

.hero-actions .btn-primary:hover {
    background: #5932c9
}

.hero-actions .btn-outline {
    background: white;
    color: #4d3c68;
    border-color: #ded3ed;
    gap: 10px
}

.hero-actions .btn-outline:hover {
    background: #f5efff
}

.hero-actions .fa-circle-play {
    font-size: 18px
}

.hero-notes {
    justify-content: flex-start;
    font-size: 13px;
    color: #766985;
    gap: 19px;
    margin-top: 22px
}

.hero-notes span::first-letter {
    color: #7047eb
}

.hero-product {
    position: relative;
    min-width: 0;
    padding: 36px 0 36px 20px
}

.preview-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.7px;
    color: #82679e;
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 22px
}

.hero .product-stage {
    margin: 0;
    width: 790px;
    transform: perspective(1600px) rotateY(-9deg) rotateZ(1deg);
    transform-origin: left center
}

.app-window {
    height: 510px!important;
    filter: blur(3.2px);
    pointer-events: none;
    user-select: none;
    background: white;
    box-shadow: 0 0 0 8px #ffffff77,0 30px 75px #56338720;
    border-radius: 15px
}

.app-sidebar {
    width: 150px
}

.dashboard-body {
    padding: 18px
}

.app-window .dashboard-heading h2 {
    font-size: 19px
}

.app-window .dashboard-heading p {
    font-size: 8px
}

.app-window .metric strong {
    font-size: 25px
}

.app-window .metric>span {
    font-size: 8px
}

.app-window .charts-grid {
    grid-template-columns: 1.85fr 1fr
}

.app-window .line-chart {
    height: 130px
}

.float-note {
    display: none
}

.under-preview {
    font-size: 12px;
    color: #837294;
    justify-content: flex-start;
    padding: 22px 0 0
}

.preview-label {
    position: absolute;
    bottom: 32px;
    left: 50px;
    display: flex;
    gap: 15px;
    align-items: center;
    background: #ffffffed;
    border: 1px solid #e3d4f8;
    border-radius: 13px;
    padding: 18px 22px;
    box-shadow: 0 14px 35px #4e306719;
    z-index: 2
}

.preview-label>i {
    font-size: 23px;
    color: #7047eb;
    background: #f0e7ff;
    padding: 12px;
    border-radius: 10px
}

.preview-label strong {
    display: block;
    font-size: 17px;
    line-height: 1.4
}

.preview-label span {
    display: block;
    font-size: 13px;
    color: #7a668d;
    margin-top: 4px
}

.workflow-strip {
    padding: 27px 0 32px;
    background: white
}

.workflow-strip p {
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #8a7d99;
    margin-bottom: 23px
}

.capabilities {
    padding: 0;
    gap: 15px
}

.capabilities>span {
    font-size: 16px;
    color: #776688;
    font-weight: 500
}

.capabilities>span i {
    color: #a188c2;
    font-size: 17px
}

.capabilities>i {
    font-size: 14px;
    color: #d4c6e4
}

.benefit-list {
    gap: 22px;
    margin: 29px 0 32px
}

.benefit-list li {
    gap: 16px
}

.benefit-list li>span {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    font-size: 19px;
    border-radius: 12px
}

.benefit-list strong {
    font-size: 17px;
    color: #40344f
}

.benefit-list small {
    font-size: 15px;
    color: #7c6d88;
    margin-top: 4px;
    line-height: 1.6
}

.quality-visual {
    padding: 34px;
    border-radius: 24px;
    min-height: 455px
}

.visual-badge {
    font-size: 11px;
    letter-spacing: 1px;
    color: #87649f
}

.quality-hub {
    height: 330px
}

.hub-node {
    font-size: 14px;
    padding: 14px 18px;
    min-width: 135px
}

.hub-node i {
    margin-right: 6px;
    font-size: 13px
}

.visual-bottom {
    font-size: 12px;
    color: #826893;
    padding-top: 22px
}

.visual-float {
    font-size: 13px;
    padding: 11px 17px
}

.quality-hub>strong {
    font-size: 42px;
    width: 110px;
    height: 110px
}

/* A single feature workspace replaces the repeated wall of cards. */
.features-section {
    background: #f8f6fc;
    border-block:1px solid #eee8f6}

.features-section .section-intro {
    text-align: left!important;
    max-width: none;
    margin-bottom: 38px
}

.features-section .section-intro h2 br {
    display: none
}

.features-section .section-copy {
    margin-top: 18px;
    max-width: 750px
}

.solution-explorer {
    display: grid;
    grid-template-columns: 295px minmax(0,1fr);
    gap: 28px;
    align-items: start
}

.solution-navigation {
    padding-top: 10px
}

.explorer-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    color: #887493;
    margin: 0 0 18px 15px
}

.solution-tabs {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.solution-tab {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 13px;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 12px;
    padding: 18px 14px;
    color: #7d6d89;
    transition: background .15s,border .15s
}

.solution-tab:hover {
    background: #ede6f9
}

.solution-tab.active {
    background: white;
    border-color: #e2d5f3;
    box-shadow: 0 5px 15px #57326e06;
    color: #7047eb
}

.tab-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #ede5f8;
    color: #9675ba;
    border-radius: 10px
}

.solution-tab.active .tab-icon {
    background: #7047eb;
    color: white
}

.solution-tab strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4
}

.solution-tab small {
    display: block;
    font-size: 12px;
    color: #887295;
    line-height: 1.5;
    margin-top: 4px
}

.solution-tab>i {
    margin-left: auto;
    font-size: 10px
}

.explorer-help {
    display: block;
    font-size: 13px;
    color: #77569b;
    margin: 28px 15px 0;
    line-height: 1.8
}

.explorer-help i {
    font-size: 10px;
    margin-left: 5px
}

.solution-card {
    background: #fff;
    border: 1px solid #e4d9f2;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 16px 45px #55306e07
}

.solution-heading {
    gap: 12px;
    margin-bottom: 22px
}

.solution-heading>span {
    font-size: 12px;
    padding: 4px 8px;
    background: #f5effd
}

.solution-heading h3 {
    font-size: 25px;
    letter-spacing: -.6px;
    color: #443050
}

.solution-heading>i {
    display: none
}

.problem-solution {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.pain-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 20px;
    border-bottom: 1px solid #eee7f4
}

.panel-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #a07869;
    display: flex;
    align-items: center;
    gap: 7px
}

.problem-solution h4 {
    font-size: 20px;
    line-height: 1.4;
    margin: 10px 0;
    color: #44324f
}

.problem-solution p {
    font-size: 16px;
    line-height: 1.75;
    color: #7b6d84
}

.answer-panel {
    padding: 22px 24px;
    background: #f5f0ff;
    border-color: #e8def8;
    border-radius: 12px
}

.answer-panel .panel-label {
    color: #8660b5
}

.answer-panel h4 {
    color: #66408b
}

.answer-panel p {
    color: #7c6490
}

.solution-diagram {
    font-size: 13px;
    gap: 15px;
    min-height: 80px;
    color: #8f70aa;
    padding: 21px 0
}

.solution-diagram strong {
    font-size: 20px
}

.solution-diagram .fa-solid {
    font-size: 13px
}

.solution-diagram b {
    font-size: 13px
}

.outcomes {
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    border-top: 1px solid #eee6f5;
    padding-top: 20px
}

.outcomes>div {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 16px
}

.outcomes>div:first-child {
    padding-left: 0
}

.outcomes>div:last-child {
    padding-right: 0
}

.outcomes>div+div {
    border-left: 1px solid #eee6f5
}

.outcome-check {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin-bottom: 12px
}

.outcomes h4 {
    font-size: 15px;
    line-height: 1.4;
    color: #55405f;
    margin-bottom: 7px
}

.outcomes p {
    font-size: 13px;
    line-height: 1.65;
    color: #8a7498
}

.solution-card:focus-visible {
    outline: 3px solid #c3a7f6;
    outline-offset: 5px
}

.workflow-section {
    background: #2d2044;
    color: white;
    border: 0;
    padding: 80px 0
}

.workflow-section .eyebrow {
    color: #c6a9f0
}

.workflow-section h2 {
    color: white
}

.workflow-section .muted {
    color: #c4a8e8
}

.workflow-section .section-copy {
    color: #c5b3d4;
    font-size: 18px
}

.steps {
    margin-top: 45px;
    --bs-gutter-x: 2rem
}

.steps h3 {
    font-size: 23px;
    color: #f7f0ff;
    margin-bottom: 15px;
    letter-spacing: -.4px
}

.step-number {
    font-size: 15px;
    color: #b99bdc;
    border-color: #604675;
    margin-bottom: 26px;
    padding-top: 20px
}

.step-number span {
    color: #bc9ae8
}

.steps p {
    font-size: 16px;
    line-height: 1.8;
    color: #c4b2d1;
    max-width: none
}

.team-section {
    background: white
}

.team-visual {
    transform: none;
    padding: 25px;
    border-radius: 18px
}

.board-top {
    font-size: 17px
}

.board-avatars i {
    width: 29px;
    height: 29px;
    font-size: 9px
}

.team-visual .sample-label {
    font-size: 9px;
    letter-spacing: .7px;
    margin: 20px 0
}

.mini-board {
    gap: 9px
}

.mini-board>div {
    padding: 10px;
    min-height: 270px
}

.board-label {
    font-size: 9px;
    letter-spacing: .1px
}

.board-task {
    padding: 11px
}

.task-tag {
    font-size: 7px
}

.board-task strong {
    font-size: 12px;
    line-height: 1.6
}

.board-task small,.board-task small span {
    font-size: 8px
}

.board-summary {
    font-size: 10px;
    gap: 15px;
    line-height: 1.6
}

.team-benefits {
    gap: 14px
}

.team-benefits>span {
    padding: 15px;
    gap: 12px;
    border-radius: 10px
}

.team-benefits strong {
    font-size: 14px;
    line-height: 1.5
}

.team-benefits>span>i {
    font-size: 17px;
    flex-shrink: 0
}

.text-link {
    font-size: 16px;
    margin-top: 22px;
    font-weight: 500
}

.pricing-section {
    background: #faf8fd;
    padding-bottom: 42px;
    border-top: 1px solid #f0e8f7
}

.offer-banner {
    font-size: 14px;
    padding: 13px 20px;
    gap: 12px;
    border-radius: 10px;
    background: white
}

.offer-banner>span {
    font-size: 10px;
    color: #896e9d
}

.offer-banner strong {
    font-size: 13px
}

.offer-banner a {
    font-size: 12px;
    color: #7047eb
}

.pricing-row {
    max-width: 940px;
    margin-top: 30px
}

.price-card {
    padding: 34px;
    border-radius: 17px
}

.plan-label {
    font-size: 11px;
    letter-spacing: 1.4px;
    color: #9376a7
}

.price-card h3 {
    font-size: 30px;
    margin-top: 14px
}

.price-card>p {
    font-size: 16px;
    color: #7a6889;
    line-height: 1.6;
    min-height: 51px
}

.price {
    font-size: 58px;
    line-height: 1.1;
    margin: 27px 0
}

.price>span {
    font-size: 16px
}

.popular {
    position: static;
    float: right;
    font-size: 8px;
    margin: -7px -10px 6px 8px;
    padding: 7px;
    border-radius: 5px
}

.pro-card {
    border: 2px solid #7047eb;
    background: #fff
}

.plan-features li {
    font-size: 15px;
    color: #766382;
    margin: 17px 0;
    line-height: 1.65;
    padding-left: 23px;
    position: relative
}

.plan-features li:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f00c';
    position: absolute;
    left: 0;
    font-size: 12px;
    color: #9b7dbb
}

.all-plans {
    max-width: 940px;
    margin-top: 32px;
    border: 0;
    background: transparent;
    padding: 14px 0
}

.all-plans h3 {
    font-size: 17px;
    color: #6a517e;
    margin-bottom: 24px;
    font-weight: 500
}

.all-plans>div {
    font-size: 13px;
    color: #826693;
    gap: 22px
}

.all-plans i {
    margin-right: 5px
}

.comparison-section {
    padding: 20px 0 75px;
    background: #faf8fd
}

.comparison-section .section-intro {
    display: none
}

.comparison-action {
    text-align: center;
    margin-bottom: 24px
}

.comparison-action .btn {
    background: white;
    font-size: 15px
}

.comparison-action .btn i {
    transition: transform .2s
}

.comparison-action .btn[aria-expanded=true] i {
    transform: rotate(180deg)
}

.comparison-wrap {
    max-width: 940px
}

.comparison-table {
    font-size: 15px
}

.comparison-table thead th {
    font-size: 21px
}

.comparison-table thead th:first-child {
    font-size: 16px
}

.comparison-table thead small {
    font-size: 13px;
    color: #8b729d
}

.comparison-table th,.comparison-table td {
    padding: 17px 24px
}

.comparison-table .table-yes {
    width: 25px;
    height: 25px;
    font-size: 12px
}

.comparison-table caption {
    font-size: 12px;
    color: #937ba4
}

.testimonials-section {
    background: white;
    border-block:1px solid #eee6f7}

.testimonials-section .section-heading p {
    font-size: 16px;
    line-height: 1.8;
    color: #7b688a;
    max-width: 430px
}

.testimonials-section .section-heading small {
    font-size: 12px;
    color: #90749f
}

.perspective-card {
    padding: 29px;
    border-radius: 16px;
    background: #faf7fe;
    box-shadow: none
}

.quote-mark {
    font-size: 27px;
    color: #aa88ca;
    line-height: 1;
    margin-bottom: 23px
}

.perspective-role {
    font-size: 10px;
    letter-spacing: 1.3px;
    color: #8d6ca7
}

.perspective-card h3 {
    font-size: 25px;
    line-height: 1.35;
    color: #594268;
    margin: 15px 0
}

.perspective-card p {
    font-size: 16px;
    color: #816c91;
    line-height: 1.8
}

.perspective-footer {
    font-size: 13px;
    color: #9071a6;
    line-height: 1.6;
    margin-top: 24px
}

.faq-section {
    padding-bottom: 85px
}

.faq-section h2 {
    font-size: 42px
}

.accordion-button {
    font-size: 18px;
    padding: 26px 0;
    line-height: 1.5;
    color: #543e66!important
}

.accordion-button:after {
    font-size: 24px;
    margin-left: 15px
}

.accordion-body {
    font-size: 16px;
    line-height: 1.85;
    color: #80698f;
    padding-bottom: 26px
}

.message-section {
    padding-top: 15px
}

.contact-method {
    margin-top: 30px
}

.contact-method>span {
    width: 49px;
    height: 49px;
    font-size: 20px;
    border-radius: 12px
}

.contact-method small {
    font-size: 11px;
    letter-spacing: 1px;
    color: #957ba6
}

.contact-method a {
    font-size: 18px;
    color: #755689
}

.contact-spark>span {
    font-size: 14px
}

.message-form {
    padding: 35px;
    background: #faf7fe;
    border-radius: 17px
}

.message-form h3 {
    font-size: 28px
}

.message-form>p {
    font-size: 16px;
    color: #897095;
    line-height: 1.7
}

.message-form .form-label {
    font-size: 14px;
    font-weight: 500;
    color: #755b84;
    margin-bottom: 10px
}

.form-control {
    font-size: 16px;
    min-height: 51px;
    padding: 13px;
    border-radius: 8px;
    color: #5c426b
}

.form-control::placeholder {
    font-size: 15px;
    color: #ad98b9
}

.message-form .form-note {
    font-size: 12px;
    color: #9a7ba9;
    margin-top: 18px
}

.contact-panel {
    padding: 58px;
    border-radius: 22px
}

.contact-panel h2 {
    font-size: 48px
}

.contact-panel p {
    font-size: 18px;
    max-width: none
}

.contact-panel .eyebrow {
    font-size: 12px
}

.contact-email {
    font-size: 14px;
    margin-top: 22px
}

.release-chip {
    font-size: 15px
}

.footer-main {
    gap: 24px
}

.footer-main p,.footer-main>div {
    font-size: 14px;
    color: #877093
}

.footer-main>div {
    gap: 27px
}

.footer-bottom {
    font-size: 12px;
    color: #92769e;
    gap: 20px
}

.modal-body h2 {
    font-size: 34px
}

.modal-body p {
    font-size: 17px
}

.tour-example {
    font-size: 16px
}

.tour-count {
    font-size: 14px
}

.hero .page-decoration {
    display: none
}

@media(min-width: 1440px) {
    .hero-product {
        padding-left:22px
    }

    .hero .product-stage {
        width: 820px
    }

    .hero .app-window {
        height: 535px!important
    }
}

@media(max-width: 1199px) {
    .container {
        padding-inline:28px
    }

    .hero-layout {
        grid-template-columns: 1.05fr 1fr;
        gap: 20px
    }

    .hero h1 {
        font-size: 58px
    }

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

    .hero .eyebrow-pill {
        font-size: 9px
    }

    .hero-product {
        padding-left: 0
    }

    .hero-actions .btn {
        font-size: 14px;
        padding: 15px
    }

    .hero .product-stage {
        width: 700px
    }

    .preview-label {
        left: 10px;
        padding: 15px
    }

    .preview-label strong {
        font-size: 15px
    }

    .solution-explorer {
        grid-template-columns: 255px minmax(0,1fr);
        gap: 20px
    }

    .solution-tab {
        padding: 16px 10px;
        gap: 10px
    }

    .solution-tab strong {
        font-size: 15px
    }

    .solution-tab small {
        font-size: 11px
    }

    .solution-card {
        padding: 25px
    }

    .solution-heading h3 {
        font-size: 23px
    }

    .navbar .nav-link {
        margin: 0 7px;
        font-size: 14px
    }

    .nav-demo {
        font-size: 14px;
        margin-right: 18px
    }

    .navbar .btn {
        font-size: 14px
    }

    .quality-visual {
        padding: 25px
    }

    .hub-node {
        font-size: 12px;
        min-width: 120px;
        padding: 12px
    }

    .quality-hub {
        height: 330px
    }

    .board-top {
        font-size: 14px
    }

    .mini-board>div {
        padding: 7px
    }

    .board-task {
        padding: 8px
    }

    .board-task strong {
        font-size: 11px
    }

    .board-label {
        font-size: 7px
    }

    .popular {
        font-size: 7px
    }

    .capabilities>span {
        font-size: 14px
    }
}

@media(max-width: 991px) {
    .section {
        padding:76px 0
    }

    .navbar {
        min-height: 78px
    }

    .navbar .nav-link,.nav-demo {
        font-size: 16px
    }

    .navbar .btn {
        font-size: 15px
    }

    .hero {
        padding: 58px 0 45px
    }

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

    .hero-content {
        max-width: 680px
    }

    .hero h1 {
        font-size: 64px
    }

    .hero h1 br:nth-of-type(2) {
        display: none
    }

    .hero-copy {
        font-size: 18px;
        max-width: 620px
    }

    .hero .eyebrow-pill {
        font-size: 11px
    }

    .hero-actions .btn {
        font-size: 16px;
        padding: 15px 22px
    }

    .hero-product {
        padding: 10px 0 35px;
        max-width: 100%;
        width: 100%
    }

    .hero .product-stage {
        width: 100%;
        transform: none
    }

    .hero .app-window {
        height: 490px!important
    }

    .hero .preview-caption {
        margin-bottom: 20px
    }

    .preview-label {
        bottom: 32px;
        left: auto;
        right: 25px
    }

    .preview-label strong {
        font-size: 17px
    }

    .app-sidebar {
        display: block;
        width: 145px
    }

    .hero .under-preview {
        font-size: 12px;
        padding: 20px 0
    }

    .capabilities {
        gap: 20px;
        padding: 0
    }

    .capabilities>span {
        font-size: 13px
    }

    .section-copy,.section-heading p,.why-section .section-copy,.team-section .section-copy {
        font-size: 18px
    }

    .quality-visual {
        max-width: 600px;
        width: 100%;
        margin-top: 5px
    }

    .quality-hub {
        height: 330px
    }

    .hub-node {
        font-size: 15px;
        padding: 14px 17px;
        min-width: 140px
    }

    .solution-explorer {
        grid-template-columns: 220px minmax(0,1fr);
        gap: 17px
    }

    .solution-tab {
        padding: 14px 10px;
        gap: 9px
    }

    .tab-icon {
        width: 32px;
        height: 32px;
        font-size: 13px
    }

    .solution-tab strong {
        font-size: 14px
    }

    .solution-tab small {
        display: none
    }

    .solution-tab>i {
        font-size: 9px
    }

    .explorer-label {
        font-size: 9px;
        margin-left: 10px
    }

    .explorer-help {
        margin-left: 10px;
        font-size: 12px
    }

    .solution-card {
        padding: 23px
    }

    .solution-heading h3 {
        font-size: 22px
    }

    .problem-solution h4 {
        font-size: 19px
    }

    .problem-solution p {
        font-size: 15px
    }

    .answer-panel {
        padding: 19px
    }

    .solution-diagram {
        font-size: 12px;
        gap: 10px;
        line-height: 1.8
    }

    .outcomes {
        grid-template-columns: 1fr;
        gap: 17px
    }

    .outcomes>div {
        position: relative;
        padding: 0 0 0 35px!important;
        border: 0!important
    }

    .outcome-check {
        position: absolute;
        left: 0;
        top: 1px
    }

    .outcomes h4 {
        font-size: 15px;
        margin-bottom: 3px
    }

    .outcomes p {
        font-size: 14px
    }

    .steps h3 {
        font-size: 23px
    }

    .steps p {
        font-size: 16px
    }

    .steps {
        --bs-gutter-y: 2rem
    }

    .team-visual {
        max-width: 660px;
        width: 100%;
        padding: 25px
    }

    .board-top {
        font-size: 17px
    }

    .mini-board>div {
        min-height: 270px;
        padding: 12px
    }

    .board-label {
        font-size: 10px
    }

    .board-task {
        padding: 12px
    }

    .board-task strong {
        font-size: 13px
    }

    .task-tag {
        font-size: 8px
    }

    .board-task small,.board-task small span {
        font-size: 9px
    }

    .board-summary {
        font-size: 11px
    }

    .team-benefits {
        max-width: none
    }

    .team-benefits strong {
        font-size: 16px
    }

    .price-card {
        padding: 27px
    }

    .price-card>p {
        font-size: 15px
    }

    .popular {
        float: none;
        width: fit-content;
        margin: 0 0 12px;
        font-size: 8px
    }

    .plan-features li {
        font-size: 14px
    }

    .all-plans>div {
        font-size: 12px;
        gap: 15px
    }

    .perspective-card {
        padding: 24px
    }

    .perspective-card h3 {
        font-size: 22px
    }

    .perspective-card p {
        font-size: 15px
    }

    .perspective-footer {
        font-size: 12px
    }

    .section-heading {
        gap: 25px
    }

    .testimonials-section .section-heading p {
        font-size: 15px
    }

    .message-section {
        padding-top: 10px
    }

    .contact-panel {
        padding: 43px
    }

    .contact-panel h2 {
        font-size: 40px
    }

    .footer-main {
        flex-wrap: wrap
    }

    .footer-main>div {
        margin-left: auto
    }

    .footer-main p {
        font-size: 13px
    }

    .contact-method:last-of-type {
        margin-bottom: 15px
    }
}

@media(max-width: 767px) {
    .container {
        padding-inline:22px
    }

    .section {
        padding: 64px 0
    }

    .section h2 {
        font-size: 35px;
        letter-spacing: -1.1px
    }

    .hero {
        padding-top: 45px
    }

    .hero h1 {
        font-size: 54px;
        line-height: 1.09;
        letter-spacing: -2px
    }

    .hero h1 br:nth-of-type(2) {
        display: block
    }

    .hero .eyebrow-pill {
        font-size: 9px;
        letter-spacing: .6px
    }

    .hero-copy {
        font-size: 17px;
        line-height: 1.75
    }

    .hero-actions {
        gap: 10px
    }

    .hero-actions .btn {
        font-size: 15px;
        padding: 15px 18px
    }

    .hero-notes {
        font-size: 12px;
        gap: 16px
    }

    .hero-product {
        padding: 0 0 32px
    }

    .hero .app-window {
        height: 365px!important;
        filter: blur(3px)
    }

    .hero .app-sidebar {
        display: none
    }

    .hero .dashboard-body {
        padding: 15px
    }

    .hero .product-stage {
        width: 650px
    }

    .hero .preview-caption {
        font-size: 10px;
        margin-bottom: 17px
    }

    .preview-label {
        left: 15px;
        right: auto;
        bottom: 27px;
        padding: 13px 16px;
        gap: 10px
    }

    .preview-label>i {
        font-size: 17px;
        padding: 10px
    }

    .preview-label strong {
        font-size: 15px
    }

    .preview-label span {
        font-size: 12px
    }

    .hero .under-preview {
        font-size: 11px
    }

    .capabilities {
        grid-template-columns: 1fr 1fr;
        gap: 21px;
        display: grid
    }

    .capabilities>span {
        font-size: 13px
    }

    .capabilities>i {
        display: none
    }

    .workflow-strip p {
        font-size: 9px
    }

    .section-copy,.section-heading p,.why-section .section-copy,.team-section .section-copy {
        font-size: 17px
    }

    .eyebrow {
        font-size: 11px
    }

    .benefit-list strong {
        font-size: 16px
    }

    .benefit-list small {
        font-size: 14px
    }

    .benefit-list li>span {
        width: 43px;
        height: 43px
    }

    .why-section .btn {
        font-size: 14px;
        padding: 15px 17px
    }

    .quality-visual {
        padding: 23px;
        min-height: 390px
    }

    .quality-hub {
        height: 280px
    }

    .hub-node {
        font-size: 12px;
        min-width: 115px;
        padding: 12px
    }

    .quality-hub>strong {
        width: 95px;
        height: 95px;
        font-size: 36px
    }

    .visual-badge {
        font-size: 10px
    }

    .visual-bottom {
        font-size: 11px
    }

    .visual-float {
        font-size: 12px
    }

    .solution-explorer {
        display: block
    }

    .solution-navigation {
        padding-top: 0;
        margin-bottom: 22px
    }

    .explorer-label {
        font-size: 10px;
        margin: 0 0 13px
    }

    .solution-tabs {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 8px;
        scrollbar-width: thin;
        scrollbar-color: #c8afea transparent
    }

    .solution-tab {
        flex: 0 0 auto;
        width: auto;
        gap: 8px;
        border-color: #e4d8f1;
        padding: 10px 12px;
        background: #fcfaff;
        border-radius: 9px
    }

    .solution-tab strong {
        font-size: 13px;
        white-space: nowrap
    }

    .solution-tab>i {
        display: none
    }

    .tab-icon {
        width: 27px;
        height: 27px;
        font-size: 12px;
        border-radius: 7px
    }

    .solution-tab.active {
        background: #7047eb;
        color: white;
        border-color: #7047eb
    }

    .solution-tab.active .tab-icon {
        background: #ffffff20
    }

    .explorer-help {
        display: none
    }

    .solution-card {
        padding: 23px;
        border-radius: 14px
    }

    .solution-heading {
        gap: 10px;
        margin-bottom: 21px
    }

    .solution-heading h3 {
        font-size: 23px
    }

    .solution-heading>span {
        font-size: 11px;
        flex-shrink: 0
    }

    .problem-solution h4 {
        font-size: 20px;
        line-height: 1.4
    }

    .problem-solution p {
        font-size: 16px;
        line-height: 1.75
    }

    .panel-label {
        font-size: 10px
    }

    .answer-panel {
        padding: 19px
    }

    .solution-diagram {
        font-size: 12px;
        gap: 10px;
        padding: 21px 0
    }

    .outcomes h4 {
        font-size: 16px
    }

    .outcomes p {
        font-size: 14px
    }

    .outcomes {
        gap: 18px
    }

    .workflow-section .section-copy {
        font-size: 17px
    }

    .steps {
        margin-top: 30px
    }

    .steps h3 {
        font-size: 22px
    }

    .steps p {
        font-size: 16px
    }

    .step-number {
        margin-bottom: 19px
    }

    .team-visual {
        padding: 18px
    }

    .mini-board {
        gap: 7px
    }

    .mini-board>div {
        padding: 7px;
        min-height: 230px
    }

    .board-label {
        font-size: 7px
    }

    .board-task {
        padding: 8px
    }

    .board-task strong {
        font-size: 10px
    }

    .task-tag {
        font-size: 6px
    }

    .board-task small,.board-task small span {
        font-size: 6px
    }

    .board-top {
        font-size: 14px
    }

    .board-summary {
        font-size: 9px
    }

    .team-benefits>span {
        padding: 14px 12px;
        gap: 10px
    }

    .team-benefits strong {
        font-size: 14px
    }

    .team-benefits {
        gap: 11px
    }

    .team-section .row {
        --bs-gutter-y: 2rem
    }

    .text-link {
        font-size: 16px
    }

    .offer-banner {
        font-size: 13px;
        padding: 15px;
        gap: 10px
    }

    .offer-banner>span {
        font-size: 9px
    }

    .offer-banner a {
        font-size: 12px
    }

    .price-card {
        padding: 29px
    }

    .price-card>p {
        font-size: 16px;
        min-height: 0
    }

    .popular {
        float: right;
        font-size: 7px;
        margin: -3px -8px 8px 8px
    }

    .plan-label {
        font-size: 10px
    }

    .plan-features li {
        font-size: 15px
    }

    .price {
        font-size: 56px
    }

    .all-plans>div {
        font-size: 13px;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .all-plans h3 {
        font-size: 16px;
        line-height: 1.6
    }

    .comparison-section {
        padding: 0 0 45px
    }

    .comparison-action .btn {
        font-size: 14px;
        min-height: 51px
    }

    .comparison-table {
        font-size: 13px
    }

    .comparison-table th,.comparison-table td {
        padding: 15px 12px
    }

    .comparison-table thead th {
        font-size: 18px
    }

    .comparison-table thead th:first-child {
        font-size: 14px
    }

    .comparison-table thead small {
        font-size: 10px
    }

    .comparison-table caption {
        font-size: 11px
    }

    .comparison-table tr>*:not(:first-child) {
        width: 24%
    }

    .testimonials-section .section-heading p {
        font-size: 16px;
        max-width: none
    }

    .testimonials-section .section-heading small {
        font-size: 12px
    }

    .perspective-card {
        padding: 26px
    }

    .perspective-card h3 {
        font-size: 25px
    }

    .perspective-card p {
        font-size: 16px
    }

    .perspective-role {
        font-size: 11px
    }

    .perspective-footer {
        font-size: 13px
    }

    .accordion-button {
        font-size: 17px;
        padding: 24px 0
    }

    .accordion-body {
        font-size: 16px;
        padding-right: 5px
    }

    .message-section {
        padding-top: 10px
    }

    .message-form {
        padding: 25px
    }

    .message-form h3 {
        font-size: 26px
    }

    .message-form>p {
        font-size: 16px
    }

    .message-form .form-label {
        font-size: 14px
    }

    .contact-method small {
        font-size: 10px
    }

    .contact-method a {
        font-size: 17px
    }

    .contact-panel {
        padding: 35px 27px
    }

    .contact-panel h2 {
        font-size: 36px
    }

    .contact-panel p {
        font-size: 17px;
        max-width: 350px
    }

    .contact-panel .eyebrow {
        font-size: 10px
    }

    .contact-panel .btn {
        font-size: 15px
    }

    .contact-email {
        font-size: 13px
    }

    .footer-main>div {
        width: 100%;
        margin-left: 0;
        gap: 16px;
        font-size: 14px
    }

    .footer-main p {
        font-size: 13px
    }

    .footer-bottom {
        font-size: 11px;
        gap: 23px
    }

    .modal-body h2 {
        font-size: 28px
    }

    .modal-body p {
        font-size: 16px
    }

    .tour-example {
        font-size: 14px
    }

    .tour-controls .btn {
        font-size: 14px
    }
}

@media(max-width: 420px) {
    .hero h1 {
        font-size:49px
    }

    .hero .eyebrow-pill {
        font-size: 8px
    }

    .hero-actions .btn {
        font-size: 13px;
        padding: 14px 15px;
        gap: 9px
    }

    .hero-notes {
        font-size: 11px;
        gap: 12px
    }

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

    .section h2 {
        font-size: 32px
    }

    .section-copy,.section-heading p,.why-section .section-copy,.team-section .section-copy {
        font-size: 16px
    }

    .solution-card {
        padding: 19px
    }

    .solution-heading h3 {
        font-size: 21px
    }

    .problem-solution h4 {
        font-size: 19px
    }

    .answer-panel {
        padding: 17px
    }

    .outcomes h4 {
        font-size: 16px
    }

    .outcomes p {
        font-size: 14px
    }

    .quality-visual {
        padding: 18px
    }

    .hub-node {
        font-size: 11px;
        min-width: 104px
    }

    .quality-hub {
        height: 280px
    }

    .visual-badge {
        font-size: 9px
    }

    .visual-bottom {
        font-size: 10px
    }

    .team-visual {
        padding: 14px
    }

    .mini-board>div {
        padding: 6px
    }

    .board-task {
        padding: 7px
    }

    .board-task strong {
        font-size: 9px
    }

    .board-top {
        font-size: 13px
    }

    .board-summary {
        font-size: 8px
    }

    .team-benefits strong {
        font-size: 13px
    }

    .popular {
        font-size: 6px;
        max-width: 130px
    }

    .price-card {
        padding: 26px
    }

    .all-plans>div {
        font-size: 12px
    }

    .contact-panel h2 {
        font-size: 33px
    }

    .contact-panel .btn {
        font-size: 14px
    }

    .hero .preview-label strong {
        font-size: 14px
    }

    .hero .preview-label span {
        font-size: 11px
    }

    .comparison-table {
        font-size: 12px
    }

    .comparison-table th,.comparison-table td {
        padding: 14px 10px
    }

    .footer-main {
        gap: 17px
    }
}

.features-section h2 .purple-text {
    margin-left: .16em
}

.outcomes p {
    font-size: 15px;
    color: #7c648b
}

.solution-tab small {
    color: #796087
}

.problem-solution p {
    font-size: 16px
}

.hero .under-preview {
    visibility: hidden
}

@media(max-width: 767px) {
    .features-section h2 .purple-text {
        margin-left:0;
        display: block;
        margin-top: 4px
    }

    .outcomes p {
        font-size: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .app-window,.hero .product-stage {
        transform: none
    }

    .solution-tab,.comparison-action .btn i {
        transition: none
    }
}

.elementor-widget-n-tabs .e-n-tab-title-text {
    align-items: center;
    display: flex;
    font-size: var(--n-tabs-title-font-size);
    text-align: var(--n-tabs-title-text-align);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
	text-align: left;
    margin-left: 15px;
	font-weight: 600;
}
.elementor-widget-n-tabs .e-n-tab-title-text small{
	font-weight:400;
}

.e-n-tab-title[aria-selected="true"] .e-n-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

.e-n-tab-title[aria-selected="true"] .e-n-tab-icon i {
    color: inherit !important;
}
/* All tab icons */
.e-n-tab-title .e-n-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background-color: #ede5f8 !important;
    color: #9675ba !important;
}

.e-n-tab-title .e-n-tab-icon i,
.e-n-tab-title .e-n-tab-icon svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* Selected tab icon */
.e-n-tab-title[aria-selected="true"] .e-n-tab-icon {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}
.e-n-tab-title[aria-selected="true"] small {
    color: #333;
	
}
/* Chevron on every tab */
.e-n-tab-title::after {
    content: "\f054"; /* fa-chevron-right */
    margin-left: auto;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #9675ba;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Active tab chevron */
.e-n-tab-title[aria-selected="true"]::after {
    color: #7c3aed;
}

/* Optional movement when active */
.e-n-tab-title[aria-selected="true"]::after {
    transform: translateX(3px);
}
.trust-bar p {
    margin: 0;
}