/******************************************************
    Avdar design layer

    Carries the look of the Avdar mobile app onto the
    template: tokens come from avdar-app/tailwind.config.js
    (gray scale, Manrope / Jost, rounded-3xl cards, pill
    buttons, onboarding gradient).

    Load after assets/colors/black.css.
******************************************************/

:root {
	--gray-0:#090809;
	--gray-100:#F7F7F7;
	--gray-200:#EEEEEE;
	--gray-400:#B2B2B2;
	--gray-500:#717171;
	--gray-600:#393939;
	--gray-800:#232323;
	--gray-900:#151515;

	--radius-xl:12px;
	--radius-2xl:16px;
	--radius-3xl:24px;

	--font-text:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-number:"Jost", "Manrope", system-ui, sans-serif;

	/* Onboarding screen gradient (get-started.tsx) */
	--gradient-onboard:linear-gradient(180deg, #D7EEF6 9%, #F7E9DC 47%, #F7F7F7 83%, #FFFFFF 100%);
}

/*********************
    - Typography -
*********************/
body,
p,
input,
textarea,
button,
h1, h2, h3, h4, h5, h6,
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
	font-family:var(--font-text);
}

body {
	color:var(--gray-500);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color:var(--gray-900);
	font-weight:800;
	letter-spacing:-0.01em;
}

p {
	color:var(--gray-500);
	font-size:16px;
}

::selection {
	background-color:var(--gray-900);
	color:#fff;
}

/*****************
    - Buttons -
*****************/
/* AppButton: h-[50px] rounded-3xl, black in light mode */
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:50px;
	padding:0 28px;
	background-color:var(--gray-900);
	color:#fff;
	font-size:16px;
	font-weight:600;
	border-radius:var(--radius-3xl);
}

.btn:hover,
.btn:focus,
.btn:active {
	background-color:var(--gray-600);
	color:#fff;
	box-shadow:none;
}

.btn:focus-visible {
	outline:2px solid var(--gray-900);
	outline-offset:3px;
}

/* Store buttons */
.button-store .custom-btn {
	min-width:172px;
	height:56px;
	padding:0 22px;
	background-color:var(--gray-900);
	border:1px solid var(--gray-900);
	border-radius:var(--radius-3xl);
	transition:background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.button-store .custom-btn i,
.button-store .custom-btn p,
.button-store .custom-btn p span,
.button-store .custom-btn:hover i,
.button-store .custom-btn:hover p,
.button-store .custom-btn:hover p span {
	color:#fff;
}

.button-store .custom-btn i {
	font-size:24px;
}

.button-store .custom-btn p {
	font-size:11px;
	font-weight:500;
}

.button-store .custom-btn p span {
	font-size:16px;
	font-weight:700;
}

.button-store .custom-btn:hover {
	background-color:var(--gray-600);
	border-color:var(--gray-600);
	transform:translateY(-1px);
}

/* Scroll top: echoes the app's rounded-2xl "+" button */
.to-top {
	width:48px;
	height:48px;
	right:24px;
	font-size:24px;
	line-height:48px;
	background-color:var(--gray-900);
	border:1px solid rgba(255, 255, 255, 0.24);
	border-radius:var(--radius-2xl);
	box-shadow:0 8px 24px rgba(21, 21, 21, 0.18);
}

.to-top div:before {
	line-height:48px;
}

.to-top:hover {
	background-color:var(--gray-600);
}

.to-top.fixed-totop {
	bottom:24px;
}

/******************
    - Sections -
******************/
section.bg-grey {
	background-color:var(--gray-100);
}

section.section-dark {
	background-color:var(--gray-900);
}

.section-title h2 {
	padding-bottom:5px;
	font-size:28px;
	letter-spacing:-0.02em;
}

.section-title p {
	font-size:17px;
	color:var(--gray-500);
}

section.section-dark .section-title h2 {
	color:#fff;
}

section.section-dark .section-title p {
	color:var(--gray-400);
}

/********************
    - Navigation -
********************/
.header {
	padding:28px 20px;
}

/* The hero is light now, so the dark logo is always shown */
.main-menu-area .navbar-brand1 {
	display:none;
}

.main-menu-area .navbar-brand2 {
	display:block;
}

.menu-bar span {
	height:2px;
	background-color:var(--gray-900);
	border-radius:2px;
}

.main-menu-area.fixed-menu {
	background-color:rgba(255, 255, 255, 0.96);
	border-bottom:1px solid var(--gray-200);
	box-shadow:none;
}

.nav-menu li a:hover {
	color:var(--gray-900) !important;
}

/******************
    - Banner -
******************/
.banner {
	height:auto;
	padding-top:150px;
	padding-bottom:110px;
}

.banner:before {
	background:var(--gradient-onboard);
}

/* Sits inside the h1, so it resets the heading's type */
.hero-chip {
	display:flex;
	align-items:center;
	gap:8px;
	width:fit-content;
	padding:5px 14px 5px 5px;
	margin:0 0 24px;
	background-color:rgba(255, 255, 255, 0.7);
	border:1px solid #fff;
	border-radius:999px;
	color:var(--gray-900);
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	letter-spacing:normal;
}

.hero-chip-emoji {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	font-size:15px;
	background-color:#fff;
	border-radius:50%;
}

/* Drawn in CSS so the emoji stays out of the h1 text */
.hero-chip-emoji:before {
	content:'💸';
}

/* Bold / light word split from the store artwork */
.banner-text h1 {
	color:var(--gray-900);
	font-size:56px;
	font-weight:800;
	line-height:1.08;
	letter-spacing:-0.03em;
	margin-bottom:24px;
}

.banner-text .hero-muted {
	color:var(--gray-500);
	font-weight:500;
}

.banner-text p {
	max-width:480px;
	font-size:18px;
	color:var(--gray-500);
	margin-bottom:36px;
}

/* Concentric rings from the onboarding screen */
.banner-image {
	position:relative;
}

.banner-image:before,
.banner-image:after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	border:3px solid #fff;
	border-radius:50%;
	transform:translate(-50%, -50%);
	pointer-events:none;
}

