/*
Theme Name: TechFZC
Theme URI: https://techfzc.com
Author: TechFZC
Author URI: https://techfzc.com
Description: Custom sports marketing agency theme for TechFZC — bold, clean, red & white brand, built around booking a call.
Version: 2.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techfzc
*/

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
:root {
	--tf-red: #c72a09;
	--tf-red-dark: #9f2107;
	--tf-red-darker: #771905;
	--tf-red-tint: #faedeb;
	--tf-red-tint-2: #f6dfda;
	--tf-ink: #111214;
	--tf-muted: #52565d;
	--tf-faint: #85898f;
	--tf-bg: #ffffff;
	--tf-bg-alt: #f6f6f7;
	--tf-navy: #101114;
	--tf-border: rgba(17, 18, 20, 0.1);
	--tf-border-strong: rgba(17, 18, 20, 0.18);
	--tf-radius: 18px;
	--tf-radius-sm: 12px;
	--tf-container: 1180px;
	--tf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tf-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
	background: var(--tf-bg);
	color: var(--tf-ink);
	font-family: var(--tf-font);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { font-family: var(--tf-font); margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }

.tf-container {
	max-width: var(--tf-container);
	margin: 0 auto;
	padding: 0 24px;
}

.tf-icon { width: 20px; height: 20px; flex-shrink: 0; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; word-wrap: normal !important;
}

.tf-page { position: relative; }

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

/* ==========================================================================
   3. Announcement bar
   ========================================================================== */
.tf-announce {
	background: var(--tf-ink);
	color: #fff;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 20px;
}
.tf-announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.tf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: transform 0.2s var(--tf-ease), box-shadow 0.2s var(--tf-ease), background 0.2s var(--tf-ease), border-color 0.2s var(--tf-ease), color 0.2s var(--tf-ease);
	border: 2px solid transparent;
}
.tf-btn .tf-icon { width: 16px; height: 16px; }
.tf-btn--primary {
	background: var(--tf-red);
	color: #fff;
	box-shadow: 0 6px 20px -6px rgba(199, 42, 9, 0.55);
}
.tf-btn--primary:hover { background: var(--tf-red-dark); transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(199, 42, 9, 0.6); }
.tf-btn--ghost {
	background: transparent;
	border-color: var(--tf-border-strong);
	color: var(--tf-ink);
}
.tf-btn--ghost:hover { border-color: var(--tf-ink); transform: translateY(-2px); }
.tf-btn--on-dark {
	background: #fff;
	color: var(--tf-ink);
}
.tf-btn--on-dark:hover { background: var(--tf-red-tint); color: var(--tf-red-dark); transform: translateY(-2px); }
.tf-btn--sm { padding: 11px 20px; font-size: 13px; }
.tf-btn--lg { padding: 20px 38px; font-size: 17px; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.tf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 18px 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.3s var(--tf-ease), border-color 0.3s var(--tf-ease), padding 0.3s var(--tf-ease);
}
.tf-header.is-scrolled { border-bottom-color: var(--tf-border); box-shadow: 0 2px 16px -8px rgba(17, 18, 20, 0.12); padding: 12px 0; }
.tf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tf-logo { display: flex; align-items: center; }
.tf-logo .custom-logo-link { display: flex; align-items: center; }
.tf-logo img,
.tf-logo img.custom-logo {
	max-height: 42px;
	width: auto;
	height: auto;
	border-radius: 8px;
}
.tf-logo__mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tf-font);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.01em;
	color: var(--tf-ink);
	line-height: 1;
}
.tf-logo__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--tf-red);
	color: #fff;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: 0;
}

.tf-nav { display: flex; align-items: center; gap: 32px; }
.tf-nav a {
	font-size: 14px;
	font-weight: 700;
	color: var(--tf-muted);
	transition: color 0.2s;
}
.tf-nav a:hover { color: var(--tf-ink); }

.tf-header__actions { display: flex; align-items: center; gap: 16px; }

.tf-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: var(--tf-bg-alt);
	border: 1px solid var(--tf-border);
	border-radius: 10px;
	padding: 0;
}
.tf-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--tf-ink); margin: 0 auto; transition: transform 0.25s, opacity 0.25s; }
.tf-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tf-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.tf-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   6. Hero — big centered hook (Hormozi-style)
   ========================================================================== */
