/* =========================================================================
 * BANGSA AUTOMATION — full theme styles
 * Brand: Kaching orange. Modern SaaS aesthetic.
 * ========================================================================= */

:root {
	--bx-brand:       #f97316;
	--bx-brand-dark:  #c2410c;
	--bx-brand-soft:  #fff7ed;
	--bx-brand-ring:  rgba(249, 115, 22, 0.18);

	--bx-ink:         #0f172a;
	--bx-ink-2:       #1e293b;
	--bx-muted:       #64748b;
	--bx-muted-2:     #94a3b8;
	--bx-line:        #e5e7eb;
	--bx-line-2:      #f1f5f9;

	--bx-bg:          #ffffff;
	--bx-bg-soft:     #f8fafc;
	--bx-bg-dark:     #0b1220;

	--bx-success:     #16a34a;
	--bx-danger:      #dc2626;

	--bx-radius:      10px;
	--bx-radius-lg:   16px;
	--bx-radius-xl:   24px;
	--bx-shadow-sm:   0 1px 2px rgba(15,23,42,0.05);
	--bx-shadow:      0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
	--bx-shadow-lg:   0 20px 40px -10px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.06);

	--bx-font:        "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bx-font-head:   "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bx-font-emoji:  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}

/* ----------------------------------------------------- Reset / base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--bx-font);
	color: var(--bx-ink);
	background: var(--bx-bg);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--bx-brand); text-decoration: none; }
a:hover { color: var(--bx-brand-dark); }

h1, h2, h3, h4 { margin: 0 0 16px; line-height: 1.2; letter-spacing: -0.02em; color: var(--bx-ink); font-weight: 700; font-family: var(--bx-font-head); }
p  { margin: 0 0 16px; }

.bangsa-h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.12; }
.bangsa-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

em { font-style: normal; color: var(--bx-brand); }

.bangsa-skip-link {
	position: absolute; left: -9999px; top: 16px;
	background: var(--bx-ink); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 9999;
}
.bangsa-skip-link:focus { left: 16px; }

/* ----------------------------------------------------- Container */

.bangsa-container {
	width: 100%; max-width: 1200px; margin: 0 auto;
	padding: 0 24px;
}
.bangsa-container-narrow { max-width: 820px; }

.bangsa-main { min-height: 50vh; }

.bangsa-section { padding: 80px 0; }
@media (max-width: 720px) { .bangsa-section { padding: 56px 0; } }

.bangsa-section-head {
	max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.bangsa-section-lead { font-size: 17px; color: var(--bx-muted); }

/* ----------------------------------------------------- Eyebrow / chip */

.bangsa-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--bx-brand-dark);
	background: var(--bx-brand-soft);
	padding: 6px 12px; border-radius: 999px;
	margin-bottom: 16px;
}
.bangsa-eyebrow-dot {
	width: 6px; height: 6px; border-radius: 999px; background: var(--bx-brand);
	box-shadow: 0 0 0 4px rgba(249, 115, 22,0.18);
}
/* Hero variant: sentence-case pill with flag */
.bangsa-eyebrow-flag {
	text-transform: none; letter-spacing: 0; font-size: 13px;
	padding: 7px 16px; margin-bottom: 22px;
}
.bangsa-eyebrow-ico { display: inline-flex; }
.bangsa-eyebrow-ico svg { display: block; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(15,23,42,0.06); }

/* ----------------------------------------------------- Buttons */

.bangsa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px;
	font-family: inherit; line-height: 1.2; cursor: pointer; text-decoration: none;
	transition: background .15s, color .15s, transform .05s, box-shadow .15s, border-color .15s;
	border: 1px solid transparent;
	white-space: nowrap;
}
.bangsa-btn-lg { padding: 14px 26px; font-size: 16px; }
.bangsa-btn-block { display: flex; width: 100%; }

.bangsa-btn-primary {
	background: var(--bx-brand); color: #fff;
	box-shadow: 0 4px 14px rgba(249, 115, 22,0.4);
}
.bangsa-btn-primary:hover { background: var(--bx-brand-dark); color: #fff; box-shadow: 0 6px 18px rgba(249, 115, 22,0.5); }
.bangsa-btn-primary:active { transform: translateY(1px); }

.bangsa-btn-ghost {
	background: transparent; color: var(--bx-ink); border-color: var(--bx-line);
}
.bangsa-btn-ghost:hover { background: var(--bx-bg-soft); color: var(--bx-ink); border-color: var(--bx-muted-2); }

.bangsa-link-muted { color: var(--bx-muted); font-weight: 500; }
.bangsa-link-muted:hover { color: var(--bx-ink); }

/* ============================================================== Topbar */

.bangsa-topbar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--bx-line);
}
.bangsa-topbar-inner {
	max-width: 1240px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 24px; gap: 24px;
}
.bangsa-topbar-brand { flex-shrink: 0; }

.bangsa-brand {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--bx-ink); font-weight: 700; font-size: 17px;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.bangsa-brand img { height: 32px; width: auto; }
.bangsa-brand-wordmark { white-space: nowrap; }

/* "Kachingly!" wordmark — two-tone to match the logo.
   "Kaching" = brand orange; "ly!" inherits the surrounding text colour
   (navy on light backgrounds, light on dark) so it reads on any surface. */
.kx-mark {
	font-family: var(--bx-font-head);
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.kx-mark .kx-k { color: var(--bx-brand); }

/* Header logo runs bigger (wordmark removed — the mark carries the brand). */
.bangsa-topbar .bangsa-brand img { height: 48px; }

.bangsa-topbar-nav { flex: 1; display: flex; justify-content: center; }
.bangsa-nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 28px;
}
.bangsa-nav-list a {
	color: var(--bx-ink-2); font-weight: 500; font-size: 14.5px;
	padding: 6px 2px; position: relative;
}
.bangsa-nav-list a:hover { color: var(--bx-brand); }

.bangsa-topbar-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.bangsa-nav-toggle {
	display: none;
	background: none; border: 0; padding: 8px; cursor: pointer;
	width: 44px; height: 44px;
	flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.bangsa-nav-toggle span {
	display: block; width: 20px; height: 2px; background: var(--bx-ink); border-radius: 1px;
	transition: transform .2s, opacity .2s;
}
.bangsa-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bangsa-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bangsa-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bangsa-mobile-nav {
	display: none;
	border-top: 1px solid var(--bx-line);
	padding: 16px 24px 24px;
	background: #fff;
}
.bangsa-mobile-nav .bangsa-nav-list {
	flex-direction: column; gap: 4px; align-items: stretch;
}
.bangsa-mobile-nav .bangsa-nav-list a {
	display: block; padding: 12px 0;
	border-bottom: 1px solid var(--bx-line-2);
}
.bangsa-mobile-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

@media (max-width: 880px) {
	.bangsa-topbar-nav { display: none; }
	.bangsa-topbar-cta { display: none; }
	.bangsa-nav-toggle { display: flex; }
	.bangsa-mobile-nav[aria-hidden="false"],
	.bangsa-mobile-nav.is-open { display: block; }
}

/* ============================================================== Hero */

.bangsa-hero {
	position: relative; overflow: hidden;
	padding: 80px 0 100px;
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(249, 115, 22,0.10), transparent 60%),
		radial-gradient(900px 500px at -5% 30%, rgba(249, 115, 22,0.07), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--bx-bg-soft) 100%);
}
@media (max-width: 720px) { .bangsa-hero { padding: 56px 0 72px; } }

