/* ============================================================
   FUNNELS THAT SELL — Motion & Interactive Components
   Marquees | Toasts | Calculator | Tabs | Sliders | Sales Page
   Resources | Authority Bands | Micro-interactions
   ============================================================ */

/* ---------- Reveal variants (extend .reveal) ---------- */
.rv-zoom { transform:scale(.88); }
.rv-zoom.in { transform:scale(1); }
.rv-left { transform:translateX(-42px); }
.rv-left.in { transform:translateX(0); }
.rv-right { transform:translateX(42px); }
.rv-right.in { transform:translateX(0); }
.rv-blur { filter:blur(10px); }
.rv-blur.in { filter:blur(0); }
.rv-pop.in { animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }

/* ---------- Scroll progress bar ---------- */
#scrollBar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:999; border-radius:0 4px 4px 0;
  box-shadow:0 0 10px rgba(123,104,238,0.5);
  transition:width .08s linear;
}

/* ---------- Back to top ---------- */
#toTop {
  position:fixed; right:22px; bottom:22px; z-index:98;
  width:46px; height:46px; border-radius:13px; border:1px solid var(--line-2);
  background:#fff; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(16px) scale(.8); pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
#toTop.show { opacity:1; transform:none; pointer-events:auto; }
#toTop:hover { background:#1f1f24; color:#fff; border-color:#1f1f24; }
#toTop svg { width:20px; height:20px; }

/* ---------- Floating gradient orbs ---------- */
html { overflow-x:hidden; }
.section { position:relative; }
.page-hero, .sales-hero { overflow:hidden; }
#offers, .urgency, .cta-band { overflow:hidden; }
.orb {
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.5; pointer-events:none; z-index:0;
  animation:orbFloat 9s ease-in-out infinite;
}
.orb.o1 { width:300px; height:300px; background:rgba(123,104,238,0.35); top:-60px; right:-60px; }
.orb.o2 { width:260px; height:260px; background:rgba(253,113,175,0.28); bottom:-70px; left:-50px; animation-delay:-4s; }
.orb.o3 { width:200px; height:200px; background:rgba(78,155,250,0.3); top:40%; left:60%; animation-delay:-2s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(24px,-30px) scale(1.08); }
  66% { transform:translate(-20px,18px) scale(.94); }
}

