/* CODARA production performance pass.
   Purpose: keep the premium look while avoiding constant repaint on real devices. */

:root {
  --codara-fast-shadow: 0 14px 34px rgba(26, 8, 54, 0.14);
  --codara-fast-border: rgba(131, 46, 255, 0.14);
}

html {
  scroll-behavior: auto !important;
}

body {
  overscroll-behavior-y: auto;
}

html:not(.codara-theme-dark),
html:not(.codara-theme-dark) body,
html:not(.codara-theme-dark) body.tm-home-shell,
html:not(.codara-theme-dark) .layout-wrapper,
html:not(.codara-theme-dark) main#main-content,
html:not(.codara-theme-dark) .home-redesign,
html:not(.codara-theme-dark) .home-hero,
html:not(.codara-theme-dark) .home-projects,
html:not(.codara-theme-dark) .home-services,
html:not(.codara-theme-dark) .home-bottom-band,
html:not(.codara-theme-dark) .home-cta,
html:not(.codara-theme-dark) .home-footer {
  background-color: #f6f1fc !important;
}

html:not(.codara-menu-open),
html:not(.codara-menu-open) body {
  overflow-y: auto !important;
}

.tm-home-shell:not(.codara-menu-open) {
  overflow-y: auto !important;
}

.ip-section,
.work-section,
.reviews-section,
.process-section,
.blog-section,
.faq-section,
.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

.tm-home-shell main > section,
.tm-home-shell .home-projects,
.tm-home-shell .home-services,
.tm-home-shell .home-cta,
.tm-home-shell .home-footer,
.tm-home-shell #intro-pin-container,
.tm-home-shell .tt-intro-pin {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

.project-card,
.service-item,
.bl-card,
.ct-card,
.faq-item,
.process-card,
.review-card,
.work-card,
.home-cta-art,
.bento-card,
.testimonial-card,
.stat-item {
  box-shadow: var(--codara-fast-shadow) !important;
}

.project-card:hover,
.service-item:hover,
.bl-card:hover,
.ct-card:hover,
.faq-item:hover,
.process-card:hover,
.review-card:hover,
.work-card:hover {
  box-shadow: 0 18px 42px rgba(83, 51, 140, 0.18) !important;
}

.project-card img,
.home-cta-art img,
.card-visual-right svg,
.service-item svg,
.workflow-card img,
.case-card img {
  filter: none !important;
}

.floating-cubes-bg,
.cube,
.home-cta::before,
.home-cta::after,
.home-bottom-band::before {
  pointer-events: none !important;
}

.floating-cubes-bg {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  transform: none !important;
  contain: paint !important;
}

.floating-cubes-bg .cube {
  animation: none !important;
  will-change: auto !important;
  transform: rotate(12deg) !important;
}

.float-anim,
.float-anim-l,
.float-visual-slow,
.float-visual-slow-rev,
.octa-spin,
.node-pulse-1,
.node-pulse-2,
.node-pulse-3,
.trend-flow-line,
.pulse-target,
.cube-float,
.cta-decor-bubble,
.cta-decor-code,
.cta-decor-sparkle,
.floating-cubes-bg .cube,
.home-cta-art,
.faq-hero::before,
.bl-hero::before,
.ct-hero::before {
  animation-duration: 18s !important;
  animation-timing-function: ease-in-out !important;
}

@media (hover: hover) and (pointer: fine) {
  .project-card,
  .service-item,
  .bl-card,
  .ct-card {
    transition-duration: .25s !important;
  }
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .float-anim,
  .float-anim-l,
  .float-visual-slow,
  .float-visual-slow-rev,
  .octa-spin,
  .node-pulse-1,
  .node-pulse-2,
  .node-pulse-3,
  .trend-flow-line,
  .pulse-target,
  .cube-float,
  .cta-decor-bubble,
  .cta-decor-code,
  .cta-decor-sparkle,
  .floating-cubes-bg .cube,
  .home-cta-art,
  .faq-hero::before,
  .bl-hero::before,
  .ct-hero::before,
  .pulse-dot {
    animation: none !important;
  }

  .project-card:hover,
  .service-item:hover,
  .bl-card:hover,
  .ct-card:hover,
  .faq-item:hover,
  .process-card:hover,
  .review-card:hover,
  .work-card:hover,
  .project-card:hover img,
  .service-item:hover .card-visual-right,
  .service-item:hover .flex-row.text-white {
    transform: none !important;
  }

  .project-card,
  .service-item,
  .bl-card,
  .ct-card,
  .faq-item,
  .process-card,
  .review-card,
  .work-card,
  .home-cta-art,
  .bento-card,
  .testimonial-card,
  .stat-item {
    box-shadow: 0 10px 26px rgba(26, 8, 54, 0.1) !important;
  }

  [style*="backdrop-filter"],
  .info-panel,
  .bl-card-icon,
  .ct-card,
  .faq-item,
  .sohub-header,
  #site-menu,
  #site-menu .wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .floating-cubes-bg {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .tm-home-shell main > section,
  .tm-home-shell .home-projects,
  .tm-home-shell .home-services,
  .tm-home-shell .home-cta,
  .tm-home-shell .home-footer {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .project-card img,
  .home-cta-art img,
  #hero-cat {
    image-rendering: auto;
  }
}

/* FAQ page polish */
body.inner-page .faq-hero {
  padding-top: clamp(6.5rem, 11vw, 10rem) !important;
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
}

body.inner-page .faq-hero-sub {
  max-width: 54rem !important;
}

body.inner-page .faq-section {
  max-width: 1120px !important;
  padding-bottom: clamp(3.5rem, 6vw, 5rem) !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body.inner-page .faq-list {
  counter-reset: faq;
  display: grid !important;
  gap: clamp(0.9rem, 1.5vw, 1.15rem) !important;
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}

body.inner-page .faq-item {
  counter-increment: faq;
  border-radius: clamp(18px, 2vw, 24px) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 246, 255, 0.82)) !important;
  border: 1px solid rgba(131, 46, 255, 0.12) !important;
  box-shadow: 0 16px 42px rgba(54, 26, 99, 0.08) !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

body.inner-page .faq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #832eff, #2aabee);
  opacity: 0;
  transition: opacity 0.28s ease;
}

