/*
	Modern visual refresh layered on top of the Photon template (main.css).
	Kept as a separate stylesheet, loaded after main.css, so it only overrides
	what's needed (fonts, colors, buttons, spacing, new feature cards) instead
	of touching the generated SASS output directly.
*/

:root {
	--tc-blue: #2f6fed;
	--tc-teal: #17b8a6;
	--tc-navy: #101a33;
	--tc-ink: #1b2437;
	--tc-muted: #6b7590;
	--tc-bg: #f6f8fc;
	--tc-card: #ffffff;
	--tc-radius: 18px;
}

body,
input,
select,
textarea {
	font-family: "Inter", "Source Sans Pro", Helvetica, Arial, sans-serif;
}

body {
	background-color: var(--tc-bg);
	color: var(--tc-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Inter", "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tc-navy);
}

/* ---- Header / hero -------------------------------------------------- */

#header {
	background: radial-gradient(120% 140% at 50% -10%, #1c3f91 0%, #16264f 55%, #0e1730 100%);
	position: relative;
	overflow: hidden;
}

#header::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 15% 20%, rgba(47, 111, 237, 0.35), transparent 60%),
		radial-gradient(50% 45% at 85% 15%, rgba(23, 184, 166, 0.28), transparent 60%);
	pointer-events: none;
}

#header .inner {
	position: relative;
	z-index: 1;
}

#header img {
	filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
}

#header h1 {
	color: #ffffff;
	font-size: 3em;
	margin-top: 0.4em;
}

#header p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.15em;
}

/* ---- Buttons ---------------------------------------------------------- */

.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.button:hover {
	transform: translateY(-2px);
}

.button.primary,
#one .button.primary,
#four .button.primary {
	background: linear-gradient(135deg, var(--tc-blue), var(--tc-teal)) !important;
	box-shadow: 0 10px 24px rgba(47, 111, 237, 0.35);
	border: none !important;
}

.button.primary:hover {
	box-shadow: 0 14px 30px rgba(47, 111, 237, 0.45);
}

/* Store badges (App Store / Google Play) get a gentle lift, not the pill treatment */
.dwnld_lnk-apple,
.dwnld_lnk-android {
	display: inline-block;
	transition: transform 0.18s ease, filter 0.18s ease;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.dwnld_lnk-apple:hover,
.dwnld_lnk-android:hover {
	transform: translateY(-3px);
}

/* ---- Content sections -------------------------------------------------- */

#one.main.style1 {
	background-color: var(--tc-bg);
}

#one .container p {
	color: var(--tc-muted);
	font-size: 1.05em;
	line-height: 1.7;
}

/* ---- Feature cards (new "why TeamCollect" section) ---------------------- */

.tc-features {
	background-color: var(--tc-bg);
	padding: 3.5em 0 4.5em;
}

.tc-features .container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2em;
}

.tc-features header.major {
	text-align: center;
	margin-bottom: 2.2em;
}

.tc-features header.major p {
	color: var(--tc-muted);
	max-width: 640px;
	margin: 0.6em auto 0;
}

.tc-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4em;
}

@media screen and (max-width: 980px) {
	.tc-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 560px) {
	.tc-feature-grid {
		grid-template-columns: 1fr;
	}
}

.tc-feature-card {
	background: var(--tc-card);
	border-radius: var(--tc-radius);
	padding: 1.8em 1.5em;
	box-shadow: 0 10px 30px rgba(16, 26, 51, 0.06);
	border: 1px solid rgba(16, 26, 51, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tc-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(16, 26, 51, 0.1);
}

.tc-feature-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tc-blue), var(--tc-teal));
	color: #fff;
	margin-bottom: 1em;
	font-size: 1.15em;
}

.tc-feature-card h3 {
	font-size: 1.05em;
	margin: 0 0 0.4em;
}

.tc-feature-card p {
	color: var(--tc-muted);
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0;
}

/* ---- Download section ---------------------------------------------------- */

#four.main.style2.special {
	background: linear-gradient(135deg, #16264f, #0e1730);
}

#four h2 {
	color: #ffffff;
}

/* ---- Footer --------------------------------------------------------------- */

#footer {
	background-color: var(--tc-navy);
}

#footer .icon {
	transition: transform 0.18s ease;
}

#footer .icon:hover {
	transform: translateY(-2px);
}