/* Admin-uploaded icon/photo containment. The vendor theme (main.css) never
   constrains these <img> dimensions because its own bundled icons were all
   pre-sized to match the design (~50-70px). Now that these fields accept any
   admin-uploaded image with no dimension limit (only a file-size cap), an
   oversized upload renders at its natural size with nothing to contain it —
   breaking the circular badge layout and overflowing into the next section.
   Fixes a real bug: uploading a large tech-badge icon overflowed past its
   296px circle into the FAQ section below it. */
.achievement-section .achievement-area .achievement-icon-items .icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.testimonial-card .testimonial-top .author-info img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Override font-display for the Font Awesome Free fonts. The vendor file
   assets/css/all.min.css declares them as font-display:block (icons stay
   invisible up to 3s while the font loads); redeclaring the exact same
   family/weight/src here with font-display:swap — loaded after all.min.css —
   wins for that font-face signature. Family names must match the v6 Free
   build ("Font Awesome 6 Free" / "Font Awesome 6 Brands"), otherwise this is
   a silent no-op. */
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    url(../webfonts/fa-brands-400.woff2) format("woff2"),
    url(../webfonts/fa-brands-400.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src:
    url(../webfonts/fa-solid-900.woff2) format("woff2"),
    url(../webfonts/fa-solid-900.ttf) format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    url(../webfonts/fa-regular-400.woff2) format("woff2"),
    url(../webfonts/fa-regular-400.ttf) format("truetype");
}

/* Custom GSAP-driven headline for the hero section: a lime "spotlight" pill
   scans back and forth across the first line, revealing a dark-colored copy
   of the same text underneath, while the second line stays static.

   Specificity note: legacy vendor rule `.hero-1 .hero-content h1 span` (in
   assets/css/main.css) tints every <span> inside the hero h1 lime by
   default and outranks a single class selector. The colors below are
   !important on purpose to win against that vendor rule. */

