/*
 * One Click Site Manager — About page styles
 */

/* HERO */
.hero {
	background: var(--forest);
	background-image:
		linear-gradient(135deg, rgba(14,27,18,0.92) 0%, rgba(26,58,36,0.85) 50%, rgba(14,27,18,0.95) 100%),
		url('https://silver-lobster-674929.hostingersite.com/wp-content/uploads/2026/04/Shop-scaled-1.jpg');
	background-size: cover; background-position: center;
	padding: 88px 0 72px; position: relative; overflow: hidden;
}
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(76,175,80,0.07) 0%, transparent 70%); pointer-events: none; }
.hero-inner { max-width: 760px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 900; color: var(--white); margin-bottom: 20px; letter-spacing: -0.01em; }
.hero h1 .accent { color: var(--lime-bright); }
.hero-subtitle { font-size: 18px; color: rgba(255,255,255,0.72); max-width: 580px; margin-bottom: 36px; line-height: 1.75; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-stats { display: flex; align-items: center; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.stat-item { text-align: left; }
.stat-item strong { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--lime-bright); line-height: 1; }
.stat-item span { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; display: block; }
.stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.12); }

/* STORY */
.story-section { background: var(--white); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.story-img-wrap { position: relative; }
.story-img-main { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.story-img-main img { width: 100%; height: 460px; object-fit: cover; }
.story-float-badge { position: absolute; background: var(--lime); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-md); min-width: 150px; }
.story-float-badge strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 900; color: var(--white); line-height: 1; }
.story-float-badge span { font-size: 12px; color: rgba(255,255,255,0.9); font-weight: 600; margin-top: 4px; display: block; letter-spacing: 0.03em; }
.story-float-badge-exp { bottom: -20px; right: -20px; }
.story-float-badge-customers { top: -20px; left: -20px; background: var(--forest); border: 2px solid var(--lime); }
.story-float-badge-customers strong { color: var(--lime-bright); }
.story-float-badge-customers span { color: rgba(255,255,255,0.8); }
.story-content { padding-right: 12px; }
.story-content h2 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; margin-bottom: 20px; }
.story-content p { font-size: 16px; color: var(--ink-light); line-height: 1.8; margin-bottom: 18px; }
.story-highlights { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.story-highlight-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--gray-light); border-radius: var(--r-md); border-left: 3px solid var(--lime); }
.story-highlight-icon { width: 38px; height: 38px; background: var(--lime); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.story-highlight-icon svg { width: 20px; height: 20px; stroke: white; fill: none; }
.story-highlight-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.story-highlight-text span { font-size: 13px; color: var(--ink-light); }

/* FEATURES */
.features-section { background: linear-gradient(160deg, var(--forest) 0%, #0d2218 100%); position: relative; overflow: hidden; }
.features-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0); background-size: 32px 32px; pointer-events: none; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.feature-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-md); padding: 32px 28px; transition: all 0.25s ease; }
.feature-card:hover { background: rgba(76,175,80,0.12); border-color: rgba(76,175,80,0.35); transform: translateY(-4px); }
.feature-icon { width: 52px; height: 52px; background: rgba(76,175,80,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.feature-icon svg { width: 26px; height: 26px; stroke: var(--lime-bright); fill: none; }
.feature-card h3 { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 10px; font-family: var(--font-body); }
.feature-card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* REVIEWS */
.reviews-section { background: var(--cream); position: relative; overflow: hidden; }
.reviews-section::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(76,175,80,0.06) 0%, transparent 70%); top: -150px; right: -100px; pointer-events: none; }
.reviews-section::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(245,165,36,0.05) 0%, transparent 70%); bottom: -100px; left: -80px; pointer-events: none; }
.reviews-summary { display: inline-flex; align-items: center; gap: 24px; background: var(--white); border: 1.5px solid var(--gray-border); border-radius: 100px; padding: 12px 28px 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.reviews-summary-google { width: 38px; height: 38px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex-shrink: 0; }
.reviews-summary-google svg { width: 22px; height: 22px; }
.reviews-summary-stars { display: inline-flex; gap: 2px; }
.reviews-summary-stars svg { width: 18px; height: 18px; fill: var(--gold); }
.reviews-summary-text { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.reviews-summary-text strong { color: var(--green); font-family: var(--font-display); font-size: 18px; font-weight: 900; }
.reviews-summary-divider { width: 1px; height: 24px; background: var(--gray-border); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; position: relative; z-index: 1; }
.review-card { background: var(--white); border: 1.5px solid var(--gray-border); border-radius: var(--r-lg); padding: 32px 28px; position: relative; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.review-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--lime), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.1); border-color: rgba(76,175,80,0.4); }
.review-card:hover::before { transform: scaleX(1); }
.review-quote-mark { position: absolute; top: 18px; right: 24px; font-family: var(--font-display); font-size: 80px; font-weight: 900; color: rgba(76,175,80,0.08); line-height: 1; pointer-events: none; user-select: none; }
.review-stars { display: inline-flex; gap: 2px; }
.review-stars svg { width: 18px; height: 18px; fill: var(--gold); }
.review-text { font-size: 15px; color: var(--ink-light); line-height: 1.7; flex: 1; margin: 0; position: relative; z-index: 1; }
.review-author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--gray-border); }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--lime), var(--green)); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-size: 18px; font-weight: 900; flex-shrink: 0; box-shadow: 0 4px 12px rgba(76,175,80,0.3); }
.review-author-info { flex: 1; min-width: 0; }
.review-author-info strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 800; margin-bottom: 2px; }
.review-author-info span { font-size: 12.5px; color: var(--ink-light); display: flex; align-items: center; gap: 4px; }
.review-author-info span svg { width: 12px; height: 12px; fill: var(--lime); }
.review-google-icon { width: 22px; height: 22px; flex-shrink: 0; }
.reviews-cta { text-align: center; margin-top: 40px; position: relative; z-index: 1; }
.reviews-cta p { font-size: 15px; color: var(--ink-light); margin-bottom: 18px; }

