/* ═══ NEXUS PRICING — Deep-Navy Bank-Trust v3.0 ═══ */
:root {
  --bg: #F7F9FC;
  --bg-2: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border: #E4E9F0;
  --border-strong: #D5DCE6;
  --border-glow: rgba(19,49,92,.22);
  --text: #0F1B2D;
  --text-2: #475569;
  --text-3: #667085;
  --brand: #13315C;
  --accent: #1D4ED8;
  --accent-2: #1A3FAE;
  --accent-3: #13315C;
  --accent-soft: #EAF0FE;
  --accent-glow: rgba(29,78,216,.16);
  --green: #15803D;
  --amber: #B45309;
  --red: #B91C1C;
  --r: 14px;
  --rs: 10px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior: smooth }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ═══ SCROLL ANIMATIONS ═══ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll[data-delay="1"] { transition-delay: 0.1s }
.animate-on-scroll[data-delay="2"] { transition-delay: 0.2s }
.animate-on-scroll[data-delay="3"] { transition-delay: 0.3s }
.animate-on-scroll[data-delay="4"] { transition-delay: 0.4s }
.animate-on-scroll[data-delay="5"] { transition-delay: 0.5s }
.animate-on-scroll[data-delay="6"] { transition-delay: 0.6s }

/* ═══ MESH GRADIENT BACKGROUND — neutralized (DOM kept, no animated blobs) ═══ */
.hero-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-mesh-blob { display: none }
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1) }
}

/* Noise overlay removed */
.hero-mesh::after { display: none }

/* Grid pattern overlay removed */
.hero-grid { display: none }

/* ═══ HERO ═══ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

/* ═══ NAVIGATION ═══ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Only the properties that actually change. `all` made the browser interpolate every
     computed value on a bar that is fixed over the whole page — including the backdrop
     filter — which is what made the scrolled state arrive as a smear. */
  transition: padding .35s cubic-bezier(.16,1,.3,1),
              background .35s ease,
              box-shadow .35s ease,
              border-color .35s ease;
  border-bottom: 1px solid transparent;
}
/* Added by the scroll listener in pricing.js past the first 24px. Until that existed this
   whole block was dead CSS: the bar stayed transparent at every scroll position, so the page
   ran underneath it and the hero cards showed THROUGH the navigation — the rocket from
   "Start Working" sitting between the KU and AR buttons. */
.nav.scrolled {
  padding: 12px 48px;
  /* Opaque, not frosted. A translucent bar sounds nicer than it looks here: the hero titles are
     96px and nearly black, and at 92% white with an 18px blur they dragged a grey smear across
     the whole bar as they passed under it. The page behind is #F7F9FC, so solid white reads as a
     deliberate surface rather than a panel with something stuck behind it. */
  background: #fff;
  border-bottom-color: rgba(19,49,92,.10);
  /* Cast downward and soft, so the bar floats above the page rather than ruling a line across it. */
  box-shadow: 0 8px 28px -16px rgba(15,27,45,.45);
}
/* How far down the page you are. Cheap, and it gives the bar a reason to exist. */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.nav.scrolled .nav-progress { opacity: 1 }

/* A fixed bar hides whatever an anchor jumps to. Every link in the nav pointed at a section
   whose heading then landed underneath it. */
#how-it-works, #packages, [id][class*="-section"] { scroll-margin-top: 96px }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .nav, .nav-progress { transition: none }
}
.nav-brand { display: flex; align-items: center; gap: 10px }
.nav-logo {
  width: 40px; height: 40px;
  background: var(--brand);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff;
}
.nav-name { font-weight: 700; font-size: 22px; letter-spacing: -.5px; color: var(--brand) }
.nav-tag {
  background: var(--accent-soft);
  color: var(--brand); font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; letter-spacing: .4px;
}
.nav-links { display: flex; align-items: center; gap: 28px }
.nav-link {
  color: var(--text-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: color .2s;
  position: relative;
}
.nav-link:hover { color: var(--text) }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100% }
.nav-link--login {
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 9px 24px;
  border-radius: 10px;
  color: #fff;
  transition: all 0.3s;
}
.nav-link--login::after { display: none }
.nav-link--login:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}

/* ═══ HERO CONTENT ═══ */
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 40px;
  position: relative;
  z-index: 5;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(29,78,216,.15);
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 13px; font-weight: 500;
  color: var(--accent-2);
  margin-bottom: 32px;
}
.hero-badge-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.4) }
  50% { box-shadow: 0 0 0 6px transparent }
}

