/* ============================================================================
   business-takeoff.css — "מסלול ההמראה של העסק"
   Interactive diagnostic experience. Uses the existing design tokens + the same
   motion feel as the site (the loader "scan" sweep, glow/pulse, fade-up, float).
   RTL-first; light theme inherits via tokens.
   ============================================================================ */

.bt {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.25rem 4rem;
}
.bt-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bt-bg span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: float 10s ease-in-out infinite; }
.bt-bg span:nth-child(1) { width: 380px; height: 380px; inset-inline-end: -80px; top: -60px; background: var(--accent-cyan-glow); }
.bt-bg span:nth-child(2) { width: 340px; height: 340px; inset-inline-start: -70px; bottom: -50px; background: var(--secondary-glow); animation-delay: 1.8s; }
.bt-bg span:nth-child(3) { width: 300px; height: 300px; inset-inline-start: 40%; top: 35%; background: var(--accent-violet-glow); animation-delay: 3.4s; }

.bt-screen { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; text-align: center; }
.bt-screen[hidden] { display: none; }
.bt-anim { animation: btIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes btIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bt-anim { animation: none; } }

/* Shared bits */
.bt-tag {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-cyan);
  padding: .35rem .95rem; border-radius: 12px; margin-bottom: 1.6rem;
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
}
.bt-h1 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; font-size: clamp(1.9rem, 4.4vw, 3.1rem); color: var(--heading-color); margin: 0 0 1rem; letter-spacing: -.015em; }
/* LIGHT THEME: global `body.light-theme h1` sets -webkit-text-fill-color:transparent (for its
   own gradient), but .bt-h1's pill background removes that gradient → the text went INVISIBLE.
   Restore the fill to the (dark) heading colour so it shows. */
body.light-theme .bt-h1 { -webkit-text-fill-color: currentColor; }
.bt-sub { color: var(--text-secondary); font-size: 1.12rem; line-height: 1.65; max-width: 52ch; margin: 0 auto 2rem; }
.bt-micro { margin-top: 1.2rem; font-size: .86rem; color: var(--text-secondary); opacity: .8; }

.bt-cta {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff;
  padding: 1rem 1.9rem; border-radius: 12px; text-decoration: none;
  background: var(--gradient-primary); background-size: 170% 170%; box-shadow: 0 10px 28px var(--primary-glow);
  animation: pulseGlow 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s, background-position .4s;
}
.bt-cta:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 38px var(--primary-glow); }
.bt-cta-arrow { transition: transform .25s; }
[dir="ltr"] .bt-cta-arrow { transform: scaleX(-1); }
.bt-cta:hover .bt-cta-arrow { transform: translateX(-5px); }
[dir="ltr"] .bt-cta:hover .bt-cta-arrow { transform: scaleX(-1) translateX(-5px); }
.bt-ghost {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text-secondary);
  padding: .8rem 1.3rem; border-radius: 12px; background: transparent; border: 1px solid var(--glass-border);
  transition: border-color .2s, color .2s, transform .2s;
}
.bt-ghost:hover { color: var(--heading-color); border-color: var(--glass-border-hover); transform: translateY(-2px); }

/* --- Intro robot with scan rings --- */
.bt-intro-robot { position: relative; width: 240px; height: 240px; margin: 0 auto 1.6rem; display: grid; place-items: center; }
.bt-intro-robot img { position: relative; z-index: 2; width: 185px; height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(103,51,209,.5)) drop-shadow(0 0 44px rgba(103,51,209,.32)) drop-shadow(0 0 32px rgba(103,51,209,.55)); animation: float 4.4s ease-in-out infinite; }
.bt-intro-ring { position: absolute; width: 185px; height: 185px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-cyan) 45%, transparent); box-shadow: 0 0 40px var(--accent-cyan-glow); animation: btRing 3s ease-out infinite; }
.bt-intro-ring-2 { animation-delay: 1s; }
@keyframes btRing { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(2.3); opacity: 0; } }

/* ============================================================
   STEP SCREENS
   ============================================================ */
.bt-progress { display: flex; gap: .4rem; max-width: 460px; margin: 0 auto 2rem; }
.bt-progress i { flex: 1; height: 5px; border-radius: 999px; background: var(--glass-border); overflow: hidden; position: relative; }
.bt-progress i.done { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan-glow); }
.bt-progress i.current { background: linear-gradient(90deg, var(--accent-cyan), var(--glass-border)); }
.bt-step-label { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-cyan); margin: 0 auto .7rem; display: inline-block;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-cyan) 45%, transparent);
  animation: btStepPulse 1.7s ease-in-out infinite; }   /* "alive" — zoom in/out + gentle drift, so it reads as a process running */
@keyframes btStepPulse {
  0%,100% { transform: scale(1) translate(0,0); }
  25%     { transform: scale(1.08) translate(1px,-2px); }
  50%     { transform: scale(1.02) translate(0,1px); }
  75%     { transform: scale(1.08) translate(-1px,-2px); }
}
@media (prefers-reduced-motion: reduce) { .bt-step-label { animation: none; } }
.bt-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 3.2vw, 2.1rem); color: var(--heading-color); line-height: 1.25; margin: 0 auto 1.8rem; max-width: 22ch; }
/* centred on its OWN line directly under the question (was inline → it shared the
   question's line and drifted off to the side) + a glowing amber pill "effect". */
