/*
 * Bitsby landing theme
 * Design code: airy, flat, big radii, pill buttons
 * Accent: #3e97ff
 */

:root {
	--bb-accent: #3e97ff;
	--bb-accent-dark: #1f7ef0;
	--bb-accent-soft: #e7f2ff;
	--bb-accent-softer: #f2f8ff;
	--bb-ink: #2d3439;
	--bb-muted: #517185;
	--bb-bg-soft: #f4f5fa;
	--bb-radius-xl: 48px;
	--bb-radius-lg: 24px;
	--bb-radius-md: 16px;
	/* Elevation scale: sm = small elements (pills, accordion rows),
	   md = cards, lg = showcase blocks; hover lifts one level up */
	--bb-shadow-sm: 0 6px 18px rgba(45, 52, 57, .06);
	--bb-shadow-md: 0 10px 30px rgba(45, 52, 57, .06);
	--bb-shadow-lg: 0 18px 50px rgba(45, 52, 57, .1);
	--bb-shadow-hover: 0 18px 40px rgba(45, 52, 57, .1);
	--bb-shadow-btn: 0 8px 24px rgba(62, 151, 255, .35);
	--bb-shadow-btn-hover: 0 12px 28px rgba(62, 151, 255, .45);

	--bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", arial, sans-serif;
	--bs-body-color: var(--bb-ink);
	--bs-body-font-size: 1.125rem;
	--bs-primary: var(--bb-accent);
	--bs-primary-rgb: 62, 151, 255;
	--bs-link-color: var(--bb-accent);
	--bs-link-hover-color: var(--bb-accent-dark);
}

body {
	font-family: var(--bs-body-font-family);
	color: var(--bb-ink);
	font-size: 1.125rem;
	line-height: 1.6;
	background: #fff;
	overflow-x: hidden;
}

::selection {
	background: var(--bb-accent);
	color: #fff;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
	font-weight: 800;
	color: var(--bb-ink);
	line-height: 1.15;
}

