/* ===========================================================================
   CHOPPY landing — matched to the iOS/Android app's design system
   Tokens mirror lib/tokens/themes.dart so the marketing site reads as
   the same product, just sized for a wider screen.
=========================================================================== */

:root {
	/* Mirrors AppTheme.light in lib/tokens/themes.dart */
	--bg: #F5F5F4;
	--surface: #FFFFFF;
	--surface-alt: #FAFAF9;
	--divider: rgba(10, 10, 10, 0.06);
	--hairline: rgba(10, 10, 10, 0.08);

	--text: #0A0A0A;
	--text-2: #5C5C5C;
	--text-3: #8E8E8E;
	--text-4: #B8B8B8;

	--accent: #3059A8;
	--accent-hover: #264786;
	--accent-soft: rgba(48, 89, 168, 0.10);

	--success: #16A34A;
	--warn: #D97706;
	--danger: #DC2626;

	/* Same flight-duty category palette the app uses */
	--cat-logged: #16A34A;
	--cat-scheduled: #2563EB;
	--cat-sim: #7C3AED;
	--cat-heli: #DC2626;
	--cat-training: #D97706;

	--radius-card: 16px;
	--radius-btn: 12px;
	--radius-pill: 999px;
	--radius-chip: 8px;

	--shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -16px rgba(10, 10, 10, 0.08);
	--shadow-lift: 0 1px 2px rgba(10, 10, 10, 0.04), 0 18px 48px -16px rgba(10, 10, 10, 0.18);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--text);
	background: var(--bg);
	line-height: 1.5;
	font-size: 16px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	letter-spacing: -0.01em;
}

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

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   Common ornaments
============================================================ */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--text-3);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.kicker__dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--cat-logged);
	box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.section-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--text-3);
	margin-bottom: 16px;
	text-transform: uppercase;
}

/* ============================================================
   Topbar
============================================================ */
.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	background: rgba(245, 245, 244, 0.82);
	border-bottom: 1px solid var(--divider);
}
.topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.brand__mark {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	box-shadow:
		0 0 0 1px rgba(10,10,10,0.06),
		0 8px 18px -8px rgba(48,89,168,0.45);
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
}
.brand__tag {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: var(--text-3);
	margin-top: 4px;
	text-transform: uppercase;
	font-weight: 500;
}

.topnav { display: inline-flex; align-items: center; gap: 26px; }
.topnav a {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-2);
	letter-spacing: -0.01em;
	transition: color 0.2s var(--ease);
}
.topnav a:hover { color: var(--text); }
.topnav__cta {
	color: #fff !important;
	background: var(--text);
	padding: 9px 16px;
	border-radius: var(--radius-btn);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600 !important;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.topnav__cta:hover { background: #1F1F1F; transform: translateY(-1px); }

@media (max-width: 720px) {
	.topnav { gap: 14px; }
	.topnav a:not(.topnav__cta) { display: none; }
	.brand__tag { display: none; }
}

/* ============================================================
   Buttons (mirror lib/widgets/button.dart)
   - 48 tall, 12 radius
   - Primary: accent (blue) bg, white text
   - Neutral: surface, hairline border, text color
============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border-radius: var(--radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease),
		border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
	white-space: nowrap;
	font-family: inherit;
}
.btn .arrow { transition: transform 0.2s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(2px); }

.btn--primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(48,89,168,0.55);
}
.btn--primary:hover {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px rgba(48,89,168,0.6);
}
.btn--neutral {
	background: var(--surface);
	color: var(--text);
	border-color: var(--hairline);
}
.btn--neutral:hover { background: var(--surface-alt); transform: translateY(-1px); }
.btn--text {
	background: transparent;
	color: var(--text-2);
	height: auto;
	padding: 14px 4px;
}
.btn--text:hover { color: var(--text); }
.btn--block { width: 100%; }

/* Official store badges — keep their native artwork.
   The two badges have different built-in padding, so we size them
   so the *artwork inside* matches optically (Google badge needs more
   total height because its image has whitespace baked in). */
.store-badge {
	display: inline-flex;
	align-items: center;
	transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.store-badge img { display: block; width: auto; }
.store-badge img { height: 48px; }
.store-badge:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

/* ============================================================
   Hero
============================================================ */
.hero {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 80px;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: 56px; }
}

.hero__title {
	font-size: clamp(40px, 5.6vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--text);
}
.hero__title-accent {
	color: var(--accent);
}

.hero__subtitle {
	font-size: clamp(16px, 1.3vw, 18px);
	color: var(--text-2);
	max-width: 520px;
	margin: 0 0 32px;
	line-height: 1.55;
	letter-spacing: -0.01em;
}
.hero__subtitle strong { color: var(--text); font-weight: 600; }

.hero__ctas {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

/* ============================================================
   Hero phone — frames the actual app screenshot in a matte
   black iPhone-style bezel. The screenshot already includes
   the iOS status bar, so we only need the outer chassis.
============================================================ */
.phone {
	position: relative;
	max-width: 320px;
	margin: 0 auto;
	background: #0A0A0A;
	border-radius: 48px;
	padding: 10px;
	box-shadow:
		0 0 0 1.5px rgba(255, 255, 255, 0.04) inset,
		0 0 0 1px rgba(10, 10, 10, 0.5),
		0 30px 60px -20px rgba(10, 10, 10, 0.35),
		0 12px 28px -12px rgba(10, 10, 10, 0.22);
	transform: rotate(-1.5deg);
	transition: transform 0.5s var(--ease);
}
.phone:hover { transform: rotate(0); }

.phone__shot {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 38px;
	background: var(--bg);
}

/* ============================================================
   Logos row — clean chips of compatible logbook formats
============================================================ */
.compat {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 48px;
	border-top: 1px solid var(--divider);
}
.compat__lbl {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--text-3);
	text-transform: uppercase;
	margin-bottom: 18px;
	text-align: center;
}
.compat__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}
.compat__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-2);
	letter-spacing: -0.01em;
}
.compat__chip strong { color: var(--text); font-weight: 600; }