.bt-hint {
  display: flex; width: fit-content; margin: 0 auto 1.8rem; align-items: center; justify-content: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--accent-amber);
  padding: .42rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 34%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-amber) 50%, transparent);
  animation: btHintGlow 2.6s ease-in-out infinite;
}
.bt-hint i { color: var(--accent-amber); }
@keyframes btHintGlow {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%     { box-shadow: 0 0 22px -3px color-mix(in srgb, var(--accent-amber) 65%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .bt-hint { animation: none; } }

.bt-opts { display: grid; gap: .8rem; margin: 0 auto; max-width: 720px; }
.bt-opts.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bt-opts.cols-2-narrow { grid-template-columns: repeat(2, 1fr); }
.bt-opts.grid-chips { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.bt-opt {
  display: flex; align-items: center; gap: .85rem; text-align: start; cursor: pointer;
  padding: 1rem 1.1rem; border-radius: 12px; background: var(--glass-bg);
  border: 1.5px solid var(--glass-border); color: var(--text-color);
  font-family: var(--font-main); font-size: 1rem; font-weight: 600;
  transition: transform .18s, border-color .2s, background .2s, box-shadow .25s;
}
.bt-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-cyan) 55%, transparent); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.bt-opt-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem;
  color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 13%, transparent); transition: background .2s, color .2s; }
.bt-opt-label { line-height: 1.35; }
.bt-opt-check { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--glass-border-hover); display: grid; place-items: center; color: #fff; font-size: .7rem; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s, background .2s, border-color .2s; }
.bt-opt.selected { border-color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent), 0 12px 28px rgba(0,0,0,.3); }
.bt-opt.selected .bt-opt-ic { background: var(--accent-cyan); color: #04121a; }
.bt-opt.selected .bt-opt-check { opacity: 1; transform: scale(1); background: var(--accent-cyan); border-color: var(--accent-cyan); }
.grid-chips .bt-opt { flex-direction: column; text-align: center; gap: .55rem; padding: 1.1rem .8rem; }
.grid-chips .bt-opt-check { position: absolute; top: 8px; inset-inline-end: 8px; margin: 0; }
.grid-chips .bt-opt { position: relative; }

.bt-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 720px; margin: 2rem auto 0; }
.bt-nav-spacer { flex: 1; }

/* ============================================================
   SCAN SCREEN
   ============================================================ */
.bt-scan-robot { position: relative; width: 220px; height: 220px; margin: 0 auto 1.8rem; display: grid; place-items: center; }
.bt-scan-robot img { position: relative; z-index: 2; width: 150px; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); animation: float 3.6s ease-in-out infinite; }
.bt-scan-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--accent-cyan-glow), transparent 68%); animation: pulseGlow 1.8s ease-in-out infinite; }
.bt-scan-ring { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-cyan) 50%, transparent); animation: btRing 2s ease-out infinite; }
.bt-scan-ring.r2 { animation-delay: .7s; } .bt-scan-ring.r3 { animation-delay: 1.4s; }
.bt-scan-line { position: absolute; z-index: 3; width: 168px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 16px var(--accent-cyan); top: 0; animation: btScanSweep 1.5s ease-in-out infinite; }
@keyframes btScanSweep { 0% { top: 18%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 82%; opacity: 0; } }
.bt-scan-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.8rem); color: var(--heading-color); margin: 0 0 1.6rem; }
.bt-scan-steps { display: flex; flex-direction: column; gap: .6rem; max-width: 420px; margin: 0 auto; text-align: start; }
.bt-scan-stepi { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); opacity: .45; transition: opacity .35s, border-color .35s, color .35s; }
.bt-scan-stepi .bt-scan-tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--glass-border-hover); display: grid; place-items: center; font-size: .72rem; flex-shrink: 0; transition: background .35s, border-color .35s; }
.bt-scan-stepi.on { opacity: 1; border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent); color: var(--text-color); }
.bt-scan-stepi.on .bt-scan-tick { background: var(--accent-emerald); border-color: var(--accent-emerald); color: #04121a; }
.bt-scan-stepi.on .bt-scan-spin { display: none; }

/* ============================================================
   RESULTS
   ============================================================ */
.bt-results { max-width: 1000px; text-align: center; }
.bt-res-head { margin-bottom: 2.4rem; }
.bt-tier { text-align: start; margin-bottom: 2.4rem; }
.bt-tier-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--glass-border); }
.bt-tier-badge { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: .28rem .7rem; border-radius: 8px; }
.bt-tier.t1 .bt-tier-badge { background: var(--accent-cyan); }
.bt-tier.t2 .bt-tier-badge { background: var(--accent-amber); }
.bt-tier.t3 .bt-tier-badge { background: var(--accent-violet); }
.bt-tier-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--heading-color); margin: 0; }
.bt-tier-sub { font-size: .92rem; color: var(--text-secondary); }
.bt-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bt-card {
  position: relative; display: flex; flex-direction: column; padding: 1.4rem; border-radius: 18px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-top: 3px solid var(--cardc);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bt-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 26px color-mix(in srgb, var(--cardc) 16%, transparent); }