.hero-title {
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 28px;
  color: var(--brand);
}
.hero-gradient {
  color: var(--brand);
}
.hero-gradient-alt {
  color: var(--brand);
}
@keyframes gradShift {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-2);
  max-width: 600px;
  margin-bottom: 40px;
  line-height: 1.8;
  font-weight: 400;
}

/* ═══ HERO PRICE BADGE ═══ */
.hero-price-badge {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 48px;
  margin-bottom: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  overflow: hidden;
}
.hero-price-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid var(--brand);
  pointer-events: none;
}
@keyframes rotateBorder {
  to { transform: rotate(360deg) }
}
.hero-price-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--accent-2); font-weight: 600; margin-bottom: 4px;
}
.hero-price-amount {
  font-size: 64px; font-weight: 700; letter-spacing: -2px; line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hero-price-dollar {
  font-size: 36px; vertical-align: super;
}
.hero-price-period {
  font-size: 14px; color: var(--text-3); margin-top: 6px; font-weight: 500;
}

/* ═══ HERO CTA BUTTON ═══ */
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 18px 42px;
  border-radius: 10px;
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: background .18s, box-shadow .18s, transform .18s;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  position: relative;
  overflow: hidden;
}
.hero-cta::before { display: none }
.hero-cta:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}

/* ═══ ORBITING ICONS ═══ */
.orbit-container {
  position: absolute;
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(19,49,92,.10);
  border-radius: 50%;
  animation: none;
}
.orbit-ring:nth-child(2) {
  inset: 60px;
  border-color: rgba(19,49,92,.08);
  animation: none;
}
.orbit-icon {
  position: absolute;
  width: 48px; height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  animation: none;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}
.orbit-ring:nth-child(2) .orbit-icon {
  animation: none;
}
@keyframes orbitSpin { to { transform: rotate(360deg) } }
@keyframes orbitCounterSpin { to { transform: rotate(-360deg) } }

/* Position icons around orbit */
.orbit-icon:nth-child(1) { top: -24px; left: 50%; margin-left: -24px }
.orbit-icon:nth-child(2) { top: 50%; right: -24px; margin-top: -24px }
.orbit-icon:nth-child(3) { bottom: -24px; left: 50%; margin-left: -24px }
.orbit-icon:nth-child(4) { top: 50%; left: -24px; margin-top: -24px }
.orbit-icon:nth-child(5) { top: 10%; right: 10% }
.orbit-icon:nth-child(6) { bottom: 10%; left: 10% }

/* ═══ STATS BAR ═══ */
.stats-bar {
  padding: 48px;
  position: relative;
  z-index: 1;
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}
.stat-item {
  text-align: center;
  flex: 1;
  padding: 16px 24px;
}
.stat-number {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

/* ═══ HOW IT WORKS ═══ */
.how-section { padding: 100px 48px; position: relative; z-index: 1 }
.section-title {
  font-size: 40px; font-weight: 700;
  text-align: center; margin-bottom: 12px;
  letter-spacing: -1px;
  color: var(--brand);
}
.section-subtitle {
  text-align: center; color: var(--text-2);
  max-width: 550px; margin: 0 auto 64px;
  font-size: 15px; line-height: 1.7;
}
.steps {
  display: flex; align-items: stretch;
  justify-content: center; max-width: 1100px; margin: 0 auto;
}
.step {
  text-align: center;
  padding: 36px 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  flex: 1; max-width: 230px;
  position: relative;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.step:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.step-number {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,27,45,.05);
}
.step-icon-wrap {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: var(--accent-soft);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.step-icon { font-size: 28px; display: inline-flex; align-items: center; color: var(--brand) }
.step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px }
.step p { font-size: 13px; color: var(--text-2); line-height: 1.5 }
.step-connector { display: flex; align-items: center; padding: 0 4px }
.step-connector-line {
  width: 40px; height: 2px;
  background: var(--border-strong);
  opacity: .6;
}

/* ═══ FEATURES STRIP ═══ */
.features-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; padding: 32px 48px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative; z-index: 1; flex-wrap: wrap;
}
.feature-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
}
.feature-icon { font-size: 18px; color: var(--brand); display: inline-flex; align-items: center }
.feature-divider { width: 1px; height: 20px; background: var(--border) }

/* ═══ PACKAGES GRID ═══ */
.packages-section { padding: 100px 48px 120px; position: relative; z-index: 1 }
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Package Card Base */
.pkg-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 46px 28px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.pkg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--brand);
  opacity: 0;
  transition: opacity .18s;
  animation: none;
}
.pkg-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.pkg-card:hover::before { opacity: 1 }

