/* Teish the Bird Publications Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:wght@400;500;600;700&family=Permanent+Marker&family=VT323&display=swap');

:root {
		--color-midnight: #05010f;
		--color-plum: #2d0b45;
		--color-magenta: #ff268e;
		--color-crimson: #ff004d;
		--color-burnt-orange: #ff6b2c;
		--color-gold: #ffd166;
		--color-emerald: #34f5c5;
		--color-violet: #7a5bff;
		--color-ink: #120a24;
		--color-cloud: #f4f1ff;
		--color-starlight: rgba(255, 255, 255, 0.8);
		--color-text: #f9f5ff;
		--color-text-muted: rgba(244, 241, 255, 0.7);
		--color-surface: rgba(18, 10, 36, 0.85);
		--color-surface-alt: rgba(45, 11, 69, 0.78);
		--color-primary: #ff268e;
		--color-secondary: #34f5c5;
		--color-accent: #ff6b2c;
		--color-accent-purple: #7a5bff;
		--color-accent-blue: #34f5c5;
		--color-black: #000000;
		--color-black-soft: #0a0a0a;
		--color-black-semi: rgba(0, 0, 0, 0.8);
		--color-black-transparent: rgba(0, 0, 0, 0.5);
		--community-electric-blue: #3f5cff;
		--community-soft-indigo: #7b5dff;
		--community-midnight: #0b0326;
		--community-sky: #8fd0ff;
		--font-serif: 'Playfair Display', 'Cormorant Garamond', serif;
		--font-sans: 'Montserrat', 'VT323', 'Segoe UI', Roboto, sans-serif;
		--font-graffiti: 'Permanent Marker', cursive;
		--font-typewriter: 'VT323', monospace;
		--tracking-wide: 0.18em;
		--tracking-medium: 0.12em;
		--tracking-tight: 0.08em;
		--shadow-nebula: 0 24px 80px rgba(255, 38, 142, 0.18), 0 12px 40px rgba(52, 245, 197, 0.1);
		--shadow-punk: 0 0 10px rgba(255, 38, 142, 0.5), 0 0 20px rgba(52, 245, 197, 0.3);
		--shadow-deep: 0 0 30px rgba(0, 0, 0, 0.4);
}

/* Reset and base styles */
* {
		box-sizing: border-box;
}

body {
		margin: 0;
		font-family: var(--font-sans);
		background-color: var(--color-midnight);
		background-image:
				radial-gradient(circle at 12% 18%, rgba(255, 38, 142, 0.12), transparent 58%),
				radial-gradient(circle at 82% 12%, rgba(52, 245, 197, 0.08), transparent 62%),
				linear-gradient(160deg, rgba(18, 10, 36, 0.86) 0%, rgba(5, 1, 15, 0.8) 35%, rgba(45, 11, 69, 0.82) 100%);
		color: var(--color-text);
		line-height: 1.75;
		letter-spacing: 0.01em;
		background-attachment: fixed;
}

/* Add punk texture */
body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
		pointer-events: none;
		z-index: -1;
}

/* Add subtle film grain effect */
body::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
		pointer-events: none;
		z-index: -1;
}

/* Layout and sections */
.hero {
		position: relative;
		padding: clamp(4rem, 10vw, 7rem) 0;
		isolation: isolate;
		background-color: var(--color-ink);
		border-radius: 32px;
		overflow: hidden;
		position: relative;
}

.coming-soon {
		position: relative;
		padding: clamp(4rem, 10vw, 7rem) 0;
		isolation: isolate;
		background-color: var(--color-black);
		box-shadow: 0 0 30px var(--shadow-deep);
		border: 1px solid var(--color-primary);
		border-radius: 32px;
		overflow: hidden;
		position: relative;
}

.coming-soon::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 18% 22%, rgba(255, 38, 142, 0.35), transparent 60%),
				radial-gradient(circle at 78% 18%, rgba(122, 91, 255, 0.32), transparent 62%),
				radial-gradient(circle at 50% 85%, rgba(52, 245, 197, 0.18), transparent 65%);
		opacity: 0.9;
		z-index: -2;
		animation: pulseGlow 4s ease-in-out infinite alternate;
}

