/* =====================================================
   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;
  }