.bangsa-hero-grid {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 980px) {
	.bangsa-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.bangsa-hero-copy { max-width: 580px; }
.bangsa-h1-accent { color: var(--bx-brand); }
.bangsa-lead {
	font-size: 16px; color: var(--bx-muted); line-height: 1.65;
	margin-top: 8px; margin-bottom: 32px;
}
.bangsa-lead strong { color: var(--bx-ink-2); font-weight: 600; }

.bangsa-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bangsa-hero-bullets {
	list-style: none; padding: 0; margin: 0 0 18px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	color: var(--bx-muted); font-size: 14px;
}
.bangsa-hero-bullets li { font-weight: 500; }
.bangsa-hero-bullets li:not(:last-child)::after {
	content: "·"; margin-left: 10px; color: var(--bx-muted-2);
}

/* Hero trust / social-proof row */
.bangsa-hero-trust {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	font-size: 14px; color: var(--bx-muted);
}
.bangsa-hero-trust > span { display: inline-flex; align-items: center; gap: 5px; }
.bangsa-hero-trust strong { color: var(--bx-ink); font-weight: 700; }
.bangsa-hero-trust-stars { gap: 1px; }
.bangsa-hero-trust-sep { color: var(--bx-muted-2); }
.bx-star, .bx-check { display: block; flex: none; }

/* Hero mockup */

.bangsa-hero-visual { position: relative; }
.bangsa-hero-glow {
	position: absolute; inset: 0;
	background: radial-gradient(500px 300px at 70% 50%, rgba(249, 115, 22,0.20), transparent 70%);
	z-index: 0; filter: blur(40px);
}
.bangsa-mock {
	position: relative; z-index: 1;
	background: #fff; border-radius: var(--bx-radius-lg);
	border: 1px solid var(--bx-line);
	box-shadow: var(--bx-shadow-lg);
	overflow: hidden;
}
.bangsa-mock-bar {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px; background: var(--bx-bg-soft);
	border-bottom: 1px solid var(--bx-line); font-size: 12px; color: var(--bx-muted);
}
.bangsa-mock-dot { width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; }
.bangsa-mock-dot.r { background: #f87171; }
.bangsa-mock-dot.y { background: #fbbf24; }
.bangsa-mock-dot.g { background: #34d399; }
.bangsa-mock-url { margin-left: 14px; font-family: "SF Mono", Menlo, monospace; font-size: 11px; }

.bangsa-mock-image {
	display: block;
	width: 100%;
	height: auto;
	background: var(--bx-bg-soft);
}

/* Floating "untung sebenar" badge over the dashboard frame */
.bangsa-mock-badge {
	position: absolute; z-index: 3;
	left: -18px; bottom: 38px;
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--bx-line);
	border-radius: 14px; padding: 12px 16px;
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.30);
}
.bangsa-mock-badge-ico { display: inline-flex; }
.bangsa-mock-badge-ico svg { display: block; }
.bangsa-mock-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.bangsa-mock-badge-text strong { font-size: 18px; font-weight: 700; color: #16a34a; font-family: var(--bx-font-head); }
.bangsa-mock-badge-text span { font-size: 12px; color: var(--bx-muted); }

@media (max-width: 980px) {
	.bangsa-mock-badge { left: 8px; bottom: 16px; padding: 10px 14px; }
	.bangsa-mock-badge-emoji { font-size: 19px; }
	.bangsa-mock-badge-text strong { font-size: 16px; }
}

/* ============================================================== Proof */

.bangsa-proof {
	padding: 30px 0; background: var(--bx-ink);
}
.bangsa-proof-tag { display: none; }
.bangsa-proof-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	max-width: 880px; margin: 0 auto; text-align: center;
}
.bangsa-proof-stats div {
	display: flex; flex-direction: column; gap: 4px;
	border-left: 1px solid rgba(148, 163, 184, 0.22);
}
.bangsa-proof-stats div:first-child { border-left: 0; }
.bangsa-proof-stats strong { font-size: 30px; color: var(--bx-brand); font-weight: 700; letter-spacing: -0.02em; font-family: var(--bx-font-head); }
.bx-star-inline { display: inline-block; width: 0.7em; height: 0.7em; vertical-align: 0.04em; margin-left: 2px; }
.bangsa-proof-stats span { font-size: 12px; color: var(--bx-muted-2); text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 640px) {
	.bangsa-proof-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
	.bangsa-proof-stats div:nth-child(3) { border-left: 0; }
	.bangsa-proof-stats strong { font-size: 26px; }
}

/* ============================================================== Features */

.bangsa-section-features { background: #fff; }

/* Daily Reports screenshot between section head and feature cards */
.bangsa-features-shot { margin: 0 auto 52px; }
@media (max-width: 640px) { .bangsa-features-shot { margin-bottom: 36px; } }

/* ====================================================== Ads Optimizer */

.bangsa-section-ads {
	background:
		radial-gradient(900px 520px at 82% 0%, rgba(249, 115, 22, 0.16), transparent 60%),
		linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
/* Navy section → flip copy to light, keep brand-orange highlight. */
.bangsa-section-ads .bangsa-h2 { color: #fff; }
.bangsa-section-ads .bangsa-section-lead { color: rgba(255, 255, 255, 0.74); }
.bangsa-section-ads .bangsa-hl { color: var(--bx-brand); font-weight: 600; }
.bangsa-section-ads .bangsa-ao-point h4 { color: #fff; }
.bangsa-section-ads .bangsa-ao-point p { color: rgba(255, 255, 255, 0.62); }
.bangsa-section-ads .bangsa-ao-ic { background: rgba(34, 197, 94, 0.18); }
.bangsa-ao-points {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
	max-width: 1040px; margin: 8px auto 0;
}
@media (max-width: 880px) {
	.bangsa-ao-points { grid-template-columns: 1fr; gap: 24px; max-width: 540px; }
}
.bangsa-ao-ic {
	display: inline-flex; padding: 8px; margin-bottom: 12px;
	background: rgba(22, 163, 74, 0.10); border-radius: 11px;
}
.bangsa-ao-point h4 { font-size: 17px; margin: 0 0 6px; color: var(--bx-ink); }
.bangsa-ao-point p { margin: 0; color: var(--bx-muted); font-size: 15px; line-height: 1.6; }

.bangsa-features-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 980px) { .bangsa-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bangsa-features-grid { grid-template-columns: 1fr; } }

.bangsa-feature-card {
	background: #fff; border: 1px solid var(--bx-line); border-radius: var(--bx-radius-lg);
	padding: 28px;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.bangsa-feature-card:hover {
	border-color: var(--bx-brand); transform: translateY(-2px);
	box-shadow: 0 12px 30px -8px rgba(249, 115, 22,0.18);
}
.bangsa-feature-icon {
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--bx-brand-soft);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 24px; margin-bottom: 16px;
	font-family: var(--bx-font-emoji);
	line-height: 1;
}

.bangsa-mobile-ic { font-family: var(--bx-font-emoji); }
.bangsa-feature-card h3 { font-size: 17px; margin: 0 0 8px; }
.bangsa-feature-card p { color: var(--bx-muted); font-size: 14.5px; margin: 0; }

/* ========================================================== Screenshots */

.bangsa-section-shots {
	background: linear-gradient(180deg, #ffffff 0%, var(--bx-bg-soft) 100%);
}

.bangsa-shots-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.bangsa-shot {
	margin: 0;
	background: #fff;
	border: 1px solid var(--bx-line);
	border-radius: var(--bx-radius-lg);
	overflow: hidden;
	box-shadow: var(--bx-shadow);
	transition: transform .25s, box-shadow .25s;
	display: flex;
	flex-direction: column;
}

.bangsa-shot:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
}

.bangsa-shot-wide {
	grid-column: span 2;
}

.bangsa-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--bx-line);
	background: var(--bx-bg-soft);
}

.bangsa-shot figcaption {
	padding: 20px 24px;
	color: var(--bx-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

.bangsa-shot figcaption strong {
	display: block;
	color: var(--bx-ink);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}

@media (max-width: 760px) {
	.bangsa-shots-grid { grid-template-columns: 1fr; }
	.bangsa-shot-wide { grid-column: auto; }
}

/* ============================================================ Mobile */

.bangsa-section-mobile {
	background: linear-gradient(180deg, var(--bx-bg-soft) 0%, #ffffff 60%);
	overflow: hidden;
}

.bangsa-mobile-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 980px) {
	.bangsa-mobile-grid { grid-template-columns: 1fr; gap: 40px; }
}

.bangsa-mobile-copy h2 { margin-top: 8px; }
.bangsa-mobile-copy .bangsa-section-lead {
	font-size: 17px;
	margin-bottom: 32px;
	max-width: 540px;
}

.bangsa-mobile-feats {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bangsa-mobile-feats li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.bangsa-mobile-ic {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bx-brand-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.bangsa-mobile-feats strong {
	display: block;
	color: var(--bx-ink);
	font-weight: 600;
	font-size: 15.5px;
	margin-bottom: 2px;
}

.bangsa-mobile-feats div {
	color: var(--bx-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

/* App badges */

.bangsa-app-badges {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.bangsa-app-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--bx-ink);
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s, background .15s;
}

.bangsa-app-badge:hover {
	background: var(--bx-brand-dark);
	color: #fff;
	transform: translateY(-2px);
}

.bangsa-app-badge svg { flex-shrink: 0; }
.bangsa-app-badge span { display: flex; flex-direction: column; line-height: 1.2; }
.bangsa-app-badge small { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; }
.bangsa-app-badge strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* Not published yet: non-clickable "Coming soon" state */
.bangsa-app-soon { opacity: 0.7; cursor: default; pointer-events: none; }
.bangsa-app-soon:hover { background: var(--bx-ink); transform: none; }

.bangsa-app-note {
	font-size: 13px;
	color: var(--bx-muted);
	margin: 0;
}

/* Phones */

.bangsa-mobile-visual { position: relative; min-height: 580px; }

.bangsa-phones {
	position: relative;
	width: 100%;
	height: 600px;
	max-width: 520px;
	margin: 0 auto;
}

.bangsa-phone {
	position: absolute;
	width: 280px;
	background: #0f172a;
	border-radius: 38px;
	padding: 8px;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.04) inset,
		0 25px 50px -12px rgba(15, 23, 42, 0.45),
		0 0 0 4px #1e293b;
}

.bangsa-phone-inner {
	background: #0b1220;
	border-radius: 32px;
	overflow: hidden;
	height: 540px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.bangsa-phone-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px 8px;
	color: rgba(255,255,255,0.9);
	font-size: 12px;
	font-weight: 600;
	font-family: -apple-system, sans-serif;
}

.bangsa-phone-icons {
	font-size: 11px;
	letter-spacing: 1px;
	opacity: 0.85;
}

.bangsa-phone-bar-ios { padding-top: 16px; padding-bottom: 4px; }

.bangsa-phone-notch {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 24px;
	background: #000;
	border-radius: 14px;
	z-index: 2;
}

.bangsa-phone-screen {
	flex: 1;
	padding: 20px 18px;
	background: #f8fafc;
	color: var(--bx-ink);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Phone iOS (front) */

.bangsa-phone-ios {
	right: 0;
	bottom: 0;
	z-index: 2;
}

.bangsa-screen-h {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.bangsa-screen-h strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--bx-ink);
	margin-bottom: 2px;
}

.bangsa-screen-h small {
	font-size: 11px;
	color: var(--bx-muted);
}

.bangsa-screen-switcher {
	width: 32px; height: 32px; border-radius: 8px;
	background: #fff;
	border: 1px solid var(--bx-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--bx-muted);
}

.bangsa-screen-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

.bangsa-mini-card {
	padding: 10px 12px;
	border-radius: 10px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 56px;
	justify-content: center;
}

.bangsa-mini-card small {
	font-size: 9px;
	letter-spacing: 0.06em;
	opacity: 0.75;
	text-transform: uppercase;
}

.bangsa-mini-card strong {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
}

.bangsa-screen-row {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--bx-line);
}

.bangsa-screen-row-l { color: var(--bx-muted); }
.bangsa-screen-row-r { font-weight: 600; color: var(--bx-ink); }

.bangsa-screen-tabbar {
	display: flex;
	justify-content: space-around;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--bx-line);
	font-size: 10px;
	color: var(--bx-muted);
}

.bangsa-screen-tab.is-active { color: var(--bx-brand); font-weight: 600; }

/* Phone Android (back) */

.bangsa-phone-android {
	left: 0;
	top: 0;
	transform: rotate(-6deg);
	z-index: 1;
}

.bangsa-screen-stores {
	background: #fff;
}

.bangsa-screen-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--bx-ink);
	margin-bottom: 8px;
}

.bangsa-store-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bangsa-store {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--bx-bg-soft);
	border-radius: 10px;
	border: 1px solid var(--bx-line);
}

.bangsa-store.is-active {
	background: var(--bx-brand-soft);
	border-color: #fed7aa;
}

.bangsa-store-dot {
	width: 10px; height: 10px; border-radius: 999px;
	flex-shrink: 0;
}

.bangsa-store > div:not(.bangsa-store-dot) {
	flex: 1;
	min-width: 0;
}

.bangsa-store strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--bx-ink);
}

