/*
 Theme Name:   NeuRank Theme
 Theme URI:    https://neurank.de
 Description:  Hello Elementor Child — NeuRank Brandbook v7 "Professional Impact"
 Author:       NeuRank
 Author URI:   https://neurank.de
 Template:     hello-elementor
 Version:      2.0.0
 Text Domain:  neurank
*/

/* ==========================================================================
   FONTS — Local (DSGVO-konform) — Brandbook v7
   ========================================================================== */

/* DM Sans — Body/UI */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/wp-content/fonts/dm-sans/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('/wp-content/fonts/dm-sans/dm-sans-v17-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/wp-content/fonts/dm-sans/dm-sans-v17-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/wp-content/fonts/dm-sans/dm-sans-v17-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/wp-content/fonts/dm-sans/dm-sans-v17-latin_latin-ext-700.woff2') format('woff2'); }

/* Source Serif 4 — Headlines */
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap; src:url('/wp-content/fonts/source-serif-4/source-serif-4-v14-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap; src:url('/wp-content/fonts/source-serif-4/source-serif-4-v14-latin_latin-ext-italic.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:url('/wp-content/fonts/source-serif-4/source-serif-4-v14-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap; src:url('/wp-content/fonts/source-serif-4/source-serif-4-v14-latin_latin-ext-700.woff2') format('woff2'); }

/* JetBrains Mono — Code/Labels */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/wp-content/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/wp-content/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('/wp-content/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-600.woff2') format('woff2'); }

/* ==========================================================================
   CSS CUSTOM PROPERTIES — Brandbook v7 "Professional Impact"
   ========================================================================== */

:root {
  /* Light base (default) */
  --nr-white: #FFFFFF;
  --nr-bg: #F8F7F4;
  --nr-bg-warm: #F2F0EB;
  --nr-bg-card: #FFFFFF;

  /* Ink — warm neutrals */
  --nr-ink: #1A1D23;
  --nr-ink-80: #333840;
  --nr-ink-60: #5A5F69;
  --nr-ink-40: #8A8F99;
  --nr-ink-20: #C2C5CC;
  --nr-ink-10: #E4E5E9;
  --nr-ink-05: #F0F0F3;

  /* Brand — Growth Green */
  --nr-brand: #00A65A;
  --nr-brand-dark: #008A4A;
  --nr-brand-light: #E6F7EE;
  --nr-brand-mid: rgba(0,166,90,0.12);

  /* Dark sections */
  --nr-dark: #1A1D23;
  --nr-dark-card: #22262E;
  --nr-dark-border: #2E3340;
  --nr-dark-text: #E8E9EC;
  --nr-dark-muted: #8A8F99;

  /* Semantic */
  --nr-success: #00A65A;
  --nr-warning: #E5930B;
  --nr-error: #D93B3B;
  --nr-info: #3B7DD9;

  /* Typography */
  --nr-sans: 'DM Sans', system-ui, sans-serif;
  --nr-serif: 'Source Serif 4', Georgia, serif;
  --nr-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --nr-r1: 4px;
  --nr-r2: 8px;
  --nr-r3: 12px;
  --nr-r-full: 9999px;

  /* Shadows */
  --nr-shadow-xs: 0 1px 2px rgba(26,29,35,0.04);
  --nr-shadow-sm: 0 1px 4px rgba(26,29,35,0.06);
  --nr-shadow-md: 0 4px 16px rgba(26,29,35,0.08);
  --nr-shadow-lg: 0 12px 40px rgba(26,29,35,0.10);

  /* Layout */
  --nr-max-width: 1280px;
}

/* ==========================================================================
   BASE — Light theme default
   ========================================================================== */

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

body {
  background-color: var(--nr-bg);
  color: var(--nr-ink);
  font-family: var(--nr-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY — v7
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--nr-serif);
  color: var(--nr-ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 0;
}

h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
h4 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; }
h5 { font-size: 20px; font-weight: 600; font-family: var(--nr-sans); }

h6 {
  font-family: var(--nr-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

p { color: var(--nr-ink-60); margin-bottom: 1.5em; font-size: 17px; line-height: 1.65; }

a { color: var(--nr-brand); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--nr-brand-dark); }

/* ==========================================================================
   DARK SECTIONS
   ========================================================================== */

.nr-dark { background: var(--nr-dark); color: var(--nr-dark-text); }
.nr-dark h1, .nr-dark h2, .nr-dark h3, .nr-dark h4, .nr-dark h5 { color: var(--nr-dark-text); }
.nr-dark p { color: var(--nr-dark-muted); }
.nr-dark a { color: var(--nr-brand); }
.nr-dark a:hover { color: #33b87b; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.nr-container { max-width: var(--nr-max-width); margin: 0 auto; padding: 0 32px; }
.nr-section { padding: 96px 0; }
@media (max-width: 768px) {
  .nr-section { padding: 64px 0; }
  .nr-container { padding: 0 20px; }
}

/* ==========================================================================
   BUTTONS — v7
   ========================================================================== */

.nr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--nr-r2);
  font-family: var(--nr-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}

.nr-btn-primary {
  background: var(--nr-brand);
  color: #FFFFFF;
  border-color: var(--nr-brand);
}
.nr-btn-primary:hover {
  background: var(--nr-brand-dark);
  border-color: var(--nr-brand-dark);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,166,90,0.3);
}

.nr-btn-dark {
  background: var(--nr-ink);
  color: #FFFFFF;
  border-color: var(--nr-ink);
}
.nr-btn-dark:hover { opacity: 0.9; }

.nr-btn-outline {
  background: transparent;
  color: var(--nr-ink);
  border-color: var(--nr-ink-20);
}
.nr-btn-outline:hover {
  border-color: var(--nr-brand);
  color: var(--nr-brand);
}

.nr-btn-ghost {
  background: transparent;
  color: var(--nr-brand);
  border-color: transparent;
  padding: 10px 16px;
}
.nr-btn-ghost:hover { background: var(--nr-brand-mid); }

/* Dark section buttons */
.nr-dark .nr-btn-outline { color: var(--nr-dark-text); border-color: var(--nr-dark-border); }
.nr-dark .nr-btn-outline:hover { border-color: var(--nr-brand); color: var(--nr-brand); }

/* ==========================================================================
   SECTION TAG — v7 (brutalist, no border-radius)
   ========================================================================== */

.nr-stag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nr-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nr-ink-60);
  margin-bottom: 16px;
}
.nr-stag::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--nr-brand);
}
.nr-dark .nr-stag { color: var(--nr-brand); }

