/* ===========================
	ROOT VARIABLES
	=========================== */
:root {
	/* — Page — */
	--color-page-bg: #f4ebe1;

	/* — Headings — */
	--color-heading-primary: #ce0000;
	--color-heading-light: #ffb0b0;
	--color-heading-white: #ffffff;

	/* — Body Text — */
	--color-body-dark: #2c0000;
	--color-body-muted: #354018;
	--color-body-white: #ffffff;

	/* — Act Labels — */
	--color-act-label: #2c0000;
	--color-act-label-light: #ffffff;

	/* — Section Backgrounds — */
	--color-section-hero-bg: var(--color-page-bg);
	--color-section-act1-bg: var(--color-page-bg);
	--color-section-act2-from: #651b12;
	--color-section-act2-to: #f14028;
	--color-section-recipes-bg: #ff6e23;
	--color-section-invoices-from: #3b4638;
	--color-section-invoices-to: #4c8047;
	--color-section-vision-bg: var(--color-page-bg);
	--color-section-vision-card-dark: #232323;
	--color-section-vision-card-warm: linear-gradient(161.7deg, #ffbf3e 9.89%, #ffb088 96.06%);
	--color-section-vision-card-green: linear-gradient(#1f621d, #82c700);
	--color-section-vision-card-burgundy: linear-gradient(180deg, #c84a5a 0%, #6c302e 100%);
	--color-section-vision-card-blue: linear-gradient(180deg, #4169e1 0%, #1e3a8a 100%);
	--color-section-vision-card-red: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%);
	--color-section-epilogue-bg: #6c302e;
	--color-section-ticker-border: rgba(206, 0, 0, 0.25);
	--color-section-ticker-accent: #ce0000;

	/* — Fonts — */
	--font-heading: 'Fraunces', serif;
	--font-body: 'Source Sans 3', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	/* — Spacing — */
	--section-padding-x: 80px;
	--section-padding-y: 120px;
	--content-max-width: 960px;
}

.f_fraunces {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
}

.f_mono {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
}

.f_source_sans {
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
}

/* ===========================
	RESET & BASE
	=========================== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: "Source Sans 3", sans-serif;
	background-color: var(--color-page-bg);
	color: var(--color-body-dark);
	line-height: 1.5;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

#h {
	font-family: 'Source Sans 3', sans-serif;
	background: rgba(255, 255, 255, 0.2);
	padding: 32px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	display: flex;
	justify-content: space-between;
	gap: 32px;
	border-bottom: 1px solid rgba(62, 47, 0, 0.1);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	backdrop-filter: blur(32px);
}

#h a {
	text-decoration: none;
	color: #111;
	line-height: 24px;
}

#h #n {
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0;
	text-transform: none;
}

/* ===========================
	UTILITY: SECTION WRAPPER
	=========================== */
.section-inner {
	margin: 0 auto;
	padding: var(--section-padding-y) var(--section-padding-x);
	position: relative;
}

.width-restricted {
	max-width: var(--content-max-width);
}

/* ===========================
	ACT LABEL
	=========================== */
.act-label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	opacity: 0.5;
}

/* ===========================
	SECTION HEADING
	=========================== */
.section-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-heading-primary);
}

/* ===========================
	1. HERO
	=========================== */
.hero {
	position: relative;
	min-height: 960px;
	background-color: var(--color-section-hero-bg);
	background-image: url('images/g/hero.png');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hero__content {
	position: relative;
	
	margin: 0 auto;
	padding: var(--section-padding-y) var(--section-padding-x);
	padding-bottom: 32px;
	display: flex;
	flex-direction: column;
}


.hero__quote {
	margin-top: 80px;
	text-align: center;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.35;
	color: var(--color-body-muted);
	max-width: 800px;
	margin-top: 320px;
	margin-top: calc(20vh);
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1);
}

