/* LoNeX Blog styles — keep this file in /blog/ only.
   Do NOT upload this over the main site's /index-style.css.
   Blog pages also load ../index-style.css for shared navbar, plans, contact, and footer.
   Deploy both files when publishing the blog. */

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Shared CTA buttons — self-contained so blog does not depend on main CSS load */
.navbar-web-btn {
  border: 2px solid #667eea !important;
  color: #667eea !important;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
  background-color: transparent !important;
}

.navbar-web-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.navbar-download-btn {
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  border: 0 !important;
}

.navbar-download-btn:hover,
.navbar-download-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.45);
  color: #fff !important;
  filter: brightness(1.05);
}

.blog-intro-back-btn.navbar-download-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
}

/* Footer — modern rebrand (Bootstrap 5–friendly) */
.site-footer,
.footer-dark-bg {
  background: linear-gradient(165deg, #0f172a 0%, #1e1b4b 38%, #0f172a 100%) !important;
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

.site-footer-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(99, 102, 241, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 80%, rgba(118, 75, 162, 0.28) 0%, transparent 50%);
  pointer-events: none;
}

.footer-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.footer-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  animation: footerFloat 10s ease-in-out infinite;
}

.footer-shape-1 {
  width: min(180px, 40vw);
  height: min(180px, 40vw);
  top: 12%;
  left: -4%;
  animation-delay: 0s;
}

.footer-shape-2 {
  width: min(220px, 45vw);
  height: min(220px, 45vw);
  top: 45%;
  right: -8%;
  animation-delay: 3s;
}

.footer-shape-3 {
  width: min(120px, 30vw);
  height: min(120px, 30vw);
  bottom: 8%;
  left: 35%;
  animation-delay: 6s;
}

@keyframes footerFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}

/* Brand */
.footer-logo-container {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.footer-logo-container:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(99, 102, 241, 0.25);
}

.footer-brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer-brand-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.footer-description {
  max-width: 28rem;
}

/* Newsletter */
.footer-newsletter {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.footer-newsletter:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.footer-newsletter-title {
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.footer-newsletter-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.footer-newsletter-fields .footer-input {
  border-radius: 0.65rem;
}

@media (min-width: 576px) {
  .footer-newsletter-fields .footer-input {
    border-radius: 0.65rem 0 0 0.65rem;
  }

  .footer-newsletter-fields .footer-subscribe-btn {
    border-radius: 0 0.65rem 0.65rem 0;
  }
}

.footer-input {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff !important;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.5rem 0.75rem;
}

.footer-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.875rem;
}

.footer-input:focus {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(250, 204, 21, 0.2);
  color: #fff !important;
}

.footer-subscribe-btn {
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  border: none;
  color: #0f172a !important;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.5rem 1rem;
}

.footer-subscribe-btn i {
  font-size: 0.8rem;
}

.footer-subscribe-btn:hover {
  filter: brightness(1.06);
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(250, 204, 21, 0.35);
}

.footer-subscribe-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(250, 204, 21, 0.45);
}

/* Nav columns */
.footer-section-title {
  color: #fff;
  position: relative;
  padding-bottom: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 3px;
  background: linear-gradient(90deg, #facc15, #f59e0b);
  border-radius: 999px;
}

.footer-nav-list li {
  margin-bottom: 0.35rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0.35rem 0;
  border-radius: 0.35rem;
  font-size: 0.94rem;
}

.footer-link:hover {
  color: #fde68a;
  transform: translateX(4px);
  text-decoration: none;
}

.footer-link:focus-visible {
  color: #fde68a;
  outline: 2px solid rgba(250, 204, 21, 0.5);
  outline-offset: 2px;
  text-decoration: none;
}

/* Contact rows */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.footer-contact-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
}

