/* ==========================================================================
   AnyTally — marketing site styles
   Tailwind (CDN) handles utilities; this file holds design tokens, the shared
   hero/section vocabulary, and the bespoke components (feature cards, pills,
   CTA panel, and the live "tally card" hero mockup).
   ========================================================================== */

body {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	--bg-color: #ffffff;
	--text-color: #000000;
	--header-border: #e5e5e5;
	--card-bg: #ffffff;
	--border-gray: #d4d4d4;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1b1b1b;
		--text-color: rgba(255, 255, 255, 0.8);
		--header-border: rgba(255, 255, 255, 0.05);
		--card-bg: #2c2c2c;
		--border-gray: rgba(255, 255, 255, 0.2);
	}
}

html { scroll-behavior: smooth; }

#main-nav {
	transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease;
}

/* ---- Headings ---------------------------------------------------------- */
/* Named "gradient-text" to match the Neatbase vocabulary; rendered as a flat
   high-contrast heading color (looks cleaner against the flat backgrounds). */
.gradient-text { color: #171717; }
.dark .gradient-text { color: #ffffff; }

.section-heading { font-weight: 700; letter-spacing: -0.025em; }

/* ---- Hero background texture + glow ------------------------------------ */
.dot-grid {
	background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: center top;
}
.dark .dot-grid {
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.hero-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 80% at 50% 0%, rgba(0, 158, 255, 0.10), transparent 72%);
	pointer-events: none;
	z-index: 0;
}

/* ---- Floating decorative icons ----------------------------------------- */
@keyframes float {
	0%, 100% { transform: translateY(0) rotate(var(--rotate)); }
	50% { transform: translateY(-8px) rotate(var(--rotate)); }
}
.floating-icon {
	position: absolute;
	opacity: 0.4;
	font-size: 40px;
	animation: float 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}
.floating-icon:nth-of-type(8n+1) { color: #1899F2; }
.floating-icon:nth-of-type(8n+2) { color: #FF3B47; }
.floating-icon:nth-of-type(8n+3) { color: #1AD24E; }
.floating-icon:nth-of-type(8n+4) { color: #FBB300; }
.floating-icon:nth-of-type(8n+5) { color: #0DC7C0; }
.floating-icon:nth-of-type(8n+6) { color: #9A5BFF; }
.floating-icon:nth-of-type(8n+7) { color: #1FA6FF; }
.floating-icon:nth-of-type(8n)   { color: #FF7A1A; }
.floating-icon:nth-child(odd) { animation-duration: 7s; }
.floating-icon:nth-child(3n) { animation-duration: 8s; }

/* ---- Hero fade-in ------------------------------------------------------ */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(24px); }
	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.2s; }
.fade-in-up-3 { animation-delay: 0.4s; }
.fade-in-up-4 { animation-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
	.fade-in-up { opacity: 1; animation: none; }
	.floating-icon { animation: none; }
}

/* ---- Inline content links (legal pages) -------------------------------- */
.content-link {
	color: #0088ff;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(0, 136, 255, 0.4);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.content-link:hover { text-decoration-color: #0088ff; }
.dark .content-link { color: #4da8ff; text-decoration-color: rgba(77, 168, 255, 0.4); }
.dark .content-link:hover { text-decoration-color: #4da8ff; }

/* ---- Feature cards ----------------------------------------------------- */
.feature-card {
	background: var(--card-bg);
	border: 1px solid var(--header-border);
	border-radius: 18px;
	padding: 26px 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.dark .feature-card { border-color: rgba(255, 255, 255, 0.08); }
.dark .feature-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	font-size: 26px;
	margin-bottom: 16px;
	color: var(--c, #1899F2);
	background: color-mix(in srgb, var(--c, #1899F2) 12%, transparent);
}
.feature-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: #171717; margin-bottom: 8px; }
.dark .feature-title { color: #fff; }
.feature-desc { font-size: 0.9375rem; line-height: 1.6; color: #525252; }
.dark .feature-desc { color: rgba(255, 255, 255, 0.62); }

/* ---- Pills (privacy badges) -------------------------------------------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #404040;
	background: #f5f5f5;
	border: 1px solid var(--header-border);
}
.pill i { font-size: 1.05rem; color: #1899F2; }
.dark .pill { color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); }
.dark .pill i { color: #33B1FF; }

/* ---- Final CTA panel --------------------------------------------------- */
.cta-panel {
	background: linear-gradient(180deg, rgba(24, 153, 242, 0.08), rgba(24, 153, 242, 0.02));
	border: 1px solid var(--header-border);
}
.dark .cta-panel {
	background: linear-gradient(180deg, rgba(24, 153, 242, 0.14), rgba(24, 153, 242, 0.03));
	border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Tally card mockup (hero) — a faithful, lightweight nod to the app's
   detail view: header (glyph + name + day switcher), entry rows, and a
   Liquid-Glass-style total footer with a goal progress bar.
   ========================================================================== */
.at-card {
	text-align: left;
	background: var(--card-bg);
	border: 1px solid var(--header-border);
	border-radius: 22px;
	padding: 18px 18px 16px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.dark .at-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); }

.at-card__head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.at-card__glyph {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: rgba(24, 153, 242, 0.12); color: #1899F2; font-size: 22px;
}
.dark .at-card__glyph { color: #33B1FF; }
.at-card__titles { display: flex; flex-direction: column; gap: 2px; }
.at-card__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: #171717; }
.dark .at-card__name { color: #fff; }
.at-card__day { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: #8a8a8e; }
.at-card__day i { font-size: 1rem; }

.at-card__rows { display: flex; flex-direction: column; }
.at-card__row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 8px; border-radius: 12px;
}
.at-card__row:nth-child(even) { background: rgba(0, 0, 0, 0.025); }
.dark .at-card__row:nth-child(even) { background: rgba(255, 255, 255, 0.04); }
.at-sign {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 999px;
	font-size: 0.95rem; font-weight: 700;
	background: rgba(0, 0, 0, 0.06);
}
.dark .at-sign { background: rgba(255, 255, 255, 0.1); }
.at-sign--add { color: #1899F2; }
.at-sign--sub { color: #FF3B47; }
.at-label { flex: 1; font-size: 0.95rem; color: #171717; }
.dark .at-label { color: rgba(255, 255, 255, 0.88); }
.at-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: #171717; }
.dark .at-amt { color: #fff; }
.at-unit { color: #8a8a8e; font-weight: 500; margin-left: 3px; }

.at-card__footer {
	margin-top: 12px; padding: 14px 16px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.03);
	border: 0.5px solid rgba(0, 0, 0, 0.07);
}
.dark .at-card__footer { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); }
.at-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.at-total-label { font-size: 0.95rem; font-weight: 500; color: #8a8a8e; }
.at-total { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #171717; }
.dark .at-total { color: #fff; }
.at-bar { margin-top: 12px; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.dark .at-bar { background: rgba(255, 255, 255, 0.12); }
.at-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1899F2, #33B1FF); }
.at-goal { margin-top: 7px; text-align: right; font-size: 0.78rem; color: #8a8a8e; font-variant-numeric: tabular-nums; }