/* Card glow on hover — neutralized */
.pkg-card::after { display: none }

.pkg-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; position: relative; z-index: 1 }
.pkg-icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  background: linear-gradient(140deg, #EFF4FF, #DDE8FE);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(15,27,45,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pkg-icon svg { width: 26px; height: 26px; }
/* Featured (live) card: deep-navy tile with a white icon so it draws the eye */
.pkg-card--live .pkg-icon {
  background: linear-gradient(140deg, #2456E6, #13315C);
  color: #fff;
  box-shadow: 0 6px 16px rgba(19,49,92,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.pkg-card:hover .pkg-icon { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,27,45,.10); }
.pkg-card--live:hover .pkg-icon { box-shadow: 0 8px 20px rgba(19,49,92,.34), inset 0 1px 0 rgba(255,255,255,.18); }
.pkg-check { width: 13px; height: 13px; color: var(--green); flex-shrink: 0; }
.pkg-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: auto;
  position: relative; z-index: 1;
}
.pkg-features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.4;
}
.pkg-features .pkg-check { margin-top: 2px; }
.pkg-name { font-size: 18px; font-weight: 700; line-height: 1.2 }
.pkg-desc { font-size: 13px; color: var(--text-2); margin-bottom: 16px; line-height: 1.5; position: relative; z-index: 1 }
.pkg-industry-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-soft);
  color: var(--brand);
  border: 1px solid rgba(29,78,216,.20);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.pkg-core-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-3); margin-bottom: 8px;
  position: relative; z-index: 1;
}
.pkg-core-count {
  font-size: 12px; color: var(--text-2); margin-bottom: auto;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
}

/* Package Bottom */
.pkg-bottom {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.pkg-price-tag {
  font-size: 24px; font-weight: 700; letter-spacing: -.5px;
  color: var(--brand);
}
.pkg-price-tag span {
  font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 4px;
}

/* Primary CTA button */
.pkg-get-btn {
  padding: 11px 28px;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  position: relative;
  overflow: hidden;
}
.pkg-get-btn::before { display: none }
.pkg-get-btn:hover {
  background: var(--accent-2);
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  transform: translateY(-2px);
}

/* Demo link (subtle text link below the button) */
.pkg-demo-link {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .2s;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  padding: 0;
}
.pkg-demo-link:hover {
  color: var(--accent);
}

.pkg-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Demo button — ghost/green "try it" action on live cards */
.pkg-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  color: var(--green);
  background: rgba(21,128,61,.10);
  border: 1px solid rgba(21,128,61,.28);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.pkg-demo-btn::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  flex-shrink: 0;
}
.pkg-demo-btn:hover {
  background: rgba(21,128,61,.16);
  border-color: rgba(21,128,61,.5);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}

/* Live package — elevated so the buyable card stands out */
.pkg-card--live {
  border-color: rgba(21,128,61,.3);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(21,128,61,.08), 0 2px 8px rgba(15,27,45,.06);
}
.pkg-card--live::before {
  opacity: 1 !important;
  background: var(--green) !important;
}
.pkg-card--live:hover {
  border-color: rgba(21,128,61,.45);
  box-shadow: 0 0 0 1px rgba(21,128,61,.15), 0 12px 32px rgba(15,27,45,.08);
}
.pkg-live-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--green);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: .3px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15,27,45,.05);
}

/* Coming Soon — clean approach without heavy overlay */
.pkg-card--soon {
  cursor: default;
  position: relative;
  opacity: .65;
  transition: all .4s;
}
.pkg-card--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  opacity: .75;
}
.pkg-card--soon::before { display: none }
.pkg-card--soon::after { display: none }
.pkg-soon-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(180,83,9,.10);
  border: 1px solid rgba(180,83,9,.25);
  color: var(--amber);
  font-size: 10px; font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: .3px;
  z-index: 2;
}
.pkg-get-btn--disabled {
  background: rgba(15,27,45,.04) !important;
  color: var(--text-3) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  border: 1px solid var(--border);
}
.pkg-get-btn--disabled::before { display: none }
.pkg-get-btn--disabled:hover { transform: none !important; box-shadow: none !important }

