/* ============================================================================
   STEADGROW MARKETING WEBSITE - SHARED STYLES
   ============================================================================ */

/* ============================================================================
   1. CSS CUSTOM PROPERTIES (Brand System)
   ============================================================================ */

:root {
  /* Primary Colors */
  --color-primary: #2D5A27;
  --color-primary-light: #4A8B3F;
  --color-primary-dark: #1A3A18;

  /* Secondary Colors */
  --color-secondary: #8B6914;
  --color-secondary-light: #C4A035;

  /* Neutral Colors */
  --color-bg: #FAFAF5;
  --color-surface: #FFFFFF;
  --color-text: #1A1A18;
  --color-text-secondary: #5A5A52;
  --color-text-tertiary: #6B6B63;
  --color-border: #E0DED4;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Border Radius */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  /* Typography */
  --font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, 'Times New Roman', serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.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;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Breakpoints (mobile-first) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ============================================================================
   2. RESET & BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Lenis smooth scroll overrides */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-sm);
}

h5 {
  font-size: var(--font-size-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-sm);
}

h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

code {
  background-color: var(--color-border);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
}

/* Accessible focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   4. BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button (Filled Green) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Secondary Button (Outlined) */
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Accent Button (Gold) */
.btn-accent {
  background-color: var(--color-secondary);
  color: var(--color-surface);
  border-color: var(--color-secondary);
}

.btn-accent:hover:not(:disabled) {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Small Button Variant */
.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
}

/* Large Button Variant */
.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
}

/* Full Width Button */
.btn-block {
  width: 100%;
}

/* ============================================================================
   5. NAVIGATION BAR
   ============================================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

/* Homepage hero: frosted-glass navbar over the gradient canvas */
.navbar--transparent {
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.navbar--transparent.scrolled {
  background-color: var(--color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-md);
  border-bottom: none;
}

.navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.navbar-logo:hover {
  color: var(--color-primary-light);
}

.navbar-logo svg {
  width: 32px;
  height: 32px;
}

.navbar-menu {
  display: flex;
  list-style: none;
  gap: var(--space-xl);
  align-items: center;
}

.navbar-menu a {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}

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

.navbar-menu a.btn-primary {
  color: var(--color-surface);
}

.navbar-menu a.btn-primary:hover {
  color: var(--color-surface);
}

.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: var(--font-size-xl);
}

.navbar-hamburger.active + .navbar-menu {
  display: flex;
}

/* Mobile Hamburger Menu */
@media (max-width: 767px) {
  .navbar {
    padding: var(--space-sm) var(--space-lg);
  }

  .navbar-hamburger {
    display: flex;
  }

  .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .navbar-menu.active {
    display: flex;
  }

  .navbar-menu a {
    padding: 12px 0;
  }
}

/* ============================================================================
   6. FOOTER
   ============================================================================ */

