html,
body {
	margin: 0px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	transform-style: flat;
	-webkit-transform-style: flat;
	background-color: var(--uiColorPrimaryWhite);
	scroll-behavior: smooth;
	/* iOS specific scroll fixes */
	-webkit-overflow-scrolling: touch;
	position: relative;
	/* Enable pointer events for landing page */
	pointer-events: auto !important;
	touch-action: auto !important;
	user-select: auto !important;
	-webkit-user-select: auto !important;
}

* {
	box-sizing: border-box;
	/* Enable pointer events for all elements in landing page */
	pointer-events: auto !important;
}

button:focus-visible {
	outline: 2px solid var(--uiColorFocusColor);
	outline: -webkit-focus-ring-color auto 5px;
}
a {
	text-decoration: none;
}
p {
	padding: 0;
	margin: 0;
}

.text-xl {
	font-size: var(--fontSizeTextXl);
}
.text-lg {
	font-size: var(--fontSizeTextLg);
}
.text-md {
	font-size: var(--fontSizeTextMd);
}
.text-md-1 {
	font-size: var(--fontSizeTextMdDesktop);
}
.text-md-2 {
	font-size: var(--fontSizeTextSmDesktop);
}
.text-sm {
	font-size: var(--fontSizeTextSm);
}
.text-xs {
	font-size: var(--fontSizeTextXs);
}
.list-type {
	display: list-item;
	list-style-type: disc; /* hoặc circle, square */
	margin-left: 15px;
}

.landing-page-desktop {
	background-color: var(--uiColorPrimaryWhite);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	min-height: 100vh;
	font-family: var(--fontFamilyPrimary);
	position: relative;
}

.container {
	background-color: var(--primaryWhite);
	width: 100%;
	max-width: 1440px;
	min-height: 100vh;
	margin: 0 auto;
	box-sizing: border-box;
}

.landing-page-desktop .overlap {
	width: 100%;
	min-height: 100vh;
	top: 80px;
	left: 0;
	overflow-x: hidden;
	overflow-y: visible;
}

.landing-page-desktop .frame {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1400px;
	align-items: center;
	justify-content: center;
	gap: 100px;
	top: 100px;
	left: 0;
	margin: 0 auto;
}

.landing-page-desktop .hero-header {
	display: flex;
	flex-direction: column;
	min-height: 850px;
	align-items: center;
	gap: 20px;
	padding: 150px 20px 0px;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 75px;
}
.landing-page-desktop .hero-header .bg-background {
	background-image: url('../images/landing/bg-main.png');
	background-size: cover;
	background-position: 65% 50%;
	background-repeat: no-repeat;
	min-height: 850px;
	width: 100%;
	position: absolute;
}

.landing-page-desktop .stop-selling-clothes {
	position: relative;
	width: 100%;
	max-width: 814px;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);

	text-align: center;
	letter-spacing: var(--headingH1LetterSpacing);
	line-height: var(--headingH1LineHeight);
	font-style: var(--headingH1FontStyle);
	margin-bottom: 0;
	padding-bottom: 0;
}

