/* =========================================================================
   Self-hosted Poppins (latin + latin-ext, weights 400/500/600/700/800)
   ========================================================================= */

/* 400 */
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/poppins/poppins-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/poppins/poppins-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 500 */
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/poppins/poppins-500-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/poppins/poppins-500-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 600 */
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/poppins/poppins-600-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/poppins/poppins-600-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 700 */
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/poppins/poppins-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/poppins/poppins-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 800 */
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/poppins/poppins-800-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style:  normal;
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/poppins/poppins-800-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*,
:before,
:after {
	box-sizing:   border-box;
	border-width: 0;
	border-style: solid;
	border-color: hsl(var(--border));
}

html, body {
	transform:   none !important;
	filter:      none !important;
	perspective: none !important;
}

html {
	line-height:              1.5;
	-webkit-text-size-adjust: 100%;
	font-family:              Poppins, system-ui, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin:           0;
	line-height:      inherit;
	background-color: hsl(var(--background));
	color:            hsl(var(--foreground));
}

h1, h2, h3, h4, h5, h6 {
	font-size:   inherit;
	font-weight: inherit;
	margin:      0;
}

a {
	color:           inherit;
	text-decoration: inherit;
}

b, strong { font-weight: bolder; }

p, ul, ol, figure, blockquote, dl, dd, hr, pre { margin: 0; }

ol, ul, menu {
	list-style: none;
	margin:     0;
	padding:    0;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size:   100%;
	font-weight: inherit;
	line-height: inherit;
	color:       inherit;
	margin:      0;
	padding:     0;
}

button, select          { text-transform: none; }
button, [role=button]   { cursor: pointer; }
:disabled               { cursor: default; }
summary                 { display: list-item; }
textarea                { resize: vertical; }

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
	-webkit-appearance: button;
	background-color:   transparent;
	background-image:   none;
}

img, svg, video, canvas, audio, iframe, embed, object {
	display:        block;
	vertical-align: middle;
}

img, video {
	max-width: 100%;
	height:    auto;
}

[hidden]:where(:not([hidden=until-found])) { display: none; }


/* =========================================================================
   Design tokens
   ========================================================================= */

:root {
	--background:          0 0% 100%;
	--foreground:          0 0% 10%;
	--card:                0 0% 100%;
	--card-foreground:     0 0% 10%;
	--primary:             340 100% 53%;
	--primary-foreground:  0 0% 100%;
	--secondary:           243 100% 78%;
	--secondary-foreground: 0 0% 100%;
	--muted:               210 40% 96%;
	--muted-foreground:    0 0% 45%;
	--accent:              340 100% 53%;
	--accent-foreground:   0 0% 100%;
	--destructive:         0 84% 60%;
	--destructive-foreground: 0 0% 100%;
	--border:              214 32% 91%;
	--input:               214 32% 91%;
	--ring:                353 88% 45%;
	--radius:              1rem;
}

.dark {
	--background:          256 24% 9%;
	--foreground:          260 26% 93%;
	--card:                259 24% 13%;
	--card-foreground:     260 26% 93%;
	--primary:             340 100% 53%;
	--primary-foreground:  0 0% 100%;
	--secondary:           243 100% 78%;
	--secondary-foreground: 0 0% 100%;
	--muted:               259 26% 16%;
	--muted-foreground:    251 12% 66%;
	--accent:              340 100% 53%;
	--accent-foreground:   0 0% 100%;
	--destructive:         0 84% 60%;
	--destructive-foreground: 0 0% 100%;
	--border:              260 20% 24%;
	--input:               260 20% 24%;
	--ring:                340 100% 53%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background:          256 24% 9%;
		--foreground:          260 26% 93%;
		--card:                259 24% 13%;
		--card-foreground:     260 26% 93%;
		--primary:             340 100% 53%;
		--primary-foreground:  0 0% 100%;
		--secondary:           243 100% 78%;
		--secondary-foreground: 0 0% 100%;
		--muted:               259 26% 16%;
		--muted-foreground:    251 12% 66%;
		--accent:              340 100% 53%;
		--accent-foreground:   0 0% 100%;
		--destructive:         0 84% 60%;
		--destructive-foreground: 0 0% 100%;
		--border:              260 20% 24%;
		--input:               260 20% 24%;
		--ring:                340 100% 53%;
	}
}


