/* =====================================================================
   PROXODA — brand override layer
   Loaded AFTER main.css. Rebrands the template's lime-green accent to the
   Proxoda blue→purple gradient identity. Edit brand colors in one place here.
   ===================================================================== */

:root {
  --pxd-blue:   #2F6BFF;
  --pxd-indigo: #6A3CF5;
  --pxd-purple: #9A30E0;
  --pxd-grad:   linear-gradient(135deg, #2F6BFF 0%, #6A3CF5 52%, #9A30E0 100%);
  --pxd-grad-h: linear-gradient(135deg, #2459db 0%, #5a2fe0 52%, #8420c4 100%);

  /* swap the template's single accent variable → brand indigo.
     This instantly recolours every accent text, border and small fill. */
  --rr-color-theme-primary: #6A3CF5;
}

/* safety net: never allow a stray horizontal scrollbar (the "glitched bottom line").
   overflow-x: clip keeps vertical scroll + ScrollSmoother working, unlike hidden. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---------- Buttons → gradient pill, white label ---------- */
.rr-primary-btn,
.rr-white-btn {
  background-image: var(--pxd-grad) !important;
  background-color: var(--pxd-indigo) !important;
  background-origin: border-box !important;   /* gradient covers the 2px border so no off-colour edge ring */
  background-clip: border-box !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -12px rgba(106, 60, 245, 0.65);
}
.rr-primary-btn i,
.rr-white-btn i { color: #fff !important; }
.rr-primary-btn:focus,
.rr-white-btn:focus { color: #fff !important; }
/* hover sweep stays, just brand-tinted */
.rr-primary-btn:after,  .rr-primary-btn:before,
.rr-white-btn:after,    .rr-white-btn:before {
  background-color: #160d33 !important;
}
.rr-primary-btn:hover,
.rr-white-btn:hover { color: #fff !important; }

/* ---------- Full accent bands ---------- */
.service-section-2,
.about-service,
.appointment-2,
.sidebar-widget.blog-cta {
  background-image: var(--pxd-grad) !important;
}

/* ---------- Icon tiles → gradient fill + white glyph ---------- */
.about-items .about-item .icon,
.service-item .icon,
.service-item-2 .icon,
.cta-wrap .cta-content .cta-contact .icon,
.appointment-content .appointment-contact li .icon,
.project-details-items .project-details-item .icon,
.feature-item .icon,
.footer-widget .address-list li .icon,
.contact-content .contact-list .list-item .icon {
  background-image: var(--pxd-grad) !important;
}
/* dark PNG line-icons → render white on the gradient */
.about-items .about-item .icon img,
.service-item .icon img,
.service-item-2 .icon img,
.about-service .icon img,
.cta-wrap .cta-content .cta-contact .icon img,
.appointment-content .appointment-contact li .icon img,
.project-details-items .project-details-item .icon img,
.feature-item .icon img,
.footer-widget .address-list li .icon img {
  filter: brightness(0) invert(1);
}

/* ---------- Text that sits on an accent surface → white ---------- */
.project-item .project-content .number,
.project-card .project-content .project-btn,
.pagination-wrap li .active,
.footer-widget .footer-form .submit,
.sidebar-widget .search-form .search-btn,
.about-img-5 .about-counter .counter-text,
.sidebar-widget.blog-cta .title,
.sidebar-widget.blog-cta p { color: #fff !important; }

/* gradient text accent helper (used on key hero words) */
.pxd-grad-text {
  background: var(--pxd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Fiverr icon (not in FontAwesome) via CSS mask ---------- */
.fa-fiverr,
i.fa-fiverr {
  font-style: normal;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url(../img/icon/fiverr.svg) center / contain no-repeat;
  mask: url(../img/icon/fiverr.svg) center / contain no-repeat;
}
.fa-fiverr::before { content: ""; }

/* =====================================================================
   PROXODA single-page additions
   ===================================================================== */

/* ---- Hero: distinguish the two CTAs (primary gradient vs ghost) ---- */
.slider-btn-wrap { display: flex; flex-wrap: wrap; gap: 16px; }
.slider-btn-wrap .rr-white-btn {
  background-image: none !important;
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
}
.slider-btn-wrap .rr-white-btn:hover { border-color: #fff !important; }

/* ---- About / founder ---- */
.about-content .pxd-highlights {
  list-style: none; margin: 0 0 38px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.about-content .pxd-highlights li {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--rr-color-heading-primary);
}
.about-content .pxd-highlights li i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-image: var(--pxd-grad); color: #fff; font-size: 11px;
}
.pxd-founder { position: relative; min-height: 480px; border-radius: 24px;
  overflow: hidden; background-image: var(--pxd-grad); }
.pxd-founder .img-overlay { display: none; }
.pxd-founder-card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  color: #fff;
}
.pxd-founder-card .pxd-founder-mark {
  width: 104px; height: 104px; border-radius: 26px; background: rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.pxd-founder-card .pxd-founder-mark img { width: 76px; height: 76px; }
.pxd-founder-card .pxd-founder-name { font-family: var(--rr-ff-heading); font-size: 40px; font-weight: 700; line-height: 1; }
.pxd-founder-card .pxd-founder-role { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* ---- FAQ accordion polish ---- */
.pxd-faq .accordion { --bs-accordion-bg: transparent; }
.pxd-faq .accordion-item {
  background: var(--rr-color-common-white); border: 1px solid rgba(11,11,20,.1);
  border-radius: 16px !important; margin-bottom: 16px; overflow: hidden;
}
.pxd-faq .accordion-button {
  font-family: var(--rr-ff-heading); font-size: 18px; font-weight: 600;
  color: var(--rr-color-heading-primary); background: transparent; padding: 22px 26px;
  box-shadow: none;
}
.pxd-faq .accordion-button:not(.collapsed) { color: var(--pxd-indigo); background: transparent; }
.pxd-faq .accordion-button:focus { box-shadow: none; border: 0; }
.pxd-faq .accordion-button::after {
  width: 1.1rem; height: 1.1rem; background-size: 1.1rem;
}
.pxd-faq .accordion-body { padding: 0 26px 24px; }
.pxd-faq .accordion-body p { color: var(--rr-color-text-body); margin: 0; }

/* ---- Contact form note ---- */
.pxd-form-note { margin-top: 18px; font-weight: 600; min-height: 1.2em; }
.pxd-form-note.is-ok { color: #28c840; }
.pxd-form-note.is-err { color: #ff5f57; }

/* ---- Visibility safety: never leave headings invisible ---- */
.section-title, [data-text-animation], [data-animation] { opacity: 1; }

/* ---- Responsive niceties ---- */
@media (max-width: 991px) {
  .about-content .pxd-highlights { grid-template-columns: 1fr; }
  .pxd-founder { min-height: 360px; margin-bottom: 40px; }
  .pt-140 { padding-top: 90px; }
  .pb-140 { padding-bottom: 90px; }
}
@media (max-width: 575px) {
  .slider-btn-wrap .rr-white-btn, .slider-btn-wrap .rr-primary-btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   PROXODA — PURPLE + WHITE THEME
   Turns the template's black/dark surfaces into a light, purple-accented
   identity. Light theme; the one deliberately dark moment is the footer,
   and it is deep purple (never neutral black). OKLCH tokens, no #000/#fff.
   ===================================================================== */
:root {
  --pxd-ink:        oklch(0.235 0.03 285);
  --pxd-body:       oklch(0.455 0.025 286);
  --pxd-page:       oklch(0.994 0.003 285);
  --pxd-wash:       oklch(0.967 0.016 295);
  --pxd-surface:    oklch(0.978 0.009 288);
  --pxd-line:       oklch(0.235 0.03 285 / 0.10);
  --pxd-line-2:     oklch(0.235 0.03 285 / 0.16);
  --pxd-violet-ink: oklch(0.305 0.115 295);
  --pxd-violet-deep:oklch(0.235 0.10 290);
}

body { background-color: var(--pxd-page); }

/* ---------- HERO → light ---------- */
.slider-section { background-color: var(--pxd-page) !important; }
.slider-section .section-heading.white-content .section-title,
.slider-section .section-heading.white-content .sub-heading,
.slider-section .slider-content p { color: var(--pxd-ink) !important; }
.slider-section .slider-content p { color: var(--pxd-body) !important; }
.slider-btn-wrap .rr-white-btn {
  border-color: var(--pxd-line-2) !important;
  color: var(--pxd-ink) !important;
}
.slider-btn-wrap .rr-white-btn:hover { border-color: var(--pxd-indigo) !important; color: var(--pxd-indigo) !important; }
.nunca-slider .slider-arrow .slider-nav {
  background-color: #fff !important;
  border: 1px solid var(--pxd-line-2) !important;
  color: var(--pxd-ink) !important;
  box-shadow: 0 10px 30px -18px rgba(106,60,245,.5);
}

/* Hero is a single static slide (the 2-slide carousel clipped mid-screen on
   transition; the two messages were near-duplicates). Nav arrows hidden. */
.nunca-slider .slider-arrow { display: none !important; }

/* Centre the hero vertically. The template used top-heavy padding (340/116),
   leaving the content high with empty space below. Balanced padding centres the
   text column AND aligns it with the orb (which is anchored at top:50%). */
.slider-section .nunca-slider { padding-top: 170px; padding-bottom: 170px; }
@media (max-width: 1399px) { .slider-section .nunca-slider { padding-top: 150px; padding-bottom: 150px; } }
@media (max-width: 1170px) { .slider-section .nunca-slider { padding-top: 120px; padding-bottom: 44px; } }
@media (max-width: 767px)  { .slider-section .nunca-slider { padding-top: 104px; padding-bottom: 32px; } }

/* ---------- HERO art: floating capability cluster (replaced the 3D model) ---------- */
.slider-section .slider-img-wrap.pxd-hero-art {
  position: absolute; top: 50%; left: 52%; right: auto; transform: translateY(-50%);
  width: 470px; max-width: 38vw; height: 470px; max-height: 68vh;
  z-index: 0; pointer-events: none;
}
/* soft gradient core + slow orbiting ring */
.pxd-hero-core {
  position: absolute; inset: 0; margin: auto; width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(106,60,245,.42), rgba(47,107,255,.22) 46%, rgba(154,48,224,0) 72%);
  filter: blur(6px); animation: pxd-core 9s ease-in-out infinite;
}
/* brand mark floating in the centre of the orb */
.pxd-hero-mark {
  position: absolute; inset: 0; margin: auto; z-index: 0;
  width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 20px 32px rgba(106, 60, 245, .5));
  animation: pxd-float 6s ease-in-out infinite;
}
.pxd-hero-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; }
@keyframes pxd-core { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }

/* glass capability chips floating around the core */
.pxd-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--pxd-line); border-radius: 100px; padding: 11px 18px;
  font-weight: 600; font-size: 15px; color: var(--pxd-ink);
  box-shadow: 0 22px 46px -26px rgba(106,60,245,.55);
  animation: pxd-float 6s ease-in-out infinite;
}
.pxd-chip i { font-size: 14px; color: var(--pxd-indigo); }
.pxd-chip-1 { top: 7%;   right: 33%; animation-delay: 0s; }
.pxd-chip-2 { top: 21%;  right: 1%;  animation-delay: .8s; }
.pxd-chip-3 { bottom: 21%; right: 37%; animation-delay: 1.5s; }
.pxd-chip-4 { bottom: 5%; right: 5%;  animation-delay: .4s; }
@keyframes pxd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@media (prefers-reduced-motion: reduce) {
  .pxd-chip, .pxd-hero-core, .pxd-hero-mark { animation: none !important; }
}
@media (max-width: 1399px) {
  .slider-section .slider-img-wrap.pxd-hero-art { width: 390px; left: 56%; max-width: 36vw; }
  .pxd-chip { font-size: 14px; padding: 10px 15px; }
}
/* tablet + mobile: headline first, capability chips as a tidy band BELOW the text */
@media (max-width: 1170px) {
  .slider-section { display: flex; flex-direction: column; }
  .slider-section > .container { order: 1; }
  .slider-section .slider-img-wrap.pxd-hero-art {
    order: 2;
    display: flex !important; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px;
    position: static !important; transform: none !important;
    width: 100% !important; max-width: 560px; height: auto !important; max-height: none;
    margin: 4px auto 0; padding: 0 16px;
  }
  .pxd-hero-core, .pxd-hero-mark { display: none; }
  .pxd-chip {
    position: static !important; animation: none !important;
    font-size: 13.5px; padding: 9px 14px; box-shadow: 0 14px 30px -22px rgba(106,60,245,.5);
    /* drop the live blur on mobile — it repaints every scroll frame and causes jank */
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: #fff;
  }
}

/* ---------- SERVICES → light ---------- */
.service-wrap { background: var(--pxd-page) !important; backdrop-filter: none !important; }
.service-section .bg-text { color: oklch(0.55 0.16 296 / 0.05) !important; }
.service-section .section-heading.white-content .section-title,
.service-section .section-heading.white-content .sub-heading { color: var(--pxd-ink) !important; }
.service-item {
  background: #fff; border: 1px solid var(--pxd-line);
  border-radius: 22px; padding: 38px 32px;
  box-shadow: 0 24px 50px -38px rgba(106,60,245,.5);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-item:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 34px 70px -38px rgba(106,60,245,.65); }
.service-item .content.white-content .title a { color: var(--pxd-ink) !important; }
.service-item .content.white-content p { color: var(--pxd-body) !important; }
.service-item .content .service-btn { color: var(--pxd-indigo) !important; }

/* ---------- CTA → the single drenched gradient band ---------- */
.cta-wrap {
  background-color: transparent !important;
  background-image: var(--pxd-grad) !important;
  border: 0 !important;
  box-shadow: 0 40px 90px -40px rgba(106,60,245,.6);
}
.cta-wrap .overlay, .cta-wrap .cta-img { display: none !important; }
.cta-content .section-heading .section-title,
.cta-content .section-heading .sub-heading { color: #fff !important; }
.cta-content .cta-contact .content span { color: rgba(255,255,255,0.78) !important; }
.cta-content .cta-contact .content a { color: #fff !important; }
.cta-section .cta-wrap .cta-content .cta-contact .icon {
  background-image: none !important;
  background-color: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.25);
}
.cta-content .cta-contact .icon img { filter: brightness(0) invert(1); }

/* ---------- FAQ → clean white, no purple half-panel ---------- */
.faq-section { border-bottom: 0 !important; background-color: var(--pxd-page) !important; }
.faq-section:before { display: none !important; }

/* ---------- CONTACT → light wash ---------- */
.appointment-section { background-image: none !important; background-color: var(--pxd-wash) !important; }
.appointment-content.white-content .section-heading .section-title,
.appointment-content.white-content .section-heading .sub-heading { color: var(--pxd-ink) !important; }
.appointment-content.white-content > p,
.appointment-content .appointment-contact li .content .title { color: var(--pxd-ink) !important; }
.appointment-content .appointment-contact li .content span,
.appointment-content .appointment-contact li .content .contact-number a { color: var(--pxd-body) !important; }
.appointment-content .appointment-contact li .icon {
  background-image: var(--pxd-grad) !important; color: #fff !important;
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.appointment-form { box-shadow: 0 30px 70px -42px rgba(106,60,245,.45); border: 1px solid var(--pxd-line); }

/* ---------- FOOTER → deep purple (the one dark = purple) ---------- */
.footer-section {
  background-color: transparent !important;
  background-image: linear-gradient(165deg, var(--pxd-violet-ink), var(--pxd-violet-deep)) !important;
}

/* ---------- Founder photo ---------- */
.pxd-founder { position: relative; }
.pxd-founder-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 24px; z-index: 2;
}
.pxd-founder-photo.is-missing { display: none; }
.pxd-founder-badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 100px;
  background: oklch(0.235 0.03 285 / 0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 14px; font-weight: 500;
}
.pxd-founder-badge img { width: 26px; height: 26px; }
.pxd-founder-badge b { font-family: var(--rr-ff-heading); font-weight: 700; margin-right: 2px; }
.pxd-founder-photo.is-missing ~ .pxd-founder-badge { display: none; }

/* =====================================================================
   PROXODA — round 3 fixes (FAQ centering, equal cards, stats band)
   ===================================================================== */

/* ---- RELIABILITY: pin all scroll-reveal content to its final position ----
   The template's GSAP/SplitType reveals leave headings half-revealed and
   paragraphs/bullets overlapping when a section is reached via in-page nav
   (ScrollTrigger doesn't re-fire on programmatic scroll). Forcing the end
   state (CSS !important beats GSAP's inline styles) keeps text correctly
   placed and readable. Marquees, 3D model, floats and hovers still animate. */
[data-text-animation], [data-animation],
.fade-top, .fade-wrapper,
[data-text-animation] .char, [data-text-animation] .word, [data-text-animation] .line,
[data-animation] .char, [data-animation] .word, [data-animation] .line,
.text-anim .char, .text-anim .word, .text-anim .line {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ---- FAQ: center the accordion (template right-shifts it to 790px) ---- */
.pxd-faq .faq-accordion {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pxd-faq .section-heading { text-align: center; }

/* ---- Services: equal-height cards, CTA pinned to bottom ---- */
.service-section .row.fade-wrapper { align-items: stretch; }
.service-item { height: 100%; display: flex; flex-direction: column; }
.service-item .content { display: flex; flex-direction: column; flex: 1 1 auto; }
.service-item .content .service-btn { margin-top: auto; }

/* =====================================================================
   PROXODA — "How it works" journey (merges the old stats band + process
   into ONE section): a connected 4-step timeline with a gradient progress
   line + numbered gradient nodes, closed by a 3-stat proof strip.
   ===================================================================== */
.pxd-journey-head { margin-bottom: 72px; max-width: 640px; }

/* connected step timeline */
.pxd-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
}
/* gradient progress line running through the node centers */
.pxd-steps::before {
  content: ""; position: absolute; top: 29px; left: 12.5%; right: 12.5%; height: 2px;
  background-image: var(--pxd-grad); border-radius: 2px; opacity: .9;
}
.pxd-step { position: relative; text-align: center; }
.pxd-step-node {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: 26px;
  background-image: var(--pxd-grad); color: #fff;
  font-family: var(--rr-ff-heading); font-weight: 700; font-size: 19px;
  border: 4px solid var(--pxd-page);
  box-shadow: 0 16px 34px -14px rgba(106, 60, 245, .65);
}
.pxd-step-title { font-family: var(--rr-ff-heading); font-weight: 700; color: var(--pxd-ink); font-size: 22px; margin-bottom: 10px; }
.pxd-step p { color: var(--pxd-body); margin: 0 auto; max-width: 30ch; }

@media (max-width: 991px) {
  .pxd-journey-head { margin-bottom: 48px; }
  .pxd-steps { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }
  .pxd-steps::before { display: none; }
}
@media (max-width: 575px) {
  .pxd-steps { grid-template-columns: 1fr; gap: 38px; }
  .pxd-step-title { font-size: 20px; }
}


/* =====================================================================
   PROXODA — round 4: contact list polish + drop the gimmicky cursor
   ===================================================================== */

/* ---- Remove the laggy custom cursor dot (reads as a stray element) ---- */
.mt-cursor, .cross-cursor { display: none !important; }
html, body { cursor: auto !important; }
a, button, label, .slider-nav, .swiper-nav, .accordion-button, .sidebar-trigger,
.rr-primary-btn, .rr-white-btn, .service-btn,
input[type="submit"], .submit-btn button { cursor: pointer !important; }
input, textarea, select { cursor: text !important; }

/* ---- Contact channel list: aligned icons, rhythm, clean hierarchy ---- */
.appointment-content .appointment-contact {
  list-style: none; margin: 36px 0 0; padding: 0;
}
.appointment-content .appointment-contact li {
  display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 20px;
}
.appointment-content .appointment-contact li:not(:last-of-type) {
  margin-bottom: 20px;
}
.appointment-content .appointment-contact li .icon {
  width: 56px !important; height: 56px !important; border-radius: 16px !important;
  background-image: var(--pxd-grad) !important; color: #fff !important;
  font-size: 22px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -16px rgba(106, 60, 245, 0.6);
}
.appointment-content .appointment-contact li .icon i { line-height: 1; }
.appointment-content .appointment-contact li .content { min-width: 0; }
.appointment-content .appointment-contact li .content .title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--pxd-body) !important; opacity: 0.85; margin-bottom: 6px;
}
.appointment-content .appointment-contact li .content a,
.appointment-content .appointment-contact li .content span {
  font-family: var(--rr-ff-heading); font-weight: 600; font-size: 17px;
  color: var(--pxd-ink) !important; line-height: 1.35; word-break: break-word;
}
.appointment-content .appointment-contact li .content a {
  transition: color 0.25s ease;
}
.appointment-content .appointment-contact li .content a:hover { color: var(--pxd-indigo) !important; }
/* small phones: shrink long values (e.g. the Instagram handle) so they don't break mid-word */
@media (max-width: 575px) {
  .appointment-content .appointment-contact li .content a,
  .appointment-content .appointment-contact li .content span { font-size: 14px; overflow-wrap: anywhere; word-break: normal; }
}

/* Work section lead paragraph */
.pxd-work-lead { color: var(--pxd-body); max-width: 600px; margin: 20px auto 0; }

/* (Project description text intentionally removed from the spiral.) */

/* =====================================================================
   PROXODA — projects: alternating feature rows (replaces the bento/spiral)
   Both real screenshots shown FULLY, no browser chrome. Staggered cascade,
   scroll-reveal + hover parallax. Desktop split row, single column on mobile.
   ===================================================================== */
.pxd-feats { display: flex; flex-direction: column; gap: 130px; margin-top: 80px; }
.pxd-feat {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: 60px; align-items: center;
}
.pxd-feat--reverse .pxd-feat-info { order: 2; }
.pxd-feat--reverse .pxd-feat-media { order: 1; }

/* info column */
.pxd-feat-info { max-width: 440px; }
.pxd-feat--reverse .pxd-feat-info { margin-left: auto; }
.pxd-feat-tag {
  display: inline-flex; align-items: center;
  background: var(--pxd-wash); color: var(--pxd-violet-ink);
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 100px;
}
.pxd-feat-name {
  font-family: var(--rr-ff-heading); font-weight: 700; color: var(--pxd-ink);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.01em;
  margin: 20px 0 8px;
}
.pxd-feat-visit {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 10px;
  background-image: var(--pxd-grad); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(106, 60, 245, .6);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.pxd-feat-visit i { font-size: 12px; transition: transform .3s ease; }
.pxd-feat-visit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 26px 54px -20px rgba(106, 60, 245, .7); }
.pxd-feat-visit:hover i { transform: translate(3px, -3px); }
.pxd-feat-visit:focus-visible { outline: 2px solid var(--pxd-indigo); outline-offset: 4px; }

/* media column: two landscape shots, staggered, both fully visible */
.pxd-feat-media { display: flex; flex-direction: column; gap: 28px; }
.pxd-shot { margin: 0; width: 90%; }
.pxd-shot:nth-child(1) { align-self: flex-start; }
.pxd-shot:nth-child(2) { align-self: flex-end; text-align: right; }
.pxd-shot img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  border-radius: 18px; border: 1px solid var(--pxd-line);
  box-shadow: 0 34px 74px -40px rgba(106, 60, 245, .55);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.pxd-shot figcaption { margin-top: 11px; font-size: 13px; font-weight: 500; color: var(--pxd-body); }

/* single-image project (e.g. a square app/marketing graphic) */
.pxd-feat--single .pxd-feat-media { display: block; }
.pxd-feat--single .pxd-shot { width: 100%; max-width: 460px; margin: 0 auto; align-self: center; text-align: center; }
.pxd-feat--single .pxd-shot img { aspect-ratio: 1 / 1; object-position: center; }

/* graceful fallback while a real screenshot hasn't been dropped in yet */
.pxd-shot.is-missing img { opacity: 0; }
.pxd-shot.is-missing { position: relative; }
.pxd-shot.is-missing::before {
  content: "Preview coming soon"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--pxd-grad); border-radius: 18px;
  color: #fff; font-family: var(--rr-ff-heading); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  box-shadow: 0 34px 74px -40px rgba(106, 60, 245, .55);
}

/* scroll-reveal (staggered) */
@media (prefers-reduced-motion: no-preference) {
  .pxd-feat .pxd-feat-info,
  .pxd-feat .pxd-shot {
    opacity: 0; transform: translateY(34px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
  }
  .pxd-feat.in .pxd-feat-info { opacity: 1; transform: none; }
  .pxd-feat.in .pxd-shot:nth-child(1) { opacity: 1; transform: none; transition-delay: .1s; }
  .pxd-feat.in .pxd-shot:nth-child(2) { opacity: 1; transform: none; transition-delay: .22s; }
}

/* hover parallax (placed after reveal so it wins on :hover) */
.pxd-feat:hover .pxd-shot:nth-child(1) { transform: translateY(-8px); }
.pxd-feat:hover .pxd-shot:nth-child(2) { transform: translateY(8px); }
.pxd-feat:hover .pxd-shot img { box-shadow: 0 44px 90px -38px rgba(106, 60, 245, .62); }
.pxd-feat:hover .pxd-shot:hover img { transform: scale(1.02); }

/* closing CTA */
.pxd-feat-soon {
  margin-top: 110px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.pxd-feat-soon p { color: var(--pxd-body); font-size: 18px; margin: 0; }

@media (max-width: 991px) {
  .pxd-feats { gap: 72px; margin-top: 52px; }
  .pxd-feat { grid-template-columns: 1fr; gap: 30px; }
  .pxd-feat-info, .pxd-feat--reverse .pxd-feat-info { order: 0; margin-left: 0; max-width: none; }
  .pxd-feat-media, .pxd-feat--reverse .pxd-feat-media { order: 1; }
  .pxd-shot, .pxd-shot:nth-child(1), .pxd-shot:nth-child(2) { width: 100%; align-self: stretch; text-align: left; }
  .pxd-feat-soon { margin-top: 64px; }
}
@media (max-width: 575px) {
  .pxd-feat-name { font-size: 30px; }
  .pxd-feat-visit { padding: 13px 22px; }
}

/* =====================================================================
   PROXODA — off-canvas sidebar (hamburger panel) polish
   Logo removed from markup (already in the page header). No black tiles:
   contact + social icons are brand gradient with white glyphs, aligned.
   ===================================================================== */
.sidebar-area { padding: 60px 38px; border-left: 1px solid var(--pxd-line); }
.side-menu-content { width: 100%; }

/* close button */
.sidebar-trigger.close { color: var(--pxd-body); top: 34px; right: 34px; }
.sidebar-trigger.close:hover { color: var(--pxd-indigo); }

/* headings + about */
.side-menu-header h3 { font-family: var(--rr-ff-heading); font-weight: 700; color: var(--pxd-ink); font-size: 24px; line-height: 1.1; }
.side-menu-about { margin: 4px 0 40px; }
.side-menu-about p { color: var(--pxd-body); line-height: 1.6; margin: 18px 0 26px; }

/* contact list: gradient icon tiles, white glyph, aligned rows */
.side-menu-list { margin: 22px 0 0; }
.side-menu-list li { display: flex; align-items: center; font-weight: 600; }
.side-menu-list li:not(:last-of-type) { margin-bottom: 16px; }
.side-menu-list li i {
  flex: 0 0 40px; width: 40px; height: 40px; line-height: 40px; text-align: center;
  background-color: transparent; background-image: var(--pxd-grad); color: #fff;
  font-size: 15px; border-radius: 11px;
  box-shadow: 0 12px 26px -16px rgba(106, 60, 245, .6);
}
.side-menu-list li p,
.side-menu-list li a { padding-left: 14px; margin: 0; color: var(--pxd-ink); font-weight: 600; overflow-wrap: anywhere; }
.side-menu-list li a:hover { color: var(--pxd-indigo); }

/* social: brand gradient tiles (were black), matched to the contact icons */
.side-menu-social { margin-top: 38px; display: flex; gap: 12px; padding: 0; }
.side-menu-social li { display: inline-flex; }
.side-menu-social li:not(:last-of-type) { margin-right: 0; }
.side-menu-social li a {
  width: 46px; height: 46px; border-radius: 13px;
  background-color: transparent; background-image: var(--pxd-grad); color: #fff; font-size: 18px;
  box-shadow: 0 14px 30px -16px rgba(106, 60, 245, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.side-menu-social li a:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px -16px rgba(106, 60, 245, .72); }

/* responsive: narrower panel + slightly smaller tiles on phones */
@media (max-width: 575px) {
  .sidebar-area { width: min(86vw, 360px); padding: 56px 24px; }
  .side-menu-list li i { flex-basis: 38px; width: 38px; height: 38px; line-height: 38px; }
  .side-menu-social li a { width: 44px; height: 44px; }
}

/* =====================================================================
   PROXODA — accessibility: visible keyboard focus on every interactive
   element (the template suppressed focus styling). Mouse clicks don't
   trigger :focus-visible, so this only shows for keyboard users.
   ===================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.accordion-button:focus-visible,
.sidebar-trigger:focus-visible,
.slider-nav:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pxd-indigo) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

/* =====================================================================
   PROXODA — kill the template's section-divider lines. The template adds
   `border-bottom: 3px solid` to .faq-section / .appointment-2 and a 45%
   colored `::before` block to .faq-section, which render as visible lines
   between sections. Remove all of them so section transitions are seamless.
   ===================================================================== */
.slider-section, .about-section, .service-section, .pxd-work, .pxd-journey,
.faq-section, .faq-section-2, .appointment-section, .appointment-2, .footer-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.faq-section::before { display: none !important; }
/* hero ambient glow PNG can show a faint horizontal edge on some screens */
.slider-section .shape { display: none !important; }