.coming-soon::after {
		content: "";
		position: absolute;
		inset: 12% 10% 8% 10%;
		border: 1px solid rgba(244, 241, 255, 0.08);
		border-radius: 32px;
		filter: blur(0.5px);
		opacity: 0.6;
		z-index: -3;
		background-color: var(--color-black-semi);
		box-shadow: 0 0 20px var(--shadow-deep);
		border: 1px solid var(--color-secondary);
		backdrop-filter: blur(10px);
}

.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 18% 22%, rgba(255, 38, 142, 0.35), transparent 60%),
				radial-gradient(circle at 78% 18%, rgba(122, 91, 255, 0.32), transparent 62%),
				radial-gradient(circle at 50% 85%, rgba(52, 245, 197, 0.18), transparent 65%);
		opacity: 0.9;
		z-index: -2;
		animation: pulseGlow 4s ease-in-out infinite alternate;
}

.hero::after {
		content: "";
		position: absolute;
		inset: 12% 10% 8% 10%;
		border: 1px solid rgba(244, 241, 255, 0.08);
		border-radius: 32px;
		filter: blur(0.5px);
		opacity: 0.6;
		z-index: -3;
		background-color: var(--color-black-semi);
		box-shadow: 0 0 20px var(--shadow-deep);
		border: 1px solid var(--color-secondary);
		backdrop-filter: blur(10px);
}

/* Ensure hero section has the same border effect as coming-soon */
.hero::after {
		content: "";
		position: absolute;
		inset: 12% 10% 8% 10%;
		border: 1px solid rgba(244, 241, 255, 0.08);
		border-radius: 32px;
		filter: blur(0.5px);
		opacity: 0.6;
		z-index: -3;
		background-color: var(--color-black-semi);
		box-shadow: 0 0 20px var(--shadow-deep);
		border: 1px solid var(--color-secondary);
		backdrop-filter: blur(10px);
}

@keyframes pulseGlow {
		0% {
				box-shadow: 0 0 20px rgba(255, 38, 142, 0.2);
		}
		100% {
				box-shadow: 0 0 40px rgba(255, 38, 142, 0.4), 0 0 60px rgba(122, 91, 255, 0.3);
		}
}

/* Add black border effect with glitch */
.coming-soon__border {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 3px solid var(--color-black);
		border-radius: 32px;
		pointer-events: none;
		z-index: 1;
		animation: glitchBorder 3s infinite alternate-reverse;
}

@keyframes glitchBorder {
		0% {
				transform: translate(0);
				border-color: var(--color-black);
		}
		25% {
				transform: translate(-1px, 1px);
				border-color: var(--color-primary);
		}
		50% {
				transform: translate(1px, -1px);
				border-color: var(--color-secondary);
		}
		75% {
				transform: translate(-1px, -1px);
				border-color: var(--color-accent);
		}
		100% {
				transform: translate(1px, 1px);
				border-color: var(--color-accent-purple);
		}
}

.coming-soon__layout {
		display: grid;
		gap: clamp(2.5rem, 4vw, 3rem);
		align-items: start;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Typography */
.eyebrow {
		display: inline-flex;
		font-family: var(--font-typewriter);
		font-weight: 600;
		letter-spacing: var(--tracking-medium);
		text-transform: uppercase;
		font-size: 0.95rem;
		padding: 0.4rem 0.8rem;
		border-radius: 4px;
		background: rgba(255, 38, 142, 0.18);
		color: var(--color-starlight);
		border: 2px solid var(--color-primary);
		box-shadow: 0 0 8px rgba(255, 38, 142, 0.3);
		width: fit-content;
		animation: fadeInUp 0.8s ease-out;
		text-shadow: 0 0 4px rgba(255, 38, 142, 0.4);
		font-style: italic;
}

/* Ensure nebula-text class has the correct styling */
.nebula-text {
		font-family: var(--font-typewriter);
		font-size: clamp(2.5rem, 6vw, 4.1rem);
		line-height: 1.15;
		margin: 1rem 0;
		color: var(--color-starlight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-medium);
		font-weight: 600;
		position: relative;
		display: inline-block;
		text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

.nebula-text::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.05),
				rgba(0, 0, 0, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 20px
		);
		pointer-events: none;
		border-radius: 4px;
}

