/* ============================================================
   ABSVE HOME (page 17) — cinematic treatments.
   Section roles are assigned at runtime by home.js via text anchors;
   all selectors degrade silently if a role is absent.
   ============================================================ */

/* ---------- 1. Customer-photo trust rail (existing marquee) ---------- */
body.absve-page-17 .marquee-wrapper {
  position: relative;
  padding: 18px 0 26px;
  background:
    radial-gradient(60% 120% at 50% 100%, var(--abs-amber-glow) 0%, transparent 60%),
    linear-gradient(180deg, #07080c 0%, var(--abs-obsidian) 100%);
}
/* Soft edge masks for a cinematic rail. */
body.absve-page-17 .marquee-wrapper::before,
body.absve-page-17 .marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 9vw, 160px);
  z-index: 2;
  pointer-events: none;
}
body.absve-page-17 .marquee-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, var(--abs-obsidian) 8%, transparent 100%);
}
body.absve-page-17 .marquee-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, var(--abs-obsidian) 8%, transparent 100%);
}
body.absve-page-17 .marquee-track img {
  border-radius: var(--abs-radius);
  box-shadow: var(--abs-shadow-1);
  filter: saturate(1.05) contrast(1.03);
  transition: transform var(--abs-dur) var(--abs-ease-out),
              box-shadow var(--abs-dur) var(--abs-ease-out);
}
/* Depth variance across the rail. */
body.absve-page-17 .marquee-track img:nth-child(3n)   { transform: scale(0.94) translateY(6px); }
body.absve-page-17 .marquee-track img:nth-child(3n+1) { transform: scale(1.02); }
@media (hover: hover) {
  body.absve-page-17 .marquee-track img:hover {
    transform: scale(1.07);
    box-shadow: var(--abs-card-glow-amber), var(--abs-shadow-2);
    z-index: 3;
  }
}

/* ---------- 2. Hero ---------- */
body.absve-page-17 [data-absve-role-section="hero"] {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(75, 59, 143, 0.35) 0%, transparent 55%),
    radial-gradient(70% 60% at 15% 85%, rgba(18, 48, 94, 0.5) 0%, transparent 60%),
    linear-gradient(175deg, var(--abs-obsidian) 0%, var(--abs-obsidian-2) 100%);
}
body.absve-page-17 [data-absve-role-section="hero"] h1,
body.absve-page-17 [data-absve-role-section="hero"] .elementor-heading-title {
  font-size: var(--abs-h1);
  font-weight: 800;
  background: linear-gradient(92deg, var(--abs-ink) 30%, var(--abs-blue-electric) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.absve-page-17 [data-absve-role-section="hero"] .elementor-widget-text-editor {
  max-width: 62ch;
}

/* ---------- 3. Pinned six-service sequence ---------- */
/* Original stacked layout keeps working; the pinned mode is layered on
   by home.js adding .absve-svc-pinned to the wrapper. */
.absve-svc-wrap { position: relative; }
.absve-svc-wrap .elementor-bg-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--abs-radius-l);
  isolation: isolate;
  transition: opacity var(--abs-dur-slow) var(--abs-ease-inout),
              transform var(--abs-dur-slow) var(--abs-ease-inout);
}
.absve-svc-wrap .elementor-bg-section::after {
  /* Colour-grade every service scene toward the palette. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(10, 12, 16, 0.72) 12%, rgba(18, 48, 94, 0.34) 60%, rgba(75, 59, 143, 0.30) 100%);
}
.absve-svc-wrap .elementor-bg-section[data-text-color="dark"]::after {
  background: linear-gradient(120deg, rgba(238, 243, 251, 0.55) 0%, rgba(221, 231, 246, 0.28) 100%);
}
.absve-svc-wrap .innternal-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: clamp(20px, 4vw, 48px);
}
.absve-svc-wrap .innternal-content h3 {
  font-size: var(--abs-h2);
  font-weight: 700;
}
.absve-svc-wrap .glow-btn-m a {
  display: inline-block;
  padding: 0.8em 1.9em;
  background: linear-gradient(92deg, var(--abs-blue) 0%, var(--abs-blue-electric) 100%);
  color: #fff;
  border-radius: var(--abs-radius-pill);
  font-weight: 600;
}

/* Pinned mode: sections become layered slides inside a viewport-height stage. */
.absve-svc-pinned { height: 100vh; }
.absve-svc-pinned .elementor-bg-section {
  position: absolute !important;
  inset: 4vh 0;
  margin: 0 auto;
  width: min(1180px, 92vw);
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(7vh) scale(0.97);
  pointer-events: none;
  z-index: 1;
}
.absve-svc-pinned .elementor-bg-section.absve-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}
.absve-svc-pinned .elementor-bg-section.absve-prev {
  opacity: 0;
  transform: translateY(-5vh) scale(0.985);
}
/* Progress dots for the pinned sequence (JS-injected, aria-hidden). */
.absve-svc-progress {
  position: absolute;
  right: max(2vw, 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.absve-svc-progress span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background var(--abs-dur-fast) linear, transform var(--abs-dur-fast) var(--abs-ease-out);
}
.absve-svc-progress span.absve-active {
  background: var(--abs-blue-electric);
  transform: scale(1.4);
}

/* Service motifs — abstract cues layered behind content, per slide index. */
.absve-motif {
  position: absolute;
  right: clamp(12px, 6%, 90px);
  top: 50%;
  width: clamp(160px, 24vw, 320px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}
.absve-motif-ring { /* approval ring */
  border-radius: 50%;
  border: 2px solid rgba(61, 139, 255, 0.5);
  box-shadow: 0 0 60px rgba(61, 139, 255, 0.25), inset 0 0 60px rgba(61, 139, 255, 0.12);
}
.absve-motif-orbit { /* marketplace orbit */
  border-radius: 50%;
  border: 1px dashed rgba(174, 182, 194, 0.5);
}
.absve-motif-scan { /* value scan */
  background: linear-gradient(180deg, transparent 46%, var(--abs-amber-glow) 50%, transparent 54%);
}
.absve-motif-merge { /* transfer paths */
  background:
    linear-gradient(60deg, transparent 48%, rgba(61, 139, 255, 0.5) 50%, transparent 52%),
    linear-gradient(-60deg, transparent 48%, rgba(75, 59, 143, 0.6) 50%, transparent 52%);
}
.absve-motif-compress { /* refinance line */
  background: repeating-linear-gradient(180deg, rgba(61, 139, 255, 0.35) 0 2px, transparent 2px 18px);
}
.absve-motif-core { /* equity core */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 139, 255, 0.4) 0%, transparent 65%);
  border: 1px solid rgba(61, 139, 255, 0.4);
}