.footer-contact-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.footer-contact-icon--visit {
  background: linear-gradient(145deg, #fbbf24, #d97706);
}

.footer-contact-icon--email {
  background: linear-gradient(145deg, #60a5fa, #2563eb);
}

.footer-contact-icon--phone {
  background: linear-gradient(145deg, #4ade80, #16a34a);
}

.footer-contact-item:hover .footer-contact-icon {
  transform: scale(1.06);
}

.footer-contact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.15rem;
}

.footer-contact-value {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-contact-arrow {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-contact-item--visit:hover .footer-contact-arrow {
  color: #fbbf24;
  transform: translateX(4px);
}

.footer-contact-item--email:hover .footer-contact-arrow {
  color: #93c5fd;
  transform: translateX(4px);
}

.footer-contact-item--phone:hover .footer-contact-arrow {
  color: #86efac;
  transform: translateX(4px);
}

.footer-social-title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.footer-social-link {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
  text-decoration: none;
}

.footer-social-icon {
  font-size: 1.1rem;
  color: #fff;
}

/* Footer bottom */
.footer-divider {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.72);
}

.footer-company-name {
  color: #facc15;
  font-weight: 700;
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
}

.footer-legal-link:hover {
  color: #fde68a;
  text-decoration: none;
}

.footer-legal-link:focus-visible {
  outline: 2px solid rgba(250, 204, 21, 0.45);
  outline-offset: 2px;
}

.footer-legal-separator {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer-social-links {
    justify-content: center;
  }

  .footer-legal-links {
    justify-content: center !important;
  }

  .footer-contact-item {
    padding: 0.75rem 0.85rem;
  }

  .footer-newsletter {
    text-align: center;
  }

  .footer-newsletter-fields {
    text-align: stretch;
  }

  .footer-brand-name,
  .footer-brand-subtitle,
  .footer-description {
    text-align: center;
  }

  .footer-logo-container {
    margin: 0 auto;
  }

  .footer-brand-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-brand-row .ms-3 {
    margin-left: 0 !important;
    margin-top: 1rem;
  }

  .footer-nav-section {
    text-align: center;
  }

  .footer-section-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-link {
    justify-content: center;
  }

  .footer-contact-section {
    text-align: center;
  }

  .footer-contact-item {
    text-align: left;
  }

  .footer-contact-section .footer-contact-methods {
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    text-align: center;
  }

  .footer-copyright {
    text-align: center !important;
  }
}

.contact-section {
  margin-bottom: 4rem; 
}

.contact-logo {
  width: 100px;
  height: 100px;
}

/* ===== YNAB-style blog layout (LoNeX style) ===== */

/* Animation keyframes */
@keyframes blogFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blogWaveDraw {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

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

@keyframes blogIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-intro-back-btn,
  .blog-intro-panel,
  .blog-intro-icon-tile,
  .blog-intro-heading,
  .blog-intro-subtitle,
  .blog-intro-accent,
  .blog-intro .blog-intro-cta {
    animation: none;
  }
  .blog-intro-icon-tile i {
    animation: none;
  }
  .blog-card-grid > [class*="col-"] {
    opacity: 1;
    transform: none;
  }
  .blog-card-grid.blog-grid-visible > [class*="col-"] {
    animation: none;
  }
}

/* Blog index hero — self-contained so /blog/ works even if main CSS is outdated */

.blog-intro {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 45%, #e8ecfe 100%);
}

.blog-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 60% at 12% 0%, rgba(99, 102, 241, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 92% 85%, rgba(167, 139, 250, 0.16) 0%, transparent 48%);
}

.blog-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 65%, transparent 100%);
}

.video-hero-kicker {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.22);
}

