/* =============================================================================
   VinDXit — Landing Styles (Unified "Trust" Aesthetic)
   -----------------------------------------------------------------------------
   • Tabs > spaces
   • White text + gentle shadow for readability
   • Glassy card gradient across all panels
   • Mobile-first; desktop upgrades at 900px
   ============================================================================= */

/* === 1) Tokens ============================================================= */
:root {
	--vx-blue:    #0047AB;   /* brand primary */
	--vx-sky:     #00AEEF;   /* accent */
	--vx-yellow:  #ffd400;   /* accent highlight */
	--vx-dark:    #021c3a;   /* canvas */
	--vx-panel:   #0f1a2b;   /* legacy panel (kept for ref) */
	--vx-text:    #f1f5ff;   /* body text (white-ish) */
	--vx-muted:   #c9d6ea;   /* secondary text (brighter than before) */
	--vx-success: #19c37d;   /* good result */
	--radius:     16px;      /* soft corners */
	--shadow:     0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

	/* Shared glass card gradient */
	--card-grad: linear-gradient(180deg, rgba(0,29,84,.72), rgba(0,14,48,.72));
}

/* === 2) Base / Canvas ====================================================== */
html, body { height: 100%; }
body {
	margin: 0;
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--vx-text);
	text-shadow: 0 1px 2px rgba(0,0,0,.45);
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/* Deep blue gradient + subtle radial accents */
	background:
		radial-gradient(800px 400px at 15% -10%, rgba(255,204,0,.10), transparent 60%),
		radial-gradient(600px 300px at 85% 0%, rgba(0,174,239,.12), transparent 60%),
		linear-gradient(180deg, #0a2a76 0%, #0c43c4 60%, #0a3aa4 100%);
}

.container { width: min(1200px, 90vw); margin-inline: auto; }
.section { padding: clamp(24px, 3.5vw, 30px) 0; }

.card {
	background: var(--card-grad);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* === 3) Header (logo animation defined elsewhere) ========================= */
header.site {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(1.1) blur(6px);
	background: linear-gradient(180deg, rgba(3,16,40,.75), rgba(3,16,40,.35));
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
}
.logo {
	font-family: "Exo 2", sans-serif;
	font-weight: 800;
	letter-spacing: .5px;
	font-size: clamp(20px, 5vw, 28px);
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.logo .dot { color: var(--vx-yellow); }
.logo-img { height: clamp(24px, 4vw, 32px); width: auto; display: block; }
header { overflow: visible; } /* ensure run-in animation isn't clipped */

/* Force final say for logo animation (paired with base-logo-motion.css) */
header .logo-img {
	display: inline-block;
	will-change: transform;
	animation:
		vxRunAcrossNoBlur 2.5s cubic-bezier(.2,1.1,.2,1) .2s both,
		vxBreath 6s ease-in-out 3s infinite !important;
}
header .logo-img:hover { animation: vxBreath 6s ease-in-out 0s infinite !important; }

/* === 4) Buttons ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	font-weight: 800;
	letter-spacing: .2px;
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: var(--shadow);
	transition: transform .12s ease, filter .2s ease, background .2s ease;
	font-size: clamp(15px, 3.2vw, 18px);
	min-height: 44px;
	color: #fff;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.98); }

.btn.primary {
	color: #14120a;
	background: linear-gradient(180deg, var(--vx-yellow), #ffd400);
	border: none;
	box-shadow: 0 4px 14px rgba(255,204,0,.4);
}
.btn.ghost {
	background: rgba(255,255,255,.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,.12);
}

/* Wider CTA on hero */
.hero .cta .btn.primary { padding: 1rem 14rem; }
@media (max-width: 900px) {
	.hero .cta .btn.primary { padding: 1rem 8rem; }
}
/* 🐶 Lady-style Wag Animation for Buttons */
@keyframes wag {
	0%   { transform: rotate(0deg); }
	15%  { transform: rotate(3deg); }
	30%  { transform: rotate(-3deg); }
	45%  { transform: rotate(2deg); }
	60%  { transform: rotate(-2deg); }
	75%  { transform: rotate(1deg); }
	90%  { transform: rotate(-1deg); }
	100% { transform: rotate(0deg); }
}

/* Apply wag when hovered, focused, or pressed */
.btn:hover,
.btn:focus-visible {
	animation: wag 0.8s ease-in-out;
	transform-origin: bottom center; /* wag from the base like a tail */
}

/* Optional: tiny idle wag loop for hero CTA (subtle!) */
.hero .cta .btn.primary {
	animation: wag 4s ease-in-out infinite;
	animation-delay: 2s;
	transform-origin: bottom center;
}
.hero .cta .btn.primary:hover {
	animation: wag 0.8s ease-in-out; /* override idle with snappier wag */
}

/* === 5) Hero =============================================================== */
.hero {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	align-items: center;
}
.hero .copy { text-align: center; }

.hero h1 {
	font-family: "Exo 2", sans-serif;
	font-weight: 800;
	margin: 0;
	font-size: clamp(32px, 7vw, 56px);
	color: var(--vx-yellow);
	text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.hero p {
	margin: 10px auto 0;
	max-width: 90%;
	font-size: clamp(16px, 4vw, 20px);
	color: var(--vx-muted);
}
.hero .cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 18px;
}

.hero .screen {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: var(--shadow);
	background: #0b1630;
	min-height: 200px;
}
.hero img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* === 6) Steps ============================================================== */
.steps {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
.step {
	padding: 10px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: center;
	background: var(--card-grad);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.step .num {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 18px;
	color: #07142b;
	background: linear-gradient(180deg, #ffe577, #ffcc00);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.step h3 {
	margin: 0;
	font-family: "Exo 2", sans-serif;
	letter-spacing: .2px;
	font-size: clamp(18px, 4.5vw, 20px);
	color: #fff;
}
.step p {
	margin: .35rem 0 0;
	color: var(--vx-muted);
	font-size: clamp(14px, 3.8vw, 15px);
}
.step .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* === 7) Features + Gallery ================================================= */
.features {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
.feature {
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--card-grad);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.feature .badge {
	font-size: 20px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,.09);
}
.feature b {
	font-family: "Exo 2", sans-serif;
	color: #fff;
	font-size: clamp(15px, 4vw, 17px);
}
.feature .caption { font-size: clamp(13px, 3.5vw, 14px); color: var(--vx-muted); }

.feature-shot {
	margin-top: 12px;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.08);
	background: #0b1630;
}
.feature-shot img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	aspect-ratio: 16 / 9;
}

