:root {
     --bg: #fbfcfe;
     --bg-soft: #f3f7fc;
     --surface: #ffffff;
     --surface-2: #f7faff;
     --line: #dfe7f1;
     --text: #0c1526;
     --muted: #5a687d;
     --primary: #2f6df6;
     --primary-dark: #1f58d6;
     --primary-soft: #e5efff;
     --accent: #0ea5a4;
     --accent-soft: #def7f6;
     --shadow: 0 24px 56px rgba(12, 21, 38, .08);
     --shadow-soft: 0 14px 28px rgba(12, 21, 38, .05);
     --container: 1180px;
 }

 * {
     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: radial-gradient(circle at top left, rgba(47, 109, 246, .08), transparent 26%), radial-gradient(circle at top right, rgba(14, 165, 164, .08), transparent 24%), var(--bg);
     line-height: 1.65
 }

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

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

 .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, .86);
     border: 1px solid rgba(223, 231, 241, .9);
     backdrop-filter: blur(10px);
     box-shadow: 0 8px 24px rgba(12, 21, 38, .04);
     color: #1d4fb8;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .01em
 }

 .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.06;
     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;
     border: 1px solid transparent;
     font-size: 15px;
     font-weight: 800;
     transition: .22s ease
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--primary), #4c7fff);
     color: #fff;
     box-shadow: 0 16px 36px rgba(47, 109, 246, .26)
 }

 .btn-primary:hover {
     background: linear-gradient(135deg, var(--primary-dark), #356ef5);
     transform: translateY(-1px)
 }

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

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

 .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(251, 252, 254, .82);
     backdrop-filter: blur(18px);
     border-bottom: 1px solid rgba(223, 231, 241, .75)
 }

 .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: #48566b
 }

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

 .hero {
     padding: 64px 0 36px
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1.04fr .96fr;
     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: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
     color: var(--primary);
     font-size: 14px;
     font-weight: 900
 }

 .hero-card {
     position: relative;
     padding: 26px;
     border-radius: 38px;
     background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(247, 250, 255, .96));
     border: 1px solid rgba(223, 231, 241, .92);
     box-shadow: var(--shadow);
     overflow: hidden;
     backdrop-filter: blur(14px)
 }

 .hero-card::before {
     content: "";
     position: absolute;
     left: -38px;
     top: -38px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(47, 109, 246, .16), transparent 70%)
 }

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

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

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

 .panel,
 .card {
     background: rgba(255, 255, 255, .9);
     border: 1px solid rgba(223, 231, 241, .92);
     border-radius: 28px;
     padding: 26px;
     box-shadow: var(--shadow-soft);
     backdrop-filter: blur(8px)
 }

 .panel.soft {
     background: linear-gradient(180deg, #fcfdff, #f5f9ff)
 }

 .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), var(--accent-soft));
     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, .94), rgba(247, 250, 255, .96));
     border: 1px solid rgba(223, 231, 241, .92);
     border-radius: 24px;
     padding: 18px;
     box-shadow: var(--shadow-soft)
 }

 .mini-label {
     font-size: 13px;
     color: #56709d;
     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, #fff, #f8fbff);
     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(47, 109, 246, .04) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, #f8fbff 0%, #fff 100%);
     border-top: 1px solid #edf2f7;
     border-bottom: 1px solid #edf2f7
 }

 .feature-block {
     background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 251, 255, .98));
     border: 1px solid rgba(223, 231, 241, .92);
     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, .9);
     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), #4c7fff);
     border-color: transparent;
     color: #fff;
     box-shadow: 0 12px 28px rgba(47, 109, 246, .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, #eef4ff 0%, #eefcfa 100%);
     border: 1px solid #dbe7fb;
     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
 }

 .step {
     background: linear-gradient(180deg, #fff, #f8fbff);
     border: 1px solid var(--line);
     border-radius: 28px;
     padding: 24px;
     box-shadow: var(--shadow-soft)
 }

 .step-no {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
     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
 }

 .callout {
     background: linear-gradient(135deg, #0f1730 0%, #2254d6 52%, #0ea5a4 130%);
     color: #fff;
     border-radius: 38px;
     padding: 42px;
     box-shadow: 0 26px 70px rgba(34, 84, 214, .22);
     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, #fff, #f8fbff);
     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), var(--accent-soft));
     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(47, 109, 246, .07), rgba(14, 165, 164, .08));
     border: 1px solid #d8e2f0;
     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(12, 21, 38, .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
     }
 }