/* ============================================
   VBCard Landing Page — style.css
   Design System: vbcard.eu
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --primary: #358C68;
  --primary-dark: #1A7A5B;
  --accent: #2D7D5E;
  --success: #10A24A;
  --warning: #F5A623;
  --destructive: #F03A3A;
  --bg: #F4F6F8;
  --bg-alt: #FAFBFC;
  --surface: #FFFFFF;
  --text: #061A0F;
  --text-primary: #061A0F;
  --text-secondary: #677169;
  --text-muted: #6B7280;
  --border: #C8DDD4;
  --border-light: #E5E7EB;
  --dark: #243D2E;
  --dark-hover: #314F3B;
  --dark-active: #377D55;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --shadow: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.10);
  --shadow-cta: 0 4px 14px rgba(0,0,0,0.10);

  --section-py: 80px;
  --section-py-mobile: 48px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* ---------- Section Labels & Titles ---------- */
.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2A7354;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: clamp(15px, 2.5vw, 17px);
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1A7A5B, #00A67E);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-cta);
  position: relative;
  overflow: hidden;
}

.btn-cta:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(26,122,91,0.3);
}

.btn-cta:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(26,122,91,0.2);
}

.btn-outline-white:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.15);
}

.btn-outline-dark:active {
  transform: scale(0.98);
  background: #f0f0f0;
}

.btn-cta--lg {
  padding: 16px 36px;
  font-size: 17px;
  border-radius: var(--radius-md);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.3);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-light);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-dark:hover {
  background: #f8f8f8;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: white;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.3);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.btn-outline-light:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.15);
}

/* ---------- NAVBAR ---------- */
#navbar {
  background: transparent;
  transition: all 0.3s ease;
  z-index: 9990 !important;
}

#navbar.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 6px 2px;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

#navbar.scrolled .nav-link {
  color: var(--text-secondary);
}

#navbar.scrolled .nav-link:hover,
#navbar.scrolled .nav-link.active {
  color: var(--text);
}

.nav-link:hover {
  color: #fff;
}

/* Navbar logo image */
.navbar-logo {
  max-height: 40px;
  width: auto;
  display: block;
}

/* Dual logo system — swap white/dark logo on scroll */
.navbar-logo-wrapper {
  position: relative;
  display: block;
  height: 40px;      /* match .navbar-logo max-height */
  /* width is set by the visible logo */
}

.navbar-logo--light,
.navbar-logo--dark {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

.navbar-logo--light {
  /* static in flow so the wrapper gets a width */
  position: relative;
  opacity: 1;
}

.navbar-logo--dark {
  opacity: 0;
  pointer-events: none;
}

/* When navbar has scrolled class (white/glass bg), show dark logo */
.scrolled .navbar-logo--light {
  opacity: 0;
  pointer-events: none;
}

.scrolled .navbar-logo--dark {
  opacity: 1;
  pointer-events: auto;
}

/* Footer logo image - white version */
.footer-logo {
  max-height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Language Switcher */
.lang-switcher {
  font-size: 0;
  background: transparent;
  padding: 0;
  gap: 2px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
  opacity: 0.45;
}

.lang-btn:hover {
  opacity: 0.8;
}

.lang-btn.active {
  opacity: 1;
  border-color: var(--primary);
}

.lang-btn .flag {
  font-size: 18px;
  line-height: 1;
}

.lang-btn .lang-label {
  display: none;
}

/* Mobile Menu */
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

#navbar.scrolled .hamburger-line {
  background: var(--text);
}

.mobile-menu-btn {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn.open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light);
}

.mobile-nav-link {
  display: block;
  padding: 12px 16px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.mobile-nav-link:hover {
  background: var(--bg);
}

/* ---------- HERO ---------- */
#hero {
  background: var(--dark);
  position: relative;
}

.hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, #1a3024 0%, #243D2E 25%, #2D7D5E 50%, #1a5c3a 75%, #243D2E 100%);
  background-size: 400% 400%;
  animation: heroGradient 15s ease infinite;
  opacity: 0.95;
}

@keyframes heroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
}

.hero-blob--1 {
  width: 600px;
  height: 600px;
  background: #00A67E;
  top: -200px;
  right: -100px;
  animation: blobFloat1 20s ease-in-out infinite;
}

.hero-blob--2 {
  width: 400px;
  height: 400px;
  background: #358C68;
  bottom: -100px;
  left: -100px;
  animation: blobFloat2 25s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 20px) scale(1.08); }
  66% { transform: translate(15px, -25px) scale(0.92); }
}

/* Hero spacing */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.2rem;
}

.hero-subtitle {
  margin-bottom: 32px;
}

.hero-buttons {
  margin-bottom: 24px;
}

.hero-checks {
  margin-bottom: 40px;
}

.hero-stats {
  gap: 0;
}

.hero-stat {
  padding: 0 24px;
  border-left: 1px solid rgba(255,255,255,0.2);
}

.hero-stat:first-child {
  border-left: none;
  padding-left: 0;
}

.hero-stat:last-child {
  padding-right: 0;
}

/* ===== ANIMATED HERO HEADING ===== */
.hero-animated-heading {
  text-align: left;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #E8F0E8;
  margin: 0 0 1.5rem 0;
  max-width: 800px;
}

.hero-static-line {
  display: block;
  color: #E8F0E8;
  opacity: 0.75;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3rem);
}

.hero-rotating-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
  margin: 0.2rem 0;
  white-space: normal;
}

.hero-rotating-item {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  word-break: break-word;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: #48A868;
  font-weight: 700;
  opacity: 0;
  transform: translateY(100%);
  transition: none;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-rotating-item.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.hero-rotating-item.exit-up {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

@media (max-width: 600px) {
  .hero-animated-heading {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .hero-rotating-item {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .hero-rotating-wrapper {
    height: clamp(3rem, 14vw, 5rem);
  }
}

/* Hide original H1 when animated heading is present */
.hero-headline--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Hero text — mobile center (<768px), desktop left */
@media (max-width: 767px) {
  .hero-animated-heading {
    text-align: center;
  }
  .hero-rotating-item {
    justify-content: center;
    text-align: center;
  }
}
/* ===== END ANIMATED HERO HEADING ===== */

/* ===== ANIMATED TEXT CYCLE SECTION ===== */
.text-cycle-section {
  padding: 80px 24px;
  background: #1a2f27;
  text-align: center;
}

.text-cycle-section .inner {
  max-width: 900px;
  margin: 0 auto;
}

.text-cycle-heading {
  display: block;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  color: rgba(232, 240, 232, 0.55);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0;
}

.tc-line {
  display: inline;
}

.tc-static {
  display: inline;
  color: rgba(232, 240, 232, 0.55);
  font-weight: 300;
}

.text-cycle-heading .cycle-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  position: relative;
  vertical-align: baseline;
  overflow: hidden;
  white-space: nowrap;
}

.text-cycle-heading .cycle-word {
  display: inline-block;
  font-weight: 700;
  color: #E8F0E8;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(-100%);
  filter: blur(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  white-space: nowrap;
  pointer-events: none;
}

.text-cycle-heading .cycle-word.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
  position: relative;
}

.text-cycle-heading .cycle-word.exit {
  opacity: 0;
  transform: translateY(100%);
  filter: blur(6px);
  position: absolute;
}

.cycle-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  font-weight: 700;
  white-space: nowrap;
  top: 0; left: 0;
}

@media (max-width: 600px) {
  .text-cycle-section { padding: 60px 20px; }
  .text-cycle-heading { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}
/* ===== END ANIMATED TEXT CYCLE SECTION ===== */

/* ===== DND DEMO SECTION ===== */
.dnd-demo-section {
  padding: 80px 24px;
  background: #f0f5f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
  width: 100%;
}

.dnd-demo-text {
  max-width: 400px;
}

.dnd-demo-text .section-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #48A868;
  margin-bottom: 12px;
}

.dnd-demo-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #2D4A3E;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.dnd-demo-text .desc {
  font-size: 1.05rem;
  color: #4a6b5e;
  line-height: 1.7;
  margin: 0;
}

/* iPhone frame */
.dnd-demo-section .iphone-frame {
  width: 300px;
  height: 630px;
  background: #1a1a1e;
  border-radius: 50px;
  padding: 10px;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.22),
    0 15px 40px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  flex-shrink: 0;
}