.footer {
  background-color: var(--color-primary-dark);
  color: var(--color-surface);
  padding: var(--space-3xl) var(--space-lg);
  margin-top: auto;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer-section h3 {
  color: var(--color-surface);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: var(--space-sm);
}

.footer-section a {
  color: var(--color-surface);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.footer-section a:hover {
  opacity: 1;
  color: var(--color-secondary-light);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--color-secondary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

@media (max-width: 767px) {
  .footer {
    padding: var(--space-xl) var(--space-lg);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   7. HERO SECTION
   ============================================================================ */

.hero {
  padding: calc(var(--space-3xl) + 80px) var(--space-lg) var(--space-3xl);
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);
  text-align: center;
}

.hero-container {
  max-width: 1280px;
  margin: 0 auto;
}

.hero h1 {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.hero p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero {
    padding: calc(var(--space-2xl) + 80px) var(--space-lg) var(--space-2xl);
  }

  .hero h1 {
    font-size: var(--font-size-4xl);
  }

  .hero p {
    font-size: var(--font-size-base);
  }
}

/* ============================================================================
   8. FEATURE CARD
   ============================================================================ */

.feature-card {
  background-color: var(--color-surface);
  padding: var(--space-xl);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  text-align: center;
}

.feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-card-icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-bg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: var(--font-size-4xl);
}

.feature-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.feature-card p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ============================================================================
   9. BLOG CARD
   ============================================================================ */

.blog-card {
  background-color: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-base);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.blog-card-image {
  width: 100%;
  height: 200px;
  background-color: var(--color-border);
  object-fit: cover;
}

.blog-card-content {
  padding: var(--space-lg);
}

.blog-card-meta {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.blog-card h3 {
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.blog-card p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.blog-card a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all var(--transition-fast);
}

.blog-card a:hover {
  color: var(--color-primary-light);
  margin-right: -4px;
}

/* ============================================================================
   10. PRICING CARD
   ============================================================================ */

.pricing-card {
  background-color: var(--color-surface);
  padding: var(--space-xl);
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  text-align: center;
  transition: all var(--transition-base);
}

.pricing-card.featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.05);
}

.pricing-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.pricing-card-name {
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.pricing-card-price {
  font-size: var(--font-size-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.pricing-card-price .currency {
  font-size: var(--font-size-xl);
  vertical-align: super;
}

.pricing-card-period {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.pricing-card-features {
  list-style: none;
  margin: var(--space-lg) 0;
  text-align: left;
}

.pricing-card-features li {
  padding: var(--space-sm) 0;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pricing-card-features li:last-child {
  border-bottom: none;
}

.pricing-card-features li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.pricing-card-cta {
  margin-top: var(--space-lg);
}

@media (max-width: 767px) {
  .pricing-card.featured {
    transform: scale(1);
  }
}

/* ============================================================================
   11. FORM STYLES
   ============================================================================ */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-checkbox,
.form-radio {
  margin-right: var(--space-sm);
  cursor: pointer;
  accent-color: var(--color-primary);
}

.form-error {
  color: #DC2626;
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* ============================================================================
   12. EMAIL CAPTURE FORM
   ============================================================================ */

.email-form {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  justify-content: center;
}

.email-form input {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.email-form button {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .email-form {
    flex-direction: column;
  }

  .email-form input,
  .email-form button {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================================
   13. CALLOUT & HIGHLIGHT BOXES
   ============================================================================ */

.callout {
  padding: var(--space-lg);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-primary);
  background-color: rgba(45, 90, 39, 0.05);
}

.callout.info {
  border-color: var(--color-primary);
  background-color: rgba(45, 90, 39, 0.05);
}

.callout.success {
  border-color: #10B981;
  background-color: rgba(16, 185, 129, 0.05);
}

.callout.warning {
  border-color: #F59E0B;
  background-color: rgba(245, 158, 11, 0.05);
}

.callout.error {
  border-color: #DC2626;
  background-color: rgba(220, 38, 38, 0.05);
}

.callout h4 {
  margin-top: 0;
  color: var(--color-text);
}

.callout p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.highlight {
  background-color: rgba(196, 160, 53, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-weight: var(--weight-medium);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.sr-only--focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem 2rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-primary);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  z-index: 10000;
  text-decoration: none;
}

/* ============================================================================
   14. UTILITY CLASSES
   ============================================================================ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-3xl) var(--space-lg);
}

.section-alt {
  background-color: var(--color-bg);
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-accent {
  color: var(--color-secondary);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

/* ============================================================================
   15. ANIMATION CLASSES
   ============================================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-base) ease-in-out;
}

.slide-in-up {
  animation: slideInUp var(--transition-base) ease-in-out;
}

.slide-in-down {
  animation: slideInDown var(--transition-base) ease-in-out;
}

.slide-in-left {
  animation: slideInLeft var(--transition-base) ease-in-out;
}

.slide-in-right {
  animation: slideInRight var(--transition-base) ease-in-out;
}

.fade-in-on-scroll {
  opacity: 0;
  transition: opacity var(--transition-base) ease-in-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
}

/* GSAP scroll-reveal utility classes
   These are animated via GSAP in main.js — initial state set here for no-JS fallback */
.sg-reveal,
.sg-reveal-left,
.sg-reveal-right,
.sg-reveal-scale {
  /* GSAP handles opacity/transform — this ensures no flash of unstyled content */
}

/* When JS is disabled, make everything visible */
@media (scripting: none) {
  .sg-reveal,
  .sg-reveal-left,
  .sg-reveal-right,
  .sg-reveal-scale,
  .fade-in-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
   16. LAYOUT & GRID
   ============================================================================ */

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

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

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

/* ============================================================================
   17. RESPONSIVE TWEAKS
   ============================================================================ */

@media (max-width: 767px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
  }

  .section {
    padding: var(--space-2xl) var(--space-lg);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   18. HOMEPAGE BELOW-FOLD (moved from inline <style> to reduce HTML parse time)
   ============================================================================ */

    /* ═══════════════════════════════════════════════════════════
       CONTENT BLOCKS — no backgrounds, just spacing
       ═══════════════════════════════════════════════════════════ */

    .sg-block {
      max-width: 900px;
      margin: 0 auto;
      padding: 6rem 2rem;
      /* Skip rendering below-fold sections until near viewport —
         reduces initial layout work, speeds up FCP/LCP */
      content-visibility: auto;
      contain-intrinsic-size: auto 600px;
    }

    .sg-block--wide { max-width: 1100px; }
    .sg-block--narrow { max-width: 750px; }

    /* ── Section Label ────────────────────────────────────────── */
    .sg-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }

    .sg-label--dark { color: var(--color-text-tertiary); }
    .sg-label--light { color: rgba(255,255,255,0.6); }
    .sg-label--accent { color: var(--color-primary); }

    /* ── Headline (serif) ─────────────────────────────────────── */
    .sg-headline {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 3rem;
    }

    /* ── Divider line ─────────────────────────────────────────── */
    .sg-divider {
      width: 60px;
      height: 2px;
      background: var(--color-primary);
      margin: 3rem auto;
      opacity: 0.3;
      border-radius: 1px;
    }

    /* ═══════════════════════════════════════════════════════════
       PROBLEM SECTION
       ═══════════════════════════════════════════════════════════ */

    .sg-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .sg-card {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(24px);
      border-radius: 20px;
      padding: 2rem;
      border: 1px solid rgba(255,255,255,0.6);
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow:
        0 4px 16px rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.8);
    }

    .sg-card:hover {
      transform: translateY(-6px) scale(1.02) !important;
      box-shadow:
        0 20px 40px rgba(0,0,0,0.1),
        0 8px 16px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
      border-color: rgba(45,90,39,0.15);
    }

    .sg-card__icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }

    .sg-card h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: 0.6rem;
      color: var(--color-text);
    }

    .sg-card p {
      font-size: 0.92rem;
      color: var(--color-text-secondary);
      line-height: 1.65;
      margin: 0;
    }

    .sg-turnaround {
      text-align: center;
      margin-top: 3.5rem;
      opacity: 0;
    }

    .sg-turnaround p {
      font-family: var(--font-display);
      font-size: 1.4rem;
      color: var(--color-primary);
      font-style: italic;
    }

    /* ═══════════════════════════════════════════════════════════
       FEATURES — horizontal scroll
       ═══════════════════════════════════════════════════════════ */

    .sg-features__header {
      max-width: 900px;
      margin: 0 auto;
      padding: 6rem 2rem 3rem;
      text-align: center;
    }

    .sg-features__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 2rem 6rem;
    }

    .sg-fcard {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(24px);
      border-radius: 20px;
      padding: 2rem;
      border: 1px solid rgba(255,255,255,0.6);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      opacity: 0;
      transform: translateY(40px);
      box-shadow:
        0 4px 16px rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.8);
    }

    .sg-fcard:hover {
      transform: translateY(-6px) scale(1.02) !important;
      box-shadow:
        0 20px 40px rgba(0,0,0,0.1),
        0 8px 16px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
      border-color: rgba(45,90,39,0.15);
    }

    .sg-fcard__icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .sg-fcard__icon--green { background: rgba(45, 90, 39, 0.1); }
    .sg-fcard__icon--gold  { background: rgba(139, 105, 20, 0.1); }
    .sg-fcard__icon--blue  { background: rgba(93, 173, 226, 0.15); }
    .sg-fcard__icon--earth { background: rgba(139, 105, 20, 0.08); }

    .sg-fcard h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 400;
      margin-bottom: 0.75rem;
      color: var(--color-text);
    }

    .sg-fcard p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0; }

    .sg-fcard__detail {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(0,0,0,0.06);
      font-size: 0.82rem;
      color: var(--color-primary);
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    /* ═══════════════════════════════════════════════════════════
       TRUST / PROMISE — dark zone with counters
       ═══════════════════════════════════════════════════════════ */

    .sg-trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
    }

    .sg-trust-item {
      opacity: 0;
      transform: translateY(30px);
    }

    .sg-trust-item__num {
      font-family: var(--font-display);
      font-size: 3.5rem;
      color: var(--color-secondary-light);
      line-height: 1;
      margin-bottom: 1.2rem;
    }

    .sg-trust-item h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      margin-bottom: 0.75rem;
      color: rgba(255,255,255,0.92);
    }

    .sg-trust-item p {
      font-size: 0.92rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.7;
      margin: 0;
    }

    /* ═══════════════════════════════════════════════════════════
       QUOTE SECTION
       ═══════════════════════════════════════════════════════════ */

    .sg-quote {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 3vw, 2.2rem);
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255,255,255,0.88);
      margin-bottom: 2rem;
      font-style: italic;
      opacity: 0;
    }

    .sg-quote em {
      font-style: normal;
      color: var(--color-secondary-light);
    }

    .sg-attribution {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.65);
      opacity: 0;
    }

    .sg-attribution strong { color: rgba(255,255,255,0.7); }

    /* ═══════════════════════════════════════════════════════════
       CTA SECTION — bottom of the earth
       ═══════════════════════════════════════════════════════════ */

    .sg-cta__title {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 400;
      line-height: 1.2;
      color: rgba(255,255,255,0.95);
      margin-bottom: 1rem;
    }

    .sg-cta__subtitle {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin-bottom: 2.5rem;
    }

    .sg-cta__form {
      display: flex;
      gap: 0.75rem;
      max-width: 440px;
      margin: 0 auto 1.5rem;
    }

    .sg-cta__form input {
      flex: 1;
      padding: 0.9rem 1.2rem;
      border: 2px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      font-family: var(--font-family);
      font-size: 1rem;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(10px);
      color: white;
      transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    }

    .sg-cta__form input::placeholder { color: rgba(255,255,255,0.5); }

    .sg-cta__form input:focus {
      outline: none;
      border-color: var(--color-primary-light);
      background: rgba(255,255,255,0.08);
      box-shadow: 0 0 0 4px rgba(74,139,63,0.15);
    }

    .sg-cta__form button {
      padding: 0.9rem 2rem;
      background: var(--color-primary);
      color: white;
      border: none;
      border-radius: 12px;
      font-family: var(--font-family);
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      white-space: nowrap;
    }

    .sg-cta__form button:hover {
      background: var(--color-primary-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(74,139,63,0.3);
    }

    .sg-cta__social { font-size: 0.95rem; color: rgba(255,255,255,0.65); }
    .sg-cta__social a {
      color: var(--color-secondary-light);
      font-weight: 600;
      transition: color 0.2s;
    }
    .sg-cta__social a:hover { color: var(--color-secondary); }

    /* ── Below-fold responsive rules ──────────────────────────── */

    @media (max-width: 768px) {
      .sg-cta__form { flex-direction: column; }
      .sg-cta__form button { width: 100%; }
      .sg-cards { grid-template-columns: 1fr; }
      .sg-trust-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .sg-features__grid { grid-template-columns: 1fr; }
      .sg-features__grid .sg-fcard[style] { width: 100% !important; grid-column: auto !important; }
      .sg-block { padding: 5rem 1.5rem; }
    }

/* ============================================================================
   19. INTERIOR PAGE STYLES
   ============================================================================ */

/* ── Serif page headline — unifies homepage DM Serif with inner pages ── */
.page-headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--line-height-tight);
}