/* ---------- Logo marquee (authority) ---------- */
.marquee {
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track {
  display:flex; gap:18px; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track.rev { animation-direction:reverse; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.mq-item {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:11px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f3ff 100%);
  border:1px solid #e7e1fb; border-bottom-color:#d9d1f8;
  border-radius:14px;
  padding:10px 22px 10px 11px; white-space:nowrap;
  font-weight:700; font-size:14.5px; color:#4d4763; letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 0 #e3dbfa, 0 12px 22px -14px rgba(84,62,180,.45);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .2s ease;
}
.mq-item::after {
  content:''; position:absolute; top:-20%; bottom:-20%; left:-45%; width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;
}
.mq-item:hover::after { left:118%; }
.mq-item:hover {
  color:var(--text); border-color:#d3c8fa;
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 5px 0 #d5cbf8, 0 18px 30px -14px rgba(84,62,180,.55);
}
.mq-item:hover .mq-ic { filter:brightness(1.1) saturate(1.12); }

/* gradient icon chips (3D) */
.mq-ic {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28);
}
.mq-ic svg { width:16px; height:16px; }
.mq-ic.c1 { background:linear-gradient(145deg,#7b68ee,#a78bfa); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(123,104,238,.55); }
.mq-ic.c2 { background:linear-gradient(145deg,#3f8ef7,#7cc0ff); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(78,155,250,.55); }
.mq-ic.c3 { background:linear-gradient(145deg,#fd5e9e,#ff9ec8); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(253,113,175,.5); }
.mq-ic.c4 { background:linear-gradient(145deg,#ff9f43,#ffc37a); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(255,159,67,.5); }
.mq-ic.c5 { background:linear-gradient(145deg,#18a957,#4cd487); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(24,169,87,.5); }
.mq-ic.c6 { background:linear-gradient(145deg,#9d7bfa,#c4b5fd); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(167,139,250,.55); }
.mq-ic.c7 { background:linear-gradient(145deg,#0ea5a5,#4fd1c5); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(14,165,165,.5); }
.mq-ic.c8 { background:linear-gradient(145deg,#f65e7a,#ff8fa3); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(20,10,60,.28), 0 3px 10px -2px rgba(246,94,122,.5); }

/* live icon motion — staggered + varied */
.mq-item:nth-child(4n+1) .mq-ic { animation:mqBob 3.1s ease-in-out infinite; }
.mq-item:nth-child(4n+2) .mq-ic { animation:mqTilt 3.5s ease-in-out infinite; animation-delay:-1.2s; }
.mq-item:nth-child(4n+3) .mq-ic { animation:mqBeat 2.7s ease-in-out infinite; animation-delay:-.6s; }
.mq-item:nth-child(4n+4) .mq-ic { animation:mqBob 3.6s ease-in-out infinite; animation-delay:-1.8s; }
@keyframes mqBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3.5px); } }
@keyframes mqTilt { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-9deg); } 75% { transform:rotate(9deg); } }
@keyframes mqBeat { 0%,100% { transform:scale(1); } 45% { transform:scale(1.14); } 60% { transform:scale(1.02); } }

/* ---------- Trust / authority band ---------- */
.trust-band {
  margin-top:16px;
  border-top:0; border-bottom:1px solid var(--line);
  background:var(--bg-soft); padding:30px 0;
}
.trust-head {
  text-align:center; font-size:12px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:#9a9aa2; margin-bottom:20px;
}
.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.auth-badge {
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; transition:all .22s ease;
}
.auth-badge:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d8d2fa; }
.auth-badge .ab-ic {
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#f1eefe; border:1px solid #ddd7fb; color:#6a56e8;
}
.auth-badge .ab-ic svg { width:23px; height:23px; }
.auth-badge b { display:block; font-size:14.5px; letter-spacing:-.01em; }
.auth-badge span { font-size:12.5px; color:var(--muted); }

/* ---------- Spotlight hover cards ---------- */
.spot { position:relative; overflow:hidden; }
.spot::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(123,104,238,0.10), transparent 42%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.spot:hover::after { opacity:1; }

/* ---------- Icon micro-motion ---------- */
.card .icon { transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; }
.card:hover .icon { transform:scale(1.12) rotate(-6deg); }
@keyframes iconPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); } }

/* ---------- Live toast notifications ---------- */
.toast-stack {
  position:fixed; left:20px; bottom:20px; z-index:97;
  display:flex; flex-direction:column; gap:10px; max-width:330px;
}
.toast {
  display:flex; gap:12px; align-items:center;
  background:rgba(255,255,255,0.97); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:14px;
  padding:12px 16px; box-shadow:var(--shadow);
  animation:toastIn .5s cubic-bezier(.34,1.56,.64,1) both;
  transition:opacity .4s ease, transform .4s ease;
}
.toast.hide { opacity:0; transform:translateX(-24px); }
.toast .tav { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(135deg, var(--t1,#7b68ee), var(--t2,#4e9bfa)); color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px; }
.toast img { width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.toast b { display:block; font-size:13px; letter-spacing:-.01em; }
.toast span { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.toast .dot-g { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(24,169,87,0.15); flex-shrink:0; }
@keyframes toastIn { from { opacity:0; transform:translateX(-30px) scale(.9); } to { opacity:1; transform:none; } }
@media (max-width:600px){ .toast-stack { display:none; } }

/* ---------- Typewriter ---------- */
.type-line { display:inline; }
.type-caret {
  display:inline-block; width:3px; height:.95em; margin-left:3px;
  background:var(--pink); border-radius:2px; vertical-align:-.12em;
  animation:caretBlink .8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity:0; } }

/* ---------- Ticker strip (sales page top) ---------- */
.ticker {
  overflow:hidden; background:#1f1f24; color:#fff;
  padding:9px 0; font-size:13px; font-weight:600;
}
.ticker-track { display:flex; width:max-content; animation:marquee 26s linear infinite; }
.ticker-track span { display:inline-flex; align-items:center; gap:8px; padding:0 26px; white-space:nowrap; color:rgba(255,255,255,0.9); }
.ticker-track span b { color:#ffd88a; }

/* ---------- ROI Calculator ---------- */
.calc {
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(135deg,#fbfaff,#fdf5fa 60%,#f4f9ff);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.calc-grid { display:grid; grid-template-columns:1.1fr 1fr; }
.calc-sliders { padding:34px 34px 30px; display:flex; flex-direction:column; gap:24px; }
.calc-sl label { display:flex; justify-content:space-between; font-size:14px; font-weight:700; margin-bottom:10px; }
.calc-sl label output { color:#6a56e8; }
input[type=range].rng {
  -webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:99px;
  background:linear-gradient(90deg,var(--purple) var(--fill,50%),#e8e8ee var(--fill,50%));
  outline:none; cursor:pointer;
}
input[type=range].rng::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--purple); cursor:grab;
  box-shadow:0 3px 10px rgba(123,104,238,0.35); transition:transform .15s;
}
input[type=range].rng::-webkit-slider-thumb:hover { transform:scale(1.15); }
input[type=range].rng::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; background:#fff;
  border:3px solid var(--purple); cursor:grab; box-shadow:0 3px 10px rgba(123,104,238,0.35);
}
.calc-out {
  padding:34px 34px 30px; background:#1f1f24; color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  position:relative; overflow:hidden;
}
.calc-out::before {
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(123,104,238,0.35); filter:blur(60px); top:-70px; right:-70px;
  animation:orbFloat 8s ease-in-out infinite;
}
.calc-out small { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:700; position:relative; }
.calc-out .big {
  font-size:clamp(34px,4vw,46px); font-weight:800; letter-spacing:-.03em; position:relative;
  background:linear-gradient(90deg,#fd71af,#a99cf6 55%,#8cbcfb);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.calc-out .sub { font-size:13.5px; color:rgba(255,255,255,0.62); position:relative; }
.calc-out .mini-row { display:flex; gap:18px; margin-top:18px; position:relative; flex-wrap:wrap; }
.calc-out .mini b { display:block; font-size:19px; font-weight:800; }
.calc-out .mini span { font-size:11px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.8px; }
@media (max-width:860px){ .calc-grid { grid-template-columns:1fr; } }

/* ---------- Before / After slider ---------- */
.ba-wrap { position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow); user-select:none; }
.ba-frame { position:relative; aspect-ratio:16/10; background:#fff; }
.ba-side { position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.ba-side h4 { font-size:15px; letter-spacing:1.6px; text-transform:uppercase; }
.ba-side .bar-row { display:flex; align-items:center; gap:10px; }
.ba-side .bar-row em { font-style:normal; font-size:12.5px; color:var(--muted); width:118px; flex-shrink:0; }
.ba-side .bar-track { flex:1; height:11px; background:#ececf1; border-radius:99px; overflow:hidden; }
.ba-side .bar-fill { height:100%; border-radius:99px; }
.ba-before { background:#f4f4f6; }
.ba-before h4 { color:#9a9aa2; }
.ba-before .bar-fill { background:#b9b9c2; }
.ba-after { background:linear-gradient(135deg,#f5f3ff,#fdf2f8 60%,#f0f7ff); }
.ba-after h4 { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.ba-after .bar-fill { background:linear-gradient(90deg,#fd71af,#7b68ee); }
.ba-handle {
  position:absolute; top:0; bottom:0; width:3px; background:#1f1f24; z-index:4; cursor:ew-resize;
  touch-action:none;
}
.ba-handle::after {
  content:'⇆'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#1f1f24; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.ba-after-clip { position:absolute; inset:0; clip-path:inset(0 0 0 var(--cut,50%)); }
.ba-tag {
  position:absolute; top:14px; z-index:3; font-size:11px; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; padding:6px 13px; border-radius:999px;
}
.ba-tag.l { left:14px; background:rgba(255,255,255,0.9); color:#9a9aa2; border:1px solid var(--line); }
.ba-tag.r { right:14px; background:#1f1f24; color:#fff; }

/* ---------- Tabs / filters ---------- */
.tabs { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.tab-btn {
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer;
  padding:10px 20px; border-radius:999px; border:1px solid var(--line-2);
  background:#fff; color:var(--muted); transition:all .18s ease; letter-spacing:-.01em;
}
.tab-btn:hover { border-color:#c8bcf9; color:var(--text); transform:translateY(-1px); }
.tab-btn.active { background:#1f1f24; color:#fff; border-color:#1f1f24; box-shadow:0 6px 18px rgba(0,0,0,0.16); }
.fade-swap { animation:fadeSwap .45s ease both; }
@keyframes fadeSwap { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- Countdown ---------- */
.count-row { display:flex; gap:12px; justify-content:center; }
.count-box {
  background:#fff; border:1px solid var(--line-2); border-radius:14px;
  min-width:76px; padding:14px 10px 10px; text-align:center;
  box-shadow:var(--shadow-sm); animation:iconPulse 2.6s ease-in-out infinite;
}
.count-box b { display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.count-box span { font-size:10.5px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); font-weight:700; }

/* ---------- Testimonial slider ---------- */
.tslider { position:relative; max-width:760px; margin:0 auto; }
.tslide { display:none; }
.tslide.on { display:block; animation:fadeSwap .5s ease both; }
.tslide .t-big {
  font-size:clamp(19px,2.4vw,24px); font-weight:600; line-height:1.6;
  letter-spacing:-.015em; color:var(--text); text-align:center; margin-bottom:26px;
}
.tslide .t-big::before { content:'\201C'; color:var(--pink); font-size:1.4em; line-height:0; margin-right:2px; }
.tslide .t-big::after { content:'\201D'; color:var(--pink); font-size:1.4em; line-height:0; margin-left:2px; }
.tslide .t-who { justify-content:center; }
.tdots { display:flex; gap:8px; justify-content:center; margin-top:26px; }
.tdots button {
  width:9px; height:9px; border-radius:50%; border:none; cursor:pointer;
  background:#d5d5db; transition:all .25s ease; padding:0;
}
.tdots button.on { background:var(--purple); width:26px; border-radius:99px; }
.tnav {
  position:absolute; top:44%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:all .2s; z-index:2;
}
.tnav:hover { background:#1f1f24; color:#fff; border-color:#1f1f24; }
.tnav svg { width:18px; height:18px; }
.tnav.prev { left:-58px; } .tnav.next { right:-58px; }
@media (max-width:980px){ .tnav.prev { left:-8px; } .tnav.next { right:-8px; } }

/* ---------- Animated progress lines ---------- */
.pline { height:9px; border-radius:99px; background:#ececf1; overflow:hidden; }
.pline i {
  display:block; height:100%; width:0; border-radius:99px;
  background:var(--grad); transition:width 1.4s cubic-bezier(.22,1,.36,1);
}
.pline.green i { background:linear-gradient(90deg,#18a957,#4e9bfa); }
.pline.pink i { background:linear-gradient(90deg,#fd71af,#ff9f43); }

/* ---------- Sales page ---------- */
.sales-hero {
  padding:150px 0 80px; text-align:center; position:relative; overflow:hidden;
}
.sales-hero h1 { font-size:clamp(34px,5.4vw,62px); max-width:900px; margin:0 auto 22px; }
.sales-hero .sub { font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:660px; margin:0 auto 34px; }
.offer-band {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px;
}
.offer-band .ob {
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:10px 17px; font-size:13.5px; font-weight:700; color:var(--text);
}
.offer-band .ob svg { width:16px; height:16px; color:var(--green); }

.offer-box {
  position:relative; border:1.5px solid var(--line); border-radius:22px;
  background:#fff; padding:40px 38px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.offer-box:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#d8d2fa; }
.offer-box .ob-num {
  position:absolute; top:18px; right:24px; font-size:56px; font-weight:800;
  letter-spacing:-.05em; color:transparent;
  -webkit-text-stroke:1.5px #e3defc; line-height:1;
}
.offer-box .ob-tag {
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:16px;
}
.offer-box h3 { font-size:clamp(22px,2.6vw,29px); margin-bottom:10px; }
.offer-box > p { color:var(--muted); font-size:15.5px; margin-bottom:22px; }
.ob-list { margin-bottom:24px; }
.ob-list li { display:flex; gap:11px; padding:7.5px 0; font-size:14.5px; color:var(--muted); align-items:flex-start; }
.ob-list li svg { width:18px; height:18px; color:var(--green); flex-shrink:0; margin-top:3px; }
.ob-list li b { color:var(--text); }
.ob-price-row { display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.ob-price { font-size:32px; font-weight:800; letter-spacing:-.03em; }
.ob-was { color:#9a9aa2; text-decoration:line-through; font-size:16px; font-weight:600; }
.ob-chip { font-size:11.5px; font-weight:800; letter-spacing:.6px; padding:6px 12px; border-radius:999px; background:#e9f9f0; border:1px solid #c4ecd6; color:#129457; text-transform:uppercase; }

.bonus-card {
  display:flex; gap:18px; align-items:flex-start;
  border:1.5px dashed #d5c9f7; border-radius:16px; background:#faf9ff;
  padding:22px 24px; transition:all .2s ease;
}
.bonus-card:hover { border-color:var(--purple); background:#f7f5ff; transform:translateX(4px); }
.bonus-card .b-ic {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:#f1eefe; border:1px solid #ddd7fb; color:#6a56e8;
  display:flex; align-items:center; justify-content:center;
}
.bonus-card .b-ic svg { width:22px; height:22px; }
.bonus-card b { display:block; font-size:15.5px; margin-bottom:4px; }
.bonus-card p { color:var(--muted); font-size:13.5px; }
.bonus-card .b-val { margin-left:auto; flex-shrink:0; font-weight:800; color:#129457; font-size:14px; white-space:nowrap; }

.stack-list { max-width:640px; margin:0 auto; }
.stack-list .s-row {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 4px; border-bottom:1px dashed var(--line-2); font-size:15px;
}
.stack-list .s-row b { font-weight:700; }
.stack-list .s-row span { color:#129457; font-weight:800; white-space:nowrap; }
.stack-list .s-total {
  display:flex; justify-content:space-between; padding:20px 4px 0; align-items:center;
}
.stack-list .s-total b { font-size:19px; }
.stack-list .s-total span { font-size:26px; font-weight:800; letter-spacing:-.02em; }
.stack-list .s-total span s { color:#9a9aa2; font-size:17px; margin-right:10px; font-weight:600; }

.vs-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.vs-table th, .vs-table td { padding:15px 18px; text-align:center; font-size:14px; border-bottom:1px solid var(--line); }
.vs-table th { background:var(--bg-soft); font-size:13px; letter-spacing:.6px; text-transform:uppercase; }
.vs-table th:first-child, .vs-table td:first-child { text-align:left; font-weight:700; }
.vs-table tr:last-child td { border-bottom:none; }
.vs-table td .no { color:#e5484d; } .vs-table td .yes { color:#18a957; }
.vs-table .us-col { background:rgba(123,104,238,0.05); font-weight:700; }
.vs-table th.us-col { color:#6a56e8; }

.urgency {
  border:1.5px solid #f9d2e5; border-radius:22px; overflow:hidden;
  background:
    radial-gradient(420px 200px at 15% 20%, rgba(253,113,175,0.14), transparent 60%),
    radial-gradient(420px 200px at 85% 80%, rgba(123,104,238,0.12), transparent 60%),
    #fff;
  padding:44px 34px; text-align:center;
}
.urgency h3 { font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.urgency p { color:var(--muted); max-width:520px; margin:0 auto 26px; }

.seal {
  width:120px; height:120px; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.seal svg { position:absolute; inset:0; width:100%; height:100%; animation:spinSlow 18s linear infinite; }
@keyframes spinSlow { to { transform:rotate(360deg); } }
.seal b { font-size:11px; letter-spacing:.6px; text-transform:uppercase; line-height:1.4; }

/* ---------- Resources page ---------- */
.res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.res-card {
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:28px 26px; transition:all .25s ease; overflow:hidden;
}
.res-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#d8d2fa; }
.res-card .rc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.res-card .rc-ic {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.res-card .rc-ic svg { width:26px; height:26px; }
.res-card .fmt {
  font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); color:var(--muted);
}
.res-card h3 { font-size:18.5px; margin-bottom:8px; }
.res-card p { color:var(--muted); font-size:14px; flex:1; margin-bottom:18px; }
.res-meta { display:flex; gap:14px; font-size:12px; color:#9a9aa2; margin-bottom:16px; font-weight:600; }
.res-meta span { display:inline-flex; align-items:center; gap:5px; }
.res-meta svg { width:13px; height:13px; }
.res-card .btn { width:100%; }
.res-card .dl { display:none; }
.res-card.got .dl { display:inline-flex; }
.res-card.got .req { display:none; }

.res-strip {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  border:1.5px dashed #d5c9f7; background:#faf9ff; border-radius:18px;
  padding:26px 30px;
}
.res-strip .rs-ic {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#f1eefe,#ffeef6); border:1px solid #ddd7fb;
  display:flex; align-items:center; justify-content:center; color:#6a56e8;
}
.res-strip .rs-ic svg { width:26px; height:26px; }
.res-strip b { display:block; font-size:16.5px; }
.res-strip span { color:var(--muted); font-size:13.5px; }
.res-strip .btn { margin-left:auto; }
@media (max-width:760px){ .res-strip .btn { margin-left:0; } }

/* ---------- Case studies extras ---------- */
.cs-quote {
  border-left:3px solid var(--purple); background:var(--bg-soft);
  border-radius:0 12px 12px 0; padding:16px 20px; margin-top:18px;
  font-size:14px; color:var(--muted); font-style:italic;
}
.cs-quote b { display:block; margin-top:8px; font-style:normal; color:var(--text); font-size:13px; }
.cs-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.cs-grid .card { margin-bottom:0; }
@media (max-width:860px){ .cs-grid { grid-template-columns:1fr; } }

/* ---------- Wave divider ---------- */
.wave { display:block; width:100%; height:auto; }

/* ---------- Big number list (sales "why" section) ---------- */
.biglist { counter-reset:big; }
.biglist .bl-item {
  counter-increment:big; position:relative;
  padding:26px 30px 26px 96px; border-radius:18px;
  border:1px solid transparent; transition:all .22s ease; margin-bottom:6px;
}
.biglist .bl-item:hover { background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm); transform:translateX(6px); }
.biglist .bl-item::before {
  content:counter(big,decimal-leading-zero);
  position:absolute; left:26px; top:26px;
  font-size:30px; font-weight:800; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.biglist h3 { font-size:19px; margin-bottom:7px; }
.biglist p { color:var(--muted); font-size:14.5px; max-width:640px; }

/* ---------- Sticky mini CTA bar (sales page) ---------- */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(16px);
  border-top:1px solid var(--line); padding:11px 0;
  transform:translateY(110%); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.show { transform:none; }
.sticky-cta .container { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.sticky-cta b { font-size:14.5px; }
.sticky-cta span { font-size:12.5px; color:var(--muted); display:block; }

/* ---------- Chips row for niches ---------- */
.niche-cloud { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto; }
.niche-cloud .nc {
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  transition:all .2s ease; cursor:default;
}
.niche-cloud .nc:hover {
  color:#6a56e8; border-color:#c8bcf9; background:#f7f5ff;
  transform:translateY(-3px) scale(1.04); box-shadow:var(--shadow-sm);
}

/* ---------- FAQ mini (home) ---------- */
.mini-faq { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .badge-grid { grid-template-columns:1fr 1fr; }
  .res-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .badge-grid { grid-template-columns:1fr; }
  .res-grid { grid-template-columns:1fr; }
  .offer-box { padding:30px 24px; }
  .count-box { min-width:64px; }
}

/* ============================================================
   3D MOTION KIT v44 — 360 orbits, float3d shapes, tilt, rings
   ============================================================ */

/* ---- extra reveal variants (needs .reveal base) ---- */
.rv-flip { transform:perspective(900px) rotateX(16deg) translateY(30px); transform-origin:50% 100%; }
.rv-flip.in { transform:none; }
.rv-rot { transform:rotate(-4deg) scale(.94); }
.rv-rot.in { transform:none; }
.rv-drop { transform:translateY(-34px); opacity:0; }
.rv-drop.in { transform:none; opacity:1; }
.rv-soft { transform:scale(.82); filter:blur(8px); }
.rv-soft.in { transform:scale(1); filter:blur(0); }

/* ---- stagger children (parent gets .in) ---- */
.stagger > * { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.stagger.in > * { opacity:1; transform:none; }
.stagger.in > *:nth-child(2) { transition-delay:.07s; }
.stagger.in > *:nth-child(3) { transition-delay:.14s; }
.stagger.in > *:nth-child(4) { transition-delay:.21s; }
.stagger.in > *:nth-child(5) { transition-delay:.28s; }
.stagger.in > *:nth-child(6) { transition-delay:.35s; }
.stagger.in > *:nth-child(7) { transition-delay:.42s; }
.stagger.in > *:nth-child(8) { transition-delay:.49s; }
.stagger.in > *:nth-child(9) { transition-delay:.56s; }
.stagger.in > *:nth-child(10) { transition-delay:.63s; }
.stagger.in > *:nth-child(11) { transition-delay:.7s; }
.stagger.in > *:nth-child(12) { transition-delay:.77s; }

/* ---- 3D tilt card ---- */
.tilt { transform-style:preserve-3d; will-change:transform; position:relative; }
.tilt .tz1 { transform:translateZ(26px); }
.tilt .tz2 { transform:translateZ(48px); }
.tilt::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.tilt:hover::before { opacity:1; }
.tilt-dark::before { background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(167,139,250,.20), transparent 46%); }

/* ---- 360 orbit system ---- */
.orbit { position:relative; }
.orbit-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px dashed rgba(123,104,238,.35); pointer-events:none;
}
.orbit-ring.r2 { border-color:rgba(253,113,175,.28); }
.orbit-ring.r3 { border-color:rgba(78,155,250,.25); }
.orbit-spin { position:absolute; top:50%; left:50%; width:0; height:0; animation:rot360 var(--os,22s) linear infinite; }
.orbit-spin.rev { animation-direction:reverse; }
.orb-chip {
  position:absolute; top:0; left:0;
  width:var(--sz,44px); height:var(--sz,44px);
  margin:calc(var(--sz,44px) / -2) 0 0 calc(var(--sz,44px) / -2);
  transform:rotate(var(--a,0deg)) translateX(var(--r,120px)) rotate(calc(-1 * var(--a,0deg)));
}
.orb-chip .oc-ic {
  display:grid; place-items:center;
  width:100%; height:100%; border-radius:14px;
  background:linear-gradient(145deg,#fff,#ece9ff);
  border:1px solid rgba(123,104,238,.25);
  box-shadow:0 10px 24px -8px rgba(30,20,80,.35), inset 0 1px 0 #fff;
  animation:rot360R var(--os,22s) linear infinite;
  color:var(--oc,#7b68ee);
}
.orb-chip .oc-ic svg { width:52%; height:52%; }
.orb-chip.rev .oc-ic { animation-direction:reverse; }
.orb-core {
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,#7b68ee,#4e9bfa);
  color:#fff; box-shadow:0 16px 40px -10px rgba(123,104,238,.6), inset 0 2px 0 rgba(255,255,255,.4);
  animation:corePulse 3.2s ease-in-out infinite;
}
@keyframes corePulse { 0%,100% { box-shadow:0 16px 40px -10px rgba(123,104,238,.6), inset 0 2px 0 rgba(255,255,255,.4); } 50% { box-shadow:0 16px 56px -8px rgba(123,104,238,.85), inset 0 2px 0 rgba(255,255,255,.4); } }
@keyframes rot360 { to { transform:rotate(360deg); } }
@keyframes rot360R { from { transform:rotate(360deg); } to { transform:rotate(0deg); } }

/* ---- float3d shapes ---- */
.f3d { position:absolute; pointer-events:none; will-change:transform; }
.f3d-sphere {
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 34%), radial-gradient(circle at 34% 30%, var(--c1,#a78bfa), var(--c2,#7b68ee) 58%, var(--c3,#4c3fd6));
  box-shadow:0 24px 50px -18px var(--c2,#7b68ee), inset -8px -12px 24px rgba(20,10,70,.35);
  animation:f3dFloat var(--fd,7s) ease-in-out infinite;
}
.f3d-ring {
  border-radius:50%;
  border:calc(var(--th,10px)) solid transparent;
  background:linear-gradient(135deg,var(--c1,#fd71af),var(--c2,#7b68ee)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:f3dFloat var(--fd,8s) ease-in-out infinite, rot360 calc(var(--fd,8s) * 3) linear infinite;
}
.f3d-pill {
  border-radius:999px;
  background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 18px 40px -16px rgba(0,0,0,.5);
  animation:f3dFloat var(--fd,7.5s) ease-in-out infinite;
}
@keyframes f3dFloat { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-22px) rotate(6deg); } }

/* ---- spinning 3d cube ---- */
.cube3d { position:relative; transform-style:preserve-3d; animation:cubeSpin 16s linear infinite; }
.cube3d i {
  position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(145deg, rgba(167,139,250,.85), rgba(123,104,238,.55));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.cube3d i:nth-child(1) { transform:rotateY(0deg) translateZ(calc(var(--cs,40px) / 1.55)); }
.cube3d i:nth-child(2) { transform:rotateY(90deg) translateZ(calc(var(--cs,40px) / 1.55)); background:linear-gradient(145deg, rgba(253,113,175,.8), rgba(255,159,67,.5)); }
.cube3d i:nth-child(3) { transform:rotateY(180deg) translateZ(calc(var(--cs,40px) / 1.55)); background:linear-gradient(145deg, rgba(78,155,250,.8), rgba(24,169,87,.45)); }
.cube3d i:nth-child(4) { transform:rotateY(270deg) translateZ(calc(var(--cs,40px) / 1.55)); }
.cube3d i:nth-child(5) { transform:rotateX(90deg) translateZ(calc(var(--cs,40px) / 1.55)); background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(200,190,255,.7)); }
@keyframes cubeSpin { 0% { transform:rotateX(-18deg) rotateY(0); } 100% { transform:rotateX(-18deg) rotateY(360deg); } }

/* ---- animated conic glow ring border ---- */
@property --ga { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.glow-ring { position:relative; }
.glow-ring::before {
  content:''; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ga,0deg), #fd71af, #7b68ee, #4e9bfa, #18a957, #ff9f43, #fd71af);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:gaSpin 5.5s linear infinite;
  pointer-events:none;
}
@keyframes gaSpin { to { --ga:360deg; } }

/* ---- dark section helpers ---- */
.gridbg::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
}
.beams { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.beams i {
  position:absolute; top:-18%; width:220px; height:140%; opacity:.5;
  background:linear-gradient(180deg, transparent, rgba(167,139,250,.14) 30%, rgba(253,113,175,.10) 60%, transparent);
  transform:rotate(18deg);
  animation:beamSweep 9s ease-in-out infinite;
}
.beams i:nth-child(2) { left:22%; animation-delay:-3s; animation-duration:11s; }
.beams i:nth-child(3) { left:58%; animation-delay:-6s; animation-duration:13s; }
.beams i:nth-child(1) { left:6%; }
.beams i:nth-child(4) { left:82%; animation-delay:-1.6s; }
@keyframes beamSweep { 0%,100% { transform:rotate(18deg) translateY(-14px); opacity:.28; } 50% { transform:rotate(18deg) translateY(22px); opacity:.6; } }

/* ---- button sheen sweep ---- */
.btn-grad { position:relative; overflow:hidden; }
.btn-grad::after {
  content:''; position:absolute; top:0; left:-75%; width:42%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .65s ease; pointer-events:none;
}
.btn-grad:hover::after { left:135%; }

/* ---- count-up glow badge (hero eyebrow style) ---- */
.pulse-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2ee27a; animation:pdPulse 1.8s ease-in-out infinite; }
@keyframes pdPulse { 0%,100% { box-shadow:0 0 0 0 rgba(46,226,122,.5); } 60% { box-shadow:0 0 0 7px rgba(46,226,122,0); } }

/* ---- reduced motion guard (kit) ---- */
@media (prefers-reduced-motion: reduce) {
  .orbit-spin, .orb-chip .oc-ic, .cube3d, .f3d-sphere, .f3d-ring, .f3d-pill, .beams i, .pulse-dot, .glow-ring::before { animation:none !important; }
  .stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
  .rv-flip, .rv-rot, .rv-drop, .rv-soft { transform:none !important; filter:none !important; opacity:1 !important; }
}

/* ---- responsive (kit) ---- */
@media (max-width:760px) {
  .f3d { transform:scale(.55); }
  .orb-chip .oc-ic { --sz:36px; }
  .beams i { width:120px; }
}