.bt-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.bt-card-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: var(--cardc); background: color-mix(in srgb, var(--cardc) 14%, transparent); }
.bt-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--heading-color); }
.bt-card-desc { font-size: .85rem; color: var(--text-secondary); }
.bt-card-block { margin-bottom: .8rem; }
.bt-card-block .bt-card-lbl { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cardc); margin-bottom: .25rem; }
.bt-card-block p { margin: 0; font-size: .92rem; color: var(--text-color); line-height: 1.5; }
.bt-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--cardc); padding: .55rem .9rem; border-radius: 10px;
  background: color-mix(in srgb, var(--cardc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cardc) 28%, transparent); transition: background .2s, transform .2s; }
.bt-card-cta:hover { background: color-mix(in srgb, var(--cardc) 20%, transparent); transform: translateY(-2px); }
.bt-card-cta i { transition: transform .2s; } [dir="ltr"] .bt-card-cta i { transform: scaleX(-1); }
.bt-card-cta:hover i { transform: translateX(-4px); } [dir="ltr"] .bt-card-cta:hover i { transform: scaleX(-1) translateX(-4px); }

/* --- lead form --- */
.bt-form-wrap { margin-top: 1.5rem; padding: 2.4rem 2rem; border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--secondary-color) 20%, transparent), transparent 55%),
              radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent-cyan) 16%, transparent), transparent 55%),
              var(--surface-elevated);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 24px 60px rgba(0,0,0,.34); }
.bt-form-wrap::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--secondary-color), var(--accent-violet)); background-size: 200% 100%; animation: navGradientFlow 8s linear infinite; }
.bt-form-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--heading-color); margin: 0 0 1.4rem; }
.bt-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; max-width: 620px; margin: 0 auto; text-align: start; }
.bt-field { display: flex; flex-direction: column; gap: .35rem; }
.bt-field.full { grid-column: 1 / -1; }
.bt-field label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.bt-field input { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-color); font-family: var(--font-main); font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.bt-field input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 22%, transparent); }
.bt-form-cta { grid-column: 1 / -1; justify-self: center; margin-top: .4rem; }
.bt-form-micro { grid-column: 1 / -1; text-align: center; font-size: .82rem; color: var(--text-secondary); line-height: 1.5; margin: .6rem 0 0; }
.bt-form-msg { grid-column: 1 / -1; text-align: center; font-weight: 600; font-size: .92rem; min-height: 1.2em; }
.bt-form-msg.error { color: var(--primary-color); }
.bt-form-msg.success { color: var(--accent-emerald); }
.bt-form-demo { grid-column: 1 / -1; text-align: center; font-size: .74rem; color: var(--accent-amber); opacity: .85; }

.bt-results-foot { margin-top: 2rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .bt-opts.cols-2 { grid-template-columns: 1fr; }
  .bt-cards { grid-template-columns: 1fr; }
  .bt-form { grid-template-columns: 1fr; }
  .bt-q { max-width: none; }
}

/* ============================================================================
   Home-page design language: glowing tag pill + result-card hover sheen.
   ============================================================================ */
@keyframes btSheen { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes btGlowPulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 20px -4px color-mix(in srgb, var(--gb, var(--accent-cyan)) 60%, transparent); } }
.bt-tag {
  --gb: var(--accent-cyan);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--gb); background: color-mix(in srgb, var(--gb) 13%, transparent);
  border-color: color-mix(in srgb, var(--gb) 34%, transparent);
  animation: btGlowPulse 3.6s ease-in-out infinite;
}
.bt-tag::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: btSheen 5s ease-in-out infinite; }
.bt-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.14) 50%, transparent); transform: skewX(-18deg); opacity: 0; }
.bt-card:hover::after { opacity: 1; animation: btSheen 1.1s ease-out; }
.bt-card > * { position: relative; z-index: 1; }

/* === Final-CTA "cube" polish (same as home) === */
@keyframes btBell {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(3px,-2px) rotate(4deg); } 20% { transform: translate(-3px,2px) rotate(-4deg); }
  30% { transform: translate(3px,2px) rotate(3deg); }  40% { transform: translate(-3px,-2px) rotate(-3deg); }
  55% { transform: translate(2px,-1px) rotate(2deg); } 70% { transform: translate(-2px,1px) rotate(-2deg); } 85% { transform: translate(1px,-1px) rotate(1deg); }
}
.bt-form-micro { color: var(--heading-color); font-weight: 600; opacity: 1; text-shadow: 0 0 16px rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.35); }
.bt-form-title { text-shadow: 0 0 24px rgba(6,182,212,.28); }
.bt-form-wrap { box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 60px color-mix(in srgb, var(--accent-cyan) 14%, transparent); }
.bt-start:hover, .bt-form-cta:hover { animation: btBell .55s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .bt-start:hover, .bt-form-cta:hover { animation: none; } }

/* form-cube title: zoom in/out on hover (submit button keeps the jiggle) */
@keyframes btZoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.bt-form-title { display: inline-block; }
.bt-form-title:hover { animation: btZoom .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bt-form-title:hover { animation: none; } }

/* match the home glow-button frame (12px) */
.bt-tag { border-radius: 12px; }

/* takeoff robot: purple aura behind (matches other robots) + a 3rd launch ring for a fuller, wider wave */
.bt-intro-robot::before { content:''; position:absolute; width:86%; height:86%; border-radius:50%; background: radial-gradient(circle, rgba(103,51,209,.68), transparent 72%); filter: blur(7px); z-index:0; }
.bt-intro-ring-3 { animation-delay: 2s; }