.nebula-text::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, var(--color-primary), var(--color-accent-purple), var(--color-accent), var(--color-secondary));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		mix-blend-mode: multiply;
		opacity: 0.3;
		animation: textShine 5s linear infinite;
		pointer-events: none;
}

/* Specific styling for timeline title to maintain its unique positioning */
#timeline-title {
		font-family: var(--font-typewriter);
		font-size: clamp(2.5rem, 6vw, 4.1rem);
		line-height: 1.15;
		margin: 1rem 0;
		color: var(--color-starlight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-medium);
		font-weight: 600;
		position: relative;
		display: inline-block;
		text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
		text-align: center;
		margin-bottom: 2.5rem;
}

#timeline-title::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.05),
				rgba(0, 0, 0, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 20px
		);
		pointer-events: none;
		border-radius: 4px;
}

#timeline-title::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, var(--color-primary), var(--color-accent-purple), var(--color-accent), var(--color-secondary));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		mix-blend-mode: multiply;
		opacity: 0.3;
		animation: textShine 5s linear infinite;
		pointer-events: none;
}

@keyframes textShine {
		0% { background-position: 0% 50%; }
		100% { background-position: 300% 50%; }
}

@keyframes fadeInUp {
		from {
				opacity: 0;
				transform: translateY(20px);
		}
		to {
				opacity: 1;
				transform: translateY(0);
		}
}

.coming-soon__lede {
		font-size: 1.15rem;
		color: var(--color-text-muted);
		margin-bottom: 2rem;
		line-height: 1.6;
		animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* Form styles */
.notify-form {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		align-items: center;
		animation: fadeInUp 0.8s ease-out 0.9s both;
		position: relative;
}

.notify-form::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.03),
				rgba(0, 0, 0, 0.03) 10px,
				rgba(255, 255, 255, 0.03) 10px,
				rgba(255, 255, 255, 0.03) 20px
		);
		pointer-events: none;
		border-radius: 999px;
		z-index: 1;
}

/* Email input field styling */
.email-input {
		flex: 1 1 220px;
		min-width: 0;
		padding: 0.85rem 1rem;
		border-radius: 999px;
		border: 2px solid #3e93ef; /* Brand blue */
		background: rgba(255, 255, 255, 0.08);
		color: var(--color-text);
		font-family: var(--font-typewriter);
		letter-spacing: 0.02em;
		font-size: 1.05rem;
		box-shadow: 0 0 8px rgba(62, 147, 239, 0.2);
		position: relative;
		z-index: 2;
		width: 100%;
		height: auto;
}

.email-input::placeholder {
		color: rgba(255, 255, 255, 0.5);
		font-family: var(--font-typewriter);
}

.email-input:focus {
		outline: none;
		border-color: #ef993e; /* Brand orange */
		box-shadow: 0 0 15px rgba(239, 153, 62, 0.4);
		background: rgba(255, 255, 255, 0.12);
}

