@charset "UTF-8";
/* ==========================================================================
   Sasico – Analytics & SaaS one-page landing
   Static copy of https://sasico-analytics.vercel.app/onepage-landing
   Fonts come from billo.css (BPG Nino Mtavruli + Noto fallbacks).
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Preflight (reset) — Tailwind v4 base, as used by the original page
   -------------------------------------------------------------------------- */
*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
html,
:host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji"
  );
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family: var(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace
  );
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:-moz-focusring {
  outline: auto;
}
progress {
  vertical-align: baseline;
}
summary {
  display: list-item;
}
ol,
ul,
menu {
  list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}
::file-selector-button {
  margin-inline-end: 4px;
}
::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}
textarea {
  resize: vertical;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}
::-webkit-datetime-edit {
  display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}
::-webkit-calendar-picker-indicator {
  line-height: 1;
}
:-moz-ui-invalid {
  box-shadow: none;
}
button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Parity patches
   The reference page is rendered by Next.js: global reset first, then the
   theme stylesheets (in this order: next css, bootstrap, theme, theme-anim).
   The rules below reproduce the parts of Bootstrap 5 that the theme relies on
   for this single page, so no third-party framework is required.
   -------------------------------------------------------------------------- */

/* --- 3.1 Typography / body --- */
:root,
[data-theme] {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --background: #fff;
  --foreground: #171717;
  --border-color: #dee2e6;
}
html {
  font-family: var(
    --font-sans,
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji"
  );
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--body-color);
  background-color: var(--white-color);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
}
p {
  margin: 0 0 15px;
}
ul,
ol {
  margin-top: 0;
}
a {
  text-decoration: none;
  transition: all 0.4s;
}
button {
  cursor: pointer;
}

/* --- 3.2 Images / SVG --- */
img,
svg {
  vertical-align: middle;
}
img {
  border: none;
}
img:not([draggable]),
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

/* --- 3.3 Bootstrap grid & layout ---
   The theme bundles Bootstrap 5; this block keeps the Bootstrap rules the
   single landing page depends on (container, grid, nav-tabs, helpers). --- */
.carousel-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
  overflow: unset;
}
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.form-check-input,
.form-control,
.form-select {
  font-size: 1rem;
  line-height: 1.5;
}
input,
button,
select,
optgroup,
textarea {
  font-size: 1rem;
  line-height: 1.5;
}
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}
.col {
  flex: 1 0 0%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --- 3.5 Nav tabs (Bootstrap 5, only what .price-title .nav-tabs needs) --- */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--bs-nav-link-color, #0d6efd);
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * 1px);
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: isolate;
}

/* --- 3.6 Bootstrap 5 utilities used by the page --- */
.d-flex {
  display: flex !important;
}
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mb-5 {
  margin-bottom: 3rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 3rem !important;
}
.me-0 {
  margin-right: 0 !important;
}
.ms-0 {
  margin-left: 0 !important;
}
.p-0 {
  padding: 0 !important;
}
.text-center {
  text-align: center !important;
}
.text-start {
  text-align: left !important;
}
.text-end {
  text-align: right !important;
}
.w-100 {
  width: 100% !important;
}
.h-100 {
  height: 100% !important;
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.position-relative {
  position: relative !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}
@media (max-width: 991.98px) {
  .d-lg-flex {
    display: flex !important;
  }
}
@media (min-width: 992px) {
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Images inside components that Next.js sizes with automatic width/height
   Instead of writing inline "width"/"height" attributes, the reference page
   emits the resized sources together with a CSS reset (height: auto) and then
   scales the whole component with a percentage width. The rules below reduce
   the same layout on top of the pristine theme styles.
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
}
.header-logo img {
  width: 100%;
  height: auto;
}
.rating-box .clutch {
  width: 159px;
  height: auto;
}
.brand-img a img {
  width: auto;
  height: 25.25px;
}
.feature-img2 {
  min-width: 199px;
  height: 179px;
}
@media (min-width: 1200px) {
  .feature-img2 {
    min-width: 276px;
    height: 234px;
  }
}
@media (max-width: 576px) {
  .feature-img2 {
    height: unset;
  }
}
.feature-img2 img {
  object-fit: cover;
  border-radius: 14px;
  width: 100%;
  height: 100%;
}
@media (min-width: 1200px) {
  .feature-img2 img {
    border-radius: 20px;
  }
}
/* --- Intrinsic sizes of the downloaded assets ---------------------------------
   The reference page serves these through Next.js' image optimizer, which
   returns each bitmap at exactly the size the layout needs. The locally saved
   files are the same artwork at slightly different resolutions, so each one is
   pinned to the size the original renders it at.
   ----------------------------------------------------------------------------- */
.funfact-img img {
  width: 100%;
  height: auto;
}
.feature-img {
  height: auto;
}
.feature-img img {
  width: 100%;
  height: auto;
}
.feature-img4 {
  height: auto;
}
.feature-img4 img {
  width: 100%;
  height: auto;
}
.cta-img img {
  width: 100%;
  height: auto;
}
.footer-logo img {
  width: 178px;
  height: auto;
}
#scrollTopBtn {
  color: #000;
  line-height: 26px;
}

/* Brand row: the reference page renders the logos with a fixed height and an
   automatic width, and the Swiper carousel is configured by the page script. */
.brand-info.swiper {
  overflow: hidden;
  margin-bottom: -48px;
}
.brand-info .brand-img {
  margin: 0 !important;
}
.brand-img img {
  width: auto;
  height: 25px;
}
.brand-info .swiper-slide {
  width: auto !important;
  height: 27.25px;
  margin-right: 50px;
  display: flex;
  align-items: center;
}
.brand-info .brand-img {
  display: flex;
  align-items: center;
  height: 27.25px;
}
@media (max-width: 575.98px) {
  .brand-img img {
    height: 20px;
  }
  .brand-info .swiper-slide,
  .brand-info .brand-img {
    height: 22px;
  }
  .brand-info .swiper-slide {
    margin-right: 30px;
  }
}

/* --- 3.7 Form elements (Bootstrap 5 defaults kept by the pristine theme build)
   The theme stylesheet on the reference page was bundled together with
   Bootstrap 5.3, and that version re-introduced Bootstrap's form font-size
   ("1rem") after the theme had set 16px on <body>. Reproducing it keeps every
   text metric (header, buttons, cards, inputs) identical to the original.
   The rule itself lives in the grid block above. --- */

/* --- 3.7 Theme stylesheets ---
   app.css          (Sasico theme; loaded before this file)
   vendor/aos.css   (AOS animations as bundled by the theme)
   -------------------------------------------------------------------------- */