.tf-hero { padding: 76px 0 56px; text-align: center; }
.tf-hero__inner { max-width: 840px; margin: 0 auto; }
.tf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tf-red);
	margin: 0 0 20px;
}
.tf-h1 {
	font-size: clamp(2.4rem, 5.4vw, 4rem);
	font-weight: 900;
	line-height: 1.06;
	margin-bottom: 22px;
}
.tf-highlight { color: var(--tf-red); }
.tf-lead { font-size: 19px; font-weight: 500; color: var(--tf-muted); max-width: 56ch; margin: 0 auto 36px; }
.tf-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 28px; }
.tf-hero__trust { font-size: 14px; font-weight: 700; color: var(--tf-faint); }
.tf-hero__trust strong { color: var(--tf-ink); }

/* Marquee */
.tf-marquee {
	border-top: 1px solid var(--tf-border);
	border-bottom: 1px solid var(--tf-border);
	overflow: hidden;
	background: var(--tf-bg-alt);
	padding: 18px 0;
	margin-top: 48px;
}
.tf-marquee__track {
	display: flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
	width: max-content;
	animation: tf-marquee 32s linear infinite;
}
.tf-marquee__track span { font-family: var(--tf-font); font-weight: 800; font-size: 14px; color: var(--tf-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tf-marquee__track i { color: var(--tf-red); font-style: normal; }
@keyframes tf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   7. Trust stats (believable, no inflated %)
   ========================================================================== */
.tf-trust { padding: 56px 0; border-bottom: 1px solid var(--tf-border); }
.tf-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.tf-trust__stat { display: flex; flex-direction: column; gap: 6px; }
.tf-trust__value { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 900; color: var(--tf-ink); }
.tf-trust__label { font-size: 13.5px; font-weight: 600; color: var(--tf-faint); }

/* ==========================================================================
   8. Video section
   ========================================================================== */
.tf-video-section { background: var(--tf-navy); color: #fff; padding: 88px 0; text-align: center; }
.tf-video-section .tf-eyebrow { color: #ff8a6b; }
.tf-video-section .tf-h2 { color: #fff; max-width: 760px; margin: 0 auto 16px; }
.tf-video-section .tf-body { color: rgba(255, 255, 255, 0.68); max-width: 560px; margin: 0 auto 40px; }
.tf-video-frame {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--tf-radius);
	overflow: hidden;
	background: linear-gradient(150deg, #241210 0%, #171819 60%, #101114 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tf-video-frame iframe, .tf-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tf-video-play {
	width: 84px; height: 84px; border-radius: 50%;
	background: var(--tf-red); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 12px rgba(199, 42, 9, 0.18), 0 0 0 24px rgba(199, 42, 9, 0.08);
	transition: transform 0.3s var(--tf-ease);
	position: relative; z-index: 2;
}
.tf-video-frame:hover .tf-video-play { transform: scale(1.08); }
.tf-video-play .tf-icon { width: 32px; height: 32px; }
.tf-video-caption { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55); z-index: 2; }

/* ==========================================================================
   9. Sections & type
   ========================================================================== */
.tf-section { padding: 96px 0; }
.tf-section--alt { background: var(--tf-bg-alt); }
.tf-section__head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.tf-section__head .tf-eyebrow { justify-content: center; }
.tf-h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.tf-h4 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.tf-body { color: var(--tf-muted); font-size: 16px; }
.tf-section__head .tf-body { margin: 0 auto; }

.tf-about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.tf-checklist { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 32px; }
.tf-checklist li { display: flex; align-items: center; gap: 10px; color: var(--tf-ink); font-weight: 700; }
.tf-checklist .tf-icon { color: var(--tf-red); width: 18px; height: 18px; }

/* ==========================================================================
   10. Grid & cards
   ========================================================================== */
.tf-grid { display: grid; gap: 24px; }
.tf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tf-grid--4 { grid-template-columns: repeat(4, 1fr); }

.tf-card {
	background: #fff;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius);
	padding: 28px;
	transition: transform 0.3s var(--tf-ease), border-color 0.3s var(--tf-ease), box-shadow 0.3s var(--tf-ease);
}
.tf-card:hover { transform: translateY(-5px); border-color: var(--tf-border-strong); box-shadow: 0 20px 40px -20px rgba(17, 18, 20, 0.18); }

/* Filters */
.tf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.tf-filter {
	padding: 10px 20px; border-radius: 999px; border: 2px solid var(--tf-border);
	background: transparent; color: var(--tf-muted); font-size: 13px; font-weight: 700;
	transition: all 0.25s var(--tf-ease);
}
.tf-filter:hover { color: var(--tf-ink); border-color: var(--tf-border-strong); }
.tf-filter.is-active { background: var(--tf-red); color: #fff; border-color: var(--tf-red); }

/* Portfolio */
.tf-portfolio__item { padding: 0; overflow: hidden; }
.tf-portfolio__item.is-hidden { display: none; }
.tf-portfolio__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.tf-portfolio__glow { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%); }
.tf-gradient-1, .tf-gradient-2, .tf-gradient-3, .tf-gradient-4, .tf-gradient-5, .tf-gradient-6 {
	background-color: var(--tf-red-tint-2);
	background-image: linear-gradient(135deg, var(--tf-red-tint-2), var(--tf-bg-alt));
}
.tf-portfolio__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tf-red); margin: 20px 24px 6px; }
.tf-portfolio__item .tf-h4 { margin: 0 24px 24px; }

/* Services */
.tf-service__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--tf-red-tint);
	color: var(--tf-red);
	margin-bottom: 18px;
}
.tf-service p { color: var(--tf-muted); font-size: 14px; }