/* Subscribe button styling */
.subscribe-button {
		padding: 0.9rem 1.8rem;
		border-radius: 4px;
		border: 2px solid #ef993e; /* Brand orange */
		font-weight: 600;
		letter-spacing: var(--tracking-medium);
		text-transform: uppercase;
		font-family: var(--font-typewriter);
		cursor: pointer;
		background: linear-gradient(135deg, #3e93ef, #ef993e); /* Brand gradient */
		color: white;
		box-shadow: 0 0 15px rgba(62, 147, 239, 0.3);
		transition: all 0.2s ease;
		font-size: 1.05rem;
		position: relative;
		z-index: 2;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		display: inline-block;
		min-height: auto;
		margin: 0;
}

.subscribe-button:hover,
.subscribe-button:focus {
		transform: translateY(-2px) rotate(-1deg);
		box-shadow: 0 0 20px rgba(239, 153, 62, 0.5), 0 0 30px rgba(62, 147, 239, 0.4);
		border-color: #3e93ef; /* Brand blue */
}

.subscribe-button:active {
		transform: translateY(1px) rotate(0deg);
		box-shadow: 0 0 10px rgba(239, 153, 62, 0.3), 0 0 15px rgba(62, 147, 239, 0.2);
}

.coming-soon__privacy {
		font-size: 0.85rem;
		color: rgba(244, 241, 255, 0.62);
		animation: fadeInUp 0.8s ease-out 1.2s both;
}

/* Highlights section */
.launch-highlights {
		display: grid;
		gap: 1.5rem;
		animation: fadeInUp 0.8s ease-out 1.5s both;
}

.launch-highlights h2 {
		font-family: var(--font-serif);
		font-size: 1.35rem;
		color: var(--color-starlight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-tight);
		margin: 0 0 1rem 0;
		position: relative;
		display: inline-block;
}

.launch-highlights h2::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 50%;
		height: 2px;
		background: var(--color-secondary);
		box-shadow: 0 0 10px rgba(52, 245, 197, 0.4);
}

.launch-highlights ul {
		list-style: none;
		padding: 0;
		margin: 1rem 0 0;
		display: grid;
		gap: 0.75rem;
}

.launch-highlights li {
		position: relative;
		padding-left: 1.4rem;
		color: var(--color-text-muted);
		font-size: 0.95rem;
}

.launch-highlights li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.45rem;
		width: 0.55rem;
		height: 0.55rem;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
		box-shadow: 0 0 12px rgba(52, 245, 197, 0.45);
}

.social-links {
		list-style: none;
		display: flex;
		gap: 1rem;
		padding: 0;
		margin: 1rem 0 0;
		flex-wrap: wrap;
}

.social-links a {
		color: var(--color-secondary);
		text-decoration: none;
		font-weight: 600;
		letter-spacing: var(--tracking-tight);
		transition: color 0.2s ease, text-shadow 0.2s ease;
}

.social-links a:hover,
.social-links a:focus {
		color: var(--color-primary);
		text-shadow: 0 0 12px rgba(255, 38, 142, 0.45);
}

/* Timeline section */
.timeline {
		padding: clamp(3rem, 8vw, 5rem) 0 clamp(4rem, 9vw, 6rem);
		position: relative;
		background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20V40ZM40 40V20L20 40H40Z'/%3E%3C/g%3E%3C/svg%3E");
}

.timeline::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(160deg, rgba(8, 4, 24, 0.95) 0%, rgba(18, 10, 36, 0.9) 55%, rgba(45, 11, 69, 0.92) 100%);
		z-index: -1;
}

#timeline-title {
		font-family: var(--font-graffiti);
		color: var(--color-starlight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-medium);
		margin-bottom: 2rem;
		text-align: center;
		position: relative;
		display: inline-block;
		font-size: 1.8rem;
		text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
		transform: rotate(-1deg);
}

#timeline-title::after {
		content: '';
		position: absolute;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
		width: 100px;
		height: 4px;
		background: var(--color-secondary);
		border-radius: 2px;
		box-shadow: 0 0 15px rgba(52, 245, 197, 0.4);
		border: 2px solid var(--color-primary);
}

.timeline__list {
		list-style: none;
		margin: 2rem 0 0;
		padding: 0;
		display: grid;
		gap: 1.8rem;
		counter-reset: phase;
}

.timeline__list li {
		padding: 1.6rem 1.8rem;
		border-radius: 8px;
		border: 2px solid var(--color-primary);
		background: rgba(8, 2, 24, 0.7);
		box-shadow: var(--shadow-punk);
		position: relative;
		transition: all 0.3s ease;
		font-family: var(--font-typewriter);
		font-size: 1.05rem;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.timeline__list li::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 20px;
		width: 20px;
		height: 20px;
		background: var(--color-primary);
		border: 3px solid var(--color-midnight);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(255, 38, 142, 0.5);
		z-index: 2;
}