.banner-image:before {
	width:min(540px, 92vw);
	height:min(540px, 92vw);
}

.banner-image:after {
	width:min(270px, 46vw);
	height:min(270px, 46vw);
	background-color:rgba(247, 247, 247, 0.3);
}

.banner-image img {
	z-index:1;
	height:auto;
}

/* Float on transform: the template animates `top`, which relayouts
   every frame and steps in whole pixels. Too slow a float makes thin
   edges flicker between pixel positions on 1x screens, so keep the
   pace near 10px/s. */
.bounce-effect {
	animation:avdar-float 4s ease-in-out infinite;
	will-change:transform;
	backface-visibility:hidden;
}

@keyframes avdar-float {
	0%, 100%	{transform:translate3d(0, 0, 0);}
	50%			{transform:translate3d(0, -18px, 0);}
}

/********************
    - Features -
********************/
/* Cards follow the account card: bg-gray-100 rounded-3xl */
.features-item > li + li {
	margin-top:12px;
}

.feature-box {
	align-items:flex-start;
	margin-bottom:0;
	padding:20px;
	background-color:var(--gray-100);
	border-radius:var(--radius-3xl);
	transition:background-color 0.2s;
}

.feature-box:hover {
	background-color:var(--gray-200);
}

.feature-box .box-icon {
	flex:0 0 56px;
	width:56px;
	height:56px;
	max-width:none;
	padding:10px;
	margin-right:16px;
	background-color:#fff;
	border-radius:50%;
}

.feature-box .box-icon img {
	display:block;
	width:100%;
	height:100%;
}

.feature-box .box-text > h3 {
	font-size:17px;
	margin:2px 0 6px;
}

.feature-box .box-text p {
	font-size:15px;
	line-height:1.55;
	margin:0;
}

/********************
    - Overview -
********************/
.overview-box {
	align-items:flex-start;
	padding:20px;
	margin-bottom:12px;
	background-color:#fff;
	border-radius:var(--radius-3xl);
	box-shadow:none;
}

.overview-box:hover {
	background-color:#fff;
	box-shadow:0 12px 32px rgba(21, 21, 21, 0.06);
	transform:none;
}

.overview-box .icon,
.overview-box:hover .icon {
	width:56px;
	height:56px;
	line-height:56px;
	color:#fff;
	background-color:var(--gray-900);
	border-radius:var(--radius-2xl);
}

.overview-box .icon:before {
	line-height:56px;
}

.overview-box .content {
	width:calc(100% - 56px);
	padding-left:16px;
}

.overview-box .content h3 {
	font-size:17px;
	font-weight:800;
}

.overview-box .content p {
	font-size:15px;
	line-height:1.6;
}