/* ═══ MODALS ═══ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,27,45,.45);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
}
.modal-overlay.show { display: flex }
.signup-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  max-width: 560px; width: 100%;
  position: relative;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn .3s ease;
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(20px) }
  to { opacity: 1; transform: scale(1) translateY(0) }
}
.modal-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none;
  color: var(--text-3); font-size: 20px;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.modal-close:hover { background: rgba(15,27,45,.05); color: var(--text) }
.signup-header { text-align: center; margin-bottom: 24px }
.signup-pkg-icon {
  width: 60px; height: 60px; margin: 0 auto 10px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #2456E6, #13315C);
  color: #fff;
  box-shadow: 0 6px 16px rgba(19,49,92,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.signup-pkg-icon svg { width: 30px; height: 30px; }
.signup-header h2 { font-size: 22px; font-weight: 700; color: var(--brand) }
.signup-pkg-desc { color: var(--text-2); font-size: 14px; margin-top: 4px }
.signup-price-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(29,78,216,.20);
  padding: 8px 20px;
  border-radius: 50px;
}
.signup-price { font-size: 20px; font-weight: 700; color: var(--accent-2) }
.signup-price-iqd { font-size: 13px; font-weight: 600; color: var(--text-2) }
.signup-price-label { font-size: 12px; color: var(--text-3) }

/* FIB online-payment fee warning (shown in signup form when FIB selected) */
.fib-fee-warning {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  background: rgba(180,83,9,.10);
  border: 1px solid rgba(180,83,9,.25);
  border-radius: var(--rs);
  padding: 10px 14px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--amber);
}
.fib-fee-warning-icon { flex-shrink: 0; display: inline-flex; align-items: center }
.signup-modules {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-bottom: 24px;
}
.mod-tag { font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 500 }
.mod-tag--core { background: rgba(21,128,61,.10); color: var(--green); border: 1px solid rgba(21,128,61,.20) }
.mod-tag--industry { background: var(--accent-soft); color: var(--brand); border: 1px solid rgba(29,78,216,.20) }
.form-row { margin-bottom: 16px }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 6px; color: var(--text-2);
}
.form-group input, .form-group select {
  width: 100%; padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--text); font-size: 14px;
  font-family: inherit; transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.phone-input-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  background: rgba(255,255,255,.03);
  overflow: hidden; transition: border-color .2s;
}
.phone-input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.phone-prefix {
  display: flex; align-items: center;
  padding: 0 12px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  user-select: none; letter-spacing: .3px;
}
.phone-input-group input {
  border: none !important; background: transparent !important;
  border-radius: 0 !important; box-shadow: none !important;
  flex: 1; min-width: 0;
}
.signup-notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid rgba(29,78,216,.12);
  border-radius: var(--rs); padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.notice-icon { font-size: 18px; flex-shrink: 0; display: inline-flex; align-items: center; color: var(--accent) }
.signup-notice strong { color: var(--text); display: block; margin-bottom: 2px }
.signup-error {
  background: rgba(185,28,28,.08);
  border: 1px solid rgba(185,28,28,.22);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--rs);
  font-size: 13px; margin-bottom: 16px;
  display: none;
}
.signup-error.show { display: block }
.signup-submit {
  width: 100%; padding: 16px;
  background: var(--accent);
  border: none; border-radius: 10px;
  color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.signup-submit::before { display: none }
.signup-submit:hover { background: var(--accent-2); box-shadow: 0 2px 8px rgba(15,27,45,.06) }
.signup-submit:disabled { opacity: .6; cursor: not-allowed }

/* ═══ SUCCESS ═══ */
.success-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 36px;
  max-width: 480px; width: 100%;
  text-align: center;
  animation: modalIn .4s ease;
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.success-icon { font-size: 64px; margin-bottom: 16px; color: var(--green) }
.success-modal h2 { font-size: 26px; font-weight: 700; margin-bottom: 24px; color: var(--brand) }
.success-details {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 20px; margin-bottom: 28px;
  font-size: 14px; line-height: 2;
}
.success-details strong { color: var(--accent-2) }
.success-details .cred-warn {
  font-size: 12px; color: var(--amber); margin-top: 8px;
  background: rgba(180,83,9,.08);
  border: 1px solid rgba(180,83,9,.18);
  border-radius: 8px; padding: 12px;
}
.success-close-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 14px 36px;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.success-close-btn:hover {
  background: var(--accent-2);
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  transform: translateY(-2px);
}

/* ═══ LANGUAGE SWITCHER ═══ */
/* This was rgba(255,255,255,.04) — a 4%-opaque white, left over from a dark theme. On a light
   page it is nothing at all, so the switcher had no surface of its own and whatever was
   scrolling behind the transparent nav showed straight through the gaps between EN, KU and AR. */
.lang-switcher {
  display: flex; gap: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
  margin-right: 8px;
  box-shadow: 0 1px 2px rgba(15,27,45,.04);
}
.lang-btn {
  background: none; border: none;
  color: var(--text-3);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
  font-family: var(--font); letter-spacing: .3px;
  line-height: 1;
}
.lang-btn:hover { color: var(--text); background: var(--accent-soft) }
.lang-btn.active, .lang-btn.active:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(29,78,216,.25);
}
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ═══ RTL SUPPORT ═══ */
html[dir="rtl"] { font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Inter', sans-serif }
html[dir="rtl"] body { font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Inter', sans-serif }
html[dir="rtl"] .nav-links { direction: ltr }
html[dir="rtl"] .nav-link--login { direction: rtl }
html[dir="rtl"] .phone-prefix { border-right: none; border-left: 1px solid var(--border) }
html[dir="rtl"] .signup-notice { direction: rtl }
html[dir="rtl"] .pw-label { margin-left: 0; margin-right: auto }
html[dir="rtl"] .step-connector-line { background: var(--border-strong) }
html[dir="rtl"] .why-grid, html[dir="rtl"] .cta-trust { direction: rtl }

/* ═══ WHY NEXUS SECTION ═══ */
.why-section {
  position: relative; z-index: 1;
  padding: 120px 48px 100px; overflow: hidden;
}
.why-glow { display: none }
.why-content {
  text-align: center; margin-bottom: 64px;
  position: relative; z-index: 2;
}
.why-badge {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid rgba(29,78,216,.15);
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 24px;
  letter-spacing: .4px;
}
.why-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700; letter-spacing: -1px;
  line-height: 1.15; margin-bottom: 20px;
  color: var(--brand);
}
.why-gradient {
  color: var(--brand);
}
.why-subtitle {
  font-size: 16px; color: var(--text-2);
  max-width: 560px; margin: 0 auto; line-height: 1.7;
}
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 2;
}