.bangsa-store small {
	display: block;
	font-size: 10px;
	color: var(--bx-muted);
}

.bangsa-store-roas {
	font-size: 12px;
	font-weight: 700;
	color: var(--bx-brand);
}

.bangsa-store-add strong { color: var(--bx-muted); }

@media (max-width: 980px) {
	.bangsa-mobile-visual { min-height: 640px; }
	.bangsa-phones { height: 640px; max-width: 100%; }
	.bangsa-phone-ios { right: 50%; transform: translateX(50%); bottom: 0; }
	.bangsa-phone-android { left: 50%; transform: translateX(-50%) rotate(-6deg); top: 0; }
}

@media (max-width: 480px) {
	.bangsa-phone-android { display: none; }
	.bangsa-phones { height: 580px; }
	.bangsa-phone-ios { right: 50%; transform: translateX(50%); top: 0; }
}

/* ============================================================== How-to */

.bangsa-section-howto {
	background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
	color: #fff;
}
.bangsa-section-howto .bangsa-h2 { color: #fff; }

.bangsa-eyebrow-gold {
	background: rgba(249, 115, 22, 0.12);
	color: #fdba74;
	border: 1px solid rgba(249, 115, 22, 0.35);
}

.bangsa-steps {
	list-style: none; padding: 0; margin: 8px auto 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
	max-width: 1000px;
}
@media (max-width: 880px) { .bangsa-steps { grid-template-columns: 1fr; max-width: 360px; gap: 40px; } }

.bangsa-steps li {
	position: relative; text-align: center; padding-top: 84px;
}
.bangsa-step-no {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
	width: 56px; height: 56px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	background: #16213a; border: 2px solid var(--bx-brand);
	color: var(--bx-brand); font-family: var(--bx-font-head);
	font-size: 18px; font-weight: 700; letter-spacing: 0.02em;
}
/* connecting timeline line (behind circles), hidden after the last step */
.bangsa-steps li::before {
	content: ""; position: absolute; top: 28px; left: 50%; z-index: 0;
	width: calc(100% + 28px); height: 2px; background: rgba(249, 115, 22, 0.35);
}
.bangsa-steps li:last-child::before { display: none; }
@media (max-width: 880px) {
	.bangsa-steps li { padding-top: 76px; }
	.bangsa-steps li::before { display: none; }
}
.bangsa-steps h3 { font-size: 18px; margin: 0 0 8px; color: #fff; }
.bangsa-steps p { color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 15px; line-height: 1.6; }

/* ============================================================== Pricing */

.bangsa-section-pricing { background: #fff; }

/* Cycle toggle — sliding-knob pill (matches the /buy plan picker) */
.bangsa-cycle-toggle {
	position: relative; display: flex; gap: 0; margin: 0 auto 32px;
	background: #f1f5f9; border: 1px solid var(--bx-line); border-radius: 999px;
	/* Fixed width so both halves are equal — the knob is 50%, and unequal
	   button text ("Tahunan jimat ~2 bln" vs "Bulanan") would otherwise desync it. */
	width: 360px; max-width: 100%; padding: 4px; box-sizing: border-box;
}
.bangsa-cycle-knob {
	position: absolute; top: 4px; left: 4px;
	width: calc(50% - 4px); height: calc(100% - 8px);
	background: #fff; border-radius: 999px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
	transition: transform .3s ease; z-index: 1;
}
.bangsa-cycle-btn {
	position: relative; z-index: 2; flex: 1;
	padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
	background: transparent; border: none; color: var(--bx-muted);
	border-radius: 999px; transition: color .2s; white-space: nowrap;
}
.bangsa-cycle-btn-active { color: var(--bx-ink); }
.bangsa-cycle-btn:focus { outline: none; }
.bangsa-cycle-btn:focus-visible { outline: 2px solid var(--bx-brand); outline-offset: 2px; }
.bangsa-cycle-save-tag {
	font-size: 11px; font-weight: 700; color: var(--bx-brand-dark);
	background: var(--bx-brand-soft);
	padding: 1px 7px; border-radius: 999px; margin-left: 5px; vertical-align: middle;
}

.bangsa-pricing-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 880px; margin: 0 auto; gap: 20px;
}
.bangsa-pricing-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 1040px;
}
@media (max-width: 900px) { .bangsa-pricing-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bangsa-pricing-grid { grid-template-columns: 1fr; } }

.bangsa-price-card {
	background: #fff; border: 1px solid var(--bx-line); border-radius: var(--bx-radius-lg);
	padding: 32px; position: relative;
	display: flex; flex-direction: column;
}
.bangsa-price-card-pop {
	border-color: var(--bx-brand); border-width: 2px;
	box-shadow: 0 12px 28px -8px rgba(249, 115, 22,0.25);
	transform: translateY(-4px);
}
.bangsa-price-badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--bx-brand); color: #fff;
	padding: 4px 12px; border-radius: 999px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	white-space: nowrap;
}
.bangsa-price-label { font-size: 13px; font-weight: 600; color: var(--bx-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bangsa-price-domain-badge {
	display: inline-block; font-size: 11px; font-weight: 700; background: var(--bx-bg-soft);
	color: var(--bx-muted); padding: 2px 9px; border-radius: 999px;
	margin-left: 6px; vertical-align: middle; text-transform: lowercase;
}
.bangsa-price-card-pop .bangsa-price-domain-badge { background: rgba(249, 115, 22,.12); color: var(--bx-brand); }
.bangsa-price-amount {
	font-size: 44px; font-weight: 700; color: var(--bx-ink); margin: 10px 0 2px;
	letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 3px;
	font-family: var(--bx-font-head);
}
.bangsa-price-cur { font-size: 22px; font-weight: 600; color: var(--bx-ink); align-self: flex-start; margin-top: 6px; }
.bangsa-price-num {
	font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
	transition: color .2s; min-width: 1ch;
}
.bangsa-price-num.is-animating { color: var(--bx-brand); }
.bangsa-price-amount small { font-size: 15px; color: var(--bx-muted); font-weight: 500; letter-spacing: 0; margin-left: 2px; }

/* Strikethrough + RM savings row (yearly mode) */
.bangsa-price-saverow {
	display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 24px;
	animation: bangsa-fade-up .35s ease both;
}
.bangsa-price-saverow s { font-size: 14px; color: var(--bx-muted); }
.bangsa-price-savebadge {
	font-size: 12px; font-weight: 700; color: #16a34a;
	background: #f0fdf4; border: 1px solid #bbf7d0;
	padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
@keyframes bangsa-fade-up {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bangsa-price-sub { font-size: 13px; color: var(--bx-muted); margin: 0 0 20px; min-height: 2.4em; }
.bangsa-price-was { font-size: 13px; font-weight: 400; color: var(--bx-muted); text-decoration: line-through; display: block; margin-bottom: 2px; }

.bangsa-price-list {
	list-style: none; padding: 0; margin: 0 0 28px;
	display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.bangsa-price-list li {
	font-size: 14px; color: var(--bx-ink-2); padding-left: 22px; position: relative;
}
.bangsa-price-list li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--bx-brand); font-weight: 700; font-size: 13px;
}
.bangsa-price-ctas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.bangsa-price-card .bangsa-btn { margin-top: 0; }

.bangsa-pricing-foot { text-align: center; color: var(--bx-muted); font-size: 13px; margin-top: 28px; }

/* ============================================================== FAQ */

.bangsa-section-faq { background: var(--bx-bg-soft); }

.bangsa-faq { display: flex; flex-direction: column; gap: 8px; }
.bangsa-faq details {
	background: #fff; border: 1px solid var(--bx-line); border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s;
}
.bangsa-faq details[open] { border-color: var(--bx-brand); }
.bangsa-faq summary {
	padding: 20px 24px; cursor: pointer; font-weight: 600; color: var(--bx-ink);
	list-style: none; position: relative; padding-right: 48px;
}
.bangsa-faq summary::-webkit-details-marker { display: none; }
.bangsa-faq summary::after {
	content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
	font-size: 22px; color: var(--bx-brand); font-weight: 300; line-height: 1;
	transition: transform .2s;
}
.bangsa-faq details[open] summary::after { content: "−"; }
.bangsa-faq p { padding: 0 24px 20px; color: var(--bx-muted); margin: 0; font-size: 15px; }

/* ============================================================== Affiliate teaser */

.bangsa-section-affiliate { background: #fff; }

.bangsa-affil-card {
	background: linear-gradient(135deg, #fff7ed 0%, #fff 60%);
	border: 1px solid #fed7aa; border-radius: var(--bx-radius-xl);
	padding: 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 880px) {
	.bangsa-affil-card { grid-template-columns: 1fr; padding: 32px; }
}
.bangsa-affil-copy h2 { margin: 8px 0 16px; }
.bangsa-affil-copy p { color: var(--bx-muted); margin-bottom: 24px; }
.bangsa-affil-stat {
	display: flex; flex-direction: column; gap: 16px;
}
.bangsa-affil-stat div {
	background: #fff; border-radius: 12px; padding: 18px 24px;
	border: 1px solid var(--bx-line);
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.bangsa-affil-stat strong { font-size: 24px; color: var(--bx-brand); font-weight: 700; letter-spacing: -0.02em; }
.bangsa-affil-stat span { color: var(--bx-muted); font-size: 13.5px; }

/* ============================================================== CTA strip */

.bangsa-cta-strip {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #fff;
	border-radius: 0;
}
.bangsa-cta-strip .bangsa-h2 { color: #fff; }
.bangsa-cta-strip p { color: rgba(255,255,255,0.7); font-size: 17px; max-width: 540px; margin: 0 auto 24px; }
.bangsa-cta-inner { text-align: center; }
.bangsa-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bangsa-cta-strip .bangsa-btn-ghost {
	background: transparent; border-color: rgba(255,255,255,0.2); color: #fff;
}
.bangsa-cta-strip .bangsa-btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.4); }

/* ============================================================== Footer */

.bangsa-footer {
	background: var(--bx-bg-dark); color: rgba(255,255,255,0.7);
	padding: 64px 0 32px;
}
.bangsa-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.bangsa-footer-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
	padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 760px) {
	.bangsa-footer-grid { grid-template-columns: 1fr 1fr; }
	.bangsa-footer-brand-col { grid-column: 1 / -1; }
}
.bangsa-footer .bangsa-brand { color: #fff; }
.bangsa-footer-tag { color: rgba(255,255,255,0.5); font-size: 13.5px; max-width: 280px; margin-top: 12px; }
.bangsa-footer h4 {
	color: #fff; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
}
.bangsa-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bangsa-footer ul a { color: rgba(255,255,255,0.7); font-size: 14px; }
.bangsa-footer ul a:hover { color: var(--bx-brand); }

.bangsa-footer-bottom {
	padding-top: 24px;
	display: flex; justify-content: space-between; gap: 16px;
	color: rgba(255,255,255,0.5); font-size: 12.5px;
}
@media (max-width: 480px) {
	.bangsa-footer-bottom { flex-direction: column; }
}

/* ============================================================== Auth template */

.bangsa-auth-wrap { min-height: calc(100vh - 80px); background: var(--bx-bg-soft); padding: 0; }
.bangsa-auth-grid {
	min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
@media (max-width: 880px) { .bangsa-auth-grid { grid-template-columns: 1fr; } }

.bangsa-auth-side {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #c2410c 130%);
	color: #fff; padding: 64px 56px;
	display: flex; align-items: center;
	position: relative; overflow: hidden;
}
.bangsa-auth-side::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(600px 400px at 80% 30%, rgba(249, 115, 22,0.3), transparent 60%);
	pointer-events: none;
}
@media (max-width: 880px) { .bangsa-auth-side { display: none; } }

.bangsa-auth-side-inner { position: relative; max-width: 400px; }
.bangsa-auth-side .bangsa-brand img { height: 40px; }
.bangsa-auth-side-quote {
	margin: 48px 0 32px; padding: 28px;
	background: rgba(255,255,255,0.06); backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
}
.bangsa-auth-side-quote p { font-size: 18px; line-height: 1.5; color: #fff; margin: 0 0 16px; font-style: italic; }
.bangsa-auth-side-quote footer { display: flex; flex-direction: column; gap: 2px; }
.bangsa-auth-side-quote strong { color: #fff; }
.bangsa-auth-side-quote span { color: rgba(255,255,255,0.6); font-size: 13px; }

.bangsa-auth-side-bullets {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 12px;
	color: rgba(255,255,255,0.85);
}

.bangsa-auth-main {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 64px 24px; gap: 24px;
}
.bangsa-auth-back {
	align-self: flex-start; color: var(--bx-muted); font-size: 13.5px;
}
.bangsa-auth-card {
	width: 100%; max-width: 440px;
	background: #fff; border: 1px solid var(--bx-line); border-radius: var(--bx-radius-lg);
	box-shadow: var(--bx-shadow);
	padding: 36px;
}
.bangsa-auth-card-head { margin-bottom: 24px; text-align: center; }
.bangsa-auth-card-title { font-size: 24px; margin: 0; letter-spacing: -0.02em; }
.bangsa-auth-foot { font-size: 13px; color: var(--bx-muted); }
.bangsa-auth-foot a { color: var(--bx-brand); }

/* Auth card lifts the WPLM affiliate-form to remove its own card chrome */
.bangsa-auth-card-body .wplm-aff-form,
.bangsa-auth-card-body .wplm-buy-form,
.bangsa-auth-card-body .wplm-aff-dashboard,
.bangsa-auth-card-body .wplm-thankyou,
.bangsa-auth-card-body .wplm-member-orders {
	max-width: none; margin: 0; padding: 0; background: transparent;
	border: 0; box-shadow: none;
}

/* ============================================================== Dashboard template */

.bangsa-dash { padding: 48px 0 80px; background: var(--bx-bg-soft); min-height: calc(100vh - 80px); }
.bangsa-dash-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 24px; flex-wrap: wrap;
	margin-bottom: 32px;
}
.bangsa-dash-title { font-size: 28px; margin: 4px 0 0; letter-spacing: -0.02em; }
.bangsa-dash-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--bx-line); border-radius: 10px; padding: 4px; }
.bangsa-dash-tabs a {
	padding: 8px 14px; font-size: 14px; font-weight: 600;
	color: var(--bx-muted); border-radius: 6px;
}
.bangsa-dash-tabs a:hover { color: var(--bx-ink); background: var(--bx-bg-soft); }
.bangsa-dash-tabs a.is-active { background: var(--bx-ink); color: #fff; }

.bangsa-dash-body .wplm-aff-dashboard,
.bangsa-dash-body .wplm-member-orders {
	max-width: none; margin: 0;
}

/* ============================================================== Bare template */

.bangsa-bare { padding: 56px 0 80px; background: var(--bx-bg-soft); min-height: calc(100vh - 80px); }
.bangsa-bare-head { text-align: center; margin-bottom: 32px; }
.bangsa-bare-title { font-size: 32px; letter-spacing: -0.02em; margin: 0; }

/* ============================================================== Default page */

.bangsa-section-page { padding: 56px 0 80px; min-height: calc(100vh - 80px); }
.bangsa-article-head { text-align: center; margin-bottom: 32px; }
.bangsa-article-title { font-size: clamp(2rem, 3vw, 2.5rem); }
.bangsa-content h2 { margin-top: 32px; }
.bangsa-content h3 { margin-top: 24px; }
.bangsa-content ul,
.bangsa-content ol { padding-left: 24px; }

/* ============================================================== WPLM shortcode style overrides for theme integration */

.bangsa-content .wplm-buy-form,
.bangsa-content .wplm-aff-form,
.bangsa-content .wplm-aff-dashboard,
.bangsa-content .wplm-thankyou,
.bangsa-content .wplm-member-orders {
	font-family: inherit;
}

/* Make WPLM buttons match theme buttons */
.wplm-buy-form button,
.wplm-aff-form button,
.wplm-aff-dashboard button,
.wplm-buy-submit {
	font-family: var(--bx-font);
	box-shadow: 0 4px 14px rgba(249, 115, 22,0.35);
}

/* ============================================================ */
/* Mobile tightening — make every section feel native on phones */
/* ============================================================ */

@media (max-width: 720px) {
	/* Bigger hero text but tighter padding */
	.bangsa-hero { padding: 40px 0 56px; }
	.bangsa-h1 { font-size: 2.1rem; letter-spacing: -0.025em; }
	.bangsa-lead { font-size: 16.5px; margin-bottom: 24px; }
	.bangsa-hero-ctas { gap: 10px; }
	.bangsa-hero-ctas .bangsa-btn { flex: 1 1 auto; min-width: 0; }
	.bangsa-hero-ctas .bangsa-btn-lg {
		padding: 14px 18px; font-size: 15.5px;
		justify-content: center;
		min-height: 50px;
	}
	.bangsa-hero-bullets { font-size: 13px; gap: 10px 16px; }

	/* Hero mockup shadow + bezel scale down */
	.bangsa-mock { border-radius: 12px; }
	.bangsa-mock-bar { padding: 8px 10px; }
	.bangsa-mock-url { font-size: 10px; margin-left: 8px; }

	/* Proof strip — 2x2 with tighter gaps */
	.bangsa-proof { padding: 24px 0; }
	.bangsa-proof-stats strong { font-size: 20px; }
	.bangsa-proof-stats span { font-size: 10.5px; }

	/* Sections + headings */
	.bangsa-section { padding: 48px 0; }
	.bangsa-section-head { margin: 0 auto 32px; }
	.bangsa-h2 { font-size: 1.7rem; }
	.bangsa-section-lead { font-size: 15.5px; }

	/* Feature cards: tighter spacing */
	.bangsa-feature-card { padding: 22px; }
	.bangsa-feature-card h3 { font-size: 16.5px; }
	.bangsa-feature-card p { font-size: 14px; }

	/* Pricing card stacks fine but tighter */
	.bangsa-price-card { padding: 24px; }
	.bangsa-price-amount { font-size: 34px; }
	.bangsa-price-card-pop { transform: none; }

	/* FAQ touch targets */
	.bangsa-faq summary { padding: 18px 20px; padding-right: 44px; min-height: 44px; }
	.bangsa-faq summary::after { right: 18px; }

	/* CTA strip */
	.bangsa-cta-strip { padding: 56px 0; }
	.bangsa-cta-buttons { flex-direction: column; }
	.bangsa-cta-buttons .bangsa-btn { width: 100%; justify-content: center; }

	/* Affiliate teaser card */
	.bangsa-affil-card { padding: 28px 24px; gap: 24px; }

	/* Mobile section: tighter spacing */
	.bangsa-mobile-feats { gap: 14px; margin-bottom: 24px; }
	.bangsa-mobile-feats strong { font-size: 15px; }
	.bangsa-mobile-feats div { font-size: 14px; }

	/* App badges centered on mobile */
	.bangsa-app-badges { justify-content: flex-start; }
	.bangsa-app-badge { padding: 8px 14px; }
	.bangsa-app-badge strong { font-size: 14px; }

	/* Footer tighter */
	.bangsa-footer { padding: 48px 0 24px; }
	.bangsa-footer-grid { gap: 32px 24px; padding-bottom: 32px; }
}

/* Even tighter on phones */
@media (max-width: 480px) {
	.bangsa-h1 { font-size: 1.85rem; }
	.bangsa-hero-bullets { display: none; }  /* save vertical space */
	.bangsa-proof-stats { gap: 18px 12px; }
	.bangsa-proof-stats strong { font-size: 18px; }

	/* App badges full-width on tiny screens */
	.bangsa-app-badges { flex-direction: column; }
	.bangsa-app-badge { width: 100%; justify-content: center; }
}

/* ========================================================================= */
/* CONVERSION BOOSTERS — promo banner, personas, comparison, guarantee,    */
/* founder note                                                            */
/* ========================================================================= */

/* Hero launch promo banner — price-tag style (kompak, jelas) */
.bangsa-hero-promo {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 5px 8px 5px 4px;
	background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
	border: 1px solid #fdba74;
	border-radius: 999px;
	margin-bottom: 20px;
	max-width: 100%;
	line-height: 1.2;
	box-shadow: 0 1px 3px rgba(249, 115, 22,0.12);
}

.bangsa-hero-promo-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px 4px 8px;
	background: var(--bx-brand-dark);
	color: #fff;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.bangsa-hero-promo-tag-emoji {
	font-size: 12px;
	font-family: var(--bx-font-emoji);
	line-height: 1;
}

.bangsa-hero-promo-prices {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--bx-ink);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.bangsa-hero-promo-prices s {
	color: #94a3b8;
	font-weight: 500;
	text-decoration: line-through;
	text-decoration-color: rgba(220, 38, 38, 0.65);
	text-decoration-thickness: 1.5px;
	font-size: 12.5px;
}

.bangsa-hero-promo-prices strong {
	color: var(--bx-brand-dark);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.bangsa-hero-promo-per {
	color: var(--bx-ink-2);
	font-weight: 500;
	font-size: 13px;
}

.bangsa-hero-promo-deadline {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--bx-brand-dark);
	padding: 2px 9px;
	background: rgba(255,255,255,0.65);
	border-radius: 999px;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

/* Personas */
/* ====================================================== Testimonials */
.bangsa-section-testi { background: var(--bx-bg-soft); }
.bangsa-testi-label {
	text-align: center; text-transform: uppercase; letter-spacing: 0.12em;
	font-size: 13px; font-weight: 600; color: var(--bx-muted-2); margin: 0 0 40px;
}
.bangsa-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 880px) {
	.bangsa-testi-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
.bangsa-testi-card {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--bx-line); border-radius: var(--bx-radius-lg);
	padding: 30px 28px; margin: 0; box-shadow: 0 10px 30px -16px rgba(15, 23, 42, 0.12);
}
.bangsa-testi-quote {
	position: absolute; top: 16px; right: 24px;
	font-family: Georgia, "Times New Roman", serif; font-size: 56px; line-height: 1;
	color: rgba(249, 115, 22, 0.18); font-weight: 700; pointer-events: none;
}
.bangsa-testi-stars { display: inline-flex; gap: 2px; margin-bottom: 16px; }
.bangsa-testi-stars .bx-star { display: block; }
.bangsa-testi-card blockquote {
	margin: 0 0 24px; flex: 1; color: var(--bx-ink-2); font-size: 15.5px; line-height: 1.65;
}
.bangsa-testi-by { display: flex; align-items: center; gap: 12px; margin: 0; }
.bangsa-testi-avatar {
	flex: none; width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: #16213a; color: #fdba74;
	font-weight: 700; font-size: 14px; font-family: var(--bx-font-head); letter-spacing: 0.02em;
}
.bangsa-testi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bangsa-testi-meta { display: flex; flex-direction: column; line-height: 1.35; }
.bangsa-testi-meta strong { color: var(--bx-ink); font-size: 15px; }
.bangsa-testi-meta span { color: var(--bx-muted); font-size: 13px; }

/* 2-up supporting grid + featured (long) testimonial */
.bangsa-testi-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .bangsa-testi-grid-2 { grid-template-columns: 1fr; max-width: 520px; } }

.bangsa-testi-featured {
	position: relative; overflow: hidden;
	max-width: 920px; margin: 24px auto 0;
	display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center;
	background: linear-gradient(135deg, #0f172a 0%, #1b2540 100%);
	border-radius: var(--bx-radius-lg); padding: 40px 44px;
}
@media (max-width: 760px) {
	.bangsa-testi-featured { grid-template-columns: 1fr; gap: 22px; padding: 30px 24px; text-align: center; }
}
.bangsa-testi-featured-aside { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .bangsa-testi-featured-aside { align-items: center; } }
.bangsa-testi-featured-avatar { width: 72px; height: 72px; border-radius: 999px; overflow: hidden; border: 2px solid rgba(249, 115, 22, 0.55); }
.bangsa-testi-featured-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bangsa-testi-featured-id { display: flex; flex-direction: column; gap: 2px; }
.bangsa-testi-featured-name { color: #fff; font-weight: 700; font-size: 16px; font-family: var(--bx-font-head); }
.bangsa-testi-featured-role { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.bangsa-testi-featured-quote { margin: 0; }
.bangsa-testi-featured-quote p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.88); font-size: 16px; line-height: 1.65; }
.bangsa-testi-featured-quote p:last-child { margin-bottom: 0; }
.bangsa-testi-featured .bangsa-testi-quote { color: rgba(249, 115, 22, 0.45); top: 14px; right: 22px; }

/* Comparison table */
.bangsa-section-compare {
	background: linear-gradient(180deg, var(--bx-bg-soft) 0%, #fff 100%);
}

.bangsa-compare-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -16px;
	padding: 0 16px;
}
.bangsa-compare {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 600px;
}
.bangsa-compare th,
.bangsa-compare td {
	padding: 16px 18px;
	text-align: left;
	font-size: 14.5px;
	border-bottom: 1px solid var(--bx-line);
}
.bangsa-compare thead th {
	font-size: 13px;
	font-weight: 600;
	color: var(--bx-muted);
	background: transparent;
	border-bottom: 2px solid var(--bx-line);
}
.bangsa-compare tbody td { color: var(--bx-muted); }
.bangsa-compare tbody td:first-child { color: var(--bx-ink); font-weight: 600; }

.bangsa-compare-col-us {
	background: #fff;
	position: relative;
}
.bangsa-compare-col-us-pill {
	display: inline-block;
	padding: 4px 12px;
	background: var(--bx-brand);
	color: #fff;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.bangsa-compare tbody td.bangsa-us,
.bangsa-compare tbody td:last-child {
	background: var(--bx-brand-soft);
	color: var(--bx-ink);
}
.bangsa-compare tbody td:last-child strong { color: var(--bx-brand-dark); }

.bangsa-compare tbody tr:first-child td:last-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.bangsa-compare tbody tr:last-child td:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom: 0; }

.bangsa-compare-foot {
	text-align: center;
	color: var(--bx-muted);
	margin-top: 24px;
	font-size: 15px;
}
.bangsa-compare-foot strong { color: var(--bx-ink); }

@media (max-width: 720px) {
	.bangsa-compare th, .bangsa-compare td { padding: 12px 14px; font-size: 13px; }
}

/* Guarantee strip */
.bangsa-guarantee-strip {
	padding: 40px 0;
	background: var(--bx-brand-soft);
	border-top: 1px solid #fed7aa;
	border-bottom: 1px solid #fed7aa;
}
.bangsa-guarantee-inner {
	display: flex; align-items: center; gap: 24px; max-width: 760px;
}
@media (max-width: 720px) {
	.bangsa-guarantee-inner { flex-direction: column; text-align: center; }
}
.bangsa-guarantee-icon { color: var(--bx-brand-dark); flex-shrink: 0; }
.bangsa-guarantee-strip h3 { margin: 0 0 4px; font-size: 22px; color: var(--bx-ink); }
.bangsa-guarantee-strip p { margin: 0; color: var(--bx-ink-2); font-size: 15.5px; line-height: 1.55; }

/* Pricing — anchor strikethrough + footrow */
.bangsa-price-was {
	display: inline-block;
	font-size: 22px;
	font-weight: 500;
	color: var(--bx-muted);
	margin-right: 8px;
	text-decoration: line-through;
	text-decoration-color: var(--bx-danger);
	text-decoration-thickness: 2px;
	letter-spacing: -0.02em;
}

.bangsa-price-sub strong { color: var(--bx-brand-dark); font-weight: 700; }

.bangsa-pricing-footrow {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px;
	margin-top: 28px;
	color: var(--bx-muted); font-size: 13.5px;
}
.bangsa-pricing-footitem {
	display: inline-flex; align-items: center; gap: 6px;
}
.bangsa-pricing-footitem span {
	color: var(--bx-success); font-weight: 700;
}

/* Founder card */
.bangsa-section-founder {
	background: #fff;
	padding-top: 56px;
	padding-bottom: 56px;
}
.bangsa-founder-card {
	display: flex; align-items: center; gap: 28px;
	background: var(--bx-bg-soft);
	border: 1px solid var(--bx-line);
	border-radius: var(--bx-radius-lg);
	padding: 36px;
}
@media (max-width: 640px) {
	.bangsa-founder-card { flex-direction: column; text-align: center; padding: 28px; gap: 20px; }
}
.bangsa-founder-photo {
	flex-shrink: 0;
	width: 96px; height: 96px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--bx-brand) 0%, var(--bx-brand-dark) 100%);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-weight: 800; font-size: 32px;
	letter-spacing: 0.02em;
	box-shadow: 0 8px 20px -4px rgba(249, 115, 22,0.4);
}
.bangsa-founder-quote {
	margin: 0; flex: 1; min-width: 0;
}
.bangsa-founder-quote p {
	font-size: 17px; line-height: 1.55; color: var(--bx-ink-2);
	margin: 0 0 16px;
	font-style: italic;
}
.bangsa-founder-quote footer {
	display: flex; flex-direction: column; gap: 2px;
}
.bangsa-founder-quote strong { font-size: 15px; color: var(--bx-ink); }
.bangsa-founder-quote span { font-size: 13px; color: var(--bx-muted); }
@media (max-width: 640px) {
	.bangsa-founder-quote footer { align-items: center; }
}

/* Final CTA guarantee line */
.bangsa-cta-guarantee {
	margin-top: 24px !important;
	font-size: 13.5px !important;
	color: rgba(255,255,255,0.5) !important;
}

/* ========================================================================= */
/* FIGHTER HQ SECTION — dark-themed visceral before/after                  */
/* ========================================================================= */

/* ====================================================== Untung sebenar (vs) */
.bangsa-section-untung { background: var(--bx-bg-soft); }
.bangsa-section-untung .bangsa-section-head { max-width: 760px; }

.bangsa-eyebrow-red {
	background: #fef2f2; color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.18);
}
.bangsa-eyebrow-red .bangsa-eyebrow-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }

.bangsa-vs-grid {
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
	align-items: stretch; max-width: 1000px; margin: 8px auto 0;
}
@media (max-width: 880px) {
	.bangsa-vs-grid { grid-template-columns: 1fr; gap: 14px; max-width: 560px; }
}

.bangsa-vs-card {
	display: flex; flex-direction: column;
	border-radius: var(--bx-radius-lg); padding: 28px; border: 1px solid transparent;
}
.bangsa-vs-card-bad  { background: #fef4f4; border-color: #fbdcdc; }
.bangsa-vs-card-good { background: #fffaeb; border-color: #fceabf; }

.bangsa-vs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bangsa-vs-emoji { font-size: 22px; line-height: 1; font-family: var(--bx-font-emoji); }
.bangsa-vs-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--bx-ink); }

.bangsa-vs-list {
	list-style: none; padding: 0; margin: 0; flex: 1;
	display: flex; flex-direction: column; gap: 14px;
	font-size: 15px; line-height: 1.5; color: var(--bx-ink-2);
}
.bangsa-vs-list li { position: relative; padding-left: 30px; }
.bangsa-vs-list li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
	background-repeat: no-repeat; background-position: center; background-size: contain;
}
.bangsa-vs-card-bad .bangsa-vs-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.bangsa-vs-card-good .bangsa-vs-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.bangsa-vs-list strong { color: var(--bx-ink); font-weight: 700; }
.bangsa-vs-list em { color: var(--bx-muted); font-style: normal; font-size: 13.5px; }
.bangsa-vs-profit strong { color: var(--bx-brand); font-size: 17px; }