/* ============================================================
   Section header
============================================================ */
.section-header {
	max-width: 720px;
	margin: 0 0 48px;
}
.section-header--center { margin-inline: auto; text-align: center; }
.section-header h2 {
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 0 16px;
	color: var(--text);
}
.section-header h2 .accent { color: var(--accent); }
.section-lede {
	color: var(--text-2);
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	max-width: 580px;
	letter-spacing: -0.01em;
}
.section-header--center .section-lede { margin-inline: auto; }

/* ============================================================
   Features — app-style card grid
============================================================ */
.features {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
}
.feature {
	grid-column: span 4;
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: 24px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.feature--wide { grid-column: span 6; }
.feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
	border-color: var(--hairline);
}

.feature__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 4px 0 0;
	color: var(--text);
}
.feature p {
	color: var(--text-2);
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	letter-spacing: -0.005em;
}
.feature__stats {
	margin-top: auto;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding-top: 8px;
}
.feature__stats span {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-2);
	background: var(--surface-alt);
	border: 1px solid var(--divider);
	padding: 5px 9px;
	border-radius: var(--radius-chip);
	letter-spacing: 0.02em;
}

@media (max-width: 980px) {
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.feature, .feature--wide { grid-column: span 1; }
	.feature--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
	.feature-grid { grid-template-columns: 1fr; }
	.feature, .feature--wide { grid-column: span 1; }
}

/* ============================================================
   Import section — preserved per user request
   (boarding-pass concept retained, restyled to match app's tone)
============================================================ */
.import {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px 100px;
}

.import__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 1024px) {
	.import__inner { grid-template-columns: 1fr; gap: 48px; }
}

.import__copy h2 {
	font-size: clamp(32px, 4.2vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 0 20px;
	color: var(--text);
}
.import__copy h2 .accent { color: var(--accent); }
.import__copy p {
	color: var(--text-2);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 540px;
	letter-spacing: -0.01em;
}
.import__copy p strong { color: var(--text); font-weight: 600; }
.import__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.import__bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--text-2);
}
.import__bullets li svg {
	color: var(--accent);
	flex-shrink: 0;
}

/* Import card — restyled to look like an app bottom sheet / modal */
.boardpass {
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	transition: transform 0.4s var(--ease);
}
.boardpass:hover { transform: translateY(-4px); }

.boardpass__main {
	padding: 24px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.boardpass__main > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--divider);
	padding-bottom: 16px;
}
.boardpass__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text);
}
.boardpass__brand img { width: 28px; height: 28px; border-radius: 7px; }
.boardpass__seq {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--text-3);
	text-transform: uppercase;
}