.hero cite {
	display: block;
	margin-top: 32px;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 16px;
	color: var(--color-body-muted);
	text-align: center
}

/* .hero__logo-appi {
	margin-top: 256px;
} */

.hero__logo-img {
	margin-top: 24px;
	height: 75px;
	width: auto;
}

.hero__tagline {
	margin-top: 24px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	color: var(--color-heading-primary);
}

.hero__description {
	margin-top: 24px;
	font-size: 22px;
	line-height: 1.45;
	color: var(--color-body-dark);
	max-width: 640px;
}

#hero__act-one-divider {
	width: 80%;
	height: 1px;
	margin: 0 auto;
	margin-top: 80px;
	margin-bottom: 40px;
	background: #dfceba;
}

.vguide {
	width: 1px;
	margin: 40px auto;
	height: 200px;
	background: rgba(0, 0, 0, 0.0);
}

/* ===========================
	2. ACT ONE — SAVED BUT LOST
	=========================== */
.act-one {
	position: relative;
	background-color: var(--color-section-act1-bg);
}

.act-one .section-inner {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 60px;
	align-items: center;
}

.act-one__phone-col {
	/* Phone mockup / video placeholder */
	position: relative;
	min-height: 526px;
}

.act-one__phone-placeholder {
	height: 526px;
	border-radius: 24px;
	/* background: linear-gradient(135deg, #e8ddd3 0%, #d4c4b0 100%); */
}

.act-one__label {
	color: var(--color-act-label);
}

.act-one__heading {
	font-size: 40px;
	margin-top: 12px;
}

.act-one__body {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-body-dark);
	max-width: 600px;
	text-wrap: pretty;
}

/* ===========================
	3. ACT TWO — APPS THAT EMERGE
	=========================== */

.act-image {
	width: 90vw;
	max-width: 1152px;
	margin-left: auto;
	margin-right: auto;
}

