/*
Theme Name: AI Automation EN
Theme URI: https://claudecode.test
Author: Samuel
Author URI: https://claudecode.test
Description: A modern dark WordPress block theme for AI & Python automation services. Built with Full Site Editing, featuring a neon green on dark aesthetic.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-automation
Tags: full-site-editing, block-patterns, dark, one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, sticky-post, threaded-comments, translation-ready
*/

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
	--color-primary:      #3df58a;
	--color-primary-70:   #77f5aa;
	--color-primary-50:   #9ef8c4;
	--color-primary-30:   #c5fad9;
	--color-primary-10:   #edfdf4;
	--color-dark-bg:      #020d08;
	--color-surface:      #061610;
	--color-surface-alt:  #0a2d1d;
	--color-surface-deep: #030a07;
	--color-surface-mid:  #0d3520;
	--color-white:        #ffffff;
	--color-gray-100:     #f3f4f6;
	--color-gray-300:     #d1d5db;
	--color-gray-400:     #9ca3af;
	--color-gray-500:     #6b7280;
	--color-gray-700:     #374151;

	--font-primary: 'Space Grotesk', sans-serif;

	--transition-base: 0.3s ease;
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-full: 9999px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-dark-bg);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
}

.wp-site-blocks {
	background-color: var(--color-dark-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--color-primary);
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--color-surface-alt);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--color-white);
	line-height: 1.2;
	margin-top: 0;
}