/* ── Section heading — serif treatment for interior h2s ── */
.section-headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-primary);
}

/* ── Interior page link (replaces inline styles) ── */
.content-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(45, 90, 39, 0.3);
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.content-link:hover {
  color: var(--color-primary-light);
  text-decoration-color: var(--color-primary-light);
}

/* ── Interior card with hover lift (consistent with homepage) ── */
.interior-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.interior-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(45, 90, 39, 0.15);
}

/* ── Alternating section tint for visual rhythm ── */
.section-tint {
  background-color: rgba(45, 90, 39, 0.02);
}

/* ── Blog grid — 2-column on desktop ── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Blog tag — with visible background ── */
.blog-tag-styled {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: rgba(45, 90, 39, 0.08);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
}
.blog-tag-styled--seasonal {
  background-color: rgba(139, 105, 20, 0.08);
  color: var(--color-secondary);
}
.blog-tag-styled--tips {
  background-color: rgba(74, 139, 63, 0.1);
  color: var(--color-primary-light);
}

/* ── Blog CTA block between posts ── */
.blog-cta {
  background: linear-gradient(135deg, rgba(45, 90, 39, 0.04) 0%, rgba(139, 105, 20, 0.03) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
}

/* ── Related articles grid ── */
.related-articles {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-xl);
  margin-top: var(--space-3xl);
}
.related-articles h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.related-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: all 0.3s ease;
  text-decoration: none;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(45, 90, 39, 0.15);
  text-decoration: none;
}
.related-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.related-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Attribution bump ── */
.sg-attribution {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
}
.sg-attribution strong {
  color: rgba(255, 255, 255, 0.85);
}

