/* =====================================================
   STUDIO — Cleaned & Organized CSS
   Notes:
   - Removed dead rules: .case-frame, .case-img, .parallax-layer,
     @keyframes drift1, @keyframes drift2 (not used in markup).
   - Added a tiny .parallax-img rule that your HTML actually uses.
   - Kept all interactive bits you rely on (scroll rail, accordions,
     marquee, header sticky, etc.).
   - Grouped by purpose/section. Mobile tweaks at the bottom.
   ===================================================== */

/* =========================
   1) Base / Resets
   ========================= */
::-webkit-scrollbar {
  display: none;
}

html,
body {
  height: 100%;
}
body {
  background: #0b0b0f; /* dark-base */
  overflow-x: hidden;
}

/* =========================
      2) Background Layers
      ========================= */
.noise-bg {
  background-image: linear-gradient(
      180deg,
      rgba(17, 18, 23, 0) 0%,
      rgba(17, 18, 23, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

.grid-pattern {
  background-image: linear-gradient(rgba(36, 39, 51, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 39, 51, 0.4) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* fancy diagonal glints */
/* .diagonal-line-1,
.diagonal-line-2 {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.4),
    transparent
  );
  animation: moveDiagonal 8s ease-in-out infinite;
}
.diagonal-line-1 {
  top: 20%;
  left: -300px;
  transform: rotate(-15deg);
  width: 600px;
}
.diagonal-line-2 {
  width: 400px;
  top: 70%;
  right: 100px;
  transform: rotate(15deg);
  animation-delay: 2s;
}
@keyframes moveDiagonal {
  0%,
  100% {
    transform: translateX(0) rotate(-15deg);
    opacity: 0.3;
  }
  50% {
    transform: translateX(100px) rotate(-15deg);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diagonal-line-1,
  .diagonal-line-2 {
    animation: none;
  }
} */

/* Register animatable custom prop for compositor-friendly transform */
/* Base */
.diagonal{
    position:fixed; pointer-events:none; z-index:1;
    height:1px; width:600px;
    background:linear-gradient(90deg,transparent,rgba(195,163,92,.4),transparent);
    will-change:transform;
    /* Use individual transform properties when available */
    rotate: var(--rot, -15deg);
    translate: 0 0;
  }
  
  /* Placement */
  .diagonal--1{ top:20%; left:-300px; width:600px; --rot:-15deg; }
  .diagonal--2{ top:70%; right:100px; width:400px; --rot:15deg; }
  
  /* =========================
     DESKTOP: continuous ping-pong
     ========================= */
  @media (min-width:769px){
    /* If 'translate' property is supported (modern) */
    @supports (translate: 1px){
      .diagonal{ animation: diag-move 8s ease-in-out infinite alternate; }
      @keyframes diag-move{ to{ translate: 100px 0; } }
    }
    /* Fallback: animate full transform (keeps rotate constant) */
    @supports not (translate: 1px){
      .diagonal{ animation: diag-move-tf 8s ease-in-out infinite alternate; }
      @keyframes diag-move-tf{
        to{ transform: translateX(100px) rotate(var(--rot, -15deg)); }
      }
    }
  }
  
  /* =========================
     MOBILE: scroll-linked if supported
     ========================= */
  @media (max-width:768px){
    /* baseline (static); JS or CSS Scroll-Linked Animations will override */
    .diagonal{ animation:none; opacity:.35; }
  }
  
  @supports (animation-timeline: scroll()){
    @media (max-width:768px){
      @scroll-timeline docScroll{ source:auto; axis:block; }
      /* Modern mobile: the line moves only while you scroll */
      .diagonal{
        animation: diag-scroll 1s linear both;
        animation-timeline: docScroll;
        animation-range: 0% 100%;
      }
      /* If 'translate' is supported (it is on modern Chrome/Safari), use it */
      @supports (translate: 1px){
        @keyframes diag-scroll{ to{ translate: 80px 0; } }
      }
      /* Else fallback to transform */
      @supports not (translate: 1px){
        @keyframes diag-scroll{ to{ transform: translateX(80px) rotate(var(--rot, -15deg)); } }
      }
    }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .diagonal{ animation:none !important; }
  }
  
  

/* =========================
      3) Progress Rail (scroll)
      ========================= */
.progress-rail {
  position: fixed;
  left: 0;
  top: 0;
  width: 4px;
  height: 100vh;
  background: rgba(36, 39, 51, 0.6); /* track */
  z-index: 60; /* header is z-50 */
  pointer-events: none;
}
.progress-rail-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #c3a35c, rgba(195, 163, 92, 0.35));
  will-change: width, height, transform;
}

/* =========================
      4) Section Markers & Labels
      ========================= */
.section-number {
  font-family: "Space Grotesk", sans-serif;
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(195, 163, 92, 0.15);
  position: absolute;
  top: -60px;
  right: 0;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-number.active {
  transform: translateY(-10px);
}

.label-pill {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(36, 39, 51, 1);
  background: rgba(17, 18, 23, 0.6);
  color: #c7cbd1;
  transition: all 0.3s ease;
}

.label-pill.is-active {
  background: rgba(195, 163, 92, 0.12);
  border-color: rgba(195, 163, 92, 0.55);
  color: #f3f4f6;
  /* all glow inside the border */
  box-shadow: inset 0 0 0 1px rgba(195, 163, 92, 0.55),
    inset 0 0 16px rgba(195, 163, 92, 0.18);
  transform: translateY(-1px);
}

.label-pill:hover {
  background: rgba(195, 163, 92, 0.1);
  border-color: rgba(195, 163, 92, 0.3);
}

.hairline-rule {
  height: 1px;
  background: #242733; /* hairline */
  position: relative;
  overflow: hidden;
}
.hairline-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1.5px;
  background: #c3a35c;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hairline-rule.active::after {
  width: 100%;
}

/* =========================
      5) Header (sticky state)
      ========================= */
.header-sticky {
  transition: all 0.3s ease;
}
.header-sticky.scrolled {
  background: rgba(17, 18, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #242733;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* =========================
      6) Hero micro-animations
      ========================= */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.stagger-1 {
  animation-delay: 0.1s;
}
.stagger-2 {
  animation-delay: 0.2s;
}
.stagger-3 {
  animation-delay: 0.3s;
}
.stagger-4 {
  animation-delay: 0.4s;
}

.underline-animate {
  position: relative;
  display: inline-block;
}
.underline-animate::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #c3a35c;
  animation: underlineGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes underlineGrow {
  to {
    width: 100%;
  }
}

/* =========================
      7) Outcomes (cards)
      ========================= */
.outcome-card {
  border: 1px solid #242733;
  background: rgba(17, 18, 23, 0.6);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.outcome-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #c3a35c;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.outcome-card:hover::after {
  width: 100%;
}
.outcome-card:hover h3 {
  transform: translateY(1px);
}

/* =========================
      8) Services list
      ========================= */
.service-block {
  border-bottom: 1px solid #242733;
  padding: 48px 0;
  transition: all 0.4s ease;
}
/* base stays as you have it */
.mini-index {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid #242733;
  background: transparent;
  color: #c7cbd1;
  transition: all 0.3s ease;
  position: relative; /* needed for ::after */
}

/* active state — keeps light inside the border */
.mini-index.is-active {
  color: #f3f4f6;
  border-color: rgba(195, 163, 92, 0.55);
}

.mini-index.is-active::after {
  content: "";
  position: absolute;
  inset: 1px; /* stay inside the 1px border */
  border-radius: inherit;
  background: rgba(195, 163, 92, 0.08);
  box-shadow: inset 0 0 0 1px rgba(195, 163, 92, 0.55),
    inset 0 0 12px rgba(195, 163, 92, 0.18);
  pointer-events: none;
}
.service-top-rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #c3a35c;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-block:hover .mini-index {
  background: #c3a35c;
  color: #0b0b0f;
  border-color: #c3a35c;
}
.service-block:hover .service-top-rule {
  width: 100%;
}

/* =========================
      9) Case section (parallax img)
      ========================= */
.parallax-img {
  will-change: transform;
  pointer-events: none;
  display: block;
}

#sigmadent-frames {
  position: relative;
  overflow: hidden;
  --dx-laptop: 80px;
  --dx-phone: -102px;
}
#sigmadent-frames .parallax-img {
  top: 0; /* anchor to container top; we’ll drive Y via transform only */
  will-change: transform;
  transform: translate3d(-50%, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  #sigmadent-frames .parallax-item {
    transform: translate3d(calc(-50% + var(--dx, 0px)), 0, 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sigmadent-frames .parallax-img {
    transform: translate3d(-50%, 0, 0) !important;
  }
}

#sigmadent-frames .parallax-item {
  top: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(calc(-50% + var(--dx, 0px)), 0, 0);
}

/* Below 480px: different offsets */
@media (max-width: 1024px) {
  #sigmadent-frames {
    --dx-laptop: 65px; /* set what you actually want here */
    --dx-phone: -235px; /* and here */
  }
}

@media (max-width: 680px) {
  #sigmadent-frames {
    --dx-laptop: 65px; /* set what you actually want here */
    --dx-phone: -154px; /* and here */
  }
}

/* Below 480px: different offsets */
@media (max-width: 630px) {
  #sigmadent-frames {
    --dx-laptop: 65px; /* set what you actually want here */
    --dx-phone: -104px; /* and here */
  }
}
/* Below 480px: different offsets */
@media (max-width: 503px) {
  #sigmadent-frames {
    --dx-laptop: 25px; /* set what you actually want here */
    --dx-phone: -105px; /* and here */
  }
}

