/* =========== © 2025 Centroarts.com - https://deepbot.cloud =========== */

html { scroll-padding-top: var(--h-height); }

/* -- Header -- */
:root { --h-height: 64px; }
.db-header {
	position: sticky; top: 0; z-index: 101;
	height: var(--h-height); display: flex; align-items: center;
	background: linear-gradient(180deg, hsl(var(--c-body)) 0%, hsla(var(--c-body), 0.7) 100%);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	padding: 0 16px;
}
.db-header { flex: 1 1 auto; }

@media (min-width: 576px) {
	:root { --h-height: 72px; }

	.db-header { padding: 0 32px; }
}

/* Logo */
.db-logo { cursor: pointer; display: inline-flex; align-items: center; position: relative; height: var(--h-height); z-index: 1; }
.db-logo svg { fill: currentColor; width: 120px; height: 26px; }

.header-btns > .btn { margin-left: 8px; }

@media (max-width: 575px) {
	.db-logo { margin-right: auto; }
}
@media (min-width: 576px) {
	.db-logo svg { width: 144px; height: 32px; }

	.header-btns { display: flex; margin-left: auto; }
	.header-btns .btn-tonal:not(:hover)::after { opacity: 0; }
	.header-btns .btn-primary { display: block !important; }
}

/* Dark Mod */
.db-logo + .darkmod-btn { margin-left: 48px; }
.darkmod-btn {
	cursor: pointer;
	position: relative; z-index: 1; width: 40px; height: 40px; padding: 8px; overflow: hidden;
	border: 0 none; background: none !important; outline: none; user-select: none; color: inherit; 
}
@media (min-width: 576px) {
	.darkmod-btn::after {
		content: ""; position: absolute; inset: 0; opacity: 0.1;
		width: inherit; height: inherit; border: 1px solid; border-radius: 50%;
		transition: opacity .2s ease;
	}
	html.dark .darkmod-btn::after { opacity: 0.15; }
}

.darkmod-btn .ic { display: block; width: 24px; height: 24px; opacity: .8; transition: transform .2s ease, opacity .2s ease; }
.darkmod-btn:hover::after { opacity: 0.2; }
.darkmod-btn:hover .ic-dm1 { opacity: 1; }
.darkmod-btn .ic-dm2 { margin-top: -24px; transform: translateX(100%); opacity: 0; }

html.dark .darkmod-btn:hover::after { opacity: 0.25; }
html.dark .darkmod-btn .ic-dm1 { transform: translateX(-100%); opacity: 0; }
html.dark .darkmod-btn .ic-dm2 { transform: translateX(0); opacity: 0.8; }
html.dark .darkmod-btn:hover .ic-dm2 { opacity: 1; }

/* Section Hero */
.devices {
	visibility: hidden; opacity: 0; transform: translateY(10px);
	transition: visibility .6s ease-out, opacity .6s ease-out, transform 1s ease-out;
	min-width: 816px;
}
.device-star, .device-star-border {
	opacity: 0; transition: opacity 1s ease-out .2s;
}
.devices.active { opacity: 1; visibility: visible; transform: translateY(0); }
.devices.active .device-star, .devices.active .device-star-border { opacity: 1; }
.device-mask {
	mask-position: 0 0; -webkit-mask-position: 0 0;
	mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-size: auto 100%; -webkit-mask-size: auto 100%;
    mask-image: var(--mask-device);
    -webkit-mask-image: var(--mask-device);
}
.device-mask img { width: 100%; height: auto; display: block; user-select: none; pointer-events: none; }
.device-dark { display: none; }
.device-light { display: block; }
html.dark .device-dark { display: block; }
html.dark .device-light { display: none; }

.devices { display: flex; justify-content: center; align-items: end; }
.device-nb { width: 93%; max-width: 1243px; margin-left: -2%; position: relative; }
.device-sm { width: 24%; max-width: 305px; margin-left: -11%; position: relative; }

.device-star, .device-star-border { position: absolute; display: flex; }
.device-star svg, .device-star-border svg { display: block; width: 100%; height: auto; }
.device-star svg { fill: hsl(var(--c-primary)); }
.device-star-border svg { fill: none; stroke: hsl(var(--c-primary2)); stroke-linejoin: round; stroke-width: 2px; }
.device-star::before, .device-star-border::before { content: ""; width: 1px; padding-top: 100%; margin-left: -1px; }

.device-nb .device-star { z-index: -1; left: 50%; top: 100%; transform: translate(-25%, -55%); width: 102px; }
.device-nb .device-star-border { z-index: -1; left: 50%; bottom: 100%; transform: translate(-25%, 50%); width: 176px; }
.device-sm .device-star { left: 0; top: 12%; width: 35.45%; transform: translateX(-50%); }
.device-sm .device-star-border { left: 50%; bottom: 100%; transform: translate(-50%, -50%); width: 56px; }

.hero-img {
	position: relative; overflow: hidden; z-index: -1;
	padding-top: 1000px; padding-bottom: 200px; margin-top: -1000px; margin-bottom: -200px;
	user-select: none; pointer-events: none;
}
.hero-img .wrp { display: flex; justify-content: end; }

.hero-img-bg {
	position: absolute; z-index: -1; bottom: 0; left: 0; right: 0; user-select: none; pointer-events: none;
    height: 1200px; overflow: hidden;
}
.hero-img-bg::after, .hero-img-bg::before {
	content: ""; position: absolute; bottom: 0; left: 50%; aspect-ratio: 1/1; border-radius: 50%;
}
.hero-img-bg::after { width: 1000px; transform: translate(-100%, 0%); background-image: radial-gradient(closest-side, hsla(var(--c-primary), 0.25) 0%, hsla(var(--c-primary), 0) 100%); }
.hero-img-bg::before { width: 1100px; transform: translate(-10%, 0%); background-image: radial-gradient(closest-side, hsla(var(--c-yellow), 0.15) 0%, hsla(var(--c-yellow), 0) 100%); }

@media (max-width: 767px) {
	.hero-img .devices { margin-right: -80px; }
}
@media (min-width: 480px) {
	.device-nb .device-star, .device-nb .device-star-border { left: 30%; }
}
@media (min-width: 576px) {
	.device-nb .device-star, .device-nb .device-star-border { left: 20%; }
}
@media (min-width: 768px) {
	.device-nb .device-star { z-index: -1; left: 0; top: auto; bottom: 10%; width: 18.05%; transform: translate(0,0); }
	.device-nb .device-star-border { left: 0; transform: translateX(-50%); width: 14%; }
	.device-sm .device-star-border { left: 100%; transform: translate(14%, -14%); width: 19%; }
}