@font-face {
  font-family: "Manrope";
  src: url("/assets/font/Manrope.ttf");
}
:root {
  /* Color primitive / Brand Dark */
  --brand-dark-500: #536474;
  --brand-dark-600: #344556;
  --brand-dark-700: #21303F;
  --brand-dark-800: #16212D;
  --brand-dark-900: #0D141C;
  --brand-dark-950: #080D12;
  /* Color primitive / Brand Blue */
  --brand-blue-50: #EFF6FF;
  --brand-blue-100: #DBEAFE;
  --brand-blue-200: #BFDBFE;
  --brand-blue-300: #93C5FD;
  --brand-blue-400: #60A5FA;
  --brand-blue-500: #2F7CF6;
  --brand-blue-600: #155EEF;
  --brand-blue-700: #144BC8;
  --brand-blue-800: #163F9F;
  --brand-blue-900: #173778;
  --brand-blue-950: #10234F;
  /* Color primitive / Neutral */
  --neutral-0: #FFFFFF;
  --neutral-25: #FCFDFE;
  --neutral-50: #F7F9FC;
  --neutral-75: #F4F6FA;
  --neutral-100: #F0F3F7;
  --neutral-150: #E9EDF2;
  --neutral-200: #E2E7ED;
  --neutral-300: #CDD5DF;
  --neutral-400: #9AA8B6;
  --neutral-500: #697989;
  --neutral-600: #4A5A69;
  --neutral-700: #344250;
  --neutral-800: #202D39;
  --neutral-900: #131D26;
  --neutral-950: #090E13;
  /* Color semantic */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--brand-blue-500);
  --text-link: var(--brand-blue-500);
  --text-link-hover: var(--brand-blue-700);
  --text-link-muted: var(--neutral-400);
  --background-page: var(--neutral-75);
  --background-primary: var(--neutral-0);
  --background-secondary: var(--neutral-100);
  --background-brand: var(--brand-blue-500);
  --background-brand-subtle: var(--brand-blue-50);
  --background-dark: var(--brand-dark-900);
  --background-disabled: var(--neutral-100);
  --divider-primary: var(--neutral-200);
  --action-primary-default: var(--brand-blue-500);
  --action-primary-hover: var(--brand-blue-700);
  --action-secondary-default: var(--neutral-200);
  --action-secondary-hover: var(--neutral-400);
  --border-active: var(--brand-blue-200);
  --border-default: var(--neutral-150);
  /* Font family */
  --font-family-primary: "Manrope", sans-serif;
  /* Font weight */
  --font-weight-700: 700;
  --font-weight-600: 600;
  --font-weight-500: 500;
  --font-weight-400: 400;
  /* Letter spacing */
  --letter-spacing-tight-200: -2px;
  --letter-spacing-tight-150: -1.5px;
  --letter-spacing-tight-50: -0.5px;
  --letter-spacing-normal: 0;
  /* Heading (desktop) */
  --font-size-h1: 64px;
  --line-height-h1: 76px;
  --font-size-h2: 48px;
  --line-height-h2: 56px;
  --font-size-h3: 32px;
  --line-height-h3: 40px;
  --font-size-h4: 20px;
  --line-height-h4: 28px;
  --font-size-subtitle: 18px;
  --line-height-subtitle: 24px;
  /* Button (desktop) */
  --font-size-button-large: 16px;
  --line-height-button-large: 20px;
  --font-size-button-medium: 14px;
  --line-height-button-medium: 16px;
  /* Body (desktop) */
  --font-size-body-large: 18px;
  --line-height-body-large: 24px;
  --font-size-body-medium: 16px;
  --line-height-body-medium: 20px;
  --font-size-body-small: 14px;
  --line-height-body-small: 20px;
  /* Spacing / Section-X (desktop) */
  --section-x-large: 48px;
  --section-x-medium: 24px;
  --section-x-small: 12px;
  /* Spacing / Gap-X (desktop) */
  --gap-x-large: 40px;
  --gap-x-medium: 20px;
  --gap-x-small: 16px;
  --gap-x-xsmall: 8px;
  /* Spacing / Section-Y (desktop) */
  --section-y-large: 100px;
  --section-y-medium: 48px;
  --section-y-small: 24px;
  /* Spacing / Gap-Y (desktop) */
  --gap-y-large: 80px;
  --gap-y-medium: 48px;
  --gap-y-small: 24px;
  --gap-y-xsmall: 12px;
  /* Spacing / Page edge */
  --page-edge: 16px;
  /* Spacing / Card-X (desktop) */
  --card-x-large: 24px;
  --card-x-medium: 16px;
  --card-x-small: 12px;
  --card-x-xsmall: 8px;
  /* Spacing / Card-Y (desktop) */
  --card-y-large: 24px;
  --card-y-medium: 16px;
  --card-y-small: 12px;
  --card-y-xsmall: 8px;
}