/* Why Card — with animated border */
.why-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px 28px;
  overflow: hidden;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.why-card:hover::before { opacity: 1 }
.why-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.why-card-glow { display: none }
.why-card-icon {
  font-size: 32px; margin-bottom: 16px;
  width: 56px; height: 56px;
  background: var(--accent-soft);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s;
  color: var(--brand);
}
.why-card:hover .why-card-icon { transform: none }
.why-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.3px }
.why-card p { font-size: 13px; color: var(--text-2); line-height: 1.7 }

/* ═══ CTA SECTION ═══ */
.cta-section {
  position: relative; z-index: 1;
  padding: 120px 48px; overflow: hidden; text-align: center;
}
.cta-bg-orb { display: none }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1) }
}
.cta-content {
  position: relative; z-index: 2;
  max-width: 700px; margin: 0 auto;
}
.cta-icon-row {
  display: flex; justify-content: center;
  gap: 16px; margin-bottom: 36px;
}
.cta-float-icon {
  font-size: 28px;
  width: 52px; height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  animation: none;
  transition: border-color .18s, background .18s, transform .18s;
  color: var(--brand);
}
.cta-float-icon:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0) }
}
.cta-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700; letter-spacing: -1px;
  margin-bottom: 16px; line-height: 1.15;
  color: var(--brand);
}
.cta-subtitle {
  font-size: 16px; color: var(--text-2);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.7;
}
.cta-buttons {
  display: flex; justify-content: center;
  gap: 16px; margin-bottom: 56px; flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 36px; border-radius: 14px;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  cursor: pointer; border: none; font-family: var(--font);
  position: relative; overflow: hidden;
}
.cta-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}
.cta-btn--primary::before { display: none }
.cta-btn--primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.cta-btn--secondary {
  background: rgba(21,128,61,.10);
  border: 1px solid rgba(21,128,61,.20);
  color: var(--green);
}
.cta-btn--secondary:hover {
  background: rgba(21,128,61,.16);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}