p {
	color: var(--color-gray-300);
	margin-top: 0;
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* ============================================================
   VISUAL EFFECT CLASSES
   ============================================================ */

/* Hero gradient background */
.hero-gradient,
.hero-section {
	background: radial-gradient(circle at center, #0a2d1d 0%, #020d08 100%);
}

/* Neon glow box shadow */
.neon-glow {
	box-shadow: 0 0 15px rgba(61, 245, 138, 0.3);
}

/* Neon glow on hover */
.neon-glow-hover {
	transition: box-shadow var(--transition-base);
}

.neon-glow-hover:hover {
	box-shadow: 0 0 20px rgba(61, 245, 138, 0.4);
}

/* Text glow */
.text-glow {
	text-shadow: 0 0 10px rgba(61, 245, 138, 0.5);
}

/* Card gradient background */
.card-gradient,
.service-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card-gradient:hover,
.service-card:hover {
	border-color: rgba(61, 245, 138, 0.35);
	box-shadow: 0 0 20px rgba(61, 245, 138, 0.15);
	transform: translateY(-4px);
}

/* Footer gradient */
.footer-gradient,
.site-footer-section {
	background: linear-gradient(to bottom, #020d08 0%, #0a2d1d 100%);
}

/* Neon border animation */
@keyframes neon-border-pulse {
	0%, 100% { border-color: rgba(61, 245, 138, 0.2); box-shadow: 0 0 8px rgba(61, 245, 138, 0.1); }
	50%       { border-color: rgba(61, 245, 138, 0.5); box-shadow: 0 0 20px rgba(61, 245, 138, 0.3); }
}

.neon-border-animate {
	border: 1px solid rgba(61, 245, 138, 0.2);
	animation: neon-border-pulse 3s ease-in-out infinite;
}

/* ============================================================
   BADGE / PILL
   ============================================================ */
.badge-primary {
	display: inline-block;
	background: rgba(61, 245, 138, 0.1);
	color: var(--color-primary);
	border: 1px solid rgba(61, 245, 138, 0.3);
	padding: 0.4rem 1rem;
	border-radius: var(--radius-full);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
	font-family: var(--font-primary);
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: var(--radius-md);
	transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Primary button */
.wp-block-button.is-style-fill .wp-block-button__link,
.btn-primary .wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-dark-bg);
	padding: 0.9rem 2rem;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.btn-primary .wp-block-button__link:hover {
	background-color: var(--color-white);
	color: var(--color-dark-bg);
	box-shadow: 0 0 20px rgba(61, 245, 138, 0.4);
	transform: translateY(-2px);
}

/* Outline / secondary button */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 0.85rem 2rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	color: var(--color-dark-bg);
	box-shadow: 0 0 20px rgba(61, 245, 138, 0.3);
	transform: translateY(-2px);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header,
.wp-block-template-part.has-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(2, 13, 8, 0.9);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(61, 245, 138, 0.1);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
	gap: 2rem;
}

/* Logo */
.site-logo-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.logo-box {
	background: var(--color-primary);
	color: var(--color-dark-bg);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.logo-tagline {
	color: var(--color-gray-400);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Navigation links */
.wp-block-navigation,
.wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-navigation-item__content {
	color: var(--color-gray-300);
	font-weight: 500;
	font-size: 0.9rem;
	transition: color var(--transition-base);
	text-decoration: none;
}

.wp-block-navigation-item__content:hover {
	color: var(--color-primary);
}

/* Mobile menu */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--color-white);
	background: transparent;
	border: 1px solid rgba(61, 245, 138, 0.3);
	border-radius: var(--radius-sm);
	padding: 0.5rem;
	cursor: pointer;
	transition: border-color var(--transition-base);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	border-color: var(--color-primary);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(2, 13, 8, 0.98);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	padding: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, #0a2d1d 0%, #020d08 100%);
	z-index: 0;
}

.hero-section > * {
	position: relative;
	z-index: 1;
}

.hero-h1 {
	font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-white);
	margin-bottom: 1.5rem;
}

.hero-h1 .primary-text {
	color: var(--color-primary);
	text-shadow: 0 0 10px rgba(61, 245, 138, 0.5);
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section-title {
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 1rem;
}

.section-subtitle {
	color: var(--color-gray-400);
	font-size: 1.1rem;
	max-width: 600px;
	margin: 0 auto 3rem;
}

.primary-color {
	color: var(--color-primary);
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.service-card:hover {
	border-color: rgba(61, 245, 138, 0.35);
	box-shadow: 0 0 30px rgba(61, 245, 138, 0.1);
	transform: translateY(-4px);
}

.service-icon {
	width: 48px;
	height: 48px;
	background: rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	color: var(--color-gray-300);
}

.checklist-icon {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 0.1rem;
}

/* ============================================================
   PORTFOLIO CARDS
   ============================================================ */
.portfolio-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.portfolio-card:hover {
	border-color: rgba(61, 245, 138, 0.35);
	box-shadow: 0 8px 40px rgba(61, 245, 138, 0.12);
	transform: translateY(-6px);
}

.portfolio-tag {
	display: inline-block;
	background: rgba(61, 245, 138, 0.1);
	color: var(--color-primary);
	border: 1px solid rgba(61, 245, 138, 0.2);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* ============================================================
   DIVIDER / SEPARATOR
   ============================================================ */
.neon-divider {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(61, 245, 138, 0.3), transparent);
	margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-section {
	background: linear-gradient(to bottom, #020d08 0%, #0a2d1d 100%);
	border-top: 1px solid rgba(61, 245, 138, 0.1);
}

.footer-logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-white);
}

.footer-logo-accent {
	color: var(--color-primary);
}

.footer-description {
	color: var(--color-gray-400);
	font-size: 0.9rem;
	line-height: 1.7;
}

.footer-contact-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-gray-300);
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.footer-contact-item a {
	color: var(--color-gray-300);
	transition: color var(--transition-base);
}

.footer-contact-item a:hover {
	color: var(--color-primary);
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(61, 245, 138, 0.05);
	border: 1px solid rgba(61, 245, 138, 0.15);
	border-radius: var(--radius-md);
	color: var(--color-gray-400);
	transition: all var(--transition-base);
}

.social-link:hover {
	background: rgba(61, 245, 138, 0.15);
	border-color: var(--color-primary);
	color: var(--color-primary);
	box-shadow: 0 0 12px rgba(61, 245, 138, 0.25);
}

.footer-bottom {
	border-top: 1px solid rgba(61, 245, 138, 0.08);
	padding: 1.5rem 0;
}

.footer-bottom-text {
	color: var(--color-gray-500);
	font-size: 0.85rem;
}

/* ============================================================
   STRATEGY CTA SECTION
   ============================================================ */
.strategy-cta-section {
	background: var(--color-surface);
	border-top: 1px solid rgba(61, 245, 138, 0.08);
	border-bottom: 1px solid rgba(61, 245, 138, 0.08);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.testimonial-card:hover {
	border-color: rgba(61, 245, 138, 0.25);
	transform: translateY(-3px);
}

.testimonial-stars {
	color: var(--color-primary);
	font-size: 1rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.testimonial-quote {
	color: var(--color-gray-300);
	font-size: 1rem;
	line-height: 1.7;
	font-style: italic;
	margin-bottom: 1.5rem;
}

.testimonial-author-name {
	font-weight: 700;
	color: var(--color-white);
	font-size: 0.95rem;
}

.testimonial-author-role {
	color: var(--color-gray-400);
	font-size: 0.85rem;
}

/* ============================================================
   PRICING TABLE
   ============================================================ */
.pricing-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-xl);
	padding: 2.5rem 2rem;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.pricing-card.is-featured {
	border-color: var(--color-primary);
	box-shadow: 0 0 30px rgba(61, 245, 138, 0.15);
	transform: scale(1.03);
}

.pricing-price {
	font-size: 3rem;
	font-weight: 700;
	color: var(--color-primary);
}

.pricing-period {
	color: var(--color-gray-400);
	font-size: 0.9rem;
}

/* ============================================================
   ACCORDION / FAQ
   ============================================================ */
.accordion-item {
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-md);
	margin-bottom: 0.75rem;
	overflow: hidden;
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
}

.accordion-item summary {
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--color-white);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color var(--transition-base);
}

.accordion-item summary:hover {
	color: var(--color-primary);
}

.accordion-item[open] summary {
	color: var(--color-primary);
	border-bottom: 1px solid rgba(61, 245, 138, 0.1);
}

.accordion-item .accordion-content {
	padding: 1.25rem 1.5rem;
	color: var(--color-gray-300);
	line-height: 1.7;
}

/* ============================================================
   STATS SECTION
   ============================================================ */
.stat-item {
	text-align: center;
	padding: 2rem;
}

.stat-number {
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
	text-shadow: 0 0 20px rgba(61, 245, 138, 0.4);
}

.stat-label {
	color: var(--color-gray-300);
	font-size: 1rem;
	margin-top: 0.5rem;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-wrapper {
	position: relative;
}

.timeline-wrapper::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, transparent, rgba(61, 245, 138, 0.3), transparent);
	transform: translateX(-50%);
}