/* Tablet */
@media (max-width: 810px) {
  :root {
    --font-size-h1: 48px;
    --line-height-h1: 56px;
    --font-size-h2: 40px;
    --line-height-h2: 48px;
    --font-size-h3: 28px;
    --line-height-h3: 36px;
    --font-size-h4: 18px;
    --line-height-h4: 24px;
    --font-size-subtitle: 18px;
    --line-height-subtitle: 24px;
    --section-x-large: 32px;
    --section-x-medium: 20px;
    --section-x-small: 12px;
    --gap-x-large: 32px;
    --gap-x-medium: 16px;
    --gap-x-small: 12px;
    --gap-x-xsmall: 8px;
    --section-y-large: 64px;
    --section-y-medium: 40px;
    --section-y-small: 20px;
    --gap-y-large: 64px;
    --gap-y-medium: 40px;
    --gap-y-small: 20px;
    --gap-y-xsmall: 12px;
    --page-edge: 16px;
    --card-x-large: 24px;
    --card-x-medium: 16px;
    --card-x-small: 12px;
    --card-x-xsmall: 8px;
    --card-y-large: 24px;
    --card-y-medium: 16px;
    --card-y-small: 12px;
    --card-y-xsmall: 8px;
  }
}
/* Mobile */
@media (max-width: 390px) {
  :root {
    --font-size-h1: 36px;
    --line-height-h1: 44px;
    --font-size-h2: 32px;
    --line-height-h2: 40px;
    --font-size-h3: 24px;
    --line-height-h3: 32px;
    --font-size-h4: 18px;
    --line-height-h4: 24px;
    --font-size-subtitle: 16px;
    --line-height-subtitle: 24px;
    --font-size-body-large: 16px;
    --font-size-body-medium: 16px;
    --section-x-large: 16px;
    --section-x-medium: 16px;
    --section-x-small: 8px;
    --gap-x-large: 20px;
    --gap-x-medium: 12px;
    --gap-x-small: 8px;
    --gap-x-xsmall: 8px;
    --section-y-large: 44px;
    --section-y-medium: 32px;
    --section-y-small: 16px;
    --gap-y-large: 48px;
    --gap-y-medium: 32px;
    --gap-y-small: 16px;
    --gap-y-xsmall: 8px;
    --page-edge: 16px;
    --card-x-large: 20px;
    --card-x-medium: 12px;
    --card-x-small: 12px;
    --card-x-xsmall: 8px;
    --card-y-large: 20px;
    --card-y-medium: 12px;
    --card-y-small: 12px;
    --card-y-xsmall: 8px;
  }
}
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-primary);
}

body {
  background-color: var(--background-page);
  max-width: 1920px;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--text-secondary);
}

hr {
  max-width: 1440px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--divider-primary);
}

.container {
  max-width: 1440px;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--page-edge) var(--section-x-large);
}

.main-bar {
  background-color: var(--background-primary);
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--section-y-small) var(--section-x-medium);
  max-width: 1440px;
  margin: 0 auto;
}
.main-bar .logo {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}
.main-bar .logo span {
  color: var(--text-brand);
}
.main-bar .menu {
  display: flex;
  gap: var(--gap-x-medium);
}
.main-bar .menu .menu-item {
  font-weight: 700;
  font-size: var(--font-size-button-medium);
  line-height: var(--line-height-button-medium);
  letter-spacing: var(--letter-spacing-normal);
  transition: 0.2s;
}
.main-bar .menu .menu-item:hover {
  color: var(--text-primary);
}
.main-bar .menu .active {
  color: var(--text-primary);
}
.main-bar .button {
  background-color: var(--neutral-800);
  color: var(--text-inverse);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-button-medium);
  letter-spacing: var(--letter-spacing-normal);
  transition: 0.2s;
}
.main-bar .button:hover {
  background-color: var(--neutral-700);
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-small);
}
.section-header .title {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-tight-150);
  font-weight: 700;
  color: var(--text-primary);
}
.section-header .description {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0%;
  font-weight: 500;
  color: var(--text-secondary);
}