.bangsa-vs-foot {
	margin-top: 20px; padding: 12px 16px; border-radius: 12px;
	font-weight: 600; font-size: 14.5px; text-align: center;
}
.bangsa-vs-foot-bad  { background: #fcdede; color: #dc2626; }
.bangsa-vs-foot-good { background: #fbe7bd; color: #b45309; }

.bangsa-vs-divider { display: flex; align-items: center; justify-content: center; }
.bangsa-vs-divider span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 999px;
	background: #fff; border: 1px solid var(--bx-line);
	font-size: 13px; font-weight: 700; color: var(--bx-muted);
	text-transform: uppercase; letter-spacing: 0.04em;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
@media (max-width: 880px) { .bangsa-vs-divider span { width: 38px; height: 38px; } }

/* Hero promo on mobile: tighter */
@media (max-width: 480px) {
	.bangsa-hero-promo { padding: 4px 6px 4px 3px; gap: 5px 7px; }
	.bangsa-hero-promo-tag { font-size: 10px; padding: 3px 8px 3px 6px; letter-spacing: 0.05em; }
	.bangsa-hero-promo-tag-emoji { font-size: 11px; }
	.bangsa-hero-promo-prices { font-size: 13px; gap: 5px; }
	.bangsa-hero-promo-prices s { font-size: 12px; }
	.bangsa-hero-promo-prices strong { font-size: 14px; }
	.bangsa-hero-promo-per { font-size: 12px; }
	.bangsa-hero-promo-deadline { font-size: 10.5px; padding: 2px 7px; }
}

/* ===================================================== App phone (real iOS screenshots) */
.bangsa-mobile-visual {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	min-height: 0;
}
.bangsa-appphone {
	position: relative;
	width: 300px; aspect-ratio: 1320 / 2868;
	background: #0b1220;
	border-radius: 46px;
	padding: 12px;
	box-shadow: 0 40px 80px -24px rgba(15,23,42,0.45), 0 12px 30px rgba(15,23,42,0.18);
}
.bangsa-appphone-notch {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
	width: 110px; height: 28px; background: #0b1220;
	border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
	z-index: 3;
}
.bangsa-appphone-screen {
	position: relative; width: 100%; height: 100%;
	border-radius: 34px; overflow: hidden; background: #fff;
	transform: translateZ(0); isolation: isolate;  /* force clip of opacity-animated absolute children (Safari/Chrome) */
}
.bangsa-appphone-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border-radius: 34px;  /* belt-and-suspenders: clip the screenshot to the screen corners */
	object-fit: cover; object-position: top center;
	opacity: 0; transition: opacity .6s ease; display: block;
}
.bangsa-appphone-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bangsa-appphone-img { transition: none; } }
.bangsa-appphone-cap {
	margin: 20px 0 12px; text-align: center;
	font-family: var(--bx-font-head); font-weight: 600;
	font-size: 16px; color: var(--bx-ink);
}
.bangsa-appphone-dots { display: flex; justify-content: center; gap: 9px; }
.bangsa-appphone-dot {
	width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
	background: var(--bx-line); cursor: pointer; transition: background .2s, transform .2s;
}
.bangsa-appphone-dot:hover { background: var(--bx-muted-2); }
.bangsa-appphone-dot.is-active { background: var(--bx-brand); transform: scale(1.25); }
/* Premium single-screenshot placement: warm glow backdrop + Apple-style scroll reveal */
.bangsa-mobile-visual::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 50%; top: 46%; transform: translate(-50%, -50%);
	width: 460px; height: 540px; max-width: 130%;
	background: radial-gradient(closest-side, rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0.06) 55%, transparent 75%);
	filter: blur(4px);
}
.bangsa-appphone { z-index: 1; }
.bangsa-appphone.bx-reveal {
	opacity: 0; transform: translateY(30px) scale(0.96);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.bangsa-appphone.bx-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 600px) { .bangsa-appphone { width: 260px; } }

