/*
Theme Name: InstaFonts Studio
Theme URI: https://example.com/instafonts-studio
Author: InstaFonts Studio
Description: Free Instagram font generator, stylish text, aesthetic bio ideas, symbols, username and hashtag generator, plus a blog — converted from a React app into a fully working WordPress theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: instafonts-studio
*/

/* ---------- Design tokens ---------- */
:root {
	--background: 340 60% 99%;
	--foreground: 265 40% 12%;
	--card: 0 0% 100%;
	--card-foreground: 265 40% 12%;
	--primary: 320 78% 55%;
	--primary-foreground: 0 0% 100%;
	--secondary: 275 60% 96%;
	--secondary-foreground: 275 40% 25%;
	--muted-foreground: 275 12% 45%;
	--accent: 25 95% 60%;
	--border: 300 25% 90%;
	--ring: 320 78% 55%;
	--radius: 1.25rem;
	--glass: 0 0% 100% / 0.62;
	--glass-border: 0 0% 100% / 0.7;
}

html.dark {
	--background: 265 42% 7%;
	--foreground: 300 30% 96%;
	--card: 265 35% 11%;
	--card-foreground: 300 30% 96%;
	--primary: 322 85% 66%;
	--primary-foreground: 265 45% 8%;
	--secondary: 265 30% 17%;
	--secondary-foreground: 300 30% 96%;
	--muted-foreground: 285 15% 68%;
	--accent: 28 92% 62%;
	--border: 265 25% 22%;
	--ring: 322 85% 66%;
	--glass: 265 35% 14% / 0.6;
	--glass-border: 300 40% 80% / 0.14;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; color: inherit; }
h1, h2, h3 { font-family: 'Outfit', sans-serif; letter-spacing: -0.03em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: hsl(var(--primary) / 0.25); }

.serif-accent { font-family: 'Fraunces', Georgia, serif; font-style: italic; }