.timeline__list li::after {
		content: "";
		position: absolute;
		top: 0;
		left: 30px;
		bottom: 0;
		width: 3px;
		background: linear-gradient(to bottom, var(--color-secondary), transparent);
		z-index: 1;
}

.timeline__list li:hover {
		transform: translateY(-3px) rotate(-1deg);
		box-shadow: 0 0 25px rgba(52, 245, 197, 0.5), 0 0 20px rgba(255, 38, 142, 0.4);
		border-color: var(--color-secondary);
}

.timeline__phase {
		display: block;
		font-family: var(--font-typewriter);
		font-size: 1.2rem;
		letter-spacing: var(--tracking-medium);
		color: var(--color-starlight);
		margin-bottom: 0.6rem;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		position: relative;
		z-index: 2;
}

.timeline__list p {
		color: var(--color-text-muted);
		margin: 0;
		position: relative;
		z-index: 2;
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Footer */
.site-footer {
		background: var(--color-midnight);
		border-top: 2px solid var(--color-primary);
		position: relative;
		overflow: hidden;
		padding: 3rem 0 2rem;
		font-family: var(--font-typewriter);
		background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.site-footer::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--color-primary), var(--color-accent-purple), var(--color-accent), var(--color-secondary));
		animation: gradientShift 3s linear infinite;
		box-shadow: 0 0 10px rgba(255, 38, 142, 0.4);
}

.site-footer::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: repeating-linear-gradient(
				90deg,
				var(--color-primary),
				var(--color-primary) 10px,
				transparent 10px,
				transparent 20px
		);
}

@keyframes gradientShift {
		0% { background-position: 0% 50%; }
		100% { background-position: 300% 50%; }
}

.site-footer .footer-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1rem;
		animation: fadeInUp 0.8s ease-out 0.3s both;
		position: relative;
		z-index: 2;
}

.site-footer p {
		color: var(--color-text-muted);
		margin: 0;
		font-size: 0.9rem;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.footer-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.5rem;
		margin: 1rem 0 0;
}

.footer-links li {
		list-style: none;
		position: relative;
}

.footer-links li::after {
		content: "•";
		position: absolute;
		left: -10px;
		top: 2px;
		color: var(--color-primary);
		font-size: 1.2rem;
		text-shadow: 0 0 4px rgba(255, 38, 142, 0.5);
}

.footer-links li:first-child::before {
		content: none;
}

.footer-links a {
		color: var(--color-text-muted);
		text-decoration: none;
		transition: all 0.3s ease;
		font-size: 0.9rem;
		font-family: var(--font-typewriter);
		letter-spacing: var(--tracking-medium);
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		position: relative;
		padding: 2px 0;
}

.footer-links a::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		background: var(--color-secondary);
		box-shadow: 0 0 5px rgba(52, 245, 197, 0.5);
		transition: width 0.3s ease;
}

.footer-links a:hover {
		color: var(--color-secondary);
		transform: translateY(-1px);
		text-shadow: 0 0 6px rgba(52, 245, 197, 0.5);
}

.footer-links a:hover::after {
		width: 100%;
}

/* Responsive adjustments */
@media (min-width: 768px) {
		.coming-soon__layout {
				grid-template-columns: 2fr 1fr;
		}
		
		.coming-soon__lede {
				font-size: 1.25rem;
		}
		
		.notify-form {
				flex-wrap: nowrap;
		}
}

@media (min-width: 1024px) {
		.coming-soon {
				padding: 4rem 0;
		}
		
		.coming-soon__layout {
				gap: 4rem;
		}
		
		#coming-soon-title {
				font-size: 4.1rem;
		}
		
		.coming-soon__lede {
				font-size: 1.3rem;
		}
}

/* Mobile adjustments */
@media (max-width: 767px) {
		.coming-soon {
				padding: 3rem 0;
		}
		
		.coming-soon__layout {
				padding: 0 1rem;
		}
		
		#coming-soon-title {
				font-size: 2.5rem;
		}
		
		.launch-highlights {
				font-size: 0.95rem;
		}
		
		.timeline__list li {
				padding: 1rem 1rem 1rem 2.5rem;
		}
}