.hero-scan-line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-scan-line__base {
  color: var(--white, #fff) !important;
}

.hero-scan-pill {
  position: absolute;
  top: calc(50% - 0.62em);
  left: 0;
  height: 1.24em;
  width: clamp(130px, 19vw, 230px);
  border-radius: 999px;
  background: var(--theme, #eaff48);
  overflow: hidden;
  display: block;
  pointer-events: none;
  will-change: transform;
}

.hero-scan-pill__text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 0.06em;
  color: var(--black, #000) !important;
  white-space: nowrap;
  will-change: transform;
}

.hero-scan-static {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  color: var(--white, #fff) !important;
}

.hero-scan-sparkle {
  display: inline-block;
  color: var(--theme, #eaff48) !important;
  font-size: 0.62em;
  animation: hero-scan-sparkle-pulse 1.8s ease-in-out infinite;
}

@keyframes hero-scan-sparkle-pulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(25deg);
    opacity: 0.7;
  }
}

@media (max-width: 767px) {
  .hero-scan-pill {
    width: clamp(96px, 34vw, 170px);
  }

  /* The scanned line can't wrap (the pill animation needs one line), so on
     phones it has to shrink to fit instead: "MAKE YOUR PRODUCT" in uppercase
     Unbounded is ~0.9em per character. Without this the line ran past the
     viewport and body{overflow-x:hidden} silently clipped it. */
  .hero-1 .hero-content h1 {
    font-size: clamp(20px, 6.2vw, 40px);
  }
}

/* Page heroes (Home, About, Services, Products, Contact, Blog, pages).
   The vendor .hero-1 rule only sets padding-top at ≥ 1400px, so on wide
   screens the hero ended flush against its subtitle; and the subtitle sat
   only 20px under the giant heading. */
.hero-section.hero-1 {
  padding-bottom: 110px;
}

.hero-1 .hero-content .hero-text {
  margin-top: 32px;
  line-height: 1.6;
}

@media (max-width: 1399px) {
  .hero-section.hero-1 {
    padding-bottom: 90px;
  }

  .hero-1 .hero-content .hero-text {
    margin-top: 26px;
  }
}

@media (max-width: 991px) {
  .hero-section.hero-1 {
    padding-bottom: 70px;
  }
}

@media (max-width: 575px) {
  .hero-section.hero-1 {
    padding-bottom: 56px;
  }

  .hero-1 .hero-content .hero-text {
    margin-top: 20px;
  }
}

/* Card grids on Services ("What We Build") and About ("How We Work").
   Vendor CSS only sizes the artwork below 1600px, so on wide screens the
   larger images overflowed their card; cards also took their own content
   height, giving a ragged row. Here: equal-height cards, one fixed artwork
   box (image contained inside it), and an odd last row centred. */
.core-features-section .row {
  justify-content: center;
}

.core-features-section .row > [class*="col-"] {
  display: flex;
}

.core-features-section .feature-card-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding: 32px 30px 36px;
}

.core-features-section .feature-card-item .core-feature-image {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-features-section .feature-card-item .core-feature-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.core-features-section .feature-card-item .feature-content {
  margin-top: 32px;
}

.core-features-section .feature-card-item .feature-content h3 {
  font-size: clamp(22px, 1.55vw, 28px);
  line-height: 1.2;
}

.core-features-section .feature-card-item .feature-content p {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .core-features-section .feature-card-item {
    padding: 24px 20px 28px;
  }

  .core-features-section .feature-card-item .core-feature-image {
    height: 200px;
  }
}

/* Home "Why Choose Us" — the "15+ Solutions Tailored" card. Its collage
   is pinned bottom-right at full size inside a fixed 370px card; on
   narrower cards it slid underneath the heading and paragraph. Below
   1200px the card grows and the collage sits under the text instead. */
@media (max-width: 1199px) {
  .choose-us-wrapper .choose-us-item-box.item-box-tailored {
    height: auto;
    overflow: hidden;
    padding-bottom: 0;
  }

  .choose-us-wrapper .choose-us-item-box.item-box-tailored .content-4 {
    margin-top: 0;
    max-width: none;
  }

  .choose-us-wrapper .choose-us-item-box.item-box-tailored .image-4 {
    position: relative;
    margin: 24px -32px 0 0;
    height: 190px;
    overflow: hidden;
    text-align: right;
  }

  .choose-us-wrapper .choose-us-item-box.item-box-tailored .image-4 img {
    width: 100%;
    max-width: 520px;
    max-height: 240px;
    object-fit: cover;
    object-position: left top;
    border-radius: 16px 0 0 0;
  }
}

/* "Custom Software, Built Around You" card: heading and paragraph sit side
   by side above a collage pinned to the bottom. On narrower cards the
   paragraph wrapped down into the collage — stack them instead and let the
   collage take the lower part of the card. */
@media (max-width: 1199px) {
  .choose-us-wrapper .choose-us-item-box .content-1 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .choose-us-wrapper .choose-us-item-box .content-1 h3,
  .choose-us-wrapper .choose-us-item-box .content-1 .text-1 {
    max-width: 320px;
  }

  .choose-us-wrapper .choose-us-item-box .image-1 {
    left: 0;
    max-height: 52%;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
  }

  .choose-us-wrapper .choose-us-item-box .image-1 img {
    object-fit: cover;
    object-position: center top;
  }
}

/* Home "Why Choose Us" at 992–1199px: the desktop 3-per-row bento squeezed
   its fixed-height (370px) cards so text was clipped or spilled into the
   next row. Use the two-per-row layout that already works on tablets. */
@media (min-width: 992px) and (max-width: 1199px) {
  .choose-us-wrapper .row > [class*="col-lg-"] {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* FAQ: the open/close arrow sits absolutely at the right of the question
   pill; long questions ran underneath it. Reserve room for it. */
.faq-items .accordion .accordion-button {
  padding-right: 58px;
}

@media (max-width: 575px) {
  .faq-items .accordion .accordion-button {
    padding-right: 44px;
  }
}

/* Home feature bar: on phones the five items stacked each centred on its
   own, so the check icons zig-zagged. Left-align them in a centred column. */
@media (max-width: 767px) {
  .features-item .list {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .features-item .list li {
    font-size: 17px;
  }
}

/* main.css hides EVERY <br> below 992px (meant for the hand-placed breaks
   in big headings). That also stripped line breaks out of admin-written
   content — blog posts, product descriptions, policy pages — so e.g. FAQ
   answers ran straight on from their question. Keep them in .prose. */
@media (max-width: 991px) {
  .prose br {
    display: revert;
  }
}

/* The original white footer, bottom row (copyright | links | tagline).
   Below 1200px those three were squeezed side by side: the copyright and
   tagline wrapped into narrow columns and "Terms and Conditions" dropped
   onto a stray second line. Stack them, centred, instead. */
@media (max-width: 1199px) {
  .support-cta-section .support-cta-copyright {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }

  .support-cta-section .footer-links {
    justify-content: center;
    gap: 10px 22px;
  }
}

/* Check-mark lists (Services "How we work" / process, About story): when an
   item wrapped, its second line ran back under the icon. Hang the text off
   the icon instead, and top-align the two columns. */
.list-items {
  align-items: flex-start !important;
}

.list-items .list li {
  display: flex;
  align-items: flex-start;
}

.list-items .list li i {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Contact page — self-contained styling built on the site's CSS custom
   properties (defined in main.css :root): --theme, --black, --white, --border,
   --bg. Matches the dark reference layout: hero heading, scrolling marquee band,
   then a two-column info + form section. */

.contact-page {
  background-color: var(--black);
}

/* ---- Main two-column section ---- */
.contact-main {
  padding: 100px 0 120px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Left column */
.contact-info__label {
  color: var(--white);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  margin: 0;
}

.contact-info__email {
  display: inline-block;
  color: var(--theme);
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  /* Sized so the full address fits its half-width column on one line
     (at 5.5vw it broke mid-word: "hello@voidlaye / r.in"). */
  font-size: clamp(22px, 3.3vw, 48px);
  line-height: 1.05;
  overflow-wrap: anywhere;
  margin: 6px 0 40px;
  transition: opacity 0.2s ease;
}

.contact-info__email:hover {
  opacity: 0.85;
  color: var(--theme);
}

.contact-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  padding: 30px;
  margin-bottom: 24px;
}

.contact-card__row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--theme);
  font-size: 20px;
}

.contact-card__kicker {
  color: #ffffff80;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.contact-card__title {
  color: var(--white);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
}

.contact-card__text {
  color: #ffffff99;
  font-size: 15px;
  margin: 0;
}

.contact-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #ffffffcc;
  font-size: 15px;
}

.contact-steps__num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 12px;
}

/* Right column — form card */
.contact-form-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  padding: 40px;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.contact-field {
  display: flex;
  flex-direction: column;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-field label,
.contact-field__label {
  color: #ffffff99;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.contact-field input,
.contact-field textarea {
  background: #ffffff0a;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--white);
  font-size: 15px;
  font-family: "DM Sans", sans-serif;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #ffffff4d;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--theme);
  background: #ffffff14;
}

.contact-field textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-budget {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-pill {
  border: 1px solid var(--border);
  background: transparent;
  color: #ffffffcc;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-pill:hover {
  border-color: #ffffff66;
}

.contact-pill.is-active {
  background: var(--theme);
  border-color: var(--theme);
  color: var(--black);
  font-weight: 600;
}

.contact-submit {
  width: 100%;
  margin-top: 30px;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 100px;
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Unbounded", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(234, 255, 72, 0.12);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.contact-field__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #ffffff66;
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 55px rgba(234, 255, 72, 0.22);
}

/* Server-rendered feedback (flash message + per-field validation errors) */
.contact-alert {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.contact-alert--success {
  border-color: var(--theme);
  background: rgba(234, 255, 72, 0.1);
  color: var(--theme);
}

.contact-alert--error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  color: #ff9b9b;
}

.contact-field__error {
  color: #ff9b9b;
  font-size: 13px;
  margin-top: 8px;
}

/* Honeypot — visually hidden but still focusable-by-bot */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-recaptcha {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-form__note {
  text-align: center;
  color: #ffffff66;
  font-size: 13px;
  margin: 18px 0 0;
}

.contact-form__note a {
  color: #ffffff99;
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 575px) {
  .contact-form-card {
    padding: 26px 20px;
  }
  .contact-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Accessibility ---- */
.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 10000;
  background: var(--theme, #eaff48);
  color: var(--black, #000);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
  color: var(--black, #000);
}

.contact-pill:focus-visible,
.contact-submit:focus-visible,
.footer-links a:focus-visible {
  outline: 2px solid var(--theme, #eaff48);
  outline-offset: 3px;
}

.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Visitors who asked their OS for reduced motion get no decorative motion:
   marquees, floating shapes, WOW fade-ins and the hero pill scan. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .wow {
    visibility: visible !important;
  }
}

/* ---- Footer contact + navigation ----
   The footer (.support-cta-section) is WHITE. blog.css styled .footer-links
   as #ffffff99 — white-on-white, so the Blog/Privacy/Terms/email links were
   invisible on the live site. Dark text here, with the brand purple (lime is
   unreadable on white) for hover. */
.support-cta-section .footer-links a {
  color: #000000b3;
}

.support-cta-section .footer-links a:hover {
  color: var(--theme2, #dd00ff);
}

.support-cta-section .footer-links a:focus-visible {
  outline-color: var(--theme2, #dd00ff);
}

.footer-nap {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 24px;
  color: #000000b3;
  font-size: 15px;
}

.footer-nap a {
  color: inherit;
}

.footer-nap a:hover {
  color: var(--theme2, #dd00ff);
}

.footer-nap i {
  color: var(--theme2, #dd00ff);
  margin-right: 8px;
}

/* ---- Cookie consent (only rendered when GA / Meta Pixel are configured) ---- */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 560px;
  margin-left: auto;
  background: #111;
  color: #ffffffcc;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner a {
  color: var(--theme, #eaff48);
  text-decoration: underline;
}

.consent-banner__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.consent-banner__actions button {
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #ffffff4d;
  background: transparent;
  color: #fff;
}

.consent-banner__actions button[data-consent="granted"] {
  background: var(--theme, #eaff48);
  border-color: var(--theme, #eaff48);
  color: #000;
}

/* The giant "VOIDLAYER" wordmark is decoration, so it's a <p> rather than an
   <h2> (it was polluting the heading outline); give it the heading font the
   vendor h2 rule used to supply. */
.feature-big-text p.name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  line-height: 110%;
  margin: 0;
}

/* ---- Error pages (resources/views/errors/public.blade.php) ----
   Full-height, centred hero with a giant outlined status code behind it. */
.error-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  background-color: #07060c;
  color: #fff;
}

.error-hero__digits {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: clamp(100px, 34vw, 520px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234, 255, 72, 0.14);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.error-hero .container {
  position: relative;
  width: 100%;
}

.error-hero__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.error-hero__code {
  display: inline-block;
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--theme, #eaff48);
  border: 1px solid rgba(234, 255, 72, 0.35);
  border-radius: 100px;
  padding: 7px 18px;
  margin: 0 0 26px;
}

.error-hero__title {
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
}

.error-hero__text {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: #dfe0e4;
  max-width: 620px;
  margin: 0 auto 36px;
}

.error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
}

.error-hero__ghost {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
  border-radius: 100px;
  border: 1px solid #ffffff4d;
  color: #fff;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.error-hero__ghost:hover,
.error-hero__ghost:focus-visible {
  border-color: var(--theme, #eaff48);
  color: var(--theme, #eaff48);
  outline: none;
}

.error-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid #ffffff1a;
}

.error-hero__links-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff80;
  margin-right: 6px;
}

.error-hero__links a {
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid #ffffff26;
  background: #ffffff0a;
  color: #ffffffcc;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.error-hero__links a:hover,
.error-hero__links a:focus-visible {
  background: var(--theme, #eaff48);
  border-color: var(--theme, #eaff48);
  color: #000;
  outline: none;
}

@media (max-width: 575px) {
  .error-hero {
    padding: 120px 0 72px;
  }

  .error-hero__actions .theme-btn,
  .error-hero__ghost {
    width: 100%;
    justify-content: center;
  }

  .error-hero__links-label {
    width: 100%;
    margin: 0 0 4px;
  }
}

/* Marquees and floating shapes are far wider than the screen. ScrollSmoother
   normally clips them (its wrapper is overflow:hidden), but with smooth
   scrolling off (reduced motion) only body{overflow-x:hidden} was left, which
   iOS Safari ignores — the page could be dragged sideways. `clip` (unlike
   `hidden`) doesn't create a scroll container, so sticky/fixed children are
   unaffected. */
#smooth-wrapper {
  overflow-x: clip;
}

/* Phone number link on the dark contact card was inheriting the theme's
   default (black) link colour — black on near-black. */
.contact-card .contact-info__phone {
  color: var(--white, #fff);
}

.contact-card .contact-info__phone:hover {
  color: var(--theme, #eaff48);
}

/* ---- "VOIDLAYER" wordmark ----
   The vendor sizes (320/280/260px) made the word ~1.3× wider than the
   screen, so "ER" was cut off; the gradient also faded to #141411 — black on
   the black section. "VOIDLAYER" in Unbounded 700 is ~7.25em wide, so 12.4vw
   fills ~90% of any viewport, and the gradient now stays in the brand
   colours end to end. */
.feature-big-text p.name {
  font-size: min(12.4vw, 300px);
  white-space: nowrap;
  padding-top: clamp(40px, 6vw, 120px);
  background: linear-gradient(90deg, #74ba1e 0%, #dcfb49 45%, #eaff48 60%, #b84dff 85%, #dd00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Lime "Custom Software / ERP & HRMS / AI Automation" band ----
   Vendor speed was 5s per ~3000px loop (~600px/s) — too fast to read. */
.marquee-2 {
  --duration: 40s;
}

/* ---- Tech badges (sections/landing/feature-highlights) ----
   Replaces the theme's overlapping circles (alternating heights, clipped by
   their neighbours) with an evenly spaced, slow marquee of matching cards. */
.tech-strip {
  background: #f5f6f7;
  padding: 70px 0 42px;
  overflow: hidden;
}

.tech-strip__label {
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #00000080;
  margin: 0 0 30px;
}

.tech-strip__viewport {
  overflow: hidden;
  padding: 6px 0 28px; /* room for the cards' shadow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tech-strip__track {
  display: flex;
  width: max-content;
  animation: tech-strip-scroll var(--tech-duration, 40s) linear infinite;
}

.tech-strip__viewport:hover .tech-strip__track {
  animation-play-state: paused;
}

.tech-strip__list {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  margin: 0;
  list-style: none;
}

@keyframes tech-strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tech-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 300px;
  padding: 18px 26px 18px 18px;
  background: #fff;
  border: 1px solid #e4e5ea;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(16, 16, 32, 0.05);
}

.tech-card__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
}

.tech-card__icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.tech-card__title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

.tech-card__subtitle {
  font-size: 14px;
  color: #5f6068;
  margin: 4px 0 0;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .tech-strip {
    padding: 50px 0;
  }
  .tech-card {
    min-width: 250px;
  }
}

/* Reduced motion: no scrolling — show every badge once, wrapped. */
@media (prefers-reduced-motion: reduce) {
  .tech-strip__track {
    animation: none;
    width: auto;
    justify-content: center;
  }
  .tech-strip__list {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
  }
  .tech-strip__list[aria-hidden="true"] {
    display: none;
  }
  .tech-strip__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---- Site-wide container ----
   The theme mixed two widths (1560px for most sections, 1296px for a few)
   with only 12px side padding, so at laptop widths content ran almost to the
   screen edge and sections didn't line up with each other. One width and a
   real gutter for every section; full-bleed backgrounds/marquees are outside
   .container and unaffected. `.page-wrapper .container` out-specifies both
   the bare and the per-section vendor rules. */
.page-wrapper .container {
  max-width: 1360px;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

/* ---- Studio video (Services) ----
   The reel plays inside the laptop's screen. Screen rectangle measured on
   studio-laptop.webp (1300×743): x 209, y 26, 883×521 px. */
.studio-player {
  position: relative;
  z-index: 99;
  max-width: 1100px;
  margin: 30px auto 0;
}

.studio-player__frame {
  display: block;
  width: 100%;
  height: auto;
}

.studio-player__screen {
  position: absolute;
  /* 1px bleed on every side so no sliver of the artwork's own screen
     shows through sub-pixel rounding at the edges. */
  left: calc(16.077% - 1px);
  top: calc(3.499% - 1px);
  width: calc(67.923% + 2px);
  height: calc(70.121% + 2px);
  overflow: hidden;
  background: #000;
}

.studio-player__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.studio-player__controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.studio-player__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease;
}

.studio-player__btn:hover,
.studio-player__btn:focus-visible {
  background: var(--theme, #eaff48);
  color: #000;
  outline: none;
}

/* Big play button: shown whenever the video is paused (e.g. reduced motion,
   or the visitor paused it). */
.studio-player__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  border: 0;
  background: var(--theme, #eaff48);
  color: #000;
  font-size: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 12px rgba(234, 255, 72, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-player__play i {
  margin-left: 5px;
}

.studio-player.is-playing .studio-player__play {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

@media (max-width: 575px) {
  .studio-player__btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .studio-player__controls {
    right: 8px;
    bottom: 8px;
  }
  .studio-player__play {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    font-size: 22px;
  }
}

/* ---- Admin-managed pages (pages/page.blade.php: privacy, terms, …) ----
   Same hero as About/Services/Contact (.hero-section.hero-1, which also
   makes the title white — the old .policy-hero left it the theme's default
   black, invisible on the dark background), plus a contents list, reading
   progress and scroll reveal. */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10001;
  pointer-events: none;
}

.page-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--theme, #eaff48), var(--theme2, #dd00ff));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.page-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  color: #ffffffb3;
  font-size: 15px;
  margin-bottom: 18px;
}

.page-crumbs a {
  color: inherit;
}

.page-crumbs a:hover {
  color: var(--theme, #eaff48);
}

.page-hero .hero-content h1 {
  font-size: clamp(40px, 6vw, 80px);
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 26px;
  color: #dfe0e4;
  font-size: 15px;
}

.page-meta i {
  color: var(--theme, #eaff48);
  margin-right: 8px;
}

.page-body {
  background: var(--black, #000);
  padding: 90px 0 110px;
}

.page-layout {
  max-width: 820px;
  margin: 0 auto;
}

.page-layout.has-toc {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* Native sticky when smooth scrolling is off (reduced motion); with
   ScrollSmoother on, the script pins it via ScrollTrigger instead. */
.page-toc {
  position: sticky;
  top: 120px;
  padding-left: 18px;
  border-left: 1px solid #ffffff1f;
}

.page-layout.is-js-pinned .page-toc {
  position: relative;
  top: auto;
}

.page-toc__label {
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--theme, #eaff48);
  margin: 0 0 14px;
}

.page-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-toc__list a {
  display: block;
  margin-left: -19px;
  padding: 7px 0 7px 17px;
  border-left: 2px solid transparent;
  color: #ffffff80;
  font-size: 14px;
  line-height: 1.45;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-toc__list a:hover {
  color: #fff;
}

.page-toc__list a.is-active {
  color: #fff;
  border-left-color: var(--theme, #eaff48);
}

.page-prose h2 {
  scroll-margin-top: 120px;
}

.page-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.page-cta {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 32px 36px;
  border: 1px solid var(--border, #ffffff26);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(234, 255, 72, 0.08), rgba(221, 0, 255, 0.08));
}

.page-cta__kicker {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin: 0 0 6px;
}

.page-cta__text {
  color: #ffffffb3;
  margin: 0;
}

.page-cta__text a {
  color: var(--theme, #eaff48);
}

@media (max-width: 991px) {
  .page-layout.has-toc {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* On small screens the contents list is a compact card above the text. */
  .page-toc {
    position: static;
    border: 1px solid #ffffff1f;
    border-radius: 16px;
    padding: 20px 22px;
    background: #ffffff08;
  }

  .page-toc__list a {
    margin-left: 0;
    padding-left: 12px;
  }
}

@media (max-width: 767px) {
  .page-hero .hero-content h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .page-body {
    padding: 60px 0 80px;
  }

  .page-cta {
    padding: 26px 22px;
  }
}

/* ---- Site header (partials/header.blade.php) ----
   Fixed bar with mix-blend-mode: difference — the white logo and plus icon
   invert against whatever is behind them (white on the dark heroes, black on
   white sections, dark blue on the lime band), so they're always visible. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none; /* only the logo and button take clicks */
}

.site-header > * {
  pointer-events: auto;
}

.site-header__logo {
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.05em; /* tracking-tighter */
  line-height: 1;
  text-transform: lowercase;
  color: #fff;
  transition: opacity 0.2s ease;
}

.site-header__logo:hover,
.site-header__logo:focus-visible {
  color: #fff;
  opacity: 0.7;
}

.site-header__toggle {
  position: relative;
  width: 48px;
  height: 48px;
  margin: -12px; /* bigger tap target without moving the icon off the 24px grid */
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.site-header__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-header__plus span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
}

.site-header__plus span:last-child {
  transform: rotate(90deg);
}

.site-header__toggle:hover .site-header__plus {
  transform: rotate(90deg);
}

/* Open: the plus turns into a close × */
.site-header.is-open .site-header__plus {
  transform: rotate(135deg);
}

.site-header__logo:focus-visible,
.site-header__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 6px;
}

/* ---- Full-screen menu ---- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 9999; /* just under the header, so the × stays on top */
  background: #07060c; /* the heroes' near-black (the theme's --bg is grey) */
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu[hidden] {
  display: none;
}

html.menu-open,
html.menu-open body {
  overflow: hidden;
}

.site-menu__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(124, 58, 237, 0.35), transparent 70%),
    radial-gradient(40% 40% at 10% 100%, rgba(234, 255, 72, 0.08), transparent 70%);
}

.site-menu__inner {
  position: relative;
  min-height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 120px clamp(16px, 4vw, 40px) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: center;
}

.site-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-menu__link {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 6px 0;
  color: #fff;
}

.site-menu__num {
  font-family: "Unbounded", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff66;
  min-width: 28px;
  transition: color 0.3s ease;
}

/* Masked so labels can slide up from below when the menu opens. */
.site-menu__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.site-menu__label {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-menu__link:hover .site-menu__label,
.site-menu__link:focus-visible .site-menu__label {
  color: var(--theme, #eaff48);
  transform: translateX(14px);
}

.site-menu__link:hover .site-menu__num,
.site-menu__link.is-current .site-menu__num {
  color: var(--theme, #eaff48);
}

.site-menu__link.is-current .site-menu__label {
  color: var(--theme, #eaff48);
}

.site-menu__link:focus-visible {
  outline: none;
}

.site-menu__kicker {
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--theme, #eaff48);
  margin: 0 0 16px;
}

.site-menu__email {
  display: inline-block;
  font-family: "Unbounded", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
  word-break: break-all;
}

.site-menu__email:hover {
  color: var(--theme, #eaff48);
}

.site-menu__line {
  display: block;
  color: #ffffffb3;
  font-size: 16px;
  margin: 0 0 6px;
}

a.site-menu__line:hover {
  color: var(--theme, #eaff48);
}

.site-menu__social {
  display: flex;
  gap: 10px;
  margin: 24px 0 30px;
}

.site-menu__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ffffff33;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-menu__social a:hover {
  background: var(--theme, #eaff48);
  border-color: var(--theme, #eaff48);
  color: #000;
}

@media (max-width: 991px) {
  .site-menu__inner {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 44px;
    padding-top: 110px;
  }
}

/* ---- Shared by the Products pages ---- */
.blog-empty.products-empty h2 {
  color: #fff;
  font-family: "Unbounded", sans-serif;
  margin-bottom: 14px;
}

.blog-empty.products-empty p {
  color: #ffffffb3;
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: center;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.tech-chips li {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffffcc;
  border: 1px solid #ffffff26;
  border-radius: 100px;
  padding: 5px 12px;
}


/* =====================================================================
   Products (homepage section, /products, /products/{slug}, detail modal)
   Grid: 1 col < 576px, 2 cols 576–991px, 3 cols ≥ 992px; a featured
   product spans the row with its screenshot beside the text.
   Modal ≥ 992px: gallery fixed on the left, details scroll on the right.
   Below that it stacks and the whole sheet scrolls.
   ===================================================================== */
.products-section {
  background: #07060c;
  color: #fff;
}

.products-home__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.products-home .section-title h2 {
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* ---- Shared tags ---- */
.product-card__tags,
.pd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pd-category,
.pd-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 100px;
}

.pd-category {
  color: var(--theme, #eaff48);
  background: #eaff4814;
  border: 1px solid #eaff4833;
}

.pd-status {
  color: var(--pd-status, #4ade80);
  border: 1px solid color-mix(in srgb, var(--pd-status, #4ade80) 35%, transparent);
}

.pd-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.pd-status--live { --pd-status: #4ade80; }
.pd-status--beta { --pd-status: #f5b642; }
.pd-status--coming_soon { --pd-status: #c084fc; }

/* ---- Card ---- */
.product-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column-reverse; /* media on top for stacked cards */
  border-radius: 28px;
  overflow: hidden;
  background: #121118;
  border: 1px solid #ffffff12;
  color: #fff;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft glow that follows the theme's lime + magenta accents. */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px circle at 85% 0%, #dd00ff1f, transparent 60%),
    radial-gradient(500px circle at 0% 100%, #eaff4812, transparent 60%);
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.product-card:hover,
.product-card:focus-visible {
  color: #fff;
  border-color: #eaff4859;
  transform: translateY(-4px);
  outline: none;
}

.product-card:hover::before,
.product-card:focus-visible::before {
  opacity: 1;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 28px;
  flex: 1;
  min-width: 0;
}

.product-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 4px #ffffff0d;
}

.product-card__name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  margin-top: 6px;
}

.product-card__tagline {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.product-card__summary {
  color: #ffffff99;
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__chips {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.product-card__chip {
  font-size: 13px;
  color: #ffffffcc;
  padding: 7px 13px;
  border-radius: 100px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
}

.product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: auto;
  padding-top: 10px;
}

.product-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 20px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.3s ease;
}

.product-card__btn-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 13px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__btn,
.product-card:focus-visible .product-card__btn {
  background: var(--theme, #eaff48);
}

.product-card:hover .product-card__btn-icon,
.product-card:focus-visible .product-card__btn-icon {
  transform: rotate(-45deg);
}

.product-card__meta {
  display: inline-flex;
  gap: 16px;
  font-size: 13px;
  color: #ffffff80;
}

.product-card__meta i {
  margin-right: 4px;
  color: var(--theme, #eaff48);
}

/* Screenshot shown in a browser frame, centred in its panel. */
.product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  overflow: hidden;
  background-color: #0b0a10;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid #ffffff0f;
}

.product-card__frame {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ffffff1f;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__frame,
.product-card:focus-visible .product-card__frame {
  transform: translateY(-6px);
}

.product-card__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #18171e;
  border-bottom: 1px solid #ffffff12;
}

.product-card__chrome i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff26;
}

.product-card__url {
  margin-left: 12px;
  padding: 3px 12px;
  border-radius: 6px;
  background: #ffffff0d;
  color: #ffffff80;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__frame > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

.product-card__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
}

.product-card__placeholder img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.5;
}

/* Featured: always takes a full row, text left / screenshot right. */
@media (min-width: 992px) {
  .product-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .product-card--featured .product-card__body {
    padding: 44px 40px 40px 44px;
    gap: 16px;
  }

  .product-card--featured .product-card__name {
    font-size: clamp(30px, 3vw, 44px);
  }

  .product-card--featured .product-card__tagline {
    font-size: 18px;
  }

  .product-card--featured .product-card__chips {
    display: flex;
  }

  .product-card--featured .product-card__media {
    padding: 44px;
    border-bottom: 0;
    border-left: 1px solid #ffffff0f;
  }
}

/* ---- Modal ---- */
html.modal-open,
html.modal-open body {
  overflow: hidden;
}

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 10050; /* above the fixed header */
  display: grid;
  place-items: center;
  padding: 24px;
}

.product-modal[hidden] {
  display: none;
}

/* No backdrop-filter: blurring the whole page while it fades in was the
   main cause of the janky open. A dense tint reads just as well. */
.product-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 8, 0.86);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.product-modal__panel {
  position: relative;
  width: min(1240px, 100%);
  height: min(820px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  background: #0f0e14;
  border: 1px solid #ffffff1a;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color: #fff;
  outline: none;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-modal.is-open .product-modal__backdrop,
.product-modal.is-open .product-modal__panel {
  opacity: 1;
}

.product-modal.is-open .product-modal__panel {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .product-modal__backdrop,
  .product-modal__panel {
    transition: none;
  }
}

.product-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ffffff26;
  background: #1b1a21;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), background 0.2s ease;
}

.product-modal__close span::before,
.product-modal__close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}

.product-modal__close span::after {
  transform: rotate(-45deg);
}

.product-modal__close:hover,
.product-modal__close:focus-visible {
  background: var(--theme, #eaff48);
  transform: rotate(90deg);
  outline: none;
}

.product-modal__close:hover span::before,
.product-modal__close:hover span::after,
.product-modal__close:focus-visible span::before,
.product-modal__close:focus-visible span::after {
  background: #000;
}

/* ---- Detail layout (modal + page) ---- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.product-detail__media {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  min-width: 0;
  background-color: #0b0a10;
  background-image:
    radial-gradient(500px circle at 0% 0%, #dd00ff14, transparent 60%),
    linear-gradient(#ffffff06 1px, transparent 1px),
    linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  border-right: 1px solid #ffffff0f;
}

.product-detail__info {
  padding: 44px 44px 40px;
  min-width: 0;
}

/* Desktop modal: the gallery column never moves; only the details column
   scrolls (its own scroll container, so wheel/touch stay inside it). */
@media (min-width: 992px) {
  .product-modal .product-modal__body {
    overflow: hidden;
  }

  .product-modal .product-detail {
    height: 100%;
  }

  .product-modal .product-detail__media {
    justify-content: center;
    min-height: 0;
  }

  .product-modal .product-detail__info {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 48px 48px 44px 44px;
    scrollbar-width: thin;
    scrollbar-color: #ffffff26 transparent;
  }
}

.pd-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid #ffffff1a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  touch-action: pan-y;
}

.pd-stage--empty {
  display: grid;
  place-items: center;
}

.pd-stage--empty img {
  width: 96px;
  opacity: 0.5;
}

.pd-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.pd-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.pd-slide > img,
.pd-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.pd-embed {
  position: absolute;
  inset: 0;
}

.pd-embed > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.pd-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd-embed.is-playing .pd-embed__play,
.pd-embed.is-playing > img {
  display: none;
}

.pd-embed__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  border: 0;
  background: var(--theme, #eaff48);
  color: #000;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 0 0 12px rgba(234, 255, 72, 0.18);
  transition: transform 0.3s ease;
}

.pd-embed__play i {
  margin-left: 5px;
}

.pd-embed__play:hover {
  transform: scale(1.08);
}

.pd-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  border: 1px solid #ffffff26;
  background: rgba(15, 14, 20, 0.85);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pd-stage:hover .pd-nav,
.pd-nav:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .pd-nav {
    opacity: 1;
  }
}

.pd-nav:hover,
.pd-nav:focus-visible {
  background: var(--theme, #eaff48);
  color: #000;
  outline: none;
}

.pd-nav--prev { left: 12px; }
.pd-nav--next { right: 12px; }

.pd-count {
  position: absolute;
  /* Top-left: bottom-right is where a video's own controls live. */
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(15, 14, 20, 0.85);
}

.pd-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}

.pd-thumbs::-webkit-scrollbar {
  display: none;
}

.pd-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: #1a1920;
  cursor: pointer;
  opacity: 0.45;
  box-shadow: 0 0 0 1px #ffffff1a;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.pd-thumb:hover {
  opacity: 0.8;
}

.pd-thumb.is-active,
.pd-thumb:focus-visible {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--theme, #eaff48);
  outline: none;
}

.pd-thumb__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
}

/* ---- Detail info ---- */
.pd-header {
  padding-bottom: 30px;
  border-bottom: 1px solid #ffffff12;
}

.pd-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-right: 52px; /* clear of the modal's close button */
}

.pd-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 4px #ffffff0d;
}

.pd-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 12px;
  text-transform: none;
}

.pd-tagline {
  color: #ffffffb3;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}

.pd-pagelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffffb3;
  font-weight: 600;
  transition: color 0.2s ease;
}

.pd-pagelink:hover {
  color: var(--theme, #eaff48);
}

.pd-block {
  padding-top: 30px;
}

.pd-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff73;
  margin: 0 0 16px;
}

.pd-subhead::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--theme, #eaff48);
}

.pd-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pd-features li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff06;
  border: 1px solid #ffffff10;
  color: #ffffffd9;
  font-size: 14px;
  line-height: 1.5;
}

.pd-features i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: var(--theme, #eaff48);
  color: #000;
}

/* Admin-authored description (blog.css .prose loads after this file, hence
   the doubled class for specificity). */
.prose.pd-description {
  font-size: 15px;
  line-height: 1.75;
  color: #ffffffb3;
}

.prose.pd-description p {
  margin: 0 0 16px;
}

.prose.pd-description h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 12px;
}

.prose.pd-description ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
}

.prose.pd-description ul li {
  margin: 0;
  padding: 12px 16px 12px 34px;
  position: relative;
  border-radius: 12px;
  background: #ffffff05;
  border: 1px solid #ffffff0d;
  line-height: 1.6;
}

.prose.pd-description ul li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme, #eaff48);
}

.prose.pd-description ol {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  counter-reset: pd-step;
  display: grid;
  gap: 8px;
}

.prose.pd-description ol li {
  counter-increment: pd-step;
  position: relative;
  margin: 0;
  padding-left: 36px;
  line-height: 1.6;
}

.prose.pd-description ol li::before {
  content: counter(pd-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--theme, #eaff48);
}

.prose.pd-description > :last-child {
  margin-bottom: 0;
}

/* ---- Standalone product page ---- */
/* The product page's real header is the detail card, so the hero is just
   a short band carrying the breadcrumb. */
.page-wrapper .product-page-hero {
  padding: 120px 0 0;
}

.product-page-hero .hero-content {
  padding: 0;
}

@media (max-width: 575px) {
  .page-wrapper .product-page-hero {
    padding-top: 96px;
  }
}

.product-page {
  padding: 30px 0 110px;
}

.product-page__card {
  border-radius: 28px;
  /* clip, not hidden: `hidden` makes the card a scroll container, which
     stops the gallery's sticky fallback from working. */
  overflow: clip;
  border: 1px solid #ffffff1a;
  background: #0f0e14;
}

/* Desktop: the gallery stays in view on the left while the long details
   scroll by on the right. show.blade.php pins it with ScrollTrigger
   (.is-js-pinned) — CSS sticky alone can't work here because ScrollSmoother's
   transforms and the theme's `.fix { overflow: hidden }` section disable it.
   Sticky is kept only as a no-JavaScript fallback. */
@media (min-width: 992px) {
  .product-page__card .product-detail__media {
    position: sticky;
    top: 100px;
    align-self: start;
    border-right: 0;
  }

  .product-page__card.is-js-pinned .product-detail__media {
    position: relative;
    top: auto;
  }

  .product-page__card .product-detail__info {
    border-left: 1px solid #ffffff0f;
  }
}

.product-page__more {
  margin-top: 90px;
}

.product-page__more h2 {
  color: #fff;
  margin-bottom: 36px;
}

/* ---- Breakpoints ---- */
@media (max-width: 991px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .product-detail__media {
    border-right: 0;
    border-bottom: 1px solid #ffffff0f;
  }

  .product-detail__info {
    padding: 30px 28px 34px;
  }

  .product-modal__panel {
    width: min(760px, 100%);
    height: calc(100dvh - 48px);
  }

  .product-modal .product-detail__media {
    padding-top: 76px; /* room for the close button */
  }

  .pd-head {
    padding-right: 0;
  }
}

/* Tablets (2-column grid): a single product also takes the whole row. */
@media (min-width: 576px) and (max-width: 991px) {
  .product-grid > .product-card:only-child,
  .product-grid > .product-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card__body {
    padding: 22px 20px 24px;
  }

  .product-card__media {
    padding: 18px;
  }

  /* Phones: the modal becomes a full-screen sheet that slides up. */
  .product-modal {
    padding: 0;
  }

  .product-modal__panel {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    transform: translateY(40px);
  }

  .product-modal .product-detail__media {
    padding: 72px 14px 14px;
  }

  .product-detail__info {
    padding: 24px 18px 34px;
  }

  .pd-features {
    grid-template-columns: 1fr;
  }

  .pd-thumb {
    width: 72px;
  }

  .product-page__card {
    border-radius: 20px;
  }

  .products-home__head {
    margin-bottom: 32px;
  }
}

/* =====================================================================
   Services page — "Our services" (sections/services/services-offer)
   Rows on the left auto-advance (CSS progress bar → JS on animationend);
   .is-paused / .is-offscreen pause it, .is-manual stops it. Each row has
   a pure-CSS illustration (.svc-art) on the right whose animations replay
   every time it becomes .is-active.
   ===================================================================== */
.svc-offer {
  --svc-accent: var(--theme, #eaff48);
  --svc-accent-2: #a855f7;
  --svc-line: #ffffff14;
  position: relative;
  background-color: #07060c;
  background-image:
    radial-gradient(700px circle at 100% 0%, #dd00ff14, transparent 60%),
    radial-gradient(600px circle at 0% 100%, #eaff480d, transparent 60%);
  color: #fff;
}

.svc-offer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 60px;
  margin-bottom: 60px;
}

.svc-offer__head .section-title h2 {
  color: #fff;
  max-width: 14ch;
}

.svc-offer__intro {
  max-width: 460px;
  margin: 0;
  color: #ffffffb3;
  font-size: 17px;
  line-height: 1.65;
}

.svc-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* ---- List ---- */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--svc-line);
  counter-reset: none;
}

.svc-item {
  position: relative;
  border-bottom: 1px solid var(--svc-line);
}

.svc-item__head {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.svc-item__num {
  flex: 0 0 auto;
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff59;
  transition: color 0.3s ease;
}

.svc-item__title {
  flex: 1;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 36px);
  line-height: 1.15;
  color: #ffffff59;
  transition: color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ffffff26;
  color: #ffffff80;
  font-size: 15px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item__head:hover .svc-item__title,
.svc-item__head:focus-visible .svc-item__title {
  color: #ffffffb3;
}

.svc-item__head:focus-visible {
  outline: 2px solid var(--svc-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.svc-item.is-active .svc-item__num {
  color: var(--svc-accent);
}

.svc-item.is-active .svc-item__title {
  color: #fff;
  transform: translateX(6px);
}

.svc-item.is-active .svc-item__icon {
  background: var(--svc-accent);
  border-color: var(--svc-accent);
  color: #000;
  transform: rotate(-45deg);
}

/* Accordion body: animates height via grid rows (no JS measuring). */
.svc-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item.is-active .svc-item__body {
  grid-template-rows: 1fr;
}

.svc-item__inner {
  min-height: 0;
  overflow: hidden;
  padding-left: 50px;
}

.svc-item__inner > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-item.is-active .svc-item__inner > * {
  opacity: 1;
  transform: none;
}

.svc-item.is-active .svc-item__inner > :nth-child(2) { transition-delay: 0.06s; }
.svc-item.is-active .svc-item__inner > :nth-child(3) { transition-delay: 0.12s; }
.svc-item.is-active .svc-item__inner > :nth-child(4) { transition-delay: 0.18s; }

.svc-item__lead {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.svc-item__text {
  margin: 0 0 18px;
  color: #ffffffa6;
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
}

.svc-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.svc-item__tags li {
  font-size: 13px;
  color: #ffffffcc;
  padding: 7px 13px;
  border-radius: 100px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
}

.svc-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--svc-accent);
  font-weight: 600;
}

.svc-item__cta i {
  transition: transform 0.3s ease;
}

.svc-item__cta:hover {
  color: var(--svc-accent);
}

.svc-item__cta:hover i {
  transform: translateX(4px);
}

/* Autoplay progress along the bottom border of the active row. */
.svc-item__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.svc-item__progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--svc-accent), var(--svc-accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.svc-item.is-active .svc-item__progress span {
  animation: svc-progress 6.5s linear forwards;
}

.svc-offer.is-paused .svc-item__progress span,
.svc-offer.is-offscreen .svc-item__progress span {
  animation-play-state: paused;
}

.svc-offer.is-manual .svc-item__progress {
  display: none;
}

@keyframes svc-progress {
  to { transform: scaleX(1); }
}

/* ---- Stage ---- */
.svc-stage {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #ffffff14;
  background-color: #0d0c13;
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 34px 34px;
  isolation: isolate;
}

.svc-stage__glow {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 70% 30%, #a855f733, transparent 45%),
    radial-gradient(circle at 25% 80%, #eaff481f, transparent 45%);
  animation: svc-glow 12s ease-in-out infinite alternate;
}

@keyframes svc-glow {
  to { transform: rotate(25deg) scale(1.1); }
}

.svc-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}

.svc-art.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Generic building blocks */
.svc-art b,
.svc-art span,
.svc-art i,
.svc-art em,
.svc-art small {
  display: block;
  font-style: normal;
}

.art-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #16151d;
  border: 1px solid #ffffff1f;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.art-chip i {
  display: inline-block;
  color: var(--svc-accent);
}

.svc-art.is-active .art-chip {
  animation: svc-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, svc-float 5s ease-in-out 0.8s infinite;
}

@keyframes svc-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes svc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes svc-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes svc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---- 01 Web ---- */
.art-window {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 18%;
  border-radius: 16px;
  overflow: hidden;
  background: #111018;
  border: 1px solid #ffffff1f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.art-window__bar {
  display: flex !important;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #1a1922;
  border-bottom: 1px solid #ffffff12;
}

.art-window__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff2e;
}

.art-window__bar span {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 6px;
  background: #ffffff0d;
  color: #ffffff80;
  font-size: 11px;
}

.art-window__body {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  height: calc(100% - 34px);
}

.art-code {
  padding: 18px 14px;
  border-right: 1px solid #ffffff12;
  background: #0c0b11;
}

.art-code span {
  height: 7px;
  width: var(--w);
  margin-bottom: 12px;
  border-radius: 4px;
  background: #ffffff26;
  transform-origin: 0 50%;
}

.art-code span.is-accent {
  background: var(--svc-accent-2);
  opacity: 0.8;
}

.svc-art.is-active .art-code span {
  animation: svc-grow-x 0.5s ease-out var(--d) both;
}

.art-page {
  padding: 16px;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.art-page__hero {
  flex: 1;
  border-radius: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #2a1b3d, #15141c);
}

.art-page__hero b {
  width: 70%;
  height: 12px;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 8px;
}

.art-page__hero i {
  width: 45%;
  height: 12px;
  border-radius: 6px;
  background: var(--svc-accent);
  margin-bottom: 14px;
}

.art-page__hero em {
  width: 34%;
  height: 18px;
  border-radius: 100px;
  background: var(--svc-accent);
}

.art-page__cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 34%;
}

.art-page__cards span {
  border-radius: 8px;
  background: #ffffff10;
  border: 1px solid #ffffff12;
}

.svc-art.is-active .art-page__hero {
  animation: svc-rise 0.5s ease-out 0.5s both;
}

.svc-art.is-active .art-page__cards span {
  animation: svc-rise 0.45s ease-out both;
}

.svc-art.is-active .art-page__cards span:nth-child(1) { animation-delay: 0.8s; }
.svc-art.is-active .art-page__cards span:nth-child(2) { animation-delay: 0.95s; }
.svc-art.is-active .art-page__cards span:nth-child(3) { animation-delay: 1.1s; }

.art-chip--score {
  right: 4%;
  top: 6%;
  animation-delay: 1.2s !important;
}

.art-ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.art-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.art-ring circle {
  fill: none;
  stroke: #ffffff1f;
  stroke-width: 3;
}

.art-ring .art-ring__fill {
  stroke: #4ade80;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
}

.svc-art.is-active .art-ring__fill {
  animation: svc-ring 1.2s ease-out 1.4s forwards;
}

@keyframes svc-ring {
  to { stroke-dashoffset: 0; }
}

.art-ring b {
  position: absolute;
  inset: 0;
  display: grid !important;
  place-items: center;
  font-size: 11px;
  color: #4ade80;
}

.art-chip--device {
  left: 4%;
  bottom: 7%;
  gap: 8px;
}

/* ---- 02 App ---- */
.art-phone {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 40%;
  aspect-ratio: 9 / 18.5;
  margin-left: -20%;
  border-radius: 34px;
  padding: 10px;
  background: #1b1a22;
  border: 1px solid #ffffff26;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #0b0a10;
}

.art-phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 30%;
  height: 16px;
  margin-left: -15%;
  border-radius: 10px;
  background: #000;
  z-index: 2;
}

.art-phone__screen {
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  padding: 40px 12px 12px;
  background: #0e0d14;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.art-phone__top {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.art-phone__top span {
  width: 50%;
  height: 9px;
  border-radius: 5px;
  background: #ffffff40;
}

.art-phone__top i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-2));
}

.art-phone__card {
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg, var(--svc-accent), #b9cf2c);
}

.art-phone__card small {
  width: 40%;
  height: 6px;
  border-radius: 3px;
  background: #00000040;
  margin-bottom: 10px;
}

.art-phone__card b {
  width: 65%;
  height: 14px;
  border-radius: 6px;
  background: #000;
  margin-bottom: 12px;
}

.art-phone__card span {
  width: 36%;
  height: 16px;
  border-radius: 100px;
  background: #00000026;
}

.art-phone__row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff0a;
}

.art-phone__row i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #a855f74d;
  flex: 0 0 auto;
}

.art-phone__row span {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: #ffffff33;
}

.art-phone__row em {
  width: 18%;
  height: 7px;
  border-radius: 4px;
  background: var(--svc-accent);
  opacity: 0.8;
}

.art-phone__tabs {
  display: flex !important;
  justify-content: space-around;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #ffffff14;
}

.art-phone__tabs i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #ffffff26;
}

.art-phone__tabs i:first-child {
  background: var(--svc-accent);
}

.svc-art.is-active .art-phone {
  animation: svc-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.svc-art.is-active .art-phone__card {
  animation: svc-rise 0.5s ease-out 0.2s both;
}

.svc-art.is-active .art-phone__row {
  animation: svc-slide-in 0.45s ease-out var(--d) both;
}

@keyframes svc-slide-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

.art-toast {
  position: absolute;
  right: 5%;
  top: 22%;
  width: 52%;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffffeb;
  color: #111;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.art-toast__icon {
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #000;
  color: var(--svc-accent);
  font-size: 14px;
}

.art-toast b {
  font-size: 13px;
  line-height: 1.2;
}

.art-toast small {
  font-size: 11px;
  color: #555;
}

.art-toast em {
  margin-left: auto;
  align-self: flex-start;
  font-size: 10px;
  color: #777;
}

.svc-art.is-active .art-toast {
  animation: svc-toast 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

@keyframes svc-toast {
  from { opacity: 0; transform: translateY(-24px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.art-chip--stores {
  left: 5%;
  bottom: 12%;
  animation-delay: 1.2s !important;
}

/* ---- 03 Custom software ---- */
.art-dash {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  height: 62%;
  display: flex !important;
  border-radius: 16px;
  overflow: hidden;
  background: #111018;
  border: 1px solid #ffffff1f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.art-dash__side {
  width: 15%;
  padding: 14px 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #0c0b11;
  border-right: 1px solid #ffffff12;
}

.art-dash__side b {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--svc-accent);
  margin-bottom: 6px;
}

.art-dash__side i {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: #ffffff2e;
}

.art-dash__main {
  flex: 1;
  padding: 16px;
}

.art-dash__kpis {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.art-dash__kpis span {
  padding: 12px;
  border-radius: 10px;
  background: #ffffff0a;
  border: 1px solid #ffffff12;
}

.art-dash__kpis small {
  width: 50%;
  height: 6px;
  border-radius: 3px;
  background: #ffffff33;
  margin-bottom: 10px;
}

.art-dash__kpis b {
  width: 70%;
  height: 14px;
  border-radius: 5px;
  background: #fff;
}

.art-dash__kpis span:nth-child(2) b { background: var(--svc-accent); }
.art-dash__kpis span:nth-child(3) b { background: #c084fc; }

.art-dash__table span {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 9px 4px;
  border-bottom: 1px solid #ffffff0f;
}

.art-dash__table i {
  width: 55%;
  height: 7px;
  border-radius: 4px;
  background: #ffffff26;
}

.art-dash__table em {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
}

.art-dash__table em.ok {
  color: #4ade80;
  background: #4ade801f;
}

.art-dash__table em.wait {
  color: #f5b642;
  background: #f5b6421f;
}

.svc-art.is-active .art-dash__kpis span,
.svc-art.is-active .art-dash__table span {
  animation: svc-rise 0.45s ease-out var(--d) both;
}

.art-flow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 9%;
  display: flex !important;
  align-items: center;
}

.art-flow span {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #16151d;
  border: 1px solid #ffffff1f;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.art-flow span i {
  color: var(--svc-accent);
}

.art-flow b {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--svc-accent) 0 6px, transparent 6px 11px);
  transform-origin: 0 50%;
}

.svc-art.is-active .art-flow span {
  animation: svc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both;
}

.svc-art.is-active .art-flow b {
  animation: svc-grow-x 0.35s ease-out var(--d) both;
}

/* ---- 04 Marketing ---- */
.art-chart {
  position: absolute;
  left: 6%;
  top: 8%;
  width: 60%;
  height: 56%;
  padding: 16px;
  border-radius: 16px;
  background: #111018;
  border: 1px solid #ffffff1f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.art-chart__head {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #ffffffb3;
}

.art-chart__head em {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  color: #4ade80;
}

.art-chart__bars {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  top: 48px;
  display: flex !important;
  align-items: flex-end;
  gap: 8px;
}

.art-chart__bars span {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--svc-accent-2), #a855f726);
  transform-origin: 50% 100%;
}

.art-chart__bars span:last-child {
  background: linear-gradient(180deg, var(--svc-accent), #eaff4826);
}

.svc-art.is-active .art-chart__bars span {
  animation: svc-grow-y 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d) both;
}

@keyframes svc-grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.art-chart__line {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 48px;
  bottom: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 64px);
  overflow: visible;
}

.art-chart__line path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.svc-art.is-active .art-chart__line path {
  animation: svc-draw 1.4s ease-out 0.7s forwards;
}

@keyframes svc-draw {
  to { stroke-dashoffset: 0; }
}

.art-funnel {
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: 46%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.art-funnel span {
  width: var(--w);
  padding: 8px 0;
  text-align: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  background: var(--svc-accent);
}

.art-funnel span:nth-child(2) { background: #d7e63f; }
.art-funnel span:nth-child(3) { background: #c084fc; }

.svc-art.is-active .art-funnel span {
  animation: svc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both;
}

.art-post {
  position: absolute;
  right: 6%;
  top: 30%;
  width: 34%;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  color: #111;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(4deg);
}

.art-post__head {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.art-post__head i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f472b6, #a855f7);
}

.art-post__head span {
  width: 50%;
  height: 7px;
  border-radius: 4px;
  background: #0000002e;
}

.art-post__img {
  aspect-ratio: 1;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, #eaff48, transparent 55%),
    linear-gradient(135deg, #a855f7, #1e1b4b);
}

.art-post__foot {
  display: flex !important;
  gap: 12px;
  padding: 9px 2px 2px;
  font-size: 14px;
}

.art-post__foot i:first-child {
  color: #ef4444;
}

.svc-art.is-active .art-post {
  animation: svc-post 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.svc-art.is-active .art-post__foot i:first-child {
  animation: svc-like 0.5s ease-out 1.4s both;
}

@keyframes svc-post {
  from { opacity: 0; transform: translateY(30px) rotate(10deg); }
  to { opacity: 1; transform: rotate(4deg); }
}

@keyframes svc-like {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ---- 05 SEO ---- */
.art-search {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 9%;
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 100px;
  background: #fff;
  color: #111;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.art-search > i {
  color: #555;
}

.art-search__q {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #111;
  padding-right: 2px;
  width: 25ch;
  max-width: calc(100% - 30px);
}

.svc-art.is-active .art-search__q {
  animation: svc-type 1.3s steps(25) 0.3s both, svc-caret 0.8s step-end infinite;
}

@keyframes svc-type {
  from { width: 0; }
  to { width: 25ch; }
}

@keyframes svc-caret {
  50% { border-color: transparent; }
}

.art-results {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 26%;
  height: 58%;
}

.art-result {
  position: absolute;
  left: 0;
  right: 0;
  height: 21%;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff12;
  overflow: hidden;
  top: calc(var(--to) * 24%);
}

.art-result small {
  font-size: 12px;
  color: #4ade80b3;
  margin-bottom: 7px;
}

.art-result b {
  width: 62%;
  height: 9px;
  border-radius: 5px;
  background: #ffffff4d;
  margin-bottom: 6px;
}

.art-result span {
  width: 85%;
  height: 6px;
  border-radius: 3px;
  background: #ffffff1f;
}

.art-result.is-you {
  background: #eaff480f;
  border-color: #eaff4866;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.art-result.is-you small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--svc-accent);
  font-weight: 600;
}

.art-result.is-you small em {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--svc-accent);
  color: #000;
  font-size: 10px;
  font-weight: 700;
}

.art-result.is-you b {
  background: #fff;
}

/* Results start in their original order, then swap into the final one. */
.svc-art.is-active .art-result {
  animation: svc-rank 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.8s both;
}

@keyframes svc-rank {
  from { top: calc(var(--from) * 24%); }
  to { top: calc(var(--to) * 24%); }
}

.art-chip--rank {
  right: 6%;
  bottom: 5%;
  animation-delay: 2.6s !important;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .svc-offer__grid {
    gap: 36px;
  }

  .svc-item__inner {
    padding-left: 0;
  }
}

@media (max-width: 991px) {
  .svc-offer__grid {
    grid-template-columns: 1fr;
  }

  /* Phones/tablets: JS moves the stage into the open row's body. */
  .svc-stage {
    max-width: 560px;
    width: 100%;
    margin: 4px 0 22px;
  }
}

@media (max-width: 575px) {
  .svc-offer__head {
    margin-bottom: 36px;
  }


  .svc-item__head {
    gap: 14px;
    padding: 20px 0;
  }

  .svc-item__icon {
    width: 40px;
    height: 40px;
  }

  .svc-stage {
    border-radius: 20px;
  }

  .art-chip {
    font-size: 11px;
    padding: 8px 12px;
  }

  .art-toast {
    width: 62%;
    right: 3%;
  }

  .art-search__q {
    font-size: 12px;
  }

  .art-flow span {
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-art,
  .svc-art *,
  .svc-stage__glow {
    animation: none !important;
    transition: none !important;
  }

  .art-ring .art-ring__fill,
  .art-chart__line path {
    stroke-dashoffset: 0;
  }
}