/* Hide gallery on mobile; show on desktop */
.gallery-section { display: none; }

@media (min-width: 900px) {
	.features { grid-template-columns: repeat(3, 1fr); }
	.feature  { align-items: center; }
	.feature-shot { display: none; }

	.gallery-section { display: block; }
	.gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
	.gallery .shot {
		overflow: hidden;
		border-radius: 12px;
		border: 1px solid rgba(255,255,255,.08);
		background: #0b1630;
		box-shadow: var(--shadow);
	}
	.gallery img { width: 100%; height: auto; display: block; }
}

/* Screenshot framing */
.hero .screen,
.gallery .shot { position: relative; overflow: hidden; }
.hero .screen   { aspect-ratio: 16 / 9; }
.gallery .shot  { aspect-ratio: 16 / 9; }

.hero .screen img,
.gallery .shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: radial-gradient(100px 60px at 50% 50%, rgba(255,255,255,.03), transparent 60%);
}
.shot.fill img  { object-fit: cover; }
.pos-top img    { object-position: center top; }
.pos-center img { object-position: center; }
.ar-21x9 { aspect-ratio: 21 / 9; }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-4x1  { aspect-ratio: 4 / 1; }

/* Mobile landscape: give screenshots more vertical room */
@media (max-width: 900px) and (orientation: landscape) {
	.feature-shot { min-height: 260px; }
	.feature-shot img {
		aspect-ratio: 21 / 9;
		object-fit: contain;
	}
	.hero .screen {
		min-height: 260px;
		aspect-ratio: 21 / 9;
	}
}

/* === 8) Lightbox =========================================================== */
.lightbox {
	display: none;
	position: fixed;
	z-index: 99999;
	inset: 0;
	background: rgba(0,0,0,0.9);
	align-items: center;
	justify-content: center;
}
.lightbox-content {
	max-width: 95%;
	max-height: 95%;
	object-fit: contain;
	box-shadow: 0 0 20px rgba(0,0,0,.6);
	border-radius: 8px;
}
.lightbox .close {
	position: absolute;
	top: 16px;
	right: 24px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
}

