@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-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;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-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;
}

 

 
:root {
	--bg: #ffffff;
	--bg-soft: #f1f3f6;
	--text: #171717;
	--text-soft: #525252;
	--text-muted: #8a8a8e;
	--border: #e7e9ee;
	--card-bg: #ffffff;
	--accent: #E86120;        
	--accent-2: #FF9A5C;      
	--accent-ink: #C24E12;
	 
	--hero-ink: #ffffff;
	--hero-ink-soft: rgba(255, 255, 255, 0.74);
	--hero-floor: #ffffff;    
	--maxw: 1120px;
	--nav-h: 84px;
}
.dark {
	--bg: #1b1b1b;
	--bg-soft: #262626;
	--text: #ffffff;
	--text-soft: rgba(255, 255, 255, 0.70);
	--text-muted: rgba(255, 255, 255, 0.45);
	--border: rgba(255, 255, 255, 0.10);
	--card-bg: #2c2c2c;
	--hero-floor: #1b1b1b;
}

 
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	background: var(--bg);
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
strong { font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

 
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp 0.7s ease-out forwards; }
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.18s; }
.fade-in-up-3 { animation-delay: 0.30s; }
.fade-in-up-4 { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
	.fade-in-up { opacity: 1; animation: none; }
	html { scroll-behavior: auto; }
}

 
.btn-appstore {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px 11px 16px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
 
.dark .btn-appstore { background: #fff; color: #171717; }
.btn-appstore:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32); }
.btn-appstore i { font-size: 30px; line-height: 1; }
.btn-appstore .btn-appstore__sub { font-size: 9px; font-weight: 500; opacity: 0.85; display: block; line-height: 1.1; }
.btn-appstore .btn-appstore__main { font-size: 17px; font-weight: 600; display: block; line-height: 1.1; }
 
.coming-soon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px 11px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	color: #3a2316;
	font-weight: 600;
	font-size: 0.98rem;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.coming-soon i { font-size: 22px; line-height: 1; }