/* =========================================================================
   Layout utilities
   ========================================================================= */

.container {
	width:          100%;
	margin-inline:  auto;
	padding-inline: 2rem;
}

@media (max-width: 767px) {
    .container { padding-inline: 1rem; }
}

@media (min-width: 1400px) {
	.container { max-width: 1400px; }
}

.sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}


/* =========================================================================
   Animations
   ========================================================================= */

@keyframes fade-in {
	0%  { opacity: 0; transform: translateY(10px); }
	to  { opacity: 1; transform: translateY(0); }
}

@keyframes float {
	0%, to { transform: translateY(0); }
	50%     { transform: translateY(-20px); }
}

@keyframes pulse-glow {
	0%, to { box-shadow: 0 0 20px hsl(var(--primary) / .3); }
	50%    { box-shadow: 0 0 40px hsl(var(--primary) / .6); }
}

@keyframes scale-in {
	0% { transform: scale(.95); opacity: 0; }
	to { transform: scale(1);   opacity: 1; }
}

@keyframes bounce {
	0%, to { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); }
	50%    { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); }
}

.animate-fade-in    { animation: fade-in .5s ease-out; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-scale-in   { animation: scale-in .3s ease-out; }


/* =========================================================================
   Card rotations (screenshots gallery)
   ========================================================================= */

.card {
	margin-top: 0 !important;
	transform:  none !important;
}

.card-shadow {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

@media (min-width: 768px) {
	.card-1 { margin-top: 3rem !important;    transform: rotate(-7.5deg) !important; }
	.card-2 { margin-top: -1.5rem !important; transform: rotate(-4deg) !important; }
	.card-3 { margin-top: -3rem !important;   transform: none !important; }
	.card-4 { margin-top: -1.5rem !important; transform: rotate(4deg) !important; }
	.card-5 { margin-top: 3rem !important;    transform: rotate(7.5deg) !important; }
}


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

footer {
	padding-block: 3rem;
}

footer .post-container {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
	max-width:      1400px;
	margin-inline:  auto;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	footer .post-container {
		flex-direction:  row;
		justify-content: space-between;
		align-items:     center;
	}
}

.footer-brand {
	display:         flex;
	align-items:     center;
	gap:             0.75rem;
	text-decoration: none;
	color:           inherit;
}

@media (max-width: 767px) {
    .footer-brand { justify-content: center; }
}

.footer-brand img.brand-icon { width: 2.5rem; height: 2.5rem; }
.footer-brand img.brand-logo { max-width: 100px; height: auto; }

.footer-links {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             1.5rem;
	font-size:       0.875rem;
}

.footer-links a       { color: hsl(var(--muted-foreground)); transition: color 0.15s ease; }
.footer-links a:hover { color: hsl(var(--primary)); }

.footer-legal {
	max-width:      1400px;
	margin-inline:  auto;
	padding-inline: 1.5rem;
	margin-top:     2rem;
	padding-top:    2rem;
	border-top:     1px solid hsl(var(--border));
	text-align:     center;
	font-size:      0.875rem;
	line-height:    1.6;
	color:          hsl(var(--muted-foreground));
}

.footer-legal p       { margin: 0; }
.footer-legal p + p   { margin-top: 0.5rem; font-size: 0.75rem; }


/* =========================================================================
   Navbar
   ========================================================================= */

.navbar {
	position:         fixed;
	top:              0;
	left:             0;
	right:            0;
	z-index:          100;
	background-color: hsl(var(--background));
	border-bottom:    1px solid hsl(var(--border));
}

.navbar-inner {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	height:           64px;
	max-width:        1400px;
	margin-inline:    auto;
	padding-inline:   1.5rem;
	position:         relative;
}

.navbar-links {
	display:      flex;
	gap:          2rem;
	margin-left:  auto;
	margin-right: 1.5rem;
}

.navbar-links a       { color: hsl(var(--muted-foreground)); font-size: 1rem; font-weight: 400; text-decoration: none; transition: color 0.15s ease; }
.navbar-links a:hover { color: hsl(var(--primary)); }

.btn-try.navbar-cta {
	display:         inline-block;
	padding:         0.4rem 1rem;
	font-size:       0.8rem;
	border-radius:   0.5rem;
	background:      hsl(var(--primary));
	color:           hsl(var(--primary-foreground));
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	transition:      opacity 0.2s ease, transform 0.2s ease;
}

.btn-try.navbar-cta:hover { opacity: 0.85; transform: scale(1.03); }

.app-store-badge {
	width:  180px;
	height: auto;
}

.app-store-link {
	display:         inline-block;
	line-height:     0;
	text-decoration: none;
	transition:      transform 0.3s ease;
}

.app-store-link:hover { transform: scale(1.05); }

.mobile-menu-toggle,
.mobile-menu-panel {
	display: none;
}

#root { padding-top: 64px; }

@media (prefers-color-scheme: dark) {
	body {
		background: #14111c;
		color:      #ece9f2;
	}

	.navbar {
		background-color: rgba(20, 17, 28, 0.92);
		border-bottom:    1px solid rgba(255, 255, 255, 0.10);
		backdrop-filter:   blur(16px);
	}

	.navbar-links a {
		color: rgba(236, 233, 242, 0.72);
	}

	.navbar-links a:hover {
		color: hsl(var(--primary));
	}

	.mobile-menu-toggle span {
		background: #ece9f2;
	}

	.mobile-menu-panel {
		background: #1e1929;
		border:     1px solid rgba(255, 255, 255, 0.10);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
	}

	.mobile-menu-panel a {
		color: #ece9f2;
	}

	.mobile-menu-panel a:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	footer {
		background: #14111c;
		color:      #ece9f2;
	}

	.footer-brand img.brand-logo,
	.lp-hero__logo {
		filter: invert(1) brightness(1.6);
	}

	.footer-links a,
	.footer-legal {
		color: rgba(236, 233, 242, 0.66);
	}

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

	.footer-legal {
		border-top-color: rgba(255, 255, 255, 0.10);
	}
}

@media (max-width: 767px) {
	.navbar-inner {
		display:         flex;
		gap:             0.75rem;
		justify-content: flex-end;
		padding-inline:  1rem;
	}

	.navbar-links {
		display: none;
	}

	.mobile-menu-toggle {
		align-items:     center;
		background:      transparent;
		border:          0;
		cursor:          pointer;
		display:         inline-flex;
		flex-direction:  column;
		gap:             4px;
		height:          38px;
		justify-content: center;
		margin-right:    auto;
		order:           0;
		padding:         0;
		width:           38px;
	}

	.mobile-menu-toggle span {
		background:    hsl(var(--foreground));
		border-radius: 999px;
		display:       block;
		height:        2px;
		width:         20px;
	}

	.mobile-menu-panel {
		background:    hsl(var(--background));
		border:        1px solid hsl(var(--border));
		border-radius: 0.75rem;
		box-shadow:    0 16px 40px hsl(0 0% 0% / 0.12);
		display:       none;
		flex-direction: column;
		gap:           0.25rem;
		left:          1rem;
		min-width:     13rem;
		padding:       0.5rem;
		position:      absolute;
		top:           calc(100% + 0.5rem);
		z-index:       200;
	}

	.is-mobile-menu-open .mobile-menu-panel {
		display: flex;
	}

	.mobile-menu-panel a {
		border-radius:   0.5rem;
		color:           hsl(var(--foreground));
		font-size:       0.95rem;
		font-weight:     600;
		padding:         0.7rem 0.85rem;
		text-decoration: none;
		white-space:     nowrap;
	}

	.mobile-menu-panel a:hover {
		background: hsl(var(--muted) / 0.65);
	}

	.navbar .lang-switcher {
		order:        2;
		margin-right: 0;
	}

	.navbar-cta {
		order:     3;
		padding:   0.4rem 0.75rem;
		font-size: 0.75rem;
	}
}

/* =========================================================================
   Lang switcher
   ========================================================================= */

.lang-switcher {
	position:     relative;
	margin-right: 1rem;
}

.lang-switcher-btn {
	display:    flex;
	align-items: center;
	padding:    0;
	border:     none;
	background: transparent;
	cursor:     pointer;
}

.lang-switcher-btn img {
	width:         20px;
	height:        20px;
	object-fit:    cover;
	border-radius: 50%;
	border:        1px solid transparent;
	transition:    border-color 0.15s ease;
}

.lang-switcher-btn:hover img { border-color: rgba(255, 255, 255, 0.5); }

.lang-switcher-dropdown {
	position:         absolute;
	top:              calc(100% + 0.375rem);
	right:            0;
	z-index:          200;
	min-width:        7rem;
	padding:          0.25rem;
	border:           1px solid rgba(255, 255, 255, 0.12);
	border-radius:    0.5rem;
	background-color: rgb(20, 20, 20);
	box-shadow:       0 4px 12px rgba(0, 0, 0, 0.5);
	display:          none;
	flex-direction:   column;
	gap:              0.125rem;
}

.lang-switcher.is-open .lang-switcher-dropdown { display: flex; }

.lang-switcher-dropdown a {
	display:         flex;
	align-items:     center;
	gap:             0.5rem;
	padding:         0.375rem 0.5rem;
	border-radius:   0.375rem;
	color:           rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-size:       0.8rem;
	transition:      background-color 0.1s ease, color 0.1s ease;
}

.lang-switcher-dropdown a:hover      { background-color: rgba(255, 255, 255, 0.08); color: white; }
.lang-switcher-dropdown a.is-current { color: white; font-weight: 600; }

.lang-switcher-dropdown a img {
	width:         20px;
	height:        20px;
	object-fit:    cover;
	border-radius: 50%;
	flex-shrink:   0;
}


/* =========================================================================
   Landing page
   ========================================================================= */

.lp-wrap { min-height: 100vh; }

.geo-section   { padding: 4rem 0; }
.text-center   { text-align: center; }

.geo-narrow {
	max-width:     56rem;
	margin-inline: auto;
}

.geo-intro-lead {
	font-size:   1.25rem;
	line-height: 1.75;
	color:       hsl(var(--muted-foreground));
}

@media (max-width: 767px) {
    .geo-intro-lead { font-size: 1.125rem; }
}

.lp-gradient-text {
	background:              linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
	-webkit-background-clip: text;
	background-clip:         text;
	color:                   transparent;
}

/* Section headers */
.lp-section-header {
	text-align:    center;
	margin-bottom: 4rem;
}

@media (max-width: 767px) {
    .lp-intro-section .lp-section-header { margin-bottom: 2rem; }
}

.lp-section-header h2 {
	font-size:     2.25rem;
	line-height:   2.5rem;
	font-weight:   700;
	margin-top:    0;
	margin-bottom: 1rem;
	text-align:    center;
}

@media (min-width: 768px) {
	.lp-section-header h2 { font-size: 3rem; line-height: 1; }
}

.lp-section-sub {
	font-size: 1.125rem;
	color:     hsl(var(--muted-foreground));
	max-width: 42rem;
	margin:    0 auto;
}

/* Buttons */
.btn-download {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;
	padding:         0 2rem;
	height:          3.5rem;
	width:           fit-content;
	border-radius:   calc(var(--radius) - 2px);
	background:      hsl(var(--primary));
	color:           hsl(var(--primary-foreground));
	font-size:       1.125rem;
	font-weight:     500;
	text-decoration: none;
	box-shadow:      0 10px 15px -3px rgb(0 0 0 / .1);
	transition:      transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-download:hover {
	background: hsl(var(--primary) / .9);
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1);
	transform:  scale(1.05);
}

.btn-download svg { width: 1.25rem; height: 1.25rem; }

.lp-hero .btn-download { margin-top: 1rem; }

@media (max-width: 767px) {
    .lp-hero .btn-download { align-self: center; }
}

/* Hero */
.lp-hero {
	position:        relative;
	min-height:      100vh;
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	background:      linear-gradient(to bottom right, hsl(var(--background)), hsl(var(--background)), hsl(var(--primary) / .05));
}

.lp-hero__bg               { position: absolute; inset: 0; pointer-events: none; }
.lp-hero__bg--left         { background: radial-gradient(circle at 30% 50%, hsl(var(--primary) / .1), transparent 50%); }
.lp-hero__bg--right        { background: radial-gradient(circle at 70% 50%, hsl(var(--secondary) / .1), transparent 50%); }

.lp-hero__inner {
	display:     grid;
	gap:         3rem;
	align-items: center;
	padding:     5rem 1rem;
	position:    relative;
	z-index:     1;
}

@media (min-width: 1024px) {
	.lp-hero__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.lp-hero__copy  { display: flex; flex-direction: column; gap: 2rem; }

.lp-hero__brand {
	display:     inline-flex;
	align-items: center;
	gap:         0.75rem;
}

.lp-hero__icon { width: 4rem; height: 4rem; border-radius: 10%; }
.lp-hero__logo { max-width: 200px; height: auto; }

@media (max-width: 767px) {
    .lp-hero__icon { width: 3.25rem; height: 3.25rem; }
    .lp-hero__logo { max-width: 160px; }
}

.lp-hero__former-name {
	font-size:      0.875rem;
	font-weight:    400;
	letter-spacing: 0.02em;
	color:          hsl(var(--muted-foreground));
	margin:         -1.5rem 0 0 calc(4rem + 0.75rem);
	text-align:     right;
	width:          200px;
}

.lp-hero__former-name span {
	color:       hsl(var(--secondary));
	font-weight: 600;
}

@media (max-width: 767px) {
    .lp-hero__former-name {
        margin: -1.75rem 0 0 calc(3.25rem + 0.75rem);
        width:  160px;
    }
}

.lp-hero__copy h1 {
	font-size:   2.2rem;
	font-weight: 800;
	line-height: 1.1;
	color:       hsl(var(--foreground));
	max-width:   none;
}

@media (min-width: 768px) {
	.lp-hero__copy h1 { font-size: 3rem; }
}

.lp-hero__tagline {
	font-size:   1.5rem;
	font-weight: 700;
	color:       hsl(var(--primary));
	margin:      0;
}

@media (min-width: 768px) { .lp-hero__tagline { font-size: 1.875rem; } }

.lp-hero__desc {
	font-size:   1.125rem;
	color:       hsl(var(--muted-foreground));
	max-width:   36rem;
	line-height: 1.6;
	margin:      0;
}

@media (min-width: 768px) { .lp-hero__desc { font-size: 1.25rem; } }

.lp-hero__stats  { display: flex; align-items: center; gap: 2rem; }

@media (max-width: 767px) {
    .lp-hero__stats { justify-content: center; }
    .lp-hero__stat  { text-align: center; }
}

.lp-stat-value {
	font-size:   1.875rem;
	font-weight: 700;
	color:       hsl(var(--primary));
	margin:      0;
}

.lp-stat-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0; }

.lp-hero__divider { width: 1px; height: 3rem; background: hsl(var(--border)); }

.lp-hero__mockup { position: relative; display: none; }

@media (min-width: 768px) { .lp-hero__mockup { display: block; } }

.lp-hero__mockup-img { position: relative; z-index: 1; }

.lp-hero__mockup-img img {
	width:         100%;
	height:        auto;
	max-width:     28rem;
	margin-inline: auto;
	border-radius: 1.5rem;
}

.lp-hero__mockup-glow {
	position:   absolute;
	inset:      0;
	background: linear-gradient(to bottom right, hsl(var(--primary) / .2), hsl(var(--secondary) / .2));
	filter:     blur(64px);
	z-index:    -1;
}

/* Intro section */
.lp-intro-section {
	background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--muted) / .2));
}

