/* ========================================
   web5ngay Design System
   Premium Dark Mode + Glassmorphism
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg-primary: #0a0e1a;
  --color-bg-secondary: #111827;
  --color-bg-card: rgba(26, 32, 53, 0.7);
  --color-bg-glass: rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.08);
  --color-text-primary: #f0f4ff;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-accent-blue: #3b82f6;
  --color-accent-blue-light: #60a5fa;
  --color-accent-purple: #8b5cf6;
  --color-accent-gold: #f59e0b;
  --color-accent-gold-light: #fbbf24;
  --color-accent-emerald: #10b981;
  --color-accent-rose: #f43f5e;
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-hero: linear-gradient(135deg, #0a0e1a 0%, #1a1040 50%, #0a0e1a 100%);
  --gradient-card: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(139,92,246,.05) 100%);
  --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --gradient-text: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f59e0b 100%);
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --border-accent: 1px solid rgba(59, 130, 246, 0.3);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-base: 1rem;
  --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem;
  --shadow-glow-blue: 0 0 30px rgba(59, 130, 246, 0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,.3);
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
  --container-max: 1200px; --container-narrow: 800px; --navbar-height: 72px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--color-bg-primary); color: var(--color-text-primary); line-height: 1.7; overflow-x: hidden; }
a { color: var(--color-accent-blue-light); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-gold-light); }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.container--narrow { max-width: var(--container-narrow); }
.gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section { padding: var(--space-4xl) 0; position: relative; }
.section-title { font-family: var(--font-display); font-size: var(--font-size-4xl); font-weight: 800; margin-bottom: var(--space-md); line-height: 1.2; }
.section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto var(--space-3xl); }
.text-center { text-align: center; }

/* Background Orbs */
.bg-orbs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.15; animation: orbFloat 20s ease-in-out infinite; }
.bg-orb--1 { width: 500px; height: 500px; background: var(--color-accent-blue); top: -10%; right: -10%; }
.bg-orb--2 { width: 400px; height: 400px; background: var(--color-accent-purple); bottom: 20%; left: -5%; animation-delay: -7s; }
.bg-orb--3 { width: 300px; height: 300px; background: var(--color-accent-gold); top: 50%; right: 20%; animation-delay: -14s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-50px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(.95)} }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); background: rgba(10,14,26,.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: var(--border-glass); z-index: 1000; transition: background var(--transition-base); }
.navbar.scrolled { background: rgba(10,14,26,.95); box-shadow: var(--shadow-md); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.navbar__logo { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text-primary); display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.navbar__logo:hover { color: var(--color-text-primary); }
.navbar__logo-icon { width: 36px; height: 36px; background: var(--gradient-primary); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); }
.navbar__nav { display: flex; align-items: center; gap: var(--space-xl); list-style: none; }
.navbar__link { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 500; letter-spacing: .02em; transition: color var(--transition-fast); position: relative; }
.navbar__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--gradient-primary); border-radius: var(--border-radius-full); transition: width var(--transition-base); }
.navbar__link:hover, .navbar__link.active { color: var(--color-text-primary); }
.navbar__link:hover::after, .navbar__link.active::after { width: 100%; }
.navbar__mobile-toggle { display: none; background: none; border: none; color: var(--color-text-primary); font-size: 24px; cursor: pointer; padding: var(--space-sm); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 14px 28px; font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--border-radius-md); border: none; cursor: pointer; transition: all var(--transition-base); text-decoration: none; letter-spacing: .02em; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); transition: left var(--transition-slow); }
.btn:hover::before { left: 100%; }
.btn--primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow-blue); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(59,130,246,.3); color: #fff; }
.btn--secondary { background: var(--color-bg-glass); color: var(--color-text-primary); border: var(--border-glass); backdrop-filter: blur(10px); }
.btn--secondary:hover { background: var(--color-bg-glass-hover); transform: translateY(-2px); color: var(--color-text-primary); }
.btn--gold { background: var(--gradient-gold); color: #fff; }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(245,158,11,.3); color: #fff; }
.btn--lg { padding: 18px 36px; font-size: var(--font-size-base); border-radius: var(--border-radius-lg); }
.btn--sm { padding: 10px 20px; font-size: var(--font-size-xs); }
.btn--full { width: 100%; }

/* Glass Card */
.glass-card { background: var(--color-bg-card); border: var(--border-glass); border-radius: var(--border-radius-lg); backdrop-filter: blur(10px); transition: all var(--transition-base); position: relative; overflow: hidden; }
.glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); }
.glass-card:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.2); box-shadow: var(--shadow-glow-blue); }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--navbar-height); background: var(--gradient-hero); position: relative; overflow: hidden; }
.hero__grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(59,130,246,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(59,130,246,.03) 1px,transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center,black 30%,transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center,black 30%,transparent 70%); }
.hero__content { position: relative; z-index: 1; max-width: 720px; }
.hero__badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 8px 16px; background: var(--color-bg-glass); border: var(--border-glass); border-radius: var(--border-radius-full); font-size: var(--font-size-sm); color: var(--color-accent-blue-light); margin-bottom: var(--space-lg); animation: fadeInUp .6s ease both; }
.hero__badge-dot { width: 8px; height: 8px; background: var(--color-accent-emerald); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.hero__title { font-family: var(--font-display); font-size: var(--font-size-6xl); font-weight: 800; line-height: 1.1; margin-bottom: var(--space-lg); animation: fadeInUp .6s ease .1s both; }
.hero__description { font-size: var(--font-size-xl); color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--space-2xl); animation: fadeInUp .6s ease .2s both; }
.hero__actions { display: flex; gap: var(--space-md); animation: fadeInUp .6s ease .3s both; }
.hero__stats { display: flex; gap: var(--space-3xl); margin-top: var(--space-3xl); animation: fadeInUp .6s ease .4s both; }
.hero__stat-number { font-family: var(--font-display); font-size: var(--font-size-4xl); font-weight: 800; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero__stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xs); }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* Services */
.services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
.service-card { padding: var(--space-xl); }
.service-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); border-radius: var(--border-radius-md); font-size: var(--font-size-2xl); margin-bottom: var(--space-lg); }
.service-card__title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-sm); }
.service-card__text { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.7; }