/* HIRING CTA */
.hiring-section { background: linear-gradient(135deg, var(--forest) 0%, var(--green) 100%); position: relative; overflow: hidden; }
.hiring-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(76,175,80,0.12) 0%, transparent 70%); pointer-events: none; }
.hiring-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hiring-content h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 900; color: var(--white); margin-bottom: 16px; }
.hiring-content p { font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.75; max-width: 640px; }
.hiring-perks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hiring-perk { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.hiring-perk svg { width: 14px; height: 14px; stroke: var(--lime-bright); fill: none; }
.hiring-cta { flex-shrink: 0; }

/* FAQ override (about page has numbered Q) */
.about-faq-section { background: var(--gray-light); }
.about-faq-section .faq-num { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--lime); flex-shrink: 0; line-height: 1; }

/* NEWSLETTER */
.newsletter-section { background: linear-gradient(160deg, var(--forest) 0%, #0d2218 100%); position: relative; overflow: hidden; }
.newsletter-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; }
.newsletter-inner { max-width: 580px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.newsletter-inner h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: var(--white); margin-bottom: 12px; }
.newsletter-inner p { font-size: 16px; color: rgba(255,255,255,0.65); margin-bottom: 28px; line-height: 1.7; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { flex: 1; padding: 14px 20px; border: 1.5px solid rgba(255,255,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.08); color: white; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.2s; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { border-color: var(--lime); background: rgba(255,255,255,0.12); }

/* CTA BANNER (about page mini variant) */
.cta-banner-mini { background: var(--gray-light); border-top: 1px solid var(--gray-border); padding: 56px 0; }
.cta-banner-mini .cta-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-banner-mini .cta-banner-text p { font-size: 20px; font-weight: 700; color: var(--ink); }
.cta-banner-mini .cta-banner-text span { font-size: 14px; color: var(--ink-light); }

/* RESPONSIVE */
@media (max-width: 1024px) {
	.story-grid { grid-template-columns: 1fr; gap: 48px; }
	.story-float-badge-exp { right: 16px; bottom: -16px; }
	.story-float-badge-customers { left: 16px; top: -16px; }
	.features-grid { grid-template-columns: 1fr 1fr; }
	.hiring-grid { grid-template-columns: 1fr; }
	.hiring-cta { justify-self: start; }
	.reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.hero { padding: 56px 0 48px; }
	.features-grid { grid-template-columns: 1fr; }
	.hero-stats { gap: 20px; }
	.stat-divider { display: none; }
	.newsletter-form { flex-direction: column; }
	.cta-banner-mini .cta-banner-inner { flex-direction: column; text-align: center; }
	.story-content { padding-right: 0; }
	.story-float-badge { padding: 14px 18px; min-width: 130px; }
	.story-float-badge strong { font-size: 28px; }
	.reviews-grid { grid-template-columns: 1fr; }
	.reviews-summary { padding: 14px 20px; gap: 14px; }
	.reviews-summary-divider { display: none; }
}
@media (max-width: 480px) {
	.hero-actions { flex-direction: column; align-items: stretch; }
	.hero-actions .btn { justify-content: center; }
}