.timeline-item {
	position: relative;
	padding: 1.5rem;
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-lg);
	margin-bottom: 1.5rem;
}

.timeline-dot {
	width: 16px;
	height: 16px;
	background: var(--color-primary);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(61, 245, 138, 0.5);
	margin-bottom: 0.75rem;
}

/* ============================================================
   TEAM GRID
   ============================================================ */
.team-card {
	background: linear-gradient(145deg, #061610 0%, #030a07 100%);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-xl);
	padding: 2rem;
	text-align: center;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.team-card:hover {
	border-color: rgba(61, 245, 138, 0.3);
	transform: translateY(-4px);
}

.team-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid rgba(61, 245, 138, 0.3);
	margin: 0 auto 1rem;
	overflow: hidden;
	background: var(--color-surface-alt);
}

/* ============================================================
   COOKIE NOTICE
   ============================================================ */
.cookie-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(6, 22, 16, 0.97);
	border-top: 1px solid rgba(61, 245, 138, 0.2);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	z-index: 9999;
	padding: 1.25rem 2rem;
}

/* ============================================================
   ANNOUNCEMENT BANNER
   ============================================================ */
.announcement-banner {
	background: rgba(61, 245, 138, 0.08);
	border-bottom: 1px solid rgba(61, 245, 138, 0.15);
	text-align: center;
	padding: 0.75rem 2rem;
	font-size: 0.9rem;
	color: var(--color-primary);
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	background: rgba(6, 22, 16, 0.8);
	border: 1px solid rgba(61, 245, 138, 0.2);
	border-radius: var(--radius-md);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 1rem;
	padding: 0.75rem 1rem;
	width: 100%;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(61, 245, 138, 0.1);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-gray-500);
}

/* ============================================================
   WORDPRESS BLOCK OVERRIDES
   ============================================================ */

/* Group blocks */
.wp-block-group {
	background-color: transparent;
}

/* Columns */
.wp-block-columns {
	gap: 2rem;
}

/* Separator */
.wp-block-separator {
	border-color: rgba(61, 245, 138, 0.15);
}

