/* ===========================
   HERO SECTION
   =========================== */
.hero-section {
	position: relative;
	background: var(--background);
	height: 95vh;
	margin: 0 !important; /* override themedemo section { margin: 0 30px } */
}

/* Background split: kanan gelap */
.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: var(--background-green);
	z-index: 0;
	border-radius: 0 0 0 60px;
}

.hero-container {
	position: relative;
	z-index: 1;
}

.hero-row {
	/* min-height: 100vh; */
	padding-top: 50px;
	
}

/* ===========================
   LEFT SIDE
   =========================== */
.hero-left {
	padding-right: 32px;
}

.hero-title {
	font-size: 40px;
	font-weight: 800;
	color: var(--text-green);
	line-height: 1.18;
	margin-bottom: 20px;
}

.hero-desc {
	color: var(--text-description-2);
	font-size: 15px;
	line-height: 1.85;
	margin-bottom: 36px;
	max-width: 430px;
}
.hero-desc ul,
.hero-desc ol {
	margin-top: -16px !important; 
	padding-left: 20px;
	margin-bottom: 12px;
}
.hero-desc ul { list-style: disc; }
.hero-desc ol { list-style: decimal; }
.hero-desc li { margin-bottom: 4px; }

.hero-btns {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-hero-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--background-brown);
	color: #fff;
	border-radius: 50px;
	padding: 13px 32px;
	font-size: 15px;
	text-decoration: none;
	transition: all .2s ease;
	border: 1.5px solid var(--background-brown);
}

.btn-hero-primary:hover {
	background: var(--background-brown-hover);
	cursor: pointer;
	color: #fff;
	box-shadow: 0 10px 26px rgba(185, 132, 102, 0.35);
}

.btn-hero-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--text-brown);
	border: 1.5px solid var(--text-brown);
	border-radius: 50px;
	padding: 13px 32px;
	font-size: 15px;
	text-decoration: none;
	transition: all .2s ease;
}

.btn-hero-secondary:hover {
	background: var(--background-brown-hover);
	color: #fff;
	box-shadow: 0 10px 26px rgba(185, 132, 102, 0.35);
}

/* ===========================
   RIGHT SIDE — PHONE + BADGES
   =========================== */
.hero-right {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 72px);
}

.hero-phone-wrapper {
	position: relative;
	margin: 0 auto;
	transform: translate(-120px, 40px); /* phone sedikit keluar ke kiri melewati batas hijau */
}

.hero-phone-img {
	width: 100%;
	height: 600px;
	position: relative;
	
	z-index: 2;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
}

/* ===========================
   BADGE CARDS
   =========================== */
.hero-badge {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--background-navbar);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);

	border-radius: 12px;
	padding: 24px 28px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	white-space: nowrap;
}

.hero-badge-teks {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-card);
}

.hero-badge-check {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--text-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

.hero-badge-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Posisi 4 badge — entrance dulu, baru float */
.hero-badge-1 {
	top: 15%;
	right: 35%;
	animation:
		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both,
		floatBadge    3.2s ease-in-out                        1.5s infinite;
}

.hero-badge-2 {
	top: 35%;
	right: -35%;
	animation:
		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both,
		floatBadge    3.2s ease-in-out                        1.7s infinite;
}

.hero-badge-3 {
	top: 50%;
	left: -25%;
	animation:
		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both,
		floatBadge    3.2s ease-in-out                        1.9s infinite;
}

.hero-badge-4 {
	bottom: 20%;
	right: -35%;
	animation:
		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both,
		floatBadge    3.2s ease-in-out                        2.1s infinite;
}

@keyframes floatBadge {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-7px); }
}

/* ===========================
   ENTRANCE ANIMATIONS
   =========================== */