/* === 9) Trust & Transparency Card ========================================= */
.trust-card {
	background: var(--card-grad);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 18px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(6px);
	padding: 1.75rem;
	max-width: 1040px;
	margin: 0 auto;
	color: var(--vx-text);
}
.trust-head {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    margin-bottom: .75rem !important;
    background: #5ca2fc !important; /* White background for .trust-head */
}
.trust-head h2 {
	font-family: "Exo 2", sans-serif;
	font-weight: 800;
	font-size: clamp(1.35rem, 2.2vw, 2rem);
	letter-spacing: .2px;
	color: var(--vx-yellow);
	margin: 0;
	text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.trust-icon { font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

.trust-grid {
	display: grid;
	grid-template-columns: 1.35fr .9fr;
	gap: 1.25rem;
	align-items: start;
}
.trust-copy p {
	margin: 0 0 .9rem 0;
	line-height: 1.75;
	font-size: 1.08rem;
}
.trust-list {
	list-style: none;
	margin: 0;
	padding: .25rem 0 0 0;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.trust-list li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .9rem;
	border-bottom: 1px dashed rgba(255,255,255,.08);
	font-size: .98rem;
}
.trust-list li:last-child { border-bottom: 0; }
.trust-list .check {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--vx-yellow), #e4b700);
	box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
	color: #07142b;
	font-weight: 800;
	font-size: .85rem;
}
.trust-foot {
	margin-top: 1rem;
	padding-top: .7rem;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: .95rem;
	opacity: .9;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.trust-foot .dot {
	width: .55rem; height: .55rem; border-radius: 50%;
	margin-left: 1em;
	background: #29d344;
	box-shadow: 0 0 10px rgba(41,211,68,.6);
}

/* Stack trust columns on small screens */
@media (max-width: 900px) {
	.trust-grid { grid-template-columns: 1fr; }
	.trust-card { padding: 1.25rem; }
}

/* === 10) Desktop layout upgrades ========================================== */
@media (min-width: 900px) {
	.hero { grid-template-columns: 1.1fr .9fr; }
	.hero .copy { text-align: left; }
	.steps { grid-template-columns: repeat(3, 1fr); }
	.features { grid-template-columns: repeat(3, 1fr); }
	.gallery { grid-template-columns: repeat(3, 1fr); }
	.hero .screen { min-height: 220px; }
}

/* === 11) Misc tweaks ======================================================= */
.logo-img { height: 150px; } /* per current design */
/* ——— Trust section: force white copy, keep yellow heading ——— */
.trust-section,
.trust-section *:not(h2):not(.check) {
	color: #f1f5ff !important;   /* readable white */
	text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.trust-section h2 {
	color: var(--vx-yellow, #FFCC00) !important; /* headline stays gold */
}

/* optional: bump copy size a touch */
.trust-section .trust-copy p { font-size: 1.12rem; line-height: 1.75; }
/* === How It Works === */
#how-it-works .how-sub{opacity:.9;max-width:820px}
#how-it-works .how-block{margin-top:14px}
#how-it-works .bullet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 14px;margin:10px 0 6px;padding-left:18px}
#how-it-works .flow-steps{counter-reset:flow;list-style:decimal;padding-left:18px;margin:10px 0}
#how-it-works .tip{opacity:.9;margin-top:8px}
#how-it-works .note{opacity:.9;font-style:italic;margin-top:6px}
/* === Founder Photo === */
.founder-photo {
	display: flex;
	justify-content: center;
	margin: 10px auto 18px;
}

.founder-photo img {
	width: clamp(120px, 25vw, 220px); /* ✅ scales nicely on mobile & desktop */
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
	object-fit: cover;
}
/* === How It Works Text Layout (1080-optimized) === */
#how-it-works .trust-copy {
	max-width: 900px;          /* keeps it comfortably centered */
	margin: 0 auto;            /* centers on large screens */
	line-height: 1.55;
	font-size: 1rem;           /* slightly smaller for 1080 screens */
}

#how-it-works .trust-copy p {
	margin-bottom: 14px;       /* reduces vertical scroll */
}

#how-it-works .trust-copy strong,
#how-it-works .trust-copy b {
	color: #ffd84d;            /* highlight key ideas in VinDXit yellow */
	font-weight: 700;
}

#how-it-works .trust-grid {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

@media (min-width: 1100px) {
	#how-it-works .trust-grid {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	#how-it-works .trust-copy {
		flex: 1 1 65%;          /* left column for text */
	}
	#how-it-works .trust-list {
		flex: 1 1 30%;          /* right column list */
		align-self: flex-start;
	}
}