.cta-trust { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap }
.cta-trust-item { text-align: center }
.cta-trust-number {
  font-size: 32px; font-weight: 700; letter-spacing: -1px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.cta-trust-label {
  font-size: 12px; color: var(--text-3);
  font-weight: 500; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .4px;
}
.cta-trust-divider {
  width: 1px; height: 40px;
  background: var(--border);
  align-self: center;
}

/* ═══ DOWNLOAD / OFFLINE EDITION ═══ */
.download-section {
  position: relative; z-index: 1;
  padding: 100px 48px;
  overflow: hidden;
}
.download-card {
  max-width: 1080px; margin: 0 auto;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
  border-radius: 16px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px; align-items: center;
  overflow: hidden;
}
.download-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand); animation: none;
}
.download-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(21,128,61,.10);
  border: 1px solid rgba(21,128,61,.25);
  color: var(--green);
  padding: 7px 16px; border-radius: 50px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  margin-bottom: 20px;
}
.download-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700; letter-spacing: -1px; line-height: 1.1;
  margin-bottom: 16px;
  color: var(--brand);
}
.download-title .grad {
  color: var(--green);
}
.download-subtitle {
  font-size: 16px; color: var(--text-2); line-height: 1.75;
  margin-bottom: 26px; max-width: 540px;
}
.download-features { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.download-feature {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-2); font-weight: 500;
}
.download-feature .dl-check {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(21,128,61,.12); color: var(--green);
  font-size: 11px; font-weight: 700;
}
.download-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.download-os-icon {
  width: 84px; height: 84px; border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(29,78,216,.20);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.download-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  background: var(--accent);
  color: #fff; padding: 18px 32px; border-radius: 10px;
  font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  position: relative; overflow: hidden;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.download-btn::before { display: none }
.download-btn:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.download-btn.is-disabled {
  background: rgba(15,27,45,.04); color: var(--text-3);
  box-shadow: none; pointer-events: none; border: 1px solid var(--border);
}
.download-meta { font-size: 12.5px; color: var(--text-3); text-align: center; line-height: 1.6 }
.download-meta strong { color: var(--text-2); font-weight: 700 }

@media (max-width: 820px) {
  .download-section { padding: 70px 20px }
  .download-card { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px }
  .download-cta-wrap { order: -1 }
}

/* ═══ FOOTER ═══ */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px;
  position: relative; z-index: 1;
  background: #f1f5f9;
}
.footer-content {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1400px; margin: 0 auto;
}
.footer-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 18px;
}
.footer-copy { color: var(--text-3); font-size: 13px }
.footer-brand { color: var(--brand) }
.footer-heart {
  color: var(--accent-3);
}