/* Quote */
.wp-block-quote {
	border-left: 4px solid var(--color-primary);
	padding: 1rem 1.5rem;
	background: rgba(61, 245, 138, 0.04);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.wp-block-quote p {
	color: var(--color-gray-300);
	font-style: italic;
}

.wp-block-quote cite {
	color: var(--color-primary);
	font-size: 0.9rem;
}

/* Code */
.wp-block-code {
	background: var(--color-surface);
	border: 1px solid rgba(61, 245, 138, 0.1);
	border-radius: var(--radius-md);
	color: var(--color-primary);
}

/* Table */
.wp-block-table table {
	background: transparent;
}

.wp-block-table th {
	background: var(--color-surface-alt);
	color: var(--color-primary);
	font-weight: 700;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(61, 245, 138, 0.15);
}

.wp-block-table td {
	color: var(--color-gray-300);
	padding: 0.75rem 1rem;
	border: 1px solid rgba(61, 245, 138, 0.08);
}

.wp-block-table tr:nth-child(even) td {
	background: rgba(6, 22, 16, 0.5);
}

/* Search block */
.wp-block-search__label {
	color: var(--color-gray-300);
}

.wp-block-search__input {
	background: rgba(6, 22, 16, 0.8);
	border: 1px solid rgba(61, 245, 138, 0.2);
	color: var(--color-white);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
}

.wp-block-search__button {
	background: var(--color-primary);
	color: var(--color-dark-bg);
	font-weight: 700;
	border: none;
	border-radius: var(--radius-md);
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	transition: background var(--transition-base);
}

.wp-block-search__button:hover {
	background: var(--color-white);
}

/* Post title */
.wp-block-post-title a {
	color: var(--color-white);
	transition: color var(--transition-base);
}

.wp-block-post-title a:hover {
	color: var(--color-primary);
}

/* Post date, post author */
.wp-block-post-date,
.wp-block-post-author__name {
	color: var(--color-gray-400);
	font-size: 0.9rem;
}

/* Comments */
.wp-block-comments-title {
	color: var(--color-white);
	font-size: 1.5rem;
}

.wp-block-comment-author-name a {
	color: var(--color-primary);
}

.wp-block-comment-date {
	color: var(--color-gray-500);
	font-size: 0.85rem;
}

.wp-block-comment-content {
	color: var(--color-gray-300);
}

/* Comment form */
.wp-block-post-comments-form .comment-reply-title {
	color: var(--color-white);
}

.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea {
	background: rgba(6, 22, 16, 0.8);
	border: 1px solid rgba(61, 245, 138, 0.2);
	color: var(--color-white);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(61, 245, 138, 0.1);
}

.wp-block-post-comments-form .submit {
	background: var(--color-primary);
	color: var(--color-dark-bg);
	font-weight: 700;
	border: none;
	border-radius: var(--radius-md);
	padding: 0.75rem 2rem;
	cursor: pointer;
	font-family: var(--font-primary);
	transition: background var(--transition-base);
}

.wp-block-post-comments-form .submit:hover {
	background: var(--color-white);
}

/* Navigation blocks */
.wp-block-query-pagination {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: var(--color-surface);
	border: 1px solid rgba(61, 245, 138, 0.15);
	border-radius: var(--radius-md);
	color: var(--color-gray-300);
	transition: all var(--transition-base);
}

.wp-block-query-pagination-numbers a:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
	background: rgba(61, 245, 138, 0.1);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-primary   { color: var(--color-primary); }
.text-muted     { color: var(--color-gray-400); }
.text-white     { color: var(--color-white); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.font-bold      { font-weight: 700; }
.font-medium    { font-weight: 500; }
.uppercase      { text-transform: uppercase; }
.letter-wide    { letter-spacing: 0.1em; }
.w-full         { width: 100%; }
.block          { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.header-inner {
		padding: 0.75rem 1.25rem;
	}

	.hero-section {
		min-height: 80vh;
		padding: 4rem 1.25rem;
	}

	.service-card {
		padding: 1.5rem;
	}

	.wp-block-columns {
		flex-direction: column;
	}

	.pricing-card.is-featured {
		transform: none;
	}

	.timeline-wrapper::before {
		display: none;
	}
}

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