/*
Theme Name: SocialToolsHub
Theme URI: https://socialtoolshub.online/
Author: SocialToolsHub
Description: Fast, responsive creator tools WordPress theme.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: socialtoolshub
License: GNU General Public License v2 or later
*/

:root {
	--primary:#635bff;
	--primary-dark:#4f46e5;
	--accent:#06b6d4;
	--bg:#f7f8fc;
	--surface:#fff;
	--soft:#f0f2f8;
	--text:#111827;
	--muted:#667085;
	--border:#e5e7eb;
	--header:rgba(255,255,255,.88);
	--shadow:0 12px 35px rgba(15,23,42,.08);
	--shadow-lg:0 24px 70px rgba(15,23,42,.13);
	--radius:18px;
	--container:1220px;
	--transition:.2s ease;
}

html[data-theme="dark"] {
	--bg:#090d18;
	--surface:#111827;
	--soft:#182132;
	--text:#f8fafc;
	--muted:#a7b0c0;
	--border:#263247;
	--header:rgba(9,13,24,.88);
	--shadow:0 15px 40px rgba(0,0,0,.25);
	--shadow-lg:0 25px 75px rgba(0,0,0,.38);
}

*,
*::before,
*::after {
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
}

body {
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:16px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	transition:background var(--transition),color var(--transition);
}

body.menu-open {
	overflow:hidden;
}

img,
svg,
video {
	display:block;
	max-width:100%;
	height:auto;
}

a {
	color:inherit;
	text-decoration:none;
}

button,
input,
select,
textarea {
	font:inherit;
}

button {
	cursor:pointer;
}

ul,
ol {
	margin:0;
	padding:0;
}

h1,
h2,
h3,
h4,
p {
	margin-top:0;
}

h1,
h2,
h3,
h4 {
	color:var(--text);
	line-height:1.2;
	letter-spacing:-.025em;
}

p {
	color:var(--muted);
}

