0855e3d77b
- All 11 page templates rewritten for light theme - index.astro: 8 sections (hero, stats yellow band, problem cards, services mega-grid, black pull-quote, blog preview, yellow CTA) - about.astro: story + values (4 dark-icon cards) + process 4-step - contact.astro: 4 channel picker cards + 8-field form (added budget field) + 3-step 'what happens next' + pre-submit FAQ + yellow final CTA - faq.astro: dynamic category rendering from content/faq collection (5 categories, 20 Q&A) + tag cloud + 3 channel cards - portfolio.astro: industry filter bar (sticky) + 9 items with new schema (industry, what_we_did, result fields) + 'ดีลที่เราเลือก' section - services/index.astro: decision table (6 rows, scannable in 30s) + 3 pricing tiers (Starter/Business/Enterprise) + add-on chips - services/[slug].astro: 4 service types with light hero + pricing + tech options + AI features + 6-FAQ per service - blog/index.astro: featured + 4-card grid from content collection - blog/[slug].astro: 2-column with sidebar (about, contact, related) - privacy.astro + terms.astro: legal content, light theme - All form posts go to setTimeout success (placeholder for backend wire)
656 lines
20 KiB
Plaintext
656 lines
20 KiB
Plaintext
---
|
||
import Base from '../layouts/Base.astro';
|
||
import Navigation from '../components/Navigation.astro';
|
||
import Footer from '../components/Footer.astro';
|
||
import Hero from '../components/Hero.astro';
|
||
import { getCollection } from 'astro:content';
|
||
import { render } from 'astro:content';
|
||
import ServiceCard from '../components/ServiceCard.astro';
|
||
|
||
const pages = await getCollection('pages');
|
||
const home = pages.find(p => p.slug === 'home');
|
||
const { Content } = home ? await render(home) : { Content: null };
|
||
|
||
const services = await getCollection('services');
|
||
const blogPosts = await getCollection('blog');
|
||
const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||
|
||
// 4 mega-services (use existing service collection filtered)
|
||
const allServices = services.slice(0, 4);
|
||
const serviceImages: Record<string, string> = {
|
||
'automation': '/images/services/automation.jpg',
|
||
'ai-consult': '/images/services/ai-consult.jpg',
|
||
'marketing': '/images/services/marketing.jpg',
|
||
'webdev': '/images/services/webdev.jpg',
|
||
};
|
||
---
|
||
|
||
<Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||
<Navigation />
|
||
|
||
<Hero
|
||
badge={home?.data.badge}
|
||
title={home?.data.title}
|
||
subtitle={home?.data.subtitle}
|
||
/>
|
||
|
||
<!-- STATS SECTION — yellow band -->
|
||
<section class="section section-stats">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<span class="stat-number">50+</span>
|
||
<span class="stat-label">โปรเจกต์สำเร็จ</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">40+</span>
|
||
<span class="stat-label">ลูกค้าที่ไว้วางใจ</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">5+</span>
|
||
<span class="stat-label">ปีประสบการณ์</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">24/7</span>
|
||
<span class="stat-label">ให้บริการ</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROBLEM SECTION — light, 3 cards -->
|
||
<section class="section section-soft">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">ปัญหาที่ SME ไทยเจอซ้ำทุกวัน</span>
|
||
<h2 class="section-title">
|
||
คุณกำลังเจอ <span class="highlight">แบบนี้อยู่</span> ใช่ไหม?
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="problem-grid">
|
||
<div class="problem-card">
|
||
<div class="problem-icon">😩</div>
|
||
<h3 class="problem-title">ลูกค้าทัก LINE เข้ามา แต่ตอบไม่ทัน</h3>
|
||
<p class="problem-desc">ทีมเซลล์ 1–2 คน ตอบแชตไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น</p>
|
||
<span class="problem-result">→ ยอดหายก่อนที่คุณจะเห็น</span>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">📉</div>
|
||
<h3 class="problem-title">ลงโฆษณา แต่ยอดขายไม่ขยับ</h3>
|
||
<p class="problem-desc">ไม่มีระบบ Lead ไม่มี Funnel ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น</p>
|
||
<span class="problem-result">→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ</span>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">🌐</div>
|
||
<h3 class="problem-title">เว็บไซต์มีอยู่ แต่ไม่มีใครเจอใน Google</h3>
|
||
<p class="problem-desc">อันดับหน้า 5 ไม่มีใครเปิด ขณะที่คู่แข่งติดหน้าแรกจาก SEO อย่างเดียว</p>
|
||
<span class="problem-result">→ เสียเงินฟรีทุกเดือน</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="problem-closing">
|
||
<span class="highlight">ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว</span> — ดูว่าเราทำยังไง
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SERVICES SECTION — 4 mega cards on white -->
|
||
<section class="section services-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">บริการของเรา</span>
|
||
<h2 class="section-title">
|
||
ครบจบในที่เดียว — <span class="highlight">โซลูชัน AI สำหรับธุรกิจไทย</span>
|
||
</h2>
|
||
<p class="section-desc">เลือกแค่ที่คุณต้องการ หรือให้เราวางแผนทั้งระบบให้ก็ได้</p>
|
||
</div>
|
||
|
||
<div class="services-mega-grid">
|
||
{allServices.map(s => (
|
||
<a href={`/services/${s.id}`} class="mega-card">
|
||
<span class="mega-tag">{s.data.badge}</span>
|
||
<h3 class="mega-title">{s.data.title}</h3>
|
||
<p class="mega-subtitle">{s.data.subtitle}</p>
|
||
<div class="mega-objective">
|
||
<span class="objective-label">เป้าหมาย:</span>
|
||
<span class="objective-value">{s.data.objective}</span>
|
||
</div>
|
||
<span class="mega-cta">ดูรายละเอียด →</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
<div class="section-cta">
|
||
<a href="/services" class="btn btn-dark btn-lg">ดูบริการทั้งหมด →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PULL QUOTE — black section, oversized white text -->
|
||
<section class="section section-dark-quote">
|
||
<div class="container">
|
||
<blockquote class="pull-quote">
|
||
<p class="quote-text">
|
||
"เราไม่ได้ขายเว็บไซต์ — เราสร้างระบบที่<span class="highlight">ทำเงินให้ธุรกิจคุณ</span>"
|
||
</p>
|
||
<cite class="quote-author">— มอร์มินิมอร์, ปรัชญาการทำงาน</cite>
|
||
</blockquote>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PORTFOLIO PREVIEW — 3 latest on soft -->
|
||
<section class="section section-soft">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">ผลงานจริง · ไม่ใช่ Mockup</span>
|
||
<h2 class="section-title">
|
||
ลูกค้าจริง <span class="highlight">ผลลัพธ์จริง</span>
|
||
</h2>
|
||
<p class="section-desc">9 โปรเจกต์ที่เราภาคภูมิใจ — ตั้งแต่ร้านค้าออนไลน์ ไปจนถึงโรงงานฉีดพลาสติก</p>
|
||
</div>
|
||
|
||
<div class="blog-editorial">
|
||
{sortedPosts[0] && (
|
||
<a href={`/blog/${sortedPosts[0].slug}`} class="blog-featured">
|
||
<div class="blog-image">
|
||
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="lazy" />
|
||
<span class="blog-badge">บทความล่าสุด</span>
|
||
</div>
|
||
<div class="blog-content">
|
||
<span class="blog-category">{sortedPosts[0].data.category}</span>
|
||
<h3 class="blog-title">{sortedPosts[0].data.title}</h3>
|
||
<p class="blog-excerpt">{sortedPosts[0].data.excerpt}</p>
|
||
<span class="read-more">อ่านต่อ →</span>
|
||
</div>
|
||
</a>
|
||
)}
|
||
|
||
<div class="blog-sidebar">
|
||
{sortedPosts.slice(1, 4).map((post) => (
|
||
<a href={`/blog/${post.slug}`} class="blog-card-mini">
|
||
<div class="blog-card-image">
|
||
<img src={post.data.image} alt={post.data.title} loading="lazy" />
|
||
</div>
|
||
<div class="blog-card-content">
|
||
<span class="blog-category-small">{post.data.category}</span>
|
||
<h4 class="blog-title-small">{post.data.title}</h4>
|
||
<span class="blog-date-small">
|
||
{new Date(post.data.date).toLocaleDateString('th-TH', { month: 'short', day: 'numeric' })}
|
||
</span>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-cta">
|
||
<a href="/blog" class="btn btn-dark btn-lg">บทความทั้งหมด →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL CTA — yellow section -->
|
||
<section class="section section-yellow cta-section">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2 class="cta-title">พร้อมเปลี่ยนธุรกิจของคุณ?</h2>
|
||
<p class="cta-desc">ปรึกษาฟรี 30 นาที — เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน</p>
|
||
<div class="cta-actions">
|
||
<a href="/contact" class="btn btn-dark btn-lg">
|
||
นัดคุย 30 นาที
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">
|
||
ทัก LINE: @moreminimore
|
||
</a>
|
||
</div>
|
||
<p class="cta-reassurance">ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ ว่าทำได้หรือทำไม่ได้</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</Base>
|
||
|
||
<style>
|
||
/* ============================================
|
||
STATS — yellow band
|
||
============================================ */
|
||
.section-stats {
|
||
background: var(--color-primary);
|
||
padding: 60px 0;
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 32px;
|
||
}
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
.stat-number {
|
||
display: block;
|
||
font-family: var(--font-display);
|
||
font-size: clamp(48px, 7vw, 80px);
|
||
font-weight: 900;
|
||
color: var(--color-black);
|
||
line-height: 1;
|
||
}
|
||
.stat-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.7);
|
||
margin-top: 8px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ============================================
|
||
SECTION HEADER (light)
|
||
============================================ */
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
.section-badge {
|
||
display: inline-block;
|
||
background: var(--color-primary);
|
||
color: var(--color-black);
|
||
padding: 8px 20px;
|
||
border-radius: var(--radius-full);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(28px, 4vw, 44px);
|
||
font-weight: 900;
|
||
line-height: 1.15;
|
||
color: var(--color-black);
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title .highlight,
|
||
.section-desc .highlight,
|
||
.quote-text .highlight,
|
||
.problem-closing .highlight {
|
||
color: var(--color-primary-dark);
|
||
}
|
||
.section-soft .section-title .highlight {
|
||
color: var(--color-primary-dark);
|
||
}
|
||
.section-desc {
|
||
font-size: 17px;
|
||
color: var(--color-gray-600);
|
||
line-height: 1.6;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.section-cta {
|
||
text-align: center;
|
||
margin-top: 48px;
|
||
}
|
||
|
||
/* ============================================
|
||
PROBLEM CARDS
|
||
============================================ */
|
||
.section-soft { background: var(--color-bg-alt); }
|
||
.problem-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.problem-card {
|
||
background: var(--color-white);
|
||
border: 1px solid var(--color-gray-200);
|
||
border-radius: var(--radius-xl);
|
||
padding: 32px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.problem-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
border-color: var(--color-primary);
|
||
}
|
||
.problem-icon { font-size: 48px; margin-bottom: 16px; }
|
||
.problem-title {
|
||
font-family: var(--font-display);
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: var(--color-black);
|
||
margin-bottom: 12px;
|
||
}
|
||
.problem-desc {
|
||
font-size: 15px;
|
||
color: var(--color-gray-600);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
.problem-result {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--color-primary-dark);
|
||
}
|
||
.problem-closing {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
font-size: 18px;
|
||
color: var(--color-gray-700);
|
||
}
|
||
|
||
/* ============================================
|
||
SERVICES MEGA GRID
|
||
============================================ */
|
||
.services-mega-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.mega-card {
|
||
display: block;
|
||
background: var(--color-white);
|
||
border: 2px solid var(--color-gray-200);
|
||
border-radius: var(--radius-xl);
|
||
padding: 32px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
.mega-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--color-primary);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.4s var(--ease-out-expo);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
}
|
||
.mega-card:hover::before { transform: scaleX(1); }
|
||
.mega-card:hover {
|
||
border-color: var(--color-primary);
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.mega-tag {
|
||
display: inline-block;
|
||
background: var(--color-primary);
|
||
color: var(--color-black);
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.mega-title {
|
||
font-family: var(--font-display);
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: var(--color-black);
|
||
margin-bottom: 8px;
|
||
}
|
||
.mega-subtitle {
|
||
font-size: 15px;
|
||
color: var(--color-gray-600);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
.mega-objective {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: var(--color-bg-alt);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: 16px;
|
||
}
|
||
.objective-label {
|
||
font-size: 12px;
|
||
color: var(--color-gray-500);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
.objective-value {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--color-black);
|
||
}
|
||
.mega-cta {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--color-black);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
.mega-card:hover .mega-cta {
|
||
color: var(--color-primary-dark);
|
||
}
|
||
|
||
/* ============================================
|
||
PULL QUOTE (dark band — only dark section on home)
|
||
============================================ */
|
||
.section-dark-quote {
|
||
background: var(--color-black);
|
||
padding: 100px 0;
|
||
}
|
||
.section-dark-quote .pull-quote {
|
||
text-align: center;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
.quote-text {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(28px, 4vw, 48px);
|
||
font-weight: 800;
|
||
line-height: 1.3;
|
||
color: var(--color-white);
|
||
margin-bottom: 24px;
|
||
}
|
||
.quote-text .highlight {
|
||
color: var(--color-primary);
|
||
}
|
||
.quote-author {
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: var(--color-gray-400);
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
/* ============================================
|
||
BLOG EDITORIAL PREVIEW
|
||
============================================ */
|
||
.blog-editorial {
|
||
display: grid;
|
||
grid-template-columns: 1.5fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
.blog-featured {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--color-white);
|
||
border: 1px solid var(--color-gray-200);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.blog-featured:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
border-color: var(--color-primary);
|
||
}
|
||
.blog-featured .blog-image {
|
||
position: relative;
|
||
aspect-ratio: 16/10;
|
||
overflow: hidden;
|
||
}
|
||
.blog-featured .blog-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.blog-badge {
|
||
position: absolute;
|
||
top: 16px;
|
||
left: 16px;
|
||
background: var(--color-primary);
|
||
color: var(--color-black);
|
||
padding: 6px 14px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
}
|
||
.blog-featured .blog-content {
|
||
padding: 32px;
|
||
}
|
||
.blog-category {
|
||
display: inline-block;
|
||
background: var(--color-bg-soft);
|
||
color: var(--color-gray-600);
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.blog-title {
|
||
font-family: var(--font-display);
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: var(--color-black);
|
||
margin-bottom: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
.blog-excerpt {
|
||
font-size: 14px;
|
||
color: var(--color-gray-600);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
.read-more {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--color-black);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
.blog-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.blog-card-mini {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 12px;
|
||
background: var(--color-white);
|
||
border: 1px solid var(--color-gray-200);
|
||
border-radius: var(--radius-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.blog-card-mini:hover {
|
||
transform: translateX(4px);
|
||
border-color: var(--color-primary);
|
||
}
|
||
.blog-card-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
flex-shrink: 0;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background: var(--color-bg-soft);
|
||
}
|
||
.blog-card-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.blog-card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.blog-category-small {
|
||
font-size: 10px;
|
||
color: var(--color-gray-500);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-weight: 700;
|
||
}
|
||
.blog-title-small {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--color-black);
|
||
line-height: 1.3;
|
||
margin: 4px 0;
|
||
}
|
||
.blog-date-small {
|
||
font-size: 11px;
|
||
color: var(--color-gray-500);
|
||
}
|
||
|
||
/* ============================================
|
||
FINAL CTA (yellow)
|
||
============================================ */
|
||
.section-yellow { background: var(--color-primary); }
|
||
.cta-section .cta-content {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
.cta-section .cta-title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(28px, 4vw, 48px);
|
||
font-weight: 900;
|
||
color: var(--color-black);
|
||
margin-bottom: 16px;
|
||
}
|
||
.cta-section .cta-desc {
|
||
font-size: 18px;
|
||
color: rgba(0, 0, 0, 0.7);
|
||
margin-bottom: 32px;
|
||
line-height: 1.6;
|
||
}
|
||
.cta-section .cta-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 24px;
|
||
}
|
||
.cta-section .cta-reassurance {
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* ============================================
|
||
RESPONSIVE
|
||
============================================ */
|
||
@media (max-width: 1024px) {
|
||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.problem-grid { grid-template-columns: 1fr; }
|
||
.services-mega-grid { grid-template-columns: 1fr; }
|
||
.blog-editorial { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
|
||
.cta-actions { flex-direction: column; }
|
||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||
}
|
||
</style>
|