/* Base Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body,
p,
span,
a,
li,
input,
textarea,
select,
button {
	font-family: var(--sflow-font-body), sans-serif;
}

body {
	background-color: var(--sflow-color-bg);
	color: var(--sflow-color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-size: var(--sflow-font-md);
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	transition: all 0.15s ease;
	min-height: 30px;
}

img {
	max-width: 100%;
	display: block;
}

.center {
	text-align: center;
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
}

.brand-text {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

.brand-name {
	font-family: var(--sflow-font-title) !important;
	font-size: 20px;
	font-weight: 900;
	color: var(--sflow-color-primary-dark);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* =====================================================
   SFLOW CLASSES INTEGRATED FROM DESIGN SYSTEM
   ===================================================== */

.sflow-title {
	font-family: var(--sflow-font-title);
	font-weight: 700;
	line-height: 1.15;
}

.sflow-title-xl {
	font-family: var(--sflow-font-title);
	font-size: var(--sflow-font-4xl);
}

.sflow-title-lg {
	font-family: var(--sflow-font-title);
	font-size: var(--sflow-font-3xl);
}

.sflow-title-md {
	font-family: var(--sflow-font-title);
	font-size: var(--sflow-font-2xl);
}

.sflow-body {
	font-size: var(--sflow-font-md);
	line-height: 1.8;
}

.sflow-caption {
	font-size: var(--sflow-font-sm);
}

.sflow-text-primary {
	color: var(--sflow-color-primary-dark);
}

.sflow-text-soft {
	color: var(--sflow-color-text-soft);
}

.sflow-text-center {
	text-align: center;
}

/* LAYOUT */
.container,
.sflow-container {
	max-width: var(--sflow-container) !important;
	width: min(var(--sflow-container), calc(100% - 32px)) !important;
	margin-inline: auto !important;
}

.sflow-section {
	padding: 100px 0;
}

.sflow-section-sm {
	padding: 72px 0;
}

/* GRID */
.sflow-grid {
	display: grid;
	gap: 24px;
}

.sflow-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.sflow-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.sflow-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* FLEX */
.sflow-flex {
	display: flex;
}

.sflow-inline-flex {
	display: inline-flex;
}

.sflow-items-center {
	align-items: center;
}

.sflow-items-start {
	align-items: flex-start;
}

.sflow-items-end {
	align-items: flex-end;
}

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

.sflow-justify-between {
	justify-content: space-between;
}

.sflow-gap-sm {
	gap: 12px;
}

.sflow-gap-md {
	gap: 20px;
}

.sflow-gap-lg {
	gap: 32px;
}

/* CARD */
.sflow-card {
	background: #fff;
	border-radius: var(--sflow-radius-md);
	border: 1px solid var(--sflow-color-border-primary);
	box-shadow: var(--sflow-shadow-sm);
}

.sflow-card-padding {
	padding: 32px;
}

.sflow-card-hover {
	transition: var(--sflow-transition);
}

.sflow-card-hover:hover {
	transform: translateY(-6px);
	box-shadow: var(--sflow-shadow-lg);
}

/* BUTTON */
.sflow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	cursor: pointer;
	transition: var(--sflow-transition);
	text-decoration: none;
	font-weight: 700;
}

.sflow-btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--sflow-color-primary), var(--sflow-color-primary-dark));
}

.sflow-btn-primary:hover {
	transform: translateY(-2px);
}

.sflow-btn-outline {
	color: var(--sflow-color-primary-dark);
	border: 1px solid var(--sflow-color-primary-dark);
	background: #fff;
}

/* BADGE */
.sflow-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
}

.sflow-badge-primary {
	background: var(--sflow-color-bg-soft);
	color: var(--sflow-color-primary-dark);
}

/* IMAGE */
.sflow-img-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sflow-rounded {
	border-radius: var(--sflow-radius-md);
}

.sflow-shadow {
	box-shadow: var(--sflow-shadow-md);
}

/* FORM */
.sflow-input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--sflow-color-border);
	border-radius: var(--sflow-radius-sm);
	padding: 0 16px;
	font-family: inherit;
}

.sflow-input:focus {
	outline: none;
	border-color: var(--sflow-color-primary-dark);
}

/* UTILITIES */
.sflow-mt-1 {
	margin-top: 4px;
}

.sflow-mt-2 {
	margin-top: 8px;
}

.sflow-mt-3 {
	margin-top: 12px;
}

.sflow-mt-4 {
	margin-top: 16px;
}

.sflow-mt-5 {
	margin-top: 20px;
}

.sflow-mt-6 {
	margin-top: 24px;
}

.sflow-mt-7 {
	margin-top: 32px;
}

.sflow-mt-8 {
	margin-top: 40px;
}

.sflow-mt-9 {
	margin-top: 48px;
}

.sflow-mt-10 {
	margin-top: 64px;
}

.sflow-mb-1 {
	margin-bottom: 4px;
}

.sflow-mb-2 {
	margin-bottom: 8px;
}

.sflow-mb-3 {
	margin-bottom: 12px;
}

.sflow-mb-4 {
	margin-bottom: 16px;
}

.sflow-mb-5 {
	margin-bottom: 20px;
}

.sflow-mb-6 {
	margin-bottom: 24px;
}

.sflow-mb-7 {
	margin-bottom: 32px;
}

.sflow-mb-8 {
	margin-bottom: 40px;
}

.sflow-p-4 {
	padding: 16px;
}

.sflow-p-5 {
	padding: 20px;
}

.sflow-p-6 {
	padding: 24px;
}

.sflow-p-7 {
	padding: 32px;
}

.sflow-hidden {
	display: none;
}

.sflow-w-100 {
	width: 100%;
}

.sflow-h-100 {
	height: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {

	.sflow-grid-2,
	.sflow-grid-3,
	.sflow-grid-4 {
		grid-template-columns: 1fr;
	}

	.sflow-section {
		padding: 64px 0;
	}

	.sflow-title-xl {
		font-size: 2.3rem;
	}
}

/* =====================================================
   SFLOW SCROLL ANIMATIONS SYSTEM
   ===================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.animate-fade-in {
  transform: translate3d(0, 0, 0);
}

.animate-fade-in-left {
  transform: translate3d(-30px, 0, 0);
}

.animate-fade-in-right {
  transform: translate3d(30px, 0, 0);
}

.animate-zoom-in {
  transform: translate3d(0, 0, 0) scale(0.94);
}

.animate-on-scroll.animate-fade-in-left.is-visible,
.animate-on-scroll.animate-fade-in-right.is-visible,
.animate-on-scroll.animate-zoom-in.is-visible,
.animate-on-scroll.animate-fade-in.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

@keyframes zoom-in-out {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.animate-zoom-in-out {
  transform-origin: center center;
}

.animate-zoom-in-out.animate-on-scroll.is-visible,
.animate-zoom-in-out.is-visible,
.animate-zoom-in-out:not(.animate-on-scroll) {
  animation: zoom-in-out 2.6s ease-in-out infinite;
}