/* ============================================================
   FUNNELS THAT SELL — Page-Specific Styles
   ClickUp-Inspired Light Theme
   ============================================================ */

/* ---------- Home Hero ---------- */
.home-hero { padding:164px 0 84px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center; }
.hero-copy h1 { font-size:clamp(36px,5vw,60px); margin-bottom:20px; }
.hero-copy .lead { color:var(--muted); font-size:17.5px; margin-bottom:32px; max-width:560px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.hero-note { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13.5px; font-weight:500; }
.hero-note svg { width:16px; height:16px; color:var(--green); flex-shrink:0; }
.hero-visual { position:relative; }
.float-chip {
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:13px;
  padding:11px 16px; font-size:13px; font-weight:700; color:var(--text);
  box-shadow:var(--shadow);
  animation:floaty 5s ease-in-out infinite;
}
.float-chip .dot-g { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(24,169,87,0.14); }
.float-chip small { display:block; font-weight:600; color:var(--muted); font-size:11px; }
.fc-1 { top:-16px; right:6%; animation-delay:.4s; }
.fc-2 { bottom:-14px; left:-8px; }
@keyframes floaty { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-11px);} }

/* ---------- Funnel Diagram (home + how it works) ---------- */
.funnel-viz { display:flex; flex-direction:column; align-items:center; gap:13px; width:100%; }
.f-stage {
  position:relative; text-align:center;
  border-radius:13px; padding:15px 20px;
  border:1px solid var(--line-2);
  background:#fff;
  min-width:120px;
  box-shadow:0 1px 3px rgba(20,20,40,0.04);
}
.f-stage b { display:block; font-size:15px; letter-spacing:-.01em; color:var(--text); }
.f-stage span { font-size:12px; color:var(--muted); }
.f1 { width:100%; background:#eef4fe; border-color:#c8ddfc; }
.f2 { width:84%; background:#f1eefe; border-color:#d8d2fa; }
.f3 { width:68%; background:#fdeff7; border-color:#f9d2e5; }
.f4 { width:52%; background:#fff4ea; border-color:#fbdcc2; }
.f5 { width:38%; background:#e9f9f0; border-color:#c5ecd8; }
.f-arrow { color:#c9c9d1; font-size:15px; line-height:1; }
.funnel-wrap {
  border-radius:22px; padding:36px 30px;
  background:var(--grad-soft);
  border:1px solid #eceafb;
  box-shadow:var(--shadow);
}

/* ---------- Pain Cards ---------- */
.pain-card { display:flex; gap:16px; align-items:flex-start; }
.pain-card .x {
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#fdeeee; border:1px solid #f7d3d4;
  color:var(--red); font-weight:800; font-size:18px;
}
.pain-card p { color:var(--muted); font-size:15px; }
.pain-card p b { color:var(--text); }

/* ---------- Roles / Team ---------- */
.role-card { text-align:center; }
.role-card .avatar {
  width:86px; height:86px; margin:0 auto 16px; border-radius:50%;
  background:#fff; border:1.5px dashed #d5d5db;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800; letter-spacing:-.02em;
  background-clip:padding-box;
}
.role-card .avatar.a1 { color:#2f7ae5; } .role-card .avatar.a2 { color:#6a56e8; }
.role-card .avatar.a3 { color:#e0509a; } .role-card .avatar.a4 { color:#e08625; }
.role-card .avatar.a5 { color:#129457; }
.role-card h4 { font-size:17px; margin-bottom:6px; }
.role-card p { color:var(--muted); font-size:13.5px; }

/* ---------- Alternating Feature Rows (services) ---------- */
.feat-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:88px; }
.feat-row:last-child { margin-bottom:0; }
.feat-row.flip .feat-media { order:2; }
.feat-copy .num { font-size:13px; font-weight:800; letter-spacing:2px; color:var(--purple); margin-bottom:10px; display:block; }
.feat-copy h3 { font-size:clamp(24px,3vw,32px); margin-bottom:14px; }
.feat-copy > p { color:var(--muted); font-size:16px; margin-bottom:20px; }
.feat-list li { display:flex; gap:12px; padding:8px 0; color:var(--muted); font-size:15px; align-items:flex-start; }
.feat-list li svg { width:19px; height:19px; color:var(--green); flex-shrink:0; margin-top:3px; }
.feat-list li b { color:var(--text); font-weight:700; }
.feat-media .img-slot { min-height:330px; }

/* ---------- Process Timeline ---------- */
.timeline { position:relative; max-width:860px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:26px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--blue), var(--purple), var(--pink));
}
.t-step { position:relative; padding:0 0 44px 84px; }
.t-step:last-child { padding-bottom:0; }
.t-step .t-dot {
  position:absolute; left:8px; top:2px;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14.5px; color:#2f7ae5;
  box-shadow:0 0 0 6px rgba(78,155,250,0.10);
}
.t-step:nth-child(2) .t-dot { border-color:var(--purple); color:#6a56e8; box-shadow:0 0 0 6px rgba(123,104,238,0.10); }
.t-step:nth-child(3) .t-dot { border-color:var(--pink); color:#e0509a; box-shadow:0 0 0 6px rgba(253,113,175,0.10); }
.t-step:nth-child(4) .t-dot { border-color:var(--orange); color:#e08625; box-shadow:0 0 0 6px rgba(255,159,67,0.12); }
.t-step:nth-child(5) .t-dot { border-color:var(--green); color:#129457; box-shadow:0 0 0 6px rgba(24,169,87,0.10); }
.t-step h3 { font-size:21px; margin-bottom:8px; }
.t-step .t-dur { font-size:12.5px; font-weight:700; color:#6a56e8; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; display:block; }
.t-step p { color:var(--muted); font-size:15px; max-width:640px; }
.t-step .t-gets {
  margin-top:14px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:13px; padding:15px 18px;
}
.t-step .t-gets b { font-size:12.5px; text-transform:uppercase; letter-spacing:1.2px; color:#129457; display:block; margin-bottom:7px; }
.t-step .t-gets span { color:var(--muted); font-size:14px; }

/* ---------- Tech Badges ---------- */
.tech-bands { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.tech-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line-2);
  padding:11px 20px; border-radius:12px;
  font-size:14.5px; font-weight:600; color:var(--text);
  box-shadow:0 1px 2px rgba(20,20,40,0.04);
  transition:all .2s ease;
}
.tech-badge:hover { border-color:#c8bcf9; background:#f7f5ff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* ---------- Case Studies ---------- */
.cs-card { overflow:hidden; padding:0; }
.cs-media { padding:26px 26px 0; background:var(--grad-soft); border-bottom:1px solid var(--line); }

/* real screenshot preview in case cards (replaces bar-chart mockup) */
.cs-shot {
  border-radius:14px; overflow:hidden; background:#16151c;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 44px -20px rgba(24,14,58,.38);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.cs-card:hover .cs-shot {
  transform:translateY(-6px);
  box-shadow:0 30px 56px -20px rgba(24,14,58,.45), 0 24px 80px -30px var(--pa,#7b68ee);
}
.cs-view { position:relative; height:236px; overflow:hidden; background:#fff; }
.cs-view img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  transition:object-position 1.2s cubic-bezier(.22,1,.36,1);
}
.cs-card:hover .cs-view img { object-position:50% 100%; }
.cs-view::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -30px 26px -20px rgba(15,10,40,.22);
}
.cs-hint {
  position:absolute; right:9px; bottom:9px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff;
  background:rgba(16,10,40,.55); border:1px solid rgba(255,255,255,.28);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease;
}
.cs-hint svg { width:11px; height:11px; }
.cs-card:hover .cs-hint { opacity:1; transform:none; }
@media (max-width:640px) { .cs-view { height:200px; } .cs-hint { display:none; } }

.cs-body { padding:26px; background:#fff; }
.cs-body h3 { font-size:21px; margin-bottom:6px; }
.cs-body .cs-niche { font-size:13px; color:#6a56e8; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:14px; display:block; }
.cs-body p { color:var(--muted); font-size:14.5px; margin-bottom:14px; }
.cs-label { font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; margin:16px 0 6px; display:block; }
.cs-label.c1 { color:#e0509a; } .cs-label.c2 { color:#6a56e8; } .cs-label.c3 { color:#129457; }
.cs-metrics { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.cs-metric {
  flex:1; min-width:100px; text-align:center;
  background:#e9f9f0; border:1px solid #c5ecd8;
  border-radius:12px; padding:12px 8px;
}
.cs-metric b { display:block; font-size:19px; color:#129457; letter-spacing:-.02em; }
.cs-metric span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.price-card { display:flex; flex-direction:column; position:relative; }
.price-card.pop {
  border:1.5px solid #1f1f24;
  background:#fff;
  box-shadow:var(--shadow);
  transform:scale(1.035);
}
.price-card.pop:hover { transform:scale(1.035) translateY(-5px); }
.pop-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#1f1f24;
  font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  padding:6px 18px; border-radius:999px; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,0.22); white-space:nowrap;
}
.price-card .p-name { font-size:15px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#6a56e8; margin-bottom:10px; }
.price-card .p-price { font-size:clamp(34px,4vw,46px); font-weight:800; line-height:1; margin-bottom:6px; letter-spacing:-.03em; }
.price-card .p-price small { font-size:15px; color:var(--muted); font-weight:600; }
.price-card .p-desc { color:var(--muted); font-size:14px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.price-card .p-list { flex:1; margin-bottom:26px; }
.price-card .p-list li { display:flex; gap:11px; padding:7px 0; font-size:14.5px; color:var(--muted); align-items:flex-start; }
.price-card .p-list li svg { width:18px; height:18px; color:var(--green); flex-shrink:0; margin-top:3px; }
.price-card .p-list li.na { opacity:.4; }
.price-card .p-list li.na svg { color:var(--muted); }
.price-card .p-price .p-mo { font-size:15px; color:var(--muted); font-weight:600; letter-spacing:0; }

/* ---------- Pricing Pro: currency toggle, icon cubes, compare table, add-ons ---------- */
.prc-toggle { display:inline-flex; gap:6px; margin-top:24px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); }
.prc-toggle button { border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:800; color:var(--muted); background:transparent; padding:9px 22px; border-radius:999px; transition:all .2s ease; }
.prc-toggle button.on { background:linear-gradient(135deg,#6a56e8,#4e9bfa); color:#fff; box-shadow:0 8px 20px rgba(106,86,232,.35); }
.prc-curnote { font-size:13px; color:var(--muted); margin-top:12px; }
.prc-hero-cube { z-index:1; }
.prc-ic { position:relative; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pa,#4e9bfa),var(--pb,#6a56e8)); box-shadow:0 14px 30px rgba(106,86,232,.28); margin-bottom:24px; }
.prc-ic .cube3d { --cs:28px; width:28px; height:28px; }
.prc-shadow { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); width:72%; height:12px; border-radius:50%; background:rgba(23,23,28,.16); filter:blur(4px); }
.prc-cmp-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.prc-cmp { width:100%; border-collapse:collapse; font-size:14.5px; min-width:680px; }
.prc-cmp th, .prc-cmp td { padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); }
.prc-cmp thead th { font-size:12.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#17171c; background:#faf9ff; white-space:nowrap; }
.prc-cmp thead th.col-pop { color:#6a56e8; }
.prc-cmp tbody tr:last-child td { border-bottom:0; }
.prc-cmp tbody td:first-child { font-weight:700; color:#17171c; }
.prc-cmp td:not(:first-child), .prc-cmp th:not(:first-child) { text-align:center; }
.prc-cmp td.col-pop { background:#faf9ff; }
.prc-cmp td small { display:block; font-size:13px; color:var(--muted); margin-top:4px; font-weight:400; }
.prc-cmp .yes { display:inline-flex; width:26px; height:26px; border-radius:50%; background:rgba(24,169,87,.12); color:var(--green); align-items:center; justify-content:center; }
.prc-cmp .yes svg { width:14px; height:14px; }
.prc-cmp .no { color:#b9b6c9; font-weight:700; }
.prc-add-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prc-add { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 8px 24px rgba(23,23,28,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.prc-add:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.prc-add b { display:block; font-size:15.5px; font-weight:800; margin:14px 0 6px; color:#17171c; }
.prc-add p { font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.pa-ic { display:inline-flex; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; }
.pa-ic svg { width:22px; height:22px; }
.pa-price { font-size:20px; font-weight:800; color:#6a56e8; letter-spacing:-.02em; }
@media (max-width:980px){ .prc-add-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .prc-add-grid { grid-template-columns:1fr; } .prc-toggle button { padding:8px 16px; } }
.compare-note { text-align:center; color:var(--muted); font-size:13px; margin-top:22px; font-style:italic; }

/* ---------- Guarantee ---------- */
.guarantee {
  display:flex; gap:22px; align-items:center;
  background:#f0fbf5;
  border:1px solid #c9efda;
  border-radius:22px; padding:34px 36px;
  max-width:820px; margin:0 auto;
}
.guarantee .g-icon {
  width:74px; height:74px; flex-shrink:0; border-radius:20px;
  background:#dcf5e7; border:1px solid #b7e7cd;
  display:flex; align-items:center; justify-content:center;
}
.guarantee .g-icon svg { width:36px; height:36px; color:#129457; }
.guarantee h3 { font-size:21px; margin-bottom:8px; }
.guarantee p { color:var(--muted); font-size:15px; }

/* ---------- Testimonials ---------- */
.t-card { display:flex; flex-direction:column; }
.t-stars { color:#ffb43a; font-size:15px; letter-spacing:3px; margin-bottom:14px; }
.t-card .t-text { color:var(--text); font-size:15px; line-height:1.75; margin-bottom:20px; flex:1; }
.t-who { display:flex; align-items:center; gap:13px; }
.t-who .t-ava {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(135deg,#fd71af,#7b68ee);
}
.t-who .t-ava.b { background:linear-gradient(135deg,#7b68ee,#4e9bfa); }
.t-who .t-ava.c { background:linear-gradient(135deg,#ff9f43,#fd71af); }
.t-who b { display:block; font-size:14.5px; }
.t-who span { font-size:12.5px; color:var(--muted); }

/* ---------- FAQ Accordion ---------- */
.faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color:#dcd4fb; }
.faq-item.open { border-color:#c8bcf9; box-shadow:var(--shadow-sm); }
.faq-q {
  width:100%; background:none; border:none; color:var(--text);
  font-family:var(--font); font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  padding:21px 24px; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q svg { width:20px; height:20px; flex-shrink:0; color:#6a56e8; transition:transform .25s ease; }
.faq-item.open .faq-q svg { transform:rotate(180deg); }
.faq-q .pl {
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  background:#f1eefe; border:1px solid #ddd7fb;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:600; color:#6a56e8;
  transition:transform .25s ease;
}
.faq-item.open .pl { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p { padding:0 24px 22px; color:var(--muted); font-size:15px; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:44px; align-items:start; }
.info-card { display:flex; gap:16px; align-items:flex-start; padding:22px; margin-bottom:16px; }
.info-card .ic {
  width:46px; height:46px; flex-shrink:0; border-radius:13px;
  background:#f1eefe; border:1px solid #ddd7fb;
  display:flex; align-items:center; justify-content:center;
}
.info-card .ic svg { width:22px; height:22px; color:#6a56e8; }
.info-card b { display:block; font-size:15.5px; margin-bottom:3px; }
.info-card span { color:var(--muted); font-size:14px; word-break:break-word; }
.next-steps { margin-top:28px; }
.next-steps .ns { display:flex; gap:14px; padding:12px 0; align-items:flex-start; }
.next-steps .ns i {
  width:30px; height:30px; flex-shrink:0; border-radius:50%; font-style:normal;
  background:#f1eefe; border:1px solid #ddd7fb;
  color:#6a56e8; font-weight:800; font-size:13.5px;
  display:flex; align-items:center; justify-content:center;
}
.next-steps .ns span { color:var(--muted); font-size:14.5px; }
.form-card { background:#fff; border:1px solid var(--line-2); border-radius:22px; padding:38px 34px; box-shadow:var(--shadow-sm); }
.form-card h3 { font-size:22px; margin-bottom:6px; }
.form-card .fc-sub { color:var(--muted); font-size:14px; margin-bottom:26px; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f-group { margin-bottom:17px; }
.f-group label { display:block; font-size:13px; font-weight:700; letter-spacing:.3px; margin-bottom:7px; color:var(--text); }
.f-group label i { color:var(--red); font-style:normal; }
.f-group input, .f-group select, .f-group textarea {
  width:100%; font-family:var(--font); font-size:15px;
  background:#fff; color:var(--text);
  border:1px solid var(--line-2); border-radius:12px;
  padding:13px 16px; outline:none; transition:all .2s ease;
}
.f-group input::placeholder, .f-group textarea::placeholder { color:#a5a5ad; }
.f-group input:focus, .f-group select:focus, .f-group textarea:focus {
  border-color:var(--purple); box-shadow:0 0 0 4px rgba(123,104,238,0.13);
}
.f-group select { cursor:pointer; }
.f-group select option { background:#fff; color:var(--text); }
.f-group textarea { resize:vertical; min-height:110px; }
.form-msg { display:none; padding:15px 18px; border-radius:13px; font-size:14.5px; margin-bottom:18px; }
.form-msg.ok { display:block; background:#e9f9f0; border:1px solid #c5ecd8; color:#129457; }
.form-msg.err { display:block; background:#fdeeee; border:1px solid #f7d3d4; color:var(--red); }
.btn-full { width:100%; }
.btn[disabled] { opacity:.6; cursor:not-allowed; transform:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .feat-row { grid-template-columns:1fr; gap:30px; margin-bottom:64px; }
  .feat-row.flip .feat-media { order:0; }
  .price-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .price-card.pop { transform:none; }
  .price-card.pop:hover { transform:translateY(-5px); }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .home-hero { padding:132px 0 60px; }
  .f-row { grid-template-columns:1fr; }
  .form-card { padding:28px 22px; }
  .guarantee { flex-direction:column; text-align:center; padding:30px 22px; }
  .t-step { padding-left:64px; }
  .float-chip { display:none; }
}

/* ============================================================
   V2 ADDITIONS — Service Pages, Graphs, Dark AI Sections
   ============================================================ */

/* ---------- Nav Dropdown (Services) ---------- */
.nav-drop { position:relative; }
.nav-drop .drop-toggle { display:inline-flex; align-items:center; gap:5px; }
.nav-drop .caret { width:13px; height:13px; transition:transform .2s ease; }
.nav-drop:hover .caret { transform:rotate(180deg); }
.drop-menu {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  width:320px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:all .22s ease; z-index:120;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.drop-menu::before { content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.drop-menu a {
  display:flex; gap:13px; align-items:flex-start;
  padding:11px 12px; border-radius:11px; transition:background .16s ease;
}
.drop-menu a:hover { background:var(--bg-softer); }
.drop-menu a.active { background:#f1eefe; }
.dm-ic {
  width:38px; height:38px; flex-shrink:0; border-radius:11px;
  display:flex; align-items:center; justify-content:center; border:1px solid transparent;
}
.dm-ic svg { width:19px; height:19px; }
.dm-txt b { display:block; font-size:13.5px; color:var(--text); letter-spacing:-.01em; }
.dm-txt small { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4; }
.mm-sub { font-size:14px !important; padding:9px 10px 9px 26px !important; color:#8a8a92 !important; position:relative; }
.mm-sub::before { content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--grad); }

/* ---------- Service Hero (tinted per service) ---------- */
.svc-hero { padding:150px 0 76px; position:relative; overflow:hidden; }
.svc-hero::before { content:''; position:absolute; inset:0; z-index:-1; }
.svc-purple::before { background:radial-gradient(760px 400px at 88% 0%, rgba(123,104,238,0.13), transparent 62%), radial-gradient(560px 320px at 4% 90%, rgba(253,113,175,0.08), transparent 60%); }
.svc-blue::before { background:radial-gradient(760px 400px at 88% 0%, rgba(78,155,250,0.13), transparent 62%), radial-gradient(560px 320px at 4% 90%, rgba(123,104,238,0.07), transparent 60%); }
.svc-orange::before { background:radial-gradient(760px 400px at 88% 0%, rgba(255,159,67,0.14), transparent 62%), radial-gradient(560px 320px at 4% 90%, rgba(253,113,175,0.08), transparent 60%); }
.svc-pink::before { background:radial-gradient(760px 400px at 88% 0%, rgba(253,113,175,0.13), transparent 62%), radial-gradient(560px 320px at 4% 90%, rgba(78,155,250,0.07), transparent 60%); }
.svc-hero-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:52px; align-items:center; }
.svc-hero h1 { font-size:clamp(34px,4.6vw,54px); margin-bottom:18px; }
.svc-hero .sub { color:var(--muted); font-size:17px; max-width:560px; margin-bottom:30px; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:22px; }
.crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--purple); }
.crumbs i { font-style:normal; color:#c4c4cc; }
.crumbs span { color:var(--text); }
.svc-hero-stats { display:flex; gap:34px; margin-top:34px; flex-wrap:wrap; }
.svc-hero-stats > div { display:flex; flex-direction:column; }
.svc-hero-stats b { font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.svc-hero-stats span { font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.3px; }
.svc-hero-media { position:relative; }
.svc-hero-media .img-frame { aspect-ratio:5/4; }
.svc-hero-media .float-chip { top:18px; right:-10px; }

/* ---------- Real Image Frames ---------- */
.img-frame {
  width:100%; border-radius:20px; border:1px solid var(--line-2);
  box-shadow:var(--shadow); object-fit:cover; display:block;
}
.img-stack { position:relative; }
.img-badge {
  position:absolute; bottom:-18px; left:22px;
  background:#fff; border:1px solid var(--line-2); border-radius:15px;
  padding:14px 20px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px; max-width:300px;
}
.img-badge b { font-size:21px; font-weight:800; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; }
.img-badge span { font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.4; }
.float-chip.fc-img { animation:floaty 5.4s ease-in-out infinite; }

/* ---------- Chart Containers ---------- */
.chart-box { height:320px; position:relative; }
.chart-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 26px 20px; transition:transform .22s ease, box-shadow .22s ease; }
.chart-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.cc-head { margin-bottom:18px; }
.cc-head .chip { margin-bottom:10px; }
.cc-head h3 { font-size:17px; letter-spacing:-.01em; }
.chart-dark { background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); border-radius:18px; padding:22px; height:300px; }

/* ---------- Dark AI Section ---------- */
.ai-dark {
  position:relative; overflow:hidden;
  background:#101014;
  border-radius:0; padding:92px 0;
}
.ai-dark::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 14% -6%, rgba(123,104,238,0.20), transparent 60%),
    radial-gradient(700px 420px at 92% 30%, rgba(253,113,175,0.14), transparent 62%),
    radial-gradient(680px 420px at 50% 110%, rgba(78,155,250,0.14), transparent 62%);
}
.ai-dark .container { position:relative; z-index:1; }
.ai-dark h2 { color:#fff; }
.eye-dark { background:linear-gradient(#16161a,#16161a) padding-box, var(--grad) border-box; color:#fff; }
.ai-dark .sec-head p { color:rgba(255,255,255,0.62); }
.ai-grid { margin-top:8px; }
.ai-card {
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; padding:26px 22px;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.ai-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); }
.ai-ic { width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ai-ic svg { width:24px; height:24px; }
.ai-card h4 { color:#fff; font-size:16.5px; margin-bottom:8px; letter-spacing:-.01em; }
.ai-card p { color:rgba(255,255,255,0.55); font-size:13.5px; }
.ai-strip {
  margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.08);
  border-radius:24px; padding:38px 36px;
}
.ai-strip-copy h3 { font-size:clamp(22px,3vw,30px); margin-bottom:14px; }
.ai-strip-copy p { font-size:15px; margin-bottom:22px; }
.ai-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.ai-feat { display:flex; gap:16px; align-items:flex-start; padding:15px 0; }
.ai-feat + .ai-feat { border-top:1px solid rgba(255,255,255,0.07); }
.ai-feat-ic { width:44px; height:44px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ai-feat-ic svg { width:21px; height:21px; }
.ai-feat b { display:block; color:#fff; font-size:15.5px; margin-bottom:4px; letter-spacing:-.01em; }
.ai-feat p { color:rgba(255,255,255,0.55); font-size:13.5px; }
.btn-light { background:#fff; color:#17171c; }
.btn-light:hover { background:#f0f0f2; transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,0.3); }

/* ---------- Services Overview Big Cards ---------- */
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.svc-big {
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:22px; overflow:hidden; color:var(--text);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-big:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.svc-img { position:relative; height:210px; overflow:hidden; }
.svc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.svc-big:hover .svc-img img { transform:scale(1.05); }
.svc-count {
  position:absolute; top:16px; left:16px;
  font-size:12px; font-weight:800; letter-spacing:1.6px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.6);
  padding:6px 13px; border-radius:999px; color:var(--text);
}
.svc-big-body { padding:26px 26px 24px; }
.svc-big-body .icon { width:50px; height:50px; border-radius:13px; border:1px solid; margin-bottom:16px; display:flex; align-items:center; justify-content:center; }
.svc-big-body .icon svg { width:24px; height:24px; }
.svc-big-body h3 { font-size:21px; margin-bottom:9px; }
.svc-big-body > p { color:var(--muted); font-size:14.5px; margin-bottom:16px; }
.svc-mini li { display:flex; gap:9px; align-items:center; padding:5px 0; color:var(--muted); font-size:13.5px; font-weight:600; }
.svc-mini li svg { width:15px; height:15px; color:var(--green); flex-shrink:0; }
.svc-more { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; margin-top:16px; }
.svc-more svg { width:16px; height:16px; transition:transform .2s ease; }
.svc-big:hover .svc-more svg { transform:translateX(4px); }

/* ---------- Flow Row (how services connect) ---------- */
.flow-row { display:flex; align-items:stretch; justify-content:center; gap:12px; flex-wrap:wrap; }
.flow-step {
  flex:1; min-width:170px; max-width:230px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 18px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.flow-n {
  width:42px; height:42px; margin:0 auto 14px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; border:1px solid;
}
.flow-step b { display:block; font-size:16.5px; margin-bottom:6px; letter-spacing:-.01em; }
.flow-step p { color:var(--muted); font-size:13px; }
.flow-arrow { align-self:center; color:#c9c9d1; font-size:22px; font-weight:700; }

/* ---------- Price Hint + Service Nav ---------- */
.price-hint {
  margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:15px; padding:16px 20px;
}
.price-hint span { display:block; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.4px; }
.price-hint b { color:var(--purple); font-weight:800; font-size:15px; }
.svc-nav { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.svc-nav-card {
  flex:1; min-width:260px; display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-nav-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.svc-nav-card span { font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.svc-nav-card b { display:flex; align-items:center; gap:9px; font-size:18px; color:var(--text); letter-spacing:-.01em; }

/* ---------- Page Anatomy (service-pages) ---------- */
.anatomy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.an-card {
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09);
  border-radius:16px; padding:22px 20px; position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
.an-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.2); }
.an-num { position:absolute; top:16px; right:18px; font-size:13px; font-weight:800; letter-spacing:1px; color:rgba(255,255,255,0.22); }
.an-card h4 { color:#fff; font-size:15.5px; margin-bottom:8px; }
.an-card p { color:rgba(255,255,255,0.55); font-size:13px; }
.an-cta { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; background:linear-gradient(135deg,rgba(123,104,238,0.22),rgba(253,113,175,0.16)); border-color:rgba(123,104,238,0.4); }
.an-cta h4 { font-size:17px; }

/* ---------- Case Studies V2 ---------- */
.cs-big { padding:0; overflow:hidden; }
.cs-top { border-bottom:1px solid var(--line); }
.cs-photo { position:relative; min-height:340px; }
.cs-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-who {
  position:absolute; left:18px; bottom:18px;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7); border-radius:14px;
  padding:12px 18px; box-shadow:var(--shadow-sm);
}
.cs-who b { display:block; font-size:15px; letter-spacing:-.01em; }
.cs-who span { font-size:12px; color:var(--muted); font-weight:600; }
.cs-badge {
  position:absolute; top:18px; left:18px;
  font-size:11.5px; font-weight:800; letter-spacing:.8px;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(10px);
  border:1px solid; padding:7px 14px; border-radius:999px;
}
.cs-chart-wrap { padding:26px 28px 24px; background:#fff; }
.cs-chart-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cs-chart-head b { font-size:15px; letter-spacing:-.01em; }

/* ---------- Team Avatars (real photos) ---------- */
.role-card .avatar { width:88px; height:88px; border-radius:50%; overflow:hidden; border:2.5px solid #fff; box-shadow:0 0 0 2px var(--line-2), 0 8px 20px rgba(20,20,40,0.10); padding:0; background:var(--bg-softer); }
.role-card .avatar img { width:100%; height:100%; object-fit:cover; }

/* ---------- Testimonial Avatars ---------- */
.t-who .t-ava { width:46px; height:46px; border-radius:50%; overflow:hidden; padding:0; }
.t-who .t-ava img { width:100%; height:100%; object-fit:cover; }

/* ---------- Services V2 Responsive ---------- */
@media (max-width:980px) {
  .svc-hero-grid { grid-template-columns:1fr; gap:44px; }
  .svc-grid { grid-template-columns:1fr; }
  .anatomy-grid { grid-template-columns:repeat(2,1fr); }
  .ai-strip { grid-template-columns:1fr; gap:30px; padding:30px 26px; }
  .flow-arrow { display:none; }
  .flow-row { gap:14px; }
  .flow-step { max-width:100%; }
}
@media (max-width:860px) {
  .cs-top.grid-2 { grid-template-columns:1fr; }
  .cs-photo { min-height:280px; order:0 !important; }
  .cs-body { order:1 !important; }
}
@media (max-width:600px) {
  .svc-hero { padding:126px 0 56px; }
  .chart-box { height:260px; }
  .chart-dark { height:250px; padding:16px; }
  .anatomy-grid { grid-template-columns:1fr; }
  .img-badge { left:12px; padding:11px 15px; }
  .img-badge b { font-size:17px; }
  .svc-hero-stats { gap:22px; }
  .cs-chart-wrap { padding:20px 16px; }
  .ai-dark { padding:64px 0; }
}

/* ============================================================
   MULTI-SLIDE PREMIUM HERO — dark gradient + grid pattern
   ============================================================ */
.mhero-wrap { padding:86px 14px 0; }
.mhero {
  position:relative; overflow:hidden;
  max-width:1400px; margin:0 auto;
  border-radius:28px;
  background:linear-gradient(140deg,#15102b 0%,#1d1440 40%,#2a1650 72%,#1b1238 100%);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 30px 80px rgba(23,15,50,0.35);
  color:#fff;
}
.mh-grid {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:220px 220px,220px 220px,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(950px 640px at 50% -4%, #000 35%, transparent 88%);
          mask-image:radial-gradient(950px 640px at 50% -4%, #000 35%, transparent 88%);
}
.mh-glow { position:absolute; border-radius:50%; filter:blur(95px); pointer-events:none; opacity:.55; z-index:0; }
.mh-g1 { width:520px; height:520px; background:rgba(123,104,238,.5); top:-180px; left:-120px; animation:orbFloat 11s ease-in-out infinite; }
.mh-g2 { width:430px; height:430px; background:rgba(253,113,175,.34); bottom:-170px; right:-110px; animation:orbFloat 13s ease-in-out infinite -4s; }
.mh-g3 { width:360px; height:360px; background:rgba(78,155,250,.30); top:28%; right:24%; animation:orbFloat 15s ease-in-out infinite -8s; }

.mh-body { position:relative; z-index:2; padding:54px 54px 32px; }
.mh-slides { display:grid; }
.mh-slide {
  grid-area:1/1;
  display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center;
  opacity:0; transform:translateY(26px) scale(.99);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility .55s;
  pointer-events:none; visibility:hidden;
}
.mh-slide.is-active { opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.mh-copy .mh-badge, .mh-copy .mh-h1, .mh-copy .mh-lead, .mh-copy .mh-type {
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
.mh-slide.is-active .mh-badge { opacity:1; transform:none; transition-delay:.14s; }
.mh-slide.is-active .mh-h1    { opacity:1; transform:none; transition-delay:.24s; }
.mh-slide.is-active .mh-lead  { opacity:1; transform:none; transition-delay:.34s; }
.mh-slide.is-active .mh-type  { opacity:1; transform:none; transition-delay:.44s; }

.mh-badge {
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:#e9e5ff;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.17);
  padding:9px 18px; border-radius:999px; margin-bottom:22px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.mh-pulse {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(90deg,#fd71af,#ffb86b);
  animation:hotPulse 1.8s ease-in-out infinite;
}
.mh-h1 { color:#fff; font-size:clamp(31px,4.4vw,52px); line-height:1.13; margin:0 0 18px; letter-spacing:-.03em; }
.mh-grad {
  background:linear-gradient(92deg,#a78bfa 0%,#fd71af 48%,#ffb86b 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.mh-lead { color:rgba(235,232,250,0.78); font-size:16.5px; line-height:1.7; max-width:540px; margin:0 0 18px; }
.mh-type { color:rgba(235,232,250,0.62); font-size:14.5px; margin:0; }
.mh-type b { color:#fff; }
.mh-type .type-caret { background:#ffb86b; }

/* Dark-theme buttons */
.btn-white { background:#fff; color:#17171c; }
.btn-white:hover { background:#f2f0ff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.btn-white svg { width:17px; height:17px; }
.btn-glass {
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-glass:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); transform:translateY(-2px); }
.mh-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

/* Visual panel (glass) */
.mh-visual { position:relative; min-width:0; }
.mh-panel {
  position:relative;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:22px; padding:20px 22px 22px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(10,6,30,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.mh-panel-head {
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:1.6px;
  color:rgba(255,255,255,.62); margin-bottom:16px;
}
.mh-live { width:8px; height:8px; border-radius:50%; background:#2ee27a; flex-shrink:0; animation:hotPulse 1.6s ease-in-out infinite; }
.mh-panel-tag {
  margin-left:2px; font-size:10px; letter-spacing:.8px; font-weight:700;
  padding:4px 11px; border-radius:999px;
  background:linear-gradient(90deg,rgba(167,139,250,.22),rgba(253,113,175,.22));
  border:1px solid rgba(167,139,250,.42); color:#ddd5ff;
  white-space:nowrap;
}

/* Dark funnel */
.fv-dark .f-stage { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17); box-shadow:none; }
.fv-dark .f-stage b { color:#fff; }
.fv-dark .f-stage span { color:rgba(235,232,250,.62); }
.fv-dark .f1 { background:rgba(78,155,250,.17);  border-color:rgba(78,155,250,.48); }
.fv-dark .f2 { background:rgba(123,104,238,.17); border-color:rgba(123,104,238,.48); }
.fv-dark .f3 { background:rgba(253,113,175,.15); border-color:rgba(253,113,175,.44); }
.fv-dark .f4 { background:rgba(255,159,67,.15);  border-color:rgba(255,159,67,.44); }
.fv-dark .f5 { background:rgba(24,169,87,.18);   border-color:rgba(24,169,87,.48); }
.fv-dark .f-arrow { color:rgba(255,255,255,.35); }
.fv-flow { position:relative; }
.fv-dot {
  position:absolute; left:50%; top:6%;
  width:7px; height:7px; border-radius:50%; z-index:3;
  background:linear-gradient(180deg,#a78bfa,#fd71af);
  box-shadow:0 0 12px rgba(167,139,250,.95);
  transform:translateX(-50%) scale(.6); opacity:0;
  animation:fvFlow 2.9s linear infinite;
  pointer-events:none;
}
@keyframes fvFlow {
  0%   { top:4%;  opacity:0; transform:translateX(-50%) scale(.5); }
  12%  { opacity:1; }
  86%  { opacity:1; }
  100% { top:95%; opacity:0; transform:translateX(-50%) scale(1.05); }
}

/* Chips on dark */
.fc-dark { background:rgba(19,13,40,.8); border-color:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.fc-dark small { color:rgba(235,232,250,.6); }
.mh-visual .fc-1 { top:-15px; right:-6px; }
.mh-visual .fc-2 { bottom:auto; top:57%; left:-16px; }
.fc-3 { top:-15px; right:-6px; }

/* Slide 2 — AI engine */
.ai-stage { position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
.ai-core {
  width:148px; height:148px; border-radius:38px;
  background:linear-gradient(140deg,#7b68ee,#fd71af);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 70px rgba(123,104,238,.65), inset 0 2px 10px rgba(255,255,255,.35);
  animation:coreFloat 5s ease-in-out infinite;
  position:relative; z-index:2;
}
.ai-core svg { width:62px; height:62px; color:#fff; }
.ai-core::before, .ai-core::after {
  content:''; position:absolute; inset:0; border-radius:38px;
  border:2px solid rgba(167,139,250,.5);
  animation:ringPulse 2.6s ease-out infinite;
  pointer-events:none;
}
.ai-core::after { animation-delay:1.3s; }
@keyframes ringPulse { 0% { transform:scale(1); opacity:.85; } 100% { transform:scale(2); opacity:0; } }
@keyframes coreFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
.ai-card {
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:10px;
  background:rgba(18,12,38,.85);
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px; padding:10px 14px;
  box-shadow:0 14px 34px rgba(8,4,24,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:floaty 5.5s ease-in-out infinite;
  max-width:190px;
}
.ai-card svg { width:15px; height:15px; flex-shrink:0; }
.ai-ic {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ac,#a78bfa);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
}
.ai-ic svg { width:15px; height:15px; }
.ai-card b { display:block; font-size:12.5px; color:#fff; letter-spacing:-.01em; }
.ai-card small { display:block; color:rgba(235,232,250,.55); font-size:10.5px; font-weight:500; margin-top:1px; }
.ac-1 { top:3%; left:0; }
.ac-2 { top:15%; right:0; animation-delay:-1.4s; }
.ac-3 { bottom:22%; left:1%; animation-delay:-2.8s; }
.ac-4 { bottom:5%; right:2%; animation-delay:-2.1s; }
.ai-console {
  margin-top:14px;
  background:rgba(9,5,24,.85);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:11px 16px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; color:#9ef0c0; text-align:left;
}
.ai-prog { height:3px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:9px; }
.ai-prog i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#a78bfa,#fd71af); transition:width .15s linear; }
.ai-lines { min-height:54px; display:flex; flex-direction:column; justify-content:flex-end; }
.ai-line { line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.5; }
.ai-line:last-child, .ai-line.typing { opacity:1; }
.ai-line.done-ok .ai-t, .ai-line.done-ok .ai-ok { color:#2ee27a; }
.ai-p { color:rgba(157,240,192,.55); }
.ai-ok { color:#2ee27a; font-weight:700; margin-left:7px; }
.ai-line.typing .ai-t::after {
  content:''; display:inline-block; width:7px; height:12px; margin-left:4px;
  background:#9ef0c0; vertical-align:-1px;
  animation:caretBlink .9s steps(1) infinite;
}

/* AI orbits + energy links + step sync */
.ai-orbit {
  position:absolute; width:230px; height:230px; border-radius:50%;
  border:1.5px dashed rgba(167,139,250,.42);
  animation:orbitSpin 16s linear infinite; z-index:1; pointer-events:none;
}
.ai-orbit span {
  position:absolute; width:10px; height:10px; border-radius:50%;
  top:-5px; left:calc(50% - 5px);
  background:#a78bfa; box-shadow:0 0 14px #a78bfa;
}
.ai-orbit.o-b { width:292px; height:292px; border-color:rgba(255,184,107,.34); animation:orbitSpin 24s linear infinite reverse; }
.ai-orbit.o-b span { width:8px; height:8px; top:auto; bottom:-4px; left:calc(50% - 4px); background:#ffb86b; box-shadow:0 0 14px #ffb86b; }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
.ai-links { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.ai-links path {
  fill:none; stroke:rgba(167,139,250,.5); stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:5 6;
  animation:dashFlow 2.6s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset:-110; } }
.ai-stage[data-step="0"] .ai-core { box-shadow:0 0 95px rgba(167,139,250,.9), inset 0 2px 10px rgba(255,255,255,.4); }
.ai-stage[data-step="1"] .ac-1,
.ai-stage[data-step="2"] .ac-2,
.ai-stage[data-step="3"] .ac-3,
.ai-stage[data-step="4"] .ac-4 {
  border-color:var(--ac,#a78bfa);
  box-shadow:0 0 30px -6px var(--ac,#a78bfa), 0 14px 34px rgba(8,4,24,.5);
  background:rgba(24,16,48,.92);
}
.ai-stage[data-step="1"] .ac-1 .ai-ic,
.ai-stage[data-step="2"] .ac-2 .ai-ic,
.ai-stage[data-step="3"] .ac-3 .ai-ic,
.ai-stage[data-step="4"] .ac-4 .ai-ic {
  background:color-mix(in srgb, var(--ac) 22%, transparent);
  border-color:var(--ac);
}

/* Slide 3 — dashboard KPI cards */
.dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.dash-kpi { position:relative; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:12px; padding:10px 12px 11px; }
.dash-kpi::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--c,#a78bfa),transparent 72%); }
.dash-kpi > span { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:rgba(235,232,250,.55); font-weight:700; }
.dash-kpi b { display:block; font-size:17px; color:#fff; margin-top:3px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dash-kpi .up { color:#2ee27a !important; font-size:10.5px; font-weight:700; letter-spacing:0; text-transform:none; }

/* Controls */
.mh-ctrl {
  display:flex; align-items:center; gap:16px;
  margin-top:32px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.11);
}
.mh-arrow {
  width:40px; height:40px; border-radius:12px; cursor:pointer; flex-shrink:0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:all .18s ease; padding:0;
}
.mh-arrow:hover { background:#fff; color:#17171c; transform:translateY(-2px); }
.mh-arrow svg { width:17px; height:17px; }
.mh-dots { display:flex; gap:8px; align-items:center; }
.mh-dot {
  width:9px; height:9px; border-radius:999px; border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.28); transition:all .28s ease;
}
.mh-dot:hover { background:rgba(255,255,255,.5); }
.mh-dot.is-active { width:30px; background:linear-gradient(90deg,#a78bfa,#fd71af); }
.mh-progress { flex:1; height:3px; background:rgba(255,255,255,.13); border-radius:99px; overflow:hidden; min-width:60px; }
.mh-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#a78bfa,#fd71af,#ffb86b); border-radius:99px; }
.mh-progress i.run { animation:mhProg 5s linear forwards; }
@keyframes mhProg { from { width:0; } to { width:100%; } }

/* Trust foot */
.mh-foot { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:26px; }
.mh-avatars { display:flex; }
.mh-avatars span {
  width:38px; height:38px; border-radius:50%;
  border:2px solid #2b1f55;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff;
  margin-left:-9px;
}
.mh-avatars span:first-child { margin-left:0; }
.mh-avatars span:nth-child(1) { background:linear-gradient(140deg,#7b68ee,#4e9bfa); }
.mh-avatars span:nth-child(2) { background:linear-gradient(140deg,#fd71af,#ff9f43); }
.mh-avatars span:nth-child(3) { background:linear-gradient(140deg,#4e9bfa,#18a957); }
.mh-avatars span:nth-child(4) { background:linear-gradient(140deg,#fd71af,#7b68ee); }
.mh-avatars span:nth-child(5) { background:rgba(255,255,255,.14); font-size:11px; }
.mh-rate { font-size:13.5px; color:rgba(235,232,250,.75); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.mh-stars { color:#ffb86b; letter-spacing:2.5px; font-size:14.5px; }
.mh-rate b { color:#fff; }
.mh-guar {
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#b9f4d1;
  background:rgba(46,226,122,.1);
  border:1px solid rgba(46,226,122,.32);
  padding:9px 16px; border-radius:999px;
}
.mh-guar svg { width:15px; height:15px; flex-shrink:0; }

/* Responsive */
@media (max-width:1080px) {
  .mh-slide { grid-template-columns:1fr; gap:30px; }
  .mh-visual { max-width:520px; width:100%; margin:0 auto; }
  .ai-stage { height:370px; }
}
@media (max-width:860px) {
  .mhero-wrap { padding:80px 10px 0; }
  .mh-body { padding:32px 22px 24px; }
  .mh-h1 { font-size:clamp(27px,7.2vw,38px); }
  .mh-lead { font-size:15px; }
  .ai-stage { height:330px; }
  .ai-card { max-width:158px; padding:8px 11px; }
  .ai-card small { display:none; }
  .mh-guar { display:none; }
  .mh-ctrl { gap:12px; }
  .dash-kpi b { font-size:14.5px; }
}
@media (max-width:600px) {
  .mhero { border-radius:20px; }
  .mh-visual .float-chip { display:none; }
  .mh-cta .btn { width:100%; }
  .mh-progress { display:none; }
  .ai-stage { height:300px; }
  .ai-orbit { width:196px; height:196px; }
  .ai-orbit.o-b { width:248px; height:248px; }
  .ai-console { font-size:11px; }
  .ai-core { width:118px; height:118px; border-radius:30px; }
  .ai-core svg { width:48px; height:48px; }
  .mh-avatars span { width:33px; height:33px; font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-dot, .ai-core::before, .ai-core::after, .mh-glow, .fgrid-svg, .fgrid-stat, .ai-orbit, .ai-links path, .perf-svg, .perf-stat, .perf-tip, .perf-dotg, .perf-scan, .perf-bar i { animation:none !important; }
  .perf-line { stroke-dashoffset:0; }
  .perf-area, .perf-dotg, .perf-scan, .perf-wp { opacity:1 !important; }
  .mh-slide { transition:opacity .3s ease; transform:none; }
}

/* ============================================================
   LIVE ANIMATED ROLE ICONS — solution section (home)
   Gradient circle + rotating dashed ring + pulsing halo
   + per-role micro-animations. Photos (about.php) unaffected.
   ============================================================ */
.role-card .avatar.a1, .role-card .avatar.a2, .role-card .avatar.a3,
.role-card .avatar.a4, .role-card .avatar.a5 {
  position:relative; width:88px; height:88px;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px rgba(20,20,40,.16);
  overflow:visible;
  transition:transform .25s ease;
}
.role-card .avatar.a1 { background:linear-gradient(140deg,#5ea3ff,#2f6fe0); color:#4e9bfa; }
.role-card .avatar.a2 { background:linear-gradient(140deg,#a08fff,#6a56e8); color:#7b68ee; }
.role-card .avatar.a3 { background:linear-gradient(140deg,#ff8fc4,#e0509a); color:#fd71af; }
.role-card .avatar.a4 { background:linear-gradient(140deg,#ffb86b,#e08625); color:#ff9f43; }
.role-card .avatar.a5 { background:linear-gradient(140deg,#3ecf85,#129457); color:#18a957; }

.role-card .avatar.a1::before, .role-card .avatar.a2::before,
.role-card .avatar.a3::before, .role-card .avatar.a4::before,
.role-card .avatar.a5::before {
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px dashed currentColor; opacity:.4;
  animation:avSpin 14s linear infinite;
}
.role-card .avatar.a1::after, .role-card .avatar.a2::after,
.role-card .avatar.a3::after, .role-card .avatar.a4::after,
.role-card .avatar.a5::after {
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid currentColor; opacity:0;
  animation:avHalo 3.2s ease-out infinite;
}
.role-card .avatar.a2::after { animation-delay:.6s; }
.role-card .avatar.a3::after { animation-delay:1.2s; }
.role-card .avatar.a4::after { animation-delay:1.8s; }
.role-card .avatar.a5::after { animation-delay:2.4s; }
@keyframes avSpin { to { transform:rotate(360deg); } }
@keyframes avHalo { 0% { transform:scale(1); opacity:.45; } 70% { opacity:0; } 100% { transform:scale(1.38); opacity:0; } }

.role-card .avatar .av-ic {
  width:38px; height:38px; color:#fff;
  position:relative; z-index:1;
  animation:floaty 4.2s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));
}
.role-card .avatar.a2 .av-ic { animation-delay:-.8s; }
.role-card .avatar.a3 .av-ic { animation-delay:-1.6s; }
.role-card .avatar.a4 .av-ic { animation-delay:-2.4s; }
.role-card .avatar.a5 .av-ic { animation-delay:-3.2s; }

.role-card:hover .avatar.a1, .role-card:hover .avatar.a2, .role-card:hover .avatar.a3,
.role-card:hover .avatar.a4, .role-card:hover .avatar.a5 { transform:scale(1.08); }
.role-card:hover .avatar.a1::before, .role-card:hover .avatar.a2::before,
.role-card:hover .avatar.a3::before, .role-card:hover .avatar.a4::before,
.role-card:hover .avatar.a5::before { opacity:.85; }

/* Strategist — target pulse */
.role-card .avatar .tg-mid { transform-box:fill-box; transform-origin:center; animation:tgPulse 2.2s ease-in-out infinite; }
.role-card .avatar .tg-core { transform-box:fill-box; transform-origin:center; animation:tgCore 2.2s ease-in-out infinite; }
@keyframes tgPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.22); opacity:.7; } }
@keyframes tgCore { 0%,100% { transform:scale(1); } 50% { transform:scale(1.55); } }

/* Designer — pencil sketch line loops */
.role-card .avatar .pn-line { stroke-dasharray:8; stroke-dashoffset:8; animation:pnDraw 2.6s ease-in-out infinite; }
@keyframes pnDraw { 0% { stroke-dashoffset:8; opacity:0; } 30% { opacity:1; } 65% { stroke-dashoffset:0; opacity:1; } 85% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }

/* Developer — brackets nudge, slash blinks */
.role-card .avatar .cd-l { animation:cdL 1.9s ease-in-out infinite; }
.role-card .avatar .cd-r { animation:cdR 1.9s ease-in-out infinite; }
.role-card .avatar .cd-m { animation:cdBlink 1.9s steps(1) infinite; }
@keyframes cdL { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-2.2px); } }
@keyframes cdR { 0%,100% { transform:translateX(0); } 50% { transform:translateX(2.2px); } }
@keyframes cdBlink { 50% { opacity:.2; } }

/* Copywriter — pen writes a line */
.role-card .avatar .cw-line { stroke-dasharray:20; stroke-dashoffset:20; animation:cwDraw 2.8s ease-in-out infinite; }
.role-card .avatar .cw-pen { transform-box:fill-box; transform-origin:center; animation:penBob 2.8s ease-in-out infinite; }
@keyframes cwDraw { 0% { stroke-dashoffset:20; opacity:1; } 55% { stroke-dashoffset:0; opacity:1; } 82% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes penBob { 0%,100% { transform:translate(0,0) rotate(0deg); } 35% { transform:translate(-1.4px,-1.2px) rotate(-5deg); } 65% { transform:translate(-2.6px,.6px) rotate(-9deg); } }

/* Automation — gear spins */
.role-card .avatar .gt { transform-box:fill-box; transform-origin:center; animation:gtSpin 7s linear infinite; }
@keyframes gtSpin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .role-card .avatar.a1::before, .role-card .avatar.a2::before, .role-card .avatar.a3::before,
  .role-card .avatar.a4::before, .role-card .avatar.a5::before,
  .role-card .avatar.a1::after, .role-card .avatar.a2::after, .role-card .avatar.a3::after,
  .role-card .avatar.a4::after, .role-card .avatar.a5::after,
  .role-card .avatar .av-ic, .role-card .avatar .tg-mid, .role-card .avatar .tg-core,
  .role-card .avatar .pn-line, .role-card .avatar .cd-l, .role-card .avatar .cd-r,
  .role-card .avatar .cd-m, .role-card .avatar .cw-line, .role-card .avatar .cw-pen,
  .role-card .avatar .gt { animation:none !important; }
  .role-card .avatar .pn-line, .role-card .avatar .cw-line { stroke-dashoffset:0; opacity:1; }
}

/* ============================================================
   3D CONE FUNNEL — hero slide 1
   ============================================================ */
.fgrid { display:grid; grid-template-columns:1.02fr .98fr; gap:8px; align-items:center; }
.fgrid-stage-wrap { position:relative; min-width:0; }
.fgrid-svg { width:100%; height:auto; display:block; animation:fgridFloat 6s ease-in-out infinite; transform-origin:50% 20%; }
@keyframes fgridFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
/* soft violet-pink halo that lifts the cone off the glass panel */
.fgrid-stage-wrap::before {
  content:''; position:absolute; inset:-6% -4% 6%;
  background:radial-gradient(58% 50% at 50% 36%, rgba(123,104,238,.22), rgba(253,113,175,.09) 56%, transparent 80%);
  pointer-events:none;
}
.fgrid-svg { position:relative; z-index:1; }

/* stats column */
.fgrid-stats { display:flex; flex-direction:column; gap:8px; min-width:0; }
.fgrid-stat {
  display:flex; gap:11px; align-items:flex-start; padding:9px 12px 10px;
  border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  animation:statGlow 5.6s linear infinite; animation-delay:var(--d);
}
.fgrid-stat i {
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:4px;
  background:var(--c); box-shadow:0 0 12px var(--c);
}
.fgrid-tx { flex:1; min-width:0; }
.fgrid-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.fgrid-top b { font-size:13px; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.fgrid-top u { text-decoration:none; font-size:13.5px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.fgrid-bar { display:block; height:4px; border-radius:99px; background:rgba(255,255,255,.12); margin:6px 0 4px; overflow:hidden; }
.fgrid-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--c),rgba(255,255,255,.8)); box-shadow:0 0 8px var(--c); }
.fgrid-sub { font-size:10.5px; color:rgba(235,232,250,.55); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
@keyframes statGlow {
  0%,24% { background:rgba(255,255,255,.14); border-color:var(--c); box-shadow:0 0 26px -8px var(--c); }
  25%,100% { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13); box-shadow:none; }
}

/* foot strip */
.fgrid-foot {
  margin-top:14px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.16);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12px; color:rgba(235,232,250,.66);
}
.fgrid-foot b { color:#fff; font-weight:800; }
.fgrid-foot .dot-g { flex-shrink:0; }
.fgrid-sep { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.3); flex-shrink:0; }

/* responsive */
@media (max-width:640px) {
  .fgrid { grid-template-columns:1fr; gap:6px; }
  .fgrid-stage-wrap { max-width:225px; margin:0 auto; width:100%; }
  .fgrid-stat { padding:8px 11px 9px; }
  .fgrid-foot { justify-content:center; }
}

/* ============================================================
   LIVE PERFORMANCE CHART — hero slide 3
   ============================================================ */
.perf { display:grid; grid-template-columns:1.05fr .95fr; gap:10px; align-items:center; }
.perf-chart { position:relative; min-width:0; }
.perf-svg { width:100%; height:auto; display:block; animation:fgridFloat 6s ease-in-out infinite; }

/* line draw-in (replays when slide activates) */
.perf-line { stroke-dasharray:600; stroke-dashoffset:600; }
.mh-slide.is-active .perf-line { animation:perfDraw 2.3s cubic-bezier(.45,0,.25,1) .25s forwards; }
@keyframes perfDraw { to { stroke-dashoffset:0; } }

/* area + dot + scan fade in */
.perf-area { opacity:0; }
.mh-slide.is-active .perf-area { animation:perfFade 1s ease 1.4s forwards; }
.perf-dotg, .perf-scan { opacity:0; }
.mh-slide.is-active .perf-dotg { animation:perfFade .6s ease 2.3s forwards; }
.mh-slide.is-active .perf-scan { animation:perfFade .8s ease 2.6s forwards; }
@keyframes perfFade { to { opacity:1; } }

/* waypoints pop */
.perf-wp { opacity:0; transform:scale(.2); transform-box:fill-box; transform-origin:center; }
.mh-slide.is-active .perf-wp { animation:wpPop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes wpPop {
  0% { opacity:0; transform:scale(.2); }
  100% { opacity:1; transform:scale(1); }
}

/* peak tooltip chip */
.perf-tip {
  position:absolute; top:-9px; right:2px;
  display:flex; align-items:center; gap:6px;
  background:rgba(18,12,38,.92);
  border:1px solid rgba(167,139,250,.5);
  border-radius:10px; padding:6px 10px;
  font-size:10px; font-weight:600; color:rgba(235,232,250,.72);
  box-shadow:0 10px 26px rgba(8,4,24,.55), 0 0 20px -6px rgba(167,139,250,.65);
  animation:tipFloat 4s ease-in-out infinite;
  white-space:nowrap; z-index:2;
}
.perf-tip b { color:#fff; font-weight:800; }
.perf-tip .pt-up { color:#2ee27a; font-size:9px; }
@keyframes tipFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

/* stats column (same glow pattern as slide 1) */
.perf-stats { display:flex; flex-direction:column; gap:8px; min-width:0; }
.perf-stat {
  display:flex; gap:11px; align-items:flex-start; padding:8px 11px 9px;
  border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  animation:statGlow 5.6s linear infinite; animation-delay:var(--d);
}
.perf-stat i {
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:4px;
  background:var(--c); box-shadow:0 0 12px var(--c);
}
.perf-tx { flex:1; min-width:0; }
.perf-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.perf-top b { font-size:12.5px; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.perf-top u { text-decoration:none; font-size:13px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.perf-bar { display:block; height:4px; border-radius:99px; background:rgba(255,255,255,.12); margin:5px 0 3px; overflow:hidden; }
.perf-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--c),rgba(255,255,255,.8)); box-shadow:0 0 8px var(--c); transform-origin:left; }
.mh-slide.is-active .perf-bar i { animation:perfBarGrow 1.1s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes perfBarGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.perf-sub { font-size:10.5px; color:rgba(235,232,250,.55); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* foot strip */
.perf-foot {
  margin-top:14px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.16);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12px; color:rgba(235,232,250,.66);
}
.perf-foot b { color:#fff; font-weight:800; }
.perf-foot .dot-g { flex-shrink:0; }
.perf-sep { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.3); flex-shrink:0; }

/* responsive */
@media (max-width:640px) {
  .perf { grid-template-columns:1fr; gap:8px; }
  .perf-chart { max-width:250px; margin:0 auto; width:100%; }
  .perf-tip { top:-7px; right:0; padding:5px 9px; font-size:9.5px; }
  .perf-stat { padding:8px 11px 9px; }
  .perf-foot { justify-content:center; }
}

/* ============================================================
   WHAT YOU GET — premium image cards (home #included)
   ============================================================ */
#included { position:relative; overflow:hidden; }
#included::before {
  content:''; position:absolute; top:-180px; right:-160px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(123,104,238,.10), transparent 65%); pointer-events:none;
}
#included::after {
  content:''; position:absolute; bottom:-200px; left:-140px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle, rgba(253,113,175,.08), transparent 65%); pointer-events:none;
}
#included .container { position:relative; z-index:1; }

.ig-card {
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ig-card::before {
  content:''; position:absolute; inset:0; z-index:4; border-radius:20px; padding:1.5px;
  background:linear-gradient(135deg, var(--c,#7b68ee), transparent 42%, transparent 58%, var(--c2,#fd71af));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.ig-card:hover::before { opacity:1; }
.ig-card:hover { transform:translateY(-6px); border-color:#d8d2fa; box-shadow:0 34px 64px -26px rgba(80,60,180,.38); }
.ig-media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.ig-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.ig-card:hover .ig-media img { transform:scale(1.07); }
.ig-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,16,43,.04) 30%, rgba(21,16,43,.58) 100%); pointer-events:none; }
.ig-num {
  position:absolute; top:13px; left:13px;
  font-size:10.5px; font-weight:800; letter-spacing:1.8px; color:#fff;
  background:rgba(21,16,43,.5); border:1px solid rgba(255,255,255,.28);
  padding:6px 12px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ig-ic {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin:-26px 0 0 22px; position:relative; z-index:2;
  background:#fff; border:1px solid var(--line); color:var(--c,#7b68ee);
  box-shadow:0 12px 26px -12px rgba(40,30,90,.4);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ig-card:hover .ig-ic { transform:scale(1.08) rotate(-5deg); }
.ig-ic svg { width:24px; height:24px; }
.ig-body { display:flex; flex-direction:column; flex:1; padding:14px 22px 22px; }
.ig-body h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.02em; }
.ig-body p { margin:0 0 14px; color:var(--muted); font-size:14.5px; line-height:1.66; }

/* result chip overlay on media */
.ig-stat {
  position:absolute; top:13px; right:13px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:800; letter-spacing:.2px; color:#fff;
  background:rgba(21,16,43,.52); border:1px solid rgba(255,255,255,.28);
  padding:6px 12px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ig-stat i { width:7px; height:7px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px rgba(46,226,122,.8); }

/* deliverables mini-list */
.ig-list { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:7px; }
.ig-list li { position:relative; padding-left:23px; font-size:13.5px; font-weight:600; color:#4d4763; line-height:1.45; }
.ig-list li::before {
  content:''; position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg, var(--c,#7b68ee), var(--c2,var(--c,#7b68ee)));
  box-shadow:0 3px 8px -2px var(--c,#7b68ee); opacity:.92;
}
.ig-list li::after {
  content:''; position:absolute; left:3.6px; top:6.4px; width:6.4px; height:3.6px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff; transform:rotate(-45deg);
}

/* price + explore footer */
.ig-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px dashed var(--line); padding-top:14px; }
.ig-from { font-size:12.5px; color:var(--muted); font-weight:600; }
.ig-from b { font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--text); margin-left:3px; }
.ig-go { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--c,#7b68ee); }
.ig-go em { font-style:normal; transition:transform .2s ease; }
.ig-go:hover em { transform:translateX(4px); }

/* header delivery chips */
.ig-deli { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px; }
.ig-deli span {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:#4d4763;
  background:#fff; border:1px solid var(--line);
  padding:7px 15px; border-radius:999px;
  box-shadow:0 2px 8px rgba(20,20,40,.04);
}
.ig-deli i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* wide AI engine card */
.ig-wide {
  position:relative; margin-top:26px; display:grid; grid-template-columns:.92fr 1.08fr;
  background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ig-wide::before {
  content:''; position:absolute; inset:0; z-index:4; border-radius:22px; padding:1.5px;
  background:linear-gradient(135deg, var(--c,#ff9f43), transparent 42%, transparent 58%, var(--c2,#a78bfa));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.ig-wide:hover::before { opacity:1; }
.ig-wide:hover { transform:translateY(-5px); border-color:#d8d2fa; box-shadow:0 34px 64px -26px rgba(80,60,180,.36); }
.ig-wide-media { position:relative; min-height:260px; }
.ig-wide-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.ig-wide:hover .ig-wide-media img { transform:scale(1.06); }
.ig-float {
  position:absolute; left:18px; bottom:18px; z-index:2;
  display:flex; align-items:center; gap:10px;
  background:rgba(21,16,43,.62); border:1px solid rgba(255,255,255,.24);
  border-radius:14px; padding:10px 15px; color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ig-float b { font-size:17px; letter-spacing:-.02em; }
.ig-float span { font-size:11.5px; color:rgba(255,255,255,.72); line-height:1.35; max-width:150px; }
.ig-wide-body { padding:28px 30px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.ig-wide-body .ig-ic { margin:0; width:56px; height:56px; border-radius:16px; box-shadow:0 16px 30px -12px rgba(40,30,90,.45); }
.ig-wide-body h3 { margin:16px 0 8px; font-size:21px; letter-spacing:-.02em; }
.ig-wide-body > p { margin:0 0 16px; color:var(--muted); font-size:14.8px; line-height:1.68; }
.ig-points { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.ig-points span {
  font-size:12px; font-weight:700; color:#4d4763;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px;
}
.ig-wide-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; border-top:1px dashed var(--line); padding-top:18px; flex-wrap:wrap; }
.ig-wide-foot .ig-from b { font-size:18px; }

@media (max-width:980px) {
  .ig-wide { grid-template-columns:1fr; }
  .ig-wide-media { min-height:210px; }
}
@media (max-width:640px) {
  .ig-body { padding:12px 18px 20px; }
  .ig-wide-body { padding:22px 20px 24px; }
}

/* ============================================================
   THE WORK WALL — long-page showcase (home #showcase)
   3 auto-scrolling columns of real page screenshots
   ============================================================ */
.showcase {
  position:relative; overflow:hidden;
  background:#101014; padding:96px 0 84px;
}
.showcase::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 10% -4%, rgba(123,104,238,0.16), transparent 60%),
    radial-gradient(700px 430px at 94% 24%, rgba(253,113,175,0.12), transparent 62%),
    radial-gradient(760px 430px at 50% 108%, rgba(78,155,250,0.13), transparent 62%);
}
.showcase .container { position:relative; z-index:2; }

.show-chips {
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:-24px 0 46px;
}
.show-chips span {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:8px 15px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.show-chips i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ---- scrolling wall ---- */
.wall {
  position:relative; max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; gap:22px;
}
.wall-col {
  flex:1; min-width:0; height:640px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.wall-track {
  display:flex; flex-direction:column;
  animation:wallScroll var(--sp,74s) linear infinite;
  will-change:transform;
}
.wall-col.rev .wall-track { animation-direction:reverse; }
.wall:hover .wall-track { animation-play-state:paused; }
@keyframes wallScroll { from { transform:translateY(0); } to { transform:translateY(-50%); } }

/* ---- mockup card ---- */
.pg { margin:0 0 22px; flex-shrink:0; }
.pg-shot {
  border-radius:14px; overflow:hidden; background:#1b1b21;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 52px -24px rgba(0,0,0,.65);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.pg:hover .pg-shot {
  transform:translateY(-6px) scale(1.012);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 34px 64px -22px rgba(0,0,0,.7), 0 26px 90px -30px var(--pa,#7b68ee);
}

.pg-bar {
  height:32px; display:flex; align-items:center; gap:5px; padding:0 12px;
  background:#222228; border-bottom:1px solid rgba(255,255,255,.06);
}
.pg-bar i { width:9px; height:9px; border-radius:50%; }
.pg-bar i:nth-child(1){ background:#ff5f57; }
.pg-bar i:nth-child(2){ background:#febc2e; }
.pg-bar i:nth-child(3){ background:#28c840; }
.pg-url {
  margin-left:8px; font-size:10px; font-weight:600; color:#a7a7b4;
  background:#2b2b33; border:1px solid rgba(255,255,255,.07);
  padding:3px 10px; border-radius:999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72%;
}

.pg-pic { position:relative; background:#fff; overflow:hidden; }
.pg-pic img {
  display:block; width:100%; height:auto;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.pg:hover .pg-pic img { transform:scale(1.025); }
.pg-pic::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 9%);
}

/* caption under each mockup */
.pg-cap { display:flex; align-items:center; gap:10px; padding:11px 3px 0; }
.pg-cap .cap-txt { min-width:0; display:flex; flex-direction:column; }
.pg-cap b { font-size:13.5px; font-weight:800; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-cap i { font-style:normal; font-size:11px; color:rgba(255,255,255,.5); }
.pg-win {
  margin-left:auto; flex-shrink:0;
  font-size:10.5px; font-weight:800; color:#2ee27a;
  background:rgba(46,226,122,.10); border:1px solid rgba(46,226,122,.32);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}

.wall-note {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:26px auto 0; font-size:12.5px; color:rgba(255,255,255,.45);
}
.wall-note i {
  width:8px; height:8px; border-radius:50%; background:#2ee27a;
  box-shadow:0 0 0 3px rgba(46,226,122,.15);
  animation:wallPulse 2s ease-in-out infinite;
}
@keyframes wallPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(46,226,122,.15); }
  50% { box-shadow:0 0 0 6px rgba(46,226,122,.06); }
}

@media (max-width:900px) {
  .wall { gap:14px; }
  .wall-col:nth-child(3) { display:none; }
  .wall-col { height:540px; }
  .pg { margin-bottom:14px; }
  .showcase { padding:70px 0 60px; }
}
@media (max-width:520px) {
  .wall-col { height:470px; }
  .show-chips { gap:7px; margin-bottom:36px; }
  .show-chips span { font-size:11px; padding:7px 11px; }
  .pg-cap b { font-size:12px; white-space:normal; }
  .pg-win { font-size:9.5px; padding:3px 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .wall-track { animation:none !important; }
  .wall-note i { animation:none; }
}

/* ============================================================
   FREE COACHING RESOURCES — bonus packs (home #free-resources)
   ============================================================ */
.fr-sec { position:relative; overflow:hidden; background:#101014; padding:96px 0 88px; }
.fr-sec::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 400px at 8% -6%, rgba(123,104,238,0.18), transparent 60%),
    radial-gradient(680px 420px at 96% 30%, rgba(253,113,175,0.12), transparent 62%),
    radial-gradient(700px 430px at 46% 110%, rgba(78,155,250,0.13), transparent 62%);
}
.fr-worth { position:relative; z-index:2; display:flex; justify-content:center; margin:-16px 0 46px; }
.fr-worth span {
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  font-size:13.5px; font-weight:700; color:rgba(255,255,255,.88);
  background:linear-gradient(135deg, rgba(255,159,67,.16), rgba(255,159,67,.05));
  border:1px solid rgba(255,159,67,.42); padding:11px 22px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fr-worth svg { width:17px; height:17px; color:#ffd88a; flex-shrink:0; }
.fr-worth b { color:#ffd88a; font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.fr-worth em { font-style:normal; color:rgba(255,255,255,.6); font-weight:600; }

.fr-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1140px; margin:0 auto; padding:0 24px; }
.fr-card {
  border-radius:22px; padding:30px 30px 26px;
  background:linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fr-visual { position:relative; width:250px; height:190px; margin:4px auto 6px; }
.fr-tag {
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.8px; color:#ffd88a;
  background:rgba(255,159,67,.13); border:1px solid rgba(255,159,67,.38);
  padding:5px 14px; border-radius:999px; margin:2px 0 12px;
}
.fr-card h3 { color:#fff; font-size:clamp(20px,2.2vw,25px); font-weight:800; letter-spacing:-.015em; margin-bottom:9px; }
.fr-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.fr-tags i {
  font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:1.4px; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  padding:4px 12px; border-radius:999px;
}
.fr-list { list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.fr-list li { display:flex; gap:8px; align-items:flex-start; font-size:12.8px; font-weight:600; color:rgba(255,255,255,.82); line-height:1.4; }
.fr-list li svg { width:14px; height:14px; flex-shrink:0; margin-top:2px; color:#2ee27a; }
.fr-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px dashed rgba(255,255,255,.15); padding-top:16px; }
.fr-val { font-size:12.5px; color:rgba(255,255,255,.55); }
.fr-val b { color:#ffd88a; font-size:15px; font-weight:800; margin-left:2px; }
.fr-foot a {
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:#a78bfa;
  text-decoration:none; transition:gap .25s ease, color .2s ease;
}
.fr-foot a svg { width:15px; height:15px; }
.fr-foot a:hover { gap:11px; color:#c4b5fd; }
.fr-note { position:relative; z-index:2; text-align:center; color:rgba(255,255,255,.5); font-size:13px; max-width:640px; margin:30px auto 0; }

@media (max-width:980px) {
  .fr-grid { grid-template-columns:1fr; max-width:560px; }
}
@media (max-width:520px) {
  .fr-sec { padding:72px 0 66px; }
  .fr-card { padding:24px 20px 22px; }
  .fr-list { grid-template-columns:1fr; }
  .fr-visual { width:200px; height:170px; }
  .fr-visual .orbit-spin .orb-chip { --r:60px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-visual .orbit-spin, .fr-visual .orb-chip .oc-ic { animation:none !important; }
}

/* ---- svc hero 3D decor + niche pills (Batch 4) ---- */
.svc-hero .f3d, .page-hero .f3d { z-index:0; }
.svc-hero .container, .page-hero .container { position:relative; z-index:1; }
.svc-niche { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.svc-niche span {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--muted);
  background:#fff; border:1px solid var(--line-2); padding:7px 14px; border-radius:999px;
  transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.svc-niche span i { width:6px; height:6px; border-radius:50%; background:var(--nc,#7b68ee); flex-shrink:0; }
.svc-niche span:hover { transform:translateY(-2px); border-color:var(--nc,#c8bcf9); color:var(--text); box-shadow:0 8px 18px -8px rgba(30,20,80,.25); }
@media (max-width:640px) { .svc-niche span { font-size:10.5px; padding:6px 11px; } }

/* ---- TOFU/MOFU/BOFU funnel explained (how-it-works) ---- */
.fnl-wrap { max-width:560px; margin:6px auto 44px; position:relative; }
.fnl-svg { width:100%; height:auto; display:block; filter:drop-shadow(0 34px 54px rgba(40,30,120,.22)); }
.fnl-card { border-top:3px solid var(--fc,#7b68ee); }
.fnl-card .fnl-tag {
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:1.6px; color:#fff;
  background:var(--fc,#7b68ee); padding:5px 13px; border-radius:999px; margin-bottom:12px;
}
.fnl-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.fnl-tools span {
  font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px;
  color:var(--fc,#7b68ee); border:1px solid color-mix(in srgb, var(--fc,#7b68ee) 30%, transparent);
  background:color-mix(in srgb, var(--fc,#7b68ee) 7%, #fff);
}
@media (prefers-reduced-motion: reduce) {
  .fnl-svg circle animate, .fnl-svg animateMotion { display:none; }
}

/* ================= ARTICLES (blog listing + detail) ================= */
.art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.art-card {
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.art-card:hover { transform:translateY(-6px); box-shadow:0 24px 48px -18px rgba(30,20,80,.22); border-color:#ddd7fb; }
.art-thumb { position:relative; aspect-ratio:16/9.6; overflow:hidden; background:#f1eefe; }
.art-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.art-card:hover .art-thumb img { transform:scale(1.05); }
.art-cat {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,#7b68ee,#fd71af); padding:6px 12px; border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(123,104,238,.5);
}
.art-body { display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; flex:1; }
.art-meta { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:#8b8b95; }
.art-meta i { width:4px; height:4px; border-radius:50%; background:#c9c9d2; flex-shrink:0; }
.art-body h3 { font-size:18.5px; line-height:1.32; letter-spacing:-.02em; color:var(--text); margin:0; }
.art-body p { font-size:14px; line-height:1.62; color:var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.art-more { margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--purple); }
.art-more svg { width:16px; height:16px; transition:transform .2s ease; }
.art-card:hover .art-more svg { transform:translateX(4px); }
@media (max-width:1000px) { .art-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) {
  .art-grid { grid-template-columns:1fr; gap:16px; }
  .art-body { padding:16px 16px 15px; }
}

/* ---- article detail page ---- */
.art-wrap { max-width:800px; margin:0 auto; }
.art-crumbs { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:18px; }
.art-crumbs a { color:var(--purple); text-decoration:none; }
.art-crumbs a:hover { text-decoration:underline; }
.art-crumbs svg { width:13px; height:13px; opacity:.55; }
.art-cover {
  width:100%; aspect-ratio:16/8.5; object-fit:cover; border-radius:20px; display:block;
  box-shadow:0 30px 60px -22px rgba(30,20,80,.28);
}
.art-content { margin-top:36px; font-size:16.5px; line-height:1.78; color:#3a3a42; }
.art-content p { margin:0 0 18px; }
.art-content h2 { font-size:clamp(22px,2.6vw,28px); margin:40px 0 14px; letter-spacing:-.025em; }
.art-content h3 { font-size:19px; margin:30px 0 10px; }
.art-content b, .art-content strong { color:var(--text); }
.art-content a { color:var(--purple); font-weight:600; }
.art-content ul { margin:0 0 20px; padding:0; list-style:none; display:grid; gap:9px; }
.art-content ul li { position:relative; padding-left:28px; }
.art-content ul li::before {
  content:''; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#7b68ee,#fd71af);
}
.art-content ol { margin:0 0 20px; padding-left:24px; display:grid; gap:9px; }
.art-quote {
  margin:26px 0; padding:20px 24px; border-radius:14px;
  background:linear-gradient(135deg,rgba(123,104,238,.08),rgba(253,113,175,.07));
  border-left:4px solid #7b68ee; font-weight:600; color:var(--text); font-size:16px; line-height:1.65;
}
.art-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.art-stat {
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 14px; text-align:center;
  box-shadow:0 10px 24px -14px rgba(30,20,80,.18);
}
.art-stat b { display:block; font-size:22px; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.art-stat span { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:4px; line-height:1.45; }
@media (max-width:640px) { .art-stats { grid-template-columns:1fr; } }
.art-src { font-size:12.5px; color:#8b8b95; margin-top:-8px; margin-bottom:22px; }
.art-back { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--purple); text-decoration:none; margin-top:34px; }
.art-back svg { width:16px; height:16px; }
.art-back:hover { text-decoration:underline; }

/* ================= COACHING FOCUS UPGRADE (niches + ladder + hero chips) ================= */
.mh-niches { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.mh-niches span { font-size:12px; font-weight:700; color:#d6d7ff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:6px 13px; border-radius:999px; backdrop-filter:blur(6px); }
.mh-niches span::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:#fd71af; margin-right:7px; vertical-align:2px; }
.nch-card { display:flex; flex-direction:column; padding:26px 24px 22px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nch-card:hover { transform:translateY(-6px); border-color:var(--c,#7b68ee); box-shadow:0 18px 34px -16px color-mix(in srgb, var(--c,#7b68ee) 38%, transparent); }
.nch-ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--bg,#f1eefe); color:var(--c,#7b68ee); margin-bottom:16px; }
.nch-ic svg { width:23px; height:23px; }
.nch-card h3 { font-size:17px; margin-bottom:8px; }
.nch-card p { font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:16px; }
.nch-ft { margin-top:auto; align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c,#7b68ee); background:color-mix(in srgb, var(--c,#7b68ee) 10%, #ffffff); padding:5px 11px; border-radius:999px; }
.nch-note { text-align:center; color:var(--muted); margin-top:32px; font-size:15px; }
.nch-note a { color:var(--purple); font-weight:700; text-decoration:none; }
.nch-note a:hover { text-decoration:underline; }
.lad-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:end; }
.lad-step { position:relative; background:#fff; border:1.5px solid #ecebfa; border-radius:16px; padding:18px 16px 16px; min-height:calc(186px + var(--i,0) * 30px); display:flex; flex-direction:column; box-shadow:0 10px 24px -18px rgba(23,23,28,.28); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lad-step:hover { transform:translateY(-6px); border-color:var(--c,#7b68ee); box-shadow:0 18px 34px -16px color-mix(in srgb, var(--c,#7b68ee) 40%, transparent); }
.lad-num { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg, var(--c,#7b68ee), color-mix(in srgb, var(--c,#7b68ee) 55%, #7b68ee)); margin-bottom:12px; flex:none; }
.lad-step b { font-size:15px; line-height:1.3; margin-bottom:7px; }
.lad-step small { font-size:12.5px; color:var(--muted); line-height:1.5; }
.lad-price { margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:800; color:var(--c,#7b68ee); }
.lad-step:last-child { background:linear-gradient(135deg, #7b68ee, #fd71af); border-color:transparent; }
.lad-step:last-child b { color:#fff; }
.lad-step:last-child small { color:rgba(255,255,255,.85); }
.lad-step:last-child .lad-price { color:#fff; }
.lad-step:last-child .lad-num { background:rgba(255,255,255,.22); }
.lad-step:last-child:hover { border-color:transparent; box-shadow:0 18px 34px -16px rgba(123,104,238,.45); }
.lad-note { text-align:center; color:var(--muted); margin-top:30px; font-size:14.5px; }
.cta-trust { display:flex; gap:10px 24px; justify-content:center; flex-wrap:wrap; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--muted); }
.cta-trust span { display:inline-flex; align-items:center; gap:7px; }
.cta-trust svg { width:15px; height:15px; color:var(--green); flex:none; }
@media (max-width:1080px) { .lad-grid { grid-template-columns:repeat(3,1fr); } .lad-step { min-height:210px; } }
@media (max-width:640px) { .lad-grid { grid-template-columns:1fr; } .lad-step { min-height:0; } .mh-niches span { font-size:11px; padding:5px 10px; } }

/* ================= ARTICLE SEO ENHANCEMENTS ================= */
.art-content a { color:var(--purple); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(123,104,238,.35); }
.art-content a:hover { color:#5b48d6; border-bottom-color:#5b48d6; }
.art-faq { background:#f8f7fd; border:1px solid #e9e6f8; border-radius:14px; padding:24px 26px; margin:28px 0; }
.art-faq > div + div { margin-top:18px; padding-top:18px; border-top:1px dashed #e3e0f5; }
.art-faq h3 { font-size:15.5px; margin-bottom:7px; }
.art-faq p { font-size:14px; color:var(--muted); margin-bottom:0; }
@media (max-width:640px) { .art-faq { padding:18px 16px; } }

/* ================= CONTACT PAGE PRO (ct-) ================= */
.info-card > div > span { display:block; }
.ct-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.ct-fcube { position:absolute; pointer-events:none; z-index:0; animation:f3dFloat 9s ease-in-out infinite; }
.ct-chips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; position:relative; z-index:2; }
.ct-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:700; color:var(--text); box-shadow:0 10px 24px -14px rgba(21,12,66,.22); }
.ct-chip svg { width:15px; height:15px; flex:none; }
.ct-chip.c1 svg { color:#e08625; }
.ct-chip.c2 svg { color:#129457; }
.ct-chip.c3 svg { color:#2f7ae5; }
.ct-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ct-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px 26px; display:flex; flex-direction:column; gap:11px; transition:border-color .25s ease, box-shadow .25s ease; overflow:hidden; }
.ct-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#7b68ee,#4e9bfa); opacity:0; transition:opacity .25s ease; }
.ct-card:hover { border-color:#dcd4fb; box-shadow:0 26px 54px -26px rgba(21,12,66,.3); }
.ct-card:hover::before { opacity:1; }
.ct-card[data-ct-form] { cursor:pointer; }
.ct-ic { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin-bottom:4px; }
.ct-ic svg { width:26px; height:26px; }
.ct-card.wa .ct-ic { background:#e9f9f0; color:#129457; box-shadow:inset 0 0 0 1px #c4ecd6; }
.ct-card.em .ct-ic { background:#eef4fe; color:#2f7ae5; box-shadow:inset 0 0 0 1px #d4e3fd; }
.ct-card.fm .ct-ic { background:#ffeef6; color:#e0509a; box-shadow:inset 0 0 0 1px #fbd3e6; }
.ct-badge { position:absolute; top:18px; right:18px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.ct-card.wa .ct-badge { background:#e9f9f0; color:#129457; }
.ct-card.em .ct-badge { background:#eef4fe; color:#2f7ae5; }
.ct-card.fm .ct-badge { background:#ffeef6; color:#e0509a; }
.ct-card h3 { font-size:19px; margin:0; }
.ct-card p { color:var(--muted); font-size:14.5px; margin:0; }
.ct-link { margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14.5px; color:#6a56e8; text-decoration:none; background:none; border:none; cursor:pointer; }
.ct-link svg { width:16px; height:16px; flex:none; transition:transform .2s ease; }
.ct-card:hover .ct-link svg { transform:translateX(4px); }
.ct-ns { margin-top:30px; position:relative; }
.ct-ns .ns-line { position:absolute; left:17px; top:38px; bottom:26px; width:2px; background:linear-gradient(180deg,#fd71af,#7b68ee,#4e9bfa); border-radius:2px; opacity:.3; }
.ct-ns .ns { display:flex; gap:14px; padding:11px 0; position:relative; align-items:flex-start; }
.ct-ns .ns i { width:35px; height:35px; border-radius:50%; background:linear-gradient(135deg,#7b68ee,#4e9bfa); color:#fff; font-style:normal; font-weight:800; font-size:14.5px; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px -9px rgba(123,104,238,.6); }
.ct-ns .ns b { display:block; font-size:14.5px; margin-bottom:2px; }
.ct-ns .ns span { color:var(--muted); font-size:13.5px; }
.form-card .f-group.err input, .form-card .f-group.err textarea, .form-card .f-group.err select { border-color:#e5484d !important; background:#fff6f6; }
.form-card textarea { min-height:130px; resize:vertical; }
.ct-count { text-align:right; font-size:12px; color:var(--muted); margin-top:6px; }
.ct-count.limit { color:#e5484d; font-weight:700; }
.ct-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; flex-wrap:wrap; }
.ct-draft { font-size:12.5px; font-weight:700; color:#129457; opacity:0; transition:opacity .3s ease; display:inline-flex; gap:6px; align-items:center; }
.ct-draft.show { opacity:1; }
.ct-draft svg { width:14px; height:14px; }
.ct-priv { display:inline-flex; gap:7px; align-items:center; font-size:12.5px; color:var(--muted); }
.ct-priv svg { width:14px; height:14px; flex:none; color:#6a56e8; }
.btn.loading { opacity:.65; pointer-events:none; }
.ct-success { display:none; text-align:center; padding:30px 8px 16px; }
.ct-success.show { display:block; }
.ct-check { width:88px; height:88px; margin:0 auto 18px; display:block; }
.ct-check circle { stroke:#18a957; stroke-width:2.5; fill:#e9f9f0; stroke-dasharray:270; stroke-dashoffset:270; animation:ctStroke .7s ease forwards; }
.ct-check path { stroke:#18a957; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; stroke-dashoffset:70; animation:ctStroke .5s ease .6s forwards; }
@keyframes ctStroke { to { stroke-dashoffset:0; } }
.ct-success h4 { font-size:22px; margin-bottom:8px; }
.ct-success p { color:var(--muted); font-size:14.5px; margin-bottom:20px; }
.ct-again { background:none; border:none; color:#6a56e8; font-weight:700; font-size:13.5px; cursor:pointer; margin-top:16px; text-decoration:underline; font-family:var(--font); }
@media (max-width:1080px) { .ct-grid { grid-template-columns:1fr 1fr; } .ct-card.fm { grid-column:1 / -1; } }
@media (max-width:720px) { .ct-grid { grid-template-columns:1fr; } .ct-card.fm { grid-column:auto; } }
@media (max-width:640px) {
  .ct-chips { gap:8px; }
  .ct-chip { padding:7px 12px; font-size:12px; }
  .ct-ic { width:50px; height:50px; }
  .ct-ic svg { width:22px; height:22px; }
  .ct-card { padding:24px 20px 22px; }
  .ct-ns .ns b { font-size:14px; }
  .page-hero .f3d, .ct-fcube { opacity:.4; }
}

/* ================= SERVICES PAGE PRO (svx-) ================= */
.svx-stats { display:flex; gap:20px 44px; justify-content:center; flex-wrap:wrap; margin-top:32px; position:relative; z-index:2; }
.svx-stats > div { display:flex; flex-direction:column; gap:2px; }
.svx-stats b { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.svx-stats b i { font-style:normal; font-size:15px; font-weight:700; color:var(--muted); }
.svx-stats span { font-size:12.5px; font-weight:600; letter-spacing:.3px; color:var(--muted); }
.svc-time { position:absolute; left:14px; bottom:14px; z-index:2; font-size:11.5px; font-weight:800; letter-spacing:.3px; padding:6px 11px; border-radius:999px; box-shadow:0 6px 16px -8px rgba(21,12,66,.4); }
.svx-wrap { max-width:960px; margin:0 auto; }
.svx-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.svx-tab { display:flex; align-items:center; justify-content:center; gap:9px; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:15px 14px; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; font-family:var(--font); transition:border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.svx-tab i { width:9px; height:9px; border-radius:50%; background:var(--tc,#7b68ee); flex:none; opacity:.55; transition:opacity .2s ease, box-shadow .2s ease; }
.svx-tab:hover { border-color:#dcd4fb; color:var(--text); transform:translateY(-2px); }
.svx-tab.on { border-color:#c8bcf9; color:var(--text); box-shadow:0 12px 26px -14px rgba(123,104,238,.45); background:linear-gradient(180deg,#fff, #faf9ff); }
.svx-tab.on i { opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, var(--tc,#7b68ee) 18%, transparent); }
.svx-out { display:flex; align-items:center; gap:24px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 32px; box-shadow:var(--shadow-sm); }
.svx-out.flash { animation:svxIn .35s ease; }
@keyframes svxIn { from { opacity:.35; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.svx-ic { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; flex-shrink:0; }
.svx-ic svg { width:30px; height:30px; }
.svx-ic.svx0 { background:#eef4fe; color:#2f7ae5; box-shadow:inset 0 0 0 1px #d4e3fd; }
.svx-ic.svx1 { background:#ffeef6; color:#e0509a; box-shadow:inset 0 0 0 1px #fbd3e6; }
.svx-ic.svx2 { background:#f1eefe; color:#7b68ee; box-shadow:inset 0 0 0 1px #ddd7fb; }
.svx-ic.svx3 { background:#fff4e8; color:#e08625; box-shadow:inset 0 0 0 1px #fbdfc0; }
.svx-copy { flex:1; min-width:0; }
.svx-kicker { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#7b68ee; background:#f1eefe; border-radius:999px; padding:4px 10px; margin-bottom:8px; }
.svx-copy h3 { font-size:21px; margin-bottom:6px; }
.svx-copy p { color:var(--muted); font-size:14.5px; margin-bottom:14px; }
.svx-meta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.svx-time { font-size:12.5px; font-weight:700; color:#129457; background:#e9f9f0; border-radius:999px; padding:6px 12px; }
.svx-go { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:#6a56e8; text-decoration:none; }
.svx-go svg { width:15px; height:15px; transition:transform .2s ease; }
.svx-go:hover svg { transform:translateX(4px); }
.svx-cta { flex-shrink:0; }
@media (max-width:960px) { .svx-tabs { grid-template-columns:1fr 1fr; } }
@media (max-width:860px) { .svx-out { flex-direction:column; text-align:center; align-items:center; } .svx-meta { justify-content:center; } }
@media (max-width:560px) { .svx-tabs { grid-template-columns:1fr; } .svx-tab { justify-content:flex-start; } .svx-out { padding:24px 20px; } .svx-stats { gap:16px 26px; } .svx-stats b { font-size:22px; } }

/* ---------- All-In-One System (apps grid, ClickUp-style) ---------- */
.apx-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.apx-item { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 8px 14px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.apx-item:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.apx-ic { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg,#f1eefe); color:var(--c,#7b68ee); flex-shrink:0; }
.apx-ic svg { width:21px; height:21px; }
.apx-item b { font-size:12.5px; font-weight:700; color:var(--text); line-height:1.25; }
.apx-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.apx-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 20px 22px; box-shadow:0 8px 24px rgba(23,23,28,.05); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column; }
.apx-card:hover { transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow); }
.apx-shot { background:linear-gradient(160deg,#f6f5ff,#eef4fe); border:1px solid var(--line); border-radius:12px; height:132px; padding:11px 12px; display:flex; flex-direction:column; gap:7px; overflow:hidden; position:relative; margin-bottom:16px; }
.apx-shot .dots { display:flex; gap:4px; margin-bottom:2px; }
.apx-shot .dots i { width:7px; height:7px; border-radius:50%; background:#d9d6ee; }
.apx-ln { height:7px; border-radius:4px; background:#fff; box-shadow:0 1px 3px rgba(23,23,28,.07); flex-shrink:0; }
.apx-blk { flex:1; border-radius:8px; background:#fff; box-shadow:0 1px 3px rgba(23,23,28,.07); position:relative; overflow:hidden; }
.apx-blk svg { position:absolute; inset:auto 0 0 0; width:100%; height:56%; }
.apx-bub { max-width:72%; border-radius:10px; padding:6px 9px; font-size:10px; font-weight:700; color:var(--muted); background:#fff; box-shadow:0 1px 3px rgba(23,23,28,.07); }
.apx-bub.me { align-self:flex-end; background:linear-gradient(135deg,#6a56e8,#4e9bfa); color:#fff; }
.apx-spark { position:absolute; right:10px; bottom:8px; width:26px; height:26px; color:#7b68ee; opacity:.85; }
.apx-card h3 { font-size:16.5px; font-weight:800; margin-bottom:6px; }
.apx-card p { font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.apx-card .apx-more { margin-top:auto; font-size:13.5px; font-weight:800; color:#6a56e8; text-decoration:none; }
.apx-card .apx-more svg { width:14px; height:14px; vertical-align:-2px; transition:transform .2s ease; }
.apx-card .apx-more:hover svg { transform:translateX(4px); }
@media (max-width:1080px) { .apx-grid { grid-template-columns:repeat(4,1fr); } .apx-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .apx-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .apx-cards { grid-template-columns:1fr; } .apx-item b { font-size:12px; } }

/* ============================================================
   INNER HERO SYSTEM v2 — dark premium cards (home-style ihero)
   ============================================================ */
.ihero-wrap { padding:86px 14px 0; }
.ihero {
  position:relative; overflow:hidden; max-width:1400px; margin:0 auto;
  border-radius:28px; color:#fff;
  background:linear-gradient(140deg,#15102b 0%,#1d1440 40%,#2a1650 72%,#1b1238 100%);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 30px 80px rgba(23,15,50,0.35);
}
.ihero--blue { background:linear-gradient(140deg,#0e1834 0%,#132449 42%,#193165 74%,#0f1730 100%); }
.ihero--warm { background:linear-gradient(140deg,#25102c 0%,#3a1642 45%,#4b2130 74%,#1d1030 100%); }
.ihero--plum { background:linear-gradient(140deg,#1e0f33 0%,#331448 45%,#471d54 74%,#180f2c 100%); }
.ihero--ember { background:linear-gradient(140deg,#241026 0%,#3d1830 45%,#4f2412 78%,#1c0f28 100%); }
.ihero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.ihero-bg img { width:100%; height:100%; object-fit:cover; opacity:.5; mix-blend-mode:screen; }
.ihero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,10,38,0) 0%,rgba(16,10,38,.4) 62%,rgba(16,10,38,.7) 100%); }
.ihero-body { position:relative; z-index:2; padding:64px 54px 56px; }
.ihero--center .ihero-body { text-align:center; }
.ihero--slim .ihero-body { padding:44px 46px 40px; }

/* dark-theme text + components inside ihero */
.ihero h1 { color:#fff; font-size:clamp(32px,4.6vw,54px); line-height:1.14; letter-spacing:-.03em; margin:0 0 18px; font-weight:800; }
.ihero h1 .grad-text, .ih-h .grad-text { -webkit-text-fill-color:transparent; }
.ihero .sub { color:rgba(235,232,250,.75); }
.ihero .eyebrow { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17); color:#e9e5ff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ihero .eyebrow::before { background:linear-gradient(90deg,#a78bfa,#fd71af); }
.ihero .crumbs a, .ihero .art-crumbs a { color:rgba(235,232,250,.62); }
.ihero .crumbs a:hover, .ihero .art-crumbs a:hover { color:#c9baff; text-decoration:none; }
.ihero .crumbs i, .ihero .art-crumbs svg { color:rgba(255,255,255,.4); }
.ihero .crumbs span { color:#fff; }
.ihero .ct-chip { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#f0edff; box-shadow:none; }
.ihero .svc-niche span { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#ece8ff; box-shadow:none; }
.ihero .svc-niche span:hover { color:#fff; border-color:var(--nc,#a78bfa); transform:translateY(-2px); }
.ihero .svx-stats b, .ihero .svc-hero-stats b { color:#fff; }
.ihero .svx-stats b i, .ihero .svx-stats span, .ihero .svc-hero-stats span { color:rgba(235,232,250,.55); }
.ihero .tab-btn { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:rgba(240,237,255,.8); }
.ihero .tab-btn:hover { border-color:rgba(255,255,255,.4); color:#fff; }
.ihero .tab-btn.active { background:#fff; color:#17171c; border-color:#fff; }
.ihero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ihero .btn-ghost:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.45); }
.ihero .prc-curnote { color:rgba(235,232,250,.55); }
.ihero .art-meta { color:rgba(235,232,250,.55); }
.ihero .art-meta i { background:rgba(255,255,255,.35); }
.ihero .offer-band { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }
.ihero .offer-band .ob { color:#ece8ff; }
.ihero .img-badge { background:rgba(19,13,40,.78); border-color:rgba(255,255,255,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ihero .img-badge span { color:rgba(235,232,250,.65); }

/* entrance animation */
@keyframes ihUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.ih-split > *, .ihero--center .ihero-body > * { animation:ihUp .7s cubic-bezier(.22,1,.36,1) both; }
.ih-split > *:nth-child(2) { animation-delay:.1s; }
.ih-split > *:nth-child(3) { animation-delay:.18s; }
.ihero--center .ihero-body > *:nth-child(2) { animation-delay:.08s; }
.ihero--center .ihero-body > *:nth-child(3) { animation-delay:.16s; }
.ihero--center .ihero-body > *:nth-child(4) { animation-delay:.24s; }
.ih-split { display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center; }

/* orbit + glass 3D add-ons */
.ih-orbit { position:absolute; width:170px; height:170px; top:-26px; right:-14px; z-index:2; pointer-events:none; }
.ih-orbit .orbit-ring { inset:0; width:auto; height:auto; transform:none; top:0; left:0; border-color:rgba(255,255,255,.22); }
.ih-orbit .orbit-ring.r2 { border-color:rgba(253,113,175,.26); }
.ih-orbit .orbit-spin { top:50%; left:50%; }
.ih-hub3d { position:relative; height:186px; margin-bottom:14px; pointer-events:none; }
.ih-hub3d .orbit-ring { top:50%; left:50%; transform:translate(-50%,-50%); width:148px; height:148px; border-color:rgba(255,255,255,.24); }
.ih-hub3d .orbit-ring.r2 { width:100px; height:100px; }
.ih-hub3d .orbit-spin { top:50%; left:50%; }
.ih-hub3d .ih-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; filter:drop-shadow(0 16px 34px rgba(10,6,30,.6)); }
.ih-engine { position:relative; z-index:2; }

/* mini glass panel overlapping detail-page image */
.svc-hero-media { position:relative; }
.svc-hero-media .ih-mini { position:absolute; left:-22px; bottom:-22px; width:min(310px,88%); z-index:3; text-align:left; }
.svc-hero-media .ih-orbit { top:-30px; right:-8px; }

/* hero panel rows kit */
.hp-rows { display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.hp-row { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 13px; }
.hp-ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:linear-gradient(135deg,var(--h1,#7b68ee),var(--h2,#4e9bfa)); color:#fff; box-shadow:0 6px 16px -6px rgba(123,104,238,.7); }
.hp-ic svg { width:15px; height:15px; }
.hp-t { flex:1; min-width:0; text-align:left; }
.hp-t b { display:block; font-size:12.5px; font-weight:700; color:#fff; line-height:1.3; }
.hp-t small { font-size:10.5px; color:rgba(235,232,250,.52); font-weight:600; }
.hp-time { font-size:9.5px; font-weight:800; letter-spacing:.6px; color:#7ef0b2; background:rgba(46,226,122,.12); border:1px solid rgba(46,226,122,.32); padding:3px 8px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.hp-time.alt { color:#ffd88a; background:rgba(255,159,67,.12); border-color:rgba(255,159,67,.32); }

/* animated bars */
.hp-bars { display:flex; align-items:flex-end; gap:7px; height:88px; padding:0 2px; }
.hp-bars i { flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--hb,#a78bfa),rgba(255,255,255,.07)); transform-origin:bottom; animation:hpGrow .9s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--d,0)*90ms); position:relative; min-width:10px; }
.hp-bars i::after { content:''; position:absolute; top:5px; left:14%; right:14%; height:3px; border-radius:3px; background:rgba(255,255,255,.35); }
@keyframes hpGrow { from { transform:scaleY(.08); opacity:.3; } to { transform:scaleY(1); opacity:1; } }

/* flow nodes (funnel map) */
.hp-flow { display:flex; align-items:flex-start; justify-content:space-between; }
.hp-node { display:flex; flex-direction:column; align-items:center; gap:7px; }
.hp-node i { width:27px; height:27px; border-radius:50%; border:2px solid var(--hn,#a78bfa); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; font-style:normal; }
.hp-node span { font-size:8.5px; letter-spacing:.5px; text-transform:uppercase; font-weight:800; color:rgba(235,232,250,.5); white-space:nowrap; }
.hp-node.on i { background:var(--hn,#a78bfa); box-shadow:0 0 0 5px rgba(167,139,250,.16); }
.hp-link { flex:1; height:2px; background:linear-gradient(90deg,var(--hn,#a78bfa),rgba(255,255,255,.14)); margin:13px 5px 0; border-radius:2px; min-width:12px; }

/* A/B test card */
.hp-ab { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hp-ab > div { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:13px 10px; text-align:center; }
.hp-ab b { font-size:20px; font-weight:800; color:#fff; display:block; letter-spacing:-.02em; }
.hp-ab span { font-size:9px; font-weight:800; letter-spacing:.8px; color:rgba(235,232,250,.5); text-transform:uppercase; }
.hp-ab .win { border-color:rgba(46,226,122,.42); background:rgba(46,226,122,.09); }

/* floating glass cards (chart / article mini / question orb) */
.ih-floatcard { position:absolute; z-index:2; background:rgba(19,13,40,.74); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:14px 16px 16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 24px 60px rgba(10,6,30,.45); text-align:left; }
.ih-floatcard b { font-size:15px; color:#fff; display:block; letter-spacing:-.01em; }
.ih-floatcard small { display:block; font-size:9.5px; letter-spacing:1.1px; color:rgba(235,232,250,.55); font-weight:800; margin-bottom:10px; text-transform:uppercase; }
.ih-miniart { position:absolute; z-index:2; display:flex; gap:11px; align-items:center; background:rgba(19,13,40,.74); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:10px 15px 10px 10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 24px 60px rgba(10,6,30,.45); max-width:250px; text-align:left; }
.ih-miniart img { width:46px; height:46px; border-radius:11px; object-fit:cover; flex-shrink:0; }
.ih-miniart b { font-size:12px; color:#fff; line-height:1.35; display:block; }
.ih-miniart small { font-size:9.5px; color:rgba(235,232,250,.52); font-weight:700; letter-spacing:.4px; }
.ih-orbq { position:absolute; right:7%; top:50%; transform:translateY(-50%); width:148px; height:148px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:62px; font-weight:800; color:#fff; box-shadow:0 24px 60px rgba(10,6,30,.45), inset 0 1px 0 rgba(255,255,255,.14); animation:orbFloat 9s ease-in-out infinite; z-index:1; }
.ih-orbq::after { content:''; position:absolute; inset:-16px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.18); animation:rot360 26s linear infinite; }

/* 5-step process strip (how-it-works) */
.ih-steps { display:flex; align-items:center; justify-content:center; margin-top:38px; }
.ih-steps i.sn { width:40px; height:40px; border-radius:50%; border:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:14px; font-weight:800; color:#fff; flex-shrink:0; font-family:inherit; }
.ih-steps i.sn.on { background:linear-gradient(135deg,#a78bfa,#fd71af); border-color:transparent; box-shadow:0 0 0 6px rgba(167,139,250,.15); }
.ih-steps i.sl { width:clamp(24px,4.6vw,60px); height:2px; background:linear-gradient(90deg,rgba(255,255,255,.38),rgba(255,255,255,.12)); flex-shrink:1; }

@media (max-width:1080px) {
  .ih-hide-lg { display:none !important; }
  .ih-split { grid-template-columns:1fr; gap:44px; }
  .ihero-body { padding:44px 30px 44px; }
  .svc-hero-media .ih-mini { left:10px; bottom:-18px; width:min(300px,90%); }
  .svc-hero-media .ih-orbit { width:130px; height:130px; top:-20px; right:0; }
}
@media (max-width:640px) {
  .ihero-wrap { padding:74px 10px 0; }
  .ihero-body { padding:36px 20px 40px; }
  .ihero--slim .ihero-body { padding:32px 20px 32px; }
  .ihero { border-radius:22px; }
  .ih-hub3d { height:150px; }
  .svc-hero-media .ih-mini { position:relative; left:0; bottom:0; width:100%; margin-top:-42px; }
  .ih-steps { margin-top:28px; }
}

/* ============================================================
   HERO X v3 — page-type 3D scenes + unique per-page bg images
   ============================================================ */
.ihero { perspective:1400px; }
.ihero-bg img { opacity:.56; }
.hx3d { position:absolute; inset:0; z-index:1; pointer-events:none; transform-style:preserve-3d; }

/* page-type palettes */
.ihero--svc     { background:linear-gradient(140deg,#150b30 0%,#2a1254 45%,#3f1566 74%,#170b30 100%); }
.ihero--ai      { background:linear-gradient(140deg,#0e0e30 0%,#1d1554 45%,#2d1a62 74%,#120e32 100%); }
.ihero--pgs     { background:linear-gradient(140deg,#0e1436 0%,#1c2554 45%,#252b62 74%,#101634 100%); }
.ihero--str     { background:linear-gradient(140deg,#0c1228 0%,#152850 45%,#1e3c6a 74%,#0e1630 100%); }
.ihero--pricing { background:linear-gradient(140deg,#1a0f2e 0%,#33204e 45%,#4c2c16 78%,#190f2c 100%); }
.ihero--art     { background:linear-gradient(140deg,#180f32 0%,#2b1552 45%,#3e1c5c 74%,#140c2a 100%); }

/* generic glowing rings */
.hx-rings { position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); box-shadow:0 0 34px rgba(123,104,238,.18); animation:hxFloatY 7s ease-in-out infinite; }
.hx-rings::before { content:''; position:absolute; inset:16%; border-radius:50%; border:1.5px dashed rgba(255,255,255,.28); animation:rot360 18s linear infinite; }
.hx-rings::after { content:''; position:absolute; top:-4px; left:50%; width:9px; height:9px; margin-left:-4px; border-radius:50%; background:var(--hxc,#fd71af); box-shadow:0 0 16px var(--hxc,#fd71af); }

/* funnel tunnel — services hub */
.hx-tunnel { position:absolute; right:-150px; top:50%; width:560px; height:560px; transform:translateY(-50%) rotateX(56deg) rotateZ(-8deg); transform-style:preserve-3d; }
.hx-tunnel i { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(190,160,255,.34); box-shadow:0 0 30px rgba(167,139,250,.22), inset 0 0 30px rgba(253,113,175,.12); transform:translateZ(calc(var(--tz,0) * 1px)) scale(calc(1 - var(--i,0) * .075)); animation:hxFunnel 5.6s ease-in-out infinite; animation-delay:calc(var(--i,0) * .3s); }
.hx-tunnel i:nth-child(odd) { border-color:rgba(253,113,175,.26); }
@keyframes hxFunnel { 0%,100% { opacity:.5 } 50% { opacity:1 } }

/* rotating 3d cube */
.hx-cube { position:absolute; width:var(--hxsz,140px); height:var(--hxsz,140px); transform-style:preserve-3d; animation:hxSpin3d 18s linear infinite; }
.hx-cube i { position:absolute; inset:0; border-radius:16px; border:1px solid rgba(205,185,255,.5); background:linear-gradient(135deg,rgba(123,104,238,.4),rgba(78,155,250,.16)); box-shadow:0 0 26px rgba(123,104,238,.25); }
.hx-cube i:nth-child(1) { transform:translateZ(calc(var(--hxsz,140px) / 2)); }
.hx-cube i:nth-child(2) { transform:rotateY(90deg) translateZ(calc(var(--hxsz,140px) / 2)); background:linear-gradient(135deg,rgba(253,113,175,.36),rgba(123,104,238,.2)); }
.hx-cube i:nth-child(3) { transform:rotateY(180deg) translateZ(calc(var(--hxsz,140px) / 2)); }
.hx-cube i:nth-child(4) { transform:rotateY(270deg) translateZ(calc(var(--hxsz,140px) / 2)); background:linear-gradient(135deg,rgba(78,155,250,.34),rgba(123,104,238,.18)); }
.hx-cube i:nth-child(5) { transform:rotateX(90deg) translateZ(calc(var(--hxsz,140px) / 2)); background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(200,190,255,.12)); }
.hx-cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(calc(var(--hxsz,140px) / 2)); }
@keyframes hxSpin3d { from { transform:rotate3d(1,1,0,0deg); } to { transform:rotate3d(1,1,0,360deg); } }

/* gyroscope rings — strategy */
.hx-gyro { position:absolute; width:var(--hxsz,320px); height:var(--hxsz,320px); transform-style:preserve-3d; }
.hx-gyro i { position:absolute; border-radius:50%; border:3px solid rgba(110,170,255,.55); box-shadow:0 0 18px rgba(78,155,250,.25); }
.hx-gyro i:nth-child(1) { inset:0; animation:hxGy1 9s linear infinite; }
.hx-gyro i:nth-child(2) { inset:9%; border-color:rgba(160,140,255,.6); animation:hxGy2 12s linear infinite; }
.hx-gyro i:nth-child(3) { inset:21%; border-color:rgba(255,140,190,.55); animation:hxGy3 15s linear infinite; }
.hx-gyro::after { content:''; position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#cfd8ff,#4e9bfa 55%,#2a3c8a); box-shadow:0 0 34px rgba(78,155,250,.55); }
@keyframes hxGy1 { from { transform:rotateX(66deg) rotateZ(0deg); } to { transform:rotateX(66deg) rotateZ(360deg); } }
@keyframes hxGy2 { from { transform:rotateY(66deg) rotateZ(0deg); } to { transform:rotateY(66deg) rotateZ(-360deg); } }
@keyframes hxGy3 { from { transform:rotateX(24deg) rotateY(24deg) rotateZ(0deg); } to { transform:rotateX(24deg) rotateY(24deg) rotateZ(360deg); } }

/* 3d growth bars — marketing */
.hx-bars { position:absolute; display:flex; align-items:flex-end; gap:16px; transform:rotateX(16deg) rotateY(-16deg); transform-style:preserve-3d; }
.hx-bars i { width:36px; height:var(--h,90px); border-radius:9px 9px 4px 4px; background:linear-gradient(180deg,var(--hb1,#ffb54d),var(--hb2,#ff7a3d)); box-shadow:0 0 22px rgba(255,159,67,.35); transform-origin:bottom; animation:hxBar 3.4s ease-in-out infinite; animation-delay:calc(var(--d,0) * .25s); }
@keyframes hxBar { 0%,100% { transform:translateZ(0) scaleY(1); } 50% { transform:translateZ(26px) scaleY(1.14); } }

/* layered glass cards — pages service */
.hx-layers { position:absolute; width:250px; height:175px; transform:rotateX(10deg) rotateY(-16deg); transform-style:preserve-3d; }
.hx-layers i { position:absolute; inset:0; border-radius:16px; border:1.5px solid rgba(255,255,255,.48); background:rgba(255,255,255,.11); box-shadow:0 18px 44px rgba(10,6,30,.4), 0 0 24px rgba(78,155,250,.18); }
.hx-layers i:nth-child(1) { transform:translate3d(30px,24px,-70px) rotate(-5deg); opacity:.6; }
.hx-layers i:nth-child(2) { transform:translate3d(15px,12px,-34px); opacity:.85; }
.hx-layers i:nth-child(3) { background:linear-gradient(135deg,rgba(78,155,250,.3),rgba(123,104,238,.24) 60%,rgba(253,113,175,.18)); }
.hx-layers i:nth-child(3)::before { content:''; position:absolute; left:18px; top:18px; width:54px; height:8px; border-radius:6px; background:rgba(255,255,255,.55); box-shadow:0 16px 0 rgba(255,255,255,.35), 0 32px 0 rgba(255,255,255,.25); }
.hx-layers i:nth-child(3)::after { content:''; position:absolute; right:16px; bottom:16px; width:44px; height:26px; border-radius:8px; background:linear-gradient(135deg,#fd71af,#ff9f43); }

/* coin stack — pricing */
.hx-coins { position:absolute; width:var(--hxsz,120px); height:var(--hxsz,120px); transform:rotateX(60deg) rotateZ(-14deg); transform-style:preserve-3d; }
.hx-coins i { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 28%,#ffe3a1,#f7b733 52%,#c07f10 92%); box-shadow:0 0 26px rgba(255,190,80,.4), inset 0 0 0 6px rgba(255,220,140,.35); transform:translateZ(calc(var(--d,0) * 1px)); }
.hx-coins i::after { content:''; position:absolute; inset:22%; border-radius:50%; border:3px solid rgba(120,70,10,.35); }

/* chat bubbles — contact */
.hx-bubbles i { position:absolute; width:var(--s,90px); height:var(--s,90px); border-radius:50%; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.4),rgba(78,155,250,.14) 46%,rgba(123,104,238,.08) 75%); border:1px solid rgba(255,255,255,.42); box-shadow:0 14px 34px rgba(10,8,34,.35), inset 0 0 18px rgba(255,255,255,.12); }
.hx-bubbles i::after { content:''; position:absolute; left:18%; bottom:-9px; width:16px; height:12px; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.42); border-radius:4px; clip-path:polygon(0 0,100% 0,22% 100%); }

/* floating docs — articles */
.hx-docs i { position:absolute; width:var(--dw,92px); height:calc(var(--dw,92px) * 1.24); border-radius:10px; background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(225,215,255,.6)); box-shadow:0 18px 40px rgba(10,6,30,.45); transform:rotate(var(--rot,0deg)); }
.hx-docs i::before { content:''; position:absolute; left:16%; right:16%; top:14%; bottom:30%; background:repeating-linear-gradient(180deg,rgba(90,70,160,.3) 0 3px,transparent 3px 12px); border-radius:2px; }
.hx-docs i::after { content:''; position:absolute; left:16%; bottom:14%; width:40%; height:8px; border-radius:5px; background:linear-gradient(90deg,#7b68ee,#fd71af); }

/* shared float (uses independent translate so it never fights transform) */
.hx-rings, .hx-gyro, .hx-layers, .hx-coins, .hx-tunnel i, .hx-docs i, .hx-bubbles i { animation-name:hxFloatY; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.hx-tunnel i { animation-name:hxFunnel; }
@keyframes hxFloatY { 0%,100% { translate:0 0; } 50% { translate:0 -16px; } }

/* per-scene float durations */
.hx-rings { animation-duration:7s; } .hx-gyro { animation-duration:8s; } .hx-layers { animation-duration:7s; }
.hx-coins { animation-duration:6s; } .hx-docs i { animation-duration:calc(var(--f,7) * 1s); } .hx-bubbles i { animation-duration:calc(var(--f,6) * 1s); }

@media (max-width:1180px) { .hx3d { opacity:.5; } }
@media (max-width:860px) { .hx3d { display:none; } .ihero-bg img { opacity:.44; } }
@media (max-width:860px) { .prc-hero-cube { display:none; } }

/* ==================================================================
   v71 — AI FUNNELS PAGE OVERHAUL + SITE-WIDE SCROLL PROCESS (sproc)
   ================================================================== */

/* ---------- Fix: scope dark AI-grid cards (were clobbered by floating .ai-card) ---------- */
.ai-dark .ai-grid .ai-card {
  position:static; z-index:auto; display:block; max-width:none; animation:none;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; padding:26px 22px; box-shadow:none; backdrop-filter:none;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.ai-dark .ai-grid .ai-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); }
.ai-dark .ai-grid .ai-ic { width:48px; height:48px; border-radius:13px; margin:0 0 16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.ai-dark .ai-grid .ai-ic svg { width:24px; height:24px; }
.ai-dark .ai-grid .ai-card h4 { color:#fff; font-size:16.5px; margin:0 0 8px; text-align:left; letter-spacing:-.01em; }
.ai-dark .ai-grid .ai-card p { color:rgba(255,255,255,0.55); font-size:13.5px; margin:0; }
.ai-strip > * { min-width:0; }
.ai-strip .chart-box { height:300px; }

/* ---------- AI hero: readability scrim over bg image ---------- */
.ihero--ai .ihero-bg img { opacity:.42; }
.ihero--ai .ihero-bg::after {
  background:
    linear-gradient(94deg, rgba(9,5,26,.96) 0%, rgba(9,5,26,.85) 30%, rgba(11,7,32,.44) 56%, rgba(9,5,26,.30) 76%, rgba(9,5,26,.55) 100%),
    linear-gradient(180deg, rgba(9,5,26,.30) 0%, rgba(9,5,26,0) 26%, rgba(9,5,26,.66) 100%);
}

/* ---------- AFX: 3D vector funnel stage (hero right side) ---------- */
.afx-wrap { min-height:540px; display:flex; align-items:center; justify-content:center; }
.afx { position:relative; width:100%; max-width:470px; }
.afx::before {
  content:''; position:absolute; left:50%; top:44%; width:560px; height:560px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(123,104,238,.30) 0%, rgba(78,155,250,.12) 42%, transparent 68%);
}
.afx-live {
  position:absolute; top:-4px; left:0; z-index:6; display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px; background:rgba(12,7,30,.68); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:10.5px; font-weight:800; letter-spacing:1.5px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.afx-live i { width:8px; height:8px; border-radius:50%; background:#2ee27a; animation:pdPulse 1.7s ease-in-out infinite; }
.afx-stage { position:relative; height:520px; transform-style:preserve-3d; }
.afx-funnel { position:absolute; left:50%; top:10px; width:300px; height:320px; transform:translateX(-50%); transform-style:preserve-3d; }
.afx-ring {
  position:absolute; left:50%; top:var(--t); width:var(--w); height:calc(var(--w) * .30);
  margin-left:calc(var(--w) / -2); border-radius:50%;
  border:2px solid rgba(195,175,255,.58);
  background:linear-gradient(180deg, rgba(123,104,238,.17), rgba(78,155,250,.05));
  box-shadow:0 0 26px rgba(123,104,238,.32), inset 0 0 22px rgba(253,113,175,.10);
  transform:rotateX(72deg);
  animation:afxRing 3.6s ease-in-out infinite; animation-delay:calc(var(--i) * .32s);
}
@keyframes afxRing {
  0%,100% { opacity:.72; box-shadow:0 0 22px rgba(123,104,238,.28), inset 0 0 18px rgba(253,113,175,.08); }
  50%     { opacity:1;   box-shadow:0 0 44px rgba(123,104,238,.55), inset 0 0 30px rgba(253,113,175,.20); }
}
.afx-drops { position:absolute; left:50%; top:0; width:0; height:306px; }
.afx-drops i {
  position:absolute; left:-3px; top:-10px; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(180deg,#fd71af,#ff9f43); box-shadow:0 0 10px rgba(253,113,175,.85);
  animation:afxFall 2.7s linear infinite; animation-delay:calc(var(--d) * .54s); opacity:0;
}
@keyframes afxFall {
  0%   { top:-10px; opacity:0; transform:scale(.6); }
  12%  { opacity:1; }
  72%  { opacity:1; }
  100% { top:300px; opacity:0; transform:scale(.4); }
}
.afx-core {
  position:absolute; left:50%; top:352px; width:86px; height:86px; margin-left:-43px; z-index:3;
  border-radius:26px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, #dccdff, #7b68ee 52%, #3d2f9e);
  box-shadow:0 0 62px rgba(123,104,238,.78), inset 0 2px 12px rgba(255,255,255,.5);
  animation:coreFloat 5s ease-in-out infinite;
}
.afx-core svg { width:38px; height:38px; color:#fff; }
.afx-core::before, .afx-core::after {
  content:''; position:absolute; inset:0; border-radius:26px; pointer-events:none;
  border:2px solid rgba(167,139,250,.5); animation:ringPulse 2.6s ease-out infinite;
}
.afx-core::after { animation-delay:1.3s; }
.afx-sale {
  position:absolute; left:50%; top:466px; transform:translateX(-50%); z-index:3;
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg,#18a957,#0e8f47); color:#fff;
  font-weight:800; font-size:12px; letter-spacing:.8px;
  box-shadow:0 14px 30px -10px rgba(24,169,87,.55); border:1px solid rgba(255,255,255,.25);
  animation:floaty 4.8s ease-in-out infinite;
}
.afx-glass {
  position:absolute; z-index:5; display:flex; flex-direction:column; gap:2px;
  background:rgba(14,9,34,.74); border:1px solid rgba(255,255,255,.20); border-radius:14px;
  padding:11px 15px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px rgba(8,4,24,.45); animation:floaty 6s ease-in-out infinite;
}
.afx-glass b { color:#fff; font-size:12.5px; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.afx-glass b::before { content:''; width:7px; height:7px; border-radius:50%; flex:none; background:var(--gc,#a78bfa); box-shadow:0 0 8px var(--gc,#a78bfa); }
.afx-glass small { color:rgba(235,232,250,.62); font-size:10px; font-weight:600; letter-spacing:.3px; white-space:nowrap; }
.afx-glass.g1 { left:-3%; top:40px; }
.afx-glass.g2 { right:-5%; top:158px; animation-delay:-2s; }
.afx-glass.g3 { left:-1%; top:268px; animation-delay:-4s; }
.afx .ih-orbit { position:absolute; width:180px; height:180px; right:-16px; bottom:6px; z-index:2; opacity:.9; }

/* ---------- What's Included: bento mosaic ---------- */
.inc-bento {
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(158px,auto);
  gap:16px; margin-top:46px;
}
.inc-tile {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.inc-tile:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.inc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s ease; }
.inc-tile:hover .inc-img { transform:scale(1.06); }
.inc-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,6,30,.10) 0%, rgba(10,6,30,.34) 38%, rgba(10,6,30,.94) 80%); }
.inc-num {
  position:relative; align-self:flex-start; z-index:2; margin-bottom:12px;
  font-size:10.5px; font-weight:800; letter-spacing:1.6px; color:var(--ic,#7b68ee);
  background:rgba(255,255,255,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(21,12,66,.08); border-radius:999px; padding:6px 12px;
}
.inc-tile h3 { font-size:17.5px; margin:0 0 7px; letter-spacing:-.01em; }
.inc-tile p { color:var(--muted); font-size:13.5px; margin:0; }
.inc-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:16px; }
.inc-tags span {
  font-size:11px; font-weight:700; color:var(--ic,#7b68ee);
  background:color-mix(in srgb, var(--ic,#7b68ee) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--ic,#7b68ee) 22%, #fff);
  border-radius:999px; padding:5px 11px;
}
.t-a { grid-column:span 2; grid-row:span 2; padding:0; }
.t-a .inc-num { position:absolute; top:18px; left:18px; }
.t-a .inc-body { position:relative; z-index:2; margin-top:auto; padding:24px 26px 26px; display:flex; flex-direction:column; }
.t-a h3 { color:#fff; font-size:22px; }
.t-a p { color:rgba(235,232,250,.78); font-size:14px; }
.t-a .inc-tags span { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); backdrop-filter:blur(6px); }
.t-c, .t-g { padding:0; }
.inc-chip {
  position:relative; z-index:2; margin-top:auto; align-self:flex-start;
  margin:0 0 16px 16px; padding:9px 14px; border-radius:12px;
  background:rgba(12,8,30,.72); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:11.5px; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.inc-chip b { color:#2ee27a; }
.t-b .inc-chat, .t-d .inc-cart, .t-e .inc-seg, .t-f .inc-mail { margin-top:auto; padding-top:16px; }
.inc-chat { display:flex; flex-direction:column; gap:7px; }
.inc-chat i {
  width:fit-content; max-width:100%; font-style:normal; font-size:11px; font-weight:600;
  color:#5b4bd6; background:rgba(123,104,238,.09); border:1px solid rgba(123,104,238,.16);
  border-radius:12px 12px 12px 4px; padding:7px 11px;
}
.inc-chat i.me { align-self:flex-end; border-radius:12px 12px 4px 12px; color:#2f6fd6; background:rgba(78,155,250,.10); border-color:rgba(78,155,250,.18); }
.inc-chat i:last-child { border-bottom-left-radius:12px; border-bottom-right-radius:4px; background:rgba(46,226,122,.08); border-color:rgba(24,169,87,.20); color:#129457; }
.inc-cart { display:flex; flex-direction:column; gap:6px; }
.ic-row {
  display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:8px 11px; background:#fbfaff;
}
.ic-row small { margin-left:auto; color:var(--muted); font-weight:800; }
.ic-dot { width:9px; height:9px; border-radius:50%; background:var(--dc,#fd71af); flex:none; box-shadow:0 0 8px var(--dc,#fd71af); }
.ic-bump { border-style:dashed; color:#a2650f; background:rgba(255,159,67,.07); border-color:rgba(255,159,67,.3); }
.ic-plus { width:16px; height:16px; border-radius:50%; background:#ff9f43; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; }
.ic-btn {
  text-align:center; font-size:11px; font-weight:800; color:#129457;
  background:rgba(24,169,87,.08); border:1px solid rgba(24,169,87,.22); border-radius:10px; padding:8px;
}
.inc-seg { display:flex; flex-direction:column; gap:6px; }
.inc-seg span {
  display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 7px; background:#fbfaff;
}
.inc-seg b {
  font-size:9.5px; letter-spacing:1px; color:#fff; border-radius:999px; padding:4px 9px;
}
.seg-hot b { background:linear-gradient(135deg,#e0509a,#d13a86); }
.seg-warm b { background:linear-gradient(135deg,#ff9f43,#e08625); }
.seg-cold b { background:linear-gradient(135deg,#4e9bfa,#2f7ae5); }
.inc-mail { display:flex; flex-direction:column; gap:6px; }
.inc-mail div {
  display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px;
  padding:7px 11px; background:#fbfaff;
}
.inc-mail b { font-size:10px; font-weight:800; letter-spacing:.6px; color:#129457; text-transform:uppercase; flex:none; }
.inc-mail span { font-size:11.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inc-dots { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:16px; }
.inc-dots span {
  font-size:10.5px; font-weight:800; letter-spacing:.8px; color:var(--dc,#7b68ee);
  border:1px solid color-mix(in srgb, var(--dc,#7b68ee) 28%, #fff);
  background:color-mix(in srgb, var(--dc,#7b68ee) 8%, #fff);
  border-radius:999px; padding:6px 12px;
}
.t-h { background:linear-gradient(150deg, #f7f5ff, #eef4fe); }

/* ---------- First 24 Hours timeline ---------- */
.tl24-sec { background:linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%); }
.tl24 { position:relative; max-width:920px; margin:50px auto 0; }
.tl24::before {
  content:''; position:absolute; left:50%; top:6px; bottom:6px; width:2px; margin-left:-1px;
  background:linear-gradient(180deg,#7b68ee,#fd71af,#ff9f43,#4e9bfa,#18a957); opacity:.32; border-radius:2px;
}
.tl-item { position:relative; width:50%; padding:0 46px 30px 0; }
.tl-item:nth-child(even) { margin-left:50%; padding:0 0 30px 46px; }
.tl-item:last-child { padding-bottom:0; }
.tl-pill {
  position:absolute; top:14px; z-index:2;
  font-size:11px; font-weight:800; letter-spacing:.8px; color:#fff;
  background:linear-gradient(135deg, var(--tc,#7b68ee), color-mix(in srgb, var(--tc,#7b68ee) 62%, #17171c));
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 13px;
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--tc,#7b68ee) 60%, transparent);
  white-space:nowrap;
}
.tl-item:nth-child(odd) .tl-pill { left:calc(100% + 12px); }
.tl-item:nth-child(even) .tl-pill { right:calc(100% + 12px); }
.tl-dot {
  position:absolute; top:18px; z-index:2; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg, var(--tc,#7b68ee), #fff 160%);
  border:3px solid #fff; box-shadow:0 0 0 2px var(--tc,#7b68ee);
}
.tl-item:nth-child(odd) .tl-dot { right:-8px; }
.tl-item:nth-child(even) .tl-dot { left:-8px; }
.tl-card {
  position:relative; z-index:1;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px;
  box-shadow:0 14px 34px -22px rgba(21,12,66,.20);
  transition:transform .22s ease, box-shadow .22s ease;
}
.tl-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.tl-card h3 { font-size:16.5px; margin:0 0 7px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.tl-card h3 svg { width:18px; height:18px; color:var(--tc,#7b68ee); flex:none; }
.tl-card p { color:var(--muted); font-size:13.5px; margin:0; }
.tl24-note { text-align:center; margin-top:38px; }
.tl24-note b { display:block; font-size:19px; letter-spacing:-.01em; }
.tl24-note span { color:var(--muted); font-size:13.5px; }

/* ---------- Tech marquee ---------- */
.tmq {
  margin-top:46px; display:flex; flex-direction:column; gap:14px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tmq-row { display:flex; width:max-content; animation:tmqL 38s linear infinite; }
.tmq-row.rev { animation:tmqR 44s linear infinite; }
.tmq:hover .tmq-row { animation-play-state:paused; }
.tmq-set { display:flex; gap:14px; padding-right:14px; }
@keyframes tmqL { to { transform:translateX(-50%); } }
@keyframes tmqR { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tmq-row { animation:none !important; } }

/* ---------- Comparison: DIY vs FTS vs Agency ---------- */
.cmp3 { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:18px; margin-top:52px; align-items:start; }
.cmp-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px; }
.cmp-card > h3 { font-size:18.5px; letter-spacing:-.01em; }
.cmp-sub { color:var(--muted); font-size:12.5px; font-weight:600; margin:4px 0 6px; }
.cmp-rows { margin-top:14px; }
.cmp-row { display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-top:1px dashed rgba(21,12,66,.10); }
.cmp-row > div { font-size:13.5px; color:var(--text); line-height:1.45; }
.cmp-row b { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:2px; }
.cmp-x, .cmp-ok, .cmp-half { width:19px; height:19px; border-radius:50%; flex:none; margin-top:2px; position:relative; }
.cmp-x { background:rgba(224,80,154,.12); }
.cmp-x::before, .cmp-x::after { content:''; position:absolute; left:9px; top:4px; width:2px; height:11px; border-radius:2px; background:#e0509a; }
.cmp-x::before { transform:rotate(45deg); } .cmp-x::after { transform:rotate(-45deg); }
.cmp-ok { background:rgba(24,169,87,.13); }
.cmp-ok::before { content:''; position:absolute; left:6px; top:4.5px; width:6px; height:4px; border-left:2.2px solid #129457; border-bottom:2.2px solid #129457; transform:rotate(-45deg); }
.cmp-half { background:rgba(255,159,67,.14); }
.cmp-half::before { content:''; position:absolute; left:9.5px; top:4px; width:2px; height:11px; border-radius:2px; background:#e08625; }
.cmp-feat {
  position:relative; margin-top:-14px; padding-top:34px;
  background:linear-gradient(155deg, #171429 0%, #241a4d 55%, #171235 100%);
  border:1px solid rgba(255,255,255,.15); box-shadow:0 34px 80px -34px rgba(23,15,60,.6);
}
.cmp-feat h3 { color:#fff; }
.cmp-feat .cmp-sub { color:rgba(235,232,250,.6); }
.cmp-feat .cmp-row { border-color:rgba(255,255,255,.13); }
.cmp-feat .cmp-row > div { color:#fff; }
.cmp-feat .cmp-row b { color:rgba(235,232,250,.55); }
.cmp-tag {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(135deg,#fd71af,#ff9f43); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  border-radius:999px; padding:8px 18px; box-shadow:0 12px 26px -10px rgba(253,113,175,.6);
}
.cmp-btn { width:100%; justify-content:center; margin-top:18px; }

/* ---------- Mini case studies ---------- */
.mcs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.mcs-card {
  display:flex; flex-direction:column; overflow:hidden; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:22px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mcs-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
.mcs-media { position:relative; height:172px; overflow:hidden; }
.mcs-media img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.mcs-card:hover .mcs-media img { transform:scale(1.06); }
.mcs-metric {
  position:absolute; right:14px; bottom:14px; text-align:right;
  background:rgba(12,8,30,.78); border:1px solid rgba(255,255,255,.22); border-radius:13px;
  padding:8px 13px; color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.mcs-metric b { display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mcs-metric span { font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:rgba(235,232,250,.75); }
.mcs-body { display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1; }
.mcs-who { font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#7b68ee; }
.mcs-body h3 { font-size:16.5px; margin:0; letter-spacing:-.01em; }
.mcs-quote { color:var(--muted); font-size:13.5px; font-style:italic; margin:0; }
.mcs-link { margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:#6a56e8; }
.mcs-card:hover .mcs-link { color:#fd71af; }

/* ---------- Investment band ---------- */
.inv-band {
  position:relative; overflow:hidden; border-radius:28px; padding:54px 46px 46px;
  background:linear-gradient(150deg, #151030 0%, #231647 55%, #141024 100%);
  border:1px solid rgba(255,255,255,.12);
}
.inv-band::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(640px 340px at 12% -8%, rgba(123,104,238,.26), transparent 62%),
    radial-gradient(560px 320px at 90% 8%, rgba(253,113,175,.16), transparent 64%),
    radial-gradient(620px 340px at 50% 115%, rgba(78,155,250,.16), transparent 62%);
}
.inv-band > * { position:relative; z-index:1; }
.inv-head { text-align:center; max-width:660px; margin:0 auto 40px; }
.inv-head p { margin-bottom:0; }
.inv-grid { display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:18px; align-items:stretch; }
.inv-card {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:20px; padding:26px 24px; color:#fff;
  transition:transform .22s ease, border-color .22s ease;
}
.inv-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.28); }
.inv-card.feats {
  background:rgba(255,255,255,.10); border-color:rgba(253,113,175,.55);
  box-shadow:0 30px 70px -28px rgba(253,113,175,.4); position:relative;
}
.inv-tag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(135deg,#7b68ee,#4e9bfa); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  border-radius:999px; padding:7px 15px; border:1px solid rgba(255,255,255,.3);
}
.inv-name { font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:rgba(235,232,250,.65); }
.inv-price { font-size:33px; font-weight:800; letter-spacing:-.03em; margin:8px 0 2px; }
.inv-price small { font-size:14px; font-weight:700; color:rgba(235,232,250,.65); letter-spacing:0; }
.inv-sub { font-size:12.5px; color:rgba(235,232,250,.6); margin:0 0 6px; }
.inv-feats { list-style:none; margin:14px 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; }
.inv-feats li { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:rgba(235,232,250,.78); }
.inv-feats svg { width:15px; height:15px; flex:none; margin-top:2px; }
.inv-note { text-align:center; color:rgba(235,232,250,.55); font-size:12.5px; margin:24px auto 0; max-width:640px; }

/* ---------- SPROC: scroll-driven process (site-wide) ---------- */
.sproc { display:grid; grid-template-columns:.92fr 1.08fr; gap:52px; align-items:start; margin-top:46px; }
.sp-pin { position:sticky; top:104px; }
.sp-card {
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, color-mix(in srgb, var(--c1,#7b68ee) 10%, #fff), color-mix(in srgb, var(--c2,#4e9bfa) 7%, #fff));
  border:1px solid var(--line); border-radius:24px; padding:26px 26px 24px;
  box-shadow:var(--shadow);
  transition:background .5s ease;
}
.sp-card::before {
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--c1,#7b68ee), var(--c2,#4e9bfa));
  transition:background .5s ease;
}
.sp-top { display:flex; align-items:center; justify-content:space-between; }
.sp-num b {
  font-size:46px; font-weight:800; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(120deg, var(--c1,#7b68ee), var(--c2,#4e9bfa));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sp-num em { font-style:normal; font-weight:800; font-size:15px; color:var(--muted); margin-left:2px; }
.sp-week {
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  box-shadow:var(--shadow-sm);
}
.sp-cube { --sz:54px; position:relative; width:var(--sz); height:var(--sz); margin:20px 0 16px; transform-style:preserve-3d; animation:cubeSpin 14s linear infinite; }
.sp-cube i {
  position:absolute; inset:0; border-radius:12px;
  border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(135deg, var(--c1,#7b68ee), var(--c2,#4e9bfa));
  opacity:.92;
}
.sp-cube i:nth-child(1) { transform:translateZ(calc(var(--sz) / 2)); }
.sp-cube i:nth-child(2) { transform:rotateY(90deg) translateZ(calc(var(--sz) / 2)); filter:brightness(1.12); }
.sp-cube i:nth-child(3) { transform:rotateY(180deg) translateZ(calc(var(--sz) / 2)); filter:brightness(.92); }
.sp-cube i:nth-child(4) { transform:rotateY(270deg) translateZ(calc(var(--sz) / 2)); filter:brightness(1.06); }
.sp-cube i:nth-child(5) { transform:rotateX(90deg) translateZ(calc(var(--sz) / 2)); filter:brightness(1.2); }
.sp-cube i:nth-child(6) { transform:rotateX(-90deg) translateZ(calc(var(--sz) / 2)); filter:brightness(.85); }
.sp-title { font-size:21px; letter-spacing:-.015em; margin:0 0 4px; min-height:58px; }
.sp-track { height:6px; border-radius:99px; background:rgba(21,12,66,.09); overflow:hidden; margin:16px 0 14px; }
.sp-track i { display:block; height:100%; width:25%; border-radius:99px; background:linear-gradient(90deg, var(--c1,#7b68ee), var(--c2,#4e9bfa)); transition:width .45s ease, background .5s ease; }
.sp-hint { font-size:13px; color:var(--muted); margin:0; }
.sp-steps { position:relative; padding-left:36px; }
.sp-rail { position:absolute; left:9px; top:10px; bottom:10px; width:2px; border-radius:2px; background:rgba(21,12,66,.10); overflow:hidden; }
.sp-rail i { display:block; width:100%; height:0; background:linear-gradient(180deg,#7b68ee,#4e9bfa); transition:height .55s ease; }
.sp-step {
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 26px;
  margin-bottom:22px; opacity:.5; transform:scale(.985);
  transition:opacity .4s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.sp-step:last-child { margin-bottom:0; }
.sp-dot {
  position:absolute; left:-36px; top:30px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid rgba(21,12,66,.16);
  box-shadow:0 0 0 5px #fff; transition:background .35s ease, border-color .35s ease;
}
.sp-kick { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--c2,#4e9bfa); margin-bottom:8px; }
.sp-step h3 { font-size:19px; letter-spacing:-.015em; margin:0 0 8px; }
.sp-step p { color:var(--muted); font-size:14px; margin:0; }
.sp-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.sp-chips span {
  font-size:11px; font-weight:700; color:var(--c1,#7b68ee);
  background:color-mix(in srgb, var(--c1,#7b68ee) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--c1,#7b68ee) 20%, #fff);
  border-radius:999px; padding:5px 11px;
}
.sp-step.is-on { opacity:1; transform:scale(1); }
.sp-step.is-on .sp-dot { border-color:var(--c1,#7b68ee); }
.sp-step.is-cur { border-color:color-mix(in srgb, var(--c1,#7b68ee) 45%, #fff); box-shadow:0 22px 48px -22px color-mix(in srgb, var(--c1,#7b68ee) 55%, transparent); transform:scale(1); }
.sproc-info { margin-top:44px; gap:26px; }
/* inline variant (contact page) */
.sproc--inline { grid-template-columns:1fr; gap:18px; margin-top:26px; }
.sproc--inline .sp-pin { position:static; }
.sproc--inline .sp-card { display:flex; align-items:center; gap:16px; padding:16px 18px; }
.sproc--inline .sp-card::before { height:3px; }
.sproc--inline .sp-num b { font-size:30px; }
.sproc--inline .sp-cube { --sz:38px; margin:0; flex:none; }
.sproc--inline .sp-top { flex-direction:column; align-items:flex-start; gap:4px; }
.sproc--inline .sp-title { font-size:15.5px; margin:0; min-height:0; }
.sproc--inline .sp-track { display:none; }
.sproc--inline .sp-hint { display:none; }
.sproc--inline .sp-steps { padding-left:30px; }
.sproc--inline .sp-step { padding:18px 20px; margin-bottom:14px; }
.sproc--inline .sp-dot { left:-30px; top:22px; width:15px; height:15px; box-shadow:0 0 0 4px #fff; }
.sproc--inline .sp-step h3 { font-size:16px; }
.sproc--inline .sp-step p { font-size:13px; }

/* ---------- v71 responsive ---------- */

/* sticky fix: body/html overflow-x:hidden sticky todo break karta hai — clip use karo */
:root { overflow-x: clip; }
:root body { overflow-x: clip; }
/* eyebrow me inline svg (service pages) — size lock */
.ihero .eyebrow svg { width:15px; height:15px; flex:none; }
@media (max-width:1080px) {
  .ih-split { grid-template-columns:1fr; gap:48px; }
  .afx-wrap { min-height:0; margin-top:6px; }
  .inc-bento { grid-template-columns:1fr 1fr; grid-auto-rows:minmax(150px,auto); }
  .cmp3 { grid-template-columns:1fr; max-width:640px; margin-left:auto; margin-right:auto; }
  .cmp-feat { margin-top:0; }
  .mcs-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
  .inv-grid { grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .sproc { grid-template-columns:1fr; gap:26px; }
  .sp-pin { position:static; }
  .sp-title { min-height:0; }
}
@media (max-width:640px) {
  .afx-stage { height:470px; transform:scale(.88); transform-origin:top center; }
  .afx { max-width:400px; }
  .afx .ih-orbit { right:-6px; }
  .inc-bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .t-a { grid-column:span 1; grid-row:span 1; min-height:380px; }
  .inc-tile { padding:20px; }
  .t-a .inc-body { padding:20px; }
  .tl24::before { left:10px; margin-left:0; }
  .tl-item, .tl-item:nth-child(even) { width:100%; margin-left:0; padding:0 0 26px 40px; }
  .tl-item:nth-child(odd) .tl-pill, .tl-item:nth-child(even) .tl-pill { position:static; display:inline-block; margin-bottom:10px; }
  .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot { left:2.5px; right:auto; top:4px; }
  .sp-card { padding:20px; }
  .sp-num b { font-size:36px; }
  .sp-step { padding:18px 18px; }
  .sproc { gap:20px; }
  .sp-steps { padding-left:28px; }
  .sp-dot { left:-28px; top:24px; width:15px; height:15px; box-shadow:0 0 0 4px #fff; }
  .sp-rail { left:6px; }
  .inv-band { padding:40px 22px 32px; }
  .cmp-card { padding:22px 18px; }
}

/* ==================================================================
   v73 — CLEAN SERVICE HEROES + LIVING 3D VECTOR STAGES (hvx)
   Kills the cluttered bg-photo + unsplash + floating-chip hero look.
   Right side of the 3 non-AI service pages = pure animated 3D vectors.
   ================================================================== */

/* ---------- hero copy: breathing room + neat separation (all service pages) ---------- */
.svc-hero-copy .crumbs { margin-bottom:22px; }
.svc-hero-copy .sub { margin-bottom:34px; max-width:600px; }
.svc-hero-copy .hero-btns { margin-bottom:6px; }
.svc-hero-copy .svc-niche { margin-top:26px; }
.svc-hero-copy .svc-hero-stats {
  margin-top:38px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* bg photo removed on the 3 pages: keep only a soft bottom fade */
.ihero--nophoto .ihero-bg::after {
  background:linear-gradient(180deg, rgba(16,10,38,0) 0%, rgba(16,10,38,.18) 60%, rgba(16,10,38,.5) 100%);
}

/* ---------- shared stage framework ---------- */
.hvx-wrap { min-height:540px; display:flex; align-items:center; justify-content:center; }
.hvx { position:relative; width:100%; max-width:470px; }
.hvx::before {
  content:''; position:absolute; left:50%; top:46%; width:560px; height:560px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(123,104,238,.24) 0%, rgba(78,155,250,.10) 42%, transparent 68%);
}
.hvx-live {
  position:absolute; top:-4px; left:0; z-index:6; display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px; background:rgba(12,7,30,.68); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:10.5px; font-weight:800; letter-spacing:1.5px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hvx-live i { width:8px; height:8px; border-radius:50%; background:#2ee27a; animation:pdPulse 1.7s ease-in-out infinite; }
.hvx-glass {
  position:absolute; z-index:5; display:flex; flex-direction:column; gap:2px;
  background:rgba(14,9,34,.74); border:1px solid rgba(255,255,255,.20); border-radius:14px;
  padding:11px 15px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 44px rgba(8,4,24,.45); animation:floaty 6s ease-in-out infinite;
}
.hvx-glass b { color:#fff; font-size:12.5px; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.hvx-glass b::before { content:''; width:7px; height:7px; border-radius:50%; flex:none; background:var(--gc,#a78bfa); box-shadow:0 0 8px var(--gc,#a78bfa); }
.hvx-glass small { color:rgba(235,232,250,.62); font-size:10px; font-weight:600; letter-spacing:.3px; white-space:nowrap; }
.hvx .ih-orbit { position:absolute; width:172px; height:172px; z-index:2; opacity:.92; }

/* ==================================================================
   SSX — STRATEGY: living 3D value-ladder staircase
   ================================================================== */
.ssx-stage { position:relative; height:520px; }
.ssx-scene {
  position:absolute; left:50%; bottom:64px; width:372px; height:392px; margin-left:-186px;
  transform:rotateX(10deg) rotateY(-12deg); transform-style:preserve-3d;
}
.ssx-step {
  position:absolute; bottom:0; left:calc(var(--i) * 68px);
  width:64px; height:calc(84px + var(--i) * 34px);
  border-radius:14px 14px 9px 9px;
  background:linear-gradient(180deg, rgba(123,104,238,.36), rgba(78,155,250,.10) 68%, rgba(255,255,255,.045));
  border:1.5px solid rgba(190,175,255,.42);
  box-shadow:0 0 24px rgba(78,155,250,.14), inset 0 1px 0 rgba(255,255,255,.28);
  animation:hxFloatY 6s ease-in-out infinite; animation-delay:calc(var(--i) * .45s);
}
.ssx-step i {
  position:absolute; top:-8px; left:50%; width:15px; height:15px; margin-left:-8px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #eef 0%, var(--nc,#4e9bfa) 58%, #27357e 100%);
  box-shadow:0 0 14px var(--nc,#4e9bfa), 0 0 4px #fff inset;
}
.ssx-step:nth-child(5) { box-shadow:0 0 34px rgba(123,104,238,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.ssx-path { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; }
.ssx-path path {
  fill:none; stroke:rgba(255,255,255,.62); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:7 9; animation:ssxFlow 1.6s linear infinite;
  filter:drop-shadow(0 0 6px rgba(167,139,250,.75));
}
@keyframes ssxFlow { to { stroke-dashoffset:-32; } }
.ssx-core {
  position:absolute; left:294px; bottom:236px; width:74px; height:74px; margin-left:-37px; z-index:3;
  border-radius:22px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, #dcd6ff, #7b68ee 52%, #3d2f9e);
  box-shadow:0 0 56px rgba(123,104,238,.75), inset 0 2px 12px rgba(255,255,255,.5);
  animation:coreFloat 5s ease-in-out infinite;
}
.ssx-core svg { width:34px; height:34px; color:#fff; }
.ssx-core::before, .ssx-core::after {
  content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  border:2px solid rgba(167,139,250,.5); animation:ringPulse 2.6s ease-out infinite;
}
.ssx-core::after { animation-delay:1.3s; }
.ssx-base {
  position:absolute; left:50%; bottom:46px; width:430px; height:60px; margin-left:-215px;
  transform:rotateX(72deg); border-radius:50%;
  background:radial-gradient(ellipse, rgba(78,155,250,.20), transparent 68%);
}
.ssx .ih-orbit { right:-12px; bottom:4px; }
.ssx-g1 { left:-2%; top:52px; }
.ssx-g2 { right:-4%; top:196px; animation-delay:-2s; }
.ssx-g3 { left:-4%; bottom:120px; animation-delay:-4s; }

/* ==================================================================
   SMX — MARKETING: living 3D bullseye + radar traffic engine
   ================================================================== */
.smx-stage { position:relative; height:520px; }
.smx-plane {
  position:absolute; left:50%; top:96px; width:356px; height:356px; margin-left:-178px;
  transform:rotateX(62deg); transform-style:preserve-3d;
}
.smx-ring {
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:2px solid rgba(140,180,255,.5); box-shadow:0 0 24px rgba(78,155,250,.25);
  transform:translate(-50%,-50%);
  animation:smxRing 3.4s ease-in-out infinite; animation-delay:calc(var(--i) * .4s);
}
.smx-ring.r1 { width:356px; height:356px; border-color:rgba(140,180,255,.62); }
.smx-ring.r2 { width:252px; height:252px; border-color:rgba(255,159,67,.6); }
.smx-ring.r3 { width:150px; height:150px; border-color:rgba(253,113,175,.68); }
@keyframes smxRing {
  0%,100% { opacity:.55; box-shadow:0 0 18px rgba(78,155,250,.18); }
  50%     { opacity:1;   box-shadow:0 0 40px rgba(78,155,250,.42); }
}
.smx-cross { position:absolute; left:50%; top:50%; }
.smx-cross i { position:absolute; background:rgba(255,255,255,.30); border-radius:2px; }
.smx-cross i:nth-child(1) { width:70px; height:1.5px; left:-35px; top:0; }
.smx-cross i:nth-child(2) { width:1.5px; height:70px; left:0; top:-35px; }
.smx-sweep {
  position:absolute; left:50%; top:50%; width:356px; height:356px; margin:-178px 0 0 -178px;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(78,155,250,.42) 0deg, rgba(78,155,250,.10) 46deg, transparent 70deg, transparent 360deg);
  animation:rot360 4.6s linear infinite;
}
.smx-in { position:absolute; left:50%; top:50%; z-index:2; }
.smx-in i {
  position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#ff9f43,#fd71af); box-shadow:0 0 12px rgba(253,113,175,.85);
  animation:smxIn 3s linear infinite; animation-delay:calc(var(--d) * .5s); opacity:0;
}
@keyframes smxIn {
  0%   { transform:translate(var(--fx), var(--fy)) scale(.75); opacity:0; }
  16%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translate(0,0) scale(.3); opacity:0; }
}
.smx-core {
  position:absolute; left:50%; top:50%; width:82px; height:82px; margin:-86px 0 0 -41px; z-index:3;
  transform:translateZ(26px) rotateX(-62deg); transform-origin:bottom center;
  border-radius:24px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, #ffe1c4, #ff9f43 52%, #b3541e);
  box-shadow:0 0 58px rgba(255,159,67,.7), inset 0 2px 12px rgba(255,255,255,.5);
  animation:smxFloat 5s ease-in-out infinite;
}
@keyframes smxFloat {
  0%,100% { transform:translateZ(26px) rotateX(-62deg) translateY(0); }
  50%     { transform:translateZ(26px) rotateX(-62deg) translateY(-11px); }
}
.smx-core svg { width:36px; height:36px; color:#fff; }
.smx-core::before, .smx-core::after {
  content:''; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  border:2px solid rgba(255,159,67,.55); animation:ringPulse 2.6s ease-out infinite;
}
.smx-core::after { animation-delay:1.3s; }
.smx .ih-orbit { right:-14px; top:0; }
.smx-g1 { right:-4%; top:64px; }
.smx-g2 { left:-4%; top:218px; animation-delay:-2s; }
.smx-g3 { right:-2%; bottom:26px; animation-delay:-4s; }

/* ==================================================================
   SPX — PAGES: living 3D A/B page cards + conversion gauge
   ================================================================== */
.spx-stage { position:relative; height:520px; }
.spx-scene {
  position:absolute; left:50%; top:36px; width:400px; height:440px; margin-left:-200px;
  transform:rotateX(8deg) rotateY(-10deg); transform-style:preserve-3d;
}
.spx-card {
  position:absolute; width:210px; height:264px; border-radius:18px;
  background:linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 55%);
  border:1.5px solid rgba(255,255,255,.34);
  box-shadow:0 30px 70px rgba(8,4,24,.5), inset 0 1px 0 rgba(255,255,255,.3);
  padding:16px 16px 18px; transform-style:preserve-3d;
  animation:hxFloatY 7s ease-in-out infinite;
}
.spx-a { left:0; top:132px; transform:rotateZ(-4deg) translateZ(-46px); opacity:.82; animation-delay:-2.4s; }
.spx-b {
  right:0; top:0; transform:rotateZ(3deg) translateZ(34px);
  border-color:rgba(253,113,175,.65);
  background:linear-gradient(165deg, rgba(253,113,175,.16), rgba(123,104,238,.10) 55%, rgba(255,255,255,.05));
  box-shadow:0 34px 76px rgba(8,4,24,.55), 0 0 44px rgba(253,113,175,.28), inset 0 1px 0 rgba(255,255,255,.32);
}
.spx-dots { display:flex; gap:5px; margin-bottom:13px; }
.spx-dots i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.34); }
.spx-card b { display:block; height:13px; border-radius:7px; background:rgba(255,255,255,.62); margin-bottom:9px; }
.spx-card b.l2 { width:74%; height:11px; background:rgba(255,255,255,.36); }
.spx-card u { display:block; height:7px; border-radius:5px; background:rgba(255,255,255,.22); margin-bottom:7px; text-decoration:none; }
.spx-card u.w1 { width:92%; } .spx-card u.w2 { width:84%; } .spx-card u.w3 { width:60%; }
.spx-cta {
  position:absolute; left:16px; right:16px; bottom:18px; height:32px; border-radius:999px;
  background:rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.3);
}
.spx-b .spx-cta {
  background:linear-gradient(135deg,#fd71af,#ff9f43); border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 24px -8px rgba(253,113,175,.7);
  animation:spxCta 2.2s ease-in-out infinite;
}
@keyframes spxCta {
  0%,100% { transform:scale(1); box-shadow:0 10px 24px -8px rgba(253,113,175,.7); }
  50%     { transform:scale(1.05); box-shadow:0 14px 34px -8px rgba(253,113,175,.95); }
}
.spx-win {
  position:absolute; top:-16px; right:-12px; z-index:4;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, #d6ffe6, #2ee27a 55%, #0e8f47);
  box-shadow:0 0 34px rgba(46,226,122,.65), inset 0 2px 8px rgba(255,255,255,.5);
}
.spx-win svg { width:20px; height:20px; color:#fff; }
.spx-link { position:absolute; left:110px; top:150px; width:130px; height:100px; z-index:0; pointer-events:none; }
.spx-link path {
  fill:none; stroke:rgba(255,255,255,.55); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:6 8; animation:ssxFlow 1.5s linear infinite;
  filter:drop-shadow(0 0 5px rgba(253,113,175,.6));
}
.spx-gauge { position:absolute; left:-26px; top:24px; width:104px; height:104px; z-index:3; }
.spx-gauge svg { width:104px; height:104px; transform:rotate(-90deg); }
.spx-gauge .trk { fill:none; stroke:rgba(255,255,255,.16); stroke-width:9; }
.spx-gauge .val {
  fill:none; stroke:url(#spxGrad); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:264; stroke-dashoffset:66;
  animation:spxGauge 2.6s cubic-bezier(.22,1,.36,1) both; animation-delay:.5s;
  filter:drop-shadow(0 0 8px rgba(253,113,175,.65));
}
@keyframes spxGauge { from { stroke-dashoffset:264; } to { stroke-dashoffset:66; } }
.spx-cursor { position:absolute; right:34px; top:150px; z-index:5; animation:spxClick 3s ease-in-out infinite; }
.spx-cursor svg { width:26px; height:26px; filter:drop-shadow(0 4px 10px rgba(8,4,24,.6)); }
.spx-cursor::after {
  content:''; position:absolute; left:-7px; bottom:-7px; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(253,113,175,.8); opacity:0; animation:spxRipple 3s ease-out infinite;
}
@keyframes spxClick {
  0%, 55%, 100% { transform:translate(0,0); }
  62%, 76% { transform:translate(-26px,44px) scale(.92); }
}
@keyframes spxRipple {
  0%, 55%, 100% { transform:scale(.4); opacity:0; }
  62% { transform:scale(1); opacity:1; }
  78% { transform:scale(1.7); opacity:0; }
}
.spx .ih-orbit { right:-14px; bottom:8px; }
.spx-g1 { left:-4%; top:196px; }
.spx-g2 { right:-5%; top:342px; animation-delay:-2s; }
.spx-g3 { left:0%; bottom:16px; animation-delay:-4s; }

/* ---------- responsive ---------- */
@media (max-width:1180px) { .hvx { transform:scale(.92); transform-origin:center; } }
@media (max-width:1080px) {
  .hvx-wrap { min-height:0; margin-top:8px; }
  .ssx-stage, .smx-stage, .spx-stage { height:460px; transform:scale(.9); transform-origin:top center; }
  .hvx-glass b, .hvx-glass small { white-space:normal; }
}
@media (max-width:640px) {
  .hvx { max-width:420px; }
  .ssx-stage, .smx-stage, .spx-stage { height:430px; transform:scale(.8); transform-origin:top center; }
  .ssx-scene { margin-left:-176px; }
  .ssx-g1, .ssx-g3, .smx-g2, .spx-g1, .spx-g3 { left:0; }
  .ssx-g2, .smx-g1, .smx-g3, .spx-g2 { right:0; }
  .hvx-glass { padding:9px 12px; }
  .hvx-glass b { font-size:11px; }
  .hvx-glass small { font-size:9px; }
  .hvx .ih-orbit { width:128px; height:128px; }
  .hvx-live { font-size:9.5px; padding:7px 12px; }
}

/* ==================================================================
   AEX — LIVING ENGINE ORBIT (about.php hero + shared)
   ================================================================== */
.aex-stage { position:relative; height:470px; }
.aex-glow {
  position:absolute; left:50%; top:48%; width:440px; height:240px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(123,104,238,.38) 0%, rgba(78,155,250,.14) 52%, transparent 72%);
  filter:blur(8px); animation:hxFloatY 8s ease-in-out infinite;
}
.aex-core {
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:98px; height:98px; border-radius:30px; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6a56e8,#4e9bfa);
  box-shadow:0 30px 70px rgba(18,10,56,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation:hxFloatY 6s ease-in-out infinite;
}
.aex-core::before {
  content:''; position:absolute; inset:-15px; border-radius:36px;
  border:1.5px dashed rgba(255,255,255,.32); animation:rot360 26s linear infinite;
}
.aex-core svg { width:44px; height:44px; color:#fff; filter:drop-shadow(0 6px 16px rgba(10,6,30,.5)); }
.aex .orbit-ring { width:288px; height:288px; top:48%; left:50%; border-color:rgba(255,255,255,.30); }
.aex .orbit-ring.r2 { width:212px; height:212px; border-color:rgba(253,113,175,.24); }
.aex .orbit-spin { top:48%; left:50%; }
.aex { --r:144px; }
.aex-base {
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:300px; height:34px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(10,6,30,.55) 0%, transparent 68%);
}
.aex-g1 { left:-2%; top:66px; }
.aex-g2 { right:-4%; top:212px; animation-delay:-2s; }
.aex-g3 { left:-3%; bottom:74px; animation-delay:-4s; }

/* ih-core (services.php hub) — visible gradient orb */
.ih-hub3d .ih-core {
  width:64px; height:64px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6a56e8,#4e9bfa);
  box-shadow:0 22px 48px rgba(18,10,56,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation:hxFloatY 6s ease-in-out infinite;
}
.ih-hub3d .ih-core svg { width:30px; height:30px; color:#fff; }
.ih-hub3d .ih-core::before {
  content:''; position:absolute; inset:-11px; border-radius:26px;
  border:1.5px dashed rgba(255,255,255,.3); animation:rot360 24s linear infinite;
}

/* offer-band legibility over busy hero backgrounds (sales.php) */
.ihero .offer-band {
  background:rgba(12,8,32,.5); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:10px 12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ihero .offer-band .ob {
  background:rgba(23,23,28,.72); border:1px solid rgba(255,255,255,.18);
  color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* AEX responsive */
@media (max-width:1180px) { .aex { --r:128px; } .aex .orbit-ring { width:260px; height:260px; } .aex .orbit-ring.r2 { width:194px; height:194px; } }
@media (max-width:1080px) { .aex-stage { height:440px; transform:scale(.9); transform-origin:top center; } }
@media (max-width:640px) {
  .aex-stage { height:410px; transform:scale(.8); transform-origin:top center; }
  .aex { --r:112px; }
  .aex .orbit-ring { width:228px; height:228px; }
  .aex .orbit-ring.r2 { width:172px; height:172px; }
  .aex-g1, .aex-g3 { left:0; }
  .aex-g2 { right:0; }
  .ihero .offer-band .ob { font-size:12px; padding:8px 13px; }
}

/* ================= SERVICES PAGE ENHANCE v2 (sv2 / pl / cmp / pw) ================= */
/* --- accent variables on service cards --- */
.svc-big { --sa:#7b68ee; --sabg:#f1eefe; --sabr:#ddd7fb; }
.svc-big.sv2-st { --sa:#2f7ae5; --sabg:#eef4fe; --sabr:#d4e3fd; }
.svc-big.sv2-mk { --sa:#e08625; --sabg:#fff4e8; --sabr:#fbdfc0; }
.svc-big.sv2-pg { --sa:#e0509a; --sabg:#ffeef6; --sabr:#fcd3e6; }
.svc-big::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0; background:linear-gradient(90deg, var(--sa), color-mix(in srgb, var(--sa) 20%, transparent)); opacity:0; transition:opacity .3s ease; z-index:3; }
.svc-big:hover::before { opacity:1; }
.svc-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,23,28,0) 58%, rgba(23,23,28,.34)); pointer-events:none; }
.svc-wm { position:absolute; right:20px; bottom:2px; font-size:86px; font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--sa); opacity:.08; pointer-events:none; user-select:none; }
.svc-big .svc-mini li svg { color:var(--sa); }
.svc-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:15px; margin-top:16px; }
.svc-big-body .svc-more { margin-top:0; }
.svc-outcome { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; letter-spacing:.4px; color:var(--sa); background:var(--sabg); border:1px solid var(--sabr); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.svc-outcome::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sa); box-shadow:0 0 0 3px color-mix(in srgb, var(--sa) 18%, transparent); }

/* --- living pipeline (how they connect) --- */
.pl-wrap { position:relative; max-width:1040px; margin:0 auto; }
.pl-line { position:absolute; top:31px; left:9%; right:9%; height:2px; background:#e7e3f8; border-radius:2px; overflow:hidden; z-index:0; }
.pl-line i { position:absolute; top:0; left:-12%; width:12%; height:100%; background:linear-gradient(90deg, transparent, #6a56e8 45%, #4e9bfa 55%, transparent); animation:plPulse 3.4s linear infinite; }
@keyframes plPulse { from { left:-12%; } to { left:100%; } }
.pl-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pl-step { display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 16px 20px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pl-step:hover { transform:translateY(-5px); box-shadow:0 22px 44px -22px color-mix(in srgb, var(--sa) 45%, transparent); border-color:var(--sabr); }
.pl-n { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--sabg); color:var(--sa); box-shadow:inset 0 0 0 1px var(--sabr), 0 10px 22px -12px color-mix(in srgb, var(--sa) 55%, transparent); margin-bottom:14px; position:relative; }
.pl-n::after { content:""; position:absolute; inset:-6px; border-radius:22px; border:2px dashed color-mix(in srgb, var(--sa) 34%, transparent); opacity:0; transition:opacity .25s ease; }
.pl-step:hover .pl-n::after { opacity:1; }
.pl-n svg { width:26px; height:26px; }
.pl-step b { font-size:16.5px; letter-spacing:-.01em; margin-bottom:5px; }
.pl-step p { color:var(--muted); font-size:13px; margin-bottom:12px; }
.pl-tag { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--sa); background:var(--sabg); border-radius:999px; padding:4px 11px; margin-top:auto; }
.pl-loop { position:relative; height:44px; margin:6px 11% 0; border:2px dashed #ddd6f6; border-top:none; border-radius:0 0 26px 26px; }
.pl-loop-chip { position:absolute; left:50%; bottom:-15px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:12px; font-weight:800; color:#6a56e8; background:#fff; border:1px solid #e3ddf9; border-radius:999px; padding:7px 15px; box-shadow:0 10px 24px -14px rgba(106,86,232,.4); }
.pl-loop-chip svg { width:14px; height:14px; animation:rot360 6s linear infinite; }

/* --- comparison band (single vs full machine) --- */
.cmp-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:980px; margin:0 auto; }
.cmp-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 32px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.cmp-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.cmp-kicker { align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin-bottom:16px; }
.cmp-card h3 { font-size:24px; margin-bottom:7px; }
.cmp-sub { color:var(--muted); font-size:14.5px; margin-bottom:20px; }
.cmp-list { margin-bottom:26px; }
.cmp-list li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; color:var(--muted); font-size:14px; font-weight:600; }
.cmp-list li svg { width:16px; height:16px; color:#18a957; flex-shrink:0; margin-top:2px; }
.cmp-btn { margin-top:auto; align-self:flex-start; }
.cmp-card--hot { background:linear-gradient(145deg, #241d47 0%, #1c1a2e 55%, #14203a 100%); border-color:rgba(123,104,238,.5); box-shadow:0 30px 60px -30px rgba(30,20,80,.55); overflow:hidden; }
.cmp-card--hot::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(123,104,238,.35), transparent 65%); top:-110px; right:-80px; pointer-events:none; }
.cmp-card--hot::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(253,113,175,.22), transparent 65%); bottom:-90px; left:-60px; pointer-events:none; }
.cmp-card--hot:hover { box-shadow:0 36px 70px -30px rgba(30,20,80,.65); }
.cmp-flag { position:absolute; top:22px; right:22px; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#ffd9ec; background:rgba(253,113,175,.16); border:1px solid rgba(253,113,175,.45); border-radius:999px; padding:6px 12px; }
.cmp-flag svg { width:12px; height:12px; }
.cmp-card--hot h3 { color:#fff; }
.cmp-card--hot .cmp-sub { color:rgba(255,255,255,.66); }
.cmp-card--hot .cmp-list li { color:rgba(255,255,255,.82); }
.cmp-card--hot .cmp-list li svg { color:#5fe3a1; }
.btn-light { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:#1f1f24; border:1px solid #fff; border-radius:14px; padding:13px 26px; font-weight:800; font-size:14.5px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(255,255,255,.45); }

/* --- power-ups bento --- */
.pw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pw-tile { position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 24px 22px; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.pw-tile::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--sa), color-mix(in srgb, var(--sa) 15%, transparent)); opacity:0; transition:opacity .25s ease; }
.pw-tile:hover { transform:translateY(-6px); border-color:var(--sabr); box-shadow:0 26px 50px -24px color-mix(in srgb, var(--sa) 50%, transparent); }
.pw-tile:hover::before { opacity:1; }
.pw-tag { position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.pw-tag--hot { color:#7b68ee; background:#f1eefe; border-color:#ddd7fb; }
.pw-ic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--sabg); color:var(--sa); box-shadow:inset 0 0 0 1px var(--sabr); margin-bottom:16px; transition:transform .25s ease; }
.pw-tile:hover .pw-ic { transform:scale(1.08) rotate(-4deg); }
.pw-ic svg { width:24px; height:24px; }
.pw-tile h3 { font-size:17.5px; margin-bottom:7px; }
.pw-tile p { color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.pw-foot { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--sa); }
.pw-foot svg { width:14px; height:14px; transition:transform .2s ease; }
.pw-tile:hover .pw-foot svg { transform:translateX(4px); }

/* --- responsive --- */
@media (max-width:1080px) { .pw-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:960px) {
  .pl-row { grid-template-columns:1fr 1fr; gap:14px; }
  .pl-line { display:none; }
  .pl-loop { display:none; }
  .cmp-grid { grid-template-columns:1fr; max-width:560px; }
}
@media (max-width:620px) {
  .pw-grid { grid-template-columns:1fr; }
  .pl-row { grid-template-columns:1fr; }
  .svc-foot { flex-direction:row; flex-wrap:wrap; }
  .svc-wm { font-size:64px; }
  .cmp-card { padding:28px 22px 26px; }
  .cmp-flag { position:static; align-self:flex-start; margin:0 0 14px; }
  .cmp-card--hot { padding-top:26px; }
}