/* Graffiti elements */
.graffiti-tag {
		position: absolute;
		font-family: var(--font-graffiti);
		font-size: clamp(1.5rem, 3vw, 2.5rem);
		font-weight: bold;
		text-shadow: 
				2px 2px 0px rgba(0, 0, 0, 0.5),
				4px 4px 0px var(--color-primary);
		transform: rotate(-10deg);
		opacity: 0.3;
		z-index: 1;
		pointer-events: none;
}

.graffiti-tag.primary {
		color: var(--color-primary);
		top: 15%;
		left: 5%;
}

.graffiti-tag.secondary {
		color: var(--color-secondary);
		top: 65%;
		right: 8%;
		transform: rotate(8deg);
}

.graffiti-tag.accent {
		color: var(--color-accent);
		bottom: 15%;
		left: 10%;
		transform: rotate(-5deg);
		font-size: clamp(1.2rem, 2.5vw, 2rem);
}

/* Simplified motion effects for writer profile section - applied sparingly */
.writer-profile {
		position: relative;
		overflow: hidden;
}

/* Subtle background gradient - no animation */
.writer-profile::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 20% 30%, rgba(255, 38, 142, 0.1), transparent 55%),
				radial-gradient(circle at 80% 25%, rgba(122, 91, 255, 0.08), transparent 58%),
				radial-gradient(circle at 50% 80%, rgba(52, 245, 197, 0.05), transparent 60%);
		opacity: 0.6;
		z-index: -1;
}

.profile-container {
		position: relative;
		z-index: 1;
}

/* Enhanced card styling with hover effects only (no timeline elements) */
.aac-card {
		position: relative;
		transition: all 0.3s ease;
		background: rgba(8, 2, 24, 0.7);
		border-radius: 18px;
		padding: 1.5rem;
		box-shadow: var(--shadow-punk);
		border: 2px solid var(--color-primary);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		font-family: var(--font-typewriter);
		font-size: 1.05rem;
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		position: relative;
}

/* Style for card titles to match nebula heading style */
.aac-card .card-title {
		font-family: var(--font-typewriter);
		font-size: 1.4rem;
		line-height: 1.15;
		color: var(--color-starlight);
		text-transform: uppercase;
		letter-spacing: var(--tracking-medium);
		font-weight: 600;
		position: relative;
		display: inline-block;
		text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
		margin: 0;
}

.aac-card .card-title::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.05),
				rgba(0, 0, 0, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 10px,
				rgba(255, 255, 255, 0.05) 20px
		);
		pointer-events: none;
		border-radius: 4px;
}

.aac-card .card-title::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, var(--color-primary), var(--color-accent-purple), var(--color-accent), var(--color-secondary));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		mix-blend-mode: multiply;
		opacity: 0.3;
		animation: textShine 5s linear infinite;
		pointer-events: none;
}

.aac-card:hover {
		transform: translateY(-3px) rotate(-1deg);
		box-shadow: 0 0 25px rgba(52, 245, 197, 0.5), 0 0 20px rgba(255, 38, 142, 0.4);
		border-color: var(--color-secondary);
		z-index: 2;
}

/* Remove timeline-style dot and line from cards */
.aac-card::before,
.aac-card::after {
		display: none;
}

/* Simplified image styling - only hover effect */
.profile-image {
		position: relative;
		overflow: hidden;
		border-radius: 999px;
		transition: transform 0.3s ease;
}

.profile-image:hover {
		transform: scale(1.05);
}

/* Simplified skill tag styling - only hover effect */
.skill-tag {
		transition: all 0.3s ease;
		background: rgba(148,163,184,0.18);
		color: #e5e7eb;
		font-size: 0.8rem;
		padding: 0.25rem 0.65rem;
		border-radius: 999px;
}

