/* ==========================================================================
   AD PHASE — Home services: interactive horizontal system (Aeline-inspired)
   3 cards · active card expands · pinned scroll-driven on desktop ·
   native horizontal scroller on touch. Brand tokens only.
   Defaults (no JS) = the touch/scroller layout with every card fully visible.
   ========================================================================== */
.svx{ --svx-h: clamp(580px, calc(100svh - var(--header-h) - 24px), 780px); margin-top: var(--sp-6); }
.svx{ --inv-bg: var(--brand); --inv-ink: #0D1712; --inv-soft: #2C3B10; --inv-line: rgba(13,23,18,.34); --inv-chip-bg: #0F1A14; --inv-chip-ink: var(--brand); }   /* active card = the brand's light green */
.svx-track{ position: relative; }
.svx-frame{
  position: relative; padding: 10px; border-radius: 34px; overflow: hidden; isolation: isolate;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.svx-row{
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.svx-row::-webkit-scrollbar{ display: none; }

/* ---------------------------------------------------------------- card */
.svx-card{
  --a: 1; --ia: 0; --h: 0; --px: 0; --py: 0; --mx: 50%; --my: 50%;
  --c-ink: var(--ink); --c-soft: var(--ink-soft);
  position: relative; flex: 0 0 min(84vw, 440px); min-height: 560px; scroll-snap-align: center;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(20px, 2vw, 30px); border-radius: 26px; overflow: hidden; contain: layout paint;
  background: var(--bg-elevated); border: 1px solid var(--line); color: var(--c-ink);
  outline: none; cursor: default;
}
.svx-card.is-active{ --c-ink: var(--inv-ink); --c-soft: var(--inv-soft); background: var(--inv-bg); border-color: transparent; }
.svx-card.is-active .svx-ico{ background: var(--inv-chip-bg); color: var(--inv-chip-ink); }
.svx-card.is-active .svx-num{ -webkit-text-stroke-color: var(--inv-line); }
@supports (color: color-mix(in srgb, red 50%, blue)){
  .svx-card{
    --c-ink:  color-mix(in srgb, var(--inv-ink)  calc(var(--ia) * 100%), var(--ink));
    --c-soft: color-mix(in srgb, var(--inv-soft) calc(var(--ia) * 100%), var(--ink-soft));
    background: color-mix(in srgb, var(--inv-bg) calc(var(--ia) * 100%), var(--bg-elevated));
    border-color: color-mix(in srgb, transparent calc(var(--ia) * 100%), var(--line));
  }
  .svx-card .svx-ico{ background: color-mix(in srgb, var(--inv-chip-bg) calc(var(--ia) * 100%), var(--brand)); color: color-mix(in srgb, var(--inv-chip-ink) calc(var(--ia) * 100%), var(--on-brand)); }
  .svx-card .svx-num{ -webkit-text-stroke-color: color-mix(in srgb, var(--inv-line) calc(var(--ia) * 100%), var(--line-strong)); }
}
.svx-card::before{                     /* active edge glow (opacity only → cheap) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(13,23,18,.16);
  opacity: var(--a);
}
.svx-card::after{                      /* cursor spotlight */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 11%, transparent), transparent 62%);
  opacity: var(--h);
}
.svx-card:focus-visible{ box-shadow: 0 0 0 3px var(--brand); }

.svx-top{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.svx-ico{ width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.svx-ico svg{ width: 25px; height: 25px; }
.svx-card.is-active .svx-ico svg{ animation: svxIco .9s var(--ease-out); }
@keyframes svxIco{ 0%{ transform: rotate(-14deg) scale(.82); } 55%{ transform: rotate(6deg) scale(1.12); } 100%{ transform: none; } }
.svx-num{ font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: transparent; -webkit-text-stroke: 1.2px var(--line-strong); direction: ltr; }

.svx-txt{ position: relative; z-index: 2; }
.svx-txt h3{
  margin: 0 0 .3em; font-size: var(--fs-card); line-height: 1.12; letter-spacing: -.01em;
  color: var(--c-ink); transform-origin: right center; transform: scale(calc(.84 + .16 * var(--a))); will-change: transform;
}
.svx-txt p{ margin: 0; max-width: 44ch; color: var(--c-soft); line-height: 1.85; font-size: 0.95rem; opacity: calc(.55 + .45 * var(--a)); }
.svx-more{
  display: inline-flex; align-items: center; gap: .6em; margin-top: var(--sp-4); padding: .7em 1.2em; border-radius: 999px;
  font-weight: 800; font-size: 0.85rem; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-strong); background: var(--glass-bg-2);
  opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 10px), 0);
  transition: background .3s, color .3s, border-color .3s;
}
.svx-card.is-active .svx-more{ background: var(--inv-chip-bg); color: var(--inv-chip-ink); border-color: var(--inv-chip-bg); }
.svx-card.is-active .svx-more:hover{ background: #EEF1EA; color: #0D1712; border-color: #EEF1EA; }
.svx-more svg{ width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.svx-more:hover{ background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.svx-more:hover svg{ transform: translateX(-4px); }
.svx-more:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; }

/* ----------------------------------------------------- visual (screen) */
.svx-vis{
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 220px; border-radius: 20px; overflow: hidden;
  container-type: inline-size; direction: ltr;
  background: radial-gradient(70% 60% at 62% 28%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%), linear-gradient(160deg, #123128, #0A120E);
  border: 1px solid rgba(238,241,234,.10); color: #EEF1EA;
  opacity: calc(.45 + .55 * var(--a)); transform: scale(calc(.93 + .07 * var(--a))); will-change: transform, opacity;
}
.svx-vis > i.grid{ position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(238,241,234,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(238,241,234,.07) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(75% 75% at 50% 45%, #000, transparent 85%); mask-image: radial-gradient(75% 75% at 50% 45%, #000, transparent 85%); }
.v{                                     /* a parallax layer */
  position: absolute; --d: 1; font-size: clamp(11.5px, 2.8cqw, 14.5px); line-height: 1.5; direction: rtl;
  transform: translate3d(calc(var(--px) * var(--d) * -11px), calc(var(--py) * var(--d) * -9px + (1 - var(--a)) * var(--d) * 26px), 0);
  will-change: transform;
}
.svx-vis .glass{ background: rgba(14,26,20,.72); border: 1px solid rgba(238,241,234,.14); border-radius: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.v small{ display: block; opacity: .66; font-size: .9em; }
.v b{ font-weight: 700; }
.lime{ color: var(--brand); }

/* --- SEO ------------------------------------------------------------ */
.v-chart{ --d: .45; inset-inline-start: 6%; top: 8%; width: 80%; height: 58%; padding: 4% 5%; display: flex; flex-direction: column; }
.v-chart .hd{ display: flex; justify-content: space-between; align-items: baseline; }
.v-chart .big{ font-family: var(--font-display); font-weight: 800; font-size: 1.9em; letter-spacing: -.03em; direction: ltr; color: var(--brand); }
.v-chart svg{ flex: 1; width: 100%; min-height: 0; margin-top: 2%; overflow: visible; }
.v-chart .ln{ fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.7s var(--ease-out) .15s; }
.v-chart .ar{ fill: url(#svxAr); opacity: 0; transition: opacity 1.2s ease .6s; }
.v-chart .gd{ stroke: rgba(238,241,234,.09); stroke-width: 1; }
.svx-card.is-active .v-chart .ln{ stroke-dashoffset: 0; } .svx-card.is-active .v-chart .ar{ opacity: 1; }
.v-serp{ --d: 1; inset-inline-end: 4%; bottom: 6%; width: 64%; padding: 3.5%; display: grid; gap: .5em; }
.v-serp .r{ display: flex; align-items: center; gap: .6em; padding: .45em .6em; border-radius: 10px; background: rgba(238,241,234,.06); transition: transform .9s var(--ease-out), background .5s; }
.v-serp .r i{ width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .9em; background: rgba(238,241,234,.12); flex-shrink: 0; }
.v-serp .r i::before{ content: attr(data-r); }
.svx-card.is-active .v-serp .r i::before{ content: attr(data-a); }
.v-serp .r span{ flex: 1; height: .5em; border-radius: 9px; background: rgba(238,241,234,.22); }
.v-serp .r.hit{ background: color-mix(in srgb, var(--brand) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .v-serp .r.hit i{ background: var(--brand); color: #0E1A10; }
.svx-card.is-active .v-serp .r.hit{ transform: translateY(-6.2em); } .svx-card.is-active .v-serp .r.o1, .svx-card.is-active .v-serp .r.o2{ transform: translateY(3.1em); }
.v-chip{ --d: 1.7; padding: .5em .9em; border-radius: 999px; font-weight: 800; white-space: nowrap; display: flex; align-items: center; gap: .5em; }
.v-chip::before{ content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.v-chip.c1{ inset-inline-end: 8%; top: 5%; }

/* --- Website --------------------------------------------------------- */
.v-browser{ --d: .5; inset-inline-start: 5%; top: 7%; width: 80%; height: 66%; display: flex; flex-direction: column; overflow: hidden; }
.v-browser .bar{ display: flex; gap: .4em; padding: .6em .8em; background: rgba(238,241,234,.06); direction: ltr; }
.v-browser .bar i{ width: .65em; height: .65em; border-radius: 50%; background: rgba(238,241,234,.35); }
.v-browser .bd{ flex: 1; padding: 5%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6%; align-items: center; }
.v-browser .ln{ height: .65em; border-radius: 9px; background: rgba(238,241,234,.2); margin-bottom: .6em; } .v-browser .ln.w{ width: 78%; } .v-browser .ln.s{ width: 52%; background: rgba(238,241,234,.12); }
.v-browser .btn{ display: inline-block; margin-top: .4em; padding: .55em 1.4em; border-radius: 999px; background: var(--brand); color: #0E1A10; font-weight: 800; transition: transform .6s var(--ease-out); }
.svx-card.is-active .v-browser .btn{ transform: scale(1.08); }
.v-browser .im{ aspect-ratio: 1; border-radius: 12px; background: linear-gradient(150deg, #1B4A41, #0D1712); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); position: relative; overflow: hidden; }
.v-browser .im::after{ content: ""; position: absolute; inset: 22% 24%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 85%, transparent), color-mix(in srgb, var(--brand) 0%, transparent) 70%); }
.v-phone{ --d: 1.2; inset-inline-end: 5%; bottom: 6%; width: 27%; aspect-ratio: 9/17; padding: 7% 6%; display: flex; flex-direction: column; gap: 6%; border-radius: 18px; }
.v-phone i{ display: block; border-radius: 6px; background: rgba(238,241,234,.16); height: 12%; } .v-phone i:first-child{ height: 34%; background: linear-gradient(150deg, #1B4A41, #123128); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); } .v-phone i.hl{ background: var(--brand); height: 11%; }
.v-pal{ --d: 1.6; inset-inline-start: 7%; bottom: 7%; padding: .6em .8em; display: flex; align-items: center; gap: .6em; }
.v-pal u{ display: block; width: 1.5em; height: 1.5em; border-radius: 50%; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(238,241,234,.2); }
.v-cur{ --d: 2; inset-inline-start: 46%; top: 44%; width: 2.1em; height: 2.1em; color: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.v-cur svg{ width: 100%; height: 100%; }
.svx-card.is-active .v-cur svg{ animation: svxCur 2.8s var(--ease-in-out) .3s infinite alternate; }
@keyframes svxCur{ from{ transform: translate(-1.6em,-.6em); } to{ transform: translate(3.4em, 3.2em); } }

/* --- Social ---------------------------------------------------------- */
.v-cal{ --d: .45; inset-inline-start: 6%; top: 8%; width: 58%; padding: 4%; }
.v-cal .cells{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4%; margin-top: .7em; }
.v-cal .cells i{ aspect-ratio: 1; border-radius: 28%; background: rgba(238,241,234,.1); transition: background .5s, transform .6s var(--ease-out); }
.v-cal .cells i.on{ background: color-mix(in srgb, var(--brand) 55%, transparent); } .v-cal .cells i.hi{ background: var(--brand); }
.svx-card.is-active .v-cal .cells i.hi{ transform: scale(1.22); }
.v-post{ --d: 1; inset-inline-end: 5%; top: 14%; width: 44%; padding: 3.5%; }
.v-post .md{ aspect-ratio: 1.15; border-radius: 10px; background: linear-gradient(145deg, #1B4A41, #0D1712); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); position: relative; overflow: hidden; }
.v-post .md::after{ content: ""; position: absolute; inset-inline-end: 12%; bottom: 14%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 80%, transparent), color-mix(in srgb, var(--brand) 0%, transparent) 70%); }
.v-post .ft{ display: flex; align-items: center; justify-content: space-between; margin-top: .55em; }
.v-post .ft span{ display: flex; gap: .35em; } .v-post .ft i{ width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(238,241,234,.22); } .v-post .ft i.h{ background: var(--brand); }
.v-post .cp{ height: .5em; margin-top: .55em; border-radius: 9px; background: rgba(238,241,234,.2); width: 80%; }
.v-post2{ --d: 1.5; inset-inline-start: 30%; bottom: 7%; width: 34%; padding: 3%; transform-origin: center; }
.v-post2 .md{ aspect-ratio: 1.6; border-radius: 9px; background: linear-gradient(145deg, #123128, #0A120E); border: 1px solid rgba(238,241,234,.14); }
.v-ring{ --d: 1.8; inset-inline-end: 7%; bottom: 8%; display: flex; align-items: center; gap: .7em; padding: .6em .9em; }
.v-ring svg{ width: 2.6em; height: 2.6em; transform: rotate(-90deg); }
.v-ring circle{ fill: none; stroke-width: 4; } .v-ring .t{ stroke: rgba(238,241,234,.14); } .v-ring .p{ stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.svx-card.is-active .v-ring .p{ stroke-dashoffset: 28; }

/* ----------------------------------------------------------- progress nav */
.svx-nav{ display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.svx-pill{
  position: relative; display: inline-flex; align-items: center; gap: .6em; padding: .6em 1.1em; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--ink-faint); background: transparent; border: 1px solid var(--line);
  transition: color .3s, border-color .3s, background .3s;
}
.svx-pill b{ font-family: var(--font-display); font-size: .8em; direction: ltr; }
.svx-pill.is-on{ color: var(--ink); border-color: var(--brand-line); background: var(--brand-wash); }
.svx-pill:hover{ color: var(--ink); }
.svx-pill:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; }
.svx-bar{ flex: 0 1 220px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.svx-bar i{ display: block; height: 100%; background: var(--brand); transform-origin: right; transform: scaleX(var(--p, .33)); }

/* ----------------------------------------------- PINNED desktop system */
.svx--pin .svx-track{ height: calc(var(--svx-h) + 2 * 85vh); }
.svx--pin .svx-sticky{ position: sticky; top: calc(var(--header-h) + 8px); height: var(--svx-h); display: flex; flex-direction: column; }
.svx--pin .svx-frame{ flex: 1 1 auto; min-height: 0; display: flex; }
.svx--pin .svx-row{ flex: 1 1 auto; min-width: 0; overflow: hidden; scroll-snap-type: none; padding: 0; }
.svx--pin .svx-card{ flex: var(--g, 1) 1 0; min-width: 0; min-height: 0; cursor: pointer; scroll-snap-align: none; }
.svx--pin .svx-card.is-active{ cursor: default; }
.svx--pin .svx-card:not(.is-active) .svx-more{ pointer-events: none; }
.svx--pin .svx-txt h3{ font-size: var(--fs-card); }

/* reduced motion: three equal, fully visible cards, no pinning */
.svx--static .svx-card{ --a: 1; --ia: 0; }
@media (min-width: 1024px){ .svx--static .svx-row{ overflow: visible; } .svx--static .svx-card{ flex: 1 1 0; min-height: 600px; } .svx--static .svx-nav{ display: none; } }

@media (max-width: 700px){
  .svx-frame{ border-radius: 26px; padding: 8px; }
  .svx-row{ gap: 8px; }
  .svx-card{ min-height: 520px; border-radius: 22px; }
  .svx-bar{ display: none; }
  .svx-pill{ padding: .55em .9em; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce){
  .v, .svx-vis, .svx-txt h3{ transform: none; } .v-chart .ln{ stroke-dashoffset: 0; transition: none; } .v-chart .ar{ opacity: 1; }
  .svx-card.is-active .svx-ico svg, .svx-card.is-active .v-cur svg{ animation: none; }
}