.landing-page-desktop .cta__description-text-e-commerce {
	position: relative;
	width: 100%;
	max-width: 600px;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .hero__title {
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
}

.landing-page-desktop .hero__title--highlight {
	font-weight: var(--fontWeightSemiBold);
	font-style: italic;
}

.landing-page-desktop .hero__subtitle {
	font-weight: var(--fontWeightNormal);
	margin-bottom: 15px;
}
.highlight {
	font-weight: var(--fontWeightSemiBold);
	font-style: italic;
}

.landing-page-desktop .hero__actions {
	display: flex;
	width: 100%;
	max-width: 354px;
	height: 50px;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	position: relative;
}

.landing-page-desktop .hero__action-text {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightMedium);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .hero__button-text {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	padding: 0 15px;
}

.landing-page-desktop .footer__social-icon {
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .interactive__description {
	position: relative;
	width: 100%;
	max-width: 608px;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .showcase__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	gap: 30px;
	max-width: 100%;
	overflow: hidden;
}

.landing-page-desktop .statistics__grid {
	display: flex;
	align-items: center;
	gap: 30px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	justify-content: space-between;
}

.landing-page-desktop .statistics__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	position: relative;
	flex: 1 1 calc(25% - 90px); /* chia 4 cột */
	max-width: calc(25% - 90px);
}

.landing-page-desktop .statistics__icon-overlap {
	position: relative;
}

.landing-page-desktop .statistics__number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .statistics__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .statistics__item-title {
	position: relative;
	align-self: stretch;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .statistics__item-description {
	position: relative;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .statistics__source {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorSecondaryLightGrey);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
	text-decoration: underline;
}

.landing-page-desktop .statistics__description {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .section-drippy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	padding: 0 15px;
}
.landing-page-desktop .section-drippy .hero__actions {
	justify-content: start;
}

.landing-page-desktop .features__container {
	display: flex;
	flex-direction: column;
	width: 50%;
	align-items: flex-start;
	gap: 50px;
	position: relative;
}

.landing-page-desktop .features__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .features__header {
	display: flex;
	flex-direction: column;
	width: 599px;
	align-items: flex-start;
	gap: 5px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .drippy-is-the-new {
	position: relative;
	width: 497px;
	height: 129px;
	margin-top: -1px;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .features__subtitle {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .features__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .feature__wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 302px;
	align-items: center;
	justify-content: center;
	gap: 42px;
	position: relative;
}

.landing-page-desktop .feature__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .feature__number-container {
	position: relative;
	width: 30px;
	height: 30px;
}

.landing-page-desktop .feature__number-wrapper {
	width: 32px;
	height: 30px;
}

.landing-page-desktop .feature__number-overlap {
	position: relative;
	width: 30px;
	height: 30px;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
}

.landing-page-desktop .feature__number {
	position: absolute;
	width: 9px;
	height: 25px;
	top: 6px;
	left: 10px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .feature__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .feature__title {
	position: relative;
	align-self: stretch;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .feature__description {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .feature__item--second {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 304px;
	align-items: center;
	justify-content: center;
	gap: 42px;
	position: relative;
}

.landing-page-desktop .feature__item--third {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 305px;
	align-items: center;
	justify-content: center;
	gap: 42px;
	position: relative;
}

.landing-page-desktop .feature__item--fourth {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 302px;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .features__image {
	position: relative;
	width: 100%;
	max-width: 50%;
	min-height: 960px;
}
.landing-page-desktop .features__image.mobile {
	display: none;
}

.landing-page-desktop .features__image.desktop {
	display: block;
}

.landing-page-desktop .how-it-works__content {
	width: 100%;
}

.landing-page-desktop .how-it-works__grid {
	display: flex;
	align-items: flex-end;
	gap: 40px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .how-it-works__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 1 calc(33.33% - 120px);
	max-width: calc(33.33% - 120px);
	align-items: center;
	gap: 9px;
	position: relative;
}

.landing-page-desktop .how-it-works__description {
	position: relative;
	width: 244px;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .how-it-works__step {
	position: relative;
	width: 100%;
	min-height: 540px;
}

.landing-page-desktop .how-it-works__step-title {
	width: 100%;
	min-width: 100%;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
	margin-top: 5px;
}

.landing-page-desktop .platform__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .platform__grid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .platform__card {
	position: relative;
	width: 100%;
}

.landing-page-desktop .platform__card-overlap {
	position: relative;
	height: 393px;
	border-radius: 20px;
}

.landing-page-desktop .platform__card-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--uiColorPrimaryWhite);
	border-radius: 20px;
	border: 1px solid;
	border-color: var(--uiColorBorderColor);
}

.landing-page-desktop .platform__card-text {
	display: flex;
	flex-direction: column;
	width: calc(100% - 52px);
	align-items: center;
	gap: 5px;
	position: relative;
	top: 286px;
	left: 26px;
}

.landing-page-desktop .platform__card-image {
	position: absolute;
	width: 100%;
	height: 265px;
	top: 0;
	left: 0;
	background-color: var(--uiColorPrimaryLightGrey);
	border: 1px solid;
	border-color: var(--uiColorBorderColor);
	border-radius: 20px 20px 0px 0px;
}

.landing-page-desktop .platform__screenshot {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 20px 20px 0px 0px;
	/* Thêm properties cho background-image */
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.landing-page-desktop .pricing__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__header {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 639px;
	align-items: center;
	gap: 30px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__title-section {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 373px;
	align-items: center;
	gap: 5px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__title {
	position: relative;
	width: 100%;
	max-width: 517px;
	height: 60px;
	margin-top: -1px;
	margin-left: 0;
	margin-right: 0;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__subtitle {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__toggle {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__toggle-text {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plans {
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	justify-content: center;
	transition: transform 0.4s ease-in-out;
	margin-top: 25px;
}
.landing-page-desktop .pricing__plans--item {
	/* min-width: calc(33.33% - 60px); */
	padding: 40px 25px 40px 25px;
}

.landing-page-desktop .pricing__plan--basic {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 588px;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 20px;
}

.landing-page-desktop .pricing__plan-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__plan-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0px 0px 15px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: var(--uiColorSecondaryDarkGrey);
}

.landing-page-desktop .pricing__plan-name {
	position: relative;
	align-self: stretch;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan-price {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan-period {
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
}

.landing-page-desktop .pricing__features-list {
	height: 138px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}
.landing-page-desktop .pricing__features-list--pro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.landing-page-desktop .pricing__plan-note {
	font-style: italic;
}

.landing-page-desktop .pricing__plan--pro {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 588px;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 20px;
}

.landing-page-desktop .pricing__plan-header--pro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0px 0px 15px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: var(--uiColorSecondaryDarkGrey);
}

.landing-page-desktop .pricing__plan-title-section {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.landing-page-desktop .pricing__plan-name--pro {
	position: relative;
	width: fit-content;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan-badge {
	display: flex;
	height: 26px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	position: relative;
	background-color: var(--uiColorAccentViolet);
	border-radius: 1000px;
}

.landing-page-desktop .pricing__plan-badge-text {
	position: relative;
	width: fit-content;
	margin-left: -2px;
	margin-right: -2px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan-price--pro {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryWhite);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan-period--pro {
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryWhite);
	letter-spacing: 0;
}

.landing-page-desktop .pricing__features-list-2 {
	height: 254px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.landing-page-desktop .pricing__plan-feature {
	color: var(--uiColorPrimaryWhite);
}

.landing-page-desktop .pricing__plan-feature--highlight {
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
}

.landing-page-desktop .pricing__button--pro {
	all: unset;
	box-sizing: border-box;
	height: 50px;
	justify-content: center;
	gap: var(--layoutGapTiny);
	position: relative;
	align-self: stretch;
	width: 100%;
	margin-bottom: -19px;
	background-color: var(--uiColorPrimaryWhite);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .pricing__plan-button-text {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .pricing__plan--digitize {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 588px;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	margin-right: -5px;
	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 20px;
}

.landing-page-desktop .pricing__features-list-3 {
	height: 254px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.landing-page-desktop .cta__content {
	position: relative;
	width: 100%;
	min-height: 495px;
	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid;
	border-color: var(--uiColorBorderColor);
}

.landing-page-desktop .cta__background {
	position: absolute;
	width: 100%;
	max-width: 566px;
	min-height: 806px;
	top: -46px;
	left: 0;
}

.landing-page-desktop .cta__background-overlap {
	position: relative;
	min-height: 495px;
	top: 46px;
}

.landing-page-desktop .cta__cone-image {
	position: absolute;
	width: 100%;
	top: 7px;
	left: 0;
	object-fit: cover;
}

.landing-page-desktop .cta__background-image {
	position: absolute;
	min-width: 330px;
	height: 740px;
	bottom: -50%;
	left: 50%;
	transform: translate(-50%, 0);
}

.landing-page-desktop .cta__text-section {
	display: flex;
	flex-direction: column;
	width: 48%;
	align-items: flex-start;
	gap: 25px;
	position: absolute;
	top: 122px;
	right: 0;
}

.landing-page-desktop .cta__title {
	position: relative;
	align-self: stretch;
	height: 79px;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .cta__description-text {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: transparent;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .cta__description {
	color: var(--uiColorPrimaryBlack);
}

.landing-page-desktop .cta__description--highlight {
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
}

.landing-page-desktop .cta__button-text {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryWhite);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .cta__arrow-icon {
	position: relative;
	width: 21.5px;
	height: 7.36px;
	object-fit: cover;
}

.landing-page-desktop .footer__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	position: relative;
	flex: 0 0 auto;
	background-color: var(--uiColorPrimaryWhite);
	z-index: 100;
	padding: 20px 0 100px;
	width: 100%;
	margin: 0;
}

.landing-page-desktop .footer__divider {
	position: relative;
	width: 100%;
	max-width: 1340px;
	height: 1px;
	margin-top: -1px;
	object-fit: cover;
}

.landing-page-desktop .footer__content {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	position: relative;
	flex: 0 0 auto;
	padding: 30px 0;
}

.landing-page-desktop .footer__main {
	display: inline-flex;
	align-items: center;
	gap: 100px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .footer__logo {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 100px;
}

.landing-page-desktop .footer__copyright {
	position: relative;
	width: fit-content;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
}

.landing-page-desktop .footer__links {
	display: inline-flex;
	align-items: center;
	gap: 56px;
	position: relative;
	flex: 0 0 auto;
}

.landing-page-desktop .footer__link {
	position: relative;
	width: fit-content;
	margin-top: -1px;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
	transition: all 0.3s ease;
	cursor: pointer;
}
.landing-page-desktop .footer__link:hover {
	color: var(--uiColorLightPurple);
}

.social-buttons {
	display: flex;
	align-items: center;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-buttons__item {
	margin: 0;
}

.social-buttons__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	text-decoration: none;
}

.social-buttons__icon {
	max-width: 100%;
	height: 100%;
}

.landing-page-desktop .cta__cone-image--2 {
	width: 253px;
	height: 243px;
	top: 2%;
	right: 0;
	position: absolute;
	z-index: 2;
	object-fit: cover;
	display: block;
}

.landing-page-desktop .cta__cone-image--3 {
	width: 177px;
	height: 118px;
	top: 12%;
	left: -2%;
	position: absolute;
	object-fit: cover;
	display: block;
	z-index: 2;
}

.landing-page-desktop .cta__cone-image--4 {
	width: 135px;
	height: 186px;
	top: 30%;
	left: -1%;
	position: absolute;
	object-fit: cover;
	display: block;
	z-index: 2;
}

.header {
	position: fixed;
	top: 40px;
	left: 0;
	right: 0;
	width: min(909px, 90vw);
	height: 70px;
	margin: 0 auto;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	z-index: 10;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
}

.header__logo {
	display: flex;
	align-items: center;
}

.header__logo-img {
	width: 42px;
	height: 42px;
	border-radius: 100px;
}

.header__menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 50px;
}

.header__menu-item {
	margin: 0;
}

.header__menu-link {
	font-weight: var(--fontWeightNormal);
	color: var(--appBackgroundDark) !important;
	text-decoration: none;
	letter-spacing: 0;
	transition: var(--transitionHover);
}

.header__menu-link:hover {
	color: var(--uiColorAccentViolet);
}

.header__actions {
	display: flex;
	gap: 15px;
	align-items: center;
}

.btn {
	font-weight: var(--fontWeightMedium);
	padding: 10px 20px;
	border-radius: 100px;
	border: none;
	cursor: pointer;
	transition: var(--transitionSlow);
	letter-spacing: 0;
}

.btn--primary {
	background-color: var(--uiColorPrimaryBlack);
	color: var(--uiColorPrimaryWhite);
}

.btn--primary:hover {
	background-color: var(--uiColorAccentViolet);
}

.header__mobile-toggle {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	gap: 4px;
}

.header__mobile-toggle-line {
	width: 20px;
	height: 2px;
	background-color: var(--uiColorPrimaryBlack);
	transition: var(--transitionSlow);
}

.brands {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

.brands__grid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
}

.brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.brands__item:hover {
	opacity: 1;
}

.brands__logo {
	height: 120px;
	min-width: 100%;
}

.header__logo-img {
	width: 36px;
	height: 36px;
}

.landing-page-desktop .div {
	padding: 100px 16px 40px;
}

.landing-page-desktop .hero__title {
	line-height: 1.2;
	text-align: center;
	margin-bottom: 16px;
}

.landing-page-desktop .hero__action-text {
	line-height: 1.5;
	text-align: center;
	margin-bottom: 32px;
	padding: 0 20px;
}

.landing-page-desktop .showcase__container {
	flex-direction: column;
	gap: 24px;
	padding: 40px 0 80px 0;
}

.landing-page-desktop .stop-selling-clothes {
	max-width: 700px;
}

.landing-page-desktop .cta__description-text-e-commerce {
	max-width: 500px;
}

.landing-page-desktop .overlap {
	top: 60px;
}

.landing-page-desktop .stop-selling-clothes {
	/* Brands section responsive - now using common section styles */
	max-width: 100%;
	padding: 0 10px;
}

.landing-page-desktop .cta__description-text-e-commerce {
	max-width: 100%;
	padding: 0 10px;
}

/* Decorative images tablet fixes */
.landing-page-desktop .cta__cone-image-wrapper {
	width: 200px;
	height: 220px;
	top: 20px;
	left: 90%;
	display: block;
}

.landing-page-desktop .cta__cone-image--2 {
	width: 200px;
	height: 250px;
	display: block;
}

.landing-page-desktop .cta__cone-image--4 {
	width: 100px;
	height: 140px;
	display: block;
}

.landing-page-desktop .stop-selling-clothes {
	line-height: 1.2;
}

/* ======================================== */
/* COMMON SECTION STYLES                    */
/* ======================================== */

.section-header {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	position: relative;
	flex: 0 0 auto;
	margin: 0 auto;
}

.section-title {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 60px;
	margin-top: -1px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightTight);
}

.section-subtitle {
	position: relative;
	align-self: stretch;
	font-weight: var(--fontWeightNormal);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightRelaxed);
	margin-top: 10px;
}

/* ======================================== */
/* SHOWCASE SECTION - CLEAN & OPTIMIZED     */
/* ======================================== */

.showcase {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.showcase__item {
	position: relative;
	width: 100%;
	max-width: 660px;
	height: 682px;
	flex-shrink: 0;
	flex: 1;
}

.showcase__background {
	position: relative;
	width: 100%;
	height: 100%;

	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 20px;
	border: 1px solid var(--uiColorPrimaryLightGrey);
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);

	overflow: hidden;
	min-height: 0;
}

.showcase__item--interactive .showcase__background {
	backdrop-filter: blur(25px) brightness(100%);
	-webkit-backdrop-filter: blur(25px) brightness(100%);
	/* Fallback for iOS */
	background-color: rgba(246, 246, 246, 0.95);
}

.showcase__model {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-object-fit: cover;
	border-radius: 20px;
	display: block;
	/* iOS specific fixes */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.showcase__controls {
	position: absolute;
	top: 18px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 7;
}

.showcase__avatar-option {
	width: 46px;
	height: 46px;
	cursor: pointer;
	transition: var(--transitionTransform);
	-webkit-transition: var(--transitionTransform);
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	padding: 2px;
	border-color: rgba(255, 255, 255, 0.8);
}
.showcase__avatar-option:hover {
	border: unset;
	background: linear-gradient(45deg, #e56be8, #495cff);
}

.showcase__avatar-option.selected {
	border: 2px solid #8b5cf6;
	background: linear-gradient(45deg, #8b5cf6, #8b5cf6);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.showcase__avatar-option img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.showcase__avatar-option:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	border-color: rgba(255, 255, 255, 0.8);
}

/* Avatar selector styles are now encapsulated in the custom element */

.showcase__model-display {
	position: absolute;
	top: 14px;
	left: 50%;
	width: 55%;
	height: 625px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
}

/* New class to fix model centering */
.showcase__model-center {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	/* iOS specific fixes */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.showcase__model-center drippy-scene {
	width: 90%;
	height: 90%;
}

.showcase__avatar-model {
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-object-fit: contain;
	border-radius: 10px;
	/* iOS specific fixes */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.showcase__label {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	height: 24px;
	font-weight: var(--fontWeightMedium);
	color: var(--uiColorPrimaryBlack);
	text-align: center;
	letter-spacing: 0;
	line-height: var(--lineHeightNormal);
	z-index: 10;
}

/* ======================================== */
/* ADDITIONAL UTILITY CLASSES               */
/* ======================================== */

.statistics__ellipse {
	position: relative;
	margin: 0 auto 20px;
}

.statistics__ellipse svg {
	transform: rotate(-90deg);
	width: 120px;
	height: 120px;
}
.statistics__ellipse circle {
	fill: none;
	stroke-width: 10;
}

.statistics__ellipse .bg {
	stroke: #e5e5e5;
}
.statistics__ellipse .progress {
	stroke: #000;
	stroke-linecap: round;
	stroke-dasharray: 377;
	stroke-dashoffset: 377;
	transition: stroke-dashoffset 1.5s ease;
}

.how-it-works__step-image {
	position: absolute;
	width: 100%;
	max-width: 300px;
	min-height: 540px;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 20px;
	border: 1px solid;
	border-color: var(--uiColorBorderColor);
	object-fit: cover;
}

.pricing__toggle--yearly {
	width: 157px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.pricing__toggle--monthly {
	width: 157px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.pricing__button--basic {
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	margin-bottom: -20px;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.pricing__button--digitize {
	all: unset;
	box-sizing: border-box;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	margin-bottom: -18px;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}

.cta__button {
	width: 278px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 1000px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .pricing__toggle--yearly {
	width: 157px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .pricing__toggle--monthly {
	width: 157px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryLightGrey);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .pricing__button--basic {
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	margin-bottom: -20px;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .pricing__button--digitize {
	all: unset;
	box-sizing: border-box;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	align-self: stretch;
	width: 100%;
	margin-bottom: -18px;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 100px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .cta__button {
	width: 278px;
	height: 50px;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--uiColorPrimaryBlack);
	border-radius: 1000px;
	box-shadow: inset 0px 1px 2px var(--uiColorWhiteShadow);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.landing-page-desktop .how-it-works__step-image {
	border-radius: 20px;
	border: 1px solid;
	border-color: var(--uiColorBorderColor);
	object-fit: cover;
}
.studio-1 {
	background-image: url('../images/landing/studio-1.png');
	max-width: 243px;
	max-height: 249px;
}
.studio-2 {
	background-image: url('../images/landing/studio-2.png');
	max-width: 243px;
	max-height: 249px;
}
.studio-3 {
	background-image: url('../images/landing/studio-3.png');
}

/* ======================================== */
/* TABLET & MOBILE BREAKPOINT (1300px and below) */
/* ======================================== */

@media (max-width: 1300px) {
	.landing-page-desktop .hero-header .bg-background {
		background-position: 85% 50%;
		min-height: 800px;
	}
	.landing-page-desktop .features__container {
		width: 65%;
	}
	.landing-page-desktop .features__image {
		width: 35%;
		min-height: 560px;
	}
	.landing-page-desktop .features__grid {
		gap: 15px;
	}
	.landing-page-desktop .feature__wrapper {
		width: 47%;
	}
	.landing-page-desktop .feature__item--second {
		width: 47%;
	}
	.landing-page-desktop .feature__item--third {
		width: 47%;
	}

	.landing-page-desktop .how-it-works__grid {
		gap: 20px;
	}
	.landing-page-desktop .how-it-works__item {
		flex: 1 1 calc(33.33% - 60px);
		max-width: calc(33.33% - 60px);
	}
	.landing-page-desktop .hero-header .cta__cone-image--3 {
		top: 13%;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 32%;
	}
}

/* ======================================== */
/* TABLET & MOBILE BREAKPOINT (1024px and below) */
/* ======================================== */

@media (max-width: 1024px) {
	.text-xl {
		font-size: var(--fontSizeTextXlTablet);
	}
	.text-lg {
		font-size: var(--fontSizeTextLgTablet);
	}
	.text-sm {
		font-size: var(--fontSizeTextSmTablet);
	}
	.text-xs {
		font-size: var(--fontSizeTextXsTablet);
	}
	.landing-page-desktop .frame {
		gap: 60px;
	}

	/* Container adjustments for tablet */
	.container {
		max-width: 100%;
	}

	.landing-page-desktop {
		padding: 0;
	}

	.landing-page-desktop .section-title {
		min-height: unset;
	}

	.landing-page-desktop .hero-header {
		min-height: 950px;
		margin-bottom: 0;
	}
	.landing-page-desktop .hero-header .hero__subtitle {
		margin-bottom: 0;
		text-align: center;
	}

	.landing-page-desktop .cta__cone-image--2 {
		width: 105px;
		height: 81px;
	}
	.landing-page-desktop .cta__cone-image--3 {
		width: 101px;
		height: 55px;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 26%;
	}

	.brands__grid {
		gap: 15px;
	}

	.brands__logo {
		height: 90px;
	}

	.landing-page-desktop .showcase__container {
		padding: 40px 0 80px 0;
	}
	.showcase .showcase__item {
		position: relative;
		width: 100%;
		max-width: 460px;
		height: 482px;
		flex-shrink: 0;
		flex: 1;
	}

	.showcase .showcase__model-display {
		top: 50%;
		left: 50%;
		width: 125px;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(-50%, -50%);
	}

	.showcase .showcase__model-center .showcase__model {
		transform: scale(1.5);
		-webkit-transform: scale(1.5);
	}

	.showcase .showcase__avatar-option {
		width: 45px;
		height: 45px;
	}

	.landing-page-desktop .section-drippy .drippy-is-the-new {
		height: unset;
	}

	.landing-page-desktop .statistics__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 25px;
		align-items: start;
		justify-items: center;
		width: 100%;
	}

	.landing-page-desktop .statistics__item {
		max-width: 280px;
		width: 100%;
	}
	.landing-page-desktop .section {
		gap: 30px;
	}

	/* .landing-page-desktop .section-drippy {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 0;
	}
	.landing-page-desktop .features__container {
		width: 100%;
	}
	.landing-page-desktop .features__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 15px;
		align-items: start;
		flex-wrap: unset;
	}
	.landing-page-desktop .features__grid .feature__wrapper,
	.landing-page-desktop .features__grid .feature__item--second,
	.landing-page-desktop .features__grid .feature__item--third {
		width: 90%;
	}

	.landing-page-desktop .feature__wrapper,
	.landing-page-desktop .feature__item--second,
	.landing-page-desktop .feature__item--third {
		max-width: 100% !important;
		width: 100%;
	} */

	/* How it works responsive for tablet - 2x2 grid */
	.landing-page-desktop .how-it-works__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 25px;
		align-items: start;
	}
	.landing-page-desktop .how-it-works__step {
		/* min-height: 876px; */
	}

	.landing-page-desktop .how-it-works__item {
		max-width: unset;
		min-width: 100%;
	}

	/* Platform grid responsive for tablet - single column */
	.landing-page-desktop .platform__grid {
		gap: 15px;
		align-items: center;
	}
	.landing-page-desktop .cta__background {
		max-width: 500px;
	}
	.landing-page-desktop .cta__cone-image {
		max-width: 535px;
	}

	.landing-page-desktop .cta__title {
		height: 55px;
	}
}

@media (max-width: 880px) {
	.landing-page-desktop .section-drippy {
		flex-direction: column;
		gap: 20px;
	}
	.landing-page-desktop .features__container {
		width: 100%;
	}
	.landing-page-desktop .features__image {
		min-width: 100%;
	}
	.landing-page-desktop .feature__wrapper {
		max-width: 100%;
	}
	.landing-page-desktop .feature__item--second {
		max-width: 100%;
	}
	.landing-page-desktop .feature__item--third {
		max-width: 100%;
	}
	.landing-page-desktop .how-it-works__step {
		/* min-height: 776px; */
	}
	.landing-page-desktop .cta__cone-image--3 {
		top: 11%;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 22.5%;
	}
}
@media (max-width: 830px) {
	.landing-page-desktop .how-it-works__grid {
		gap: 20px;
	}
	.landing-page-desktop .how-it-works__item {
		flex: 1 1 calc(33.33% - 60px);
		max-width: calc(33.33% - 60px);
	}
	.landing-page-desktop .pricing__plans--item {
		min-height: unset;
		height: 532px;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 25.5%;
	}
}

@media (max-width: 768px) {
	.text-md-1 {
		font-size: var(--fontSizeTextMd);
	}
	.header {
		width: min(400px, 95vw);
		height: 60px;
		padding: 0 20px;
		top: 20px;
	}

	.header__menu {
		display: none;
	}

	.header__actions {
		display: none;
	}

	.header__mobile-toggle {
		display: flex;
	}

	.header__logo-img {
		width: 36px;
		height: 36px;
	}
	.header {
		margin: 0 auto;
		width: 90%;
	}
	.header__menu {
		display: none !important;
	}

	.header__actions {
		display: flex !important;
	}

	.header__mobile-toggle {
		display: none !important;
	}
	.landing-page-desktop .hero-header {
		padding: 110px 20px 0px;
		min-height: 825px;
	}
	.landing-page-desktop .hero-header .bg-background {
		background-position: 90% 50%;
		min-height: 725px;
	}
	.landing-page-desktop .statistics__grid {
		gap: 15px;
	}

	.landing-page-desktop .cta__content {
		display: flex;
		flex-direction: column-reverse;
		padding: 55px 15px 15px 15px;
	}

	.landing-page-desktop .cta__background {
		width: 100%;
		position: unset;
		max-width: 100%;
		min-height: 100%;
	}
	.landing-page-desktop .cta__cone-image {
		position: absolute;
		left: 46%;
		object-fit: cover;
		transform: translate(-50%, 0);
	}
	.landing-page-desktop .cta__text-section {
		width: 100%;
		position: unset;
		align-items: center;
	}
	.landing-page-desktop .cta__background-image {
		top: -5%;
	}

	.landing-page-desktop .cta__title {
		height: 30px;
		text-align: center;
		margin-bottom: 15px;
	}
	.landing-page-desktop .cta__description-text {
		text-align: center;
	}
	.landing-page-desktop .footer__content {
		flex-direction: column;
		align-items: start;
		gap: 50px;
	}
	.landing-page-desktop .footer__links {
		gap: 25px;
		flex-wrap: wrap;
		flex: unset;
	}
	.landing-page-desktop .footer__main {
		gap: 50px;
	}
	.landing-page-desktop .cta__cone-image--2 {
		top: 1%;
	}
	.landing-page-desktop .cta__cone-image--3 {
		top: 11.5%;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 25%;
	}
}

/* ======================================== */
/* MOBILE BREAKPOINT (620px and below)      */
/* ======================================== */

@media (max-width: 620px) {
	.landing-page-desktop .showcase {
		flex-direction: column;
	}
	.landing-page-desktop .showcase__item {
		flex: unset;
		max-width: 450px;
		height: 600px;
	}
	.showcase .showcase__model-display {
		width: 150px;
		height: 450px;
	}
	.landing-page-desktop .how-it-works__step {
		min-height: 510px;
	}
	.landing-page-desktop .how-it-works__step-image {
		max-width: 280px;
		min-height: 510px;
	}
	.landing-page-desktop .cta__cone-image--2 {
		top: 1.5%;
	}
	.landing-page-desktop .cta__cone-image--3 {
		top: 10%;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 32%;
	}
}

/* ======================================== */
/* MOBILE BREAKPOINT (480px and below)      */
/* ======================================== */

@media (max-width: 480px) {
	.header {
		width: min(400px, 98vw);
		height: 55px;
		padding: 0 15px;
		top: 15px;
	}

	.header__logo-img {
		width: 32px;
		height: 32px;
	}

	.text-xl {
		font-size: var(--fontSizeTextXlMobile);
	}
	.text-lg {
		font-size: var(--fontSizeTextSmDesktop);
		line-height: var(--lineHeightNormal);
	}
	.text-md {
		font-size: var(--fontSizeTextSm);
		line-height: var(--lineHeightNormal);
	}
	.text-md-1 {
		font-size: var(--fontSizeTextXs);
		line-height: var(--lineHeightNormal);
	}
	.text-md-2 {
		font-size: var(--fontSizeTextMd);
		line-height: var(--lineHeightNormal);
	}
	.text-sm {
		font-size: var(--fontSizeTextSmMobile);
	}
	.text-xs {
		font-size: var(--fontSizeTextSm);
	}

	.landing-page-desktop .frame {
		gap: 50px;
	}
	.landing-page-desktop .hero-header {
		min-height: 675px;
		margin-bottom: 20px;
	}
	.landing-page-desktop .hero-header .bg-background {
		background-position: 90% 50%;
		min-height: 535px;
		top: 23.5%;
	}
	/* Statistics responsive for mobile */
	.landing-page-desktop .statistics__grid {
		display: flex;
		flex-direction: column;
		gap: 30px;
		align-items: center;
	}

	.landing-page-desktop .statistics__item {
		max-width: 280px;
		width: 100%;
	}

	.showcase .showcase__item {
		height: 600px;
	}

	/* Features responsive for mobile - single column */
	.landing-page-desktop .features__grid {
		display: flex;
		flex-direction: column;
		gap: 25px;
		align-items: center;
	}

	.landing-page-desktop .feature__wrapper,
	.landing-page-desktop .feature__item--second,
	.landing-page-desktop .feature__item--third {
		max-width: 100%;
		width: 100%;
	}

	/* How it works responsive for mobile - single column */
	.landing-page-desktop .how-it-works__grid {
		display: flex !important;
		gap: 20px !important;
		align-items: center;
		justify-content: center;
	}

	.landing-page-desktop .platform__content {
		gap: 25px;
	}
	.landing-page-desktop .platform__grid {
		display: flex;
		flex-direction: column;
		gap: 15px;
		align-items: center;
	}

	.landing-page-desktop .section {
		gap: 25px;
		padding: 0 25px;
	}
	.landing-page-desktop .section-drippy {
		flex-direction: column;
		gap: 25px;
		padding: 0 25px;
	}

	.landing-page-desktop .section-title {
		min-height: 20px;
	}

	.brands__logo {
		height: 95px;
	}

	.landing-page-desktop .showcase__container {
		padding: 0 0 70px 0;
	}

	.showcase {
		flex-direction: column;
	}

	.showcase .showcase__model-display {
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		will-change: transform;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.showcase .showcase__model {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.showcase__label {
		bottom: 30px;
	}

	.landing-page-desktop .cta__cone-image--4 {
		width: 80px;
		height: 114px;
		bottom: -2%;
	}

	.landing-page-desktop .statistics__grid {
		flex-direction: column;
	}
	.landing-page-desktop .features__container {
		width: 100%;
		gap: 50px;
	}
	.landing-page-desktop .features__image {
		min-width: 100%;
		min-height: 100%;
	}
	.landing-page-desktop .features__image.mobile {
		display: block;
		margin-bottom: 25px;
	}

	.landing-page-desktop .features__image.desktop {
		display: none;
	}

	.landing-page-desktop .section-drippy .feature__item {
		align-items: center;
	}

	.landing-page-desktop .section-drippy .feature__item .feature__title {
		text-align: center;
	}

	.landing-page-desktop .section-drippy .feature__item .feature__description {
		text-align: center;
		width: 83%;
		margin: 0 auto;
	}

	.landing-page-desktop .drippy-is-the-new {
		width: 100%;
		height: 100%;
	}
	.landing-page-desktop .features__header {
		width: 100%;
	}
	.landing-page-desktop .features__subtitle {
		text-align: center;
	}
	.landing-page-desktop .hero__title {
		padding: 0;
		display: block;
		text-align: center;
		margin-bottom: 0;
	}
	.landing-page-desktop .hero__title--highlight {
		display: block;
		text-align: center;
	}
	.landing-page-desktop .section-drippy .hero__actions {
		justify-content: center;
		width: 100%;
		max-width: unset;
	}

	.landing-page-desktop .how-it-works__grid {
		align-items: center;
		gap: 50px;
	}

	.landing-page-desktop .how-it-works__grid .how-it-works__step {
		max-width: 100%;
		min-height: 550px;
	}

	.landing-page-desktop .how-it-works__grid .how-it-works__step-image {
		max-width: 300px;
	}
	.landing-page-desktop .how-it-works__grid .how-it-works__step-title {
		max-width: unset;
	}
	.landing-page-desktop .how-it-works__grid .how-it-works__item {
		max-width: 100%;
	}

	.landing-page-desktop .platform__card-overlap {
		height: 365px;
	}
	.landing-page-desktop .platform__grid {
		flex-direction: column;
	}
	.landing-page-desktop .platform__card-image {
		height: 215px;
	}
	.landing-page-desktop .platform__screenshot {
		height: 100%;
	}
	.landing-page-desktop .platform__card-text {
		top: 240px;
	}
	.landing-page-desktop .pricing__header {
		gap: 15px;
	}

	.landing-page-desktop .pricing__content .pricing__plans {
		flex-direction: column;
		margin-top: 0;
	}

	.landing-page-desktop .pricing__plan--digitize {
		min-height: 488px;
	}
	.landing-page-desktop .cta__cone-image {
		width: 500px;
		top: 9%;
	}
	.landing-page-desktop .cta__title {
		height: 15px;
	}

	.landing-page-desktop .footer__container {
		gap: 0;
		padding: 20px 0 0px;
	}

	.landing-page-desktop .footer__main {
		flex-direction: column;
		gap: 26px;
		align-items: center;
	}
	.landing-page-desktop .footer__links {
		flex-wrap: wrap;
		gap: 26px;
		justify-content: center;
	}

	.landing-page-desktop .footer__content {
		flex-direction: column;
		gap: 26px;
		align-items: center;
	}
	.landing-page-desktop .feature__number {
		top: 3px;
	}
	.landing-page-desktop .cta__cone-image--2 {
		top: 0.6%;
	}
	.landing-page-desktop .cta__cone-image--3 {
		top: 7%;
	}
	.landing-page-desktop .cta__cone-image--4 {
		top: 25.7%;
	}
}

@media (min-width: 480px) and (max-width: 830px) {
	.carousel {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.carousel-item {
		transition:
			transform 0.4s ease,
			opacity 0.4s ease,
			filter 0.4s ease;
		transform: scale(0.8);
		opacity: 0.6;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/* width and flex will be set dynamically by JavaScript */
	}
	.carousel img {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		pointer-events: none;
	}
	.carousel-item.active {
		transform: scale(1.1);
		opacity: 1;
		z-index: 2;
	}
	.carousel.how-it-works__content {
		margin: 25px 0;
	}
	.carousel.platform__content {
		margin-top: 25px;
	}
	.carousel .how-it-works__grid {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		transition: transform 0.4s ease;
		width: max-content;
		cursor: grab;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.carousel .how-it-works__item {
		flex: unset;
		max-width: unset;
		min-width: unset;
		width: unset;
	}
	.carousel .how-it-works__step {
		min-height: 440px;
	}
	.carousel .how-it-works__step .how-it-works__step-image {
		min-height: 430px;
	}
	.landing-page-desktop .carousel .platform__grid {
		cursor: grab;
		justify-content: flex-start !important;
		transition: transform 0.4s ease;
		width: max-content;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.landing-page-desktop .carousel .pricing__plans {
		cursor: grab;
		justify-content: flex-start !important;
		transition: transform 0.4s ease;
		width: max-content;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.carousel .platform__card-overlap {
		height: 350px;
	}
	.carousel .platform__card-text {
		top: 225px;
	}
	.carousel .platform__card-image {
		height: 200px;
	}
}
@supports (-webkit-touch-callout: none) {
	.showcase__model-center {
		transform: translate3d(-50%, -40%, 0) !important;
		-webkit-transform: translate3d(-50%, -40%, 0) !important;
	}
}

/* Mobile carousel items - full width and centered on small screens */
@media (max-width: 480px) {
	.carousel-item {
		width: calc(100vw - 40px) !important;
		min-width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
	}

	.how-it-works__item,
	.platform__card,
	.pricing__plans--item {
		width: calc(100vw - 40px) !important;
		min-width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
	}

	/* Mobile carousel grid - center items without transform */
	.carousel .how-it-works__grid,
	.carousel .platform__grid,
	.carousel .pricing__plans {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 20px !important;
		transform: none !important;
	}

	/* Ensure only active item is visible on mobile */
	.carousel .how-it-works__item:not(.active),
	.carousel .platform__card:not(.active),
	.carousel .pricing__plans--item:not(.active) {
		display: none !important;
	}

	/* Progress indicator for mobile carousel */
	.carousel-progress {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin: 20px 0;
		padding: 0 20px;
	}

	.carousel-progress-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		transition:
			background-color 0.3s ease,
			transform 0.3s ease;
		cursor: pointer;
	}

	.carousel-progress-dot.active {
		background-color: #6366f1;
		transform: scale(1.2);
	}

	.carousel-progress-dot:hover {
		background-color: rgba(99, 102, 241, 0.6);
	}

	/* Hide progress indicator on larger screens */
	@media (min-width: 481px) {
		.carousel-progress {
			display: none !important;
		}
	}
}