/* Site-wide custom styles */
:root { --primary-rgb: 0,112,215; }
:root {
  --brand-600: #0B5FFF;
  --brand-700: #0A53E4;
  --ink: #111111;
  --ink-dim: #1f2937;
}

/* Spacing under titles (padding avoids margin-collapsing) */
section h1, section h2, section h3 { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
@media (min-width: 768px) {
  section h1, section h2, section h3 { margin-bottom: 1.5rem; padding-bottom: 0.75rem; }
}

/* Subtle primary tint for card-like boxes used across the site */
.rounded-2xl.border.bg-white,
.rounded-2xl.border.border-slate-200.bg-white,
.rounded-2xl.border.bg-slate-50,
.rounded-2xl.border.border-slate-200.bg-slate-50 {
  background-color: rgba(var(--primary-rgb), 0.07);
  border-color: rgba(var(--primary-rgb), 0.25);
}

/* Header brand logo (CSS/HTML logo) */
.brand-logo{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(22px, 3.2vw, 32px);
  display: inline-flex; align-items: center; gap: 12px;
  line-height: 1;
}
.brand-logo .cnc-box{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border-radius: 12px;
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  color: #fff; font-weight: 900; letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.18);
  text-shadow: none;
}
/*
.brand-logo .logo-text{ color: #000000; font-weight: 800; letter-spacing: .2px; }
.brand-logo .logo-text .pro{ color: var(--brand-600); font-weight: 900; }
*/
/* replace old .logo img rules */
.brand-logo svg { width: 264px; height: 52px; display: block; }


/* Utilities */
/* Consistent size for inline SVG icons used in feature cards */
.feature-icon{
  font-size: 1.25rem; /* 20px */
  line-height: 1;     /* tight */
  display: inline-block;
}

/* Hero scrim = reliable contrast on any image */
#hero .swiper-slide { position: relative; }
#hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,.28));
  pointer-events: none;
  z-index: 1;
}
/* Text above scrim + subtle halo */
#hero .overlay { z-index: 2; }
#hero .overlay :is(h1,h2,p){ text-shadow: 0 2px 8px rgba(0,0,0,.45); }


/* Slightly lighter on wider screens */
@media (min-width: 768px) {
  #hero .swiper-slide::after {
    background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.2));
  }
}