/* === takeoff intro tuning === */
/* tag "מסלול ההמראה של העסק" → big main-heading-style glow-button (bolt icon removed in markup) */
#btIntro .bt-tag { font-size: clamp(1.45rem, 3.6vw, 2.35rem); letter-spacing: 0; text-transform: none; padding: .7rem 1.6rem; border-radius: 12px; margin-bottom: 1.3rem; }
/* robot dropped ~2 lines below the tag button (it was touching it) — rings + aura move with it */
.bt-intro-robot { margin-top: 4.6rem; }
/* sub-line stays glowing amber */
#btIntro .bt-sub { color: var(--accent-amber); text-shadow: 0 0 18px color-mix(in srgb, var(--accent-amber) 55%, transparent), 0 0 40px color-mix(in srgb, var(--accent-amber) 30%, transparent); animation: btHeadFloat 4.5s ease-in-out infinite; animation-delay: .3s; margin-top: 1.3rem; }
/* heading below Roby → same glow-button treatment as the About page (amber tint + glow pulse +
   moving sheen), dropped ~2 lines lower so it sits clear of the robot */
#btIntro .bt-h1 {
  display: block; width: fit-content; max-width: min(90vw, 34rem); margin: 4.4rem auto 1rem;
  position: relative; overflow: hidden; isolation: isolate;
  padding: .75rem 1.7rem; border-radius: 14px; color: var(--heading-color);
  background: color-mix(in srgb, var(--accent-amber) 15%, transparent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-amber) 38%, transparent);
  animation: btHeadGlow 3.6s ease-in-out infinite, btHeadFloat 4.5s ease-in-out infinite;
}
#btIntro .bt-h1::after {
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1; pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); animation: btHeadSheen 5s ease-in-out infinite;
}
@keyframes btHeadGlow { 0%,100% { box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--accent-amber) 30%, transparent); } 50% { box-shadow: 0 10px 28px -4px color-mix(in srgb, var(--accent-amber) 58%, transparent); } }
@keyframes btHeadSheen { 0% { left:-60%; } 55%,100% { left:130%; } }
@keyframes btHeadFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* NOTE: the paper-plane + its launch trail are already baked into roby-takeoff.webp
   (the plane flies up-right out of Roby's hand). The old separate vertical streak
   sat centred above his hand and looked disconnected — removed. */
.bt-intro-robot::after { content: none; }
@media (prefers-reduced-motion: reduce) { #btIntro .bt-h1, #btIntro .bt-sub, .bt-intro-robot::after { animation: none; } }

/* ===== gamified "radar" scan (mission-style) ===== */
.bt-scan2 { text-align: center; }
.bt-scanner { position: relative; width: 230px; height: 230px; margin: 0 auto 1.5rem; display: grid; place-items: center; }
.bt-scanner img { width: 104px; height: auto; z-index: 3; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) drop-shadow(0 0 18px var(--accent-cyan-glow)); animation: btScanFloat 3.5s ease-in-out infinite; }
.bt-prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); z-index: 2; }
.bt-prog-bg { fill: none; stroke: color-mix(in srgb, var(--accent-cyan) 14%, transparent); stroke-width: 5; }
.bt-prog-bar { fill: none; stroke: var(--accent-cyan); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .55s cubic-bezier(.5,0,.2,1); filter: drop-shadow(0 0 6px var(--accent-cyan-glow)); }
.bt-sweep { position: absolute; inset: 10px; border-radius: 50%; z-index: 1; background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent-cyan) 40%, transparent) 42deg, transparent 72deg); animation: btSweep 1.5s linear infinite; }
.bt-prad { position: absolute; width: 66px; height: 66px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-cyan) 42%, transparent); z-index: 1; animation: btRad 2.4s ease-out infinite; }
.bt-prad.d2 { animation-delay: 1.2s; }
.bt-pct { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--accent-cyan); text-shadow: 0 0 12px var(--accent-cyan-glow); background: color-mix(in srgb, #000 40%, transparent); padding: .08rem .55rem; border-radius: 8px; }
@keyframes btSweep { to { transform: rotate(360deg); } }
@keyframes btRad { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes btScanFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.bt-scan2 .bt-scan-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--heading-color); margin: 0 0 .55rem; }
.bt-scan-count { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1.4rem; }
.bt-scan-count b { color: var(--accent-cyan); font-family: var(--font-display); font-size: 1.3rem; }
.bt-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 660px; margin: 0 auto; }
.bt-mod { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); font-weight: 600; font-size: .92rem; opacity: .4; filter: grayscale(.7); transform: scale(.92); transition: opacity .35s, filter .35s, transform .35s cubic-bezier(.34,1.56,.64,1), background .35s, border-color .35s, box-shadow .35s, color .35s; }
.bt-mod-ic { transition: color .3s; }
.bt-mod-ok { width: 0; overflow: hidden; color: var(--mc); transition: width .3s ease .1s; }
.bt-mod.found { opacity: 1; filter: none; transform: scale(1); color: var(--heading-color); border-color: color-mix(in srgb, var(--mc) 55%, transparent); background: color-mix(in srgb, var(--mc) 13%, var(--glass-bg)); box-shadow: 0 0 18px color-mix(in srgb, var(--mc) 32%, transparent); animation: btModPop .42s cubic-bezier(.34,1.8,.64,1); }
.bt-mod.found .bt-mod-ic { color: var(--mc); }
.bt-mod.found .bt-mod-ok { width: 1.05em; }
@keyframes btModPop { 0% { transform: scale(.92); } 55% { transform: scale(1.13); } 100% { transform: scale(1); } }
.bt-scan-done { margin-top: 1.7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--accent-emerald); opacity: 0; transform: scale(.7); transition: opacity .5s, transform .5s cubic-bezier(.34,1.8,.64,1); }
.bt-scan2.done .bt-scan-done { opacity: 1; transform: scale(1); text-shadow: 0 0 22px color-mix(in srgb, var(--accent-emerald) 55%, transparent); }
.bt-scan2.done .bt-scanner img { filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) drop-shadow(0 0 28px var(--accent-emerald)); }
.bt-scan2.done .bt-prog-bar { stroke: var(--accent-emerald); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-emerald) 60%, transparent)); }
@media (prefers-reduced-motion: reduce) { .bt-sweep, .bt-prad, .bt-scanner img { animation: none !important; } }