.text-gradient-hero {
  background: linear-gradient(118deg, #4338ca 0%, #6366f1 32%, #7c3aed 55%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.blog-intro-back-btn {
  animation: blogFadeInUp 0.55s ease-out both;
}

.blog-intro-panel {
  animation: blogFadeInUp 0.6s ease-out 0.08s both;
}

.blog-intro-icon-tile {
  animation: blogFadeInUp 0.6s ease-out 0.12s both;
}

.blog-intro-icon-tile i {
  animation: blogIconPulse 2.5s ease-in-out 1s infinite;
}

.blog-intro-heading {
  animation: blogFadeInUp 0.6s ease-out 0.18s both;
}

.blog-intro-subtitle {
  animation: blogFadeInUp 0.6s ease-out 0.22s both;
}

.blog-intro-accent {
  animation: blogWaveDraw 0.75s ease-out 0.35s both;
}

.blog-intro .blog-intro-cta {
  animation: blogFadeInUp 0.6s ease-out 0.28s both;
}

.blog-intro-panel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 1.25rem;
  padding: clamp(1.35rem, 3.5vw, 2.15rem) clamp(1.15rem, 2.8vw, 1.85rem);
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

.blog-intro-icon-tile {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 52%, #4338ca 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.28);
}

.blog-intro-heading {
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.blog-intro-subtitle {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #64748b;
  max-width: 36rem;
}

.blog-intro-accent {
  height: 4px;
  width: 100%;
  max-width: 7.5rem;
  margin-top: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #f59e0b);
}

.blog-intro-cta {
  border-width: 1.5px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 991px) {
  .blog-intro .text-lg-end {
    text-align: center !important;
  }
}

/* Blog grid section */
.blog-grid-header {
  max-width: 36rem;
}

.blog-grid-heading {
  letter-spacing: -0.02em;
}

.blog-grid-section {
  position: relative;
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 45%, #eef2ff 100%);
}

.blog-grid-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 100%);
}

.blog-grid-section .container {
  position: relative;
  z-index: 1;
}

.blog-post-card-link {
  color: inherit;
  outline: none;
}

.blog-post-card-link:focus-visible .blog-grid-card {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 16px 40px rgba(15, 23, 42, 0.08);
}

.blog-post-card-link:focus-visible .read-more {
  color: #4338ca;
}