.dnd-demo-section .iphone-frame::before {
  content: '';
  position: absolute;
  right: -2.5px;
  top: 150px;
  width: 3px;
  height: 44px;
  background: #2c2c30;
  border-radius: 0 2px 2px 0;
}
.dnd-demo-section .iphone-frame::after {
  content: '';
  position: absolute;
  left: -2.5px;
  top: 125px;
  width: 3px;
  height: 28px;
  background: #2c2c30;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 44px 0 #2c2c30, 0 78px 0 #2c2c30;
}

.dnd-demo-section .iphone-screen {
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #3d6b55;
}

/* iOS Status Bar */
.dnd-demo-section .status-bar {
  height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 28px 0;
  position: relative;
  z-index: 110;
  flex-shrink: 0;
}

.dnd-demo-section .status-bar .time {
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
  margin-top: 1px;
}

.dnd-demo-section .dynamic-island {
  width: 92px;
  height: 25px;
  background: #000;
  border-radius: 20px;
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.dnd-demo-section .status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.dnd-demo-section .status-dots {
  display: flex;
  gap: 3px;
  margin-right: 3px;
}
.dnd-demo-section .status-dots span {
  width: 4px; height: 4px;
  background: white; border-radius: 50%;
}

.dnd-demo-section .status-icons .ico { width: 15px; height: 15px; fill: white; }

/* App content area */
.dnd-demo-section .app-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Card header */
.dnd-demo-section .card-hdr {
  height: 72px;
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(145deg, #2D4A3E, #3d6b55 50%, #4d8066);
  overflow: hidden;
}
.dnd-demo-section .card-hdr-waves {
  position: absolute; inset: 0;
  opacity: 0.18;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'%3E%3Cpath d='M0 35Q60 15 120 35T240 35' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M0 48Q60 28 120 48T240 48' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cpath d='M0 58Q60 40 120 58T240 58' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") repeat-x;
  background-size: 240px 70px;
  animation: dndWavedrift 9s linear infinite;
}
@keyframes dndWavedrift { to { background-position-x: 240px; } }

/* Card white body */
.dnd-demo-section .card-body {
  flex: 1;
  background: white;
  border-radius: 22px 22px 0 0;
  margin-top: -12px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dnd-demo-section .card-name { text-align: center; margin-bottom: 10px; }
.dnd-demo-section .card-name .n { font-size: 1.22rem; font-weight: 700; color: #3d6b55; display: block; line-height: 1.3; }
.dnd-demo-section .card-name .c { font-size: 0.82rem; color: #666; display: block; }

/* Edit toolbar */
.dnd-demo-section .edit-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: #f3f7f4; border-radius: 12px;
  margin-bottom: 0;
  opacity: 0; max-height: 0; overflow: hidden;
  transform: translateY(-6px);
  transition: all 0.35s ease;
}
.dnd-demo-section .edit-bar.visible {
  opacity: 1; max-height: 52px;
  transform: translateY(0);
  margin-bottom: 10px; padding-top: 7px; padding-bottom: 7px;
}
.dnd-demo-section .edit-bar .ebc { font-size: 0.65rem; color: #555; padding: 4px 6px; border-radius: 6px; white-space: nowrap; font-weight: 500; display: flex; align-items: center; gap: 3px; flex: 1; }
.dnd-demo-section .edit-bar .ebs {
  font-size: 0.65rem; background: #3d6b55; color: white; border: none;
  border-radius: 9px; padding: 6px 12px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  transition: transform 0.12s ease; cursor: pointer;
}
.dnd-demo-section .ebs.clicked { transform: scale(0.88); }
.dnd-demo-section .ebs svg { width: 13px; height: 13px; fill: white; }

/* Contact rows */
.dnd-demo-section .clist { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.dnd-demo-section .crow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 14px;
  background: transparent; border: 1.5px solid transparent;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease, background 0.3s ease,
    border-color 0.3s ease;
  position: relative;
}
.dnd-demo-section .crow.em {
  border: 1.5px dashed #b5d4c0;
  background: #f5faf7;
}
.dnd-demo-section .crow.dragging {
  box-shadow: 0 10px 34px rgba(45,74,62,0.22);
  transform: scale(1.03);
  z-index: 10; background: white;
  border: 1.5px solid #48A868;
}

.dnd-demo-section .dh {
  width: 16px; color: #b0bab3; font-size: 1.05rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0; text-align: center; line-height: 1;
}
.dnd-demo-section .crow.em .dh { opacity: 1; transform: translateX(0); }

.dnd-demo-section .ci {
  width: 38px; height: 38px; border-radius: 50%;
  background: #2D4A3E; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.dnd-demo-section .ci svg { width: 17px; height: 17px; fill: white; }

.dnd-demo-section .cinfo { flex: 1; min-width: 0; }
.dnd-demo-section .cinfo .ct {
  font-size: 0.62rem; color: #48A868; font-weight: 600;
  display: block; line-height: 1.3; letter-spacing: 0.02em;
}
.dnd-demo-section .cinfo .cv {
  font-size: 0.82rem; color: #1a1a1a; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.35;
}

/* Add contact button */
.dnd-demo-section .acb {
  background: #48A868; color: white; border: none;
  border-radius: 24px; padding: 11px 16px;
  font-size: 0.74rem; font-weight: 600; text-align: center;
  margin-top: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.dnd-demo-section .acb svg { width: 15px; height: 15px; fill: white; }

/* vCard link */
.dnd-demo-section .vcl { text-align: center; padding: 6px 0 2px; flex-shrink: 0; }
.dnd-demo-section .vcl .vl { font-size: 0.55rem; color: #aaa; display: block; }
.dnd-demo-section .vcl .vu { font-size: 0.72rem; color: #2D4A3E; font-weight: 700; display: block; }

/* FABs */
.dnd-demo-section .fabs {
  position: absolute; right: 16px; bottom: 18px;
  display: flex; flex-direction: column; gap: 10px; z-index: 50;
}
.dnd-demo-section .fb {
  width: 40px; height: 40px; border-radius: 50%;
  background: #2D4A3E; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(45,74,62,0.35);
  cursor: pointer; transition: transform 0.15s ease;
}
.dnd-demo-section .fb.clicked { transform: scale(0.82); }
.dnd-demo-section .fb svg { width: 17px; height: 17px; fill: white; }
.dnd-demo-section .fb.share { opacity: 0.7; }

/* Toast */
.dnd-demo-section .toast {
  position: absolute; top: 0; left: 0; right: 0;
  background: white; padding: 16px 20px 14px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.12);
  transform: translateY(-110%);
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 160; border-bottom: 3px solid #48A868;
}
.dnd-demo-section .toast.visible { transform: translateY(0); }
.dnd-demo-section .toast .tt { font-size: 0.82rem; font-weight: 700; color: #2D4A3E; display: block; margin-bottom: 2px; }
.dnd-demo-section .toast .tm { font-size: 0.66rem; color: #666; display: block; }

/* Bottom tab bar */
.dnd-demo-section .btabs {
  height: 48px; background: #2D4A3E;
  display: flex; align-items: center;
  justify-content: space-around; padding: 0 22px;
  flex-shrink: 0;
}
.dnd-demo-section .ti {
  width: 22px; height: 22px; opacity: 0.35;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dnd-demo-section .ti.a { opacity: 1; }
.dnd-demo-section .ti.a::after {
  content: ''; position: absolute; bottom: -6px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; background: white; border-radius: 50%;
}
.dnd-demo-section .ti svg { width: 20px; height: 20px; fill: white; }

/* App URL pill */
.dnd-demo-section .apill {
  background: #2D4A3E; text-align: center;
  padding: 5px 0 12px; flex-shrink: 0;
}
.dnd-demo-section .apill span {
  font-size: 0.62rem; color: white;
  background: rgba(255,255,255,0.14);
  padding: 4px 18px; border-radius: 14px;
  font-weight: 500; letter-spacing: 0.02em;
}

/* Animated cursor */
.dnd-demo-section .acur {
  position: absolute; width: 24px; height: 24px;
  pointer-events: none; z-index: 200;
  opacity: 0; transition: opacity 0.25s ease;
}
.dnd-demo-section .acur.visible { opacity: 0.9; }
.dnd-demo-section .acur svg.ptr {
  width: 20px; height: 20px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.dnd-demo-section .acur .ring {
  position: absolute; top: -4px; left: 0;
  width: 22px; height: 22px;
  border: 2.5px solid rgba(72,168,104,0.6);
  border-radius: 50%;
  transform: scale(0); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.dnd-demo-section .acur.clicking .ring { transform: scale(1.3); opacity: 1; }

/* Responsive */
@media (max-width: 720px) {
  .dnd-demo-section {
    flex-direction: column; align-items: center;
    padding: 60px 20px; gap: 40px;
  }
  .dnd-demo-text { text-align: center; }
}
/* ===== END DND DEMO SECTION ===== */

.phone-frame {
  width: 340px;
  height: 737px;
  background: #1a1a1a;
  border-radius: 44px;
  border: 6px solid #1a1a1a;
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  transform: perspective(1200px) rotateY(-5deg);
  transition: transform 0.6s ease;
  overflow: hidden;
}

.phone-frame:hover {
  transform: perspective(1200px) rotateY(0deg);
}

.phone-island {
  width: 100px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 16px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* Hero Badge Pulse */
.hero-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 166, 126, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(0, 166, 126, 0.2); }
}

/* Hero Trust Stats */
.hero-stat__number {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hero-stat__label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 480px) {
  .hero-stat {
    padding: 0 16px;
  }
  .hero-stat__number {
    font-size: 22px;
  }
  .hero-stat__label {
    font-size: 12px;
  }
}

/* ---------- HOW IT WORKS ---------- */
.steps-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.step-card {
  flex: 1;
  max-width: 300px;
  text-align: center;
  padding: 32px 24px;
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border);
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.step-card::before {
  content: attr(data-step);
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 100px;
  font-weight: 900;
  color: rgba(53, 140, 104, 0.05);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(53,140,104,0.1), rgba(53,140,104,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--primary);
  transition: transform 0.3s ease, background 0.3s ease;
}

.step-card:hover .step-icon {
  transform: scale(1.08);
  background: linear-gradient(135deg, rgba(53,140,104,0.16), rgba(53,140,104,0.08));
}

.step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Step icon bounce on scroll reveal */
.reveal.visible .step-icon {
  animation: iconBounce 0.6s ease both;
}

.reveal.visible .step-card:nth-child(1) .step-icon { animation-delay: 0.1s; }
.reveal.visible .step-card:nth-child(3) .step-icon { animation-delay: 0.2s; }
.reveal.visible .step-card:nth-child(5) .step-icon { animation-delay: 0.3s; }

@keyframes iconBounce {
  0% { transform: scale(0) rotate(-10deg); }
  60% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.step-connector {
  display: flex;
  align-items: center;
  padding-top: 60px;
  width: 80px;
  position: relative;
}

.step-connector::before {
  content: '';
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--border) 0,
    var(--border) 6px,
    transparent 6px,
    transparent 12px
  );
  position: relative;
}

.step-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(60px - 4px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--primary);
}

@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
    align-items: center;
  }
  .step-connector {
    transform: rotate(90deg);
    padding-top: 0;
    padding: 4px 0;
  }
}

/* ---------- FEATURES BENTO GRID ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-flow: dense;
}

.bento-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border);
}

.bento-card:hover .bento-card__icon {
  background: linear-gradient(135deg, rgba(53,140,104,0.18), rgba(53,140,104,0.08));
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.bento-card--wide {
  grid-column: span 2;
}

.bento-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(53,140,104,0.12), rgba(53,140,104,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.bento-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.bento-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.bento-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--warning), #E8941A);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-card--wide {
    grid-column: span 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- INTERACTIVE DEMO ---------- */
.demo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-mobile-only {
  display: block;
}

.demo-desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .demo-mobile-only {
    display: none;
  }
  .demo-desktop-only {
    display: block;
  }
}

.demo-phone {
  perspective: 1200px;
}

.demo-phone .phone-frame {
  transform: none;
}

/* ---------- PRICING ---------- */
.pricing-toggle {
  display: inline-flex;
  background: #F3F4F6;
  border-radius: var(--radius-pill);
  padding: 4px;
}

.pricing-toggle__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pricing-toggle__btn.active {
  background: var(--text);
  color: #fff;
}

.pricing-toggle__badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: rgba(16,162,74,0.1);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

.pricing-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-light);
  padding: 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

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

.pricing-card--premium {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(53,140,104,0.12);
  background: linear-gradient(180deg, rgba(53,140,104,0.03) 0%, var(--surface) 40%);
  animation: pricingGlow 3s ease-in-out infinite;
}

.pricing-card--premium:hover {
  animation: none;
  box-shadow: 0 8px 32px rgba(53,140,104,0.18);
}

.pricing-card__popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1A7A5B, #00A67E);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
}

.pricing-card__header {
  margin-bottom: 24px;
}

.pricing-card__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.pricing-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
}

.pricing-card__price {
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-card__amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  transition: opacity 0.2s ease;
}

.pricing-card__period {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.pricing-feature--yes {
  color: var(--text);
}

.pricing-feature--yes svg {
  color: var(--success);
}

.pricing-feature--no {
  color: var(--text-muted);
}

.pricing-feature--no svg {
  color: var(--text-muted);
}

/* ---------- TESTIMONIALS ---------- */
.testimonial-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.testimonial-stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: var(--warning);
  font-size: 18px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.testimonial-stars svg {
  display: inline-block;
  flex-shrink: 0;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.testimonial-role {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- FAQ ACCORDION ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.faq-item.open {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
  background: #F0F7F0;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.faq-question:hover {
  color: var(--primary);
  background: rgba(53, 140, 104, 0.04);
}

.faq-question__content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.faq-question__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #2D4A3E;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer__content {
  padding: 0 24px 20px 24px;
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
}

.faq-answer__content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.faq-answer__link {
  display: inline-block;
  color: var(--primary);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.faq-answer__link:hover {
  color: #2D6A4F;
  text-decoration: underline;
}

/* ---------- FAQ CTA TRUST ---------- */
.faq-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.faq-cta-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.faq-cta-trust__icon {
  width: 18px;
  height: 18px;
  color: #48A868;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .faq-question {
    padding: 14px 16px;
    font-size: 14px;
  }

  .faq-answer__content {
    padding: 0 16px 16px 16px;
    font-size: 14px;
  }

  .faq-cta-trust {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

}

/* ---------- TRIAL BANNER ---------- */
.trial-banner {
  position: relative;
  padding: 64px 0;
  background: linear-gradient(135deg, #1a3024 0%, #243D2E 40%, #2D7D5E 100%);
  overflow: hidden;
}

.trial-banner__glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(72, 168, 104, 0.12);
  filter: blur(80px);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.trial-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #48A868;
  background: rgba(72, 168, 104, 0.12);
  border: 1px solid rgba(72, 168, 104, 0.25);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin-bottom: 20px;
}

.trial-banner__title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 12px;
}

.trial-banner__subtitle {
  font-size: clamp(15px, 2.5vw, 18px);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 32px;
  font-weight: 400;
}

.trial-banner__features {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.trial-banner__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
}

.trial-banner__feature i,
.trial-banner__feature svg {
  color: #48A868;
  flex-shrink: 0;
}

.trial-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: #ffffff;
  color: #1a3024;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.trial-banner__cta:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}

.trial-banner__cta:active {
  transform: scale(0.98);
}

@media (max-width: 640px) {
  .trial-banner {
    padding: 48px 0;
  }

  .trial-banner__features {
    gap: 16px;
    flex-direction: column;
    align-items: center;
  }
}

/* ---------- CTA DARK SECTION ---------- */
.cta-dark-section {
  background: linear-gradient(135deg, #243D2E 0%, #1a3024 50%, #2D7D5E 100%);
  position: relative;
  overflow: hidden;
}

.cta-dark-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(0,166,126,0.1);
  filter: blur(60px);
  top: -100px;
  right: -100px;
  pointer-events: none;
}

/* ---------- FOOTER ---------- */
.footer-dark {
  background: var(--dark);
}

.footer-link {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--primary);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.2s ease;
}

.social-icon:hover {
  color: var(--primary);
  background: rgba(255,255,255,0.08);
  border-color: rgba(53,140,104,0.3);
  transform: translateY(-2px);
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children animation inside bento grid and steps */
.reveal.visible .bento-card,
.reveal.visible .step-card,
.reveal.visible .testimonial-card {
  animation: fadeInUp 0.5s ease both;
}

.reveal.visible .bento-card:nth-child(1),
.reveal.visible .step-card:nth-child(1),
.reveal.visible .testimonial-card:nth-child(1) { animation-delay: 0.05s; }
.reveal.visible .bento-card:nth-child(2),
.reveal.visible .step-card:nth-child(2),
.reveal.visible .testimonial-card:nth-child(2) { animation-delay: 0.1s; }
.reveal.visible .bento-card:nth-child(3),
.reveal.visible .step-card:nth-child(3),
.reveal.visible .testimonial-card:nth-child(3) { animation-delay: 0.15s; }
.reveal.visible .bento-card:nth-child(4) { animation-delay: 0.2s; }
.reveal.visible .bento-card:nth-child(5) { animation-delay: 0.25s; }
.reveal.visible .bento-card:nth-child(6) { animation-delay: 0.3s; }
.reveal.visible .bento-card:nth-child(7) { animation-delay: 0.35s; }
.reveal.visible .bento-card:nth-child(8) { animation-delay: 0.4s; }
.reveal.visible .bento-card:nth-child(9) { animation-delay: 0.45s; }
.reveal.visible .bento-card:nth-child(10) { animation-delay: 0.5s; }
.reveal.visible .testimonial-card:nth-child(4) { animation-delay: 0.2s; }
.reveal.visible .testimonial-card:nth-child(5) { animation-delay: 0.25s; }
.reveal.visible .testimonial-card:nth-child(6) { animation-delay: 0.3s; }

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

/* ---------- RESPONSIVE ---------- */

/* Very small mobile (320px-380px) */
@media (max-width: 380px) {
  .phone-frame {
    width: 240px;
    height: 521px;
    border-radius: 30px;
    border-width: 4px;
    transform: none;
  }

  .phone-island {
    width: 70px;
    height: 20px;
    top: 6px;
    border-radius: 12px;
  }

  .phone-screen {
    border-radius: 26px;
  }

  .hero-phone__iframe {
    border-radius: 26px;
  }

  .lang-switcher {
    gap: 0;
  }

  .lang-btn {
    width: 28px;
    height: 28px;
  }

  .lang-btn .flag {
    font-size: 16px;
  }
}

/* Small mobile (max 640px) */
@media (max-width: 640px) {
  .btn-cta--lg {
    padding: 14px 28px;
    font-size: 15px;
    width: 100%;
  }

  .btn-outline-white {
    width: 100%;
    justify-content: center;
  }

  .section-title {
    font-size: clamp(24px, 6vw, 32px);
  }

  .pricing-card {
    padding: 28px;
  }

  .pricing-card__amount {
    font-size: 36px;
  }

  .bento-card {
    padding: 22px;
  }

  .testimonial-text {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .testimonial-card {
    margin-bottom: 0;
  }
}

/* ---------- SELECTION ---------- */
::selection {
  background: rgba(53,140,104,0.2);
  color: var(--text);
}

/* ---------- FOCUS VISIBLE ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.lang-btn:focus-visible {
  opacity: 1;
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pricing-toggle__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(53,140,104,0.15);
}

.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.back-to-top:focus-visible {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(53,140,104,0.4);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.admin-tab:focus-visible {
  border-color: var(--border);
  color: var(--text);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.map-filter-btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---------- NO-JS FALLBACK ---------- */
html.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bento-card,
  .pricing-card,
  .testimonial-card {
    transition: none;
  }

  .bento-card:hover,
  .pricing-card:hover,
  .testimonial-card:hover {
    transform: none;
  }

  .btn-cta:hover {
    transform: none;
  }

  .reveal.visible .bento-card,
  .reveal.visible .step-card,
  .reveal.visible .testimonial-card {
    animation: none;
  }

  .step-card:hover .step-icon,
  .bento-card:hover .bento-card__icon,
  .social-icon:hover {
    transform: none;
  }

  .hero-bg { animation: none; }
  .hero-blob--1, .hero-blob--2 { animation: none; }
  .hero-badge { animation: none; }
  .phone-frame { transform: none; animation: none; }
  .phone-frame:hover { transform: none; }
  .step-connector::before { animation: none; }
  .reveal.visible .step-icon { animation: none; }
  .reveal.visible .audience-card { animation: none; }

  .admin-tab-panel.active {
    animation: none;
  }
  .floating-cta {
    transition: none;
  }

  .back-to-top {
    transition: none;
  }

  .scroll-progress {
    transition: none;
  }

  .loading-screen {
    transition: none;
  }

  .pricing-card--premium {
    animation: none;
  }

  .btn-cta::after {
    animation: none;
  }

  .phone-frame {
    animation: none;
  }

  .loading-screen__logo {
    animation: none;
  }

  .le-connection__line {
    animation: none;
  }

  .le-connection__icon {
    animation: none;
  }
}

/* ---------- TOUCH DEVICES ---------- */
@media (hover: none) {
  .bento-card:hover,
  .testimonial-card:hover,
  .pricing-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  .bento-card:hover .bento-card__icon {
    transform: none;
  }

  .social-icon:hover {
    transform: none;
  }

  .step-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
  .audience-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
  .phone-frame:hover {
    transform: perspective(1200px) rotateY(-5deg);
  }

  .navbar-logo:hover {
    transform: none;
  }

  .btn-cta:hover::after {
    animation: none;
    opacity: 0;
  }
}

/* ---------- STEPS TABLET ---------- */
@media (min-width: 769px) and (max-width: 1023px) {
  .step-card {
    max-width: 220px;
    padding: 24px 16px;
  }
  .step-title {
    font-size: 16px;
  }
  .step-desc {
    font-size: 13px;
  }
}

/* ---------- HERO IFRAME ---------- */
.hero-phone__iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 38px;
  pointer-events: auto;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23C8DDD4' stroke-width='3' stroke-dasharray='80' stroke-dashoffset='60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center center no-repeat;
}

/* Hero phone responsive sizes */
@media (min-width: 1440px) {
  .phone-frame {
    width: 380px;
    height: 824px;
  }
}

@media (max-width: 1023px) {
  .phone-frame {
    width: 300px;
    height: 651px;
    border-radius: 40px;
  }
  .phone-screen {
    border-radius: 34px;
  }
  .hero-phone__iframe {
    border-radius: 34px;
  }
  .phone-island {
    width: 90px;
    height: 26px;
  }
}

@media (max-width: 767px) {
  .phone-frame {
    width: 280px;
    height: 607px;
    border-radius: 38px;
  }
  .phone-screen {
    border-radius: 32px;
  }
  .hero-phone__iframe {
    border-radius: 32px;
  }
  .phone-island {
    width: 84px;
    height: 24px;
    top: 10px;
  }
}

@media (max-width: 479px) {
  .phone-frame {
    width: 260px;
    height: 564px;
    border-radius: 34px;
    border-width: 5px;
  }
  .phone-screen {
    border-radius: 29px;
  }
  .hero-phone__iframe {
    border-radius: 29px;
  }
  .phone-island {
    width: 76px;
    height: 22px;
    top: 8px;
    border-radius: 14px;
  }
}

/* ---------- LIVE EDITOR (Split Screen) ---------- */

/* Feature points row */
.le-features {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.le-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 300px;
}

.le-feat__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(53,140,104,0.12), rgba(53,140,104,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.le-feat__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.le-feat__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Split screen layout */
.le-split {
  display: flex;
  align-items: stretch;
  gap: 32px;
  justify-content: center;
}

/* Browser frame */
.le-browser {
  flex: 0 1 520px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  overflow: hidden;
  align-self: stretch;
}

.le-browser__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F3F4F6;
  border-bottom: 1px solid var(--border-light);
}

.le-browser__dots {
  display: flex;
  gap: 6px;
}

.le-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.le-browser__dot--red { background: #EF4444; }
.le-browser__dot--yellow { background: #F59E0B; }
.le-browser__dot--green { background: #10B981; }

.le-browser__url {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  border: 1px solid var(--border-light);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.le-browser__body {
  display: flex;
  min-height: 380px;
}

/* Dark green sidebar */
.le-sidebar {
  width: 140px;
  background: #243D2E;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.le-sidebar__item {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.le-sidebar__item--active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Content area */
.le-content {
  flex: 1;
  padding: 14px;
  background: #FAFBFC;
  overflow: hidden;
}

.le-content__topbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}

.le-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-block;
}

.le-btn--outline {
  border: 1px solid #DC2626;
  color: #DC2626;
  background: transparent;
}

.le-btn--save {
  background: var(--primary);
  color: #fff;
}

.le-section {
  margin-bottom: 14px;
}

.le-section__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.le-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.le-media-box {
  background: var(--surface);
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.le-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.le-pattern {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: default;
}

.le-pattern--active {
  border-color: var(--primary);
  background: rgba(53,140,104,0.06);
  color: var(--primary);
}

.le-field {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-field__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 36px;
}

.le-field__value {
  font-size: 11px;
  color: var(--text);
}

/* Animated connection */
.le-connection {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 10px;
  width: 130px;
}

.le-connection__arrow-h {
  width: 100%;
  height: 24px;
}

.le-connection__arrow-v {
  display: none;
  width: 24px;
  height: 80px;
}

.le-connection__line {
  animation: leDashFlow 1.5s linear infinite;
}

@keyframes leDashFlow {
  to { stroke-dashoffset: -20; }
}

.le-connection__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(53,140,104,0.08);
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.le-connection__icon {
  font-size: 14px;
  animation: leConnPulse 2s ease-in-out infinite;
}

.le-connection__icon svg {
  display: inline-block;
  vertical-align: middle;
}

@keyframes leConnPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

.le-connection__text {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

/* Mobile card mockup (browser-style) */
.le-mobile {
  flex: 0 0 280px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.le-mobile__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F3F4F6;
  border-bottom: 1px solid #E5E7EB;
}

.le-mobile__card {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.le-card__cover {
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, #1a5c3a 0%, #243D2E 100%);
}

.le-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin-top: -28px;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.le-card__avatar-img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.le-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 10px;
}

.le-card__role {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.le-card__company {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.le-card__icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.le-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(53,140,104,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.le-card__save {
  margin: auto 20px 24px;
  width: calc(100% - 40px);
  padding: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  border-radius: 10px;
}

/* Responsive — Tablet */
@media (max-width: 1024px) {
  .le-split {
    flex-direction: column;
    gap: 24px;
  }
  .le-browser {
    flex: 0 1 auto;
    max-width: 560px;
    width: 100%;
  }
  .le-connection {
    width: auto;
    flex-direction: column;
    gap: 8px;
  }
  .le-connection__arrow-h {
    display: none;
  }
  .le-connection__arrow-v {
    display: block;
  }
}

/* Responsive — Mobile */
@media (max-width: 768px) {
  .le-features {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .le-browser {
    max-width: 100%;
  }
  .le-sidebar {
    width: 100px;
    font-size: 10px;
  }
  .le-sidebar__item {
    font-size: 10px;
    padding: 6px 8px;
  }
  .le-mobile {
    flex: 0 0 240px;
  }
  .le-card__cover {
    height: 64px;
  }
  .le-card__avatar {
    width: 48px;
    height: 48px;
    margin-top: -24px;
  }
  .le-card__avatar-img {
    width: 24px;
    height: 24px;
  }
  .le-card__name {
    font-size: 14px;
  }
}

/* Responsive — Small mobile */
@media (max-width: 480px) {
  .le-connection,
  .le-mobile {
    display: none;
  }
  .le-browser__body {
    min-height: 300px;
  }
  .le-sidebar {
    width: 44px;
    padding: 6px 3px;
  }
  .le-sidebar__item {
    font-size: 0;
    padding: 7px 4px;
    text-align: center;
  }
  .le-sidebar__item::before {
    content: '•';
    font-size: 10px;
    color: inherit;
  }
  .le-sidebar__item--active::before {
    color: #fff;
  }
  .le-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .le-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ADMIN PANEL TABS ---------- */
.admin-tabs__nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 24px;
  scrollbar-width: none;
}

.admin-tabs__nav::-webkit-scrollbar {
  display: none;
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.admin-tab:hover {
  border-color: var(--border);
  color: var(--text);
}

.admin-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.admin-tab.active svg {
  color: #fff;
}

.admin-tab svg {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.admin-tab:hover svg {
  color: var(--text);
}

.admin-tabs__content {
  min-height: 300px;
}

.admin-tab-panel {
  display: none;
  animation: fadeInUp 0.3s ease;
}

.admin-tab-panel.active {
  display: block;
}

/* Admin Mockup */
.admin-mockup {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 32px;
  box-shadow: var(--shadow);
}

.admin-mockup__header {
  margin-bottom: 24px;
}

.admin-mockup__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.admin-mockup__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Fields mockup */
.admin-mockup__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-mockup__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #F9FAFB;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.admin-mockup__field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.admin-mockup__field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Colors mockup */
.admin-mockup__colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-mockup__color {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: default;
  border: 3px solid transparent;
  transition: all 0.2s ease;
}

.admin-mockup__color--active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

/* List mockup */
.admin-mockup__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-mockup__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #F9FAFB;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text);
}

.admin-mockup__list-item--add {
  border-style: dashed;
  color: var(--primary);
  cursor: default;
}

.admin-mockup__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(53,140,104,0.1);
  color: var(--primary);
  margin-left: auto;
}

.admin-mockup__badge--new {
  background: rgba(239,68,68,0.1);
  color: #EF4444;
}

/* Gallery mockup */
.admin-mockup__gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.admin-mockup__gallery-item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f0fdf4, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
}

.admin-mockup__gallery-item--add {
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--primary);
}

/* Stats mockup */
.admin-mockup__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.admin-mockup__stat {
  text-align: center;
  padding: 20px 12px;
  background: #F9FAFB;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.admin-mockup__stat-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.admin-mockup__stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* QR mockup */
.admin-mockup__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.admin-mockup__qr-code {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  color: var(--text);
}

.admin-mockup__qr-actions {
  display: flex;
  gap: 8px;
}

.admin-mockup__qr-btn {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-mockup {
    padding: 20px;
  }
  .admin-mockup__stats {
    grid-template-columns: 1fr;
  }
  .admin-mockup__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-mockup__colors {
    justify-content: center;
  }
}

/* ---------- TARGET AUDIENCE ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.audience-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border);
}

.audience-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(53,140,104,0.12), rgba(53,140,104,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 16px;
  font-size: 24px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.audience-card:hover .audience-card__icon {
  transform: scale(1.08);
  background: linear-gradient(135deg, rgba(53,140,104,0.18), rgba(53,140,104,0.08));
}

.audience-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.audience-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Background watermark icon */
.audience-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(53,140,104,0.04), transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* Stagger animation */
.reveal.visible .audience-card {
  animation: fadeInUp 0.5s ease both;
}
.reveal.visible .audience-card:nth-child(1) { animation-delay: 0.05s; }
.reveal.visible .audience-card:nth-child(2) { animation-delay: 0.1s; }
.reveal.visible .audience-card:nth-child(3) { animation-delay: 0.15s; }
.reveal.visible .audience-card:nth-child(4) { animation-delay: 0.2s; }

@media (max-width: 1024px) {
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .audience-card {
    padding: 22px;
  }
}

/* ---------- SUBPAGE HERO ---------- */
.subpage-hero {
  background: linear-gradient(135deg, #061A0F 0%, #0D3320 50%, #061A0F 100%);
  padding: 140px 0 80px;
}

@media (max-width: 768px) {
  .subpage-hero {
    padding: 120px 0 56px;
  }
}

/* ---------- PRICING HERO (extended variant) ---------- */
.pricing-hero {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  padding: 160px 0 48px;
}

.pricing-hero .pricing-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
}

.pricing-hero .pricing-hero__blob--1 {
  width: 500px;
  height: 500px;
  background: #00A67E;
  top: -180px;
  right: -120px;
}

.pricing-hero .pricing-hero__blob--2 {
  width: 350px;
  height: 350px;
  background: #358C68;
  bottom: -120px;
  left: -80px;
}

.pricing-hero__title {
  font-size: 56px;
  line-height: 1.1;
}

.pricing-hero__subtitle {
  opacity: 0.8;
}

/* Toggle on dark (inside hero) */
.pricing-toggle--hero {
  display: inline-flex;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pricing-toggle--hero .pricing-toggle__btn {
  color: rgba(255,255,255,0.7);
  background: transparent;
}

.pricing-toggle--hero .pricing-toggle__btn.active {
  background: #fff;
  color: var(--text);
}

.pricing-toggle--hero .pricing-toggle__badge {
  color: #48A868;
  background: rgba(72,168,104,0.15);
}

@media (max-width: 768px) {
  .pricing-hero {
    min-height: 220px;
    padding: 130px 0 40px;
  }

  .pricing-hero__title {
    font-size: 36px;
  }
}

/* ============================================
   PHASE 4 — New Features
   ============================================ */

/* ---------- MAP TOOLBAR (search + filters) ---------- */
.map-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* ---------- MAP SEARCH ---------- */
.map-search {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.map-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.map-search__input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.map-search__input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.map-search__input:hover {
  border-color: var(--primary);
}

.map-search__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53,140,104,0.12);
}

/* ---------- MAP NO RESULTS ---------- */
.map-no-results {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
}

/* ---------- MAP DEMO BANNER ---------- */
.map-demo-banner {
  background: linear-gradient(135deg, rgba(53,140,104,0.08), rgba(53,140,104,0.04));
  border: 1px solid rgba(53,140,104,0.2);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 20px;
}

/* ---------- MAP FILTERS ---------- */
.map-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Remove double margin when inside toolbar */
.map-toolbar .map-filters {
  margin-bottom: 0;
}

.map-filters__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.map-filters__divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.map-filter-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.map-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.map-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ---------- GOOGLE MAP CONTAINER ---------- */
.map-gmap-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

#google-map {
  width: 100%;
  height: 500px;
}

/* ---------- MAP LOCATION CARDS ---------- */
.map-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.map-location-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: default;
}

.map-location-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: var(--primary);
}

.map-location-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.map-location-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.map-location-card__type {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(53,140,104,0.08);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.map-location-card__address {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.map-location-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.map-location-card__btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.map-location-card__btn:hover {
  color: var(--dark);
}

.map-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.map-trust-strip svg {
  color: var(--success);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  #google-map {
    height: 350px;
  }
  .map-toolbar {
    gap: 12px;
  }
  .map-search__input {
    padding: 10px 14px 10px 40px;
    font-size: 13px;
  }
  .map-filters {
    gap: 8px;
    flex-direction: column;
    width: 100%;
  }
  .map-filters__group--scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    width: 100%;
  }
  .map-filters__group--scrollable::-webkit-scrollbar {
    display: none;
  }
  .map-filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .map-filters__divider {
    display: none;
  }
  .map-demo-banner {
    font-size: 13px;
    padding: 12px 16px;
  }
  .map-locations-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STORE LOCATOR — Nike-style split layout
   ============================================ */
.sl-main {
  padding-top: 64px; /* navbar h-16 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
@media (min-width: 1024px) {
  .sl-main { padding-top: 72px; } /* navbar lg:h-[72px] */
}
.sl-container {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* — Left panel — */
.sl-panel {
  width: 360px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  z-index: 2;
}
.sl-demo-banner {
  background: linear-gradient(135deg, rgba(53,140,104,0.08), rgba(53,140,104,0.04));
  border-bottom: 1px solid rgba(53,140,104,0.15);
  padding: 10px 20px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
  flex-shrink: 0;
}
.sl-panel__header {
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.sl-panel__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.sl-panel__title span:first-child {
  color: var(--primary);
}
.sl-search {
  position: relative;
  padding: 12px 20px 0;
  flex-shrink: 0;
}
.sl-search__icon {
  position: absolute;
  left: 34px;
  top: calc(12px + 50%);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.sl-search__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: #F4F6F8;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sl-search__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53,140,104,0.1);
  background: var(--surface);
}
.sl-search__input::placeholder {
  color: var(--text-muted);
}
.sl-filters {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sl-filters__group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.sl-filters__group--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sl-filters__group--scroll::-webkit-scrollbar { display: none; }

.sl-filter-btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.sl-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.sl-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.sl-no-results {
  padding: 24px 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

/* — Location list (scrollable) — */
.sl-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}
.sl-list::-webkit-scrollbar { width: 4px; }
.sl-list::-webkit-scrollbar-track { background: transparent; }
.sl-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* — Location card inside list — */
.sl-list .map-location-card {
  border-radius: 0;
  border-left: 3px solid transparent;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sl-list .map-location-card:hover {
  background: rgba(53,140,104,0.04);
  box-shadow: none;
  border-bottom-color: var(--border);
}
.sl-list .map-location-card.active {
  border-left-color: var(--primary);
  background: rgba(53,140,104,0.06);
}
.sl-list .map-location-card__btn {
  display: none; /* hide "show on map" button in list — entire card is clickable */
}

/* — Panel bottom CTA — */
.sl-panel__cta {
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.sl-cta-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}
.sl-cta-link:hover { color: var(--dark); }

/* — Right side map — */
.sl-map {
  flex: 1;
  position: relative;
  min-height: 0;
}
.sl-map__canvas {
  width: 100%;
  height: 100%;
}
/* Override the generic #google-map height for store locator context */
.sl-map__canvas#google-map {
  height: 100%;
}

/* — Bottom sheet handle (hidden on desktop) — */
.sl-sheet-handle {
  display: none;
  flex-shrink: 0;
}

/* ============================================
   STORE LOCATOR — Mobile (<768px)
   ============================================ */
@media (max-width: 767px) {
  .sl-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sl-container {
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* Map takes top portion */
  .sl-map {
    height: 45vh;
    min-height: 220px;
    flex: none;
  }
  .sl-map__canvas#google-map {
    height: 100%;
  }

  /* Panel becomes bottom sheet */
  .sl-panel {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-top: 1px solid var(--border);
    flex: 1;
    min-height: 0;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    border-radius: 16px 16px 0 0;
    margin-top: -12px;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }
  .sl-panel.sl-panel--expanded {
    transform: translateY(-20vh);
  }

  /* Sheet handle — first child in panel on mobile */
  .sl-sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 20px 6px;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
  }
  .sl-sheet-handle__bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
  .sl-sheet-handle__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .sl-sheet-handle__label span:first-child {
    color: var(--primary);
  }

  .sl-demo-banner {
    font-size: 11px;
  }

  /* Smaller filter btns on mobile */
  .sl-filter-btn {
    padding: 4px 10px;
    font-size: 11px;
  }
  .sl-search__input {
    font-size: 13px;
    padding: 8px 12px 8px 34px;
  }
  .sl-search__icon {
    left: 32px;
    width: 14px;
    height: 14px;
  }
}

/* ---------- COMPARISON TABLE ---------- */
.comparison-table {
  max-width: 700px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
}

.comparison-table__header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px;
}

.comparison-table__header span {
  text-align: center;
}

.comparison-table__header span:first-child {
  text-align: left;
}

.comparison-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  align-items: center;
  transition: background 0.15s ease;
}

.comparison-table__row:nth-child(even) {
  background: #F9FAFB;
}

.comparison-table__row:nth-child(odd) {
  background: var(--surface);
}

.comparison-table__row:hover {
  background: rgba(53, 140, 104, 0.04);
}

.comparison-table__row:last-child {
  border-bottom: none;
}

.comparison-table__feature {
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.comparison-table__check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  font-size: 18px;
}

.comparison-table__x {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 18px;
}

@media (max-width: 640px) {
  .comparison-table__header {
    padding: 10px 12px;
    font-size: 12px;
  }
  .comparison-table__row {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* Comparison table column highlights */
.comparison-table__col-vbcard {
  background: rgba(53, 140, 104, 0.06);
}

.comparison-table__col-paper {
  background: rgba(239, 68, 68, 0.04);
}

.comparison-table__header .comparison-table__col-vbcard {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
}

.comparison-table__header .comparison-table__col-paper {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ---------- FLOATING MOBILE CTA ---------- */
.floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: none;
}

.floating-cta.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.floating-cta .btn-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .floating-cta {
    display: block;
    animation: floatingCtaSlideUp 0.4s ease both;
  }
}

@keyframes floatingCtaSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---------- PRICING IMPROVEMENTS ---------- */
@keyframes pricingGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(53,140,104,0.12); }
  50% { box-shadow: 0 4px 20px rgba(53,140,104,0.12), 0 0 0 4px rgba(53,140,104,0.08); }
}

.pricing-money-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,162,74,0.08);
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  margin-top: 24px;
}

.pricing-money-back svg {
  flex-shrink: 0;
}

.pricing-savings-badge {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 8px;
  vertical-align: middle;
}

.pricing-pro-badge {
  display: inline-block;
  background: #E8F0E8;
  color: #2D4A3E;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 9998;
  background: linear-gradient(90deg, var(--primary), #00A67E);
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ---------- BACK-TO-TOP BUTTON ---------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 45;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(53,140,104,0.3);
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(53,140,104,0.4);
}

.back-to-top:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 80px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ---------- MICRO-ANIMATIONS ---------- */
.navbar-logo {
  transition: transform 0.2s ease;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

/* CTA Shimmer effect */
.btn-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.25) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}

.btn-cta:hover::after {
  animation: ctaShimmer 0.6s ease forwards;
}

@keyframes ctaShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(200%); }
}

/* Popular badge pulse */
.pricing-card__popular {
  animation: badgePulse 2s ease-in-out infinite;
}

/* Phone shadow pulse */
@keyframes phoneShadowPulse {
  0%, 100% {
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  }
  50% {
    box-shadow: 0 40px 90px rgba(0,0,0,0.35), 0 0 30px rgba(53,140,104,0.1);
  }
}

.phone-frame {
  animation: phoneShadowPulse 4s ease-in-out infinite;
}

/* ---------- LOADING SCREEN ---------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-screen__logo {
  max-width: 120px;
  height: auto;
  animation: loadingPulse 1s ease-in-out infinite;
}

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

/* ---------- TRUST BADGES ---------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.trust-badge:hover {
  color: var(--text);
}

.trust-badge__icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .trust-badges {
    gap: 16px 24px;
  }

  .trust-badge {
    font-size: 12px;
  }
}

/* ---------- BACKDROP-FILTER FALLBACK ---------- */
@supports not (backdrop-filter: blur(16px)) {
  #navbar.scrolled {
    background: rgba(255,255,255,0.96);
  }
  .mobile-menu {
    background: rgba(255,255,255,0.98);
  }
}

/* ===== CARD BUILDER ANIMATION (Hero) ===== */

.cb-wrap{position:relative;width:380px;height:680px;display:flex;align-items:center;justify-content:center;--cb-scale:1;animation:cbFloat 6s ease-in-out infinite}
@keyframes cbFloat{0%,100%{transform:scale(var(--cb-scale)) translateY(0)}50%{transform:scale(var(--cb-scale)) translateY(-16px)}}

/* CB PHONE */
.cb-phone{width:290px;height:610px;background:#1a1a1e;border-radius:50px;padding:10px;position:relative;
  box-shadow:0 50px 100px rgba(0,0,0,.25),0 15px 40px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06);z-index:10}
.cb-phone::before{content:'';position:absolute;right:-2.5px;top:150px;width:3px;height:44px;background:#2c2c30;border-radius:0 2px 2px 0}
.cb-phone::after{content:'';position:absolute;left:-2.5px;top:125px;width:3px;height:28px;background:#2c2c30;border-radius:2px 0 0 2px;box-shadow:0 44px 0 #2c2c30,0 78px 0 #2c2c30}

.cb-scr{width:100%;height:100%;border-radius:42px;overflow:hidden;background:#eaefe8;display:flex;flex-direction:column;position:relative}

/* Scrollable area */
.cb-scroll-wrap{flex:1;overflow:hidden;position:relative}
.cb-scroll-inner{position:absolute;top:0;left:0;right:0}

/* MAIN CARD */
.cb-main-card{margin:8px 8px 0;background:white;border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.05);overflow:visible;position:relative}

/* HEADER */
.cb-hdr{height:95px;position:relative;border-radius:18px 18px 0 0;overflow:hidden;background:#d5ddd5}
.cb-hdr-skel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .5s ease}
.cb-hdr-skel svg{width:32px;height:32px;fill:#b0b8b0}
.cb-hdr-fill{position:absolute;inset:0;background:linear-gradient(155deg,#2D4A3E 0%,#3a6350 35%,#4a7862 70%,#527a65 100%);clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.4,0,.2,1)}
.cb-hdr-waves{position:absolute;inset:0;opacity:0;transition:opacity .5s ease .4s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 95'%3E%3Cpath d='M0 30Q60 12 120 30T240 30' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath d='M0 48Q60 30 120 48T240 48' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M0 64Q60 48 120 64T240 64' fill='none' stroke='%23fff' stroke-width='.9'/%3E%3Cpath d='M0 78Q60 64 120 78T240 78' fill='none' stroke='%23fff' stroke-width='.7'/%3E%3C/svg%3E") repeat-x;background-size:240px 95px;animation:cb-wm 8s linear infinite}
@keyframes cb-wm{to{background-position-x:240px}}
.cb-hdr.on .cb-hdr-skel{opacity:0}
.cb-hdr.on .cb-hdr-fill{clip-path:inset(0 0 0% 0)}
.cb-hdr.on .cb-hdr-waves{opacity:.15}

/* AVATAR */
.cb-av-wrap{width:58px;height:58px;margin:-29px auto 0;position:relative;z-index:5}
.cb-av-skel{width:58px;height:58px;border-radius:50%;background:#d0d8d0;border:3px solid white;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;transition:opacity .4s ease,transform .4s ease}
.cb-av-skel svg{width:22px;height:22px;fill:#a8b0a8}
.cb-av-skel.off{opacity:0;transform:scale(.6)}
.cb-av-real{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#3d6b55,#2D4A3E);border:3px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.12);position:absolute;top:0;left:0;opacity:0;transform:scale(.3);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.cb-av-real.on{opacity:1;transform:scale(1)}
.cb-av-real span{font-size:.9rem;font-weight:700;color:white;letter-spacing:.04em}

/* BODY */
.cb-card-body{padding:6px 16px 14px}

/* Name */
.cb-nm-skel{text-align:center;transition:opacity .3s ease,max-height .3s ease;max-height:45px;overflow:hidden}
.cb-nm-skel.off{opacity:0;max-height:0}
.cb-sk-l{height:12px;border-radius:6px;background:#dde3dd;margin:5px auto}
.cb-sk-l.w70{width:68%}.cb-sk-l.w40{width:38%}

.cb-nm-real{text-align:center;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .4s ease}
.cb-nm-real.on{max-height:55px;opacity:1;margin-bottom:8px}
.cb-nm-real .n{font-size:1.08rem;font-weight:700;color:#2D4A3E;display:inline;border-right:2px solid #2D4A3E;animation:cb-blink .8s infinite}
.cb-nm-real .n.done{border-right-color:transparent;animation:none}
.cb-nm-real .c{font-size:.72rem;font-weight:500;color:#888;display:inline;border-right:2px solid #888;animation:cb-blink .8s infinite}
.cb-nm-real .c.done{border-right-color:transparent;animation:none}
@keyframes cb-blink{0%,50%{border-right-color:currentColor}51%,100%{border-right-color:transparent}}

/* CONTACT ROWS */
.cb-rows{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.cb-row{display:flex;align-items:center;gap:10px;padding:8px 0;opacity:0;transform:scale(.3);transform-origin:left center;transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.cb-row.on{opacity:1;transform:scale(1)}

/* Skeleton row */
.cb-row.skel .cb-rc{background:#dde3dd;border-radius:10px}
.cb-row.skel .cb-rl{height:10px;border-radius:5px;background:#dde3dd;width:62%}

/* Real row */
.cb-row .cb-rc{width:30px;height:30px;border-radius:10px;background:#e4e9e4;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.cb-row .cb-rc svg{width:15px;height:15px;fill:none;stroke:#2D4A3E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-row .cb-rv{font-size:.72rem;color:#333;font-weight:500}

/* Burst particles */
.cb-burst{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}
.cb-burst span{position:absolute;width:3px;height:7px;background:#48A868;border-radius:2px;opacity:0;animation:cb-burstOut .5s ease-out forwards}
@keyframes cb-burstOut{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) translateY(0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-15px) scale(.3)}}

/* CTA */
.cb-cta{border:1.5px solid #5a8068;color:#2D4A3E;background:transparent;border-radius:14px;padding:10px;font-size:.68rem;font-weight:600;text-align:center;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.cb-cta.on{opacity:1;transform:translateY(0)}
.cb-cta svg{width:14px;height:14px;fill:none;stroke:#2D4A3E;stroke-width:1.8}

/* URL BAR */
.cb-url-bar{margin-top:8px;padding:7px 12px;background:#f0f3f0;border-radius:16px;display:flex;align-items:center;gap:4px;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.cb-url-bar.on{opacity:1;transform:translateY(0)}
.cb-url-bar svg{width:10px;height:10px;fill:none;stroke:#999;stroke-width:2;flex-shrink:0}
.cb-url-bar span{font-size:.52rem;color:#aaa}
.cb-url-bar b{font-size:.52rem;color:#2D4A3E;font-weight:700}

/* SECTION CARD (O nás) */
.cb-section-card{margin:8px 8px 0;background:white;border-radius:18px;padding:14px 16px 16px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.cb-sec-badge{display:inline-block;background:#e8f0e8;color:#2D4A3E;font-size:.58rem;font-weight:700;padding:3px 11px;border-radius:10px;margin-bottom:6px}
.cb-year-box{background:#f2f5f2;border-radius:10px;padding:8px 12px;display:block;width:fit-content;margin-bottom:8px}
.cb-year-box .lbl{font-size:.42rem;color:#b0b0b0;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:block}
.cb-year-box .yr{font-size:1rem;font-weight:800;color:#2D4A3E;display:block;margin-top:1px}
.cb-sec-heading{font-size:.56rem;color:#48A868;font-weight:600;margin-bottom:2px}
.cb-sec-text{font-size:.54rem;color:#666;line-height:1.45;margin-bottom:8px}

/* FAB BUTTONS */
.cb-fab-wrap{position:absolute;right:14px;bottom:46px;display:flex;flex-direction:column;gap:8px;z-index:15}
.cb-fab{width:34px;height:34px;border-radius:50%;background:#2D4A3E;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.18);opacity:0;transform:scale(.3);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.cb-fab.on{opacity:1;transform:scale(1)}
.cb-fab svg{width:15px;height:15px;fill:white}

/* TAB BAR */
.cb-tab-bar{height:36px;background:white;display:flex;align-items:center;justify-content:space-around;flex-shrink:0;border-top:1px solid #eff2ef}
.cb-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0}
.cb-tab svg{width:17px;height:17px}
.cb-tab.inactive svg{fill:none;stroke:#bbb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-tab.active svg{fill:#2D4A3E;stroke:#2D4A3E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-tab.active::after{content:'';width:4px;height:4px;border-radius:50%;background:#2D4A3E}

/* FLOATING CARDS */
.cb-fc{position:absolute;background:white;border-radius:14px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.13);display:flex;align-items:center;gap:8px;z-index:20;opacity:0;pointer-events:none}
.cb-fc .cb-fc-i{width:30px;height:30px;border-radius:10px;background:#e4e9e4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cb-fc .cb-fc-i svg{width:15px;height:15px;fill:none;stroke:#2D4A3E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-fc .cb-fc-t{font-size:.68rem;color:#333;font-weight:500;white-space:nowrap}

.cb-fc-0{right:-28px;top:235px}
.cb-fc-1{left:-38px;top:290px}
.cb-fc-2{right:-32px;top:345px}
.cb-fc-3{left:-42px;top:395px}
.cb-fc-4{right:-24px;top:445px}

/* RESPONSIVE SCALING — uses --cb-scale so animation and scale coexist */
@media (min-width:1440px){
  .cb-wrap{--cb-scale:1.15}
}
@media (max-width:1023px){
  .cb-wrap{--cb-scale:0.88}
}
@media (max-width:767px){
  .cb-wrap{--cb-scale:0.80}
}
@media (max-width:479px){
  .cb-wrap{--cb-scale:0.72}
}
@media (max-width:380px){
  .cb-wrap{--cb-scale:0.62}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cb-wrap{animation:none;transform:scale(var(--cb-scale))}
  .cb-hdr-waves{animation:none}
  .cb-nm-real .n,.cb-nm-real .c{animation:none}
  .cb-burst span{animation:none}
}

/* ===== STICKY CTA — mobile only ===== */
.sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 65px;
  }

  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2D4A3E;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 9997;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
  }

  .sticky-cta-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .sticky-cta-text b {
    color: white;
    font-weight: 600;
    display: block;
    font-size: 0.8rem;
  }

  .sticky-cta-btn {
    background: #48A868;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(72, 168, 104, 0.3);
  }
}