/* Blog Cards */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
.blog-card { cursor: pointer; }
.blog-card__image { width: 100%; height: 200px; object-fit: cover; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; background: var(--gradient-card); }
.blog-card__body { padding: var(--space-lg); }
.blog-card__category { display: inline-block; padding: 4px 12px; background: rgba(59,130,246,.15); color: var(--color-accent-blue-light); font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--border-radius-full); margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: .05em; }
.blog-card__title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__excerpt { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-md); }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.blog-card__read-more { color: var(--color-accent-blue-light); font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); transition: gap var(--transition-base); }
.blog-card:hover .blog-card__read-more { gap: var(--space-sm); }

/* Blog Filters */
.blog-filters { display: flex; gap: var(--space-sm); margin-bottom: var(--space-2xl); flex-wrap: wrap; justify-content: center; }
.blog-filter-btn { padding: 10px 20px; background: var(--color-bg-glass); border: var(--border-glass); border-radius: var(--border-radius-full); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); }
.blog-filter-btn:hover, .blog-filter-btn.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }

/* Blog Post */
.blog-post { padding-top: calc(var(--navbar-height) + var(--space-3xl)); }
.blog-post__header { text-align: center; margin-bottom: var(--space-3xl); }
.blog-post__category { display: inline-block; padding: 6px 16px; background: rgba(59,130,246,.15); color: var(--color-accent-blue-light); font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--border-radius-full); margin-bottom: var(--space-lg); text-transform: uppercase; letter-spacing: .05em; }
.blog-post__title { font-family: var(--font-display); font-size: var(--font-size-5xl); font-weight: 800; line-height: 1.2; margin-bottom: var(--space-lg); max-width: 800px; margin-left: auto; margin-right: auto; }
.blog-post__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.blog-post__meta-item { display: flex; align-items: center; gap: var(--space-xs); }
.blog-post__cover { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--border-radius-xl); margin-bottom: var(--space-3xl); }
.blog-post__content { max-width: var(--container-narrow); margin: 0 auto; font-size: var(--font-size-lg); line-height: 1.9; color: var(--color-text-secondary); }
.blog-post__content h2 { font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-text-primary); margin: var(--space-3xl) 0 var(--space-lg); }
.blog-post__content h3 { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 600; color: var(--color-text-primary); margin: var(--space-2xl) 0 var(--space-md); }
.blog-post__content p { margin-bottom: var(--space-lg); }
.blog-post__content ul, .blog-post__content ol { margin: var(--space-lg) 0; padding-left: var(--space-xl); }
.blog-post__content li { margin-bottom: var(--space-sm); }
.blog-post__content blockquote { border-left: 3px solid var(--color-accent-blue); padding: var(--space-lg); margin: var(--space-2xl) 0; background: var(--color-bg-glass); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; font-style: italic; color: var(--color-text-primary); }
.blog-post__content strong { color: var(--color-text-primary); font-weight: 600; }

