html, body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
  }
  body > :first-child {
    width: 100%;
  }
  .social-sidebar {
    position: fixed;
    top: 50%;
    left: clamp(12px, 2vw, 32px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
    color: #6B7280;
  }
  .social-sidebar a {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .social-sidebar svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  @media (max-width: 640px) {
    .social-sidebar {
      display: none;
    }
  }
  :root { --brand-primary: #0088cc; --brand-secondary: rgb(152, 134, 254); --brand-tertiary: linear-gradient(146deg, transparent, rgba(236, 230, 119, 0.64) 64%, transparent); --accent-lime: rgb(201, 255, 133); --accent-cyan: rgb(124, 225, 255); --accent-yellow: rgb(255, 216, 111); --neutral-background: rgb(255, 255, 255); --neutral-surface: rgb(248, 244, 241); --neutral-border: rgba(18, 10, 11, 0.2); --text-primary: rgb(18, 10, 11); --text-secondary: rgb(69, 65, 64); --text-on-primary: rgb(255, 255, 255); --state-focus-link: #0099ff; --font-family-primary: 'Satoshi', sans-serif; --font-family-secondary: 'Inter', sans-serif; --font-family-handwriting: 'Kalam', sans-serif; --spacing-xs: 4px; --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 40px; --spacing-xxxl: 64px; --container-primary-padding: 30px; --container-max-width: 1200px; --corner-radius-sm: 16px; --corner-radius-md: 24px; --corner-radius-lg: 32px; --corner-radius-full: 100px; --shadow-soft: 0px 8px 13px rgba(0,0,0,0.1); } body, .page-wrapper { font-family: var(--font-family-primary); background-color: var(--neutral-background); color: var(--text-primary); } h1, h2, h3, h4, p { margin: 0; } .font-primary { font-family: var(--font-family-primary); } .font-secondary { font-family: var(--font-family-secondary); } .font-handwriting { font-family: var(--font-family-handwriting); } .h1-hero { font-family: var(--font-family-primary); font-size: 72px; font-weight: 700; line-height: 1.15; letter-spacing: -2px; } .h2-section { font-family: var(--font-family-primary); font-size: 56px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; } .h3-component { font-family: var(--font-family-primary); font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; } .h4-small { font-family: var(--font-family-primary); font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -0.5px; } .large-body { font-family: var(--font-family-primary); font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; } .body-text { font-family: var(--font-family-primary); font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0px; } .button-text { font-family: var(--font-family-primary); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0px; } .nav-link-text { font-family: var(--font-family-primary); font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: 0px; text-decoration: none; color: var(--text-primary); } .tag-text { font-family: var(--font-family-primary); font-size: 14px; font-weight: 500; line-height: 1.7; letter-spacing: 0px; } .handwriting-text { font-family: var(--font-family-handwriting); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: 0px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-on-primary { color: var(--text-on-primary); } .text-secondary { color: var(--text-secondary); } .max-w-3xl { max-width: 48rem; } .mt-l { margin-top: var(--spacing-l); } .mt-s { margin-top: var(--spacing-s); } .flex-row { display: flex; flex-direction: row; align-items: center; } .gap-m { gap: var(--spacing-m); } .container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--container-primary-padding); padding-right: var(--container-primary-padding); } .section-padding { padding-top: 120px; padding-bottom: 120px; } .section-header { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 60px; } .grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .reveal-on-scroll { opacity: 0; transform: translateY(45px); transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 30px; border-radius: var(--corner-radius-full); text-decoration: none; border: none; cursor: pointer; transition: transform 200ms ease; } .btn:hover { transform: scale(0.98); } .btn:active { transform: scale(0.96); } .btn-primary { background-color: var(--brand-primary); color: var(--text-on-primary); } 
  .btn-secondary { background-color: var(--accent-yellow); color: rgb(18, 10, 11); } span.btn-tertiary {background-color:transparent;} .btn-tertiary { background-color: var(--neutral-background); color: var(--brand-primary); } .tag { display: inline-flex; padding: 2px 16px; border-radius: var(--corner-radius-full); } .tag-yellow { background-color: var(--accent-yellow); color: rgb(18, 10, 11); } .card { background-color: var(--neutral-surface); border-radius: var(--corner-radius-lg); padding: var(--spacing-xxl); display: flex; flex-direction: column; } .icon-badge { width: 60px; height: 60px; border-radius: var(--corner-radius-sm); display: flex; justify-content: center; align-items: center; } .icon-badge img { width: 32px; height: 32px; } .icon-badge-yellow { background-color: var(--accent-yellow); } .icon-badge-cyan { background-color: var(--brand-primary); } .icon-badge-purple { background-color: var(--brand-secondary); } .icon-badge-lime { background-color: var(--accent-lime); } .card-testimonial { padding: var(--spacing-xl); border: 1px solid var(--neutral-border); border-radius: var(--corner-radius-md); } .header-sticky { position: fixed; top: 16px; left: 0; right: 0; z-index: 1000; width: 100%; display: flex; justify-content: center; padding: 0 20px; box-sizing: border-box; } .nav-container { max-width: var(--container-max-width); width: 100%;} .nav-bar { display: flex; justify-content: space-between; align-items: center; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--corner-radius-full); padding: 12px 16px; box-shadow: var(--shadow-soft); } .nav-brand { display: flex; align-items: center; gap: 4px; } .nav-links { display: flex; gap: 48px; } .nav-cta { display: block; } .hamburger-menu { display: none; background: none; border: none; cursor: pointer; } .mobile-nav { display: none; flex-direction: column; gap: 16px; background-color: white; border-radius: var(--corner-radius-sm); box-shadow: var(--shadow-soft); padding: 1rem; margin-top: 1rem; position: absolute; top: 100%; right: 20px; width: 200px; } .mobile-nav.show { display: flex; } .hero-section { background-color: var(--neutral-surface); padding-top: 188px; padding-bottom: 0; position: relative; overflow: hidden; } .hero-gradient-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 82%; height: 950px; background: linear-gradient(146deg, transparent, rgba(236, 230, 119, 0.64) 64%, transparent); filter: blur(100px); border-radius: 50%; opacity: 0.34; z-index: 0; } .hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-l); } .hero-dashboard-img { width: 85%; margin-top: 80px; box-shadow: 0px 30px 60px -20px rgba(18,10,11,0.2); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid rgba(18,10,11,0.1); } .footer { background-color: var(--brand-primary); padding-top: 64px; padding-bottom: 24px; color: var(--text-on-primary); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 48px; border-bottom: 1px solid rgba(248, 244, 241, 0.1); padding-bottom: 90px; } .footer-column { grid-column: span 1; } .footer-heading { font-weight: 500; } .footer-links { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; } .footer-link { opacity: 0.6; transition: opacity 200ms ease; } .footer-link a { color: var(--text-on-primary); } .footer-link:hover { opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; } .btn-go-to-top { position: fixed; bottom: -60px; right: 20px; background-color: var(--brand-primary); color: white; width: 48px; height: 48px; border-radius: var(--corner-radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: bottom 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 1000; } .btn-go-to-top.show { bottom: 20px; } .faq-item { border-bottom: 1px solid var(--neutral-border); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; background: none; border: none; text-align: left; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-answer p { padding-bottom: 24px; } .faq-item.active .faq-answer { max-height: 300px; } .faq-icon { transition: transform 0.3s ease; flex-shrink: 0; margin-left: 16px; } .faq-item.active .faq-icon { transform: rotate(45deg); } @media (max-width: 1199px) { .grid-3-col { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .h2-section { font-size: 40px; } }   .h1-page { font-family: var(--font-family-primary); font-size: 56px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; }
  @media (max-width: 767px) { .section-padding { padding-top: 80px; padding-bottom: 80px; } .nav-links, .nav-cta { display: none; } .hamburger-menu { display: block; } .hero-section { padding-top: 130px; } .h1-hero { font-size: 36px; } .h1-page { font-size: 32px; } .grid-3-col { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; padding-bottom: 48px; } .footer-bottom { flex-direction: column; gap: 24px; } } 
  .logo {width: 27px; height:27px;}
  ::placeholder {
    text-align: center; 
  }
  @media (max-width: 768px) {
    .hero-dashboard-img {
      width: 100%;
    }
  }

/* Utility classes extracted from inline styles */
.u-avatar-56 {
  width: 56px;
  height: 56px;
  border-radius: 99px;
}

.u-bg-accent-yellow-card {
  background-color: var(--accent-yellow);
  border-radius: var(--corner-radius-md);
  padding: 24px;
}

.u-bg-brand-primary {
  background-color: var(--brand-primary);
}

.u-bg-brand-secondary {
  background-color: var(--brand-secondary);
}

.u-bg-neutral-surface {
  background-color: var(--neutral-surface);
}

.u-btn-accent-lg {
  background-color: #9886fe;
  padding: 12px 24px;
  border-radius: var(--corner-radius-full);
}

.u-btn-accent-sm {
  background-color: #9886fe;
  padding: 6px 18px;
}

.u-card-shadow {
  margin: 0;
  border-radius: var(--corner-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.u-card-transparent {
  padding: 32px;
  background-color: transparent;
  border-radius: 16px;
}

.u-filter-invert {
  filter: brightness(0) invert(1);
}

.u-flex-col-gap-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.u-flex-col-gap-16-full {
  display: flex;
  gap: 16px;
  width: 100%;
  flex-direction: column;
}

.u-flex-col-gap-32-between {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: space-between;
}

.u-flex-col-gap-32-transparent {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
  background-color: transparent;
}

.u-flex-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.u-flex-form {
  display: flex;
  width: 100%;
  max-width: 480px;
  background-color: white;
  border-radius: var(--corner-radius-full);
  padding: 8px;
  gap: 8px;
}

.u-flex-gap-4 {
  display: flex;
  gap: 4px;
}

.u-flex-grow {
  flex-grow: 1;
}

.u-flex-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 18px;
  border-radius: 50%;
}

.u-flex-pill {
  display: flex;
  width: 100%;
  background-color: white;
  border-radius: 99px;
  padding: 6px;
  margin-top: 16px;
}

.u-flex-wrap-gap-12-center {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.u-font-bold {
  font-weight: 700;
}

.u-gap-16 {
  gap: 16px;
}

.u-gap-16-align-center {
  gap: 16px;
  align-items: center;
}

.u-gap-20 {
  gap: 20px;
}

.u-gradient-card-cyan {
  background: linear-gradient(135deg, rgba(152, 134, 254, 0.16), rgba(0, 136, 204, 0.16));
  border-radius: var(--corner-radius-lg);
  padding: 32px;
  display: grid;
  gap: 12px;
}

.u-gradient-card-gold {
  background: linear-gradient(146deg, rgba(236, 230, 119, 0.18), rgba(152, 134, 254, 0.18));
  border-radius: var(--corner-radius-lg);
  padding: 32px;
}

.u-gradient-card-gold-grid {
  background: linear-gradient(146deg, rgba(236, 230, 119, 0.18), rgba(152, 134, 254, 0.18));
  border-radius: var(--corner-radius-lg);
  padding: 32px;
  display: grid;
  gap: 16px;
}

.u-grid-gap-12-pl20 {
  display: grid;
  gap: 12px;
  padding-left: 20px;
}

.u-grid-gap-12-pl22 {
  display: grid;
  gap: 12px;
  padding-left: 22px;
}

.u-grid-gap-18-pl22 {
  display: grid;
  gap: 18px;
  padding-left: 22px;
}

.u-grid-gap-24 {
  display: grid;
  gap: 24px;
}

.u-grid-gap-32 {
  display: grid;
  gap: 32px;
}

.u-grid-gap-4 {
  display: grid;
  gap: 4px;
}

.u-grid-gap-8-pl18-disc {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  list-style: disc;
}

.u-hero-heading {
  font-size: 48px;
  font-weight: 700;
  color: var(--brand-primary);
}

.u-icon-20 {
  width: 20px;
  height: 20px;
}

.u-icon-32 {
  width:32px;
  height:32px;
}

.u-input-center-pill {
  text-align:center;
  width: 100%;
  border: 1px solid var(--neutral-border);
  background-color: white;
  padding: 18px 24px;
  border-radius: var(--corner-radius-full);
  outline: none;
}

.u-input-pill-field {
  font-family: var(--font-family-primary);
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: 6px 14px;
  outline: none;
  color: var(--brand-primary);
}

.u-justify-between-align-center {
  justify-content: space-between;
  align-items: center;
}

.u-justify-center {
  justify-content: center;
}

.u-link-brand {
  color: var(--brand-primary);
  text-decoration: none;
}

.u-link-inline-brand {
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.u-m-0 {
  margin: 0;
}

.u-mt-12 {
  margin-top: 12px;
}

.u-mt-16 {
  margin-top: 16px;
}

.u-mt-8 {
  margin-top: 8px;
}

.u-mt12-grid-gap10-pl20-disc {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
}

.u-mt12-grid-gap8-pl20-disc {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  padding-left: 20px;
  list-style: disc;
}

.u-mt12-hidden {
  margin-top: 12px;
  display: none;
}

.u-mt8-text14-hidden {
  margin-top: 8px;
  font-size: 14px;
  display: none;
}

.u-opacity-50 {
  opacity: 0.5;
}

.u-opacity-70 {
  opacity: 0.7;
}

.u-opacity-75-mt16 {
  opacity: 0.75;
  margin-top: 16px;
}

.u-pt-0 {
  padding-top: 0;
}

.u-pt-60 {
  padding-top: 60px;
}

.u-py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.u-surface-card-grid {
  background-color: var(--neutral-surface);
  border-radius: var(--corner-radius-md);
  padding: 28px;
  display: grid;
  gap: 12px;
}

.u-surface-card-lg {
  background-color: var(--neutral-surface);
  border-radius: var(--corner-radius-lg);
  padding: 32px;
}

.u-surface-card-lg-grid {
  background-color: var(--neutral-surface);
  border-radius: var(--corner-radius-lg);
  padding: 32px;
  display: grid;
  gap: 12px;
}

.u-surface-card-lg-grid-wide {
  background-color: var(--neutral-surface);
  border-radius: var(--corner-radius-lg);
  padding: 32px;
  display: grid;
  gap: 16px;
}

.u-surface-card-md {
  background-color: var(--neutral-surface);
  border-radius: var(--corner-radius-md);
  padding: 28px;
}

.u-text-brand-primary {
  color: var(--brand-primary);
}

.u-w-fit {
  width: fit-content;
}

.u-w-full-block {
  width: 100%;
  display: block;
}

.u-wfull-pad18 {
  width:100%;
  padding: 18px 24px;
}

.u-white-card-flex {
  background-color: white;
  border: 1px solid var(--neutral-border);
  border-radius: var(--corner-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.u-white-card-grid {
  background-color: white;
  border-radius: var(--corner-radius-md);
  border: 1px solid var(--neutral-border);
  padding: 28px;
  display: grid;
  gap: 12px;
}

.u-white-card-grid-center {
  background-color: white;
  border-radius: var(--corner-radius-md);
  border: 1px solid var(--neutral-border);
  padding: 28px;
  display: grid;
  gap: 8px;
  text-align: center;
}

.u-white-card-grid-compact {
  background-color: white;
  border: 1px solid var(--neutral-border);
  border-radius: var(--corner-radius-md);
  padding: 24px;
  display: grid;
  gap: 12px;
}

.u-white-card-grid-relaxed {
  background-color: white;
  border: 1px solid var(--neutral-border);
  border-radius: var(--corner-radius-md);
  padding: 28px;
  display: grid;
  gap: 12px;
}

.u-white-card-lg {
  background-color: white;
  border-radius: var(--corner-radius-lg);
  padding: 32px;
}

.u-width-full-rounded {
  width: 100%;
  border-radius: 16px;
}