:root {
          --navy: #0B1220;
          --navy-soft: #2A3350;
          --ink-muted: #5B6478;
          --white: #FFFFFF;
          --surface: #F7F7FB;
          --border: #E7E8F0;
          --purple-1: #6D28D9;
          --purple-2: #4F46E5;
          --purple-3: #A78BFA;
          --gradient: linear-gradient(135deg, var(--purple-1) 0%, var(--purple-2) 100%);
          --gradient-soft: linear-gradient(135deg, rgba(109, 40, 217, 0.10) 0%, rgba(79, 70, 229, 0.10) 100%);
          --shadow-sm: 0 2px 8px rgba(17, 17, 40, 0.06);
          --shadow-md: 0 8px 30px rgba(17, 17, 40, 0.08);
          --shadow-lg: 0 20px 60px rgba(17, 17, 40, 0.14);
          --radius-sm: 12px;
          --radius-md: 20px;
          --radius-lg: 28px;
          --font-display: 'Sora', sans-serif;
          --font-body: 'Inter', sans-serif;
          --container: 1180px;
          --nav-h: 76px;
      }
      
      *,
      *::before,
      *::after {
          box-sizing: border-box;
      }
      
      html {
          scroll-behavior: smooth;
      }
      
      body {
          margin: 0;
          font-family: var(--font-body);
          color: var(--navy);
          background: var(--white);
          -webkit-font-smoothing: antialiased;
          line-height: 1.6;
      }
      
      img {
          max-width: 100%;
          display: block;
      }
      
      a {
          color: inherit;
          text-decoration: none;
      }
      
      ul {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      
      button {
          font-family: inherit;
          cursor: pointer;
      }
      
      h1,
      h2,
      h3,
      h4 {
          font-family: var(--font-display);
          color: var(--navy);
          margin: 0 0 .5em 0;
          letter-spacing: -0.02em;
          line-height: 1.15;
      }
      
      p {
          margin: 0 0 1em 0;
          color: var(--ink-muted);
      }
      
      section {
          position: relative;
      }
      
      .container {
          max-width: var(--container);
          margin: 0 auto;
          padding: 0 24px;
      }
      
      .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--purple-2);
          background: var(--gradient-soft);
          padding: 6px 14px;
          border-radius: 999px;
          margin-bottom: 18px;
      }
      
      .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
      }
      
      a:focus-visible,
      button:focus-visible,
      [tabindex]:focus-visible {
          outline: 2.5px solid var(--purple-2);
          outline-offset: 3px;
          border-radius: 6px;
      }
      /* ---------- Buttons ---------- */
      
      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 14px 26px;
          border-radius: 12px;
          font-weight: 600;
          font-size: 15px;
          border: none;
          cursor: pointer;
          transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
          white-space: nowrap;
      }
      
      .btn-primary {
          background: var(--gradient);
          color: #fff;
          box-shadow: 0 10px 24px rgba(79, 70, 229, 0.30);
          background-size: 160% 160%;
          background-position: 0% 50%;
      }
      
      .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 16px 34px rgba(79, 70, 229, 0.40);
          background-position: 100% 50%;
      }
      
      .btn-primary:active {
          transform: translateY(0px) scale(.98);
      }
      
      .btn-secondary {
          background: #fff;
          color: var(--navy);
          border: 1.5px solid var(--border);
      }
      
      .btn-secondary:hover {
          border-color: var(--purple-2);
          color: var(--purple-2);
          transform: translateY(-2px);
          box-shadow: var(--shadow-sm);
      }
      
      .btn-ghost-light {
          background: rgba(255, 255, 255, 0.12);
          color: #fff;
          border: 1.5px solid rgba(255, 255, 255, 0.4);
      }
      
      .btn-ghost-light:hover {
          background: rgba(255, 255, 255, 0.22);
          transform: translateY(-2px);
      }
      /* ---------- Navbar ---------- */
      
      .navbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--nav-h);
          z-index: 1000;
          background: rgba(255, 255, 255, 0.72);
          backdrop-filter: blur(14px) saturate(160%);
          -webkit-backdrop-filter: blur(14px) saturate(160%);
          border-bottom: 1px solid transparent;
          transition: border-color .3s ease, box-shadow .3s ease;
      }
      
      .navbar.scrolled {
          border-bottom-color: var(--border);
          box-shadow: 0 2px 20px rgba(17, 17, 40, 0.04);
      }
      
      .nav-inner {
          max-width: var(--container);
          margin: 0 auto;
          padding: 0 24px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      
      .logo {
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 20px;
          color: var(--navy);
      }
      
      .logo .mark {
          width: 30px;
          height: 30px;
          flex-shrink: 0;
      }
      
      .nav-links {
          display: flex;
          align-items: center;
          gap: 36px;
      }
      
      .nav-links a {
          font-size: 15px;
          font-weight: 500;
          color: var(--navy-soft);
          transition: color .2s ease;
          position: relative;
      }
      
      .nav-links a::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -6px;
          width: 0;
          height: 2px;
          background: var(--gradient);
          transition: width .25s ease;
          border-radius: 2px;
      }
      
      .nav-links a:hover {
          color: var(--navy);
      }
      
      .nav-links a:hover::after {
          width: 100%;
      }
      
      .nav-actions {
          display: flex;
          align-items: center;
          gap: 14px;
      }
      
      .nav-actions .btn {
          padding: 11px 20px;
          font-size: 14px;
      }
      
      .nav-toggle {
          display: none;
          background: none;
          border: none;
          width: 40px;
          height: 40px;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
      }
      
      .nav-toggle span {
          display: block;
          width: 20px;
          height: 2px;
          background: var(--navy);
          position: relative;
          transition: background .2s ease;
      }
      
      .nav-toggle span::before,
      .nav-toggle span::after {
          content: '';
          position: absolute;
          left: 0;
          width: 20px;
          height: 2px;
          background: var(--navy);
          transition: transform .25s ease, top .25s ease;
      }
      
      .nav-toggle span::before {
          top: -6px;
      }
      
      .nav-toggle span::after {
          top: 6px;
      }
      
      .nav-toggle.active span {
          background: transparent;
      }
      
      .nav-toggle.active span::before {
          top: 0;
          transform: rotate(45deg);
      }
      
      .nav-toggle.active span::after {
          top: 0;
          transform: rotate(-45deg);
      }
      /* ---------- Hero ---------- */
      
      .hero {
          padding: calc(var(--nav-h) + 92px) 0 60px;
          background: radial-gradient(60% 50% at 85% 0%, rgba(109, 40, 217, 0.10) 0%, rgba(109, 40, 217, 0) 70%), radial-gradient(50% 40% at 10% 10%, rgba(79, 70, 229, 0.08) 0%, rgba(79, 70, 229, 0) 70%), var(--white);
          overflow: hidden;
      }
      
      .hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 0.95fr;
          gap: 64px;
          align-items: center;
      }
      
      .hero h1 {
          font-size: clamp(38px, 4.6vw, 60px);
          font-weight: 800;
          margin-bottom: 22px;
      }
      
      .hero h1 .accent {
          background: var(--gradient);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }
      
      .hero p.lead {
          font-size: 18px;
          max-width: 540px;
          margin-bottom: 34px;
          color: var(--ink-muted);
      }
      
      .hero-cta {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
          margin-bottom: 36px;
      }
      
      .hero-trust {
          display: flex;
          align-items: center;
          gap: 14px;
          font-size: 13.5px;
          color: var(--ink-muted);
      }
      
      .hero-trust .avatars {
          display: flex;
      }
      
      .hero-trust .avatars span {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 2px solid #fff;
          margin-left: -8px;
          background: var(--gradient);
          display: inline-block;
          box-shadow: var(--shadow-sm);
      }
      
      .hero-trust .avatars span:first-child {
          margin-left: 0;
      }
      /* Hero visual / glass card */
      
      .hero-visual {
          position: relative;
      }
      
      .glass-card {
          position: relative;
          background: rgba(255, 255, 255, 0.55);
          border: 1px solid rgba(255, 255, 255, 0.7);
          border-radius: var(--radius-lg);
          box-shadow: var(--shadow-lg);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          padding: 26px;
          animation: floatCard 7s ease-in-out infinite;
      }
      
      @keyframes floatCard {
          0%,
          100% {
              transform: translateY(0px);
          }
          50% {
              transform: translateY(-10px);
          }
      }
      
      .glass-card::before {
          content: '';
          position: absolute;
          inset: -1px;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(167, 139, 250, 0.4));
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
      }
      
      .dash-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 18px;
      }
      
      .dash-head .dots {
          display: flex;
          gap: 6px;
      }
      
      .dash-head .dots span {
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: #D7D9E4;
      }
      
      .dash-title {
          font-size: 13px;
          font-weight: 600;
          color: var(--navy-soft);
      }
      
      .dash-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
          margin-bottom: 14px;
      }
      
      .stat-tile {
          background: rgba(255, 255, 255, 0.85);
          border: 1px solid var(--border);
          border-radius: var(--radius-sm);
          padding: 16px;
      }
      
      .stat-tile .label {
          font-size: 12px;
          color: var(--ink-muted);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .04em;
      }
      
      .stat-tile .value {
          font-family: var(--font-display);
          font-size: 26px;
          font-weight: 700;
          color: var(--navy);
          margin-top: 4px;
      }
      
      .stat-tile .value.grad {
          background: var(--gradient);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }
      
      .chart-tile {
          background: rgba(255, 255, 255, 0.85);
          border: 1px solid var(--border);
          border-radius: var(--radius-sm);
          padding: 18px;
          margin-bottom: 14px;
      }
      
      .chart-tile .label {
          font-size: 12px;
          color: var(--ink-muted);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .04em;
          margin-bottom: 10px;
          display: block;
      }
      
      .float-badge {
          position: absolute;
          background: #fff;
          border: 1px solid var(--border);
          border-radius: 14px;
          box-shadow: var(--shadow-md);
          padding: 10px 14px;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 12.5px;
          font-weight: 600;
          color: var(--navy);
      }
      
      .float-badge .ico {
          width: 26px;
          height: 26px;
          border-radius: 8px;
          background: var(--gradient-soft);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
      }
      
      .badge-1 {
          top: -22px;
          right: -18px;
          animation: floatCard 6s ease-in-out infinite;
          animation-delay: .3s;
      }
      
      .badge-2 {
          bottom: -18px;
          left: -22px;
          animation: floatCard 8s ease-in-out infinite;
          animation-delay: .6s;
      }
      /* ---------- Section headers ---------- */
      
      .section-head {
          max-width: 640px;
          margin: 0 auto 56px;
          text-align: center;
      }
      
      .section-head h2 {
          font-size: clamp(30px, 3.4vw, 42px);
      }
      
      .section-head p {
          font-size: 17px;
      }
      
      .section-pad {
          padding: 80px 0;
      }
      
      .bg-surface {
          background: var(--surface);
      }
      /* ---------- Features ---------- */
      
      .features-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
      }
      
      .feature-card {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--radius-md);
          padding: 30px 26px;
          transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
      }
      
      .feature-card:hover {
          transform: translateY(-6px);
          box-shadow: var(--shadow-md);
          border-color: rgba(109, 40, 217, 0.25);
      }
      
      .feature-icon {
          width: 52px;
          height: 52px;
          border-radius: 14px;
          background: var(--gradient);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          box-shadow: 0 8px 18px rgba(79, 70, 229, 0.28);
      }
      
      .feature-card h3 {
          font-size: 19px;
          margin-bottom: 8px;
      }
      
      .feature-card p {
          font-size: 14.5px;
          margin: 0;
      }
      /* ---------- How it works ---------- */
      
      .steps {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 28px;
          position: relative;
      }
      
      .step-card {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--radius-md);
          padding: 34px 28px;
          position: relative;
      }
      
      .step-num {
          font-family: var(--font-display);
          font-size: 42px;
          font-weight: 800;
          background: var(--gradient);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          margin-bottom: 14px;
          display: block;
      }
      
      .step-card h3 {
          font-size: 19px;
          margin-bottom: 8px;
      }
      
      .step-card p {
          font-size: 14.5px;
          margin: 0;
      }
      
      .step-connector {
          display: none;
      }
      /* ---------- Why us ---------- */
      
      .why-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 20px;
      }
      
      .why-card {
          text-align: center;
          padding: 28px 16px;
          border-radius: var(--radius-md);
          background: #fff;
          border: 1px solid var(--border);
          transition: box-shadow .3s ease, transform .3s ease;
      }
      
      .why-card:hover {
          box-shadow: var(--shadow-md);
          transform: translateY(-4px);
      }
      
      .why-icon {
          width: 46px;
          height: 46px;
          margin: 0 auto 14px;
          border-radius: 12px;
          background: var(--gradient-soft);
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      .why-card h3 {
          font-size: 15.5px;
          margin-bottom: 6px;
      }
      
      .why-card p {
          font-size: 13px;
          margin: 0;
      }
      /* ---------- Use cases ---------- */
      
      .usecase-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 20px;
      }
      
      .usecase-card {
          background: var(--navy);
          border-radius: var(--radius-md);
          padding: 26px 22px;
          color: #fff;
          position: relative;
          overflow: hidden;
          min-height: 190px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          transition: transform .3s ease;
      }
      
      .usecase-card::before {
          content: '';
          position: absolute;
          top: -40%;
          right: -40%;
          width: 140%;
          height: 140%;
          background: radial-gradient(circle, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0) 60%);
          opacity: .6;
          transition: opacity .3s ease;
      }
      
      .usecase-card:hover {
          transform: translateY(-6px);
      }
      
      .usecase-card:hover::before {
          opacity: .9;
      }
      
      .usecase-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.18);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 40px;
          position: relative;
          z-index: 1;
      }
      
      .usecase-card h3 {
          color: #fff;
          font-size: 16.5px;
          margin-bottom: 6px;
          position: relative;
          z-index: 1;
      }
      
      .usecase-card p {
          color: rgba(255, 255, 255, 0.65);
          font-size: 13px;
          margin: 0;
          position: relative;
          z-index: 1;
      }
      /* ---------- CTA ---------- */
      
      .cta-section {
          padding: 100px 0;
          background: var(--gradient);
          position: relative;
          overflow: hidden;
      }
      
      .cta-section::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(60% 80% at 20% 20%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%);
      }
      
      .cta-inner {
          text-align: center;
          position: relative;
          z-index: 1;
      }
      
      .cta-inner h2 {
          color: #fff;
          font-size: clamp(30px, 4vw, 46px);
          max-width: 720px;
          margin: 0 auto 30px;
      }
      
      .cta-actions {
          display: flex;
          gap: 16px;
          justify-content: center;
          flex-wrap: wrap;
      }
      /* ---------- Footer ---------- */
      
      footer {
          background: var(--navy);
          color: rgba(255, 255, 255, 0.7);
          padding: 70px 0 30px;
      }
      
      .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr;
          gap: 40px;
          padding-bottom: 46px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      .footer-brand .logo {
          color: #fff;
          margin-bottom: 14px;
      }
      
      .footer-brand p {
          color: rgba(255, 255, 255, 0.55);
          font-size: 14px;
          max-width: 320px;
      }
      
      footer h4 {
          color: #fff;
          font-size: 14px;
          margin-bottom: 18px;
          letter-spacing: .03em;
          text-transform: uppercase;
      }
      
      footer ul li {
          margin-bottom: 12px;
      }
      
      footer ul li a {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14.5px;
          transition: color .2s ease;
      }
      
      footer ul li a:hover {
          color: #fff;
      }
      
      .footer-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 26px;
          font-size: 13px;
          color: rgba(255, 255, 255, 0.45);
          flex-wrap: wrap;
          gap: 12px;
      }
      
      .footer-socials {
          display: flex;
          gap: 12px;
      }
      
      .footer-socials a {
          width: 34px;
          height: 34px;
          border-radius: 9px;
          background: rgba(255, 255, 255, 0.08);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .2s ease;
      }
      
      .footer-socials a:hover {
          background: rgba(255, 255, 255, 0.18);
      }
      /* ---------- Fade in animation ---------- */
      
      .fade-in {
          opacity: 0;
          transform: translateY(28px);
          transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
      }
      
      .fade-in.visible {
          opacity: 1;
          transform: translateY(0);
      }
      
      .stagger .fade-in:nth-child(1) {
          transition-delay: 0s;
      }
      
      .stagger .fade-in:nth-child(2) {
          transition-delay: .08s;
      }
      
      .stagger .fade-in:nth-child(3) {
          transition-delay: .16s;
      }
      
      .stagger .fade-in:nth-child(4) {
          transition-delay: .24s;
      }
      
      .stagger .fade-in:nth-child(5) {
          transition-delay: .32s;
      }
      
      .stagger .fade-in:nth-child(6) {
          transition-delay: .4s;
      }
      
      @media (prefers-reduced-motion: reduce) {
          * {
              animation: none !important;
              transition: none !important;
          }
          html {
              scroll-behavior: auto;
          }
      }
      /* ---------- Responsive ---------- */
      
      @media (max-width: 1024px) {
          .why-grid {
              grid-template-columns: repeat(3, 1fr);
          }
          .usecase-grid {
              grid-template-columns: repeat(3, 1fr);
          }
          .features-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }
      
      @media (max-width: 900px) {
          .hero-grid {
              grid-template-columns: 1fr;
          }
          .hero-visual {
              order: -1;
              max-width: 460px;
              margin: 0 auto;
          }
          .hero p.lead {
              max-width: 100%;
          }
      }
      
      @media (max-width: 820px) {
          .nav-links {
              position: fixed;
              top: var(--nav-h);
              left: 0;
              right: 0;
              background: rgba(255, 255, 255, 0.98);
              backdrop-filter: blur(14px);
              flex-direction: column;
              align-items: flex-start;
              gap: 4px;
              padding: 18px 24px 26px;
              border-bottom: 1px solid var(--border);
              transform: translateY(-12px);
              opacity: 0;
              pointer-events: none;
              transition: opacity .25s ease, transform .25s ease;
          }
          .nav-links.open {
              opacity: 1;
              transform: translateY(0);
              pointer-events: auto;
          }
          .nav-links a {
              padding: 10px 0;
              width: 100%;
          }
          .nav-actions .btn-secondary {
              display: none;
          }
          .nav-toggle {
              display: flex;
          }
          .steps {
              grid-template-columns: 1fr;
          }
          .why-grid {
              grid-template-columns: repeat(2, 1fr);
          }
          .usecase-grid {
              grid-template-columns: repeat(2, 1fr);
          }
          .footer-grid {
              grid-template-columns: 1fr;
              gap: 30px;
          }
      }
      
      @media (max-width: 560px) {
          .features-grid {
              grid-template-columns: 1fr;
          }
          .why-grid {
              grid-template-columns: 1fr 1fr;
          }
          .usecase-grid {
              grid-template-columns: 1fr 1fr;
          }
          .hero-cta {
              flex-direction: column;
          }
          .hero-cta .btn {
              width: 100%;
          }
          .cta-actions {
              flex-direction: column;
              width: 100%;
          }
          .cta-actions .btn {
              width: 100%;
          }
          .section-pad {
              padding: 76px 0;
          }
      }
      /* ---------- Inline-style replacements (extracted for CSS purity) ---------- */
      
      .logo-accent {
          color: var(--purple-2);
          margin-left: -7px;
      }
      
      .value-suffix {
          font-size: 14px;
          color: var(--ink-muted);
      }
      
      .dash-grid--single {
          grid-template-columns: 1fr;
      }
      
      .stat-tile--split {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      
      .value--reply {
          font-size: 20px;
      }
      
      .btn-cta-white {
          background: #fff;
          color: var(--purple-2);
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
      }
      
      @media (max-width: 400px) {
          header .nav-inner .nav-actions {
              gap: 10px;
          }
          header .nav-inner .nav-actions .btn-primary {
              font-size: 12px;
              padding: 11px 15px;
          }
      }