/* ============================================================
   Elementor home integration shim
   When bangsa layout wrappers are rebuilt as Elementor containers
   (.e-con, sometimes with an inner .e-con-inner), Elementor forces
   display:flex/column. These two-class rules restore each wrapper's
   intended layout (specificity .e-con.bangsa-x beats .e-con). The
   ">.e-con-inner" twin covers the boxed-container case where the
   children live in the inner wrapper instead of the outer one.
   ============================================================ */
/* Restore the centred max-width container (Elementor's .e-con-full forces 100%). */
.e-con.bangsa-container { width: 100%; max-width: 1200px; margin-inline: auto; padding: 0 24px; }
.e-con.bangsa-container-narrow { max-width: 820px; }

/* Hero 2-column grid. */
.e-con.bangsa-hero-grid, .e-con.bangsa-hero-grid > .e-con-inner {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 980px) { .e-con.bangsa-hero-grid, .e-con.bangsa-hero-grid > .e-con-inner { grid-template-columns: 1fr; gap: 40px; } }

/* Features grid (3 → 2 → 1). */
.e-con.bangsa-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .e-con.bangsa-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .e-con.bangsa-features-grid { grid-template-columns: 1fr; } }

/* Personas grid (3 → 1). */
.e-con.bangsa-personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .e-con.bangsa-personas-grid { grid-template-columns: 1fr; } }