/* takeoff page: every button gently floats in the air */
@keyframes btFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bt-tag, .bt-cta, .bt-ghost, .bt-opt, .bt-card-cta, .bt-form-cta { animation: btFloatY 3.6s ease-in-out infinite; will-change: transform; }
.bt-opt:nth-child(2n) { animation-duration: 4.2s; animation-delay: -1.3s; }
.bt-opt:nth-child(3n) { animation-duration: 3.2s; animation-delay: -0.7s; }
.bt-opt:nth-child(4n) { animation-duration: 3.9s; animation-delay: -2.1s; }
.bt-tag:hover, .bt-cta:not(.bt-start):hover, .bt-ghost:hover, .bt-opt:hover, .bt-card-cta:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bt-tag, .bt-cta, .bt-ghost, .bt-opt, .bt-card-cta, .bt-form-cta { animation: none !important; } }

/* ============================================================
   profiling steps — smoother background + site UI conventions
   ============================================================ */
/* (1) smooth, undivided background: drop the centre orb patch + soften the rest (edge-only ambient, like the other pages) */
#btRoot .bt-bg span { opacity: .26; filter: blur(115px); }
#btRoot .bt-bg span:nth-child(3) { display: none; }

/* (2) colourful option icons + per-option accent on hover/selected (site icon-colour + button-behaviour convention) */
.bt-opt:nth-child(6n+1){--oc:var(--accent-cyan)} .bt-opt:nth-child(6n+2){--oc:var(--accent-violet)} .bt-opt:nth-child(6n+3){--oc:var(--accent-emerald)} .bt-opt:nth-child(6n+4){--oc:var(--accent-amber)} .bt-opt:nth-child(6n+5){--oc:var(--accent-pink)} .bt-opt:nth-child(6n){--oc:var(--secondary-color)}
.bt-opt-ic { color: var(--oc, var(--accent-cyan)) !important; background: color-mix(in srgb, var(--oc, var(--accent-cyan)) 15%, transparent) !important; }
.bt-opt:hover { border-color: color-mix(in srgb, var(--oc, var(--accent-cyan)) 55%, transparent) !important; box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 22px color-mix(in srgb, var(--oc, var(--accent-cyan)) 24%, transparent) !important; }
.bt-opt.selected { border-color: var(--oc, var(--accent-cyan)) !important; background: color-mix(in srgb, var(--oc, var(--accent-cyan)) 12%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc, var(--accent-cyan)) 20%, transparent), 0 12px 28px rgba(0,0,0,.3) !important; }
.bt-opt.selected .bt-opt-ic { background: var(--oc, var(--accent-cyan)) !important; color: #04121a !important; }
.bt-opt.selected .bt-opt-check { background: var(--oc, var(--accent-cyan)) !important; border-color: var(--oc, var(--accent-cyan)) !important; }

/* (3) step question → site "heading-as-glow-button" treatment (glow pulse + sheen, like the other pages' headings) */
.bt-q {
  --gb: var(--accent-cyan); position: relative; overflow: hidden; isolation: isolate;
  display: block; width: fit-content; max-width: min(92%, 34rem); margin: 0 auto 1.8rem;  /* block + margin auto → centred on its own line (was inline-block → shared a line with the hint, both went off-centre) */
  padding: .7rem 1.7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--gb) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gb) 34%, transparent);
  animation: btQGlow 3.8s ease-in-out infinite;
}
.bt-q::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1; background: linear-gradient(110deg, transparent, rgba(255,255,255,.4) 50%, transparent); transform: skewX(-18deg); animation: btQSheen 5.2s ease-in-out infinite; }
@keyframes btQGlow { 0%,100% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-cyan) 26%, transparent); } }
@keyframes btQSheen { 0% { left: -60%; } 55%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .bt-q { animation: none; } .bt-q::after { display: none; } }