/* Features section */
.lp-features-section {
	padding:    5rem 0 4rem;
	background: linear-gradient(to bottom, hsl(var(--muted) / .2), hsl(var(--background)));
}

.lp-feature-grid { display: grid; gap: 2rem; }

@media (min-width: 768px)  { .lp-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-feature-grid { grid-template-columns: repeat(4, 1fr); } }

.lp-feature-card {
	background:     hsl(var(--card));
	border:         2px solid hsl(var(--border));
	border-radius:  var(--radius);
	padding:        1.5rem;
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	box-shadow:     0 1px 2px 0 rgb(0 0 0 / .05);
	transition:     transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lp-feature-card:hover {
	transform:    translateY(-0.5rem);
	box-shadow:   0 10px 15px -3px rgb(0 0 0 / .1);
	border-color: hsl(var(--primary) / .5);
}

.lp-feature-icon {
	width:           3.5rem;
	height:          3.5rem;
	border-radius:   1rem;
	background:      linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--secondary)));
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      transform 0.3s ease;
	flex-shrink:     0;
}

.lp-feature-card:hover .lp-feature-icon { transform: scale(1.1); }

.lp-feature-icon svg { width: 1.75rem; height: 1.75rem; color: hsl(var(--primary-foreground)); }

.lp-feature-card h3 {
	font-size:   1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color:       hsl(var(--card-foreground));
	margin:      0;
}