/* Prevent nav link underline on hover (nav has its own treatment) */
.navbar-menu a:hover,
.navbar-logo:hover,
.btn:hover,
.footer-section a:hover {
  text-decoration: none;
}

/* ============================================================================
   20. PRINT STYLES
   ============================================================================ */

@media print {
  .navbar,
  .footer {
    display: none;
  }

  body {
    color: #000;
    background-color: #fff;
  }
}


/* ============================================================================
   19. INSTAGRAM FOLLOW BUTTON — page-wide fireworks burst on hover
   ============================================================================ */

.sg-follow-ig {
  position: relative;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}
.sg-follow-ig:hover,
.sg-follow-ig:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 36px rgba(45, 90, 39, 0.4),
              0 4px 10px rgba(45, 90, 39, 0.25);
}
.sg-follow-ig .sg-sprout { display: none; } /* legacy — replaced by body layer */

/* Page-wide burst layer — pinned to viewport, ignores clipping */
.sg-burst-layer {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: visible;
}

/* Particle base — a shared transform box */
.sg-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 28px);
  height: var(--s, 28px);
  margin-left: calc(var(--s, 28px) / -2);
  margin-top:  calc(var(--s, 28px) / -2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(20, 40, 15, 0.4));
  transform: translate(0, 0) scale(0) rotate(0deg);
  animation: sg-particle-burst var(--dur, 1400ms) cubic-bezier(0.12, 0.85, 0.25, 1) var(--delay, 0ms) forwards;
  will-change: transform, opacity;
}