/* Why / process numerals */
.tf-num { font-size: 32px; font-weight: 900; color: transparent; -webkit-text-stroke: 1.4px var(--tf-border-strong); display: block; margin-bottom: 12px; }
.tf-why p, .tf-process__step p { color: var(--tf-muted); font-size: 14px; }
.tf-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.tf-process__step { border-top: 3px solid var(--tf-ink); padding-top: 24px; }

/* ==========================================================================
   11. Reviews (real screenshots)
   ========================================================================== */
.tf-reviews__stat { text-align: center; margin-bottom: 40px; }
.tf-reviews__stat strong { color: var(--tf-red); }
.tf-reviews__grid {
	columns: 3 280px;
	column-gap: 24px;
}
.tf-review {
	break-inside: avoid;
	margin-bottom: 24px;
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius-sm);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px -6px rgba(17,18,20,0.1);
}
.tf-review img { width: 100%; display: block; }

/* ==========================================================================
   12. Founder / verticals / FAQ
   ========================================================================== */
.tf-founder__inner { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: center; }
.tf-founder__photo {
	aspect-ratio: 1; border-radius: var(--tf-radius); background: var(--tf-bg-alt);
	background-size: cover; background-position: center;
	border: 1px solid var(--tf-border-strong);
	display: flex; align-items: center; justify-content: center;
	color: var(--tf-red);
}
.tf-founder__photo span .tf-icon { width: 64px; height: 64px; }
.tf-founder__title { color: var(--tf-red); font-weight: 800; margin: 8px 0 20px; }

.tf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tf-chip {
	padding: 12px 22px; border-radius: 999px; border: 2px solid var(--tf-border-strong);
	font-size: 14px; font-weight: 700; color: var(--tf-muted);
	transition: all 0.25s var(--tf-ease);
}
.tf-chip:hover { color: var(--tf-red); border-color: var(--tf-red); background: var(--tf-red-tint); }

.tf-faq { max-width: 780px; }
.tf-accordion__item { border-bottom: 1px solid var(--tf-border); }
.tf-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none; border: none; color: var(--tf-ink); text-align: left;
	padding: 24px 4px; font-family: var(--tf-font); font-size: 17px; font-weight: 800;
}
.tf-accordion__trigger i { font-style: normal; font-size: 22px; color: var(--tf-red); transition: transform 0.3s var(--tf-ease); flex-shrink: 0; margin-left: 16px; }
.tf-accordion__trigger[aria-expanded="true"] i { transform: rotate(45deg); }
.tf-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--tf-ease); }
.tf-accordion__panel p { padding: 0 4px 24px; color: var(--tf-muted); max-width: 62ch; }
.tf-faq__cta { text-align: center; margin-top: 48px; }

/* Final CTA */
.tf-cta {
	padding: 100px 0;
	text-align: center;
	background: var(--tf-red);
	color: #fff;
}
.tf-cta .tf-eyebrow { color: rgba(255,255,255,0.85); }
.tf-cta .tf-h2 { color: #fff; max-width: 720px; margin: 0 auto 20px; }
.tf-cta .tf-body { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto 36px; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.tf-footer { padding: 72px 0 32px; background: var(--tf-bg-alt); }
.tf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--tf-border); }
.tf-footer__brand p { color: var(--tf-faint); margin-top: 14px; max-width: 32ch; }
.tf-footer__col h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tf-faint); margin-bottom: 18px; }
.tf-footer__col { display: flex; flex-direction: column; gap: 12px; }
.tf-footer__col a { color: var(--tf-muted); font-size: 14px; font-weight: 600; transition: color 0.2s; }
.tf-footer__col a:hover { color: var(--tf-red); }