.skill-tag:hover {
		transform: translateY(-2px);
		background: rgba(148,163,184,0.28);
		box-shadow: 0 4px 12px rgba(122, 91, 255, 0.3);
}

/* Remove all animations from timeline elements */
.timeline__list li::before,
.timeline__list li::after {
		display: none;
}

/* Remove floating animation from profile image */
.profile-image {
		animation: none;
}

/* Remove scan line effect */
.writer-profile::after {
		display: none;
}

/* Remove glitch effect from title */
#writer-title {
		animation: none;
		transform: none;
}

/* Remove card loading animation */
.aac-card {
		animation: none;
		opacity: 1;
		transform: none;
}

/* Remove floating animation from skill tags */
.skill-tag {
		animation: none;
		transform: none;
}

/* Keep only the essential nebula text animation */
.nebula-text::after {
		animation: textShine 5s linear infinite;
		background-size: 300% auto;
}

@keyframes textShine {
		0% { background-position: 0% 50%; }
		100% { background-position: 300% 50%; }
}

/* Simplified social link styling */
.social-link {
		transition: all 0.3s ease;
}

.social-link:hover {
		color: var(--color-secondary);
		text-shadow: 0 0 12px rgba(52, 245, 197, 0.45);
		transform: translateX(3px);
}
/* ============= GLOBAL SECTION SPACING SYSTEM ============= */

/* All website sections get consistent breathing room */
.section,
templates\:section,
.contact-form-section,
.writer-profile,
.timeline,
.hero,
.coming-soon {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
    position: relative;
}

/* Smooth responsive vertical spacing */
@media (min-width: 768px) {
    .section,
    templates\:section,
    .contact-form-section,
    .writer-profile,
    .timeline,
    .hero,
    .coming-soon {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

@media (min-width: 1280px) {
    .section,
    templates\:section,
    .contact-form-section,
    .writer-profile,
    .timeline,
    .hero,
    .coming-soon {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* Universal inner content width for balance across the site */
.section > *,
templates\:section > *,
.contact-form-section .contact-form-container,
.writer-profile .profile-container,
.timeline > *,
.hero > *,
.coming-soon > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Sticky Services Sidebar */
.services-sidebar {
  position: sticky;
  top: 2rem;
  align-self: flex-start;
  width: 240px;
  padding: 1.5rem;
  background: rgba(8, 2, 24, 0.55);
  border: 2px solid var(--color-primary);
  border-radius: 16px;
  box-shadow: var(--shadow-punk);
  backdrop-filter: blur(8px);
  z-index: 50;
}

.services-sidebar nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.services-sidebar nav a {
  font-family: var(--font-typewriter);
  text-transform: uppercase;
  letter-spacing: var(--tracking-medium);
  color: var(--color-starlight);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  display: block;
  transition: all 0.25s ease;
  text-shadow: 0 0 6px rgba(255, 38, 142, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.services-sidebar nav a:hover,
.services-sidebar nav a:focus {
  color: var(--color-secondary);
  transform: translateX(6px);
  box-shadow: 0 0 18px rgba(52, 245, 197, 0.45);
  border-color: var(--color-secondary);
}

/* Highlight active section (optional, requires JS if you want auto-detection) */
.services-sidebar nav a.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 18px rgba(255, 38, 142, 0.45);
}

/* Layout container helper */
.services-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
}

/* Mobile-friendly sidebar & layout improvements */
@media (max-width: 900px) {
  
  .services-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .services-sidebar {
    position: static !important;
    width: 100%;
    margin: 0 0 2rem 0;
    box-shadow: none;
    border-radius: 14px;
    border-width: 1px;
    backdrop-filter: blur(4px);
  }

  .services-sidebar nav ul {
    gap: 0.5rem;
  }

  .services-sidebar nav a {
    padding: 0.9rem 1rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 12px;
    transform: none !important;
  }

  .services-sidebar nav a:hover {
    transform: none;
  }

  /* Section spacing */
  .writer-profile {
    padding: 2.5rem 0 !important;
  }

  /* Dividers compress slightly on mobile */
  .services-divider {
    margin: 2.5rem 0;
  }
}