/* Leaf variants */
.sg-leaf--dark  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D5A27'><path d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3c.5.12 1 .2 1.5.2C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>"); }
.sg-leaf--mid   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A8B3F'><path d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3c.5.12 1 .2 1.5.2C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>"); }
.sg-leaf--light { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236FA865'><path d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3c.5.12 1 .2 1.5.2C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>"); }
.sg-leaf--lime  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8CC9B'><path d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3c.5.12 1 .2 1.5.2C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>"); }

/* Fruit variants */
.sg-fruit--tomato     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='14' r='8' fill='%23E74C3C'/><circle cx='9.5' cy='12' r='2' fill='%23F1948A' opacity='0.6'/><path d='M9 7 L12 4 L15 7 L13 8 L12 6 L11 8 Z' fill='%23388E3C'/></svg>"); }
.sg-fruit--strawberry { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6 Q5 11 5 16 Q5 22 12 22 Q19 22 19 16 Q19 11 12 6 Z' fill='%23E74C3C'/><circle cx='9' cy='14' r='0.9' fill='%23FFFACD'/><circle cx='14' cy='16' r='0.9' fill='%23FFFACD'/><circle cx='11' cy='18' r='0.9' fill='%23FFFACD'/><circle cx='15' cy='12' r='0.9' fill='%23FFFACD'/><path d='M7 6 L12 3 L17 6 L14 8 L12 6 L10 8 Z' fill='%23388E3C'/></svg>"); }
.sg-fruit--lemon      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='12' rx='7' ry='9' fill='%23F4D03F' transform='rotate(-30 12 12)'/><ellipse cx='9' cy='9' rx='2' ry='3' fill='%23FCE4A6' opacity='0.7' transform='rotate(-30 9 9)'/></svg>"); }
.sg-fruit--blueberry  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='%234A5A9C'/><circle cx='10' cy='10' r='2.5' fill='%238A97CC' opacity='0.7'/><path d='M10 5 L12 3 L14 5 Z' fill='%23388E3C'/></svg>"); }
.sg-fruit--apple      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6 C7 6 5 10 5 14 C5 19 9 22 12 22 C15 22 19 19 19 14 C19 10 17 6 12 6 Z' fill='%23E63946'/><circle cx='9' cy='11' r='2' fill='%23F19BA0' opacity='0.6'/><path d='M12 6 Q14 3 17 3 Q15 6 13 7 Z' fill='%23388E3C'/></svg>"); }
.sg-fruit--carrot     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 L7 9 L17 9 Z' fill='%23E67E22'/><path d='M7 9 Q9 4 12 7 Q15 4 17 9 Z' fill='%23388E3C'/><line x1='10' y1='12' x2='11' y2='12' stroke='%23B35A0C' stroke-width='0.5'/><line x1='12' y1='15' x2='13' y2='15' stroke='%23B35A0C' stroke-width='0.5'/></svg>"); }
.sg-fruit--grape      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='12' r='3' fill='%239B59B6'/><circle cx='14' cy='12' r='3' fill='%239B59B6'/><circle cx='11' cy='9' r='3' fill='%23A569BD'/><circle cx='11' cy='16' r='3' fill='%238E44AD'/><circle cx='17' cy='15' r='2.5' fill='%239B59B6'/><circle cx='5' cy='15' r='2.5' fill='%239B59B6'/><path d='M11 6 L13 3 L10 3 Z' fill='%23388E3C'/></svg>"); }
.sg-fruit--pumpkin    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='14' rx='8' ry='7' fill='%23E67E22'/><path d='M8 9 Q8 20 8 20' stroke='%23B35A0C' stroke-width='1' fill='none' opacity='0.5'/><path d='M16 9 Q16 20 16 20' stroke='%23B35A0C' stroke-width='1' fill='none' opacity='0.5'/><path d='M11 7 L12 4 L13 7 Z' fill='%23388E3C'/></svg>"); }

/* BANG — central shockwave flash */
.sg-shockwave {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top:  -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,140,0.9) 0%, rgba(180,220,140,0.4) 40%, rgba(180,220,140,0) 70%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  animation: sg-shockwave 700ms cubic-bezier(0.12, 0.7, 0.3, 1) forwards;
  mix-blend-mode: screen;
}
@keyframes sg-shockwave {
  0%   { opacity: 0.9; transform: scale(0); }
  60%  { opacity: 0.6; transform: scale(6); }
  100% { opacity: 0;   transform: scale(10); }
}

@keyframes sg-particle-burst {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0)   rotate(0deg); }
  8%   { opacity: 1;   transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) scale(1.3) rotate(calc(var(--r) * 0.25)); }
  60%  { opacity: 1;   transform: translate(calc(var(--dx) * 0.95), calc(var(--dy) * 0.95)) scale(1)   rotate(calc(var(--r) * 0.8)); }
  100% { opacity: 0;   transform: translate(var(--dx), calc(var(--dy) + 260px)) scale(0.75) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-particle, .sg-shockwave { animation: none; display: none; }
}