.ig-gradient { background-image: linear-gradient(115deg, #f9a03f 0%, #f6416c 32%, #d946ef 62%, #7c3aed 100%); }
.ig-text {
	background-image: linear-gradient(100deg, #f9a03f 0%, #f6416c 38%, #d946ef 66%, #8b5cf6 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass {
	background: hsl(var(--glass));
	border: 1px solid hsl(var(--glass-border));
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
}

.aurora { position: relative; }
.aurora::before, .aurora::after {
	content: ''; position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .55; pointer-events: none;
}
.aurora::before { width: 34rem; height: 34rem; top: -12rem; left: -10rem; background: radial-gradient(circle, #f6416c, transparent 65%); }
.aurora::after { width: 30rem; height: 30rem; top: -6rem; right: -8rem; background: radial-gradient(circle, #7c3aed, transparent 65%); }
html.dark .aurora::before, html.dark .aurora::after { opacity: .35; }

@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee-x 34s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

@keyframes ifs-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.is-visible { animation: ifs-reveal .6s cubic-bezier(.22,1,.36,1) forwards; }

/* ---------- Layout helpers ---------- */
.container-wide { max-width: 90rem; margin: 0 auto; padding: 0 1.25rem; }
.container-xl { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
.container-lg { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.container-md { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }
.container-sm { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) {
	.container-wide, .container-xl, .container-lg, .container-md, .container-sm { padding: 0 2rem; }
}

.section { padding: 5rem 1.25rem; }
@media (min-width: 640px) { .section { padding: 5rem 2rem; } }
.section-tight { padding: 4rem 1.25rem; }
.section-alt { background: hsl(var(--secondary) / .4); }
.scroll-mt { scroll-margin-top: 6rem; }

.eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; color: hsl(var(--primary)); text-align: center; }
.section-title { margin-top: .75rem; font-size: 1.875rem; font-weight: 700; text-align: center; }
.section-sub { margin-top: .75rem; font-size: 1rem; line-height: 1.6; color: hsl(var(--muted-foreground)); text-align: center; }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.section-head { max-width: 42rem; margin: 0 auto; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid hsl(var(--border) / .6); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: 4rem; max-width: 90rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .header-inner { padding: 0 2rem; } }

.brand { display: flex; align-items: center; gap: .625rem; }
.brand-mark { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: 1rem; color: #fff; box-shadow: 0 10px 20px -8px hsl(var(--primary) / .35); }
.brand-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }

.primary-nav { margin-left: auto; display: none; align-items: center; gap: .25rem; }
@media (min-width: 1280px) { .primary-nav { display: flex; } }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.primary-nav a, .nav-list a { border-radius: 9999px; padding: .5rem .75rem; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: background-color .2s, color .2s; }
.primary-nav a:hover, .nav-list a:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
@media (min-width: 1280px) { .header-actions { margin-left: .5rem; } }

.icon-btn { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .7); cursor: pointer; transition: transform .2s; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 18px; height: 18px; }
#theme-toggle .icon-moon { display: block; }
#theme-toggle .icon-sun { display: none; }
html.dark #theme-toggle .icon-moon { display: none; }
html.dark #theme-toggle .icon-sun { display: block; }
#menu-toggle { display: grid; }
@media (min-width: 1280px) { #menu-toggle { display: none; } }
#menu-toggle .icon-close { display: none; }
body.mobile-nav-open #menu-toggle .icon-menu { display: none; }
body.mobile-nav-open #menu-toggle .icon-close { display: block; }

.mobile-nav { display: none; border-top: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .95); padding: .75rem 1.25rem 1.25rem; }
@media (min-width: 1280px) { .mobile-nav { display: none !important; } }
body.mobile-nav-open .mobile-nav { display: block; }
.mobile-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.mobile-nav a { display: block; border-radius: .75rem; padding: .625rem .75rem; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.mobile-nav a:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

/* ---------- Hero / generator ---------- */
.hero { padding-bottom: 4rem; padding-top: 3.5rem; overflow: hidden; }
@media (min-width: 640px) { .hero { padding-top: 5rem; } }
.hero-inner { position: relative; max-width: 64rem; margin: 0 auto; text-align: center; }
.badge-pill { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .7); padding: .375rem 1rem; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.badge-pill svg { width: 14px; height: 14px; color: hsl(var(--primary)); }
.hero h1 { margin-top: 1.5rem; font-size: 2.5rem; font-weight: 800; line-height: 1.05; }
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } }
.hero-sub { max-width: 42rem; margin: 1.25rem auto 0; font-size: 1rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) { .hero-sub { font-size: 1.125rem; } }

.generator { position: relative; max-width: 64rem; margin: 3rem auto 0; }
.generator-card { border-radius: 2rem; padding: 1rem; box-shadow: 0 25px 50px -12px hsl(var(--primary) / .1); }
@media (min-width: 640px) { .generator-card { padding: 1.5rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.field-input {
	width: 100%; border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .8);
	padding: 1rem 1.25rem; font-size: 1.125rem; font-weight: 500; outline: none;
}
.field-input:focus { box-shadow: 0 0 0 2px hsl(var(--ring) / .4); }
.field-input::placeholder { color: hsl(var(--muted-foreground) / .7); }

.chip-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip-count { margin-left: auto; align-self: center; font-size: .75rem; color: hsl(var(--muted-foreground)); }

.chip {
	border-radius: 9999px; padding: .375rem 1rem; font-size: .875rem; font-weight: 500; cursor: pointer;
	border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .6); color: hsl(var(--muted-foreground));
	transition: all .2s;
}
.chip:hover { color: hsl(var(--foreground)); }
.chip:active { transform: scale(.95); }
.chip.is-active {
	color: #fff; border-color: transparent; box-shadow: 0 8px 16px -6px hsl(var(--primary) / .25);
	background-image: linear-gradient(115deg, #f9a03f 0%, #f6416c 32%, #d946ef 62%, #7c3aed 100%);
}
.chip.chip-lg { padding: .5rem 1.25rem; }

.results-grid { margin-top: 1.25rem; display: grid; gap: .75rem; }
@media (min-width: 640px) { .results-grid { grid-template-columns: 1fr 1fr; } }
.result-card {
	display: flex; align-items: center; gap: .75rem; border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .6);
	background: hsl(var(--card) / .7); padding: .875rem 1rem; transition: all .2s;
}
.result-card:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / .4); box-shadow: 0 12px 24px -10px hsl(var(--primary) / .15); }
.result-body { min-width: 0; flex: 1; }
.result-output { font-size: 1.125rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta { margin-top: .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.empty-note { grid-column: 1 / -1; border-radius: 1.5rem; border: 1px dashed hsl(var(--border)); padding: 2.5rem 1rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); }

/* copy button */
.copy-btn {
	display: inline-flex; flex-shrink: 0; align-items: center; gap: .375rem; border-radius: 9999px;
	border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .6); color: hsl(var(--muted-foreground));
	font-weight: 500; font-size: .875rem; padding: .375rem .875rem; cursor: pointer; transition: all .2s;
}
.copy-btn:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); transform: translateY(-1px); }
.copy-btn:active { transform: scale(.95); }
.copy-btn.is-copied { border-color: hsl(var(--primary) / .6); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.copy-btn.compact { padding: .25rem .625rem; font-size: .75rem; }
.copy-btn svg { width: 14px; height: 14px; }

/* marquee */
.marquee-wrap { overflow: hidden; border-top: 1px solid hsl(var(--border) / .6); border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--secondary) / .4); padding: 1rem 0; }
.marquee-track { display: flex; width: max-content; gap: 2rem; white-space: nowrap; font-size: 1.25rem; color: hsl(var(--muted-foreground)); }
.marquee-group { display: flex; gap: 2rem; }

/* bio ideas list */
.bio-list { margin-top: 2rem; border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .6); overflow: hidden; }
.bio-list li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid hsl(var(--border) / .6); transition: background-color .2s; }
.bio-list li:first-child { border-top: 0; }
.bio-list li:hover { background: hsl(var(--secondary) / .5); }
.bio-list li span { min-width: 0; flex: 1; font-size: 1rem; }