.overview-box:hover .content h3 {
	color:var(--gray-900);
}

.overview-box:hover .content p {
	color:var(--gray-500);
}

/* Capability list styled like the app's transaction rows */
.overview-list {
	margin:0;
	padding:6px 20px;
	background-color:#fff;
	border-radius:var(--radius-3xl);
}

.overview-list li {
	display:flex;
	align-items:center;
	gap:16px;
	padding:14px 0;
	border-bottom:1px solid var(--gray-200);
}

.overview-list li:last-child {
	border-bottom:0;
}

.overview-list li p {
	margin:0;
	font-size:15px;
	font-weight:500;
	line-height:1.55;
	color:var(--gray-900);
}

.row-emoji {
	flex:0 0 32px;
	font-size:26px;
	line-height:1;
	text-align:center;
}

/************************
    - How it works -
************************/
.step-box {
	height:100%;
	padding:28px 24px;
	background-color:var(--gray-100);
	border-radius:var(--radius-3xl);
}

/* Numbers in Jost, like amounts in the app */
.step-number {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:48px;
	height:48px;
	margin-bottom:20px;
	color:#fff;
	font-family:var(--font-number);
	font-size:22px;
	font-weight:600;
	background-color:var(--gray-900);
	border-radius:var(--radius-2xl);
}

.step-box h3 {
	font-size:19px;
	margin:0 0 10px;
}

.step-box p {
	font-size:15px;
	line-height:1.65;
	margin:0;
}

/***************
    - FAQ -
***************/
.faq-item {
	margin-bottom:12px;
	background-color:#fff;
	border-radius:var(--radius-3xl);
}

.faq-item summary {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:20px 24px;
	list-style:none;
	cursor:pointer;
	border-radius:var(--radius-3xl);
}

.faq-item summary::-webkit-details-marker {
	display:none;
}

.faq-item summary:focus-visible {
	outline:2px solid var(--gray-900);
	outline-offset:-2px;
}

.faq-item summary:after {
	content:'+';
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 32px;
	height:32px;
	color:var(--gray-900);
	font-size:20px;
	line-height:1;
	background-color:var(--gray-100);
	border-radius:50%;
	transition:transform 0.2s;
}

.faq-item[open] summary:after {
	transform:rotate(45deg);
}

.faq-item summary h3 {
	font-size:17px;
	margin:0;
}

.faq-item p {
	padding:0 24px 22px;
	margin:0;
	font-size:15px;
	line-height:1.65;
}

.faq-item p a {
	color:var(--gray-900);
	text-decoration:underline;
}

/***********************
    - Screenshots -
***********************/
.screenshot-slider .owl-item img {
	border-radius:var(--radius-3xl);
}

/* Dots read like the Week / Month / Year switch */
.screenshot-slider .owl-dots .owl-dot span {
	width:8px;
	height:8px;
	margin:4px;
	border:0;
	background-color:var(--gray-600);
	border-radius:999px;
	transition:width 0.3s, background-color 0.3s;
}

.screenshot-slider .owl-dots .active span {
	width:24px;
	background-color:#fff;
}

/*******************
    - Contact -
*******************/
.contact-info h3 {
	display:flex;
	align-items:center;
	gap:12px;
	font-size:16px;
	margin:0 0 6px;
}

.contact-info .icon {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 44px;
	width:44px;
	height:44px;
	margin:0;
	font-size:20px;
	background-color:var(--gray-100);
	border-radius:50%;
}

.contact-info p {
	padding-left:56px;
	margin-bottom:28px;
}

.contact-info p a {
	color:var(--gray-500);
}

.contact-info p a:hover {
	color:var(--gray-900);
}

#contact-form {
	padding:24px;
	background-color:#fff;
	border:1px solid var(--gray-200);
	border-radius:var(--radius-3xl);
}

/* AppInput: bg-gray-100 rounded-xl h-[50px] */
#contact-form .form-control {
	height:50px !important;
	padding:0 20px;
	color:var(--gray-900);
	font-size:16px !important;
	font-weight:600 !important;
	background-color:var(--gray-100) !important;
	border:1px solid var(--gray-100) !important;
	border-radius:var(--radius-xl);
}

#contact-form textarea.form-control {
	height:auto !important;
	padding:14px 20px !important;
}

#contact-form .form-control::placeholder {
	color:var(--gray-400);
	font-weight:500;
	opacity:1;
}

