/* ============================================
   MINIMAL RESPONSIVE FIXES FOR COUNTWIZE
   Preserves original design while fixing critical issues
   ============================================ */

/* ============================================
   CRITICAL: PREVENT HORIZONTAL SCROLL
   ============================================ */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.wrapper-page,
.main-wrapper,
.page-wrapper {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ============================================
   CRITICAL: BUTTON VISIBILITY FIX
   ============================================ */

/* Ensure hero button is visible and centered */
.hero-header-wrapper .hero-button-wrapper {
  opacity: 1 !important;
  position: static !important;
  display: flex !important;
  margin: 30px auto 0;
}

@media screen and (max-width: 991px) {
  .hero-header-wrapper .hero-button-wrapper {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   CRITICAL: SKIP LINK ACCESSIBILITY
   ============================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   MINIMAL: TEXT OVERFLOW PREVENTION
   Only for very small screens where text breaks
   ============================================ */

@media screen and (max-width: 479px) {
  /* Only prevent text from breaking mid-word on very small screens */
  .hero-heading,
  .section-heading {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  
  /* Ensure containers don't overflow */
  .w-container,
  .container-23,
  .container-24 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ============================================
   MINIMAL: FORM RESPONSIVENESS
   Only stack forms on mobile
   ============================================ */

@media screen and (max-width: 767px) {
  .hero-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   PROFESSIONAL FORM IMPROVEMENTS
   ============================================ */

/* Make placeholder text more subtle and professional */
.hero-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important; /* Changed from full white to 50% opacity */
  opacity: 0.6 !important;
  font-size: 14px;
}

/* Keep labels accessible but hide visually for clean layout */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Improve form field spacing for professional look */
.hero-form-row {
  grid-column-gap: 20px !important; /* Increased from 15px */
  grid-row-gap: 20px !important; /* Increased from 15px */
}

/* Ensure form maintains 2-column layout on desktop - professional layout */
@media screen and (min-width: 768px) {
  .hero-form-row {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    grid-column-gap: 20px !important;
    grid-row-gap: 20px !important;
  }
  
  /* Ensure form fields don't stack on desktop */
  .hero-form-field-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* On larger screens, ensure proper spacing */
@media screen and (min-width: 992px) {
  .hero-form-row {
    grid-column-gap: 24px !important;
  }
}

/* Better form field appearance */
.hero-form-field-wrapper {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.hero-form-field-wrapper:focus-within {
  border-color: rgba(187, 238, 196, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================
   VIDEO LOGO FIXES
   ============================================ */

/* Make video player logo background transparent */
.video-wrapper .vimeo-logo,
.video-wrapper .embedly-logo,
.video-wrapper iframe[src*="vimeo"] + *,
.code-embed-5 .w-embed iframe + * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Hide duplicate logo/branding in video player */
.video-wrapper .vimeo-branding,
.video-wrapper .embedly-branding,
.video-wrapper .player-logo,
.video-wrapper .vimeo-watermark,
.video-wrapper .embedly-watermark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide Vimeo logo/branding overlay */
.video-wrapper iframe[src*="vimeo"]::after,
.code-embed-5 iframe[src*="vimeo"]::after {
  content: none !important;
  display: none !important;
}

/* Ensure video iframe has transparent background */
.video-wrapper iframe,
.code-embed-5 iframe,
.w-embed iframe {
  background-color: transparent !important;
}

/* Hide any overlay elements in video containers */
.video-wrapper > *:not(iframe),
.code-embed-5 > *:not(iframe) {
  background-color: transparent !important;
}

/* Specific fix for Vimeo embed branding */
.embedly-embed,
.embedly-embed * {
  background-color: transparent !important;
}

.embedly-embed .embedly-card,
.embedly-embed .embedly-card-hug {
  background: transparent !important;
}

/* ============================================
   VIDEO LIGHTBOX BLACK BACKGROUND FIX
   Remove black background from video lightbox/embedly
   ============================================ */

/* Fix black background in video lightbox */
.w-lightbox-backdrop {
  background-color: rgba(0, 0, 0, 0.85) !important; /* Semi-transparent dark overlay */
}

.w-lightbox-view {
  background-color: transparent !important;
  background: transparent !important;
}

.w-lightbox-content {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix embedly card black background */
.embedly-embed,
.embedly-embed iframe,
.embedly-card,
.embedly-card-hug,
.embedly-card-hug * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix any black backgrounds in video containers */
.video-wrapper,
.code-embed-5,
.w-embed,
.w-embed iframe,
.w-iframe {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix div-block-292 (video play button container) black background */
.div-block-292 {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix div-block-291 (video text container) black background */
.div-block-291 {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix hero-alternative-heading-wrapper black background */
.hero-alternative-heading-wrapper {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix any black backgrounds in hero form wrapper */
.hero-form-wrapper {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix video play button images - ensure no black backgrounds */
.image-98,
.image-99 {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix w-lightbox link container */
.w-lightbox,
a.w-lightbox,
a.w-inline-block.w-lightbox {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fix any parent containers that might have black backgrounds */
.hero-content-wrapper,
.hero-wrapper {
  background-color: transparent !important;
  background: transparent !important;
}

/* ============================================
   VIDEO SECTION - FIX LIGHT CUTTING
   Prevent circle-wrapper from cutting into video
   ============================================ */

/* Hide circle-wrapper before video section to prevent cutting */
/* Using :has() selector for modern browsers */
.section:has(.crypto-asset-recovery-wrapper) .circle-wrapper,
.section .crypto-asset-recovery-wrapper ~ .circle-wrapper {
  display: none !important; /* Hide if causing light cutting */
}

/* Fallback: Direct targeting - hide circle-wrapper that comes before video section */
.crypto-asset-recovery-wrapper ~ .circle-wrapper,
.section > .circle-wrapper._220 {
  display: none !important;
}

/* Ensure video wrapper doesn't get cut by light */
.video-wrapper,
.crypto-asset-recovery-wrapper {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* ============================================
   RECOVERY TEAM SECTION - FIX EMPTY LIGHT SECTION
   Remove empty light section between team and next section
   ============================================ */

/* Remove empty light section between team and next section */
/* Using :has() selector for modern browsers */
.section:has(.team-members-wrapper) .circle-wrapper:last-of-type,
.section:has(.experts-team-wrapper) .circle-wrapper:last-of-type,
.section:has(.team-members-wrapper) ~ .circle-wrapper,
.section:has(.experts-team-wrapper) ~ .circle-wrapper {
  display: none !important; /* Hide the empty light section */
}

/* Fallback: Direct targeting - hide circle-wrapper after team section */
.experts-team-wrapper ~ .circle-wrapper,
.team-members-wrapper ~ .circle-wrapper,
.section .experts-team-wrapper + * + .circle-wrapper {
  display: none !important;
}

/* Ensure smooth transition from team to next section */
.section:has(.team-members-wrapper),
.section:has(.experts-team-wrapper) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.section:has(.team-members-wrapper) + .section,
.section:has(.experts-team-wrapper) + .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================
   BACKGROUND HARMONY: PERFECT BLACK MATCH
   Ensure gray sections match other sections exactly
   ============================================ */

/* Remove any wrapper backgrounds that might cause color shifts */
.wrapper-page,
.div-block-123 {
  background-color: transparent !important;
  background: transparent !important;
}

/* CRITICAL: Match body-4 background exactly */
/* body-4 has: background-color: var(--_redesign-style---black) = #050505 */
/* Plus background images: Ellipse-12.webp and Ellipse-13.webp */
/* Regular sections show this - gray sections must match exactly */
html body.body-4 .section.gray,
html body .section.gray,
body.body-4 .section.gray,
body .section.gray,
.section.gray {
  /* Match body-4 background exactly */
  background-color: var(--_redesign-style---black) !important; /* #050505 - matches body-4 */
  background: var(--_redesign-style---black) !important;
  /* Include body-4 background images to match exactly */
  background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
  background-position: 0%, 100% 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto, auto !important;
  background-attachment: scroll, scroll !important;
  border-top: none !important;
  border-bottom: none !important;
  /* Remove any overlays or filters that might cause blue tint */
  filter: none !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* Gray section etr-1: Match body-4 background exactly */
html body.body-4 .section.gray.etr-1,
html body .section.gray.etr-1,
body.body-4 .section.gray.etr-1,
body .section.gray.etr-1,
.section.gray.etr-1 {
  background-color: var(--_redesign-style---black) !important; /* #050505 - matches body-4 */
  background: var(--_redesign-style---black) !important;
  /* Include body-4 background images, remove ethereum */
  background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
  background-position: 0%, 100% 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto, auto !important;
  background-attachment: scroll, scroll !important;
  border-top: none !important;
  border-bottom: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* Gray section etr-2: Match body-4 background exactly */
html body.body-4 .section.gray.etr-2,
html body .section.gray.etr-2,
body.body-4 .section.gray.etr-2,
body .section.gray.etr-2,
.section.gray.etr-2 {
  background-color: var(--_redesign-style---black) !important; /* #050505 - matches body-4 */
  background: var(--_redesign-style---black) !important;
  /* Include body-4 background images, remove ethereum */
  background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
  background-position: 0%, 100% 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto, auto !important;
  background-attachment: scroll, scroll !important;
  border-top: none !important;
  border-bottom: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* Override any media query rules - match body-4 in all breakpoints */
@media screen and (min-width: 768px) {
  html body.body-4 .section.gray,
  html body .section.gray,
  body.body-4 .section.gray,
  body .section.gray,
  .section.gray {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  
  html body.body-4 .section.gray.etr-1,
  html body .section.gray.etr-1,
  body.body-4 .section.gray.etr-1,
  body .section.gray.etr-1,
  .section.gray.etr-1 {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  
  html body.body-4 .section.gray.etr-2,
  html body .section.gray.etr-2,
  body.body-4 .section.gray.etr-2,
  body .section.gray.etr-2,
  .section.gray.etr-2 {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

@media screen and (max-width: 991px) {
  html body.body-4 .section.gray,
  html body .section.gray,
  body.body-4 .section.gray,
  body .section.gray,
  .section.gray {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  
  html body.body-4 .section.gray.etr-1,
  html body .section.gray.etr-1,
  body.body-4 .section.gray.etr-1,
  body .section.gray.etr-1,
  .section.gray.etr-1 {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
  
  html body.body-4 .section.gray.etr-2,
  html body .section.gray.etr-2,
  body.body-4 .section.gray.etr-2,
  body .section.gray.etr-2,
  .section.gray.etr-2 {
    background-color: var(--_redesign-style---black) !important;
    background: var(--_redesign-style---black) !important;
    background-image: url('../images/Ellipse-12.webp'), url('../images/Ellipse-13.webp') !important;
    background-position: 0%, 100% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: auto, auto !important;
    border-top: none !important;
    border-bottom: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================
   SMOOTH SECTION TRANSITIONS
   Beautiful seamless transitions between sections
   ============================================ */

/* Smooth transition effect for all sections */
.section {
  transition: background-color 0.6s ease, background 0.6s ease;
}

/* Remove any pseudo-elements that might interfere */
.section.gray::before,
.section.gray::after {
  display: none !important;
  content: none !important;
}

/* ============================================
   CONTAINER PADDING CONSISTENCY
   Ensure gray sections align with other sections
   ============================================ */

/* Ensure container-24 has consistent padding structure */
.container-24 {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

@media screen and (max-width: 991px) {
  .container-24 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

@media screen and (max-width: 767px) {
  .container-24 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================
   WHITE LIGHT CIRCLES - REFINED & SUBTLE
   Beautiful, professional glow effect
   ============================================ */

/* Refine circle-block for gray sections - more subtle and professional */
.section.gray .circle-block {
  background-color: rgba(255, 255, 255, 0.15) !important; /* More subtle white */
  opacity: 0.25 !important; /* Reduced from 0.4 for subtlety */
  filter: blur(120px) !important; /* Softer blur */
  width: 350px !important; /* Slightly larger for better coverage */
  height: 350px !important;
  border-radius: 50% !important;
  /* Ensure it's behind content */
  z-index: -1 !important;
  /* Smooth fade */
  transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Position circle-wrapper for optimal placement */
.section.gray .circle-wrapper {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Ensure circle doesn't interfere with section background */
.section.gray .circle-wrapper,
.section.gray .circle-block {
  mix-blend-mode: normal !important;
}

/* ============================================
   SUPPORTED PLATFORMS SECTION - INTEGRATED
   Professional placement within "What is Crypto Recovery?" section
   ============================================ */

/* Integrated styling - placed after crypto recovery cards */
.supported-and-recovery-wrapper .supported-platforms-wrapper {
  margin-top: 60px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 32px !important;
}

.supported-platforms-heading {
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 140% !important; /* Increased from 130% to prevent overlap */
  color: var(--_redesign-style---white) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.supported-platforms-logos-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  align-items: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.supported-platforms-logos-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.supported-platforms-logo-item {
  transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease !important;
  background-color: rgba(5, 11, 12, 0.6) !important; /* Subtle dark background */
  border: 1px solid rgba(187, 238, 196, 0.3) !important; /* Subtle green border */
  border-radius: 10px !important;
  padding: 12px 20px !important;
  backdrop-filter: blur(7px) !important;
  min-width: 120px !important;
  min-height: 60px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.supported-platforms-logo-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(187, 238, 196, 0.6) !important;
  background-color: rgba(5, 11, 12, 0.8) !important;
}

.supported-platforms-logos-line {
  background-color: rgba(187, 238, 196, 0.3) !important; /* Subtle green lines */
  border-radius: 100px !important;
  width: 28px !important;
  height: 2px !important;
}

/* Ensure logo images don't overlap text */
.supported-platforms-logo-image {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Fix line spacing between rows */
.supported-platforms-logos-line-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 8px 0 !important;
}

@media screen and (max-width: 767px) {
  .supported-and-recovery-wrapper .supported-platforms-wrapper {
    margin-top: 40px !important;
    gap: 24px !important;
  }
  
  .supported-platforms-heading {
    font-size: 24px !important;
    line-height: 130% !important;
    margin-bottom: 20px !important;
  }
  
  .supported-platforms-logos-row {
    gap: 16px !important;
  }
  
  .supported-platforms-logo-item {
    padding: 10px 16px !important;
    min-width: 100px !important;
    min-height: 50px !important;
  }
}

/* ============================================
   HIDE OLD DECORATIVE LINES
   Remove duplicate lines from original design
   ============================================ */

/* Hide old decorative line images */
.image-51,
.image-53,
.image-58,
.image-64,
.image-65,
.image-70,
.image-73 {
  display: none !important;
}

/* Hide old line-top-wrapper */
.line-top-wrapper {
  display: none !important;
}

/* Hide standalone line divs */
.line:not(.line.top) {
  display: none !important;
}

/* ============================================
   SECTION SEPARATORS - DISABLED
   Removed to prevent empty spaces
   ============================================ */

/* All section separators removed - they were causing empty space issues */

/* ============================================
   MINIMAL SPACING - Using original Webflow spacing
   ============================================ */

/* Don't override original section padding - let Webflow handle it */

/* ============================================
   SUPPORTED PLATFORMS - NEW DESIGN
   Horizontal single-row grid, professional layout
   ============================================ */

.supported-platforms-section {
  padding: var(--spacing-3xl) 0 !important; /* 80px */
}

.supported-platforms-wrapper-new {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--spacing-xl) !important; /* 48px */
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.supported-platforms-heading-new {
  text-align: center !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 140% !important;
  color: var(--_redesign-style---white) !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
}

.supported-platforms-logos-grid-new {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: var(--spacing-lg) !important; /* 32px */
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.supported-platform-logo-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-md) !important; /* 24px */
  background: rgba(5, 11, 12, 0.6) !important;
  border: 1px solid rgba(187, 238, 196, 0.2) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(8px) !important;
  min-height: 80px !important;
  text-decoration: none !important;
}

.supported-platform-logo-card:hover {
  transform: translateY(-4px) scale(1.05) !important;
  border-color: rgba(163, 220, 173, 0.6) !important;
  box-shadow: 0 8px 24px rgba(163, 220, 173, 0.2) !important;
  background: rgba(5, 11, 12, 0.8) !important;
}

.supported-platform-logo-image-new {
  max-width: 100% !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

/* Responsive adjustments */
@media screen and (max-width: 991px) {
  .supported-platforms-logos-grid-new {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-md) !important; /* 24px */
  }
  
  .supported-platforms-heading-new {
    font-size: 32px !important;
  }
}

@media screen and (max-width: 767px) {
  .supported-platforms-logos-grid-new {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-sm) !important; /* 16px */
  }
  
  .supported-platforms-heading-new {
    font-size: 28px !important;
  }
  
  .supported-platform-logo-card {
    min-height: 70px !important;
    padding: var(--spacing-sm) !important; /* 16px */
  }
  
  .supported-platform-logo-image-new {
    max-height: 50px !important;
  }
}

/* ============================================
   HIDE PLACEHOLDER IMAGES
   Temporarily hide placeholder images for professional look
   ============================================ */

/* Hide placeholder SVG images - replace with actual content later */
img[src*="placeholder.60f9b1840c.svg"] {
  display: none !important;
}

/* Hide parent containers if they only contain placeholders */
/* This prevents empty boxes from showing */
.source-logo-new:has(img[src*="placeholder"]) {
  display: none !important;
}

/* ============================================
   NON-FUNCTIONAL LINK FIX
   Style links with href="#" to look disabled
   ============================================ */

/* Make non-functional links look disabled instead of clickable */
a.link-doc[href="#"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(40%) !important;
}

/* Add "Coming Soon" indicator to non-functional document links */
a.link-doc[href="#"]::after {
  content: " (Coming Soon)" !important;
  font-size: 12px !important;
  color: rgba(163, 220, 173, 0.7) !important;
  font-style: italic !important;
  margin-left: 8px !important;
}

/* ============================================
   PROFESSIONAL BUTTON ENHANCEMENTS
   Smooth, polished button interactions
   ============================================ */

/* Ensure all buttons have smooth transitions */
.hero-alternative-button,
.navbar-contact-button,
.submit-button-2,
.pricing-card-button,
.crypto-easy-button-wrapper a,
button,
.w-button {
  transition: all 0.3s ease !important;
}

/* Improve button hover states for better UX */
.hero-alternative-button:hover,
.navbar-contact-button:hover,
.pricing-card-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(163, 220, 173, 0.3) !important;
}

/* Button active/pressed state for tactile feedback */
.hero-alternative-button:active,
.navbar-contact-button:active,
.pricing-card-button:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 6px rgba(163, 220, 173, 0.2) !important;
}

/* ============================================
   PROFESSIONAL CARD IMPROVEMENTS
   Consistent, polished card styling
   ============================================ */

/* Smooth card hover effects */
.card,
.pricing-card,
.team-member-card,
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover,
.pricing-card:hover,
.team-member-card:hover,
.service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   TYPOGRAPHY REFINEMENTS
   Better readability and hierarchy
   ============================================ */

/* Improve line height for better readability */
p, .card-description, .crypto-recovery-paragraph, .overview-description-paragraph {
  line-height: 1.7 !important;
}

/* Ensure headings have proper spacing */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem !important;
}

/* Better link styling */
a:not(.w-button):not(.w-inline-block) {
  transition: color 0.2s ease !important;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   Better focus states for keyboard navigation
   ============================================ */

/* Visible focus states for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(163, 220, 173, 0.6) !important;
  outline-offset: 2px !important;
}

/* Remove default focus outline only when replacing with custom */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
}

/* Enhanced focus-visible for modern browsers */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(163, 220, 173, 0.8) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(163, 220, 173, 0.2) !important;
}

/* ============================================
   SMOOTH SCROLLING
   Better user experience for anchor links
   ============================================ */

html {
  scroll-behavior: smooth !important;
}

/* ============================================
   IMAGE QUALITY IMPROVEMENTS
   Crisp, professional image rendering
   ============================================ */

img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   CRITICAL FIXES - ENSURE CONTENT IS VISIBLE
   Override opacity:0 inline styles that hide content
   ============================================ */

/* Force all animated elements to be visible */
[data-w-id],
[style*="opacity: 0"],
[style*="opacity:0"] {
  opacity: 1 !important;
}

/* Force cards and important elements to be visible */
.card,
.supported-platform-logo-card,
.services-overview-card,
.services-overview-image,
.crypto-recovery-card,
.team-member-card,
.pricing-card,
.lesson-slide,
.lessons-slider-mask {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================
   PHONE INPUT FIX
   Prevent flag from covering input text
   ============================================ */

/* Fix international phone input - flag and dial code covering text */
.iti {
  width: 100% !important;
  display: block !important;
}

.iti__flag-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

.iti__selected-flag {
  padding: 0 8px 0 12px !important;
  background: transparent !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* The dial code display - ensure it doesn't overflow */
.iti__selected-dial-code {
  margin-left: 6px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  }

/* Add left padding to input to make room for flag AND dial code */
.iti input,
.iti input[type="tel"],
input.phone-input,
input[name="phone"],
input[name="Phone"],
.hero-input[type="tel"],
.iti__tel-input {
  padding-left: 100px !important; /* More space for flag + dial code */
}

/* When separateDialCode is true, the iti adds extra elements */
.iti--separate-dial-code input {
  padding-left: 105px !important;
}

/* Ensure phone dropdown is visible and properly styled */
.iti__country-list {
  z-index: 999999 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background-color: #1a1a1a !important;
  border: 1px solid rgba(163, 220, 173, 0.3) !important;
  border-radius: 8px !important;
}

.iti__country-list::-webkit-scrollbar {
  width: 6px !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
  background: #a3dcad !important;
  border-radius: 3px !important;
}

/* ============================================
   TEAM MEMBER PHOTOS FIX
   Ensure photos are not cut off
   ============================================ */

.team-member-photo,
.team-member-image,
.member-photo {
  object-fit: cover !important;
  object-position: center top !important; /* Show face, not cut off */
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
}

/* Team member card - ensure proper aspect ratio */
.team-member-card {
  overflow: hidden !important;
}

.team-member-card .team-member-photo-wrapper {
  overflow: hidden !important;
  aspect-ratio: 3/4 !important;
}

/* ============================================
   REMOVE PROBLEMATIC HOVER ANIMATIONS
   Keep interactions simple and clean
   ============================================ */

/* Remove card icon rotation on hover - it looks weird */
.card:hover .card-icon-container,
.card:hover .card-icon-wrapper {
  transform: none !important;
}

/* Simple subtle hover for cards */
.card:hover,
.services-overview-card:hover {
  transform: translateY(-4px) !important;
}

/* ============================================
   LAYOUT FIXES
   ============================================ */

/* Ensure sections don't have excessive padding - use original Webflow values */
.section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Hero section - normal padding */
.section:first-of-type {
  padding-top: 0 !important;
  padding-bottom: 30px !important;
}

/* Gray sections */
.section.gray {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  }

/* Supported platforms section - reduce empty space */
.supported-platforms-section {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Supported platforms grid - ensure logos are visible */
.supported-platforms-logos-grid-new {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
}

.supported-platform-logo-card {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================
   COOKIE CONSENT BANNER FIX
   Position it better so it doesn't cover content
   ============================================ */

#cookie-banner-simple,
#cookie-banner-advanced {
  bottom: 20px !important;
  left: 20px !important;
  max-width: 320px !important;
  z-index: 999999 !important;
}

/* Ensure cookie banner doesn't overlap with content on mobile */
@media (max-width: 767px) {
  #cookie-banner-simple,
  #cookie-banner-advanced {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
}