/* ============================================================================
   RESULTS PAGE polish:
   (1) "מסלול ההמראה שלכם" (resTag) = the big glow-button; the rest of the heading
       sits below it; kill the global <h2> orange underline.
   (4) tier heads → a how-it-works "launch path": glowing numbered markers on a
       connecting trajectory with a climbing spark + livelier gradient titles.
   (3) lead form → a WhatsApp-guide invitation (Roby avatar + green accent + perks).
   ============================================================================ */

/* (1) results heading — the tag becomes the hero button, the title is secondary, no orange line */
.bt-results .bt-res-head { display: flex; flex-direction: column; align-items: center; }
.bt-results .bt-tag {
  font-size: clamp(1.4rem, 3.4vw, 2.3rem); letter-spacing: 0; text-transform: none;
  padding: .7rem 1.7rem; border-radius: 14px; margin-bottom: 1.1rem; gap: .55rem;
}
.bt-results .bt-tag i { font-size: .8em; }
.bt-h1 { border-bottom: 0 !important; padding-bottom: 0 !important; }   /* results title is an <h2> → kill the global orange line */
.bt-results .bt-h1 { font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--text-color); max-width: 42ch; margin: 0 auto .7rem; }

/* (4) tier "launch path" — rail (glowing marker + connector) beside the content */
.bt-tier { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: stretch; text-align: start; margin-bottom: 1.5rem; }
.bt-tier.t1 { --tc: var(--accent-cyan); } .bt-tier.t2 { --tc: var(--accent-amber); } .bt-tier.t3 { --tc: var(--accent-violet); }
.bt-tier-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.bt-tier-head { display: block; border-bottom: 0; padding-bottom: 0; margin-bottom: 1.1rem; }
.bt-tier-body { min-width: 0; }
.bt-tier-badge {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: #fff; padding: 0;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--tc) 82%, #05070d), color-mix(in srgb, var(--tc) 52%, #05070d));
  border: 2px solid color-mix(in srgb, #fff 38%, var(--tc));
  animation: btTierMarker 3s ease-in-out infinite;
}
@keyframes btTierMarker {
  0%,100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc) 12%, transparent), 0 0 18px color-mix(in srgb, var(--tc) 38%, transparent); }
  50%     { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tc) 16%, transparent), 0 0 34px color-mix(in srgb, var(--tc) 65%, transparent); }
}
/* glowing trajectory down to the next marker (the launch path) + a climbing spark */
.bt-tier-line { position: relative; flex: 1 1 auto; width: 3px; min-height: 36px; margin: .55rem 0 -1.5rem; border-radius: 3px;
  background: linear-gradient(var(--tc), color-mix(in srgb, var(--tc) 25%, transparent));
  box-shadow: 0 0 9px color-mix(in srgb, var(--tc) 50%, transparent); }