#contact-form .form-control:focus {
	background-color:#fff !important;
	border-color:var(--gray-900) !important;
}

#contact-submit {
	min-width:160px;
}

.contact-form-result h3 {
	color:var(--gray-900);
	font-size:24px;
}

/******************
    - Footer -
******************/
footer {
	color:var(--gray-400);
	background-color:var(--gray-0);
}

footer p,
footer .footer-widgets a {
	color:var(--gray-400);
}

footer .footer-widgets a:hover,
footer .copyright a:hover {
	color:#fff;
}

footer .widget .widget-title {
	color:#fff;
	font-size:15px;
	margin:0 0 20px;
}

footer .footer-menu {
	font-weight:600;
}

footer .footer-copyright {
	border-top:1px solid var(--gray-800);
}

footer .copyright {
	font-size:14px;
}

/* Dark mode AppButton: light pill */
footer .widget .button-store .custom-btn {
	background-color:var(--gray-100);
	border-color:var(--gray-100);
}

footer .widget .button-store .custom-btn:hover {
	background-color:#fff;
	border-color:#fff;
}

footer .widget .button-store .custom-btn i,
footer .widget .button-store .custom-btn p,
footer .widget .button-store .custom-btn p span,
footer .widget .button-store .custom-btn:hover i,
footer .widget .button-store .custom-btn:hover p,
footer .widget .button-store .custom-btn:hover p span {
	color:var(--gray-900);
}

.footer-social a,
.footer-social button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	margin:0 8px 0 0;
	padding:0;
	background-color:var(--gray-800);
	border:0;
	border-radius:50%;
	transition:background-color 0.2s;
}

.footer-social a:hover,
.footer-social button:hover {
	background-color:#fff;
}

.footer-social a > i,
.footer-social button > i,
.footer-social .x-logo {
	color:#fff;
	font-size:15px;
}

.footer-social button:hover > i,
.footer-social a:hover .x-logo {
	color:var(--gray-900);
}

.footer-social .x-logo {
	font-size:17px;
	font-weight:700;
	line-height:1;
}

.footer-share-label {
	margin:24px 0 12px;
	font-size:14px;
}

/*************************
    - Media queries -
*************************/
@media (max-width:991px) {
	.op-mobile-menu .nav-menu li a {
		padding:14px 0;
		color:var(--gray-900);
		font-size:20px;
		font-weight:800;
		border-bottom:1px solid var(--gray-200);
	}

	.banner {
		padding-top:120px;
		padding-bottom:80px;
	}

	.hero-chip,
	.banner-text p {
		margin-left:auto;
		margin-right:auto;
	}

	.banner-text .button-store .custom-btn {
		padding:0 18px;
	}

	.contact-info h3 {
		justify-content:center;
	}

	.contact-info p {
		padding-left:0;
	}
}

@media (max-width:767px) {
	.banner-text h1 {
		font-size:36px;
		margin-bottom:16px;
	}

	.banner-text p {
		font-size:16px;
	}

	.section-title h2 {
		font-size:26px;
	}

	#contact-form {
		padding:16px;
	}
}

/* Desktop nav as the app's segmented control */
@media (min-width:992px) {
	.section-title h2 {
		font-size:40px;
	}

	.nav-menu {
		padding:4px;
		background-color:rgba(255, 255, 255, 0.55);
		border:1px solid rgba(255, 255, 255, 0.8);
		border-radius:999px;
	}

	.nav-menu li a,
	.main-menu-area.fixed-menu .nav-menu li a {
		display:block;
		padding:8px 18px;
		color:var(--gray-500);
		font-size:15px;
		font-weight:600;
		border-radius:999px;
		transition:background-color 0.2s, color 0.2s;
	}

	.nav-menu li a.active,
	.main-menu-area.fixed-menu .nav-menu li a.active {
		color:var(--gray-900);
		background-color:#fff;
		box-shadow:0 1px 3px rgba(21, 21, 21, 0.08);
	}

	.nav-menu li a span:after {
		display:none;
	}

	.main-menu-area.fixed-menu {
		background-color:rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter:saturate(180%) blur(16px);
		backdrop-filter:saturate(180%) blur(16px);
	}

	.main-menu-area.fixed-menu .nav-menu {
		background-color:var(--gray-100);
		border-color:var(--gray-100);
	}
}

@media (prefers-reduced-motion:reduce) {
	.bounce-effect,
	.wow {
		animation:none !important;
	}
}