/* ═══ SPINNER ═══ */
.loading-spinner {
  text-align: center; padding: 60px;
  color: var(--text-3); font-size: 14px;
  grid-column: 1 / -1;
}
.spinner-ring {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ═══ PASSWORD STRENGTH ═══ */
.pw-strength { margin-top: 8px }
.pw-bar-track {
  width: 100%; height: 4px;
  background: var(--border); border-radius: 4px;
  overflow: hidden; margin-bottom: 6px;
}
.pw-bar {
  height: 100%; width: 0;
  border-radius: 4px; transition: all .3s ease;
}
.pw-rules {
  display: flex; flex-wrap: wrap;
  gap: 4px 10px; align-items: center;
}
.pw-rule { font-size: 11px; color: var(--text-3); transition: color .2s }
.pw-rule--pass { color: var(--green) }
.pw-label { font-size: 11px; font-weight: 700; margin-left: auto }
.pw-match { margin-top: 4px; min-height: 16px }

/* ═══ PAYMENT METHOD SELECTOR ═══ */
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.payment-option { cursor: pointer }
.payment-option input[type="radio"] { display: none }
.payment-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.payment-option input:checked + .payment-card {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.payment-option:hover .payment-card { border-color: var(--border-strong) }
.payment-icon {
  font-size: 24px; width: 42px; height: 42px;
  background: var(--accent-soft);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}
.payment-card-text { display: flex; flex-direction: column; gap: 2px }
.payment-name { font-size: 14px; font-weight: 700; color: var(--text) }
.payment-desc { font-size: 11px; color: var(--text-3); line-height: 1.3 }

/* ═══ FIB PAYMENT MODAL ═══ */
.fib-payment-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  max-width: 420px; width: 100%;
  text-align: center;
  animation: modalIn .4s ease;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 32px rgba(15,27,45,.08);
}
.fib-payment-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--green);
  animation: none;
}
.fib-header { margin-bottom: 24px }
.fib-status-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(21,128,61,.10);
  border: 1px solid rgba(21,128,61,.20);
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px; font-weight: 600;
  color: var(--green); transition: all .18s;
}
.fib-status--paid {
  background: rgba(21,128,61,.15) !important;
  border-color: rgba(21,128,61,.4) !important;
  color: var(--green) !important;
}
.fib-status--expired {
  background: rgba(185,28,28,.08) !important;
  border-color: rgba(185,28,28,.22) !important;
  color: var(--red) !important;
}
.fib-status--expired .fib-pulse { background: var(--red) !important }
.fib-pulse {
  width: 10px; height: 10px;
  background: var(--green); border-radius: 50%;
  display: inline-block;
  animation: fibPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fibPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.5); opacity: 1 }
  50% { box-shadow: 0 0 0 8px transparent; opacity: .7 }
}
.fib-qr-section { margin-bottom: 24px }
.fib-qr-img {
  width: 256px; height: 256px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: #fff; padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
  /* Keep QR modules crisp when scaled so a phone can scan it off-screen
     (default smooth scaling blurs the finder patterns → scan failures). */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.fib-amount-display {
  display: flex; align-items: baseline;
  justify-content: center; gap: 8px; margin-bottom: 8px;
}
#fib-amount {
  font-size: 36px; font-weight: 700; letter-spacing: -1px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.fib-currency { font-size: 16px; font-weight: 600; color: var(--text-2) }
.fib-fee-note {
  font-size: 12px; color: var(--text-3);
  margin-top: 2px; margin-bottom: 2px;
  font-weight: 500; letter-spacing: .2px;
}
.fib-instruction { font-size: 13px; color: var(--text-3); margin-top: 4px }
.fib-links {
  display: flex; gap: 8px; margin-bottom: 20px;
  justify-content: center; flex-wrap: wrap;
}
.fib-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--rs);
  font-size: 13px; font-weight: 600;
  text-decoration: none; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
}
.fib-link-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15,27,45,.06);
}
.fib-timer {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 20px;
}
#fib-countdown {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 20px; font-weight: 700;
  color: var(--amber); letter-spacing: 1px;
}
.fib-cancel-btn {
  background: none;
  border: 1px solid rgba(185,28,28,.22);
  color: var(--red);
  padding: 10px 24px; border-radius: var(--rs);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .18s, border-color .18s; font-family: var(--font);
}
.fib-cancel-btn:hover {
  background: rgba(185,28,28,.06);
  border-color: rgba(185,28,28,.4);
}
.fib-paid-info {
  margin-top: 12px; padding: 10px 16px;
  background: rgba(21,128,61,.10);
  border: 1px solid rgba(21,128,61,.18);
  border-radius: var(--rs);
  font-size: 13px; color: var(--text-2);
}
.fib-paid-info strong { color: var(--green) }
.fib-or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 }
.fib-or-line { flex: 1; height: 1px; background: var(--border) }
.fib-or-text {
  font-size: 11px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap;
}
.fib-code-section { margin-bottom: 20px }
.fib-code-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 8px;
}
.fib-code-display {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent-soft);
  border: 2px dashed rgba(29,78,216,.3);
  border-radius: 14px; padding: 14px 24px;
  transition: border-color .18s, background .18s;
}
.fib-code-display:hover {
  border-color: var(--accent);
  background: rgba(29,78,216,.10);
}
.fib-code-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 28px; font-weight: 700;
  letter-spacing: 3px; color: var(--text);
  user-select: all; font-variant-numeric: tabular-nums;
}
.fib-copy-btn {
  background: rgba(29,78,216,.15); border: none;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s; flex-shrink: 0;
}
.fib-copy-btn:hover { background: rgba(29,78,216,.25) }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .nav { padding: 16px 20px }
  .nav.scrolled { padding: 12px 20px }
  .nav-links { gap: 8px; flex-wrap: wrap }
  .nav-link:not(.nav-link--login):not(.lang-switcher *) { display: none }
  .hero-content { padding: 90px 16px 40px }
  .hero-title { letter-spacing: -1.5px }
  .orbit-container { width: 400px; height: 400px }
  .orbit-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px }
  .how-section, .packages-section, .footer, .why-section, .cta-section { padding-left: 20px; padding-right: 20px }
  .steps { flex-direction: column; align-items: center; gap: 0 }
  .step-connector { transform: rotate(90deg); padding: 4px 0 }
  .packages-grid { grid-template-columns: 1fr }
  .form-row--2 { grid-template-columns: 1fr }
  .footer-content { flex-direction: column; gap: 16px; text-align: center }
  .features-strip { gap: 12px; padding: 20px }
  .feature-divider { display: none }
  .hero-price-badge { padding: 20px 28px }
  .hero-price-amount { font-size: 48px }
  .why-grid { grid-template-columns: 1fr }
  .cta-icon-row { gap: 8px }
  .cta-float-icon { width: 44px; height: 44px; font-size: 22px }
  .cta-trust { gap: 24px }
  .cta-trust-divider { display: none }
  .lang-switcher { margin-right: 0 }
  .payment-methods { grid-template-columns: 1fr }
  .fib-payment-modal { padding: 24px; max-width: 95vw }
  .fib-qr-img { width: 220px; height: 220px }
  .fib-links { flex-direction: column; align-items: stretch }
  #fib-amount { font-size: 28px }
  .fib-code-value { font-size: 20px; letter-spacing: 2px }
  .fib-code-display { padding: 10px 16px }
  .stats-grid { flex-wrap: wrap; gap: 0 }
  .stat-item { flex-basis: 50%; padding: 12px 16px }
  .stat-divider { display: none }
  .stat-number { font-size: 36px }
}