.display-hero {
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.section-title {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

.text-muted-bb {
	color: var(--bb-muted) !important;
}

.lead-bb {
	font-size: 1.25rem;
	color: var(--bb-muted);
	font-weight: 600;
}

/* ---------- Buttons: pills ---------- */

.btn {
	border-radius: 100px;
	font-weight: 700;
	padding: 0.8rem 1.9rem;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-bb-primary {
	position: relative;
	overflow: hidden;
	background: var(--bb-accent);
	border: none;
	color: #fff;
	box-shadow: var(--bb-shadow-btn);
}

/* Attention blink: a glossy shine sweeps across the button periodically */
.btn-bb-primary::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -80%;
	width: 55%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
	animation: bb-shine 3.5s ease-in-out infinite;
}

@keyframes bb-shine {
	0% { left: -80%; }
	45% { left: 130%; }
	100% { left: 130%; }
}

.btn-bb-primary:hover,
.btn-bb-primary:focus {
	background: var(--bb-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--bb-shadow-btn-hover);
}

.btn-lg {
	padding: 1rem 2.4rem;
	font-size: 1.125rem;
}

/* ---------- Navbar ---------- */

.navbar-bb {
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(45, 52, 57, .06);
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.navbar-bb .nav-link {
	color: var(--bb-ink);
	font-weight: 700;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	border-radius: 100px;
}

.navbar-bb .nav-link:hover {
	color: var(--bb-accent);
	background: var(--bb-accent-softer);
}

.navbar-bb .navbar-brand img {
	height: 36px;
	width: auto;
}

/* ---------- Language switcher ---------- */

.lang-switch .lang-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: transparent;
	border: 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--bb-ink);
	padding: .5rem .7rem;
	border-radius: 100px;
	transition: background-color .15s ease, color .15s ease;
}

.lang-switch .lang-btn:hover,
.lang-switch .lang-btn[aria-expanded="true"] {
	color: var(--bb-accent);
	background: var(--bb-accent-softer);
}

/* Replace Bootstrap's triangle caret with our chevron */
.lang-switch .lang-btn.dropdown-toggle::after {
	display: none;
}

.lang-switch .chev {
	transition: transform .2s ease;
}

.lang-switch .lang-btn[aria-expanded="true"] .chev {
	transform: rotate(180deg);
}

.lang-menu {
	border: 1px solid rgba(45, 52, 57, .07);
	border-radius: var(--bb-radius-md);
	box-shadow: var(--bb-shadow-md);
	padding: .5rem;
	min-width: 190px;
}

.lang-menu .dropdown-item {
	position: relative;
	border-radius: 10px;
	font-weight: 600;
	color: var(--bb-ink);
	padding: .55rem 1rem .55rem 2.3rem;
}

.lang-menu .dropdown-item:hover {
	background: var(--bb-accent-softer);
	color: var(--bb-accent-dark);
}

.lang-menu .dropdown-item.active {
	background: transparent;
	color: var(--bb-ink);
}

.lang-menu .dropdown-item .check {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ---------- Sections ---------- */

.section {
	padding: 5.5rem 0;
}

.section-soft {
	background: var(--bb-bg-soft);
	border-radius: var(--bb-radius-xl);
}

.section-wrap {
	padding-left: 1rem;
	padding-right: 1rem;
}

.eyebrow {
	display: inline-block;
	background: var(--bb-accent-soft);
	color: var(--bb-accent-dark);
	font-weight: 800;
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 100px;
	padding: .45rem 1.1rem;
	margin-bottom: 1.25rem;
}

/* Anchor jump offset for sections without their own top padding:
   #tour is pt-0, so without this the heading lands under the fixed navbar */
#tour {
	scroll-margin-top: 5.5rem;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	padding: 9.5rem 0 4.5rem;
	background:
		radial-gradient(ellipse 60% 50% at 85% 10%, rgba(62, 151, 255, .14), transparent 65%),
		radial-gradient(ellipse 50% 45% at 8% 85%, rgba(113, 190, 246, .12), transparent 60%),
		#fff;
}

.hero .sub {
	font-size: 1.35rem;
	color: var(--bb-muted);
	font-weight: 600;
	max-width: 640px;
	margin: 1.25rem auto 2rem;
}

.hero-accent {
	color: var(--bb-accent);
}

/* Coin marquee */

.coin-strip {
	overflow: hidden;
	position: relative;
	padding: 1rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.coin-track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: coin-scroll 36s linear infinite;
}

.coin-strip:hover .coin-track {
	animation-play-state: paused;
}

@keyframes coin-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.coin-pill {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: #fff;
	border: 1px solid rgba(45, 52, 57, .07);
	box-shadow: var(--bb-shadow-sm);
	border-radius: 100px;
	padding: .55rem 1.25rem .55rem .6rem;
	white-space: nowrap;
	font-weight: 700;
	font-size: .95rem;
}

.coin-pill img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.coin-pill small {
	color: var(--bb-muted);
	font-weight: 600;
}

/* ---------- Feature cards ---------- */

.card-bb {
	border: none;
	border-radius: var(--bb-radius-lg);
	background: #fff;
	box-shadow: var(--bb-shadow-md);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}

.card-bb:hover {
	transform: translateY(-4px);
	box-shadow: var(--bb-shadow-hover);
}

.card-bb .card-body {
	padding: 1.9rem;
}

.card-bb .card-title {
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom: .6rem;
}

.card-bb .card-text {
	color: var(--bb-muted);
	font-size: 1rem;
}

.icon-chip {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
	font-size: 1.5rem;
}

.chip-1 { background: #fff3d6; }
.chip-2 { background: #ffe7d9; }
.chip-3 { background: #f0e6ff; }
.chip-4 { background: #e2f2fe; }
.chip-5 { background: #e3f7e9; }
.chip-6 { background: var(--bb-accent-soft); }

.icon-chip svg {
	width: 26px;
	height: 26px;
}

/* ---------- Pricing card ---------- */

/* V3: white card, aurora blobs + dot grid, gradient number */

.pricing-v3 {
	position: relative;
	background:
		radial-gradient(ellipse 45% 60% at 12% 20%, rgba(62, 151, 255, .12), transparent 70%),
		radial-gradient(ellipse 40% 55% at 88% 30%, rgba(205, 172, 254, .16), transparent 70%),
		radial-gradient(ellipse 45% 50% at 50% 100%, rgba(165, 232, 183, .14), transparent 70%),
		#fff;
	border: 1px solid rgba(45, 52, 57, .07);
	border-radius: var(--bb-radius-xl);
	padding: 3.5rem 2rem;
	overflow: hidden;
	box-shadow: var(--bb-shadow-lg);
}

.pricing-v3::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(62, 151, 255, .13) 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 75%);
	pointer-events: none;
}

.pricing-v3 .fee-gradient {
	position: relative;
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background: linear-gradient(120deg, var(--bb-accent) 20%, #8a5cd6 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pricing-v3 p {
	position: relative;
	color: var(--bb-muted);
	font-size: 1.1rem;
	max-width: 680px;
	margin: 1.25rem auto 0;
}

/* V4: dark card with blue glow */


/* ---------- Get started: tabs with auto-advance ---------- */

.gs-num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bb-accent-soft);
	color: var(--bb-accent-dark);
	font-weight: 800;
	font-size: .95rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gs-shot {
	width: 100%;
	border-radius: var(--bb-radius-lg);
	border: 1px solid rgba(45, 52, 57, .06);
	box-shadow: var(--bb-shadow-md);
}

.gs-tabs .nav-link {
	position: relative;
	overflow: hidden;
	display: flex;
	gap: .8rem;
	align-items: center;
	text-align: left;
	width: 100%;
	color: var(--bb-ink);
	font-weight: 700;
	background: #fff;
	border-radius: var(--bb-radius-md);
	margin-bottom: .6rem;
	box-shadow: var(--bb-shadow-sm);
	padding: .8rem 1.1rem;
	transition: background-color .2s ease, color .2s ease;
}

.gs-tabs .nav-link > * {
	position: relative;
	z-index: 1;
}

.gs-tabs .nav-link.active {
	background: var(--bb-accent);
	color: #fff;
}

.gs-tabs .nav-link.active .gs-num {
	background: #fff;
}

/* Progress fill running left to right on the active tab;
   duration must match AUTOPLAY_MS in js/theme.js */
.gs-tabs .nav-link.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: rgba(255, 255, 255, .22);
	animation: gs-progress 5s linear forwards;
	/* Runs only while the block is in the viewport (.gs-live set by theme.js) */
	animation-play-state: paused;
}

.gs-tabs.gs-live .nav-link.active::before {
	animation-play-state: running;
}

@keyframes gs-progress {
	from { width: 0; }
	to { width: 100%; }
}

/* Hovering the currently animating item pauses its progress fill
   (JS pauses the timer) */
.gs-tabs .nav-link.active:hover::before {
	animation-play-state: paused;
}


/* ---------- Affiliate: aurora-money card ---------- */

.big-pct {
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.aff-v6 {
	position: relative;
	background:
		radial-gradient(ellipse 45% 60% at 10% 15%, rgba(46, 158, 83, .12), transparent 70%),
		radial-gradient(ellipse 40% 55% at 90% 25%, rgba(255, 196, 81, .16), transparent 70%),
		radial-gradient(ellipse 45% 50% at 50% 100%, rgba(62, 151, 255, .1), transparent 70%),
		#fff;
	border: 1px solid rgba(45, 52, 57, .07);
	border-radius: var(--bb-radius-xl);
	padding: 3rem 2rem;
	overflow: hidden;
	box-shadow: var(--bb-shadow-lg);
}

.aff-v6::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ctext x='10' y='30' font-family='Arial' font-size='18' font-weight='bold' fill='%232e9e53' fill-opacity='.09'%3E%24%3C/text%3E%3C/svg%3E");
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 75% 90% at 50% 0%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 0%, #000, transparent 78%);
	pointer-events: none;
}

.aff-v6 > * {
	position: relative;
}

.aff-v6 .green-pct {
	background: linear-gradient(120deg, #2e9e53 20%, #5fc97f 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.aff-v6 .sub-line {
	color: var(--bb-muted);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 1rem auto 1.5rem;
}

.aff-v6 .stat-chip.chip-wl {
	background: linear-gradient(120deg, #2e9e53 0%, #5fc97f 65%, #ffc451 140%);
	border: none;
	color: #fff;
	font-weight: 800;
	box-shadow: 0 6px 18px rgba(46, 158, 83, .35);
}

.aff-v6 .stat-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: rgba(46, 158, 83, .08);
	border: 1px solid rgba(46, 158, 83, .22);
	border-radius: 100px;
	padding: .5rem 1.2rem;
	font-weight: 700;
	font-size: .95rem;
	color: #23904a;
}

.btn-green {
	background: #2e9e53;
	border: none;
	color: #fff;
	box-shadow: 0 8px 24px rgba(46, 158, 83, .35);
}

.btn-green:hover,
.btn-green:focus {
	background: #23904a;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(46, 158, 83, .45);
}

/* ---------- FAQ accordion ---------- */

.accordion-bb .accordion-item {
	border: none;
	border-radius: var(--bb-radius-md) !important;
	margin-bottom: .9rem;
	background: #fff;
	box-shadow: var(--bb-shadow-sm);
	overflow: hidden;
}

.accordion-bb .accordion-button {
	font-weight: 800;
	font-size: 1.08rem;
	color: var(--bb-ink);
	padding: 1.25rem 1.5rem;
	background: #fff;
	box-shadow: none;
	transition: background-color .25s ease, color .25s ease;
}

.accordion-bb .accordion-button:not(.collapsed) {
	color: var(--bb-accent-dark);
	background: var(--bb-accent-softer);
}

.accordion-bb .accordion-button::after {
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.accordion-bb .accordion-button:focus {
	box-shadow: 0 0 0 3px rgba(62, 151, 255, .2);
}

/* Smooth expand/collapse curve (Bootstrap default is linear-ish and abrupt) */
.accordion-bb .accordion-collapse.collapsing {
	transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.accordion-bb .accordion-body {
	color: var(--bb-muted);
	padding: 1.1rem 1.5rem 1.5rem;
	font-size: 1.02rem;
}

/* ---------- Tour iframe ---------- */

.tour-frame {
	/* The Supademo recording carries its own window chrome, white matte and
	   shadow, so the frame is borderless — the white matte melts into the
	   page background. Aspect = the player's native 2296x1626. */
	--bs-aspect-ratio: calc(1626 / 2296 * 100%);
	/* Width chosen so the block height equals the previous full-width 16:9
	   frame: (9/16) / (1626/2296) = 79.4% */
	max-width: calc((9 / 16) / (1626 / 2296) * 100%);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767.98px) {
	.tour-frame {
		max-width: 100%;
	}
}

/* ---------- Contact / footer ---------- */

.contact-card {
	background: var(--bb-ink);
	border-radius: var(--bb-radius-xl);
	color: #fff;
	padding: 4rem 2rem;
	box-shadow: var(--bb-shadow-lg);
}

.contact-card h2 {
	color: #fff;
}

.contact-card a.contact-link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	text-decoration: none;
	border-radius: 100px;
	padding: .75rem 1.5rem;
	font-weight: 700;
	transition: background .15s ease;
}

.contact-card a.contact-link:hover {
	background: rgba(255, 255, 255, .16);
}

.footer-bb {
	padding: 2.5rem 0;
	color: var(--bb-muted);
	font-size: .95rem;
}

.footer-bb a {
	color: var(--bb-muted);
	text-decoration: none;
}

.footer-bb a:hover {
	color: var(--bb-accent);
}

/* ---------- Blog / pages ---------- */

.page-content {
	padding: 8rem 0 4rem;
}

.page-content .content-body h2 {
	font-size: 1.4rem;
	margin: 2.2rem 0 .75rem;
}

.page-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bb-radius-md);
}

.post-card {
	border: none;
	border-radius: var(--bb-radius-lg);
	box-shadow: var(--bb-shadow-md);
	height: 100%;
}

.post-card .card-body {
	padding: 1.8rem;
}

/* ---------- Misc ---------- */

@media (max-width: 767.98px) {
	.section { padding: 3.5rem 0; }
	.hero { padding: 7.5rem 0 3rem; }
	.section-soft { border-radius: var(--bb-radius-lg); }
}

/* ---------- 404 page: terminal card ---------- */

.e4-card {
	background: #fff;
	border: 1px solid rgba(45, 52, 57, .07);
	border-radius: var(--bb-radius-xl);
	box-shadow: var(--bb-shadow-lg);
	padding: 3.5rem 2rem;
	text-align: center;
	overflow: hidden;
	position: relative;
}

.e4-card h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: .75rem;
}

.e4-card p {
	color: var(--bb-muted);
	max-width: 480px;
	margin: 0 auto 1.75rem;
}

.e4-v3 {
	background: var(--bb-ink);
	border: none;
}

.e4-v3 h2 { color: #fff; }
.e4-v3 p { color: rgba(255, 255, 255, .65); }

.e4-v3 .e4-term {
	max-width: 520px;
	margin: 0 auto 1.75rem;
	background: #1f2529;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--bb-radius-md);
	padding: 1.4rem 1.6rem;
	text-align: left;
	font-family: Consolas, Monaco, monospace;
	font-size: .95rem;
	line-height: 1.9;
}

.e4-v3 .e4-term div {
	word-break: break-all;
}

.e4-v3 .e4-term .cmd { color: #9cc8ff; }
.e4-v3 .e4-term .ok { color: #5fc97f; }
.e4-v3 .e4-term .err { color: #ff8a80; }
.e4-v3 .e4-term .dim { color: rgba(255, 255, 255, .4); }

.e4-v3 .e4-cursor {
	display: inline-block;
	width: 9px;
	height: 1.1em;
	background: #9cc8ff;
	vertical-align: text-bottom;
	animation: e4-cursor 1s steps(1) infinite;
}

@keyframes e4-cursor {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ---------- About: feature cards (pastel bubble + icon) ---------- */

.wm-card {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.wm-card .card-body {
	position: relative;
}

.wm5-card .wm-disc {
	position: absolute;
	right: -90px;
	bottom: -90px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
}

.wm5-card .wm-mark {
	position: absolute;
	right: 12px;
	bottom: 8px;
	opacity: .5;
	pointer-events: none;
}

.wm5-card .wm-mark svg {
	width: 64px;
	height: 64px;
}

/* Keep text clear of the bubble zone in the corner */
.wm5-card .card-text {
	padding-right: 84px;
}