:root {
     --bg: #fcfcfe;
     --bg-alt: #f3f6fb;
     --surface: #ffffff;
     --surface-2: #f7f9fd;
     --line: #dde5f0;
     --text: #0b1324;
     --muted: #5a677d;
     --primary: #6d5efc;
     --primary-dark: #5747f0;
     --primary-soft: #ebe8ff;
     --accent: #0ea5a4;
     --accent-soft: #dff8f7;
     --shadow: 0 24px 60px rgba(11, 19, 36, .08);
     --shadow-soft: 0 14px 32px rgba(11, 19, 36, .05);
     --container: 1180px;
     --radius-xl: 34px;
     --radius-lg: 26px;
     --radius-md: 18px;
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: var(--text);
     background:
         linear-gradient(180deg, rgba(109, 94, 252, .05) 0%, rgba(109, 94, 252, 0) 18%),
         radial-gradient(circle at 100% 0, rgba(14, 165, 164, .08), transparent 26%),
         radial-gradient(circle at 0 0, rgba(109, 94, 252, .08), transparent 28%),
         var(--bg);
     line-height: 1.65;
 }

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

 img {
     display: block;
     max-width: 100%
 }

 .container {
     width: min(calc(100% - 40px), var(--container));
     margin: 0 auto
 }

 .section {
     padding: 96px 0
 }

 .section-tight {
     padding: 72px 0
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 9px 15px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .78);
     border: 1px solid rgba(221, 229, 240, .9);
     backdrop-filter: blur(8px);
     box-shadow: 0 10px 24px rgba(11, 19, 36, .04);
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .01em;
     color: #4637d8
 }

 .eyebrow::before {
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: linear-gradient(180deg, var(--accent), var(--primary))
 }

 h1,
 h2,
 h3,
 p {
     margin: 0
 }

 h1 {
     font-size: clamp(42px, 5vw, 74px);
     line-height: 1.01;
     letter-spacing: -.05em;
     max-width: 11ch;
 }

 h2 {
     font-size: clamp(30px, 3.2vw, 50px);
     line-height: 1.05;
     letter-spacing: -.04em;
     max-width: 13ch;
 }

 h3 {
     font-size: 22px;
     line-height: 1.18;
     letter-spacing: -.025em;
 }

 p.lead {
     font-size: 19px;
     line-height: 1.82;
     color: var(--muted);
     max-width: 760px;
 }

 p.body {
     font-size: 16.5px;
     color: var(--muted)
 }

 .btns {
     display: flex;
     gap: 14px;
     flex-wrap: wrap
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     border-radius: 999px;
     padding: 15px 22px;
     font-size: 15px;
     font-weight: 800;
     transition: .22s ease;
     border: 1px solid transparent
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--primary) 0%, #7a6cff 100%);
     color: #fff;
     box-shadow: 0 16px 34px rgba(109, 94, 252, .28)
 }

 .btn-primary:hover {
     background: linear-gradient(135deg, var(--primary-dark) 0%, #6a59ff 100%);
     transform: translateY(-1px)
 }

 .btn-secondary {
     background: rgba(255, 255, 255, .85);
     border-color: var(--line);
     color: var(--text);
     backdrop-filter: blur(8px)
 }

 .btn-secondary:hover {
     border-color: #c7d3e5;
     transform: translateY(-1px)
 }

 .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(252, 252, 254, .78);
     backdrop-filter: blur(18px);
     border-bottom: 1px solid rgba(221, 229, 240, .72)
 }

 .nav {
     height: 82px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 14px
 }

 .brand img {
     height: 36px;
     width: auto
 }

 .brand strong {
     font-size: 18px;
     letter-spacing: -.02em
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 26px
 }

 .nav-links a {
     font-size: 15px;
     color: #4a5970
 }

 .nav-links a:hover {
     color: var(--text)
 }

 .hero {
     padding: 64px 0 40px
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1.02fr .98fr;
     gap: 34px;
     align-items: center
 }

 .hero-copy {
     padding: 26px 0
 }

 .hero-copy .eyebrow {
     margin-bottom: 18px
 }

 .hero-copy p.lead {
     margin-top: 22px
 }

 .hero-points {
     list-style: none;
     padding: 0;
     margin: 28px 0 34px;
     display: grid;
     gap: 14px;
     max-width: 720px
 }

 .hero-points li,
 .check-list li,
 .mini-list li {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     font-size: 16px;
     color: #334155
 }

 .check {
     width: 22px;
     height: 22px;
     flex: 0 0 22px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     margin-top: 1px;
     background: var(--primary-soft);
     color: var(--primary);
     font-size: 14px;
     font-weight: 900
 }

 .hero-card {
     position: relative;
     background:
         linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(247, 249, 253, .96) 100%);
     border: 1px solid rgba(221, 229, 240, .9);
     border-radius: 38px;
     padding: 26px;
     box-shadow: var(--shadow);
     overflow: hidden;
     backdrop-filter: blur(14px)
 }

 .hero-card::before {
     content: "";
     position: absolute;
     left: -40px;
     top: -40px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(109, 94, 252, .18), transparent 68%);
 }

 .hero-card::after {
     content: "";
     position: absolute;
     right: -46px;
     bottom: -70px;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(14, 165, 164, .16), transparent 70%);
 }

 .dashboard {
     display: grid;
     gap: 16px;
     position: relative;
     z-index: 1
 }

 .dash-top {
     display: grid;
     grid-template-columns: 1.06fr .94fr;
     gap: 16px
 }

 .panel,
 .card {
     background: rgba(255, 255, 255, .86);
     border: 1px solid rgba(221, 229, 240, .9);
     border-radius: 28px;
     padding: 26px;
     box-shadow: var(--shadow-soft);
     backdrop-filter: blur(10px)
 }

 .panel.soft {
     background: linear-gradient(180deg, #fcfdff 0%, #f3f6ff 100%)
 }

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

 .kpi strong {
     font-size: 34px;
     letter-spacing: -.04em
 }

 .kpi span {
     font-size: 14px;
     color: var(--muted)
 }

 .icon {
     width: 46px;
     height: 46px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     background: linear-gradient(135deg, var(--primary-soft), #dff8f7);
     color: var(--primary);
     font-size: 20px;
     font-weight: 800
 }

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

 .bar {
     height: 10px;
     background: #edf2fa;
     border-radius: 999px;
     overflow: hidden
 }

 .bar span {
     display: block;
     height: 100%;
     border-radius: 999px;
     background: linear-gradient(90deg, var(--accent), var(--primary))
 }

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

 .mini-card {
     background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(247, 249, 253, .96) 100%);
     border: 1px solid rgba(221, 229, 240, .9);
     border-radius: 24px;
     padding: 18px;
     box-shadow: var(--shadow-soft)
 }

 .mini-label {
     font-size: 13px;
     color: #5b69a0;
     font-weight: 800;
     margin-bottom: 10px
 }

 .mini-title {
     font-size: 18px;
     font-weight: 780;
     letter-spacing: -.02em;
     margin-bottom: 8px
 }

 .mini-list {
     list-style: none;
     padding: 0;
     display: grid;
     gap: 8px
 }

 .trust-strip {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
     margin-top: 28px
 }

 .trust-item {
     background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
     border: 1px solid var(--line);
     border-radius: 20px;
     padding: 18px;
     font-size: 14px;
     font-weight: 800;
     color: #2b3950;
     box-shadow: var(--shadow-soft)
 }

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

 .grid-4,
 .grid-3,
 .grid-2 {
     display: grid;
     gap: 22px
 }

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

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

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

 .card h3 {
     margin-bottom: 12px
 }

 .card p {
     color: var(--muted);
     font-size: 16px
 }

 .soft-wrap {
     background:
         linear-gradient(180deg, rgba(109, 94, 252, .04) 0%, rgba(255, 255, 255, 0) 36%),
         linear-gradient(180deg, #f8faff 0%, #fff 100%);
     border-top: 1px solid #edf1f7;
     border-bottom: 1px solid #edf1f7
 }

 .feature-block {
     background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(248, 250, 255, .98) 100%);
     border: 1px solid rgba(221, 229, 240, .9);
     border-radius: 34px;
     padding: 20px;
     box-shadow: var(--shadow)
 }

 .feature-tabs {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-bottom: 18px
 }

 .tab-btn {
     background: rgba(255, 255, 255, .86);
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 11px 16px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 800;
     color: #45546b;
     transition: .2s ease
 }

 .tab-btn.active {
     background: linear-gradient(135deg, var(--primary) 0%, #7a6cff 100%);
     border-color: transparent;
     color: #fff;
     box-shadow: 0 12px 26px rgba(109, 94, 252, .22)
 }

 .tab-panel {
     display: none
 }

 .tab-panel.active {
     display: block
 }

 .panel-grid {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 18px
 }

 .highlight-box {
     background: linear-gradient(135deg, #f8f7ff 0%, #eefaf8 100%);
     border: 1px solid #dfe5fb;
     border-radius: 28px;
     padding: 24px
 }

 .check-list {
     list-style: none;
     padding: 0;
     display: grid;
     gap: 12px
 }

 .process {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 18px;
     counter-reset: step
 }

 .step {
     background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
     border: 1px solid var(--line);
     border-radius: 28px;
     padding: 24px;
     box-shadow: var(--shadow-soft);
     position: relative
 }

 .step-no {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: linear-gradient(135deg, var(--primary-soft), #dff8f7);
     color: var(--primary);
     font-weight: 900;
     margin-bottom: 14px
 }

 .step p {
     font-size: 15px;
     color: var(--muted)
 }

 .deliverable {
     display: flex;
     gap: 14px;
     align-items: flex-start;
     padding: 16px 0;
     border-bottom: 1px dashed var(--line)
 }

 .deliverable:last-child {
     border-bottom: none
 }

 .deliverable strong {
     display: block;
     font-size: 16px;
     margin-bottom: 4px
 }

 .pricing-note {
     background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
     border: 1px solid var(--line);
     border-radius: 28px;
     padding: 26px;
     box-shadow: var(--shadow-soft)
 }

 .callout {
     background: linear-gradient(135deg, #0f1730 0%, #3b2bbd 60%, #0ea5a4 130%);
     color: #fff;
     border-radius: 38px;
     padding: 42px;
     box-shadow: 0 26px 70px rgba(59, 43, 189, .24);
     position: relative;
     overflow: hidden
 }

 .callout::after {
     content: "";
     position: absolute;
     right: -80px;
     top: -60px;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 255, 255, .24), transparent 72%)
 }

 .callout p {
     color: rgba(255, 255, 255, .82)
 }

 .faq-list {
     display: grid;
     gap: 14px
 }

 .faq {
     background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
     border: 1px solid var(--line);
     border-radius: 22px;
     overflow: hidden;
     box-shadow: var(--shadow-soft)
 }

 .faq-q {
     width: 100%;
     border: none;
     background: transparent;
     padding: 22px 24px;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     gap: 18px;
     align-items: center;
     text-align: left;
     font: inherit;
     font-size: 18px;
     font-weight: 800;
     color: var(--text)
 }

 .faq-q span:last-child {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: linear-gradient(135deg, var(--primary-soft), #dff8f7);
     color: var(--primary);
     font-weight: 900;
     flex: 0 0 30px
 }

 .faq-a {
     display: none;
     padding: 0 24px 22px;
     color: var(--muted);
     font-size: 16px
 }

 .faq.active .faq-a {
     display: block
 }

 .footer-cta {
     padding: 36px 0 96px
 }

 .footer-card {
     display: grid;
     grid-template-columns: 1.08fr .92fr;
     gap: 26px;
     align-items: center;
     background: linear-gradient(135deg, rgba(109, 94, 252, .08) 0%, rgba(14, 165, 164, .08) 100%);
     border: 1px solid #d9e2f1;
     border-radius: 38px;
     padding: 36px;
     box-shadow: var(--shadow)
 }

 footer {
     border-top: 1px solid var(--line);
     padding: 28px 0 42px;
     color: #5a687d;
     font-size: 14px
 }

 .mobile-cta {
     position: fixed;
     left: 16px;
     right: 16px;
     bottom: 16px;
     z-index: 60;
     display: none;
     gap: 10px;
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(14px);
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 10px;
     box-shadow: 0 14px 34px rgba(11, 19, 36, .14)
 }

 .mobile-cta .btn {
     flex: 1;
     padding: 13px 16px
 }

 @media (max-width:1100px) {

     .hero-grid,
     .panel-grid,
     .grid-4,
     .grid-3,
     .grid-2,
     .process,
     .trust-strip,
     .footer-card {
         grid-template-columns: 1fr 1fr
     }

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

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

     .section-head {
         flex-direction: column;
         align-items: start
     }

     .nav-links {
         display: none
     }

     h1 {
         max-width: none
     }
 }

 @media (max-width:760px) {
     .container {
         width: min(calc(100% - 28px), var(--container))
     }

     .section {
         padding: 70px 0
     }

     .section-tight {
         padding: 50px 0
     }

     .hero {
         padding: 38px 0 26px
     }

     .hero-grid,
     .dash-top,
     .mini-grid,
     .panel-grid,
     .grid-4,
     .grid-3,
     .grid-2,
     .trust-strip,
     .process,
     .footer-card {
         grid-template-columns: 1fr
     }

     .hero-card,
     .card,
     .feature-block,
     .callout,
     .footer-card {
         border-radius: 26px
     }

     .nav {
         height: 72px
     }

     .mobile-cta {
         display: flex
     }

     body {
         padding-bottom: 86px
     }

     .btns {
         width: 100%
     }

     .btn {
         width: 100%
     }

     .faq-q {
         font-size: 17px
     }
 }