/* Fighter before/after (1fr auto 1fr → 1fr) + feature grid (4 → 2 → 1). */
.e-con.bangsa-fighter-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 760px) { .e-con.bangsa-fighter-grid { grid-template-columns: 1fr; } }
.e-con.bangsa-fighter-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 880px) { .e-con.bangsa-fighter-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .e-con.bangsa-fighter-features { grid-template-columns: 1fr; } }

/* Guarantee strip (flex icon + text) + founder card (flex photo + quote). */
.e-con.bangsa-guarantee-inner { display: flex; align-items: center; gap: 24px; max-width: 760px; }
@media (max-width: 720px) { .e-con.bangsa-guarantee-inner { flex-direction: column; text-align: center; } }
.e-con.bangsa-founder-card { display: flex; align-items: center; gap: 28px; }
@media (max-width: 600px) { .e-con.bangsa-founder-card { flex-direction: column; text-align: center; } }

/* Elementor gives each widget a default bottom margin and containers a default gap;
   inside bangsa wrappers the bangsa elements own their spacing, so neutralise both. */
.e-con[class*="bangsa-"] > .elementor-widget { margin-bottom: 0; }
/* Card item containers must not impose Elementor's flex gap on their single text child. */
.e-con.bangsa-feature-card, .e-con.bangsa-persona, .e-con.bangsa-fighter-feat, .bangsa-hero-copy { gap: 0; }