.lp-feature-card p { color: hsl(var(--muted-foreground)); line-height: 1.625; margin: 0; }

.lp-facts-spacer { height: 4rem; }

.lp-cta-center { margin-top: 5rem; display: flex; justify-content: center; }

/* Facts grid */
.facts-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1.5rem 2.5rem;
	text-align:            center;
}

@media (min-width: 640px) {
	.facts-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.facts-grid { grid-template-columns: repeat(6, 1fr); }
}

.fact-value { font-size: 2.4rem; font-weight: 800; color: hsl(var(--primary)); white-space: nowrap; }
.fact-label { font-size: 1.05rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

@media (max-width: 767px) {
    .fact-value { font-size: 2.1rem; }
}

/* Why section */
.lp-why-section {
	background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--muted) / .2));
}

.why-list { display: grid; gap: 1rem; }

.why-row {
	padding:       1.5rem;
	border-radius: 0.75rem;
	border:        1px solid hsl(var(--border));
	background:    hsl(var(--card));
}

.why-row p      { color: hsl(var(--muted-foreground)); line-height: 1.625; margin: 0; }
.why-row strong { display: block; color: hsl(var(--card-foreground)); font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; margin-bottom: 1rem; }
.why-check      { color: hsl(var(--primary)); font-weight: 800; margin-right: 0.6rem; }