/* symbols */
.symbol-search-wrap, .username-search-wrap { position: relative; max-width: 28rem; margin: 2rem auto 0; }
.symbol-search-wrap svg, .username-search-wrap svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.search-input { width: 100%; border-radius: 9999px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .8); padding: .75rem 1rem .75rem 2.75rem; font-size: .875rem; outline: none; }
.search-input:focus { box-shadow: 0 0 0 2px hsl(var(--ring) / .4); }

.symbols-grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .symbols-grid { grid-template-columns: 1fr 1fr; } }
.symbol-group { border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1.25rem; }
.symbol-group h3 { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.symbol-chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.symbol-chips .copy-btn { font-size: 1rem; }

/* dp captions + highlights */
.two-col { display: grid; gap: 2.5rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; } }
.quote-chip { display: inline-flex; align-items: center; gap: .5rem; border-radius: 1rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: .625rem 1rem; font-size: .875rem; transition: transform .2s; }
.quote-chip:hover { transform: translateY(-2px); }
.quote-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: hsl(var(--primary)); }
.quote-wrap { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .625rem; }

.highlight-card { border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1rem; margin-top: 1rem; }
.highlight-card h3 { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.highlight-card h3 svg { width: 14px; height: 14px; color: hsl(var(--primary)); }
.highlight-card .symbol-chips { margin-top: .75rem; }

/* usernames */
.username-grid { margin-top: 2rem; display: grid; gap: .75rem; max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .username-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .username-grid { grid-template-columns: 1fr 1fr 1fr; } }
.username-card { display: flex; align-items: center; gap: .75rem; border-radius: 1.25rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: .75rem 1rem; transition: all .2s; }
.username-card:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / .4); }
.username-card span { min-width: 0; flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hashtags */
.hashtag-panel { margin-top: 2rem; border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1.5rem; max-width: 72rem; margin-left: auto; margin-right: auto; }
.hashtag-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hashtag-panel-head h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 600; }
.hashtag-panel-head h3 svg { width: 16px; height: 16px; color: hsl(var(--primary)); }
.hashtag-panel-head .copy-btn { margin-left: auto; }
.hashtag-tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* blog cards */
.blog-grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card, .blog-card-lg {
	display: flex; flex-direction: column; border-radius: 2rem; border: 1px solid hsl(var(--border) / .6);
	background: hsl(var(--card) / .7); padding: 1.5rem; transition: all .2s;
}
.blog-card:hover, .blog-card-lg:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .4); box-shadow: 0 20px 40px -16px hsl(var(--primary) / .1); }
.blog-card-lg { padding: 1.75rem; }
.blog-tag { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--primary)); }
.blog-card h3, .blog-card-lg h2 { margin-top: .75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.blog-card-lg h2 { font-size: 1.5rem; }
.blog-excerpt { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.blog-readmore { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: hsl(var(--primary)); }
.blog-readmore svg { width: 16px; height: 16px; transition: transform .2s; }
.blog-card:hover .blog-readmore svg, .blog-card-lg:hover .blog-readmore svg { transform: translateX(4px); }

/* faq */
.faq-list { margin-top: 2.25rem; max-width: 48rem; margin-left: auto; margin-right: auto; border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .6); overflow: hidden; }
.faq-list details { padding: 1.25rem 1.5rem; border-top: 1px solid hsl(var(--border) / .6); }
.faq-list details:first-child { border-top: 0; }
.faq-list summary { cursor: pointer; list-style: none; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .plus { color: hsl(var(--primary)); transition: transform .2s; font-size: 1.25rem; line-height: 1; }
.faq-list details[open] summary .plus { transform: rotate(45deg); }
.faq-list p { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

/* buttons */
.btn-gradient {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px;
	color: #fff; font-weight: 600; font-size: .875rem; padding: .875rem 1.75rem; border: none; cursor: pointer;
	box-shadow: 0 12px 24px -8px hsl(var(--primary) / .25); transition: transform .2s;
}
.btn-gradient:hover { transform: translateY(-2px); }
.btn-gradient:active { transform: scale(.98); }
.btn-gradient.full { width: 100%; }

/* ---------- Page content (about / contact / single / blog index) ---------- */
.page-hero { padding: 5rem 1.25rem; overflow: hidden; }
@media (min-width: 640px) { .page-hero { padding: 5rem 2rem; } }
.page-hero-inner { position: relative; max-width: 56rem; margin: 0 auto; }
.page-hero h1 { font-size: 2.25rem; font-weight: 800; }
@media (min-width: 640px) { .page-hero h1 { font-size: 3rem; } }
.prose { margin-top: 1.25rem; font-size: 1.125rem; line-height: 2; color: hsl(var(--muted-foreground)); }
.prose h2 { margin-top: 3rem; font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); }
.prose p { margin-top: .75rem; line-height: 2; color: hsl(var(--muted-foreground)); }

.contact-grid { position: relative; display: grid; gap: 2.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-email { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.contact-email svg { width: 16px; height: 16px; color: hsl(var(--primary)); }
.contact-form { border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1.5rem; }
.form-group { display: grid; gap: .5rem; margin-top: 1rem; }
.form-group:first-child { margin-top: 0; }
.form-group label { font-size: .875rem; font-weight: 500; }
.form-group input, .form-group textarea {
	width: 100%; border-radius: 1rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .8);
	padding: .75rem 1rem; font-size: .875rem; outline: none;
}
.form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 2px hsl(var(--ring) / .4); }
.form-note { margin-top: .75rem; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.form-note.success { color: hsl(var(--primary)); font-weight: 600; }

.blog-index-head { padding: 4rem 1.25rem; text-align: center; }
@media (min-width: 640px) { .blog-index-head { padding: 5rem 2rem; } }
.blog-index-head h1 { margin-top: .75rem; font-size: 2.25rem; font-weight: 800; }
@media (min-width: 640px) { .blog-index-head h1 { font-size: 3rem; } }
.blog-index-head p { margin-top: 1rem; color: hsl(var(--muted-foreground)); }

.post-back { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.post-back:hover { color: hsl(var(--primary)); }
.post-back svg { width: 16px; height: 16px; }
.post-title { margin-top: .75rem; font-size: 2.25rem; font-weight: 800; line-height: 1.25; }
@media (min-width: 640px) { .post-title { font-size: 3rem; } }
.post-desc { margin-top: 1rem; font-size: 1.125rem; color: hsl(var(--muted-foreground)); }
.post-body { margin-top: 2.5rem; }
.post-body > * + * { margin-top: 2.25rem; }
.post-body h2 { font-size: 1.5rem; font-weight: 700; }
.post-body p { margin-top: .75rem; font-size: 1rem; line-height: 2; color: hsl(var(--muted-foreground)); }

.cta-box { margin-top: 3rem; border-radius: 2rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1.75rem; }
.cta-box h2 { font-size: 1.25rem; font-weight: 700; }
.cta-box p { margin-top: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.cta-links { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-links a { border-radius: 9999px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .6); padding: .5rem 1rem; font-size: .875rem; font-weight: 500; transition: color .2s, border-color .2s; }
.cta-links a:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); }

.related-grid { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card { border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); padding: 1.25rem; transition: all .2s; }
.related-card:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .4); }
.related-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.related-card span { margin-top: .75rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: hsl(var(--primary)); }
.related-card svg { width: 14px; height: 14px; }

.not-found { max-width: 36rem; margin: 0 auto; padding: 7rem 1.25rem; text-align: center; }
.not-found h1 { font-size: 1.875rem; font-weight: 700; }
.not-found p { margin-top: .75rem; color: hsl(var(--muted-foreground)); }
.not-found .btn-gradient { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 6rem; border-top: 1px solid hsl(var(--border) / .6); background: hsl(var(--secondary) / .4); }
.footer-grid { display: grid; gap: 2.5rem; max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.25rem; }
@media (min-width: 640px) { .footer-grid { padding: 3.5rem 2rem; } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-blurb { margin-top: 1rem; max-width: 24rem; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.footer-social { margin-top: 1.25rem; display: flex; gap: .5rem; }
.footer-col h2 { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--foreground) / .8); }
.footer-col ul { margin-top: 1rem; display: grid; gap: .625rem; }
.footer-col a { font-size: .875rem; color: hsl(var(--muted-foreground)); transition: color .2s; }
.footer-col a:hover { color: hsl(var(--primary)); }
.footer-bottom { border-top: 1px solid hsl(var(--border) / .6); padding: 1.5rem 1.25rem; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)); }

@media (max-width: 639px) {
	.hero h1 { font-size: 2rem; }
}