/* =========================
      10) Process timeline
      ========================= */
.process-step {
  position: relative;
  padding-left: 48px;
}
.process-step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 32px;
  width: 1px;
  height: 0;
  background: #242733;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-step.active::before {
  height: calc(100% + 48px);
}
.process-step .step-icon {
  width: 32px;
  height: 32px;
  border: 1px solid #242733;
  background: rgba(17, 18, 23, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 16px;
  transition: all 0.3s ease;
}
.process-step.active .step-icon {
  background: #c3a35c;
  border-color: #c3a35c;
  color: #0b0b0f;
}

/* =========================
      11) Guarantees
      ========================= */
.guarantee-marker {
  width: 8px;
  height: 8px;
  background: #c3a35c;
  display: inline-block;
  margin-right: 12px;
}

/* =========================
      12) FAQ / Accordion
      ========================= */
.accordion-header {
  cursor: pointer;
  position: relative;
  padding-right: 48px;
}
.accordion-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.accordion-toggle::before,
.accordion-toggle::after {
  content: "";
  position: absolute;
  background: #c7cbd1;
  transition: all 0.3s ease;
}
.accordion-toggle::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 24px;
  transform: translateX(-50%);
}
.accordion-toggle::after {
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  transform: translateY(-50%);
}
.accordion-header.open .accordion-toggle::before {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-body.open {
  max-height: 500px;
}

/* =========================
      13) CTA underline
      ========================= */
.cta-underline {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: #c3a35c;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-underline.active {
  width: 100%;
}

/* =========================
      14) Tech marquee
      ========================= */

.tech-marquee:hover .marquee {
  animation-play-state: paused;
}
.tech-marquee .marquee {
  animation: tech-marquee var(--marquee-duration, 15s) linear infinite alternate;
}
/* keep your existing keyframes */
@keyframes tech-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* one row width */
}
@media (prefers-reduced-motion: reduce) {
  .tech-marquee .marquee {
    animation: none;
    transform: none;
  }
}