@media (max-width: 480px) {
  .hero-price-amount { font-size: 40px }
  .hero-price-dollar { font-size: 24px }
  .stat-item { flex-basis: 50% }
  .orbit-container { width: 300px; height: 300px }
}

/* ═══════════════════════════════════════════════════════════
   LUXURY HERO ENHANCEMENTS — premium feel & live demo button
   ═══════════════════════════════════════════════════════════ */

/* ── Floating luxury particles — neutralized (DOM kept) ── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle { display: none }
@keyframes particleRise {
  0%, 100% { transform: translateY(0); opacity: 0 }
}

/* ── Ambient hero glow orbs — removed (DOM kept) ── */
.hero-glow, .hero-glow-2 { display: none }
@keyframes glowPulse {
  0%, 100% { opacity: 0; transform: scale(1) }
}

/* ── Premium badge — flat, no shimmer ── */
.hero-badge {
  position: relative;
  box-shadow: 0 1px 2px rgba(15,27,45,.05);
  overflow: hidden;
}
.hero-badge::after { display: none }
@keyframes badgeShimmer {
  0%, 100% { left: -120% }
}

/* ── Hero title polish — no glow ── */
.hero-title { text-shadow: none }

/* ── Respect reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  .particle, .hero-glow, .hero-glow-2, .hero-badge::after { animation: none !important }
}

/* Back button chevron points the correct way in RTL (Kurdish/Arabic) */
[dir="rtl"] #pricing-back svg { transform: scaleX(-1); }

/* ═══ SEO/GEO additions: industries fallback · FAQ · footer NAP ═══ */
/* Reserve height so the JS-rendered packages grid doesn't shift the page (CLS). */
.packages-grid { min-height: 420px }

/* Static industry list (crawlers / no-JS AI engines); pricing.js replaces it. */
.pkg-fallback { grid-column: 1 / -1; text-align: center }
.pkg-fallback-lead { color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 640px; margin: 0 auto 18px }
.pkg-fallback-list {
  list-style: none; padding: 0; margin: 0 auto 24px; max-width: 780px;
  display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center;
}
.pkg-fallback-list li {
  background: var(--accent-soft); color: var(--accent-3);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
}

/* FAQ — native <details> accordion (no JS) */
.faq-section { padding: 90px 48px; position: relative; z-index: 1 }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-size: 16px; font-weight: 600; color: var(--brand);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--accent);
  line-height: 1; flex: none; transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg) }
.faq-item p { margin: 0; padding: 0 24px 22px; color: var(--text-2); font-size: 15px; line-height: 1.75 }

/* Footer NAP + trilingual taglines */
.footer-nap { font-style: normal; color: var(--text-3); font-size: 13px; line-height: 1.7; margin-top: 4px }
.footer-nap a { color: var(--text-2); text-decoration: none }
.footer-nap a:hover { text-decoration: underline }
.footer-tagline { color: var(--text-3); font-size: 12.5px; line-height: 1.7; max-width: 640px; margin: 6px auto 0 }

@media (max-width: 768px) {
  .faq-section { padding-left: 20px; padding-right: 20px }
  .packages-grid { min-height: 0 }
}

/* ── Built to order ──────────────────────────────────────────────────────────
   A third state between "buy it now" and "coming soon": the software exists,
   but each restaurant gets its own floor plan, menu and kitchen flow, so it
   starts with a conversation rather than a checkout. Full colour like a live
   card — it IS available — distinguished only by an amber badge and the note
   above the price, so "Available" is never mistaken for instant self-serve. */
.pkg-card--request { cursor: default; }
.pkg-live-badge--request {
  background: var(--accent, #1d4ed8);
  white-space: nowrap;
}
.pkg-request-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(29, 78, 216, .06);
  border-inline-start: 3px solid var(--accent, #1d4ed8);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2, #4a5568);
}
/* Renders as an <a> so it works without JS and can be opened in a new tab —
   inherits the primary button's shape, then takes WhatsApp's green because
   that is the thing it actually opens. */
.pkg-get-btn--request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #25d366;
  white-space: nowrap;
}
.pkg-get-btn--request:hover { background: #1eb855; }