/* ============================================
   ORLOFF.STUDIO — DESIGN FIXES
   Loaded AFTER inline styles to override them
   ============================================ */

/* --- CUSTOM EASING VARIABLES --- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* FONT SWAP: Kill Inter + Roboto Mono, use Manrope as body */
  --font-family: "Manrope", sans-serif;
  --second-family: "Manrope", sans-serif;
  --third-family: "Craftwork Grotesk", "Manrope", sans-serif;
}

/* --- OFF-BLACK: Replace all #000 with warm off-black --- */
body {
  background: #09090b !important;
  font-family: var(--font-family) !important;
}

.advantages,
.process,
.why,
footer,
.modal-inner,
.book-item,
.mobile-menu,
.cta-section {
  background-color: #09090b !important;
}

/* Rounded caps — off-black */
.advantages::before,
.process::before,
.why::before,
footer::before,
.cta-section::before,
.cases-section::before {
  background: #09090b !important;
}

/* Cards background — slightly lighter off-black */
.advantages-item:not(:first-child) {
  background: #0d0d12 !important;
}

/* White sections — soft off-white */
.problems,
.book,
.testimonials {
  background-color: #fafafa !important;
}
.problems::before,
.book::before,
.testimonials::before {
  background: #fafafa !important;
}

/* Footer card */
footer .footer__top-info {
  background: #13131a !important;
}

/* Process item dark layer gradient — match off-black */
.process-item__image-dark__layer {
  background: linear-gradient(0deg, #09090b 0%, rgba(9, 9, 11, 0) 100%) !important;
}

/* Blue layer gradient — match blue */
.blue-layer {
  background: linear-gradient(0deg, #313FFE 0%, rgba(49, 63, 254, 0) 100%) !important;
}

/* --- TYPOGRAPHY: Line length + hierarchy --- */
.section-description,
.hero-description,
.why-inner .section-description,
.book .section-description,
footer .footer__info-text,
.modal-subtitle,
.modal-disclaimer {
  max-width: 65ch;
}

.hero-description,
.why-inner .section-description {
  margin-left: auto;
  margin-right: auto;
}

/* Better body text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- BUTTON TACTILE FEEDBACK --- */
.btn,
.hamburger,
footer .footer__info-link a,
.header__link,
a[data-modal-target] {
  transition: transform 160ms var(--ease-out), 
              background-color 200ms var(--ease-out), 
              color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              opacity 200ms var(--ease-out) !important;
}

.btn:active,
.hamburger:active,
footer .footer__info-link a:active,
a[data-modal-target]:active {
  transform: scale(0.97) !important;
}

/* Kill the lazy opacity hover on primary btn */
.btn:hover {
  opacity: 1 !important;
}

.btn--primary:hover {
  background-color: #d4e04d !important;
  opacity: 1 !important;
}

/* --- CARD HOVER STATES --- */
@media (hover: hover) and (pointer: fine) {
  .advantages-item,
  .process-item,
  .why-item,
  .book-item {
    transition: transform 300ms var(--ease-out), 
                box-shadow 300ms var(--ease-out) !important;
  }

  .advantages-item:hover,
  .why-item:hover {
    transform: translateY(-6px) !important;
  }

  .process-item:hover,
  .book-item:hover {
    transform: translateY(-4px) !important;
  }
  
  /* Subtle glow on card hover */
  .advantages-item:hover,
  .process-item:hover,
  .why-item:hover,
  .book-item:hover {
    box-shadow: 0 16px 48px -12px rgba(230, 243, 85, 0.08);
  }
}

/* --- NAV: Fix transitions --- */
.nav__inner.desk,
.nav__inner.mobile-bar {
  transition: background-color 200ms var(--ease-out) !important;
}

/* Desktop nav links — override inline styles via higher specificity */
#desktop-nav ul li a {
  font-family: var(--second-family) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: color 150ms var(--ease-out) !important;
}

#desktop-nav ul li a:hover {
  color: #e6f355 !important;
}

/* Active page link */
#desktop-nav ul li a[style*="color:#e6f355"],
#desktop-nav ul li a[style*="color: #e6f355"] {
  color: #e6f355 !important;
}

/* Book a Call nav button — override inline */
#desktop-nav > a[data-modal-target] {
  font-family: var(--second-family) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #e6f355 !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out) !important;
}

#desktop-nav > a[data-modal-target]:hover {
  background: #e6f355 !important;
  color: #232332 !important;
}

/* --- DROPDOWN: Fix ease-in → ease-out --- */
.submenu__wrapp {
  transition: opacity 150ms var(--ease-out), 
              transform 150ms var(--ease-out), 
              visibility 150ms var(--ease-out) !important;
}

/* Contacts dropdown — also fix */
#contacts-drop {
  transition: opacity 150ms var(--ease-out), 
              transform 150ms var(--ease-out) !important;
}

/* --- MODAL ANIMATIONS --- */
.modal-hm {
  transition: opacity 200ms var(--ease-out) !important;
  opacity: 0;
}