.blog-grid-card {
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  background: #fff;
  box-shadow:
    0 14px 40px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.blog-card-ratio {
  background: linear-gradient(145deg, #e0e7ff 0%, #f5f3ff 50%, #faf5ff 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.blog-card-ratio img {
  transition: transform 0.35s ease;
}

.blog-grid-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow:
    0 24px 52px rgba(79, 70, 229, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset !important;
}

.blog-grid-card:hover .blog-card-ratio img {
  transform: scale(1.04);
}

.blog-card-title {
  letter-spacing: -0.02em;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.blog-grid-card:hover .blog-card-title {
  color: #4338ca !important;
}

.blog-card-meta {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.blog-card-meta-sep {
  margin: 0 0.4rem;
  opacity: 0.55;
}

/* Card staggered entrance (when grid is in view) */
.blog-card-grid > [class*="col-"] {
  opacity: 0;
  transform: translateY(28px);
}

.blog-card-grid.blog-grid-visible > [class*="col-"] {
  animation: blogCardIn 0.6s ease-out forwards;
}

.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(1) { animation-delay: 0.06s; }
.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(2) { animation-delay: 0.12s; }
.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(3) { animation-delay: 0.18s; }
.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(4) { animation-delay: 0.24s; }
.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(5) { animation-delay: 0.3s; }
.blog-card-grid.blog-grid-visible > [class*="col-"]:nth-child(6) { animation-delay: 0.36s; }

.blog-card-img-placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.5rem;
}

.blog-card-img-placeholder i {
  transition: transform 0.35s ease;
}

.blog-card-grid .blog-grid-card:hover .blog-card-img-placeholder i {
  transform: scale(1.08);
}

.blog-card-img-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.blog-card-img-2 {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.blog-card-img-3 {
  background: linear-gradient(135deg, #f5b942 0%, #e9a20a 100%);
}

.blog-card-img-4 {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.blog-card-img-5 {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.blog-post {
  border: none;
  border-radius: 12px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-post:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

.blog-post .card-title {
  color: var(--text-dark, #1a2236);
}

.blog-post .date {
  color: #6c757d;
  font-size: 0.875rem;
}

.blog-post .card-text {
  line-height: 1.6;
  color: #333;
}

.read-more {
  color: #4f46e5;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.blog-post-card-link:hover .read-more,
.blog-grid-card:hover .read-more {
  color: #4338ca;
}

.read-more i {
  transition: transform 0.25s ease;
}

.blog-post-card-link:hover .read-more i,
.blog-post-card-link:focus-visible .read-more i,
.blog-grid-card:hover .read-more i {
  transform: translateX(3px);
}

.read-more:hover {
  color: #4338ca;
}

.card {
  border: none !important;
}

/* —— Single blog article pages (e.g. invoice-vs-receipt.html) —— */
.blog-article-page {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 38%, #eef2ff 100%);
}

.blog-article-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.038) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 62%, transparent 100%);
}

.blog-article-page > .container {
  position: relative;
  z-index: 1;
}

.blog-article-hero {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(145deg, #e2e8f0 0%, #f1f5f9 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.85) inset;
}

.blog-article-hero-img {
  display: block;
  width: 100%;
  height: clamp(220px, 42vw, 380px);
  object-fit: cover;
}

.blog-article-back-btn {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-article-back-btn:hover {
  background: #fff;
  color: #4f46e5;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.blog-article-back-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 8px 24px rgba(15, 23, 42, 0.12);
}

.blog-article-meta-sep {
  margin: 0 0.45rem;
  opacity: 0.55;
}

.blog-article-title {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.blog-article-content {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-article-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: #0f172a;
  margin-top: 2.25rem;
  margin-bottom: 0.65rem;
  line-height: 1.35;
  scroll-margin-top: 5.5rem;
}

.blog-article-content h2:first-of-type {
  margin-top: 0;
}

.blog-article-content p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 0;
  text-align: justify;
  text-justify: inter-word;
}

.blog-article-content p + p {
  margin-top: 1rem;
}

.blog-article-content figure.blog-article-figure {
  margin: 1.25rem 0 1.5rem;
}

.blog-article-content .blog-article-inline-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.blog-app-callout {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.blog-app-callout-kicker {
  color: #6366f1;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}

.blog-app-callout-text {
  font-size: 1.02rem;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 576px) {
  .blog-article-back-btn {
    left: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .blog-article-hero-img {
    height: clamp(200px, 52vw, 280px);
  }
}

/* —— Article discussion forum (invoice-vs-receipt, etc.) —— */
.blog-discussion-section {
  position: relative;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
}

.blog-discussion-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.034) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
}

.blog-discussion-section > .container {
  position: relative;
  z-index: 1;
}

.discussion-forum-shell {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.discussion-forum-shell:hover {
  border-color: rgba(99, 102, 241, 0.22);
  box-shadow:
    0 26px 56px rgba(79, 70, 229, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.discussion-forum-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 42%, #764ba2 100%);
}

.discussion-forum-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 55%);
  pointer-events: none;
}

.discussion-forum-title,
.discussion-forum-lead {
  position: relative;
  z-index: 1;
}

.discussion-forum-lead {
  max-width: 32rem;
  opacity: 0.95;
  line-height: 1.55;
}

.discussion-forum-icon-wrap {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 1.25rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
}

.discussion-forum-body {
  background: #fff;
}

.discussion-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.discussion-form-input,
.discussion-form-textarea {
  border-radius: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.discussion-form-input:focus,
.discussion-form-textarea:focus {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.discussion-form-textarea {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.6;
}

.discussion-form-input::placeholder,
.discussion-form-textarea::placeholder {
  color: #94a3b8;
}

.discussion-forum-hint {
  max-width: 20rem;
  line-height: 1.45;
}

.discussion-forum-submit-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #764ba2 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.discussion-forum-submit-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.38) !important;
  color: #fff !important;
}

.discussion-forum-submit-btn:active {
  transform: translateY(0);
}

.discussion-forum-submit-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 8px 20px rgba(79, 70, 229, 0.25);
}

.discussion-replies-title {
  letter-spacing: 0.02em;
}

.discussion-post {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.discussion-post:hover {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.discussion-post--empty {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: none;
}

.discussion-post--empty:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.35);
}

.discussion-post-message {
  line-height: 1.6;
  word-break: break-word;
}

@media (max-width: 576px) {
  .discussion-forum-hint {
    max-width: none;
    text-align: center;
  }

  .discussion-forum-submit-btn {
    width: 100%;
  }
}