/* Billinkit landing — custom styles after Bootstrap (loaded in head.php). */

.text-accent-green {
	color: var(--green);
}

.categories-inner {
	text-align: center;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.section-sub-centered {
	margin-left: auto;
	margin-right: auto;
}

.footer-brand-mark {
	margin-bottom: 12px;
}

.footer-logo-size {
	font-size: 32px;
}

:root {
		--yellow: #FFD000;
		--yellow-dark: #E5BB00;
		--yellow-light: #FFF5BB;
		--green: #2E7D32;
		--green-light: #4CAF50;
		--black: #1A1A1A;
		--white: #FFFFFF;
		--gray: #F7F7F5;
		--gray2: #EBEBEB;
		--text-muted: #666;
	}

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

	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: 'Nunito Sans', sans-serif;
		background: var(--white);
		color: var(--black);
		overflow-x: hidden;
		padding-bottom: env(safe-area-inset-bottom);
	}

	body.nav-open {
		overflow: hidden;
		touch-action: none;
	}

	:focus-visible {
		outline: 3px solid var(--green);
		outline-offset: 3px;
	}

	.skip-link {
		position: absolute;
		left: -9999px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.skip-link:focus {
		position: fixed;
		left: 16px;
		top: 16px;
		width: auto;
		height: auto;
		z-index: 200;
		padding: 12px 20px;
		background: var(--black);
		color: var(--yellow);
		font-weight: 800;
		border-radius: 8px;
		text-decoration: none;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		.hero-figure,
		.marquee-track {
			animation: none !important;
		}

		.hero-badge,
		h1,
		.hero-sub,
		.hero-actions,
		.hero-stats,
		.hero-visual {
			animation: none !important;
		}

		.nav-drawer {
			transition: none;
		}

		.nav-backdrop {
			transition: none;
		}

		.cat-card,
		.cat-card:hover,
		.cat-card__icon-wrap,
		.cat-card:hover .cat-card__icon-wrap {
			transition: none;
			transform: none;
		}
	}

	/* NAV */
	.site-nav {
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 1px 0 rgba(255, 208, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.04);
		padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
	}

	.site-nav__inner {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 60px;
		padding: 8px 0;
	}

	.brand-mark {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: inherit;
		min-width: 0;
		flex-shrink: 1;
	}

	.brand-mark img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
	}

	.nav-logo {
		font-family: 'Nunito', sans-serif;
		font-size: clamp(22px, 4vw, 26px);
		font-weight: 900;
		letter-spacing: -0.03em;
		line-height: 1;
		white-space: nowrap;
		display: inline-flex;
		align-items: baseline;
		gap: 0;
	}

	.nav-logo__billi,
	.nav-logo__nkit {
		display: inline-block;
		margin: 0;
		padding: 0;
		letter-spacing: inherit;
	}

	.nav-logo__billi {
		color: var(--black);
	}

	.nav-logo__nkit {
		color: var(--green);
	}

	.nav-links {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.nav-links--desktop {
		display: flex;
		align-items: center;
		gap: clamp(16px, 2vw, 28px);
	}

	.nav-links--desktop a {
		font-size: 14px;
		font-weight: 700;
		color: var(--black);
		text-decoration: none;
		transition: color 0.2s;
		padding: 8px 0;
	}

	.nav-links--desktop a:hover {
		color: var(--green);
	}

	.site-nav__actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}

	.nav-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: var(--yellow);
		color: var(--black);
		border: none;
		border-radius: 999px;
		padding: 10px 18px;
		min-height: 44px;
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		font-weight: 800;
		text-decoration: none;
		cursor: pointer;
		transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
		box-shadow: 0 2px 8px rgba(255, 208, 0, 0.45);
	}

	.nav-cta:hover {
		background: var(--yellow-dark);
		transform: translateY(-1px);
		color: var(--black);
	}

	.nav-cta__icon {
		font-size: 12px;
	}

	.nav-cta__short {
		display: none;
	}

	.nav-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: var(--white);
		border: 1px solid var(--gray2);
		border-radius: 12px;
		font-family: 'Nunito', sans-serif;
		cursor: pointer;
		color: var(--black);
		transition: background 0.2s, border-color 0.2s;
	}

	.nav-toggle:hover {
		background: var(--gray);
		border-color: var(--yellow-dark);
	}

	.nav-toggle__icon {
		font-size: 18px;
		line-height: 1;
	}

	.nav-toggle__icon--close {
		display: none;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
		display: none;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
		display: block;
	}

	.nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 98;
		background: rgba(26, 26, 26, 0.45);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 0.25s ease;
		pointer-events: none;
	}

	.nav-backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* HERO */
	.hero {
		background: var(--yellow);
		min-height: 92vh;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding: 0 5%;
		position: relative;
		overflow: hidden;
	}

	.hero::before {
		content: '';
		position: absolute;
		top: -80px;
		right: -80px;
		width: 400px;
		height: 400px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
		pointer-events: none;
	}

	.hero::after {
		content: '';
		position: absolute;
		bottom: -120px;
		left: 30%;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		pointer-events: none;
	}

	.hero-text {
		z-index: 1;
	}

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: var(--black);
		color: var(--yellow);
		padding: 6px 16px;
		border-radius: 50px;
		font-size: 13px;
		font-weight: 800;
		margin-bottom: 24px;
		animation: fadeUp 0.6s ease both;
	}

	.hero-badge .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--green-light);
		animation: blink 1.4s infinite;
	}

	@keyframes blink {

		0%,
		100% {
			opacity: 1
		}

		50% {
			opacity: 0.3
		}
	}

	h1 {
		font-family: 'Nunito', sans-serif;
		font-size: clamp(44px, 6vw, 80px);
		font-weight: 900;
		line-height: 1.05;
		letter-spacing: -2px;
		color: var(--black);
		animation: fadeUp 0.7s 0.1s ease both;
	}

	h1 .accent {
		color: var(--green);
	}

	.hero-sub {
		font-size: clamp(16px, 2vw, 20px);
		font-weight: 600;
		color: rgba(26, 26, 26, 0.7);
		margin: 20px 0 36px;
		max-width: 480px;
		line-height: 1.6;
		animation: fadeUp 0.7s 0.2s ease both;
	}

	.hero-actions {
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
		animation: fadeUp 0.7s 0.3s ease both;
	}

	.btn-primary {
			background: var(--black);
			color: var(--yellow);
			border: none;
			border-radius: 50px;
			padding: 16px 32px;
			min-height: 48px;
			font-family: 'Nunito', sans-serif;
			font-size: 16px;
			font-weight: 800;
			cursor: pointer;
			transition: transform 0.15s, background 0.2s;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

	.btn-primary:hover {
		transform: scale(1.04);
		background: #333;
	}

	.btn-secondary {
			background: transparent;
			color: var(--black);
			border: 2.5px solid var(--black);
			border-radius: 50px;
			padding: 16px 32px;
			min-height: 48px;
			font-family: 'Nunito', sans-serif;
			font-size: 16px;
			font-weight: 800;
			cursor: pointer;
			transition: transform 0.15s, background 0.2s;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

	.btn-secondary:hover {
		background: rgba(0, 0, 0, 0.07);
		transform: scale(1.04);
	}

	.hero-stats {
		display: flex;
		gap: 32px;
		margin-top: 48px;
		animation: fadeUp 0.7s 0.4s ease both;
	}

	.stat-num {
		font-family: 'Nunito', sans-serif;
		font-size: 28px;
		font-weight: 900;
		color: var(--black);
		display: block;
	}

	.stat-label {
		font-size: 13px;
		font-weight: 600;
		color: rgba(26, 26, 26, 0.6);
	}

	.hero-visual {
		display: flex;
		justify-content: center;
		align-items: center;
		animation: fadeUp 0.8s 0.15s ease both;
		z-index: 1;
	}

	.hero-figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		max-width: min(100%, clamp(260px, 42vw, 440px));
	}

	.hero-logo-img {
		width: 100%;
		height: auto;
		object-fit: contain;
		display: block;
		border-radius: 0;
	}

	.cat-emoji {
		font-size: clamp(80px, 12vw, 140px);
		line-height: 1;
	}

	.delivery-tag {
		position: relative;
		margin-top: 14px;
		background: var(--green);
		color: var(--white);
		border-radius: 50px;
		padding: 8px 20px;
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		font-weight: 800;
		white-space: nowrap;
		box-shadow: 0 4px 16px rgba(46, 125, 50, 0.4);
		display: inline-flex;
		align-items: center;
	}

	@keyframes fadeUp {
		from {
			opacity: 0;
			transform: translateY(24px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ERROR PAGES (404 / 500) */
	.error-page {
		min-height: min(70vh, 720px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: clamp(32px, 8vw, 72px) max(20px, 5%);
		background: var(--yellow);
		position: relative;
		overflow: hidden;
	}

	.error-page::before {
		content: '';
		position: absolute;
		top: -60px;
		right: -40px;
		width: 280px;
		height: 280px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
		pointer-events: none;
	}

	.error-page__inner {
		position: relative;
		z-index: 1;
		max-width: 520px;
	}

	.error-page__code {
		font-family: 'Nunito', sans-serif;
		font-size: clamp(56px, 14vw, 112px);
		font-weight: 900;
		line-height: 1;
		letter-spacing: -3px;
		color: var(--black);
		margin: 0 0 8px;
	}

	.error-page__title {
		font-family: 'Nunito', sans-serif;
		font-size: clamp(22px, 4vw, 32px);
		font-weight: 800;
		color: var(--black);
		margin: 0 0 12px;
	}

	.error-page__text {
		font-size: clamp(15px, 2.2vw, 18px);
		font-weight: 600;
		color: rgba(26, 26, 26, 0.72);
		line-height: 1.55;
		margin: 0 0 28px;
	}

	.error-page__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
	}

	/* MARQUEE */
	.marquee-wrap {
		background: var(--black);
		padding: 14px 0;
		overflow: hidden;
		white-space: nowrap;
	}

	.marquee-track {
		display: inline-block;
		animation: marquee 18s linear infinite;
	}

	.marquee-item {
		display: inline-block;
		font-family: 'Nunito', sans-serif;
		font-size: 15px;
		font-weight: 800;
		color: var(--yellow);
		padding: 0 28px;
	}

	.marquee-item .sep {
		color: var(--green-light);
		margin-left: 28px;
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	/* HOW IT WORKS */
	.section {
		padding: 96px 5%;
	}

	.section-tag {
		display: inline-block;
		background: var(--yellow-light);
		color: var(--green);
		padding: 6px 16px;
		border-radius: 50px;
		font-size: 13px;
		font-weight: 800;
		margin-bottom: 16px;
	}

	h2 {
		font-family: 'Nunito', sans-serif;
		font-size: clamp(32px, 4vw, 52px);
		font-weight: 900;
		letter-spacing: -1.5px;
		line-height: 1.1;
		margin-bottom: 16px;
	}

	.section-sub {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-muted);
		max-width: 520px;
		line-height: 1.6;
		margin-bottom: 56px;
	}

	.steps-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 24px;
	}

	.step-card {
		background: var(--gray);
		border-radius: 24px;
		padding: 32px 28px;
		position: relative;
		transition: transform 0.2s, box-shadow 0.2s;
		border: 2px solid transparent;
	}

	.step-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
		border-color: var(--yellow);
	}

	.step-num {
		font-family: 'Nunito', sans-serif;
		font-size: 48px;
		font-weight: 900;
		color: var(--yellow-dark);
		line-height: 1;
		margin-bottom: 8px;
	}

	.step-icon {
		font-size: 32px;
		margin-bottom: 14px;
		display: block;
	}

	.step-title {
		font-family: 'Nunito', sans-serif;
		font-size: 20px;
		font-weight: 800;
		margin-bottom: 8px;
	}

	.step-desc {
		font-size: 14px;
		color: var(--text-muted);
		line-height: 1.6;
		font-weight: 600;
	}

	/* CATEGORIES */
	.categories-section {
		background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-dark) 120%);
		padding: 80px max(20px, 5%);
	}

	.cat-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(14px, 2.5vw, 22px);
		margin-top: 48px;
		list-style: none;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	.cat-card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		min-height: 0;
		padding: 22px 14px 20px;
		background: var(--white);
		border-radius: 22px;
		border: 1px solid rgba(26, 26, 26, 0.06);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.04),
			0 8px 24px rgba(0, 0, 0, 0.06);
		cursor: default;
		transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	}

	.cat-card:hover {
		transform: translateY(-5px);
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.06),
			0 16px 40px rgba(0, 0, 0, 0.1);
		border-color: rgba(46, 125, 50, 0.25);
	}

	.cat-card__icon-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		margin-bottom: 14px;
		border-radius: 16px;
		background: linear-gradient(145deg, var(--yellow-light) 0%, rgba(255, 245, 187, 0.65) 100%);
		border: 1px solid rgba(255, 208, 0, 0.45);
		flex-shrink: 0;
		transition: transform 0.22s ease, background 0.22s ease;
	}

	.cat-card:hover .cat-card__icon-wrap {
		transform: scale(1.06);
		background: linear-gradient(145deg, #fff 0%, var(--yellow-light) 100%);
	}

	.cat-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		color: var(--green);
		line-height: 1;
	}

	.cat-card__icon i {
		line-height: 1;
	}

	.cat-card__name {
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		font-weight: 800;
		color: var(--black);
		line-height: 1.35;
		max-width: 12em;
	}

	.cat-card__blurb {
		margin: 8px 0 0;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.45;
		color: rgba(26, 26, 26, 0.58);
		max-width: 16em;
	}

	.cat-card--soon {
		background: linear-gradient(160deg, #fffef8 0%, var(--yellow-light) 100%);
		border: 2px dashed rgba(26, 26, 26, 0.12);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
	}

	.cat-card--soon:hover {
		border-color: rgba(46, 125, 50, 0.35);
	}

	.cat-card__icon-wrap--soon {
		background: rgba(255, 255, 255, 0.85);
		border-style: dashed;
		border-color: rgba(46, 125, 50, 0.2);
	}

	.cat-card--soon .cat-card__icon {
		color: var(--green);
	}

	.cat-card__badge {
		margin-top: auto;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--black);
		background: var(--yellow);
		border-radius: 999px;
		padding: 5px 12px;
		border: 1px solid rgba(26, 26, 26, 0.08);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	}

	/* FEATURES */
	.features-section {
		padding: 96px 5%;
		background: var(--white);
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		margin-top: 48px;
	}

	.feat-card {
		border: 2px solid var(--gray2);
		border-radius: 24px;
		padding: 32px;
		transition: border-color 0.2s, transform 0.2s;
	}

	.feat-card:hover {
		border-color: var(--yellow-dark);
		transform: translateY(-4px);
	}

	.feat-card.highlight {
		background: var(--yellow);
		border-color: var(--yellow-dark);
	}

		.feat-icon {
			font-size: 1.75rem;
			margin-bottom: 16px;
			display: block;
			color: var(--green);
		}

		.feat-card.highlight .feat-icon {
			color: var(--black);
		}

	.feat-title {
		font-family: 'Nunito', sans-serif;
		font-size: 20px;
		font-weight: 800;
		margin-bottom: 10px;
	}

	.feat-desc {
		font-size: 14px;
		color: var(--text-muted);
		line-height: 1.65;
		font-weight: 600;
	}

	.feat-card.highlight .feat-desc {
		color: rgba(26, 26, 26, 0.7);
	}

	/* TESTIMONIALS */
	.testimonials-section {
		background: var(--black);
		padding: 96px 5%;
	}

	.testimonials-section h2 {
		color: var(--yellow);
	}

	.testimonials-section .section-sub {
		color: rgba(255, 255, 255, 0.5);
	}

	.testimonials-section .section-tag {
		background: rgba(255, 208, 0, 0.15);
		color: var(--yellow);
	}

	.testi-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		margin-top: 48px;
	}

	.testi-card {
		background: #222;
		border-radius: 20px;
		padding: 28px;
		border: 1px solid #333;
		transition: border-color 0.2s;
	}

	.testi-card:hover {
		border-color: var(--yellow);
	}

		.testi-stars {
			color: var(--yellow);
			font-size: 18px;
			margin-bottom: 14px;
			letter-spacing: 2px;
			display: flex;
			gap: 4px;
		}

	.testi-text {
		font-size: 15px;
		color: rgba(255, 255, 255, 0.85);
		line-height: 1.7;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.testi-author {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.testi-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--yellow);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'Nunito', sans-serif;
		font-size: 16px;
		font-weight: 900;
		color: var(--black);
		flex-shrink: 0;
	}

	.testi-name {
		font-size: 14px;
		font-weight: 800;
		color: var(--white);
		line-height: 1.3;
		min-width: 0;
	}

	/* APP CTA */
	.app-section {
		background: var(--yellow);
		padding: 96px 5%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 48px;
	}

	.app-section h2 {
		letter-spacing: -1.5px;
	}

	.app-section .section-sub {
		margin-bottom: 36px;
	}

	.app-buttons {
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
	}

	.app-btn {
		background: var(--black);
		color: var(--white);
		border-radius: 14px;
		padding: 14px 24px;
		min-height: 48px;
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
		transition: transform 0.2s, background 0.2s;
		cursor: pointer;
		border: none;
	}

	.app-btn:hover {
		transform: scale(1.04);
		background: #333;
	}

		.app-btn-icon {
			font-size: 28px;
		}

		.app-btn-icon i {
			font-size: 28px;
			line-height: 1;
		}

	.app-btn-text .small {
		font-size: 11px;
		color: rgba(255, 255, 255, 0.6);
		display: block;
		font-weight: 600;
	}

	.app-btn-text .big {
		font-family: 'Nunito', sans-serif;
		font-size: 17px;
		font-weight: 800;
		color: var(--white);
		display: block;
	}

	.app-phones {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		padding: 8px 0 16px;
	}

	.phone-pair {
		position: relative;
		width: min(100%, 320px);
		height: 360px;
		margin: 0 auto;
	}

	.phone-device {
		position: absolute;
		bottom: 0;
		width: 178px;
		filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.2)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
	}

	.phone-device--rear {
		right: 0;
		z-index: 1;
		transform: scale(0.88) translate(6px, 14px);
	}

	.phone-device--front {
		left: 0;
		z-index: 2;
	}

	.phone-device__shell {
		background: linear-gradient(160deg, #3a3a3c 0%, #1c1c1e 40%, #0f0f10 100%);
		border-radius: 32px;
		padding: 10px;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.12),
			inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	}

	.phone-device__speaker {
		width: 42px;
		height: 4px;
		margin: 0 auto 7px;
		background: #0a0a0a;
		border-radius: 4px;
		opacity: 0.85;
	}

	.phone-device__screen {
		width: 100%;
		aspect-ratio: 9 / 18.5;
		border-radius: 24px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
	}

	.phone-device__screen--light {
		background: linear-gradient(180deg, #fafafa 0%, #f0f0f2 100%);
	}

	.phone-device__screen--dark {
		background: linear-gradient(180deg, #1a1a1c 0%, #0d0d0f 100%);
	}

	.phone-device__status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 14px 4px;
		font-size: 11px;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.55);
		font-variant-numeric: tabular-nums;
	}

	.phone-device__status--dark {
		color: rgba(255, 255, 255, 0.65);
	}

	.phone-device__status-icons {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 10px;
		opacity: 0.85;
	}

	.phone-device__app-title {
		font-family: 'Nunito', sans-serif;
		font-size: 13px;
		font-weight: 900;
		letter-spacing: -0.03em;
		text-align: center;
		color: var(--green);
		margin: 2px 10px 10px;
	}

	.phone-device__row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 8px 6px;
		padding: 8px 10px;
		background: var(--white);
		border-radius: 14px;
		border: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	.phone-device__row-icon {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--yellow-light);
		border-radius: 8px;
		color: var(--green);
		font-size: 13px;
		flex-shrink: 0;
	}

	.phone-device__row-text {
		flex: 1;
		min-width: 0;
		font-size: 11px;
		font-weight: 800;
		color: var(--black);
		text-align: left;
		line-height: 1.2;
	}

	.phone-device__row-add {
		font-size: 10px;
		font-weight: 900;
		padding: 6px 12px;
		border-radius: 999px;
		background: var(--yellow);
		color: var(--black);
		flex-shrink: 0;
	}

	.phone-device__track {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 12px 10px 16px;
		text-align: center;
	}

	.phone-device__track-title {
		font-family: 'Nunito', sans-serif;
		font-size: 12px;
		font-weight: 900;
		color: var(--yellow);
		margin-bottom: 10px;
	}

	.phone-device__track-icon {
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 208, 0, 0.12);
		border: 1px solid rgba(255, 208, 0, 0.25);
		color: var(--yellow);
		font-size: 24px;
		margin-bottom: 10px;
	}

	.phone-device__track-eta {
		font-size: 11px;
		font-weight: 800;
		color: rgba(255, 255, 255, 0.75);
		margin: 0;
	}

	/* FOOTER */
	footer {
		background: #121212;
		padding: 56px max(20px, 5%) max(48px, env(safe-area-inset-bottom));
		padding-left: max(20px, 5%, env(safe-area-inset-left));
		padding-right: max(20px, 5%, env(safe-area-inset-right));
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.footer-top {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		align-items: start;
		column-gap: clamp(24px, 4vw, 48px);
		row-gap: 40px;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 48px;
	}

	.footer-brand {
		min-width: 0;
	}

	.footer-brand .brand-mark {
		align-items: center;
	}

	.footer-brand .nav-logo {
		font-size: 32px;
		margin-bottom: 0;
	}

	.footer-brand .nav-logo__billi {
		color: rgba(255, 255, 255, 0.95);
	}

	.footer-brand .nav-logo__nkit {
		color: var(--green);
	}

	.footer-tagline {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.5);
		line-height: 1.6;
		font-weight: 600;
		max-width: 280px;
		margin-top: 12px;
	}

	.footer-col-title {
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		font-weight: 800;
		color: var(--yellow);
		margin-bottom: 16px;
		padding-top: 2px;
	}

	.footer-top > div:not(.footer-brand) {
		min-width: 0;
	}

	.footer-links {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.footer-links li {
		margin-bottom: 10px;
	}

	.footer-links li:last-child {
		margin-bottom: 0;
	}

	.footer-links a {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.55);
		text-decoration: none;
		font-weight: 600;
		transition: color 0.2s;
		display: inline-block;
	}

	.footer-links a:hover {
		color: var(--yellow);
	}

	.footer-parody {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		text-align: left;
	}

	.footer-parody__label {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		margin-bottom: 20px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.45);
	}

	.footer-parody__label i {
		font-size: 12px;
		opacity: 0.9;
	}

	.footer-parody__text {
		max-width: 36rem;
		margin: 0;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.6;
		color: #a3a3a3;
	}

	.footer-parody__credit {
		margin: 24px 0 0;
		max-width: 36rem;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.5;
		color: #a3a3a3;
	}

	.footer-parody__credit strong {
		font-weight: 800;
		color: #fff;
	}

	.footer-parody__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		margin-top: 28px;
	}

	.footer-parody__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 11px 20px;
		border-radius: 999px;
		border: 1px solid #333;
		background: rgba(255, 255, 255, 0.03);
		color: #b8b8b8;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		transition: border-color 0.2s, color 0.2s, background 0.2s;
		max-width: 100%;
	}

	.footer-parody__btn i {
		font-size: 16px;
		opacity: 0.9;
		flex-shrink: 0;
	}

	.footer-parody__btn span {
		text-align: left;
		word-break: break-word;
	}

	.footer-parody__btn:hover {
		border-color: #4a4a4a;
		color: #eee;
		background: rgba(255, 255, 255, 0.06);
	}

	.footer-parody__btn:focus-visible {
		outline-offset: 4px;
	}

	/* Drawer panel — off-canvas right (mobile / tablet). */
	.nav-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(100vw - 48px, 320px);
		max-width: 100%;
		z-index: 99;
		background: var(--white);
		box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
		padding: max(12px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
	}

	.nav-drawer.open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	.nav-drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 20px 16px;
		border-bottom: 1px solid var(--gray2);
		margin-bottom: 8px;
	}

	.nav-drawer__title {
		font-family: 'Nunito', sans-serif;
		font-size: 18px;
		font-weight: 800;
		color: var(--black);
	}

	.nav-drawer__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: none;
		background: var(--gray);
		border-radius: 12px;
		color: var(--black);
		cursor: pointer;
		transition: background 0.2s;
	}

	.nav-drawer__close:hover {
		background: var(--gray2);
	}

	.nav-links--drawer {
		flex: 1;
		padding: 0 12px;
		overflow-y: auto;
	}

	.nav-links--drawer li {
		border-bottom: 1px solid var(--gray2);
	}

	.nav-links--drawer a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px 12px;
		min-height: 52px;
		font-size: 16px;
		font-weight: 700;
		color: var(--black);
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
	}

	.nav-links--drawer a:hover {
		background: var(--yellow-light);
		color: var(--green);
	}

	.nav-drawer__link-icon {
		width: 24px;
		text-align: center;
		color: var(--green);
		font-size: 18px;
	}

	.nav-drawer__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 16px 20px 0;
		padding: 14px 20px;
		min-height: 48px;
		background: var(--yellow);
		color: var(--black);
		font-family: 'Nunito', sans-serif;
		font-size: 16px;
		font-weight: 800;
		text-decoration: none;
		border-radius: 14px;
		box-shadow: 0 4px 16px rgba(255, 208, 0, 0.4);
		transition: background 0.2s, transform 0.15s;
	}

	.nav-drawer__cta:hover {
		background: var(--yellow-dark);
		color: var(--black);
	}

	/* RESPONSIVE */
	@media (max-width: 991.98px) {
		.nav-links--desktop {
			display: none;
		}

		.nav-toggle {
			display: flex;
		}

		.nav-backdrop {
			display: block;
		}

		.nav-cta {
			padding: 10px 14px;
			font-size: 13px;
			min-height: 44px;
		}

		.nav-cta__icon {
			display: none;
		}
	}

	@media (min-width: 992px) {
		.nav-drawer,
		.nav-backdrop {
			display: none !important;
		}

		.nav-toggle {
			display: none !important;
		}
	}

	@media (max-width: 380px) {
		.nav-cta__full {
			display: none;
		}

		.nav-cta__short {
			display: inline;
		}
	}

	@media (max-width: 768px) {
		.section {
			padding: 72px 5%;
		}

		.categories-section {
			padding: 64px 5%;
		}

		.features-section {
			padding: 72px 5%;
		}

		.testimonials-section {
			padding: 72px 5%;
		}

		.hero {
			grid-template-columns: 1fr;
			text-align: center;
			padding: 40px max(16px, 5%) 56px;
			min-height: auto;
			gap: 40px;
		}

		.hero-visual {
			order: -1;
		}

		.hero-sub {
			margin-left: auto;
			margin-right: auto;
		}

		.hero-actions {
			justify-content: center;
		}

		.hero-stats {
			justify-content: center;
			flex-wrap: wrap;
			gap: 24px 32px;
		}

		.stat-item {
			min-width: min(100%, 160px);
		}

		.app-section {
			padding: 72px 5%;
			grid-template-columns: 1fr;
			text-align: center;
		}

		.app-buttons {
			justify-content: center;
		}

		.app-phones {
			flex-wrap: wrap;
		}

		.footer-top {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.footer-brand {
			grid-column: 1 / -1;
		}

		.footer-parody {
			padding-top: 32px;
		}

		.footer-parody__btn {
			font-size: 13px;
			padding: 10px 16px;
		}
	}

	@media (max-width: 720px) {
		.cat-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}

		.cat-card {
			min-height: 0;
			padding: 18px 12px 16px;
		}

		.cat-card__icon-wrap {
			width: 50px;
			height: 50px;
			margin-bottom: 12px;
			border-radius: 14px;
		}

		.cat-card__icon {
			font-size: 1.35rem;
		}

		.cat-card__name {
			font-size: 13px;
		}

		.cat-card__blurb {
			font-size: 11px;
		}
	}

	@media (max-width: 576px) {
		.footer-top {
			grid-template-columns: 1fr;
			gap: 28px;
		}

		.steps-grid {
			grid-template-columns: 1fr;
		}

		.phone-pair {
			width: 100%;
			height: 310px;
		}

		.phone-device {
			width: 152px;
		}

		.phone-device--rear {
			transform: scale(0.86) translate(4px, 10px);
		}
	}