/* Screenshots gallery */
.lp-gallery-section {
	position: relative;
	overflow: hidden;
	padding:  2rem 0 4rem;
}

.lp-gallery-inner .lp-section-header { margin-bottom: 6rem; }

@media (max-width: 767px) {
    .lp-gallery-inner .lp-section-header { margin-bottom: 3rem; }
}

.lp-gallery-bg {
	position:   absolute;
	inset:      0;
	background: radial-gradient(circle at 50% 50%, hsl(var(--primary) / .05), transparent 70%);
}

.lp-gallery-inner { position: relative; z-index: 1; }

.lp-screenshots {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   1rem;
	padding:               0;
	margin:                0;
}

@media (min-width: 768px) {
	.lp-screenshots {
		grid-template-columns: repeat(5, 1fr);
		gap:                   2rem;
		padding:               0 2rem;
		margin:                0 2rem;
	}
}

.lp-shot {
	position:      relative;
	overflow:      hidden;
	border-radius: 1.5rem;
	transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-shot img { width: 100%; height: auto; display: block; }

.lp-shot__overlay {
	position:    absolute;
	inset:       0;
	background:  linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2), transparent);
	opacity:     0;
	display:     flex;
	align-items: flex-end;
	padding:     1.5rem;
	transition:  opacity 0.3s ease;
}