/* ==========================================================================
   CARDS — v7
   ========================================================================== */

.nr-card {
  background: var(--nr-bg-card);
  border: 1px solid var(--nr-ink-10);
  border-radius: var(--nr-r3);
  padding: 32px;
  transition: all 0.25s;
  box-shadow: var(--nr-shadow-xs);
}
.nr-card:hover {
  box-shadow: var(--nr-shadow-md);
  transform: translateY(-2px);
}

.nr-dark .nr-card {
  background: var(--nr-dark-card);
  border-color: var(--nr-dark-border);
  box-shadow: none;
}
.nr-dark .nr-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ==========================================================================
   SECTION NUMBER — v7
   ========================================================================== */

.nr-sec-num {
  font-family: var(--nr-serif);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nr-ink-10);
  margin-bottom: 24px;
}
.nr-dark .nr-sec-num { color: var(--nr-dark-border); }

/* ==========================================================================
   GREEN TICKER — v7
   ========================================================================== */

.nr-ticker {
  background: var(--nr-brand);
  color: #FFFFFF;
  font-family: var(--nr-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.nr-green { color: var(--nr-brand); }
.nr-text-muted { color: var(--nr-ink-60); }
.nr-text-mono { font-family: var(--nr-mono); }
.nr-bg-warm { background: var(--nr-bg-warm); }
.nr-bg-white { background: var(--nr-white); }
.nr-border { border: 1px solid var(--nr-ink-10); }
.nr-rounded { border-radius: var(--nr-r2); }

/* ==========================================================================
   HEADER — v7 (Light, glassmorphism)
   ========================================================================== */

.nr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid var(--nr-ink-10) !important;
  transition: box-shadow 0.25s;
}
.nr-header.scrolled {
  box-shadow: var(--nr-shadow-sm);
}

.nr-header .elementor-nav-menu a { color: var(--nr-ink-60) !important; }
.nr-header .elementor-nav-menu a:hover { color: var(--nr-ink) !important; }
.nr-header .elementor-nav-menu .current-menu-item a { color: var(--nr-brand) !important; }

/* Mobile menu */
@media (max-width: 1024px) {
  .nr-header .elementor-menu-toggle { color: var(--nr-ink) !important; }
  .nr-header .elementor-nav-menu--dropdown {
    background: var(--nr-white) !important;
    border: 1px solid var(--nr-ink-10) !important;
    border-radius: var(--nr-r2);
    box-shadow: var(--nr-shadow-md);
  }
  .nr-header .elementor-nav-menu--dropdown a {
    color: var(--nr-ink-60) !important;
    border-bottom: 1px solid var(--nr-ink-05) !important;
  }
  .nr-header .elementor-nav-menu--dropdown a:hover {
    color: var(--nr-brand) !important;
    background: var(--nr-brand-light) !important;
  }
}

/* ==========================================================================
   FOOTER — v7
   ========================================================================== */

.nr-footer { border-top: 1px solid var(--nr-ink-10); }
.nr-footer a { color: var(--nr-ink-40); transition: color 0.2s; }
.nr-footer a:hover { color: var(--nr-brand); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .nr-card { padding: 24px; }
  .nr-btn { padding: 10px 20px; font-size: 13px; }
}

/* Override Elementor inline link colors in footer */
.nr-footer .elementor-widget-text-editor a { color: #8A8F99 !important; text-decoration: none; transition: color 0.2s; }
.nr-footer .elementor-widget-text-editor a:hover { color: #FFFFFF !important; }

/* Override Elementor inline link colors in footer bottom */
.nr-footer-bottom .elementor-widget-text-editor a { color: #C2C5CC !important; }
.nr-footer-bottom .elementor-widget-text-editor a:hover { color: #FFFFFF !important; }

/* ==========================================================================
   FOOTER DARK — v7 mockup
   ========================================================================== */

.nr-footer-dark { border-top: none; }
.nr-footer-dark a { color: #8A8F99 !important; text-decoration: none; transition: color 0.2s; }
.nr-footer-dark a:hover { color: #FFFFFF !important; }
.nr-footer-dark .elementor-widget-text-editor a { color: #8A8F99 !important; }
.nr-footer-dark .elementor-widget-text-editor a:hover { color: #FFFFFF !important; }

/* Force ALL footer links gray → white hover (override Elementor Kit global link color) */
.elementor-location-footer a,
.elementor-location-footer .elementor-widget-text-editor a,
.elementor-location-footer .elementor-widget a {
  color: #8A8F99 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.elementor-location-footer a:hover,
.elementor-location-footer .elementor-widget-text-editor a:hover,
.elementor-location-footer .elementor-widget a:hover {
  color: #FFFFFF !important;
}

/* ==========================================================================
   GRID FIX — Force card widths in flex containers
   ========================================================================== */

/* 3-column grid for service cards */
.nr-grid-3 > .elementor-element {
  width: calc(33.333% - 16px) !important;
  flex: 0 0 calc(33.333% - 16px) !important;
}

/* 2-column grid for audience/process cards */
.nr-grid-2 > .elementor-element {
  width: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px) !important;
}

@media (max-width: 1024px) {
  .nr-grid-3 > .elementor-element {
    width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
  }
}

@media (max-width: 767px) {
  .nr-grid-3 > .elementor-element,
  .nr-grid-2 > .elementor-element {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ==========================================================================
   TICKER ANIMATION
   ========================================================================== */

.nr-ticker-wrap {
  overflow: hidden !important;
  white-space: nowrap !important;
}

.nr-ticker-wrap .elementor-widget-text-editor {
  animation: nr-ticker 20s linear infinite;
  display: inline-block;
  white-space: nowrap;
}

@keyframes nr-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Stats bar — force horizontal */
.nr-stats-bar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
}
.nr-stats-bar > .elementor-element {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Hero trust metrics — force horizontal */
.nr-hero-metrics {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 48px !important;
}
.nr-hero-metrics > .elementor-element {
  width: auto !important;
  flex: 0 0 auto !important;
}

@media (max-width: 767px) {
  .nr-stats-bar,
  .nr-hero-metrics {
    gap: 20px 32px !important;
  }
}

/* ==========================================================================
   CARD HOVER — lift + shadow
   ========================================================================== */

.nr-card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: default;
}
.nr-card-hover:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(26,29,35,0.12) !important;
}
/* Dark cards */
.nr-card-hover-dark {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.nr-card-hover-dark:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   TICKER ANIMATION — marquee
   ========================================================================== */

.nr-ticker-wrap {
  overflow: hidden !important;
  position: relative !important;
}
.nr-ticker-wrap .elementor-widget-wrap,
.nr-ticker-wrap .elementor-widget-container {
  overflow: hidden !important;
}
.nr-ticker-track {
  display: inline-block !important;
  white-space: nowrap !important;
  animation: nr-marquee 25s linear infinite !important;
}
@keyframes nr-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.nr-faq-item {
  cursor: pointer;
  transition: background-color 0.2s ease !important;
}
.nr-faq-item:hover {
  background-color: rgba(0,166,90,0.04) !important;
}
.nr-faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease, opacity 0.3s ease !important;
  opacity: 0 !important;
}
.nr-faq-item.active .nr-faq-answer {
  max-height: 500px !important;
  opacity: 1 !important;
}
.nr-faq-icon {
  transition: transform 0.3s ease !important;
  display: inline-block;
}
.nr-faq-item.active .nr-faq-icon {
  transform: rotate(45deg) !important;
}

/* ==========================================================================
   BOLD ACCENTS in descriptions
   ========================================================================== */

.nr-bold-accent strong {
  color: #1A1D23 !important;
  font-weight: 600 !important;
}
.nr-dark .nr-bold-accent strong,
[style*="background-color:#1A1D23"] .nr-bold-accent strong {
  color: #E8E9EC !important;
}

/* ==========================================================================
   HERO DECORATIVE — subtle circles + glow
   ========================================================================== */

.nr-hero-deco {
  position: relative !important;
  overflow: hidden !important;
}
.nr-hero-deco::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(46,51,64,0.4);
  top: -120px; right: -100px;
  pointer-events: none;
  z-index: 0;
}
.nr-hero-deco::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(0,166,90,0.15);
  bottom: 60px; left: -80px;
  pointer-events: none;
  z-index: 0;
}
.nr-hero-deco > * {
  position: relative;
  z-index: 1;
}

/* Subtle green glow behind hero text */
.nr-hero-glow {
  position: relative !important;
}
.nr-hero-glow::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,166,90,0.06) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   ICON CIRCLES — colored background for service/audience icons
   ========================================================================== */

.nr-icon-circle {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(0,166,90,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nr-icon-circle svg {
  width: 24px; height: 24px;
}

/* ==========================================================================
   PROCESS TIMELINE — vertical line connecting steps
   ========================================================================== */

.nr-process-grid {
  position: relative !important;
}
.nr-process-grid::before {
  content: '';
  position: absolute;
  left: calc(25% - 0.5px);
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, #E4E5E9, #00A65A, #E4E5E9);
  z-index: 0;
  display: none; /* only on desktop 2-col */
}

/* ==========================================================================
   AI-SEARCH BROWSER GLOW
   ========================================================================== */

.nr-browser-glow {
  position: relative !important;
}
.nr-browser-glow::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  top: 8px; left: 8px;
  border-radius: 12px;
  background: rgba(0,166,90,0.06);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 767px) {
  .nr-hero-deco::before { width: 250px; height: 250px; top: -60px; right: -60px; }
  .nr-hero-deco::after { width: 150px; height: 150px; }
}

/* ==========================================================================
   PROCESS FLOW — connecting line between step cards
   ========================================================================== */
.nr-process-flow {
  position: relative !important;
}
.nr-process-flow > .elementor-element:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nr-brand, #00A65A);
  font-size: 24px;
  font-weight: 300;
  z-index: 1;
}
@media (max-width: 767px) {
  .nr-process-flow > .elementor-element::after {
    display: none !important;
  }
}

/* Stat cards with green left border */
.nr-stat-accent {
  border-left: 3px solid #00A65A !important;
}

/* ==========================================================================
   MOBILE FIXES — tables, touch targets, font sizes
   ========================================================================== */

/* Tables: prevent horizontal overflow on mobile */
@media (max-width: 767px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 14px !important;
  }
  table th, table td {
    white-space: nowrap;
    min-width: 120px;
  }

  /* H1 mobile: max 32px */
  .elementor-heading-title.elementor-size-default {
    word-break: break-word;
  }

  /* CTA buttons: full width on mobile */
  .elementor-button-wrapper {
    width: 100%;
  }
  .elementor-button {
    width: 100%;
    justify-content: center;
    min-height: 48px; /* touch target */
  }

  /* FAQ: larger touch target */
  .nr-faq-item {
    padding: 20px 0 !important;
    min-height: 48px;
  }

  /* Hero metrics: stack with less gap */
  .nr-hero-metrics {
    gap: 16px 24px !important;
  }

  /* Trust strip: smaller numbers on mobile */
  .nr-trust-strip span[style*="font-size:28px"] {
    font-size: 24px !important;
  }
}

/* ==========================================================================
   BLOG — Article styles
   ========================================================================== */

/* Author box */
.nr-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 32px;
  background: var(--nr-bg-warm, #F2F0EB);
  border-radius: 12px;
  margin: 48px 0;
}
.nr-author-box img,
.nr-author-box .nr-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nr-author-name {
  font-family: var(--nr-sans, 'DM Sans');
  font-weight: 700;
  font-size: 18px;
  color: var(--nr-ink, #1A1D23);
  margin-bottom: 4px;
}
.nr-author-role {
  font-size: 14px;
  color: var(--nr-ink-60, #5A5F69);
  margin-bottom: 8px;
}
.nr-author-bio {
  font-size: 14px;
  color: var(--nr-ink-60, #5A5F69);
  line-height: 1.6;
}
.nr-author-link {
  color: var(--nr-brand, #00A65A) !important;
  text-decoration: none;
  font-weight: 500;
}

/* Code blocks */
.nr-code-block {
  background: #1A1D23 !important;
  border-radius: 12px;
  padding: 24px 28px;
  overflow-x: auto;
  margin: 24px 0;
}
.nr-code-block code,
.nr-code-block pre {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #E8E9EC !important;
  white-space: pre;
}
.nr-code-block .comment { color: #5A5F69; }
.nr-code-block .string { color: #00A65A; }
.nr-code-block .keyword { color: #4D8EFF; }

/* Do/Don't blocks */
.nr-do-block {
  padding: 24px 28px;
  border-radius: 12px;
  margin: 16px 0;
}
.nr-do-block--do {
  background: rgba(0, 166, 90, 0.06);
  border-left: 3px solid #00A65A;
}
.nr-do-block--dont {
  background: rgba(217, 59, 59, 0.06);
  border-left: 3px solid #D93B3B;
}
.nr-do-block h4 {
  font-family: var(--nr-sans, 'DM Sans');
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.nr-do-block--do h4 { color: #00A65A; }
.nr-do-block--dont h4 { color: #D93B3B; }
.nr-do-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nr-do-block ul li {
  padding: 6px 0;
  font-size: 16px;
  color: var(--nr-ink-60, #5A5F69);
  line-height: 1.55;
}
.nr-do-block--do ul li::before { content: '✓ '; color: #00A65A; font-weight: 600; }
.nr-do-block--dont ul li::before { content: '✗ '; color: #D93B3B; font-weight: 600; }

/* Sec--brand (green section) */
.nr-sec-brand {
  background: #00A65A !important;
  color: #FFFFFF !important;
}
.nr-sec-brand h2,
.nr-sec-brand h3,
.nr-sec-brand p,
.nr-sec-brand .elementor-heading-title,
.nr-sec-brand .elementor-widget-text-editor {
  color: #FFFFFF !important;
}
.nr-sec-brand .elementor-button {
  background: #FFFFFF !important;
  color: #00A65A !important;
}
.nr-sec-brand .elementor-button:hover {
  background: #F2F0EB !important;
}

/* TOC inline */
.nr-toc {
  background: var(--nr-white, #FFFFFF);
  border: 1px solid var(--nr-ink-10, #E4E5E9);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 32px 0;
}
.nr-toc h3 {
  font-family: var(--nr-sans, 'DM Sans');
  font-weight: 600;
  font-size: 16px;
  color: var(--nr-ink, #1A1D23);
  margin-bottom: 16px;
}
.nr-toc ol {
  padding-left: 20px;
  margin: 0;
}
.nr-toc li {
  padding: 6px 0;
  font-size: 15px;
  color: var(--nr-ink-60, #5A5F69);
}
.nr-toc a {
  color: var(--nr-ink-60, #5A5F69) !important;
  text-decoration: none;
}
.nr-toc a:hover {
  color: var(--nr-brand, #00A65A) !important;
}

/* Reveal animations */
.nr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.nr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blog article meta (date, category, read time) */
.nr-article-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--nr-ink-40, #8A8F99);
  font-family: var(--nr-mono, 'JetBrains Mono');
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Diagonal slash */
.nr-diagonal {
  height: 60px;
  background: linear-gradient(to bottom right, #1A1D23 49.5%, #F8F7F4 50.5%);
  margin: 0;
}
.nr-diagonal--light-to-dark {
  background: linear-gradient(to bottom right, #F8F7F4 49.5%, #1A1D23 50.5%);
}
.nr-diagonal--brand {
  background: linear-gradient(to bottom right, #F8F7F4 49.5%, #00A65A 50.5%);
}

/* ==========================================================================
   NAV DROPDOWN FIX — show submenu on hover
   ========================================================================== */

/* Desktop dropdown */
.nr-header .elementor-nav-menu .menu-item-has-children {
  position: relative !important;
}
.nr-header .elementor-nav-menu .menu-item-has-children .sub-menu,
.nr-header .elementor-nav-menu--main .menu-item-has-children .elementor-nav-menu--dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E5E9 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(26,29,35,0.1) !important;
  padding: 8px 0 !important;
  z-index: 1000 !important;
  margin-top: 8px !important;
}
.nr-header .elementor-nav-menu .menu-item-has-children:hover > .sub-menu,
.nr-header .elementor-nav-menu--main .menu-item-has-children:hover > .elementor-nav-menu--dropdown {
  display: block !important;
}
.nr-header .sub-menu li a,
.nr-header .elementor-nav-menu--dropdown li a {
  display: block !important;
  padding: 10px 20px !important;
  color: #5A5F69 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.nr-header .sub-menu li a:hover,
.nr-header .elementor-nav-menu--dropdown li a:hover {
  color: #00A65A !important;
  background: rgba(0,166,90,0.04) !important;
}

/* Dropdown arrow indicator */
.nr-header .menu-item-has-children > a::after {
  content: none !important;
  font-size: 10px !important;
  margin-left: 4px !important;
}

/* ==========================================================================
   NAV DROPDOWN FIX v2 — override Elementor's display:none on ul
   ========================================================================== */

/* Override Elementor's .elementor-nav-menu ul { display: none } */
.elementor-nav-menu--main .elementor-nav-menu > .menu-item-has-children > ul.sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 240px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E5E9 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(26,29,35,0.12) !important;
  padding: 8px 0 !important;
  z-index: 9999 !important;
  margin-top: 0 !important;
}

/* Show on hover */
.elementor-nav-menu--main .elementor-nav-menu > .menu-item-has-children:hover > ul.sub-menu {
  display: block !important;
}

/* Submenu items */
.elementor-nav-menu--main .menu-item-has-children ul.sub-menu li a.elementor-sub-item {
  display: block !important;
  padding: 10px 20px !important;
  color: #5A5F69 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: color 0.15s, background 0.15s !important;
  border: none !important;
}
.elementor-nav-menu--main .menu-item-has-children ul.sub-menu li a.elementor-sub-item:hover {
  color: #00A65A !important;
  background: rgba(0,166,90,0.04) !important;
}

/* ==========================================================================
   NAV DROPDOWN z-index + overflow fix
   ========================================================================== */

/* Header must not clip dropdown */
.nr-header,
.elementor-location-header,
.elementor-location-header .elementor-element,
.elementor-location-header .e-con {
  overflow: visible !important;
}

/* Ensure header is above everything */
.elementor-location-header {
  z-index: 9999 !important;
  position: relative !important;
}

/* Nav widget container must allow overflow */
.elementor-widget-nav-menu,
.elementor-widget-nav-menu .elementor-widget-container,
.elementor-nav-menu--main {
  overflow: visible !important;
}

/* Dropdown itself — high z-index */
.elementor-nav-menu--main .menu-item-has-children > ul.sub-menu {
  z-index: 99999 !important;
}

/* Hide default WP title on Elementor-built posts */
.elementor-page .page-header {
  display: none !important;
}

/* Grid layouts for /preise/ and other pages */
.e-con.e-parent > .e-con.e-child[class*='nr-grid-'] {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
.nr-grid-3 > .e-con.e-child {
  width: calc(33.333% - 16px) !important;
  flex: 0 0 calc(33.333% - 16px) !important;
}
.nr-grid-2 > .e-con.e-child {
  width: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px) !important;
}
@media (max-width: 767px) {
  .nr-grid-3 > .e-con.e-child,
  .nr-grid-2 > .e-con.e-child {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Row layouts with custom classes */
.nr-row-3.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.nr-row-3.e-con > .e-con {
  width: calc(33.333% - 16px) !important;
  max-width: calc(33.333% - 16px) !important;
  flex: 0 0 calc(33.333% - 16px) !important;
}
.nr-row-2.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.nr-row-2.e-con > .e-con {
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px) !important;
}
.nr-row-auto.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.nr-row-auto.e-con > .elementor-widget {
  flex: 0 0 auto !important;
}
@media (max-width: 767px) {
  .nr-row-3.e-con > .e-con,
  .nr-row-2.e-con > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Compact voice cards on dark sections */
.nr-card-hover-dark.e-con {
  padding: 20px 20px !important;
  gap: 6px !important;
}
.nr-card-hover-dark.e-con .elementor-widget-text-editor {
  margin-bottom: 0 !important;
}
/* Tighter rows for voice cards */
.nr-row-3.e-con,
.nr-row-2.e-con {
  gap: 16px !important;
  row-gap: 16px !important;
}

/* Voice cards grid: all same size, 3+2 centered */
.nr-row-2.e-con {
  justify-content: center !important;
}
.nr-row-2.e-con > .e-con {
  flex: 0 0 calc(33.333% - 16px) !important;
  width: calc(33.333% - 16px) !important;
  max-width: calc(33.333% - 16px) !important;
}
/* All voice cards: same bg */
.nr-card-hover-dark.e-con {
  background: #1C1C22 !important;
  border: 1px solid #2A2A32 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  gap: 4px !important;
}
@media (max-width: 767px) {
  .nr-row-2.e-con > .e-con {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Featured pricing card (Professional) */
.nr-card-featured.e-con {
  border-top: 3px solid #00A65A !important;
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0, 166, 90, 0.12) !important;
  position: relative;
  z-index: 2;
}

/* === /seo-agentur/ unique components === */

/* Horizontal timeline for process steps */
.nr-timeline.e-con {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto;
  padding-bottom: 8px !important;
}
.nr-timeline.e-con > .e-con {
  flex: 1 1 25% !important;
  min-width: 220px;
  position: relative;
  padding: 24px 20px !important;
}
.nr-timeline.e-con > .e-con::after {
  content: '\2192';
  position: absolute;
  right: -12px;
  top: 28px;
  font-size: 20px;
  color: #00A65A;
  z-index: 2;
}
.nr-timeline.e-con > .e-con:last-child::after {
  display: none;
}
@media (max-width: 767px) {
  .nr-timeline.e-con {
    flex-direction: column !important;
  }
  .nr-timeline.e-con > .e-con::after {
    right: auto; left: 24px; top: auto; bottom: -8px;
    transform: rotate(90deg);
  }
}

/* Vertical numbered list with left accent */
.nr-numbered-list.e-con > .e-con {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #2A2A32;
}
.nr-numbered-list.e-con > .e-con:last-child {
  border-bottom: none;
}

/* Icon list items */
.nr-icon-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px 0 !important;
}

/* Service card with icon circle */
.nr-service-icon .nr-icon-circle {
  margin-bottom: 12px;
}
/* =====================================================
   /seo-agentur/ — Custom Components CSS
   Append to child theme style.css via SSH
   ===================================================== */

/* ── Section Tag with green bar ── */
.nr-sec-tag .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nr-sec-tag .elementor-heading-title::before {
    content: '';
    width: 20px;
    height: 2px;
    background: #00A65A;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Diagonal Slash (Hero → Light transition) ── */
.nr-diagonal-slash {
    position: relative;
    overflow: hidden;
    min-height: 80px !important;
}
.nr-diagonal-slash::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    right: -5%;
    bottom: 0;
    background: #1A1D23;
    transform: skewY(-2deg);
    transform-origin: top left;
    z-index: 1;
}

/* ── 3-Column Card Grid ── */
.nr-grid-3 > .elementor-element {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
}
@media (max-width: 1024px) {
    .nr-grid-3 > .elementor-element {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}
@media (max-width: 767px) {
    .nr-grid-3 > .elementor-element {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 2-Column Grid (Do/Don't) ── */
.nr-grid-2 > .elementor-element {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
}
@media (max-width: 767px) {
    .nr-grid-2 > .elementor-element {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── Card Hover ── */
.nr-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26,29,35,0.10);
    border-color: #00A65A !important;
}

/* ── Do/Don't Cards ── */
.nr-do-card {
    border-top: 3px solid #00A65A !important;
}
.nr-do-card ul { list-style: none; padding: 0; }
.nr-do-card li::before {
    content: '✓';
    color: #00A65A;
    font-weight: 700;
    margin-right: 8px;
}
.nr-dont-card {
    border-top: 3px solid #D93B3B !important;
}
.nr-dont-card ul { list-style: none; padding: 0; }
.nr-dont-card li::before {
    content: '✗';
    color: #D93B3B;
    font-weight: 700;
    margin-right: 8px;
}

/* ── Voice Cards (Single Column Horizontal Stripes) ── */
.nr-voice-card {
    border-bottom: 1px solid #2E3340 !important;
    transition: background 0.3s ease;
}
.nr-voice-card:last-child {
    border-bottom: none !important;
}
.nr-voice-card:hover {
    background: rgba(0,166,90,0.04);
}
.nr-voice-card .elementor-heading-title {
    line-height: 1 !important;
}

/* ── Vertical Timeline ── */
.nr-timeline {
    position: relative;
    padding-left: 48px !important;
}
.nr-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, #00A65A, rgba(0,166,90,0.15));
    z-index: 1;
}
.nr-timeline-step {
    position: relative;
}
.nr-timeline-step::before {
    content: '';
    position: absolute;
    left: -42px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00A65A;
    box-shadow: 0 0 0 4px rgba(0,166,90,0.15);
    z-index: 2;
}
.nr-timeline-step:last-child::after {
    display: none;
}

/* ── Icon Box Styling ── */
.nr-card .elementor-icon-box-wrapper {
    text-align: left;
}
.nr-card .elementor-icon-box-icon {
    margin-bottom: 12px;
}
.nr-card .elementor-icon-box-icon .elementor-icon {
    background: rgba(0,166,90,0.10);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Stats Bar ── */
.nr-stats-bar > .elementor-element {
    flex: 1;
    text-align: center;
    padding: 16px;
    border-right: 1px solid #2E3340;
}
.nr-stats-bar > .elementor-element:last-child {
    border-right: none;
}
@media (max-width: 767px) {
    .nr-stats-bar {
        flex-direction: column !important;
    }
    .nr-stats-bar > .elementor-element {
        border-right: none;
        border-bottom: 1px solid #2E3340;
        padding: 12px 0;
    }
    .nr-stats-bar > .elementor-element:last-child {
        border-bottom: none;
    }
}

/* ── Author Box ── */
.nr-author-box {
    border-top: 2px solid #00A65A;
}

/* ── Hidden Schema ── */
.nr-schema-hidden {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ── Reveal Animation (shared) ── */
.nr-card.reveal,
.nr-timeline-step.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.nr-card.reveal.visible,
.nr-timeline-step.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── sec--brand (.nr-brand): force white text on green #00A65A ── */
.nr-brand p,
.nr-brand li,
.nr-brand ul,
.nr-brand ol,
.nr-brand strong,
.nr-brand em,
.nr-brand .elementor-heading-title,
.nr-brand .elementor-text-editor,
.nr-brand .elementor-icon-list-text,
.nr-brand .elementor-icon-box-title,
.nr-brand .elementor-icon-box-description,
.nr-brand .elementor-tab-title,
.nr-brand .elementor-tab-content {
  color: #FFFFFF !important;
}
.nr-brand .elementor-icon-list-icon i,
.nr-brand .elementor-icon-list-icon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ── Stats bar fix: force horizontal layout ── */
.nr-stats-bar.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}
.nr-stats-bar.e-con > .elementor-element {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
}
@media (max-width: 767px) {
  .nr-stats-bar.e-con {
    flex-direction: column !important;
  }
}

/* ── Grid fixes: force row layout ── */
.nr-grid-2.e-con,
.nr-grid-3.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
@media (max-width: 767px) {
  .nr-grid-2.e-con,
  .nr-grid-3.e-con {
    flex-direction: column !important;
  }
}

/* ── Author box M-avatar: force circle ── */
.nr-author-box > .e-con-inner > .e-con:first-child, .nr-author-box > .e-con:first-child {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 80px !important;
  min-height: 80px !important;
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}



/* ── /ueber-uns/ Hero: photo beside text ── */
.elementor-element-c03a971 > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 40px !important;
}
.elementor-element-c03a971 > .e-con-inner > .e-con:first-child {
  flex: 1 1 55% !important;
  min-width: 280px !important;
}
.elementor-element-c03a971 > .e-con-inner > .e-con:last-child {
  flex: 0 1 300px !important;
  max-width: 300px !important;
}
.elementor-element-c03a971 > .e-con-inner > .e-con:last-child img {
  border-radius: 12px !important;
  width: 100% !important;
  height: auto !important;
  max-width: 300px !important;
}
@media (max-width: 767px) {
  .elementor-element-c03a971 > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-element-c03a971 > .e-con-inner > .e-con:last-child {
    max-width: 240px !important;
    margin: 0 auto !important;
  }
}


/* ── /ueber-uns/ Tool badges: all inline pills ── */
.elementor-element-be02ca2.e-con,
.elementor-element-d80e03f.e-con,
.elementor-element-d5df92c.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.elementor-element-be02ca2.e-con > .elementor-element,
.elementor-element-d80e03f.e-con > .elementor-element,
.elementor-element-d5df92c.e-con > .elementor-element {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ── Case Study: equal-height chart + mockup (nr-grid-2) ── */
.nr-grid-2 > .e-con-inner {
    align-items: stretch !important;
}
.nr-grid-2 .elementor-widget {
    height: 100%;
}
.nr-grid-2 .elementor-widget-container {
    height: 100%;
}
.nr-grid-2 .elementor-widget-html .elementor-widget-container > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.nr-grid-2 .elementor-widget-html .elementor-widget-container > div > div:last-child {
    flex: 1;
}


/* ════════════════════════════════════════════════════════════════
   MOTION & POLISH SYSTEM (added 2026-04-11)
   Based on modern animation best practices.
   Reference: docs/emil-skill.md
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Strong custom easings — replace built-in ease/ease-in-out everywhere */
  --nr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nr-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --nr-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Duration scale — cap at 300ms for UI */
  --nr-dur-fast: 160ms;
  --nr-dur-base: 220ms;
  --nr-dur-slow: 300ms;
}

/* ── Button press feedback — applies to all buttons globally ── */
.elementor-button,
.elementor-button-link,
.nr-btn,
button:not(.elementor-arrow):not(.elementor-pagination-button) {
  transition:
    transform var(--nr-dur-fast) var(--nr-ease-out),
    background-color var(--nr-dur-base) var(--nr-ease-out),
    color var(--nr-dur-base) var(--nr-ease-out),
    box-shadow var(--nr-dur-base) var(--nr-ease-out);
}
.elementor-button:active,
.elementor-button-link:active,
.nr-btn:active,
button:not(.elementor-arrow):not(.elementor-pagination-button):active {
  transform: scale(0.97);
}

/* ── Hover effects only on real pointer devices (not touch) ── */
@media (hover: hover) and (pointer: fine) {
  .nr-card-hover {
    transition:
      transform var(--nr-dur-base) var(--nr-ease-out),
      box-shadow var(--nr-dur-base) var(--nr-ease-out),
      border-color var(--nr-dur-base) var(--nr-ease-out);
  }
  .nr-card-hover:hover {
    transform: translateY(-3px);
  }
}

/* ── Reveal animation upgrade (used by IntersectionObserver) ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms var(--nr-ease-out),
    transform 400ms var(--nr-ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger utility for card grids ── */
.nr-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: nr-stagger-in 360ms var(--nr-ease-out) forwards;
}
.nr-stagger > *:nth-child(1) { animation-delay: 0ms; }
.nr-stagger > *:nth-child(2) { animation-delay: 60ms; }
.nr-stagger > *:nth-child(3) { animation-delay: 120ms; }
.nr-stagger > *:nth-child(4) { animation-delay: 180ms; }
.nr-stagger > *:nth-child(5) { animation-delay: 240ms; }
.nr-stagger > *:nth-child(6) { animation-delay: 300ms; }
@keyframes nr-stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Popover/tooltip transform-origin (use --nr-origin to override) ── */
.nr-popover {
  transform-origin: var(--nr-origin, top center);
  transition:
    opacity var(--nr-dur-base) var(--nr-ease-out),
    transform var(--nr-dur-base) var(--nr-ease-out);
}

/* ── Reduce motion for accessibility (and some SEO audits) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Disable :hover transforms on touch devices (prevents sticky hover) ── */
@media (hover: none) {
  .nr-card-hover:hover,
  .nr-card:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END MOTION & POLISH SYSTEM
   ════════════════════════════════════════════════════════════════ */