body.inner-page .faq-item:hover,
body.inner-page .faq-item.is-open {
  transform: translateY(-2px) !important;
  border-color: rgba(131, 46, 255, 0.28) !important;
  box-shadow: 0 22px 54px rgba(54, 26, 99, 0.13) !important;
}

body.inner-page .faq-item.is-open::before {
  opacity: 1;
}

body.inner-page .faq-btn {
  min-height: 82px !important;
  padding: clamp(1.05rem, 2vw, 1.45rem) clamp(1rem, 2.8vw, 1.7rem) !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: clamp(0.75rem, 1.5vw, 1.15rem) !important;
  align-items: center !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1rem, 1.75vw, 1.28rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body.inner-page .faq-btn::before {
  content: counter(faq, decimal-leading-zero);
  width: clamp(2.25rem, 4vw, 3rem);
  height: clamp(2.25rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(131, 46, 255, 0.08);
  border: 1px solid rgba(131, 46, 255, 0.12);
  color: #6f42c6;
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.inner-page .faq-icon-wrap {
  width: clamp(2.45rem, 4vw, 3rem) !important;
  height: clamp(2.45rem, 4vw, 3rem) !important;
  margin-left: 0 !important;
  background: #efe2ff !important;
  border: 1px solid rgba(131, 46, 255, 0.12);
}

body.inner-page .faq-content {
  border-top: 1px solid transparent;
}

body.inner-page .faq-item.is-open .faq-content {
  border-top-color: rgba(131, 46, 255, 0.1);
}

body.inner-page .faq-text {
  padding: 0 clamp(1rem, 2.8vw, 1.7rem) clamp(1.25rem, 2.4vw, 1.75rem) calc(clamp(1rem, 2.8vw, 1.7rem) + clamp(3rem, 5.5vw, 4.15rem)) !important;
  max-width: 58rem !important;
  font-size: clamp(0.94rem, 1.25vw, 1.05rem) !important;
  line-height: 1.72 !important;
  color: #5d4f78 !important;
}

body.inner-page .faq-cta-section {
  padding-top: clamp(0.5rem, 2vw, 1.5rem) !important;
}

@media (max-width: 640px) {
  body.inner-page .faq-btn {
    grid-template-columns: 1fr auto !important;
    min-height: 70px !important;
  }

  body.inner-page .faq-btn::before {
    display: none;
  }

  body.inner-page .faq-text {
    padding-left: clamp(1rem, 2.8vw, 1.7rem) !important;
  }
}

/* Mobile containment pass */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body,
  main,
  .page-wrapper,
  .inner-page-wrapper,
  .tm-home-shell,
  .tm-home-shell main,
  .tm-home-shell .home-redesign {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  body.inner-page :is(section, .inner-container, .work-container, .faq-section, .audit-section, .process-section, .reviews-section, .blog-section, .contact-section) {
    width: min(100% - 1rem, 720px) !important;
    max-width: calc(100vw - 1rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.inner-page :is(h1, h2, h3, p, a, button, .wk-hero-title, .faq-hero-title, .audit-hero-title, .process-hero-title, .reviews-hero-title, .blog-hero-title, .contact-hero-title) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  body.inner-page :is(.work-card, .project-card, .faq-item, .audit-panel, .audit-glass-panel, .process-card, .review-card, .blog-card, .contact-card, .premium-card) {
    max-width: calc(100vw - 1rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  body.inner-page :is(.work-grid, .portfolio-grid, .process-grid, .review-grid, .blog-grid, .contact-grid, .audit-grid) {
    grid-template-columns: 1fr !important;
    gap: clamp(1rem, 4vw, 1.5rem) !important;
  }

  body.inner-page :is(.btn, .button, .cta-button, .home-cta-btn, button, [role="button"]) {
    min-height: 44px;
    touch-action: manipulation;
  }
}