.lp-shot__overlay h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0; }

.group:hover .lp-shot           { transform: scale(1.05); box-shadow: 0 25px 50px -12px hsl(var(--primary) / .2); }
.group:hover .lp-shot__overlay  { opacity: 1; }

/* FAQ section */
.lp-faq-section {
	background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--muted) / .2));
}

@media (max-width: 767px) {
    .lp-faq-section .lp-section-header { margin-bottom: 2rem; }
}

.faq-item {
    background:    hsl(var(--card));
    border:        1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    padding:       4px 22px;
}

.faq-item > summary {
    align-items:     center;
    cursor:          pointer;
    display:         flex;
    font-size:       16.5px;
    font-weight:     600;
    gap:             16px;
    justify-content: space-between;
    list-style:      none;
    padding:         18px 0;
}

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

.faq-item > summary::after {
    color:       hsl(var(--primary));
    content:     "+";
    flex:        none;
    font-size:   22px;
    font-weight: 700;
    transition:  transform 0.2s ease;
}

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

.faq-answer {
    color:       hsl(var(--muted-foreground));
    font-size:   15.5px;
    line-height: 1.65;
    padding:     0 0 18px;
}

/* Final CTA section */
.lp-cta-section {
	position: relative;
	overflow: hidden;
	padding:  5rem 0;
}