/* CTA Box */
.cta-box { background: var(--gradient-card); border: var(--border-accent); border-radius: var(--border-radius-xl); padding: var(--space-2xl); text-align: center; margin: var(--space-3xl) 0; }
.cta-box__title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-sm); }
.cta-box__text { color: var(--color-text-secondary); margin-bottom: var(--space-lg); max-width: 500px; margin-left: auto; margin-right: auto; }

/* Landing Page */
.landing-hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--navbar-height); background: var(--gradient-hero); position: relative; }
.landing-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.landing-hero__title { font-family: var(--font-display); font-size: var(--font-size-5xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-lg); }
.landing-hero__text { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--space-2xl); line-height: 1.8; }

/* Lead Form */
.lead-form { background: var(--color-bg-card); border: var(--border-glass); border-radius: var(--border-radius-xl); padding: var(--space-2xl); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.lead-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); }
.lead-form__title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-xs); text-align: center; }
.lead-form__subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: center; margin-bottom: var(--space-lg); }
.form-group { margin-bottom: var(--space-md); }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.form-input { width: 100%; padding: 14px 16px; background: var(--color-bg-glass); border: var(--border-glass); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--font-size-base); transition: all var(--transition-fast); outline: none; }
.form-input:focus { border-color: var(--color-accent-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.form-input::placeholder { color: var(--color-text-muted); }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
select.form-input option { background: var(--color-bg-secondary); color: var(--color-text-primary); }
textarea.form-input { resize: vertical; min-height: 100px; }

/* Pain Points */
.pain-points { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); }
.pain-point { display: flex; gap: var(--space-md); padding: var(--space-lg); }
.pain-point__icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: rgba(244,63,94,.1); border-radius: var(--border-radius-md); font-size: var(--font-size-xl); }
.pain-point__icon--solution { background: rgba(16,185,129,.1); }
.pain-point__title { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-xs); }
.pain-point__text { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* Testimonials */
.testimonials__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
.testimonial-card { padding: var(--space-xl); }
.testimonial-card__stars { color: var(--color-accent-gold); font-size: var(--font-size-lg); margin-bottom: var(--space-md); letter-spacing: 2px; }
.testimonial-card__text { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.7; margin-bottom: var(--space-lg); font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-md); }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); }
.testimonial-card__name { font-weight: 600; font-size: var(--font-size-sm); }
.testimonial-card__role { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Footer */
.footer { border-top: var(--border-glass); padding: var(--space-3xl) 0 var(--space-2xl); background: var(--color-bg-secondary); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.footer__brand-text { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.7; margin-top: var(--space-md); max-width: 300px; }
.footer__heading { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-lg); color: var(--color-text-primary); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__links a { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.footer__links a:hover { color: var(--color-accent-blue-light); }
.footer__bottom { border-top: var(--border-glass); padding-top: var(--space-lg); display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.footer__socials { display: flex; gap: var(--space-md); }
.footer__social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-glass); border: var(--border-glass); border-radius: var(--border-radius-sm); color: var(--color-text-secondary); transition: all var(--transition-fast); font-size: 14px; }
.footer__social-link:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }

/* Success Message */
.success-message { display: none; text-align: center; padding: var(--space-2xl); }
.success-message.show { display: block; animation: fadeInUp .4s ease; }
.success-message__icon { font-size: 48px; margin-bottom: var(--space-md); }
.success-message__title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-sm); }
.success-message__text { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* Scroll Animations */
.reveal { opacity: 0; transform: translateY(40px); transition: all .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* Responsive */
@media (max-width: 1024px) {
  .services__grid, .blog-grid, .testimonials__grid { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: repeat(2,1fr); }
  .hero__title { font-size: var(--font-size-5xl); }
  .landing-hero__inner { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .section { padding: var(--space-3xl) 0; }
  .navbar__nav { display: none; position: fixed; top: var(--navbar-height); left: 0; right: 0; background: rgba(10,14,26,.98); backdrop-filter: blur(20px); flex-direction: column; padding: var(--space-xl); gap: var(--space-lg); border-bottom: var(--border-glass); }
  .navbar__nav.open { display: flex; }
  .navbar__mobile-toggle { display: block; }
  .hero__title { font-size: var(--font-size-4xl); }
  .hero__description { font-size: var(--font-size-base); }
  .hero__actions, .hero__stats { flex-direction: column; }
  .hero__stats { gap: var(--space-lg); }
  .services__grid, .blog-grid, .testimonials__grid, .pain-points { grid-template-columns: 1fr; }
  .section-title { font-size: var(--font-size-3xl); }
  .blog-post__title { font-size: var(--font-size-3xl); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
}