/* =========================
      15) Responsive tweaks
      ========================= */
@media (max-width: 768px) {
  .section-number {
    font-size: 120px;
    top: -40px;
  }

  .progress-rail {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100vw;
    height: 4px;
    background: rgba(36, 39, 51, 0.6);
  }
  .progress-rail-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c3a35c, rgba(195, 163, 92, 0.35));
  }

  /* If you prefer the rail on the RIGHT on mobile: */
  .progress-rail[data-mobile="right"] {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 4px;
    height: 100vh;
  }
  .progress-rail[data-mobile="right"] .progress-rail-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #c3a35c, rgba(195, 163, 92, 0.35));
  }

  /* OPTIONAL: Hide native scrollbar on mobile */
  html {
    scrollbar-width: none;
  } /* Firefox */
  body {
    -ms-overflow-style: none;
  } /* old IE/Edge */
  body::-webkit-scrollbar {
    display: none;
  } /* Chrome/Safari */

  /* .diagonal-line-2 {
    width: 400px;
    top: 80%;
    right: 110px;
    transform: rotate(15deg);
    animation-delay: 2s;
  } */
}

.social-btn {
  position: relative;
  transition: transform 0.25s ease, border-color 0.2s, color 0.2s;
}
.social-btn.run-away {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0));
}
#social-msg {
  text-align: left;
}