.lp-cta-section__bg {
	position:   absolute;
	inset:      0;
	background: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--primary)), hsl(var(--secondary)));
	opacity:    .95;
}

.lp-cta-section__overlay             { position: absolute; inset: 0; pointer-events: none; }
.lp-cta-section__overlay--left       { background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.1), transparent 50%); }
.lp-cta-section__overlay--right      { background: radial-gradient(circle at 70% 50%, rgba(255,255,255,.1), transparent 50%); }

.lp-cta-section__inner {
	position:       relative;
	z-index:        1;
	max-width:      56rem;
	margin-inline:  auto;
	text-align:     center;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2rem;
}

.lp-cta-section__inner h2 {
	font-size:   1.9rem;
	font-weight: 800;
	color:       #fff;
	line-height: 1.2;
	margin:      0;
}

.lp-cta-section__inner h2 span { font-size: 2.35rem; display: block; }

@media (min-width: 768px) {
	.lp-cta-section__inner h2      { font-size: 3.75rem; }
	.lp-cta-section__inner h2 span { font-size: 4.5rem; }
}

.lp-cta-section__inner > p:not(.lp-cta-section__note) {
	font-size:   1.05rem;
	color:       rgba(255,255,255,.9);
	max-width:   42rem;
	margin:      0;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.lp-cta-section__inner > p:not(.lp-cta-section__note) { font-size: 1.5rem; }
}

.lp-cta-section__note { font-size: 1rem; color: rgba(255,255,255,.7); margin: 0; }

.btn-appstore {
	display:         inline-flex;
	align-items:     center;
	gap:             0.75rem;
	padding:         0 2.5rem;
	height:          4rem;
	border-radius:   calc(var(--radius) - 2px);
	background:      #fff;
	color:           hsl(var(--primary));
	text-decoration: none;
	box-shadow:      0 25px 50px -12px rgba(0,0,0,.25);
	transition:      transform 0.3s ease;
}

.btn-appstore:hover { transform: scale(1.05); }

.btn-appstore svg   { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

.btn-appstore > div { display: flex; flex-direction: column; text-align: left; }

.btn-appstore__sup  { font-size: 0.75rem; font-weight: 400; }
.btn-appstore__main { font-size: 1rem; font-weight: 700; margin-top: -2px; }