.site {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

.site-main {
	flex:1;
}

.site-container {
	width:min(calc(100% - 40px),var(--container));
	margin-inline:auto;
}

.screen-reader-text {
	position:absolute!important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.screen-reader-text:focus {
	position:fixed!important;
	top:12px;
	left:12px;
	z-index:99999;
	width:auto;
	height:auto;
	padding:12px 16px;
	background:var(--surface);
	color:var(--text);
	border-radius:10px;
	clip:auto;
}

:focus-visible {
	outline:3px solid rgba(99,91,255,.35);
	outline-offset:3px;
}

/* Header */

.site-header {
	position:sticky;
	top:0;
	z-index:1000;
	background:var(--header);
	border-bottom:1px solid var(--border);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

.header-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	min-height:76px;
}

.site-brand,
.footer-logo {
	display:inline-flex;
	align-items:center;
	gap:11px;
	flex-shrink:0;
}

.custom-logo-link {
	display:flex;
	align-items:center;
}

.custom-logo {
	width:auto;
	max-width:190px;
	max-height:48px;
	object-fit:contain;
}

.brand-mark {
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	border-radius:13px;
	background:linear-gradient(135deg,var(--primary),var(--accent));
	color:#fff;
	font-size:1.25rem;
	font-weight:900;
	box-shadow:0 10px 24px rgba(99,91,255,.25);
}

.brand-copy {
	display:flex;
	flex-direction:column;
	line-height:1.08;
}

.brand-copy strong {
	font-size:1.08rem;
	letter-spacing:-.025em;
}

.brand-copy small {
	margin-top:5px;
	color:var(--muted);
	font-size:.68rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.desktop-nav {
	margin-left:auto;
}

.nav-menu,
.desktop-nav ul {
	display:flex;
	align-items:center;
	gap:5px;
	list-style:none;
}

.nav-menu a,
.desktop-nav a {
	display:flex;
	align-items:center;
	min-height:42px;
	padding:9px 13px;
	border-radius:10px;
	color:var(--muted);
	font-size:.93rem;
	font-weight:650;
	transition:background var(--transition),color var(--transition);
}

.nav-menu a:hover,
.desktop-nav a:hover,
.current-menu-item > a {
	background:var(--soft);
	color:var(--text);
}

.header-actions {
	display:flex;
	align-items:center;
	gap:9px;
}

.language-picker {
	margin:0;
}

.language-picker select {
	width:75px;
	min-height:42px;
	padding:0 28px 0 12px;
	border:1px solid var(--border);
	border-radius:11px;
	background:var(--surface);
	color:var(--text);
	font-size:.8rem;
	font-weight:750;
}

.icon-button {
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	padding:0;
	border:1px solid var(--border);
	border-radius:11px;
	background:var(--surface);
	color:var(--text);
	transition:transform var(--transition),background var(--transition);
}

.icon-button:hover {
	background:var(--soft);
	transform:translateY(-1px);
}

.theme-toggle {
	position:relative;
	font-size:1.05rem;
}

.theme-icon--dark {
	display:none;
}

html[data-theme="dark"] .theme-icon--light {
	display:none;
}

html[data-theme="dark"] .theme-icon--dark {
	display:block;
}

.button,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:48px;
	padding:12px 20px;
	border:0;
	border-radius:999px;
	background:linear-gradient(135deg,var(--primary),var(--primary-dark));
	color:#fff;
	font-weight:750;
	line-height:1;
	box-shadow:0 10px 26px rgba(99,91,255,.2);
	transition:transform var(--transition),box-shadow var(--transition);
}

.button:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	transform:translateY(-2px);
	box-shadow:0 16px 34px rgba(99,91,255,.3);
}

.button--small {
	min-height:42px;
	padding:11px 17px;
	font-size:.9rem;
}

.button--secondary {
	border:1px solid var(--border);
	background:var(--surface);
	color:var(--text);
	box-shadow:none;
}

.menu-toggle {
	display:none;
	flex-direction:column;
	gap:4px;
}

.menu-toggle span:not(.screen-reader-text) {
	display:block;
	width:19px;
	height:2px;
	border-radius:5px;
	background:currentColor;
	transition:transform var(--transition),opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] span:nth-last-child(3) {
	transform:translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-last-child(2) {
	opacity:0;
}

.menu-toggle[aria-expanded="true"] span:last-child {
	transform:translateY(-6px) rotate(-45deg);
}

.mobile-navigation {
	border-top:1px solid var(--border);
	background:var(--surface);
	box-shadow:var(--shadow);
}

.mobile-navigation[hidden] {
	display:none;
}

.mobile-navigation .site-container {
	padding:14px 0 20px;
}

.mobile-menu {
	display:grid;
	gap:4px;
	list-style:none;
}

.mobile-menu a {
	display:block;
	padding:12px 14px;
	border-radius:10px;
	color:var(--muted);
	font-weight:650;
}

.mobile-menu a:hover {
	background:var(--soft);
	color:var(--text);
}

.mobile-tools-button {
	width:100%;
	margin-top:12px;
}

/* Main content */

.site-section {
	padding:82px 0;
}

.section-header {
	max-width:720px;
	margin-bottom:34px;
}

.section-header--center {
	margin-inline:auto;
	text-align:center;
}

.section-eyebrow {
	display:inline-flex;
	margin-bottom:12px;
	color:var(--primary);
	font-size:.8rem;
	font-weight:850;
	letter-spacing:.09em;
	text-transform:uppercase;
}

.section-title {
	margin-bottom:13px;
	font-size:clamp(2rem,4vw,3.3rem);
}

.section-description {
	margin-bottom:0;
	font-size:1.06rem;
}

.grid {
	display:grid;
	gap:22px;
}

.grid--2 {
	grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid--3 {
	grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid--4 {
	grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid--auto {
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.card {
	overflow:hidden;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}

.card:hover {
	transform:translateY(-5px);
	border-color:rgba(99,91,255,.35);
	box-shadow:var(--shadow-lg);
}

.card > a {
	display:block;
	height:100%;
}

.card img {
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
}

.card__content {
	padding:23px;
}

.card__title {
	margin-bottom:9px;
	font-size:1.2rem;
}

.card__description,
.card__description p {
	margin-bottom:0;
	font-size:.94rem;
}

.navigation.pagination {
	margin-top:40px;
}

.nav-links {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
}

.page-numbers {
	display:grid;
	place-items:center;
	min-width:42px;
	height:42px;
	padding:0 12px;
	border:1px solid var(--border);
	border-radius:10px;
	background:var(--surface);
	color:var(--text);
}

.page-numbers.current,
.page-numbers:hover {
	border-color:var(--primary);
	background:var(--primary);
	color:#fff;
}

/* Forms */

input,
select,
textarea {
	width:100%;
	border:1px solid var(--border);
	border-radius:13px;
	background:var(--surface);
	color:var(--text);
}

input,
select {
	min-height:50px;
	padding:11px 14px;
}

textarea {
	min-height:140px;
	padding:14px;
	resize:vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color:var(--primary);
	outline:0;
	box-shadow:0 0 0 4px rgba(99,91,255,.12);
}

/* Footer */

.site-footer {
	margin-top:auto;
	background:#0b1020;
	color:#fff;
}

.footer-top {
	display:grid;
	grid-template-columns:1.6fr repeat(3,1fr);
	gap:55px;
	padding:68px 0 50px;
}

.footer-brand {
	max-width:360px;
}

.footer-logo {
	margin-bottom:18px;
	color:#fff;
	font-size:1.1rem;
	font-weight:850;
}

.footer-brand p {
	margin-bottom:22px;
	color:#aeb8cb;
	font-size:.94rem;
}

.footer-socials {
	display:flex;
	gap:9px;
}

.footer-socials a {
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	border:1px solid #29344a;
	border-radius:10px;
	background:#131b2d;
	color:#d9e0ec;
	font-size:.78rem;
	font-weight:800;
	transition:background var(--transition),transform var(--transition);
}

.footer-socials a:hover {
	background:var(--primary);
	transform:translateY(-2px);
}

.footer-column h2 {
	margin-bottom:17px;
	color:#fff;
	font-size:.9rem;
	letter-spacing:.02em;
}

.footer-column ul {
	display:grid;
	gap:11px;
	list-style:none;
}

.footer-column a {
	color:#aeb8cb;
	font-size:.9rem;
	transition:color var(--transition);
}

.footer-column a:hover {
	color:#fff;
}

.footer-menu:not(:empty) + .footer-legal-fallback {
	display:none;
}

.footer-bottom {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding:22px 0;
	border-top:1px solid #222d42;
}

.footer-bottom p {
	margin:0;
	color:#8f9bb0;
	font-size:.84rem;
}

.footer-note {
	text-align:right;
}

/* WordPress content */

.alignwide {
	width:min(calc(100% - 40px),1400px);
	margin-inline:auto;
}

.alignfull {
	width:100%;
}

.entry-content {
	line-height:1.8;
}

.entry-content > * {
	max-width:820px;
	margin-inline:auto;
}

.entry-content a {
	color:var(--primary);
	text-decoration:underline;
	text-underline-offset:3px;
}

/* AdSense-safe ad spaces */

.ad-slot {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:110px;
	margin:28px 0;
	padding:12px;
	overflow:hidden;
	border:1px dashed var(--border);
	border-radius:14px;
	background:var(--surface);
	color:var(--muted);
	font-size:.75rem;
	text-align:center;
}

.ad-slot--leaderboard {
	min-height:100px;
}

.ad-slot--content {
	min-height:280px;
}

.ad-slot ins {
	max-width:100%;
}

/* Responsive */

@media (max-width:1050px) {
	.desktop-nav,
	.header-cta {
		display:none;
	}

	.menu-toggle {
		display:flex;
	}

	.footer-top {
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:38px;
	}

	.grid--4 {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:760px) {
	.site-container {
		width:min(calc(100% - 24px),var(--container));
	}

	.header-inner {
		min-height:68px;
		gap:12px;
	}

	.brand-copy small,
	.language-picker {
		display:none;
	}

	.brand-mark {
		width:38px;
		height:38px;
	}

	.site-section {
		padding:58px 0;
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns:1fr;
	}

	.footer-top {
		grid-template-columns:1fr 1fr;
		padding:52px 0 38px;
	}

	.footer-brand {
		grid-column:1/-1;
	}

	.footer-bottom {
		align-items:flex-start;
		flex-direction:column;
	}

	.footer-note {
		text-align:left;
	}
}

@media (max-width:480px) {
	body {
		font-size:15px;
	}

	.site-container {
		width:min(calc(100% - 20px),var(--container));
	}

	.site-brand {
		gap:8px;
	}

	.brand-copy strong {
		font-size:.94rem;
	}

	.header-actions {
		gap:6px;
	}

	.icon-button {
		width:39px;
		height:39px;
	}

	.footer-top {
		grid-template-columns:1fr;
		gap:30px;
	}

	.footer-brand {
		grid-column:auto;
	}

	.card__content {
		padding:20px;
	}
}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after {
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
	}
}

/* Homepage */

.home-hero {
	position:relative;
	overflow:hidden;
	padding:92px 0 84px;
	background:
		radial-gradient(circle at 10% 20%,rgba(99,91,255,.12),transparent 32%),
		radial-gradient(circle at 90% 30%,rgba(6,182,212,.12),transparent 30%),
		var(--bg);
}

.hero-glow {
	position:absolute;
	border-radius:50%;
	filter:blur(30px);
	pointer-events:none;
}

.hero-glow--one {
	top:-140px;
	right:-100px;
	width:420px;
	height:420px;
	background:rgba(99,91,255,.12);
}

.hero-glow--two {
	bottom:-180px;
	left:-120px;
	width:380px;
	height:380px;
	background:rgba(6,182,212,.1);
}

.hero-layout {
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
	align-items:center;
	gap:72px;
}

.hero-content {
	max-width:700px;
}

.hero-badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:22px;
	padding:8px 13px;
	border:1px solid rgba(99,91,255,.2);
	border-radius:999px;
	background:rgba(99,91,255,.08);
	color:var(--primary);
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.hero-content h1 {
	max-width:760px;
	margin-bottom:22px;
	font-size:clamp(3rem,6.2vw,5.9rem);
	line-height:1;
	letter-spacing:-.06em;
}

.hero-content h1 span {
	display:block;
	background:linear-gradient(100deg,var(--primary),#8b5cf6,var(--accent));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.hero-description {
	max-width:660px;
	margin-bottom:30px;
	font-size:1.12rem;
}

.hero-actions {
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-bottom:26px;
}

.button--hero {
	min-height:54px;
	padding:15px 23px;
}

.hero-trust {
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	color:var(--muted);
	font-size:.86rem;
	font-weight:650;
}

.hero-trust span {
	display:flex;
	align-items:center;
	gap:5px;
}

.hero-visual {
	position:relative;
	min-height:520px;
}

.workspace-card {
	position:absolute;
	inset:35px 25px;
	padding:24px;
	border:1px solid rgba(255,255,255,.6);
	border-radius:28px;
	background:rgba(255,255,255,.8);
	box-shadow:0 35px 90px rgba(44,51,89,.18);
	backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	transform:rotate(1.5deg);
}

html[data-theme="dark"] .workspace-card {
	border-color:rgba(255,255,255,.08);
	background:rgba(17,24,39,.88);
}

.workspace-top,
.workspace-progress {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
}

.workspace-top div,
.workspace-progress div {
	display:flex;
	flex-direction:column;
}

.workspace-label {
	margin-bottom:4px;
	color:var(--muted);
	font-size:.73rem;
	font-weight:750;
	text-transform:uppercase;
	letter-spacing:.08em;
}

.workspace-top strong {
	font-size:1.08rem;
}

.workspace-status {
	padding:6px 10px;
	border-radius:999px;
	background:rgba(22,163,74,.11);
	color:#16a34a;
	font-size:.72rem;
	font-weight:800;
}

.workspace-search {
	display:flex;
	align-items:center;
	gap:10px;
	margin:22px 0;
	padding:15px 16px;
	border:1px solid var(--border);
	border-radius:14px;
	background:var(--surface);
	color:var(--muted);
	font-size:.9rem;
}

.workspace-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px;
}

.workspace-grid a {
	display:flex;
	flex-direction:column;
	min-height:125px;
	padding:16px;
	border:1px solid var(--border);
	border-radius:16px;
	background:var(--surface);
	transition:transform var(--transition),box-shadow var(--transition);
}

.workspace-grid a:hover {
	transform:translateY(-3px);
	box-shadow:var(--shadow);
}

.mini-icon,
.platform-card__icon,
.benefit-icon,
.preview-youtube {
	display:grid;
	place-items:center;
}

.mini-icon {
	width:34px;
	height:34px;
	margin-bottom:16px;
	border-radius:10px;
}

.mini-icon svg,
.platform-card__icon svg,
.benefit-icon svg,
.preview-youtube svg,
.platform-strip svg,
.post-placeholder svg {
	width:21px;
	height:21px;
	fill:currentColor;
}

.mini-icon--youtube {
	background:rgba(239,68,68,.1);
	color:#ef4444;
}

.mini-icon--instagram {
	background:rgba(219,39,119,.1);
	color:#db2777;
}

.mini-icon--tiktok {
	background:rgba(15,23,42,.08);
	color:var(--text);
}

.mini-icon--linkedin {
	background:rgba(37,99,235,.1);
	color:#2563eb;
}

.workspace-grid strong {
	margin-bottom:3px;
	font-size:.88rem;
}

.workspace-grid small {
	color:var(--muted);
	font-size:.73rem;
}

.workspace-progress {
	margin-top:18px;
	padding:16px;
	border-radius:16px;
	background:linear-gradient(135deg,rgba(99,91,255,.1),rgba(6,182,212,.08));
}

.workspace-progress span {
	color:var(--muted);
	font-size:.72rem;
}

.workspace-progress strong {
	margin-top:3px;
	font-size:.86rem;
}

.progress-circle {
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	border:5px solid rgba(99,91,255,.2);
	border-top-color:var(--primary);
	border-radius:50%;
	color:var(--text)!important;
	font-size:.67rem!important;
	font-weight:850;
	transform:rotate(-20deg);
}

.floating-card {
	position:absolute;
	z-index:2;
	display:flex;
	align-items:center;
	gap:11px;
	padding:13px 15px;
	border:1px solid rgba(255,255,255,.75);
	border-radius:15px;
	background:rgba(255,255,255,.92);
	box-shadow:0 20px 45px rgba(15,23,42,.14);
	backdrop-filter:blur(15px);
}

html[data-theme="dark"] .floating-card {
	border-color:rgba(255,255,255,.08);
	background:rgba(17,24,39,.95);
}

.floating-card--top {
	top:0;
	right:0;
}

.floating-card--bottom {
	bottom:12px;
	left:0;
}

.floating-card div {
	display:flex;
	flex-direction:column;
}

.floating-card strong {
	font-size:.78rem;
}

.floating-card small {
	color:var(--muted);
	font-size:.67rem;
}

.floating-icon {
	display:grid;
	place-items:center;
	width:32px;
	height:32px;
	border-radius:10px;
	background:rgba(99,91,255,.1);
	color:var(--primary);
	font-weight:900;
}

.floating-icon--gold {
	background:rgba(245,158,11,.12);
	color:#f59e0b;
}

.home-strip {
	padding:20px 0;
	border-block:1px solid var(--border);
	background:var(--surface);
}

.home-strip .site-container {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:25px;
}

.home-strip p {
	margin:0;
	font-size:.82rem;
	font-weight:700;
}

.platform-strip {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:22px;
}

.platform-strip span {
	display:inline-flex;
	align-items:center;
	gap:7px;
	color:var(--muted);
	font-size:.82rem;
	font-weight:750;
}

.platform-strip svg {
	width:16px;
	height:16px;
}

.platform-card-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

.platform-card {
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:330px;
	padding:25px;
	overflow:hidden;
	border:1px solid var(--border);
	border-radius:22px;
	background:var(--surface);
	box-shadow:var(--shadow);
	transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.platform-card::after {
	position:absolute;
	right:-55px;
	bottom:-75px;
	width:180px;
	height:180px;
	border-radius:50%;
	background:var(--platform-soft,rgba(99,91,255,.08));
	content:"";
}

.platform-card:hover {
	transform:translateY(-6px);
	border-color:var(--platform-color,var(--primary));
	box-shadow:var(--shadow-lg);
}

.platform-card--youtube {
	--platform-color:#ef4444;
	--platform-soft:rgba(239,68,68,.1);
}

.platform-card--instagram {
	--platform-color:#db2777;
	--platform-soft:rgba(219,39,119,.1);
}

.platform-card--tiktok {
	--platform-color:#111827;
	--platform-soft:rgba(15,23,42,.08);
}

.platform-card--linkedin {
	--platform-color:#2563eb;
	--platform-soft:rgba(37,99,235,.1);
}

.platform-card--x {
	--platform-color:#111827;
	--platform-soft:rgba(15,23,42,.08);
}

.platform-card--spark {
	--platform-color:#8b5cf6;
	--platform-soft:rgba(139,92,246,.1);
}

.platform-card__top {
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:24px;
}

.platform-card__icon {
	width:52px;
	height:52px;
	border-radius:15px;
	background:var(--platform-soft);
	color:var(--platform-color);
}

.platform-card__icon svg {
	width:25px;
	height:25px;
}

.platform-card__arrow {
	display:grid;
	place-items:center;
	width:34px;
	height:34px;
	border:1px solid var(--border);
	border-radius:10px;
	color:var(--muted);
	transition:transform var(--transition),background var(--transition);
}

.platform-card:hover .platform-card__arrow {
	background:var(--platform-color);
	color:#fff;
	transform:rotate(45deg);
}

.platform-card__label {
	position:relative;
	z-index:1;
	margin-bottom:9px;
	color:var(--platform-color);
	font-size:.72rem;
	font-weight:850;
	letter-spacing:.07em;
	text-transform:uppercase;
}

.platform-card h3 {
	position:relative;
	z-index:1;
	margin-bottom:10px;
	font-size:1.35rem;
}

.platform-card p {
	position:relative;
	z-index:1;
	margin-bottom:25px;
	font-size:.9rem;
}

.platform-card__link {
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:auto;
	color:var(--text);
	font-size:.84rem;
	font-weight:800;
}

.site-section--soft {
	background:var(--soft);
}

.value-layout {
	display:grid;
	grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
	align-items:center;
	gap:80px;
}

.value-content {
	max-width:570px;
}

.text-link {
	display:inline-flex;
	align-items:center;
	gap:7px;
	color:var(--primary);
	font-size:.9rem;
	font-weight:800;
}

.text-link:hover span {
	transform:translateX(3px);
}

.text-link span {
	transition:transform var(--transition);
}

.benefit-list {
	display:grid;
	gap:14px;
}

.benefit-card {
	display:flex;
	align-items:flex-start;
	gap:17px;
	padding:20px;
	border:1px solid var(--border);
	border-radius:18px;
	background:var(--surface);
}

.benefit-icon {
	flex:0 0 auto;
	width:46px;
	height:46px;
	border-radius:14px;
	background:rgba(99,91,255,.1);
	color:var(--primary);
}

.benefit-card h3 {
	margin-bottom:5px;
	font-size:1rem;
}

.benefit-card p {
	margin:0;
	font-size:.88rem;
}

.steps-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

.step-card {
	position:relative;
	padding:28px;
	border:1px solid var(--border);
	border-radius:20px;
	background:var(--surface);
}

.step-number {
	display:inline-flex;
	margin-bottom:38px;
	color:var(--primary);
	font-size:.78rem;
	font-weight:900;
	letter-spacing:.08em;
}

.step-card h3 {
	margin-bottom:9px;
	font-size:1.12rem;
}

.step-card p {
	margin:0;
	font-size:.9rem;
}

.featured-panel {
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);
	align-items:center;
	gap:65px;
	padding:55px;
	border-radius:30px;
	background:linear-gradient(135deg,#111827,#18213a);
	box-shadow:var(--shadow-lg);
}

.featured-copy h2 {
	max-width:580px;
	margin-bottom:18px;
	color:#fff;
	font-size:clamp(2.1rem,4vw,3.5rem);
}

.featured-copy p {
	max-width:620px;
	color:#aeb8cb;
}

.feature-checks {
	display:grid;
	gap:10px;
	margin:25px 0 30px;
	list-style:none;
}

.feature-checks li {
	position:relative;
	padding-left:26px;
	color:#dbe3ef;
	font-size:.9rem;
}

.feature-checks li::before {
	position:absolute;
	top:1px;
	left:0;
	display:grid;
	place-items:center;
	width:18px;
	height:18px;
	border-radius:50%;
	background:rgba(99,91,255,.3);
	color:#c9c6ff;
	font-size:.65rem;
	content:"✓";
}

.featured-preview {
	padding:20px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:22px;
	background:rgba(255,255,255,.05);
}

.preview-header {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:18px;
}

.preview-youtube {
	width:45px;
	height:45px;
	border-radius:13px;
	background:rgba(239,68,68,.14);
	color:#ef4444;
}

.preview-header div,
.preview-tool div {
	display:flex;
	flex-direction:column;
}

.preview-header strong,
.preview-tool strong {
	color:#fff;
	font-size:.9rem;
}

.preview-header small,
.preview-tool small {
	color:#94a3b8;
	font-size:.72rem;
}

.preview-tool {
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:10px;
	padding:14px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:14px;
	background:rgba(255,255,255,.04);
}

.preview-tool > div {
	flex:1;
}

.preview-tool > span:last-child {
	color:#94a3b8;
}

.preview-tool__icon {
	display:grid;
	place-items:center;
	width:35px;
	height:35px;
	border-radius:10px;
	background:rgba(99,91,255,.16);
	color:#c9c6ff;
	font-size:.8rem;
	font-weight:900;
}

.section-heading-row {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:30px;
}

.home-post-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

.home-post-card {
	overflow:hidden;
	border:1px solid var(--border);
	border-radius:20px;
	background:var(--surface);
	box-shadow:var(--shadow);
}

.home-post-card__image {
	display:block;
	aspect-ratio:16/9;
	overflow:hidden;
	background:linear-gradient(135deg,rgba(99,91,255,.12),rgba(6,182,212,.1));
}

.home-post-card__image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}

.home-post-card:hover .home-post-card__image img {
	transform:scale(1.04);
}

.post-placeholder {
	display:grid;
	place-items:center;
	width:100%;
	height:100%;
	min-height:190px;
	color:var(--primary);
}

.post-placeholder svg {
	width:42px;
	height:42px;
}

.home-post-card__content {
	padding:22px;
}

.post-meta {
	display:block;
	margin-bottom:9px;
	color:var(--primary);
	font-size:.72rem;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.07em;
}

.home-post-card h3 {
	margin-bottom:9px;
	font-size:1.15rem;
}

.home-post-card p {
	margin-bottom:16px;
	font-size:.88rem;
}

.home-post-card--placeholder > .post-placeholder {
	aspect-ratio:16/9;
	background:linear-gradient(135deg,rgba(99,91,255,.1),rgba(6,182,212,.08));
}

.home-cta-section {
	padding:75px 0;
}

.home-cta {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:50px;
	padding:48px 52px;
	overflow:hidden;
	border-radius:28px;
	background:
		radial-gradient(circle at 90% 20%,rgba(255,255,255,.18),transparent 25%),
		linear-gradient(135deg,var(--primary),#7c3aed);
	box-shadow:0 25px 65px rgba(99,91,255,.28);
}

.home-cta div {
	max-width:760px;
}

.cta-kicker {
	display:block;
	margin-bottom:10px;
	color:#dddafe;
	font-size:.75rem;
	font-weight:850;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.home-cta h2 {
	margin-bottom:10px;
	color:#fff;
	font-size:clamp(2rem,4vw,3.3rem);
}

.home-cta p {
	margin:0;
	color:#e8e7ff;
}

.button--light {
	flex:0 0 auto;
	background:#fff;
	color:#312e81;
	box-shadow:none;
}

.button--light:hover {
	box-shadow:0 15px 35px rgba(0,0,0,.18);
}

@media (max-width:1050px) {
	.hero-layout,
	.value-layout,
	.featured-panel {
		grid-template-columns:1fr;
	}

	.hero-layout {
		gap:35px;
	}

	.hero-content {
		max-width:820px;
	}

	.hero-visual {
		width:min(100%,620px);
		margin-inline:auto;
	}

	.platform-card-grid,
	.home-post-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.value-layout,
	.featured-panel {
		gap:40px;
	}

	.value-content {
		max-width:760px;
	}
}

@media (max-width:760px) {
	.home-hero {
		padding:65px 0 55px;
	}

	.hero-layout {
		display:block;
	}

	.hero-content h1 {
		font-size:clamp(2.7rem,13vw,4.5rem);
	}

	.hero-description {
		font-size:1rem;
	}

	.hero-visual {
		min-height:470px;
		margin-top:38px;
	}

	.workspace-card {
		inset:25px 0;
		transform:none;
	}

	.floating-card--top {
		right:8px;
	}

	.floating-card--bottom {
		left:8px;
	}

	.home-strip .site-container,
	.section-heading-row,
	.home-cta {
		align-items:flex-start;
		flex-direction:column;
	}

	.platform-strip {
		justify-content:flex-start;
	}

	.platform-card-grid,
	.steps-grid,
	.home-post-grid {
		grid-template-columns:1fr;
	}

	.featured-panel {
		padding:34px 24px;
		border-radius:24px;
	}

	.home-cta {
		padding:36px 25px;
	}

	.button--light {
		width:100%;
	}
}

@media (max-width:480px) {
	.hero-actions {
		display:grid;
	}

	.hero-actions .button {
		width:100%;
	}

	.hero-trust {
		display:grid;
		gap:8px;
	}

	.hero-visual {
		min-height:450px;
	}

	.workspace-card {
		padding:17px;
	}

	.workspace-grid {
		gap:8px;
	}

	.workspace-grid a {
		min-height:110px;
		padding:13px;
	}

	.floating-card {
		padding:10px 12px;
	}

	.floating-card--top {
		top:4px;
	}

	.floating-card--bottom {
		bottom:0;
	}

	.platform-card {
		min-height:auto;
		padding:22px;
	}

	.home-strip {
		padding:17px 0;
	}

	.platform-strip {
		gap:13px;
	}
}
/* =========================================================
   TOOLS DIRECTORY PAGE
   ========================================================= */

.tools-directory-page {
	overflow:hidden;
}

.tools-hero {
	position:relative;
	padding:66px 0 86px;
	overflow:hidden;
	background:
		radial-gradient(circle at 12% 15%,rgba(99,91,255,.14),transparent 33%),
		radial-gradient(circle at 88% 30%,rgba(6,182,212,.12),transparent 30%),
		var(--bg);
}

.tools-hero__glow {
	position:absolute;
	border-radius:50%;
	filter:blur(60px);
	pointer-events:none;
}

.tools-hero__glow--one {
	top:-140px;
	right:-100px;
	width:400px;
	height:400px;
	background:rgba(99,91,255,.12);
}

.tools-hero__glow--two {
	bottom:-200px;
	left:-120px;
	width:380px;
	height:380px;
	background:rgba(6,182,212,.1);
}

.tools-hero__inner {
	position:relative;
	z-index:1;
}

.tools-breadcrumbs {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin-bottom:46px;
	color:var(--muted);
	font-size:.8rem;
	font-weight:650;
}

.tools-breadcrumbs a:hover {
	color:var(--primary);
}

.tools-hero__content {
	max-width:850px;
	margin-inline:auto;
	text-align:center;
}

.tools-eyebrow {
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:18px;
	padding:8px 13px;
	border:1px solid rgba(99,91,255,.2);
	border-radius:999px;
	background:rgba(99,91,255,.08);
	color:var(--primary);
	font-size:.76rem;
	font-weight:850;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.tools-hero h1 {
	margin-bottom:20px;
	font-size:clamp(2.8rem,6vw,5.3rem);
	line-height:1.02;
	letter-spacing:-.055em;
}

.tools-hero__content > p {
	max-width:760px;
	margin:0 auto 32px;
	font-size:1.08rem;
}

.tools-search-box {
	display:flex;
	align-items:center;
	max-width:720px;
	min-height:64px;
	margin-inline:auto;
	padding:7px 9px 7px 19px;
	border:1px solid var(--border);
	border-radius:18px;
	background:var(--surface);
	box-shadow:0 20px 55px rgba(15,23,42,.12);
}

.tools-search-box__icon {
	display:grid;
	place-items:center;
	flex:0 0 auto;
	width:30px;
	height:30px;
	color:var(--muted);
}

.tools-search-box__icon svg {
	width:21px;
	height:21px;
	fill:currentColor;
}

.tools-search-box input {
	min-width:0;
	min-height:48px;
	padding:10px 12px;
	border:0;
	background:transparent;
	box-shadow:none;
}

.tools-search-box input:focus {
	border:0;
	box-shadow:none;
}

.tools-search-box button {
	flex:0 0 auto;
	min-height:42px;
	padding:9px 15px;
	border:0;
	border-radius:11px;
	background:var(--soft);
	color:var(--text);
	font-size:.82rem;
	font-weight:750;
}

.tools-hero__quick-links {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:11px;
	margin-top:19px;
	font-size:.79rem;
}

.tools-hero__quick-links span {
	color:var(--muted);
	font-weight:700;
}

.tools-hero__quick-links a {
	padding:6px 10px;
	border-radius:999px;
	background:var(--soft);
	color:var(--text);
	font-weight:700;
}

.tools-hero__quick-links a:hover {
	background:var(--primary);
	color:#fff;
}

.tools-category-section,
.popular-tools-section,
.youtube-feature-section,
.tools-information-section {
	padding:86px 0;
}

.tools-section-heading {
	max-width:750px;
	margin-bottom:34px;
}

.tools-section-heading h2 {
	margin-bottom:12px;
	font-size:clamp(2rem,4vw,3.2rem);
}

.tools-section-heading p {
	margin:0;
}

.tools-section-heading--row {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	max-width:none;
	gap:30px;
}

.tools-platform-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

.tools-platform-card {
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:390px;
	padding:26px;
	overflow:hidden;
	border:1px solid var(--border);
	border-radius:22px;
	background:var(--surface);
	box-shadow:var(--shadow);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.tools-platform-card::after {
	position:absolute;
	right:-70px;
	bottom:-90px;
	width:200px;
	height:200px;
	border-radius:50%;
	background:color-mix(in srgb,var(--tool-accent) 10%,transparent);
	content:"";
}

.tools-platform-card:hover {
	transform:translateY(-6px);
	border-color:var(--tool-accent);
	box-shadow:var(--shadow-lg);
}

.tools-platform-card__header {
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:27px;
}

.tools-platform-card__icon {
	display:grid;
	place-items:center;
	width:54px;
	height:54px;
	border-radius:16px;
	background:color-mix(in srgb,var(--tool-accent) 12%,transparent);
	color:var(--tool-accent);
}

.tools-platform-card__icon svg {
	width:27px;
	height:27px;
	fill:currentColor;
}

.tools-platform-card__badge {
	padding:6px 10px;
	border-radius:999px;
	background:var(--soft);
	color:var(--muted);
	font-size:.68rem;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.06em;
}

.tools-platform-card h2 {
	position:relative;
	z-index:1;
	margin-bottom:10px;
	font-size:1.35rem;
}

.tools-platform-card > p {
	position:relative;
	z-index:1;
	margin-bottom:20px;
	font-size:.9rem;
}

.tools-platform-card ul {
	position:relative;
	z-index:1;
	display:grid;
	gap:9px;
	margin-bottom:24px;
	list-style:none;
}

.tools-platform-card li {
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--muted);
	font-size:.82rem;
}

.tools-platform-card li span {
	display:grid;
	place-items:center;
	width:18px;
	height:18px;
	border-radius:50%;
	background:color-mix(in srgb,var(--tool-accent) 12%,transparent);
	color:var(--tool-accent);
	font-size:.65rem;
	font-weight:900;
}

.tools-platform-card__action {
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:auto;
	color:var(--text);
	font-size:.85rem;
	font-weight:800;
}

.tools-platform-card__action span {
	transition:transform var(--transition);
}

.tools-platform-card:hover .tools-platform-card__action span {
	transform:translateX(4px);
}

.popular-tools-section {
	background:var(--soft);
}

.tools-filter-list {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:7px;
}

.tools-filter {
	min-height:40px;
	padding:9px 14px;
	border:1px solid var(--border);
	border-radius:999px;
	background:var(--surface);
	color:var(--muted);
	font-size:.78rem;
	font-weight:750;
}

.tools-filter:hover,
.tools-filter.is-active {
	border-color:var(--primary);
	background:var(--primary);
	color:#fff;
}

.popular-tools-grid {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:18px;
}

.popular-tool-card {
	overflow:hidden;
	border:1px solid var(--border);
	border-radius:19px;
	background:var(--surface);
	box-shadow:var(--shadow);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.popular-tool-card[hidden] {
	display:none;
}

.popular-tool-card:hover {
	transform:translateY(-5px);
	border-color:rgba(99,91,255,.35);
	box-shadow:var(--shadow-lg);
}

.popular-tool-card > a {
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:285px;
	padding:21px;
}

.popular-tool-card__top {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:22px;
}

.popular-tool-card__icon {
	display:grid;
	place-items:center;
	width:43px;
	height:43px;
	border-radius:13px;
	background:rgba(99,91,255,.1);
	color:var(--primary);
	font-size:.88rem;
	font-weight:900;
}

.popular-tool-card__category {
	color:var(--muted);
	font-size:.66rem;
	font-weight:800;
	letter-spacing:.07em;
	text-transform:uppercase;
}

.popular-tool-card h3 {
	margin-bottom:9px;
	font-size:1.05rem;
}

.popular-tool-card p {
	margin-bottom:18px;
	font-size:.84rem;
}

.popular-tool-card__link {
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:auto;
	color:var(--primary);
	font-size:.8rem;
	font-weight:800;
}

.tools-empty-state {
	max-width:520px;
	margin:35px auto 0;
	padding:38px;
	border:1px solid var(--border);
	border-radius:20px;
	background:var(--surface);
	text-align:center;
}

.tools-empty-state__icon {
	display:grid;
	place-items:center;
	width:55px;
	height:55px;
	margin:0 auto 17px;
	border-radius:16px;
	background:rgba(99,91,255,.1);
	color:var(--primary);
}

.tools-empty-state__icon svg {
	width:25px;
	height:25px;
	fill:currentColor;
}

.tools-empty-state h3 {
	margin-bottom:8px;
}

.youtube-feature {
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
	align-items:center;
	gap:70px;
	padding:58px;
	border-radius:30px;
	background:
		radial-gradient(circle at 90% 10%,rgba(239,68,68,.22),transparent 28%),
		linear-gradient(135deg,#101827,#1d293d);
	box-shadow:var(--shadow-lg);
}

.youtube-feature__badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-bottom:19px;
	color:#fca5a5;
	font-size:.75rem;
	font-weight:850;
	letter-spacing:.07em;
	text-transform:uppercase;
}

.youtube-feature__badge svg {
	width:20px;
	height:20px;
	fill:currentColor;
}

.youtube-feature__content h2 {
	margin-bottom:17px;
	color:#fff;
	font-size:clamp(2.1rem,4vw,3.4rem);
}

.youtube-feature__content > p {
	max-width:620px;
	color:#aeb8cb;
}

.youtube-feature__steps {
	display:grid;
	gap:12px;
	margin:27px 0 31px;
}

.youtube-feature__steps div {
	display:flex;
	align-items:center;
	gap:12px;
}

.youtube-feature__steps span {
	display:grid;
	place-items:center;
	flex:0 0 auto;
	width:29px;
	height:29px;
	border-radius:9px;
	background:rgba(239,68,68,.15);
	color:#fca5a5;
	font-size:.73rem;
	font-weight:900;
}

.youtube-feature__steps p {
	margin:0;
	color:#d6deea;
	font-size:.88rem;
}

.youtube-feature__button {
	background:#ef4444;
	box-shadow:0 12px 28px rgba(239,68,68,.25);
}

.youtube-feature__preview {
	position:relative;
}

.youtube-preview-window {
	overflow:hidden;
	border:1px solid rgba(255,255,255,.11);
	border-radius:22px;
	background:#fff;
	box-shadow:0 30px 70px rgba(0,0,0,.25);
	transform:rotate(1.5deg);
}

.youtube-preview-window__header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	padding:12px 15px;
	background:#eef2f7;
	border-bottom:1px solid #dfe5ed;
}

.youtube-preview-window__header > div {
	display:flex;
	gap:5px;
}

.youtube-preview-window__header > div span {
	width:8px;
	height:8px;
	border-radius:50%;
	background:#c7cfdb;
}

.youtube-preview-window__header small {
	overflow:hidden;
	color:#778196;
	font-size:.62rem;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.youtube-preview-window__body {
	padding:22px;
}

.youtube-preview-title {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:20px;
}

.youtube-preview-title > span {
	display:grid;
	place-items:center;
	width:43px;
	height:43px;
	border-radius:13px;
	background:rgba(239,68,68,.1);
	color:#ef4444;
}

.youtube-preview-title svg {
	width:22px;
	height:22px;
	fill:currentColor;
}

.youtube-preview-title div {
	display:flex;
	flex-direction:column;
}

.youtube-preview-title strong {
	color:#111827;
	font-size:.9rem;
}

.youtube-preview-title small {
	color:#667085;
	font-size:.7rem;
}

.youtube-preview-input {
	padding:14px;
	border:1px solid #dfe5ed;
	border-radius:12px;
	color:#667085;
	font-size:.76rem;
}

.youtube-preview-options {
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin:11px 0;
}

.youtube-preview-options span {
	padding:6px 9px;
	border-radius:999px;
	background:#f1f5f9;
	color:#536075;
	font-size:.62rem;
	font-weight:700;
}

.youtube-preview-button {
	padding:12px;
	border-radius:11px;
	background:#ef4444;
	color:#fff;
	font-size:.73rem;
	font-weight:800;
	text-align:center;
}

.youtube-preview-result {
	display:flex;
	flex-direction:column;
	gap:5px;
	margin-top:13px;
	padding:13px;
	border-left:3px solid #ef4444;
	border-radius:5px 11px 11px 5px;
	background:#f8fafc;
}

.youtube-preview-result small {
	color:#667085;
	font-size:.62rem;
}

.youtube-preview-result strong {
	color:#111827;
	font-size:.76rem;
	line-height:1.4;
}

.tools-information-section {
	padding-top:20px;
}

.tools-information-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

.tools-information-grid article {
	padding:26px;
	border:1px solid var(--border);
	border-radius:20px;
	background:var(--surface);
}

.tools-information-icon {
	display:inline-flex;
	margin-bottom:35px;
	color:var(--primary);
	font-size:.76rem;
	font-weight:900;
	letter-spacing:.08em;
}

.tools-information-grid h2 {
	margin-bottom:9px;
	font-size:1.1rem;
}

.tools-information-grid p {
	margin:0;
	font-size:.86rem;
}

.tools-final-cta {
	padding:0 0 80px;
}

.tools-final-cta__inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:45px;
	padding:45px 48px;
	border-radius:27px;
	background:linear-gradient(135deg,var(--primary),#7c3aed);
	box-shadow:0 24px 60px rgba(99,91,255,.25);
}

.tools-final-cta__inner > div {
	max-width:750px;
}

.tools-final-cta__inner > div > span {
	display:block;
	margin-bottom:8px;
	color:#dddafe;
	font-size:.74rem;
	font-weight:850;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.tools-final-cta h2 {
	margin:0;
	color:#fff;
	font-size:clamp(1.8rem,4vw,3rem);
}

@media (max-width:1100px) {
	.tools-platform-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.popular-tools-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.youtube-feature {
		grid-template-columns:1fr;
		gap:45px;
	}

	.youtube-feature__preview {
		width:min(100%,600px);
		margin-inline:auto;
	}
}

@media (max-width:780px) {
	.tools-hero {
		padding:46px 0 65px;
	}

	.tools-breadcrumbs {
		margin-bottom:34px;
	}

	.tools-hero h1 {
		font-size:clamp(2.6rem,13vw,4.4rem);
	}

	.tools-category-section,
	.popular-tools-section,
	.youtube-feature-section,
	.tools-information-section {
		padding:62px 0;
	}

	.tools-section-heading--row,
	.tools-final-cta__inner {
		align-items:flex-start;
		flex-direction:column;
	}

	.tools-filter-list {
		justify-content:flex-start;
	}

	.tools-information-grid {
		grid-template-columns:1fr;
	}

	.youtube-feature {
		padding:36px 24px;
		border-radius:24px;
	}

	.tools-final-cta__inner {
		padding:35px 25px;
	}

	.tools-final-cta__inner .button {
		width:100%;
	}
}

@media (max-width:560px) {
	.tools-search-box {
		min-height:58px;
		padding-left:12px;
	}

	.tools-search-box button {
		padding-inline:10px;
	}

	.tools-hero__quick-links {
		justify-content:flex-start;
	}

	.tools-platform-grid,
	.popular-tools-grid {
		grid-template-columns:1fr;
	}

	.tools-platform-card {
		min-height:auto;
		padding:22px;
	}

	.popular-tool-card > a {
		min-height:250px;
	}

	.youtube-preview-window {
		transform:none;
	}

	.youtube-preview-window__body {
		padding:16px;
	}
}