.modal-hm.active {
  opacity: 1;
}

.modal-inner {
  background: #09090b !important;
  transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out) !important;
  transform: scale(0.95);
  opacity: 0;
}

.modal-hm.active .modal-inner {
  transform: scale(1);
  opacity: 1;
}

/* Overlay — soft fade */
.overlay-modal {
  background: rgba(9, 9, 11, 0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 200ms var(--ease-out) !important;
  opacity: 0;
}

.overlay-modal.active {
  opacity: 1;
}

/* --- MOBILE MENU: Animate instead of teleport --- */
.mobile-menu {
  background: #09090b !important;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out) !important;
  pointer-events: none;
  display: flex !important;
  visibility: hidden;
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* --- STICKY HEADER: Use transform not top --- */
header {
  transition: transform 200ms var(--ease-out) !important;
  will-change: transform;
}

/* --- STAGGER ANIMATIONS: Replace AOS with CSS --- */
/* Base state for stagger elements */
[data-aos] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out) !important;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for card groups */
.advantages-item:nth-child(1) { transition-delay: 0ms !important; }
.advantages-item:nth-child(2) { transition-delay: 80ms !important; }
.advantages-item:nth-child(3) { transition-delay: 160ms !important; }

.problems-item:nth-child(1) { transition-delay: 0ms !important; }
.problems-item:nth-child(2) { transition-delay: 60ms !important; }
.problems-item:nth-child(3) { transition-delay: 120ms !important; }
.problems-item:nth-child(4) { transition-delay: 180ms !important; }

.process-item:nth-child(1) { transition-delay: 0ms !important; }
.process-item:nth-child(2) { transition-delay: 80ms !important; }
.process-item:nth-child(3) { transition-delay: 160ms !important; }
.process-item:nth-child(4) { transition-delay: 240ms !important; }

.why-item:nth-child(1) { transition-delay: 0ms !important; }
.why-item:nth-child(2) { transition-delay: 60ms !important; }
.why-item:nth-child(3) { transition-delay: 120ms !important; }
.why-item:nth-child(4) { transition-delay: 180ms !important; }
.why-item:nth-child(5) { transition-delay: 240ms !important; }
.why-item:nth-child(6) { transition-delay: 300ms !important; }
.why-item:nth-child(7) { transition-delay: 360ms !important; }
.why-item:nth-child(8) { transition-delay: 420ms !important; }

.book-item:nth-child(1) { transition-delay: 0ms !important; }
.book-item:nth-child(2) { transition-delay: 80ms !important; }
.book-item:nth-child(3) { transition-delay: 160ms !important; }
.book-item:nth-child(4) { transition-delay: 240ms !important; }

/* Partners marquee — slightly softer */
.partners-marquee-track {
  animation: marquee-scroll 35s linear infinite;
}

/* --- INPUT FOCUS: Better transitions --- */
.input-wrap input {
  font-family: var(--second-family) !important;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out) !important;
}

.input-wrap input:focus {
  border-color: #e6f355 !important;
  box-shadow: 0 0 0 3px rgba(230, 243, 85, 0.12);
}

/* Checkbox — fix transition: all */
.checkmark {
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out) !important;
}

/* --- FOOTER: Fix muted text contrast --- */
footer .footer__bottom-copy,
footer .footer__bottom-link {
  color: #8a8a9a !important;
}

footer .footer__info-text {
  color: #b0b3c4 !important;
}

/* --- ACCENT HIERARCHY: Yellow only on primary CTAs --- */
/* Nav links use white → soft gray on hover, not yellow */
.menu-items > li > a:hover,
.socials a:hover {
  color: #cacddc !important;
}

/* Footer links — subtle gray hover, not yellow */
footer .footer__partition-link:hover {
  color: #e6f355 !important;
}

/* --- REDUCED MOTION --- */
@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;
  }
  
  .partners-marquee-track {
    animation: none !important;
  }
}

/* --- CASES PAGE: Off-black fixes --- */
.cases-section {
  background: #09090b !important;
}

.cases-section::before {
  background: #09090b !important;
}

/* --- ABOUT PAGE: Team cards hover --- */
@media (hover: hover) and (pointer: fine) {
  .team-card,
  .step-card,
  .value-card,
  .service-card {
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out) !important;
  }
  
  .team-card:hover,
  .step-card:hover,
  .value-card:hover,
  .service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px -12px rgba(230, 243, 85, 0.06);
  }
}

/* --- SCROLLBAR: Styled for dark theme --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #2a2a3a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a4a;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #2a2a3a #09090b;
}

/* --- SELECTION COLOR --- */
::selection {
  background: rgba(230, 243, 85, 0.25);
  color: #fff;
}

/* --- MODAL DISPLAY FIX: Use visibility instead of display for transitions --- */
.modal-hm {
  display: flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.modal-hm.active {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.overlay-modal {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.overlay-modal.active {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}