.act-caption {
	color: white;
	margin-top: 16px;
	padding-left: 24px;
	max-width: 1152px;
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.act-two {
	position: relative;
	background: linear-gradient(180deg, var(--color-section-act2-from) 23.7%, var(--color-section-act2-to) 100%);
	color: var(--color-body-white);
}

.act-two__header {
	text-align: center;
}

.act-two__label {
	color: var(--color-act-label-light);
}

.act-two__heading {
	font-size: 40px;
	color: var(--color-heading-light);
	margin-top: 12px;
}

.act-two__subtitle {
	margin-top: 24px;
	font-size: 24px;
	line-height: 1.4;
	max-width: 466px;
	margin-left: auto;
	margin-right: auto;
}

/* — Itineraries Sub-section — */
.act-two__itineraries {
	margin-top: 80px;
	/* display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 40px;
	align-items: start; */
}

.act-two__phone-left,
.act-two__phone-right {
	border-radius: 12px;
	overflow: hidden;
	min-height: 500px;
}

.act-two__phone-placeholder {
	width: 100%;
	height: 100%;
	min-height: 500px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.act-two__app-icon-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 120px;
}

.app-icon {
	width: 128px;
	height: 128px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.app-icon--itineraries {
	background: linear-gradient(141.4deg, #ff5a5a 3.8%, #ff8b5a 89.85%);
	box-shadow:
		0 0 34px #ff695a,
		0 -4px 64px rgba(0, 0, 0, 0.25);
}

.app-icon__label {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: var(--color-body-white);
}

.add-to-gyansie-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: linear-gradient(180deg, #f1f1f1 0%, #fff 100%);
	border: 1px solid #fff;
	border-radius: 24px;
	margin-top: 24px;
}

.add-to-gyansie-btn__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: #ccc;
}

.add-to-gyansie-btn__text {
	font-size: 17px;
	font-weight: 700;
	color: #000;
}

.act-two__caption {
	text-align: center;
	margin-top: 60px;
	font-size: 16px;
	line-height: 1.5;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-wrap: pretty;
}

/* ===========================
	4. RECIPES SECTION
	=========================== */
.recipes {
	background-color: var(--color-section-recipes-bg);
	color: var(--color-body-white);
}

.recipes .section-inner {
	/* display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 40px; */
	align-items: start;
}

.recipes__phone-left {
	min-height: 500px;
}

.recipes__phone-placeholder {
	width: 100%;
	min-height: 500px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.recipes__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 80px;
}

.app-icon--recipes {
	background: linear-gradient(180deg, #b60000 0%, #c80003 100%);
	box-shadow:
		0 0 32px #c30003,
		0 -4px 64px rgba(0, 0, 0, 0.25);
}

.recipes__phone-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 500px;
}

.recipes__phone-right-placeholder {
	width: 100%;
	flex: 1;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.recipes__caption {
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	max-width: 322px;
	margin: 40px auto 0;
	grid-column: 1 / -1;
}

/* ===========================
	5. INVOICES SECTION
	=========================== */
.invoices {
	background: linear-gradient(180deg, var(--color-section-invoices-from) 23.7%, var(--color-section-invoices-to) 100%);
	color: var(--color-body-white);
}

.invoices__phone-left {
	min-height: 500px;
}

.invoices__phone-placeholder {
	width: 100%;
	min-height: 500px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.invoices__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 80px;
}

.app-icon--invoices {
	background: linear-gradient(180deg, #3b4638 0%, #4c8047 100%);
	box-shadow:
		0 0 32px rgba(76, 128, 71, 0.5),
		0 -4px 64px rgba(0, 0, 0, 0.25);
}

.invoices__phone-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 500px;
}

.invoices__phone-right-placeholder {
	width: 100%;
	flex: 1;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.invoices__caption {
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	max-width: 342px;
	margin: 40px auto 0;
	grid-column: 1 / -1;
}

/* ===========================
	6. ACT FOUR — THE VISION
	=========================== */
.vision {
	background-color: var(--color-section-vision-bg);
}

.vision__header {
	text-align: center;
	margin-bottom: 80px;
	text-wrap: pretty;
}

.vision__label {
	color: var(--color-act-label);
}

.vision__heading {
	font-size: 32px;
	margin-top: 12px;
	color: var(--color-heading-primary);
}

.vision__grid {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-left: var(--section-padding-x);
	margin-left: calc(-1 * var(--section-padding-x));
	padding-right: var(--section-padding-x);
	margin-right: calc(-1 * var(--section-padding-x));
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.vision__grid::-webkit-scrollbar {
	display: none;
}

.vision__card {
	flex: 0 0 648px;
	height: 520px;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
}

.vision__card--dark {
	background: var(--color-section-vision-card-dark);
	color: var(--color-body-white);
}

.vision__card--warm {
	background: var(--color-section-vision-card-warm);
}

.vision__card--green {
	background: var(--color-section-vision-card-green);
}

.vision__card--burgundy {
	background: var(--color-section-vision-card-burgundy);
}

.vision__card--blue {
	background: var(--color-section-vision-card-blue);
}

.vision__card--red {
	background: var(--color-section-vision-card-red);
}

.vision__card-phone-area {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
}

.vision__card-caption {
	font-size: 20px;
	line-height: 1.6;
	padding: 40px;
	color: #fff;
	background: rgba(0, 0, 0, 0.2);
	width: 40%;
}

.vision__nav {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
	margin-top: 24px;
	padding-right: var(--section-padding-x);
}

.vision__nav-btn {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.2s ease;
}

.vision__nav-btn:hover {
	transform: scale(1.1);
}

.vision__nav-btn:disabled {
	opacity: 0.2;
	pointer-events: none;
}

.vision__nav-btn img {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===========================
	7. EPILOGUE
	=========================== */
.epilogue {
	position: relative;
	z-index: 1;
	color: var(--color-section-act2-from);
	padding-top: 60px;
}

.epilogue .section-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: start;
}

.epilogue__app-icon {
	width: 95px;
	height: 95px;
}

.epilogue__text-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.epilogue__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	color: var(--color-section-act2-from);
}

.epilogue__body {
	font-size: 16px;
	line-height: 1.5;
	max-width: 470px;
	text-wrap: pretty;
}

.epilogue__body a {
	color: var(--color-body-white);
	text-decoration: underline;
}

.epilogue__app-store {
	margin-top: 12px;
}

.epilogue__app-store-img {
	height: 64px;
	width: auto;
	background: #000;
	border-radius: 12px;
}

/* ===========================
	8. TICKER / MARQUEE
	=========================== */
.ticker {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--color-section-ticker-border);
	border-bottom: 1px solid var(--color-section-ticker-border);
	height: 66px;
	display: flex;
	align-items: center;
}

.ticker__track {
	display: flex;
	white-space: nowrap;
	animation: ticker-scroll 30s linear infinite;
}

.ticker__item {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 1.2px;
	padding: 0 32px;
	flex-shrink: 0;
}

.ticker__item--accent {
	color: var(--color-section-ticker-accent);
}

.ticker__item--dark {
	color: #000;
}

@keyframes ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ===========================
	9. FOOTER (DESERT IMAGE)
	=========================== */
.footer {
	position: relative;
	min-height: 700px;
	background-image: url('images/g/footer.jpg');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.footer .next-project {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* ===========================
	RESPONSIVE — MOBILE
	=========================== */

@media (max-width: 768px) {
	:root {
		--section-padding-x: 24px;
		--section-padding-y: 60px;
	}

	/* Hero */
	.hero {
		min-height: 700px;
	}

	.hero__logo {
		margin-top: 100px;
	}

	.hero__tagline {
		font-size: 24px;
	}

	.hero__description {
		font-size: 18px;
		text-wrap: pretty;
	}

	blockquote.hero__quote {
		font-size: 32px;
	}

	.vguide {
		background: rgba(0, 0, 0, 0.2);
	}

	/* Act One */

	.act-one {
		margin-top: 3em;
	}

	.act-one .section-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		display: flex;
		flex-direction: column-reverse;
	}

	.act-one__phone-col {
		order: 2;
		min-height: 400px;
		display: flex;
		justify-content: center;
	}

	.act-one__phone-placeholder {
		height: 400px;
	}

	.act-one__text-col {
		order: 1;
		padding-top: 0;
	}

	.act-one__heading {
		font-size: 32px;
	}

	/* Act Two */
	.act-two__heading {
		font-size: 32px;
	}

	.act-two__subtitle {
		font-size: 20px;
	}

	.act-two__itineraries {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.act-two__app-icon-col {
		padding-top: 0;
		order: -1;
	}

	.act-two__phone-placeholder {
		min-height: 400px;
	}

	/* Recipes */
	.recipes .section-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.recipes__center {
		padding-top: 0;
		order: -1;
	}

	.recipes__phone-placeholder {
		min-height: 400px;
	}

	/* Invoices */
	.invoices .section-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.invoices__center {
		padding-top: 0;
		order: -1;
	}

	.invoices__phone-placeholder {
		min-height: 400px;
	}

	/* Vision */
	.vision__card {
		flex: 0 0 80vw;
		height: 80vh;
		flex-direction: column;
	}

	.vision__card img {
		align-self: center;
	}

	#vg1__card p {
		font-size: 15px;
	}
	#vg1__card img {
		width: 120px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.vision__heading {
		font-size: 26px;
	}

	.vision__card-caption {
		font-size: 12px;
		text-wrap: pretty;
		flex-grow: 1;
		width: 100% !important;
	}

	/* Epilogue */
	.epilogue .section-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.epilogue__heading {
		font-size: 26px;
	}

	/* Footer */
	.footer {
		min-height: 400px;
	}
}