.bt-tier-spark { position: absolute; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 2px var(--tc); animation: btTierSpark 2.6s linear infinite; }
@keyframes btTierSpark { 0% { top: -6px; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.bt-tier-title { font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  background: linear-gradient(120deg, var(--heading-color), var(--tc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tc) 28%, transparent)); }
.bt-tier-sub { display: block; margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) { .bt-tier-badge, .bt-tier-spark { animation: none !important; } }
@media (max-width: 720px) { .bt-tier { gap: .85rem; } .bt-tier-badge { width: 46px; height: 46px; font-size: 1.1rem; } }

/* (3) WhatsApp-guide lead form — green accent + Roby avatar + perks */
.bt-wa-wrap {
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #25d366 16%, transparent), transparent 55%),
              radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, #128c7e 13%, transparent), transparent 55%),
              var(--surface-elevated) !important;
  border-color: color-mix(in srgb, #25d366 32%, var(--glass-border-hover)) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 60px color-mix(in srgb, #25d366 16%, transparent) !important;
}
.bt-wa-wrap::before { background: linear-gradient(90deg, #25d366, #128c7e, #25d366) !important; }
.bt-wa-glow { position: absolute; inset: auto -18% -38% auto; width: 58%; height: 58%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, #25d366 26%, transparent), transparent 70%); filter: blur(34px); }
.bt-wa-wrap > * { position: relative; z-index: 1; }
.bt-wa-head { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.bt-wa-avatar { position: relative; flex-shrink: 0; width: 66px; height: 66px; }
.bt-wa-avatar img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in srgb, #25d366 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, #25d366 45%, transparent); animation: btScanFloat 3.8s ease-in-out infinite; }
.bt-wa-badge { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; font-size: .85rem; border: 2px solid var(--surface-elevated); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.bt-wa-badge i { animation: btWaPulse 2.4s ease-in-out infinite; }
@keyframes btWaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.bt-wa-headtext { text-align: start; max-width: 30rem; }
.bt-wa-wrap .bt-form-title { margin: 0 0 .35rem; text-shadow: 0 0 24px color-mix(in srgb, #25d366 32%, transparent); }
.bt-wa-lead { color: var(--text-secondary); font-size: 1rem; line-height: 1.55; margin: 0; }
.bt-wa-perks { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem; }
.bt-wa-perks li { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--heading-color);
  padding: .42rem .85rem; border-radius: 999px; background: color-mix(in srgb, #25d366 12%, transparent); border: 1px solid color-mix(in srgb, #25d366 30%, transparent); }
.bt-wa-perks i { color: #25d366; }
.bt-wa-cta { background: linear-gradient(135deg, #25d366, #128c7e) !important; box-shadow: 0 10px 28px color-mix(in srgb, #25d366 45%, transparent) !important; }
.bt-wa-cta i { font-size: 1.15em; }
.bt-wa-wrap .bt-field input:focus { border-color: #25d366; box-shadow: 0 0 0 3px color-mix(in srgb, #25d366 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .bt-wa-avatar img, .bt-wa-badge i { animation: none !important; } }

/* ============================================================================
   Step nav (back / continue) — was a flat grey outline ("boring"). Now both read
   as moving along the launch path: the Back is a glassy accent pill whose chevron
   slides toward "back", and the Continue button gets a forward sheen + a thrust nudge.
   ============================================================================ */
.bt-nav { align-items: center; gap: .8rem; }
.bt-ghost {
  position: relative; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--accent-cyan) 9%, var(--glass-bg));
  border: 1.5px solid color-mix(in srgb, var(--accent-cyan) 32%, transparent);
  color: var(--heading-color);
}
.bt-ghost i { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.bt-ghost:hover { border-color: color-mix(in srgb, var(--accent-cyan) 62%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-cyan) 22%, transparent); transform: translateY(-2px); }
[dir="rtl"] .bt-ghost:hover i { transform: translateX(5px); }    /* chevron slides "back" = rightwards in RTL */
[dir="ltr"] .bt-ghost:hover i { transform: translateX(-5px); }
/* Continue/Next — a forward sheen sweep + brighter thrust on hover */
.bt-nav .bt-cta { position: relative; overflow: hidden; isolation: isolate; }
.bt-nav .bt-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: btSheen 3.4s ease-in-out infinite; }
.bt-nav .bt-cta > * { position: relative; z-index: 1; }
.bt-nav .bt-cta:hover { box-shadow: 0 16px 40px var(--primary-glow), 0 0 30px color-mix(in srgb, var(--secondary-color) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .bt-nav .bt-cta::after { animation: none; display: none; } }

/* === takeoff "launch path" progress: a colourful tube that fills + a rocket riding the fill tip === */
.bt-track { position: relative; width: 100%; max-width: 460px; height: 12px; margin: 0 auto 2.6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-cyan) 9%, var(--glass-bg)); border: 1px solid var(--glass-border); }
.bt-track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-cyan), var(--secondary-color), var(--accent-violet), var(--accent-pink)); box-shadow: 0 0 14px var(--accent-cyan-glow), 0 0 26px color-mix(in srgb, var(--accent-violet) 35%, transparent); transition: width .85s cubic-bezier(.45,.05,.2,1); }
.bt-track-rocket { position: absolute; top: 50%; inset-inline-end: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent-cyan), #67e8f9); color: #04121a; box-shadow: 0 0 18px var(--accent-cyan-glow); transform: translate(50%, -50%); z-index: 2; font-size: .82rem; }
[dir="rtl"] .bt-track-rocket { transform: translate(-50%, -50%); }
.bt-track-rocket i { transform: rotate(45deg); }           /* LTR: nose points right = forward */
[dir="rtl"] .bt-track-rocket i { transform: rotate(-135deg); }  /* RTL: nose points LEFT = forward (user: head to the left, not up) */
@media (prefers-reduced-motion: reduce) { .bt-track-fill { transition: none; } }

/* === Next + Back → a true MATCHED PAIR (user): IDENTICAL shape, arrow, effects and
   animations — only the colour differs (Next = primary orange, Back = cyan→violet).
   Back used to be a glassy outline with a chevron; now it's a filled gradient with the
   same arrow + sheen + hover lift + float. === */
.bt-nav .bt-cta, .bt-nav .bt-ghost {
  font-size: 1.05rem; padding: 1rem 1.9rem; border-radius: 12px;
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; border: none;
  font-family: var(--font-display); font-weight: 700; color: #fff; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate; background-size: 170% 170%;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s, background-position .4s;
}
.bt-nav .bt-cta   { background: var(--gradient-primary); box-shadow: 0 10px 28px var(--primary-glow); }
.bt-nav .bt-ghost { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)); box-shadow: 0 10px 28px var(--accent-cyan-glow); }
.bt-nav .bt-cta:hover, .bt-nav .bt-ghost:hover { transform: translateY(-3px); background-position: 100% 0; }
.bt-nav .bt-cta:hover   { box-shadow: 0 16px 40px var(--primary-glow); }
.bt-nav .bt-ghost:hover { box-shadow: 0 16px 40px var(--accent-cyan-glow); }
/* same moving sheen on the Back button too (Next already has it above) */
.bt-nav .bt-ghost::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: btSheen 3.4s ease-in-out infinite; }
.bt-nav .bt-ghost > * { position: relative; z-index: 1; }
/* the Back arrow = same arrow as Next, mirrored to point "back", with a matching hover nudge */
.bt-cta-arrow-back { transition: transform .25s; }
.bt-nav .bt-ghost:hover .bt-cta-arrow-back { transform: translateX(6px); }              /* RTL: nudge right = back */
[dir="ltr"] .bt-nav .bt-ghost:hover .bt-cta-arrow-back { transform: translateX(-6px); } /* LTR: nudge left = back */
@media (prefers-reduced-motion: reduce) { .bt-nav .bt-ghost::after { animation: none; display: none; } }

/* === user: every pill/stadium "button" on this page → 12px rounded-rect, exactly like
   the nav-bar pills. The scan chips (.bt-mod) and the WhatsApp-form perks (.bt-wa-perks li)
   were full stadiums (999px); the result-card CTA was 10px. (The round 50% elements —
   number markers, the Roby avatar + WhatsApp badge, check-circles, progress rings — and
   the thin progress BARS stay as they are: they're not buttons.) === */
.bt-mod, .bt-wa-perks li, .bt-card-cta { border-radius: 12px !important; }

/* ============================================================================
   WhatsApp lead form — REDESIGN (user): Roby's head BIG at the top-centre with the
   WhatsApp badge + a "ringing / connected" effect (expanding green rings, a shaking
   badge, a lit green online dot); a FULL-WIDTH headline (~3 lines, not 4 narrow) that
   zooms in + glows; and tight, practical fields (Name + WhatsApp number only).
   ============================================================================ */
.bt-wa-avatar-top { position: relative; width: 98px; height: 98px; margin: .2rem auto 1.3rem; display: grid; place-items: center; }
.bt-wa-avatar-top img { position: relative; z-index: 2; width: 98px; height: 98px; border-radius: 50%; object-fit: cover;
  border: 3px solid color-mix(in srgb, #25d366 70%, transparent); box-shadow: 0 0 28px color-mix(in srgb, #25d366 55%, transparent);
  animation: btScanFloat 3.8s ease-in-out infinite; }
/* expanding rings = an incoming "ring / connected" pulse */
.bt-wa-ring { position: absolute; width: 98px; height: 98px; border-radius: 50%; border: 2px solid color-mix(in srgb, #25d366 55%, transparent); animation: btWaRing 2.2s ease-out infinite; }
.bt-wa-ring-2 { animation-delay: 1.1s; }
@keyframes btWaRing { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.95); opacity: 0; } }
/* badge shakes like a ringing phone */
.bt-wa-avatar-top .bt-wa-badge { width: 34px; height: 34px; font-size: 1.05rem; bottom: 0; inset-inline-end: 0; z-index: 3; transform-origin: 50% 60%; animation: btWaShake 2.4s ease-in-out infinite; }
@keyframes btWaShake { 0%,68%,100% { transform: rotate(0); } 74% { transform: rotate(16deg); } 80% { transform: rotate(-13deg); } 86% { transform: rotate(9deg); } 92% { transform: rotate(-5deg); } }
/* lit green "connected" dot */
.bt-wa-online { position: absolute; z-index: 3; top: 4px; inset-inline-start: 8px; width: 15px; height: 15px; border-radius: 50%; background: #25d366; border: 2px solid var(--surface-elevated); animation: btWaOnline 2s ease-in-out infinite; }
@keyframes btWaOnline { 0%,100% { box-shadow: 0 0 7px 1px #25d366, 0 0 0 0 rgba(37,211,102,.6); } 50% { box-shadow: 0 0 13px 3px #25d366, 0 0 0 7px rgba(37,211,102,0); } }

/* headline → full width (~3 lines), centred, glowing + zoom-in entrance */
.bt-wa-title { display: block; width: auto; max-width: 100%; text-align: center; margin: 0 auto .55rem;
  font-size: clamp(1.55rem, 3.1vw, 2.3rem); line-height: 1.22; text-wrap: balance;
  animation: btWaTitleIn .6s cubic-bezier(.2,.7,.3,1.25) both, btWaTitleGlow 3.4s ease-in-out .6s infinite; }
@keyframes btWaTitleIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes btWaTitleGlow { 0%,100% { text-shadow: 0 0 18px color-mix(in srgb, #25d366 30%, transparent); } 50% { text-shadow: 0 0 34px color-mix(in srgb, #25d366 55%, transparent); } }
.bt-wa-title:hover { animation: btZoom .9s ease-in-out infinite; }
.bt-wa-wrap .bt-wa-lead { text-align: center; margin: 0 auto 1.1rem; max-width: 56ch; }

/* practical fields — Name + WhatsApp number (2 cols); phone gets a WhatsApp icon prefix
   and is no longer a giant full-width box */
.bt-wa-form { max-width: 560px; }
.bt-wa-phone { position: relative; display: block; }
.bt-wa-phone i { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); color: #25d366; font-size: 1.05rem; pointer-events: none; }
.bt-wa-phone input { padding-inline-start: 38px; }

@media (prefers-reduced-motion: reduce) {
  .bt-wa-avatar-top img, .bt-wa-ring, .bt-wa-avatar-top .bt-wa-badge, .bt-wa-online, .bt-wa-title { animation: none !important; }
  .bt-wa-ring { display: none; }
  .bt-wa-title:hover { animation: none; }
}

/* ---- results confetti (spawned by business-takeoff.js when results render) ---- */
.bt-confetti { position: fixed; inset: 0; z-index: 9990; overflow: hidden; pointer-events: none; }
.bt-confetti i {
  position: absolute; top: -6%; width: 9px; height: 15px; border-radius: 2px; opacity: 0;
  animation: btConfettiFall var(--d, 3s) cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes btConfettiFall {
  0%   { opacity: 0; transform: translate(0, -24px) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0px), 104vh) rotate(var(--r, 720deg)); }
}
@media (prefers-reduced-motion: reduce) { .bt-confetti { display: none !important; } }