/* ---------- 4. Core-service cards ---------- */
body.absve-page-17 [data-absve-role-section="core-services"] .absve-card-auto {
  border-radius: var(--abs-radius-l);
}

/* ---------- 5. Why Choose — blue-white clarity scene ---------- */
body.absve-page-17 [data-absve-role-section="why-choose"] {
  background:
    radial-gradient(80% 100% at 50% 0%, #ffffff 0%, var(--abs-cloud) 55%, var(--abs-cloud-2) 100%);
  border-radius: var(--abs-radius-l);
}

/* ---------- 6. End-to-end solutions — metallic scene ---------- */
body.absve-page-17 [data-absve-role-section="end-to-end"] {
  position: relative;
  background:
    linear-gradient(115deg, rgba(174, 182, 194, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--abs-obsidian-2) 0%, var(--abs-graphite) 140%);
  border-top: 1px solid var(--abs-line);
  border-bottom: 1px solid var(--abs-line);
}

/* ---------- 7. Numbered 01–04 sequence ---------- */
body.absve-page-17 [data-absve-role-section="numbered"] .elementor-widget-heading .elementor-heading-title {
  transition: color var(--abs-dur) var(--abs-ease-soft), text-shadow var(--abs-dur) var(--abs-ease-soft);
}
body.absve-page-17 .absve-num-big {
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(61, 139, 255, 0.55);
  text-shadow: 0 0 44px rgba(61, 139, 255, 0.18);
  font-weight: 800;
}

/* ---------- 8. FAQ — calm close ---------- */
body.absve-page-17 [data-absve-role-section="faq"] details,
body.absve-page-17 [data-absve-role-section="faq"] .e-n-accordion-item {
  border: 1px solid var(--abs-line);
  border-radius: var(--abs-radius);
  background: var(--abs-graphite);
  transition: border-color var(--abs-dur-fast) var(--abs-ease-soft),
              background-color var(--abs-dur-fast) var(--abs-ease-soft);
}
body.absve-page-17 [data-absve-role-section="faq"] details[open],
body.absve-page-17 [data-absve-role-section="faq"] .e-n-accordion-item[open] {
  border-color: var(--abs-line-strong);
  background: var(--abs-graphite-2);
}