/* 1. Title — word-by-word spring */
.hero-title-word {
	display: inline-block;
	animation: wordSpring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wordSpring {
	from { opacity: 0; transform: translateY(28px) rotate(-4deg); }
	to   { opacity: 1; transform: translateY(0)    rotate(0deg);  }
}

/* 2. Desc — blur reveal */
.hero-desc {
	animation: blurReveal 0.8s ease both;
	animation-delay: 0.6s;
}
@keyframes blurReveal {
	from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
	to   { opacity: 1; filter: blur(0);   transform: translateY(0);    }
}

/* 3. Buttons — bounce overshoot */
.hero-btns {
	animation: bounceIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: 0.85s;
}
@keyframes bounceIn {
	from { opacity: 0; transform: scale(0.85) translateY(16px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* 4. Phone — 3D tilt masuk dari bawah */
.hero-right {
	animation: phone3DEnter 0.9s cubic-bezier(0.22, 0.68, 0, 1.2) both;
	animation-delay: 0.05s;
}
@keyframes phone3DEnter {
	from { opacity: 0; transform: perspective(1000px) rotateX(14deg) translateY(40px); }
	to   { opacity: 1; transform: perspective(1000px) rotateX(0deg)  translateY(0);    }
}

/* 5. Badges — muncul satu per satu lalu float */
@keyframes badgeEntrance {
	from { opacity: 0; transform: scale(0.7) translateY(12px); }
	to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ===========================
   BUTTON SHIMMER
   =========================== */
.btn-hero-primary {
	position: relative;
	overflow: hidden;
}
.btn-hero-primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
	animation: shimmerBtn 4s ease-in-out infinite;
	animation-delay: 1.5s;
	pointer-events: none;
}
@keyframes shimmerBtn {
	0%   { left: -80%; }
	30%  { left: 125%; }
	100% { left: 125%; }
}

/* ===========================
   PHONE TILT (CSS vars diisi JS)
   =========================== */
.hero-phone-img {
	--tiltX: 0deg;
	--tiltY: 0deg;
	transform: perspective(900px) rotateY(var(--tiltX)) rotateX(var(--tiltY));
}

/* ===========================
   BACKGROUND ORBS
   =========================== */
.hero-orb {
	position: absolute;
	display: none;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(70px);
	opacity: 0.1;
}
.hero-orb-1 {
	width: 480px;
	height: 480px;
	background: var(--background-brown);
	top: -120px;
	left: -60px;
	animation: orbDrift 14s ease-in-out infinite alternate;
}
.hero-orb-2 {
	width: 360px;
	height: 360px;
	background: var(--text-green);
	bottom: 0;
	right: 8%;
	animation: orbDrift 18s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(25px, 20px) scale(1.06); }
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1199.98px) {
	.hero-title { font-size: 38px; }
	.hero-phone-wrapper { width: 260px; transform: translateX(-40px); }
	.hero-badge-1 { right: -30%; }
	.hero-badge-2 { right: -36%; }
	.hero-badge-3 { left: -30%; }
	.hero-badge-4 { right: -32%; }
}

@media (max-width: 991.98px) {
	.hero-section {
		height: auto;
	}

	.hero-section::before {
		width: 100%;
		height: 58%;
		top: auto;
		bottom: 0;
		border-radius: 40px 40px 0 0;
	}

	.hero-row {
		padding: 96px 0 0;
		min-height: auto;
	}

	.hero-left {
		padding-right: 0;
		padding-bottom: 40px;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.hero-title { font-size: 32px; }
	.hero-desc  { margin-left: auto; margin-right: auto; font-size: 14px; }
	.hero-desc ul,
	.hero-desc ol { text-align: left !important; margin-top: 0; }
	.hero-btns  { justify-content: center; }

	.hero-right {
		min-height: auto;
		padding: 40px 0 100px;
		position: relative;
		z-index: 1;
	}

	.hero-phone-wrapper { width: 100%; transform: none; }
	.hero-phone-img     { width: 100%; height: auto; }

	.hero-badge      { padding: 10px 18px; gap: 10px; }
	.hero-badge-teks { font-size: 12px; }

	.hero-badge-1 { top: 10px;    left:  10px; right: auto;  animation-delay: 0s; }
	.hero-badge-2 { top: 30%;     right: 10px; left:  auto; animation-delay: 0.6s; }
	.hero-badge-3 { top: 55%;     left:  10px; right: auto;  animation-delay: 1.2s; }
	.hero-badge-4 { bottom: 10px; right: 10px; left:  auto; animation-delay: 1.8s; }
}

@media (max-width: 575.98px) {
	.hero-row   { 
		padding-top: 112px;
		flex-direction: column;
	 }
	.hero-title { font-size: 24px; }

	.btn-hero-primary,
	.btn-hero-secondary { width: 100%; justify-content: center; }

	.hero-right { padding: 30px 0 0; }

	.hero-phone-wrapper {
		width: 100%;
		transform: none;
	}
	.hero-phone-img     { width: 100%; height: auto; }

	.hero-badge      { padding: 9px 14px; gap: 8px; }
	.hero-badge-teks { font-size: 11px; }
	.hero-badge-check,
	.hero-badge-icon { width: 22px; height: 22px; font-size: 10px; }

	.hero-badge-1 { top: 80px;   left:  8px; right: auto; }
	.hero-badge-2 { top: 30%;    right: 8px; left:  auto; }
	.hero-badge-3 { top: 55%;    left:  8px; right: auto; }
	.hero-badge-4 { bottom: 80px; right: 8px; left:  auto; }
}