.hero {
  padding: var(--section-y-medium) var(--section-x-large);
}
.hero .container {
  margin: 0 auto;
  background: linear-gradient(180deg, var(--background-primary) 0%, var(--background-page) 100%);
  border-radius: 28px;
  padding: var(--section-y-large) var(--section-x-medium) var(--section-y-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.hero .text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero .text-container .main-heading {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-tight-200);
  text-align: center;
  font-weight: 700;
  color: var(--text-primary);
}
.hero .text-container .subheading {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0%;
  text-align: center;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 922px;
}
.hero .primary-button {
  background-color: var(--action-primary-default);
  color: var(--text-inverse);
  padding: 16px 24px;
  border-radius: 12px;
  font-size: var(--font-size-button-large);
  line-height: var(--line-height-button-large);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 700;
  transition: 0.2s;
}
.hero .primary-button:hover {
  background-color: var(--action-primary-hover);
}

.why-us {
  padding: var(--section-y-large) var(--section-x-large);
}
.why-us .container {
  display: flex;
  gap: var(--gap-x-large);
  margin: 0 auto;
}
.why-us .title {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-tight-50);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.why-us .benefit-row {
  display: flex;
  gap: 40px;
  flex: 3;
}
.why-us .benefit-row .benefit {
  display: flex;
  flex-direction: column;
  gap: var(--gap-x-xsmall);
  flex: 1;
}
.why-us .benefit-row .benefit .subtitle {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 600;
  color: var(--text-primary);
}
.why-us .benefit-row .benefit .description {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  font-weight: 400;
  color: var(--text-secondary);
}

.services {
  padding: var(--section-y-large) var(--section-x-large);
}
.services .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-medium);
  margin: 0 auto;
}
.services .service-carousel {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-left: max(var(--section-x-large), (100vw - 1440px) / 2);
  box-sizing: border-box;
}
.services .carousel {
  display: flex;
  gap: var(--gap-x-medium);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.services .carousel::-webkit-scrollbar {
  display: none;
}
.services .service-card {
  flex: 0 0 calc((1440px - var(--gap-x-medium) * 2) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--card-y-medium);
}
.services .media {
  width: 100%;
  aspect-ratio: 16/11;
  border-radius: 28px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--background-brand-subtle);
}
.services .text-container {
  padding-left: var(--card-x-medium);
  padding-right: var(--card-x-medium);
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-xsmall);
}
.services .text-container .service-title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 600;
  color: var(--text-primary);
}
.services .text-container .service-description {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: 0%;
  font-weight: 400;
  color: var(--text-secondary);
}
.services .navigation {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-x-xsmall);
}
.services .navigation .icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--action-secondary-default);
  padding: 14px;
}
.services .navigation .icon-button img {
  display: block;
}

.portfolio {
  padding: var(--section-y-large) var(--section-x-large);
}
.portfolio .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-medium);
  margin: 0 auto;
}
.portfolio .tabs {
  display: flex;
  gap: var(--gap-x-medium);
}
.portfolio .tabs .navigation {
  display: flex;
  flex-direction: column;
  padding: var(--card-y-small);
  gap: var(--gap-y-small);
  background-color: var(--background-secondary);
  border-radius: 28px;
  flex: 4;
}
.portfolio .tabs .navigation .tab {
  background-color: var(--background-primary);
  border-radius: 16px;
  display: flex;
  gap: var(--gap-x-small);
  padding: var(--card-y-small) var(--card-x-small);
}
.portfolio .tabs .navigation .tab .media {
  max-width: 100px;
  height: 100px;
  border-radius: 8px;
}
.portfolio .tabs .navigation .tab .text-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-xsmall);
}
.portfolio .tabs .navigation .tab .text-container .title {
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 400;
  color: var(--text-primary);
}
.portfolio .tabs .navigation .tab .text-container .subtitle {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 400;
  color: var(--text-secondary);
}
.portfolio .tabs .tab-content {
  flex: 8;
  background-color: var(--background-primary);
  border-radius: 28px;
  padding: var(--card-y-large) var(--card-x-large);
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-small);
}
.portfolio .tabs .tab-content .title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 600;
  color: var(--text-primary);
}
.portfolio .tabs .tab-content .task {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolio .tabs .tab-content .task .title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-secondary);
}
.portfolio .tabs .tab-content .task .description {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-primary);
}
.portfolio .tabs .tab-content .solution {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolio .tabs .tab-content .solution .title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-secondary);
}
.portfolio .tabs .tab-content .solution .description {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-primary);
}

.price {
  padding: var(--section-y-large) var(--section-x-large);
}
.price .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-medium);
  margin: 0 auto;
}
.price .pricing {
  display: flex;
  gap: var(--gap-x-medium);
}
.price .pricing .price-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: var(--background-primary);
  border-radius: 24px;
  padding: var(--card-x-large);
  gap: var(--gap-y-large);
}
.price .pricing .price-card .text-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-y-xsmall);
  min-height: 100px;
}
.price .pricing .price-card .text-container .title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 600;
  color: var(--text-primary);
}
.price .pricing .price-card .text-container .description {
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 400;
  color: var(--text-primary);
}
.price .pricing .price-card .price-row {
  display: flex;
  gap: var(--gap-x-xsmall);
}
.price .pricing .price-card .price-row .prefix {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 500;
  color: var(--text-tertiary);
}
.price .pricing .price-card .price-row .value {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 500;
  color: var(--text-primary);
}
.price .pricing .price-card .price-row .currency {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: 500;
  color: var(--text-tertiary);
}/*# sourceMappingURL=style.css.map */