.boardpass__route {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
}
.boardpass__route > div { display: flex; flex-direction: column; gap: 4px; }
.boardpass__route > div:last-child { text-align: right; align-items: flex-end; }
.boardpass__lbl {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--text-3);
	text-transform: uppercase;
}
.boardpass__big {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--text);
}
.boardpass__sub {
	font-size: 12px;
	color: var(--text-3);
	font-weight: 500;
}
.boardpass__line {
	width: 100%;
	height: 24px;
	color: var(--text-3);
}

.boardpass__rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	margin: 0;
	padding-top: 4px;
	border-top: 1px solid var(--divider);
}
.boardpass__rows > div { display: flex; flex-direction: column; gap: 2px; }
.boardpass__rows dt {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--text-3);
	text-transform: uppercase;
	font-weight: 500;
}
.boardpass__rows dd {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.boardpass__rows dd.ok { color: var(--success); }

.boardpass__main > footer { display: flex; flex-direction: column; gap: 8px; }
.boardpass__progress {
	height: 6px;
	background: var(--accent-soft);
	border-radius: 3px;
	overflow: hidden;
}
.boardpass__progress-fill {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--accent) 0%, var(--success) 100%);
	animation: fillUp 2.2s var(--ease) forwards;
	transform-origin: left;
}
@keyframes fillUp { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.boardpass__progress-lbl {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--success);
	text-transform: uppercase;
}

/* ============================================================
   Quote — clean app-card style
============================================================ */
.quote {
	max-width: 920px;
	margin: 0 auto;
	padding: 40px 24px 100px;
	text-align: center;
}
.quote blockquote {
	margin: 0;
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.025em;
	color: var(--text);
}
.quote blockquote p { margin: 0 0 24px; }
.quote blockquote em { font-style: normal; color: var(--accent); }
.quote footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}
.quote__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.quote__role {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--text-3);
	text-transform: uppercase;
}

/* ============================================================
   Pricing — app-style elevated card
============================================================ */
.pricing {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 24px 100px;
}
.pricing__card {
	max-width: 480px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: var(--shadow-lift);
}

.pricing__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.pricing__plan {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--text-2);
	text-transform: uppercase;
}
.pricing__trial {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 6px 10px;
	border-radius: var(--radius-chip);
	text-transform: uppercase;
}

.pricing__price {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	margin-bottom: 6px;
	color: var(--text);
}
.pricing__currency { font-size: 24px; font-weight: 600; margin-top: 16px; color: var(--text-2); }
.pricing__amount {
	font-size: 80px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}
.pricing__period {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-3);
	margin-top: 24px;
}
.pricing__sub {
	text-align: center;
	font-size: 13px;
	color: var(--text-3);
	margin: 0 0 28px;
	font-weight: 500;
}

.pricing__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.pricing__list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--divider);
	font-size: 14.5px;
	color: var(--text-2);
	display: flex;
	align-items: center;
	gap: 12px;
}
.pricing__list li:last-child { border-bottom: 0; }
.pricing__list li svg { color: var(--accent); flex-shrink: 0; }

/* ============================================================
   Final CTA
============================================================ */
.final {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 24px 100px;
	text-align: center;
}
.final__inner {
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: 24px;
	padding: 64px 24px;
	box-shadow: var(--shadow-card);
}
.final h2 {
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 0 32px;
	color: var(--text);
}
.final h2 .accent { color: var(--accent); }
.final__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Footer
============================================================ */
.foot {
	background: var(--surface);
	border-top: 1px solid var(--divider);
}
.foot__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
@media (max-width: 720px) {
	.foot__inner { grid-template-columns: 1fr; }
}
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand img { width: 44px; height: 44px; border-radius: 11px; }
.foot__brand > div { display: flex; flex-direction: column; gap: 4px; }
.foot__name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.foot__tag { color: var(--text-3); font-size: 13px; font-weight: 500; }

.foot__links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	font-size: 14px;
}
.foot__links > div { display: flex; flex-direction: column; gap: 8px; }
.foot__h {
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--text-3);
	text-transform: uppercase;
	margin-bottom: 8px;
	font-weight: 600;
}
.foot__links a { color: var(--text-2); transition: color 0.2s var(--ease); }
.foot__links a:hover { color: var(--text); }

.foot__bar {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	border-top: 1px solid var(--divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-3);
	font-weight: 500;
}
@media (max-width: 540px) {
	.foot__bar { flex-direction: column; gap: 6px; text-align: center; }
}

/* ============================================================
   Reveal on scroll
============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}