.tf-social { display: flex; gap: 10px; margin-top: 4px; }
.tf-social__link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: #fff; border: 1px solid var(--tf-border-strong);
	color: var(--tf-ink);
	transition: transform 0.2s var(--tf-ease), border-color 0.2s, color 0.2s;
}
.tf-social__link:hover { color: var(--tf-red); border-color: var(--tf-red); transform: translateY(-2px); }
.tf-social__link .tf-icon--brand { width: 20px; height: 20px; }
.tf-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; color: var(--tf-faint); font-size: 13px; flex-wrap: wrap; gap: 12px; }
.tf-footer__legal { display: flex; gap: 20px; }
.tf-footer__legal a { color: var(--tf-faint); }
.tf-footer__legal a:hover { color: var(--tf-ink); }

/* Simple pages */
.tf-prose { max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--tf-ink); }
.tf-prose p { margin-bottom: 1.2em; }
.tf-prose h2 { font-size: 1.6rem; margin: 1.6em 0 0.6em; }
.tf-prose h3 { font-size: 1.3rem; margin: 1.4em 0 0.5em; }
.tf-prose ul, .tf-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.tf-prose ul { list-style: disc; }
.tf-prose ol { list-style: decimal; }
.tf-prose li { margin-bottom: 0.5em; }
.tf-prose a { color: var(--tf-red); text-decoration: underline; text-underline-offset: 2px; }
.tf-prose strong { font-weight: 800; }
.tf-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--tf-red); color: var(--tf-muted); font-style: italic; }
.tf-prose img { border-radius: var(--tf-radius-sm); margin: 1.2em 0; }
.tf-prose figure { margin: 1.6em 0; }
.tf-prose figcaption { font-size: 13px; color: var(--tf-faint); margin-top: 8px; text-align: center; }

/* Blog listing */
.tf-blog-grid { align-items: start; }
.tf-post-preview { padding: 0; overflow: hidden; }
.tf-post-preview__media { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.tf-post-preview__body { padding: 24px; }
.tf-post-preview__meta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tf-faint); margin-bottom: 8px; }
.tf-post-preview__body .tf-body { font-size: 14px; margin-bottom: 16px; }
.tf-post-preview__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--tf-red); }
.tf-post-preview__link .tf-icon { width: 16px; height: 16px; }

/* WP pagination */
.tf-pagination { display: flex; justify-content: center; margin-top: 48px; }
.tf-pagination .nav-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tf-pagination a.page-numbers, .tf-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border-radius: 999px; border: 1px solid var(--tf-border-strong);
	font-weight: 700; font-size: 14px; color: var(--tf-muted);
}
.tf-pagination span.current { background: var(--tf-red); border-color: var(--tf-red); color: #fff; }
.tf-pagination a.page-numbers:hover { border-color: var(--tf-red); color: var(--tf-red); }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.tf-about { grid-template-columns: 1fr; gap: 32px; }
	.tf-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tf-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.tf-process { grid-template-columns: repeat(2, 1fr); }
	.tf-founder__inner { grid-template-columns: 1fr; }
	.tf-founder__photo { max-width: 320px; margin: 0 auto; }
	.tf-footer__grid { grid-template-columns: 1fr 1fr; }
	.tf-footer__brand { grid-column: 1 / -1; }
	.tf-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.tf-reviews__grid { columns: 2 260px; }
}

@media (max-width: 768px) {
	.tf-nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 80vw);
		background: #fff; border-left: 1px solid var(--tf-border);
		flex-direction: column; align-items: flex-start; justify-content: flex-start;
		padding: 100px 32px 32px; gap: 24px;
		transform: translateX(100%); transition: transform 0.35s var(--tf-ease);
		z-index: 90;
	}
	.tf-nav.is-open { transform: translateX(0); }
	.tf-nav a { font-size: 18px; }
	.tf-nav-toggle { display: flex; }
	.tf-header__actions .tf-btn--sm { display: none; }
	.tf-grid--4, .tf-grid--3 { grid-template-columns: 1fr; }
	.tf-process { grid-template-columns: 1fr; }
	.tf-section { padding: 68px 0; }
	.tf-hero { padding: 56px 0 40px; }
	.tf-video-section { padding: 64px 0; }
	.tf-reviews__grid { columns: 1 100%; }
}

@media (max-width: 480px) {
	.tf-btn--lg { width: 100%; justify-content: center; }
	.tf-footer__bottom { flex-direction: column; align-items: flex-start; }
	.tf-hero__actions .tf-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.tf-reveal { opacity: 1; transform: none; transition: none; }
	.tf-marquee__track { animation: none; }
	html { scroll-behavior: auto; }
}