/* 
 * BizWiz Digital Agency - Core UI/UX Design System 
 * Based on Breezify Extracted Guidelines
 */

:root {
  /* Surface Colors */
  --color-surface-base: #000000;
  --color-surface-muted: #ffffff;
  --color-surface-strong: #3d3d3d;
  
  /* Text and Border Colors */
  --color-text-inverse: #1e1e1e;
  --color-border-muted: #1f1f1f;
  
  /* Typography */
  --font-family-primary: 'Inter Tight', sans-serif;
  --font-family-heading: 'Rowdies', sans-serif;
  --font-family-mono: 'DM Mono', monospace;
  --font-size-base: 17.6px;
  --font-weight-base: 400;
  --font-line-height-base: 21.12px;
  
  /* Typography Scale */
  --font-size-xs: 12.8px;
  --font-size-sm: 14.4px;
  --font-size-md: 17.6px;
  --font-size-lg: 24px;
  --font-size-xl: 28.16px;
  --font-size-2xl: 44px;
  --font-size-3xl: 56px;
  --font-size-4xl: 83.2px;

  /* Spacing Scale */
  --space-1: 3.52px;
  --space-2: 4.8px;
  --space-3: 5.63px;
  --space-4: 7.2px;
  --space-5: 12.32px;
  --space-6: 16px;
  --space-7: 17.6px;
  --space-8: 22.88px;

  /* Geometry & Motion */
  --radius-xs: 12px;
  --radius-sm: 35.2px;
  --radius-md: 36px;
  --radius-lg: 44px;
  --radius-xl: 50px;
  
  --motion-instant: 200ms;
  --motion-fast: 600ms;
}

/* ==================================================
 * Global Dark Mode Application
 * ================================================== */

body, html, main, .content {
  background-color: var(--color-surface-base) !important;
  color: var(--color-surface-muted) !important;
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--font-line-height-base) !important;
}

/* Mulish for general small UI text */
.partenr-job, .small-text-title, .service-card-header-text,
.menu-text, .footer-link, .nav-link {
  font-family: 'Mulish', sans-serif !important;
}

/* ---- Heading / Display Typography (Rowdies) ---- */
h1, h2, h3,
.home-large-title, .custom-large-h2-title,
.animation-text, .animation-text-second-version,
.nav-animation-text, .section-title {
  color: var(--color-surface-muted) !important;
  font-family: var(--font-family-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Sub-headings (Inter Tight bold) */
h4, h5, h6, .works-title {
  color: var(--color-surface-muted) !important;
  font-family: var(--font-family-primary) !important;
  font-weight: 700 !important;
}

/* DM Mono for code-like / tag elements */
.animation-text-second-version.size--small.is--font-inter {
  font-family: var(--font-family-mono) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em;
}

p, .hero-p-new, .service-desc, .partner-p, .text-size-medium {
  color: #bababa !important; /* Soft grey for readable body text */
}

/* ==================================================
 * Layout & Containers
 * ================================================== */

.navbar, .navbar-wrapper, .drop-menu {
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--color-border-muted) !important;
}

.service-card, .partner-box, .circle-wrapper, .drop-menu-navigation-box {
  background-color: var(--color-surface-strong) !important;
  border: 1px solid var(--color-border-muted) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--motion-fast) ease !important;
}

.works-collection-item {
  background-color: transparent !important;
  border: none !important;
  transition: all var(--motion-fast) ease !important;
}

.service-card:hover, .partner-box:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.works-collection-item:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ==================================================
 * Interactive Components (Buttons & Links)
 * ================================================== */

.global-button, .btn-primary, .menu-link, .footer-nav-link {
  font-family: var(--font-family-primary) !important;
  background-color: var(--color-surface-muted) !important;
  color: var(--color-text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--motion-instant) ease-in-out !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.global-button:hover, .btn-primary:hover, .menu-toggle-wrapper:hover {
  background-color: var(--color-surface-strong) !important;
  color: var(--color-surface-muted) !important;
  border: 1px solid var(--color-surface-muted) !important;
}

/* Special Outline Links */
.menu-link {
  background-color: transparent !important;
  color: var(--color-surface-muted) !important;
}
.menu-link:hover {
  color: #bababa !important;
  border: none !important;
}

/* Navigation Arrow overrides */
.nav-arrow {
  color: var(--color-surface-muted) !important;
}

/* Menu Text */
.menu-text {
  color: var(--color-surface-muted) !important;
}

/* Custom Title Pink Block adjustment */
.custom-title-pink-block {
  background-color: var(--color-surface-strong) !important;
  border: 1px solid var(--color-border-muted) !important;
  border-radius: var(--radius-sm) !important;
}

/* Accessibility Focus States */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-surface-muted) !important;
  outline-offset: 2px !important;
}

/* Form Inputs */
.checkout-input, input[type="text"], input[type="email"], textarea {
  background-color: var(--color-surface-base) !important;
  border: 1px solid var(--color-border-muted) !important;
  color: var(--color-surface-muted) !important;
  border-radius: var(--radius-xs) !important;
}

/* Removing any original pseudo-element white gradients */
.hero::before, .menu-animation-white-bg {
  background: none !important;
  display: none !important;
}

/* Hide Made in Webflow badge */
.w-webflow-badge {
  display: none !important;
}

/* ==================================================
 * Service Card Pill Text — Force dark color so text
 * is visible on white pill backgrounds
 * ================================================== */
.service-card-feature-item,
.service-card-feature-item div,
.service-card-feature-item span {
  color: #1a1a1a !important;
}

/* ==================================================
 * Our Clients — circle card images fill box fully
 * ================================================== */
.circle-image-wrapper,
.circle-image-wrapper.large,
.circle-image-wrapper.large.three,
.circle-image-wrapper.large.four,
.circle-image-wrapper.large.five,
.circle-image-wrapper.large.six,
.circle-image-wrapper.large.seven,
.circle-image-wrapper.large.eight,
.circle-image-wrapper.large.nine,
.circle-image-wrapper.large.ten,
.circle-image-wrapper.large.eleven,
.circle-image-wrapper.large.twelve,
.circle-image-wrapper.large.thirteen,
.circle-image-wrapper.large.fourteen,
.circle-image-wrapper.large.fifteen {
  overflow: hidden !important;
  border-radius: 12px !important;
  padding: 0 !important;
}

.circle-image-wrapper .hero-image,
.circle-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}