.dark .coming-soon { background: rgba(255, 255, 255, 0.10); color: #fff; }
 
.btn-appstore--solid { background: #000; color: #fff; }

 
.site-nav {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--nav-h);
	display: flex;
	align-items: center;
}
.site-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-nav__brand { display: inline-flex; align-items: center; gap: 7px; }
.site-nav__brand img { width: 34px; height: 34px; }
.site-nav__brand span {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}
.site-nav__links { display: inline-flex; align-items: center; gap: 26px; }
.site-nav__link {
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.15s ease;
}
.site-nav__link:hover { color: #fff; }
 
html:not(.dark) .page-home .site-nav__brand span,
html:not(.dark) .page-home .site-nav__link { color: #3a2316; }
html:not(.dark) .page-home .site-nav__link:hover { color: #000; }

 
.hero {
	position: relative;
	overflow: hidden;
	background: #fbeee4;         
	color: #2b1a10;             
}
.dark .hero { background: #1a120d; color: var(--hero-ink); }
.hero__bg {
	position: absolute;
	inset: 0;
	background: url('../../img/hero-bg-light.jpg') center bottom / cover no-repeat;
	z-index: 0;
}
.dark .hero__bg { background-image: url('../../img/hero-bg.jpg'); }
 
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 26%);
}
.dark .hero__bg::after {
	background:
		linear-gradient(180deg, rgba(20, 12, 8, 0.55) 0%, rgba(20, 12, 8, 0.10) 24%, rgba(20, 12, 8, 0.0) 48%);
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding-top: calc(var(--nav-h) + 36px);
	padding-bottom: 72px;
	min-height: clamp(640px, 52vw, 820px);
}
.hero__media { align-self: end; perspective: 1800px; display: flex; justify-content: center; }
.hero__copy { align-self: center; max-width: 440px; }

.hero__appicon {
	width: 80px; height: 80px;
	margin-bottom: 22px;
	 
}
.hero__title {
	font-size: 3.4rem;
	font-weight: 700;
	color: #2b1a10;
	margin-bottom: 10px;
}
.dark .hero__title { color: #fff; }
.hero__tagline {
	font-size: 1.4rem;
	font-weight: 600;
	color: #C24E12;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}
.dark .hero__tagline { color: #FFB27D; }
.hero__desc {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(43, 26, 16, 0.78);
	margin-bottom: 28px;
}
.dark .hero__desc { color: var(--hero-ink-soft); }

 
.at-phone {
	position: relative;
	width: 330px;
	max-width: 82vw;
	margin: 0 auto;
	aspect-ratio: 1614 / 3322;
	isolation: isolate;
	 
}
 
.at-phone__screen {
	position: absolute;
	 
	top: calc(1.96% - 1px);
	left: calc(4.77% - 1px);
	right: calc(4.71% - 1px);
	bottom: calc(1.96% - 1px);
	overflow: hidden;
	border-radius: 42px;
	z-index: 1;
}
.at-phone__shot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
.at-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease-in-out;
	border-radius: 42px;
	overflow: hidden;
}
.at-slide.is-active { opacity: 1; }
.at-phone__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

 
.features { padding: 84px 0 28px; }
.features__intro { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.features__intro h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 14px; }
.features__intro p { font-size: 1.1rem; color: var(--text-soft); }
.features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 56px;
}
.feature__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	 
	background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
	color: var(--c, var(--accent));
	font-size: 26px;
	margin-bottom: 16px;
}
.feature__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 7px; }
.feature__desc { font-size: 0.97rem; line-height: 1.6; color: var(--text-soft); }

 
.site-footer { padding: 72px 0 64px; border-top: 1px solid var(--border); margin-top: 84px; text-align: center; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.site-footer__brand img { width: 26px; height: 26px; }
.site-footer__brand span { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.site-footer__made { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 22px; }
.site-footer__social { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.social-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--bg-soft);
	color: var(--text-soft);
	font-size: 20px;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; }
.social-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.site-footer__links { display: flex; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--text-soft); margin-bottom: 12px; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__links .sep { color: var(--text-muted); }
.site-footer__copy { font-size: 0.82rem; color: var(--text-muted); }
.site-footer__copy a:hover { color: var(--text-soft); }

 
.subhero {
	position: relative;
	background: linear-gradient(180deg, #1a120d 0%, #26170e 100%);
	color: #fff;
	text-align: center;
	padding: calc(var(--nav-h) + 40px) 24px 52px;
}
.subhero h1 { font-size: 2.6rem; font-weight: 700; margin-bottom: 10px; }
.subhero p { color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; }

.legal-section { padding: 56px 0 96px; }
.legal { max-width: 760px; margin: 0 auto; padding: 0 24px; color: var(--text-soft); }
.legal > div + div { margin-top: 40px; }
.legal h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.legal p { margin-bottom: 12px; }
.legal p:last-child { margin-bottom: 0; }
.legal ul { list-style: disc; margin: 12px 0 0 24px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }

 
.content-link {
	color: var(--accent-ink);    
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(232, 97, 32, 0.4);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.content-link:hover { text-decoration-color: var(--accent); }
.dark .content-link { color: #FF9A5C; text-decoration-color: rgba(255, 154, 92, 0.4); }
.dark .content-link:hover { text-decoration-color: #FF9A5C; }

 
@media (max-width: 860px) {
	:root { --nav-h: 72px; }
	.hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 8px;
		min-height: 0;
		padding-top: calc(var(--nav-h) + 28px);
	}
	.hero__copy { align-self: auto; max-width: 520px; margin: 0 auto; order: 1; }
	.hero__media { align-self: auto; order: 2; perspective: none; margin-top: 36px; }
	.hero .at-phone { transform: none; }
	.hero__appicon { margin-left: auto; margin-right: auto; }
	.hero__title { font-size: 2.6rem; }
	.hero__tagline { font-size: 1.2rem; }
	.features__grid { grid-template-columns: 1fr; gap: 36px; max-width: 420px; margin: 0 auto; }
	.feature { text-align: center; }
	.feature__icon { margin-left: auto; margin-right: auto; }
	.features__intro h2 { font-size: 1.9rem; }
	.subhero h1 { font-size: 2.1rem; }
}
@media (min-width: 861px) and (max-width: 1024px) {
	.hero__title { font-size: 2.9rem; }
}